721 lines
25 KiB
Vue
721 lines
25 KiB
Vue
<template>
|
||
<div class="main">
|
||
<div class="listBox" v-if="type==='year'">
|
||
<div class="thisMonth">
|
||
<div class="titleTop">
|
||
<p class="title">{{month}}月自营计划</p>
|
||
<div class="question" @click="handleShowNotice">
|
||
<image src="/static/images/index/noticeQuestion.svg"></image>
|
||
</div>
|
||
<div v-if="showNotice" class="titleTopNotice">{{monthText}}</div>
|
||
<div v-if="showNotice" class="meng" @click="handleNoShowNotice"></div>
|
||
</div>
|
||
<view class="box">
|
||
<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">{{info.Budget_Degree?info.Budget_Degree + '%':'-'}}</p>
|
||
<p v-if="info.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(info.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">{{info.Growth_Rate ?Math.abs(info.Growth_Rate) + '%':'-'}}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<div class="progressPlan">
|
||
<div class="trans" :style="{width:info.Budget_Degree > 100 ? '100%' : info.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">{{info.Revenue_Amount ?info.Revenue_Amount :'-'}}</p>
|
||
</view>
|
||
<view class="success">
|
||
<p class="text">本月计划<text class="unit">/元</text></p>
|
||
<p class="money">{{info.Budget_Amount ?info.Budget_Amount :'-'}}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
<div class="list" v-for="(item,index) in dataList" :key="index" @click="handleDetail(item)">
|
||
<div class="top">
|
||
<div class="left">
|
||
<p class="title" v-if="type==='year'"><text class="name">{{item.name}}</text>{{item.unit}}</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">
|
||
<text class="text">已完成:</text>
|
||
<text class="money">{{item.Revenue_Amount}}</text>
|
||
</div>
|
||
<div class="success">
|
||
<text class="text">计划: </text>
|
||
<text class="money">{{item.Budget_Amount }}</text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="listBox" v-if="type==='month'">
|
||
<div class="thisMonth">
|
||
<div class="titleTop">
|
||
<p class="title">{{item.Serverpart_Name}}自营计划</p>
|
||
<div class="question" @click="handleShowNotice">
|
||
<image src="/static/images/index/noticeQuestion.svg"></image>
|
||
</div>
|
||
<div v-if="showNotice" class="titleTopNotice">{{itemText}}</div>
|
||
<div v-if="showNotice" class="meng" @click="handleNoShowNotice"></div>
|
||
</div>
|
||
<view class="box">
|
||
<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">{{info.Budget_Degree?info.Budget_Degree + '%':'-'}}</p>
|
||
<p v-if="info.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(info.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">{{info.Growth_Rate ?Math.abs(info.Growth_Rate) + '%':'-'}}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<div class="progressPlan">
|
||
<div class="trans" :style="{width:info.Budget_Degree > 100 ? '100%' : info.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">{{info.Revenue_Amount ?info.Revenue_Amount :'-'}}</p>
|
||
</view>
|
||
<view class="success">
|
||
<p class="text">本月计划<text class="unit">/元</text></p>
|
||
<p class="money">{{info.Budget_Amount ?info.Budget_Amount :'-'}}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
<div class="list" v-for="(item,index) in dataList" :key="index" @click="handleToServiceDetail(item)">
|
||
<div class="top">
|
||
<div class="left">
|
||
<p class="title" ><text class="name">{{item.name}}</text>{{item.unit}}</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: "planDetail",
|
||
data(){
|
||
return{
|
||
date:'', //时间
|
||
type:'', //类别
|
||
dataList:[],
|
||
id:'',
|
||
showNotice:false,
|
||
showNoticeYear:false,
|
||
info:{},
|
||
month:0,//传入的月份
|
||
item:{},//月份的时候传入的整个片区信息
|
||
itemText:'',//片区显示的文字
|
||
monthText:'',//月份显示的文字
|
||
lastDay:'',
|
||
second:false
|
||
}
|
||
},
|
||
onLoad(option){
|
||
// 从缓存中拿到选中的时间
|
||
this.lastDay = uni.getStorageSync('lastDay')
|
||
// 判断是否是第二次进入页面，因为月份的片区 再点进去展示的月份的服务区 需要的参数会不一样
|
||
if (option.second==='true'){
|
||
this.second = true
|
||
}
|
||
// 拿到上一个页面带来的参数
|
||
this.type = option.type
|
||
if (option.id){
|
||
this.id =option.id
|
||
}
|
||
// 拿到传入的月份
|
||
this.month = Number(option.month)
|
||
// 取全局的时间
|
||
let date = new Date(this.lastDay)
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
let d = date.getDate()
|
||
if (m<10){
|
||
m = '0'+m
|
||
}
|
||
if (d<10){
|
||
d = '0' + d
|
||
}
|
||
// 判断如果是当前月份的话 就拿到当前时间，不是当前月份的话 就拿那个月的最后一天
|
||
if (option.month){
|
||
if (Number(m) === Number(option.month)){
|
||
this.date = `${y}-${m}-${d}`
|
||
}else{
|
||
let month
|
||
if (this.month<10){
|
||
month = '0' + this.month
|
||
}else{
|
||
month = this.month
|
||
}
|
||
//月份不是当前月
|
||
let mayDate = `${y}-${month}`
|
||
let addDay = this.$util.getThisMonthDay(mayDate)
|
||
this.date = `${mayDate}-${addDay}`
|
||
}
|
||
}
|
||
// 直接把上一个页面点进的片区属性全部拿来
|
||
if (option.item){
|
||
this.item = JSON.parse(option.item)
|
||
}
|
||
// 如果是第二次进入 那么调用的方法也不一样 做个判断 因为显示的列表类型会不一样
|
||
if (option.second==='true'){
|
||
this.getDateSecond()
|
||
}else{
|
||
this.getDateList()
|
||
}
|
||
// 拿到问号里面的文字
|
||
this.handleNoticeText()
|
||
},
|
||
onShow(){
|
||
// 判断让小程序页面标题展示相应的名字
|
||
if (this.second){
|
||
uni.setNavigationBarTitle({
|
||
title: `${this.month}月${this.item.Serverpart_Name}自营计划`,
|
||
})
|
||
}else{
|
||
if (this.type==='year'){
|
||
//每个月片区的列表
|
||
uni.setNavigationBarTitle({
|
||
title: `${this.month}月自营计划`,
|
||
})
|
||
}else{
|
||
//片区进来服务区的列表
|
||
uni.setNavigationBarTitle({
|
||
title: `${this.item.Serverpart_Name}本月自营计划`,
|
||
})
|
||
}
|
||
}
|
||
},
|
||
onUnload() {
|
||
this.$util.addUserBehavior()
|
||
},
|
||
methods:{
|
||
// 跳转到服务区详情
|
||
handleToServiceDetail(item){
|
||
uni.navigateTo({
|
||
url:`/pages/commercialBI/serviceDetail?serviceInfo=${JSON.stringify(item)}&month=${this.month?this.month:''}&type=month&select=true`
|
||
})
|
||
},
|
||
async getDateSecond(){
|
||
let req = {
|
||
StatisticsDate:this.date,
|
||
ProvinceCode:'340000',
|
||
StatisticsType:4,
|
||
SPRegionTypeID:this.id
|
||
}
|
||
const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
|
||
data.Result_Data.RegionBudgetList.forEach(item=>{
|
||
let num = item.Serverpart_Name.indexOf('服务区')
|
||
if (num!==-1){
|
||
item.name = item.Serverpart_Name.slice(0,num)
|
||
item.unit = item.Serverpart_Name.slice(num,100)
|
||
}else{
|
||
item.name = item.Serverpart_Name
|
||
}
|
||
item.Revenue_Amount = this.$util.fmoney(item.Revenue_Amount)
|
||
item.Budget_Amount = this.$util.fmoney(item.Budget_Amount)
|
||
})
|
||
this.info = data.Result_Data
|
||
this.info.Budget_Amount = this.$util.fmoney(this.info.Budget_Amount)
|
||
this.info.Revenue_Amount = this.$util.fmoney(this.info.Revenue_Amount)
|
||
this.dataList = data.Result_Data.RegionBudgetList
|
||
},
|
||
// 当从年份点进来的时候 片区列表的每一项都可以再次点击 进入到当月的 这个片区下的服务区的列表数据
|
||
handleDetail(item){
|
||
uni.navigateTo({
|
||
url:`/pages/commercialBI/planDetail?type=month&item=${JSON.stringify(item)}&id=${item.Serverpart_ID}&second=${true}&month=${this.month}`
|
||
})
|
||
},
|
||
async handleNoticeText(){
|
||
let date = new Date(this.lastDay)
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
if(m<10){
|
||
m = '0'+m
|
||
}
|
||
let req = {}
|
||
if (this.type==='year'){
|
||
req = {
|
||
SearchParameter:{
|
||
STATISTICS_DATE:`${m}`,
|
||
ANALYSISINS_TYPE:'1012',
|
||
ANALYSISINS_FORMAT:'3000'
|
||
},
|
||
PageIndex:1,
|
||
PageSize:10
|
||
}
|
||
}else{
|
||
req = {
|
||
SearchParameter:{
|
||
STATISTICS_DATE:`${y}-${m}`,
|
||
ANALYSISINS_TYPE:'1011',
|
||
ANALYSISINS_FORMAT:'3000',
|
||
SPREGIONTYPE_ID:this.item.Serverpart_ID
|
||
},
|
||
PageIndex:1,
|
||
PageSize:10
|
||
}
|
||
}
|
||
const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',req)
|
||
this.monthText = data.Result_Data.List[0].ANALYSIS_CONTENT
|
||
this.itemText = data.Result_Data.List[0].ANALYSIS_CONTENT
|
||
},
|
||
handleShowNotice(){
|
||
this.showNotice = true
|
||
},
|
||
handleNoShowNotice(){
|
||
this.showNotice = false
|
||
},
|
||
handleShowNoticeYear(){
|
||
this.showNoticeYear = true
|
||
},
|
||
handleNoShowNoticeYear(){
|
||
this.showNoticeYear = false
|
||
},
|
||
async getDateList(){
|
||
if (this.type==='year'){
|
||
let req = {
|
||
StatisticsDate:this.date,
|
||
ProvinceCode:'340000',
|
||
StatisticsType:1
|
||
}
|
||
const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
|
||
data.Result_Data.RegionBudgetList.forEach(item=>{
|
||
let num = item.Serverpart_Name.indexOf('片区')
|
||
if (num!==-1){
|
||
item.name = item.Serverpart_Name.slice(0,num)
|
||
item.unit = item.Serverpart_Name.slice(num,100)
|
||
}else{
|
||
item.name = item.Serverpart_Name
|
||
}
|
||
item.Revenue_Amount = this.$util.fmoney(item.Revenue_Amount)
|
||
item.Budget_Amount = this.$util.fmoney(item.Budget_Amount)
|
||
})
|
||
this.info = data.Result_Data
|
||
this.info.Budget_Amount = this.$util.fmoney(this.info.Budget_Amount)
|
||
this.info.Revenue_Amount = this.$util.fmoney(this.info.Revenue_Amount)
|
||
this.dataList = data.Result_Data.RegionBudgetList
|
||
}else{
|
||
let time = uni.getStorageSync('lastDay')
|
||
let req = {
|
||
StatisticsDate:time,
|
||
ProvinceCode:'340000',
|
||
StatisticsType:4,
|
||
SPRegionTypeID:this.id
|
||
}
|
||
const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
|
||
data.Result_Data.RegionBudgetList.forEach(item=>{
|
||
let num = item.Serverpart_Name.indexOf('服务区')
|
||
if (num!==-1){
|
||
item.name = item.Serverpart_Name.slice(0,num)
|
||
item.unit = item.Serverpart_Name.slice(num,100)
|
||
}else{
|
||
item.name = item.Serverpart_Name
|
||
}
|
||
item.Revenue_Amount = this.$util.fmoney(item.Revenue_Amount)
|
||
item.Budget_Amount = this.$util.fmoney(item.Budget_Amount)
|
||
})
|
||
this.info = data.Result_Data
|
||
this.info.Budget_Amount = this.$util.fmoney(this.info.Budget_Amount)
|
||
this.info.Revenue_Amount = this.$util.fmoney(this.info.Revenue_Amount)
|
||
this.dataList = data.Result_Data.RegionBudgetList
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.main{
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
padding: 0 16px;
|
||
.listBox{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding-bottom: calc(8px + env(safe-area-inset-bottom)) ;
|
||
.thisMonth{
|
||
margin-bottom: 12px;
|
||
.titleTop{
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 44rpx;
|
||
}
|
||
.question{
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-left: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.titleTopNotice{
|
||
position: absolute;
|
||
padding: 12px;
|
||
left:35%;
|
||
top: 0;
|
||
width: 50vw;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 10px 10px 0 rgba(22,0,2,0.1);
|
||
z-index: 9999;
|
||
}
|
||
.meng{
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;left: 0;
|
||
}
|
||
}
|
||
.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{
|
||
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:#FF8E5B
|
||
}
|
||
}
|
||
.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>
|