1177 lines
50 KiB
Vue
1177 lines
50 KiB
Vue
<template>
|
||
<view class="main">
|
||
|
||
<!-- 顶部固定的内容 -->
|
||
<view class="topBox" :style="{ height: menu.bottom + 8 + 'px' }">
|
||
<view class="topContent" :style="{ paddingTop: menu.top + 'px', height: menu.height + 'px' }">
|
||
<view class="topLeft">
|
||
<image class="YDIcon" src="/static/images/home/yunnanLogo.svg" />
|
||
</view>
|
||
<view class="topRight" @click="handleGoMap">
|
||
<image class="searchIcon" src="/static/images/home/searchIcon.svg" />
|
||
<span class="searchText">请输入服务区</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 月份的轮播框 -->
|
||
<view class="monthListBox" :style="{ marginTop: menu.bottom + 8 + 'px' }">
|
||
<swiper class="swiperBox" previous-margin="40rpx" next-margin="40rpx" :current="selectIndex"
|
||
@change="handleChangeSwiper">
|
||
<swiper-item class="swiperItem" v-for="(item, index) in monthList" :key="index">
|
||
<view class="swiperItemContent"
|
||
:class="{ 'is-first': index === 0, 'is-last': index === monthList.length - 1 }">
|
||
<view class="swiperItemContentBox">
|
||
|
||
<!-- 轮播框里面的实际内容 写在这个里面 -->
|
||
<view class="swiperItemContentMonth">
|
||
{{ selectIndex === index ? item.month || "-" : "-" }}月对客营收
|
||
<span class="swiperItemContentUnit">/万元</span>
|
||
</view>
|
||
|
||
<!-- 月度营收的值 -->
|
||
<view class="swiperItemContentMonthRevenueBox">
|
||
<view class="leftRevenueValue">{{ selectIndex === index
|
||
? topShowData.MonthRevenueModel.CashPayChange || "-" : "-" }}
|
||
</view>
|
||
|
||
<view class="rightRevenueValue">
|
||
<text v-if="selectIndex === index" class="addValue" :style="{
|
||
color:
|
||
topShowData.MonthRevenueModel.addNumber > 0
|
||
? '#E83944'
|
||
: topShowData.MonthRevenueModel.addNumber < 0
|
||
? '#0E9976'
|
||
: '',
|
||
}">{{ topShowData.MonthRevenueModel.addNumber ?
|
||
topShowData.MonthRevenueModel.addNumber : "-" }}%</text>
|
||
<text class="rightNav">同比</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="monthRevenueBox" v-if="selectIndex === index">
|
||
<view class="leftBox" @click="handleShowYDModal">
|
||
<view class="rateChartsBox">
|
||
<rateCharts :success="moneyRateList"
|
||
:colorList="['#1677FE', '#456497', '#97A9C6']"
|
||
:name="`${selectIndex}rate`" />
|
||
</view>
|
||
<view class="haveNoticeBox" v-if="ydModal" @click.stop="handleShowYDModal">
|
||
<view class="field">
|
||
<view class="label">便利店:</view>
|
||
<view class="value">{{ ydRate }}%</view>
|
||
</view>
|
||
<view class="field">
|
||
<view class="label">餐饮客房:</view>
|
||
<view class="value">{{ shopRate }}%</view>
|
||
</view>
|
||
<view class="field">
|
||
<view class="label">商铺租赁:</view>
|
||
<view class="value">{{ shopOutRate }}%</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="newRightBox">
|
||
<view class="newRightItem" v-for="(subItem, subIndex) in profitSharingList"
|
||
:key="subIndex">
|
||
<view class="itemLeft">
|
||
<view class="itemIcon" :style="{
|
||
background:
|
||
subIndex === 0
|
||
? '#1677FE'
|
||
: subIndex === 1
|
||
? '#456497'
|
||
: subIndex === 2
|
||
? '#97A9C6'
|
||
: '',
|
||
}"></view>
|
||
<span class="itemName">{{
|
||
subItem.name
|
||
}}</span>
|
||
</view>
|
||
<view class="itemCenter">
|
||
{{
|
||
subItem.value
|
||
? $util.getMoney(subItem.value / 10000)
|
||
: ""
|
||
}}
|
||
</view>
|
||
<view class="itemRight" :style="{
|
||
color:
|
||
subItem.addQOQ > 0
|
||
? '#E83944'
|
||
: subItem.addQOQ < 0
|
||
? '#0E9976'
|
||
: '',
|
||
}">{{
|
||
subItem.addQOQ ? `${subItem.addQOQ}` : ""
|
||
}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 年度标题 -->
|
||
<view class="yearAccountItem" style="margin-bottom: 24rpx">
|
||
<view class="itemTop">
|
||
<view class="itemName">{{
|
||
(Math.floor(index / 12) + 2024)
|
||
.toString()
|
||
.slice(2, 4)
|
||
}}年累计对客销售<span class="unit">/亿元</span></view>
|
||
<!-- <view class="itemType">累计</view>-->
|
||
</view>
|
||
<view class="itemBottom">
|
||
<span class="revenueNum" v-if="selectIndex === index">{{
|
||
topShowData && topShowData.MonthRevenueModel &&
|
||
topShowData.MonthRevenueModel.YearRevenueAmount
|
||
? $util.getMoney(
|
||
topShowData.MonthRevenueModel.YearRevenueAmount /
|
||
100000000
|
||
)
|
||
: ""
|
||
}}</span>
|
||
<span class="revenueAdd" v-if="selectIndex === index" :style="{
|
||
color:
|
||
topShowData && topShowData.MonthRevenueModel && topShowData.MonthRevenueModel.YearRevenueAddNumber > 0
|
||
? '#E83944'
|
||
: topShowData && topShowData.MonthRevenueModel && topShowData.MonthRevenueModel.YearRevenueAddNumber < 0
|
||
? '#0E9976'
|
||
: '',
|
||
}"><span class="revenueAddNotice">{{
|
||
topShowData && topShowData.MonthRevenueModel &&
|
||
topShowData.MonthRevenueModel.YearRevenueAddNumber > 0
|
||
? "增长"
|
||
: topShowData && topShowData.MonthRevenueModel &&
|
||
topShowData.MonthRevenueModel.YearRevenueAddNumber < 0 ? "下降" : "" }}</span>
|
||
{{
|
||
topShowData && topShowData.MonthRevenueModel &&
|
||
topShowData.MonthRevenueModel.YearRevenueAddNumber
|
||
? $util.getMoney(
|
||
topShowData && topShowData.MonthRevenueModel &&
|
||
topShowData.MonthRevenueModel.YearRevenueAddNumber /
|
||
100000000
|
||
)
|
||
: ""
|
||
}}</span>
|
||
|
||
<span class="revenueAdd" :style="{
|
||
color:
|
||
topShowData && topShowData.MonthRevenueModel && topShowData.MonthRevenueModel.YearRevenueAdd > 0
|
||
? '#E83944'
|
||
: topShowData && topShowData.MonthRevenueModel && topShowData.MonthRevenueModel.YearRevenueAdd < 0
|
||
? '#0E9976'
|
||
: '',
|
||
}"><span class="revenueAddNotice">{{
|
||
topShowData && topShowData.MonthRevenueModel &&
|
||
topShowData.MonthRevenueModel.YearRevenueAdd > 0
|
||
? "增幅"
|
||
: topShowData && topShowData.MonthRevenueModel &&
|
||
topShowData.MonthRevenueModel.YearRevenueAdd < 0 ? "降幅" : "" }}</span>
|
||
{{
|
||
topShowData && topShowData.MonthRevenueModel &&
|
||
topShowData.MonthRevenueModel.YearRevenueAdd
|
||
? `${topShowData.MonthRevenueModel.YearRevenueAdd > 0
|
||
? "+"
|
||
: ""
|
||
}${topShowData.MonthRevenueModel.YearRevenueAdd}%`
|
||
: "-"
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- <view class="swiperItemContentYear">
|
||
年度累计
|
||
<span class="swiperItemContentUnit">/亿元</span>
|
||
</view>
|
||
<view class="swiperItemContentYearRevenueBox">
|
||
<view class="leftRevenueValue">126.32</view>
|
||
|
||
<view class="rightRevenueValue">
|
||
<text class="addValue" :style="{
|
||
color:
|
||
showTableData.add > 0
|
||
? '#E83944'
|
||
: showTableData.add < 0
|
||
? '#0E9976'
|
||
: '',
|
||
}">{{ showTableData.add ? showTableData.add : "-" }}%</text>
|
||
<text class="rightNav">同比</text>
|
||
|
||
</view>
|
||
</view> -->
|
||
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
|
||
|
||
<!-- 即时营收 -->
|
||
<view class="instantRevenue" style="margin-top: 24rpx">
|
||
<view class="revenue" @click="handlePage">
|
||
<view class="revenueTop">
|
||
<view class="revenyeTopLeft">
|
||
<image class="monthIcon"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/monthIcon.svg" />
|
||
<text class="dateText">{{
|
||
$util.handleGetMonthDay(nowDay)
|
||
}}</text>
|
||
<text class="day">/{{ howDay }}</text>
|
||
</view>
|
||
<view class="revenyeTopRight">
|
||
<image class="right" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="revenueMoney">
|
||
<NumberScroll v-if="currentMoney" :number="currentMoney" />
|
||
<!-- <text class="moneyText">{{currentMoney}}</text>-->
|
||
<text class="moneyLabel">实时对客销售/元</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 实时水电、加油、尿素、充电 -->
|
||
<view class="instantRevenue" style="margin-top: 24rpx;" v-if="otherRealData && otherRealData.length > 0">
|
||
<view class="revenue revenueOther">
|
||
<view class="otherRealDataBox">
|
||
<view class="revenueMoneyItem" v-for="(subItem, subIndex) in otherRealData"
|
||
:style="{ marginTop: subIndex >= 2 ? '24rpx' : '' }">
|
||
<view class="revenueMoneyItemLeft">
|
||
<image class="leftIcon" :src="subItem.icon" />
|
||
</view>
|
||
|
||
<view class="revenueMoneyItemRight">
|
||
<view class="moneyLabel">{{ subItem.label || "" }}</view>
|
||
<view class="moneyText">{{ subItem.value || "" }}<span class="moneyUnit">{{ subItem.unit
|
||
|| "" }}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 底部的跳转 -->
|
||
<view class="funBox">
|
||
|
||
<!-- 经营报表-->
|
||
<view class="funItem" @click="handleGoOperate">
|
||
<view class="funItemContent">
|
||
<view class="funIconBox">
|
||
<image class="funIcon"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/operatStatement.svg" />
|
||
</view>
|
||
<text class="funText">经营报表</text>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="funItem" @click="goToRobot">
|
||
<view class="funItemContent">
|
||
<view class="funIconBox">
|
||
<image class="funIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/statistics.svg" />
|
||
</view>
|
||
<text class="funText">数智助手</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<Tabbar ref="tabbar" :page="page"></Tabbar>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
|
||
<script>
|
||
import request from "@/util/index.js";
|
||
import RateCharts from "./components/rateCharts.vue";
|
||
import NumberScroll from "./components/numberScroll.vue";
|
||
import Tabbar from "../../components/tabbar/tabbar.vue";
|
||
import { timestampToTimeMonth } from "../../util/dateTime";
|
||
export default {
|
||
data() {
|
||
const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1) // 有数据的最近日期 即昨天
|
||
const nowDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD') // 有数据的最近日期 即昨天
|
||
return {
|
||
menu: {},// 拿到微信胶囊按钮的一些定位数据
|
||
startDate: "2024-01-01",// 数据开始的时间 用于判断出现几个 滚动框
|
||
lastDay: lastDay,
|
||
nowDay: nowDay,
|
||
monthList: [], // 当前的月份列表数据
|
||
selectIndex: 0,// 当前选中的月份
|
||
topShowData: {},// 顶部显示的类型
|
||
moneyRateList: [],// 顶部的圆环图的数据
|
||
profitSharingList: [],// 顶部圆环图右边的数据
|
||
howDay: "", // 星期几
|
||
currentMoney: "",// 实时营收
|
||
page: "/pages/index/index",
|
||
otherRealData: [],// 其他的实时数据
|
||
single: ""
|
||
}
|
||
},
|
||
components: {
|
||
RateCharts,
|
||
NumberScroll,
|
||
Tabbar,
|
||
},
|
||
async onLoad() {
|
||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||
|
||
uni.getLocation({
|
||
type: "gcj02",
|
||
altitude: true,
|
||
success: (res) => {
|
||
let seatInfo = {
|
||
latitude: res.latitude,
|
||
longitude: res.longitude,
|
||
};
|
||
uni.setStorageSync("seatInfo", JSON.stringify(seatInfo));
|
||
},
|
||
fail: (err) => {
|
||
},
|
||
});
|
||
|
||
this.single = timestampToTimeMonth(new Date(this.lastDay).getTime());
|
||
console.log('this.singlethis.singlethis.single', this.single);
|
||
|
||
// 拿到首页的一些基本信息
|
||
this.handleGetIndexInfo()
|
||
|
||
// 拿到顶部轮播框的数据
|
||
await this.handleGetTopData()
|
||
|
||
// 实时营收
|
||
this.handleRealRevenue()
|
||
// 云南的实时内容 油品、加水、尿素、充电
|
||
this.handleGetYNRealData()
|
||
|
||
},
|
||
onShow() {
|
||
// 隐藏掉小程序本身自带的 tabbar 让自定义的tabbar出现
|
||
uni.hideTabBar();
|
||
},
|
||
methods: {
|
||
goToRobot() {
|
||
this.$util.toNextRoute("navigateTo", `/pages/robot/index`);
|
||
// this.$util.toNextRoute("navigateTo", `/pages/testPage/index`);
|
||
},
|
||
// 跳转到经营报表
|
||
handleGoOperate() {
|
||
this.$util.toNextRoute(
|
||
"navigateTo",
|
||
`/pages/operatingStatements/index?time=${this.single}`
|
||
);
|
||
},
|
||
handlePage() {
|
||
|
||
this.$util.toNextRoute(
|
||
"navigateTo",
|
||
`/pages/everdayRenven/index?time=${this.lastDay}&GroupType=1000&ProvinceCode=530000&ServerpartIds=`
|
||
);
|
||
},
|
||
handleGoMap() {
|
||
this.$util.toNextRoute("navigateTo", "/pages/map/index?type=index");
|
||
},
|
||
// 拿到云南 油水电等数据
|
||
async handleGetYNRealData() {
|
||
let req = {
|
||
serverPartId: ""
|
||
}
|
||
const res = await request.$webJava("partner/today/data/statistics", req)
|
||
console.log('handleGetYNRealDatahandleGetYNRealDatahandleGetYNRealData', res);
|
||
let list = res.Result_Data
|
||
let result = []
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
if (item.dataType === 2000) {
|
||
result.push({
|
||
label: `今日油品`,
|
||
value: this.$util.fmoney(item.totalCount),
|
||
unit: item.totalCountUnit,
|
||
icon: "http://saas.eshangtech.com/cyy_DIB/oilIcon.png"
|
||
})
|
||
} else if (item.dataType === 3000) {
|
||
result.push({
|
||
label: `今日加水`,
|
||
value: this.$util.fmoney(item.totalCount),
|
||
unit: item.totalCountUnit,
|
||
icon: "http://saas.eshangtech.com/cyy_DIB/addWaterIcon.png"
|
||
})
|
||
} else if (item.dataType === 4000) {
|
||
result.push({
|
||
label: `今日尿素`,
|
||
value: this.$util.fmoney(item.totalCount),
|
||
unit: item.totalCountUnit,
|
||
icon: "http://saas.eshangtech.com/cyy_DIB/ureaIcon.png"
|
||
})
|
||
} else if (item.dataType === 5000) {
|
||
result.push({
|
||
label: `今日充电`,
|
||
value: this.$util.fmoney(item.totalTicket),
|
||
unit: item.totalTicketUnit,
|
||
icon: "http://saas.eshangtech.com/cyy_DIB/chargeIcon.png"
|
||
})
|
||
}
|
||
})
|
||
}
|
||
this.otherRealData = result
|
||
},
|
||
// 切换轮播框的方法
|
||
async handleChangeSwiper(e) {
|
||
console.log('e', e);
|
||
await this.handleGetTopData(e.target.current)
|
||
this.selectIndex = e.target.current
|
||
},
|
||
// 实时营收
|
||
async handleRealRevenue() {
|
||
let req = {
|
||
pushProvinceCode: "530000",
|
||
StatisticsDate: this.nowDay,
|
||
};
|
||
const res = await request.$webGet("CommercialApi/Revenue/GetCurRevenue", req)
|
||
this.currentMoney = res.Result_Data.CurRevenueAmount.toFixed(2);
|
||
console.log('this.currentMoneythis.currentMoneythis.currentMoney', this.currentMoney);
|
||
|
||
},
|
||
// 拿到顶部轮播框的数据
|
||
async handleGetTopData(index) {
|
||
let nowMonth = index ? this.monthList[index] : this.monthList[this.selectIndex]
|
||
|
||
const req = {
|
||
pushProvinceCode: "530000",
|
||
StatisticsMonth: nowMonth.realFull,
|
||
StatisticsDate: this.lastDay
|
||
}
|
||
const data = await request.$webGet("CommercialApi/Revenue/GetSummaryRevenueMonth", req)
|
||
|
||
// 保留接口返回 完全不处理的
|
||
let dataObj = data.Result_Data
|
||
// 深拷贝一份 用于处理数据
|
||
let resObj = JSON.parse(JSON.stringify(data.Result_Data))
|
||
console.log('dataObjdataObjdataObj', dataObj);
|
||
// 拿到月度对客营收
|
||
resObj.MonthRevenueModel.CashPayChange = this.$util.fmoney(this.$util.getMoney(resObj.MonthRevenueModel.CashPay / 10000), 2);
|
||
// 拿到月度对客营收的同比增长
|
||
let addNumber = resObj.MonthRevenueModel.RevenueYOY ? Number((((resObj.MonthRevenueModel.CashPay - resObj.MonthRevenueModel.RevenueYOY) / resObj.MonthRevenueModel.RevenueYOY) * 100).toFixed(2)) : 0;
|
||
resObj.MonthRevenueModel.add = addNumber === 0 ? '' : addNumber > 0 ? "+" + addNumber : addNumber
|
||
resObj.MonthRevenueModel.addNumber = addNumber
|
||
// 拿到年度的对客营收
|
||
resObj.MonthRevenueModel.YearRevenueAddNumber = resObj.MonthRevenueModel.YearRevenueAmount - resObj.MonthRevenueModel.YearRevenueYOY;
|
||
resObj.MonthRevenueModel.YearRevenueAdd = resObj.MonthRevenueModel.YearRevenueYOY ? (((resObj.MonthRevenueModel.YearRevenueAmount - resObj.MonthRevenueModel.YearRevenueYOY) / resObj.MonthRevenueModel.YearRevenueYOY) * 100).toFixed(2) : 0;
|
||
|
||
// 顶部的 自营、外包 的数据
|
||
let shareList = [{}, {}];
|
||
resObj.BusinessTypeList.forEach((item) => {
|
||
// 同比
|
||
if (item.data) {
|
||
let number = ((item.value - item.data) / item.data) * 100;
|
||
if (number > 0) {
|
||
item.add = "+" + number.toFixed(2);
|
||
} else if (number < 0) {
|
||
item.add = number.toFixed(2);
|
||
} else {
|
||
item.add = null;
|
||
}
|
||
}
|
||
// 环比
|
||
if (item.key) {
|
||
let number = ((item.value - item.key) / item.key) * 100;
|
||
if (number > 0) {
|
||
item.addQOQ = "+" + number.toFixed(2) + "%";
|
||
} else if (number < 0) {
|
||
item.addQOQ = number.toFixed(2) + "%";
|
||
} else {
|
||
item.addQOQ = null;
|
||
}
|
||
}
|
||
// 分润占比
|
||
if (item.name === "自营") {
|
||
shareList[0] = item;
|
||
} else if (item.name === "外包") {
|
||
shareList[1] = item;
|
||
}
|
||
})
|
||
this.moneyRateList = [
|
||
Number(shareList[0].value),
|
||
Number(shareList[1].value)
|
||
];
|
||
this.profitSharingList = shareList
|
||
console.log('profitSharingListprofitSharingListprofitSharingList', this.profitSharingList);
|
||
console.log('moneyRateListmoneyRateListmoneyRateList', this.moneyRateList);
|
||
console.log('resObjresObjresObjresObjresObj', resObj);
|
||
this.topShowData = resObj
|
||
},
|
||
// 拿到首页的一些基本信息
|
||
handleGetIndexInfo() {
|
||
// 拿到现在有多少个轮播框
|
||
let count = this.$util.getMonthDiff(this.startDate, this.lastDay)
|
||
console.log('countcountcountcountcountcount', count);
|
||
this.selectIndex = count
|
||
|
||
let monthList = this.$util.generateMonthList(this.startDate, count + 1)
|
||
console.log('monthListmonthListmonthList', monthList);
|
||
|
||
this.monthList = monthList
|
||
|
||
const nowDate = new Date(this.nowDay);
|
||
let holiday = nowDate.getDay();
|
||
this.howDay = [
|
||
"星期日",
|
||
"星期一",
|
||
"星期二",
|
||
"星期三",
|
||
"星期四",
|
||
"星期五",
|
||
"星期六",
|
||
][holiday];
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style scoped lang="scss">
|
||
.main {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-image: url("https://saas.eshangtech.com/minTestImg/pageBg.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
|
||
.topBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 99;
|
||
background-image: url("https://saas.eshangtech.com/minTestImg/pageBg.png");
|
||
|
||
.topContent {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.topLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.YDIcon {
|
||
width: 176rpx;
|
||
height: 48rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
|
||
.topRight {
|
||
width: 310rpx;
|
||
height: 72rpx;
|
||
background: #f6f8fa;
|
||
border-radius: 36rpx;
|
||
margin-left: 16rpx;
|
||
box-sizing: border-box;
|
||
padding: 16rpx 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.searchIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.searchText {
|
||
font-family: 'PingFangSC';
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #9fa1aa;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.monthListBox {
|
||
width: 100%;
|
||
// height: 600rpx;
|
||
height: 460rpx;
|
||
|
||
.swiperBox {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.swiperItem {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.swiperItemContent {
|
||
height: 100%;
|
||
padding: 0 10rpx; // 中间间距一半（两边相加=20rpx）
|
||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, .06);
|
||
|
||
.swiperItemContentBox {
|
||
height: 100%;
|
||
background: linear-gradient(180deg, #F0E4ED 0%, #F0E8F1 18%, #FFFFFF 100%);
|
||
border-radius: 32rpx;
|
||
border: 4rpx solid #fff;
|
||
box-sizing: border-box;
|
||
padding: 20rpx 28rpx;
|
||
|
||
.swiperItemContentMonth {
|
||
font-family: 'PingFangSC';
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
.swiperItemContentUnit {
|
||
font-family: 'PingFangSC';
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #A69E9F;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
|
||
.swiperItemContentMonthRevenueBox {
|
||
width: 100%;
|
||
margin-top: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.leftRevenueValue {
|
||
font-family: 'DINAlternate';
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.rightRevenueValue {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.addValue {
|
||
font-family: 'DINAlternate';
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.rightNav {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #A69E9F;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.monthRevenueBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
margin-top: 16rpx;
|
||
height: 144rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.leftBox {
|
||
width: 144rpx;
|
||
height: 144rpx;
|
||
margin-right: 16rpx;
|
||
position: relative;
|
||
|
||
.rateChartsBox {
|
||
width: 144rpx;
|
||
height: 144rpx;
|
||
}
|
||
|
||
.haveNoticeBox {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
transform: translateY(80%);
|
||
display: inline-block;
|
||
padding: 5px 10px;
|
||
background: #fff;
|
||
border-radius: 10rpx;
|
||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||
z-index: 9;
|
||
|
||
.field {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.label {
|
||
width: 140rpx;
|
||
text-align: left;
|
||
}
|
||
|
||
.value {
|
||
width: 100rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.newRightBox {
|
||
// height: 100%;
|
||
flex: 1;
|
||
|
||
.newRightItem {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 8rpx 0;
|
||
|
||
.itemLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 33%;
|
||
|
||
.itemIcon {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
margin-right: 12rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.itemName {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
width: 120rpx;
|
||
}
|
||
}
|
||
|
||
.itemCenter {
|
||
display: inline-block;
|
||
width: 33%;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
}
|
||
|
||
.itemRight {
|
||
display: inline-block;
|
||
width: 33%;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #e83944;
|
||
line-height: 40rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.yearAccountItem {
|
||
width: 100%;
|
||
//background: #F9FAFC;
|
||
box-sizing: border-box;
|
||
margin-top: 48rpx;
|
||
|
||
.itemTop {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 8rpx;
|
||
|
||
.itemType {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
line-height: 24rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding: 4rpx 8rpx;
|
||
background: #f2792e;
|
||
border-radius: 4rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.itemName {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
.unit {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #9a9a9a;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.itemBottom {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.revenueNum {
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #160002;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.revenueAdd {
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #e83944;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
.revenueAddNotice {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.swiperItemContentYear {
|
||
margin-top: 24rpx;
|
||
font-family: 'PingFangSC';
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
.swiperItemContentUnit {
|
||
font-family: 'PingFangSC';
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #A69E9F;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
|
||
.swiperItemContentYearRevenueBox {
|
||
width: 100%;
|
||
margin-top: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.leftRevenueValue {
|
||
font-family: 'DINAlternate';
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.rightRevenueValue {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.addValue {
|
||
font-family: 'DINAlternate';
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.rightNav {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #A69E9F;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.swiperItemContent.is-first {
|
||
padding-left: 20rpx; // 左边额外+10rpx，让边距=40rpx
|
||
}
|
||
|
||
.swiperItemContent.is-last {
|
||
// padding-right: 20rpx; // 右边额外+10rpx，让边距=40rpx
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.instantRevenue {
|
||
width: calc(100% - 80rpx);
|
||
// height: 104px;
|
||
box-sizing: border-box;
|
||
padding: 2rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
margin-left: 40rpx;
|
||
margin-bottom: 24rpx;
|
||
|
||
.revenue {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
background: linear-gradient(180deg, #F0E4ED 0%, #F0E8F1 18%, #FFFFFF 100%);
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.revenueTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.revenyeTopLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.monthIcon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.dateText {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
color: #fc2e20;
|
||
line-height: 40rpx;
|
||
margin: 0 8rpx;
|
||
}
|
||
|
||
.day {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.revenyeTopRight {
|
||
width: 100px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
|
||
.right {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.revenueMoney {
|
||
height: 52rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 24rpx;
|
||
|
||
.moneyText {
|
||
font-size: 44rpx;
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
color: #160002;
|
||
line-height: 52rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.moneyLabel {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.otherRealDataBox {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.revenueMoneyItem {
|
||
width: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.revenueMoneyItemLeft {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 50%;
|
||
// border: 1px solid #9FA6A3;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 16rpx;
|
||
background: linear-gradient(180deg, #DCE6FF 0%, #EEF3FF 100%);
|
||
|
||
.leftIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.revenueMoneyItemRight {
|
||
width: calc(100% - 86rpx);
|
||
|
||
.moneyLabel {
|
||
font-size: 30rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 30rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.moneyText {
|
||
font-size: 32rpx;
|
||
font-family: 'DINAlternate';
|
||
font-weight: bold;
|
||
color: #160002;
|
||
line-height: 32rpx;
|
||
margin-right: 8rpx;
|
||
|
||
.moneyUnit {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 30rpx;
|
||
margin-left: 16rpx;
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.revenueOther {
|
||
background: #fff !important;
|
||
}
|
||
}
|
||
|
||
|
||
.funBox {
|
||
width: calc(100% - 64rpx);
|
||
margin-left: 32rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
box-sizing: border-box;
|
||
padding: 32rpx 24rpx;
|
||
display: flex;
|
||
flex-flow: wrap;
|
||
|
||
.funItem {
|
||
width: 25%;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.funItemContent {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.funIconBox {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
//border-radius: 50%;
|
||
overflow: hidden;
|
||
margin-bottom: 16rpx;
|
||
|
||
.funIcon {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.funText {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |