Commit cf07e95d by 任建

rj

parent 0d01409c
......@@ -221,10 +221,18 @@ module.exports = {
"isMenu": false,
"label": "登录",
"isctl": "no"
},
},
],
},
"bizs": {
"userlogin": { "title": "验证码登录", "config": null, "path": "/userlogin", "comname": "userlogin" },
"order": { "title": "我的订单", "config": null, "path": "/order", "comname": "order" },
"invoice": { "title": "代开发票", "config": null, "path": "/invoice", "comname": "invoice" },
"account": { "title": "代理记账售卖", "config": null, "path": "/account", "comname": "account" },
"added": { "title": "个体增值售卖", "config": null, "path": "/added", "comname": "added" },
"registration": { "title": "个体注册售卖", "config": null, "path": "/registration", "comname": "registration" },
"employed": { "title": "个体户商城", "config": null, "path": "/employed", "comname": "employed" },
"OAjdcompany": { "title": "后台首页", "config": null, "path": "/:channel/OAjdcompany", "comname": "OAjdcompany" },
"OAjdlist": { "title": "后台首页", "config": null, "path": "/:channel/OAjdlist", "comname": "OAjdlist" },
"OAjddetails": { "title": "后台首页", "config": null, "path": "/:channel/OAjddetails", "comname": "OAjddetails" },
......
......@@ -6,6 +6,7 @@
<meta name="keywords" content="PAAS 开放平台">
<meta name="baidu-site-verification" content="lATAxZAm8y" />
<meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=0.8, user-scalable=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title id="idtitle">京东云商标注册服务</title>
<!-- <%=app?app.name:'应用未启用'%> -->
<link rel="stylesheet" href="/css/ele/ele2.12.0.css">
......@@ -22,7 +23,7 @@
<script src="/js/vue/axios.min.js"></script>
<script src="/js/vue/jquery.min.js"></script>
<!-- 京东公共头部和尾部js链接 -->
<script src="http://www.jdcloud.com/public/js/portalBar.js"></script>
<!-- <script src="http://www.jdcloud.com/public/js/portalBar.js"></script> -->
<script>
var appinfo = JSON.parse(unescape('<%=appinfo?appinfo:null%>'));
//缓存当前的基础组件列表
......
This source diff could not be displayed because it is too large. You can view the blob instead.
.account{
width: 100%;
height: 100%;
font-size: 14px;
display: flex;
flex-direction: column;
}
.account-header{
width: 100%;
height: .78rem;
background: #FAF6F7;
display: flex;
}
.account-header>span{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.account-header>span>img{
width: .17rem;
height: .3rem;
}
.account-header>p{
flex: 8;
display: flex;
justify-content: center;
align-items: center;
font-size:.3rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(19,19,19,1);
}
.account-main{
flex: 1;
overflow: auto;
background: #F1F1F1;
}
.account-footer{
height: 1.1rem;
display: flex;
}
.footer-left{
flex: 1;
padding: .3rem;
display: flex;
}
.footer-left>p{
font-size:.32rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(55,55,58,1);
line-height:.45rem;
}
.footer-left>span{
font-size:.36rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,106,0,1);
line-height:.5rem;
}
.footer-right{
width: 3.3rem;
height: 100%;
}
.footer-right>button{
width: 100%;
height: 100%;
background: #FF6A00;
border:1px solid #FF6A00;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
outline: none;
}
.account-main-items{
width: 100%;
}
.account-main-item{
width: 100%;
}
.account-main-item>div{
height: .77rem;
box-sizing: border-box;
padding: .19rem .3rem;
font-size:.28rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(57,56,61,1);
}
.account-main-item>.item-inp{
width: 100%;
height: 1.13rem;
padding: .35rem .3rem;
margin-bottom: 1px;
background: #fff;
}
.account-main-item>.item-inp>p{
float: left;
}
.item-inp>p>span{
color: #f00;
}
.item-inp>input,.item-inp>h4,.item-inp>div{
float: right;
margin: 0;
}
.account-main-item>.item-inp>input{
min-width: 5rem;
height: .4rem;
border: none;
outline: none;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
}
.item-inp>h4{
height:.4rem;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(147,147,147,1);
}
.item-inp>h4>img{
width: .12rem;
height: .21rem;
margin-left: .2rem;
}
.item-inp>div{
width:3rem;
height:.56rem;
border:1px solid rgba(170,170,170,1);
display: flex;
}
.item-inp>div>span{
width: .6rem;
height: 100%;
display: flex;
line-height: .5rem;
justify-content: center;
font-size:.32rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(55,55,58,1);
}
.item-inp>div>span:first-child{
border-right: 1px solid #AAAAAA;
}
.item-inp>div>span:last-child{
border-left: 1px solid #AAAAAA;
}
.item-inp>div>p{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(55,55,58,1);
}
\ No newline at end of file
<div class="account">
<div class="account-header">
<span @click="$router.go(-1)"><img src="/imgs/leftjian.png" alt=""></span>
<p>购买产品</p>
<span></span>
</div>
<div class="account-main">
<div class="account-main-items">
<div class="account-main-item">
<div>用户信息</div>
<div class="item-inp">
<p>姓名</p>
<input type="text" placeholder="请输入您的姓名" v-model="name">
</div>
<div class="item-inp">
<p><span>*</span>手机号</p>
<input type="text" placeholder="请输入手机号,方便我们与您联系" v-model="phone">
</div>
<div class="item-inp">
<p>邮箱</p>
<input type="text" placeholder="请输入邮箱,方便我们给您发送文件" v-model="email">
</div>
</div>
<div class="account-main-item">
<div>服务信息</div>
<div class="item-inp">
<p>服务名称</p>
<h4>代理记账</h4>
</div>
<div class="item-inp">
<p>服务内容</p>
<h4>代理记账 /汇算清缴 /申报税款 /工商年报</h4>
</div>
<div class="item-inp">
<p>记账类型</p>
<h4 @click="typeChange()">{{type}}<img src="/imgs/rightjian.png" alt=""></h4>
</div>
<div class="item-inp">
<p>购买方式</p>
<h4>按年购买</h4>
</div>
<div class="item-inp">
<p>购买数量</p>
<div>
<span @click="reduceCount()">-</span>
<p>{{count}}</p>
<span @click="addCount()">+</span>
</div>
</div>
</div>
</div>
</div>
<div class="account-footer">
<div class="footer-left">
<p>共1件,合计:</p>
<span>¥{{money}}</span>
</div>
<div class="footer-right">
<button @click="submit">提交订单</button>
</div>
</div>
<div class="cityDailog" v-show="dailog1" @click.stop="typeShow()">
<ul class="dailogList">
<li v-for="item in typeList" @click.stop="typeListCheckout(item)" :class="type === item ? \'active\' : \'\'">
{{item}}
</li>
</ul>
</div>
<div class="submitDailog" v-show="dailog2">
<div class="payment">
<div class="dailog-header">
<span @click.stop="submitShow()">×</span>
<p>确认付款</p>
<span></span>
</div>
<div class="money">
<p><span>{{money.toFixed(2)}}</span></p>
</div>
<div class="futype"><p>付款方式</p><span>招商银行(8888)<img src="/imgs/rightjian.png" alt=""></span></div>
<div class="lijizhifu">
<button>立即付款</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
{
template: '${tmpl}',
data: function() {
return {
name:null,
phone:null,
email:null,
money:null,
count:1,
num:2000,
type: "小规模",
typeList: ["小规模","一般人"],
dailog1:false,
dailog2:false
}
},
mounted: function() {
},
created: function() {
this.money = this.num;
},
methods: {
addCount(){
this.count++;
this.money = this.count * this.num;
},
reduceCount(){
if(this.count <= 1)return;
this.count--;
this.money = this.count * this.num;
},
typeChange(){
this.dailog1 = true;
},
typeShow(){
this.dailog1 = false;
},
typeListCheckout(type){
this.dailog1 = false;
this.type = type;
},
submitShow(){
this.dailog2 = false;
},
submit(){
let resPhone = /^1[3456789]\d{9}$/;
if(!resPhone.test(this.phone)){
this.$message({
message: '手機號輸入不正確',
type: 'warning'
});
return;
}
this.dailog2 = true;
}
},
vname: "gsb-account"
}
.added{
width: 100%;
height: 100%;
font-size: 14px;
display: flex;
flex-direction: column;
}
.added-header{
width: 100%;
height: .78rem;
background: #FAF6F7;
display: flex;
}
.added-header>span{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.added-header>span>img{
width: .17rem;
height: .3rem;
}
.added-header>p{
flex: 8;
display: flex;
justify-content: center;
align-items: center;
font-size:.3rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(19,19,19,1);
}
.added-main{
flex: 1;
overflow: auto;
background: #F1F1F1;
}
.added-footer{
height: 1.1rem;
display: flex;
}
.footer-left{
flex: 1;
padding: .3rem;
display: flex;
}
.footer-left>p{
font-size:.32rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(55,55,58,1);
line-height:.45rem;
}
.footer-left>span{
font-size:.36rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,106,0,1);
line-height:.5rem;
}
.footer-right{
width: 3.3rem;
height: 100%;
}
.footer-right>button{
width: 100%;
height: 100%;
background: #FF6A00;
border:1px solid #FF6A00;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
outline: none;
}
.added-main-items{
width: 100%;
}
.added-main-item{
width: 100%;
}
.added-main-item>div{
height: .77rem;
box-sizing: border-box;
padding: .19rem .3rem;
font-size:.28rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(57,56,61,1);
}
.added-main-item>.item-inp{
width: 100%;
height: 1.13rem;
padding: .35rem .3rem;
margin-bottom: 1px;
background: #fff;
}
.added-main-item>.item-inp>p{
float: left;
}
.item-inp>p>span{
color: #f00;
}
.item-inp>input,.item-inp>h4,.item-inp>div{
float: right;
margin: 0;
}
.added-main-item>.item-inp>input{
min-width: 5rem;
height: .4rem;
border: none;
outline: none;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
}
.item-inp>h4{
height:.4rem;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(147,147,147,1);
}
.item-inp>h4>img{
width: .12rem;
height: .21rem;
margin-left: .2rem;
}
.item-inp>div{
width:3rem;
height:.56rem;
border:1px solid rgba(170,170,170,1);
display: flex;
}
.item-inp>div>span{
width: .6rem;
height: 100%;
display: flex;
line-height: .5rem;
justify-content: center;
font-size:.32rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(55,55,58,1);
}
.item-inp>div>span:first-child{
border-right: 1px solid #AAAAAA;
}
.item-inp>div>span:last-child{
border-left: 1px solid #AAAAAA;
}
.item-inp>div>p{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(55,55,58,1);
}
\ No newline at end of file
<div class="added">
<div class="added-header">
<span @click="$router.go(-1)"><img src="/imgs/leftjian.png" alt=""></span>
<p>购买产品</p>
<span></span>
</div>
<div class="added-main">
<div class="added-main-items">
<div class="added-main-item">
<div>用户信息</div>
<div class="item-inp">
<p>姓名</p>
<input type="text" placeholder="请输入您的姓名" v-model="name">
</div>
<div class="item-inp">
<p><span>*</span>手机号</p>
<input type="text" placeholder="请输入手机号,方便我们与您联系" v-model="phone">
</div>
<div class="item-inp">
<p>邮箱</p>
<input type="text" placeholder="请输入邮箱,方便我们给您发送文件" v-model="email">
</div>
</div>
<div class="added-main-item">
<div>服务信息</div>
<div class="item-inp">
<p>服务名称</p>
<h4>个体户增值服务</h4>
</div>
<div class="item-inp">
<p>服务内容</p>
<h4>刻章办理 /银行开户 /税务报道</h4>
</div>
<div class="item-inp">
<p><span>*</span>注册城市</p>
<input type="text" placeholder="请输入办理地区" v-model="city">
</div>
<div class="item-inp">
<p>购买方式</p>
<h4>按次购买</h4>
</div>
<div class="item-inp">
<p>购买数量</p>
<div>
<span @click="reduceCount()">-</span>
<p>{{count}}</p>
<span @click="addCount()">+</span>
</div>
</div>
</div>
</div>
</div>
<div class="added-footer">
<div class="footer-left">
<p>共1件,合计:</p>
<span>¥{{money}}</span>
</div>
<div class="footer-right">
<button @click="submit">提交订单</button>
</div>
</div>
<div class="submitDailog" v-show="dailog1">
<div class="payment">
<div class="dailog-header">
<span @click.stop="submitShow()">×</span>
<p>确认付款</p>
<span></span>
</div>
<div class="money">
<p><span>{{money.toFixed(2)}}</span></p>
</div>
<div class="futype"><p>付款方式</p><span>招商银行(8888)<img src="/imgs/rightjian.png" alt=""></span></div>
<div class="lijizhifu">
<button>立即付款</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
{
template: '${tmpl}',
data: function() {
return {
name:null,
phone:null,
email:null,
city:null,
money:null,
count:1,
num:2000,
dailog1:false,
}
},
mounted: function() {
},
created: function() {
this.money = this.num;
},
methods: {
addCount(){
this.count++;
this.money = this.count * this.num;
},
reduceCount(){
if(this.count <= 1)return;
this.count--;
this.money = this.count * this.num;
},
submitShow(){
this.dailog1 = false;
},
submit(){
let resPhone = /^1[3456789]\d{9}$/;
if(!resPhone.test(this.phone)){
this.$message({
message: '手機號輸入不正確',
type: 'warning'
});
return;
}
if(!this.city){
this.$message({
message: '請輸入地址',
type: 'warning'
});
return;
}
this.dailog1 = true;
}
},
vname: "gsb-added"
}
html,body,#app {
width: 100%;
height: 100%;
font-size: calc(100/750*100vw);
}
button{
outline: none;
}
.employed{
width: 100%;
height: 100%;
font-size: 14px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.employed-header{
width: 100%;
height: .78rem;
background: #F4F4F4;
display: flex;
justify-content: center;
align-items: center;
font-size:.3rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(19,19,19,1);
}
.employed-main{
flex: 1;
overflow: auto;
background: #F1F1F1;
}
.employed-footer{
width:100%;
height:1.45rem;
}
.employed-footer>img{
width: 100%;
height: 100%;
}
.banner{
width: 100%;
height: 5.65rem;
box-sizing: border-box;
padding: .36rem;
background: url("/imgs/banner.png") no-repeat;
background-size: 100%;
}
.banner>h1{
color:#fff;
font-size: .58rem;
margin: .19rem .19rem .3rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
.banner>p{
color:#fff;
font-size: .24rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
line-height: .5rem;
}
.banner>h3{
color:#EF8E41;
font-size: .3rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
margin: .30rem .19rem;
}
.banner>h3>span{
color:#FF6A00;
font-size: .46rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
}
.banner>div{
display: flex;
}
.banner>div>button{
width: 2.18rem;
height: .66rem;
background:#FF6A00;
color: #FBFBFB;
font-size:.26rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
border: 1px solid #FF6A00;
}
.banner>div>p{
width: 2.18rem;
height: .66rem;
display: flex;
justify-content: center;
align-items: center;
color: #FF6A00;
font-size:.26rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
}
.smfu{
width: 100%;
height: 1.9rem;
display: flex;
justify-content: center;
align-items: center;
font-size: .5rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(47,47,47,1);
background: url("/imgs/main.png") no-repeat;
background-size: 100%;
}
.employed-items{
padding: 0 .18rem;
box-sizing: border-box;
}
.employed-item{
width: 100%;
margin-bottom: .6rem;
box-shadow:0px 2px 26px 0px rgba(0,0,0,0.14);
}
.item-main{
width: 100%;
padding: .5rem .4rem;
background: #fff;
box-sizing: border-box;
}
.employed-item>hr{
width: 100%;
height: .1rem;
margin: 0;
background: #343E3A;
border: none;
}
.item-main-header{
margin-top: .05rem;
height: .5rem;
margin-bottom: 0.1rem;
}
.item-main-header>h3{
margin: 0;
float: left;
font-size:.36rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(59,59,59,1);
line-height:.5rem;
}
.item-main-header>p{
float: right;
width:2.3rem;
height:.42rem;
border:1px solid rgba(255,106,0,1);
font-size:.24rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(255,106,0,1);
line-height:.42rem;
text-align: center;
}
.item-main>h5{
font-size:.24rem;
margin: 0;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(121,121,121,1);
line-height:.33rem;
}
.item-main>hr{
margin: .35rem 0;
height: 1px;
background: #D6D6D6;
border: none;
}
.p-item{
margin: .26rem 0;
}
.p-item>p{
font-size:.24rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(34,34,34,1);
line-height:.33rem;
padding: .05rem 0;
}
.p-item>p>img{
width: .2rem;
height: .2rem;
margin-right: .25rem;
}
.item-main>h3{
margin: .2rem 0;
height:.5rem;
font-size:.3rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:#FF6A00;
line-height:.42rem;
}
.item-main>h3>span{
font-size: .36rem;
}
.item-main>button{
width: 100%;
height:.66rem;
border: 1px solid #FF6A00;
background:#FF6A00;
color:#fff;
}
.even-item{
display: flex;
flex-wrap: wrap;
}
.even-item>p{
width: 50%;
}
\ No newline at end of file
<div class="employed">
<div class="employed-header">
公司宝个体户服务
</div>
<div class="employed-main">
<div class="banner">
<h1>个体户注册</h1>
<p>· 无需再购买地址,一价全含 </p>
<p>· 全程电子化登记,可远程异地办理,最快3天出照 </p>
<p>· 服务包括:园区审核、刻章备案、银行开户、税务报道</p>
<h3><span>3000</span>元/次</h3>
<div>
<button @click="goregistration()">立即购买</button>
<p>我的订单</p>
</div>
</div>
<div class="smfu">售卖服务</div>
<div class="employed-items">
<div class="employed-item">
<hr>
<div class="item-main">
<div class="item-main-header">
<h3>个体户增值服务</h3>
<p>阿里个体注册专享</p>
</div>
<h5>已有营业执照的个体户、企业适用</h5>
<hr>
<h5>服务包括:</h5>
<div class="p-item">
<p><img src="/imgs/duihao.png" alt=""><span>刻章备案</span></p>
<p><img src="/imgs/duihao.png" alt=""><span>银行开户</span></p>
<p><img src="/imgs/duihao.png" alt=""><span>税务报道</span></p>
</div>
<h3><span>2000</span>元/次</h3>
<button @click="goadded()">立即购买</button>
</div>
</div>
<div class="employed-item">
<hr>
<div class="item-main">
<div class="item-main-header">
<h3>代理记账</h3>
</div>
<h5>已开银行账户、已税务报道的个体、企业适用</h5>
<hr>
<h5>服务包括:</h5>
<div class="p-item even-item">
<p><img src="/imgs/duihao.png" alt=""><span>代理记账</span></p>
<p><img src="/imgs/duihao.png" alt=""><span>申报税款</span></p>
<p><img src="/imgs/duihao.png" alt=""><span>汇算清缴</span></p>
<p><img src="/imgs/duihao.png" alt=""><span>工商年报</span></p>
</div>
<h3><span>2000</span>元/年</h3>
<button @click="goaccount()">立即购买</button>
</div>
</div>
<div class="employed-item">
<hr>
<div class="item-main">
<div class="item-main-header">
<h3>代开发票</h3>
</div>
<h5>已开银行账户、已税务报道的个体、企业适用</h5>
<hr>
<h5>服务包括:</h5>
<div class="p-item even-item">
<p><img src="/imgs/duihao.png" alt=""><span>购买发票</span></p>
<p><img src="/imgs/duihao.png" alt=""><span>开具发票</span></p>
<p><img src="/imgs/duihao.png" alt=""><span>发票寄送</span></p>
<p><img src="/imgs/duihao.png" alt=""><span>抄报反写</span></p>
</div>
<h3><span>9999</span>元/年</h3>
<button @click="goinvoice()">立即购买</button>
</div>
</div>
</div>
</div>
<div class="employed-footer">
<img src="/imgs/phone.png" alt="">
</div>
</div>
\ No newline at end of file
{
template: '${tmpl}',
data: function() {
return {
}
},
mounted: function() {
},
created: function() {
},
methods: {
goregistration(){
this.$root.pushx({
title: "",
name: "/registration"
});
},
goadded(){
this.$root.pushx({
title: "",
name: "/added"
});
},
goaccount(){
this.$root.pushx({
title: "",
name: "/account"
});
},
goinvoice(){
this.$root.pushx({
title: "",
name: "/invoice"
});
},
},
vname: "gsb-employed"
}
.invoice{
width: 100%;
height: 100%;
font-size: 14px;
display: flex;
flex-direction: column;
}
.invoice-header{
width: 100%;
height: .78rem;
background: #FAF6F7;
display: flex;
}
.invoice-header>span{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.invoice-header>span>img{
width: .17rem;
height: .3rem;
}
.invoice-header>p{
flex: 8;
display: flex;
justify-content: center;
align-items: center;
font-size:.3rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(19,19,19,1);
}
.invoice-main{
flex: 1;
overflow: auto;
background: #F1F1F1;
}
.invoice-footer{
height: 1.1rem;
display: flex;
}
.footer-left{
flex: 1;
padding: .3rem;
display: flex;
}
.footer-left>p{
font-size:.32rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(55,55,58,1);
line-height:.45rem;
}
.footer-left>span{
font-size:.36rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,106,0,1);
line-height:.5rem;
}
.footer-right{
width: 3.3rem;
height: 100%;
}
.footer-right>button{
width: 100%;
height: 100%;
background: #FF6A00;
border:1px solid #FF6A00;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
outline: none;
}
.invoice-main-items{
width: 100%;
}
.invoice-main-item{
width: 100%;
}
.invoice-main-item>div{
height: .77rem;
box-sizing: border-box;
padding: .19rem .3rem;
font-size:.28rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(57,56,61,1);
}
.invoice-main-item>.item-inp{
width: 100%;
height: 1.13rem;
padding: .35rem .3rem;
margin-bottom: 1px;
background: #fff;
}
.invoice-main-item>.item-inp>p{
float: left;
}
.item-inp>p>span{
color: #f00;
}
.item-inp>input,.item-inp>h4,.item-inp>div{
float: right;
margin: 0;
}
.invoice-main-item>.item-inp>input{
min-width: 5rem;
height: .4rem;
border: none;
outline: none;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
}
.item-inp>h4{
height:.4rem;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(147,147,147,1);
}
.item-inp>h4>img{
width: .12rem;
height: .21rem;
margin-left: .2rem;
}
.item-inp>div{
width:3rem;
height:.56rem;
border:1px solid rgba(170,170,170,1);
display: flex;
}
.item-inp>div>span{
width: .6rem;
height: 100%;
display: flex;
line-height: .5rem;
justify-content: center;
font-size:.32rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(55,55,58,1);
}
.item-inp>div>span:first-child{
border-right: 1px solid #AAAAAA;
}
.item-inp>div>span:last-child{
border-left: 1px solid #AAAAAA;
}
.item-inp>div>p{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(55,55,58,1);
}
\ No newline at end of file
<div class="invoice">
<div class="invoice-header">
<span @click="$router.go(-1)"><img src="/imgs/leftjian.png" alt=""></span>
<p>购买产品</p>
<span></span>
</div>
<div class="invoice-main">
<div class="invoice-main-items">
<div class="invoice-main-item">
<div>用户信息</div>
<div class="item-inp">
<p>姓名</p>
<input type="text" placeholder="请输入您的姓名" v-model="name">
</div>
<div class="item-inp">
<p><span>*</span>手机号</p>
<input type="text" placeholder="请输入手机号,方便我们与您联系" v-model="phone">
</div>
<div class="item-inp">
<p>邮箱</p>
<input type="text" placeholder="请输入邮箱,方便我们给您发送文件" v-model="email">
</div>
<div class="item-inp">
<p>联系地址</p>
<input type="text" placeholder="如需邮寄纸质发票,请输入详细地址" v-model="address">
</div>
</div>
<div class="invoice-main-item">
<div>服务信息</div>
<div class="item-inp">
<p>服务名称</p>
<h4>代开发票</h4>
</div>
<div class="item-inp">
<p>服务内容</p>
<h4>购买发票 /开具发票 /发票寄送 /抄报反写</h4>
</div>
<div class="item-inp">
<p><span>*</span>开票类型</p>
<h4 @click="fapiaoChange()">{{fapiao}}<img src="/imgs/rightjian.png" alt=""></h4>
</div>
<div class="item-inp">
<p><span>*</span>购买方式</p>
<h4 @click="typeChange()">{{type}}<img src="/imgs/rightjian.png" alt=""></h4>
</div>
<div class="item-inp">
<p>购买数量</p>
<div>
<span @click="reduceCount()">-</span>
<p>{{count}}</p>
<span @click="addCount()">+</span>
</div>
</div>
</div>
</div>
</div>
<div class="invoice-footer">
<div class="footer-left" v-if="type == \'按年购买\'">
<p>共1件,合计:</p>
<span>¥{{money}}</span>
</div>
<div class="footer-left" v-if="type == \'按次购买\'">
<p style="font-size:.3rem;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(147,147,147,1);line-height:.5rem;">按开票额的2%收费&nbsp;</p>
<span>¥0</span>
</div>
<div class="footer-right">
<button @click="submit()">提交订单</button>
</div>
</div>
<div class="cityDailog" v-show="dailog1" @click.stop="fapiaoShow()">
<ul class="dailogList">
<li v-for="item in fapiaoList" @click.stop="fapiaoListCheckout(item)" :class="fapiao === item ? \'active\' : \'\'">
{{item}}
</li>
</ul>
</div>
<div class="cityDailog" v-show="dailog2" @click.stop="typeShow()">
<ul class="dailogList">
<li v-for="item in typeList" @click.stop="typeListCheckout(item)" :class="type === item ? \'active\' : \'\'">
{{item}}
</li>
</ul>
</div>
<div class="submitDailog" v-show="dailog3">
<div class="payment">
<div class="dailog-header">
<span @click.stop="submitShow()">×</span>
<p>确认付款</p>
<span></span>
</div>
<div class="money">
<p><span>{{money.toFixed(2)}}</span></p>
</div>
<div class="futype"><p>付款方式</p><span>招商银行(8888)<img src="/imgs/rightjian.png" alt=""></span></div>
<div class="lijizhifu">
<button>立即付款</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
{
template: '${tmpl}',
data: function() {
return {
name:null,
phone:null,
email:null,
address:null,
money:null,
count:1,
num:12500,
fapiao:"代开普通发票",
fapiaoList: ["代开普通发票","代开专用发票"],
type: "按次购买",
typeList: ["按次购买","按年购买"],
dailog1:false,
dailog2:false,
dailog3:false
}
},
mounted: function() {
},
created: function() {
this.money = this.num;
},
methods: {
addCount(){
this.count++;
this.money = this.count * this.num;
},
reduceCount(){
if(this.count <= 1)return;
this.count--;
this.money = this.count * this.num;
},
fapiaoChange(){
this.dailog1 = true;
},
fapiaoListCheckout(fapiao){
this.dailog1 = false;
this.fapiao = fapiao;
},
fapiaoShow(){
this.dailog1 = false;
},
typeChange(){
this.dailog2 = true;
},
typeShow(){
this.dailog2 = false;
},
typeListCheckout(type){
this.dailog2 = false;
this.type = type;
this.count = 1;
this.money = this.count * this.num;
},
submitShow(){
this.dailog3 = false;
},
submit(){
let resPhone = /^1[3456789]\d{9}$/;
if(!resPhone.test(this.phone)){
this.$message({
message: '手機號輸入不正確',
type: 'warning'
});
return;
}
this.dailog3 = true;
}
},
vname: "gsb-invoice"
}
.order{
width: 100%;
height: 100%;
font-size: 14px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.order-header{
width: 100%;
height: .78rem;
display: flex;
background: #FAF6F7;
}
.order-header>span{
flex: 1;
display: flex;
justify-content: center;
align-items: center
}
.order-header>p{
flex: 8;
}
.order-header>span>img{
width: .17rem;
height: .3rem;
}
.order-header>p{
flex: 8;
display: flex;
justify-content: center;
align-items: center;
font-size:.3rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(19,19,19,1);
}
.order-main{
flex: 1;
background: #F1F1F1;
display: flex;
flex-direction: column;
}
.typeList{
width: 100%;
display: flex;
box-sizing: border-box;
flex-direction: column;
}
.typeList-top{
width: 100%;
height: .79rem;
border-top: 1px solid #D4D4D4;
border-bottom: 1px solid #D4D4D4;
display: flex;
box-sizing: border-box;
}
.typeList-top>p{
flex: 1;
border-right: 1px solid #D4D4D4;
display: flex;
justify-content: center;
align-items: center;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(89,95,98,1);
background: #fff;
}
.typeList-top>p:last-child{
border-right: none;
}
.order-items{
flex: 1;
overflow: auto;
position: relative
}
.order-item{
width: 100%;
padding: .2rem .3rem;
background: #fff;
margin-top: .2rem;
box-sizing: border-box;
position: relative;
}
.order-item>div{
margin-bottom: .06rem;
height:.4rem;
}
.order-item>div>h2{
margin: 0;
float: left;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(45,45,45,1);
line-height:.4rem;
}
.order-item>div>p{
float: left;
}
.order-item>div>p>span{
display: inline-block;
margin-left: .2rem;
padding: 0 .1rem;
background: #FF6A00;
font-size:.18rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
}
.order-item>h5{
margin: 0;
margin-bottom: .02rem;
font-size:.24rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(176,176,176,1);
line-height:.33rem;
}
.order-item>p{
position: absolute;
top: .55rem;
right: .3rem;
font-size:.24rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,106,0,1);
line-height:.33rem;
}
.order-item>span{
position: absolute;
top: 1rem;
right: .3rem;
font-size:.24rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(176,176,176,1);
line-height:.33rem;
}
.dailogTop{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.46);
z-index: 999;
}
.dailogTop>ul{
width: 100%;
}
.dailogTop>ul>li{
width: 100%;
padding: .21rem .3rem;
box-sizing: border-box;
color: #2D2D2D;
font-size:.26rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
line-height:.37rem;
background-color: #fff;
border-bottom: 1px solid #D4D4D4;
}
.activeTop{
color: #fff !important;
background: #FF6A00 !important;
}
\ No newline at end of file
<div class="order">
<div class="order-header">
<span @click="$router.go(-1)"><img src="/imgs/leftjian.png" alt=""></span>
<p>我的订单</p>
<span></span>
</div>
<div class="order-main">
<div class="typeList">
<div class="typeList-top">
<p @click="typeTop(i)" v-for="(item,i) in typeList"
:class="index == i ? \'activeTop\' : \'\'">{{item}} <i
:class="index == i ? \'el-icon-arrow-up\' : \'el-icon-arrow-down\'"></i>
</p>
</div>
</div>
<div class="order-items">
<div @click="index = null" v-for="(item,i) in dailogTop" v-show="item.type == index"
class="dailogTop">
<ul>
<li @click.stop="iteClick(ind)" v-for="(ite,ind) in item.tList"
:class="item.typeIndex == ind ? \'active\' : \'\'">{{ite}}</li>
</ul>
</div>
<div class="order-item" v-for="(item,index) in orderList">
<div>
<h2>{{item.name}}</h2>
<p><span>{{item.state}}</span></p>
</div>
<h5 v-if="item.type == 1">注册城市:{{item.registerCity}}</h5>
<h5 v-if="item.type == 2">办理城市:{{item.manageCity}}</h5>
<h5 v-if="item.type == 3">记账类型:{{item.accountType}}</h5>
<h5 v-if="item.type == 4">开票类型:{{item.invoiceType}}</h5>
<h5>下单时间:{{item.time}}</h5>
<p>¥{{item.money.toFixed(2)}}</p>
<span>×{{item.num}}</span>
</div>
</div>
</div>
</div>
\ No newline at end of file
{
template: '${tmpl}',
data: function() {
return {
typeList: ["订单类型","订单状态"],
order: [{
type: 1,
name: '个体户注册',
registerCity: '上海市',
time: '2019-11-06 14:13:01',
money: 3000,
num: 2,
state: '已支付'
},{
type: 2,
name: '个体增值服务',
manageCity: '北京市',
time: '2019-11-06 14:13:01',
money: 2000,
num: 1,
state: '已支付'
},{
type: 3,
name: '代理记账',
accountType: '小规模',
time: '2019-11-06 14:13:01',
money: 2000,
num: 1,
state: '已支付'
},{
type: 4,
name: '代开发票',
invoiceType: '普通发票',
time: '2019-11-06 14:13:01',
money: 2000,
num: 1,
state: '已支付'
}],
orderList:[],
dailogTop:[{
type: 0,
tList: ['全部订单','个体户注册','个体增值服务','代理记账','代开发票'],
typeIndex: 0,
},{
type: 1,
tList: ['全部状态','待付款','待服务','办理中','已完成','已取消'],
typeIndex: 0,
}],
index: null,
}
},
mounted: function() {
},
created: function() {
this.orderList = this.order;
},
methods: {
typeTop(i){
if(this.index >=0 && this.index == i){
this.index = null;
return;
};
this.index = i;
},
iteClick(i){
this.dailogTop[this.index].typeIndex = i;
this.orderList = this.order.filter(item => {
if(this.dailogTop[0].typeIndex == 0 && this.dailogTop[1].typeIndex == 0){
return item;
}
else if(this.dailogTop[0].typeIndex == 0 && this.dailogTop[1].tList[this.dailogTop[1].typeIndex] == item.state){
return item;
}
else if(this.dailogTop[0].tList[this.dailogTop[0].typeIndex] == item.name && this.dailogTop[1].typeIndex == 0){
return item;
}
else if(this.dailogTop[0].tList[this.dailogTop[0].typeIndex] == item.name && this.dailogTop[1].tList[this.dailogTop[1].typeIndex] == item.state){
return item;
}
});
}
},
vname: "gsb-order"
}
.registration{
width: 100%;
height: 100%;
font-size: 14px;
display: flex;
flex-direction: column;
}
.registration-header{
width: 100%;
height: .78rem;
background: #FAF6F7;
display: flex;
}
.registration-header>span{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.registration-header>span>img{
width: .17rem;
height: .3rem;
}
.registration-header>p{
flex: 8;
display: flex;
justify-content: center;
align-items: center;
font-size:.3rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(19,19,19,1);
}
.registration-main{
flex: 1;
overflow: auto;
background: #F1F1F1;
}
.registration-footer{
height: 1.1rem;
display: flex;
}
.footer-left{
flex: 1;
padding: .3rem;
display: flex;
}
.footer-left>p{
font-size:.32rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(55,55,58,1);
line-height:.45rem;
}
.footer-left>span{
font-size:.36rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,106,0,1);
line-height:.5rem;
}
.footer-right{
width: 3.3rem;
height: 100%;
}
.footer-right>button{
width: 100%;
height: 100%;
background: #FF6A00;
border:1px solid #FF6A00;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
outline: none;
}
.registration-main-items{
width: 100%;
}
.registration-main-item{
width: 100%;
}
.registration-main-item>div{
height: .77rem;
box-sizing: border-box;
padding: .19rem .3rem;
font-size:.28rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(57,56,61,1);
}
.registration-main-item>.item-inp{
width: 100%;
height: 1.13rem;
padding: .35rem .3rem;
margin-bottom: 1px;
background: #fff;
}
.registration-main-item>.item-inp>p{
float: left;
}
.registration-main-item>.item-inp>p>span{
color: #f00;
}
.item-inp>input,.item-inp>h4,.item-inp>div{
float: right;
margin: 0;
}
.registration-main-item>.item-inp>input{
min-width: 5rem;
height: .4rem;
border: none;
outline: none;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
}
.item-inp>h4{
height:.4rem;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(147,147,147,1);
}
.item-inp>h4>img{
width: .12rem;
height: .21rem;
margin-left: .2rem;
}
.item-inp>div{
width:3rem;
height:.56rem;
border:1px solid rgba(170,170,170,1);
display: flex;
}
.item-inp>div>span{
width: .6rem;
height: 100%;
display: flex;
line-height: .5rem;
justify-content: center;
font-size:.32rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(55,55,58,1);
}
.item-inp>div>span:first-child{
border-right: 1px solid #AAAAAA;
}
.item-inp>div>span:last-child{
border-left: 1px solid #AAAAAA;
}
.item-inp>div>p{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(55,55,58,1);
}
.cityDailog{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.46);
}
.dailogList{
width: 100%;
max-height: 6rem;
position: absolute;
left: 0;
bottom: 0;
background: #fff;
box-sizing: border-box;
overflow: auto;
}
.dailogList>li{
width: 100%;
height: .79rem;
padding: .21rem .3rem;
font-size:.26rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(45,45,45,1);
line-height:.37rem;
box-sizing: border-box;
border-top: 1px solid #D4D4D4;
}
.active{
color: #FF6A00 !important;
background: url("/imgs/duihao.png") no-repeat;
background-position: 6.94rem;
background-size: .26rem;
}
.submitDailog{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.46);
}
.payment{
width: 100%;
height: 6.73rem;
background: #fff;
position: absolute;
left: 0;
bottom: 0;
}
.dailog-header{
width: 100%;
height: 1.18rem;
display: flex;
border-bottom: 1px solid #D6D6D6;
box-sizing: border-box;
}
.dailog-header>span{
flex: 2;
display: flex;
justify-content: center;
align-items: center;
font-size: .5rem;
color: #7D7C81;
}
.dailog-header>p{
flex: 8;
display: flex;
justify-content: center;
align-items: center;
font-size:.33rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(34,34,34,1);
}
.money{
width: 100%;
height: 2.04rem;
border-bottom: 1px solid #D6D6D6;
display: flex;
justify-content: center;
align-items: center;
}
.money>p{
font-size: .36rem;
color: #222222;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
letter-spacing:1px;
}
.money>p>span{
font-size: .68rem;
}
.futype{
width: 100%;
height: 1rem;
border-bottom: 1px solid #D6D6D6;
padding: .3rem .26rem;
box-sizing: border-box;
}
.futype>p{
float: left;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(147,147,147,1);
}
.futype>span{
float: right;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(34,34,34,1);
}
.futype>span>img{
width: .12rem;
height: .21rem;
}
.lijizhifu{
padding: .3rem;
}
.lijizhifu>button{
margin-top: 1rem;
width: 100%;
height: .8rem;
background:rgba(255,106,0,1);
border-radius:2px;
border: 1px solid rgba(255,106,0,1);
color: #fff;
}
\ No newline at end of file
<div class="registration">
<div class="registration-header">
<span @click="$router.go(-1)"><img src="/imgs/leftjian.png" alt=""></span>
<p>购买产品</p>
<span></span>
</div>
<div class="registration-main">
<div class="registration-main-items">
<div class="registration-main-item">
<div>用户信息</div>
<div class="item-inp">
<p>姓名</p>
<input type="text" v-model="name" placeholder="请输入您的姓名">
</div>
<div class="item-inp">
<p><span>*</span>手机号</p>
<input type="phone" v-model="phone" placeholder="请输入手机号,方便我们与您联系">
</div>
<div class="item-inp">
<p>邮箱</p>
<input type="email" v-model="email" placeholder="请输入邮箱,方便我们给您发送文件">
</div>
</div>
<div class="registration-main-item">
<div>服务信息</div>
<div class="item-inp">
<p>服务名称</p>
<h4>个体户注册</h4>
</div>
<div class="item-inp">
<p>服务内容</p>
<h4>园区审核 /刻章办理 /银行开户 /税务报道</h4>
</div>
<div class="item-inp">
<p><span>*</span>注册城市</p>
<h4 @click="cityChange()">{{city}}<img src="/imgs/rightjian.png" alt=""></h4>
</div>
<div class="item-inp">
<p>购买方式</p>
<h4>{{type}}</h4>
</div>
<div class="item-inp">
<p>购买数量</p>
<div>
<span @click="reduceCount()">-</span>
<p>{{count}}</p>
<span @click="addCount()">+</span>
</div>
</div>
</div>
</div>
</div>
<div class="registration-footer">
<div class="footer-left">
<p>共1件,合计:</p>
<span>¥{{money}}</span>
</div>
<div class="footer-right">
<button @click="submit()">提交订单</button>
</div>
</div>
<div class="cityDailog" v-show="dailog1" @click.stop="cityShow()">
<ul class="dailogList">
<li v-for="item in dailogList" @click.stop="listCheckout(item)" :class="city === item ? \'active\' : \'\'">
{{item}}
</li>
</ul>
</div>
<div class="submitDailog" v-show="dailog2">
<div class="payment">
<div class="dailog-header">
<span @click.stop="submitShow()">×</span>
<p>确认付款</p>
<span></span>
</div>
<div class="money">
<p><span>{{money.toFixed(2)}}</span></p>
</div>
<div class="futype"><p>付款方式</p><span>招商银行(8888)<img src="/imgs/rightjian.png" alt=""></span></div>
<div class="lijizhifu">
<button>立即付款</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
{
template: '${tmpl}',
data: function() {
return {
name : null,
phone : null,
email : null,
city : "不限",
type : "按次购买",
count : 1,
money : 0,
num:3000,
dailog1: false,
dailogList: ["不限","上海地區","北京地區","四川地區","山東地區"],
dailog2: false,
}
},
mounted: function() {
this.money = this.num;
},
created: function() {
},
methods: {
addCount(){
this.count++;
this.money = this.count * this.num;
},
reduceCount(){
if(this.count <= 1)return;
this.count--;
this.money = this.count * this.num;
},
cityChange(){
this.dailog1 = true;
},
listCheckout(city){
this.dailog1 = false;
this.city = city;
},
cityShow(){
this.dailog1 = false;
},
submitShow(){
this.dailog2 = false;
},
submit(){
let resPhone = /^1[3456789]\d{9}$/;
if(!resPhone.test(this.phone)){
this.$message({
message: '手機號輸入不正確',
type: 'warning'
});
return;
}
this.dailog2 = true;
}
},
vname: "gsb-registration"
}
.userlogin{
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
font-size: 14px;
}
.userlogin-main{
flex: 1;
overflow: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: .6rem;
}
.username{
width: 100%;
height: 1rem;
display: flex;
}
.username>i{
flex: 1;
}
.username>div{
flex: 9;
}
.username>button{
width: 1rem;
height: .48rem;
font-size: .28rem;
line-height: .48rem;
background: #000;
}
\ No newline at end of file
<div class="userlogin">
<div class="order-header">
<span @click="$router.go(-1)"><img src="/imgs/leftjian.png" alt=""></span>
<p>验证码登录</p>
<span></span>
</div>
<div class="userlogin-main">
<div class="username"><i class="el-icon-s-custom"></i><div><input type="text"></div><button>获取验证码</button></div>
<div class="code"><i class="el-icon-s-finance"></i><div><input type="text"></div><span>36s</span></div>
<div class="pwdLogin"><span>密码登录</span></div>
<div class="btnLogin">登 录</div>
</div>
</div>
\ No newline at end of file
{
template: '${tmpl}',
data: function() {
return {
}
},
mounted: function() {
},
created: function() {
},
methods: {
},
vname: "gsb-userlogin"
}
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