|
|
@@ -1,5 +1,14 @@
|
|
|
<template>
|
|
|
<div class="bujiao">
|
|
|
+ <div class="p_head">
|
|
|
+ <img src="../../assets/image/payrollback_left@2x.png" class="leftIcon" alt="" @click="$router.replace('/index')">
|
|
|
+ <span>
|
|
|
+ <img src="../../assets/image/supplementaryHeadIcon@2x.png" class="HeadIcon" alt="">
|
|
|
+ <span>
|
|
|
+ 近三个月补缴
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
<div class="bujiaos">
|
|
|
<div class="bujiao-city">
|
|
|
补缴城市 <span style="float: right">{{data.cityname}}</span>
|
|
|
@@ -7,16 +16,26 @@
|
|
|
<div class="bujiao-hubie">
|
|
|
补缴户别 <span style="float: right">{{data.hubie}}</span>
|
|
|
</div>
|
|
|
+ <div class="backgroundColor"></div>
|
|
|
<div class="bujiao-leixing">
|
|
|
补缴类型 <span style="color: #9B9B9B;">(单选)</span>
|
|
|
<div class="leixing-box">
|
|
|
- <div class="box-con" v-for="(item,index) in data.menu" :class="{ red:data.changeRed == index}" @click="change(index,item.type)">
|
|
|
+ <!-- <div class="box-con" v-for="(item,index) in data.menu" :class="{ red:data.changeRed == index}" @click="change(index,item.type)">
|
|
|
{{item.name}}
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
+ <el-radio-group v-model="data.type">
|
|
|
+ <el-radio
|
|
|
+ v-for="(item,index) in data.menu"
|
|
|
+ :key="index"
|
|
|
+ :label="item.type"
|
|
|
+ @change="change(index,item.type)">
|
|
|
+ {{item.name}}
|
|
|
+ </el-radio>
|
|
|
+ </el-radio-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bujiao-input">
|
|
|
- 社保基数 <input class="input" type="text" placeholder=" 3613 " v-model="data.jishu">
|
|
|
+ 社保基数 <input class="input" type="text" placeholder=" 3613 " v-model="data.jishu" >
|
|
|
</div>
|
|
|
<div class="bujiao-input" v-if="data.jishusshow">
|
|
|
公积金基数 <input class="input" type="text" placeholder=" 2500 " v-model="data.jishus">
|
|
|
@@ -56,7 +75,10 @@
|
|
|
</div>
|
|
|
<div class="bujiao-bottom">
|
|
|
<p>应付款：<span style="color:#ed0000;font-size: 1.5rem;">￥{{data.zongtatal}}</span></p>
|
|
|
- <button @click="payment">去缴费</button>
|
|
|
+ <button @click="payment">
|
|
|
+ <img class="button-2-img" src="../../assets/image/payFoot@2x.png" alt="">
|
|
|
+ 去缴费
|
|
|
+ </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -187,7 +209,7 @@
|
|
|
}
|
|
|
|
|
|
change(index,type) {
|
|
|
- console.log(this.data.jishusshow)
|
|
|
+ console.log('this.data.jishusshow', this.data.jishusshow)
|
|
|
this.data.changeRed = index;
|
|
|
this.data.type = type
|
|
|
if(this.data.type == 3){
|
|
|
@@ -218,6 +240,30 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+ // 顶部导航
|
|
|
+ .p_head{
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ top: 1.5rem;
|
|
|
+ font-size: 2rem;
|
|
|
+ // font-family: 'PingFang SC';
|
|
|
+ margin-bottom: 3.667rem;
|
|
|
+ // font-weight: bold;
|
|
|
+ line-height: 1.5rem;
|
|
|
+ .leftIcon{
|
|
|
+ position: absolute;
|
|
|
+ left: 1.667rem;
|
|
|
+ top: 0.7rem;
|
|
|
+ width: 0.667rem;
|
|
|
+ }
|
|
|
+ .HeadIcon {
|
|
|
+ width: 2.5rem;
|
|
|
+ margin-right: 0.833rem;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
.bujiao{
|
|
|
background: #F8F8F8;
|
|
|
font-family:'HiraginoSansGB';
|
|
|
@@ -229,7 +275,7 @@
|
|
|
border-bottom: 1px solid #F6F6F6;
|
|
|
}
|
|
|
.bujiao-hubie{
|
|
|
- padding: 0 1.5rem;
|
|
|
+ padding: 0 1.5rem 1.5rem;
|
|
|
font-size: 1.3rem;
|
|
|
background: white;
|
|
|
line-height: 4rem;
|
|
|
@@ -238,7 +284,7 @@
|
|
|
.bujiao-leixing{
|
|
|
font-size: 1.3rem;
|
|
|
background: white;
|
|
|
- padding: 0.8rem 1.5rem ;
|
|
|
+ padding: 1.5rem 1.5rem 0.8rem;
|
|
|
border-bottom: 1px solid #F6F6F6;
|
|
|
.leixing-box{
|
|
|
padding-top: 1.5rem;
|
|
|
@@ -251,9 +297,20 @@
|
|
|
padding: 0.3rem 1rem;
|
|
|
}
|
|
|
.red{
|
|
|
- border: 1px solid #32C674;
|
|
|
- color: #32C674;
|
|
|
+ // border: 1px solid #32C674;
|
|
|
+ // color: #32C674;
|
|
|
+ // border-color: #66E3B0;
|
|
|
+ // background: #66E3B0;
|
|
|
+
|
|
|
+ }
|
|
|
+ /deep/.el-radio__input.is-checked .el-radio__inner {
|
|
|
+ border-color: #66E3B0;
|
|
|
+ background: #66E3B0;
|
|
|
}
|
|
|
+ /deep/.el-radio__input.is-checked+.el-radio__label {
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
.bujiao-input{
|
|
|
@@ -261,13 +318,19 @@
|
|
|
font-size: 1.3rem;
|
|
|
background: white;
|
|
|
border-bottom: 1px solid #F6F6F6;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
.input{
|
|
|
- border: none;
|
|
|
+ // border: none;
|
|
|
+ border: 1px solid #D1D1D1;
|
|
|
padding-left: 2rem;
|
|
|
- width: 24rem;
|
|
|
+ width: 8rem;
|
|
|
+ color: #999;
|
|
|
}
|
|
|
input::-webkit-input-placeholder {
|
|
|
- color: #b8b8b8;
|
|
|
+ // color: #b8b8b8;
|
|
|
+ color: #999;
|
|
|
}
|
|
|
}
|
|
|
.bujiao-mothy{
|
|
|
@@ -278,13 +341,17 @@
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
padding: 0.5rem 0 1rem;
|
|
|
+ justify-content: center;
|
|
|
.num-yuan{
|
|
|
- width: 3rem;
|
|
|
- height: 3rem;
|
|
|
+ // width: 3rem;
|
|
|
+ // height: 3rem;
|
|
|
+ width: 3.5rem;
|
|
|
+ height: 3.5rem;
|
|
|
margin: 1rem;
|
|
|
background: white;
|
|
|
border: 1px solid #cbcbcb;
|
|
|
- border-radius: 50%;
|
|
|
+ // border-radius: 50%;
|
|
|
+ border-radius: 0.833rem;
|
|
|
text-align: center;
|
|
|
color: #333333;
|
|
|
display: flex;
|
|
|
@@ -292,8 +359,10 @@
|
|
|
align-items: center;
|
|
|
}
|
|
|
.reds{
|
|
|
- background: #26c27e;
|
|
|
- border:1px solid #26c27e;
|
|
|
+ // background: #26c27e;
|
|
|
+ // border:1px solid #26c27e;
|
|
|
+ border:1px solid #5CE0A9;;
|
|
|
+ background: #5CE0A9;
|
|
|
color: white;
|
|
|
}
|
|
|
}
|
|
|
@@ -304,7 +373,8 @@
|
|
|
padding-top: 2rem;
|
|
|
margin-bottom: 2rem;
|
|
|
button{
|
|
|
- background: #10A442;
|
|
|
+ // background: #10A442;
|
|
|
+ background: #5CE0A9;
|
|
|
font-size: 1.3rem;
|
|
|
width: 25rem;
|
|
|
color: white;
|
|
|
@@ -321,7 +391,8 @@
|
|
|
background: #f8f8f8;
|
|
|
font-size: 1.3rem;
|
|
|
width: 25rem;
|
|
|
- color: #04b954;
|
|
|
+ // color: #04b954;
|
|
|
+ color: #5CE0A9;
|
|
|
border: none;
|
|
|
height: 3rem;
|
|
|
border-radius: 0.3rem;
|
|
|
@@ -378,13 +449,23 @@
|
|
|
font-size: 1.3rem;
|
|
|
}
|
|
|
button{
|
|
|
- background: #10A442;
|
|
|
+ // background: #10A442;
|
|
|
+ background: #5CE0A9;
|
|
|
font-size: 1.3rem;
|
|
|
color: white;
|
|
|
border: none;
|
|
|
height: 3.8rem;
|
|
|
width: 13rem;
|
|
|
+ .button-2-img{
|
|
|
+ width: 1.3rem;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ // 背景
|
|
|
+ .backgroundColor {
|
|
|
+ background-color: #EDF0F5;
|
|
|
+ width: 100%;
|
|
|
+ height: 1.25rem;
|
|
|
+ }
|
|
|
</style>
|
