修改了收费界面，添加了APP电子软著和商标注册路由（未完成）
This commit is contained in:
zhangyong
parent
bd3acb9a5a
commit
31539aeb77
105
src/components/AppDZSoftware.vue
Normal file
105
src/components/AppDZSoftware.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="appdz-software">
|
||||
<div class="box-top">
|
||||
<div class="title">
|
||||
<h4>电子版权认证联合服务平台</h4>
|
||||
<p>基于区块链技术提供电子版权认证服务</p>
|
||||
<p>为APP上架应用市场提供有效的版权证明</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom">
|
||||
<div class="box">
|
||||
<div class="box1"></div>
|
||||
<div class="box2"></div>
|
||||
<div class="box3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
border: 0px solid transparent !important ;
|
||||
}
|
||||
.appdz-software {
|
||||
position: relative;
|
||||
}
|
||||
.appdz-software .box-top {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 7.5625rem;
|
||||
background: url(/assets/img/zhengshu-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.appdz-software .box-top .title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 12.5rem;
|
||||
height: 1.875rem;
|
||||
margin: 0 auto;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
.appdz-software .box-top h4 {
|
||||
width: 6.25rem;
|
||||
font-size: .375rem;
|
||||
color: #74491a;
|
||||
margin-bottom: .125rem;
|
||||
}
|
||||
.appdz-software .box-top p {
|
||||
width: 6.25rem;
|
||||
font-size: .2rem;
|
||||
letter-spacing: .0125rem;
|
||||
color: #9a7148;
|
||||
}
|
||||
.appdz-software .box-bottom {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 13rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.appdz-software .box-bottom .box {
|
||||
/* position: absolute; */
|
||||
position: relative;
|
||||
top: -2.5rem;
|
||||
bottom: .625rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 12.5rem;
|
||||
height: 13rem;
|
||||
background-color: #FFF;
|
||||
padding: .5rem;
|
||||
-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);
|
||||
}
|
||||
.appdz-software .box-bottom .box .box1 {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: pink;
|
||||
}
|
||||
.appdz-software .box-bottom .box .box2 {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: pink;
|
||||
}
|
||||
.appdz-software .box-bottom .box .box3 {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
@ -12,6 +12,8 @@
|
||||
|
||||
<li><router-link to="/HomePage" replace @click="activateHomePage" :class="{ activeHomePage: $route.path === '/HomePage' }">首页</router-link></li>
|
||||
<li><router-link to="/ShouFei" @click="activate" :class="{ active: $route.path === '/ShouFei' }">收费介绍</router-link></li>
|
||||
<li><router-link to="/AppDZSoftware" @click="activate" :class="{ active: $route.path === '/AppDZSoftware' }">App电子软著</router-link></li>
|
||||
<li><router-link to="/TM" @click="activate" :class="{ active: $route.path === '/TM' }">商标注册</router-link></li>
|
||||
<li><router-link to="/KeFu" @click="activate" :class="{ active: $route.path === '/KeFu' }">客服中心</router-link></li>
|
||||
<li><router-link to="/ZhengShu" @click="activate" :class="{ active: $route.path === '/ZhengShu' }">证书展示</router-link></li>
|
||||
<!-- <li><router-link to="/DaiLiShang" @click="activate" :class="{ active: $route.path === '/DaiLiShang' }">代理商展示</router-link></li> -->
|
||||
|
||||
@ -12,9 +12,21 @@
|
||||
</div>
|
||||
<span class="price">￥<em>{{ item.computedPrice }}</em>
|
||||
</span>
|
||||
<div class="jianjie">
|
||||
<!-- <div class="jianjie">
|
||||
<i></i>
|
||||
{{ item.intro }}
|
||||
</div> -->
|
||||
|
||||
<div class="jianjie">
|
||||
<i></i>
|
||||
<template v-if="item.introHighlight">
|
||||
<span>{{ item.intro.slice(0, item.introHighlight.start) }}</span>
|
||||
<span class="highlight-red">{{ item.intro.slice(item.introHighlight.start, item.introHighlight.end) }}</span>
|
||||
<span>{{ item.intro.slice(item.introHighlight.end) }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ item.intro }}
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="serve">
|
||||
@ -93,23 +105,29 @@ export default {
|
||||
{chec: '加急办理800元', price: 800},
|
||||
]
|
||||
},
|
||||
{title: '写材料并委托代办', priceSum: 230, intro: '通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料，可委托平台合作代办机构进行办理。',
|
||||
{title: 'APP电子软著', priceSum: '400~460', intro: 'App软著认证电子版权是兼容软著认证证书的电子版权认证证书，在移动互联网App上架审核中可作为有效的软件版权证明材料。',
|
||||
introHighlight: {
|
||||
start: 31, // 高亮部分开始索引
|
||||
end: 43 // 高亮部分结束索引
|
||||
},
|
||||
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: '提供当天出证、1个工作日、3个工作日、10-15个工作日出证', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '提供担保下证，不下载双倍返还订单金额', highlight: '',start: '', end: '', tooltip: ''},
|
||||
{serve: '客服一对一服务', highlight: '',start: '', end: '', tooltip: ''}
|
||||
],
|
||||
flowList: [
|
||||
{id: 1, flow: '按系统操作流程执行'}
|
||||
],
|
||||
checList: [
|
||||
{chec: '加急办理800元', price: 800},
|
||||
{chec: '安装包15元', price: 15},
|
||||
{chec: '系统演示视频文件15元', price: 15},
|
||||
{chec: '', price: 800},
|
||||
{chec: '', price: 15},
|
||||
{chec: '', price: 15},
|
||||
// {chec: '加急办理800元', price: 800},
|
||||
// {chec: '安装包15元', price: 15},
|
||||
// {chec: '系统演示视频文件15元', price: 15},
|
||||
]
|
||||
},
|
||||
{title: '写材料', priceSum: '30~8', intro: '通过平台自己搭建可运行软件后由平台自动生成相关鉴别材料，下载鉴别材料后可自行申报或找相关代理机构申报。',
|
||||
@ -290,10 +308,13 @@ export default {
|
||||
.box .top .jianjie {
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
/* display: flex; */
|
||||
display: block;
|
||||
white-space: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: 1.375rem;
|
||||
/* height: 1.375rem; */
|
||||
height: 1.575rem;
|
||||
margin: 0 .25rem;
|
||||
padding: .125rem;
|
||||
border-radius: .075rem;
|
||||
@ -313,6 +334,14 @@ export default {
|
||||
border-right: .125rem solid transparent;
|
||||
border-bottom:.125rem solid #feedcc;
|
||||
}
|
||||
.box .top .jianjie span {
|
||||
display: inline;
|
||||
white-space: normal;
|
||||
}
|
||||
.highlight-red {
|
||||
color: #ff0000; /* 红色 */
|
||||
cursor: pointer;
|
||||
}
|
||||
.box .serve {
|
||||
margin: .0625rem .25rem;
|
||||
/* background-color: pink; */
|
||||
|
||||
104
src/components/TM.vue
Normal file
104
src/components/TM.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div class="tm">
|
||||
<div class="box-top">
|
||||
<div class="title">
|
||||
<h4>商标注册</h4>
|
||||
<p>1天送报商标局 一个月拿到受理通知书</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom">
|
||||
<div class="box">
|
||||
<div class="box1"></div>
|
||||
<div class="box2"></div>
|
||||
<div class="box3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
border: 0px solid transparent !important ;
|
||||
}
|
||||
.tm {
|
||||
position: relative;
|
||||
}
|
||||
.tm .box-top {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 7.5625rem;
|
||||
background: url(/assets/img/zhengshu-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.tm .box-top .title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 12.5rem;
|
||||
height: 1.875rem;
|
||||
margin: 0 auto;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
.tm .box-top h4 {
|
||||
width: 6.25rem;
|
||||
font-size: .375rem;
|
||||
color: #74491a;
|
||||
margin-bottom: .125rem;
|
||||
}
|
||||
.tm .box-top p {
|
||||
width: 6.25rem;
|
||||
font-size: .2rem;
|
||||
letter-spacing: .0625rem;
|
||||
color: #9a7148;
|
||||
}
|
||||
.tm .box-bottom {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 13rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.tm .box-bottom .box {
|
||||
/* position: absolute; */
|
||||
position: relative;
|
||||
top: -2.5rem;
|
||||
bottom: .625rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 12.5rem;
|
||||
height: 13rem;
|
||||
background-color: #FFF;
|
||||
padding: .5rem;
|
||||
-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);
|
||||
}
|
||||
.tm .box-bottom .box .box1 {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: pink;
|
||||
}
|
||||
.tm .box-bottom .box .box2 {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: pink;
|
||||
}
|
||||
.tm .box-bottom .box .box3 {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
@ -4,6 +4,8 @@ import { reactive, onMounted, onBeforeUnmount } from 'vue'
|
||||
|
||||
import HomePage from './HomePage.vue'
|
||||
import ShouFei from './ShouFei.vue'
|
||||
import AppDZSoftware from './AppDZSoftware.vue'
|
||||
import TM from './TM.vue'
|
||||
import KeFu from './KeFu.vue'
|
||||
import ZhengShu from './ZhengShu.vue'
|
||||
import DaiLiShang from './DaiLiShang.vue'
|
||||
@ -23,6 +25,8 @@ const router = createRouter({
|
||||
{ path: '/', redirect: '/HomePage' },
|
||||
{ path: '/HomePage', name: 'HomePage', component: HomePage },
|
||||
{ path: '/ShouFei', name: 'ShouFei', component: ShouFei },
|
||||
{ path: '/AppDZSoftware', name: 'AppDZSoftware', component: AppDZSoftware },
|
||||
{ path: '/TM', name: 'TM', component: TM },
|
||||
{ path: '/KeFu', name: 'KeFu', component: KeFu },
|
||||
{ path: '/ZhengShu', name: 'ZhengShu', component: ZhengShu },
|
||||
{ path: '/DaiLiShang', name: 'DaiLiShang', component: DaiLiShang },
|
||||
|
||||
Loading…
Reference in New Issue
Block a user