Skip to content

H
hls-xcmg-vue-app
Commit cddb2351 authored by 李晓兵's avatar 李晓兵
Browse files
Options

'map'

parent 852bebf6
Hide whitespace changes
Inline Side-by-side
Showing with 545 additions and 545 deletions
src/pages/contractSigning/contract-detail.vue
View file @ cddb2351
<!--
* @Author: your name
* @Date: 2019-09-29 10:02:11
* @LastEditTime: 2019-10-21 14:00:54
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
-->
<template>
<h-view id="contract-details" class="public-style">
<div v-show="isshow" class="all">
<div class="prompt">
<div class="top">
<div><img src="@/assets/constractSigning/prompt.png" alt=""> <span>提示</span> </div>
<div>请前往【农行代扣授权书】界面完成银行卡信息录入！</div>
</div>
<div class="bottom" @click="isshow = !isshow">我知道了</div>
</div>
</div>
<h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()">
<span>合同详情</span>
</div>
</h-header>
<div class="tab-style">
<div :class="{'done':num === 1,'undone':num !== 1}" @click="num = 1;"><img :src="num === 1?check1:uncheck1">商务条件</div>
<div :class="{'done':num === 2,'undone':num !== 2}" @click="num = 2;"><img :src="num === 2?check2:uncheck2" >合同文本</div>
</div>
<h-content v-show="num === 1" class="business-condition">
<list-item :item-height="44" class="second-part">
<item>
<div slot="name" >商务政策</div>
<section slot="content">{{ conditionInfo.product_plan_id_n }}</section>
</item>
<item>
<div slot="name" >设备总价</div>
<section slot="content">{{ conditionInfo.equip_price | currency }}</section>
</item>
<item>
<div slot="name" >融资金额</div>
<section slot="content">{{ Math.round(conditionInfo.finance_amount) | currency }}</section>
</item>
<item>
<div slot="name" >首付款</div>
<section slot="content">{{ Math.round(conditionInfo.down_payment) | currency }}</section>
</item>
<item>
<div slot="name" >保证金比例</div>
<section slot="content">{{ conditionInfo.deposit_ratio_n }}</section>
</item>
<item>
<div slot="name" >保证金</div>
<section slot="content">{{ Math.round(conditionInfo.deposit) | currency }}</section>
</item>
<item>
<div slot="name" >手续费比例</div>
<section slot="content">{{ conditionInfo.lease_charge_ratio_n }}</section>
</item>
<item>
<div slot="name" >手续费</div>
<section slot="content">{{ Math.round(conditionInfo.lease_charge) | currency }}</section>
</item>
<item>
<div slot="name" >预计付款日</div>
<section slot="content">{{ conditionInfo.lease_start_date }}</section>
</item>
<item>
<div slot="name" >还款周期</div>
<section slot="content">{{ conditionInfo.annual_pay_times_n }}</section>
</item>
<item>
<div slot="name" >租赁期数</div>
<section slot="content">{{ conditionInfo.lease_times }}</section>
</item>
<item>
<div slot="name" >年利率</div>
<section slot="content">{{ conditionInfo.int_rate_n }}</section>
</item>
</list-item>
<div class="repay-plan">
<p>查看还款计划</p>
</div>
<div class="equipment-list">设备清单</div>
<list-item :item-height="44" class="second-part">
<item>
<div slot="name" >参数项</div>
<section slot="content">{{ conditionInfo.product_code }}</section>
</item>
<item>
<div slot="name" >产品线</div>
<section slot="content">{{ conditionInfo.product_name }}</section>
</item>
<item>
<div slot="name" >产品数量</div>
<section slot="content">{{ conditionInfo.product_num }}</section>
</item>
</list-item>
<div class="bottom-call">
<div class="left">
<img src="@/assets/constractSigning/work.png" alt="" style="width:32px">
</div>
<div class="center">
<p>业务经办：{{ conditionInfo.bp_user_id_n }}</p>
<p>联系电话：{{ conditionInfo.agent_phone }}</p>
</div>
<div class="right">
<img src="@/assets/constractSigning/phone.png" alt="" style="width:30px">
</div>
</div>
</h-content>
<h-content v-show="num === 2">
<list-item :item-height="56" class="contract-text" style="background-color:rgb(250,250,250);">
<item :proportion="[4,1]">
<div slot="name" class="aguremrnt-list">
<img src="@/assets/constractSigning/npack.png" alt="" class="pics">
<p class="second first">法人授权书</p>
</div>
<div slot="content" class="in-detail" @click="goContractContent('法人授权书')"><img src="@/assets/constractSigning/detail.png" alt=""></div>
</item>
<item :proportion="[4,1]" :class="{'border-red':isshow}">
<div slot="name" class="aguremrnt-list">
<img src="@/assets/constractSigning/pack.png" alt="" class="pics">
<p class="second">农行代扣授权书</p>
<img src="@/assets/constractSigning/read.png" alt="" class="read">
</div>
<div slot="content" class="in-all">
<div @click="entryInfo"><img src="@/assets/constractSigning/scan.png" alt=""></div>
<div @click="goContractContent('农行代扣授权书')"><img src="@/assets/constractSigning/detail.png" alt=""></div>
</div>
</item>
<item :proportion="[4,1]">
<div slot="name" class="aguremrnt-list">
<img src="@/assets/constractSigning/pack.png" alt="" class="pics">
<p class="second">租赁主合同</p>
<img src="@/assets/constractSigning/unread.png" alt="" class="read">
</div>
<div slot="content" class="in-detail" @click="goContractContent('租赁主合同')"><img src="@/assets/constractSigning/detail.png" alt=""></div>
</item>
<item :proportion="[4,1]">
<div slot="name" class="aguremrnt-list">
<img src="@/assets/constractSigning/pack.png" alt="" class="pics">
<p class="second">经销商担保协议</p>
<img src="@/assets/constractSigning/unread.png" alt="" class="read">
</div>
<div slot="content" class="in-detail" @click="goContractContent('经销商担保协议')"><img src="@/assets/constractSigning/detail.png" alt=""></div>
</item>
</list-item>
</h-content>
<bottom-tab v-show="num === 2">
<tab-button class="footer" @click.native="inSure">
确认签约
</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
import Check1 from '@/assets/constractSigning/business.png'
import Check2 from '@/assets/constractSigning/constract.png'
import unCheck1 from '@/assets/constractSigning/unbusiness.png'
import unCheck2 from '@/assets/constractSigning/unconstract.png'
export default {
name: 'ContractDetail',
components: {
},
data () {
return {
isshow: false, // 提示框的显示与隐藏
num: 1,
conditionInfo: {},
check1: Check1,
check2: Check2,
uncheck1: unCheck1,
uncheck2: unCheck2,
}
},
computed: {},
watch: {},
beforeRouteEnter (to, from, next) {
if (from.name === 'ContractSigning') {
next(vm => {
vm.conditionQuery()
})
}
next()
},
methods: {
// 合同商务条件查询
conditionQuery () {
let vm = this
let url = $config.basePath + 'con_business_query'
let param = {
project_id: this.$route.params.project_id,
}
vm.hlsHttp.post(url, param).then(function (res) {
console.log('商务条件', res)
if (res.result === 'S') {
vm.conditionInfo = res.info
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
// 跳转合同详情
goContractContent (name) {
this.$router.push({
name: 'ContractContent',
params: {
name,
},
})
},
// 跳转银行信息录入
entryInfo () {
this.$router.push({
name: 'EntryInfo',
})
},
inSure () {
this.isshow = true
},
},
}
</script>
<style lang='less' type="text/less">
#contract-details {
.all{
position: absolute;
background-color: transparent;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index:2;
.prompt{
position: absolute;
top: 50%;
left:50%;
margin-top:-75px;
margin-left: -121px;
background-color: #fff;
box-shadow: 0 1px 2px 1px rgba(128,128,128,0.10);
border-radius: 4px;
width: 242px;
height: 150px;
.top{
height: 105px;
border-bottom:1px solid #F1F0F5;
div:first-child{
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #E50020;
letter-spacing: 0.5px;
font-weight: 700;
margin-top:13px;
img{
width: 18px;
line-height: 12px;
display: block;
margin: -3px 5px 0 40%;
float: left;
}
}
div:nth-child(2){
margin-top:22px;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #383F45;
letter-spacing: 0.4px;
padding: 0 22px;
line-height: 20px;
}
}
.bottom{
text-align: center;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #00469C;
line-height: 32px;
}
}
}
.h-header-btn {
img {
width: 16px;
height: 16px;
margin-left: 4px;
}
span {
font-family: PingFangSC-Semibold;
margin-left: 16px;
font-size: 17px;
letter-spacing: 0.61px;
line-height: 24px;
}
}
.tab-style{
display:flex;
justify-content: center;
padding-top:12px;
padding-bottom: 8px;
align-items: center;
background-color: #fff;
box-shadow:0 2px 3px 0 rgba(220,220,221,0.50);
div{
display: block;
height: 32px;
width: 172px;
border-radius:16px;
border-radius: 16px;
font-family: PingFangSC-Semibold;
font-size: 14px;
letter-spacing: 0.43px;
margin: 0 4px;
line-height: 32px;
}
.undone{
background: rgba(220,220,221,0.26);
color: #383F45;
}
.done{
background: rgba(0,70,156,0.10);
color: #00469C;
}
img{
width: 20px;
display: block;
float: left;
margin: 6px 5px 0 43px;
}
span:nth-of-type(2){
margin-left: 7px;
}
}
.content{
height: 87%;
.contract-text{
.border-red{
border: 2px solid rgba(255,0,0,0.40);
}
.hls-item{
margin-top:8px;
background-color: #fff;
}
.contents{
padding: 0;
}
.in-detail{
background-color: rgba(0,70,156,0.08);
width: 48px;
height: 56px;
text-align: center;
line-height: 65px;
img{
width: 16px;
}
}
.in-all{
width: 96px;
display: flex;
img{
width: 16px;
}
div{
width: 48px;
height: 56px;
text-align: center;
line-height: 65px;
}
div:first-child{
background-color: rgba(252,200,0,0.10);
}
div:nth-child(2){
background-color: rgba(0,70,156,0.08);
}
}
}
}
.business-condition{
.equipment-list {
height: 40px;
line-height: 40px;
background-color: #fafafa;
color: #00469c;
font-size: 15px;
margin-left: 16px;
position: relative;
}
.equipment-list::before {
content: "";
display: block;
width: 4px;
height: 20px;
background-color: #00469c;
position: absolute;
left: -15px;
top: 10px;
}
div{
font-family: PingFangSC-Regular;
color: #656464;
letter-spacing: 0;
}
section{
font-family: PingFangSC-Regular;
color: rgba(56,63,69,0.60);
letter-spacing: 0;
}
}
.repay-plan {
height: 44px;
width: 100%;
background: rgba(0,70,156,0.03);
p {
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #00469C;
letter-spacing: 0;
height: 44px;
width: 84px;
line-height: 44px;
font-weight: bold;
text-decoration: underline;
margin-left: 16px;
}
}
.bottom-call {
width: 100%;
height: 60px;
display: flex;
flex-direction: row;
margin-bottom: 30px;
.left {
width: 16%;
height: 60px;
background: rgba(0,70,156,0.03);
display: flex;
justify-content: center;
align-items: center
}
.center {
height: 100%;
width: 66%;
margin-left: 2px;
background: rgba(0,70,156,0.03);
p {
height: 30px;
line-height: 30px;
margin-left: 10px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
letter-spacing: 0.43px;
}
}
.right {
height: 100%;
width: 16%;
background: rgba(0,70,156,0.20);
display: flex;
justify-content: center;
align-items: center
}
}
.aguremrnt-list {
display: flex;
flex-direction: row;
.pic {
margin-left: -3px;
}
.pics {
// width: 21px;
height: 30px;
}
.read {
height: 16px;
margin-top: 8px;
margin-left: 12.5px;
}
.second {
height: 32px;
line-height: 32px;
font-family: PingFangSC-Regular;
font-size: 14px;
margin-left: 21px;
color: #383F45;
letter-spacing: 0.43px;
}
.first {
margin-left: 13px;
}
}
.bottom-tab-button{
background: #00469C;
border-radius: 4px;
color:white;
height: 40px;
margin: 4px 2% 0 2%;
}
}
</style>
<!--
* @Author: your name
* @Date: 2019-09-29 10:02:11
* @LastEditTime: 2019-10-21 14:00:54
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
-->
<template>
<h-view id="contract-details" class="public-style">
<div v-show="isshow" class="all">
<div class="prompt">
<div class="top">
<div><img src="@/assets/constractSigning/prompt.png" alt=""> <span>提示</span> </div>
<div>请前往【农行代扣授权书】界面完成银行卡信息录入！</div>
</div>
<div class="bottom" @click="isshow = !isshow">我知道了</div>
</div>
</div>
<h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()">
<span>合同详情</span>
</div>
</h-header>
<div class="tab-style">
<div :class="{'done':num === 1,'undone':num !== 1}" @click="num = 1;"><img :src="num === 1?check1:uncheck1">商务条件</div>
<div :class="{'done':num === 2,'undone':num !== 2}" @click="num = 2;"><img :src="num === 2?check2:uncheck2" >合同文本</div>
</div>
<h-content v-show="num === 1" class="business-condition">
<list-item :item-height="44" class="second-part">
<item>
<div slot="name" >商务政策</div>
<section slot="content">{{ conditionInfo.product_plan_id_n }}</section>
</item>
<item>
<div slot="name" >设备总价</div>
<section slot="content">{{ conditionInfo.equip_price | currency }}</section>
</item>
<item>
<div slot="name" >融资金额</div>
<section slot="content">{{ Math.round(conditionInfo.finance_amount) | currency }}</section>
</item>
<item>
<div slot="name" >首付款</div>
<section slot="content">{{ Math.round(conditionInfo.down_payment) | currency }}</section>
</item>
<item>
<div slot="name" >保证金比例</div>
<section slot="content">{{ conditionInfo.deposit_ratio_n }}</section>
</item>
<item>
<div slot="name" >保证金</div>
<section slot="content">{{ Math.round(conditionInfo.deposit) | currency }}</section>
</item>
<item>
<div slot="name" >手续费比例</div>
<section slot="content">{{ conditionInfo.lease_charge_ratio_n }}</section>
</item>
<item>
<div slot="name" >手续费</div>
<section slot="content">{{ Math.round(conditionInfo.lease_charge) | currency }}</section>
</item>
<item>
<div slot="name" >预计付款日</div>
<section slot="content">{{ conditionInfo.lease_start_date }}</section>
</item>
<item>
<div slot="name" >还款周期</div>
<section slot="content">{{ conditionInfo.annual_pay_times_n }}</section>
</item>
<item>
<div slot="name" >租赁期数</div>
<section slot="content">{{ conditionInfo.lease_times }}</section>
</item>
<item>
<div slot="name" >年利率</div>
<section slot="content">{{ conditionInfo.int_rate_n }}</section>
</item>
</list-item>
<div class="repay-plan">
<p>查看还款计划</p>
</div>
<div class="equipment-list">设备清单</div>
<list-item :item-height="44" class="second-part">
<item>
<div slot="name" >参数项</div>
<section slot="content">{{ conditionInfo.product_code }}</section>
</item>
<item>
<div slot="name" >产品线</div>
<section slot="content">{{ conditionInfo.product_name }}</section>
</item>
<item>
<div slot="name" >产品数量</div>
<section slot="content">{{ conditionInfo.product_num }}</section>
</item>
</list-item>
<div class="bottom-call">
<div class="left">
<img src="@/assets/constractSigning/work.png" alt="" style="width:32px">
</div>
<div class="center">
<p>业务经办：{{ conditionInfo.bp_user_id_n }}</p>
<p>联系电话：{{ conditionInfo.agent_phone }}</p>
</div>
<div class="right">
<img src="@/assets/constractSigning/phone.png" alt="" style="width:30px">
</div>
</div>
</h-content>
<h-content v-show="num === 2">
<list-item :item-height="56" class="contract-text" style="background-color:rgb(250,250,250);">
<item :proportion="[4,1]">
<div slot="name" class="aguremrnt-list">
<img src="@/assets/constractSigning/npack.png" alt="" class="pics">
<p class="second first">法人授权书</p>
</div>
<div slot="content" class="in-detail" @click="goContractContent('法人授权书')"><img src="@/assets/constractSigning/detail.png" alt=""></div>
</item>
<item :proportion="[4,1]" :class="{'border-red':isshow}">
<div slot="name" class="aguremrnt-list">
<img src="@/assets/constractSigning/pack.png" alt="" class="pics">
<p class="second">农行代扣授权书</p>
<img src="@/assets/constractSigning/read.png" alt="" class="read">
</div>
<div slot="content" class="in-all">
<div @click="entryInfo"><img src="@/assets/constractSigning/scan.png" alt=""></div>
<div @click="goContractContent('农行代扣授权书')"><img src="@/assets/constractSigning/detail.png" alt=""></div>
</div>
</item>
<item :proportion="[4,1]">
<div slot="name" class="aguremrnt-list">
<img src="@/assets/constractSigning/pack.png" alt="" class="pics">
<p class="second">租赁主合同</p>
<img src="@/assets/constractSigning/unread.png" alt="" class="read">
</div>
<div slot="content" class="in-detail" @click="goContractContent('租赁主合同')"><img src="@/assets/constractSigning/detail.png" alt=""></div>
</item>
<item :proportion="[4,1]">
<div slot="name" class="aguremrnt-list">
<img src="@/assets/constractSigning/pack.png" alt="" class="pics">
<p class="second">经销商担保协议</p>
<img src="@/assets/constractSigning/unread.png" alt="" class="read">
</div>
<div slot="content" class="in-detail" @click="goContractContent('经销商担保协议')"><img src="@/assets/constractSigning/detail.png" alt=""></div>
</item>
</list-item>
</h-content>
<bottom-tab v-show="num === 2">
<tab-button class="footer" @click.native="inSure">
确认签约
</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
import Check1 from '@/assets/constractSigning/business.png'
import Check2 from '@/assets/constractSigning/constract.png'
import unCheck1 from '@/assets/constractSigning/unbusiness.png'
import unCheck2 from '@/assets/constractSigning/unconstract.png'
export default {
name: 'ContractDetail',
components: {
},
data () {
return {
isshow: false, // 提示框的显示与隐藏
num: 1,
conditionInfo: {},
check1: Check1,
check2: Check2,
uncheck1: unCheck1,
uncheck2: unCheck2,
}
},
computed: {},
watch: {},
beforeRouteEnter (to, from, next) {
if (from.name === 'ContractSigning') {
next(vm => {
vm.conditionQuery()
})
}
next()
},
methods: {
// 合同商务条件查询
conditionQuery () {
let vm = this
let url = $config.basePath + 'con_business_query'
let param = {
project_id: this.$route.params.project_id,
}
vm.hlsHttp.post(url, param).then(function (res) {
console.log('商务条件', res)
if (res.result === 'S') {
vm.conditionInfo = res.info
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
// 跳转合同详情
goContractContent (name) {
this.$router.push({
name: 'ContractContent',
params: {
name,
},
})
},
// 跳转银行信息录入
entryInfo () {
this.$router.push({
name: 'EntryInfo',
})
},
inSure () {
this.isshow = true
},
},
}
</script>
<style lang='less' type="text/less">
#contract-details {
.all{
position: absolute;
background-color: transparent;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index:2;
.prompt{
position: absolute;
top: 50%;
left:50%;
margin-top:-75px;
margin-left: -121px;
background-color: #fff;
box-shadow: 0 1px 2px 1px rgba(128,128,128,0.10);
border-radius: 4px;
width: 242px;
height: 150px;
.top{
height: 105px;
border-bottom:1px solid #F1F0F5;
div:first-child{
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #E50020;
letter-spacing: 0.5px;
font-weight: 700;
margin-top:13px;
img{
width: 18px;
line-height: 12px;
display: block;
margin: -3px 5px 0 40%;
float: left;
}
}
div:nth-child(2){
margin-top:22px;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #383F45;
letter-spacing: 0.4px;
padding: 0 22px;
line-height: 20px;
}
}
.bottom{
text-align: center;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #00469C;
line-height: 32px;
}
}
}
.h-header-btn {
img {
width: 16px;
height: 16px;
margin-left: 4px;
}
span {
font-family: PingFangSC-Semibold;
margin-left: 16px;
font-size: 17px;
letter-spacing: 0.61px;
line-height: 24px;
}
}
.tab-style{
display:flex;
justify-content: center;
padding-top:12px;
padding-bottom: 8px;
align-items: center;
background-color: #fff;
box-shadow:0 2px 3px 0 rgba(220,220,221,0.50);
div{
display: block;
height: 32px;
width: 172px;
border-radius:16px;
border-radius: 16px;
font-family: PingFangSC-Semibold;
font-size: 14px;
letter-spacing: 0.43px;
margin: 0 4px;
line-height: 32px;
}
.undone{
background: rgba(220,220,221,0.26);
color: #383F45;
}
.done{
background: rgba(0,70,156,0.10);
color: #00469C;
}
img{
width: 20px;
display: block;
float: left;
margin: 6px 5px 0 43px;
}
span:nth-of-type(2){
margin-left: 7px;
}
}
.content{
height: 87%;
.contract-text{
.border-red{
border: 2px solid rgba(255,0,0,0.40);
}
.hls-item{
margin-top:8px;
background-color: #fff;
}
.contents{
padding: 0;
}
.in-detail{
background-color: rgba(0,70,156,0.08);
width: 48px;
height: 56px;
text-align: center;
line-height: 65px;
img{
width: 16px;
}
}
.in-all{
width: 96px;
display: flex;
img{
width: 16px;
}
div{
width: 48px;
height: 56px;
text-align: center;
line-height: 65px;
}
div:first-child{
background-color: rgba(252,200,0,0.10);
}
div:nth-child(2){
background-color: rgba(0,70,156,0.08);
}
}
}
}
.business-condition{
.equipment-list {
height: 40px;
line-height: 40px;
background-color: #fafafa;
color: #00469c;
font-size: 15px;
margin-left: 16px;
position: relative;
}
.equipment-list::before {
content: "";
display: block;
width: 4px;
height: 20px;
background-color: #00469c;
position: absolute;
left: -15px;
top: 10px;
}
div{
font-family: PingFangSC-Regular;
color: #656464;
letter-spacing: 0;
}
section{
font-family: PingFangSC-Regular;
color: rgba(56,63,69,0.60);
letter-spacing: 0;
}
}
.repay-plan {
height: 44px;
width: 100%;
background: rgba(0,70,156,0.03);
p {
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #00469C;
letter-spacing: 0;
height: 44px;
width: 84px;
line-height: 44px;
font-weight: bold;
text-decoration: underline;
margin-left: 16px;
}
}
.bottom-call {
width: 100%;
height: 60px;
display: flex;
flex-direction: row;
margin-bottom: 30px;
.left {
width: 16%;
height: 60px;
background: rgba(0,70,156,0.03);
display: flex;
justify-content: center;
align-items: center
}
.center {
height: 100%;
width: 66%;
margin-left: 2px;
background: rgba(0,70,156,0.03);
p {
height: 30px;
line-height: 30px;
margin-left: 10px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
letter-spacing: 0.43px;
}
}
.right {
height: 100%;
width: 16%;
background: rgba(0,70,156,0.20);
display: flex;
justify-content: center;
align-items: center
}
}
.aguremrnt-list {
display: flex;
flex-direction: row;
.pic {
margin-left: -3px;
}
.pics {
// width: 21px;
height: 30px;
}
.read {
height: 16px;
margin-top: 8px;
margin-left: 12.5px;
}
.second {
height: 32px;
line-height: 32px;
font-family: PingFangSC-Regular;
font-size: 14px;
margin-left: 21px;
color: #383F45;
letter-spacing: 0.43px;
}
.first {
margin-left: 13px;
}
}
.bottom-tab-button{
background: #00469C;
border-radius: 4px;
color:white;
height: 40px;
margin: 4px 2% 0 2%;
}
}
</style>
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