Skip to content

X
xzf_uniapp-wechat-web
Commit 389a02a3 authored by aifen@azjy1.onexmail.com's avatar aifen@azjy1.onexmail.com
Browse files
Options

消费报告

parent b46a69d9
Hide whitespace changes
Inline Side-by-side
Showing with 680 additions and 238 deletions
src/pages.json
View file @ 389a02a3
......@@ -14,7 +14,7 @@
"navigationBarTitleText": "校智付电子校园卡",
"navigationStyle": "custom",
"usingComponents": {
},
"h5": {
"titleNView": "transparent"
......@@ -137,28 +137,7 @@
"enablePullDownRefresh": false
}
}, {
"path": "pages/AccessControlModular/SchoolAttendance/SchoolAttendance",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}, {
"path": "pages/AccessControlModular/StudentAttendance/StudentAttendance",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}, {
"path": "pages/AccessControlModular/TeacherAttendance/TeacherAttendance",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}, {
}, {
"path": "pages/StudentsGraduate/StudentsGraduate",
"style": {
"navigationStyle": "custom",
......
src/pages/ConsumptionReport/ConsumptionReport.vue
View file @ 389a02a3
<template>
<view class="consumption-report-container">
<view class="consumption-report-header">
<view class="consumption-report-header-item">
<van-dropdown-menu active-color="#1989fa" :overlay="isoverlay">
<van-dropdown-item @change="handlerStudentNameChange" :value="studentNameValue"
:options="studentNameOption" />
</van-dropdown-menu>
</view>
<view class="consumption-report-header-item consumption-report-date">
<van-dropdown-menu active-color="#1989fa" :overlay="isoverlay">
<van-dropdown-item :value="dateValue" @change="handlerDateChange" :options="dateOption" />
</van-dropdown-menu>
<view>
<view class="consumption-report-container">
<view class="consumption-report-header">
<view class="consumption-report-header-item">
<view class="consumption-report-info">
<view class="consumption-report-consumer">
<view class="consumer-list">
<picker @change="consumerChange" :value="consumerNameIndex" :range="consumerNameArr">
<view class="uni-input">{{consumerNameArr[consumerNameIndex]}}</view>
</picker>
</view>
</view>
<view class="consumption-report-triangle">
<image class="consumption-report-triangle-img" src="../../static/images/Triangle.png"
mode="">
</image>
</view>
</view>
<view class="consumption-report-info">
<view class="consumption-report-data">
<view class="consumer-list">
<picker @change="dataRangeChange" :value="dataRangeIndex" :range="dataRangeArr">
<view class="uni-input">{{dataRangeArr[dataRangeIndex]}}</view>
</picker>
</view>
</view>
<view class="consumption-report-triangle consumption-report-triangle-location">
<image class="consumption-report-triangle-img" src="../../static/images/Triangle.png"
mode="">
</image>
</view>
</view>
</view>
</view>
</view>
<view class="consumption-report-context">
<view class="consumption-report-card-one">
<view class="consumption-report-card-one-item">
<view class="consumption-total-number">
<view class="consumption-total-number-item">
650.80
<view class="consumption-report-context">
<view class="consumption-report-card-one">
<view class="consumption-report-card-one-item">
<view class="consumption-total-number">
<view class="consumption-total-number-item">
650.80
</view>
<view class="consumption-total-number-trend">
<view class="consumption-total-number-trend-item">
+142.50
</view>
<view
class="consumption-total-number-trend-item consumption-total-number-trend-percent">
20%
</view>
</view>
</view>
<view class="consumption-total-number-trend">
<view class="consumption-total-number-trend-item">
+142.50
<view class="consumption-total-text">
<view class="consumption-total-text-item">
本周消费总金额(元)
</view>
<view class="consumption-total-number-trend-item consumption-total-number-trend-percent">
20%
<view class="consumption-total-text-contrast">
<view class="consumption-total-text-contrast-item">
环比上周
</view>
<view class="consumption-total-text-contrast-img">
<image class="consumption-total-text-trend-img" src="../../static/images/trend.png">
</image>
</view>
</view>
</view>
</view>
<view class="consumption-total-text">
<view class="consumption-total-text-item">
本周消费总金额(元)
<view class="consumption-report-card-one-item">
<view class="no-eatting-total-detail">
<view class="no-eatting-total-detail-item">
<text class="no-eatting-total-detail-item-num">
9
</text>次
</view>
<view class="no-eatting-total-detail-item">
<text class="no-eatting-total-detail-item-num">
5
</text>天
</view>
</view>
<view class="consumption-total-text-contrast">
<view class="consumption-total-text-contrast-item">
环比上周
<view class="no-eatting-total-text">
<view class="no-eatting-total-text-item">
未就餐次数
</view>
<view class="consumption-total-text-contrast-img">
<image class="consumption-total-text-trend-img" src="../../static/images/trend.png">
</image>
<view class="no-eatting-total-text-item">
未就餐次数
</view>
</view>
</view>
</view>
<view class="consumption-report-card-one-item">
<view class="no-eatting-total-detail">
<view class="no-eatting-total-detail-item">
<text class="no-eatting-total-detail-item-num">
9
</text>次
<view class="consumption-report-card-two">
<view class="consumption-report-card-two-title">
<view class="consumption-report-card-two-title-image">
<image class="consumption-report-card-two-title-img"
src="../../static/images/dailyConsumptionTrend.png"></image>
</view>
<view class="no-eatting-total-detail-item">
<text class="no-eatting-total-detail-item-num">
5
</text>天
<view class="consumption-report-card-two-title-text">
日消费趋势
<view class="consumption-report-card-two-title-text-deline">
</view>
</view>
</view>
<view class="no-eatting-total-text">
<view class="no-eatting-total-text-item">
未就餐次数
<view class="average-daily-consumption">
<view class="average-daily-consumption-item">
<text>¥</text>
<text class="average-daily-consumption-item-num">150.20</text>
</view>
<view class="no-eatting-total-text-item">
未就餐次数
<view class="average-daily-consumption-item average-daily-consumption-item-orange">
<text>¥</text>
<text class="average-daily-consumption-item-num">185.25</text>
</view>
</view>
</view>
</view>
<view class="consumption-report-card-two">
<view class="consumption-report-card-two-title">
<view class="consumption-report-card-two-title-image">
<image class="consumption-report-card-two-title-img"
src="../../static/images/dailyConsumptionTrend.png"></image>
</view>
<view class="consumption-report-card-two-title-text">
日消费趋势
<view class="consumption-report-card-two-title-text-deline">
<view class="average-daily-consumption-contrast">
<view class="average-daily-consumption-student">
<view class="average-daily-consumption-student-text">
孩子日均消费
</view>
<view class="average-daily-consumption-student-tag">
V
</view>
</view>
</view>
</view>
<view class="average-daily-consumption">
<view class="average-daily-consumption-item">
<text>¥</text>
<text class="average-daily-consumption-item-num">150.20</text>
</view>
<view class="average-daily-consumption-item average-daily-consumption-item-orange">
<text>¥</text>
<text class="average-daily-consumption-item-num">185.25</text>
</view>
</view>
<view class="average-daily-consumption-contrast">
<view class="average-daily-consumption-student">
<view class="average-daily-consumption-student-text">
孩子日均消费
<view class="average-daily-consumption-class">
<view class="average-daily-consumption-class-tag">
S
</view>
<view class="average-daily-consumption-class-text">
班级日均消费
</view>
</view>
<view class="average-daily-consumption-student-tag">
V
</view>
<view class="average-daily-consumption-chart">
<view class="average-daily-consumption-chart-item-box">
<view v-for="(item,index) in dailyConsumptionData"
class="average-daily-consumption-chart-item">
<view class="average-daily-consumption-chart-item-data" @click="click">
{{item}}
</view>
<view class="average-daily-consumption-chart-item-shape"
:style="{height:shapeSizeArr[index]+'rpx'}">
</view>
<view class="average-daily-consumption-chart-item-date">
{{dailyConsumptionDate[index]}}
</view>
</view>
</view>
</view>
<view class="average-daily-consumption-class">
<view class="average-daily-consumption-class-tag">
S
</view>
<view class="consumption-report-card-three">
<view class="consumption-report-card-three-title">
<view class="consumption-report-card-three-title-image">
<image class="consumption-report-card-three-title-img"
src="../../static/images/consumerPreferences.png"></image>
</view>
<view class="average-daily-consumption-class-text">
班级日均消费
<view class="consumption-report-card-three-title-text">
消费偏好
<view class="consumption-report-card-three-title-text-deline">
</view>
</view>
</view>
</view>
<view class="average-daily-consumption-chart">
<view class="average-daily-consumption-chart-item-box">
<view v-for="(item,index) in dailyConsumptionData" class="average-daily-consumption-chart-item">
<view class="average-daily-consumption-chart-item-data" @click="click">
{{item}}
<view class="consumption-preferences">
<view class="consumption-preferences-list">
<view class="consumption-preferences-list-img">
<image class="consumption-preferences-img" src="../../static/images/canteen.png"
mode="">
</image>
</view>
<view class="average-daily-consumption-chart-item-shape" :style="{height:shapeSizeArr[index]+'rpx'}">
<view class="consumption-preferences-list-item">
<view class="consumption-preferences-list-item-text">
<view class="consumption-preferences-list-item-text-item">
<view class="consumption-preferences-list-item-text-item-title">
食堂消费
</view>
<view class="consumption-preferences-list-item-text-item-percent">
{{percentArr[0]}}
</view>
</view>
<view class="consumption-preferences-list-item-text-cash">
￥{{consumptionPreferencesData[0]}}
</view>
</view>
<view class="consumption-preferences-list-item-proportion">
<view class="consumption-preferences-list-item-proportion-active"
:style="{width:widthArr[0]+'rpx'}">
</view>
</view>
</view>
<view class="average-daily-consumption-chart-item-date">
{{dailyConsumptionDate[index]}}
</view>
<view class="consumption-preferences-list">
<view class="consumption-preferences-list-img">
<image class="consumption-preferences-img" src="../../static/images/supermarket.png"
mode="">
</image>
</view>
<view class="consumption-preferences-list-item">
<view class="consumption-preferences-list-item-text">
<view class="consumption-preferences-list-item-text-item">
<view class="consumption-preferences-list-item-text-item-title">
超市消费
</view>
<view class="consumption-preferences-list-item-text-item-percent">
{{percentArr[1]}}
</view>
</view>
<view class="consumption-preferences-list-item-text-cash">
￥{{consumptionPreferencesData[1]}}
</view>
</view>
<view class="consumption-preferences-list-item-proportion">
<view class="consumption-preferences-list-item-proportion-active"
:style="{width:widthArr[1]+'rpx'}">
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="consumption-report-card-three">
<view class="consumption-report-card-three-title">
<view class="consumption-report-card-three-title-image">
<image class="consumption-report-card-three-title-img"
src="../../static/images/consumerPreferences.png"></image>
</view>
<view class="consumption-report-card-three-title-text">
消费偏好
<view class="consumption-report-card-three-title-text-deline">
<view class="consumption-preferences-list">
<view class="consumption-preferences-list-img">
<image class="consumption-preferences-img" src="../../static/images/other.png" mode="">
</image>
</view>
<view class="consumption-preferences-list-item">
<view class="consumption-preferences-list-item-text">
<view class="consumption-preferences-list-item-text-item">
<view class="consumption-preferences-list-item-text-item-title">
其他消费
</view>
<view class="consumption-preferences-list-item-text-item-percent">
{{percentArr[2]}}
</view>
</view>
<view class="consumption-preferences-list-item-text-cash">
￥{{consumptionPreferencesData[2]}}
</view>
</view>
<view class="consumption-preferences-list-item-proportion">
<view class="consumption-preferences-list-item-proportion-active"
:style="{width:widthArr[2]+'rpx'}">
</view>
</view>
</view>
</view>
</view>
</view>
<view class="consumption-preferences">
<view class="consumption-preferences-list">
<view class="consumption-preferences-list-img">
<image class="consumption-preferences-img" src="" mode=""></image>
<view class="consumption-report-card-four">
<view class="consumption-report-card-four-header">
<view class="consumption-report-card-four-title">
<view class="consumption-report-card-four-title-image">
<image class="consumption-report-card-four-title-img"
src="../../static/images/notEatting.png">
</image>
</view>
<view class="consumption-report-card-four-title-text">
未就餐详情
<view class="consumption-report-card-four-title-text-deline">
</view>
</view>
</view>
<view class="consumption-preferences-list-item">
<view class="noeatting-total">
<view class="noeatting-total-item">
本周
</view>
<view class="noeatting-number">
9次
</view>
<view class="noeatting-total-item">
未就餐
</view>
</view>
</view>
</view>
</view>
<view class="consumption-report-card-four">
<view class="consumption-report-card-four-title">
<view class="consumption-report-card-four-title-image">
<image class="consumption-report-card-four-title-img" src="../../static/images/notEatting.png">
</image>
</view>
<view class="consumption-report-card-four-title-text">
未就餐详情
<view class="consumption-report-card-four-title-text-deline">
<view class="noeatting-details">
<view class="noeatting-details-header">
<view class="noeatting-details-header-item">
日期
</view>
<view class="noeatting-details-header-meal">
<view>早餐</view>
<view>中餐</view>
<view>晚餐</view>
</view>
<view class="noeatting-details-header-item">
未就餐次数
</view>
</view>
<view class="noeatting-details-ul">
<view class="noeatting-details-list">
<view class="noeatting-details-list-item">
12月6日
</view>
<view class="noeatting-details-list-meal">
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img"
src="../../static/images/noeat.png" mode=""></image>
</view>
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img" src="../../static/images/eat.png"
mode=""></image>
</view>
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img"
src="../../static/images/noeat.png" mode=""></image>
</view>
</view>
<view class="noeatting-details-list-item noeatting-details-list-num">
3
</view>
</view>
<view class="noeatting-details-list">
<view class="noeatting-details-list-item">
12月6日
</view>
<view class="noeatting-details-list-meal">
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img"
src="../../static/images/noeat.png" mode=""></image>
</view>
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img" src="../../static/images/eat.png"
mode=""></image>
</view>
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img"
src="../../static/images/noeat.png" mode=""></image>
</view>
</view>
<view class="noeatting-details-list-item noeatting-details-list-num">
3
</view>
</view>
<view class="noeatting-details-list">
<view class="noeatting-details-list-item">
12月6日
</view>
<view class="noeatting-details-list-meal">
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img"
src="../../static/images/noeat.png" mode=""></image>
</view>
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img" src="../../static/images/eat.png"
mode=""></image>
</view>
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img"
src="../../static/images/noeat.png" mode=""></image>
</view>
</view>
<view class="noeatting-details-list-item noeatting-details-list-num">
3
</view>
</view>
<view class="noeatting-details-list">
<view class="noeatting-details-list-item">
12月6日
</view>
<view class="noeatting-details-list-meal">
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img"
src="../../static/images/noeat.png" mode=""></image>
</view>
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img" src="../../static/images/eat.png"
mode=""></image>
</view>
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img"
src="../../static/images/noeat.png" mode=""></image>
</view>
</view>
<view class="noeatting-details-list-item noeatting-details-list-num">
3
</view>
</view>
<view class="noeatting-details-list">
<view class="noeatting-details-list-item">
12月6日
</view>
<view class="noeatting-details-list-meal">
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img"
src="../../static/images/noeat.png" mode=""></image>
</view>
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img" src="../../static/images/eat.png"
mode=""></image>
</view>
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img"
src="../../static/images/noeat.png" mode=""></image>
</view>
</view>
<view class="noeatting-details-list-item noeatting-details-list-num">
3
</view>
</view>
<view class="noeatting-details-list">
<view class="noeatting-details-list-item">
12月6日
</view>
<view class="noeatting-details-list-meal">
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img"
src="../../static/images/noeat.png" mode=""></image>
</view>
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img" src="../../static/images/eat.png"
mode=""></image>
</view>
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img"
src="../../static/images/noeat.png" mode=""></image>
</view>
</view>
<view class="noeatting-details-list-item noeatting-details-list-num">
3
</view>
</view>
<view class="noeatting-details-list">
<view class="noeatting-details-list-item">
12月6日
</view>
<view class="noeatting-details-list-meal">
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img"
src="../../static/images/noeat.png" mode=""></image>
</view>
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img" src="../../static/images/eat.png"
mode=""></image>
</view>
<view class="noeatting-details-list-meal-item">
<image class="noeatting-details-list-meal-img"
src="../../static/images/noeat.png" mode=""></image>
</view>
</view>
<view class="noeatting-details-list-item noeatting-details-list-num">
3
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
var gHost = "http://" + window.location.host;
if (window.location.protocol != "https:") {
gHost = "http://dev-az-order-api.xiaopay.net";
}
export default {
name: 'ConsumptionReport',
data() {
return {
isoverlay: false,
studentNameValue: 0,
dateValue: 'a',
studentNameOption: [{
text: '宁哲桂',
value: 0
},
{
text: '张三',
value: 1
},
{
text: '李四',
value: 2
},
],
dateOption: [{
text: '12月06日~12月12日',
value: 'a'
},
{
text: '11月29日~12月05日',
value: 'b'
},
{
text: '11月22日~11月28日',
value: 'c'
},
],
consumerNameIndex: 0,
dataRangeIndex: 0,
consumerNameArr: ['宁哲桂'], // 学生姓名列表
// 日期范围列表
dataRangeArr: ['12月06日~12月12日', '11月29日~12月05日', '11月22日~11月28日'],
// 日消费趋势图表数据
dailyConsumptionData: [83.67, 220.89, 66.02, 108.12, 70.30, 83.50, 315.45],
dailyConsumptionDate: ['12/06', '12/07', '12/08', '12/09', '12/10', '12/11', '12/12']
dailyConsumptionDate: ['12/06', '12/07', '12/08', '12/09', '12/10', '12/11', '12/12'],
// 消费偏好数据
consumptionPreferencesData: [372.81, 145.05, 108.34],
}
},
computed: {
shapeSizeArr() {
return this.dailyConsumptionData.map(data => data/Math.max(...this.dailyConsumptionData)*266)
return this.dailyConsumptionData.map(data => data / Math.max(...this.dailyConsumptionData) * 266)
},
percentArr() {
var consumptionPreferencesTotal = this.consumptionPreferencesData.reduce((preValue, curValue) => preValue +
curValue)
return this.consumptionPreferencesData.map(data => (Math.round(data / consumptionPreferencesTotal *
10000) / 100).toFixed(1) + '%')
},
widthArr() {
var consumptionPreferencesTotal = this.consumptionPreferencesData.reduce((preValue, curValue) => preValue +
curValue)
return this.consumptionPreferencesData.map(data => (Math.round(data / consumptionPreferencesTotal *
10000) / 100).toFixed(1) / 100 * 472)
}
},
mounted() {
this.queryPatriarchByStudent()
},
methods: {
handlerStudentNameChange(value) {
this.studentNameValue = value
consumerChange(e) {
this.consumerNameIndex = e.target.value
},
dataRangeChange(e) {
this.dataRangeIndex = e.target.value
},
handlerDateChange(value) {
this.dateValue = value
// 查询家长关联的学生
async queryPatriarchByStudent() {
let this_=this
return new Promise((resolve, reject) => {
$.ajax({
url: gHost + '/report-push/student-consumer-report/queryPatriarchByStudent',
type: 'get',
dataType: 'json',
contentType: 'application/x-www-form-urlencoded',
data: {
phone:'18942508364'
},
success: function(res) {
if(res.code==200){
console.log(res)
// this_.consumerNameArr=res.obj.name
}
},
error: function(error) {
reject(error)
}
})
}).catch(e=>{})
}
}
}
......@@ -234,42 +540,41 @@
height: 330rpx;
width: 100%;
background: url(../../static/images/headerbgm.png) no-repeat;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding-top: 54rpx;
.consumption-report-header-item {
width: 200rpx;
line-height: 48rpx;
height: 48rpx;
padding: 0 41rpx;
display: flex;
justify-content: space-between;
/deep/ .van-dropdown-menu__item {
.consumption-report-info {
display: flex;
justify-content: flex-start;
align-items: center;
}
/deep/ .van-dropdown-menu__title {
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
padding: 0 16rpx 0 0;
}
.consumption-report-consumer {
font-size: 34rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
/deep/ .van-dropdown-menu__bar {
background: rgb(18, 201, 174);
}
.consumption-report-triangle {
width: 31rpx;
height: 15rpx;
margin-left: 12rpx;
/deep/ .van-dropdown-item__content {
position: absolute;
}
.consumption-report-triangle-img {
max-width: 100%;
max-height: 100%;
}
&.consumption-report-date {
width: 280rpx;
&.consumption-report-triangle-location {
margin-top: -5rpx;
}
}
/deep/ .van-dropdown-menu__title {
font-size: 24rpx;
.consumption-report-data {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
......@@ -569,7 +874,7 @@
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
display: flex;
flex-direction:column-reverse;
flex-direction: column-reverse;
}
.average-daily-consumption-chart-item-shape {
......@@ -602,7 +907,7 @@
.consumption-report-card-three-title {
height: 60rpx;
margin: 21rpx 0 0;
margin: 21rpx 0 35rpx;
box-sizing: border-box;
display: flex;
align-items: center;
......@@ -635,21 +940,77 @@
}
}
}
.consumption-preferences{
.consumption-preferences-list{
.consumption-preferences {
display: flex;
justify-content: space-between;
flex-direction: column;
height: 295rpx;
.consumption-preferences-list {
display: flex;
justify-content: space-between;
.consumption-preferences-list-img{
.consumption-preferences-list-img {
width: 100rpx;
height: 74rpx;
.consumption-preferences-img{
.consumption-preferences-img {
max-width: 100%;
max-height: 100%;
}
}
.consumption-preferences-list-item{
.consumption-preferences-list-item {
display: flex;
justify-content: space-between;
flex-direction: column;
.consumption-preferences-list-item-text {
display: flex;
justify-content: space-between;
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 40rpx;
.consumption-preferences-list-item-text-item {
display: flex;
.consumption-preferences-list-item-text-item-title {
color: #343434;
margin-right: 8rpx;
}
.consumption-preferences-list-item-text-item-percent {
color: #999999;
}
}
.consumption-preferences-list-item-text-cash {
font-weight: 500;
color: #333333;
}
}
.consumption-preferences-list-item-proportion {
width: 472rpx;
height: 12rpx;
background: #F5F5F5;
border-radius: 6rpx;
position: relative;
.consumption-preferences-list-item-proportion-active {
height: 12rpx;
background: #13D088;
border-radius: 6rpx;
position: absolute;
left: 0;
top: 0;
}
}
}
}
}
......@@ -657,47 +1018,149 @@
.consumption-report-card-four {
width: 710rpx;
height: 730rpx;
background: #FFFFFF;
border-radius: 24rpx;
position: absolute;
top: 1632rpx;
padding: 0 32rpx;
padding: 0 32rpx 48rpx;
box-sizing: border-box;
.consumption-report-card-four-title {
.consumption-report-card-four-header {
width: 646rpx;
height: 60rpx;
margin: 21rpx 0 0;
margin: 21rpx 0 50rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
.consumption-report-card-four-title-image {
width: 35rpx;
height: 26rpx;
line-height: 0;
.consumption-report-card-four-title {
display: flex;
align-items: center;
.consumption-report-card-four-title-image {
width: 35rpx;
height: 26rpx;
line-height: 0;
.consumption-report-card-four-title-img {
width: 100%;
height: 100%;
.consumption-report-card-four-title-img {
width: 100%;
height: 100%;
}
}
.consumption-report-card-four-title-text {
margin-left: 16rpx;
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
position: relative;
.consumption-report-card-four-title-text-deline {
width: 152rpx;
height: 11rpx;
background: rgba(38, 169, 106, 0.24);
border-radius: 6rpx;
position: absolute;
top: 30rpx;
}
}
}
.consumption-report-card-four-title-text {
margin-left: 16rpx;
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
position: relative;
.noeatting-total {
width: 215rpx;
display: flex;
justify-content: space-between;
.consumption-report-card-four-title-text-deline {
width: 152rpx;
height: 11rpx;
background: rgba(38, 169, 106, 0.24);
border-radius: 6rpx;
position: absolute;
top: 30rpx;
.noeatting-total-item {
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
line-height: 40rpx;
}
.noeatting-number {
height: 40rpx;
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
line-height: 40rpx;
}
}
}
.noeatting-details {
width: 100%;
.noeatting-details-header {
height: 68rpx;
background: #F8F8F8;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.45);
display: flex;
justify-content: space-between;
.noeatting-details-header-item {
display: flex;
justify-content: center;
align-items: center;
width: 33%;
}
.noeatting-details-header-meal {
display: flex;
justify-content: space-between;
align-items: center;
width: 34%;
}
}
.noeatting-details-ul {
width: 100%;
.noeatting-details-list {
height: 96rpx;
background: #FFFFFF;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #DDDDDD;
.noeatting-details-list-item {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
width: 33%;
display: flex;
justify-content: center;
&.noeatting-details-list-num {
font-size: 32rpx;
}
}
.noeatting-details-list-meal {
width: 34%;
display: flex;
justify-content: space-between;
.noeatting-details-list-meal-item {
width: 50rpx;
height: 40rpx;
.noeatting-details-list-meal-img {
max-width: 100%;
max-height: 100%;
}
}
}
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment