Commit 5e6f95fa by 任建

rj

parents ce41eddb 4a8f704f
/* 改变主题色变量 */
// $--color-primary: #409EFF;
// $--color-primary: red;
$--color-primary: #108ee9;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
// 自定义主题色变量
<<<<<<< HEAD
$themecolor:#409EFF;
=======
// $themecolor:red;
$themecolor:#108ee9;
>>>>>>> 4a8f704facc4d880c9ba3368cdcc80b63a8eb736
@import "~element-ui/packages/theme-chalk/src/index";
\ No newline at end of file
......@@ -27,6 +27,7 @@ const routes = [{
component: () =>
import ("@/views/pages/jdindentdetail")
},
/////////
{
path: "/:chanue/jdtrademark",
name: "jdtrademark",
......@@ -38,6 +39,12 @@ const routes = [{
name: "selftmreg",
component: () =>
import ("@/views/pages/selftmreg/Selftmreg")
},
{
path: "/bycnoticeindex",
name: "bycnoticeindex",
component: () =>
import ("@/views/pages/bycnoticeindex/Bycnoticeindex")
}
];
const router = new VueRouter({
......
<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: 0px;
}
.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
<template>
<div class="jdc-side" style="display: block;">
<div
clstag="RightQuickLink|keycount|RightQuickLinkSec|FeedBack"
class="mod_hang_qrcode jdc_feedback_qrcode"
>
<div class="mod_hang_qrcode_btn">
<i class="jdcfont"></i>
<span>扫码反馈</span>
</div>
<div class="mod_hang_qrcode_show">
<div class="mod-qr-tips"></div>
<div class="mod_hang_qrcode_show_bg">
<canvas id="canvas" width="124" height="124" style="height: 124px; width: 124px;"></canvas>
</div>
<p>扫一扫,反馈当前页面</p>
</div>
</div>
<div
clstag="RightQuickLink|keycount|RightQuickLinkSec|ContactUsSecService"
class="mod_hang_appeal"
>
<div class="mod_hang_appeal_btn">
<i class="jdcfont"></i>
<span>咨询反馈</span>
</div>
<div class="mod_hang_appeal_show" style="display: none;">
<ul>
<li>
<a
data-ga="ContactUsSec_JIMI智能客服"
clstag="ContactIPage|keycount|ContactUsSecService|IntelligentService"
href="//jimi3-chat.jd.com/bot?venderId=897612092"
target="_blank"
>
<div class="icon_box">
<i class="jdcfont"></i>
</div>
<div class="text_box">
<h5>智能客服JIMI</h5>
<p>7*24小时支持,即刻响应,有问必答</p>
</div>
</a>
</li>
<li id="entry">
<a
data-ga="ContactUsSec_工单服务"
href="//uc.jdcloud.com/myorder/submit"
clstag="RightSlide|keycount|ContactUsSec|62"
target="_blank"
class="f-cb"
>
<div class="icon_box">
<i class="jdcfont"></i>
</div>
<div class="text_box">
<h5>工单服务</h5>
<p>7*24全时处理,技术支持</p>
</div>
</a>
</li>
<li>
<a
data-ga="ContactUsSec_投诉建议"
href="//uc.jdcloud.com/myorder/form?cateId=263&amp;questionId=264"
clstag="RightSlide|keycount|ContactUsSec|63"
target="_blank"
class="f-cb"
>
<div class="icon_box">
<i class="jdcfont"></i>
</div>
<div class="text_box">
<h5>投诉建议</h5>
<p>倾耳聆听,一个工作日内及时处理</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div
clstag="RightQuickLink|keycount|RightQuickLinkSec|BackToTop"
class="mod_hang_qrcode mod_hang_top"
>
<a
clstag="RightSlide|keycount|ContactUsSec|65"
data-ga="ContactUsSec_返回顶部"
href="javascript:;"
class="mod_hang_qrcode_btn"
>
<i class="jdcfont"></i>
<span>返回顶部</span>
</a>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
watch: {},
methods: {}
};
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
<template>
<div class="jdtrademark-FAQ-warpper">
<div class="jdtrademark-FAQ">
<div class="jdtrademark-FAQ-title">
常见问题
<div>聚集常见问答,解决商标申请时遇到的困难</div>
</div>
<ul>
<li v-for="(item, index) in issue" :key="index">
<div>
<div>
<img :src="item.img" alt />
</div>
<div>{{item.title}}</div>
</div>
<div>{{item.text}}</div>
</li>
</ul>
</div>
</div>
</template>
<script>
import img1 from "../../../assets/imgs/FAQ1.png";
import img2 from "../../../assets/imgs/FAQ2.png";
import img3 from "../../../assets/imgs/FAQ3.png";
export default {
data() {
return {
issue: [
{
img: img1,
title: "什么是商标?什么是注册商标?",
text:
"商标是指任何能够将自然人、法人或者其他组织的商品/服务与他人的商品/服务区别开的标志,包括文字、图形、字母、数字、三维标志、颜色组合和声音等,以及上述要素的组合。 注册商标是指经过商标主管机关依照法定程序及标准进行审查并通过,经《初步审定公告》无人提出异议的商标。"
},
{
img: img2,
title: "商标注册有风险吗?",
text:
"商标注册存在被商标局驳回导致申请失败的风险。申请驳回失败原因可能有:受可用文字、标识资源限制,新的商标申请容易与在先申请的商标产生近似;法律法规的相关限制等。据不完全的统计,2017年我国商标申请的驳回率约50%,2018年我国商标申请的驳回率约40%。为提高商标注册成功率,申请人可在申请时提前做好应对准备。 建议: (1) 若申请人不具有一定的专业能力,尽量选择有专业顾问指导的“专家辅助申请”和“担保注册申请”。 (2)申请时将中文、英文、图形等分开申请,通过后可以组合使用,以避免因某一部分近似而被商标局整体驳回的情况,且分开申请可以根据场景灵活组合使用。 (3) 准备备用方案,申请时可以在主要商标申请方案的基础上,增加一到两件备用商标,以便在主商标无法通过或全部通过的情况下,有其他可以使用的商标。"
},
{
img: img3,
title: "商标申请费用的标准?",
text:
"商标局规费收取标准为: 300元/类·件,即:1件商标在1个类别中申请10个(含10个)以内的商品。超过10个商品,每超过1个商品,每个商品加收30元。 即:在一个类别中指定15项商品,规费为:300+(15-10)×30=450元"
}
]
};
},
methods: {}
};
</script>
<style lang="scss" scoped>
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
.jdtrademark-FAQ-warpper {
width: 100%;
height: 570px;
box-sizing: border-box;
padding-top: 50px;
}
.jdtrademark-FAQ {
width: 1200px;
margin: 0 auto;
text-align: center;
}
.jdtrademark-FAQ-title {
font-size: 28px;
font-family: PingFangSC-Regular, PingFangSC;
font-weight: 400;
color: rgba(66, 71, 83, 1);
}
.jdtrademark-FAQ-title > div {
font-size: 14px;
font-family: PingFangSC-Regular, PingFangSC;
font-weight: 400;
color: rgba(105, 111, 127, 1);
margin-top: 10px;
}
.jdtrademark-FAQ > ul {
width: 1200px;
margin: 0 auto;
text-align: left;
}
.jdtrademark-FAQ > ul > li {
margin-top: 30px;
}
.jdtrademark-FAQ > ul > li > div:nth-child(1) {
display: flex;
margin-bottom: 7px;
font-size: 16px;
font-family: PingFangSC-Medium, PingFangSC;
font-weight: 500;
color: rgba(66, 71, 83, 1);
align-items: center;
}
.jdtrademark-FAQ > ul > li > div:nth-child(1) > div:nth-child(1) {
width: 20px;
height: 20px;
margin-right: 11px;
margin-top: 2px;
}
.jdtrademark-FAQ > ul > li > div:nth-child(1) > div:nth-child(1) > img {
width: 100%;
height: 100%;
}
.jdtrademark-FAQ > ul > li > div:nth-child(2) {
box-sizing: border-box;
padding-left: 30px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFangSC;
font-weight: 400;
color: rgba(120, 128, 133, 1);
line-height: 20px;
}
.showncllist-enter-active,
.showncllist-leave-active {
transition: all 0.5s;
}
.showncllist-enter,
.showncllist-leave-to {
opacity: 0;
}
.showncllist-enter-to,
.showncllist-leave {
opacity: 1;
}
</style>
\ No newline at end of file
<template>
<div class="jdtrademark-banner">
<div>
<div @click="goIndentList">我的订单</div>
</div>
</div>
</template>
<script>
export default {
methods: {
/*去订单列表页jdindentlist */
goIndentList() {
location.href =
"https://oauth2.jdcloud.com/authorize?response_type=token&redirect_uri=https://tm.plus.jdcloud.com/jdtm/getUser&state=jdindentlist&client_id=9491577327154697";
}
}
};
</script>
<style lang="scss" scoped>
.jdtrademark {
width: 100%;
}
.jdtrademark-banner {
min-height: 480px;
background: yellowgreen;
/* assets的别名? */
background: url(../../../assets/imgs/banner.png) center center no-repeat;
background-size: cover;
}
.jdtrademark-banner > div {
width: 1200px;
margin: 0 auto;
position: relative;
min-height: 480px;
}
.jdtrademark-banner > div > div {
padding: 10px 40px;
/* border: 1px solid rgba(207, 235, 252); */
border: 1px solid #cfebfc;
/* color: rgba(207, 235, 252); */
color: #cfebfc;
position: absolute;
left: 0;
top: 66%;
cursor: pointer;
font-size: 16px;
}
</style>
\ No newline at end of file
<template>
<div class="jdtrademark-flow"></div>
</template>
<style lang="scss" scoped>
.jdtrademark-flow {
width: 100%;
height: 500px;
background: url(../../../assets/imgs/flow.png) center center no-repeat;
background-size: cover;
}
</style>
\ No newline at end of file
......@@ -141,101 +141,92 @@ export default {
display: flex;
width: 1200px;
height: 100%;
> div:nth-child(1) {
width: 172px;
height: 100%;
box-sizing: border-box;
padding-top: 38px;
background: #0ecae6;
margin-right: 21px;
display: flex;
> img {
width: 28px;
height: 28px;
margin-left: 9px;
transform: translateY(5px);
vertical-align: middle;
}
> span {
height: 28px;
font-size: 28px;
font-family: PangMenZhengDao;
/* color: rgb(168, 24, 24); */
color: #fff;
line-height: 32px;
letter-spacing: 1px;
}
}
> div:nth-child(2) {
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
position: relative;
height: 54px;
width: 838px;
background: #fff;
margin-top: 28px;
align-items: center;
> .jdtrademark-typelist {
position: absolute;
box-sizing: border-box;
height: 353px;
border: none;
left: 0;
top: 54px;
width: 837.29px;
background: #fff;
z-index: 10;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
.el-checkbox {
width: 96.41px;
}
}
> input {
padding-left: 12px;
height: 100%;
outline: 0;
border: none;
display: inline-block;
width: 726px;
box-sizing: border-box;
background: rgba(255, 255, 255, 1);
}
> div {
cursor: pointer;
padding-left: 20px;
box-sizing: border-box;
display: inline-block;
line-height: 30px;
height: 30px;
border-left: 1px solid #d2d2d2;
font-size: 14px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(106, 106, 106, 1);
}
}
> div:nth-last-child(1) {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
margin-top: 28px;
width: 170px;
height: 54px;
text-align: center;
line-height: 54px;
background: rgba(6, 113, 162, 1);
font-size: 18px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
cursor: pointer;
}
}
.jdtrademark-search > div:nth-child(1) {
width: 172px;
height: 100%;
box-sizing: border-box;
padding-top: 38px;
background: #0ecae6;
margin-right: 21px;
display: flex;
}
.jdtrademark-search > div:nth-child(1) > img {
width: 28px;
height: 28px;
margin-left: 9px;
transform: translateY(3px);
vertical-align: middle;
}
.jdtrademark-search > div:nth-child(1) > span {
height: 28px;
font-size: 28px;
font-family: PangMenZhengDao;
/* color: rgb(168, 24, 24); */
color: #fff;
line-height: 32px;
letter-spacing: 1px;
}
.jdtrademark-search > div:nth-child(2) {
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
position: relative;
height: 54px;
width: 838px;
background: #fff;
margin-top: 28px;
align-items: center;
}
.jdtrademark-search > div:nth-child(2) > .jdtrademark-typelist {
position: absolute;
box-sizing: border-box;
height: 353px;
border: none;
left: 0;
top: 54px;
width: 837.29px;
background: #fff;
z-index: 10;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.jdtrademark-search > div:nth-child(2) > .jdtrademark-typelist .el-checkbox {
width: 96.41px;
}
.jdtrademark-search > div:nth-child(2) > input {
padding-left: 12px;
height: 100%;
outline: 0;
border: none;
display: inline-block;
width: 726px;
box-sizing: border-box;
background: rgba(255, 255, 255, 1);
}
.jdtrademark-search > div:nth-child(2) > div {
cursor: pointer;
padding-left: 20px;
box-sizing: border-box;
display: inline-block;
line-height: 30px;
height: 30px;
border-left: 1px solid #d2d2d2;
font-size: 14px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(106, 106, 106, 1);
}
.jdtrademark-search > div:nth-last-child(1) {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
margin-top: 28px;
width: 170px;
height: 54px;
text-align: center;
line-height: 54px;
background: rgba(6, 113, 162, 1);
font-size: 18px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
cursor: pointer;
}
</style>
\ No newline at end of file
</style>
<template>
<div class="jdtrademark-services">
<div class="jdtrademark-services-title">服务优势</div>
<div style="width:1200px;margin:0 auto;">
<ul>
<li v-for="(item, index) in serviceData" :key="index">
<div>
<img :src="item.img" alt />
</div>
<p>{{item.name}}</p>
<p>{{item.text}}</p>
</li>
</ul>
</div>
</div>
</template>
<script>
import img1 from "../../../assets/imgs/services1.png";
import img2 from "../../../assets/imgs/services2.png";
import img3 from "../../../assets/imgs/services3.png";
import img4 from "../../../assets/imgs/services4.png";
import img5 from "../../../assets/imgs/services5.png";
import img6 from "../../../assets/imgs/services6.png";
export default {
data() {
return {
serviceData: [
{
img: img1,
name: "注册评估低风险",
text:
"商标注册存在驳回失败风险,京东云利用大数据分析和智能检索工具可快速查出近似商标注册信息及状态,帮助提高通过率"
},
{
img: img2,
name: "简化流程高效注册",
text:
"京东云提供商标自助申报系统,可自定义选择注册类别,同事利用工商大数据查询企业信息功能,提高申请效率"
},
{
img: img3,
name: "最快1分钟提交商标局",
text:
"京东云支持商标自助线上提交申请、线上跟进商标订单,利用人工智能提交机器人,最快实现1分钟提交至商标局"
},
{
img: img4,
name: "申请进度实时掌握",
text:
"京东云提供在线标准化服务,流程透明可视化,关键流程通过短信、邮件通知,申请进度一目了然"
},
{
img: img5,
name: "简单管理易维护",
text:
"在京东云商标管理控制台,数据在线保存实时同步到云端,各类进度随时掌握,方便查找各类商标订单"
},
{
img: img6,
name: "多种服务供您选择",
text:
"行业合作伙伴为您提供专业服务,可一对一进行问题解答与业务建议,满足您多元的商标需求"
}
]
};
}
};
</script>
<style lang="scss" scoped>
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
.jdtrademark-services {
width: 100%;
height: 530px;
background: rgba(243, 246, 253, 1);
box-sizing: border-box;
padding-top: 50px;
}
.jdtrademark-services-title {
width: 112px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFangSC;
font-weight: 400;
color: rgba(66, 71, 83, 1);
line-height: 40px;
margin: 0 auto 59px;
}
.jdtrademark-services ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.jdtrademark-services ul > li {
box-sizing: border-box;
text-align: center;
width: 340px;
margin-bottom: 26px;
}
.jdtrademark-services ul > li > div {
width: 55px;
margin: 0 auto;
height: 55px;
}
.jdtrademark-services ul > li > div > img {
width: 100%;
height: 100%;
}
.jdtrademark-services ul > li > p:nth-of-type(1) {
margin-top: 20px;
margin-bottom: 15px;
font-family: PingFangSC-Medium, PingFangSC;
font-weight: 500;
color: rgba(55, 61, 67, 1);
}
.jdtrademark-services ul > li > p:nth-of-type(2) {
font-size: 12px;
font-family: PingFangSC-Regular, PingFangSC;
font-weight: 400;
color: rgba(76, 81, 87, 1);
}
</style>
\ No newline at end of file
<template>
<div>自主提报</div>
<div class="selftmreg">
<!-- 导航面包屑 -->
<SelftmregNav />
<!-- 主体页面 -->
<SelftmregPage />
<!-- 底部付款按钮 -->
<SelftmregTabButtonPrice />
</div>
</template>
<script>
export default {};
import SelftmregNav from "./SelftmregNav";
import SelftmregPage from "./SelftmregPage";
import SelftmregTabButtonPrice from "./SelftmregTabButtonPrice";
export default {
components: {
SelftmregNav,
SelftmregPage,
SelftmregTabButtonPrice
},
data() {
return {};
}
};
</script>
<style lang="scss" scoped>
.selftmreg {
background-color: white;
}
</style>
\ No newline at end of file
<template>
<div class="jdindentdetail-nav">
<el-breadcrumb separator-class="el-icon-arrow-right">
<!-- titleName:商标注册服务 -->
<!-- <el-breadcrumb-item :to="listPath" class="isActive">商标注册服务{{titleName}}</el-breadcrumb-item> -->
<el-breadcrumb-item class="isActive">商标注册服务</el-breadcrumb-item>
<el-breadcrumb-item>自助商标注册</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.jdindentdetail-nav {
box-sizing: border-box;
padding-top: 17px;
width: 1200px;
margin: 12px auto;
padding: 0;
height: 24px;
line-height: 24px;
}
.isActive {
font-weight: 700;
text-decoration: none;
-webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
color: #303133;
}
.isActive :hover {
color: #007aff;
cursor: pointer;
}
.jdindentdetail-nav .el-breadcrumb {
display: inline-block;
}
</style>
\ No newline at end of file
<template>
<div class="jdindentdetail-page">
<div class="jdindentdetail-wrap">
<!-- 主体内容 -->
<SelftmregPageMain />
<!-- page1 填写基本信息-->
<SelftmregPageOne />
<!-- page2 填写申请人信息-->
<!-- <SelftmregPageTwo /> -->
</div>
</div>
</template>
<script>
import SelftmregPageMain from "./SelftmregPageMain";
import SelftmregPageOne from "./SelftmregPageOne";
import SelftmregPageTwo from "./SelftmregPageTwo";
export default {
components: {
SelftmregPageMain,
SelftmregPageOne,
SelftmregPageTwo
},
data() {
return {};
}
};
</script>
<style lang="scss" scoped>
.jdindentdetail-page {
background-color: white;
width: 1200px;
margin: 0 auto;
padding-bottom: 90px;
}
.jdindentdetail-wrap {
text-align: left;
border: 1px solid rgba(220, 223, 230, 1);
position: relative;
}
</style>
\ No newline at end of file
<template>
<div class="selftmreg_main">
<div class="pointsRule">
<ul id="list">
<li :style="pointsRuleBackColor(1)">
<a>
<span :style="pointsRuleColor(1)">填写基本信息</span>
<i :style="pointsRuleBackColor(1)"></i>
</a>
</li>
<li :style="pointsRuleBackColor(2)">
<a>
<em class="before"></em>
<span :style="pointsRuleColor(2)">填写申请人信息</span>
<i :style="pointsRuleBackColor(2)"></i>
</a>
</li>
<li :style="pointsRuleBackColor(3)">
<a>
<em class="before"></em>
<span :style="pointsRuleColor(3)">确认订单</span>
<i :style="pointsRuleBackColor(3)"></i>
</a>
</li>
<li :style="pointsRuleBackColor(4)">
<a>
<em class="before"></em>
<span :style="pointsRuleColor(4)">支付订单</span>
</a>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
methods: {
pointsRuleBackColor(i) {
if (i < parseInt(this.step)) {
return "background: #51d2b7; z-index: " + Math.abs(i - 5);
} else if (i == parseInt(this.step)) {
return "background: #51d2b7;z-index: " + Math.abs(i - 5);
} else if (i > parseInt(this.step)) {
return "background:#EFF0F7;z-index: " + Math.abs(i - 5);
}
},
pointsRuleColor(i) {
if (i < parseInt(this.step)) {
return "color: #FFFFFF;";
} else if (i == parseInt(this.step)) {
return "color: #FFFFFF;";
} else if (i > parseInt(this.step)) {
return "color: #BBB;";
}
}
}
};
</script>
<style lang="scss" scoped>
.selftmreg_main {
width: 100%;
padding: 0px 20px;
box-sizing: border-box;
overflow: hidden;
}
.pointsRule {
width: 100%;
display: inline-block;
font-size: 16px;
margin: 20px 0px;
float: left;
text-align: center;
}
.pointsRule span {
float: left;
display: inline-block;
}
.pointsRule ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
float: left;
width: 100%;
}
.pointsRule ul li {
width: 24%;
display: list-item;
text-align: center;
float: left;
margin-right: 10px;
background: #e3e3e3;
border-top: 1px solid #e3e3e3;
height: 31px;
position: relative;
}
.pointsRule ul li:first-child {
border-left: 1px solid #e3e3e3;
background: #e3e3e3;
}
.pointsRule ul li a {
display: block;
padding: 8px 0;
cursor: pointer;
height: 31px;
box-sizing: border-box;
}
.pointsRule ul li span {
vertical-align: middle;
height: 24px;
line-height: 15px;
display: inline-block;
overflow: hidden;
text-align: center;
width: 75%;
padding-left: 24px;
}
.pointsRule ul li i {
float: right;
/* border: #726c6c solid; */
border-width: 1px 1px 0 0;
width: 21px;
height: 22px;
margin: -4px -11px 0px 10px;
top: 2px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
background: #e3e3e3;
-moz-transform: rotate(45deg);
/* Firefox浏览器 */
-ms-transform: rotate(45deg);
}
.pointsRule ul li em.before {
border: #e3e3e3 solid;
border-width: 1px 1px 0 0;
width: 21px;
height: 22px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
float: left;
margin: -4px 10px 0px -11px;
top: 2px;
background: #fff;
}
</style>
\ No newline at end of file
<template>
<div class="categoryFrom">
<el-form-item label="商标类型" style="float:left;padding-right:10px;">
<el-radio-group style="display:inline-block;">
<el-radio v-model="radio">文字</el-radio>
<el-radio v-model="radio" label="2">图形</el-radio>
<el-radio v-model="radio" label="3">文字及图形</el-radio>
</el-radio-group>
<div class="categoryFrom-jieshao">如何选择商标类型?</div>
</el-form-item>
<div style="clear:both;"></div>
<el-form-item label="商标名称" style="width:860px;float:left">
<el-input style="width:330px" placeholder="请输入商标名称"></el-input>
<span
style="font-size:14px;font-family:PingFangSC-Regular;font-weight:400;color:rgba(99,101,105,1);margin-left: 10px"
>及图</span>
</el-form-item>
<div style="clear:both;"></div>
<el-form-item class="generated-icon" style="width:860px;float:left" label="商标图样">
<div style="float:left;margin-left:10px;">
<el-button style="border-radius:100px;color: #666666;" size="mini">手动上传</el-button>
<el-button style="border-radius:100px;color: #666666;" size="mini">自动生成</el-button>
</div>
<div style="clear:both;"></div>
<div style="margin-top:15px;width: 120px;">
<img width="120px" height="120px" style="border:2px dashed #e9e9e9" />
<img
width="120px"
height="120px"
style="border:2px dashed #e9e9e9"
src="../../../assets/imgs/zwtp.png"
/>
</div>
<div class="categoryFrom-imgjieshao">
<div>
<i class="el-icon-warning" style="margin-right:6px;"></i>上传黑白图样,注册后可以更换商标颜色使用;
</div>
<div style="padding-left:17px">上传彩色图样,注册后只能按照该彩色图样使用,并在委托书商标名称后方增加文字“(指定颜色)”;</div>
<div style="padding-left:17px">上传的彩色图样需与黑白图样的样式一致。</div>
<div style="padding-left:17px;color:#0F8EE9;cursor: pointer;">查看上传商标图样注意事项</div>
</div>
<div class="categoryFrom-namejieshao">
<i class="el-icon-warning" style="margin-right: 6px;"></i>自动生成的商标图样默认以“宋体字样自左向右排列”递交官方;
</div>
</el-form-item>
<div style="clear:both;"></div>
</div>
</template>
<script>
export default {
data() {
return {
radio: "1"
};
}
};
</script>
<style lang="scss" scoped>
.categoryFrom .el-input__inner {
height: 34px !important;
line-height: 34px !important;
}
.categoryFrom {
margin-bottom: 10px;
margin-top: 20px;
box-sizing: border-box;
}
.categoryFrom-jieshao {
display: inline-block;
width: 108px;
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: #bbbbbb;
line-height: 17px;
cursor: pointer;
margin-left: 30px;
}
.categoryFrom-jieshao:hover {
color: #0989c5;
text-decoration: underline;
}
.categoryFrom-namejieshao {
display: inline-block;
text-align: left;
width: 390px;
height: 23px;
font-size: 12px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(179, 179, 179, 1);
line-height: 18px;
float: right;
transform: translate(-208px, -30px);
}
.categoryFrom-imgjieshao {
display: inline-block;
font-size: 12px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(179, 179, 179, 1);
position: absolute;
top: 10px;
right: 0;
line-height: 24px;
}
.categoryFrom .el-form-item__error {
left: 45% !important;
}
.categoryFrom .el-form-item__label {
text-align: left;
}
.categoryFrom .el-radio__label {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #666666;
letter-spacing: 0;
text-align: left;
}
.categoryFrom .el-radio__input.is-checked + .el-radio__label {
color: #666666;
}
.categoryFrom .el-radio__inner {
border: 2px solid #dde0e6;
}
.categoryFrom .el-radio__input.is-checked .el-radio__inner {
border: 4px solid rgb(9, 137, 197);
background: none;
}
.categoryFrom .el-button {
border-radius: none;
color: #0f8ee9;
}
</style>
\ No newline at end of file
<template>
<el-container style="height: 600px;background-color:white; border: 1px solid #D6DAEB;">
<el-aside width="35%" style="text-align:center;background-color:white;position: relative;">
<div class="selftmreg_Stickie">
<el-button size="small" style="border-radius:0;">分类</el-button>
<el-input
style="width:60%;margin: 0 10px"
placeholder="输入关键字进行过滤"
suffix-icon="el-icon-search"
>
<i style="position:relative;top:8%;right:5%;z-index:1" class="el-input__icon">
<span>
<i class="tool-query" style="font-size : 1.5em;"></i>
</span>
</i>
</el-input>
<el-button style="padding: 12px 5px;color:#0989C5; " type="text">取消</el-button>
</div>
<el-card
style="z-index: 1000;font-size:13px;height:auto;text-align:left;padding-bottom: 20px;position: absolute;width:100%;margin:0 2%;"
>
<div style="margin-bottom:10px;">
<div style="float:left;width:50%;">
<el-checkbox>全选</el-checkbox>
</div>
<div style="float:left;text-align:right;width:50%;">
<el-button type="text" style="padding: 0 10px;color:#828282;">确定</el-button>
</div>
<div style="clear:both"></div>
</div>
<!-- <el-checkbox-group>
<ul style="list-style:none; padding:0;margin:0;text-align:left;">
<li style="float:left;width:33.33%">
<el-checkbox></el-checkbox>
</li>
</ul>
</el-checkbox-group>-->
</el-card>
<div style="height:100%;overflow: hidden;">
<el-tree class="gsb_tree" node-key="name" default-expand-all show-checkbox accordion></el-tree>
</div>
</el-aside>
<el-container width="60%">
<el-header
v-if="false"
style="text-align: right; font-size: 12px;background-color:white;padding-top:10px;"
>
<el-button style="float:right" type="primary">导入Contact</el-button>
<el-input style="float:right;width:40%" placeholder="请输入历史订单号" clearable></el-input>
</el-header>
<el-main style="background-color: white; padding:0px;position: relative;">
<div class="selftmreg_title">
已选择的商品/服务项
<span class="selftmreg_qingchu">
<i class="el-icon-delete"></i>
清除全部
</span>
</div>
<div style="overflow: auto;height: 100%;padding: 60px 20px 0px;box-sizing: border-box;">
<div>
<span style="font-size:16px">
<b></b>
</span>
<span style="font-size:16px;float:right">
<b>
已选择
<span style="color:#0F8EE9;"></span>
</b>
&nbsp;&nbsp;&nbsp;
<span style="cursor: pointer;">
<i class="el-icon-delete" style="font-size : 1.2em;"></i>
</span>
</span>
<br />
<br />
</div>
</div>
<div
style="overflow: auto;height: 100%;padding: 60px 20px 0px;box-sizing: border-box;position: relative;"
>
<img
src="../../../assets/imgs/kong-2.png"
style="position: absolute;margin: auto;top: 0;left: 0;bottom: 0;right: 0;"
alt
/>
<div style="color: #828282;margin-top: 330px;text-align: center;">请点击左侧选择商标类别</div>
</div>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
<style lang="scss" scoped>
.selftmreg_Stickie {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 65px;
line-height: 50px;
z-index: 298;
}
.selftmreg_Stickie .el-input__inner {
height: 34px !important;
line-height: 34px !important;
}
.selftmreg_title {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
line-height: 50px;
font-size: 14px;
padding-left: 20px;
text-align: left;
color: #03004c;
box-sizing: border-box;
border-left: 1px solid #e1e1e1;
background-color: #eff0f7;
z-index: 298;
font-family: PingFangSC-Regular;
letter-spacing: 0;
}
</style>
\ No newline at end of file
<template>
<div>第二步:填写申请人信息</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
<template>
<div style="width:100%;margin-top: 20px;box-sizing: border-box;">
<div class="tabButtomPrcie">
<span style="margin-right:30px;text-align: center;color: #03004C;font-weight: 700;">
应付总额:
<i style="color:#E50778;font-style: normal;font-size: 24px;">¥0.00</i>
</span>
<el-button type="primary">下一步</el-button>
</div>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.tabButtomPrcie {
width: 100%;
height: 60px;
line-height: 60px;
font-size: 16px;
color: #828282;
text-align: right;
box-sizing: border-box;
background: #eff0f7;
z-index: 2999;
position: fixed;
bottom: 0;
left: 0;
padding-right: 159px;
}
.selftmregType {
display: inline-block;
width: 110px;
height: 32px;
line-height: 32px;
text-align: center;
border: 1px solid #bbbbbb;
color: #bbbbbb;
cursor: pointer;
position: relative;
}
.selftmregType > img {
position: absolute;
top: 0;
right: 0;
width: 15px;
height: 15px;
height: 0;
width: 0;
}
</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