收支预测页面点击出现悬浮框

This commit is contained in:
cclu 2023-08-21 13:47:20 +08:00
parent fa33e526db
commit 6e1494d865
3 changed files with 663 additions and 51 deletions

Binary file not shown.

View File

@ -19,7 +19,7 @@
<image class="icon" :src="1<=selectMonth && selectMonth<=3?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex/1stDownArrow.svg':4<=selectMonth && selectMonth<=6?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex/2stDownArrow.svg':7<=selectMonth && selectMonth<=9?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex/3stDownArrow.svg':'https://eshangtech.com/ShopICO/ahyd-BID/newIndex/4stDownArrow.svg'"></image>
</view>
</picker>
</view>
</view>
</div>
<!-- ,height:loadMore?'200px':'38px'-->

View File

@ -1,7 +1,8 @@
<template>
<view class="main">
<!-- <view class="meng" v-if="showNotice" @click="handleShowNotice"></view>-->
<view class="meng" v-if="showCost || showPay|| showMonthRevenue|| showMonthExpenditure|| successRate|| thisYearSum|| nowYearSumRate|| showNetProfit|| budget|| showYearNetProfit|| revenueAll|| revenueSuccess|| revenueCostRate|| budgetSum|| incomeSuccess|| nowYearBudget|| nowYearRevenueCost|| compareYesSuccessRate|| userRevenueSmallSum|| thisMonthSum|| thisMonthRevenueRate|| thisMonthSmallSumSuccess1st|| thisMonthSmallSumSuccess2st|| thisMonthSmallSumSuccess2stTitle|| otherSmallSum"
@click="handleShowNotice('false')"></view>
<view class="meng" v-if="otherLeftChar || otherMonthSum ||otherThisMonthRate ||otherThisMonthSuccess" @click="handleShowNotice2('false')"></view>
<view class="header">
<image class="headerBg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/revenyeBg.png"/>
<view class="headerTop" :style="{top: menu.top + 'px',height:menu.height + 'px'}">
@ -138,7 +139,7 @@
<view class="itemValue">
275.00
<view class="notice" @click="handleShowNotice('budget')">?
<view class="noticeBox" :style="{left:'calc(33.3% + 30px)'}" v-if="budget" @click.stop="handleShowNotice('budget')">
<view class="noticeBox" :style="{left:'calc(33.3% + 30px)',top: '40px'}" v-if="budget" @click.stop="handleShowNotice('budget')">
<text>利润总额</text>
</view>
</view>
@ -158,13 +159,27 @@
</view>
<view class="yearItem">
<view class="itemValue">156.00</view>
<view class="itemValue">
156.00
<view class="notice" @click="handleShowNotice('showNetProfit')">?
<view class="noticeBox" :style="{left:'calc(33.3% + 30px)',top: '115px'}"v-if="showNetProfit" @click.stop="handleShowNotice('showNetProfit')">
<text>净利润年度预算</text>
</view>
</view>
</view>
<text class="itemLabel">净利润预算<text class="itemUnit">/万元</text></text>
</view>
<view class="yearItem" style="width: 80px">
<view class="itemValue" style="color: #E83944">187.18%</view>
<text class="itemLabel">完成度</text>
<view class="itemLabel" style="display: flex;align-items: center">
完成度
<view class="notice" @click="handleShowNotice('showYearNetProfit')">?
<view class="noticeBox" :style="{left:'calc(33.3% + 30px)',top: '115px'}"v-if="showYearNetProfit" @click.stop="handleShowNotice('showYearNetProfit')">
<text>=本年净利润/净利润预算</text>
</view>
</view>
</view>
</view>
</view>
</view>
@ -173,13 +188,25 @@
<view class="accrueYear">
<view class="itemBox">
<view class="itemBoxTitle">2023年营收累计</view>
<view style="display: flex;align-items: center">
<view class="itemBoxTitle">2023年营收累计</view>
<view class="notice" @click="handleShowNotice('revenueAll')">?
<view class="noticeBox" :style="{left:'50%',top: '0px'}" v-if="revenueAll" @click.stop="handleShowNotice('revenueAll')">
<text>不包含营业外收入</text>
</view>
</view>
</view>
<image class="monthSumBg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/yearRevenue.png"/>
<view class="itemDetailBox">
<view class="leftCharts">
<view class="leftCharts" @click="handleShowNotice('revenueSuccess')">
<OtherCharts :success="thirdBoxRate" :colorList="['#9E3CE9', '#ECD8FB']"/>
<text class="numberValue">65.12%</text>
</view>
<view class="notices">
<view class="noticeBox" :style="{left:'0px',top: '50%'}" v-if="revenueSuccess" @click.stop="handleShowNotice('revenueSuccess')">
<text>不包含营业外收入</text>
</view>
</view>
<view class="rightBox">
<view class="rightBoxTop">
<view class="itemTop">
@ -188,7 +215,14 @@
</view>
<view class="itemRateBox">
<view class="addRate">38.23%</view>
<view class="rateText">成本比</view>
<view class="rateText" style="display: flex;align-items: center">
成本比
<view class="notice" @click="handleShowNotice('revenueCostRate')">?
<view class="noticeBox" :style="{right:'0px',top: '30%'}" v-if="revenueCostRate" @click.stop="handleShowNotice('revenueCostRate')">
<text>=本年成本/本年营收收入</text>
</view>
</view>
</view>
</view>
</view>
<view class="rightBoxTop">
@ -198,7 +232,14 @@
</view>
<view class="itemRateBox">
<view class="addRate">+47.81%</view>
<view class="rateText">同比</view>
<view class="rateText" style="display: flex;align-items: center">
同比
<view class="notice" @click="handleShowNotice('budgetSum')">?
<view class="noticeBox" :style="{right:'0px',top: '80%'}" v-if="budgetSum" @click.stop="handleShowNotice('budgetSum')">
<text>本年累计同比值</text>
</view>
</view>
</view>
</view>
</view>
</view>
@ -211,29 +252,64 @@
<view class="itemBoxTitle" style="color: #EC6C00">2023年收入合计</view>
<image class="monthSumBg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/allInCome.png"/>
<view class="itemDetailBox">
<view class="leftCharts">
<view class="leftCharts" @click="handleShowNotice('incomeSuccess')">
<OtherCharts :success="firthBox1stRate" :colorList="['#FC7909', '#FEE4CE']"/>
<text class="numberValue" style="color: #FE7500">65.18%</text>
<view class="notices">
<view class="noticeBox" :style="{left:'0px',top: '50%'}" v-if="incomeSuccess" @click.stop="handleShowNotice('incomeSuccess')">
<text>=本年累计/年度预算</text>
</view>
</view>
</view>
<view class="rightBox">
<view class="rightBoxTop">
<view class="itemTop">
<text class="itemTopValue">47,376.60</text>
<text class="itemTopTitle">本年累计<text class="itemTopUnit">/万元</text></text>
<view class="itemTopTitle" style="display: flex;align-items: center">
本年累计
<text class="itemTopUnit">/万元</text>
<view class="notice" @click="handleShowNotice('nowYearSum')">?
<view class="noticeBox" :style="{left:'33%',top: '20px'}" v-if="nowYearSum" @click.stop="handleShowNotice('nowYearSum')">
<text>包含营业外收入</text>
</view>
</view>
</view>
</view>
<view class="itemRateBox">
<view class="addRate">38.11%</view>
<view class="rateText">成本比</view>
<view class="rateText" style="display: flex;align-items: center">
成本比
<view class="notice" @click="handleShowNotice('nowYearRevenueCost')">?
<view class="noticeBox" :style="{left:'33%',top: '20px'}" v-if="nowYearRevenueCost" @click.stop="handleShowNotice('nowYearRevenueCost')">
<text>=本年累计成本/本年累计收入</text>
</view>
</view>
</view>
</view>
</view>
<view class="rightBoxTop" style="margin-top: 32rpx">
<view class="itemTop">
<text class="itemTopValue">72,687.00</text>
<text class="itemTopTitle">年度预算<text class="itemTopUnit">/万元</text></text>
<view class="itemTopTitle" style="display: flex;align-items: center">
年度预算
<text class="itemTopUnit">/万元</text>
<view class="notice" @click="handleShowNotice('nowYearBudget')">?
<view class="noticeBox" :style="{left:'33%',top: '80%'}" v-if="nowYearBudget" @click.stop="handleShowNotice('nowYearBudget')">
<text>年度预算包含营业外</text>
</view>
</view>
</view>
</view>
<view class="itemRateBox">
<view class="addRate">+48.54%</view>
<view class="rateText">同比</view>
<view class="rateText" style="display: flex;align-items: center">
同比
<view class="notice" @click="handleShowNotice('nowYearSumRate')">?
<view class="noticeBox" :style="{right:'0%',top: '80%'}" v-if="nowYearSumRate" @click.stop="handleShowNotice('nowYearSumRate')">
<text>本年累计的同比值</text>
</view>
</view>
</view>
</view>
</view>
</view>
@ -247,7 +323,14 @@
<view class="smallIcon">
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/selfOperat.svg"/>
</view>
<view class="smallTitle">自营收入小计</view>
<view style="display: flex;align-items: center">
<view class="smallTitle">自营收入小计</view>
<view class="notice" @click="handleShowNotice('userRevenueSmallSum')">?
<view class="noticeBox" :style="{left:'30%',top: '0%'}" v-if="userRevenueSmallSum" @click.stop="handleShowNotice('userRevenueSmallSum')">
<text>本年累计的同比值</text>
</view>
</view>
</view>
</view>
<view class="leftRight" @click="handleGoInComeDetail">
<text class="more">查看更多</text>
@ -256,9 +339,14 @@
</view>
<view class="itemSmallDetail">
<view class="itemSmallLeftBox">
<view class="itemSmallLeftBox" @click="handleShowNotice('compareYesSuccessRate')">
<OtherCharts :success="firthBox2stRate" :colorList="['#FC7909', '#F9DCC2']"/>
<text class="leftValue">71.70%</text>
<view class="notices">
<view class="noticeBox" :style="{left:'30%',top: '100px'}" v-if="compareYesSuccessRate" @click.stop="handleShowNotice('compareYesSuccessRate')">
<text>相较于年度预算的完成度</text>
</view>
</view>
</view>
<view class="itemSmallRightBox">
<view class="rightTopItem">
@ -267,8 +355,19 @@
<view class="detailTitle">本年累计<text class="detailTitleUnit">/万元</text></view>
</view>
<view class="itemDetail">
<view class="detailValue" style="font-size: 26rpx">5,070.82</view>
<view class="detailTitle">7月累计<text class="detailTitleUnit">/万元</text></view>
<view class="detailValue" style="font-size: 26rpx;display: flex;align-items: center">
5,070.82
<view class="notice" @click="handleShowNotice('thisMonthSum')">?
<view class="noticeBox" :style="{right:'0px',top: '85px'}" v-if="thisMonthSum" @click.stop="handleShowNotice('thisMonthSum')">
<text>7</text>
</view>
</view>
</view>
<view class="detailTitle" >
7月累计
<text class="detailTitleUnit">/万元</text>
</view>
</view>
</view>
<view class="rightTopItem" style="margin-top: 32rpx">
@ -278,7 +377,14 @@
</view>
<view class="itemRight">
<view class="rightValue">14.92%</view>
<view class="rightLabel">本月占比</view>
<view class="rightLabel" style="display: flex;align-items: center">
本月占比
<view class="notice" @click="handleShowNotice('thisMonthRevenueRate')">?
<view class="noticeBox" :style="{right:'0px',top: '120px'}" v-if="thisMonthRevenueRate" @click.stop="handleShowNotice('thisMonthRevenueRate')">
<text>7月自营收入/本年累计自营计划</text>
</view>
</view>
</view>
</view>
</view>
</view>
@ -291,20 +397,35 @@
<text class="smallTitle">服务区自营小计</text>
</view>
<view class="smallSumRight">
<text class="successText">完成率</text>
<view class="smallSumRight" style="display: flex;align-items: center">
<view class="notice" @click="handleShowNotice('thisMonthSmallSumSuccess1st')">?
<view class="noticeBox" :style="{right:'0px',top: '190px'}" v-if="thisMonthSmallSumSuccess1st" @click.stop="handleShowNotice('thisMonthSmallSumSuccess1st')">
<text>相较于年度预算的完成度</text>
</view>
</view>
<text class="successText" style="margin-left: 4rpx">完成率</text>
<text class="successValue">64.21%</text>
</view>
</view>
<view class="smallSumItem">
<view class="smallSumLeft">
<view class="smallSumLeft" style="display: flex;align-items: center">
<view class="smallSumItemBox"></view>
<text class="smallTitle">分公司收入小计</text>
<view class="notice" @click="handleShowNotice('thisMonthSmallSumSuccess2stTitle')">?
<view class="noticeBox" :style="{right:'0px',top: '210px'}" v-if="thisMonthSmallSumSuccess2stTitle" @click.stop="handleShowNotice('thisMonthSmallSumSuccess2stTitle')">
<text>分公司城市店批发团购及通道费</text>
</view>
</view>
</view>
<view class="smallSumRight">
<text class="successText">完成率</text>
<view class="smallSumRight" style="display: flex;align-items: center">
<view class="notice" @click="handleShowNotice('thisMonthSmallSumSuccess2st')">?
<view class="noticeBox" :style="{right:'0px',top: '210px'}" v-if="thisMonthSmallSumSuccess2st" @click.stop="handleShowNotice('thisMonthSmallSumSuccess2st')">
<text>相较于年度预算的完成度</text>
</view>
</view>
<text class="successText" style="margin-left: 4rpx">完成率</text>
<text class="successValue">7.49%</text>
</view>
</view>
@ -313,11 +434,16 @@
<view class="itemSmallBox">
<view class="itemSmallTop">
<view class="leftBox">
<view class="leftBox" style="display: flex;align-items: center">
<view class="smallIcon">
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/otherSum.svg"/>
</view>
<view class="smallTitle">其他收入小计</view>
<view class="notice" @click="handleShowNotice('otherSmallSum')">?
<view class="noticeBox" :style="{left:'30%',top: '20px'}" v-if="otherSmallSum" @click.stop="handleShowNotice('otherSmallSum')">
<text>其它收入场地尊林物业及受托代管公共服务补贴营业外收入</text>
</view>
</view>
</view>
<view class="leftRight" @click="handleGoInComeDetail">
<text class="more">查看更多</text>
@ -326,9 +452,14 @@
</view>
<view class="itemSmallDetail">
<view class="itemSmallLeftBox">
<view class="itemSmallLeftBox" @click="handleShowNotice2('otherLeftChar')">
<OtherCharts :success="firthBox3stRate" :colorList="['#FC7909', '#F9DCC2']"/>
<text class="leftValue">52.97%</text>
<view class="notices">
<view class="noticeBox" :style="{left:'30%',top: '100px'}" v-if="otherLeftChar" @click.stop="handleShowNotice2('otherLeftChar')">
<text>相较于年度预算的完成度</text>
</view>
</view>
</view>
<view class="itemSmallRightBox">
<view class="rightTopItem">
@ -337,7 +468,14 @@
<view class="detailTitle">本年累计<text class="detailTitleUnit">/万元</text></view>
</view>
<view class="itemDetail">
<view class="detailValue">2,028.58</view>
<view class="detailValue" style="display: flex;align-items: center">
2,028.58
<view class="notice" @click="handleShowNotice2('otherMonthSum')">?
<view class="noticeBox" :style="{right:'0px',top: '85px'}" v-if="otherMonthSum" @click.stop="handleShowNotice2('otherMonthSum')">
<text>7</text>
</view>
</view>
</view>
<view class="detailTitle">7月累计<text class="detailTitleUnit">/万元</text></view>
</view>
</view>
@ -348,7 +486,14 @@
</view>
<view class="itemRight">
<view class="rightValue">15.14%</view>
<view class="rightLabel">本月占比</view>
<view class="rightLabel" style="display: flex;align-items: center">
本月占比
<view class="notice" @click="handleShowNotice2('otherThisMonthRate')">?
<view class="noticeBox" :style="{right:'0px',top: '120px'}" v-if="otherThisMonthRate" @click.stop="handleShowNotice2('otherThisMonthRate')">
<text>7月其它收入/本年累计其它收入</text>
</view>
</view>
</view>
</view>
</view>
</view>
@ -361,8 +506,13 @@
<text class="smallTitle">服务区自营小计</text>
</view>
<view class="smallSumRight">
<text class="successText">完成率</text>
<view class="smallSumRight" style="display: flex;align-items: center">
<view class="notice" @click="handleShowNotice2('otherThisMonthSuccess')">?
<view class="noticeBox" :style="{right:'0px',top: '210px'}" v-if="otherThisMonthSuccess" @click.stop="handleShowNotice2('otherThisMonthSuccess')">
<text>相较于年度预算的完成率</text>
</view>
</view>
<text class="successText" style="margin-left: 4rpx">完成率</text>
<text class="successValue">50.05%</text>
</view>
</view>
@ -715,6 +865,29 @@ export default {
successRate:false,//
thisYearSum:false,//
budget:false,//
showNetProfit:false,//
showYearNetProfit:false,//
revenueAll:false,//
revenueSuccess:false,//
revenueCostRate:false,//
budgetSum:false,//
incomeSuccess:false,//
nowYearSum:false,//
nowYearRevenueCost:false,//
nowYearBudget:false,//
nowYearSumRate:false,//
userRevenueSmallSum:false,//
compareYesSuccessRate:false,//
thisMonthSum:false,//
thisMonthRevenueRate:false,//
thisMonthSmallSumSuccess1st:false,//
thisMonthSmallSumSuccess2st:false,//
thisMonthSmallSumSuccess2stTitle:false,//
otherSmallSum:false,//
otherLeftChar:false,//
otherMonthSum:false,//
otherThisMonthRate:false,//
otherThisMonthSuccess:false,//
}
},
onLoad(){
@ -738,22 +911,135 @@ export default {
methods:{
//
handleShowNotice(type){
if (type==='showCost'){
this.showCost = !this.showCost
}else if(type === 'showPay'){
this.showPay = !this.showPay
} else if(type === 'showMonthRevenue'){
this.showMonthRevenue = !this.showMonthRevenue
}else if(type === 'showMonthExpenditure'){
this.showMonthExpenditure = !this.showMonthExpenditure
}else if(type === 'successRate'){
this.successRate = !this.successRate
}else if(type === 'thisYearSum'){
this.thisYearSum = !this.thisYearSum
}else if(type === 'budget'){
this.budget = !this.budget
console.log('type',type)
switch (type){
case 'showCost':
this.showCost = !this.showCost
break
case 'showPay':
this.showPay = !this.showPay
break
case 'showMonthRevenue':
this.showMonthRevenue = !this.showMonthRevenue
break
case 'showMonthExpenditure':
this.showMonthExpenditure = !this.showMonthExpenditure
break
case 'successRate':
this.successRate = !this.successRate
break
case 'thisYearSum':
this.thisYearSum = !this.thisYearSum
break
case 'budget':
this.budget = !this.budget
break
case 'showNetProfit':
this.showNetProfit = !this.showNetProfit
break
case 'showYearNetProfit':
this.showYearNetProfit = !this.showYearNetProfit
break
case 'revenueAll':
this.revenueAll = !this.revenueAll
break
case 'revenueSuccess':
this.revenueSuccess = !this.revenueSuccess
break
case 'revenueCostRate':
this.revenueCostRate = !this.revenueCostRate
break
case 'budgetSum':
this.budgetSum = !this.budgetSum
break
case 'incomeSuccess':
this.incomeSuccess = !this.incomeSuccess
break
case 'nowYearSum':
this.nowYearSum = !this.nowYearSum
break
case 'nowYearRevenueCost':
this.nowYearRevenueCost = !this.nowYearRevenueCost
break
case 'nowYearBudget':
this.nowYearBudget = !this.nowYearBudget
break
case 'nowYearSumRate':
this.nowYearSumRate = !this.nowYearSumRate
break
case 'userRevenueSmallSum':
this.userRevenueSmallSum = !this.userRevenueSmallSum
break
case 'compareYesSuccessRate':
this.compareYesSuccessRate = !this.compareYesSuccessRate
break
case 'thisMonthSum':
this.thisMonthSum = !this.thisMonthSum
break
case 'thisMonthRevenueRate':
this.thisMonthRevenueRate = !this.thisMonthRevenueRate
break
case 'thisMonthSmallSumSuccess1st':
this.thisMonthSmallSumSuccess1st = !this.thisMonthSmallSumSuccess1st
break
case 'thisMonthSmallSumSuccess2st':
this.thisMonthSmallSumSuccess2st = !this.thisMonthSmallSumSuccess2st
break
case 'thisMonthSmallSumSuccess2stTitle':
this.thisMonthSmallSumSuccess2stTitle = !this.thisMonthSmallSumSuccess2stTitle
break
case 'otherSmallSum':
this.otherSmallSum = !this.otherSmallSum
break
case 'false':
this.showCost = false
this.showPay = false
this.showMonthRevenue = false
this.showMonthExpenditure = false
this.successRate = false
this.thisYearSum = false
this.budget = false
this.showNetProfit = false
this.showYearNetProfit = false
this.revenueAll = false
this.revenueSuccess = false
this.revenueCostRate = false
this.budgetSum = false
this.incomeSuccess = false
this.nowYearSum = false
this.nowYearRevenueCost = false
this.nowYearBudget = false
this.nowYearSumRate = false
this.userRevenueSmallSum = false
this.compareYesSuccessRate = false
this.thisMonthSum = false
this.thisMonthRevenueRate = false
this.thisMonthSmallSumSuccess1st = false
this.thisMonthSmallSumSuccess2st = false
this.thisMonthSmallSumSuccess2stTitle = false
this.otherSmallSum = false
}
},
handleShowNotice2(type){
switch(type){
case 'otherLeftChar':
this.otherLeftChar = !this.otherLeftChar
break
case 'otherMonthSum':
this.otherMonthSum = !this.otherMonthSum
break
case 'otherThisMonthRate':
this.otherThisMonthRate = !this.otherThisMonthRate
break
case 'otherThisMonthSuccess':
this.otherThisMonthSuccess = !this.otherThisMonthSuccess
break
case 'false':
this.otherLeftChar = false
this.otherMonthSum = false
this.otherThisMonthRate = false
this.otherThisMonthSuccess = false
}
},
//
handleBack(){
@ -1137,7 +1423,6 @@ export default {
.noticeBox{
max-width: 60%;
position: absolute;
left: 40px;top: 40px;
display: inline-block;
padding: 5px 10px;
background: #fff;
@ -1154,6 +1439,30 @@ export default {
color: #786B6C;
line-height: 36rpx;
margin-top: 4rpx;
.notice{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #A69E9F;
border-radius: 50%;
color: #A69E9F;
font-size: 12px;
font-weight: 600;
.noticeBox{
max-width: 60%;
position: absolute;
right: 0;top: 0;
display: inline-block;
padding: 5px 10px;
background: #fff;
border-radius: 10rpx;
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
z-index:9;
}
}
.itemUnit{
margin-left: 4rpx;
font-size: 24rpx;
@ -1191,6 +1500,29 @@ export default {
color: #9635E0;
line-height: 44rpx;
}
.notice{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #A69E9F;
border-radius: 50%;
color: #A69E9F;
font-size: 12px;
font-weight: 600;
.noticeBox{
max-width: 60%;
position: absolute;
display: inline-block;
padding: 5px 10px;
background: #fff;
border-radius: 10rpx;
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
z-index:9;
}
}
.monthSumBg{
position: absolute;
width: 320rpx;
@ -1208,6 +1540,27 @@ export default {
margin-top: 22rpx;
box-sizing: border-box;
display: flex;
.notices{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #A69E9F;
font-size: 12px;
font-weight: 600;
.noticeBox{
max-width: 60%;
position: absolute;
display: inline-block;
padding: 5px 10px;
background: #fff;
border-radius: 10rpx;
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
z-index:9;
}
}
.leftCharts{
width: 224rpx;
height: 100%;
@ -1221,13 +1574,14 @@ export default {
line-height: 48rpx;
margin-top: 8rpx;
}
}
.rightBox{
width: calc(100% - 224rpx);
.rightBoxTop{
width: 100%;
box-sizing: border-box;
padding: 32rpx;
padding: 32rpx 16rpx;
display: flex;
justify-content: space-between;
align-items: center;
@ -1276,6 +1630,30 @@ export default {
font-weight: 400;
color: #786B6C;
line-height: 36rpx;
.notice{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #A69E9F;
border-radius: 50%;
color: #A69E9F;
font-size: 12px;
font-weight: 600;
.noticeBox{
max-width: 60%;
position: absolute;
right: 0;top: 0;
display: inline-block;
padding: 5px 10px;
background: #fff;
border-radius: 10rpx;
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
z-index:9;
}
}
}
}
}
@ -1338,9 +1716,30 @@ export default {
display: inline-block;
margin-top: 12rpx;
}
.notices{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #A69E9F;
font-size: 12px;
font-weight: 600;
.noticeBox{
max-width: 60%;
position: absolute;
display: inline-block;
padding: 5px 10px;
background: #fff;
border-radius: 10rpx;
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
z-index:9;
}
}
}
.rightBox{
width: calc(100% - 224rpx);
width: calc(100% - 186rpx);
.rightBoxTop{
width: 100%;
box-sizing: border-box;
@ -1372,11 +1771,34 @@ export default {
line-height: 36rpx;
margin-left: 4rpx;
}
.notice{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #A69E9F;
border-radius: 50%;
color: #A69E9F;
font-size: 12px;
font-weight: 600;
.noticeBox{
max-width: 60%;
position: absolute;
display: inline-block;
padding: 5px 10px;
background: #fff;
border-radius: 10rpx;
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
z-index:9;
}
}
}
}
.itemRateBox{
display: inline-block;
width: 80rpx;
width: 120rpx;
.addRate{
font-size: 32rpx;
font-family: DINAlternate-Bold, DINAlternate;
@ -1391,6 +1813,31 @@ export default {
font-weight: 400;
color: #786B6C;
line-height: 36rpx;
white-space: nowrap;
.notice{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #A69E9F;
border-radius: 50%;
color: #A69E9F;
font-size: 12px;
font-weight: 600;
.noticeBox{
max-width: 60%;
position: absolute;
right: 0;top: 0;
display: inline-block;
padding: 5px 10px;
background: #fff;
border-radius: 10rpx;
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
z-index:9;
}
}
}
}
}
@ -1438,6 +1885,29 @@ export default {
color: #160002;
line-height: 44rpx;
}
.notice{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #A69E9F;
border-radius: 50%;
color: #A69E9F;
font-size: 12px;
font-weight: 600;
.noticeBox{
max-width: 60%;
position: absolute;
display: inline-block;
padding: 5px 10px;
background: #fff;
border-radius: 10rpx;
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
z-index:9;
}
}
}
.leftRight{
display: flex;
@ -1482,6 +1952,27 @@ export default {
color: #FE7500;
line-height: 48rpx;
}
.notices{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #A69E9F;
font-size: 12px;
font-weight: 600;
.noticeBox{
max-width: 60%;
position: absolute;
display: inline-block;
padding: 5px 10px;
background: #fff;
border-radius: 10rpx;
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
z-index:9;
}
}
}
.itemSmallRightBox{
width: calc(100% - 168rpx);
@ -1498,6 +1989,30 @@ export default {
font-weight: bold;
color: #160002;
line-height: 36rpx;
.notice{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #A69E9F;
border-radius: 50%;
color: #A69E9F;
font-size: 12px;
font-weight: 600;
.noticeBox{
max-width: 60%;
position: absolute;
right: 0;top: 0;
display: inline-block;
padding: 5px 10px;
background: #fff;
border-radius: 10rpx;
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
z-index:9;
}
}
}
.detailTitle{
font-size: 22rpx;
@ -1506,9 +2021,34 @@ export default {
color: #786B6C;
line-height: 36rpx;
margin-top: 4rpx;
white-space: nowrap;
.detailTitleUnit{
color: #A69E9F;
}
.notice{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #A69E9F;
border-radius: 50%;
color: #A69E9F;
font-size: 12px;
font-weight: 600;
.noticeBox{
max-width: 60%;
position: absolute;
right: 0;top: 0;
display: inline-block;
padding: 5px 10px;
background: #fff;
border-radius: 10rpx;
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
z-index:9;
}
}
}
}
.itemRight{
@ -1528,6 +2068,30 @@ export default {
color: #786B6C;
line-height: 36rpx;
margin-top: 4rpx;
.notice{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #A69E9F;
border-radius: 50%;
color: #A69E9F;
font-size: 12px;
font-weight: 600;
.noticeBox{
max-width: 60%;
position: absolute;
right: 0;top: 0;
display: inline-block;
padding: 5px 10px;
background: #fff;
border-radius: 10rpx;
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
z-index:9;
}
}
}
}
}
@ -1560,10 +2124,58 @@ export default {
color: #160002;
line-height: 40rpx;
}
.notice{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #A69E9F;
border-radius: 50%;
color: #A69E9F;
font-size: 12px;
font-weight: 600;
.noticeBox{
max-width: 60%;
position: absolute;
right: 0;top: 0;
display: inline-block;
padding: 5px 10px;
background: #fff;
border-radius: 10rpx;
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
z-index:9;
}
}
}
.smallSumRight{
display: inline-block;
width: 200rpx;
width: 250rpx;
.notice{
margin-left: 8rpx;
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #A69E9F;
border-radius: 50%;
color: #A69E9F;
font-size: 12px;
font-weight: 600;
.noticeBox{
max-width: 60%;
position: absolute;
right: 0;top: 0;
display: inline-block;
padding: 5px 10px;
background: #fff;
border-radius: 10rpx;
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
z-index:9;
}
}
.successText{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;