Skip to content

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

学生消费报告

parent 092340bb
Hide whitespace changes
Inline Side-by-side
Showing with 156 additions and 5 deletions
src/pages/ConsumptionReport/ConsumptionReport.vue
View file @ b46a69d9
......@@ -86,15 +86,39 @@
</view>
<view class="average-daily-consumption-item average-daily-consumption-item-orange">
<text>¥</text>
<text class="consumption-daily-trend-item-num">185.25</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>
<view class="average-daily-consumption-student-tag">
V
</view>
</view>
<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>
<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>
......@@ -110,6 +134,16 @@
</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>
<view class="consumption-preferences-list-item">
</view>
</view>
</view>
</view>
<view class="consumption-report-card-four">
<view class="consumption-report-card-four-title">
......@@ -163,6 +197,14 @@
value: 'c'
},
],
// 日消费趋势图表数据
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']
}
},
computed: {
shapeSizeArr() {
return this.dailyConsumptionData.map(data => data/Math.max(...this.dailyConsumptionData)*266)
}
},
methods: {
......@@ -177,10 +219,11 @@
</script>
<style lang="scss" scoped>
*{
* {
margin: 0;
padding: 0;
}
.consumption-report-container {
width: 750rpx;
height: 2616rpx;
......@@ -326,6 +369,7 @@
width: 20rpx;
height: 25rpx;
line-height: 0;
.consumption-total-text-trend-img {
width: 100%;
height: 100%;
......@@ -378,6 +422,7 @@
top: 504rpx;
padding: 0 32rpx;
box-sizing: border-box;
.consumption-report-card-two-title {
height: 60rpx;
margin: 21rpx 0 32rpx;
......@@ -442,17 +487,105 @@
.average-daily-consumption-contrast {
display: flex;
height: 49rpx;
margin: 11rpx 0 44rpx;
.average-daily-consumption-student {
flex: 1;
background: #13D088;
border-radius: 25rpx 0rpx 0rpx 25rpx;
display: flex;
justify-content: space-between;
align-items: center;
.average-daily-consumption-student-text {
height: 37rpx;
width: 156rpx;
font-size: 26rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-left: 40rpx;
line-height: 37rpx;
}
.average-daily-consumption-student-tag {
height: 44rpx;
font-size: 40rpx;
font-family: Arial-BoldItalicMT, Arial;
font-weight: normal;
color: #FFFFFF;
line-height: 45rpx;
}
}
.average-daily-consumption-class {
flex: 1;
background: #FAAD15;
border-radius: 0rpx 25rpx 25rpx 0rpx;
display: flex;
justify-content: space-between;
align-items: center;
.average-daily-consumption-class-tag {
height: 44rpx;
font-size: 40rpx;
font-family: Arial-BoldItalicMT, Arial;
font-weight: normal;
color: #FFFFFF;
line-height: 45rpx;
}
.average-daily-consumption-class-text {
height: 37rpx;
width: 156rpx;
font-size: 26rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-right: 40rpx;
line-height: 37rpx;
}
}
}
.average-daily-consumption-chart {
padding: 0 6rpx 38rpx;
.average-daily-consumption-chart-item-box {
display: flex;
justify-content: space-between;
.average-daily-consumption-chart-item {
width: 74rpx;
height: 310rpx;
display: flex;
flex-direction: column;
align-items: center;
.average-daily-consumption-chart-item-data {
flex: 1;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
display: flex;
flex-direction:column-reverse;
}
.average-daily-consumption-chart-item-shape {
margin: 8rpx 0 13rpx 0;
width: 24rpx;
background: #13D088;
border-radius: 16rpx;
}
.average-daily-consumption-chart-item-date {
font-size: 22rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #666666;
}
}
}
}
}
......@@ -466,7 +599,7 @@
top: 1148rpx;
padding: 0 32rpx;
box-sizing: border-box;
.consumption-report-card-three-title {
height: 60rpx;
margin: 21rpx 0 0;
......@@ -502,6 +635,24 @@
}
}
}
.consumption-preferences{
.consumption-preferences-list{
display: flex;
justify-content: space-between;
.consumption-preferences-list-img{
width: 100rpx;
height: 74rpx;
.consumption-preferences-img{
max-width: 100%;
max-height: 100%;
}
}
.consumption-preferences-list-item{
}
}
}
}
.consumption-report-card-four {
......
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