710 lines
25 KiB
Vue
710 lines
25 KiB
Vue
<template>
|
|
<view class="main">
|
|
<div class="headerTop" >
|
|
<div class="header" :style="{height:menu.height + 'px',top:menu.top+'px'}">
|
|
<image class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
|
|
<div class="timeSelect">
|
|
<img class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectDateIcon.svg"/>
|
|
<picker mode="date" fields="month" :value="searchText" :end="lastDay" @change="handleChangeTime" >
|
|
<view class="time">
|
|
<view class="text">{{ searchText }}</view>
|
|
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"></image>
|
|
</view>
|
|
</picker>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="picker" :style="{top:(menu.bottom + 24)+'px'}" @click="handleGoSelectService" v-if="false">
|
|
<div class="selectService" >
|
|
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
|
|
<view class="select">
|
|
<view class="content">
|
|
<view class="uni-input">{{serviceInfo.SERVERPART_NAME}}</view>
|
|
<p class="area" v-if="serviceInfo.Serverpart_ID">{{serviceInfo.SPREGIONTYPE_NAME}}</p>
|
|
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<view class="pageContent" style="width: 100%;height: calc(100vh - 330rpx);overflow-y: scroll">
|
|
<view class="tabBox" v-if="showTab">
|
|
<view :class="selectTab===1?'tab selectTab':'tab'" @click="handleChangeSelectTab(1)">驿达应收</view>
|
|
<view :class="selectTab===2?'tab selectTab':'tab'" @click="handleChangeSelectTab(2)">商家欠款</view>
|
|
</view>
|
|
<view class="descBox">
|
|
<view class="smallBox">
|
|
<view class="leftBox">
|
|
<span class="descLabel">排序字段：</span>
|
|
<picker mode="selector" :value="searchField" :range="fieldList" range-key="label" @change="handleChangeField">
|
|
{{fieldList[searchField].label}}
|
|
</picker>
|
|
</view>
|
|
<view class="rightBox" @click="handleChangeDesc">
|
|
<span class="descText">{{ descType==='ascend'?'升序':'降序' }}</span>
|
|
<image class="descIcon" :src="descType==='ascend'?'/static/images/project/ascend.svg':'/static/images/project/descend.svg'"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="listBox" >
|
|
<view v-if="showList && showList.length>0">
|
|
<div class="listItem" v-for="(item,index) in showList" :key="index" @click="handleNoneChild(item)">
|
|
<div class="listBox" :style="{borderBottom:item.showChild?'1px solid #D9DBE0':'0px solid #D9DBE0'}">
|
|
<div class="itemTop">
|
|
<div class="itemLeft">
|
|
<div style="display: flex;align-items: center">
|
|
<img class="itemFixed" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/fixedIcon.svg"/>
|
|
<span class="serverName">{{selectTab===1?item.SPREGIONTYPE_NAME?item.SPREGIONTYPE_NAME.split('管理中心')[0]:'':item.MERCHANTS_NAME}}</span>
|
|
</div>
|
|
</div>
|
|
<img class="itemRight" :style="{transform:item.showChild?'':'rotate(-90deg)'}" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"/>
|
|
</div>
|
|
<div class="itemDetail">
|
|
<div class="message">
|
|
<span class="value">{{ $util.fmoney(selectTab===1?(item.ROYALTY_PRICE || 0):(item.SUBROYALTY_PRICE || 0),2)}}</span>
|
|
<span class="label">{{ selectTab===1?'驿达到账':'商家到账' }}</span>
|
|
</div>
|
|
<div class="message">
|
|
<span class="value">{{ $util.fmoney(selectTab===1?(item.ROYALTYDAILY_THEORY || 0):(item.SUBROYALTYDAILY_THEORY || 0),2) }}</span>
|
|
<span class="label">{{ selectTab===1?'驿达入账':'商家入账' }}</span>
|
|
</div>
|
|
<div class="message">
|
|
<span class="value">{{ selectTab===1?$util.fmoney(((item.ROYALTY_PRICE || 0) - (item.ROYALTYDAILY_THEORY || 0)),2):
|
|
$util.fmoney(((item.SUBROYALTY_PRICE || 0) - (item.SUBROYALTYDAILY_THEORY || 0)),2)}}</span>
|
|
<span class="label">{{ selectTab===1?'驿达差额':'商家应缴' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="childList" v-if="item.showChild && item.children && item.children.length>0">
|
|
<div class="childItem" @click.stop="handleShowSecondChildren(item,subItem,subIndex)" v-for="(subItem,subIndex) in item.children" :key="subIndex">
|
|
<div class="secondItemBox" :style="{borderBottom:subItem.showChild?'1px solid #D9DBE0':'0px solid #D9DBE0'}">
|
|
<div class="childTop">
|
|
<div class="topLeft">
|
|
<div class="imgBox">
|
|
<image class="topIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/mapIcon.svg"/>
|
|
</div>
|
|
<span class="serviceName">{{subItem.SERVERPART_NAME}}</span>
|
|
</div>
|
|
<image class="topRight" :style="{transform:subItem.showChild?'rotate(90deg)':''}" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
|
|
</div>
|
|
<div class="childDetailBox">
|
|
<div class="message">
|
|
<span class="value">{{ $util.fmoney(selectTab===1?(subItem.ROYALTY_PRICE || 0):(subItem.SUBROYALTY_PRICE || 0),2)}}</span>
|
|
<span class="label">{{ selectTab===1?'驿达到账':'商家到账' }}</span>
|
|
</div>
|
|
<div class="message">
|
|
<span class="value">{{ $util.fmoney(selectTab===1?(subItem.ROYALTYDAILY_THEORY || 0):(subItem.SUBROYALTYDAILY_THEORY || 0),2) }}</span>
|
|
<span class="label">{{ selectTab===1?'驿达入账':'商家入账' }}</span>
|
|
</div>
|
|
<div class="message">
|
|
<span class="value">{{ selectTab===1?$util.fmoney(((subItem.ROYALTY_PRICE || 0) - (subItem.ROYALTYDAILY_THEORY || 0)),2):
|
|
$util.fmoney(((subItem.SUBROYALTY_PRICE || 0) - (subItem.SUBROYALTYDAILY_THEORY || 0)),2)}}</span>
|
|
<span class="label">{{ selectTab===1?'驿达差额':'商家应缴' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="childDetailList" v-if="subItem.showChild && subItem.children && subItem.children.length>0">
|
|
<div class="thirdItem" v-for="(thirdItem,thirdIndex) in subItem.children" :key="thirdIndex" :style="{borderBottom:thirdIndex===subItem.children.length-1?'0 solid #EEEEEE':'2px solid #EEEEEE'}">
|
|
<div class="thirdItemTop">
|
|
<div class="itemBox">
|
|
<span class="label">经营单位:</span>
|
|
<span>{{selectTab===1?thirdItem.MERCHANTS_NAME:thirdItem.SERVERPARTSHOP_NAME}}</span>
|
|
</div>
|
|
<div class="itemBox" v-if="selectTab===1">
|
|
<span class="label">经营门店:</span>
|
|
<span>{{thirdItem.SERVERPARTSHOP_NAME}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="thirdItemBottom">
|
|
<div class="bottomItem">
|
|
<span class="value">{{ $util.fmoney(selectTab===1?(thirdItem.ROYALTY_PRICE || 0):(thirdItem.SUBROYALTY_PRICE || 0),2)}}</span>
|
|
<span class="label">{{ selectTab===1?'驿达到账':'商家到账' }}</span>
|
|
</div>
|
|
<div class="bottomItem">
|
|
<span class="value">{{ $util.fmoney(selectTab===1?(thirdItem.ROYALTYDAILY_THEORY || 0):(thirdItem.SUBROYALTYDAILY_THEORY || 0),2) }}</span>
|
|
<span class="label">{{ selectTab===1?'驿达入账':'商家入账' }}</span>
|
|
</div>
|
|
<div class="bottomItem">
|
|
<span class="value">{{ selectTab===1?$util.fmoney(((thirdItem.ROYALTY_PRICE || 0) - (thirdItem.ROYALTYDAILY_THEORY || 0)),2):
|
|
$util.fmoney(((thirdItem.SUBROYALTY_PRICE || 0) - (thirdItem.SUBROYALTYDAILY_THEORY || 0)),2)}}</span>
|
|
<span class="label">{{ selectTab===1?'驿达差额':'商家应缴' }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="thirdItemBottom">
|
|
<div class="bottomItem">
|
|
<span class="value">{{thirdItem.BUSINESS_TYPE===1000?'合作经营':thirdItem.BUSINESS_TYPE===2000?'固定租金':thirdItem.BUSINESS_TYPE===3000?'自营提成':thirdItem.BUSINESS_TYPE===4000?'业主自营':''}}</span>
|
|
<span class="label">经营模式</span>
|
|
</div>
|
|
<div class="bottomItem">
|
|
<span class="value">{{thirdItem.SETTLEMENT_MODES?settlement[thirdItem.SETTLEMENT_MODES]:'-'}}</span>
|
|
<span class="label">结算模式</span>
|
|
</div>
|
|
<div class="bottomItem">
|
|
<span class="value">{{thirdItem.COMPACT_TYPE?compactType[thirdItem.COMPACT_TYPE]:'-'}}</span>
|
|
<span class="label">合同类型</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</view>
|
|
<view class="noDataBox" v-else>
|
|
<NoData/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
import NoData from "./components/noData.vue";
|
|
import {getFieldEnum, wrapTreeNode} from "../../util/dateTime";
|
|
|
|
export default {
|
|
components: {NoData},
|
|
data() {
|
|
return {
|
|
searchText:'',// 搜索的时间
|
|
menu:{}, //手机参数,
|
|
lastDay:'',
|
|
statusBarHeight:'',
|
|
serviceInfo:{},// 当前服务区信息
|
|
selectTab: 1,
|
|
showList: [],// 显示的列表
|
|
realList:[],// 请求到真实的列表
|
|
otherData:{},// 接口返回的其他信息
|
|
settlement:{},// 结算模式的枚举
|
|
compactType:{},// 合同类型的枚举
|
|
searchField:0,// 排序字段
|
|
fieldList:[{label:'驿达到账',value:0},{label:'驿达入账',value:1},{label:'驿达差额',value:2}],
|
|
descType:'ascend',// 排序状态
|
|
showTab:true,// 是否显示选项卡
|
|
}
|
|
},
|
|
onLoad(query){
|
|
if (query.noShowTab==='true'){
|
|
this.showTab = false
|
|
}
|
|
if (query.type){
|
|
this.selectTab = Number(query.type)
|
|
}
|
|
let systemInfo = uni.getSystemInfoSync()
|
|
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
this.handleGetSETTLEMENT()
|
|
this.handleGetCOMPACTTYPE()
|
|
},
|
|
onShow(){
|
|
this.fieldList = this.selectTab===1?[{label:'驿达到账',value:0},{label:'驿达入账',value:1},{label:'驿达差额',value:2}]:[{label:'商家到账',value:0},{label:'商家入账',value:1},{label:'商家应缴',value:2}]
|
|
let lastDay = uni.getStorageSync('lastDay')
|
|
const date = new Date(lastDay)
|
|
const y = date.getFullYear()
|
|
let m = date.getMonth() + 1
|
|
if (m<10){
|
|
m = '0'+m
|
|
}
|
|
this.searchText = `${y}-${m}`
|
|
this.lastDay = uni.getStorageSync('lastDay')
|
|
this.serviceInfo = uni.getStorageSync('currentService')
|
|
this.handleGetPageData()
|
|
},
|
|
methods:{
|
|
handleChangeTime(e){
|
|
const date = new Date(e.detail.value)
|
|
const y = date.getFullYear()
|
|
let m = date.getMonth() + 1
|
|
if (m<10){
|
|
m = '0'+m
|
|
}
|
|
this.searchText = `${y}-${m}`
|
|
this.handleGetPageData()
|
|
},
|
|
async handleGetPageData(){
|
|
// Finance/GetProjectSummary 是驿达应收
|
|
// Finance/GetProjectMerchantSummary 是商家欠款
|
|
uni.showLoading({
|
|
title: '正在加载...'
|
|
})
|
|
const date = new Date(this.searchText)
|
|
const y = date.getFullYear()
|
|
let m = date.getMonth() + 1
|
|
if (m<10){
|
|
m = '0'+m
|
|
}
|
|
const req = {
|
|
// StartDate: `${y}-${m}-01`,
|
|
StartDate: this.lastDay,
|
|
EndDate: this.lastDay,
|
|
// ServerpartId:this.serviceInfo.Serverpart_ID,
|
|
CompactType:'340001'
|
|
}
|
|
if (this.selectTab===1){
|
|
const data = await request.$webGet('EShangApiMain/Finance/GetProjectSummary',req)
|
|
this.showList = wrapTreeNode(data.Result_Data.List)
|
|
this.otherData = data.Result_Data.OtherData
|
|
uni.hideLoading()
|
|
this.$forceUpdate()
|
|
}else{
|
|
const data = await request.$webGet('EShangApiMain/Finance/GetProjectMerchantSummary',req)
|
|
let list = wrapTreeNode(data.Result_Data.List)
|
|
// this.realList = list
|
|
this.showList = list
|
|
this.otherData = data.Result_Data.OtherData
|
|
uni.hideLoading()
|
|
this.$forceUpdate()
|
|
}
|
|
},
|
|
// // 排序方法
|
|
// handleDescList(list){
|
|
// let descList = JSON.parse(JSON.stringify(list))
|
|
// if (this.searchField===0){
|
|
// //按照到账排序
|
|
// if (this.descType === 'ascend'){
|
|
// for (let i=0;i<=descList.length-1;i++){
|
|
// for (let j=0;j<=descList.length - i - 1;j++){
|
|
// if (descList[j] && descList[j + 1] && descList[j].ROYALTY_PRICE && descList[j+1].ROYALTY_PRICE){
|
|
// if (descList[j].ROYALTY_PRICE < descList[j+1].ROYALTY_PRICE){
|
|
// let temp = descList[j]
|
|
// descList[j] = descList[j + 1]
|
|
// descList[j + 1] = temp
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// }else{
|
|
//
|
|
// }
|
|
// }
|
|
// },
|
|
//跳转到地图
|
|
handleGoSelectService() {
|
|
uni.navigateTo({
|
|
url:`/pages/map/index?chartType=${true}&page=/pages/projectProfitSharing/index&serviceInfo=${JSON.stringify(this.serviceInfo)}`
|
|
})
|
|
},
|
|
// 回退方法
|
|
handleBack(){
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},
|
|
// 切换选项卡
|
|
handleChangeSelectTab(num){
|
|
this.selectTab = num
|
|
this.handleGetPageData()
|
|
},
|
|
// 显示子集
|
|
handleNoneChild(obj){
|
|
this.showList.forEach(item=>{
|
|
if (this.selectTab===1){
|
|
if (item.SPREGIONTYPE_NAME === obj.SPREGIONTYPE_NAME){
|
|
item.showChild = !item.showChild
|
|
}
|
|
}else{
|
|
if (item.MERCHANTS_NAME === obj.MERCHANTS_NAME){
|
|
item.showChild = !item.showChild
|
|
}
|
|
}
|
|
|
|
})
|
|
this.$forceUpdate()
|
|
},
|
|
// 显示第二层子集
|
|
handleShowSecondChildren(obj,subObj,index){
|
|
this.showList.forEach(item=>{
|
|
if (item.SPREGIONTYPE_NAME === obj.SPREGIONTYPE_NAME){
|
|
item.children.forEach((subItem,subIndex)=>{
|
|
if (subItem.SPREGIONTYPE_NAME === subObj.SPREGIONTYPE_NAME && index ===subIndex){
|
|
subItem.showChild = !subItem.showChild
|
|
}
|
|
})
|
|
}
|
|
})
|
|
this.$forceUpdate()
|
|
},
|
|
// 拿到结算模式的枚举
|
|
async handleGetSETTLEMENT(){
|
|
const data = await getFieldEnum({ FieldExplainField: 'SETTLEMENT_MODES' });
|
|
if (data && data.length>0){
|
|
let obj = {}
|
|
data.forEach(item=>{
|
|
obj[item.value] = item.label
|
|
})
|
|
this.settlement = obj
|
|
}
|
|
},
|
|
// 拿到合同类型的枚举
|
|
async handleGetCOMPACTTYPE(){
|
|
const data = await getFieldEnum({ FieldExplainField: 'COMPACT_CHARACTER' });
|
|
if (data && data.length>0){
|
|
let obj = {}
|
|
data.forEach(item=>{
|
|
obj[item.value] = item.label
|
|
})
|
|
this.compactType = obj
|
|
}
|
|
},
|
|
// 改变排序状态
|
|
handleChangeDesc(){
|
|
if (this.descType==='ascend'){
|
|
this.descType = 'descend'
|
|
}else{
|
|
this.descType = 'ascend'
|
|
}
|
|
},
|
|
// 改变排序字段
|
|
handleChangeField(e){
|
|
this.searchField = Number(e.detail.value)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
@import '/static/public/font/stylesheet.css';
|
|
.main{
|
|
width: 100%;
|
|
height: 100%;
|
|
.headerTop{
|
|
width: 100%;
|
|
height: 152px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
background: linear-gradient(90deg, #60AAFF 0%,#3E74FF 100%);
|
|
.header{
|
|
position: absolute;
|
|
width: 100%;
|
|
padding: 0 16px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
.backArrow{
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 16px;
|
|
}
|
|
.timeSelect{
|
|
display: flex;
|
|
align-items: center;
|
|
.selectIcon{
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.time{
|
|
display: flex;
|
|
align-items: center;
|
|
.text{
|
|
margin: 0 5px;
|
|
color: #fff;
|
|
}
|
|
.icon{
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.picker{
|
|
position: absolute;
|
|
left: 16px;
|
|
.selectService{
|
|
display: flex;
|
|
align-items: center;
|
|
.img{
|
|
width: 40px;
|
|
height: 40px;
|
|
z-index: 2;
|
|
}
|
|
.select{
|
|
height: 32px;
|
|
background: #F8F8FA;
|
|
border-radius: 0 16px 16px 0;
|
|
transform: translateX(-20px);
|
|
box-sizing: border-box;
|
|
padding-left: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
.content{
|
|
display: flex;
|
|
align-items: center;
|
|
.uni-input{
|
|
padding: 0;
|
|
background: transparent;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
}
|
|
.area{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 40px;
|
|
margin-left: 4px;
|
|
}
|
|
.rightArrow{
|
|
width: 24px;
|
|
height: 12px;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.pageContent{
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 16rpx 32rpx 0;
|
|
box-sizing: border-box;
|
|
background: #f8f8f8;
|
|
.tabBox{
|
|
width: 100%;
|
|
height: 76rpx;
|
|
box-sizing: border-box;
|
|
padding: 8rpx;
|
|
background: #F2F1F1;
|
|
border-radius: 8rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.tab{
|
|
width: calc((100% - 16rpx)/2);
|
|
height: 100%;
|
|
border-radius: 8rpx;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
}
|
|
.selectTab{
|
|
background: #FFFFFF;
|
|
color: #160002;
|
|
}
|
|
}
|
|
.descBox{
|
|
width: 100%;
|
|
.smallBox{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.leftBox{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.rightBox{
|
|
display: flex;
|
|
align-items: center;
|
|
.descIcon{
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.listBox{
|
|
padding-top: 24rpx;
|
|
.listItem{
|
|
width:calc(100% - 16rpx);
|
|
margin-bottom: 12px;
|
|
border: 1px solid #D9DBE0;
|
|
border-radius: 8px;
|
|
position: relative;
|
|
.bg{
|
|
position: absolute;
|
|
right: 0;top: 0;
|
|
width: 97px;
|
|
height: 97px;
|
|
}
|
|
.listBox{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 12px 16px;
|
|
background: linear-gradient(314deg, #EAEFFF 0%, #F3F5FF 32%, #F5FCFF 50%, #F0F7FF 67%, #DBE5FF 100%);
|
|
border-bottom: 1px solid #D9DBE0;
|
|
border-radius: 8px;
|
|
.itemTop{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.itemLeft{
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
background: rgba(26, 95, 255, 0.1);
|
|
border-radius: 14px;
|
|
.itemFixed{
|
|
width: 12px;
|
|
height: 14px;
|
|
margin-right: 4px;
|
|
}
|
|
.serverName{
|
|
font-size: 16px;
|
|
font-family: Alimama ShuHeiTi;
|
|
color: #1A5FFF;
|
|
line-height: 22px
|
|
}
|
|
}
|
|
.itemRight{
|
|
width: 26px;
|
|
height: 14px;
|
|
}
|
|
}
|
|
.itemDetail{
|
|
margin-top: 16px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.message{
|
|
width: 33%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.cirRate{
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.label{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 20px
|
|
}
|
|
.value{
|
|
font-size: 18px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #160002;
|
|
line-height: 24px;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.childList{
|
|
border-radius: 8px 8px 0 0;
|
|
width: 100%;
|
|
.childItem{
|
|
width: 100%;
|
|
.secondItemBox{
|
|
padding: 12px 16px;
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid #EEEEEE;
|
|
border-radius: 8px;
|
|
.childTop{
|
|
width: 100%;
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.topLeft{
|
|
display: flex;
|
|
align-items: center;
|
|
.imgBox{
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
border: 1px solid #FFFFFF;
|
|
overflow: hidden;
|
|
.topIcon{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.serviceName{
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 22px;
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
.topRight{
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
.childDetailBox{
|
|
margin-top: 16px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.message{
|
|
width: 33%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.cirRate{
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.label{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 20px
|
|
}
|
|
.value{
|
|
font-size: 18px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #160002;
|
|
line-height: 24px;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.childDetailList{
|
|
box-sizing: border-box;
|
|
padding: 0 16px;
|
|
|
|
.thirdItem{
|
|
padding: 12px 0;
|
|
box-sizing: border-box;
|
|
border-bottom: 2px solid #EEEEEE;
|
|
.thirdItemTop{
|
|
|
|
}
|
|
.thirdItemBottom{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.bottomItem{
|
|
width: 33%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.noDataBox{
|
|
width: 100%;
|
|
min-height: 60vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|