修改了收费介绍路由，解决控制台红黄警告，首页飘窗差一步
This commit is contained in:
zhangyong
parent
6bfd7f2ae7
commit
c82842f2ca
BIN
public/assets/img/close.png
Normal file
BIN
public/assets/img/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 707 B |
BIN
public/assets/img/close_active.png
Normal file
BIN
public/assets/img/close_active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 770 B |
@ -510,6 +510,7 @@ export default {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
/* position: relative; */
|
||||
line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<!-- 飘窗 -->
|
||||
<div class="pcdiv">
|
||||
<div id="sport_wrap" v-if="sportStatus" :key="floatWindowKey" @mouseover="mouseOver" @mouseleave="mouseLeave">
|
||||
<div class="deleteImg" @click="showSport" >
|
||||
<img class="close" src="/assets/img/close.png" alt="">
|
||||
</div>
|
||||
<img :src="floatImg" @click="windowSkip" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="box-top">
|
||||
<div class="headline">
|
||||
<h2>不止</h2>
|
||||
@ -11,12 +23,10 @@
|
||||
<div id="title-container" >
|
||||
<h3 v-for="(title, index) in titles" :key="index" class="title" :style="titleContainerStyle">{{ title }}</h3>
|
||||
</div>
|
||||
|
||||
<!-- <p>AI软著引擎平台累计辅助编写资料<em v-html="number1"></em>万套，通过平台代办下发证书<em v-html="number2"></em>万件</p> -->
|
||||
<p>AI软著引擎平台累计辅助编写资料<em>{{number1}}</em>万套，通过平台代办下发证书<em>{{number2}}</em>万件</p>
|
||||
<div class="button-box">
|
||||
<button><a href="">免费试用</a></button>
|
||||
<button><a href="">立即前往</a></button>
|
||||
<button><a href="https://www.aimzhu.com/operator/">免费试用</a></button>
|
||||
<button><a href="https://www.aimzhu.com/operator/">立即前往</a></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -197,8 +207,38 @@ export default {
|
||||
number1: '',
|
||||
number2: '' ,
|
||||
|
||||
imgFloat: '',
|
||||
floatImg: '',
|
||||
|
||||
sportStatus: false,
|
||||
moveX: 0, //X轴方向上移动的距离
|
||||
moveY: 0, //Y轴方向上移动的距离
|
||||
stepX: 2, //图片X轴移动的速度
|
||||
stepY: 2, //图片Y轴移动的速度
|
||||
directionX: 0, //设置图片在X轴方向上的移动方向 0:向右 1:向左
|
||||
directionY: 0, //设置图片在Y轴方向上的移动方向 0:向下 1:向上
|
||||
timer: null,
|
||||
|
||||
floatWindowKey: 0, // 添加一个key来强制重新渲染
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.sportStatus = true
|
||||
this.timer = setInterval(()=>{
|
||||
this.sportTranstion()
|
||||
}, 30);
|
||||
this.startFloatWindowTimer();
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.sportStatus = false
|
||||
// clearInterval(this.timer)
|
||||
this.clearFloatWindowTimer();
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
|
||||
selectStep1(index) {
|
||||
@ -249,31 +289,117 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
// startData() {
|
||||
// const dataUrl1 = `http://121.36.71.250:58085/operator/app/systemuser/getrelease/c8db34f1-737d-4520-8bd5-fd1b727c87e7`
|
||||
// const dataUrl2 = `http://121.36.71.250:58085/operator/app/systemuser/getrelease/f2782ed4-8133-4307-b067-c8e8cac16cdd`
|
||||
// 飘窗所需图片内容
|
||||
floatContent() {
|
||||
let img = document.getElementById("sport_wrap");
|
||||
axios.get('https://www.aimzhu.com/operator/app/content/listByIdentifyingrelease/bayWindow').then(response => {
|
||||
console.log(response.data);
|
||||
if (response.data.length != 0) {
|
||||
const imgFolat = response.data[0].photo
|
||||
this.floatImg = `https://www.aimzhu.com/operator/route/file/download/true/${imgFolat}`
|
||||
} else {
|
||||
img.style.display = 'none'
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('There was an error!', error)
|
||||
})
|
||||
},
|
||||
// 飘窗
|
||||
sportTranstion(){
|
||||
let img = document.getElementById("sport_wrap"); //获得图片所在层的ID
|
||||
let height = document.documentElement.clientHeight; //浏览器的高度
|
||||
let width = document.documentElement.clientWidth; //浏览器的宽度
|
||||
let imgHeight = img.offsetHeight; //飘浮图片的高度
|
||||
let imgWidth = img.offsetWidth; //瓢浮图片的宽度
|
||||
//设置飘浮图片距离浏览器左侧位置
|
||||
img.style.left = parseInt(this.moveX + document.documentElement.scrollLeft) + "px";
|
||||
//设置飘浮图片距离浏览器右侧位置
|
||||
img.style.top = parseInt(this.moveY + document.documentElement.scrollTop) + "px";
|
||||
//设置图片在Y轴上的移动规律
|
||||
if(this.directionY == 0) {
|
||||
//飘浮图片在Y轴方向上向下移动
|
||||
this.moveY += this.stepY;
|
||||
} else {
|
||||
//飘浮图片在Y轴方向上向上移动
|
||||
this.moveY -= this.stepY;
|
||||
}
|
||||
if(this.moveY < 0) {
|
||||
//如果飘浮图片飘浮到顶端的时候，设置图片在Y轴方向上向下移动
|
||||
this.directionY = 0;
|
||||
this.moveY = 0;
|
||||
}
|
||||
if(this.moveY > (height - imgHeight-10)) {
|
||||
//如果飘浮图片飘浮到浏览器底端的时候，设置图片在Y轴方向上向上移动
|
||||
this.directionY = 1;
|
||||
this.moveY = (height - imgHeight-10);
|
||||
}
|
||||
//设置图片在X轴上的移动规律
|
||||
if(this.directionX == 0) {
|
||||
this.moveX += this.stepX;
|
||||
} else {
|
||||
this.moveX -= this.stepX;
|
||||
}
|
||||
if(this.moveX < 0) {
|
||||
//如果飘浮图片飘浮到浏览器左侧的时候，设置图片在X轴方向上向右移动
|
||||
this.directionX = 0;
|
||||
this.moveX = 0;
|
||||
}
|
||||
if(this.moveX > (width - imgWidth)) {
|
||||
//如果飘浮图片飘浮到浏览器右侧的时候，设置图片在X轴方向上向左移动
|
||||
this.directionX = 1;
|
||||
this.moveX = (width - imgWidth);
|
||||
}
|
||||
},
|
||||
showSport(){
|
||||
//关闭漂浮窗
|
||||
this.sportStatus = false
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
mouseLeave(){
|
||||
//鼠标移入
|
||||
this.timer = setInterval(()=>{
|
||||
this.sportTranstion()
|
||||
},30);
|
||||
|
||||
// axios.get(dataUrl1).then(response => {
|
||||
// // console.log(response.data)
|
||||
// // console.log(response.data.dataSummary)
|
||||
// this.number1 = response.data.dataSummary
|
||||
// })
|
||||
// .catch(error1 => {
|
||||
// console.error('There was an error!', error1);
|
||||
// })
|
||||
this.startFloatWindowTimer();
|
||||
|
||||
// axios.get(dataUrl2).then(response => {
|
||||
// // console.log(response.data)
|
||||
// // console.log(response.data.dataSummary)
|
||||
// this.number2 = response.data.dataSummary
|
||||
// })
|
||||
// .catch(error2 => {
|
||||
// console.error('There was an error!', error2);
|
||||
// })
|
||||
// },
|
||||
},
|
||||
mouseOver(){
|
||||
//鼠标移出
|
||||
clearInterval(this.timer)
|
||||
|
||||
this.clearFloatWindowTimer();
|
||||
|
||||
},
|
||||
// 飘窗跳转
|
||||
windowSkip() {
|
||||
window.open('https://www.aimzhu.com/floatPage.html');
|
||||
},
|
||||
|
||||
// 启动飘窗移动的定时器
|
||||
startFloatWindowTimer() {
|
||||
if (!this.timer) {
|
||||
this.resetFloatWindowPosition(); // 重置飘窗位置
|
||||
this.timer = setInterval(() => {
|
||||
this.sportTranstion();
|
||||
}, 30);
|
||||
}
|
||||
},
|
||||
|
||||
// 清除飘窗的定时器
|
||||
clearFloatWindowTimer() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
},
|
||||
|
||||
// 重置飘窗位置
|
||||
resetFloatWindowPosition() {
|
||||
this.moveX = 0;
|
||||
this.moveY = 0;
|
||||
},
|
||||
|
||||
startScroll() {
|
||||
this.intervalId = setInterval(() => {
|
||||
@ -296,9 +422,81 @@ export default {
|
||||
stopScroll() {
|
||||
clearInterval(this.intervalId);
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
// -----------------------------------------
|
||||
|
||||
beforeRouteEnter(to, from, next) {
|
||||
next(vm => {
|
||||
if (to.name === 'Home') {
|
||||
vm.sportStatus = true;
|
||||
vm.floatWindowKey++; // 增加 key 值以强制重新渲染
|
||||
vm.$nextTick(() => {
|
||||
vm.resetFloatWindowPosition(); // 重置飘窗位置
|
||||
vm.startFloatWindowTimer(); // 启动飘窗移动的定时器
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
if (to.name === 'Home') {
|
||||
this.sportStatus = true;
|
||||
this.floatWindowKey++;
|
||||
this.resetFloatWindowPosition(); // 重置飘窗位置
|
||||
this.startFloatWindowTimer(); // 启动飘窗移动的定时器
|
||||
} else {
|
||||
this.sportStatus = false;
|
||||
this.clearFloatWindowTimer(); // 清除飘窗的定时器
|
||||
}
|
||||
next();
|
||||
},
|
||||
beforeRouteLeave(to, from, next) {
|
||||
if (from.name === 'Home') {
|
||||
this.sportStatus = false;
|
||||
this.clearFloatWindowTimer(); // 清除飘窗的定时器
|
||||
}
|
||||
next();
|
||||
},
|
||||
// beforeDestroy() {
|
||||
// this.clearFloatWindowTimer();
|
||||
// this.sportStatus = false;
|
||||
// // 如果需要，可以手动清理DOM
|
||||
// if (this.$el && this.$el.parentNode) {
|
||||
// this.$el.parentNode.removeChild(this.$el);
|
||||
// }
|
||||
// },
|
||||
|
||||
// // 路由守卫
|
||||
// beforeRouteEnter(to, from, next) {
|
||||
// next(vm => {
|
||||
// if (to.name === 'Home') {
|
||||
// vm.sportStatus = true;
|
||||
// vm.startFloatWindowTimer();
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
// beforeRouteLeave(to, from, next) {
|
||||
// if (from.name === 'Home') {
|
||||
// this.sportStatus = false;
|
||||
// this.clearFloatWindowTimer();
|
||||
// }
|
||||
// next();
|
||||
// },
|
||||
// beforeRouteUpdate(to, from, next) {
|
||||
// if (to.name === 'Home') {
|
||||
// vm.sportStatus = true;
|
||||
// this.startFloatWindowTimer();
|
||||
// } else {
|
||||
// this.sportStatus = false;
|
||||
// this.clearFloatWindowTimer();
|
||||
// }
|
||||
// next();
|
||||
// },
|
||||
|
||||
|
||||
// -----------------------------------------
|
||||
|
||||
computed: {
|
||||
|
||||
titleContainerStyle() {
|
||||
@ -314,6 +512,7 @@ export default {
|
||||
mounted() {
|
||||
this.startScroll();
|
||||
this.startData();
|
||||
this.floatContent();
|
||||
// this.goToLink();
|
||||
axios.get(``).then(Response => {
|
||||
this.oneData = Response.data
|
||||
@ -415,10 +614,18 @@ export default {
|
||||
margin: auto;
|
||||
}
|
||||
.home-page .box-top .headline .button-box button {
|
||||
padding: 10px 45px;
|
||||
/* padding: 10px 45px; */
|
||||
height: 40px;
|
||||
width: 140px;
|
||||
margin-left: 20px;
|
||||
border: none;
|
||||
}
|
||||
.home-page .box-top .headline .button-box button a {
|
||||
display: block;
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.home-page .box-top .headline .button-box button:first-child {
|
||||
background-color: #39C7C1;
|
||||
/* color: #FFF; */
|
||||
@ -437,6 +644,37 @@ export default {
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 飘窗 */
|
||||
.home-page .pcdiv {
|
||||
position: absolute;
|
||||
width: 100vh;
|
||||
height: 100vw;
|
||||
}
|
||||
.home-page #sport_wrap {
|
||||
position: absolute;
|
||||
display: block;
|
||||
/* display: none; */
|
||||
z-index: 99999999999;
|
||||
width:150px;
|
||||
height:150px;
|
||||
/* line-height: 70px; */
|
||||
cursor: pointer;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.home-page #sport_wrap .deleteImg {
|
||||
width: 20px;
|
||||
height:20px;
|
||||
position:absolute;
|
||||
right:-10px;
|
||||
top:-10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-page #sport_wrap .deleteImg .close {
|
||||
width:20px !important;
|
||||
height: 20px !important;
|
||||
}
|
||||
|
||||
.home-page .box-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<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>
|
||||
<title id="HTMLBT">AI秒著引擎</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
@ -60,12 +60,14 @@
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script>
|
||||
const htmlBT = document.querySelector('#HTMLBT')
|
||||
const content = document.querySelector('#content')
|
||||
const title = document.querySelector('#title')
|
||||
axios.get('https://www.aimzhu.com/operator/app/agreementportal/getrelease/93679af4-e264-4d1c-bd49-538028daa95d').then(response => {
|
||||
this.data = response.data;
|
||||
// this.title = response.data.title;
|
||||
// this.data = response.data.content;
|
||||
htmlBT.innerHTML = response.data.title
|
||||
title.innerHTML = response.data.title
|
||||
content.innerHTML = response.data.content
|
||||
console.log(response.data);
|
||||
|
||||
@ -456,7 +456,7 @@ export default {
|
||||
mounted() {
|
||||
this.fetchData1()
|
||||
this.fetchData2()
|
||||
this.fetchData3()
|
||||
// this.fetchData3()
|
||||
this.fetchDataPageSize()
|
||||
},
|
||||
}
|
||||
@ -563,6 +563,7 @@ export default {
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
@ -577,6 +578,7 @@ export default {
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 4;
|
||||
}
|
||||
@ -675,6 +677,7 @@ export default {
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
@ -687,6 +690,7 @@ export default {
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
@ -803,6 +807,7 @@ export default {
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
@ -821,6 +826,7 @@ export default {
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 5;
|
||||
}
|
||||
@ -997,6 +1003,7 @@ export default {
|
||||
text-overflow: ellipsis;
|
||||
position: relative; /* 定位上下文 */
|
||||
display: -webkit-box; /* 使用弹性盒模型 */
|
||||
line-clamp: 3;
|
||||
-webkit-box-orient: vertical;/* 设置子元素的排列方式为垂直 */
|
||||
-webkit-line-clamp: 3; /* 限制在三行 */
|
||||
color: #939399;
|
||||
@ -1099,6 +1106,7 @@ export default {
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<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>
|
||||
<title id="HTMLBT">AI秒著引擎</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
@ -60,12 +60,14 @@
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script>
|
||||
const htmlBT = document.querySelector('#HTMLBT')
|
||||
const content = document.querySelector('#content')
|
||||
const title = document.querySelector('#title')
|
||||
axios.get('https://www.aimzhu.com/operator/app/agreementportal/getrelease/a9748d82-6a42-4895-9d13-de496b166413').then(response => {
|
||||
// this.data = response.data;
|
||||
// this.title = response.data.title;
|
||||
// this.data = response.data.content;
|
||||
htmlBT.innerHTML = response.data.title
|
||||
title.innerHTML = response.data.title
|
||||
content.innerHTML = response.data.content
|
||||
console.log(response.data);
|
||||
|
||||
87
src/components/ScrollAD.html
Normal file
87
src/components/ScrollAD.html
Normal file
@ -0,0 +1,87 @@
|
||||
<!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 id="HTMLBT">AI秒著引擎</title>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
em,
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul,
|
||||
li,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 1000px;
|
||||
margin: 0 auto;
|
||||
/* border: 1px solid #333; */
|
||||
padding-top: 50px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
#title {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
|
||||
#content {
|
||||
line-height: 35px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<h2 id="title"></h2>
|
||||
<!-- <h2 id="title" v-html="title"></h2> -->
|
||||
<div id="content"></div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script>
|
||||
const htmlBT = document.querySelector('#HTMLBT')
|
||||
const content = document.querySelector('#content')
|
||||
const title = document.querySelector('#title')
|
||||
axios.get('https://www.aimzhu.com/operator/app/agreementportal/getrelease/a50fddde-9eb5-4aa5-88c4-a7bf6fded339').then(response => {
|
||||
// this.data = response.data;
|
||||
// this.title = response.data.title;
|
||||
// this.data = response.data.content;
|
||||
htmlBT.innerHTML = response.data.title
|
||||
title.innerHTML = response.data.title
|
||||
content.innerHTML = response.data.content
|
||||
console.log(response.data);
|
||||
|
||||
|
||||
// console.log(response.data.agreementType);
|
||||
// console.log(response.data.content);
|
||||
|
||||
}).catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -5,7 +5,7 @@
|
||||
<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>
|
||||
<title id="HTMLBT">AI秒著引擎</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
@ -60,12 +60,14 @@
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script>
|
||||
const htmlBT = document.querySelector('#HTMLBT')
|
||||
const content = document.querySelector('#content')
|
||||
const title = document.querySelector('#title')
|
||||
axios.get('https://www.aimzhu.com/operator/app/agreementportal/getrelease/e609d78d-7d62-4c9e-a809-090ee350dca3').then(response => {
|
||||
// this.data = response.data;
|
||||
// this.title = response.data.title;
|
||||
// this.data = response.data.content;
|
||||
htmlBT.innerHTML = response.data.title
|
||||
title.innerHTML = response.data.title
|
||||
content.innerHTML = response.data.content
|
||||
console.log(response.data);
|
||||
|
||||
871
src/components/ShouFei copy.vue
Normal file
871
src/components/ShouFei copy.vue
Normal file
@ -0,0 +1,871 @@
|
||||
<template>
|
||||
<div class="shou-fei">
|
||||
<div class="box-top">
|
||||
<h4>选择最适合自己的服务</h4>
|
||||
<p>直服无中介 价格透明 不下证即退款</p>
|
||||
</div>
|
||||
<div class="box-bottom">
|
||||
<div class="box box1" @mouseover="mrxz=1">
|
||||
<div class="top">
|
||||
<div :class="mrxz == 1 ? 'bjys active' : 'bjys'">
|
||||
<h4>全托管</h4>
|
||||
</div>
|
||||
<span class="price">￥<em>{{ totalPrice1 }}</em>
|
||||
</span>
|
||||
<div class="jianjie">
|
||||
<i></i>
|
||||
从下单到取证，仅需提供基本信息，我们为您提供一站式管家服务。
|
||||
</div>
|
||||
|
||||
<!-- <p>加急办理800元</p> -->
|
||||
<!-- <button type="button" value="500" @click="goToLink()" style="display: none;">立即购买</button> -->
|
||||
</div>
|
||||
<ul>
|
||||
<!-- 1 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<h4>提供的服务：</h4>
|
||||
</li>
|
||||
<!-- 2 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>包可运行软件开发也搭建</p>
|
||||
</li>
|
||||
<!-- 3 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>包<em>鉴别材料
|
||||
<div class="detail">鉴别材料包含：申请表、源程序和系统用户手册或设计文档</div>
|
||||
</em>撰写</p>
|
||||
</li>
|
||||
<!-- 4 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>包代办</p>
|
||||
</li>
|
||||
<!-- 5 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>包下证</p>
|
||||
</li>
|
||||
<!-- 6 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>包开发票</p>
|
||||
</li>
|
||||
<!-- 7 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>提供可运行软件安装包</p>
|
||||
</li>
|
||||
<!-- 8 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>提供可运行软件<em>云服务
|
||||
<div class="detail">云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。</div>
|
||||
</em></p>
|
||||
</li>
|
||||
<!-- 9 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>提供可运行软件演示视频</p>
|
||||
</li>
|
||||
<!-- 10 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>客服一对一服务</p>
|
||||
</li>
|
||||
|
||||
<!-- 11 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<h4>使用流程：</h4>
|
||||
</li>
|
||||
<!-- 12 -->
|
||||
<li>
|
||||
<i>1</i>
|
||||
<p>填写系统名称</p>
|
||||
</li>
|
||||
<!-- 13 -->
|
||||
<li>
|
||||
<i>2</i>
|
||||
<p>填写基本信息</p>
|
||||
</li>
|
||||
<!-- 14 -->
|
||||
<li>
|
||||
<i>3</i>
|
||||
<p>接收证书</p>
|
||||
</li>
|
||||
<!-- 15 -->
|
||||
<li>
|
||||
<span></span>
|
||||
</li>
|
||||
<!-- 16 -->
|
||||
<li>
|
||||
<input type="checkbox" id="chec1" value="800" v-model="additionalOptions1.chec11"
|
||||
@change="updateTotalPrice1">
|
||||
<p>加急办理800元</p>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box box2" @mouseover="mrxz=2">
|
||||
<div class="top">
|
||||
<div :class="mrxz == 2 ? 'bjys active' : 'bjys'">
|
||||
<h4>写材料并委托代办</h4>
|
||||
</div>
|
||||
<!-- <span>￥<em :value="basePrice21 + additionalOptionsPrice2">{{ basePrice21 + additionalOptionsPrice2 }}</em>起</span>
|
||||
<p :value="basePrice22 + additionalOptionsPrice2">加急件{{ basePrice22 + additionalOptionsPrice2 }}元</p> -->
|
||||
<span class="price">￥<em>{{ totalPrice21 }}</em></span>
|
||||
<span class="jianjie">
|
||||
<i></i>
|
||||
通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料，可委托平台合作代办机构进行办理。
|
||||
</span>
|
||||
<!-- <p>加急办理{{ totalPrice22 }}元</p> -->
|
||||
<!-- <div class="btnlist">
|
||||
<button type="button" class="btn box2btn1" :value="basePrice21 + additionalOptionsPrice2" @click="goToLink()" style="display: none;">普件购买</button>
|
||||
<button type="button" class="btn box2btn2" :value="basePrice22 + additionalOptionsPrice2" @click="goToLink()" style="display: none;">加急购买</button>
|
||||
</div> -->
|
||||
</div>
|
||||
<ul>
|
||||
<!-- 1 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<h4>提供的服务：</h4>
|
||||
</li>
|
||||
<!-- 2 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>通过平台自己搭建可运行软件</p>
|
||||
</li>
|
||||
<!-- 3 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>平台自动撰写<em>鉴别材料
|
||||
<div class="detail">鉴别材料包含：申请表、源程序和系统用户手册或设计文档</div>
|
||||
</em></p>
|
||||
</li>
|
||||
<!-- 4 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>包代办</p>
|
||||
</li>
|
||||
<!-- 5 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>包下证</p>
|
||||
</li>
|
||||
<!-- 6 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>包开发票</p>
|
||||
</li>
|
||||
<!-- 7 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>提供可运行软件<em>云服务
|
||||
<div class="detail">云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。</div>
|
||||
</em>600天</p>
|
||||
</li>
|
||||
<!-- 8 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>客服一对一服务</p>
|
||||
</li>
|
||||
<!-- 9 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<p></p>
|
||||
</li>
|
||||
<!-- 10 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<p></p>
|
||||
</li>
|
||||
<!-- 11 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<h4>使用流程：</h4>
|
||||
</li>
|
||||
<!-- 12 -->
|
||||
<li>
|
||||
<i>1</i>
|
||||
<p>按系统操作流程执行</p>
|
||||
</li>
|
||||
<!-- 13 -->
|
||||
<li>
|
||||
<span></span>
|
||||
</li>
|
||||
<!-- 14 -->
|
||||
<li>
|
||||
<input type="checkbox" id="chec21" value="50" v-model="additionalOptions2.chec21"
|
||||
@change="updateTotalPrice2">
|
||||
<p>安装包50元</p>
|
||||
</li>
|
||||
<!-- 15 -->
|
||||
<li>
|
||||
<input type="checkbox" id="chec22" value="50" v-model="additionalOptions2.chec22"
|
||||
@change="updateTotalPrice2">
|
||||
<p>系统演示视频文件50元</p>
|
||||
</li>
|
||||
<!-- 16 -->
|
||||
<li>
|
||||
<input type="checkbox" id="chec23" value="800" v-model="additionalOptions2.chec23"
|
||||
@change="updateTotalPrice2">
|
||||
<p>加急办理800元</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box box3" @mouseover="mrxz=3">
|
||||
<div class="top">
|
||||
<div :class="mrxz == 3 ? 'bjys active' : 'bjys'">
|
||||
<h4>写材料</h4>
|
||||
</div>
|
||||
<!-- <span>￥<em :value="basePrice3 + additionalOptionsPrice3">{{ basePrice3 + additionalOptionsPrice3 }}</em></span> -->
|
||||
<span class="price">￥<em>{{ totalPrice3 }}</em></span>
|
||||
<span class="jianjie">
|
||||
<i></i>
|
||||
通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料，下载鉴别材料后可自行申报或找相关代理机构申报。
|
||||
</span>
|
||||
<!-- <button type="button" :value="basePrice3 + additionalOptionsPrice3" @click="goToLink()" style="display: none;">立即购买</button> -->
|
||||
</div>
|
||||
<ul>
|
||||
<!-- 1 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<h4>提供的服务：</h4>
|
||||
</li>
|
||||
<!-- 2 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>通过平台自己搭建可运行软件</p>
|
||||
</li>
|
||||
<!-- 3 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>平台自动撰写<em>鉴别材料
|
||||
<div class="detail">鉴别材料包含：申请表、源程序和系统用户手册或设计文档</div>
|
||||
</em></p>
|
||||
</li>
|
||||
<!-- 4 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>包补正材料撰写一直到下证</p>
|
||||
</li>
|
||||
<!-- 5 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>两次补正不通过平台退款</p>
|
||||
</li>
|
||||
<!-- 6 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>包开发票</p>
|
||||
</li>
|
||||
<!-- 7 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>提供可运行软件<em>云服务
|
||||
<div class="detail">云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。</div>
|
||||
</em>300天</p>
|
||||
</li>
|
||||
<!-- 8 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>客服一对一服务</p>
|
||||
</li>
|
||||
<!-- 9 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<p></p>
|
||||
</li>
|
||||
<!-- 10 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<p></p>
|
||||
</li>
|
||||
|
||||
<!-- 11 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<h4>使用流程：</h4>
|
||||
</li>
|
||||
<!-- 12 -->
|
||||
<li>
|
||||
<i>1</i>
|
||||
<p>按系统操作流程执行</p>
|
||||
</li>
|
||||
<!-- 13 -->
|
||||
<li>
|
||||
<span></span>
|
||||
</li>
|
||||
<!-- 14 -->
|
||||
<li>
|
||||
<input type="checkbox" id="chec31" value="50" v-model="additionalOptions3.chec31"
|
||||
@change="updateTotalPrice3">
|
||||
<p>安装包50元</p>
|
||||
</li>
|
||||
<!-- 15 -->
|
||||
<li>
|
||||
<input type="checkbox" id="chec32" value="50" v-model="additionalOptions3.chec32"
|
||||
@change="updateTotalPrice3">
|
||||
<p>系统演示视频文件50元</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box box4" @mouseover="mrxz=4">
|
||||
<div class="top">
|
||||
<div :class="mrxz == 4 ? 'bjys active' : 'bjys'">
|
||||
<h4>免费试用</h4>
|
||||
</div>
|
||||
<span class="price">￥<em>{{ totalPrice4 }}</em></span>
|
||||
<span class="jianjie">
|
||||
<i></i>
|
||||
每个账户的免费试用次数为3次。免费试用主要目的是让您了解如何使用平台，可全过程体验。
|
||||
</span>
|
||||
<!-- <button type="button" :value="basePrice3 + additionalOptionsPrice3" @click="goToLink()" style="display: none;">立即购买</button> -->
|
||||
</div>
|
||||
<ul>
|
||||
<!-- 1 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<h4>提供的服务：</h4>
|
||||
</li>
|
||||
<!-- 2 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>通过平台自己搭建可运行软件</p>
|
||||
</li>
|
||||
<!-- 3 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>平台自动撰写<em>鉴别材料
|
||||
<div class="detail">鉴别材料包含：申请表、源程序和系统用户手册或设计文档</div>
|
||||
</em></p>
|
||||
</li>
|
||||
<!-- 4 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>提供可运行软件<em>云服务
|
||||
<div class="detail">云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。</div>
|
||||
</em>10天</p>
|
||||
</li>
|
||||
<!-- 5 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>客服一对一服务</p>
|
||||
</li>
|
||||
<!-- 6 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<p></p>
|
||||
</li>
|
||||
<!-- 7 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<p></p>
|
||||
</li>
|
||||
<!-- 8 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<p></p>
|
||||
</li>
|
||||
<!-- 9 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<p></p>
|
||||
</li>
|
||||
<!-- 10 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<p></p>
|
||||
</li>
|
||||
|
||||
<!-- 11 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<h4>使用流程：</h4>
|
||||
</li>
|
||||
<!-- 12 -->
|
||||
<li>
|
||||
<i>1</i>
|
||||
<p>按系统操作流程执行</p>
|
||||
</li>
|
||||
<!-- 13 -->
|
||||
<li>
|
||||
<span></span>
|
||||
</li>
|
||||
<!-- 14 -->
|
||||
<li>
|
||||
<input type="checkbox" id="chec4" value="0" v-model="additionalOptions4.chec4"/>
|
||||
<!-- <p>系统演示视频文件50元</p> -->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import axios from 'axios'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mrxz: 1,
|
||||
basePrice1: 280,
|
||||
additionalOptions1: {
|
||||
chec11: false,
|
||||
},
|
||||
basePrice21: 230,
|
||||
basePrice22: 800,
|
||||
additionalOptions2: {
|
||||
chec21: false,
|
||||
chec22: false,
|
||||
chec23: false,
|
||||
},
|
||||
basePrice3: 180,
|
||||
additionalOptions3: {
|
||||
chec31: false,
|
||||
chec32: false,
|
||||
},
|
||||
basePrice4: 0,
|
||||
additionalOptions4: {
|
||||
chec4: false,
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bjys() {
|
||||
|
||||
},
|
||||
// goToLink() {
|
||||
// window.location.href = 'https://www.aimzhu.com/operator/';
|
||||
// },
|
||||
getButtonValue(event) {
|
||||
// 获取按钮的value
|
||||
console.log(event.target.value);
|
||||
},
|
||||
|
||||
// updateTotalPrice2() {
|
||||
// // 更新第二项的总价格
|
||||
// this.additionalOptions2 = this.additionalOptions2.concat(this.additionalOptions3);
|
||||
// this.additionalOptions2 = this.additionalOptions2.concat(this.additionalOptions4);
|
||||
// },
|
||||
// updateTotalPrice3() {
|
||||
// // 更新第三项的总价格
|
||||
// this.additionalOptions3 = this.additionalOptions3.concat(this.additionalOptions4);
|
||||
// this.additionalOptions3 = this.additionalOptions3.concat(this.additionalOptions5);
|
||||
// }
|
||||
|
||||
updateTotalPrice1() {
|
||||
let price = 0;
|
||||
if (this.additionalOptions1.chec11) price += 800;
|
||||
this.additionalOptions1.total = price;
|
||||
},
|
||||
updateTotalPrice2() {
|
||||
let price = 0;
|
||||
if (this.additionalOptions2.chec21) price += 50;
|
||||
if (this.additionalOptions2.chec22) price += 50;
|
||||
if (this.additionalOptions2.chec23) price += 800;
|
||||
this.additionalOptions2.total = price;
|
||||
},
|
||||
updateTotalPrice3() {
|
||||
let price = 0;
|
||||
if (this.additionalOptions3.chec31) price += 50;
|
||||
if (this.additionalOptions3.chec32) price += 50;
|
||||
this.additionalOptions3.total = price;
|
||||
},
|
||||
updateTotalPrice4() {
|
||||
let price = 0;
|
||||
if (this.additionalOptions3.chec4) price += 0;
|
||||
this.additionalOptions4.total = price;
|
||||
},
|
||||
|
||||
},
|
||||
// mounted() {
|
||||
// this.dianji();
|
||||
// },
|
||||
computed: {
|
||||
totalPrice1() {
|
||||
return this.basePrice1 + (this.additionalOptions1.total || 0);
|
||||
},
|
||||
totalPrice21() {
|
||||
return this.basePrice21 + (this.additionalOptions2.total || 0);
|
||||
},
|
||||
totalPrice22() {
|
||||
return this.basePrice22 + (this.additionalOptions2.total || 0);
|
||||
},
|
||||
totalPrice3() {
|
||||
return this.basePrice3 + (this.additionalOptions3.total || 0);
|
||||
},
|
||||
totalPrice4() {
|
||||
return this.basePrice4 + (this.additionalOptions4.total || 0);
|
||||
},
|
||||
// additionalOptionsPrice2() {
|
||||
// // 计算附加选项的总价
|
||||
// return this.additionalOptions2.reduce((total, option) => total + parseInt(option), 0);
|
||||
// },
|
||||
// additionalOptionsPrice3() {
|
||||
// // 计算附加选项的总价
|
||||
// return this.additionalOptions3.reduce((total, option) => total + parseInt(option), 0);
|
||||
// },
|
||||
|
||||
// totalPrice21() {
|
||||
// // 计算第二项普通件的总价
|
||||
// return this.basePrice21 + this.additionalOptionsPrice2;
|
||||
// },
|
||||
// totalPrice22() {
|
||||
// // 计算第二项加急件的总价
|
||||
// return this.basePrice22 + this.additionalOptionsPrice2;
|
||||
// },
|
||||
// totalPrice3() {
|
||||
// // 计算第三项的总价
|
||||
// return this.basePrice3 + this.additionalOptionsPrice3;
|
||||
// }
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</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: 1200px;
|
||||
}
|
||||
.shou-fei .box-top {
|
||||
position: absolute;
|
||||
top: 140px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 500px;
|
||||
height: 100px;
|
||||
/* background-color: pink; */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.shou-fei .box-top h4 {
|
||||
width: 500px;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4px;
|
||||
color: #74491a;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.shou-fei .box-top p {
|
||||
width: 500px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 5px;
|
||||
color: #9a7148;
|
||||
}
|
||||
.shou-fei .box-bottom {
|
||||
position: absolute;
|
||||
top: 270px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 1200px;
|
||||
height: 900px;
|
||||
/* border: 1px solid red; */
|
||||
|
||||
}
|
||||
.shou-fei .box-bottom .box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 280px;
|
||||
height: 810px;
|
||||
padding: 0px 0px;
|
||||
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 .top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
/* flex-wrap: wrap; */
|
||||
width: 280px;
|
||||
/* height: 200px; */
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
/* .box-bottom .box:first-child .bjys {
|
||||
background: linear-gradient(to right, rgba(237,90,36,1), rgba(243,143,30,1));
|
||||
color: #FFFFFF ;
|
||||
} */
|
||||
.box .top .bjys {
|
||||
width: 280px;
|
||||
height: 50px;
|
||||
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-bottom .box:hover .bjys{
|
||||
background: linear-gradient(to right, rgba(237,90,36,1), rgba(243,143,30,1));
|
||||
color: #FFFFFF ;
|
||||
}
|
||||
.box-bottom .box:hover ~ .bjys {
|
||||
background: linear-gradient(to right, rgba(237,90,36,.2), rgba(243,143,30,.2));
|
||||
color: #5e3603;
|
||||
} */
|
||||
.box .top h4 {
|
||||
width: 280px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
/* color: #5e3603; */
|
||||
/* margin-top: 25px; */
|
||||
/* margin-left: 25px; */
|
||||
/* margin-bottom: 20px; */
|
||||
|
||||
}
|
||||
.box .top .price {
|
||||
/* width: 150px; */
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
margin: 15px auto;
|
||||
/* margin-left: 50px; */
|
||||
/* margin-bottom: 20px; */
|
||||
color: #f77333;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
.box .top .price em {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.box .top .jianjie {
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: 110px;
|
||||
margin: 0 20px;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
color: #5e3603;
|
||||
background-color: #fff6e7;
|
||||
text-align: justify;
|
||||
/* vertical-align: center; */
|
||||
}
|
||||
.box .top .jianjie i {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 115px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left:10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom:10px solid #feedcc;
|
||||
}
|
||||
|
||||
|
||||
/* .box .top button {
|
||||
width: 230px;
|
||||
height: 50px;
|
||||
margin: 0 10px;
|
||||
margin-top: 30px;
|
||||
background-color: #fcbb53;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: #FFF;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.box .top p,
|
||||
.box2 .top p {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #8f8f8f;
|
||||
}
|
||||
.box2 .top button {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.box2 .top .btnlist {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 250px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.box .top .btn {
|
||||
width: 110px;
|
||||
}
|
||||
.box .top button:hover {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
} */
|
||||
|
||||
|
||||
|
||||
.box ul {
|
||||
margin: 5px 20px;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.box ul li {
|
||||
/* height: 24px; */
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
display: flex;
|
||||
/* background-color: green; */
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.box ul li i {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
color: #f6783a;
|
||||
/* margin-right: 8px;
|
||||
margin-left: 8px; */
|
||||
margin: 3px 8px;
|
||||
background-color: #fee9d1;
|
||||
/* background: url(/assets/img/shoufei-dg.png) no-repeat;
|
||||
background-size: cover; */
|
||||
}
|
||||
.box ul li h4 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.box ul li p {
|
||||
/* display: block; */
|
||||
color: #6b4516;
|
||||
}
|
||||
.box ul li p em {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
color: #F7AC3B;
|
||||
}
|
||||
.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;
|
||||
/* left: 50%; */
|
||||
/* transform: translate(-30%, 0%); */
|
||||
width: 250px;
|
||||
padding: 5px 10px;
|
||||
text-align: justify;
|
||||
color: #5F3B00;
|
||||
background-color: rgba(255,232,192,.7);
|
||||
/* border: 1px solid rgba(0,0,0,.2); */
|
||||
}
|
||||
|
||||
.box ul li p em:hover .detail {
|
||||
display: block;
|
||||
}
|
||||
.box1 ul li:nth-child(1),
|
||||
.box1 ul li:nth-child(11),
|
||||
.box2 ul li:nth-child(1),
|
||||
.box2 ul li:nth-child(11),
|
||||
.box3 ul li:nth-child(1),
|
||||
.box3 ul li:nth-child(11),
|
||||
.box4 ul li:nth-child(1),
|
||||
.box4 ul li:nth-child(11) {
|
||||
/* background-color: transparent;
|
||||
display: none; */
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
color: #694618;
|
||||
}
|
||||
.box1 ul li:nth-child(1) i,
|
||||
.box1 ul li:nth-child(11) i,
|
||||
.box2 ul li:nth-child(1) i,
|
||||
.box2 ul li:nth-child(11) i,
|
||||
.box3 ul li:nth-child(1) i,
|
||||
.box3 ul li:nth-child(11) i,
|
||||
.box4 ul li:nth-child(1) i,
|
||||
.box4 ul li:nth-child(11) i {
|
||||
background-color: transparent;
|
||||
display: none;
|
||||
}
|
||||
.box1 ul li:nth-child(12) i,
|
||||
.box1 ul li:nth-child(13) i,
|
||||
.box1 ul li:nth-child(14) i,
|
||||
.box2 ul li:nth-child(12) i
|
||||
{
|
||||
background: none;
|
||||
background-color: #fee9d1;
|
||||
color: #f6783a;
|
||||
}
|
||||
|
||||
.box1 ul li:nth-child(16),
|
||||
.box2 ul li:nth-child(14),
|
||||
.box2 ul li:nth-child(15),
|
||||
.box2 ul li:nth-child(16),
|
||||
.box3 ul li:nth-child(14),
|
||||
.box3 ul li:nth-child(15) {
|
||||
/* background-color: pink; */
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
margin: 3px 0;
|
||||
}
|
||||
.box1 ul li:nth-child(16),
|
||||
.box2 ul li:nth-child(14),
|
||||
.box3 ul li:nth-child(14) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.box1 ul li:nth-child(16) input[type='checkbox'],
|
||||
.box2 ul li:nth-child(14) input[type="checkbox"],
|
||||
.box2 ul li:nth-child(15) input[type="checkbox"],
|
||||
.box2 ul li:nth-child(16) input[type="checkbox"],
|
||||
.box3 ul li:nth-child(14) input[type="checkbox"],
|
||||
.box3 ul li:nth-child(15) input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 4px 10px 4px 11px;
|
||||
}
|
||||
|
||||
.box1 ul li:nth-child(15) span,
|
||||
.box2 ul li:nth-child(13) span,
|
||||
.box3 ul li:nth-child(13) span {
|
||||
display: block;
|
||||
width: 230px;
|
||||
height: 2px;
|
||||
margin-top: 10px ;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.box4 ul li:nth-child(13),
|
||||
.box4 ul li:nth-child(14) {
|
||||
display: none;
|
||||
}
|
||||
.box2 ul li:nth-child(9) i,
|
||||
.box2 ul li:nth-child(10) i,
|
||||
.box3 ul li:nth-child(9) i,
|
||||
.box3 ul li:nth-child(10) i,
|
||||
.box4 ul li:nth-child(6) i,
|
||||
.box4 ul li:nth-child(7) i,
|
||||
.box4 ul li:nth-child(8) i,
|
||||
.box4 ul li:nth-child(9) i,
|
||||
.box4 ul li:nth-child(10) i {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -2,250 +2,62 @@
|
||||
<div class="shou-fei">
|
||||
<div class="box-top">
|
||||
<h4>选择最适合自己的服务</h4>
|
||||
<p>灵活搭建更高效的著作权办理平台</p>
|
||||
<p>直服无中介 价格透明 不下证即退款</p>
|
||||
</div>
|
||||
<div class="box-bottom">
|
||||
<div class="box box1">
|
||||
<div class="box box1" @mouseover="activeIndex = index" v-for="(item, index) in contentList" :key="index" :class="{ 'active': activeIndex === index }">
|
||||
<div class="top">
|
||||
<h4>全托</h4>
|
||||
<span>￥<em>380</em></span>
|
||||
<p>加急件1000元</p>
|
||||
<button type="button" value="500" @click="goToLink()" style="display: none;">立即购买</button>
|
||||
<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>
|
||||
<ul>
|
||||
<!-- 1 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<h4>提供的服务：</h4>
|
||||
</li>
|
||||
<!-- 2 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>提供系统搭建</p>
|
||||
</li>
|
||||
<!-- 3 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>系统可在线运行三年</p>
|
||||
</li>
|
||||
<!-- 4 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>软著材料编写</p>
|
||||
</li>
|
||||
<!-- 5 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>软著申报</p>
|
||||
</li>
|
||||
<!-- 6 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>包下证</p>
|
||||
</li>
|
||||
<!-- 7 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>提供系统演示视频文件</p>
|
||||
</li>
|
||||
<!-- 8 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>提供系统安装包</p>
|
||||
</li>
|
||||
<!-- 9 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<h4>使用流程：</h4>
|
||||
</li>
|
||||
<!-- 10 -->
|
||||
<li>
|
||||
<i>1</i>
|
||||
<p>编写软著名称</p>
|
||||
</li>
|
||||
<!-- 11 -->
|
||||
<li>
|
||||
<i>2</i>
|
||||
<p>对搭建系统进行核验</p>
|
||||
</li>
|
||||
<!-- 12 -->
|
||||
<li>
|
||||
<i>3</i>
|
||||
<p>接受证书</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box box2">
|
||||
<div class="top">
|
||||
<h4>写材料+代理</h4>
|
||||
<!-- <span>￥<em :value="basePrice21 + additionalOptionsPrice2">{{ basePrice21 + additionalOptionsPrice2 }}</em>起</span>
|
||||
<p :value="basePrice22 + additionalOptionsPrice2">加急件{{ basePrice22 + additionalOptionsPrice2 }}元</p> -->
|
||||
<span>￥<em>{{ totalPrice21 }}</em>起</span>
|
||||
<p>加急件{{ totalPrice22 }}元</p>
|
||||
<!-- <div class="btnlist">
|
||||
<button type="button" class="btn box2btn1" :value="basePrice21 + additionalOptionsPrice2" @click="goToLink()" style="display: none;">普件购买</button>
|
||||
<button type="button" class="btn box2btn2" :value="basePrice22 + additionalOptionsPrice2" @click="goToLink()" style="display: none;">加急购买</button>
|
||||
</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>
|
||||
<ul>
|
||||
<!-- 1 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<h4>提供的服务：</h4>
|
||||
</li>
|
||||
<!-- 2 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>提供系统搭建平台与客服指导</p>
|
||||
</li>
|
||||
<!-- 3 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>系统可在线运行一年</p>
|
||||
</li>
|
||||
<!-- 4 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>软著材料编写</p>
|
||||
</li>
|
||||
<!-- 5 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>资料补正不限</p>
|
||||
</li>
|
||||
<!-- 6 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>软著申报</p>
|
||||
</li>
|
||||
<!-- 7 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>包下证</p>
|
||||
</li>
|
||||
<!-- 8 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<h4>使用流程：</h4>
|
||||
</li>
|
||||
<!-- 9 -->
|
||||
<li>
|
||||
<i>1</i>
|
||||
<p>按系统操作手册执行</p>
|
||||
</li>
|
||||
<!-- 10 -->
|
||||
<li>
|
||||
<span></span>
|
||||
</li>
|
||||
<!-- 11 -->
|
||||
<li>
|
||||
<input type="checkbox" id="chec1" value="50" v-model="additionalOptions2.chec1"
|
||||
@change="updateTotalPrice2">
|
||||
<p>安装包50元</p>
|
||||
</li>
|
||||
<!-- 12 -->
|
||||
<li>
|
||||
<input type="checkbox" id="chec2" value="50" v-model="additionalOptions2.chec2"
|
||||
@change="updateTotalPrice2">
|
||||
<p>系统演示视频文件50元</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box box3">
|
||||
<div class="top">
|
||||
<h4>写材料</h4>
|
||||
<!-- <span>￥<em :value="basePrice3 + additionalOptionsPrice3">{{ basePrice3 + additionalOptionsPrice3 }}</em></span> -->
|
||||
<span>￥<em>{{ totalPrice3 }}</em></span>
|
||||
<!-- <button type="button" :value="basePrice3 + additionalOptionsPrice3" @click="goToLink()" style="display: none;">立即购买</button> -->
|
||||
<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>
|
||||
<ul>
|
||||
<!-- 1 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<h4>提供的服务：</h4>
|
||||
</li>
|
||||
<!-- 2 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>提供系统搭建平台与客服指导</p>
|
||||
</li>
|
||||
<!-- 3 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>系统可在线运行一年</p>
|
||||
</li>
|
||||
<!-- 4 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>软著材料编写</p>
|
||||
</li>
|
||||
<!-- 5 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>资料补正三次</p>
|
||||
</li>
|
||||
<!-- 6 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<h4>使用流程：</h4>
|
||||
</li>
|
||||
<!-- 7 -->
|
||||
<li>
|
||||
<i>1</i>
|
||||
<p>按系统操作手册执行</p>
|
||||
</li>
|
||||
<!-- 8 -->
|
||||
<li>
|
||||
<span></span>
|
||||
</li>
|
||||
<!-- 9 -->
|
||||
<li>
|
||||
<input type="checkbox" id="chec3" value="50" v-model="additionalOptions3.chec3"
|
||||
@change="updateTotalPrice3">
|
||||
<p>安装包50元</p>
|
||||
</li>
|
||||
<!-- 10 -->
|
||||
<li>
|
||||
<input type="checkbox" id="chec4" value="50" v-model="additionalOptions3.chec4"
|
||||
@change="updateTotalPrice3">
|
||||
<p>系统演示视频文件50元</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box box4">
|
||||
<div class="top">
|
||||
<h4>免费试用</h4>
|
||||
<span>￥<em>0</em></span>
|
||||
<button type="button" value="0" @click="goToLink()" style="display: none;">立即使用</button>
|
||||
<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>
|
||||
<ul>
|
||||
<!-- 1 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<h4>提供的服务：</h4>
|
||||
</li>
|
||||
<!-- 2 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>提供系统搭建平台与客服指导</p>
|
||||
</li>
|
||||
<!-- 3 -->
|
||||
<li>
|
||||
<i>√</i>
|
||||
<p>系统可在线存储三天</p>
|
||||
</li>
|
||||
<!-- 4 -->
|
||||
<li>
|
||||
<i></i>
|
||||
<h4>使用流程：</h4>
|
||||
</li>
|
||||
<!-- 5 -->
|
||||
<li>
|
||||
<i>1</i>
|
||||
<p>按系统操作手册执行</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -255,90 +67,113 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
basePrice1: 500,
|
||||
basePrice21: 300,
|
||||
basePrice22: 1000,
|
||||
additionalOptions2: {
|
||||
chec1: false,
|
||||
chec2: false,
|
||||
},
|
||||
basePrice3: 180,
|
||||
additionalOptions3: {
|
||||
chec3: false,
|
||||
chec4: false,
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
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: '安装包50元', price: 50},
|
||||
{chec: '系统演示视频文件50元', price: 50},
|
||||
]
|
||||
},
|
||||
{title: '写材料', priceSum: 180, 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: '提供可运行软件云服务300天', highlight: '云服务', start: 7, end: 10, tooltip: '云服务：保障通过秒著平台搭建的可运行软件在线能正常访问及数据存储。云服务到期后系统自动关停，数据清空。'},
|
||||
{serve: '客服一对一服务', highlight: '',start: '', end: '', tooltip: ''}
|
||||
],
|
||||
flowList: [
|
||||
{id: 1, flow: '按系统操作流程执行'}
|
||||
],
|
||||
checList: [
|
||||
{chec: '安装包50元', price: 50},
|
||||
{chec: '系统演示视频文件50元', price: 50},
|
||||
]
|
||||
},
|
||||
{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: {
|
||||
// goToLink() {
|
||||
// window.location.href = 'https://www.aimzhu.com/operator/';
|
||||
// },
|
||||
getButtonValue(event) {
|
||||
// 获取按钮的value
|
||||
console.log(event.target.value);
|
||||
setHoverText(text, index) {
|
||||
if (text) {
|
||||
this.hoverText = text;
|
||||
this.hoverIndex = index;
|
||||
} else {
|
||||
this.clearHoverText();
|
||||
}
|
||||
},
|
||||
|
||||
// updateTotalPrice2() {
|
||||
// // 更新第二项的总价格
|
||||
// this.additionalOptions2 = this.additionalOptions2.concat(this.additionalOptions3);
|
||||
// this.additionalOptions2 = this.additionalOptions2.concat(this.additionalOptions4);
|
||||
// },
|
||||
// updateTotalPrice3() {
|
||||
// // 更新第三项的总价格
|
||||
// this.additionalOptions3 = this.additionalOptions3.concat(this.additionalOptions4);
|
||||
// this.additionalOptions3 = this.additionalOptions3.concat(this.additionalOptions5);
|
||||
// }
|
||||
|
||||
updateTotalPrice2() {
|
||||
let price = 0;
|
||||
if (this.additionalOptions2.chec1) price += 50;
|
||||
if (this.additionalOptions2.chec2) price += 50;
|
||||
this.additionalOptions2.total = price;
|
||||
},
|
||||
updateTotalPrice3() {
|
||||
let price = 0;
|
||||
if (this.additionalOptions3.chec3) price += 50;
|
||||
if (this.additionalOptions3.chec4) price += 50;
|
||||
this.additionalOptions3.total = price;
|
||||
clearHoverText() {
|
||||
this.hoverText = '';
|
||||
this.hoverIndex = -1;
|
||||
},
|
||||
|
||||
},
|
||||
// mounted() {
|
||||
// this.dianji();
|
||||
// },
|
||||
computed: {
|
||||
totalPrice21() {
|
||||
return this.basePrice21 + (this.additionalOptions2.total || 0);
|
||||
},
|
||||
totalPrice22() {
|
||||
return this.basePrice22 + (this.additionalOptions2.total || 0);
|
||||
},
|
||||
totalPrice3() {
|
||||
return this.basePrice3 + (this.additionalOptions3.total || 0);
|
||||
},
|
||||
// additionalOptionsPrice2() {
|
||||
// // 计算附加选项的总价
|
||||
// return this.additionalOptions2.reduce((total, option) => total + parseInt(option), 0);
|
||||
// },
|
||||
// additionalOptionsPrice3() {
|
||||
// // 计算附加选项的总价
|
||||
// return this.additionalOptions3.reduce((total, option) => total + parseInt(option), 0);
|
||||
// },
|
||||
|
||||
// totalPrice21() {
|
||||
// // 计算第二项普通件的总价
|
||||
// return this.basePrice21 + this.additionalOptionsPrice2;
|
||||
// },
|
||||
// totalPrice22() {
|
||||
// // 计算第二项加急件的总价
|
||||
// return this.basePrice22 + this.additionalOptionsPrice2;
|
||||
// },
|
||||
// totalPrice3() {
|
||||
// // 计算第三项的总价
|
||||
// return this.basePrice3 + this.additionalOptionsPrice3;
|
||||
// }
|
||||
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
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
@ -356,17 +191,18 @@ export default {
|
||||
position: relative;
|
||||
background: url(/assets/img/shoufei-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
height: 1100px;
|
||||
height: 1200px;
|
||||
/* font-family: '楷体'; */
|
||||
}
|
||||
.shou-fei .box-top {
|
||||
position: absolute;
|
||||
top: 140px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 500px;
|
||||
height: 100px;
|
||||
/* background-color: pink; */
|
||||
text-align: center;
|
||||
width: 500px;
|
||||
height: 100px;
|
||||
/* background-color: pink; */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.shou-fei .box-top h4 {
|
||||
@ -385,13 +221,13 @@ text-align: center;
|
||||
}
|
||||
.shou-fei .box-bottom {
|
||||
position: absolute;
|
||||
top: 300px;
|
||||
top: 270px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 1200px;
|
||||
height: 700px;
|
||||
height: 900px;
|
||||
/* border: 1px solid red; */
|
||||
|
||||
}
|
||||
@ -399,8 +235,8 @@ text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 280px;
|
||||
height: 660px;
|
||||
padding: 20px 15px;
|
||||
height: 810px;
|
||||
padding: 0px 0px;
|
||||
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);
|
||||
@ -411,169 +247,232 @@ text-align: center;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
/* flex-wrap: wrap; */
|
||||
width: 250px;
|
||||
height: 200px;
|
||||
width: 280px;
|
||||
/* height: 200px; */
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.box .top h4 {
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
|
||||
.box .top .bjys {
|
||||
width: 280px;
|
||||
height: 50px;
|
||||
background: linear-gradient(to right, rgba(237,90,36,.2), rgba(243,143,30,.2));
|
||||
color: #5e3603;
|
||||
margin-top: 25px;
|
||||
margin-left: 25px;
|
||||
margin-bottom: 20px;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.box .top span {
|
||||
width: 150px;
|
||||
.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: 280px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
.box .top .price {
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
margin-left: 50px;
|
||||
/* margin-bottom: 20px; */
|
||||
margin: 15px auto;
|
||||
color: #f77333;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
.box .top span em {
|
||||
.box .top .price em {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.box .top button {
|
||||
width: 230px;
|
||||
height: 50px;
|
||||
margin: 0 10px;
|
||||
margin-top: 30px;
|
||||
background-color: #fcbb53;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: #FFF;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.box .top p,
|
||||
.box2 .top p {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #8f8f8f;
|
||||
}
|
||||
.box2 .top button {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.box2 .top .btnlist {
|
||||
.box .top .jianjie {
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 250px;
|
||||
margin-top: 10px;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: 110px;
|
||||
margin: 0 20px;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
color: #5e3603;
|
||||
background-color: #fff6e7;
|
||||
text-align: justify;
|
||||
/* vertical-align: center; */
|
||||
}
|
||||
.box .top .btn {
|
||||
width: 110px;
|
||||
.box .top .jianjie i {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 115px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left:10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom:10px solid #feedcc;
|
||||
}
|
||||
.box .top button:hover {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.box ul {
|
||||
margin: 5px 10px;
|
||||
.box .serve {
|
||||
margin: 5px 20px;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.box ul li {
|
||||
/* height: 24px; */
|
||||
.box .serve h5 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
color: #694618;
|
||||
}
|
||||
.box .serve .serveList {
|
||||
/* background-color: skyblue; */
|
||||
margin: 5px 0 0 10px;
|
||||
height: 290px;
|
||||
}
|
||||
.box .serve .serveList li {
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
display: flex;
|
||||
/* background-color: green; */
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.box ul li i {
|
||||
.box .serve .serveList li i {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
color: #f6783a;
|
||||
/* margin-right: 8px;
|
||||
margin-left: 8px; */
|
||||
margin: 3px 8px;
|
||||
background-color: #fee9d1;
|
||||
/* background: url(/assets/img/shoufei-dg.png) no-repeat;
|
||||
background-size: cover; */
|
||||
}
|
||||
.box ul li h4 {
|
||||
.box .serve .serveList li .serveContent {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.box .flow {
|
||||
margin: 0 20px 5px 20px;
|
||||
/* background-color: rgb(149, 238, 149); */
|
||||
}
|
||||
.box .flow h5 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.box ul li p {
|
||||
color: #6b4516;
|
||||
}
|
||||
.box1 ul li:nth-child(1),
|
||||
.box1 ul li:nth-child(9),
|
||||
.box2 ul li:nth-child(1),
|
||||
.box2 ul li:nth-child(8),
|
||||
.box3 ul li:nth-child(1),
|
||||
.box3 ul li:nth-child(6),
|
||||
.box4 ul li:nth-child(1),
|
||||
.box4 ul li:nth-child(4) {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
color: #694618;
|
||||
}
|
||||
.box1 ul li:nth-child(1) i,
|
||||
.box1 ul li:nth-child(9) i,
|
||||
.box2 ul li:nth-child(1) i,
|
||||
.box2 ul li:nth-child(8) i,
|
||||
.box3 ul li:nth-child(1) i,
|
||||
.box3 ul li:nth-child(6) i,
|
||||
.box4 ul li:nth-child(1) i,
|
||||
.box4 ul li:nth-child(4) i {
|
||||
background-color: transparent;
|
||||
display: none;
|
||||
.box .flow .flowList {
|
||||
/* background-color: skyblue; */
|
||||
margin: 5px 0 0 10px;
|
||||
}
|
||||
.box1 ul li:nth-child(10) i,
|
||||
.box1 ul li:nth-child(11) i,
|
||||
.box1 ul li:nth-child(12) i {
|
||||
background: none;
|
||||
background-color: #fee9d1;
|
||||
color: #f6783a;
|
||||
}
|
||||
|
||||
.box2 ul li:nth-child(11),
|
||||
.box2 ul li:nth-child(12),
|
||||
.box3 ul li:nth-child(9),
|
||||
.box3 ul li:nth-child(10) {
|
||||
/* background-color: pink; */
|
||||
font-weight: 300;
|
||||
.box .flow .flowList li {
|
||||
font-size: 14px;
|
||||
margin: 3px 0;
|
||||
line-height: 26px;
|
||||
display: flex;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.box2 ul li:nth-child(11),
|
||||
.box3 ul li:nth-child(9) {
|
||||
margin-top: 10px;
|
||||
.box .flow .flowList li i {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
color: #f6783a;
|
||||
margin: 3px 8px;
|
||||
background-color: #fee9d1;
|
||||
}
|
||||
.box2 ul li:nth-child(11) input[type="checkbox"],
|
||||
.box2 ul li:nth-child(12) input[type="checkbox"],
|
||||
.box3 ul li:nth-child(9) input[type="checkbox"],
|
||||
.box3 ul li:nth-child(10) input[type="checkbox"] {
|
||||
.box .flow .flowList li .flowContent {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.box .fgx {
|
||||
display: flex;
|
||||
margin: 5px 20px;
|
||||
width: 240px;
|
||||
height: 2px;
|
||||
background-color: #f9f9f9;
|
||||
/* background-color: red; */
|
||||
}
|
||||
.box .chec {
|
||||
margin: 0px 20px;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.box .chec .checList {
|
||||
margin: 0 5px;
|
||||
}
|
||||
.box .chec .checList li {
|
||||
display: flex;
|
||||
height: 26px;
|
||||
}
|
||||
.box .chec .checList li input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 4px 10px 4px 11px;
|
||||
margin: 4px 10px 4px 11px;
|
||||
}
|
||||
.box .chec .checList li p {
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
color: #6b4516;
|
||||
}
|
||||
|
||||
.box2 ul li:nth-child(10) span,
|
||||
.box3 ul li:nth-child(8) span {
|
||||
.highlight {
|
||||
color: #F7AC3B;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
top: 26px;
|
||||
background-color: rgba(255,232,192,.9);
|
||||
color: #5F3B00;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* .serveContent {
|
||||
position: relative;
|
||||
} */
|
||||
.serveList li {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.serveContent:hover +.tooltip {
|
||||
display: block;
|
||||
width: 230px;
|
||||
height: 2px;
|
||||
margin-top: 10px ;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
/* .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>
|
||||
@ -5,7 +5,7 @@
|
||||
<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>
|
||||
<title id="HTMLBT">AI秒著引擎</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
@ -58,13 +58,14 @@
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script>
|
||||
|
||||
const htmlBT = document.querySelector('#HTMLBT')
|
||||
const content = document.querySelector('#content')
|
||||
const title = document.querySelector('#title')
|
||||
axios.get('https://www.aimzhu.com/operator/app/agreementportal/getrelease/68eee8f5-33d3-4246-aeee-a33956677101').then(response => {
|
||||
// this.data = response.data;
|
||||
// this.title = response.data.title;
|
||||
// this.data = response.data.content;
|
||||
htmlBT.innerHTML = response.data.title
|
||||
title.innerHTML = response.data.title
|
||||
content.innerHTML = response.data.content
|
||||
console.log(response.data);
|
||||
|
||||
84
src/components/floatPage.html
Normal file
84
src/components/floatPage.html
Normal file
@ -0,0 +1,84 @@
|
||||
<!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 id="HTMLBT">AI秒著引擎</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
em,
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul,
|
||||
li,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 1000px;
|
||||
margin: 0 auto;
|
||||
/* border: 1px solid #333; */
|
||||
padding-top: 50px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
#title {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
|
||||
#content {
|
||||
line-height: 35px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<h2 id="title"></h2>
|
||||
<!-- <h2 id="title" v-html="title"></h2> -->
|
||||
<div id="content"></div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script>
|
||||
const htmlBT = document.querySelector('#HTMLBT')
|
||||
const content = document.querySelector('#content')
|
||||
const title = document.querySelector('#title')
|
||||
axios.get('https://www.aimzhu.com/operator/app/content/listByIdentifyingrelease/bayWindow').then(response => {
|
||||
// this.data = response.data;
|
||||
// this.title = response.data.title;
|
||||
// this.data = response.data.content;
|
||||
htmlBT.innerHTML = response.data[0].title
|
||||
title.innerHTML = response.data[0].title
|
||||
content.innerHTML = response.data[0].content
|
||||
console.log(response.data);
|
||||
// console.log(response.data.agreementType);
|
||||
// console.log(response.data.content);
|
||||
|
||||
}).catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user