1053 lines
38 KiB
Vue
1053 lines
38 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==='营业收入'?subItem.node.ACCOUNT_CODE==='自营收入'?
|
||
thirdItem.node.ACCOUNT_CODE==='便利店'?'store':thirdItem.node.ACCOUNT_CODE==='餐饮（含小吃）'?'mainWorkFood':'mainWorkRoom'
|
||
:thirdItem.node.ACCOUNT_CODE==='餐饮租赁收入'?''
|
||
:thirdItem.node.ACCOUNT_CODE==='商铺租赁收入'?''
|
||
:thirdItem.node.ACCOUNT_CODE==='场地租赁汇总'?'':''
|
||
:item.node.ACCOUNT_CODE==='营业成本'?thirdItem.node.ACCOUNT_CODE==='便利店'?'costStore'
|
||
:thirdItem.node.ACCOUNT_CODE==='餐饮销售成本'?'costFood'
|
||
:thirdItem.node.ACCOUNT_CODE==='员工餐成本'?'costBook':'costRoom'
|
||
:thirdItem.node.ACCOUNT_CODE==='综合毛利率 (不含员工餐)'?'grossAdd'
|
||
:thirdItem.node.ACCOUNT_CODE==='综合毛利率 (含员工餐)'?'grossUser'
|
||
:thirdItem.node.ACCOUNT_CODE==='便利店'?'grossStore':'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>=200?'100%':(thirdItem.node.Budget_Degree / 100)*40 + 'px'}"></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:[{},{},{},{},{},{},{},{},{},{}, {},{}],
|
||
selectDetail:0,// 放大的月份详情
|
||
detailList:[],
|
||
serviceId:'',// 服务区ID
|
||
showPop:false,// 是否显示popup
|
||
selectAreaValue:'',// 选择的片区ID
|
||
selectServiceId:'',// 选择的服务区id
|
||
selectServiceName:'',// 选择的服务区名称
|
||
serviceDetailObj:{},// 服务区的详细信息
|
||
}
|
||
},
|
||
onLoad(query){
|
||
console.log('query',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')
|
||
// 拿到当前时间
|
||
const date = new Date(this.searchTime)
|
||
let month = date.getMonth() + 1
|
||
// 月份列表的显示和详情卡片的滑块列表 还是得用首页的时间 不然选择前面月份 后续比当前月份小的月份不会显示
|
||
const nowDate = new Date(this.lastDay)
|
||
let nowMonth = nowDate.getMonth() + 1
|
||
// 滚动的月份列表
|
||
this.monthList = this.monthList.filter(item=>item.value<=nowMonth)
|
||
// 详情卡片的滑动列表
|
||
this.swiperList = this.swiperList.filter((item,index)=>index<nowMonth)
|
||
// 根据月份显示的详情卡片
|
||
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){
|
||
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)
|
||
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 = '-'
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取服务区详情信息
|
||
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){
|
||
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.BUDGETDETAIL_AMOUNT = item.node.BUDGETDETAIL_AMOUNT? this.$util.fmoney(item.node.BUDGETDETAIL_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.BUDGETDETAIL_AMOUNT = item.node.BUDGETDETAIL_AMOUNT? this.$util.fmoney(item.node.BUDGETDETAIL_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.getServiceDetail()
|
||
// 关闭弹出框方法
|
||
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>
|