Skip to content

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

校园报告样式修改1

parent e8d7bd6d
Hide whitespace changes
Inline Side-by-side
Showing with 277 additions and 178 deletions
src/pages/SchoolReport/SchoolReport.vue
View file @ cf63af5f
<template> <template>
<view class="tainer" :style="{height:containerHeight+'rpx'}"> <view class="tainer" :style="{height:containerHeight+'rpx'}">
<view v-if="showReport"> <view v-if="showReport">
<view class="school-report-header"> <view class="school-report-header-bg">
<view class="school-report-header-item"> </view>
<view class="user-avatar"> <view class="school-report-header-position">
</view> <view class="school-report-header">
<view class="user-info"> <view class="school-report-header-item">
<view class="user-name"> <view class="user-avatar">
<text>{{userInfo.userName}}</text>
</view>
<view class="class-name">
<text>{{userInfo.gradeName}} {{userInfo.className}}</text>
</view> </view>
</view> <view class="user-info">
</view> <view class="user-name">
<view class="school-report-header-item"> <text>{{userInfo.userName}}</text>
<view class="school-report-screen">
<view class="school-report-screen-item">
<view class="school-report-type">
<picker @change="schoolReportChange" :value="reportTypeIndex" :range="reportTypeArr">
<view class="uni-input">{{reportTypeArr[reportTypeIndex]}}</view>
</picker>
</view> </view>
<view class="triangle"> <view class="class-name">
<text>{{userInfo.gradeName}} {{userInfo.className}}</text>
</view> </view>
</view> </view>
<view class="school-report-screen-item-two"> </view>
<view class="school-report-date"> <view class="school-report-header-item">
<picker @change="dataRangeChange" :value="dataRangeIndex" :range="dataRangeArr" <view class="school-report-screen">
range-key="week"> <view class="school-report-screen-item">
<view class="uni-input">{{dataRangeArr[dataRangeIndex].weekstr||""}}</view> <view class="school-report-type">
</picker> <picker @change="schoolReportChange" :value="reportTypeIndex"
:range="reportTypeArr">
<view class="uni-input">{{reportTypeArr[reportTypeIndex]}}</view>
</picker>
</view>
<view class="triangle">
</view>
</view> </view>
<view class="triangle"> <view class="school-report-screen-item-two">
<view class="school-report-date">
<picker @change="dataRangeChange" :value="dataRangeIndex" :range="dataRangeArr"
range-key="week">
<view class="uni-input">{{dataRangeArr[dataRangeIndex].weekstr||""}}</view>
</picker>
</view>
<view class="triangle">
</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view>
<view class="school-report-context">
<view class="school-report-context-tab"> <view class="school-report-context-tab">
<view class="school-report-context-tab-item"> <view class="school-report-context-tab-item">
<view v-if="isService" class="school-report-context-tab-item-one" <view v-if="isService" class="school-report-context-tab-item-one"
...@@ -64,6 +67,8 @@ ...@@ -64,6 +67,8 @@
</view> </view>
</view> </view>
</view> </view>
</view>
<view class="school-report-context">
<view :class="['consumer-report-bgImg','attendance-report-bgImg','pubTalk-report-bgImg'][tabIndex-1]"> <view :class="['consumer-report-bgImg','attendance-report-bgImg','pubTalk-report-bgImg'][tabIndex-1]">
</view> </view>
<view class="school-report-context-card"> <view class="school-report-context-card">
...@@ -576,66 +581,110 @@ ...@@ -576,66 +581,110 @@
</view> </view>
</view> </view>
<view class="open-results"> <view class="open-results">
<view class="open-results-title"> <!-- 消费报告 -->
<view v-if="tabIndex==1" class="open-results-title consume-open-results-title">
<text>开通后，掌握消费动态、更省心</text>
</view>
<view v-else class="open-results-title">
<text>开通后，你将解锁</text> <text>开通后，你将解锁</text>
</view> </view>
<view class="open-results-items"> <view class="open-results-items" :class="tabIndex==1?'consume-open-results-items':''">
<view class="open-results-items-summary"> <view v-if="tabIndex==2||tabIndex==3" class="open-results-items-summary">
<view class="summary-item"> <view class="summary-item">
<text>{{['月度消费报告','实时推送','音视频通话'][tabIndex-1]}}</text> <text>{{['实时推送','音视频通话'][tabIndex-2]}}</text>
</view> </view>
<view class="summary-item-icon" <view class="summary-item-icon"
:class="['consumer-report-icon','attendance-report-icon','pubTalk-report-icon'][tabIndex-1]"> :class="['attendance-report-icon','pubTalk-report-icon'][tabIndex-2]">
<text>+</text> <text>+</text>
</view> </view>
<view class="summary-item"> <view class="summary-item">
<text>{{['消费总结','月度出入校报告','月度公话报告'][tabIndex-1]}}</text> <text>{{['月度出入校报告','月度公话报告'][tabIndex-2]}}</text>
</view> </view>
</view> </view>
<view class="open-results-items-details"> <!-- 消费报告 -->
<!-- 消费报告 --> <view v-if="tabIndex==1" class="consume-open-results-items-details">
<view v-if="tabIndex==1"> <view class="consume-open-results-items-details-item">
<view class="open-results-items-details-item"> <view class="details-item-left">
<view class="dining-situations-img"> <view class="details-item-up">
<text>孩子是否缺餐？</text>
</view> </view>
<view class="open-results-items-details-item-txt"> <view class="details-item-down">
<text>就餐情况分析</text> <view class="dining-situations-img">
</view>
<view class="details-item-down-txt">
<text>【就餐情况】告诉你</text>
</view>
</view> </view>
<view class="consumer-rationality-img"> </view>
<view class="details-item-left">
<view class="details-item-up">
<text>孩子在校交友了？</text>
</view> </view>
<view class="open-results-items-details-item-txt"> <view class="details-item-down">
<text>消费合理性</text> <view class="meal-pal-img">
</view>
<view class="details-item-down-txt">
<text>【饭友分析】告诉你</text>
</view>
</view> </view>
</view> </view>
<view class="open-results-items-details-item"> </view>
<view class="consumer-preference-img"> <view class="consume-open-results-items-details-item">
<view class="details-item-left">
<view class="details-item-up">
<text>消费偏高还是偏低？</text>
</view> </view>
<view class="open-results-items-details-item-txt"> <view class="details-item-down">
<text>消费偏好分析</text> <view class="consumer-num-img">
</view>
<view class="details-item-down-txt">
<text>【生活费额度】直观看</text>
</view>
</view> </view>
<view class="consumer-advice-img"> </view>
<view class="details-item-left">
<view class="details-item-up">
<text>孩子正餐超市消费多？</text>
</view> </view>
<view class="open-results-items-details-item-txt"> <view class="details-item-down">
<text>消费建议</text> <view class="consumer-preference-img">
</view>
<view class="details-item-down-txt">
<text>【消费偏好】直观看</text>
</view>
</view> </view>
</view> </view>
<view class="open-results-items-details-item"> </view>
<view class="consumer-num-img"> <view class="consume-open-results-items-details-item">
<view class="details-item-left">
<view class="details-item-up">
<text>担心孩子被迫高额消费？</text>
</view> </view>
<view class="open-results-items-details-item-txt"> <view class="details-item-down">
<text>生活费额度分析</text> <view class="consumer-trend-img">
</view>
<view class="details-item-down-txt">
<text>【消费趋势】告诉你</text>
</view>
</view> </view>
</view> </view>
<view class="open-results-items-details-item"> <view class="details-item-left">
<view class="consumer-trend-img"> <view class="details-item-up">
<text>孩子是否准时就餐？</text>
</view> </view>
<view class="open-results-items-details-item-txt"> <view class="details-item-down">
<text>消费趋势分析</text> <view class="time-trends-img">
</view>
<view class="details-item-down-txt">
<text>【就餐时间趋势】告诉你</text>
</view>
</view> </view>
</view> </view>
</view> </view>
</view>
<view v-else class="open-results-items-details">
<!-- 出入校报告 --> <!-- 出入校报告 -->
<view v-else-if="tabIndex==2"> <view v-if="tabIndex==2">
<view class="open-results-items-details-item"> <view class="open-results-items-details-item">
<view class="admission-notice-img"> <view class="admission-notice-img">
</view> </view>
...@@ -728,7 +777,7 @@ ...@@ -728,7 +777,7 @@
<text>当前为使用高峰期，请稍后再试</text> <text>当前为使用高峰期，请稍后再试</text>
</view> </view>
</view> </view>
<van-dialog class="htmlCanvas" id="htmlCanvas" ref="imgCanvas" v-model="dialogShow" confirm-button-text='长按保存' <van-dialog class="htmlCanvas" id="htmlCanvas" ref="imgCanvas" v-model="dialogShow" :showConfirmButton="false"
close-on-click-overlay style="width: 100%; max-height: 80% !important;overflow: scroll"> close-on-click-overlay style="width: 100%; max-height: 80% !important;overflow: scroll">
</van-dialog> </van-dialog>
</view> </view>
...@@ -2195,102 +2244,117 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`, ...@@ -2195,102 +2244,117 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
} }
.tainer { .tainer {
.school-report-header { position: relative;
height: 88rpx;
margin: 72rpx 0 48rpx 40rpx;
display: flex;
justify-content: space-between;
.school-report-header-item { .school-report-header-bg {
display: flex; height: 292rpx;
}
.user-avatar { .school-report-header-position {
width: 88rpx; height: 292rpx;
height: 88rpx; padding: 72rpx 0 0 30rpx;
background: no-repeat center/100% url(../../static/images/avatar.png); box-sizing: border-box;
} position: fixed;
top: 0;
left: 0;
background: #FFFFFF;
z-index: 1000;
.school-report-header {
height: 88rpx;
display: flex;
justify-content: space-between;
position: relative;
margin: 0 0 48rpx;
.user-info { .school-report-header-item {
display: flex; display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 9rpx;
.user-name { .user-avatar {
width: 200rpx; width: 88rpx;
font-size: 34rpx; height: 88rpx;
font-family: PingFangSC-Medium, PingFang SC; background: no-repeat center/100% url(../../static/images/avatar.png);
font-weight: 500;
color: #1B1B1B;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.class-name {
width: 200rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.25);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
}
.school-report-screen { .user-info {
display: flex;
.school-report-screen-item {
width: 156rpx;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center; justify-content: space-between;
margin-left: 9rpx;
.school-report-type { .user-name {
font-size: 28rpx; width: 200rpx;
font-size: 34rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #1B1B1B; color: #1B1B1B;
margin-right: 12rpx; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.triangle { .class-name {
width: 21rpx; width: 200rpx;
height: 10rpx; font-size: 28rpx;
background: no-repeat center/100% url(../../static/images/grayTriangle.png); font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.25);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
} }
.school-report-screen-item-two { .school-report-screen {
width: 270rpx;
display: flex; display: flex;
justify-content: center;
align-items: center;
.school-report-date { .school-report-screen-item {
font-size: 28rpx; width: 156rpx;
font-family: PingFangSC-Medium, PingFang SC; display: flex;
font-weight: 500; justify-content: center;
color: #1B1B1B; align-items: center;
margin-right: 17rpx;
.school-report-type {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1B1B1B;
margin-right: 12rpx;
}
.triangle {
width: 21rpx;
height: 10rpx;
background: no-repeat center/100% url(../../static/images/grayTriangle.png);
}
} }
.triangle { .school-report-screen-item-two {
width: 21rpx; width: 270rpx;
height: 10rpx; display: flex;
background: no-repeat center/100% url(../../static/images/grayTriangle.png); justify-content: center;
align-items: center;
.school-report-date {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1B1B1B;
margin-right: 17rpx;
}
.triangle {
width: 21rpx;
height: 10rpx;
background: no-repeat center/100% url(../../static/images/grayTriangle.png);
}
} }
} }
} }
} }
}
.school-report-context {
.school-report-context-tab { .school-report-context-tab {
height: 84rpx; height: 84rpx;
padding-left: 40rpx;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -2304,7 +2368,6 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`, ...@@ -2304,7 +2368,6 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
border-radius: 20rpx 20rpx 0rpx 0rpx; border-radius: 20rpx 20rpx 0rpx 0rpx;
font-size: 30rpx; font-size: 30rpx;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -2312,6 +2375,7 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`, ...@@ -2312,6 +2375,7 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
&.active { &.active {
background: #E4F9F2; background: #E4F9F2;
font-weight: 600;
} }
} }
} }
...@@ -2345,7 +2409,9 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`, ...@@ -2345,7 +2409,9 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
} }
} }
} }
}
.school-report-context {
.consumer-report-bgImg { .consumer-report-bgImg {
width: 100%; width: 100%;
height: 452rpx; height: 452rpx;
...@@ -2388,7 +2454,7 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`, ...@@ -2388,7 +2454,7 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
background: #E5F8F1; background: #E5F8F1;
padding: 0 30rpx; padding: 0 30rpx;
position: absolute; position: absolute;
top: 650rpx; top: 720rpx;
box-sizing: border-box; box-sizing: border-box;
.school-report-context-card-one { .school-report-context-card-one {
...@@ -3509,6 +3575,10 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`, ...@@ -3509,6 +3575,10 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
&.consume-open-results-title {
background: url(../../static/images/consumeOpenbgm.png) center/100% no-repeat;
}
} }
.open-results-items { .open-results-items {
...@@ -3519,6 +3589,12 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`, ...@@ -3519,6 +3589,12 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
padding: 32rpx 0 43rpx 73rpx; padding: 32rpx 0 43rpx 73rpx;
box-sizing: border-box; box-sizing: border-box;
&.consume-open-results-items {
padding: 44rpx 0 0 34rpx;
box-sizing: border-box;
height: 473rpx;
}
.open-results-items-summary { .open-results-items-summary {
width: 100%; width: 100%;
height: 45rpx; height: 45rpx;
...@@ -3538,10 +3614,6 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`, ...@@ -3538,10 +3614,6 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
line-height: 45rpx; line-height: 45rpx;
} }
.consumer-report-icon {
margin: 0 45rpx 0 70rpx;
}
.attendance-report-icon { .attendance-report-icon {
margin: 0 35rpx 0 134rpx; margin: 0 35rpx 0 134rpx;
} }
...@@ -3551,6 +3623,75 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`, ...@@ -3551,6 +3623,75 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
} }
} }
.consume-open-results-items-details {
.consume-open-results-items-details-item {
display: flex;
height: 80rpx;
margin: 0 0 55rpx;
.details-item-left {
width: 313rpx;
.details-item-up {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #13664C;
line-height: 40rpx;
}
.details-item-down {
display: flex;
align-items: center;
.details-item-down-txt {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(19, 102, 76, 0.7);
line-height: 33rpx;
}
.dining-situations-img {
width: 26rpx;
height: 21rpx;
background: no-repeat center/100% url(../../static/images/repast.png);
}
.meal-pal-img {
width: 26rpx;
height: 22rpx;
background: no-repeat center/100% url(../../static/images/mealPal.png);
}
.consumer-num-img {
width: 22rpx;
height: 25rpx;
background: no-repeat center/100% url(../../static/images/consumerNum.png);
}
.consumer-preference-img {
width: 25rpx;
height: 23rpx;
background: no-repeat center/100% url(../../static/images/consumerPreference.png);
}
.consumer-trend-img {
width: 24rpx;
height: 21rpx;
background: no-repeat center/100% url(../../static/images/consumerTrend.png);
}
.time-trends-img {
width: 25rpx;
height: 25rpx;
background: no-repeat center/100% url(../../static/images/timeTrends.png);
}
}
}
}
}
.open-results-items-details { .open-results-items-details {
.open-results-items-details-item { .open-results-items-details-item {
width: 100%; width: 100%;
...@@ -3567,48 +3708,6 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`, ...@@ -3567,48 +3708,6 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
line-height: 40rpx; line-height: 40rpx;
} }
.dining-situations-img {
width: 34rpx;
height: 27rpx;
background: no-repeat center/100% url(../../static/images/repast.png);
margin-right: 22rpx;
}
.consumer-rationality-img {
width: 34rpx;
height: 34rpx;
background: no-repeat center/100% url(../../static/images/consumerRationality.png);
margin: 0 22rpx 0 108rpx;
}
.consumer-preference-img {
width: 30rpx;
height: 27rpx;
background: no-repeat center/100% url(../../static/images/consumerPreference.png);
margin-right: 24rpx;
}
.consumer-advice-img {
width: 31rpx;
height: 31rpx;
background: no-repeat center/100% url(../../static/images/consumerAdvice.png);
margin: 0 24rpx 0 112rpx;
}
.consumer-num-img {
width: 30rpx;
height: 34rpx;
background: no-repeat center/100% url(../../static/images/consumerNum.png);
margin-right: 24rpx;
}
.consumer-trend-img {
width: 28rpx;
height: 25rpx;
background: no-repeat center/100% url(../../static/images/consumerTrend.png);
margin-right: 25rpx;
}
// 出入校报告 // 出入校报告
.admission-notice-img { .admission-notice-img {
width: 30rpx; width: 30rpx;
......
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