新增了APP电子软著、商标注册、软著交易
This commit is contained in:
zhangyong
parent
c16bb6b8fc
commit
011e561f2d
BIN
public/assets/img/tc-zwsj.png
Normal file
BIN
public/assets/img/tc-zwsj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
public/assets/img/tm-bj.png
Normal file
BIN
public/assets/img/tm-bj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 832 KiB |
BIN
public/assets/img/tm-bottom-box1-icon1.png
Normal file
BIN
public/assets/img/tm-bottom-box1-icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 315 KiB |
BIN
public/assets/img/tm-bottom-box1-icon2.png
Normal file
BIN
public/assets/img/tm-bottom-box1-icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
BIN
public/assets/img/tm-bottom-box1-icon3.png
Normal file
BIN
public/assets/img/tm-bottom-box1-icon3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 315 KiB |
BIN
public/assets/img/tm-bottom-box2-icon1.png
Normal file
BIN
public/assets/img/tm-bottom-box2-icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
public/assets/img/tm-bottom-box2-icon2.png
Normal file
BIN
public/assets/img/tm-bottom-box2-icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
public/assets/img/tm-bottom-box2-icon3.png
Normal file
BIN
public/assets/img/tm-bottom-box2-icon3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
public/assets/img/tm-bottom-box2-icon4.png
Normal file
BIN
public/assets/img/tm-bottom-box2-icon4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
public/assets/img/tm-bottom-box2-icon5.png
Normal file
BIN
public/assets/img/tm-bottom-box2-icon5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
public/assets/img/tm-bottom-box2-icon6.png
Normal file
BIN
public/assets/img/tm-bottom-box2-icon6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
BIN
public/assets/img/tm-hh.png
Normal file
BIN
public/assets/img/tm-hh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 472 B |
BIN
public/assets/img/tm-title-left.png
Normal file
BIN
public/assets/img/tm-title-left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 757 B |
BIN
public/assets/img/tm-title-right.png
Normal file
BIN
public/assets/img/tm-title-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 771 B |
BIN
public/assets/img/tm-top-icon1.png
Normal file
BIN
public/assets/img/tm-top-icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
@ -30,8 +30,8 @@
|
||||
<li>在华为、应用宝、小米、OPPO、VIVO、阿里、360、百度、荣耀、穿山甲等 App应用市场,App软著认证电子版权都可作为 App上架时的有效版权证明。</li>
|
||||
</ul>
|
||||
<span>
|
||||
<a href="#">立即申请<i>→</i></a>
|
||||
<a href="#">联系客服<i>→</i></a>
|
||||
<a href="https://www.aimzhu.com/operator/">立即申请<i>→</i></a>
|
||||
<a href="https://work.weixin.qq.com/kfid/kfc599f9d40b65ac392" target="_blank">联系客服<i>→</i></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -12,12 +12,12 @@
|
||||
|
||||
<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="/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> -->
|
||||
<!-- <li><router-link to="/TransactionCenter" @click="activate" :class="{ active: $route.path === '/TransactionCenter' }">交易中心</router-link></li> -->
|
||||
<li><router-link to="/TransactionCenter" @click="activate" :class="{ active: $route.path === '/TransactionCenter' }">交易中心</router-link></li>
|
||||
<li><router-link to="/HelpCenter" @click="activate" :class="{ active: $route.path === '/HelpCenter' }">帮助中心</router-link></li>
|
||||
<!-- <li><router-link to="/AboutUs" @click="aa()" class="acss">关于我们</router-link></li> -->
|
||||
|
||||
@ -266,6 +266,7 @@ export default {
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
width: 8.4rem;
|
||||
/* width: 9.4rem; */
|
||||
}
|
||||
.header-nav .nav ul {
|
||||
display: flex;
|
||||
|
||||
@ -2,15 +2,224 @@
|
||||
<div class="tm">
|
||||
<div class="box-top">
|
||||
<div class="title">
|
||||
<h4>商标注册</h4>
|
||||
<p>1天送报商标局 一个月拿到受理通知书</p>
|
||||
<div class="row1">
|
||||
<h4>商标注册</h4>
|
||||
<em>快速办理</em>
|
||||
</div>
|
||||
<div class="row2">
|
||||
<p>1天送报商标局 一个月拿到受理通知书</p>
|
||||
</div>
|
||||
<div class="row3">
|
||||
<span>国家商标局备案机关</span>
|
||||
<span>价格透明无隐形收费</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom">
|
||||
<div class="box">
|
||||
<div class="box1"></div>
|
||||
<div class="box2"></div>
|
||||
<div class="box3"></div>
|
||||
<div class="box1">
|
||||
<div class="toptitle">
|
||||
<div class="left"></div>
|
||||
<h5>商标注册</h5>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
<ul class="box1ul">
|
||||
<li v-for="(item, index) in box1Data" :key="index">
|
||||
<img :src="item.imgSrc" alt="">
|
||||
<h5>{{ item.title }}</h5>
|
||||
<div class="text">
|
||||
<p>{{ item.p1 }}</p>
|
||||
<p>{{ item.p2 }}</p>
|
||||
</div>
|
||||
<span>￥<em>{{ item.price }}</em></span>
|
||||
<a href="https://work.weixin.qq.com/kfid/kfc599f9d40b65ac392" target="_blank">{{ item.aTitle }}</a>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<img src="/assets/img/tm-bottom-box1-icon2.png" alt="">
|
||||
<h5>极速注册</h5>
|
||||
<div class="text">
|
||||
<p>注册不成功免费在注册一次！</p>
|
||||
<p></p>
|
||||
</div>
|
||||
<span>￥<em>1680</em></span>
|
||||
<a href="#">咨询顾问</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/assets/img/tm-bottom-box1-icon3.png" alt="">
|
||||
<h5>极速注册</h5>
|
||||
<div class="text">
|
||||
<p>商标注册成功后再收费，</p>
|
||||
<p>注册名称需要经过审核条件</p>
|
||||
</div>
|
||||
<span>￥<em>2500</em></span>
|
||||
<a href="#">咨询顾问</a>
|
||||
</li> -->
|
||||
|
||||
</ul>
|
||||
<div class="bottomtext">
|
||||
<p>先查询后注册，有效提高注册通过率</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box2">
|
||||
<div class="toptitle">
|
||||
<div class="left"></div>
|
||||
<h5>服务优势</h5>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
<ul class="box2ul">
|
||||
<li v-for="(item2, index) in box2Data" :key="index">
|
||||
<img :src="item2.imgSrc" alt="">
|
||||
<div class="icontitle">
|
||||
<em>{{ item2.title }}</em><i v-show="item2.ibg"></i>
|
||||
</div>
|
||||
<p>{{ item2.p }}</p>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<img src="/assets/img/tm-bottom-box2-icon2.png" alt="">
|
||||
<div class="icontitle">
|
||||
<em>行业内高性价比</em><i></i>
|
||||
</div>
|
||||
<p>对比行业内其他平台，服务优质，价格低廉响应及时，服务高效，对每一份订单都同等重视</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/assets/img/tm-bottom-box2-icon3.png" alt="">
|
||||
<div class="icontitle">
|
||||
<em>行业内高性价比</em><i></i>
|
||||
</div>
|
||||
<p>对比行业内其他平台，服务优质，价格低廉响应及时，服务高效，对每一份订单都同等重视</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/assets/img/tm-bottom-box2-icon4.png" alt="">
|
||||
<div class="icontitle">
|
||||
<em>行业内高性价比</em><i></i>
|
||||
</div>
|
||||
<p>对比行业内其他平台，服务优质，价格低廉响应及时，服务高效，对每一份订单都同等重视</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/assets/img/tm-bottom-box2-icon5.png" alt="">
|
||||
<div class="icontitle">
|
||||
<em>行业内高性价比</em><i></i>
|
||||
</div>
|
||||
<p>对比行业内其他平台，服务优质，价格低廉响应及时，服务高效，对每一份订单都同等重视</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/assets/img/tm-bottom-box2-icon6.png" alt="">
|
||||
<div class="icontitle">
|
||||
<em>行业内高性价比</em><i></i>
|
||||
</div>
|
||||
<p>对比行业内其他平台，服务优质，价格低廉响应及时，服务高效，对每一份订单都同等重视</p>
|
||||
</li> -->
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box3">
|
||||
<div class="toptitle">
|
||||
<div class="left"></div>
|
||||
<h5>商标注册流程</h5>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
<ul class="box3ul">
|
||||
<li v-for="(item3Top, index) in box3DataTop" :key="index">
|
||||
<em>{{ item3Top.time }}</em>
|
||||
<div class="text">
|
||||
<p>{{ item3Top.p1 }}</p>
|
||||
<p>{{ item3Top.p2 }}</p>
|
||||
</div>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<em>48小时</em>
|
||||
<p>系统智能查询人工专业查询</p>
|
||||
</li>
|
||||
<li>
|
||||
<em>48小时</em>
|
||||
<p>系统智能查询人工专业查询</p>
|
||||
</li>
|
||||
<li>
|
||||
<em>48小时</em>
|
||||
<p>系统智能查询人工专业查询</p>
|
||||
</li>
|
||||
<li>
|
||||
<em>48小时</em>
|
||||
<p>系统智能查询人工专业查询</p>
|
||||
</li>
|
||||
<li>
|
||||
<em>48小时</em>
|
||||
<p>系统智能查询人工专业查询</p>
|
||||
</li> -->
|
||||
</ul>
|
||||
<ul class="box3ul2">
|
||||
<li v-for="(item3Bottom, index) in box3DataBottom" :key="index">
|
||||
<div class="mod1">
|
||||
<span :style="{backgroundColor: item3Bottom.color}"></span>
|
||||
<em>{{ item3Bottom.number }}</em>
|
||||
<span :style="{backgroundColor: item3Bottom.color}"></span>
|
||||
</div>
|
||||
<div class="mod2">
|
||||
<div class="mod1title">{{ item3Bottom.title }}</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<div class="mod1">
|
||||
<span></span>
|
||||
<em>2</em>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="mod2">
|
||||
<div class="mod1title">提交申请</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="mod1">
|
||||
<span></span>
|
||||
<em>3</em>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="mod2">
|
||||
<div class="mod1title">提交申请</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="mod1">
|
||||
<span></span>
|
||||
<em>4</em>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="mod2">
|
||||
<div class="mod1title">提交申请</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="mod1">
|
||||
<span></span>
|
||||
<em>5</em>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="mod2">
|
||||
<div class="mod1title">提交申请</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="mod1">
|
||||
<span></span>
|
||||
<em>6</em>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="mod2">
|
||||
<div class="mod1title">提交申请</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="mod1">
|
||||
<span></span>
|
||||
<em>7</em>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="mod2">
|
||||
<div class="mod1title">提交申请</div>
|
||||
</div>
|
||||
</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -18,7 +227,143 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
box1Data: [
|
||||
{
|
||||
imgSrc: '/assets/img/tm-bottom-box1-icon1.png',
|
||||
title: '极速注册',
|
||||
p1: '一对一专属顾问，24小时专业解答',
|
||||
p2: '',
|
||||
price: '990',
|
||||
aTitle: '咨询顾问'
|
||||
},
|
||||
{
|
||||
imgSrc: '/assets/img/tm-bottom-box1-icon2.png',
|
||||
title: '双享注册',
|
||||
p1: '注册不成功免费在注册一次！',
|
||||
p2: '',
|
||||
price: '1680',
|
||||
aTitle: '咨询顾问'
|
||||
},
|
||||
{
|
||||
imgSrc: '/assets/img/tm-bottom-box1-icon3.png',
|
||||
title: '极速注册',
|
||||
p1: '商标注册成功后再收费，',
|
||||
p2: '注册名称需要经过审核条件',
|
||||
price: '2500',
|
||||
aTitle: '咨询顾问'
|
||||
},
|
||||
],
|
||||
box2Data: [
|
||||
{
|
||||
imgSrc: '/assets/img/tm-bottom-box2-icon1.png',
|
||||
title: '行业内高性价比',
|
||||
ibg: true,
|
||||
p: '对比行业内其他平台，服务优质，价格低廉响应及时，服务高效，对每一份订单都同等重视'
|
||||
},
|
||||
{
|
||||
imgSrc: '/assets/img/tm-bottom-box2-icon2.png',
|
||||
title: '多种服务供您选择',
|
||||
ibg: false,
|
||||
p: '对平台甄选专业优质服务者，可一对一进行问题解答与业务建议,满足您多元的商标需求'
|
||||
},
|
||||
{
|
||||
imgSrc: '/assets/img/tm-bottom-box2-icon3.png',
|
||||
title: '注册评估低风险',
|
||||
ibg: true,
|
||||
p: '商标注册存在驳回失败的风险，通过专属顾问风险评估，降低注册风险，提高通过率'
|
||||
},
|
||||
{
|
||||
imgSrc: '/assets/img/tm-bottom-box2-icon4.png',
|
||||
title: '流程简化注册高效',
|
||||
ibg: false,
|
||||
p: '飞淘网提供在线标准化服务，流程透明可视化，提交申请便捷高效，为用户节省大量时间'
|
||||
},
|
||||
{
|
||||
imgSrc: '/assets/img/tm-bottom-box2-icon5.png',
|
||||
title: '24小时极速申报',
|
||||
ibg: true,
|
||||
p: '飞淘网全面支持商标申请线上提交、线上跟进，高稳定对接商标局系统，24小时内极速申报'
|
||||
},
|
||||
{
|
||||
imgSrc: '/assets/img/tm-bottom-box2-icon6.png',
|
||||
title: '申报评估低风险',
|
||||
ibg: false,
|
||||
p: '飞淘网提供商标注册进度查询服务，关键流程节点短信通知，实时获取办办理进度更省心'
|
||||
},
|
||||
],
|
||||
box3DataTop: [
|
||||
{
|
||||
time: '48小时',
|
||||
p1: '系统智能查询',
|
||||
p2: '人工专业排查'
|
||||
},
|
||||
{
|
||||
time: '1天',
|
||||
p1: '申报商标局',
|
||||
p2: '',
|
||||
},
|
||||
{
|
||||
time: '1天',
|
||||
p1: '次日可查申请号',
|
||||
p2: ''
|
||||
},
|
||||
{
|
||||
time: '15天',
|
||||
p1: '形式审查通过',
|
||||
p2: '最快15天受理'
|
||||
},
|
||||
{
|
||||
time: '6-8月',
|
||||
p1: '实质审查通过',
|
||||
p2: '下发初审通告'
|
||||
},
|
||||
{
|
||||
time: '3个月',
|
||||
p1: '公告期内无异议',
|
||||
p2: '下发电子注册证'
|
||||
},
|
||||
],
|
||||
box3DataBottom: [
|
||||
{
|
||||
number: 1,
|
||||
title: '提交申请',
|
||||
color: '#ed1c24'
|
||||
},
|
||||
{
|
||||
number: 2,
|
||||
title: '支付订单',
|
||||
color: '#ed1c24'
|
||||
},
|
||||
{
|
||||
number: 3,
|
||||
title: '申请商标局',
|
||||
color: '#ed1c24'
|
||||
},
|
||||
{
|
||||
number: 4,
|
||||
title: '形式审查',
|
||||
color: '#ed1c24'
|
||||
},
|
||||
{
|
||||
number: 5,
|
||||
title: '实质审查',
|
||||
color: '#f6f6f5'
|
||||
},
|
||||
{
|
||||
number: 6,
|
||||
title: '公证期',
|
||||
color: '#f6f6f5'
|
||||
},
|
||||
{
|
||||
number: 7,
|
||||
title: '注册成功',
|
||||
color: '#f6f6f5'
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -37,68 +382,408 @@ export default {
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 7.5625rem;
|
||||
background: url(/assets/img/zhengshu-bj.png) no-repeat;
|
||||
height: 5rem;
|
||||
background: url(/assets/img/tm-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;
|
||||
justify-content: flex-end;
|
||||
width: 15rem;
|
||||
height: 2.6rem;
|
||||
margin: 0 auto;
|
||||
/* border: 2px solid red; */
|
||||
padding-left: .2rem;
|
||||
}
|
||||
.tm .box-top h4 {
|
||||
width: 6.25rem;
|
||||
font-size: .375rem;
|
||||
.tm .box-top .title .row1 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: start;
|
||||
align-content: center;
|
||||
width: 7rem;
|
||||
height: .8rem;
|
||||
/* background-color: skyblue; */
|
||||
margin-bottom: .05rem;
|
||||
}
|
||||
.tm .box-top .title .row1 h4 {
|
||||
/* height: .8rem;
|
||||
line-height: .8rem; */
|
||||
font-size: .5rem;
|
||||
color: #74491a;
|
||||
margin-bottom: .125rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.tm .box-top p {
|
||||
width: 6.25rem;
|
||||
.tm .box-top .title .row1 em {
|
||||
display: block;
|
||||
width: 1.5rem;
|
||||
height: .5rem;
|
||||
line-height: .4rem;
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
background: url(/assets/img/tm-top-icon1.png) no-repeat;
|
||||
background-size: contain;
|
||||
margin: auto 0;
|
||||
}
|
||||
.tm .box-top .title .row2 {
|
||||
width: 7rem;
|
||||
height: .4rem;
|
||||
}
|
||||
.tm .box-top .title .row2 p {
|
||||
width: 7rem;
|
||||
font-size: .2rem;
|
||||
letter-spacing: .0625rem;
|
||||
color: #9a7148;
|
||||
letter-spacing: .025rem;
|
||||
color: #603813;
|
||||
}
|
||||
.tm .box-top .title .row3 {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
width: 7rem;
|
||||
height: .7rem;
|
||||
}
|
||||
.tm .box-top .title .row3 span {
|
||||
display: block;
|
||||
width: 3rem;
|
||||
height: .7rem;
|
||||
line-height: .7rem;
|
||||
text-align: center;
|
||||
background: #603813;
|
||||
margin-right: .1rem;
|
||||
font-size: .22rem;
|
||||
color: #FFF;
|
||||
}
|
||||
.tm .box-bottom {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 13rem;
|
||||
background-color: #f5f5f5;
|
||||
height: 24rem;
|
||||
background-color: #f6f6f5;
|
||||
}
|
||||
.tm .box-bottom .box {
|
||||
/* position: absolute; */
|
||||
position: relative;
|
||||
top: -2.5rem;
|
||||
top: -0.4rem;
|
||||
bottom: .625rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 12.5rem;
|
||||
height: 13rem;
|
||||
background-color: #FFF;
|
||||
padding: .5rem;
|
||||
justify-content: start;
|
||||
width: 15rem;
|
||||
height: 23.5rem;
|
||||
background-color: #f6f6f5;
|
||||
/* border: 1px solid #333; */
|
||||
/* 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);
|
||||
box-shadow: 0 0 .125rem rgba(0,0,0,.1); */
|
||||
}
|
||||
.tm .box-bottom .box .box1 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 8.3rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.tm .box-bottom .box .box1 .toptitle {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: .8rem;
|
||||
background-color: #f6f6f5;
|
||||
}
|
||||
.tm .box-bottom .box .box1 .toptitle .left {
|
||||
width: .6375rem;
|
||||
height: .1625rem;
|
||||
background: url(/assets/img/tm-title-left.png) no-repeat;
|
||||
background-size: contain;
|
||||
margin: 0.3187rem 0;
|
||||
}
|
||||
.tm .box-bottom .box .box1 .toptitle h5 {
|
||||
height: .8rem;
|
||||
line-height: .8rem;
|
||||
font-size: .26rem;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin: auto .1rem;
|
||||
}
|
||||
.tm .box-bottom .box .box1 .toptitle .right {
|
||||
width: .6375rem;
|
||||
height: .1625rem;
|
||||
background: url(/assets/img/tm-title-right.png) no-repeat;
|
||||
background-size: contain;
|
||||
margin: 0.3187rem 0;
|
||||
}
|
||||
.tm .box-bottom .box .box1 .box1ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 7.5rem;
|
||||
background-color: #FFF;
|
||||
}
|
||||
.tm .box-bottom .box .box1 .box1ul li {
|
||||
width: 4.5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
.tm .box-bottom .box .box1 .box1ul img {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background-color: pink;
|
||||
margin: 0 .25rem;
|
||||
}
|
||||
.tm .box-bottom .box .box1 .box1ul h5 {
|
||||
width: 3.5rem;
|
||||
text-align: center;
|
||||
font-size: .25rem;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin-top: .2rem;
|
||||
}
|
||||
.tm .box-bottom .box .box1 .box1ul .text {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
margin-top: .2rem;
|
||||
width: 3.5rem;
|
||||
height: .7rem;
|
||||
font-size: .1875rem;
|
||||
color: #979797;
|
||||
}
|
||||
.tm .box-bottom .box .box1 .box1ul span {
|
||||
display: block;
|
||||
height: .5rem;
|
||||
text-align: center;
|
||||
color: #ed1c24;
|
||||
font-size: 0.1875rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.tm .box-bottom .box .box1 .box1ul span em {
|
||||
font-size: 0.250rem;
|
||||
}
|
||||
.tm .box-bottom .box .box1 .box1ul a {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
background-color: #42210b;
|
||||
color: #FFF;
|
||||
width: 1.5rem;
|
||||
height: .5rem;
|
||||
/* text-align: center; */
|
||||
border-radius: .25rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.tm .box-bottom .box .box1 .bottomtext {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: .3rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: .2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.tm .box-bottom .box .box2 {
|
||||
width: 100%;
|
||||
height: 9rem;
|
||||
background-color: #FFF;
|
||||
}
|
||||
.tm .box-bottom .box .box2 .toptitle {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: .8rem;
|
||||
background-color: #f6f6f5;
|
||||
}
|
||||
.tm .box-bottom .box .box2 .toptitle .left {
|
||||
width: .6375rem;
|
||||
height: .1625rem;
|
||||
background: url(/assets/img/tm-title-left.png) no-repeat;
|
||||
background-size: contain;
|
||||
margin: 0.3187rem 0;
|
||||
}
|
||||
.tm .box-bottom .box .box2 .toptitle h5 {
|
||||
height: .8rem;
|
||||
line-height: .8rem;
|
||||
font-size: .26rem;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin: auto .1rem;
|
||||
}
|
||||
.tm .box-bottom .box .box2 .toptitle .right {
|
||||
width: .6375rem;
|
||||
height: .1625rem;
|
||||
background: url(/assets/img/tm-title-right.png) no-repeat;
|
||||
background-size: contain;
|
||||
margin: 0.3187rem 0;
|
||||
}
|
||||
.tm .box-bottom .box .box2 .box2ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: space-between;
|
||||
width: 100%;
|
||||
height: 8rem;
|
||||
padding: .5rem;
|
||||
/* background-color: gray; */
|
||||
}
|
||||
.tm .box-bottom .box .box2 .box2ul li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 4.2rem;
|
||||
height: 3rem;
|
||||
background-color: pink;
|
||||
/* border: 1px solid pink; */
|
||||
}
|
||||
.tm .box-bottom .box .box2 .box2ul li img {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin: 0 1.35rem;
|
||||
}
|
||||
.tm .box-bottom .box .box2 .box2ul li .icontitle {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: .5rem;
|
||||
}
|
||||
.tm .box-bottom .box .box2 .box2ul li .icontitle em {
|
||||
font-size: .225rem;
|
||||
margin-right: 0.05rem;
|
||||
color: #000000;
|
||||
}
|
||||
.tm .box-bottom .box .box2 .box2ul li .icontitle i {
|
||||
width: .2rem;
|
||||
height: .2rem;
|
||||
background: url(/assets/img/tm-hh.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.tm .box-bottom .box .box2 .box2ul li p {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: .2rem;
|
||||
color: #3e3e3e;
|
||||
}
|
||||
.tm .box-bottom .box .box3 {
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
background-color: #FFF;
|
||||
}
|
||||
.tm .box-bottom .box .box3 .toptitle {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: .8rem;
|
||||
background-color: #f6f6f5;
|
||||
}
|
||||
.tm .box-bottom .box .box3 .toptitle .left {
|
||||
width: .6375rem;
|
||||
height: .1625rem;
|
||||
background: url(/assets/img/tm-title-left.png) no-repeat;
|
||||
background-size: contain;
|
||||
margin: 0.3187rem 0;
|
||||
}
|
||||
.tm .box-bottom .box .box3 .toptitle h5 {
|
||||
height: .8rem;
|
||||
line-height: .8rem;
|
||||
font-size: .26rem;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin: auto .1rem;
|
||||
}
|
||||
.tm .box-bottom .box .box3 .toptitle .right {
|
||||
width: .6375rem;
|
||||
height: .1625rem;
|
||||
background: url(/assets/img/tm-title-right.png) no-repeat;
|
||||
background-size: contain;
|
||||
margin: 0.3187rem 0;
|
||||
}
|
||||
.tm .box-bottom .box .box3 .box3ul {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: pink;
|
||||
padding: .5rem 1.4375rem;
|
||||
}
|
||||
.tm .box-bottom .box .box3 .box3ul li {
|
||||
/* width: 1.125rem; */
|
||||
width: 1.25rem;
|
||||
}
|
||||
.tm .box-bottom .box .box3 .box3ul li em {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
margin: 0 0.0625rem;
|
||||
border-radius: 0.625rem;
|
||||
background-color: #ed1c24;
|
||||
color: #FFF;
|
||||
font-size: .25rem;
|
||||
margin-bottom: .15rem;
|
||||
}
|
||||
.tm .box-bottom .box .box3 .box3ul li .text {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
.tm .box-bottom .box .box3 .box3ul li p {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
font-size: .175rem;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
.tm .box-bottom .box .box3 .box3ul2 {
|
||||
display: flex;
|
||||
/* flex-wrap: wrap; */
|
||||
justify-content: start;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 .15rem;
|
||||
}
|
||||
.tm .box-bottom .box .box3 .box3ul2 li {
|
||||
width: 2.1rem;
|
||||
box-sizing: inherit !important;
|
||||
}
|
||||
.tm .box-bottom .box .box3 .box3ul2 li .mod1 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
.tm .box-bottom .box .box3 .box3ul2 li .mod1 span {
|
||||
display: block;
|
||||
width: .7875rem;
|
||||
height: .025rem;
|
||||
margin: auto;
|
||||
background: #ed1c24;
|
||||
}
|
||||
.tm .box-bottom .box .box3 .box3ul2 li .mod1 em {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
border-radius: .25rem;
|
||||
border: 0.0125rem solid #ed1c24;
|
||||
}
|
||||
.tm .box-bottom .box .box3 .box3ul2 li .mod2 {
|
||||
width: 2.1rem;
|
||||
height: .8rem;
|
||||
line-height: .8rem;
|
||||
font-size: .25rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
853
src/components/TransactionCenter copy.vue
Normal file
853
src/components/TransactionCenter copy.vue
Normal file
@ -0,0 +1,853 @@
|
||||
<template>
|
||||
<div class="transaction-center">
|
||||
<div class="box-top">
|
||||
<div class="ys"></div>
|
||||
<div class="bj"></div>
|
||||
</div>
|
||||
<div class="box-bottom">
|
||||
<div class="center">
|
||||
<div class="box1">
|
||||
<div class="title">
|
||||
<span class="mod1 active" @click="selectModule('mod1')">软著交易中心</span>
|
||||
<span class="mod2" @click="selectModule('mod2')">今日特价软著</span>
|
||||
</div>
|
||||
<div class="content1" v-if="currentModule === 'mod1'">
|
||||
<div class="row1">
|
||||
<em>著作权分类：</em>
|
||||
<div class="sort-buttons">
|
||||
<button
|
||||
v-for="(sort, index) in visibleSorts"
|
||||
:key="index"
|
||||
class="sort-button"
|
||||
:class="{ 'selected': selectedSortID === sort.dataId }"
|
||||
@click="selectSort(sort)"
|
||||
>
|
||||
{{ sort.dataName }}
|
||||
</button>
|
||||
<button v-if="hasMoreSorts" class="more-button" @click="showMore1 = true">
|
||||
更多+
|
||||
</button>
|
||||
<div v-if="showMore1" class="popup1">
|
||||
<button
|
||||
v-for="(sort, index) in hiddenSorts"
|
||||
:key="index"
|
||||
class="sort-button"
|
||||
:class="{ 'selected': selectedSort === sort }" @click="selectSort(sort)"
|
||||
>
|
||||
{{ sort }}
|
||||
</button>
|
||||
<button class="close-button" @click="showMore1 = false">关闭</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- <div class="row2">
|
||||
<em>开发语言：</em>
|
||||
<div class="language-buttons">
|
||||
<button
|
||||
v-for="(language, index) in visibleLanguages"
|
||||
:key="index"
|
||||
class="language-button"
|
||||
:class="{ 'selected': selectedLanguage === language }"
|
||||
@click="selectLanguage(language)"
|
||||
>
|
||||
{{ language }}
|
||||
</button>
|
||||
<button v-if="hasMoreLanguages" class="more-button" @click="showMore = true">
|
||||
更多+
|
||||
</button>
|
||||
<div v-if="showMore" class="popup">
|
||||
<button
|
||||
v-for="(language, index) in hiddenLanguages"
|
||||
:key="index"
|
||||
class="language-button"
|
||||
:class="{ 'selected': selectedLanguage === language }"
|
||||
@click="selectLanguage(language)"
|
||||
>
|
||||
{{ language }}
|
||||
</button>
|
||||
<button class="close-button" @click="showMore = false">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="row3">
|
||||
<span>
|
||||
<em>软著名称：</em>
|
||||
<input type="text" placeholder="请输入软著名称" v-model="searchName">
|
||||
</span>
|
||||
<span>
|
||||
<em>下证时间：</em>
|
||||
<!-- <input type="date" v-model="startDate" placeholder="请选则开始日期"> -->
|
||||
<el-date-picker
|
||||
style="height: 40px; width: 150px;"
|
||||
v-model="startDate"
|
||||
id="startDate"
|
||||
type="date"
|
||||
placeholder="选择开始日期"
|
||||
:picker-options="startPickerOptions"
|
||||
@change="handleStartDateChange">
|
||||
</el-date-picker>
|
||||
 
|
||||
<!-- <input type="date" v-model="endDate"> -->
|
||||
<el-date-picker
|
||||
style="height: 40px; width: 150px;"
|
||||
v-model="endDate"
|
||||
type="date"
|
||||
placeholder="选择截止日期"
|
||||
:picker-options="endPickerOptions"
|
||||
@change="handleEndDateChange">
|
||||
</el-date-picker>
|
||||
</span>
|
||||
<button class="search" @click="search()">立即搜索</button>
|
||||
<button class="reset" @click="resetAll()">重置全部搜索条件</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content2" v-if="currentModule === 'mod2'">
|
||||
<div class="bj">
|
||||
<div class="left">
|
||||
<div class="headline">
|
||||
<h3>AI著作权名称</h3>
|
||||
<em>医药类</em>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p>著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述著作权描述</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<p><em>￥</em><i>298.00</i>/件</p>
|
||||
<a href="https://www.aimzhu.com/operator/">立即抢购</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box2">
|
||||
<p class="content11" v-if="currentModule === 'mod1'">共有<em>2023445</em>个搜索结果</p>
|
||||
<p class="content22" v-if="currentModule === 'mod2'">今日共有<em>10</em>个特价软著</p>
|
||||
</div>
|
||||
<div class="box3">
|
||||
<div class="content111" v-if="currentModule === 'mod1'">
|
||||
<el-table
|
||||
class="table"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{ textAlign: 'center' }"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
>
|
||||
<el-table-column prop="序号" label="序号" width="100" />
|
||||
<el-table-column prop="软著名称" label="软著名称" width="300" />
|
||||
<el-table-column prop="价格" label="价格" />
|
||||
<el-table-column prop="所属行业" label="所属行业" />
|
||||
<el-table-column prop="下证日期" label="下证日期" />
|
||||
<el-table-column prop="发布日期" label="发布日期" />
|
||||
<el-table-column prop="距离下架" label="距离下架" />
|
||||
</el-table>
|
||||
|
||||
<a class="goBuy" href="https://www.aimzhu.com/operator/">去购买</a>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
<!-- 今日特价软著 -->
|
||||
<div class="content222" v-if="currentModule === 'mod2'">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{ textAlign: 'center' }"
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
>
|
||||
<el-table-column prop="序号" label="序号" width="100" />
|
||||
<el-table-column prop="软著名称" label="软著名称" width="300" />
|
||||
<el-table-column prop="价格" label="价格" />
|
||||
<el-table-column prop="所属行业" label="所属行业" />
|
||||
<el-table-column prop="下证日期" label="下证日期" />
|
||||
<el-table-column prop="发布日期" label="发布日期" />
|
||||
<el-table-column prop="距离下架" label="距离下架" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { Button } from 'vue-amazing-ui'
|
||||
// import 'vue-amazing-ui/css'
|
||||
// import { ElButton, ElInput } from 'element-plus'
|
||||
import { ElTable, ElTableColumn, ElPagination } from 'element-plus';
|
||||
import { ElDatePicker } from 'element-plus';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
import { ref } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { layer } from "vue3-layer"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
ElPagination,
|
||||
ElDatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentModule: 'mod1', // 初始模块为 mod1
|
||||
|
||||
sorts: [], // 动态加载的分类数据
|
||||
selectedSortId: '', // 选中分类的ID
|
||||
selectedSortName: '全部', // 选中分类的名称，用于显示
|
||||
maxVisible1: 9,
|
||||
showMore1: false,
|
||||
selectedSort: '全部',
|
||||
|
||||
languages: [
|
||||
'Java', 'C语言', 'C++', 'JavaScript', 'Python', '安卓', '鸿蒙HarmonyOS4.0', 'HTML', 'CSS',
|
||||
],
|
||||
maxVisible: 8, // 最大可见按钮数量
|
||||
showMore: false, // 控制弹出层的显示
|
||||
selectedLanguage: 'Java', // 选中的省份
|
||||
|
||||
searchName: '', // 软著名称
|
||||
startDate: '', // 下证开始时间
|
||||
endDate: '', // 下证结束时间
|
||||
// startDateString: '',
|
||||
// endDateString: '',
|
||||
startDateString: new Date().toISOString().split('T')[0],
|
||||
// endDateString: new Date().toISOString().split('T')[0],
|
||||
endDateString: new Date(new Date().setMonth(new Date().getMonth() + 1)).toISOString().split('T')[0], // 设置一个月之后的日期作为默认值
|
||||
// endDateString: format(new Date(new Date().getTime() + 10 * 24 * 60 * 60 * 1000), 'yyyy-MM-dd'), // 设置10天之后的日期作为默认值
|
||||
|
||||
startPickerOptions: {
|
||||
disabledDate: (time) => {
|
||||
if (this.endDateString) {
|
||||
return time.getTime() > this.endDateString.getTime();
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
endPickerOptions: {
|
||||
disabledDate: (time) => {
|
||||
if (this.startDateString) {
|
||||
return time.getTime() < this.startDateString.getTime();
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
|
||||
tableData: [], // 表格数据
|
||||
currentPage: 1, // 当前页码
|
||||
pageSize: 10, // 每页显示条数
|
||||
total: 0, // 总数据条数
|
||||
|
||||
pickerOptions: {
|
||||
style: {
|
||||
border: '1px solid red'
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
visibleSorts() {
|
||||
return this.sorts.slice(0, this.maxVisible1);
|
||||
},
|
||||
hiddenSorts() {
|
||||
return this.sorts.slice(this.maxVisible1);
|
||||
},
|
||||
hasMoreSorts() {
|
||||
return this.sorts.length > this.maxVisible1;
|
||||
},
|
||||
|
||||
visibleLanguages() {
|
||||
return this.languages.slice(0, this.maxVisible);
|
||||
},
|
||||
hiddenLanguages() {
|
||||
return this.languages.slice(this.maxVisible);
|
||||
},
|
||||
hasMoreLanguages() {
|
||||
return this.languages.length > this.maxVisible;
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 加载著作权分类数据
|
||||
loadSortData() {
|
||||
axios.get('http://192.168.0.115:8081/aishop/app/data/listbyparentidrelease/0b00884a-f7a2-425f-93e5-599fbaad4bde')
|
||||
.then(response => {
|
||||
// 处理分类数据，添加"全部"选项
|
||||
this.sorts = [
|
||||
{
|
||||
dataId: '',
|
||||
dataName: '全部'
|
||||
},
|
||||
...response.data
|
||||
];
|
||||
// 默认选中"全部"
|
||||
this.selectedSortId = '';
|
||||
this.selectedSortName = '全部';
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('加载分类数据失败:', error);
|
||||
this.$message.error('加载著作权分类失败！');
|
||||
|
||||
// 加载失败时使用默认分类
|
||||
this.sorts = [
|
||||
{ dataId: '', dataName: '全部' },
|
||||
{ dataId: '1', dataName: '医药类' },
|
||||
{ dataId: '2', dataName: '教育类' },
|
||||
{ dataId: '3', dataName: '工业类' }
|
||||
];
|
||||
this.selectedSortId = '';
|
||||
this.selectedSortName = '全部';
|
||||
});
|
||||
},
|
||||
selectModule(module) {
|
||||
this.currentModule = module;
|
||||
|
||||
const mod1 = document.querySelector('.mod1')
|
||||
const mod2 = document.querySelector('.mod2')
|
||||
// 根据当前模块切换内容
|
||||
const content1 = '.content1';
|
||||
const content2 = '.content2';
|
||||
const content11 = '.content11';
|
||||
const content22 = '.content22';
|
||||
const content111 = '.content111';
|
||||
const content222 = '.content222';
|
||||
if (this.currentModule === 'mod1') {
|
||||
// 软著交易中心激活
|
||||
$(mod1).addClass('active').siblings().removeClass('active')
|
||||
$(content1).show();
|
||||
$(content11).show();
|
||||
$(content111).show();
|
||||
$(content2).hide();
|
||||
$(content22).hide();
|
||||
$(content222).hide();
|
||||
} else if (this.currentModule === 'mod2') {
|
||||
// 今日特价软著激活
|
||||
$(mod2).addClass('active').siblings().removeClass('active')
|
||||
$(content1).hide();
|
||||
$(content11).hide();
|
||||
$(content111).hide();
|
||||
$(content2).show();
|
||||
$(content22).show();
|
||||
$(content222).show();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
selectSort(sort) {
|
||||
this.selectedSortId = sort.dataId;
|
||||
this.selectedSortName = sort.dataName;
|
||||
this.showMore1 = false; // 选择省份后关闭弹出层
|
||||
// 这里可以执行其他逻辑，例如通知父组件
|
||||
},
|
||||
|
||||
selectLanguage(language) {
|
||||
this.selectedLanguage = language;
|
||||
this.showMore = false; // 选择省份后关闭弹出层
|
||||
// 这里可以执行其他逻辑，例如通知父组件
|
||||
},
|
||||
handleStartDateChange(value) {
|
||||
// if (!value) {
|
||||
// value = new Date(); // 设置当前日期作为默认值
|
||||
// // this.startDateString = format(value, 'yyyy-MM-dd');
|
||||
// }
|
||||
if (value) {
|
||||
this.startDateString = format(value, 'yyyy-MM-dd');
|
||||
|
||||
// // 如果开始日期大于截止日期，重置截止日期为开始日期之前的一天
|
||||
// if (this.startDateString && value.getTime() > this.endDateString.getTime()) {
|
||||
// this.endDateString = new Date(value.getTime() - 24 * 60 * 60 * 1000); // 减一天
|
||||
// this.endDateString = format(this.endDateString, 'yyyy-MM-dd');
|
||||
// }
|
||||
}
|
||||
},
|
||||
handleEndDateChange(value) {
|
||||
// if (!value) {
|
||||
// value = new Date(); // 设置当前日期作为默认值
|
||||
// // this.endDateString = format(value, 'yyyy-MM-dd');
|
||||
// }
|
||||
if (value) {
|
||||
this.endDateString = format(value, 'yyyy-MM-dd');
|
||||
}
|
||||
},
|
||||
formatDate(date) {
|
||||
if (date) {
|
||||
return format(date, 'yyyy-MM-dd');
|
||||
}
|
||||
return '';
|
||||
},
|
||||
|
||||
search() {
|
||||
if (this.startDateString && this.endDateString) {
|
||||
const startTime = new Date(this.startDateString).getTime();
|
||||
const endTime = new Date(this.endDateString).getTime();
|
||||
|
||||
console.log('开始日期:', this.startDateString);
|
||||
console.log('结束日期:', this.endDateString);
|
||||
|
||||
if (startTime >= endTime) {
|
||||
this.$message.error('开始日期必须早于截止日期，请重新选择日期！');
|
||||
layer.tips('开始日期必须早于截止日期，请重新选择日期！', '#startDate',{
|
||||
shadeClose: false,
|
||||
tips: [3, 'red'],
|
||||
time: 2000,
|
||||
area: ['auto', '40px'],
|
||||
show: true
|
||||
})
|
||||
// layer.msg('开始日期必须早于截止日期，请重新选择日期！',{
|
||||
// icon: 2,
|
||||
// time: 2000,
|
||||
// })
|
||||
return;
|
||||
}
|
||||
|
||||
const params = {
|
||||
softwareName: this.searchName,
|
||||
// startDate: this.startDate,
|
||||
startDate: this.startDateString,
|
||||
endDate: this.endDateString,
|
||||
sortId: this.selectedSortId, // 传递分类ID
|
||||
Language: this.selectedLanguage
|
||||
};
|
||||
// 使用 axios 发送请求
|
||||
axios.post('/api/search', params)
|
||||
.then(response => {
|
||||
// 处理响应数据
|
||||
console.log(response.data);
|
||||
})
|
||||
.catch(error => {
|
||||
// 处理错误
|
||||
console.error('Error:', error);
|
||||
})
|
||||
.finally(() => {
|
||||
// 无论成功或失败，都会执行
|
||||
console.log('Search request completed.');
|
||||
});
|
||||
// 在这里打印请求的 data，以便在控制台查看
|
||||
console.log('Search request data:', params);
|
||||
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
resetAll() {
|
||||
this.selectedSort = '全部';
|
||||
this.selectedLanguage = 'Java';
|
||||
this.searchName = '';
|
||||
this.startDate = '';
|
||||
this.endDate = '';
|
||||
this.startDateString = new Date().toISOString().split('T')[0]; // 重置开始日期为当前日期
|
||||
this.endDateString = new Date(new Date().setMonth(new Date().getMonth() + 1)).toISOString().split('T')[0]; // 重置结束日期为一个月之后的日期
|
||||
},
|
||||
|
||||
// getDataTJRZ() {
|
||||
// axios.get(`http://192.168.0.115:8081/aishop/api/goodsonline/listpagerelease?priceOrder=DESC&goodsFlag=特价`)
|
||||
// .then(response => {
|
||||
// console.log(response.data)
|
||||
// })
|
||||
// }
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.loadSortData(); // 加载分类数据
|
||||
// this.loadNormalSoftwares(); // 加载软著数据
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.transaction-center {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.transaction-center .box-top {
|
||||
/* padding-top: 80px; */
|
||||
width: 100%;
|
||||
height: 4.75rem;
|
||||
|
||||
}
|
||||
.transaction-center .box-top .ys {
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
}
|
||||
.transaction-center .box-top .bj {
|
||||
width: 100%;
|
||||
height: 3.75rem;
|
||||
background: url(/assets/img/transactioncenter-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.transaction-center .box-bottom {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
/* height: 500px; */
|
||||
}
|
||||
.transaction-center .box-bottom .center {
|
||||
margin: -2.25rem auto .625rem auto;
|
||||
width: 15rem;
|
||||
/* height: 800px; */
|
||||
/* border: 1px solid red; */
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.center .box1 {
|
||||
width: 100%;
|
||||
height: 3.45rem;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 .1875rem rgba(0,0,0,.1);
|
||||
}
|
||||
.center .box1 .title {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: .625rem;
|
||||
background-color: #f5f5f5;
|
||||
border-bottom: .0063rem solid #ebeef5;
|
||||
}
|
||||
.center .box1 .title span {
|
||||
display: block;
|
||||
width: 2.5rem;
|
||||
height: .625rem;
|
||||
line-height: .625rem;
|
||||
text-align: center;
|
||||
font-size: .2rem;
|
||||
background-color: #fafafa;
|
||||
border-right: .0125rem solid #ebeef5;
|
||||
border-bottom: .0125rem solid #ebeef5;
|
||||
}
|
||||
.center .box1 .title span:hover {
|
||||
cursor: pointer;
|
||||
background-color: #e86f12;
|
||||
color: #FFF;
|
||||
}
|
||||
.center .box1 .title span.active {
|
||||
color: #FFF;
|
||||
background-color: #e86f12;
|
||||
|
||||
}
|
||||
.center .box1 .content1 {
|
||||
width: 15rem;
|
||||
height: 2.825rem;
|
||||
padding: .125rem;
|
||||
}
|
||||
/* .center .box1 .content1 .row2 .cssys {
|
||||
border: 1px solid #dcdfe6;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.radio-button {
|
||||
appearance: none;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: #f0f0f0;
|
||||
cursor: pointer;
|
||||
} */
|
||||
.center .box1 .content1 .row1,
|
||||
.center .box1 .content1 .row2,
|
||||
.center .box1 .content1 .row3 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: .5rem;
|
||||
margin: .25rem .125rem;
|
||||
}
|
||||
.center .box1 .content1 .row3 span {
|
||||
display: flex;
|
||||
margin-right: .1875rem;
|
||||
}
|
||||
.center .box1 .content1 .row3 span input {
|
||||
border: .0125rem solid #CCC;
|
||||
border-radius: .05rem;
|
||||
color: #606266;
|
||||
}
|
||||
input::-webkit-input-placeholder {
|
||||
color: #a8abb2;
|
||||
}
|
||||
.center .box1 .content1 .row3 span input:focus,
|
||||
.center .box1 .content1 .row3 span input:hover {
|
||||
border: .0125rem solid #409eff;
|
||||
}
|
||||
/* .el-input {
|
||||
--el-input-focus-border: 1px solid #e86f12;
|
||||
} */
|
||||
/* .el-date-editor.is-active,
|
||||
.el-date-editor.is-active:hover,
|
||||
.el-date-editor.is-active:focus {
|
||||
border-color: #e86f12;
|
||||
outline: 0;
|
||||
}
|
||||
:deep(.el-date-editor.is-active) {
|
||||
border-color: #e86f12;
|
||||
outline: 0;
|
||||
} */
|
||||
|
||||
.center .box1 .content1 .row3 span input[type=text] {
|
||||
font-size: .1875rem;
|
||||
padding-left: .125rem;
|
||||
}
|
||||
.center .box1 .content1 .row3 span input[type=date] {
|
||||
width: 1.875rem;
|
||||
font-size: .1875rem;
|
||||
}
|
||||
.center .box1 .content1 .row3 span input[type=date]:hover,
|
||||
.center .box1 .content1 .row3 span input[type=date]:focus {
|
||||
border: .0125rem solid #CCC;
|
||||
}
|
||||
|
||||
/* .center .box1 .content1 .row3 span .startDate {
|
||||
height: 40px;
|
||||
} */
|
||||
/* .el-input{
|
||||
--el-input-focus-border-color:'red'
|
||||
} */
|
||||
/* .custom-date-picker .el-input__inner {
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
border: 2px solid red;
|
||||
} */
|
||||
.center .box1 .content1 .row3 button{
|
||||
height: .5rem;
|
||||
padding: .075rem .375rem;
|
||||
/* margin-left: 30px; */
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.center .box1 .content1 .row3 .search {
|
||||
position: absolute;
|
||||
right: 2.5rem;
|
||||
background-color: #552c0e;
|
||||
color: #FFF;
|
||||
|
||||
}
|
||||
.center .box1 .content1 .row3 .reset{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 2.25rem;
|
||||
}
|
||||
.center .box1 .content1 .row1 em,
|
||||
.center .box1 .content1 .row2 em,
|
||||
.center .box1 .content1 .row3 em {
|
||||
padding: .075rem .0625rem;
|
||||
width: 1.375rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.sort-buttons,
|
||||
.language-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .125rem; /* 按钮之间的间隔 */
|
||||
}
|
||||
.sort-button,
|
||||
.language-button {
|
||||
padding: .075rem .375rem;
|
||||
/* border: 1px solid #ccc; */
|
||||
border: none;
|
||||
border-radius: .05rem;
|
||||
background-color: #ffeedc;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
.sort-button.selected,
|
||||
.language-button.selected {
|
||||
background-color: #fa7c38;
|
||||
/* background: linear-gradient(to right,#ffbd52,#e86f12); */
|
||||
color: white; /* 白色文字 */
|
||||
}
|
||||
.sort-button:hover,
|
||||
.language-button:hover {
|
||||
background-color: #fa7c38;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.more-button {
|
||||
padding: .1rem .15rem;
|
||||
border: .0125rem solid #ccc;
|
||||
border-radius: .05rem;
|
||||
background-color: #f9f9f9;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
.popup1 {
|
||||
position: absolute;
|
||||
top: .5625rem;
|
||||
width: 13.125rem;
|
||||
/* max-width: 1050px; */
|
||||
background-color: white;
|
||||
border: .0125rem solid #ccc;
|
||||
padding: .125rem;
|
||||
display: flex;
|
||||
/* flex-direction: column; */
|
||||
flex-wrap: wrap;
|
||||
gap: .125rem;
|
||||
box-shadow: 0 .025rem .05rem rgba(0, 0, 0, 0.2);
|
||||
z-index: 10;
|
||||
}
|
||||
.popup {
|
||||
position: absolute;
|
||||
top: .5625rem;
|
||||
width: 13.125rem;
|
||||
background-color: white;
|
||||
border: .0125rem solid #ccc;
|
||||
padding: .125rem;
|
||||
display: flex;
|
||||
/* flex-direction: column; */
|
||||
flex-wrap: wrap;
|
||||
gap: .125rem;
|
||||
box-shadow: 0 .025rem .05rem rgba(0, 0, 0, 0.2);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
padding: .1rem .15rem;
|
||||
border: .0125rem solid #ccc;
|
||||
border-radius: .05rem;
|
||||
background-color: #f9f9f9;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.center .box1 .content2 {
|
||||
width: 15rem;
|
||||
height: 2.825rem;
|
||||
padding: .125rem;
|
||||
}
|
||||
.center .box1 .content2 .bj {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(/assets/img/box-bj.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.center .box1 .content2 .bj .left {
|
||||
display: felx;
|
||||
flex-direction: column;
|
||||
width: 4.5rem;
|
||||
height: 2rem;
|
||||
margin: .25rem .5rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.center .box1 .content2 .bj .left .headline {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.center .box1 .content2 .bj .left .headline h3 {
|
||||
height: .625rem;
|
||||
line-height: .625rem;
|
||||
margin: .1875rem 0;
|
||||
color: #e79855;
|
||||
font-size: .35rem;
|
||||
font-weight: 700;
|
||||
margin-right: .25rem;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
.center .box1 .content2 .bj .left .headline em {
|
||||
height: .45rem;
|
||||
line-height: .45rem;
|
||||
padding: 0 .25rem;
|
||||
margin: .275rem 0;
|
||||
font-size: .1875rem;
|
||||
color: #FFF;
|
||||
background-color: #fa9641;
|
||||
border-top-left-radius: .225rem;
|
||||
border-bottom-left-radius: .225rem;
|
||||
border-top-right-radius: .2rem;
|
||||
}
|
||||
.center .box1 .content2 .bj .left .text p {
|
||||
font-size: .1875rem;
|
||||
line-height: .3125rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.center .box1 .content2 .bj .right {
|
||||
width: 3.25rem;
|
||||
height: 1.875rem;
|
||||
margin: .3125rem .75rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.center .box1 .content2 .bj .right p {
|
||||
font-size: .25rem;
|
||||
text-align: center;
|
||||
margin-top: .375rem;
|
||||
}
|
||||
.center .box1 .content2 .bj .right p em {
|
||||
color: #e89954;
|
||||
}
|
||||
.center .box1 .content2 .bj .right p i {
|
||||
font-size: .35rem;
|
||||
color: #e89954;
|
||||
}
|
||||
.center .box1 .content2 .bj .right a{
|
||||
display: block;
|
||||
width: 1.875rem;
|
||||
height: .5rem;
|
||||
line-height: .5rem;
|
||||
text-align: center;
|
||||
margin: .125rem .6875rem;
|
||||
border: none;
|
||||
font-size: .175rem;
|
||||
color: #FFF;
|
||||
background-color: #552c0e;
|
||||
}
|
||||
.center .box1 .content2 .bj .right a:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.center .box2 {
|
||||
margin: .1875rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.center .box2 p {
|
||||
font-size: .2rem;
|
||||
}
|
||||
.center .box2 p em {
|
||||
color: #3fa1d3;
|
||||
}
|
||||
.center .box3 .content111 {
|
||||
position: relative;
|
||||
margin-bottom: .375rem;
|
||||
}
|
||||
.center .box3 .content111 .table {
|
||||
margin-bottom: .625rem;
|
||||
}
|
||||
.center .box3 .content111 .goBuy {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: .1rem .15rem;
|
||||
border: none;
|
||||
background-color: #fa7c38;
|
||||
color: #FFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
.center .box3 .content111 .pagination {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
margin-right: .375rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user