Skip to content

Z
zhichan
Commit f553f282 by 尹亚亭
Options

modify selftmreg

parent 4a8f704f
Showing with 570 additions and 521 deletions
channel-access/src/assets/css/reset.scss
......@@ -31,8 +31,8 @@ a:hover{}
/*ie7及以下的浏览器的高度塌陷*/
.clearfix{zoom:1;}
/* border-spacing调整相邻单元格间距*/
table{width:500px;height:300px; border:1px solid #333; border-spacing:0; }
td,th{border:1px solid #333;}
// table{width:500px;height:300px; border:1px solid #333; border-spacing:0; }
// td,th{border:1px solid #333;}
* {
......
channel-access/src/views/pages/bycnoticeindex/Bycnoticeindex.vue
......@@ -190,9 +190,12 @@ export default {
.info-box {
width: 220px;
height: 334px;
border-radius: 0px;
}
/* .el-input__inner {
border-radius: 0px;
} */
.btn-size {
width: 60px;
height: 34px;
......
channel-access/src/views/pages/selftmreg/ApplicationInfo.vue 0 → 100644
<template>
<div class="infomation">
<i class="selfmreg_shuxian"></i>
<!-- <span>填写申请人信息</span> -->
<div class="applicantInfo">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="150px"
class="demo-ruleForm"
label-position="left"
>
<el-form-item label="申请人类型：" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio :label="1" border>企业</el-radio>
<el-radio :label="2" border>个体户</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="公司名称：" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="统一社会信用代码：" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="执照详细地址：" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="邮政编码：" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
name: "",
region: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: 1,
desc: ""
},
rules: {
name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
],
region: [
{ required: true, message: "请选择活动区域", trigger: "change" }
],
date1: [
{
type: "date",
required: true,
message: "请选择日期",
trigger: "change"
}
],
date2: [
{
type: "date",
required: true,
message: "请选择时间",
trigger: "change"
}
],
type: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change"
}
],
resource: [
{ required: true, message: "请选择活动资源", trigger: "change" }
],
desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
<style lang="scss">
.selftmreg_shuxian {
width: 3px;
height: 15px;
background-color: #0989c5;
display: inherit;
float: left;
margin-top: 4px;
margin-right: 10px;
}
.applicantInfo {
width: 100%;
.el-radio__input {
display: none;
}
}
</style>
channel-access/src/views/pages/selftmreg/ModifyTrademark.vue 0 → 100644
<template>
<div class="modifyTrademark">
<div class="modifyTrademark-main">
<div class="categoryFrom">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
label-position="left"
>
<el-form-item label="商标类型：" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio :label="1">文字</el-radio>
<el-radio :label="2">图形</el-radio>
<el-radio :label="3">文字及图形</el-radio>
</el-radio-group>
<span class="a-span" @click="lookImg('如何选择商标类型', 1)">如何选择商标类型?</span>
</el-form-item>
<el-form-item
label="商标名称："
prop="name"
v-if="ruleForm.resource == 1 || ruleForm.resource == 3"
>
<el-input v-model="ruleForm.name" placeholder="请输入商标名称"></el-input>
</el-form-item>
<el-form-item label="商标图样：" prop="name" v-if="ruleForm.resource == 1">
<div class="trademark-name">
<div>
<el-button>手动上传</el-button>
<el-button>自动生成</el-button>
</div>
<div>
<div class="trademarkImg">
<img src="@/assets/imgs/zwtp.png" alt />
</div>
<p>
<i class="el-icon-warning"></i>自动生成的商标图样默认以“宋体”字样自左向右排列递交官方。
</p>
</div>
</div>
</el-form-item>
<el-form-item
label="商标图样："
prop="name"
v-if="ruleForm.resource == 2 || ruleForm.resource == 3"
>
<div class="trademark-name">
<div>
<div class="trademarkImg">
<img src alt />
</div>
<div class="p-left">
<p>
<i class="el-icon-warning"></i>上传黑白图样，注册后可以更换商标颜色使用；
</p>
<p>
<i class="el-icon-warning"></i>上传彩色图样，注册后只能按照该彩色图样使用，并在委托书商标名称后方增加文字“（指定颜色）”；
</p>
<p>
<i class="el-icon-warning"></i>上传的彩色图样需与黑白图样的样式一致。
</p>
<p>
<span @click="lookImg('查看上传商标图样注意事项', 2)">查看上传商标图样注意事项</span>
</p>
</div>
</div>
</div>
</el-form-item>
</el-form>
</div>
</div>
<!-- -->
<el-drawer
:title="drawerTitle"
custom-class="jdindentdetail-drawer"
size="430px"
:visible.sync="drawerRight"
>
<img class="shangImg" src="@/assets/imgs/jdt/shuoming.png" alt v-if="lookIndex == 1" />
<p v-if="lookIndex == 2">
图样文件格式应为jpg，图形应清晰，图样文件大小应小于“200KB”，且图形像素介于“600X600
- 1500X1500”之间，如果通过扫描获得图样的，应按
24位彩色，300dpi分辨率扫描符合《商标法》及其实施条例规定的图形（图形清晰，大于5X5厘米且小于10X10厘米），申请人（或代理人）应确保扫描后的图
形与原图形的色彩深浅（或灰度）一致，否则，可能影响《商标注册证》上图形的清晰度）如上传图样为黑白，取得注册后，可以更换商标颜色使用；如上传图样为彩色，取得注册后只能按
照该彩色图样使用；如确认提交彩色图样，需在委托书商标名称后方增加以下文字“（指定颜色）”
</p>
</el-drawer>
</div>
</template>
<script>
export default {
data() {
return {
drawerRight: false,
lookIndex: null,
drawerTitle: "",
ruleForm: {
name: "",
resource: 1
},
rules: {
name: [{ required: true, message: "请输入商标名称", trigger: "blur" }],
resource: [
{ required: true, message: "请选择活动资源", trigger: "change" }
]
}
};
},
methods: {
lookImg(title, index) {
this.drawerTitle = title;
this.lookIndex = index;
this.drawerRight = true;
}
}
};
</script>
<style lang="scss">
.modifyTrademark {
width: 100%;
.el-drawer__container {
background: rgba(0, 0, 0, 0.2);
}
.shangImg {
width: 100% !important;
}
p {
line-height: 25px;
font-size: 14px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(74, 74, 74, 1);
width: 100%;
padding: 20px 30px;
}
}
.categoryFrom {
.el-input {
input {
width: 330px;
height: 34px;
border-radius: 0px;
}
}
.a-span {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #409eff;
cursor: pointer;
margin-left: 30px;
}
.trademark-name {
width: 100%;
div {
width: 100%;
display: flex;
margin: 7px 0 24px;
button {
padding: 7px 15px;
border-radius: 100px;
color: rgb(102, 102, 102);
font-size: 12px;
}
.trademarkImg {
width: 124px;
height: 124px;
border: 2px dashed #e9e9e9;
img {
width: 100%;
height: 100%;
}
}
p {
font-family: PingFangSC-Regular;
padding: 20px;
font-size: 12px;
color: #bbbbbb;
line-height: 20px;
flex: 1;
}
.p-left {
flex: 1;
display: flex;
flex-direction: column;
p {
padding: 0 20px;
line-height: 25px;
span {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #409eff;
cursor: pointer;
}
}
}
}
}
}
</style>
channel-access/src/views/pages/selftmreg/Selftmreg.vue
<template>
<div class="selftmreg">
<!-- 导航面包屑 -->
<SelftmregNav />
<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>
<!-- 主体页面 -->
<SelftmregPage />
<!-- 底部付款按钮 -->
<SelftmregTabButtonPrice />
<div class="footer-wrap">
<div class="tabButtomPrcie">
<span>
应付总额：
<i>￥0.00</i>
</span>
<el-button type="primary">下一步</el-button>
</div>
</div>
</div>
</template>
<script>
import SelftmregNav from "./SelftmregNav";
import SelftmregPage from "./SelftmregPage";
import SelftmregTabButtonPrice from "./SelftmregTabButtonPrice";
export default {
components: {
SelftmregNav,
SelftmregPage,
SelftmregTabButtonPrice
SelftmregPage
},
data() {
return {};
......@@ -30,4 +43,64 @@ export default {
.selftmreg {
background-color: white;
}
/* 导航面包屑 */
.jdindentdetail-nav {
box-sizing: border-box;
padding-top: 17px;
width: 1200px;
margin: 12px auto;
padding: 0;
height: 24px;
line-height: 24px;
.el-breadcrumb {
display: inline-block;
.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;
}
}
}
/* 底部付款按钮 */
.footer-wrap {
width: 100%;
margin-top: 20px;
box-sizing: border-box;
.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;
> span {
margin-right: 30px;
text-align: center;
color: #03004c;
font-weight: 700;
> i {
color: #e50778;
font-style: normal;
font-size: 24px;
}
}
}
}
</style>
\ No newline at end of file
channel-access/src/views/pages/selftmreg/SelftmregNav.vue deleted 100644 → 0
<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
channel-access/src/views/pages/selftmreg/SelftmregPage.vue
<template>
<div class="jdindentdetail-page">
<div class="jdindentdetail-wrap">
<!-- 主体内容 -->
<SelftmregPageMain />
<!-- page1 填写基本信息-->
<SelftmregPageOne />
<!-- page2 填写申请人信息-->
<!-- <SelftmregPageTwo /> -->
<!-- 主体内容步骤条 -->
<SelftmregPageSteps />
<!-- 主页内容 -->
<el-form class="demo-ruleForm" label-width="120px">
<div class="selftmreg_main">
<div class="selftmreg_shu"></div>
<!-- 第一步：填写基本信息 商标信息 -->
<!-- <ModifyTrademark /> -->
<!-- 第一步：填写基本信息 分类选择 -->
<!-- <ClassTrademark /> -->
<!-- 第二步：填写申请人信息 -->
<ApplicationInfo />
<!-- 第三步：确认订单 -->
<!-- <SelftmregPageConfirmStep /> -->
</div>
<div style="clear:both;"></div>
</el-form>
</div>
</div>
</template>
<script>
import SelftmregPageMain from "./SelftmregPageMain";
import SelftmregPageOne from "./SelftmregPageOne";
import SelftmregPageTwo from "./SelftmregPageTwo";
import SelftmregPageSteps from "./SelftmregPageSteps";
import ModifyTrademark from "./ModifyTrademark";
import ClassTrademark from "../jdindentdetail/classTrademark";
import ApplicationInfo from "./ApplicationInfo";
import SelftmregPageConfirmStep from "./SelftmregPageConfirmStep";
export default {
components: {
SelftmregPageMain,
SelftmregPageOne,
SelftmregPageTwo
SelftmregPageSteps,
ModifyTrademark,
ClassTrademark,
ApplicationInfo,
SelftmregPageConfirmStep
},
data() {
return {};
......@@ -39,4 +60,19 @@ export default {
border: 1px solid rgba(220, 223, 230, 1);
position: relative;
}
/* 主页内容 */
.selftmreg_main {
width: 100%;
padding: 0px 20px;
box-sizing: border-box;
overflow: hidden;
}
.selftmreg_shu {
width: 1143px;
height: 1px;
background-color: #eeeeee;
margin: 20px 0;
}
</style>
\ No newline at end of file
channel-access/src/views/pages/selftmreg/SelftmregPageTwo.vue → channel-access/src/views/pages/selftmreg/SelftmregPageConfirmStep.vue
<template>
<div>第二步：填写申请人信息</div>
<div class="confirm">
<i class="selftmreg_shuxian"></i>
</div>
</template>
<script>
......@@ -7,4 +9,13 @@ export default {};
</script>
<style lang="scss" scoped>
.selftmreg_shuxian {
width: 3px;
height: 15px;
background-color: #0989c5;
display: inherit;
float: left;
margin-top: 4px;
margin-right: 10px;
}
</style>
\ No newline at end of file
channel-access/src/views/pages/selftmreg/SelftmregPageOneCategoryForm.vue deleted 100644 → 0
<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
channel-access/src/views/pages/selftmreg/SelftmregPageOneElContainer.vue deleted 100644 → 0
<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
channel-access/src/views/pages/selftmreg/SelftmregPageMain.vue → channel-access/src/views/pages/selftmreg/SelftmregPageSteps.vue
......@@ -2,30 +2,30 @@
<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>
<li>
<a class="active">
<span>填写基本信息</span>
<i></i>
</a>
</li>
<li :style="pointsRuleBackColor(2)">
<li>
<a>
<em class="before"></em>
<span :style="pointsRuleColor(2)">填写申请人信息</span>
<i :style="pointsRuleBackColor(2)"></i>
<span>填写申请人信息</span>
<i></i>
</a>
</li>
<li :style="pointsRuleBackColor(3)">
<li>
<a>
<em class="before"></em>
<span :style="pointsRuleColor(3)">确认订单</span>
<i :style="pointsRuleBackColor(3)"></i>
<span>确认订单</span>
<i></i>
</a>
</li>
<li :style="pointsRuleBackColor(4)">
<li>
<a>
<em class="before"></em>
<span :style="pointsRuleColor(4)">支付订单</span>
<span>支付订单</span>
</a>
</li>
</ul>
......@@ -34,28 +34,7 @@
</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;";
}
}
}
};
export default {};
</script>
<style lang="scss" scoped>
......@@ -64,93 +43,96 @@ export default {
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 {
width: 100%;
display: inline-block;
font-size: 16px;
margin: 20px 0px;
text-align: center;
.pointsRule ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
float: left;
width: 100%;
}
ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
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;
}
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;
}
a {
display: block;
padding: 8px 0;
cursor: pointer;
height: 31px;
box-sizing: border-box;
.pointsRule ul li a {
display: block;
padding: 8px 0;
cursor: pointer;
height: 31px;
box-sizing: border-box;
}
> 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 span {
vertical-align: middle;
height: 24px;
line-height: 15px;
display: inline-block;
overflow: hidden;
text-align: center;
width: 75%;
padding-left: 24px;
}
i {
float: right;
/* border: #e3e3e3 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);
.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);
/* Firefox浏览器 */
-ms-transform: rotate(45deg);
}
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;
}
}
}
li:first-child {
border-left: 1px solid #e3e3e3;
background: #e3e3e3;
}
}
}
}
.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;
/* 激活后，高亮背景 */
.active {
background: #51d2b7;
}
</style>
\ No newline at end of file
channel-access/src/views/pages/selftmreg/SelftmregTabButtonPrice.vue deleted 100644 → 0
<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