修改了投诉举报路由页面，最新版本
This commit is contained in:
zhangyong
parent
03ffda3fd6
commit
bd3acb9a5a
@ -5,13 +5,12 @@
|
||||
<meta charset="UTF-8" />
|
||||
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
|
||||
<!-- <link rel="icon" type="image/svg+xml" href="/assets/img/icon_svg.png" /> -->
|
||||
<link rel="icon" type="image/svg+xml" href="/AImzhu.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/svg+xml" href="/AImzhu2.svg" />
|
||||
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
|
||||
<meta name="description" content="软件著作权登记申请,软件著作权申请流程,如何申请软件著作权,软件著作权的作用,软件著作权申请需要多久,软件著作权登记有什么意义？" />
|
||||
<meta name="keywords" content="软件著作权登记,软件著作权申请,软件著作权材料编写,如何申请软件著作权,软件著作权加急办理,提供专业知识产权代理服务,全程服务,不通过不收费,简单快捷" />
|
||||
|
||||
<meta name="og:image" content="https://image.wjx.cn/images/wlogo.png" />
|
||||
<meta name="og:title" content="AI秒著引擎_0元申报软件著作权,软件著作权登记申请,软件著作权申请流程,如何申请软件著作权,软件著作权的作用,软件著作权申请需要多久" />
|
||||
<meta name="og:title" content="AI喵著网_0元申报软件著作权,软件著作权登记申请,软件著作权申请流程,如何申请软件著作权,软件著作权的作用,软件著作权申请需要多久" />
|
||||
<meta name="og:description"
|
||||
content="软件著作权登记,软件著作权申请,软件著作权材料编写,如何申请软件著作权,软件著作权加急办理,提供专业知识产权代理服务,全程服务,不通过不收费,简单快捷,欢迎了解!" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||
@ -30,7 +29,7 @@
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
</script>
|
||||
<title>AI秒著引擎_0元申报软件著作权,软件著作权登记申请,软件著作权申请流程,如何申请软件著作权,软件著作权的作用,软件著作权申请需要多久</title>
|
||||
<title>AI喵著网_0元申报软件著作权,软件著作权登记申请,软件著作权申请流程,如何申请软件著作权,软件著作权的作用,软件著作权申请需要多久</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
1
public/AImzhu2.svg
Normal file
1
public/AImzhu2.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 231.24 264.3"><defs><style>.cls-1,.cls-2,.cls-3,.cls-5{stroke-miterlimit:10;}.cls-1{fill:url(#未命名的渐变_16);stroke:url(#未命名的渐变_304);}.cls-2{fill:url(#未命名的渐变_60);stroke:url(#未命名的渐变_283);}.cls-3{fill:url(#未命名的渐变_406);stroke:url(#未命名的渐变_304-2);}.cls-4{fill:url(#未命名的渐变_399);}.cls-5{fill:url(#未命名的渐变_455);stroke:url(#未命名的渐变_304-3);}.cls-6{fill:url(#未命名的渐变_434);}.cls-7{fill:url(#未命名的渐变_445);}.cls-8{fill:url(#未命名的渐变_462);}</style><linearGradient id="未命名的渐变_16" x1="130.2" y1="44.2" x2="228.58" y2="44.2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fbc570"/><stop offset="1" stop-color="#fbb03b"/></linearGradient><linearGradient id="未命名的渐变_304" x1="129.7" y1="43.96" x2="231.17" y2="43.96" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#d8961f"/></linearGradient><linearGradient id="未命名的渐变_60" x1="181.55" y1="263.37" x2="181.55" y2="1.09" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fbc570"/><stop offset="1" stop-color="#f29600"/></linearGradient><linearGradient id="未命名的渐变_283" x1="231.24" y1="131.94" x2="129.76" y2="131.94" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff7300" stop-opacity="0.5"/><stop offset="0.08" stop-color="#fe7905" stop-opacity="0.46"/><stop offset="0.21" stop-color="#fd8813" stop-opacity="0.36"/><stop offset="0.38" stop-color="#faa129" stop-opacity="0.2"/><stop offset="0.55" stop-color="#f6c045" stop-opacity="0"/><stop offset="0.99" stop-color="#bf6f00" stop-opacity="0.5"/></linearGradient><linearGradient id="未命名的渐变_406" x1="36" y1="106.32" x2="80.31" y2="29.58" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffe6b6"/><stop offset="1" stop-color="#fbb03b"/></linearGradient><linearGradient id="未命名的渐变_304-2" x1="62.04" y1="118.26" x2="62.04" y2="3.15" xlink:href="#未命名的渐变_304"/><linearGradient id="未命名的渐变_399" x1="36.57" y1="44.83" x2="130.16" y2="44.83" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e08c00"/><stop offset="1" stop-color="#f9b631"/></linearGradient><linearGradient id="未命名的渐变_455" x1="1.56" y1="144.05" x2="121.92" y2="144.05" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ed1c24"/><stop offset="1" stop-color="#f7931e"/></linearGradient><linearGradient id="未命名的渐变_304-3" x1="61.92" y1="172.42" x2="61.92" y2="115.69" xlink:href="#未命名的渐变_304"/><linearGradient id="未命名的渐变_434" x1="74.9" y1="266.81" x2="48.9" y2="240.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f15a24"/><stop offset="0" stop-color="#fbb03b"/><stop offset="1" stop-color="#ed1c24"/></linearGradient><linearGradient id="未命名的渐变_445" x1="54.74" y1="263.37" x2="54.74" y2="154.25" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f7931e"/><stop offset="1" stop-color="#ed1c24"/></linearGradient><linearGradient id="未命名的渐变_462" x1="128.25" y1="264.3" x2="128.25" y2="204.38" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff7300"/><stop offset="0.19" stop-color="#fd6a04"/><stop offset="0.5" stop-color="#f8500e"/><stop offset="0.9" stop-color="#ef271f"/><stop offset="1" stop-color="#ed1c24"/></linearGradient></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><polygon class="cls-1" points="228.58 2.1 130.19 86.3 130.19 40.91 228.58 2.1"/><polygon class="cls-2" points="230.74 1.09 132.36 85.29 180.74 66.15 180.74 263.37 230.74 263.37 230.74 1.09"/><polygon class="cls-3" points="37.09 4.63 87.09 70.41 87.09 117.64 36.98 106.89 37.09 4.63"/><polygon class="cls-4" points="36.57 3.1 86.57 68.88 130.16 86.56 130.16 41.17 36.57 3.1"/><polygon class="cls-5" points="1.55 116.28 1.7 171.83 109.48 154.18 121.92 136.24 1.55 116.28"/><polygon class="cls-6" points="55.7 234.65 78.34 234.65 78.34 263.37 35.88 263.37 55.19 234.51 55.7 234.65"/><polygon class="cls-7" points="77.47 159.32 109.48 154.25 35.91 263.37 0 263.37 77.47 159.32"/><circle class="cls-8" cx="128.25" cy="234.34" r="29.96"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
BIN
public/assets/img/222.png
Normal file
BIN
public/assets/img/222.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
public/assets/img/555.png
Normal file
BIN
public/assets/img/555.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
public/assets/img/AIKF.png
Normal file
BIN
public/assets/img/AIKF.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
public/assets/img/footerlogo22.png
Normal file
BIN
public/assets/img/footerlogo22.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
public/assets/img/headicon21.png
Normal file
BIN
public/assets/img/headicon21.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
public/assets/img/home-bj2.png
Normal file
BIN
public/assets/img/home-bj2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
public/assets/img/kf-left-icon.png
Normal file
BIN
public/assets/img/kf-left-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
public/assets/img/kf-right-icon.png
Normal file
BIN
public/assets/img/kf-right-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
public/assets/img/nav-phone1.png
Normal file
BIN
public/assets/img/nav-phone1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 675 B |
BIN
public/assets/img/nav-phone2.png
Normal file
BIN
public/assets/img/nav-phone2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 837 B |
102
src/App.vue
102
src/App.vue
@ -37,96 +37,32 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
this.checkDeviceAndRedirect();
|
||||
window.addEventListener('resize', this.checkDeviceAndRedirect);
|
||||
},
|
||||
methods: {
|
||||
checkDeviceAndRedirect() {
|
||||
const mobile = isMobile();
|
||||
if (mobile && this.$route.name !== 'MobilePage') {
|
||||
this.isMobileView = true;
|
||||
this.$router.replace({ name: 'MobilePage' });
|
||||
} else if (!mobile && this.$route.name !== 'HomePage') {
|
||||
this.isMobileView = false;
|
||||
this.$router.replace({ name: 'HomePage' });
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.checkDeviceAndRedirect);
|
||||
}
|
||||
|
||||
// watch: {
|
||||
// $route(to, from) {
|
||||
// if (to.name === 'MobilePage') {
|
||||
// this.HeaderNav = false;
|
||||
// this.Footer = false;
|
||||
// } else {
|
||||
// this.HeaderNav = true;
|
||||
// this.Footer = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// created() {
|
||||
// if (this.$route) {
|
||||
// this.updateComponentVisibility(this.$route);
|
||||
// }
|
||||
// beforeMount() {
|
||||
// this.checkDeviceAndRedirect();
|
||||
// window.addEventListener('resize', this.checkDeviceAndRedirect);
|
||||
// },
|
||||
// methods: {
|
||||
// updateComponentVisibility(route) {
|
||||
// if (route.name === 'MobilePage') {
|
||||
// this.HeaderNav = false;
|
||||
// this.Footer = false;
|
||||
// } else {
|
||||
// this.HeaderNav = true;
|
||||
// this.Footer = true;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
|
||||
|
||||
// watch: {
|
||||
// // 监听路由变化
|
||||
// $route(to, from) {
|
||||
// if (to.name === 'Home' && from.name === 'Home') {
|
||||
// // 如果从首页路由离开并再次返回，重置飘窗状态
|
||||
// this.sportStatus = false;
|
||||
// this.floatWindowKey = 0;
|
||||
// this.clearFloatWindowTimer(); // 清除飘窗的定时器
|
||||
// this.resetFloatWindowPosition(); // 重置飘窗位置
|
||||
// console.log(22);
|
||||
// } else if (to.name === 'Home') {
|
||||
// // 如果第一次进入首页路由，启动飘窗
|
||||
// this.sportStatus = true;
|
||||
// this.floatWindowKey++; // 增加 key 值以强制重新渲染
|
||||
// console.log(11);
|
||||
// this.resetFloatWindowPosition(); // 重置飘窗位置
|
||||
// this.startFloatWindowTimer(); // 启动飘窗移动的定时器
|
||||
// checkDeviceAndRedirect() {
|
||||
// const mobile = isMobile();
|
||||
// if (mobile && this.$route.name !== 'MobilePage') {
|
||||
// this.isMobileView = true;
|
||||
// this.$router.replace({ name: 'MobilePage' });
|
||||
// } else if (!mobile && this.$route.name !== 'HomePage') {
|
||||
// this.isMobileView = false;
|
||||
// this.$router.replace({ name: 'HomePage' });
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
|
||||
// data() {
|
||||
// return {
|
||||
// shouldReloadHome: false // 标志，用于判断是否需要刷新首页
|
||||
// };
|
||||
// },
|
||||
// methods: {
|
||||
// handleRefreshHome() {
|
||||
// this.shouldReloadHome = true; // 设置刷新标志
|
||||
// }
|
||||
// },
|
||||
// watch: {
|
||||
// $route(to, from) {
|
||||
// // 当路由跳转到首页且设置了刷新标志时，刷新页面
|
||||
// if (to.path === '/' && this.shouldReloadHome) {
|
||||
// window.location.reload(); // 刷新页面
|
||||
// this.shouldReloadHome = false; // 重置刷新标志
|
||||
// }
|
||||
// }
|
||||
// beforeUnmount() {
|
||||
// window.removeEventListener('resize', this.checkDeviceAndRedirect);
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
1
src/assets/AImzhu2.svg
Normal file
1
src/assets/AImzhu2.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 231.24 264.3"><defs><style>.cls-1,.cls-2,.cls-3,.cls-5{stroke-miterlimit:10;}.cls-1{fill:url(#未命名的渐变_16);stroke:url(#未命名的渐变_304);}.cls-2{fill:url(#未命名的渐变_60);stroke:url(#未命名的渐变_283);}.cls-3{fill:url(#未命名的渐变_406);stroke:url(#未命名的渐变_304-2);}.cls-4{fill:url(#未命名的渐变_399);}.cls-5{fill:url(#未命名的渐变_455);stroke:url(#未命名的渐变_304-3);}.cls-6{fill:url(#未命名的渐变_434);}.cls-7{fill:url(#未命名的渐变_445);}.cls-8{fill:url(#未命名的渐变_462);}</style><linearGradient id="未命名的渐变_16" x1="130.2" y1="44.2" x2="228.58" y2="44.2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fbc570"/><stop offset="1" stop-color="#fbb03b"/></linearGradient><linearGradient id="未命名的渐变_304" x1="129.7" y1="43.96" x2="231.17" y2="43.96" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#d8961f"/></linearGradient><linearGradient id="未命名的渐变_60" x1="181.55" y1="263.37" x2="181.55" y2="1.09" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fbc570"/><stop offset="1" stop-color="#f29600"/></linearGradient><linearGradient id="未命名的渐变_283" x1="231.24" y1="131.94" x2="129.76" y2="131.94" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff7300" stop-opacity="0.5"/><stop offset="0.08" stop-color="#fe7905" stop-opacity="0.46"/><stop offset="0.21" stop-color="#fd8813" stop-opacity="0.36"/><stop offset="0.38" stop-color="#faa129" stop-opacity="0.2"/><stop offset="0.55" stop-color="#f6c045" stop-opacity="0"/><stop offset="0.99" stop-color="#bf6f00" stop-opacity="0.5"/></linearGradient><linearGradient id="未命名的渐变_406" x1="36" y1="106.32" x2="80.31" y2="29.58" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffe6b6"/><stop offset="1" stop-color="#fbb03b"/></linearGradient><linearGradient id="未命名的渐变_304-2" x1="62.04" y1="118.26" x2="62.04" y2="3.15" xlink:href="#未命名的渐变_304"/><linearGradient id="未命名的渐变_399" x1="36.57" y1="44.83" x2="130.16" y2="44.83" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e08c00"/><stop offset="1" stop-color="#f9b631"/></linearGradient><linearGradient id="未命名的渐变_455" x1="1.56" y1="144.05" x2="121.92" y2="144.05" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ed1c24"/><stop offset="1" stop-color="#f7931e"/></linearGradient><linearGradient id="未命名的渐变_304-3" x1="61.92" y1="172.42" x2="61.92" y2="115.69" xlink:href="#未命名的渐变_304"/><linearGradient id="未命名的渐变_434" x1="74.9" y1="266.81" x2="48.9" y2="240.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f15a24"/><stop offset="0" stop-color="#fbb03b"/><stop offset="1" stop-color="#ed1c24"/></linearGradient><linearGradient id="未命名的渐变_445" x1="54.74" y1="263.37" x2="54.74" y2="154.25" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f7931e"/><stop offset="1" stop-color="#ed1c24"/></linearGradient><linearGradient id="未命名的渐变_462" x1="128.25" y1="264.3" x2="128.25" y2="204.38" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff7300"/><stop offset="0.19" stop-color="#fd6a04"/><stop offset="0.5" stop-color="#f8500e"/><stop offset="0.9" stop-color="#ef271f"/><stop offset="1" stop-color="#ed1c24"/></linearGradient></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><polygon class="cls-1" points="228.58 2.1 130.19 86.3 130.19 40.91 228.58 2.1"/><polygon class="cls-2" points="230.74 1.09 132.36 85.29 180.74 66.15 180.74 263.37 230.74 263.37 230.74 1.09"/><polygon class="cls-3" points="37.09 4.63 87.09 70.41 87.09 117.64 36.98 106.89 37.09 4.63"/><polygon class="cls-4" points="36.57 3.1 86.57 68.88 130.16 86.56 130.16 41.17 36.57 3.1"/><polygon class="cls-5" points="1.55 116.28 1.7 171.83 109.48 154.18 121.92 136.24 1.55 116.28"/><polygon class="cls-6" points="55.7 234.65 78.34 234.65 78.34 263.37 35.88 263.37 55.19 234.51 55.7 234.65"/><polygon class="cls-7" points="77.47 159.32 109.48 154.25 35.91 263.37 0 263.37 77.47 159.32"/><circle class="cls-8" cx="128.25" cy="234.34" r="29.96"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/assets/img/222.png
Normal file
BIN
src/assets/img/222.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
src/assets/img/footerlogo22.png
Normal file
BIN
src/assets/img/footerlogo22.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
src/assets/img/headicon21.png
Normal file
BIN
src/assets/img/headicon21.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
src/assets/img/home-bj2.png
Normal file
BIN
src/assets/img/home-bj2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
src/assets/img/login-register-bj.jpg
Normal file
BIN
src/assets/img/login-register-bj.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 485 KiB |
BIN
src/assets/img/registerlogo.png
Normal file
BIN
src/assets/img/registerlogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
@ -5,7 +5,8 @@
|
||||
<div class="box-left-logo">
|
||||
<!-- <a href="#"> -->
|
||||
<a href="https://www.aimzhu.com">
|
||||
<img src="/assets/img/footerlogo1.png" alt="">
|
||||
<!-- <img src="/assets/img/footerlogo1.png" alt=""> -->
|
||||
<img src="/assets/img/footerlogo22.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="box-right-content">
|
||||
@ -54,11 +55,14 @@
|
||||
<div class="box-bottom">
|
||||
<span class="row1">
|
||||
<ul>
|
||||
<li>山西腾狮科技有限公司 版权所有</li>
|
||||
<li>晋ICP备14004820号</li>
|
||||
<li>山西腾狮科技股份有限公司 版权所有</li>
|
||||
<li @click="redirectToNewLink">晋ICP备14004820号</li>
|
||||
<li>晋公网安备 14010502050897号</li>
|
||||
</ul>
|
||||
</span>
|
||||
<span class="row2">
|
||||
<i>河北雄安秒著科技有限公司 运营服务</i>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
@ -69,7 +73,11 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
methods: {
|
||||
redirectToNewLink() {
|
||||
window.open('https://beian.miit.gov.cn', '_blank'); // 替换为你想要跳转的链接
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -106,8 +114,10 @@ export default {
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.box-top .box-left-logo {
|
||||
width: 3.25rem;
|
||||
height: .575rem;
|
||||
/* width: 3.25rem;
|
||||
height: .575rem; */
|
||||
width: 2.325rem;
|
||||
height: .75rem;
|
||||
/* margin-right: 15px; */
|
||||
/* margin: 27px 50px 27px 0; */
|
||||
margin: auto .5rem;
|
||||
@ -194,7 +204,8 @@ export default {
|
||||
color: #FFF;
|
||||
}
|
||||
.box-bottom {
|
||||
height: .75rem;
|
||||
/* height: .75rem; */
|
||||
height: .625rem;
|
||||
width: 100%;
|
||||
font-size: .175rem;
|
||||
font-weight: 50;
|
||||
@ -206,6 +217,8 @@ export default {
|
||||
.box-bottom .row1 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 8.3rem;
|
||||
margin: 0 auto;
|
||||
/* margin-top: 15px; */
|
||||
|
||||
}
|
||||
@ -214,9 +227,22 @@ export default {
|
||||
|
||||
}
|
||||
.box-bottom .row1 ul li {
|
||||
height: .75rem;
|
||||
line-height: .75rem;
|
||||
/* height: .75rem;
|
||||
line-height: .75rem; */
|
||||
height: .625rem;
|
||||
line-height: .625rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
.box-bottom .row1 ul li:nth-child(2) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.box-bottom .row2 {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
width: 8.3rem;
|
||||
margin: 0 auto;
|
||||
color: red;
|
||||
font-size: .175rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -22,9 +22,22 @@
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="phone">
|
||||
<div class="phoneBox">
|
||||
<div class="leftIcon">
|
||||
<img :src="phoneIcon" alt="">
|
||||
</div>
|
||||
<div class="rightMessage" :class="phoneColor">
|
||||
<span>全国服务热线</span>
|
||||
<span>400 086 1633</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-register">
|
||||
<a id="login" href="https://www.aimzhu.com/operator/" :class="loginClass">登录</a>
|
||||
<!-- <a id="login" href=" http://192.168.0.115:8091/operator" :class="loginClass">登录</a> -->
|
||||
<a id="register" href="https://www.aimzhu.com/Register.html">免费注册</a>
|
||||
<!-- <a id="register" href="http://192.168.0.121:5502/src/components/Register.html">免费注册</a> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -37,7 +50,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
// logoSrc: '/src/assets/img/headicon1.png',
|
||||
logoSrc: '/assets/img/headicon1.png',
|
||||
// logoSrc: '/assets/img/headicon1.png',
|
||||
logoSrc: '/assets/img/headicon21.png',
|
||||
isFixed: false,
|
||||
shouldReloadHomePage: false, // 添加标志，用于判断是否需要刷新首页
|
||||
// isHomePage: true, // 用于跟踪是否在首页
|
||||
@ -45,6 +59,7 @@ export default {
|
||||
|
||||
currentRoute: '/HomePage', // 默认激活首页
|
||||
HeaderNav: true,
|
||||
phoneIcon: '/assets/img/nav-phone1.png',
|
||||
}
|
||||
},
|
||||
|
||||
@ -56,7 +71,9 @@ export default {
|
||||
},
|
||||
activateHomePage() {
|
||||
this.isFixed = false; // 重置为默认样式
|
||||
this.logoSrc = '/assets/img/headicon1.png';
|
||||
// this.logoSrc = '/assets/img/headicon1.png';
|
||||
this.logoSrc = '/assets/img/headicon21.png';
|
||||
this.phoneIcon = '/assets/img/nav-phone1.png';
|
||||
// his.shouldReloadHomePage = true; // 设置刷新标志
|
||||
// 如果当前不是在首页，则设置标志以刷新
|
||||
// if (this.$route.path !== '/HomePage') {
|
||||
@ -69,7 +86,9 @@ export default {
|
||||
// },
|
||||
activate() {
|
||||
this.isFixed = true; // 激活固定样式
|
||||
this.logoSrc = '/assets/img/headicon2.png';
|
||||
// this.logoSrc = '/assets/img/headicon2.png';
|
||||
this.logoSrc = '/assets/img/headicon21.png';
|
||||
this.phoneIcon = '/assets/img/nav-phone2.png';
|
||||
},
|
||||
handleScroll() {
|
||||
if (this.$route.path === '/HomePage') {
|
||||
@ -77,9 +96,13 @@ export default {
|
||||
// this.logoSrc = ('window.scrollY > 0' ? '/src/assets/img/headicon2.png': '/src/assets/img/headicon1.png')
|
||||
|
||||
if(window.scrollY > 0) {
|
||||
this.logoSrc = '/assets/img/headicon2.png';
|
||||
// this.logoSrc = '/assets/img/headicon2.png';
|
||||
this.logoSrc = '/assets/img/headicon21.png';
|
||||
this.phoneIcon = '/assets/img/nav-phone2.png';
|
||||
} else {
|
||||
this.logoSrc = '/assets/img/headicon1.png';
|
||||
// this.logoSrc = '/assets/img/headicon1.png';
|
||||
this.logoSrc = '/assets/img/headicon21.png';
|
||||
this.phoneIcon = '/assets/img/nav-phone1.png';
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -105,14 +128,14 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
'$route': {
|
||||
immediate: true, // 立即执行一次监听函数
|
||||
handler(newRoute) {
|
||||
// 根据路由名称或路径来设置show的值
|
||||
this.HeaderNav = newRoute.name !== 'MobilePage' && !newRoute.path.includes('MobilePage');
|
||||
this.currentRoute = newRoute.path; // 更新当前路由路径
|
||||
}
|
||||
}
|
||||
// '$route': {
|
||||
// immediate: true, // 立即执行一次监听函数
|
||||
// handler(newRoute) {
|
||||
// // 根据路由名称或路径来设置show的值
|
||||
// this.HeaderNav = newRoute.name !== 'MobilePage' && !newRoute.path.includes('MobilePage');
|
||||
// this.currentRoute = newRoute.path; // 更新当前路由路径
|
||||
// }
|
||||
// }
|
||||
|
||||
// $route(to, from) {
|
||||
// // 当路由跳转到首页且设置了刷新标志时，刷新页面
|
||||
@ -137,8 +160,14 @@ export default {
|
||||
return {
|
||||
'border-login': this.isFixed,
|
||||
'line-height-login': this.isFixed,
|
||||
|
||||
};
|
||||
},
|
||||
phoneColor() {
|
||||
return {
|
||||
'phoneMessageColor': this.isFixed,
|
||||
}
|
||||
},
|
||||
routerColor() {
|
||||
return {
|
||||
'active-color': this.$route.path === '/HomePage',
|
||||
@ -188,6 +217,9 @@ export default {
|
||||
.active2 {
|
||||
border: .025rem solid #42210B;
|
||||
}
|
||||
.phoneMessageColor {
|
||||
color: #42210B !important;
|
||||
}
|
||||
.header-nav {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
@ -219,7 +251,9 @@ export default {
|
||||
}
|
||||
|
||||
.header-nav .nav-icon {
|
||||
width: 3.25rem;
|
||||
/* width: 3.25rem;
|
||||
height: .575rem; */
|
||||
width: 1.7875rem;
|
||||
height: .575rem;
|
||||
margin-left: .625rem;
|
||||
margin-top: .2125rem;
|
||||
@ -264,7 +298,35 @@ export default {
|
||||
color: #42210B!;
|
||||
/* color: #FFF; */
|
||||
}
|
||||
|
||||
.header-nav .phone {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 2.2rem;
|
||||
height: 1rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.header-nav .phone .phoneBox {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
width: 2.2rem;
|
||||
height: 0.6rem;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
.header-nav .phone .phoneBox .leftIcon {
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
}
|
||||
.header-nav .phone .phoneBox .rightMessage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
color: #fff;
|
||||
}
|
||||
.header-nav .phone .phoneBox .rightMessage span {
|
||||
font-size: 0.2rem;
|
||||
}
|
||||
.header-nav .login-register {
|
||||
display: flex;
|
||||
width: 3.5rem;
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
<div class="help-center">
|
||||
<div class="box-top">
|
||||
<div class="title">
|
||||
<h4>AI著作权·帮助中心</h4>
|
||||
<p>灵活搭建更高效的著作权办理平台</p>
|
||||
<h4>AI喵著网·帮助中心</h4>
|
||||
<p>驱动软件著作权服务新变革</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom">
|
||||
@ -367,6 +367,12 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::v-deep img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
border: 1px solid #666666 !important;
|
||||
}
|
||||
.help-center {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<div id="title-container" >
|
||||
<h3 v-for="(title, index) in titles" :key="index" class="title" :style="titleContainerStyle">{{ title }}</h3>
|
||||
</div>
|
||||
<p>AI软著引擎平台累计辅助编写资料<em>{{number1}}</em>万套，通过平台代办下发证书<em>{{number2}}</em>万件</p>
|
||||
<p>AI喵著网累计辅助编写资料<em>{{number1}}</em>万套，通过平台代办下发证书<em>{{number2}}</em>万件</p>
|
||||
<div class="button-box">
|
||||
<button><a href="https://www.aimzhu.com/operator/">免费试用</a></button>
|
||||
<button><a href="https://www.aimzhu.com/operator/">立即前往</a></button>
|
||||
@ -399,7 +399,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* background-color: pink; */
|
||||
background: url(/assets/img/home-bj.png) no-repeat;
|
||||
background: url(/assets/img/home-bj2.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.home-page .box-top .headline {
|
||||
|
||||
432
src/components/KeFu copy.vue
Normal file
432
src/components/KeFu copy.vue
Normal file
@ -0,0 +1,432 @@
|
||||
<template>
|
||||
<div class="ke-fu">
|
||||
<div class="box-top">
|
||||
<div class="title">
|
||||
<h4>AI著作权·客服中心</h4>
|
||||
<p>灵活搭建更高效的著作权办理平台</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom">
|
||||
<div class="box">
|
||||
<div class="left-box">
|
||||
<div class="kefu-sub">
|
||||
<h4>客服中心</h4>
|
||||
<div class="kefu-search">
|
||||
<!-- <input type="text" name="" id="txtInput" placeholder="请输入问题的关键字，如：排序题" v-model="searchQuery"> -->
|
||||
<input type="text" name="" id="txtInput" placeholder="请输入问题的关键字，如：排序题" v-model="searchQuery">
|
||||
<input type="submit" name value="搜索" id="search" @click="search">
|
||||
</div>
|
||||
</div>
|
||||
<ul class="one">
|
||||
<li>
|
||||
<div class="headline">
|
||||
<i>
|
||||
</i>
|
||||
<h5>在线客服</h5>
|
||||
</div>
|
||||
<p>企业服务<a href="https://work.weixin.qq.com/kfid/kfc599f9d40b65ac392" target="_blank"> 在线咨询</a></p>
|
||||
<!-- <p>样本服务（付费搜集答辩）<a href=""> 在线咨询</a></p> -->
|
||||
</li>
|
||||
<li>
|
||||
<div class="headline">
|
||||
<i>
|
||||
</i>
|
||||
<h5>电话咨询</h5>
|
||||
</div>
|
||||
<p>企业服务：<em> 400-086-1633 </em></p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="two">
|
||||
<li>
|
||||
<div class="headline">
|
||||
<i>
|
||||
</i>
|
||||
<h5>申请协助</h5>
|
||||
</div>
|
||||
<p>
|
||||
<span><a href="">申请协助</a></span>
|
||||
回复后会有短信通知您
|
||||
</p>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<div class="headline">
|
||||
<i>
|
||||
</i>
|
||||
<h5>在线客服</h5>
|
||||
</div>
|
||||
<!-- <p>kefu#tenlion.com.cn</p> -->
|
||||
<p class="wxewm">
|
||||
<img src="/assets/img/AIKF.png" alt="">
|
||||
|
||||
<el-image
|
||||
:src="imageSrc"
|
||||
:zoom-rate="1.2"
|
||||
:max-scale="2"
|
||||
:min-scale="0.5"
|
||||
:preview-src-list="srcList"
|
||||
:initial-index="2"
|
||||
hide-on-click-modal="true"
|
||||
border="none"
|
||||
z-index="999999"
|
||||
fit="cover"
|
||||
/>
|
||||
|
||||
</p>
|
||||
<p>若已登录电脑端，<a href="https://work.weixin.qq.com/kfid/kfc599f9d40b65ac392" target="_blank">点击联系客服</a></p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<h5>客服服务时间</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<em>上午</em>
|
||||
<i>08:30-12:00</i>
|
||||
</li>
|
||||
<li>
|
||||
<em>中午</em>
|
||||
<i>12:00-14:00</i>
|
||||
</li>
|
||||
<li>
|
||||
<em>下午</em>
|
||||
<i>14:00-18:00</i>
|
||||
</li>
|
||||
<li>
|
||||
<em>晚间</em>
|
||||
<i>18:00-21:00</i>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="rengong-kefu">
|
||||
<a href="#">
|
||||
<img src="/assets/img/kefu-rengong.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ElImage } from 'element-plus'
|
||||
export default {
|
||||
components: {
|
||||
ElImage // 注册 ElImage 组件
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchQuery: '',
|
||||
imageSrc: '/assets/img/AIKF.png',
|
||||
srcList:[
|
||||
'/assets/img/AIKF.png',
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
if (this.searchQuery) {
|
||||
this.$router.push({
|
||||
name: 'HelpCenter',
|
||||
query: { q: this.searchQuery }
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
border: 0px solid transparent !important ;
|
||||
}
|
||||
.ke-fu {
|
||||
position: relative;
|
||||
}
|
||||
.ke-fu .box-top {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 7.5625rem;
|
||||
background: url(/assets/img/kefu-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.ke-fu .box-top .title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 12.5rem;
|
||||
height: 1.875rem;
|
||||
margin: 0 auto;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
.ke-fu .box-top h4 {
|
||||
/* position: absolute;
|
||||
top: 220px;
|
||||
left: 300px; */
|
||||
width: 6.25rem;
|
||||
font-size: .375rem;
|
||||
color: #74491a;
|
||||
margin-bottom: .125rem;
|
||||
}
|
||||
.ke-fu .box-top p {
|
||||
/* position: absolute;
|
||||
top: 270px;
|
||||
left: 300px; */
|
||||
width: 6.25rem;
|
||||
font-size: .2rem;
|
||||
letter-spacing: .0625rem;
|
||||
color: #9a7148;
|
||||
}
|
||||
.ke-fu .box-bottom {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.ke-fu .box-bottom .box {
|
||||
position: absolute;
|
||||
/* display: flex;
|
||||
justify-content:center; */
|
||||
top: -2.5rem;
|
||||
/* left: 18%; */
|
||||
display: flex;
|
||||
width: 12.5rem;
|
||||
height: 6.875rem;
|
||||
/* border: 2px solid red; */
|
||||
/* background-color: #FFF; */
|
||||
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 8.5rem;
|
||||
margin-right: .125rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: .625rem;
|
||||
line-height: .625rem;
|
||||
margin: .3125rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub h4 {
|
||||
font-size: .225rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
/* width: 350px; */
|
||||
height: .625rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #txtInput {
|
||||
display: inline-block;
|
||||
margin: auto 0;
|
||||
padding-left: .175rem;
|
||||
height: .425rem;
|
||||
width: 3.5rem;
|
||||
font-size: .1625rem;
|
||||
color: #333;
|
||||
border: .0125rem solid #ededed;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #txtInput:focus {
|
||||
border: .0125rem solid #febe54;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #search {
|
||||
display: inline-block;
|
||||
margin: auto 0;
|
||||
height: .425rem;
|
||||
line-height: .425rem;
|
||||
width: .75rem;
|
||||
font-size: .1625rem;
|
||||
background-color: #fda633;
|
||||
color: #FFF;
|
||||
border: none;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #search:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .one {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
height: 1.75rem;
|
||||
margin: .3125rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: .5rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .two {
|
||||
display: flex;
|
||||
/* height: 2.5rem; */
|
||||
margin: 0 .3125rem;
|
||||
margin-top: 0;
|
||||
/* margin-bottom: .5rem; */
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .one li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 3.5rem;
|
||||
height: 1.5rem;
|
||||
margin: .125rem auto;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .two li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 3.5rem;
|
||||
/* height: 1.5rem; */
|
||||
margin: .125rem auto;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li .headline {
|
||||
display: flex;
|
||||
height: .375rem;
|
||||
line-height: .375rem;
|
||||
margin-bottom: .0625rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li .headline i {
|
||||
display: block;
|
||||
width: .25rem;
|
||||
height: .25rem;
|
||||
margin: auto .125rem;
|
||||
background: url(/assets/img/kefu-1.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li:nth-child(2) .headline i {
|
||||
background: url(/assets/img/kefu-2.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul:last-child li:nth-child(1) .headline i {
|
||||
background: url(/assets/img/kefu-3.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul:last-child li:nth-child(2) .headline i {
|
||||
background: url(/assets/img/kefu-4.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ke-fu .box-bottom .box .left-box ul li .headline h5 {
|
||||
font-size: .2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li p {
|
||||
height: .375rem;
|
||||
margin: .0625rem 0 0 0;
|
||||
font-size: .175rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li p a {
|
||||
color: #0095ff;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li p a:hover {
|
||||
color: #0086e6;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li p em {
|
||||
color: #0095ff;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul:last-child li:first-child p span {
|
||||
display: inline-block;
|
||||
width: .975rem;
|
||||
height: .35rem;
|
||||
line-height: .35rem;
|
||||
text-align: center;
|
||||
margin-right: .125rem;
|
||||
border: .0125rem solid #d9d9d9;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul:last-child li:last-child .wxewm {
|
||||
display: block;
|
||||
width: 2rem;
|
||||
height: 2.6rem;
|
||||
|
||||
}
|
||||
/* .ke-fu .box-bottom .box .left-box ul:last-child li:last-child .wxewm img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(/assets/img/AIKF.png) no-repeat;
|
||||
background-size: cover;
|
||||
} */
|
||||
/* .el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
} */
|
||||
::v-deep .el-image-viewer__canvas img{
|
||||
width: 5rem;
|
||||
height: 6.5rem;
|
||||
border: none !important;
|
||||
|
||||
}
|
||||
|
||||
.ke-fu .box-bottom .box .right-box {
|
||||
width: 3.875rem;
|
||||
/* margin-right: 2%; */
|
||||
background-color: #fff;
|
||||
border-top-left-radius: .125rem;
|
||||
border-top-right-radius:.125rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .right-box h5 {
|
||||
height: .5rem;
|
||||
line-height: .5rem;
|
||||
text-align: center;
|
||||
font-size: .175rem;
|
||||
background-color: #febe54;
|
||||
border-radius: .125rem;
|
||||
color: #FFF;
|
||||
}
|
||||
.ke-fu .box-bottom .box .right-box ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: .1875rem .0625rem 0 .125rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .right-box ul li{
|
||||
display: flex;
|
||||
align-content: center;
|
||||
height: .375rem;
|
||||
line-height: .375rem;
|
||||
margin-bottom: .125rem;
|
||||
/* background-color: pink; */
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
.ke-fu .box-bottom .box .right-box ul li em {
|
||||
text-align: center;
|
||||
margin: auto 0;
|
||||
/* line-height: 30px; */
|
||||
width: 1rem;
|
||||
/* padding: 2px 5px; */
|
||||
border-radius: .15rem;
|
||||
background-color: #febe54;
|
||||
font-size: .1625rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .right-box ul li i {
|
||||
margin: auto 0;
|
||||
width: 100%;
|
||||
padding: 0 .3125rem;
|
||||
border-top-left-radius: .125rem;
|
||||
border-bottom-left-radius: .125rem;
|
||||
background-color: #ebebeb;
|
||||
color: #8f673d;
|
||||
}
|
||||
.ke-fu .box-bottom .box .right-box .rengong-kefu {
|
||||
position: absolute;
|
||||
right: .25rem;
|
||||
bottom: 0;
|
||||
width: 2.75rem;
|
||||
height: 3.5rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
</style>
|
||||
@ -2,90 +2,58 @@
|
||||
<div class="ke-fu">
|
||||
<div class="box-top">
|
||||
<div class="title">
|
||||
<h4>AI著作权·客服中心</h4>
|
||||
<p>灵活搭建更高效的著作权办理平台</p>
|
||||
<h4>AI喵著网·客服中心</h4>
|
||||
<p>驱动软件著作权服务新变革</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom">
|
||||
<div class="box">
|
||||
<div class="left-box">
|
||||
<div class="kefu-sub">
|
||||
<h4>客服中心</h4>
|
||||
<div class="kefu-search">
|
||||
<!-- <input type="text" name="" id="txtInput" placeholder="请输入问题的关键字，如：排序题" v-model="searchQuery"> -->
|
||||
<input type="text" name="" id="txtInput" placeholder="请输入问题的关键字，如：排序题" v-model="searchQuery">
|
||||
<input type="submit" name value="搜索" id="search" @click="search">
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="left-box">
|
||||
<div class="head head1">
|
||||
<i></i>
|
||||
<h4>在线客服</h4>
|
||||
</div>
|
||||
<div class="wxsm">
|
||||
<h5>手机微信扫码联系客服</h5>
|
||||
<div class="ewm">
|
||||
<img src="/assets/img/AIKF.png" alt="">
|
||||
</div>
|
||||
<!-- <div class="ewm"> -->
|
||||
<!-- <el-image
|
||||
:src="imageSrc"
|
||||
:zoom-rate="1.2"
|
||||
:max-scale="1"
|
||||
:min-scale="0.2"
|
||||
:preview-src-list="srcList"
|
||||
:initial-index="2"
|
||||
hide-on-click-modal="true"
|
||||
border="none"
|
||||
z-index="999999"
|
||||
fit="cover"
|
||||
/> -->
|
||||
<!-- </div> -->
|
||||
<p>若已登录电脑端，<a href="https://work.weixin.qq.com/kfid/kfc599f9d40b65ac392" target="_blank">点击联系客服</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="headline">
|
||||
<i>
|
||||
</i>
|
||||
<h5>在线客服</h5>
|
||||
</div>
|
||||
<p>企业服务<a href=""> 在线咨询</a></p>
|
||||
<p>样本服务（付费搜集答辩）<a href=""> 在线咨询</a></p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="headline">
|
||||
<i>
|
||||
</i>
|
||||
<h5>售前咨询</h5>
|
||||
</div>
|
||||
<p>企业服务：<em> 400-086-1633 </em></p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="headline">
|
||||
<i>
|
||||
</i>
|
||||
<h5>申请协助</h5>
|
||||
</div>
|
||||
<p>
|
||||
<span><a href="">申请协助</a></span>
|
||||
回复后会有短信通知您
|
||||
</p>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<div class="headline">
|
||||
<i>
|
||||
</i>
|
||||
<h5>在线客服</h5>
|
||||
</div>
|
||||
<p>kefu#tenlion.com.cn</p>
|
||||
<p>发送邮件时请将 # 替换为 @</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<h5>客服服务时间</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<em>上午</em>
|
||||
<i>08:30-12:00</i>
|
||||
</li>
|
||||
<li>
|
||||
<em>中午</em>
|
||||
<i>12:00-14:00</i>
|
||||
</li>
|
||||
<li>
|
||||
<em>下午</em>
|
||||
<i>14:00-18:00</i>
|
||||
</li>
|
||||
<li>
|
||||
<em>晚间</em>
|
||||
<i>18:00-21:00</i>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="rengong-kefu">
|
||||
<a href="#">
|
||||
<img src="/assets/img/kefu-rengong.png" alt="">
|
||||
</a>
|
||||
<div class="right">
|
||||
<div class="right-box">
|
||||
<div class="head head2">
|
||||
<i></i>
|
||||
<h4>电话咨询</h4>
|
||||
</div>
|
||||
<div class="message">
|
||||
<div class="box1">
|
||||
<h5>企业服务</h5>
|
||||
<p>400-086-1633</p>
|
||||
</div>
|
||||
<div class="box2">
|
||||
<h5>企业地址:</h5>
|
||||
<p class="address">山西省晋中市山西综改示范区晋中开发区<br>大学城产业园区龙田路909号创新创业孵化转化中心B6号楼9层</p>
|
||||
</div>
|
||||
<div class="box3">
|
||||
<p>7*24小时全天候为您服务</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -94,28 +62,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { ref } from 'vue';
|
||||
// import { useRouter } from 'vue-router';
|
||||
import { ElImage } from 'element-plus'
|
||||
export default {
|
||||
// setup() {
|
||||
// const searchQuery = ref('')
|
||||
// const router = useRouter()
|
||||
|
||||
// const search = () => {
|
||||
// router.push({
|
||||
// name: 'HelpCenter',
|
||||
// query: { q: searchQuery.value}
|
||||
// })
|
||||
// }
|
||||
// return {
|
||||
// searchQuery,
|
||||
// search
|
||||
// }
|
||||
// }
|
||||
|
||||
components: {
|
||||
ElImage // 注册 ElImage 组件
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchQuery: ''
|
||||
searchQuery: '',
|
||||
imageSrc: '/assets/img/AIKF.png',
|
||||
srcList:[
|
||||
'/assets/img/AIKF.png',
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -137,7 +95,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
border: 0px solid transparent !important ;
|
||||
border: 0px solid transparent !important;
|
||||
}
|
||||
.ke-fu {
|
||||
position: relative;
|
||||
@ -147,242 +105,215 @@ export default {
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 7.5625rem;
|
||||
/* height: 10rem; */
|
||||
height: 11rem;
|
||||
background: url(/assets/img/kefu-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.ke-fu .box-top .title {
|
||||
position: absolute;
|
||||
top: 1.75rem;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
justify-content: start;
|
||||
width: 12.5rem;
|
||||
height: 1.875rem;
|
||||
margin: 0 auto;
|
||||
/* border: 2px solid red; */
|
||||
height: 1.5rem;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
.ke-fu .box-top h4 {
|
||||
.ke-fu .box-top .title h4 {
|
||||
/* position: absolute;
|
||||
top: 220px;
|
||||
left: 300px; */
|
||||
width: 6.25rem;
|
||||
width: 100%;
|
||||
font-size: .375rem;
|
||||
color: #74491a;
|
||||
margin-bottom: .125rem;
|
||||
}
|
||||
.ke-fu .box-top p {
|
||||
/* position: absolute;
|
||||
top: 270px;
|
||||
left: 300px; */
|
||||
width: 6.25rem;
|
||||
.ke-fu .box-top .title p {
|
||||
width: 100%;
|
||||
font-size: .2rem;
|
||||
letter-spacing: .0625rem;
|
||||
color: #9a7148;
|
||||
}
|
||||
.ke-fu .box-bottom {
|
||||
position: relative;
|
||||
.ke-fu .box-top .content {
|
||||
position: absolute;
|
||||
top: 3.5rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
overflow: hidden;
|
||||
width: 12.5rem;
|
||||
height: 6rem;
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
.ke-fu .box-top .content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
background-color: #f5f5f5;
|
||||
align-content: center;
|
||||
}
|
||||
.ke-fu .box-bottom .box {
|
||||
position: absolute;
|
||||
/* display: flex;
|
||||
justify-content:center; */
|
||||
top: -2.5rem;
|
||||
/* left: 18%; */
|
||||
.ke-fu .box-top .content .left {
|
||||
display: flex;
|
||||
width: 12.5rem;
|
||||
height: 6.875rem;
|
||||
/* border: 2px solid red; */
|
||||
/* background-color: #FFF; */
|
||||
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 6.25rem;
|
||||
height: 6rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box {
|
||||
.ke-fu .box-top .content .left .left-box {
|
||||
position: relative;
|
||||
width:4rem;
|
||||
height: 4.5rem;
|
||||
/* background-color: yellow; */
|
||||
}
|
||||
.ke-fu .box-top .content .left .head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 8.5rem;
|
||||
margin-right: .125rem;
|
||||
background-color: #fff;
|
||||
width: 4rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: .625rem;
|
||||
line-height: .625rem;
|
||||
margin: .3125rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub h4 {
|
||||
font-size: .225rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
/* width: 350px; */
|
||||
height: .625rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #txtInput {
|
||||
display: inline-block;
|
||||
margin: auto 0;
|
||||
padding-left: .175rem;
|
||||
height: .425rem;
|
||||
width: 3.5rem;
|
||||
font-size: .1625rem;
|
||||
color: #333;
|
||||
border: .0125rem solid #ededed;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #txtInput:focus {
|
||||
border: .0125rem solid #febe54;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #search {
|
||||
display: inline-block;
|
||||
margin: auto 0;
|
||||
height: .425rem;
|
||||
line-height: .425rem;
|
||||
width: .75rem;
|
||||
font-size: .1625rem;
|
||||
background-color: #fda633;
|
||||
color: #FFF;
|
||||
border: none;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #search:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul {
|
||||
display: flex;
|
||||
height: 1.75rem;
|
||||
margin: .3125rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: .5rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 3.5rem;
|
||||
height: 1.5rem;
|
||||
margin: .125rem auto;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li .headline {
|
||||
display: flex;
|
||||
height: .375rem;
|
||||
line-height: .375rem;
|
||||
margin-bottom: .0625rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li .headline i {
|
||||
.ke-fu .box-top .content .left .head1 i {
|
||||
display: block;
|
||||
width: .25rem;
|
||||
height: .25rem;
|
||||
margin: auto .125rem;
|
||||
background: url(/assets/img/kefu-1.png) no-repeat;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
background: url(/assets/img/kf-left-icon.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li:nth-child(2) .headline i {
|
||||
background: url(/assets/img/kefu-2.png) no-repeat;
|
||||
.ke-fu .box-top .content .left .head h4 {
|
||||
height: 0.5rem;
|
||||
line-height: 0.5rem;
|
||||
font-size: 0.22rem;
|
||||
font-weight: 700;
|
||||
padding-left: .1rem;
|
||||
color: #f89c31;
|
||||
}
|
||||
.ke-fu .box-top .content .left .wxsm {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
.ke-fu .box-top .content .left .wxsm h5 {
|
||||
width: 4rem;
|
||||
height: 0.4rem;
|
||||
line-height: 0.4rem;
|
||||
font-size: 0.2rem;
|
||||
text-align: center;
|
||||
/* font-weight: 700; */
|
||||
}
|
||||
.ke-fu .box-top .content .left .wxsm .ewm {
|
||||
display: block;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin: 0 auto;
|
||||
border: 1px solid rgb(266, 266, 266);
|
||||
padding: 0.0625rem;
|
||||
border-radius: 0.04rem;
|
||||
background-color: #fff;
|
||||
/* background: url(/assets/img/AIKF.png) no-repeat;
|
||||
background-size: cover; */
|
||||
}
|
||||
.ke-fu .box-top .content .left .wxsm p {
|
||||
height: 0.4rem;
|
||||
line-height: 0.4rem;
|
||||
font-size: 0.18rem;
|
||||
text-align: center;
|
||||
/* font-weight: 700; */
|
||||
}
|
||||
.ke-fu .box-top .content .left .wxsm p a {
|
||||
color: #0095ff;
|
||||
}
|
||||
.ke-fu .box-top .content .right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 6.25rem;
|
||||
height: 6rem;
|
||||
}
|
||||
.ke-fu .box-top .content .right .right-box {
|
||||
position: relative;
|
||||
width: 4rem;
|
||||
height: 4.5rem;
|
||||
}
|
||||
.ke-fu .box-top .content .right .head {
|
||||
display: flex;
|
||||
width: 4rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
.ke-fu .box-top .content .right .head2 i {
|
||||
display: block;
|
||||
width: 0.36rem;
|
||||
height: 0.36rem;
|
||||
margin: 0.07rem 0;
|
||||
background: url(/assets/img/kf-right-icon.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul:last-child li:nth-child(1) .headline i {
|
||||
background: url(/assets/img/kefu-3.png) no-repeat;
|
||||
background-size: cover;
|
||||
.ke-fu .box-top .content .right .head2 h4 {
|
||||
height: 0.5rem;
|
||||
line-height: 0.5rem;
|
||||
font-size: 0.22rem;
|
||||
font-weight: 700;
|
||||
padding-left: .1rem;
|
||||
color: #f89c31;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul:last-child li:nth-child(2) .headline i {
|
||||
background: url(/assets/img/kefu-4.png) no-repeat;
|
||||
background-size: cover;
|
||||
.ke-fu .box-top .content .right .message {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ke-fu .box-bottom .box .left-box ul li .headline h5 {
|
||||
font-size: .2rem;
|
||||
.ke-fu .box-top .content .right .message .box1 {
|
||||
width: 4rem;
|
||||
}
|
||||
.ke-fu .box-top .content .right .message .box1 h5 {
|
||||
width: 4rem;
|
||||
height: 0.4rem;
|
||||
line-height: 0.4rem;
|
||||
font-size: 0.2rem;
|
||||
text-align: start;
|
||||
font-weight: 700;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li p {
|
||||
height: .375rem;
|
||||
margin: .0625rem 0 0 0;
|
||||
font-size: .175rem;
|
||||
.ke-fu .box-top .content .right .message .box1 p {
|
||||
width: 4rem;
|
||||
height: 0.6rem;
|
||||
line-height: 0.6rem;
|
||||
font-size: 0.28rem;
|
||||
font-weight: 700;
|
||||
color: #26b275;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li p a {
|
||||
color: #0095ff;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li p a:hover {
|
||||
color: #0086e6;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li p em {
|
||||
color: #0095ff;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul:last-child li:first-child p span {
|
||||
display: inline-block;
|
||||
width: .975rem;
|
||||
height: .35rem;
|
||||
line-height: .35rem;
|
||||
text-align: center;
|
||||
margin-right: .125rem;
|
||||
border: .0125rem solid #d9d9d9;
|
||||
}
|
||||
|
||||
|
||||
.ke-fu .box-bottom .box .right-box {
|
||||
width: 3.875rem;
|
||||
/* margin-right: 2%; */
|
||||
background-color: #fff;
|
||||
border-top-left-radius: .125rem;
|
||||
border-top-right-radius:.125rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .right-box h5 {
|
||||
height: .5rem;
|
||||
line-height: .5rem;
|
||||
text-align: center;
|
||||
font-size: .175rem;
|
||||
background-color: #febe54;
|
||||
border-radius: .125rem;
|
||||
color: #FFF;
|
||||
}
|
||||
.ke-fu .box-bottom .box .right-box ul {
|
||||
.ke-fu .box-top .content .right .message .box2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: .1875rem .0625rem 0 .125rem;
|
||||
justify-content: start;
|
||||
width: 4rem;
|
||||
height: 1.8rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .right-box ul li{
|
||||
display: flex;
|
||||
align-content: center;
|
||||
height: .375rem;
|
||||
line-height: .375rem;
|
||||
margin-bottom: .125rem;
|
||||
/* background-color: pink; */
|
||||
/* border: 2px solid red; */
|
||||
.ke-fu .box-top .content .right .message .box2 h5 {
|
||||
width: 4rem;
|
||||
height: 0.4rem;
|
||||
line-height: 0.4rem;
|
||||
font-size: 0.2rem;
|
||||
text-align: start;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .right-box ul li em {
|
||||
text-align: center;
|
||||
margin: auto 0;
|
||||
/* line-height: 30px; */
|
||||
width: 1rem;
|
||||
/* padding: 2px 5px; */
|
||||
border-radius: .15rem;
|
||||
background-color: #febe54;
|
||||
font-size: .1625rem;
|
||||
.ke-fu .box-top .content .right .message .box2 p {
|
||||
font-size: 0.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.ke-fu .box-bottom .box .right-box ul li i {
|
||||
margin: auto 0;
|
||||
width: 100%;
|
||||
padding: 0 .3125rem;
|
||||
border-top-left-radius: .125rem;
|
||||
border-bottom-left-radius: .125rem;
|
||||
background-color: #ebebeb;
|
||||
color: #8f673d;
|
||||
}
|
||||
.ke-fu .box-bottom .box .right-box .rengong-kefu {
|
||||
position: absolute;
|
||||
right: .25rem;
|
||||
bottom: 0;
|
||||
width: 2.75rem;
|
||||
height: 3.5rem;
|
||||
/* border: 1px solid red; */
|
||||
.ke-fu .box-top .content .right .message .box3 {
|
||||
display: block;
|
||||
width: 4rem;
|
||||
height: 0.4rem;
|
||||
line-height: 0.4rem;
|
||||
font-size: 0.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,12 @@
|
||||
<template>
|
||||
1111111111111111
|
||||
<a href="#">
|
||||
<img src="/public/assets/img/headicon1.png" alt="">
|
||||
</a>
|
||||
<h1>测试1</h1>
|
||||
<h2>测试2</h2>
|
||||
<div>
|
||||
<h3 class="name">111</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -8,6 +15,20 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
<style scoped>
|
||||
img {
|
||||
width: 100% !important;
|
||||
height: 1rem !important;
|
||||
border: none !important;
|
||||
}
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
div {
|
||||
background-color: pink;
|
||||
|
||||
}
|
||||
</style>
|
||||
542
src/components/Register copy 2.html
Normal file
542
src/components/Register copy 2.html
Normal file
@ -0,0 +1,542 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/svg+xml" href="./assets/AImzhu.svg">
|
||||
<title>注册界面</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<link rel="stylesheet" href="./assets/font/iconfont.css">
|
||||
<link rel="stylesheet" href="./layui/css/layui.css">
|
||||
<style>
|
||||
@media screen and (max-width: 1920px) {
|
||||
html {
|
||||
font-size: 66px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1360px) {
|
||||
html {
|
||||
font-size: 80px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: url(./assets/img/login-register-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.page .top {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 100vw;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.top .left {
|
||||
width: 3.25rem;
|
||||
height: .625rem;
|
||||
margin: .1875rem .625rem;
|
||||
}
|
||||
|
||||
.top .left .logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(./assets/img/headicon2.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.top .right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 2.5rem;
|
||||
height: .5rem;
|
||||
margin: .25rem .375rem;
|
||||
}
|
||||
|
||||
.top .right #login {
|
||||
font-size: .2rem;
|
||||
padding: .0625rem .25rem;
|
||||
border: none;
|
||||
border-radius: .3125rem;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
color: #42210B;
|
||||
}
|
||||
|
||||
.top .right #login:hover {
|
||||
cursor: pointer;
|
||||
background: #42210B;
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.top .right #goHomePage {
|
||||
font-size: .2rem;
|
||||
padding: .0625rem .25rem;
|
||||
border: none;
|
||||
border-radius: .3125rem;
|
||||
color: #FFF;
|
||||
background: #42210B;
|
||||
}
|
||||
|
||||
.top .right #goHomePage:hover {
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loginBox {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 6.25rem;
|
||||
height: 6.875rem;
|
||||
background-color: #fff;
|
||||
border-radius: .25rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.loginBox .title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loginBox .title h3 {
|
||||
font-size: .275rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loginBox .title span {
|
||||
display: block;
|
||||
width: .875rem;
|
||||
height: .0625rem;
|
||||
background-color: #fda633;
|
||||
margin-left: .375rem;
|
||||
margin-top: .0625rem;
|
||||
}
|
||||
|
||||
.loginBox .msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
margin-bottom: .25rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
text-indent: .1875rem;
|
||||
border: none;
|
||||
border: .0187rem solid #CCC;
|
||||
border-radius: .1rem;
|
||||
font-size: .1875rem;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
input:-webkit-autofill {
|
||||
background: transparent;
|
||||
transition: background-color 50000s ease-in-out 0s;
|
||||
-webkit-text-fill-color: unset;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: #999999
|
||||
}
|
||||
|
||||
/*去除ie edge的密码框默认出现的小眼睛*/
|
||||
input[type="password"]::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="password"]::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="password"]::-o-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li input:focus-within {
|
||||
border: .0156rem solid #fa911e;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li input:hover {
|
||||
border: .0156rem solid #fa911e;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(2) button {
|
||||
position: absolute;
|
||||
right: .125rem;
|
||||
width: 1.25rem;
|
||||
height: .375rem;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
letter-spacing: .025rem;
|
||||
margin: .125rem 0;
|
||||
cursor: pointer;
|
||||
color: #0095ff;
|
||||
font-size: .1875rem;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(2) button:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(3) i {
|
||||
position: absolute;
|
||||
top: .1875rem;
|
||||
right: .125rem;
|
||||
display: block;
|
||||
width: .25rem;
|
||||
height: .25rem;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(3) i:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: start;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
line-height: .5rem;
|
||||
color: #333;
|
||||
font-size: .175rem;
|
||||
margin-top: .25rem;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement input {
|
||||
width: .25rem;
|
||||
height: .25rem;
|
||||
margin: .125rem 0;
|
||||
color: #333;
|
||||
font-size: .15rem;
|
||||
margin-right: .125rem;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement a {
|
||||
color: #0095ff;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement a:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.loginBox .msg #register {
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
border: none;
|
||||
border-radius: .1rem;
|
||||
background-color: #C0C0C0;
|
||||
color: #FFF;
|
||||
font-size: .225rem;
|
||||
margin-top: .125rem;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loginBox .msg .register-disabled {
|
||||
background-color: #fda633;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loginBox .msg .register:not(.register-disabled):hover {
|
||||
font-size: .25rem;
|
||||
font-weight: 700;
|
||||
-webkit-box-shadow: 0 0 .125rem #fda633;
|
||||
-moz-box-shadow: 0 0 .125rem #fda633;
|
||||
box-shadow: 0 0 .125rem #fda633;
|
||||
/* cursor: pointer; */
|
||||
background-color: #fda633;
|
||||
}
|
||||
|
||||
.loginBox .goPage {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: end;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
margin-top: .125rem;
|
||||
font-size: .1875rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.loginBox .goPage a {
|
||||
color: #0095ff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="top">
|
||||
<a class="left" href="https://www.aimzhu.com">
|
||||
<div class="logo"></div>
|
||||
</a>
|
||||
<div class="right">
|
||||
<a id="login" class="login" href="https://www.aimzhu.com/operator/">登录</a>
|
||||
<a id="goHomePage" class="goHomePage" href="https://www.aimzhu.com">返回首页</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="loginBox">
|
||||
<div class="title">
|
||||
<h3>平台账号注册</h3>
|
||||
<span></span>
|
||||
</div>
|
||||
<form action="" class="msg">
|
||||
<ul class="msgBox">
|
||||
<li>
|
||||
<input id="phone" type="text" placeholder="请输入您的手机号">
|
||||
</li>
|
||||
<li>
|
||||
<input id="code" type="text" placeholder="请输入短信验证码">
|
||||
<button id="getCode" type="button">获取验证码</button>
|
||||
</li>
|
||||
<li>
|
||||
<input id="pwd" type="password" placeholder="请输入密码(8~16位，大小写字母，数字或特殊字符)">
|
||||
<i id="showHide" class="iconfont icon-xianshiyincang1"></i>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="agreement">
|
||||
<input type="checkbox">我同意平台
|
||||
<a href="https://www.aimzhu.com/UserAgreement.html" target="_blank">《用户服务协议》</a>
|
||||
和
|
||||
<a href="https://www.aimzhu.com/PrivacyPolicy.html" target="_blank">《隐私条款》</a>
|
||||
</div>
|
||||
<button id="register" class="register" type="button" disabled>注册</button>
|
||||
</form>
|
||||
<div class="goPage">
|
||||
<span>已有账号？<a href="https://www.aimzhu.com/operator/">立即登录</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./jquery.min.js"></script>
|
||||
<script src="./layui/layui.js"></script>
|
||||
<script src="./Register.js"></script>
|
||||
<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
|
||||
<script>
|
||||
|
||||
const $ = layui.jquery;
|
||||
const layer = layui.layer;
|
||||
|
||||
let isPhoneValid = false;
|
||||
let isCodeSent = false;
|
||||
let countdown = 120;
|
||||
|
||||
// 手机号校验
|
||||
function validatePhone(phone) {
|
||||
const phoneRegex = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
|
||||
return phoneRegex.test(phone);
|
||||
}
|
||||
|
||||
// 验证码校验
|
||||
function validateCode(code) {
|
||||
const codeRegex = /^\d{6}$/;
|
||||
return codeRegex.test(code)
|
||||
}
|
||||
|
||||
// 密码校验
|
||||
function validatePassword(password) {
|
||||
const passwordRegex = /^[A-Za-z0-9!@#$%^&*()_+{}\[\]:;<>,.?\/~\-]{8,16}$/;
|
||||
return passwordRegex.test(password);
|
||||
}
|
||||
|
||||
// 显示隐藏密码
|
||||
switchPwd()
|
||||
function switchPwd() {
|
||||
var pwd = $('#pwd')
|
||||
var showHide = $('#showHide')
|
||||
showHide.off('click').on('click', function () {
|
||||
if (showHide.hasClass('icon-xianshiyincang1')) {
|
||||
pwd.attr('type', 'text') // 密码可见
|
||||
showHide.removeClass('icon-xianshiyincang1').addClass('icon-xianshiyincang')
|
||||
} else {
|
||||
pwd.attr('type', 'password') // 密码隐藏
|
||||
showHide.removeClass('icon-xianshiyincang').addClass('icon-xianshiyincang1')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 更新注册按钮状态
|
||||
function updateRegisterButtonStatus() {
|
||||
const phone = $('#phone').val();
|
||||
const code = $('#code').val();
|
||||
const pwd = $('#pwd').val();
|
||||
const agreement = $('.agreement input').prop('checked');
|
||||
const isFormValid = isPhoneValid && isCodeSent && validateCode(code) && validatePassword(pwd) && agreement;
|
||||
if (isFormValid) {
|
||||
$('#register').removeClass('register-disabled');
|
||||
$('#register').css('cursor', 'pointer'); // 设置鼠标样式为指针
|
||||
$('#register').prop('disabled', false); // 移除disabled属性
|
||||
$('#register').css('background-color', '#fda633'); // 设置按钮背景颜色为橘色
|
||||
} else {
|
||||
$('#register').addClass('register-disabled');
|
||||
$('#register').css('cursor', 'not-allowed'); // 设置鼠标样式为禁止
|
||||
$('#register').prop('disabled', true); // 设置disabled属性
|
||||
$('#register').css('background-color', '#C0C0C0'); // 设置按钮背景颜色为橘色
|
||||
}
|
||||
}
|
||||
|
||||
// 获取验证码按钮倒计时
|
||||
function startCountdown() {
|
||||
const getCodeButton = $('#getCode');
|
||||
// getCodeButton.text('重新获取(' + countdown + 's)后');
|
||||
getCodeButton.text(+ countdown + 's');
|
||||
getCodeButton.prop('disabled', true);
|
||||
countdown--;
|
||||
|
||||
if (countdown >= 0) {
|
||||
setTimeout(startCountdown, 1000);
|
||||
} else {
|
||||
getCodeButton.text('获取验证码');
|
||||
getCodeButton.prop('disabled', false);
|
||||
countdown = 120;
|
||||
}
|
||||
}
|
||||
|
||||
// 事件绑定
|
||||
$(document).ready(function () {
|
||||
|
||||
// 绑定事件以更新注册按钮状态
|
||||
$('#phone').on('input', updateRegisterButtonStatus);
|
||||
$('#code').on('input', updateRegisterButtonStatus);
|
||||
$('#pwd').on('input', updateRegisterButtonStatus);
|
||||
$('.agreement input').on('change', updateRegisterButtonStatus);
|
||||
|
||||
// 页面加载完成后检查本地存储中的验证码状态
|
||||
if (localStorage.getItem('isCodeSent') === 'true') {
|
||||
isCodeSent = true;
|
||||
updateRegisterButtonStatus(); // 更新注册按钮状态
|
||||
}
|
||||
|
||||
// 页面加载完成后调用 switchPwd 函数
|
||||
switchPwd();
|
||||
|
||||
// 初始化注册按钮状态
|
||||
updateRegisterButtonStatus();
|
||||
|
||||
$('#phone').on('input', function () {
|
||||
const phone = $(this).val();
|
||||
isPhoneValid = validatePhone(phone);
|
||||
updateRegisterButtonStatus();
|
||||
});
|
||||
|
||||
$('#getCode').on('click', function () {
|
||||
const phone = $('#phone').val();
|
||||
if (!isPhoneValid) {
|
||||
layer.msg('请输入正确的手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
// 发送请求1，校验手机号是否存在
|
||||
$.ajax({
|
||||
url: 'https://www.aimzhu.com/operator/api/systemuser/check-exists/' + phone,
|
||||
// url: 'https://www.aimzhu.com/operator/api/verify/code/send/' + phone,
|
||||
type: 'GET',
|
||||
success: function (response) {
|
||||
console.log(response)
|
||||
if (response) {
|
||||
layer.msg('此用户已存在');
|
||||
} else {
|
||||
// 发送请求2，发送验证码
|
||||
$.ajax({
|
||||
// url: 'https://www.aimzhu.com/operator/app/sms/verify-code/' + phone,
|
||||
url: 'https://www.aimzhu.com/operator/api/verify/code/send/' + phone,
|
||||
type: 'GET',
|
||||
success: function (response) {
|
||||
layer.msg('验证码已发送');
|
||||
isCodeSent = true; //验证码已发送标志
|
||||
startCountdown();
|
||||
updateRegisterButtonStatus(); // 更新注册按钮状态
|
||||
// 存储验证码状态到本地存储
|
||||
localStorage.setItem('isCodeSent', true);
|
||||
},
|
||||
error: function (error) {
|
||||
// console.error(error);
|
||||
layer.msg(error.responseJSON.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function (error) {
|
||||
// console.error(error);
|
||||
layer.msg('校验手机号失败');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#pwd').on('input', updateRegisterButtonStatus);
|
||||
$('.agreement input').on('change', updateRegisterButtonStatus);
|
||||
|
||||
$('#register').on('click', function () {
|
||||
const phone = $('#phone').val();
|
||||
const verifyCode = $('#code').val();
|
||||
const password = $('#pwd').val();
|
||||
const passwordSame = $('#pwd').val();
|
||||
|
||||
$(this).prop('disabled', true);
|
||||
// 发送请求到后端
|
||||
$.ajax({
|
||||
url: 'https://www.aimzhu.com/operator/app/register/phone-password?userRole=606f85bc-63fd-407e-8e2e-6ce48178b70a',
|
||||
type: 'POST',
|
||||
data: JSON.stringify({
|
||||
phone: phone,
|
||||
verifyCode: verifyCode,
|
||||
password: password,
|
||||
passwordSame: password
|
||||
}),
|
||||
contentType: "application/json;charset=utf-8",
|
||||
success: function (response) {
|
||||
$('#register').addClass('register-disabled');
|
||||
$('#register').css('cursor', 'not-allowed');
|
||||
$('#register').prop('disabled', true); // 注册成功后，重新设置按钮为不可点击
|
||||
$('#register').css('background-color', '#C0C0C0');
|
||||
layer.msg('注册成功，3秒后跳转登录页', { time: 3000 },
|
||||
function () {
|
||||
window.location.href = 'https://www.aimzhu.com/operator/';
|
||||
});
|
||||
},
|
||||
error: function (error) {
|
||||
// console.error(error);
|
||||
layer.msg('注册失败：' + error.responseJSON.msg);
|
||||
$('#register').prop('disabled', false);
|
||||
}
|
||||
});
|
||||
// 注册成功后，清除本地存储中的验证码状态
|
||||
localStorage.removeItem('isCodeSent');
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
543
src/components/Register copy 3.html
Normal file
543
src/components/Register copy 3.html
Normal file
@ -0,0 +1,543 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/svg+xml" href="../assets/AImzhu2.svg">
|
||||
<title>注册界面</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<link rel="stylesheet" href="./assets/font/iconfont.css">
|
||||
<link rel="stylesheet" href="./layui/css/layui.css">
|
||||
<style>
|
||||
@media screen and (max-width: 1920px) {
|
||||
html {
|
||||
font-size: 66px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1360px) {
|
||||
html {
|
||||
font-size: 80px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: url(../assets/img/login-register-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.page .top {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 100vw;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.top .left {
|
||||
width: 3.25rem;
|
||||
height: .625rem;
|
||||
margin: .1875rem .625rem;
|
||||
}
|
||||
|
||||
.top .left .logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* background: url(./assets/img/headicon2.png) no-repeat; */
|
||||
background: url(../assets/img/headicon21.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.top .right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 2.5rem;
|
||||
height: .5rem;
|
||||
margin: .25rem .375rem;
|
||||
}
|
||||
|
||||
.top .right #login {
|
||||
font-size: .2rem;
|
||||
padding: .0625rem .25rem;
|
||||
border: none;
|
||||
border-radius: .3125rem;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
color: #42210B;
|
||||
}
|
||||
|
||||
.top .right #login:hover {
|
||||
cursor: pointer;
|
||||
background: #42210B;
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.top .right #goHomePage {
|
||||
font-size: .2rem;
|
||||
padding: .0625rem .25rem;
|
||||
border: none;
|
||||
border-radius: .3125rem;
|
||||
color: #FFF;
|
||||
background: #42210B;
|
||||
}
|
||||
|
||||
.top .right #goHomePage:hover {
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loginBox {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 6.25rem;
|
||||
height: 6.875rem;
|
||||
background-color: #fff;
|
||||
border-radius: .25rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.loginBox .title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loginBox .title h3 {
|
||||
font-size: .275rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loginBox .title span {
|
||||
display: block;
|
||||
width: .875rem;
|
||||
height: .0625rem;
|
||||
background-color: #fda633;
|
||||
margin-left: .375rem;
|
||||
margin-top: .0625rem;
|
||||
}
|
||||
|
||||
.loginBox .msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
margin-bottom: .25rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
text-indent: .1875rem;
|
||||
border: none;
|
||||
border: .0187rem solid #CCC;
|
||||
border-radius: .1rem;
|
||||
font-size: .1875rem;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
input:-webkit-autofill {
|
||||
background: transparent;
|
||||
transition: background-color 50000s ease-in-out 0s;
|
||||
-webkit-text-fill-color: unset;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: #999999
|
||||
}
|
||||
|
||||
/*去除ie edge的密码框默认出现的小眼睛*/
|
||||
input[type="password"]::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="password"]::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="password"]::-o-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li input:focus-within {
|
||||
border: .0156rem solid #fa911e;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li input:hover {
|
||||
border: .0156rem solid #fa911e;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(2) button {
|
||||
position: absolute;
|
||||
right: .125rem;
|
||||
width: 1.25rem;
|
||||
height: .375rem;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
letter-spacing: .025rem;
|
||||
margin: .125rem 0;
|
||||
cursor: pointer;
|
||||
color: #0095ff;
|
||||
font-size: .1875rem;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(2) button:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(3) i {
|
||||
position: absolute;
|
||||
top: .1875rem;
|
||||
right: .125rem;
|
||||
display: block;
|
||||
width: .25rem;
|
||||
height: .25rem;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(3) i:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: start;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
line-height: .5rem;
|
||||
color: #333;
|
||||
font-size: .175rem;
|
||||
margin-top: .25rem;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement input {
|
||||
width: .25rem;
|
||||
height: .25rem;
|
||||
margin: .125rem 0;
|
||||
color: #333;
|
||||
font-size: .15rem;
|
||||
margin-right: .125rem;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement a {
|
||||
color: #0095ff;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement a:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.loginBox .msg #register {
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
border: none;
|
||||
border-radius: .1rem;
|
||||
background-color: #C0C0C0;
|
||||
color: #FFF;
|
||||
font-size: .225rem;
|
||||
margin-top: .125rem;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loginBox .msg .register-disabled {
|
||||
background-color: #fda633;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loginBox .msg .register:not(.register-disabled):hover {
|
||||
font-size: .25rem;
|
||||
font-weight: 700;
|
||||
-webkit-box-shadow: 0 0 .125rem #fda633;
|
||||
-moz-box-shadow: 0 0 .125rem #fda633;
|
||||
box-shadow: 0 0 .125rem #fda633;
|
||||
/* cursor: pointer; */
|
||||
background-color: #fda633;
|
||||
}
|
||||
|
||||
.loginBox .goPage {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: end;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
margin-top: .125rem;
|
||||
font-size: .1875rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.loginBox .goPage a {
|
||||
color: #0095ff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="top">
|
||||
<a class="left" href="https://www.aimzhu.com">
|
||||
<div class="logo"></div>
|
||||
</a>
|
||||
<div class="right">
|
||||
<a id="login" class="login" href="https://www.aimzhu.com/operator/">登录</a>
|
||||
<a id="goHomePage" class="goHomePage" href="https://www.aimzhu.com">返回首页</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="loginBox">
|
||||
<div class="title">
|
||||
<h3>平台账号注册</h3>
|
||||
<span></span>
|
||||
</div>
|
||||
<form action="" class="msg">
|
||||
<ul class="msgBox">
|
||||
<li>
|
||||
<input id="phone" type="text" placeholder="请输入您的手机号">
|
||||
</li>
|
||||
<li>
|
||||
<input id="code" type="text" placeholder="请输入短信验证码">
|
||||
<button id="getCode" type="button">获取验证码</button>
|
||||
</li>
|
||||
<li>
|
||||
<input id="pwd" type="password" placeholder="请输入密码(8~16位，大小写字母，数字或特殊字符)">
|
||||
<i id="showHide" class="iconfont icon-xianshiyincang1"></i>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="agreement">
|
||||
<input type="checkbox">我同意平台
|
||||
<a href="https://www.aimzhu.com/UserAgreement.html" target="_blank">《用户服务协议》</a>
|
||||
和
|
||||
<a href="https://www.aimzhu.com/PrivacyPolicy.html" target="_blank">《隐私条款》</a>
|
||||
</div>
|
||||
<button id="register" class="register" type="button" disabled>注册</button>
|
||||
</form>
|
||||
<div class="goPage">
|
||||
<span>已有账号？<a href="https://www.aimzhu.com/operator/">立即登录</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./jquery.min.js"></script>
|
||||
<script src="./layui/layui.js"></script>
|
||||
<script src="./Register.js"></script>
|
||||
<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
|
||||
<script>
|
||||
|
||||
const $ = layui.jquery;
|
||||
const layer = layui.layer;
|
||||
|
||||
let isPhoneValid = false;
|
||||
let isCodeSent = false;
|
||||
let countdown = 120;
|
||||
|
||||
// 手机号校验
|
||||
function validatePhone(phone) {
|
||||
const phoneRegex = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
|
||||
return phoneRegex.test(phone);
|
||||
}
|
||||
|
||||
// 验证码校验
|
||||
function validateCode(code) {
|
||||
const codeRegex = /^\d{6}$/;
|
||||
return codeRegex.test(code)
|
||||
}
|
||||
|
||||
// 密码校验
|
||||
function validatePassword(password) {
|
||||
const passwordRegex = /^[A-Za-z0-9!@#$%^&*()_+{}\[\]:;<>,.?\/~\-]{8,16}$/;
|
||||
return passwordRegex.test(password);
|
||||
}
|
||||
|
||||
// 显示隐藏密码
|
||||
switchPwd()
|
||||
function switchPwd() {
|
||||
var pwd = $('#pwd')
|
||||
var showHide = $('#showHide')
|
||||
showHide.off('click').on('click', function () {
|
||||
if (showHide.hasClass('icon-xianshiyincang1')) {
|
||||
pwd.attr('type', 'text') // 密码可见
|
||||
showHide.removeClass('icon-xianshiyincang1').addClass('icon-xianshiyincang')
|
||||
} else {
|
||||
pwd.attr('type', 'password') // 密码隐藏
|
||||
showHide.removeClass('icon-xianshiyincang').addClass('icon-xianshiyincang1')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 更新注册按钮状态
|
||||
function updateRegisterButtonStatus() {
|
||||
const phone = $('#phone').val();
|
||||
const code = $('#code').val();
|
||||
const pwd = $('#pwd').val();
|
||||
const agreement = $('.agreement input').prop('checked');
|
||||
const isFormValid = isPhoneValid && isCodeSent && validateCode(code) && validatePassword(pwd) && agreement;
|
||||
if (isFormValid) {
|
||||
$('#register').removeClass('register-disabled');
|
||||
$('#register').css('cursor', 'pointer'); // 设置鼠标样式为指针
|
||||
$('#register').prop('disabled', false); // 移除disabled属性
|
||||
$('#register').css('background-color', '#fda633'); // 设置按钮背景颜色为橘色
|
||||
} else {
|
||||
$('#register').addClass('register-disabled');
|
||||
$('#register').css('cursor', 'not-allowed'); // 设置鼠标样式为禁止
|
||||
$('#register').prop('disabled', true); // 设置disabled属性
|
||||
$('#register').css('background-color', '#C0C0C0'); // 设置按钮背景颜色为橘色
|
||||
}
|
||||
}
|
||||
|
||||
// 获取验证码按钮倒计时
|
||||
function startCountdown() {
|
||||
const getCodeButton = $('#getCode');
|
||||
// getCodeButton.text('重新获取(' + countdown + 's)后');
|
||||
getCodeButton.text(+ countdown + 's');
|
||||
getCodeButton.prop('disabled', true);
|
||||
countdown--;
|
||||
|
||||
if (countdown >= 0) {
|
||||
setTimeout(startCountdown, 1000);
|
||||
} else {
|
||||
getCodeButton.text('获取验证码');
|
||||
getCodeButton.prop('disabled', false);
|
||||
countdown = 120;
|
||||
}
|
||||
}
|
||||
|
||||
// 事件绑定
|
||||
$(document).ready(function () {
|
||||
|
||||
// 绑定事件以更新注册按钮状态
|
||||
$('#phone').on('input', updateRegisterButtonStatus);
|
||||
$('#code').on('input', updateRegisterButtonStatus);
|
||||
$('#pwd').on('input', updateRegisterButtonStatus);
|
||||
$('.agreement input').on('change', updateRegisterButtonStatus);
|
||||
|
||||
// 页面加载完成后检查本地存储中的验证码状态
|
||||
if (localStorage.getItem('isCodeSent') === 'true') {
|
||||
isCodeSent = true;
|
||||
updateRegisterButtonStatus(); // 更新注册按钮状态
|
||||
}
|
||||
|
||||
// 页面加载完成后调用 switchPwd 函数
|
||||
switchPwd();
|
||||
|
||||
// 初始化注册按钮状态
|
||||
updateRegisterButtonStatus();
|
||||
|
||||
$('#phone').on('input', function () {
|
||||
const phone = $(this).val();
|
||||
isPhoneValid = validatePhone(phone);
|
||||
updateRegisterButtonStatus();
|
||||
});
|
||||
|
||||
$('#getCode').on('click', function () {
|
||||
const phone = $('#phone').val();
|
||||
if (!isPhoneValid) {
|
||||
layer.msg('请输入正确的手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
// 发送请求1，校验手机号是否存在
|
||||
$.ajax({
|
||||
url: 'https://www.aimzhu.com/operator/api/systemuser/check-exists/' + phone,
|
||||
// url: 'https://www.aimzhu.com/operator/api/verify/code/send/' + phone,
|
||||
type: 'GET',
|
||||
success: function (response) {
|
||||
console.log(response)
|
||||
if (response) {
|
||||
layer.msg('此用户已存在');
|
||||
} else {
|
||||
// 发送请求2，发送验证码
|
||||
$.ajax({
|
||||
// url: 'https://www.aimzhu.com/operator/app/sms/verify-code/' + phone,
|
||||
url: 'https://www.aimzhu.com/operator/api/verify/code/send/' + phone,
|
||||
type: 'GET',
|
||||
success: function (response) {
|
||||
layer.msg('验证码已发送');
|
||||
isCodeSent = true; //验证码已发送标志
|
||||
startCountdown();
|
||||
updateRegisterButtonStatus(); // 更新注册按钮状态
|
||||
// 存储验证码状态到本地存储
|
||||
localStorage.setItem('isCodeSent', true);
|
||||
},
|
||||
error: function (error) {
|
||||
// console.error(error);
|
||||
layer.msg(error.responseJSON.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function (error) {
|
||||
// console.error(error);
|
||||
layer.msg('校验手机号失败');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#pwd').on('input', updateRegisterButtonStatus);
|
||||
$('.agreement input').on('change', updateRegisterButtonStatus);
|
||||
|
||||
$('#register').on('click', function () {
|
||||
const phone = $('#phone').val();
|
||||
const verifyCode = $('#code').val();
|
||||
const password = $('#pwd').val();
|
||||
const passwordSame = $('#pwd').val();
|
||||
|
||||
$(this).prop('disabled', true);
|
||||
// 发送请求到后端
|
||||
$.ajax({
|
||||
url: 'https://www.aimzhu.com/operator/app/register/phone-password?userRole=606f85bc-63fd-407e-8e2e-6ce48178b70a',
|
||||
type: 'POST',
|
||||
data: JSON.stringify({
|
||||
phone: phone,
|
||||
verifyCode: verifyCode,
|
||||
password: password,
|
||||
passwordSame: password
|
||||
}),
|
||||
contentType: "application/json;charset=utf-8",
|
||||
success: function (response) {
|
||||
$('#register').addClass('register-disabled');
|
||||
$('#register').css('cursor', 'not-allowed');
|
||||
$('#register').prop('disabled', true); // 注册成功后，重新设置按钮为不可点击
|
||||
$('#register').css('background-color', '#C0C0C0');
|
||||
layer.msg('注册成功，3秒后跳转登录页', { time: 3000 },
|
||||
function () {
|
||||
window.location.href = 'https://www.aimzhu.com/operator/';
|
||||
});
|
||||
},
|
||||
error: function (error) {
|
||||
// console.error(error);
|
||||
layer.msg('注册失败：' + error.responseJSON.msg);
|
||||
$('#register').prop('disabled', false);
|
||||
}
|
||||
});
|
||||
// 注册成功后，清除本地存储中的验证码状态
|
||||
localStorage.removeItem('isCodeSent');
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
546
src/components/Register copy.html
Normal file
546
src/components/Register copy.html
Normal file
@ -0,0 +1,546 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/svg+xml" href="../assets/AImzhu2.svg">
|
||||
<title>注册界面</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<link rel="stylesheet" href="./assets/font/iconfont.css">
|
||||
<link rel="stylesheet" href="./layui/css/layui.css">
|
||||
<style>
|
||||
@media screen and (max-width: 1920px) {
|
||||
html {
|
||||
font-size: 66px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1360px) {
|
||||
html {
|
||||
font-size: 80px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: url(../assets/img/login-register-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.page .top {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 100vw;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.top .left {
|
||||
/* width: 3.25rem;
|
||||
height: .625rem; */
|
||||
width: 2.325rem;
|
||||
height: .75rem;
|
||||
/* margin: .1875rem .625rem; */
|
||||
margin: .125rem .625rem;
|
||||
}
|
||||
|
||||
.top .left .logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* background: url(../assets/img/headicon2.png) no-repeat; */
|
||||
background: url(../assets/img/444.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.top .right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 2.5rem;
|
||||
height: .5rem;
|
||||
margin: .25rem .375rem;
|
||||
}
|
||||
|
||||
.top .right #login {
|
||||
font-size: .2rem;
|
||||
padding: .0625rem .25rem;
|
||||
border: none;
|
||||
border-radius: .3125rem;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
color: #42210B;
|
||||
}
|
||||
|
||||
.top .right #login:hover {
|
||||
cursor: pointer;
|
||||
background: #42210B;
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.top .right #goHomePage {
|
||||
font-size: .2rem;
|
||||
padding: .0625rem .25rem;
|
||||
border: none;
|
||||
border-radius: .3125rem;
|
||||
color: #FFF;
|
||||
background: #42210B;
|
||||
}
|
||||
|
||||
.top .right #goHomePage:hover {
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loginBox {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 6.25rem;
|
||||
height: 6.875rem;
|
||||
background-color: #fff;
|
||||
border-radius: .25rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.loginBox .title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loginBox .title h3 {
|
||||
font-size: .275rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loginBox .title span {
|
||||
display: block;
|
||||
width: .875rem;
|
||||
height: .0625rem;
|
||||
background-color: #fda633;
|
||||
margin-left: .375rem;
|
||||
margin-top: .0625rem;
|
||||
}
|
||||
|
||||
.loginBox .msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
margin-bottom: .25rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
text-indent: .1875rem;
|
||||
border: none;
|
||||
border: .0187rem solid #CCC;
|
||||
border-radius: .1rem;
|
||||
font-size: .1875rem;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
input:-webkit-autofill {
|
||||
background: transparent;
|
||||
transition: background-color 50000s ease-in-out 0s;
|
||||
-webkit-text-fill-color: unset;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: #999999
|
||||
}
|
||||
|
||||
/*去除ie edge的密码框默认出现的小眼睛*/
|
||||
input[type="password"]::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="password"]::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="password"]::-o-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li input:focus-within {
|
||||
border: .0156rem solid #fa911e;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li input:hover {
|
||||
border: .0156rem solid #fa911e;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(2) button {
|
||||
position: absolute;
|
||||
right: .125rem;
|
||||
width: 1.25rem;
|
||||
height: .375rem;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
letter-spacing: .025rem;
|
||||
margin: .125rem 0;
|
||||
cursor: pointer;
|
||||
color: #0095ff;
|
||||
font-size: .1875rem;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(2) button:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(3) i {
|
||||
position: absolute;
|
||||
top: .1875rem;
|
||||
right: .125rem;
|
||||
display: block;
|
||||
width: .25rem;
|
||||
height: .25rem;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(3) i:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: start;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
line-height: .5rem;
|
||||
color: #333;
|
||||
font-size: .175rem;
|
||||
margin-top: .25rem;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement input {
|
||||
width: .25rem;
|
||||
height: .25rem;
|
||||
margin: .125rem 0;
|
||||
color: #333;
|
||||
font-size: .15rem;
|
||||
margin-right: .125rem;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement a {
|
||||
color: #0095ff;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement a:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.loginBox .msg #register {
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
border: none;
|
||||
border-radius: .1rem;
|
||||
background-color: #C0C0C0;
|
||||
color: #FFF;
|
||||
font-size: .225rem;
|
||||
margin-top: .125rem;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loginBox .msg .register-disabled {
|
||||
background-color: #fda633;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loginBox .msg .register:not(.register-disabled):hover {
|
||||
font-size: .25rem;
|
||||
font-weight: 700;
|
||||
-webkit-box-shadow: 0 0 .125rem #fda633;
|
||||
-moz-box-shadow: 0 0 .125rem #fda633;
|
||||
box-shadow: 0 0 .125rem #fda633;
|
||||
/* cursor: pointer; */
|
||||
background-color: #fda633;
|
||||
}
|
||||
|
||||
.loginBox .goPage {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: end;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
margin-top: .125rem;
|
||||
font-size: .1875rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.loginBox .goPage a {
|
||||
color: #0095ff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="top">
|
||||
<a class="left" href="https://www.aimzhu.com">
|
||||
<div class="logo"></div>
|
||||
</a>
|
||||
<div class="right">
|
||||
<a id="login" class="login" href="https://www.aimzhu.com/operator/">登录</a>
|
||||
<a id="goHomePage" class="goHomePage" href="https://www.aimzhu.com">返回首页</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="loginBox">
|
||||
<div class="title">
|
||||
<h3>平台账号注册</h3>
|
||||
<span></span>
|
||||
</div>
|
||||
<form action="" class="msg">
|
||||
<ul class="msgBox">
|
||||
<li>
|
||||
<input id="phone" type="text" placeholder="请输入您的手机号">
|
||||
</li>
|
||||
<li>
|
||||
<input id="code" type="text" placeholder="请输入短信验证码">
|
||||
<button id="getCode" type="button">获取验证码</button>
|
||||
</li>
|
||||
<li>
|
||||
<input id="pwd" type="password" placeholder="请输入密码(8~16位，大小写字母，数字或特殊字符)">
|
||||
<i id="showHide" class="iconfont icon-xianshiyincang1"></i>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="agreement">
|
||||
<input type="checkbox">我同意平台
|
||||
<a href="https://www.aimzhu.com/UserAgreement.html" target="_blank">《用户服务协议》</a>
|
||||
和
|
||||
<a href="https://www.aimzhu.com/PrivacyPolicy.html" target="_blank">《隐私条款》</a>
|
||||
</div>
|
||||
<button id="register" class="register" type="button" disabled>注册</button>
|
||||
</form>
|
||||
<div class="goPage">
|
||||
<span>已有账号？<a href="https://www.aimzhu.com/operator/">立即登录</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./jquery.min.js"></script>
|
||||
<script src="./layui/layui.js"></script>
|
||||
<script src="./Register.js"></script>
|
||||
<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
|
||||
<script>
|
||||
|
||||
const $ = layui.jquery;
|
||||
const layer = layui.layer;
|
||||
|
||||
let isPhoneValid = false;
|
||||
let isCodeSent = false;
|
||||
let countdown = 120;
|
||||
|
||||
// 手机号校验
|
||||
function validatePhone(phone) {
|
||||
const phoneRegex = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
|
||||
return phoneRegex.test(phone);
|
||||
}
|
||||
|
||||
// 验证码校验
|
||||
function validateCode(code) {
|
||||
const codeRegex = /^\d{6}$/;
|
||||
return codeRegex.test(code)
|
||||
}
|
||||
|
||||
// 密码校验
|
||||
function validatePassword(password) {
|
||||
const passwordRegex = /^[A-Za-z0-9!@#$%^&*()_+{}\[\]:;<>,.?\/~\-]{8,16}$/;
|
||||
return passwordRegex.test(password);
|
||||
}
|
||||
|
||||
// 显示隐藏密码
|
||||
switchPwd()
|
||||
function switchPwd() {
|
||||
var pwd = $('#pwd')
|
||||
var showHide = $('#showHide')
|
||||
showHide.off('click').on('click', function () {
|
||||
if (showHide.hasClass('icon-xianshiyincang1')) {
|
||||
pwd.attr('type', 'text') // 密码可见
|
||||
showHide.removeClass('icon-xianshiyincang1').addClass('icon-xianshiyincang')
|
||||
} else {
|
||||
pwd.attr('type', 'password') // 密码隐藏
|
||||
showHide.removeClass('icon-xianshiyincang').addClass('icon-xianshiyincang1')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 更新注册按钮状态
|
||||
function updateRegisterButtonStatus() {
|
||||
const phone = $('#phone').val();
|
||||
const code = $('#code').val();
|
||||
const pwd = $('#pwd').val();
|
||||
const agreement = $('.agreement input').prop('checked');
|
||||
const isFormValid = isPhoneValid && isCodeSent && validateCode(code) && validatePassword(pwd) && agreement;
|
||||
if (isFormValid) {
|
||||
$('#register').removeClass('register-disabled');
|
||||
$('#register').css('cursor', 'pointer'); // 设置鼠标样式为指针
|
||||
$('#register').prop('disabled', false); // 移除disabled属性
|
||||
$('#register').css('background-color', '#fda633'); // 设置按钮背景颜色为橘色
|
||||
} else {
|
||||
$('#register').addClass('register-disabled');
|
||||
$('#register').css('cursor', 'not-allowed'); // 设置鼠标样式为禁止
|
||||
$('#register').prop('disabled', true); // 设置disabled属性
|
||||
$('#register').css('background-color', '#C0C0C0'); // 设置按钮背景颜色为橘色
|
||||
}
|
||||
}
|
||||
|
||||
// 获取验证码按钮倒计时
|
||||
function startCountdown() {
|
||||
const getCodeButton = $('#getCode');
|
||||
// getCodeButton.text('重新获取(' + countdown + 's)后');
|
||||
getCodeButton.text(+ countdown + 's');
|
||||
getCodeButton.prop('disabled', true);
|
||||
countdown--;
|
||||
|
||||
if (countdown >= 0) {
|
||||
setTimeout(startCountdown, 1000);
|
||||
} else {
|
||||
getCodeButton.text('获取验证码');
|
||||
getCodeButton.prop('disabled', false);
|
||||
countdown = 120;
|
||||
}
|
||||
}
|
||||
|
||||
// 事件绑定
|
||||
$(document).ready(function () {
|
||||
|
||||
// 绑定事件以更新注册按钮状态
|
||||
$('#phone').on('input', updateRegisterButtonStatus);
|
||||
$('#code').on('input', updateRegisterButtonStatus);
|
||||
$('#pwd').on('input', updateRegisterButtonStatus);
|
||||
$('.agreement input').on('change', updateRegisterButtonStatus);
|
||||
|
||||
// 页面加载完成后检查本地存储中的验证码状态
|
||||
if (localStorage.getItem('isCodeSent') === 'true') {
|
||||
isCodeSent = true;
|
||||
updateRegisterButtonStatus(); // 更新注册按钮状态
|
||||
}
|
||||
|
||||
// 页面加载完成后调用 switchPwd 函数
|
||||
switchPwd();
|
||||
|
||||
// 初始化注册按钮状态
|
||||
updateRegisterButtonStatus();
|
||||
|
||||
$('#phone').on('input', function () {
|
||||
const phone = $(this).val();
|
||||
isPhoneValid = validatePhone(phone);
|
||||
updateRegisterButtonStatus();
|
||||
});
|
||||
|
||||
$('#getCode').on('click', function () {
|
||||
const phone = $('#phone').val();
|
||||
if (!isPhoneValid) {
|
||||
layer.msg('请输入正确的手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
// 发送请求1，校验手机号是否存在
|
||||
$.ajax({
|
||||
url: 'https://www.aimzhu.com/operator/api/systemuser/check-exists/' + phone,
|
||||
// url: 'https://www.aimzhu.com/operator/api/verify/code/send/' + phone,
|
||||
type: 'GET',
|
||||
success: function (response) {
|
||||
console.log(response)
|
||||
if (response) {
|
||||
layer.msg('此用户已存在');
|
||||
} else {
|
||||
// 发送请求2，发送验证码
|
||||
$.ajax({
|
||||
// url: 'https://www.aimzhu.com/operator/app/sms/verify-code/' + phone,
|
||||
url: 'https://www.aimzhu.com/operator/api/verify/code/send/' + phone,
|
||||
type: 'GET',
|
||||
success: function (response) {
|
||||
layer.msg('验证码已发送');
|
||||
isCodeSent = true; //验证码已发送标志
|
||||
startCountdown();
|
||||
updateRegisterButtonStatus(); // 更新注册按钮状态
|
||||
// 存储验证码状态到本地存储
|
||||
localStorage.setItem('isCodeSent', true);
|
||||
},
|
||||
error: function (error) {
|
||||
// console.error(error);
|
||||
layer.msg(error.responseJSON.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function (error) {
|
||||
// console.error(error);
|
||||
layer.msg('校验手机号失败');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#pwd').on('input', updateRegisterButtonStatus);
|
||||
$('.agreement input').on('change', updateRegisterButtonStatus);
|
||||
|
||||
$('#register').on('click', function () {
|
||||
const phone = $('#phone').val();
|
||||
const verifyCode = $('#code').val();
|
||||
const password = $('#pwd').val();
|
||||
const passwordSame = $('#pwd').val();
|
||||
|
||||
$(this).prop('disabled', true);
|
||||
// 发送请求到后端
|
||||
$.ajax({
|
||||
url: 'https://www.aimzhu.com/operator/app/register/phone-password?userRole=606f85bc-63fd-407e-8e2e-6ce48178b70a',
|
||||
type: 'POST',
|
||||
data: JSON.stringify({
|
||||
phone: phone,
|
||||
verifyCode: verifyCode,
|
||||
password: password,
|
||||
passwordSame: password
|
||||
}),
|
||||
contentType: "application/json;charset=utf-8",
|
||||
success: function (response) {
|
||||
$('#register').addClass('register-disabled');
|
||||
$('#register').css('cursor', 'not-allowed');
|
||||
$('#register').prop('disabled', true); // 注册成功后，重新设置按钮为不可点击
|
||||
$('#register').css('background-color', '#C0C0C0');
|
||||
layer.msg('注册成功，3秒后跳转登录页', { time: 3000 },
|
||||
function () {
|
||||
window.location.href = 'https://www.aimzhu.com/operator/';
|
||||
});
|
||||
},
|
||||
error: function (error) {
|
||||
// console.error(error);
|
||||
layer.msg('注册失败：' + error.responseJSON.msg);
|
||||
$('#register').prop('disabled', false);
|
||||
}
|
||||
});
|
||||
// 注册成功后，清除本地存储中的验证码状态
|
||||
localStorage.removeItem('isCodeSent');
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -4,7 +4,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/svg+xml" href="./assets/AImzhu.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="../assets/AImzhu2.svg">
|
||||
<title>注册界面</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<link rel="stylesheet" href="./assets/font/iconfont.css">
|
||||
@ -26,14 +26,15 @@
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: url(./assets/img/login-register-bj.png) no-repeat;
|
||||
/* background: url(../assets/img/login-register-bj.png) no-repeat; */
|
||||
background: url(../assets/img/login-register-bj.jpg) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.page .top {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
justify-content: end;
|
||||
align-content: center;
|
||||
width: 100vw;
|
||||
height: 1rem;
|
||||
@ -48,7 +49,21 @@
|
||||
.top .left .logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(./assets/img/headicon2.png) no-repeat;
|
||||
/* background: url(./assets/img/headicon2.png) no-repeat; */
|
||||
/* background: url(../assets/img/headicon21.png) no-repeat; */
|
||||
background: url(../assets/img/registerlogo.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.top .center {
|
||||
width: 3.25rem;
|
||||
height: .625rem;
|
||||
margin: .1875rem .625rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.top .center .logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../assets/img/registerlogo.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
@ -99,36 +114,63 @@
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 6.25rem;
|
||||
height: 6.875rem;
|
||||
/* width: 6.25rem;
|
||||
height: 6.875rem; */
|
||||
width: 5.5rem;
|
||||
/* height: 5.9rem; */
|
||||
background-color: #fff;
|
||||
border-radius: .25rem;
|
||||
padding: .5rem;
|
||||
box-shadow: 0 0 5px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.loginBox .title {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
/* margin-bottom: 0.25rem; */
|
||||
}
|
||||
.loginBox .title .titleBox {
|
||||
display: flex;
|
||||
height: .375rem;
|
||||
margin: .1125rem .125rem .1125rem 0;
|
||||
}
|
||||
.loginBox .title .titleBox span {
|
||||
display: block;
|
||||
width: .0625rem;
|
||||
height: 100%;
|
||||
background-color: #fda633;
|
||||
margin-right: .125rem;
|
||||
}
|
||||
|
||||
.loginBox .title h3 {
|
||||
.loginBox .title .titleBox h3 {
|
||||
font-size: .275rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loginBox .title span {
|
||||
/* .loginBox .title span {
|
||||
display: block;
|
||||
width: .875rem;
|
||||
height: .0625rem;
|
||||
background-color: #fda633;
|
||||
margin-left: .375rem;
|
||||
margin-top: .0625rem;
|
||||
} */
|
||||
.loginBox .registerLogo {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.loginBox .registerLogo img {
|
||||
width: 2.4375rem;
|
||||
height: .6rem;
|
||||
}
|
||||
|
||||
.loginBox .msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-top: .5rem;
|
||||
margin-top: .25rem;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox {
|
||||
@ -229,7 +271,7 @@
|
||||
line-height: .5rem;
|
||||
color: #333;
|
||||
font-size: .175rem;
|
||||
margin-top: .25rem;
|
||||
/* margin-top: .25rem; */
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement input {
|
||||
@ -297,9 +339,12 @@
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="top">
|
||||
<a class="left" href="https://www.aimzhu.com">
|
||||
<!-- <div class="left" > -->
|
||||
<!-- <div class="logo"></div> -->
|
||||
<!-- </div> -->
|
||||
<!-- <div class="center">
|
||||
<div class="logo"></div>
|
||||
</a>
|
||||
</div> -->
|
||||
<div class="right">
|
||||
<a id="login" class="login" href="https://www.aimzhu.com/operator/">登录</a>
|
||||
<a id="goHomePage" class="goHomePage" href="https://www.aimzhu.com">返回首页</a>
|
||||
@ -307,9 +352,16 @@
|
||||
</div>
|
||||
<div class="loginBox">
|
||||
<div class="title">
|
||||
<h3>平台账号注册</h3>
|
||||
<span></span>
|
||||
<div class="titleBox">
|
||||
<span></span>
|
||||
<h3>平台账号注册</h3>
|
||||
<!-- <span></span> -->
|
||||
</div>
|
||||
<a class="registerLogo" href="https://www.aimzhu.com">
|
||||
<img src="../assets/img/registerlogo.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<form action="" class="msg">
|
||||
<ul class="msgBox">
|
||||
<li>
|
||||
|
||||
467
src/components/Report copy.vue
Normal file
467
src/components/Report copy.vue
Normal file
@ -0,0 +1,467 @@
|
||||
<template>
|
||||
<div class="report">
|
||||
<div class="box-bottom">
|
||||
<div class="box">
|
||||
<div class="report-content">
|
||||
<textarea name="" id="jbtext" cols="50" rows="10" autocomplete="off" placeholder="举报事由..." @blur="loseinputtext()"></textarea>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<input id="phone" type="text" placeholder="请输入手机号码" autocomplete="off" @blur="losephone()">
|
||||
<!-- <span id="getCode" @click="getCode()">获取验证码</span> -->
|
||||
<span id="getCode" @click="getCode()" v-bind:disabled="isCounting">
|
||||
{{ isCounting ? `${countdown}s后重试` : '获取验证码' }}
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<input id="inputyzm" type="text" placeholder="请输入验证码" autocomplete="off" @blur="loseinputyzm()">
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" @click="submit()">投诉举报</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <div class="success" v-show="isSuccessVisible"> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="mask" v-show="isMaskVisible">
|
||||
<div class="success">
|
||||
<i></i>
|
||||
<p>投诉举报成功！</p>
|
||||
<button type="button" @click="closeMask()">返回首页</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from 'jquery';
|
||||
import axios from 'axios'
|
||||
import { layer } from "vue3-layer"
|
||||
// import { onBeforeRouteLeave } from 'vue-router'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isMaskVisible: false,
|
||||
// isComplaintVisible: true, // 控制投诉表单的显示
|
||||
// isSuccessVisible: false // 控制成功消息的显示
|
||||
countdown: 180, // 倒计时时间
|
||||
isCounting: false, // 是否正在倒计时
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 1 验证举报事由
|
||||
loseinputtext() {
|
||||
var jbtext = document.querySelector('#jbtext')
|
||||
if(jbtext.value == '') {
|
||||
layer.tips('X 输入内容不能为空', '#jbtext', {
|
||||
// id: 'tips1-1',
|
||||
shadeClose: false,
|
||||
tips: [2, 'red'],
|
||||
time: 0,
|
||||
area: ['auto', '40px'],
|
||||
show: true
|
||||
|
||||
})
|
||||
return false;
|
||||
} else {
|
||||
layer.tips('√', '#jbtext', {
|
||||
// id: 'tips1-1',
|
||||
shadeClose: false,
|
||||
tips: [2, 'green'],
|
||||
time: 0,
|
||||
area: ['auto', '40px'],
|
||||
show: true
|
||||
})
|
||||
return true;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
// 2 验证手机号
|
||||
losephone() {
|
||||
// alert(11)
|
||||
var phone = document.getElementById('phone');
|
||||
var reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
|
||||
if (phone.value == '') {
|
||||
layer.tips('X 请您填写手机号', '#phone', {
|
||||
// id: 'tips1-1',
|
||||
shadeClose: false,
|
||||
tips: [2, 'red'],
|
||||
time: 0,
|
||||
area: ['auto', '40px'],
|
||||
show: true
|
||||
})
|
||||
return false;
|
||||
} else {
|
||||
if (!reg.test(phone.value)) {
|
||||
layer.tips('X 请输入正确的手机号', '#phone', {
|
||||
// id: 'tips1-2',
|
||||
shadeClose: false,
|
||||
tips: [2, 'red'],
|
||||
time: 0,
|
||||
area: ['auto', '40px'],
|
||||
show: true
|
||||
|
||||
})
|
||||
return false;
|
||||
} else {
|
||||
layer.tips('√', '#phone', {
|
||||
// id: 'tips1-3',
|
||||
shadeClose: false,
|
||||
tips: [2, 'green'],
|
||||
time: 0,
|
||||
area: ['auto', '40px'],
|
||||
show: true
|
||||
})
|
||||
return true;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
// 3 输入短信验证码
|
||||
loseinputyzm() {
|
||||
var inputyzm = document.querySelector('#inputyzm')
|
||||
var yzmcode = /^[0-9]\d{5}$/;
|
||||
if (inputyzm.value == '') {
|
||||
layer.tips('X 请您填写验证码', '#inputyzm', {
|
||||
// id: 'tips2-1',
|
||||
tips: [2, 'red'],
|
||||
time: 0,
|
||||
area: ['auto', '40px'],
|
||||
show: true
|
||||
})
|
||||
return false;
|
||||
} else {
|
||||
if (!yzmcode.test(inputyzm.value)) {
|
||||
//验证不成功
|
||||
layer.tips('X 请您正确填写验证码', '#inputyzm', {
|
||||
// id: 'tips2-2',
|
||||
tips: [2, 'red'],
|
||||
time: 0,
|
||||
area: ['auto', '40px'],
|
||||
show: true
|
||||
})
|
||||
return false;
|
||||
} else {
|
||||
//验证成功
|
||||
layer.tips('√', '#inputyzm', {
|
||||
// id: 'tips2-3',
|
||||
tips: [2, 'green'],
|
||||
time: 0,
|
||||
area: ['auto', '40px'],
|
||||
show: true
|
||||
})
|
||||
return true;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
// 获取验证码
|
||||
getCode() {
|
||||
let phoneVal = $("#phone").val()
|
||||
// console.log(phoneVal);
|
||||
if (phoneVal === '') {
|
||||
layer.msg('请填写手机号', {
|
||||
icon: 2,
|
||||
time: 2000,
|
||||
offset: '50px',
|
||||
})
|
||||
} else {
|
||||
// let phoneResult = `https://www.aimzhu.com/operator/app/complaint/sendmsgrelease/${phoneVal}`
|
||||
let phoneResult = `http://192.168.0.115:8099/operator-plugin/app/complaint/sendmsgrelease/${phoneVal}`
|
||||
axios.get(phoneResult).then(response => {
|
||||
// console.log(response.data)
|
||||
layer.msg('验证码已发送', {
|
||||
icon: 1,
|
||||
time: 2000,
|
||||
offset: '50px',
|
||||
});
|
||||
this.startCountdown(); // 开始倒计时
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
startCountdown() {
|
||||
this.isCounting = true; // 设置正在倒计时
|
||||
let interval = setInterval(() => {
|
||||
if (this.countdown > 0) {
|
||||
this.countdown--;
|
||||
$('#getCode').text(`${this.countdown}s后重试`); // 更新按钮文本
|
||||
} else {
|
||||
clearInterval(interval); // 清除定时器
|
||||
this.isCounting = false; // 设置倒计时结束
|
||||
this.countdown = 180; // 重置倒计时时间
|
||||
$('#getCode').text('获取验证码'); // 重置按钮文本
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
submit() {
|
||||
if(this.loseinputtext() && this.losephone() && this.loseinputyzm()) {
|
||||
this.submitComplaint()
|
||||
} else {
|
||||
// alert("请正确填写对应项的内容")
|
||||
}
|
||||
},
|
||||
// 投诉举报
|
||||
submitComplaint() {
|
||||
// 当点击投诉举报按钮时，应该执行的操作
|
||||
var jbtextVal = $("#jbtext").val();
|
||||
var phoneVal = $("#phone").val();
|
||||
var inputyzmValue = $('#inputyzm').val();
|
||||
// var url = 'https://www.aimzhu.com/operator/app/complaint/saverelease'
|
||||
var url = 'http://192.168.0.115:8099/operator-plugin/app/complaint/saverelease'
|
||||
// var url = 'http://192.168.0.115:8099/operator-plugin/app/complaint/sendmsgrelease/'
|
||||
|
||||
axios({
|
||||
url,
|
||||
// data: qs.stringify(data),
|
||||
method: 'post',
|
||||
data: {
|
||||
content: jbtextVal,
|
||||
phone: phoneVal,
|
||||
code: inputyzmValue
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
// console.log(res.status);
|
||||
// 假设这里进行一些验证和处理后
|
||||
layer.closeAll('tips');
|
||||
this.isMaskVisible = true; // 显示蒙层
|
||||
document.body.style.overflow = 'hidden';
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('There was an error!', error);
|
||||
})
|
||||
},
|
||||
|
||||
closeMask() {
|
||||
this.isMaskVisible = false; // 隐藏蒙层
|
||||
// 重新启用页面滚动
|
||||
document.body.style.overflow = '';
|
||||
if (this.isCounting) {
|
||||
clearInterval(this.interval); // 清除倒计时定时器
|
||||
this.isCounting = false; // 设置倒计时结束
|
||||
this.countdown = 180; // 重置倒计时时间
|
||||
$('#getCode').text('获取验证码'); // 重置按钮文本
|
||||
}
|
||||
// 跳转到首页
|
||||
window.location.href = 'http://www.aimzhu.com';
|
||||
},
|
||||
closeTips() {
|
||||
layer.closeAll('tips');
|
||||
},
|
||||
|
||||
// onBeforeRouteLeave() {
|
||||
// // 在路由离开之前关闭layer.tips
|
||||
// this.closeTips();
|
||||
// }
|
||||
},
|
||||
|
||||
beforeRouteLeave(to, from, next) {
|
||||
// 在路由离开之前关闭layer.tips
|
||||
this.closeTips();
|
||||
next(); // 确保调用next()以继续导航
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.report {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* .report .box-top {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background: url(/assets/img/report-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
} */
|
||||
.report .box-bottom {
|
||||
width: 100%;
|
||||
/* height: 12.5rem; */
|
||||
height: 100vh;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
.report .box-bottom .box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 15rem;
|
||||
height: 10rem;
|
||||
padding: .25rem .375rem;
|
||||
/* border: 1px solid red; */
|
||||
/* background-color: #fff; */
|
||||
/* -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1); */
|
||||
}
|
||||
.box .report-content {
|
||||
width: 14.25rem;
|
||||
height: 8rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.box .report-content textarea {
|
||||
resize: none;
|
||||
width: 14.25rem;
|
||||
height: 8rem;
|
||||
background-color: #FFF;
|
||||
font-size: .225rem;
|
||||
color: #333;
|
||||
border-radius: .05rem;
|
||||
border: .0125rem solid transparent;
|
||||
padding: .25rem;
|
||||
-webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||||
/* margin-bottom: 12px; */
|
||||
/* -webkit-appearance: none; */
|
||||
outline: 0;
|
||||
}
|
||||
.box ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 14.25rem;
|
||||
height: 1.25rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.box ul li {
|
||||
/* border: 1px solid red; */
|
||||
width: 4.375rem;
|
||||
height: .75rem;
|
||||
margin: .25rem 0;
|
||||
-webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||||
}
|
||||
input {
|
||||
width: 4.375rem;
|
||||
height: .75rem;
|
||||
padding: .25rem;
|
||||
border: none;
|
||||
border-radius: .05rem;
|
||||
background-color: #FFF;
|
||||
font-size: .2rem;
|
||||
/* background-color: transparent; */
|
||||
/* margin-bottom: 12px; */
|
||||
color: #999999;
|
||||
}
|
||||
input::-webkit-input-placeholder {
|
||||
color: #999999
|
||||
}
|
||||
ul li:nth-child(1) {
|
||||
position: relative;
|
||||
/* width: 440px; */
|
||||
height: .75rem;
|
||||
/* margin-bottom: 12px; */
|
||||
/* background-color: pink; */
|
||||
}
|
||||
ul li:nth-child(2) {
|
||||
/* width: 440px; */
|
||||
height: .75rem;
|
||||
/* margin-bottom: 12px; */
|
||||
}
|
||||
ul li:nth-child(1) input {
|
||||
position: absolute;
|
||||
}
|
||||
ul li:nth-child(1) span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: block;
|
||||
width: 1.5rem;
|
||||
height: .75rem;
|
||||
line-height: .75rem;
|
||||
text-align: center;
|
||||
/* background-color: pink; */
|
||||
cursor: pointer;
|
||||
color: #f77437;
|
||||
}
|
||||
ul li:nth-child(1) span:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
ul li:nth-child(3) {
|
||||
width: 3.75rem;
|
||||
height: .75rem;
|
||||
margin: .25rem 0;
|
||||
/* margin-top: 30px; */
|
||||
}
|
||||
ul li:nth-child(3) button {
|
||||
width: 3.75rem;
|
||||
height: .75rem;
|
||||
border: none;
|
||||
border-radius: .05rem;
|
||||
background-color: #fcbb53;
|
||||
font-size: .25rem;
|
||||
color: #FFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
ul li:nth-child(3) button:hover,
|
||||
.success button:hover {
|
||||
font-size: .3rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 100000;
|
||||
overflow: hidden;
|
||||
}
|
||||
.success {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 5.75rem;
|
||||
height: 5.75rem;
|
||||
padding: .25rem .375rem;
|
||||
background-color: #fff;
|
||||
-webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||||
}
|
||||
.success i {
|
||||
display: block;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
margin: .1875rem 1.25rem;
|
||||
background: url(/assets/img/report-icon.png) no-repeat;
|
||||
background-size: cover;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.success p {
|
||||
display: block;
|
||||
height: .375rem;
|
||||
line-height: .375rem;
|
||||
text-align: center;
|
||||
font-size: .225rem;
|
||||
}
|
||||
.success button {
|
||||
width: 5rem;
|
||||
height: .625rem;
|
||||
margin-top: .5rem;
|
||||
border: none;
|
||||
border-radius: .05rem;
|
||||
background-color: #01b2aa;
|
||||
font-size: .25rem;
|
||||
color: #FFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
.success button a {
|
||||
color: #FFF;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
486
src/components/ShouFei copy 2.vue
Normal file
486
src/components/ShouFei copy 2.vue
Normal file
@ -0,0 +1,486 @@
|
||||
<template>
|
||||
<div class="shou-fei">
|
||||
<div class="box-top">
|
||||
<h4>选择最适合自己的服务</h4>
|
||||
<p>直服无中介 价格透明 不下证即退款</p>
|
||||
</div>
|
||||
<div class="box-bottom">
|
||||
<div class="box box1" @mouseover="activeIndex = index" v-for="(item, index) in contentList" :key="index" :class="{ 'active': activeIndex === index }">
|
||||
<div class="top">
|
||||
<div class="bjys" :class="{ 'active': activeIndex === index }">
|
||||
<h4>{{ item.title }}</h4>
|
||||
</div>
|
||||
<span class="price">￥<em>{{ item.computedPrice }}</em>
|
||||
</span>
|
||||
<div class="jianjie">
|
||||
<i></i>
|
||||
{{ item.intro }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="serve">
|
||||
<h5>提供的服务：</h5>
|
||||
<ul class="serveList">
|
||||
<li v-for="(item1, index) in item.severList" :key="index">
|
||||
<i>√</i>
|
||||
<div class="serveContent" @mouseover="setHoverText(item1.highlight, index)" @mouseleave="hoverText = ''">
|
||||
<!-- {{ item1.serve }} -->
|
||||
<span>{{ item1.serve.slice(0, item1.start) }}</span>
|
||||
<span :class="{ 'highlight': item1.highlight }" @mouseover="setHoverText(item1.highlight, index)" @mouseleave="clearHoverText">{{ item1.serve.slice(item1.start, item1.end) }}</span>
|
||||
<span>{{ item1.serve.slice(item1.end) }}</span>
|
||||
</div>
|
||||
<div v-if="hoverText === item1.highlight && hoverIndex === index" class="tooltip">{{ item1.tooltip }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flow">
|
||||
<h5>使用流程：</h5>
|
||||
<ul class="flowList">
|
||||
<li v-for="(item2, index) in item.flowList" :key="index">
|
||||
<i>{{ item2.id }}</i>
|
||||
<div class="flowContent">{{ item2.flow }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="fgx"></div>
|
||||
<div class="chec">
|
||||
<ul class="checList">
|
||||
<li v-for="(item3, index) in item.checList" :key="index">
|
||||
<input type="checkbox" :value="item3.price" v-model="item3.checked">
|
||||
<p>{{ item3.chec }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import axios from 'axios'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeIndex: 0, // 默认第一个div是活跃的
|
||||
hoverText: '', // 用于追踪当前鼠标悬停的文本
|
||||
hoverIndex: -1,
|
||||
content: [
|
||||
{title: '全托管', priceSum: 280, intro: '从下单到取证，仅需提供基本信息，我们为您提供一站式管家服务。',
|
||||
severList: [
|
||||
{serve: '包可运行软件开发与搭建', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '包软著鉴别材料撰写', highlight: '软著鉴别材料', start: 1, end: 5, tooltip: '软著鉴别材料包含：申请表、源程序和系统用户手册或设计文档'},
|
||||
{serve: '包软著国内登记', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '包软著下证', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '包开发票', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '提供可运行软件安装包', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '提供可运行软件云服务900天', highlight: '云服务', start: 7, end: 10, tooltip: '云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。'},
|
||||
{serve: '提供可运行软件演示视频', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '客服一对一服务', highlight: '',start: '', end: '', tooltip: ''}
|
||||
],
|
||||
flowList: [
|
||||
{id: 1, flow: '填写系统名称'},
|
||||
{id: 2, flow: '填写基本信息'},
|
||||
{id: 3, flow: '接收证书'},
|
||||
],
|
||||
checList: [
|
||||
{chec: '加急办理800元', price: 800},
|
||||
]
|
||||
},
|
||||
{title: '写材料并委托代办', priceSum: 230, intro: '通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料，可委托平台合作代办机构进行办理。',
|
||||
severList: [
|
||||
{serve: '通过平台自己搭建可运行软件', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '平台自动撰写鉴别材料', highlight: '鉴别材料', start: 6, end: 10, tooltip: '鉴别材料包含：申请表、源程序和系统用户手册或设计文档'},
|
||||
{serve: '包代办', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '包下证', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '包开发票', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '提供可运行软件云服务600天', highlight: '云服务', start: 7, end: 10, tooltip: '云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。'},
|
||||
{serve: '客服一对一服务', highlight: '',start: '', end: '', tooltip: ''}
|
||||
],
|
||||
flowList: [
|
||||
{id: 1, flow: '按系统操作流程执行'}
|
||||
],
|
||||
checList: [
|
||||
{chec: '加急办理800元', price: 800},
|
||||
{chec: '安装包15元', price: 15},
|
||||
{chec: '系统演示视频文件15元', price: 15},
|
||||
]
|
||||
},
|
||||
{title: '写材料', priceSum: 80, intro: '通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料，下载鉴别材料后可自行申报或找相关代理机构申报。',
|
||||
severList: [
|
||||
{serve: '通过平台自己搭建可运行软件', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '包软著鉴别材料撰写', highlight: '鉴别材料', start: 3, end: 7, tooltip: '鉴别材料包含：申请表、源程序和系统用户手册或设计文档'},
|
||||
{serve: '包软著补正材料撰写', highlight: '补正材料',start: 3, end: 7, tooltip: '补正材料包含：源程序和系统操作手册'},
|
||||
{serve: '第一次申请不通过可全额退款', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '第一次补正退订单金额的30%，并提供补正材料撰写', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '第二次补正退订单金额的70%，并提供补正材料撰写（注：两次补正后订单结束）', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '包开发票', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '提供可运行软件云服务300天', highlight: '云服务', start: 7, end: 10, tooltip: '云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。'},
|
||||
{serve: '客服一对一服务', highlight: '',start: '', end: '', tooltip: ''}
|
||||
],
|
||||
flowList: [
|
||||
{id: 1, flow: '按系统操作流程执行'}
|
||||
],
|
||||
checList: [
|
||||
{chec: '安装包15元', price: 15},
|
||||
{chec: '系统演示视频文件15元', price: 15},
|
||||
]
|
||||
},
|
||||
{title: '免费试用', priceSum: 0, intro: '每个账户的免费试用次数为3次。免费试用主要目的是让您了解如何使用平台，可全过程体验。',
|
||||
severList: [
|
||||
{serve: '通过平台自己搭建可运行软件', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '平台自动撰写鉴别材料', highlight: '鉴别材料', start: 6, end: 10, tooltip: '鉴别材料包含：申请表、源程序和系统用户手册或设计文档'},
|
||||
{serve: '提供可运行软件云服务10天', highlight: '云服务', start: 7, end: 10, tooltip: '云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。'},
|
||||
{serve: '客服一对一服务', highlight: '',start: '', end: '', tooltip: ''}
|
||||
],
|
||||
flowList: [
|
||||
{id: 1, flow: '按系统操作流程执行'}
|
||||
],
|
||||
checList: []
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setHoverText(text, index) {
|
||||
if (text) {
|
||||
this.hoverText = text;
|
||||
this.hoverIndex = index;
|
||||
} else {
|
||||
this.clearHoverText();
|
||||
}
|
||||
},
|
||||
clearHoverText() {
|
||||
this.hoverText = '';
|
||||
this.hoverIndex = -1;
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
contentList() {
|
||||
return this.content.map(service => {
|
||||
const additionalPrice = service.checList.reduce((sum, option) => {
|
||||
return option.checked ? sum + option.price : sum;
|
||||
}, 0);
|
||||
return {
|
||||
...service,
|
||||
computedPrice: service.priceSum + additionalPrice
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
border: 0px solid transparent !important ;
|
||||
}
|
||||
.shou-fei {
|
||||
position: relative;
|
||||
background: url(/assets/img/shoufei-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
height: 15rem;
|
||||
/* font-family: '楷体'; */
|
||||
}
|
||||
.shou-fei .box-top {
|
||||
position: absolute;
|
||||
top: 1.75rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 6.25rem;
|
||||
height: 1.25rem;
|
||||
/* background-color: pink; */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.shou-fei .box-top h4 {
|
||||
width: 6.25rem;
|
||||
font-size: .4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .05rem;
|
||||
color: #74491a;
|
||||
margin-bottom: .1875rem;
|
||||
}
|
||||
.shou-fei .box-top p {
|
||||
width: 6.25rem;
|
||||
font-size: .2rem;
|
||||
letter-spacing: .0625rem;
|
||||
color: #9a7148;
|
||||
}
|
||||
.shou-fei .box-bottom {
|
||||
position: absolute;
|
||||
top: 3.375rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 15rem;
|
||||
height: 11.25rem;
|
||||
/* border: 1px solid red; */
|
||||
|
||||
}
|
||||
.shou-fei .box-bottom .box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 3.5rem;
|
||||
height: 11.125rem;
|
||||
padding: 0px 0px;
|
||||
background-color: #FFF;
|
||||
-webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||||
}
|
||||
.box .top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
/* flex-wrap: wrap; */
|
||||
width: 3.5rem;
|
||||
/* height: 200px; */
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
|
||||
.box .top .bjys {
|
||||
width: 3.5rem;
|
||||
height: .625rem;
|
||||
background: linear-gradient(to right, rgba(237,90,36,.2), rgba(243,143,30,.2));
|
||||
color: #5e3603;
|
||||
}
|
||||
.box .top .bjys.active {
|
||||
background: linear-gradient(to right, rgba(237,90,36,1), rgba(243,143,30,1));
|
||||
color: #FFFFFF ;
|
||||
}
|
||||
|
||||
.box .top h4 {
|
||||
width: 3.5rem;
|
||||
height: .625rem;
|
||||
line-height: .625rem;
|
||||
text-align: center;
|
||||
font-size: .275rem;
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
.box .top .price {
|
||||
height: .625rem;
|
||||
font-size: .225rem;
|
||||
letter-spacing: .025rem;
|
||||
text-align: center;
|
||||
margin: .1875rem auto;
|
||||
color: #f77333;
|
||||
}
|
||||
.box .top .price em {
|
||||
font-size: .45rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.box .top .jianjie {
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: 1.375rem;
|
||||
margin: 0 .25rem;
|
||||
padding: .125rem;
|
||||
border-radius: .075rem;
|
||||
font-size: .1875rem;
|
||||
color: #5e3603;
|
||||
background-color: #fff6e7;
|
||||
text-align: justify;
|
||||
/* vertical-align: center; */
|
||||
}
|
||||
.box .top .jianjie i {
|
||||
position: absolute;
|
||||
top: -0.125rem;
|
||||
left: 1.4375rem;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left:.125rem solid transparent;
|
||||
border-right: .125rem solid transparent;
|
||||
border-bottom:.125rem solid #feedcc;
|
||||
}
|
||||
.box .serve {
|
||||
margin: .0625rem .25rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.box .serve h5 {
|
||||
font-size: .225rem;
|
||||
font-weight: 700;
|
||||
height: .45rem;
|
||||
line-height: .45rem;
|
||||
color: #694618;
|
||||
}
|
||||
.box .serve .serveList {
|
||||
/* background-color: skyblue; */
|
||||
margin: .0625rem 0 0 .125rem;
|
||||
height: 4.625rem;
|
||||
}
|
||||
.box .serve .serveList li {
|
||||
font-size: .175rem;
|
||||
line-height: .325rem;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
/* align-content: center; */
|
||||
margin: .0625rem 0;
|
||||
}
|
||||
.box .serve .serveList li i {
|
||||
width: .25rem;
|
||||
height: .25rem;
|
||||
line-height: .25rem;
|
||||
text-align: center;
|
||||
border-radius: .125rem;
|
||||
color: #f6783a;
|
||||
margin: .0375rem .1rem;
|
||||
background-color: #fee9d1;
|
||||
}
|
||||
.box .serve .serveList li .serveContent {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
width: 2.4rem;
|
||||
}
|
||||
/* .box .serve .serveList li .serveContent span {
|
||||
|
||||
} */
|
||||
.box .flow {
|
||||
margin: 0 .25rem .0625rem .25rem;
|
||||
/* background-color: rgb(149, 238, 149); */
|
||||
}
|
||||
.box .flow h5 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
height: .45rem;
|
||||
line-height: .45rem;
|
||||
color: #694618;
|
||||
}
|
||||
.box .flow .flowList {
|
||||
/* background-color: skyblue; */
|
||||
margin: .0625rem 0 0 .125rem;
|
||||
}
|
||||
.box .flow .flowList li {
|
||||
font-size: .175rem;
|
||||
line-height: .325rem;
|
||||
display: flex;
|
||||
margin: .0625rem 0;
|
||||
}
|
||||
.box .flow .flowList li i {
|
||||
width: .25rem;
|
||||
height: .25rem;
|
||||
line-height: .25rem;
|
||||
text-align: center;
|
||||
border-radius: .125rem;
|
||||
color: #f6783a;
|
||||
margin: .0375rem .1rem;
|
||||
background-color: #fee9d1;
|
||||
}
|
||||
.box .flow .flowList li .flowContent {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.box .fgx {
|
||||
display: flex;
|
||||
margin: .0625rem .25rem;
|
||||
width: 3rem;
|
||||
height: .025rem;
|
||||
background-color: #f9f9f9;
|
||||
/* background-color: red; */
|
||||
}
|
||||
.box .chec {
|
||||
margin: 0px .25rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.box .chec .checList {
|
||||
margin: 0 .0625rem;
|
||||
}
|
||||
.box .chec .checList li {
|
||||
display: flex;
|
||||
height: .325rem;
|
||||
}
|
||||
.box .chec .checList li input[type="checkbox"] {
|
||||
width: .2rem;
|
||||
height: .2rem;
|
||||
margin: .05rem .125rem .05rem .1375rem;
|
||||
}
|
||||
.box .chec .checList li p {
|
||||
font-size: .175rem;
|
||||
line-height: .325rem;
|
||||
color: #6b4516;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #F7AC3B;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
top: .325rem;
|
||||
background-color: rgba(255,232,192,.9);
|
||||
color: #5F3B00;
|
||||
padding: .125rem;
|
||||
display: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* .serveContent {
|
||||
position: relative;
|
||||
} */
|
||||
.serveList li {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.serveContent:hover +.tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* .tooltip {
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #d4d4d4;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
}
|
||||
.serveContent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.serveContent:hover +.tooltip {
|
||||
display: block;
|
||||
} */
|
||||
|
||||
/* .box ul li p em {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
color: #F7AC3B;
|
||||
}
|
||||
|
||||
.box ul li p em .detail {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
width: 250px;
|
||||
padding: 5px 10px;
|
||||
text-align: justify;
|
||||
color: #5F3B00;
|
||||
background-color: rgba(255,232,192,.7);
|
||||
}
|
||||
|
||||
.box ul li p em:hover .detail {
|
||||
display: block;
|
||||
} */
|
||||
</style>
|
||||
@ -45,7 +45,8 @@
|
||||
<div class="chec">
|
||||
<ul class="checList">
|
||||
<li v-for="(item3, index) in item.checList" :key="index">
|
||||
<input type="checkbox" :value="item3.price" v-model="item3.checked">
|
||||
<!-- <input type="checkbox" :value="item3.price" v-model="item3.checked"> -->
|
||||
<div class="checkbox"></div>
|
||||
<p>{{ item3.chec }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
@ -71,12 +72,12 @@ export default {
|
||||
hoverText: '', // 用于追踪当前鼠标悬停的文本
|
||||
hoverIndex: -1,
|
||||
content: [
|
||||
{title: '全托管', priceSum: 280, intro: '从下单到取证，仅需提供基本信息，我们为您提供一站式管家服务。',
|
||||
{title: '全托管', priceSum: '180~28', intro: '从下单到取证，仅需提供基本信息，我们为您提供一站式管家服务。',
|
||||
severList: [
|
||||
{serve: '包可运行软件开发与搭建', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '包鉴别材料撰写', highlight: '鉴别材料', start: 1, end: 5, tooltip: '鉴别材料包含：申请表、源程序和系统用户手册或设计文档'},
|
||||
{serve: '包代办', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '包下证', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '包软著鉴别材料撰写', highlight: '软著鉴别材料', start: 1, end: 5, tooltip: '软著鉴别材料包含：申请表、源程序和系统用户手册或设计文档'},
|
||||
{serve: '包软著国内登记', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '包软著下证', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '包开发票', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '提供可运行软件安装包', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '提供可运行软件云服务900天', highlight: '云服务', start: 7, end: 10, tooltip: '云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。'},
|
||||
@ -107,16 +108,18 @@ export default {
|
||||
],
|
||||
checList: [
|
||||
{chec: '加急办理800元', price: 800},
|
||||
{chec: '安装包50元', price: 50},
|
||||
{chec: '系统演示视频文件50元', price: 50},
|
||||
{chec: '安装包15元', price: 15},
|
||||
{chec: '系统演示视频文件15元', price: 15},
|
||||
]
|
||||
},
|
||||
{title: '写材料', priceSum: 180, intro: '通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料，下载鉴别材料后可自行申报或找相关代理机构申报。',
|
||||
{title: '写材料', priceSum: '30~8', intro: '通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料，下载鉴别材料后可自行申报或找相关代理机构申报。',
|
||||
severList: [
|
||||
{serve: '通过平台自己搭建可运行软件', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '平台自动撰写鉴别材料', highlight: '鉴别材料', start: 6, end: 10, tooltip: '鉴别材料包含：申请表、源程序和系统用户手册或设计文档'},
|
||||
{serve: '包补正材料撰写一直到下证', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '两次补正不通过平台退款', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '包软著鉴别材料撰写', highlight: '鉴别材料', start: 3, end: 7, tooltip: '鉴别材料包含：申请表、源程序和系统用户手册或设计文档'},
|
||||
{serve: '包软著补正材料撰写', highlight: '补正材料',start: 3, end: 7, tooltip: '补正材料包含：源程序和系统操作手册'},
|
||||
{serve: '第一次申请不通过可全额退款', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '第一次补正退订单金额的30%，并提供补正材料撰写', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '第二次补正退订单金额的70%，并提供补正材料撰写（注：两次补正后订单结束）', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '包开发票', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '提供可运行软件云服务300天', highlight: '云服务', start: 7, end: 10, tooltip: '云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。'},
|
||||
{serve: '客服一对一服务', highlight: '',start: '', end: '', tooltip: ''}
|
||||
@ -125,8 +128,8 @@ export default {
|
||||
{id: 1, flow: '按系统操作流程执行'}
|
||||
],
|
||||
checList: [
|
||||
{chec: '安装包50元', price: 50},
|
||||
{chec: '系统演示视频文件50元', price: 50},
|
||||
{chec: '安装包15元', price: 15},
|
||||
{chec: '系统演示视频文件15元', price: 15},
|
||||
]
|
||||
},
|
||||
{title: '免费试用', priceSum: 0, intro: '每个账户的免费试用次数为3次。免费试用主要目的是让您了解如何使用平台，可全过程体验。',
|
||||
@ -235,7 +238,7 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 3.5rem;
|
||||
height: 10.125rem;
|
||||
height: 11.125rem;
|
||||
padding: 0px 0px;
|
||||
background-color: #FFF;
|
||||
-webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||||
@ -324,12 +327,14 @@ export default {
|
||||
.box .serve .serveList {
|
||||
/* background-color: skyblue; */
|
||||
margin: .0625rem 0 0 .125rem;
|
||||
height: 3.625rem;
|
||||
height: 4.625rem;
|
||||
}
|
||||
.box .serve .serveList li {
|
||||
font-size: .175rem;
|
||||
line-height: .325rem;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
/* align-content: center; */
|
||||
margin: .0625rem 0;
|
||||
}
|
||||
.box .serve .serveList li i {
|
||||
@ -346,7 +351,11 @@ export default {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
width: 2.4rem;
|
||||
}
|
||||
/* .box .serve .serveList li .serveContent span {
|
||||
|
||||
} */
|
||||
.box .flow {
|
||||
margin: 0 .25rem .0625rem .25rem;
|
||||
/* background-color: rgb(149, 238, 149); */
|
||||
@ -407,6 +416,11 @@ export default {
|
||||
height: .2rem;
|
||||
margin: .05rem .125rem .05rem .1375rem;
|
||||
}
|
||||
.box .chec .checList li .checkbox {
|
||||
width: .2rem;
|
||||
height: .2rem;
|
||||
margin: .05rem .125rem .05rem .1375rem;
|
||||
}
|
||||
.box .chec .checList li p {
|
||||
font-size: .175rem;
|
||||
line-height: .325rem;
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="zheng-shu">
|
||||
<div class="box-top">
|
||||
<div class="box-top" >
|
||||
<div class="title">
|
||||
<h4>AI著作权·证书展示</h4>
|
||||
<p>灵活搭建更高效的著作权办理平台</p>
|
||||
<h4>AI喵著网·证书展示</h4>
|
||||
<p>驱动软件著作权服务新变革</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom">
|
||||
@ -30,7 +30,7 @@
|
||||
:page-size="8"
|
||||
layout="total, prev, pager, next, jumper"
|
||||
:total="totalImages">
|
||||
</el-pagination>
|
||||
</el-pagination>
|
||||
<!-- :page-sizes="[4]"
|
||||
:page-size="4"
|
||||
sizes, -->
|
||||
|
||||
@ -52,16 +52,23 @@ const router = createRouter({
|
||||
|
||||
})
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
const mobile = isMobile();
|
||||
if (mobile && to.name !== 'MobilePage') {
|
||||
next({ name: 'MobilePage' });
|
||||
} else if (!mobile && to.name === 'MobilePage') {
|
||||
next({ name: 'HomePage' });
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
});
|
||||
// router.beforeEach((to, from, next) => {
|
||||
// const mobile = isMobile();
|
||||
|
||||
// // if (mobile) {
|
||||
// // window.location.href = 'https://www.baidu.com'; // 重定向到百度
|
||||
// // } else {
|
||||
// // next(); // 继续访问默认路径
|
||||
// // }
|
||||
|
||||
// if (mobile && to.name !== 'MobilePage') {
|
||||
// next({ name: 'MobilePage' });
|
||||
// } else if (!mobile && to.name === 'MobilePage') {
|
||||
// next({ name: 'HomePage' });
|
||||
// } else {
|
||||
// next();
|
||||
// }
|
||||
// });
|
||||
|
||||
// 点击路由后滚动条跳转到顶部
|
||||
router.afterEach(() => {
|
||||
|
||||
@ -30,13 +30,7 @@ import 'vue3-layer/dist/s3Layer.css'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
// router.beforeEach((to, from, next) => {
|
||||
// if (isMobilePage() && to.path !== '/MobilePage') {
|
||||
// next({ name: 'MobilePage' });
|
||||
// } else {
|
||||
// next();
|
||||
// }
|
||||
// })
|
||||
|
||||
|
||||
// 全局注册el-icon
|
||||
for (const [name, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
|
||||
@ -38,7 +38,7 @@ img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
border: 1px solid #666666 !important;
|
||||
/* border: 1px solid #666666 !important; */
|
||||
}
|
||||
|
||||
/* 去除input默认样式 */
|
||||
|
||||
@ -21,6 +21,13 @@ export default defineConfig({
|
||||
}),
|
||||
|
||||
],
|
||||
// css: {
|
||||
// preprocessorOptions: {
|
||||
// less: {
|
||||
// // 可以在这里添加 Less 相关的配置
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
optimizeDeps: {
|
||||
include: ['jquery']
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user