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>
<view class="tainer" :style="{height:containerHeight+'rpx'}">
<view v-if="showReport">
<view class="school-report-header">
<view class="school-report-header-item">
<view class="user-avatar">
</view>
<view class="user-info">
<view class="user-name">
<text>{{userInfo.userName}}</text>
</view>
<view class="class-name">
<text>{{userInfo.gradeName}} {{userInfo.className}}</text>
<view class="school-report-header-bg">
</view>
<view class="school-report-header-position">
<view class="school-report-header">
<view class="school-report-header-item">
<view class="user-avatar">
</view>
</view>
</view>
<view class="school-report-header-item">
<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 class="user-info">
<view class="user-name">
<text>{{userInfo.userName}}</text>
</view>
<view class="triangle">
<view class="class-name">
<text>{{userInfo.gradeName}} {{userInfo.className}}</text>
</view>
</view>
<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="school-report-header-item">
<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 class="triangle">
</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 class="school-report-context">
<view class="school-report-context-tab">
<view class="school-report-context-tab-item">
<view v-if="isService" class="school-report-context-tab-item-one"
......@@ -64,6 +67,8 @@
</view>
</view>
</view>
</view>
<view class="school-report-context">
<view :class="['consumer-report-bgImg','attendance-report-bgImg','pubTalk-report-bgImg'][tabIndex-1]">
</view>
<view class="school-report-context-card">
......@@ -576,66 +581,110 @@
</view>
</view>
<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>
</view>
<view class="open-results-items">
<view class="open-results-items-summary">
<view class="open-results-items" :class="tabIndex==1?'consume-open-results-items':''">
<view v-if="tabIndex==2||tabIndex==3" class="open-results-items-summary">
<view class="summary-item">
<text>{{['月度消费报告','实时推送','音视频通话'][tabIndex-1]}}</text>
<text>{{['实时推送','音视频通话'][tabIndex-2]}}</text>
</view>
<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>
</view>
<view class="summary-item">
<text>{{['消费总结','月度出入校报告','月度公话报告'][tabIndex-1]}}</text>
<text>{{['月度出入校报告','月度公话报告'][tabIndex-2]}}</text>
</view>
</view>
<view class="open-results-items-details">
<!-- 消费报告 -->
<view v-if="tabIndex==1">
<view class="open-results-items-details-item">
<view class="dining-situations-img">
<!-- 消费报告 -->
<view v-if="tabIndex==1" class="consume-open-results-items-details">
<view class="consume-open-results-items-details-item">
<view class="details-item-left">
<view class="details-item-up">
<text>孩子是否缺餐？</text>
</view>
<view class="open-results-items-details-item-txt">
<text>就餐情况分析</text>
<view class="details-item-down">
<view class="dining-situations-img">
</view>
<view class="details-item-down-txt">
<text>【就餐情况】告诉你</text>
</view>
</view>
<view class="consumer-rationality-img">
</view>
<view class="details-item-left">
<view class="details-item-up">
<text>孩子在校交友了？</text>
</view>
<view class="open-results-items-details-item-txt">
<text>消费合理性</text>
<view class="details-item-down">
<view class="meal-pal-img">
</view>
<view class="details-item-down-txt">
<text>【饭友分析】告诉你</text>
</view>
</view>
</view>
<view class="open-results-items-details-item">
<view class="consumer-preference-img">
</view>
<view class="consume-open-results-items-details-item">
<view class="details-item-left">
<view class="details-item-up">
<text>消费偏高还是偏低？</text>
</view>
<view class="open-results-items-details-item-txt">
<text>消费偏好分析</text>
<view class="details-item-down">
<view class="consumer-num-img">
</view>
<view class="details-item-down-txt">
<text>【生活费额度】直观看</text>
</view>
</view>
<view class="consumer-advice-img">
</view>
<view class="details-item-left">
<view class="details-item-up">
<text>孩子正餐超市消费多？</text>
</view>
<view class="open-results-items-details-item-txt">
<text>消费建议</text>
<view class="details-item-down">
<view class="consumer-preference-img">
</view>
<view class="details-item-down-txt">
<text>【消费偏好】直观看</text>
</view>
</view>
</view>
<view class="open-results-items-details-item">
<view class="consumer-num-img">
</view>
<view class="consume-open-results-items-details-item">
<view class="details-item-left">
<view class="details-item-up">
<text>担心孩子被迫高额消费？</text>
</view>
<view class="open-results-items-details-item-txt">
<text>生活费额度分析</text>
<view class="details-item-down">
<view class="consumer-trend-img">
</view>
<view class="details-item-down-txt">
<text>【消费趋势】告诉你</text>
</view>
</view>
</view>
<view class="open-results-items-details-item">
<view class="consumer-trend-img">
<view class="details-item-left">
<view class="details-item-up">
<text>孩子是否准时就餐？</text>
</view>
<view class="open-results-items-details-item-txt">
<text>消费趋势分析</text>
<view class="details-item-down">
<view class="time-trends-img">
</view>
<view class="details-item-down-txt">
<text>【就餐时间趋势】告诉你</text>
</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="admission-notice-img">
</view>
......@@ -728,7 +777,7 @@
<text>当前为使用高峰期，请稍后再试</text>
</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">
</van-dialog>
</view>
......@@ -2195,102 +2244,117 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
}
.tainer {
.school-report-header {
height: 88rpx;
margin: 72rpx 0 48rpx 40rpx;
display: flex;
justify-content: space-between;
position: relative;
.school-report-header-item {
display: flex;
.school-report-header-bg {
height: 292rpx;
}
.user-avatar {
width: 88rpx;
height: 88rpx;
background: no-repeat center/100% url(../../static/images/avatar.png);
}
.school-report-header-position {
height: 292rpx;
padding: 72rpx 0 0 30rpx;
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;
flex-direction: column;
justify-content: space-between;
margin-left: 9rpx;
.user-name {
width: 200rpx;
font-size: 34rpx;
font-family: PingFangSC-Medium, PingFang SC;
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;
.user-avatar {
width: 88rpx;
height: 88rpx;
background: no-repeat center/100% url(../../static/images/avatar.png);
}
}
.school-report-screen {
display: flex;
.school-report-screen-item {
width: 156rpx;
.user-info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
justify-content: space-between;
margin-left: 9rpx;
.school-report-type {
font-size: 28rpx;
.user-name {
width: 200rpx;
font-size: 34rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1B1B1B;
margin-right: 12rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.triangle {
width: 21rpx;
height: 10rpx;
background: no-repeat center/100% url(../../static/images/grayTriangle.png);
.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-item-two {
width: 270rpx;
.school-report-screen {
display: flex;
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;
.school-report-screen-item {
width: 156rpx;
display: flex;
justify-content: center;
align-items: center;
.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 {
width: 21rpx;
height: 10rpx;
background: no-repeat center/100% url(../../static/images/grayTriangle.png);
.school-report-screen-item-two {
width: 270rpx;
display: flex;
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 {
height: 84rpx;
padding-left: 40rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
......@@ -2304,7 +2368,6 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
border-radius: 20rpx 20rpx 0rpx 0rpx;
font-size: 30rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
display: flex;
justify-content: center;
......@@ -2312,6 +2375,7 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
&.active {
background: #E4F9F2;
font-weight: 600;
}
}
}
......@@ -2345,7 +2409,9 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
}
}
}
}
.school-report-context {
.consumer-report-bgImg {
width: 100%;
height: 452rpx;
......@@ -2388,7 +2454,7 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
background: #E5F8F1;
padding: 0 30rpx;
position: absolute;
top: 650rpx;
top: 720rpx;
box-sizing: border-box;
.school-report-context-card-one {
......@@ -3509,6 +3575,10 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
display: flex;
justify-content: center;
align-items: center;
&.consume-open-results-title {
background: url(../../static/images/consumeOpenbgm.png) center/100% no-repeat;
}
}
.open-results-items {
......@@ -3519,6 +3589,12 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
padding: 32rpx 0 43rpx 73rpx;
box-sizing: border-box;
&.consume-open-results-items {
padding: 44rpx 0 0 34rpx;
box-sizing: border-box;
height: 473rpx;
}
.open-results-items-summary {
width: 100%;
height: 45rpx;
......@@ -3538,10 +3614,6 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
line-height: 45rpx;
}
.consumer-report-icon {
margin: 0 45rpx 0 70rpx;
}
.attendance-report-icon {
margin: 0 35rpx 0 134rpx;
}
......@@ -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-item {
width: 100%;
......@@ -3567,48 +3708,6 @@ color: #FF8646;padding:13rpx 12rpx 30rpx 17rpx;`,
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 {
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