pp
/
gulp-static-html
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 更新

Browse Source
2024
彭翩 9 months ago
parent a8d1202213
commit c275ff032b
27 changed files with 2120 additions and 130 deletions
Show Stats Download Patch File Download Diff File

34
src/end.html
Unescape Escape View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang=en>
<head>
@@include('./tpl/header.html')
<title>加盟</title>
<style>
body {
background-image: url('./static/img/bg6.jpg');
/* 替换为你的图片路径 */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.footer-box{
left: 0;
right: 0;
margin: 0 auto;
}
</style>
</head>
<body>
@@include('./tpl/logo2.html')
<div class="footer-box">
<img src="./static/img/tishi.png" class="footer-ti-shi" />
<div class="footer-title">您的信息已熟知，随后将由专业人员与您联系！</div>
</div>
</div>
</body>
<script type=text/javascript charset=UTF-8 src="./static/js/end.js"></script>
</html>

26
src/index.html
Unescape Escape View File

@ -1,23 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh"> <html lang=en>
<head> <head>
@@include('./tpl/header.html') @@include('./tpl/header.html')
<script src="./static/lib/d3@6.js"></script> <title>首页</title>
<script src="./static/lib/markmap-view.js"></script>
<script src="./static/js/main.js"></script>
<style> <style>
.markmap-svg{
width: calc(100vw - 40px); body {
height: calc(100vh - 66px); background-image: url('./static/img/bg1.jpg'); /* 替换为你的图片路径 */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
} }
</style> </style>
</head> </head>
<body> <body>
@@include('./tpl/nav.html') @@include('./tpl/logo1.html')
<section> <div class="btn-box" id="btn">点击加盟</div>
<svg id="markmap" class="markmap-svg"></svg> </div>
</section>
@@include('./tpl/footer.html')
</body> </body>
<script type=text/javascript charset=UTF-8 src="./static/js/index.js"></script>
</html> </html>

45
src/jiaMeng1.html
Unescape Escape View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang=en>
<head>
@@include('./tpl/header.html')
<title>加盟</title>
<style>
body {
background-image: url('./static/img/bg2.jpg'); /* 替换为你的图片路径 */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
@@include('./tpl/logo2.html')
<div class="content">
<div class="title">加盟区域</div>
<div class="form-box">
<span class="form-item" id="city">请选择</span>市
<span class="form-item" id="qu">请选择</span>区</div>
</div>
<div class="xia-btn-box" id="btn">下一页</div>
<div class="model" id="model" style="display: none;">
<div class="model-box">
<div class="model-title"></div>
<div class="model-content" id="content">
<div class="model-item" value="长沙">长沙</div>
</div>
</div>
</div>
<div class="model" id="qu-model" style="display: none;">
<div class="model-box">
<div class="model-title"></div>
<div class="model-content" id="qu-content">
<div class="model-item" value="长沙">长沙</div>
</div>
</div>
</div>
</div>
</body>
<script type=text/javascript charset=UTF-8 src="./static/js/jiaMeng1.js"></script>
</html>

49
src/jiaMeng2.html
Unescape Escape View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang=en>
<head>
@@include('./tpl/header.html')
<title>加盟</title>
<style>
body {
background-image: url('./static/img/bg3.jpg'); /* 替换为你的图片路径 */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
@@include('./tpl/logo2.html')
<div class="content">
<div class="my-form-box">
<div class="item-box">
<div class="item-title">行业类别</div>
<span class="item-form-item" id="hang-ye">请选择</span></div>
<div class="item-box">
<div class="item-title">租赁资历</div>
<span class="item-form-item" id="zi-li">请选择</span></div>
</div>
</div>
<div class="xia-btn-box" id="btn">下一页</div>
<div class="model" id="hang-ye-model" style="display: none;">
<div class="model-box">
<div class="model-title"></div>
<div class="model-content" id="hang-ye-content">
<div class="model-item" value="请选择">请选择</div>
</div>
</div>
</div>
<div class=model id=zi-li-model style="display: none;">
<div class=model-box>
<div class="model-title"></div>
<div class="model-content" id=zi-li-content>
<div class="model-item" value="请选择">请选择</div>
</div>
</div>
</div>
</div>
</body>
<script type=text/javascript charset=UTF-8 src="./static/js/jiaMeng2.js"></script>
</html>

49
src/jiaMeng3.html
Unescape Escape View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang=en>
<head>
@@include('./tpl/header.html')
<title>加盟</title>
<style>
body {
background-image: url('./static/img/bg4.jpg'); /* 替换为你的图片路径 */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
@@include('./tpl/logo2.html')
<div class="content">
<div class="my-form-box">
<div class="item-box">
<div class="item-title">门店情况</div>
<span class="item-form-item" id="men-dian">请选择</span></div>
<div class=item-box>
<div class=item-title>场地情况</div>
<span class="item-form-item" id="chan-di">请选择</span></div>
</div>
</div>
<div class="xia-btn-box" id="btn">下一页</div>
<div class="model" id="men-dian-model" style="display: none;">
<div class="model-box">
<div class="model-title"></div>
<div class="model-content" id="men-dian-content">
<div class="model-item" value="请选择">请选择</div>
</div>
</div>
</div>
<div class="model" id="chan-di-model" style="display: none;">
<div class="model-box">
<div class="model-title"></div>
<div class="model-content" id="chan-di-content">
<div class="model-item" value="请选择">请选择</div>
</div>
</div>
</div>
</div>
</body>
<script type=text/javascript charset=UTF-8 src="./static/js/jiaMeng3.js"></script>
</html>

31
src/jiaMeng4.html
Unescape Escape View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang=en>
<head>
@@include('./tpl/header.html')
<title>加盟</title>
<style>
body {
background-image: url('./static/img/bg5.jpg');
/* 替换为你的图片路径 */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
@@include('./tpl/logo2.html')
<div class="content">
<div class="my-form-box">
<div class="item-box">
<div class="item-title">加盟人姓名</div>
<span class="input-form-item"><input type="text" id="name" placeholder="请输入加盟人姓名"></span></div>
<div class="item-box">
<div class="item-title">加盟人电话</div>
<span class="input-form-item"><input type="text" id="phone" placeholder="请输入加盟人电话"></span></div>
</div>
</div>
<div class="xia-btn-box" id="btn">提交</div>
</body>
<script type=text/javascript charset=UTF-8 src="./static/js/jiaMeng4.js"></script>
</html>

97
src/static/css/common.css
Unescape Escape View File

@ -1,96 +1 @@
@charset "UTF-8"; @charset "UTF-8";html{font-size:14px;font-family:Source Han Sans CN}body{background-color:#f3dbd9;overflow:hidden}body,html{margin:0;padding:0;height:100%}a:active,a:hover,a:link,a:visited{text-decoration:none;color:#5bbe8e}.logo-box{height:33px;margin:20px}.logo-box>img{width:136px;height:32px}.btn-box,.xia-btn-box{height:47px;color:#FFF;line-height:2.5;position:fixed;right:0;margin:0 auto;left:0;cursor:pointer;font-family:Source Han Sans CN;font-weight:400}.btn-box{bottom:214px;width:237px;border-radius:5px;background:#E29A3C;border:4px solid rgba(226,154,60,.4);font-size:17px;text-align:center}.xia-btn-box{bottom:57px;width:237px;border-radius:5px;background:#E29A3C;border:4px solid rgba(226,154,60,.4);font-size:17px;text-align:center}.content{position:fixed;left:0;right:0;bottom:220px;margin:0 auto}.content .title{font-family:Source Han Sans CN;font-weight:400;font-size:16px;color:#333;width:100%;text-align:center;margin-bottom:14px}.content .form-box{width:342px;height:61px;background:#FFF;border-radius:7px;opacity:.6;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.form-box .form-item{width:120px;height:33px;background:#FDF1E3;border-radius:3px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 14px;position:relative;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.form-item::after,.item-form-item::after{content:'▼';position:absolute;right:8px}.select-grp{position:relative;vertical-align:middle;display:inline-block}.select-grp:before{content:'\25bc';position:absolute;color:#767676;top:0;bottom:1px;right:0;width:2em;padding-top:.7em;line-height:inherit;text-align:center;-ms-transform:scale(.84,.42);transform:scale(.84,.42);-webkit-transform:scale(.84,.42)}.select-grp select{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:100%;height:40px;padding-right:2em;padding-left:1em;border:none;cursor:pointer;background:#FDF1E3;border-radius:3px}select::-ms-expand{display:none}.model-content .model-item,.my-form-box{display:-webkit-box;display:-ms-flexbox}.model{position:fixed;top:0;left:0;bottom:0;right:0;z-index:1;background-color:rgba(0,0,0,.4)}.model-box{background-color:#fff;height:300px;position:absolute;bottom:0;left:0;right:0;overflow-y:auto;border-radius:25px 25px 0 0}.model-box .model-title{width:100%;font-size:18px;text-align:center;padding:20px 0}.model-content .model-item{height:48px;width:100%;text-align:center;font-size:14px;border-bottom:1px solid #F4F5F6;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}.my-form-box{width:337px;height:84px;background:#FFF;border-radius:3px;opacity:.6;display:flex;margin:0 auto}.my-form-box .item-box{-ms-flex-preferred-size:50%;flex-basis:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding-left:8px;padding-top:8px}.my-form-box .item-box .item-title{font-family:Source Han Sans CN;font-weight:700;font-size:16px;color:#333;margin-bottom:10px}.my-form-box .item-box .input-form-item,.my-form-box .item-box .item-form-item{width:148px;height:33px;background:#FDF1E3;border-radius:3px;line-height:33px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;text-indent:8px;position:relative}input{-webkit-box-flex:1;-ms-flex:1;flex:1;outline:0;color:#333;font-size:.9em;padding:.5em;border-radius:.2em;border:none;-webkit-appearance:none;background:#FDF1E3;text-indent:8px}input:focus,input:hover{border:none}.footer-box{width:341px;height:40px;background:#FDF1E3;border-radius:3px;opacity:.8;position:fixed;bottom:203px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.footer-box .footer-title{font-family:Source Han Sans CN;font-weight:400;font-size:15px;color:#E29A3C}.footer-ti-shi{width:17px;height:17px}
/* 背景颜色 */
/* 字体 */
/*普通字体颜色*/
/* 重置样式 */
html {
font-family: sans-serif;
font-size: 14px;
}
body {
margin: 0;
padding: 0;
}
a:link, a:visited, a:hover, a:active {
text-decoration: none;
color: #5bbe8e;
}
/* 底部 */
.footer-box {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 30px;
background-color: #5bbe8e;
}
.footer-box .content {
font-size: 12px;
color: #fff;
}
/* 头部 */
.header {
height: 40px;
line-height: 40px;
background-color: #fff;
color: #5bbe8e;
box-shadow: 0 4px 4px #f9f9fc;
}
.header .box {
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 10%;
}
.header .box .logo {
font-size: 16px;
}
.header .box a:link, .header .box a:visited, .header .box a:hover, .header .box a:active {
color: #5bbe8e;
}
.header .opr-box {
display: flex;
align-items: center;
color: #5bbe8e;
}
.header .opr-box .item {
font-size: 16px;
margin-right: 10px;
}
/* 内容 */
/* 弹层 */
.mark-box {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.mark-box .dialog-box {
width: 30%;
height: 400px;
background-color: #fff;
border: 1px solid #f9f9fc;
border-radius: 10px;
}
.show-dialog {
display: flex;
justify-content: center;
align-items: center;
}
.hide-dialog {
display: none;
}

3
src/static/css/variable.css
Unescape Escape View File

@ -1,4 +1 @@
@charset "UTF-8"; @charset "UTF-8";
/* 背景颜色 */
/* 字体 */
/*普通字体颜色*/

BIN
src/static/img/bg1.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

BIN
src/static/img/bg2.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB

BIN
src/static/img/bg3.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

BIN
src/static/img/bg4.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 179 KiB

BIN
src/static/img/bg5.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 KiB

BIN
src/static/img/bg6.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

BIN
src/static/img/logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/static/img/logo2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
src/static/img/tishi.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

0
src/static/js/end.js
Unescape Escape View File

5
src/static/js/index.js
Unescape Escape View File

@ -1 +1,6 @@
window.onload = function () {
document.getElementById('btn').addEventListener('click', function() {
window.open('./jiaMeng1.html','_self');
});
};

1635
src/static/js/jiaMeng1.js
View File

File diff suppressed because it is too large Load Diff

94
src/static/js/jiaMeng2.js
Unescape Escape View File

@ -0,0 +1,94 @@
var hangYe = '';
var ziLi = '';
window.onload = function () {
initData();
document.getElementById('btn').addEventListener('click', function() {
if(hangYe==""||ziLi==""){
alert('请先选择行业类别和租赁资历');
}else{
window.sessionStorage.setItem('hangYe',hangYe);
window.sessionStorage.setItem('ziLi',ziLi);
window.open('./jiaMeng3.html','_self');
}
});
document.getElementById('hang-ye').addEventListener('click', function() {
openHangYeModel();
setHangYeOption();
});
document.getElementById('zi-li').addEventListener('click', function() {
openZiLiModel();
setZiLiOption();
});
};
function initData(){
hangYe = '行业内人士';
document.getElementById('hang-ye').innerHTML = '行业内人士';
ziLi = '有相关租赁经验';
document.getElementById('zi-li').innerHTML = '有相关租赁经验';
}
function resetQu(){
document.getElementById('qu').innerHTML ='<div class="model-item" data-value="0">请选择</div>';
}
function openHangYeModel(){
document.getElementById('hang-ye-model').style = 'display: flex;';
}
function closeHangYeModel(){
document.getElementById('hang-ye-model').style = 'display: none;';
}
function setHangYeOption(){
let listHtml = '';
for (let index = 0; index < hangYeList.length; index++) {
const element = hangYeList[index];
listHtml += `<div class="model-item" data-value="`+element.name+`">`+element.name+`</div>`
}
if(listHtml==""){
listHtml = ` <div class="model-item" data-value="0">请选择</div>`
}
document.getElementById('hang-ye-content').innerHTML = listHtml;
document.getElementById('hang-ye-content').addEventListener('click', function(e) {
hangye = e.target.dataset.value;
document.getElementById('hang-ye').innerHTML = e.target.dataset.value;
closeHangYeModel();
});
}
function openZiLiModel(){
document.getElementById('zi-li-model').style = 'display: flex;';
}
function closeZiLiModel(){
document.getElementById('zi-li-model').style = 'display: none;';
}
function setZiLiOption(){
let listHtml = '';
for (let index = 0; index < ziLiList.length; index++) {
const element = ziLiList[index];
listHtml += `<div class="model-item" data-value="`+element.name+`">`+element.name+`</div>`
}
if(listHtml==""){
listHtml = ` <div class="model-item" data-value="0">请选择</div>`
}
document.getElementById('zi-li-content').innerHTML = listHtml;
document.getElementById('zi-li-content').addEventListener('click', function(e) {
ziLi = e.target.dataset.value;
document.getElementById('zi-li').innerHTML = e.target.dataset.value;
closeZiLiModel();
});
}
var hangYeList = [
{
name:'行业内人士'
},
{
name:'非行业内人士'
},
];
var ziLiList = [
{
name:'有相关租赁经验'
},
{
name:'无相关租赁经验'
},
];

97
src/static/js/jiaMeng3.js
Unescape Escape View File

@ -0,0 +1,97 @@
var menDian = '';
var changDi = '';
window.onload = function () {
initData();
document.getElementById('btn').addEventListener('click', function() {
if(menDian==""||changDi==""){
alert('请先选择门店情况和场地情况');
}else{
window.sessionStorage.setItem('menDian',menDian);
window.sessionStorage.setItem('changDi',changDi);
window.open('./jiaMeng4.html','_self');
}
});
document.getElementById('men-dian').addEventListener('click', function() {
openMenDianModel();
setMenDianOption();
});
document.getElementById('chan-di').addEventListener('click', function() {
openChanDiModel();
setChanDiOption();
});
};
function initData(){
menDian = '已有自购门店';
document.getElementById('men-dian').innerHTML = '已有自购门店';
changDi = '可满足20台以上设备停留场地';
document.getElementById('chan-di').innerHTML = '可满足20台以上设备停留场地';
}
function resetQu(){
document.getElementById('qu').innerHTML ='<div class="model-item" data-value="0">请选择</div>';
}
function openMenDianModel(){
document.getElementById('men-dian-model').style = 'display: flex;';
}
function closeMenDianModel(){
document.getElementById('men-dian-model').style = 'display: none;';
}
function setMenDianOption(){
let listHtml = '';
for (let index = 0; index < menDianList.length; index++) {
const element = menDianList[index];
listHtml += `<div class="model-item" data-value="`+element.name+`">`+element.name+`</div>`
}
if(listHtml==""){
listHtml = ` <div class="model-item" data-value="0">请选择</div>`
}
document.getElementById('men-dian-content').innerHTML = listHtml;
document.getElementById('men-dian-content').addEventListener('click', function(e) {
menDian = e.target.dataset.value;
document.getElementById('men-dian').innerHTML = e.target.dataset.value;
closeMenDianModel();
});
}
function openChanDiModel(){
document.getElementById('chan-di-model').style = 'display: flex;';
}
function closeChanDiModel(){
document.getElementById('chan-di-model').style = 'display: none;';
}
function setChanDiOption(){
let listHtml = '';
for (let index = 0; index < chanDiList.length; index++) {
const element = chanDiList[index];
listHtml += `<div class="model-item" data-value="`+element.name+`">`+element.name+`</div>`
}
if(listHtml==""){
listHtml = ` <div class="model-item" data-value="0">请选择</div>`
}
document.getElementById('chan-di-content').innerHTML = listHtml;
document.getElementById('chan-di-content').addEventListener('click', function(e) {
changDi = e.target.dataset.value;
document.getElementById('chan-di').innerHTML = e.target.dataset.value;
closeChanDiModel();
});
}
var menDianList = [
{
name:'已有自购门店'
},
{
name:'已有租用门店'
},
{
name:'门店待租用'
},
];
var chanDiList = [
{
name:'可满足20台以上设备停留场地'
},
{
name:'可满足10台以上设备停留场地'
},
];

54
src/static/js/jiaMeng4.js
Unescape Escape View File

@ -0,0 +1,54 @@
var userName = '';
var phone = '';
async function clickHandler() {
userName = document.getElementById('name').value;
phone = document.getElementById('phone').value;
if (userName == "" || phone == "") {
alert('请先填写加盟人姓名和加盟人电话');
} else {
window.sessionStorage.setItem('name', userName);
window.sessionStorage.setItem('phone', phone);
await postData();
// 发送成功后 跳转 // window.open('./end.html','_self');
}
}
window.onload = function () {
document.getElementById('btn').addEventListener('click', clickHandler);
};
async function postData() {
const formData = {
name: window.sessionStorage.getItem("name"),
phone: window.sessionStorage.getItem("phone"),
menDian: window.sessionStorage.getItem("menDian"),
changDi: window.sessionStorage.getItem("changDi"),
hangYe: window.sessionStorage.getItem("hangYe"),
ziLi: window.sessionStorage.getItem("ziLi"),
city: window.sessionStorage.getItem("city"),
qu: window.sessionStorage.getItem("qu"),
};
// console.log('data: ', data);
try {
const responseStream = await fetch("/record", {
body: JSON.stringify(formData),
method: "POST",
headers: {
"Content-Type": "application/json",
},
});
const {data} = await responseStream.json();
if (data) {
// document.getElementById('btn').innerText = '已申请'
// document.getElementById('btn').removeEventListener("click", clickHandler)
// alert("提交成功");
window.open('./end.html','_self');
}
} catch (e) {
console.error("从服务器获取数据出错，请联系管理员！", e);
}
}

1
src/tpl/header.html
Unescape Escape View File

@ -1,5 +1,4 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gulp-static-html-demo</title>
<link rel="stylesheet" type="text/css" href="./static/css/common.css" /> <link rel="stylesheet" type="text/css" href="./static/css/common.css" />

3
src/tpl/logo1.html
Unescape Escape View File

@ -0,0 +1,3 @@
<div class="logo-box">
<img src="./static/img/logo.png"/>
</div>

3
src/tpl/logo2.html
Unescape Escape View File

@ -0,0 +1,3 @@
<div class="logo-box">
<img src="./static/img/logo2.png" />
</div>

10
src/tpl/nav.html
Unescape Escape View File

@ -1,10 +0,0 @@
<header class="header">
<div class="box">
<div class="logo item"><a href="/">MARKMAP</a></div>
<div class="opr-box">
<div class="item open-new-dialog" type="new">新建目录</div>
</div>
</div>
</header>
Write Preview
Loading…
Cancel
Save