816 lines
30 KiB
Vue
816 lines
30 KiB
Vue
<template>
|
|
<view class="main">
|
|
<view class="meng" v-if="showMeng" @click="handleAllNotice"></view>
|
|
<view class="header">
|
|
<view class="headerTop" :style="{height:(menu.top+menu.height) + 'px'}">
|
|
<image @click="handleBack" class="backIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"></image>
|
|
<text class="pageTitle">支出详情</text>
|
|
</view>
|
|
|
|
<view class="detailType" :style="{top:(menu.bottom + 18) + 'px'}">
|
|
<picker :range="typeList" :value="typeValue" range-key="label" @change="handleChangeType">
|
|
<span class="typeText">{{ typeList[typeValue].label }}</span>
|
|
<image class="downIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/3stDownArrow.svg"/>
|
|
</picker>
|
|
<view class="timeBox" >
|
|
<picker mode="date" fields="month" :value="single" :start="startDate" :end="endData" @change="bindDateChange" >
|
|
<text class="timeText">{{single}}</text>
|
|
<image class="timeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/3stDownArrow.svg"/>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="incomeTab" :style="{top:(menu.bottom + 60) + 'px'}">
|
|
<view :class="selectTab===item.value?'selectItem incomeItem':'incomeItem'" v-for="(item,index) in pageTab" :key="index"
|
|
@click="handleChangePageTab(item.value)">{{item.label}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="contentDetail">
|
|
<view class="detailItem" v-for="(item,index) in pageList" :key="index">
|
|
<view class="itemTop">
|
|
<view class="itemTitle">{{item.itemTitle}}</view>
|
|
<image class="monthSumBg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/expenditure.png"/>
|
|
<view class="itemBox">
|
|
<view class="progressBox">
|
|
<view class="progressTop">
|
|
<span class="progressLabel">本月占比:</span>
|
|
<span class="progressValue">{{`${item.monthRate||'-'}%`}}</span>
|
|
</view>
|
|
<view class="progress">
|
|
<view class="have" :style="{width:item.monthRate>100?'100%':`${item.monthRate}%`}"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="progressBox" style="margin-top: 12px">
|
|
<view class="progressTop">
|
|
<span class="progressLabel">累计完成进度占比:</span>
|
|
<span class="progressValue">{{`${item.accumulateRate||'-'}%`}}</span>
|
|
</view>
|
|
<view class="progress">
|
|
<view class="have" :style="{width:item.accumulateRate>100?'100%':`${item.accumulateRate}%`}"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="listBox" v-if="item.list && item.list.length>0">
|
|
<view class="listBoxItem" v-for="(subItem,subIndex) in item.list[typeValue]" :key="subIndex">
|
|
<view class="subItemTop">
|
|
<view class="index" :style="{background:`url(${subIndex===0?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/secondBg.svg':subIndex===1?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/thirdBg.svg':'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/otherBg.svg'})`}">{{subIndex + 1}}</view>
|
|
<span class="subItemName">{{subItem.name}}</span>
|
|
<view class="notice" @click="handleShowNotice(index,subIndex,-1,-1)">?</view>
|
|
<view class="noticeBox" v-if="firstIndex===index && secondIndex===subIndex && !(thirdIndexs>=0) && !(fourthIndexs>=0)" @click="handleCancelNotice">
|
|
<view>
|
|
<view class="noticeItem">
|
|
<span class="noticeLabel">本月预算:</span>
|
|
<span class="noticeValue">{{subItem.budgetMonth||'-'}}万元</span>
|
|
</view>
|
|
<view class="noticeItem">
|
|
<span class="noticeLabel">本月执行:</span>
|
|
<span class="noticeValue">{{subItem.monthExecute||'-'}}万元</span>
|
|
</view>
|
|
<view class="noticeItem">
|
|
<span class="noticeLabel">年度预算:</span>
|
|
<span class="noticeValue">{{subItem.budgetYear||'-'}}万元</span>
|
|
</view>
|
|
<view class="noticeItem">
|
|
<span class="noticeLabel">累计执行:</span>
|
|
<span class="noticeValue">{{subItem.accumulateExecute||'-'}}万元</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="subItemBottom" v-if="subItem.monthRate || subItem.accumulateRate">
|
|
|
|
<view class="bottomItem">
|
|
<span v-if="subItem.monthRate" class="bottomLabel">本月占比:</span>
|
|
<span v-if="subItem.monthRate" class="bottomValue">{{`${subItem.monthRate||'-'}%`}}</span>
|
|
</view>
|
|
|
|
<view class="bottomItem" style="text-align: right">
|
|
<span v-if="subItem.accumulateRate" class="bottomLabel">累计占比:</span>
|
|
<span v-if="subItem.accumulateRate" class="bottomValue">{{`${subItem.accumulateRate||'-'}%`}}</span>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="thirdItemBox" v-if="subItem.list && subItem.list.length>0">
|
|
<view class="thirdItem" v-for="(thirdItem,thirdIndex) in subItem.list[typeValue]" :key="thirdIndex">
|
|
<view class="thirdItemTop">
|
|
<view class="index" :style="{backgroundImage:`url(${thirdIndex===0?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/thirdFirst.svg':thirdIndex===1?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/thirdSecond.svg':'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/thirdOther.svg'})`}">{{thirdIndex + 1}}</view>
|
|
<span class="subItemName">{{thirdItem.name}}</span>
|
|
<view class="notice" @click="handleShowNotice(index,subIndex,thirdIndex,-1)">?</view>
|
|
<view class="noticeBox" v-if="firstIndex===index && secondIndex===subIndex && thirdIndexs===thirdIndex&& thirdIndexs===thirdIndex && !(fourthIndexs>=0)" @click="handleCancelNotice">
|
|
<view>
|
|
<view class="noticeItem">
|
|
<span class="noticeLabel">本月预算:</span>
|
|
<span class="noticeValue">{{thirdItem.budgetMonth||'-'}}万元</span>
|
|
</view>
|
|
<view class="noticeItem">
|
|
<span class="noticeLabel">本月执行:</span>
|
|
<span class="noticeValue">{{thirdItem.monthExecute||'-'}}万元</span>
|
|
</view>
|
|
<view class="noticeItem">
|
|
<span class="noticeLabel">年度预算:</span>
|
|
<span class="noticeValue">{{thirdItem.budgetYear||'-'}}万元</span>
|
|
</view>
|
|
<view class="noticeItem">
|
|
<span class="noticeLabel">累计执行:</span>
|
|
<span class="noticeValue">{{thirdItem.accumulateExecute||'-'}}万元</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="thirdItemBottom" v-if="thirdItem.monthRate || thirdItem.accumulateRate">
|
|
<view class="bottomItem">
|
|
<span v-if="thirdItem.monthRate" class="bottomLabel">本月占比:</span>
|
|
<span v-if="thirdItem.monthRate" class="bottomValue">{{`${thirdItem.monthRate||'-'}%`}}</span>
|
|
</view>
|
|
<view class="bottomItem" style="text-align: right">
|
|
<span v-if="thirdItem.accumulateRate" class="bottomLabel">累计占比:</span>
|
|
<span v-if="thirdItem.accumulateRate" class="bottomValue">{{`${thirdItem.accumulateRate||'-'}%`}}</span>
|
|
</view>
|
|
</view>
|
|
<view class="fourthItemBox" v-if="thirdItem.list && thirdItem.list.length>0">
|
|
<view class="fourthItem" v-for="(fourthItem,fourthIndex) in thirdItem.list[typeValue]" :key="fourthIndex">
|
|
<view class="fourthItemTop">
|
|
<view class="index" :style="{backgroundImage:`url(${fourthIndex===0?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/fourthFirst.svg':fourthIndex===1?'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/fourthSecond.svg':'https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/fourthther.svg'})`}">{{fourthIndex + 1}}</view>
|
|
<span class="subItemName">{{fourthItem.name}}</span>
|
|
<view class="notice" @click="handleShowNotice(index,subIndex,thirdIndex,fourthIndex)">?</view>
|
|
<view class="noticeBox" v-if="firstIndex===index && secondIndex===subIndex && thirdIndexs===thirdIndex && fourthIndexs===fourthIndex" @click="handleCancelNotice">
|
|
<view>
|
|
<view class="noticeItem">
|
|
<span class="noticeLabel">本月预算:</span>
|
|
<span class="noticeValue">{{fourthItem.budgetMonth||'-'}}万元</span>
|
|
</view>
|
|
<view class="noticeItem">
|
|
<span class="noticeLabel">本月执行:</span>
|
|
<span class="noticeValue">{{fourthItem.monthExecute||'-'}}万元</span>
|
|
</view>
|
|
<view class="noticeItem">
|
|
<span class="noticeLabel">年度预算:</span>
|
|
<span class="noticeValue">{{fourthItem.budgetYear||'-'}}万元</span>
|
|
</view>
|
|
<view class="noticeItem">
|
|
<span class="noticeLabel">累计执行:</span>
|
|
<span class="noticeValue">{{fourthItem.accumulateExecute||'-'}}万元</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="fourthItemBottom" v-if="fourthItem.monthRate || fourthItem.accumulateRate">
|
|
<view class="bottomItem">
|
|
<span v-if="fourthItem.monthRate" class="bottomLabel">本月占比:</span>
|
|
<span v-if="fourthItem.monthRate" class="bottomValue">{{`${fourthItem.monthRate||'-'}%`}}</span>
|
|
</view>
|
|
<view class="bottomItem" style="text-align: right">
|
|
<span v-if="fourthItem.accumulateRate" class="bottomLabel">累计占比:</span>
|
|
<span v-if="fourthItem.accumulateRate" class="bottomValue">{{`${fourthItem.accumulateRate||'-'}%`}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import OtherCharts from "./component/otherCharts.vue";
|
|
import outData from './expenditureData'
|
|
import request from '@/util/index.js'
|
|
export default {
|
|
components:{OtherCharts},
|
|
data(){
|
|
return {
|
|
windowHeight: null,
|
|
statusBarHeight: null,
|
|
menu:{},
|
|
number:0,
|
|
pageTab:[{label:'运营成本',value:1},{label:'管理费用',value:2},{label:'销售费用',value:3},{label:'财务费用',value:4}],
|
|
selectTab:1,
|
|
typeList:[{label:'按告警情况排序',value:0},
|
|
{label:'按累计完成进度占比数排序',value:1},
|
|
{label:'按本月完成进度占比数排序',value:2},
|
|
{label:'按年度计划预算数值排序',value:3}],
|
|
typeValue: 3,
|
|
pageData: {},// 页面数据
|
|
pageList: [],// 页面遍历的数据
|
|
single:'', // 时间选择器选择的时间
|
|
month:'',// 当前月份
|
|
startDate:'',// 开始时间
|
|
endData:'', // 结束时间
|
|
firstIndex:null,
|
|
secondIndex:null,
|
|
thirdIndexs:null,
|
|
fourthIndexs:null,
|
|
showMeng:false
|
|
}
|
|
},
|
|
onLoad(query){
|
|
this.selectTab = Number(query.type)
|
|
|
|
const date = new Date()
|
|
let y = date.getFullYear()
|
|
let m = date.getMonth()+1
|
|
this.thisYear = y
|
|
this.startDate = `${y}-07`
|
|
this.endData = `${y}-11`
|
|
this.single = `${y}-${ Number(query.month)}`
|
|
|
|
if (query.month){
|
|
this.month = Number(query.month)
|
|
this.handleGetPageData()
|
|
}
|
|
|
|
// 获取手机参数对页面进行适配
|
|
let systemInfo = uni.getSystemInfoSync()
|
|
this.windowHeight = systemInfo.windowHeight
|
|
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
console.log('this.menu',this.menu)
|
|
let _this = this
|
|
setTimeout(()=>{
|
|
_this.number = 40
|
|
},100)
|
|
},
|
|
methods:{
|
|
// 返回按钮的方法
|
|
handleBack(){
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},
|
|
handleChangePageTab(value){
|
|
console.log('value',value)
|
|
this.selectTab = value
|
|
this.pageList = this.selectTab===1?this.pageData.costList:this.selectTab===2?this.pageData.managerList:this.selectTab===3?this.pageData.sellingList:this.selectTab===4?this.pageData.financialList:''
|
|
},
|
|
// 改变类型的方法
|
|
handleChangeType(e){
|
|
console.log('e',e)
|
|
this.typeValue = Number(e.detail.value)
|
|
},
|
|
// 修改时间的事件
|
|
bindDateChange(e){
|
|
console.log('e',e)
|
|
this.single = e.detail.value
|
|
const date = new Date(this.single)
|
|
const y = date.getMonth() + 1
|
|
this.month = y
|
|
this.handleGetPageData()
|
|
// outData.forEach(item=>{
|
|
// if (item.month === y){
|
|
// this.pageData = item
|
|
// this.pageList = this.selectTab===1?item.costList:this.selectTab===2?item.managerList:this.selectTab===3?item.sellingList:this.selectTab===4?item.financialList:''
|
|
// }
|
|
// })
|
|
},
|
|
handleShowNotice(index,subIndex,thirdIndex,fourthIndex){
|
|
this.firstIndex = index
|
|
this.secondIndex = subIndex
|
|
this.thirdIndexs = thirdIndex
|
|
this.fourthIndexs = fourthIndex
|
|
this.showMeng = true
|
|
},
|
|
handleCancelNotice(){
|
|
this.showMeng = false
|
|
this.firstIndex = '-'
|
|
this.secondIndex = '-'
|
|
this.thirdIndexs = '-'
|
|
this.fourthIndexs = '-'
|
|
},
|
|
handleAllNotice(){
|
|
this.showMeng = false
|
|
this.firstIndex = null
|
|
this.secondIndex = null
|
|
this.thirdIndexs = null
|
|
this.fourthIndexs = null
|
|
},
|
|
// 拿到页面数据的方法
|
|
async handleGetPageData(){
|
|
uni.showLoading({
|
|
title:'正在加载'
|
|
})
|
|
const req = {
|
|
Month:this.month
|
|
}
|
|
const data = await request.$webGet('EShangApiMain/Budget/GetbudgetProjectReportOut',req)
|
|
console.log('data',data)
|
|
this.pageData = data.Result_Data
|
|
this.pageList = this.selectTab===1?data.Result_Data.costList:this.selectTab===2?data.Result_Data.managerList:this.selectTab===3?data.Result_Data.sellingList:this.selectTab===4?data.Result_Data.financialList:''
|
|
uni.hideLoading()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
//@import '/static/public/font/stylesheet.css';
|
|
.main{
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
.meng{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: fixed;
|
|
top: 0;left: 0;
|
|
z-index: 20;
|
|
}
|
|
.header{
|
|
width: 100%;
|
|
height: 395rpx;
|
|
background: linear-gradient(180deg, #D4E5FD 0%, #F5F5F5 100%);
|
|
.headerTop{
|
|
width: 100%;
|
|
position: fixed;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
z-index: 99;
|
|
background: linear-gradient(180deg, #D4E5FD 0%, #DEE9F9 100%);
|
|
.backIcon{
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-left: 32rpx;
|
|
}
|
|
.pageTitle{
|
|
font-size: 36rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #202020;
|
|
line-height: 56rpx;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
.detailType{
|
|
width: 100%;
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx;
|
|
.typeText{
|
|
font-size: 32rpx;
|
|
font-family: Alimama ShuHeiTi;
|
|
font-weight: bold;
|
|
color: #7CADF8;
|
|
line-height: 68rpx;
|
|
}
|
|
.downIcon{
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-left: 8px;
|
|
}
|
|
.timeBox{
|
|
display: flex;
|
|
align-items: center;
|
|
.timeText{
|
|
font-size: 32rpx;
|
|
font-family: Alimama ShuHeiTi;
|
|
font-weight: bold;
|
|
color: #7CADF8;
|
|
line-height: 68rpx;
|
|
}
|
|
.timeIcon{
|
|
margin-left: 6px;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
.incomeTab{
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
box-sizing: border-box;
|
|
padding-left: 24rpx;
|
|
.incomeItem{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
padding: 20rpx 22rpx;
|
|
background: #FFFFFF;
|
|
border: 1rpx solid #B6D4FB;
|
|
display: inline-block;
|
|
border-radius: 8rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
.selectItem{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #096EF7;
|
|
line-height: 40rpx;
|
|
background: linear-gradient(360deg, #E9F2FF 0%, #FEFFFE 100%);
|
|
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(4,36,79,0.08);
|
|
border: 1rpx solid #B6D4FB;
|
|
position: relative;
|
|
}
|
|
.selectItem:after{
|
|
content:'';
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
background: #EDF4FF;
|
|
position: absolute;
|
|
bottom: -18rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%) rotate(45deg);
|
|
border-right: 1rpx solid #B6D4FB;
|
|
border-bottom: 1rpx solid #B6D4FB;
|
|
}
|
|
}
|
|
}
|
|
.contentDetail{
|
|
width: calc(100% - 64rpx);
|
|
margin-left: 32rpx;
|
|
.detailItem{
|
|
width: 100%;
|
|
background: #FEFFFF;
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
padding: 4rpx;
|
|
margin-bottom: 24rpx;
|
|
.itemTop{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 22rpx 24rpx;
|
|
background: linear-gradient(180deg, #F1F7FF 0%, #FDFEFF 100%);
|
|
border-radius: 12rpx 12rpx 0rpx 0rpx;
|
|
position: relative;
|
|
.monthSumBg{
|
|
position: absolute;
|
|
width: 320rpx;
|
|
height: 320rpx;
|
|
right: 0;top: 0;
|
|
z-index: 1;
|
|
}
|
|
.itemTitle{
|
|
font-size: 36rpx;
|
|
font-family: Alimama ShuHeiTi;
|
|
font-weight: bold;
|
|
color: #096EF7;
|
|
line-height: 44rpx;
|
|
}
|
|
.itemBox{
|
|
position: relative;
|
|
z-index:2;
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
box-sizing: border-box;
|
|
padding: 16rpx 32rpx;
|
|
margin-top: 22rpx;
|
|
.progressBox{
|
|
width: 100%;
|
|
.progressTop{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.progressLabel{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 40rpx;
|
|
}
|
|
.progressValue{
|
|
font-size: 36rpx;
|
|
font-family: Alimama ShuHeiTi;
|
|
font-weight: bold;
|
|
color: #1679FF;
|
|
line-height: 44rpx;
|
|
}
|
|
}
|
|
.progress{
|
|
margin-top: 8px;
|
|
width: 100%;
|
|
height: 12px;
|
|
border-radius: 6px;
|
|
background: #E7F1FF;
|
|
position: relative;
|
|
overflow: hidden;
|
|
.have{
|
|
position: absolute;
|
|
top: 0;left: 0;
|
|
border-radius: 6px;
|
|
background: #1679FF;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.listBox{
|
|
width: 100%;
|
|
margin-top: 12px;
|
|
.listBoxItem{
|
|
position: relative;
|
|
margin-bottom: 12rpx;
|
|
.subItemTop{
|
|
display: flex;
|
|
align-items: center;
|
|
.index{
|
|
display: inline-block;
|
|
width: 36rpx;
|
|
height: 32rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FEFFFF;
|
|
line-height: 32rpx;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
padding-right: 4rpx;
|
|
}
|
|
.subItemName{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
margin-left: 8px;
|
|
}
|
|
.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: 500;
|
|
position: relative;
|
|
z-index: 21;
|
|
}
|
|
.noticeBox{
|
|
position: absolute;
|
|
top: 10px;
|
|
z-index: 99;
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
box-sizing: border-box;
|
|
padding: 12rpx 0;
|
|
display: block;
|
|
width: 300px;
|
|
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
|
.noticeTitle{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
margin-left: 8px;
|
|
}
|
|
.noticeItem{
|
|
display: inline-block;
|
|
width: 140px;
|
|
color: #A69E9F;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
box-sizing: border-box;
|
|
padding-left: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
.subItemBottom{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.bottomItem{
|
|
width: 50%;
|
|
.bottomLabel{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 32rpx;
|
|
}
|
|
.bottomValue{
|
|
font-size: 30rpx;
|
|
font-family: Alimama ShuHeiTi;
|
|
font-weight: bold;
|
|
color: #1679FF;
|
|
line-height: 32rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
.thirdItemBox{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding-left: 24rpx;
|
|
.thirdItemTop{
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
.index{
|
|
display: inline-block;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
font-size: 24rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FEFFFF;
|
|
box-sizing: border-box;
|
|
background-size: 100% 100%;
|
|
}
|
|
.subItemName{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
margin-left: 8px;
|
|
}
|
|
.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: 500;
|
|
position: relative;
|
|
z-index: 21;
|
|
}
|
|
.noticeBox{
|
|
position: absolute;
|
|
top: 10px;
|
|
z-index: 99;
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
box-sizing: border-box;
|
|
padding: 12rpx 0;
|
|
display: block;
|
|
width: 300px;
|
|
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
|
.noticeTitle{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
margin-left: 8px;
|
|
}
|
|
.noticeItem{
|
|
display: inline-block;
|
|
width: 140px;
|
|
color: #A69E9F;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
box-sizing: border-box;
|
|
padding-left: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
.thirdItemBottom{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.bottomItem{
|
|
width: 50%;
|
|
.bottomLabel{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 32rpx;
|
|
}
|
|
.bottomValue{
|
|
font-size: 30rpx;
|
|
font-family: Alimama ShuHeiTi;
|
|
font-weight: bold;
|
|
color: #1679FF;
|
|
line-height: 32rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
.fourthItemBox{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding-left: 24rpx;
|
|
.fourthItemTop{
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
.index{
|
|
display: inline-block;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
font-size: 24rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FEFFFF;
|
|
box-sizing: border-box;
|
|
background-size: 100% 100%;
|
|
}
|
|
.subItemName{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
margin-left: 8px;
|
|
}
|
|
.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: 500;
|
|
position: relative;
|
|
z-index: 21;
|
|
}
|
|
.noticeBox{
|
|
position: absolute;
|
|
top: 10px;
|
|
z-index: 99;
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
box-sizing: border-box;
|
|
padding: 12rpx 0;
|
|
display: block;
|
|
width: 300px;
|
|
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
|
.noticeTitle{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
margin-left: 8px;
|
|
}
|
|
.noticeItem{
|
|
display: inline-block;
|
|
width: 140px;
|
|
color: #A69E9F;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
box-sizing: border-box;
|
|
padding-left: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
.fourthItemBottom{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.bottomItem{
|
|
width: 50%;
|
|
.bottomLabel{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 32rpx;
|
|
}
|
|
.bottomValue{
|
|
font-size: 30rpx;
|
|
font-family: Alimama ShuHeiTi;
|
|
font-weight: bold;
|
|
color: #1679FF;
|
|
line-height: 32rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|