945 lines
41 KiB
Vue
945 lines
41 KiB
Vue
<template>
|
||
<div class="main">
|
||
<div class="top">
|
||
<p class="title" v-if="type==='month'">{{serviceInfo.name}}服务区自营计划</p>
|
||
<p class="title" v-if="type==='year'">{{serviceInfo.name}}服务区年度自营计划</p>
|
||
<div class="select" v-if="isSelect && optionTime===''">
|
||
<picker mode="date" fields="month" :value="single" :end="endData" @change="bindDateChange" >
|
||
<view class="time">
|
||
<view class="uni-input" style="background: transparent;padding: 0;height:100%">{{ single }}</view>
|
||
<image class="icon" src="/static/images/index/arrow_bottom.svg"></image>
|
||
</view>
|
||
</picker>
|
||
</div>
|
||
</div>
|
||
<view class="box" v-if="type==='month'">
|
||
<view class="top">
|
||
<view class="big">
|
||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/thisMonth.svg"></image>
|
||
</view>
|
||
<view class="text">
|
||
<view class="textTop">
|
||
<view class="left">
|
||
<p class="number">{{serviceInfo.Budget_Degree?serviceInfo.Budget_Degree + '%':'-'}}</p>
|
||
<p v-if="serviceInfo.Budget_Degree>=100" class="desc"><image class="success" src="/static/images/index/successMonth.svg"></image></p>
|
||
</view>
|
||
<view class="right">
|
||
<text class="comparePlan">比计划： </text>
|
||
<view class="box2">
|
||
<image class="addIcon" :src="Number(serviceInfo.Growth_Rate)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
|
||
<p class="text">{{serviceInfo.Growth_Rate ?Math.abs(serviceInfo.Growth_Rate) + '%':'-'}}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<div class="progressPlan">
|
||
<div class="trans" :style="{width:serviceInfo.Budget_Degree > 100 ? '100%' : serviceInfo.Budget_Degree + '%'}"></div>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="success" style="margin-right: 39px">
|
||
<p class="text">本月已完成<text class="unit">/元</text></p>
|
||
<p class="money">{{serviceInfo.Revenue_Amount ?serviceInfo.Revenue_Amount :'-'}}</p>
|
||
</view>
|
||
<view class="success">
|
||
<p class="text">本月计划<text class="unit">/元</text></p>
|
||
<p class="money">{{serviceInfo.Budget_Amount ?serviceInfo.Budget_Amount :'-'}}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="box" v-if="type==='year'">
|
||
<view class="top">
|
||
<view class="big">
|
||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/planYear.svg"></image>
|
||
</view>
|
||
<view class="text">
|
||
<view class="textTop">
|
||
<view class="left">
|
||
<p class="number">{{serviceInfo.Budget_Degree?serviceInfo.Budget_Degree + '%':'-'}}</p>
|
||
<p v-if="serviceInfo.Budget_Degree>=100" class="desc" style="color: #4E68FF"><image class="success" src="/static/images/index/yearSuccess.svg"></image></p>
|
||
</view>
|
||
<view class="right">
|
||
<text class="comparePlan">比计划： </text>
|
||
<div class="box2">
|
||
<image class="addIcon" :src="Number(serviceInfo.Growth_Rate)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
|
||
<p class="text">{{serviceInfo.Growth_Rate?Math.abs(serviceInfo.Growth_Rate) + '%':''}}</p>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<div class="progressPlan">
|
||
<div class="transYear" :style="{width:serviceInfo.Budget_Degree + '%'}"></div>
|
||
<!-- <image class="img" :style="{width: plan.percentageYear + '%'}" src="https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png"></image>-->
|
||
<!-- <div class=pro :style="{width:(100 - plan.percentageYear)+ '%'}"></div>-->
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="success" style="margin-right: 39px">
|
||
<p class="text">年度已完成<text class="unit">/元</text></p>
|
||
<p class="money">{{serviceInfo.Revenue_Amount?serviceInfo.Revenue_Amount:'-'}}</p>
|
||
</view>
|
||
<view class="success">
|
||
<p class="text">年度计划<text class="unit">/元</text></p>
|
||
<p class="money">{{serviceInfo.Budget_Amount?serviceInfo.Budget_Amount:'-'}}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<p class="title" style="margin-top: 12px">{{month}}月预算完成度</p>
|
||
<div class="list" v-if="type==='month'" >
|
||
<div class="item" >
|
||
<div class="firstBox" v-for="(item,index) in dataList" :key="index" >
|
||
<text class="firstTitle">{{item.node.ACCOUNT_CODE}}</text>
|
||
<div class="valueBox" v-if="item.node.BUDGETDETAIL_AMOUNT ">
|
||
<p class="value" style="color:#a69e9f">{{item.node.BUDGETDETAIL_AMOUNT }}<text style="margin-left: 4px;color:#a69e9f">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text class="type" style="margin-left: 4px">(计划)</text></p>
|
||
<p class="value" v-if="item.node.ShowGrowth_Rate">{{item.node.REVENUE_AMOUNT?item.node.REVENUE_AMOUNT:'-' }}<text v-if="item.node.REVENUE_AMOUNT!=='-'" style="margin-left: 4px">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="item.node.REVENUE_AMOUNT!=='-'" class="type" style="margin-left: 4px">(实际)</text></p>
|
||
<view class="addBox" v-if="item.node.ShowGrowth_Rate">
|
||
<image class="addIcon" :src="item.node.Growth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':item.node.Growth_Rate<0?'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg':''"></image>
|
||
<p class="text" style="margin-left: 4px">{{item.node.Growth_Rate?Math.abs(item.node.Growth_Rate) + '%':'-' }}</p>
|
||
<text class="type" style="margin-left: 4px">{{item.node.Growth_Rate>0?'(提升)':item.node.Growth_Rate<0?'(降低)':'-'}}</text>
|
||
</view>
|
||
</div>
|
||
|
||
<div v-if="item.children.length>0" class="subBox" v-for="(subItem,subIndex) in item.children" :key="subIndex"
|
||
:style="subItem.children.length>0?'':'display:flex;justify-content: space-between'">
|
||
<p class="subTitle">{{subItem.node.ACCOUNT_CODE}}</p>
|
||
|
||
<div class="valueBox" v-if="subItem.node.BUDGETDETAIL_AMOUNT ">
|
||
<p class="value" style="color:#a69e9f">{{subItem.node.BUDGETDETAIL_AMOUNT}}<text v-if="subItem.node.BUDGETDETAIL_AMOUNT!=='-'" style="margin-left: 4px;color:#a69e9f">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="subItem.node.BUDGETDETAIL_AMOUNT!=='-'" class="type" style="margin-left: 4px">(计划)</text></p>
|
||
<p v-if="subItem.node.ShowGrowth_Rate" class="value">{{subItem.node.REVENUE_AMOUNT?subItem.node.REVENUE_AMOUNT:'-' }}<text v-if="subItem.node.REVENUE_AMOUNT" style="margin-left: 4px">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="subItem.node.REVENUE_AMOUNT" class="type" style="margin-left: 4px">(实际)</text></p>
|
||
|
||
<view class="addBox" v-if="subItem.node.ShowGrowth_Rate">
|
||
<image class="addIcon" :src="subItem.node.Growth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':subItem.node.Growth_Rate<0?'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg':''"></image>
|
||
<p class="text" style="margin-left: 4px">{{subItem.node.Growth_Rate?Math.abs(subItem.node.Growth_Rate) + '%':'-'}}</p>
|
||
<text class="type" style="margin-left: 4px">{{subItem.node.Growth_Rate>0?'(提升)':subItem.node.Growth_Rate<0?'(降低)':''}}</text>
|
||
</view>
|
||
</div>
|
||
|
||
<div v-if="subItem.children.length>0" class="thirdBox" v-for="(thirdItem,thirdIndex) in subItem.children" :key="thirdIndex">
|
||
<text class="thirdTitle">{{thirdItem.node.ACCOUNT_CODE}}</text>
|
||
|
||
<div class="valueBox" v-if="thirdItem.node.BUDGETDETAIL_AMOUNT">
|
||
<p class="value" style="color:#a69e9f">{{thirdItem.node.BUDGETDETAIL_AMOUNT}}<text style="margin-left: 4px;color:#a69e9f" v-if="thirdItem.node.BUDGETDETAIL_AMOUNT!=='-'">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="thirdItem.node.BUDGETDETAIL_AMOUNT!=='-'" class="type" style="margin-left: 4px">(计划)</text></p>
|
||
<p class="value" v-if="thirdItem.node.ShowGrowth_Rate">{{thirdItem.node.REVENUE_AMOUNT?thirdItem.node.REVENUE_AMOUNT:'-' }}<text v-if="thirdItem.node.REVENUE_AMOUNT" style="margin-left: 4px">{{item.node.ACCOUNT_CODE==='毛利率'?'%':'元'}}</text><text v-if="thirdItem.node.REVENUE_AMOUNT" class="type" style="margin-left: 4px">(实际)</text></p>
|
||
|
||
<view class="addBox" v-if="thirdItem.node.ShowGrowth_Rate">
|
||
<image class="addIcon" :src="thirdItem.node.Growth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':thirdItem.node.Growth_Rate<0?'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg':''"></image>
|
||
<p class="text" style="margin-left: 4px">{{thirdItem.node.Growth_Rate?Math.abs(thirdItem.node.Growth_Rate) + '%':'-'}}</p>
|
||
<text class="type" style="margin-left: 4px">{{thirdItem.node.Growth_Rate>0?'(提升)':thirdItem.node.Growth_Rate<0?'(降低)':''}}</text>
|
||
</view>
|
||
</div>
|
||
<!-- <div class="top">-->
|
||
<!-- <p class="thirdTitle">便利店</p>-->
|
||
<!-- <view class="right">-->
|
||
<!-- <text class="comparePlan">比计划： </text>-->
|
||
<!-- <view class="box2">-->
|
||
<!-- <image class="addIcon" :src="Number(serviceInfo.Growth_Rate)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>-->
|
||
<!-- <p class="text">{{6+'%'}}</p>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="progressPlan">-->
|
||
<!-- <div class="trans" :style="{width:serviceInfo.Budget_Degree > 100 ? '100%' : serviceInfo.Budget_Degree + '%'}"></div>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="firstBox">-->
|
||
<!-- <p class="firstTitle">营业成本</p>-->
|
||
<!-- <div class="subBox">-->
|
||
<!-- <div class="thirdBox">-->
|
||
<!-- <text class="thirdTitle">便利店</text>-->
|
||
<!-- <text class="value">100,200,600.00元</text>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="thirdBox">-->
|
||
<!-- <text class="thirdTitle">餐饮</text>-->
|
||
<!-- <text class="value">100,200,600.00元</text>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="thirdBox">-->
|
||
<!-- <text class="thirdTitle">客房及其他</text>-->
|
||
<!-- <text class="value">100,200,600.00元</text>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="firstBox">-->
|
||
<!-- <p class="firstTitle">毛利率</p>-->
|
||
<!-- <div class="subBox">-->
|
||
<!-- <div class="thirdBox">-->
|
||
<!-- <text class="thirdTitle">自营综合毛利率</text>-->
|
||
<!-- <text class="value">150%</text>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="thirdBox">-->
|
||
<!-- <text class="thirdTitle">便利店</text>-->
|
||
<!-- <text class="value">45%</text>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="thirdBox">-->
|
||
<!-- <text class="thirdTitle">餐饮</text>-->
|
||
<!-- <text class="value">65%</text>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 12px">
|
||
<div v-if="type==='year'" class="monthList" v-for="(item,index) in dataList" :key="index" @click="handleYearItem(item)">
|
||
<div class="top">
|
||
<div class="left">
|
||
<p class="title" ><text class="name">{{item.Statistics_Month}}</text>月</p>
|
||
<div class="value" >{{item.Budget_Degree}}%</div>
|
||
</div>
|
||
<div class="right">
|
||
<text class="comparePlan">比计划： </text>
|
||
<div class="box2">
|
||
<image class="addIcon" :src="Number(item.Growth_Rate)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
|
||
<p class="text">{{item.Growth_Rate?Math.abs(item.Growth_Rate) + '%':''}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="have" :style="{width:item.Budget_Degree + '%'}"></div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="success">
|
||
<p class="text">已完成:</p>
|
||
<text class="money">{{item.Revenue_Amount}}</text>
|
||
</div>
|
||
<div class="success">
|
||
<p class="text">计划: </p>
|
||
<text class="money">{{item.Budget_Amount }}</text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '@/util/index.js'
|
||
export default {
|
||
name: "serviceDetail",
|
||
data(){
|
||
return{
|
||
serviceInfo:{},
|
||
month:'',
|
||
dataList:[],
|
||
single:'',//显示时间
|
||
endData:'',//截止日期
|
||
type:'',
|
||
isSelect:false,
|
||
optionTime:''
|
||
}
|
||
},
|
||
onLoad(option){
|
||
console.log('option',option)
|
||
if (option.select){
|
||
this.isSelect = true
|
||
}
|
||
if (option.type === 'month'){
|
||
this.type = option.type
|
||
if (option.month){
|
||
this.optionTime = option.month
|
||
this.month = option.month
|
||
}
|
||
if (!this.month){
|
||
const date = new Date()
|
||
this.month = date.getMonth() + 1
|
||
}
|
||
if (this.month<10){
|
||
this.month = '0' + this.month
|
||
}
|
||
this.serviceInfo = JSON.parse(option.serviceInfo)
|
||
this.serviceInfo.Budget_Degree =this.$util.fmoney(this.serviceInfo.Budget_Degree)
|
||
this.getData()
|
||
}else {
|
||
this.type = option.type
|
||
this.serviceInfo = JSON.parse(option.serviceInfo)
|
||
this.getYearData()
|
||
}
|
||
|
||
},
|
||
onShow(){
|
||
if (this.type === 'month'){
|
||
uni.setNavigationBarTitle({
|
||
title: `${this.month}月${this.serviceInfo.SERVERPART_NAME || this.serviceInfo.Serverpart_Name}计划`,
|
||
})
|
||
}else{
|
||
uni.setNavigationBarTitle({
|
||
title: `${this.serviceInfo.SERVERPART_NAME || this.serviceInfo.Serverpart_Name}年度计划`,
|
||
})
|
||
}
|
||
|
||
let storeTime = uni.getStorageSync('lastDay')
|
||
if (storeTime){
|
||
this.time = storeTime
|
||
}
|
||
this.single = this.$util.getThisMonthHave(this.time)
|
||
let nowTime = new Date()
|
||
let y = nowTime.getFullYear()
|
||
let month = nowTime.getMonth() + 1
|
||
if (month<10){
|
||
month = '0'+ month
|
||
}
|
||
this.endData = `${y}-${month}`
|
||
},
|
||
methods:{
|
||
handleYearItem(item){
|
||
let currentService = uni.getStorageSync('currentService')
|
||
let service = {
|
||
Budget_Amount:item.Budget_Amount,
|
||
Budget_Degree:item.Budget_Degree,
|
||
Growth_Rate:item.Growth_Rate,
|
||
Revenue_Amount:item.Revenue_Amount,
|
||
Serverpart_ID:currentService.Serverpart_ID,
|
||
Serverpart_Name:currentService.SERVERPART_NAME
|
||
}
|
||
let num = service.Serverpart_Name.indexOf('服务区')
|
||
console.log(num)
|
||
if (num!==-1){
|
||
service.name = service.Serverpart_Name.slice(0,num)
|
||
service.unit = service.Serverpart_Name.slice(num,100)
|
||
}else{
|
||
service.name = service.Serverpart_Name
|
||
}
|
||
let month = item.Statistics_Month
|
||
uni.navigateTo({
|
||
url:`/pages/commercialBI/serviceDetail?serviceInfo=${JSON.stringify(service)}&month=${month}&type=month`
|
||
})
|
||
},
|
||
// 时间选择器改变的时间
|
||
bindDateChange(e){
|
||
const date = new Date(e.detail.value)
|
||
let m = date.getMonth() + 1
|
||
if (m<10){
|
||
m = '0' + m
|
||
}
|
||
this.month = m
|
||
this.single = e.detail.value
|
||
let d = this.$util.getThisMonthDay(e.detail.value)
|
||
this.endTime = e.detail.value + '-' + d
|
||
console.log('e',e)
|
||
this.getData(e.detail.value)
|
||
},
|
||
async getYearData(){
|
||
let storeServiceInfo = uni.getStorageSync('currentService')
|
||
let lastDay = uni.getStorageSync('lastDay')
|
||
let req = {
|
||
StatisticsDate: lastDay,
|
||
ProvinceCode:'340000',
|
||
StatisticsType:3,
|
||
SPRegionTypeID:storeServiceInfo.SPRegionType_ID,
|
||
ServerpartID:storeServiceInfo.Serverpart_ID
|
||
}
|
||
const totalData = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
|
||
console.log('totalData',totalData)
|
||
this.dataList = totalData.Result_Data.RegionBudgetList
|
||
},
|
||
async getData(changeTime){
|
||
let time = uni.getStorageSync('lastDay')
|
||
let date = ''
|
||
if (changeTime){
|
||
date = new Date(changeTime)
|
||
}else{
|
||
date = new Date(time)
|
||
}
|
||
const nowDate = new Date()
|
||
let nowMonth = nowDate.getMonth() + 1
|
||
let y = date.getFullYear()
|
||
let m = this.month
|
||
let req = {}
|
||
if (nowMonth === m ){
|
||
req = {
|
||
BUDGETPROJECT_YEAR: y,
|
||
STATISTICS_MONTH:`${y}${m}`,
|
||
SERVERPART_ID:this.serviceInfo.Serverpart_ID,
|
||
ACCOUNT_CODE:'6001,6401,6402',
|
||
STATISTICS_DATE: time
|
||
}
|
||
}else{
|
||
let reqDate = new Date(changeTime)
|
||
let y = reqDate.getFullYear()
|
||
let m = reqDate.getMonth() + 1
|
||
if (m<10){
|
||
m = '0' + m
|
||
}
|
||
req = {
|
||
BUDGETPROJECT_YEAR: y,
|
||
STATISTICS_MONTH: `${y}${m}`,
|
||
SERVERPART_ID:this.serviceInfo.Serverpart_ID,
|
||
ACCOUNT_CODE:'6001,6401,6402',
|
||
}
|
||
}
|
||
const totalData = await request.$webGet('CommercialApi/Budget/GetBudgetProjectDetailList',req)
|
||
console.log('totalData',totalData)
|
||
this.dataList = totalData.Result_Data.List
|
||
this.dataList.forEach(item=>{
|
||
if (item.children){
|
||
item.children = this.editData(item.children)
|
||
}else{
|
||
if (item.node.BUDGETDETAIL_AMOUNT){
|
||
item.node.BUDGETDETAIL_AMOUNT = this.$util.fmoney(item.node.BUDGETDETAIL_AMOUNT)
|
||
item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
|
||
}else{
|
||
item.node.BUDGETDETAIL_AMOUNT = '-'
|
||
}
|
||
}
|
||
})
|
||
this.$forceUpdate()
|
||
},
|
||
// 递归处理数据
|
||
editData(value){
|
||
value.forEach(item=>{
|
||
if (item.children){
|
||
item.children = this.editData(item.children)
|
||
}else{
|
||
if (item.node.BUDGETDETAIL_AMOUNT){
|
||
item.node.BUDGETDETAIL_AMOUNT = this.$util.fmoney(item.node.BUDGETDETAIL_AMOUNT)
|
||
item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
|
||
}else{
|
||
item.node.BUDGETDETAIL_AMOUNT = '-'
|
||
}
|
||
}
|
||
})
|
||
return value
|
||
},
|
||
again(value){
|
||
this.editData(value)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.main{
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
padding: 0 16px;
|
||
.title{
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
}
|
||
.top{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.title{
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
}
|
||
.select{
|
||
margin-left: 8px;
|
||
display: inline-block;
|
||
.time {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 4px;
|
||
.day {
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #782717;
|
||
line-height: 44rpx;
|
||
margin-right: 4px;
|
||
}
|
||
.uni-input {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #ae664e;
|
||
line-height: 36rpx;
|
||
}
|
||
.icon {
|
||
width: 24px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.box {
|
||
width: 100%;
|
||
padding: 12px 16px;
|
||
box-sizing: border-box;
|
||
border-radius: 8px;
|
||
background: #f5f2f2;
|
||
margin-top: 12px;
|
||
.top {
|
||
width: 100%;
|
||
display: flex;
|
||
.big {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
border: 1px solid #ebebeb;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 8px;
|
||
.icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
}
|
||
.text {
|
||
width: calc(100% - 60px);
|
||
padding: 2px 0;
|
||
.textTop{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.left{
|
||
display: flex;
|
||
align-items: center;
|
||
.number {
|
||
font-size: 36rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #150002;
|
||
line-height: 40rpx;
|
||
}
|
||
.desc{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 8px;
|
||
font-size: 14px;
|
||
color: #FF7043;
|
||
.success{
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
}
|
||
.right{
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
.comparePlan{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 36rpx;
|
||
white-space: nowrap;
|
||
}
|
||
.box2{
|
||
display: flex;
|
||
align-items: center;
|
||
.text{
|
||
font-size: 14px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
color: #150002;
|
||
font-weight: bold;
|
||
|
||
line-height: 40rpx;
|
||
}
|
||
.addIcon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.progressPlan{
|
||
width: 100%;
|
||
height: 8px;
|
||
border-radius: 5px;
|
||
background: #fff;
|
||
margin-top: 8px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
.trans{
|
||
height: 8px;
|
||
position: absolute;
|
||
left: 0;top: 0;
|
||
border-top-right-radius: 4px;
|
||
border-bottom-right-radius: 4px;
|
||
background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png")no-repeat 100% 100%;
|
||
}
|
||
.transYear{
|
||
height: 8px;
|
||
position: absolute;
|
||
left: 0;top: 0;
|
||
border-top-right-radius: 4px;
|
||
border-bottom-right-radius: 4px;
|
||
background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png")no-repeat 100% 100%;
|
||
}
|
||
//.img{
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// position: absolute;
|
||
// top: 0;
|
||
// left: 0;
|
||
// z-index:1;
|
||
//}
|
||
//.pro{
|
||
// height: 100%;
|
||
// position: absolute;
|
||
// top: 0;right: 0;
|
||
// background: #fff;
|
||
// z-index:2;
|
||
//}
|
||
|
||
}
|
||
}
|
||
}
|
||
.bottom {
|
||
display: flex;
|
||
margin-top: 16px;
|
||
padding-left: 48px;
|
||
.success {
|
||
.text {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786b6c;
|
||
line-height: 40rpx;
|
||
margin-bottom: 2px;
|
||
.unit {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 40rpx;
|
||
margin-left: 2px;
|
||
}
|
||
}
|
||
.money {
|
||
font-size: 28rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.list{
|
||
margin-top: 12px;
|
||
.item{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 12px;
|
||
background: #F5F5F5;
|
||
margin-bottom: 12px;
|
||
border-radius: 8px;
|
||
.bigTitle{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
.name{
|
||
color: #150002;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
.firstBox{
|
||
margin-top: 8px;
|
||
.firstTitle{
|
||
display: inline-block;
|
||
width: 180px;
|
||
font-size: 16px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 22px;
|
||
}
|
||
.valueBox{
|
||
display: inline-block;
|
||
text-align: right;
|
||
.addBox{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
.addIcon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 2px;
|
||
}
|
||
.type{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 18px;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
.value{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
color: #160002;
|
||
line-height: 22px;
|
||
padding-left: 10px;
|
||
.type{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 18px;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
.subBox{
|
||
margin-top: 4px;
|
||
.subTitle{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 22px;
|
||
padding-left: 10px;
|
||
display: inline-block;
|
||
width: 120px;
|
||
}
|
||
.thirdBox{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 8px;
|
||
.thirdTitle{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 22px;
|
||
padding-left: 30px;
|
||
display: inline-block;
|
||
width: 130px;
|
||
}
|
||
.valueBox{
|
||
display: inline-block;
|
||
text-align: right;
|
||
.addBox{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
.addIcon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 2px;
|
||
}
|
||
.type{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 18px;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
.value{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
color: #160002;
|
||
line-height: 22px;
|
||
padding-left: 10px;
|
||
.type{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 18px;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
.top{
|
||
display: flex;
|
||
align-items: center;
|
||
.thirdTitle{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 22px;
|
||
padding-left: 30px;
|
||
}
|
||
.right{
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
.comparePlan{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
white-space: nowrap;
|
||
}
|
||
.box2{
|
||
display: flex;
|
||
align-items: center;
|
||
.text{
|
||
font-size: 14px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
color: #150002;
|
||
font-weight: bold;
|
||
|
||
line-height: 40rpx;
|
||
}
|
||
.addIcon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.progressPlan{
|
||
width: calc(100% - 30px);
|
||
box-sizing: border-box;
|
||
margin-left: 30px;
|
||
height: 8px;
|
||
border-radius: 5px;
|
||
background: #fff;
|
||
margin-top: 8px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
.trans{
|
||
height: 8px;
|
||
position: absolute;
|
||
left: 0;top: 0;
|
||
border-top-right-radius: 4px;
|
||
border-bottom-right-radius: 4px;
|
||
background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png")no-repeat 100% 100%;
|
||
}
|
||
.transYear{
|
||
height: 8px;
|
||
position: absolute;
|
||
left: 0;top: 0;
|
||
border-top-right-radius: 4px;
|
||
border-bottom-right-radius: 4px;
|
||
background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png")no-repeat 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.monthList{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 12px;
|
||
background: #F5F5F5;
|
||
margin-bottom: 12px;
|
||
border-radius: 8px;
|
||
.top{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.left{
|
||
display: flex;
|
||
align-items: center;
|
||
.icon{
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 8px;
|
||
}
|
||
.title{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 18px;
|
||
.name{
|
||
color: #150002;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
.value{
|
||
font-size: 14px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #FF6D40;
|
||
line-height: 16px;
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
.right{
|
||
display: flex;
|
||
align-items: center;
|
||
.comparePlan{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 36rpx;
|
||
white-space: nowrap;
|
||
}
|
||
.box2{
|
||
display: flex;
|
||
align-items: center;
|
||
.text{
|
||
font-size: 14px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
color: #150002;
|
||
font-weight: bold;
|
||
|
||
line-height: 40rpx;
|
||
}
|
||
.addIcon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
.progress{
|
||
width: 100%;
|
||
height: 8px;
|
||
background: #fff;
|
||
border-radius: 6px;
|
||
margin: 8px 0 16px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
.have{
|
||
position: absolute;
|
||
height: 100%;
|
||
border-radius: 6px;
|
||
top: 0;left: 0;
|
||
background:#778CFD;
|
||
}
|
||
}
|
||
.bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 16px;
|
||
.success {
|
||
width: calc(50% - 4px);
|
||
display: flex;
|
||
align-items: center;
|
||
.text{
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 20px;
|
||
}
|
||
.money {
|
||
margin-left: 8px;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #a69e9f;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|