Commit 0815379d by 尹亚亭

bycniticeindex

parent 19bf577d
/* 改变主题色变量 */ /* 改变主题色变量 */
$--color-primary: red; // $--color-primary: red;
$--color-primary: #108ee9;
/* 改变 icon 字体路径变量,必需 */ /* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts'; $--font-path: '~element-ui/lib/theme-chalk/fonts';
// 自定义主题色变量 // 自定义主题色变量
$themecolor:red; // $themecolor:red;
$themecolor:#108ee9;
@import "~element-ui/packages/theme-chalk/src/index"; @import "~element-ui/packages/theme-chalk/src/index";
\ No newline at end of file
...@@ -3,6 +3,7 @@ import VueRouter from 'vue-router' ...@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
import Home from '../views/pages/Home' import Home from '../views/pages/Home'
import Jdtrademark from '../views/pages/jdtrademark/Jdtrademark' import Jdtrademark from '../views/pages/jdtrademark/Jdtrademark'
import Selftmreg from '../views/pages/selftmreg/Selftmreg' import Selftmreg from '../views/pages/selftmreg/Selftmreg'
import Bycnoticeindex from '../views/pages/bycnoticeindex/Bycnoticeindex'
Vue.use(VueRouter) Vue.use(VueRouter)
const routes = [ const routes = [
...@@ -20,6 +21,11 @@ const routes = [ ...@@ -20,6 +21,11 @@ const routes = [
path: '/selftmreg', path: '/selftmreg',
name: 'selftmreg', name: 'selftmreg',
component: Selftmreg component: Selftmreg
},
{
path: '/bycnoticeindex',
name: 'bycnoticeindex',
component: Bycnoticeindex
} }
] ]
......
<template>
<div>
<!-- 头部导航面包屑 -->
<div class="nav">
<span>商标公告查询 ></span>&nbsp;
<span>注册公告</span>
</div>
<!-- 查询选择表单 -->
<div class="choice-form">
<el-form :inline="true" :model="choiceForm">
<el-row class="first-row">
<el-form-item label="公告类型:" class="left-span">
<el-select v-model="choiceForm.type" placeholder="请选择" class="info-box">
<el-option label="商标初步审定公告" value="chushen"></el-option>
<el-option label="商标注册公告(一)" value="gonggaoyi"></el-option>
<el-option label="商标注册公告(二)" value="gonggaoer"></el-option>
</el-select>
</el-form-item>
<el-form-item label="公告期号:" class="left-span">
<el-input v-model="choiceForm.num" class="info-box"></el-input>
</el-form-item>
<el-form-item label="申请人:" class="left-span">
<el-input v-model="choiceForm.user" placeholder="请输入申请人名称" class="info-box"></el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="商标名称:" class="left-span">
<el-input v-model="choiceForm.name" class="info-box"></el-input>
</el-form-item>
<el-form-item label="商标类别:" class="left-span">
<el-select v-model="choiceForm.type" placeholder="全部类别" class="info-box">
<el-option label="全部类别" value="all"></el-option>
<el-option label="01" value="one"></el-option>
<el-option label="02" value="two"></el-option>
</el-select>
</el-form-item>
<el-form-item label="申请号:" class="left-span">
<el-input v-model="choiceForm.digit" class="info-box"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" class="btn-size left-span">查询</el-button>
<el-button plain class="btn-size">重置</el-button>
</el-form-item>
</el-row>
</el-form>
</div>
<!-- 数据记录条数 -->
<div class="record">
<div class="title">
<span>&nbsp;13420&nbsp;</span>条公告数据
</div>
</div>
<!-- 商标表格 -->
<div class="brand-form-wrap">
<el-table :data="brandData" class="brand-form" header-row-class-name="tableHeader">
<el-table-column prop="brandicon" label="商标图样" align="center" width="150">
<img
src="https://gsb-zc.oss-cn-beijing.aliyuncs.com/zc_imagequery293101543401586324201828183946324czhd.png"
alt
/>
</el-table-column>
<el-table-column prop="brandname" label="商标名称" align="center" width="100"></el-table-column>
<el-table-column prop="brandkind" label="商标类别" align="center" width="100"></el-table-column>
<el-table-column prop="brandnum" label="申请号" align="center" width="100"></el-table-column>
<el-table-column prop="branduser" label="申请人" align="center" width="300"></el-table-column>
<el-table-column prop="brandtype" label="公告类型" align="center" width="200"></el-table-column>
<el-table-column prop="branddigit" label="公告期号" align="center" width="150"></el-table-column>
<el-table-column prop="branddetail" label="公告详情" align="center" width="100">
<el-button type="text" size="small">公告详情</el-button>
</el-table-column>
</el-table>
</div>
<!-- 分页器 -->
<div class="pagenation">
<el-pagination background layout="prev, pager, next" :total="1000" class="pages"></el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
choiceForm: {
// 公告期号
num: "",
// 公告类型
type: "",
// 申请人
user: "",
// 商标名称
name: "",
// 商标类别
kind: "",
// 申请号
digit: 323
},
brandData: [
{
brandicon: "圣启",
brandname: "圣启",
brandkind: "6",
brandnum: "37195529",
branduser: "河南省海圣门窗销售有限公司",
brandtype: "商标初步审定公告",
branddigit: "1677(2019-12-27)",
branddetail: "公告详情"
},
{
brandicon: "圣启",
brandname: "圣启",
brandkind: "6",
brandnum: "37195529",
branduser: "河南省海圣门窗销售有限公司",
brandtype: "商标初步审定公告",
branddigit: "1677(2019-12-27)",
branddetail: "公告详情"
},
{
brandicon: "圣启",
brandname: "圣启",
brandkind: "6",
brandnum: "37195529",
branduser: "河南省海圣门窗销售有限公司",
brandtype: "商标初步审定公告",
branddigit: "1677(2019-12-27)",
branddetail: "公告详情"
},
{
brandicon: "圣启",
brandname: "圣启",
brandkind: "6",
brandnum: "37195529",
branduser: "河南省海圣门窗销售有限公司",
brandtype: "商标初步审定公告",
branddigit: "1677(2019-12-27)",
branddetail: "公告详情"
}
]
};
},
methods: {
onSubmit() {
console.log("submit!");
}
}
};
</script>
<style lang="scss" scoped>
/* 头部导航面包屑 */
.nav {
width: 1200px;
margin: 0 auto;
padding-top: 21px;
padding-bottom: 18px;
span:nth-child(1) {
font-family: MicrosoftYaHei;
font-size: 16px;
color: #262635;
}
span:nth-child(2) {
font-family: MicrosoftYaHei;
font-size: 16px;
color: #108ee9;
}
}
/* 查询选择表单 */
.choice-form {
background: #f7f8fc;
border: 1px solid #eff1f9;
width: 1198px;
height: 129px;
margin: 0 auto;
.first-row {
margin-top: 18px;
}
.left-span {
margin-left: 20px;
height: 34px;
}
.info-box {
width: 220px;
height: 334px;
/* border-radius: 0; */
}
.btn-size {
width: 60px;
height: 34px;
font-family: PingFangSC-Regular;
font-size: 14px;
}
}
/* 数据记录条数 */
.record {
width: 1200px;
margin: 0 auto;
.title {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #666666;
line-height: 20px;
padding: 10px 0 10px 20px;
span {
color: #108ee9;
}
}
}
/* 商标表格 */
.brand-form-wrap {
width: 1200px;
margin: 0 auto;
.brand-form {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #333333;
img {
display: block;
width: 80px;
height: 80px;
}
}
}
.tableHeader {
background: #f7f8fc;
border: 1px solid #d6daeb;
width: 1198px;
height: 38px;
}
/* 分页器 */
.pagenation {
background: #f7f8fc;
border: 1px solid #d6daeb;
width: 1198px;
height: 59px;
margin: 0 auto;
text-align: right;
.pages {
margin-top: 15px;
}
}
</style>
\ No newline at end of file
...@@ -144,4 +144,4 @@ li { ...@@ -144,4 +144,4 @@ li {
.showncllist-leave { .showncllist-leave {
opacity: 1; opacity: 1;
} }
</style> </style>
\ No newline at end of file
...@@ -29,22 +29,23 @@ export default { ...@@ -29,22 +29,23 @@ export default {
/* assets的别名? */ /* assets的别名? */
background: url(../../../assets/imgs/banner.png) center center no-repeat; background: url(../../../assets/imgs/banner.png) center center no-repeat;
background-size: cover; background-size: cover;
}
.jdtrademark-banner > div { > div {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
min-height: 480px; min-height: 480px;
}
.jdtrademark-banner > div > div { > div {
padding: 10px 40px; padding: 10px 40px;
border: 1px solid #cfebfc; border: 1px solid #cfebfc;
color: #cfebfc; color: #cfebfc;
position: absolute; position: absolute;
left: 0; left: 0;
top: 66%; top: 66%;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
}
}
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div class="brandreg"> <div class="brandreg">
<div style="width:1200px;margin: 30px auto ;"> <div>
<div class="brand" style="width:100%;"> <div class="brand">
<div style="width:1200px;margin:0 auto"> <div>
<div style="width:1200px"> <div class="brand-title">商标注册申请</div>
<!-- <div style="background-color:#2692FF;height:24px;width:4px;float:left"></div> --> <div class="brand-text">
<div class="brand-title">商标注册申请</div> <span>
<div class="brand-text"> <img src="../../../assets/imgs/dui.png" style="margin-right: 10px;" alt />
<span> 诚信商家
<img src="../../../assets/imgs/dui.png" style="margin-right: 10px;" alt /> </span>
诚信商家 <span>
</span> <img src="../../../assets/imgs/dui.png" style="margin-right: 10px;" alt />
<span> 1v1专业服务
<img src="../../../assets/imgs/dui.png" style="margin-right: 10px;" alt /> </span>
1v1专业服务 <span>
</span> <img src="../../../assets/imgs/dui.png" style="margin-right: 10px;" alt />
<span> 省钱省心省力
<img src="../../../assets/imgs/dui.png" style="margin-right: 10px;" alt /> </span>
省钱省心省力
</span>
</div>
</div> </div>
<!-- 轮播部分 --> <!-- 轮播部分 -->
<div <div class="brandreg-swiper swiper-no-swiping">
class="brandreg-swiper swiper-no-swiping"
@mouseenter="dataList.length>3 ? showArrows = true : showArrows=false"
>
<div class="swiper-container"> <div class="swiper-container">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div <div class="swiper-slide">
class="swiper-slide" <div class="brandreg-swiper-hearder">
v-for="(item, index) in dataList"
:class="{'swiper-slide-enter':index==current}"
@mouseenter="adHeight(index,$event)"
:key="index"
>
<div
class="brandreg-swiper-hearder"
:class="{'brandreg-swiper-hearder-enter':index==current}"
>
<div> <div>
<div> <div>
<img :src="item.productLogo" alt /> <img
src="http://gsb-zc.oss-cn-beijing.aliyuncs.com/zc_qft_pi15755163570461.png"
alt
/>
</div> </div>
<div>{{item.itemName}}</div> <div>京东云PLUS商标自助申请</div>
</div> </div>
</div> </div>
<div class="brandreg-swiper-content"> <div class="brandreg-swiper-content">
<ul> <ul>
<li v-for="(item, index) in item.productDesc.desc" :key="index"> <li>
<div> <div>
<img src="../../../assets/imgs/dbx.png" alt /> <img src="../../../assets/imgs/dbx.png" alt />
</div> </div>
<div>{{item}}</div> <div>自己检索商标,准备官方所需注册材料</div>
</li> </li>
</ul> </ul>
<div> <div>
<div> <div>
<sup></sup> <sup></sup>
<span>{{item.proPrice}}</span>/件 <span>300</span>/件
</div> </div>
<div <div class="brandreg-swiper-content-button">立即购买</div>
class="brandreg-swiper-content-button"
:class="{'brandreg-swiper-content-button-enter':index==current}"
@click="jumpJdProductDetails(item,$event)"
>立即购买</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Add Pagination -->
<!-- <div class="swiper-pagination"></div> -->
</div>
<!-- 控制箭头隐藏显示 -->
<div v-show="showArrows" @mouseleave="showArrows = false">
<div class="swiper-button-prev"></div>
<!--左箭头。如果放置在swiper-container外面,需要自定义样式。-->
<div class="swiper-button-next"></div>
<!--右箭头。如果放置在swiper-container外面,需要自定义样式。-->
</div> </div>
</div> </div>
</div> </div>
...@@ -149,6 +125,24 @@ export default { ...@@ -149,6 +125,24 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.brandreg {
> div {
width: 1200px;
margin: 30px auto;
.brand {
width: 100%;
> div {
width: 1200px;
margin: 0 auto;
> div {
width: 1200px;
}
}
}
}
}
.brand-title { .brand-title {
width: 100%; width: 100%;
text-align: center; text-align: center;
...@@ -280,6 +274,7 @@ export default { ...@@ -280,6 +274,7 @@ export default {
.brandreg-swiper-hearder > div > div:nth-child(1) > img { .brandreg-swiper-hearder > div > div:nth-child(1) > img {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin-top: 15px;
} }
.brandreg-swiper-content ul { .brandreg-swiper-content ul {
......
...@@ -165,6 +165,7 @@ export default { ...@@ -165,6 +165,7 @@ export default {
height: 28px; height: 28px;
font-size: 28px; font-size: 28px;
font-family: PangMenZhengDao; font-family: PangMenZhengDao;
/* color: rgb(168, 24, 24); */
color: #fff; color: #fff;
line-height: 32px; line-height: 32px;
letter-spacing: 1px; letter-spacing: 1px;
...@@ -237,4 +238,4 @@ export default { ...@@ -237,4 +238,4 @@ export default {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
cursor: pointer; cursor: pointer;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment