579 lines
14 KiB
Vue
579 lines
14 KiB
Vue
<template>
|
||
<div class="shou-fei">
|
||
<div class="box-top">
|
||
<h4>选择最适合自己的服务</h4>
|
||
<p>灵活搭建更高效的著作权办理平台</p>
|
||
</div>
|
||
<div class="box-bottom">
|
||
<div class="box box1">
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
|
||
<script>
|
||
// import axios from 'axios'
|
||
export default {
|
||
data() {
|
||
return {
|
||
basePrice1: 500,
|
||
basePrice21: 300,
|
||
basePrice22: 1000,
|
||
additionalOptions2: {
|
||
chec1: false,
|
||
chec2: false,
|
||
},
|
||
basePrice3: 180,
|
||
additionalOptions3: {
|
||
chec3: false,
|
||
chec4: false,
|
||
},
|
||
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
// 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);
|
||
// }
|
||
|
||
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;
|
||
},
|
||
|
||
},
|
||
// 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;
|
||
// }
|
||
},
|
||
|
||
|
||
}
|
||
</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: 1100px;
|
||
}
|
||
.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: 300px;
|
||
left: 50%;
|
||
transform: translate(-50%, 0);
|
||
display: flex;
|
||
justify-content: space-around;
|
||
width: 1200px;
|
||
height: 700px;
|
||
/* border: 1px solid red; */
|
||
|
||
}
|
||
.shou-fei .box-bottom .box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 280px;
|
||
height: 660px;
|
||
padding: 20px 15px;
|
||
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: 250px;
|
||
height: 200px;
|
||
/* border: 1px solid red; */
|
||
}
|
||
.box .top h4 {
|
||
width: 200px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
font-size: 26px;
|
||
color: #5e3603;
|
||
margin-top: 25px;
|
||
margin-left: 25px;
|
||
margin-bottom: 20px;
|
||
/* background-color: pink; */
|
||
}
|
||
.box .top span {
|
||
width: 150px;
|
||
height: 50px;
|
||
font-size: 18px;
|
||
letter-spacing: 2px;
|
||
text-align: center;
|
||
margin-left: 50px;
|
||
/* margin-bottom: 20px; */
|
||
color: #f77333;
|
||
/* background-color: skyblue; */
|
||
}
|
||
.box .top span 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 {
|
||
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 10px;
|
||
/* 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 {
|
||
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;
|
||
}
|
||
.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;
|
||
font-size: 14px;
|
||
margin: 3px 0;
|
||
}
|
||
.box2 ul li:nth-child(11),
|
||
.box3 ul li:nth-child(9) {
|
||
margin-top: 10px;
|
||
}
|
||
.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"] {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin: 4px 10px 4px 11px;
|
||
}
|
||
|
||
.box2 ul li:nth-child(10) span,
|
||
.box3 ul li:nth-child(8) span {
|
||
display: block;
|
||
width: 230px;
|
||
height: 2px;
|
||
margin-top: 10px ;
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
|
||
</style> |