457 lines
15 KiB
Vue
457 lines
15 KiB
Vue
<template>
|
|
<view class="main">
|
|
<view class="header">
|
|
<view class="headerTop" :style="{top: menu.top + 'px',height: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="incomeTab" :style="{top:(menu.bottom + 18) + '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">
|
|
<view class="itemTop">
|
|
<view class="itemTitle">服务区自营小计</view>
|
|
<image class="monthSumBg" src="/static/images/revenueBox/allInCome.png"/>
|
|
<view class="itemBox">
|
|
<view class="leftChar">
|
|
<OtherCharts :success="number" :colorList="['#FC7909', '#FEE4CE']"/>
|
|
<text class="rateText">39.67%</text>
|
|
</view>
|
|
<view class="rightDetail">
|
|
<view class="messageBox">
|
|
<view class="success">
|
|
<text class="revenueValue">119.01</text>
|
|
<text class="revenueLabel">2022年完成<text class="revenueUnit">/万元</text></text>
|
|
</view>
|
|
<view class="rateBox">
|
|
<text class="rateValue">32.54%</text>
|
|
<text class="rateLabel">成本比</text>
|
|
</view>
|
|
</view>
|
|
<view class="messageBox" style="margin-top: 32rpx">
|
|
<view class="success">
|
|
<text class="revenueValue">119.01</text>
|
|
<text class="revenueLabel">2022年完成<text class="revenueUnit">/万元</text></text>
|
|
</view>
|
|
<view class="rateBox">
|
|
<text class="rateValue">32.54%</text>
|
|
<text class="rateLabel">成本比</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="contentBox">
|
|
<view class="contentItem" v-for="(item,index) in 10" :key="index">
|
|
<view class="topItem">
|
|
<view class="index" :style="{background:`url(${index===0?'/static/images/revenueBox/secondBg.svg':index===1?'/static/images/revenueBox/thirdBg.svg':'/static/images/revenueBox/otherBg.svg'})`}">{{index+1}}</view>
|
|
<view class="smallItemName">餐饮小吃</view>
|
|
</view>
|
|
<view class="bottomItem">
|
|
<view class="smallItem">
|
|
<text class="smallItemValue">46.47</text>
|
|
<text class="smallItemLabel">2022年完成<text class="unit">/万元</text></text>
|
|
</view>
|
|
<view class="smallItem">
|
|
<text class="smallItemValue">100.00</text>
|
|
<text class="smallItemLabel">2023年预计<text class="unit">/万元</text></text>
|
|
</view>
|
|
<view class="otherItem">
|
|
<text class="otherValue">46.47%</text>
|
|
<text class="otherLabel">完成率</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="detailItem">
|
|
<view class="itemTop">
|
|
<view class="itemTitle">分公司收入小计</view>
|
|
<image class="monthSumBg" src="/static/images/revenueBox/allInCome.png"/>
|
|
<view class="itemBox">
|
|
<view class="leftChar">
|
|
<OtherCharts :success="number" :colorList="['#FC7909', '#FEE4CE']"/>
|
|
<text class="rateText">39.67%</text>
|
|
</view>
|
|
<view class="rightDetail">
|
|
<view class="messageBox">
|
|
<view class="success">
|
|
<text class="revenueValue">119.01</text>
|
|
<text class="revenueLabel">2022年完成<text class="revenueUnit">/万元</text></text>
|
|
</view>
|
|
<view class="rateBox">
|
|
<text class="rateValue">32.54%</text>
|
|
<text class="rateLabel">成本比</text>
|
|
</view>
|
|
</view>
|
|
<view class="messageBox" style="margin-top: 32rpx">
|
|
<view class="success">
|
|
<text class="revenueValue">119.01</text>
|
|
<text class="revenueLabel">2022年完成<text class="revenueUnit">/万元</text></text>
|
|
</view>
|
|
<view class="rateBox">
|
|
<text class="rateValue">32.54%</text>
|
|
<text class="rateLabel">成本比</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="contentBox">
|
|
<view class="contentItem" v-for="(item,index) in 3" :key="index">
|
|
<view class="topItem">
|
|
<view class="index" :style="{background:`url(${index===0?'/static/images/revenueBox/secondBg.svg':index===1?'/static/images/revenueBox/thirdBg.svg':'/static/images/revenueBox/otherBg.svg'})`}">{{index + 1}}</view>
|
|
<view class="smallItemName">餐饮小吃</view>
|
|
</view>
|
|
<view class="bottomItem">
|
|
<view class="smallItem">
|
|
<text class="smallItemValue">46.47</text>
|
|
<text class="smallItemLabel">2022年完成<text class="unit">/万元</text></text>
|
|
</view>
|
|
<view class="smallItem">
|
|
<text class="smallItemValue">100.00</text>
|
|
<text class="smallItemLabel">2023年预计<text class="unit">/万元</text></text>
|
|
</view>
|
|
<view class="otherItem">
|
|
<text class="otherValue">46.47%</text>
|
|
<text class="otherLabel">完成率</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import OtherCharts from './component/otherCharts.vue'
|
|
export default {
|
|
components:{OtherCharts},
|
|
data(){
|
|
return {
|
|
windowHeight: null,
|
|
statusBarHeight: null,
|
|
menu:{},
|
|
number:0,
|
|
pageTab:[{label:'自营收入',value:1},{label:'其他收入',value:2}],
|
|
selectTab:1
|
|
}
|
|
},
|
|
onLoad(){
|
|
// 获取手机参数对页面进行适配
|
|
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){
|
|
this.selectTab = value
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '/static/public/font/stylesheet.css';
|
|
.main{
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
.header{
|
|
width: 100%;
|
|
height: 328rpx;
|
|
background: linear-gradient(180deg, #FFE6C2 0%, rgba(255,230,194,0) 100%);
|
|
.headerTop{
|
|
width: 100%;
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
.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%);
|
|
}
|
|
}
|
|
.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: 24rpx 26rpx;
|
|
background: #FFFFFF;
|
|
border: 1rpx solid #FFD4AF;
|
|
display: inline-block;
|
|
border-radius: 8rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
.selectItem{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #DC6500;
|
|
line-height: 40rpx;
|
|
background: linear-gradient(360deg, #FFEFDC 0%, #FEFFFE 100%);
|
|
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(235,190,152,0.3);
|
|
border: 1rpx solid #FFD4AF;
|
|
position: relative;
|
|
}
|
|
.selectItem:after{
|
|
content:'';
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
background: #FFF0DF;
|
|
position: absolute;
|
|
bottom: -18rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%) rotate(45deg);
|
|
border-right: 1rpx solid #FFD4AF;
|
|
border-bottom: 1rpx solid #FFD4AF;
|
|
}
|
|
}
|
|
}
|
|
.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%;
|
|
height: 400rpx;
|
|
box-sizing: border-box;
|
|
padding: 22rpx 24rpx;
|
|
background: linear-gradient(180deg, #FEF4E6 0%, #FDFAF4 100%);
|
|
border-radius: 12rpx 12rpx 0rpx 0rpx;
|
|
position: relative;
|
|
.itemTitle{
|
|
font-size: 36rpx;
|
|
font-family: Alimama ShuHeiTi;
|
|
font-weight: bold;
|
|
color: #EC6C00;
|
|
line-height: 44rpx;
|
|
}
|
|
.monthSumBg{
|
|
position: absolute;
|
|
width: 320rpx;
|
|
height: 320rpx;
|
|
right: 0;top: 0;
|
|
z-index: 1;
|
|
}
|
|
.itemBox{
|
|
position: relative;
|
|
z-index:2;
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
box-sizing: border-box;
|
|
padding: 32rpx;
|
|
margin-top: 22rpx;
|
|
display: flex;
|
|
.leftChar{
|
|
width: 224rpx;
|
|
height: 100%;
|
|
margin-bottom: 8rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.rateText{
|
|
font-size: 40rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #FE7500;
|
|
line-height: 48rpx;
|
|
}
|
|
}
|
|
.rightDetail{
|
|
flex: 1;
|
|
.messageBox{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.success{
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.revenueValue{
|
|
font-size: 32rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #160002;
|
|
line-height: 36rpx;
|
|
}
|
|
.revenueLabel{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 36rpx;
|
|
margin-top: 4rpx;
|
|
.revenueUnit{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 36rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
.rateBox{
|
|
display: flex;
|
|
flex-direction: column;
|
|
.rateValue{
|
|
font-size: 32rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #E83944;
|
|
line-height: 36rpx;
|
|
}
|
|
.rateLabel{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 36rpx;
|
|
margin-top: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.contentBox{
|
|
width: 100%;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
padding: 0 24rpx;
|
|
.contentItem{
|
|
width: 100%;
|
|
.topItem{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 24rpx;
|
|
.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;
|
|
}
|
|
.smallItemName{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
.bottomItem{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-bottom: 32rpx;
|
|
border-bottom: 1px solid #F7F4F4;
|
|
.smallItem{
|
|
display: flex;
|
|
flex-direction: column;
|
|
.smallItemValue{
|
|
margin-bottom: 4rpx;
|
|
font-size: 32rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #160002;
|
|
line-height: 36rpx;
|
|
}
|
|
.smallItemLabel{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 36rpx;
|
|
.unit{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 36rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
.otherItem{
|
|
display: flex;
|
|
flex-direction: column;
|
|
.otherValue{
|
|
font-size: 32rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #E83944;
|
|
line-height: 36rpx;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
.otherLabel{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|