1046 lines
37 KiB
Vue
1046 lines
37 KiB
Vue
<template>
|
|
<view class="main">
|
|
<view class="header">
|
|
<view class="top" :style="{height:(menu.bottom + 6)+'px'}">
|
|
<image :style="{top:(menu.top + ((menu.height - 24)/2))+'px'}" @click="handleBack" class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"></image>
|
|
</view>
|
|
<p class="pageTitle">服务区月度计划</p>
|
|
|
|
<view class="monthTabs">
|
|
<scroll-view class="big" :show-scrollbar="false" scroll-with-animation scroll-x="true" enable-flex :scrollIntoView="selectMonthId" >
|
|
<div :id="'item'+item.value" :class="selectMonth===item.value?'monthItem selectItem':'monthItem'" v-for="(item,index) in monthList" :key="index" @click="handleSelectMonth(item.value)">{{item.label}}</div>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="monthDetailList">
|
|
<swiper class="swiper" previous-margin="40rpx" next-margin="40rpx" @change="handleDetailScroll" :current="selectDetail">
|
|
<block v-for="(item,index) in swiperList" :key="index">
|
|
<swiper-item class="swiper-item" :item-id="index" :data-item-id="index" bindtap='clickChange'>
|
|
<view class="box">
|
|
<view :class="selectDetail===index?'detail':'detail noShow'">
|
|
<view class="item" v-if="selectDetail===index">
|
|
<div class="picker">
|
|
<div class="selectService" @click="handleShowPopup">
|
|
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/fixed.svg"></image>
|
|
<view class="select">
|
|
<view class="name">{{selectServiceName || '-'}}</view>
|
|
<p class="area">服务区</p>
|
|
<div style="width: 24px;height: 12px"></div>
|
|
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/orangeArrow.svg"></image>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
<view class="itemTop" :style="{marginTop: selectDetail===index?'16px':'4px'}">
|
|
<view class="left">
|
|
<view class="detailContent">
|
|
<view class="top">
|
|
<span class="money">{{serviceDetailObj.RevenueMonth_Amount || '-'}}</span>
|
|
<!-- <image class="icon" src="/static/images/index/yearSuccess.svg"></image>-->
|
|
</view>
|
|
<p class="text">本月已完成<text class="unit">/元</text></p>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<p class="add" :style="{color:serviceDetailObj.MonthGrowth_Rate >0?'#E83944':'#049E77'}">{{serviceDetailObj.MonthGrowth_Rate >0?'+':''}}{{serviceDetailObj.MonthGrowth_Rate|| '-' }}%</p>
|
|
<text class="compare">比计划</text>
|
|
</view>
|
|
</view>
|
|
<view class="itemBottom" :style="{marginTop: selectDetail===index?'20px':'4px'}">
|
|
<view class="progress">
|
|
<view class="have" :style="{width:serviceDetailObj.MonthBudget_Degree + '%'}"></view>
|
|
</view>
|
|
<view class="text">
|
|
<span class="success">计划完成<span class="unit">/元</span></span>
|
|
<span class="target">{{serviceDetailObj.BudgetMonth_Amount || '-'}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="item" v-if="selectDetail!==index">
|
|
<div class="picker">
|
|
<div class="selectService" @click="handleShowPopup">
|
|
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/fixed.svg"></image>
|
|
<view class="select">
|
|
<view class="name">{{'-'}}</view>
|
|
<p class="area">服务区</p>
|
|
<div style="width: 24px;height: 12px"></div>
|
|
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/orangeArrow.svg"></image>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
<view class="itemTop" :style="{marginTop: selectDetail===index?'16px':'4px'}">
|
|
<view class="left">
|
|
<view class="detailContent">
|
|
<view class="top">
|
|
<span class="money">{{'-'}}</span>
|
|
<!-- <image class="icon" src="/static/images/index/yearSuccess.svg"></image>-->
|
|
</view>
|
|
<p class="text">本月已完成<text class="unit">/元</text></p>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<p class="add" :style="{color:serviceDetailObj.MonthGrowth_Rate >0?'#E83944':'#049E77'}">{{''}}{{'-' }}%</p>
|
|
<text class="compare">比计划</text>
|
|
</view>
|
|
</view>
|
|
<view class="itemBottom" :style="{marginTop: selectDetail===index?'20px':'4px'}">
|
|
<view class="progress">
|
|
<view class="have" :style="{width:serviceDetailObj.MonthBudget_Degree + '%'}"></view>
|
|
</view>
|
|
<view class="text">
|
|
<span class="success">计划完成<span class="unit">/元</span></span>
|
|
<span class="target">{{'-'}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<image class="detailLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/plan/detailLogo.svg"></image>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="detail" :style="{height:`calc(100vh - 321px - ${menu.bottom + 6}px)`}">
|
|
<scroll-view scroll-y="true" style="height: calc(100% - 16px);width: 100%">
|
|
<view class="box" v-for="(item,index) in detailList" :key="index">
|
|
<p class="title">{{item.node.ACCOUNT_CODE}}</p>
|
|
<view class="top">
|
|
<image class="icon" :src="item.node.ACCOUNT_CODE==='营业收入'?'https://eshangtech.com/ShopICO/ahyd-BID/plan/mainWork.svg':item.node.ACCOUNT_CODE==='营业成本'?'https://eshangtech.com/ShopICO/ahyd-BID/plan/cost.svg':item.node.ACCOUNT_CODE==='毛利率'?'https://eshangtech.com/ShopICO/ahyd-BID/plan/gross.svg':''"></image>
|
|
<view class="sum">
|
|
<span class="money">{{item.node.REVENUE_AMOUNT || '-'}}</span>
|
|
<span class="text">总计<span class="unit">/元</span></span>
|
|
</view>
|
|
<image class="meng" :src="item.node.ACCOUNT_CODE==='营业收入'?'https://eshangtech.com/ShopICO/ahyd-BID/plan/mainWorkMeng.png':item.node.ACCOUNT_CODE==='营业成本'?'https://eshangtech.com/ShopICO/ahyd-BID/plan/costBg.png':item.node.ACCOUNT_CODE==='毛利率'?'https://eshangtech.com/ShopICO/ahyd-BID/plan/grossBg.png':''"></image>
|
|
</view>
|
|
<view v-for="(subItem,subIndex) in item.children" :key="subIndex">
|
|
<view class="smallTitle">
|
|
<span class="type">{{subItem.node.ACCOUNT_CODE}}<span class="unit">/元</span></span>
|
|
<span class="money">{{subItem.node.REVENUE_AMOUNT || '-'}}</span>
|
|
</view>
|
|
<view class="subItem" v-for="(thirdItem,thirdIndex) in subItem.children" :key="thirdIndex">
|
|
<view class="link" v-if="thirdIndex + 1 !== subItem.children.length"></view>
|
|
<view class="subTop">
|
|
<image class="icon" :src="`https://eshangtech.com/ShopICO/ahyd-BID/plan/${item.node.ACCOUNT_CODE==='营业收入'?thirdItem.node.ACCOUNT_CODE==='便利店'?'store'
|
|
:thirdItem.node.ACCOUNT_CODE==='餐饮（含小吃）'?'mainWorkFood'
|
|
:thirdItem.node.ACCOUNT_CODE==='客房及其他'?'mainWorkRoom':''
|
|
:item.node.ACCOUNT_CODE==='营业成本'?thirdItem.node.ACCOUNT_CODE==='便利店'?'costStore'
|
|
:thirdItem.node.ACCOUNT_CODE==='餐饮销售成本'?'costFood'
|
|
:thirdItem.node.ACCOUNT_CODE==='员工餐成本'?'costBook'
|
|
:thirdItem.node.ACCOUNT_CODE==='客房'?'costRoom':''
|
|
:item.node.ACCOUNT_CODE==='毛利率'?thirdItem.node.ACCOUNT_CODE==='综合毛利率 (不含员工餐)'?'grossAdd'
|
|
:thirdItem.node.ACCOUNT_CODE==='综合毛利率 (含员工餐)'?'grossUser'
|
|
:thirdItem.node.ACCOUNT_CODE==='便利店'?'grossStore'
|
|
:thirdItem.node.ACCOUNT_CODE==='餐饮'?'grossFood':'':''}.svg`"></image>
|
|
<span class="text">{{thirdItem.node.ACCOUNT_CODE}}</span>
|
|
</view>
|
|
<view class="subBox">
|
|
<view class="subType">
|
|
<view class="upper">
|
|
<view class="icon" :style="{background:item.node.ACCOUNT_CODE==='营业收入'?'#FF7D35':item.node.ACCOUNT_CODE==='营业成本'?'#1E80FF':'#7242DE'}"></view>
|
|
<span class="subTitle">实际</span>
|
|
<span class="unit">/元</span>
|
|
</view>
|
|
<span class="value">{{thirdItem.node.REVENUE_AMOUNT || '-'}}</span>
|
|
</view>
|
|
<view class="subTypeNoAfter">
|
|
<view class="upper">
|
|
<view class="icon" :style="{opacity: 0.4,background:item.node.ACCOUNT_CODE==='营业收入'?'#FF7D35':item.node.ACCOUNT_CODE==='营业成本'?'#1E80FF':'#7242DE'}"></view>
|
|
<span class="subTitle">计划</span>
|
|
<span class="unit">/元</span>
|
|
</view>
|
|
<span class="value">{{thirdItem.node.BUDGETDETAIL_AMOUNT || '-'}}</span>
|
|
</view>
|
|
<view class="progress">
|
|
<view class="reality" v-if="thirdItem.node.Budget_Degree" :style="{width:thirdItem.node.Budget_Degree>=100?'100%':thirdItem.node.Budget_Degree + '%'}"></view>
|
|
<view class="plan"></view>
|
|
<view class="add">
|
|
<image v-if="thirdItem.node.Budget_Degree" class="addIcon" :src="thirdItem.node.Budget_Degree>0?'https://eshangtech.com/ShopICO/ahyd-BID/plan/add.svg':'https://eshangtech.com/ShopICO/ahyd-BID/plan/reduce.svg'"></image>
|
|
<span class="value" :style="{color:thirdItem.node.Budget_Degree>0?'#E83944':thirdItem.node.Budget_Degree<0?'#049E77':'#ccc'}">{{thirdItem.node.Budget_Degree || '-'}}%</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<uniPopup type="bottom" :round="true" :show="showPop" @hidePopup="hidePopup">
|
|
<view class="popup" :style="{height:selectTab!==2?'60vh':'78vh'}">
|
|
<view class="top">
|
|
<text class="popupTitle">选择片区</text>
|
|
<image @click="hidePopup" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>
|
|
</view>
|
|
<view class="areaList">
|
|
<view @click="handleChangeArea(item)" :class="selectServiceId===item.value?'selectItem item':'item'" v-for="(item,index) in serviceList" :key="index">{{item.label}}<text class="unit">片区</text></view>
|
|
</view>
|
|
</view>
|
|
</uniPopup>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
import uniPopup from '@/components/uni-popup'
|
|
export default {
|
|
components:{
|
|
uniPopup
|
|
},
|
|
data(){
|
|
return{
|
|
menu:{},
|
|
serviceList:[],// 服务区选择列表
|
|
monthList:[{label:'1月',value:1},{label:'2月',value:2},{label:'3月',value:3},{label:'4月',value:4},{label:'5月',value:5},{label:'6月',value:6},{label:'7月',value:7}, {label:'8月',value:8},{label:'9月',value:9},{label:'10月',value:10},{label:'11月',value:11},{label:'12月',value:12}],
|
|
selectMonth:0,// 选中的月份
|
|
selectMonthId:'',// 选中月份的id
|
|
swiperList:[{label:1111},{label:2222},{label:3333},{label:4444},{label:5555},{label:6666},{label:7777},{label:8888},{label:9999},{label:1010}, {label:11111111},{label:1212}],
|
|
selectDetail:0,// 放大的月份详情
|
|
detailList:[{list:[1,2,3]},{list:[1,2,3]},{list:[1,2,3]},{list:[1,2,3]}],
|
|
serviceId:'',// 服务区ID
|
|
showPop:false,// 是否显示popup
|
|
selectAreaValue:'',// 选择的片区ID
|
|
selectServiceId:'',// 选择的服务区id
|
|
selectServiceName:'',// 选择的服务区名称
|
|
serviceDetailObj:{},// 服务区的详细信息
|
|
}
|
|
},
|
|
onLoad(query){
|
|
console.log(query)
|
|
// query 有id searchTime 片区名称和片区内码
|
|
// 获取手机参数对页面进行适配
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
// 先拿到首页的时间 作为调用接口的统一时间 存的lastDay存当前月份的具体日期切换回本月的日期判断有用
|
|
if (query.search){
|
|
this.searchTime = query.search
|
|
}else{
|
|
this.searchTime = uni.getStorageSync('lastDay')
|
|
}
|
|
// 两个是一起的 一个有另一个一定有
|
|
if (query.selectAreaValue){
|
|
this.selectAreaValue = query.selectAreaValue
|
|
}
|
|
if (query.obj){
|
|
this.serviceDetailObj = JSON.parse(query.obj)
|
|
this.selectServiceName = this.serviceDetailObj.Serverpart_Name.split('服务区')[0]
|
|
this.selectServiceId = this.serviceDetailObj.Serverpart_ID
|
|
}
|
|
this.lastDay = uni.getStorageSync('lastDay')
|
|
// 拿到当前时间
|
|
console.log('this.searchTime',this.searchTime)
|
|
const date = new Date(this.searchTime)
|
|
let month = date.getMonth() + 1
|
|
// 滚动的月份列表
|
|
this.monthList = this.monthList.filter(item=>item.value<=month)
|
|
// 详情卡片的滑动列表
|
|
this.swiperList = this.swiperList.filter((item,index)=>index<month)
|
|
// 根据月份显示的详情卡片
|
|
this.selectDetail = month - 1
|
|
// 拿到服务区id
|
|
this.serviceId = query.id
|
|
// 拿到服务区列表
|
|
this.getServiceList()
|
|
this.getServiceDetail()
|
|
},
|
|
onReady(){
|
|
this.getThisMonth()
|
|
},
|
|
methods:{
|
|
getThisMonth(){
|
|
const date = new Date(this.searchTime)
|
|
const month = date.getMonth() + 1
|
|
this.selectMonth = month
|
|
this.selectMonthId = `item${month}`
|
|
},
|
|
handleDetailScroll(e){
|
|
console.log('e.detail.current',e.detail.current)
|
|
this.selectDetail = e.detail.current
|
|
this.selectMonth = e.detail.current + 1
|
|
const date = new Date(this.lastDay)
|
|
let y = date.getFullYear()
|
|
let m = date.getMonth() + 1
|
|
let d = date.getDate()
|
|
if (m === e.detail.current + 1){
|
|
this.searchTime=this.lastDay
|
|
}else{
|
|
let month = e.detail.current + 1
|
|
if (month<10){
|
|
month = '0' + month
|
|
}
|
|
this.searchTime = `${y}-${month}`
|
|
}
|
|
// 拿到列表
|
|
this.getServiceDetail()
|
|
// 拿到卡片详情
|
|
this.handleServiceDetail()
|
|
},
|
|
handleBack(){
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},
|
|
async getServiceDetail(){
|
|
let req = {}
|
|
const date = new Date(this.searchTime)
|
|
let y = date.getFullYear()
|
|
let m = date.getMonth() + 1
|
|
|
|
const nowDate = new Date(this.lastDay)
|
|
let nowY = nowDate.getFullYear()
|
|
let nowM = nowDate.getMonth() + 1
|
|
if (m === nowM && y === nowY){
|
|
if (m<10){
|
|
m = '0' + m
|
|
}
|
|
req = {
|
|
BUDGETPROJECT_YEAR: y,
|
|
STATISTICS_MONTH:`${y}${m}`,
|
|
SERVERPART_ID:this.serviceId,
|
|
ACCOUNT_CODE:'6001,6401,6402',
|
|
STATISTICS_DATE: this.lastDay
|
|
}
|
|
}else{
|
|
if (m<10){
|
|
m = '0' + m
|
|
}
|
|
req = {
|
|
BUDGETPROJECT_YEAR: y,
|
|
STATISTICS_MONTH:`${y}${m}`,
|
|
SERVERPART_ID:this.serviceId,
|
|
ACCOUNT_CODE:'6001,6401,6402',
|
|
}
|
|
}
|
|
const totalData = await request.$webGet('CommercialApi/Budget/GetBudgetProjectDetailList',req)
|
|
console.log(totalData)
|
|
this.detailList = totalData.Result_Data.List
|
|
// 千分号格式化处理数字
|
|
this.detailList.forEach(item=>{
|
|
if (item.children){
|
|
item.children = this.editData(item.children)
|
|
if (item.node.ShowRevenue_Amount){
|
|
item.node.REVENUE_AMOUNT = item.node.REVENUE_AMOUNT ? this.$util.fmoney(item.node.REVENUE_AMOUNT ):''
|
|
item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
|
|
}
|
|
}else{
|
|
if (item.node.REVENUE_AMOUNT){
|
|
item.node.REVENUE_AMOUNT = item.node.REVENUE_AMOUNT ? this.$util.fmoney(item.node.REVENUE_AMOUNT ):''
|
|
item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
|
|
}else{
|
|
item.node.REVENUE_AMOUNT = '-'
|
|
}
|
|
}
|
|
})
|
|
console.log('this.detailList',this.detailList)
|
|
},
|
|
// 获取服务区详情信息
|
|
async handleServiceDetail(){
|
|
uni.showLoading({title:'正在加载'})
|
|
let reqTime = ''
|
|
const date = new Date(this.searchTime)
|
|
let y = date.getFullYear()
|
|
let m = date.getMonth() + 1
|
|
|
|
const nowDate = new Date(this.lastDay)
|
|
let nowY = nowDate.getFullYear()
|
|
let nowM = nowDate.getMonth() + 1
|
|
if (m === nowM && y === nowY){
|
|
reqTime= this.lastDay
|
|
}else{
|
|
let d = this.$util.getThisMonthDay(this.searchTime)
|
|
reqTime=`${y}-${m}-${d}`
|
|
}
|
|
let req = {
|
|
Province_Code:'340000',
|
|
Statistics_Date:reqTime,
|
|
Serverpart_ID:this.selectServiceId,
|
|
SPRegionType_ID:this.selectAreaValue
|
|
}
|
|
const data = await request.$webGet('CommercialApi/Revenue/GetRevenueBudget',req)
|
|
this.serviceDetailObj = data.Result_Data
|
|
for (let key in this.serviceDetailObj){
|
|
for (let key in this.serviceDetailObj){
|
|
if (key==='RevenueMonth_Amount' || key==='BudgetMonth_Amount'){
|
|
this.serviceDetailObj[key] = this.$util.fmoney(this.serviceDetailObj[key])
|
|
}
|
|
}
|
|
}
|
|
uni.hideLoading()
|
|
},
|
|
// 点击月份切换月份
|
|
handleSelectMonth(value){
|
|
this.selectMonth = value
|
|
this.selectMonthId = `item${value}`
|
|
this.selectDetail = value - 1
|
|
},
|
|
// 递归处理数据
|
|
editData(value){
|
|
value.forEach(item=>{
|
|
if (item.children){
|
|
item.children = this.editData(item.children)
|
|
if (item.node.ShowRevenue_Amount){
|
|
item.node.REVENUE_AMOUNT = item.node.REVENUE_AMOUNT ? this.$util.fmoney(item.node.REVENUE_AMOUNT ) :''
|
|
item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
|
|
}
|
|
}else{
|
|
item.children = [{},{},{}]
|
|
if (item.node.REVENUE_AMOUNT ){
|
|
item.node.REVENUE_AMOUNT = item.node.REVENUE_AMOUNT ? this.$util.fmoney(item.node.REVENUE_AMOUNT ) :''
|
|
item.node.REVENUE_AMOUNT = this.$util.fmoney(item.node.REVENUE_AMOUNT)
|
|
}else{
|
|
item.node.REVENUE_AMOUNT = '-'
|
|
}
|
|
}
|
|
})
|
|
return value
|
|
},
|
|
// 是否显示弹出框
|
|
handleShowPopup(){
|
|
this.showPop = true
|
|
},
|
|
// 弹出框点击蒙层关闭
|
|
hidePopup(){
|
|
this.showPop = false
|
|
},
|
|
// 修改当前选中的片区
|
|
handleChangeArea(item){
|
|
// 选择的片区名称和片区id
|
|
this.selectServiceId = item.value
|
|
this.selectServiceName = item.label.split('服务区')[0]
|
|
this.handleServiceDetail()
|
|
// 关闭弹出框方法
|
|
this.hidePopup()
|
|
},
|
|
async getServiceList(){
|
|
const req = {
|
|
StatisticsDate:this.searchTime,
|
|
ProvinceCode:'340000',
|
|
StatisticsType:4,
|
|
SPRegionTypeID:this.selectAreaValue
|
|
}
|
|
const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
|
|
let list = []
|
|
data.Result_Data.RegionBudgetList.forEach(item=>{
|
|
list.push({label:item.Serverpart_Name,value:item.Serverpart_ID})
|
|
})
|
|
this.serviceList = list
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
@import '/static/public/font/stylesheet.css';
|
|
.main{
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.header{
|
|
width: 100%;
|
|
padding-bottom: 32px;
|
|
background: linear-gradient(180deg, #FF6D40 0%, rgba(255,132,91,0.84) 44%, #FFEDBE 100%);
|
|
.top{
|
|
width: 100%;
|
|
position: relative;
|
|
.img{
|
|
width: 24px;
|
|
height: 24px;
|
|
position: absolute;
|
|
left: 16px;
|
|
}
|
|
}
|
|
.pageTitle{
|
|
font-size: 28px;
|
|
font-family: Alimama ShuHeiTi;
|
|
color: #160002;
|
|
line-height: 39px;
|
|
text-shadow: 0 4px 8px rgba(129,36,7,0.2);
|
|
background: linear-gradient(180deg, #FEFFFE 40%, #FFBEAA 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin: 12px 0 0 16px;
|
|
}
|
|
.monthTabs{
|
|
width: calc(100% - 32px);
|
|
height: 34px;
|
|
border-radius: 17px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #FFA98D;
|
|
background: linear-gradient(180deg, #FC6C3F 0%, #FFAC91 100%);
|
|
overflow: hidden;
|
|
padding: 2px 0;
|
|
margin-top: 16px;
|
|
margin-left: 16px;
|
|
.big{
|
|
width: 100%;
|
|
height: 100%;
|
|
white-space: nowrap;
|
|
.monthItem{
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
padding: 2px 16px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #FFCFC0;
|
|
line-height: 24px;
|
|
margin-right: 4px;
|
|
text-align: center;
|
|
border-radius: 12px;
|
|
}
|
|
.selectItem{
|
|
background: #fff;
|
|
}
|
|
.monthItem:first-child{
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
}
|
|
.monthDetailList{
|
|
width: 100%;
|
|
height: 188px;
|
|
margin-top: 12px;
|
|
.swiper{
|
|
width: 100%;
|
|
height: 188px;
|
|
.swiper-item{
|
|
.box{
|
|
width: 100%;
|
|
height: 100%;
|
|
.detail{
|
|
position: relative;
|
|
width: calc(100% - 20px);
|
|
height: 100%;
|
|
background: linear-gradient(314deg, #FFF7E4 0%, #F5F2FF 32%, #FFFAFA 54%, #FFF6F3 70%, #FFE4D9 100%); margin-left: 10px;
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
margin-top: 16px;
|
|
z-index: 1;
|
|
.detailLogo{
|
|
width: 97px;
|
|
height: 103px;
|
|
position: absolute;
|
|
z-index:1;
|
|
top: 16px;right: 30px;
|
|
opacity: 0.6;
|
|
}
|
|
.item{
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
z-index: 99;
|
|
.picker{
|
|
.selectService{
|
|
display: flex;
|
|
align-items: center;
|
|
.img{
|
|
width: 40px;
|
|
height: 40px;
|
|
z-index: 2;
|
|
}
|
|
.select{
|
|
height: 32px;
|
|
min-width: 110px;
|
|
background: linear-gradient(270deg, #FFE8DE 0%, #FFDFD1 100%);
|
|
border-radius: 0 16px 16px 0;
|
|
transform: translateX(-20px);
|
|
box-sizing: border-box;
|
|
padding-left: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
.name{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
}
|
|
.area{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
margin-left: 2px;
|
|
}
|
|
.rightArrow{
|
|
position: absolute;
|
|
right: 2px;
|
|
width: 24px;
|
|
height: 12px;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.itemTop{
|
|
margin-top: 16px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.left{
|
|
display: flex;
|
|
.detailContent{
|
|
.top{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 2px;
|
|
.money{
|
|
font-size: 18px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #160002;
|
|
line-height: 24px;
|
|
}
|
|
.icon{
|
|
width: 15px;
|
|
height: 15px;
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
.text{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 20px;
|
|
.unit{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 20px;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right{
|
|
text-align: right;
|
|
.add{
|
|
font-size: 18px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #E83944;
|
|
line-height: 24px;
|
|
}
|
|
.compare{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
}
|
|
.itemBottom{
|
|
.progress{
|
|
width: 100%;
|
|
height: 10px;
|
|
background: #FBD9CD;
|
|
border-radius: 5px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
.have{
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: #FF6D40;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
.text{
|
|
margin-top: 4px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.success{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 20px;
|
|
.unit{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 20px;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
.target{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.noShow{
|
|
height: 151px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.detail{
|
|
width: 100%;
|
|
transform: translateY(-16px);
|
|
background: #fff;
|
|
border-radius: 16px 16px 2px 2px;
|
|
padding-top: 16px;
|
|
box-sizing: border-box;
|
|
.box{
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 16px 16px 2px 2px;
|
|
box-sizing: border-box;
|
|
padding: 8px 16px 16px;
|
|
position: relative;
|
|
.title{
|
|
font-size: 17px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 24px;
|
|
}
|
|
.top{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 12px;
|
|
position: relative;
|
|
border-bottom: 1px solid #EEEEEE;
|
|
padding-bottom: 16px;
|
|
.icon{
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
.sum{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
.money{
|
|
font-size: 20px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #160002;
|
|
line-height: 24px;
|
|
}
|
|
.text{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
margin-top: 4px;
|
|
.unit{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 20px;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
}
|
|
.meng{
|
|
position: absolute;
|
|
width: 80px;
|
|
height: 80px;
|
|
right: 0;top: -30px;
|
|
}
|
|
}
|
|
.smallTitle{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 16px;
|
|
margin-bottom: 16px;
|
|
.type{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
.unit{
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
.money{
|
|
font-size: 16px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
.subItem{
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
.link{
|
|
position: absolute;
|
|
left: 12px;top: 24px;
|
|
width: 2px;
|
|
height: 110px;
|
|
background: #E6E6E6;
|
|
}
|
|
.subTop{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 6px;
|
|
.icon{
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
.text{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
margin-left: 8px;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
.subBox{
|
|
width: calc(100vw - 64px);
|
|
height: 80px;
|
|
background: #F5F5F5;
|
|
box-sizing: border-box;
|
|
margin-left: 32px;
|
|
border-radius: 8rpx;
|
|
display: flex;
|
|
.subType,.subTypeNoAfter{
|
|
width: 33%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 16px 12px;
|
|
position: relative;
|
|
.upper{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
.icon{
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.subTitle{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
margin-left: 4px;
|
|
}
|
|
.unit{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 40rpx;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
.value{
|
|
font-size: 27rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
.subType:after{
|
|
content:'';
|
|
width: 1px;
|
|
height: 50px;
|
|
background: #E6E6E6;
|
|
border-radius: 1px;
|
|
position: absolute;
|
|
right: 0;top: 15px;
|
|
}
|
|
.progress{
|
|
width: 34%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 16px 10px;
|
|
.reality{
|
|
height: 6px;
|
|
background: #FF7D35;
|
|
border-radius: 4px;
|
|
}
|
|
.plan{
|
|
width: 40px;
|
|
height: 6px;
|
|
background: #FF7D35;
|
|
border-radius: 4px;
|
|
opacity: 0.4;
|
|
margin-top: 4px;
|
|
}
|
|
.add{
|
|
margin-top: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
.addIcon{
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.value{
|
|
font-size: 32rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
line-height: 40rpx;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.popup{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
.top{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.popupTitle{
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 22px;
|
|
}
|
|
.close{
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
.areaList{
|
|
width: 100%;
|
|
height: calc(60vh - 70px);
|
|
margin-top: 12px;
|
|
overflow-y: scroll;
|
|
.item{
|
|
width: 100%;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
padding:9px 12px;
|
|
box-sizing: border-box;
|
|
.unit{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
.selectItem{
|
|
background: RGBA(243, 235, 255, 0.5);
|
|
}
|
|
}
|
|
.serviceList{
|
|
.tab{
|
|
width: 100%;
|
|
height: 38px;
|
|
background: #F3F1F5;
|
|
border-radius: 4px;
|
|
margin-top: 16px;
|
|
box-sizing: border-box;
|
|
padding: 4px;
|
|
.tabItem{
|
|
display: inline-block;
|
|
width: 50%;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 30px;
|
|
}
|
|
.selectTabItem{
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
.list{
|
|
margin-top: 12px;
|
|
height: calc(78vh - 130px);
|
|
overflow-y: scroll;
|
|
.item{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.person{
|
|
margin-top: 12px;
|
|
text-align: left;
|
|
.value{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.label{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 18px;
|
|
}
|
|
.icon{
|
|
margin-bottom:-2px;
|
|
width: 16px;
|
|
height: 19px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.meetList{
|
|
margin-top: 16px;
|
|
height: calc(60vh - 80px);
|
|
overflow-y: scroll;
|
|
.message{
|
|
display: flex;
|
|
align-items: flex-start;
|
|
.icon{
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-top: 2px;
|
|
}
|
|
.value{
|
|
display: inline-block;
|
|
text-align: left;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
margin-left: 8px;
|
|
width: 90%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|