徐浩 / zzxyt-uniapp · 提交

转到一个项目

作者 mxd
提交 43fd7a6f15b89fd3f2210360aeeeb511b8d2a8d8 1 个父辈 9f48b935

班级排名

内嵌 并排对比
正在显示 3 个修改的文件 包含 166 行增加 和 117 行删除
@@ -468,8 +468,9 @@ @@ -468,8 +468,9 @@
468 }, { 468 }, {
469 "path": "tch_rank/tch_rank", 469 "path": "tch_rank/tch_rank",
470 "style": { 470 "style": {
471 - "navigationBarTitleText": "班级排行榜",  
472 - "enablePullDownRefresh": false 471 + "navigationBarTitleText": "校园排行榜",
  472 + "enablePullDownRefresh": false,
  473 + "navigationStyle": "custom"
473 } 474 }
474 475
475 }, { 476 }, {
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 - <CustomReturn title="听课教室选座" color="#323232" :bgColor="bgColor" :isShowBreak="false"> 3 + <CustomReturn title="首页" color="#323232" :bgColor="bgColor" :isShowBreak="false">
4 <template v-slot:left> 4 <template v-slot:left>
5 <view class="set-up"> 5 <view class="set-up">
6 <image src="/static/imagesV2/tch_index/icon9.png" mode="aspectFill"></image> 6 <image src="/static/imagesV2/tch_index/icon9.png" mode="aspectFill"></image>
1 <template> 1 <template>
2 <view class="wrap_box"> 2 <view class="wrap_box">
3 - <!-- <uParse v-if="datas" :content="datas"></uParse> -->  
4 - <image class="ph_banner" src="/static/images/phb.png" mode="aspectFill"></image>  
5 - <view class="ph_box">  
6 - <view class="ph_tit dis_flex aic">  
7 - <view class="ph_d1">  
8 - 排名  
9 - </view>  
10 - <view class="ph_d2">  
11 - 班级  
12 - </view>  
13 - <view class="ph_d3">  
14 - 得分  
15 - </view>  
16 - </view>  
17 - <view v-for="(item,index) in datas" class="ph_li">  
18 - <view class="ph_d1">  
19 - <image v-if="item.key==1" src="/static/images/ph.png" mode="aspectFit"></image>  
20 - <image v-else-if="item.key==2" src="/static/images/ph2.png" mode="aspectFit"></image>  
21 - <image v-else-if="item.key==3" src="/static/images/ph3.png" mode="aspectFit"></image>  
22 - <text v-else>{{item.key}}</text>  
23 - </view>  
24 - <view class="ph_d2">  
25 - {{item.title}}  
26 - </view>  
27 - <view class="ph_d3">  
28 - {{item.num}}分  
29 - </view>  
30 - </view>  
31 - <view class="ph_li ph_li_b">  
32 - <view class="ph_d1">  
33 - <image v-if="mydata.key==0" src="/static/images/ph.png" mode="aspectFit"></image>  
34 - <image v-else-if="mydata.key==1" src="/static/images/ph2.png" mode="aspectFit"></image>  
35 - <image v-else-if="mydata.key==2" src="/static/images/ph3.png" mode="aspectFit"></image>  
36 - <text v-else>{{mydata.key}}</text>  
37 - <!-- <text>{{mydata.key}}</text> -->  
38 - </view>  
39 - <view class="ph_d2">  
40 - {{mydata.title}}<text>本班</text>  
41 - </view>  
42 - <view class="ph_d3">  
43 - {{mydata.num}}分 3 + <CustomReturn title="校园排行榜" color="#fff" :bgColor="bgColor">
  4 +
  5 + </CustomReturn>
  6 + <view class="bg-img">
  7 + <image src="/static/imagesV2/icon18.png" mode="aspectFill"></image>
  8 + </view>
  9 +
  10 + <PaddingTopB>
  11 +
  12 + <view class="main">
  13 +
  14 + <view class="card">
  15 + <view class="head">
  16 + <view class="icon">
  17 + <image src="/static/imagesV2/icon19.png" mode="aspectFill"></image>
  18 + </view>
  19 + <view class="title">
  20 + 班级考勤排名
  21 + </view>
  22 + <view class="icon">
  23 + <image src="/static/imagesV2/icon19s.png" mode="aspectFill"></image>
  24 + </view>
  25 + </view>
  26 +
  27 + <view class="list">
  28 + <view class="item" v-for="(item,index) in datas">
  29 + <view class="item-index">
  30 + <image v-if="item.key==1" src="/static/imagesV2/icon20.png" mode="aspectFit"></image>
  31 + <image v-else-if="item.key==2" src="/static/imagesV2/icon21.png" mode="aspectFit"></image>
  32 + <image v-else-if="item.key==3" src="/static/imagesV2/icon22.png" mode="aspectFit"></image>
  33 + <text v-else>{{item.key}}</text>
  34 + </view>
  35 + <view class="item-title">
  36 + {{item.title}}
  37 + </view>
  38 + <view class="item-val">
  39 + {{item.num}}
  40 + </view>
  41 + <view class="item-unit">
  42 + 分
  43 + </view>
  44 + </view>
  45 + </view>
  46 +
  47 + <view class="footer">
  48 + <view class="item">
  49 + <view class="item-index">
  50 + <image v-if="mydata.key==1" src="/static/imagesV2/icon20.png" mode="aspectFit"></image>
  51 + <image v-else-if="mydata.key==2" src="/static/imagesV2/icon21.png" mode="aspectFit"></image>
  52 + <image v-else-if="mydata.key==3" src="/static/imagesV2/icon22.png" mode="aspectFit"></image>
  53 + <text v-else>{{mydata.key}}</text>
  54 + </view>
  55 + <view class="item-title">
  56 + {{mydata.title}}
  57 + </view>
  58 + <view class="item-val">
  59 + {{mydata.num}}
  60 + </view>
  61 + <view class="item-unit">
  62 + 分
  63 + </view>
  64 + </view>
  65 + </view>
44 </view> 66 </view>
  67 +
  68 +
  69 +
  70 +
45 </view> 71 </view>
46 - </view>  
47 - <!-- 阻止滑动 -->  
48 - <!-- <view @touchmove.stop.prevent='test'></view> --> 72 +
  73 + </PaddingTopB>
  74 +
49 </view> 75 </view>
50 </template> 76 </template>
51 77
@@ -55,10 +81,17 @@ @@ -55,10 +81,17 @@
55 mapState, 81 mapState,
56 mapMutations 82 mapMutations
57 } from 'vuex' 83 } from 'vuex'
  84 + import CustomReturn from "@/components/CustomReturn/index.vue"
  85 + import PaddingTopB from "@/components/PaddingTopB/index.vue"
58 var that 86 var that
59 export default { 87 export default {
  88 + components: {
  89 + CustomReturn,
  90 + PaddingTopB
  91 + },
60 data() { 92 data() {
61 return { 93 return {
  94 + bgColor: 'transparent',
62 options:'', 95 options:'',
63 datas:'', 96 datas:'',
64 mydata:'' 97 mydata:''
@@ -67,6 +100,13 @@ @@ -67,6 +100,13 @@
67 computed: { 100 computed: {
68 ...mapState(['hasLogin', 'forcedLogin', 'userName', 'userinfo','nowtime']), 101 ...mapState(['hasLogin', 'forcedLogin', 'userName', 'userinfo','nowtime']),
69 }, 102 },
  103 + onPageScroll(e) {
  104 + if(e.scrollTop > 0 ) {
  105 + this.bgColor = '#3384fc'
  106 + }else {
  107 + this.bgColor = 'transparent'
  108 + }
  109 + },
70 onLoad(e) { 110 onLoad(e) {
71 that=this 111 that=this
72 that.options=e||{} 112 that.options=e||{}
@@ -161,87 +201,95 @@ @@ -161,87 +201,95 @@
161 // #ifdef H5 201 // #ifdef H5
162 min-height: calc(100vh - 44px); 202 min-height: calc(100vh - 44px);
163 // #endif 203 // #endif
164 - background: #F8F8F8; 204 + background: #3384fc;
165 } 205 }
166 -.ph_banner{ 206 +.bg-img {
  207 + height: 100vh;
  208 + position: absolute;
167 width: 100%; 209 width: 100%;
168 - height: 340rpx;  
169 - position: relative;  
170 - z-index: 1;  
171 - margin-bottom: -40rpx;  
172 -}  
173 -.ph_box{  
174 - position: relative;  
175 - z-index: 2;  
176 - background: #FFFFFF;  
177 - border-radius: 30rpx 30rpx 0 0;  
178 - padding: 30rpx 30rpx 130rpx;  
179 - min-height: calc(100vh - 300rpx);  
180 - // #ifdef H5  
181 - min-height: calc(100vh - 44px - 300rpx);  
182 - // #endif 210 + top: 0;
183 } 211 }
184 -.ph_tit{  
185 - font-size: 28rpx;  
186 - color: #929399;  
187 - height: 60rpx;  
188 - .ph_d1{  
189 - width: 60rpx;  
190 - margin-right: 40rpx;  
191 - }  
192 - .ph_d2{  
193 - flex: 1;  
194 - margin-right: 40rpx;  
195 - text-align: left;  
196 - }  
197 - .ph_d3{  
198 - text-align: right;  
199 - } 212 +.main {
  213 + width: 100%;
  214 + padding: 25rpx 25rpx 135rpx;
  215 + box-sizing: border-box;
  216 + margin-top: 250rpx;
200 } 217 }
201 -.ph_li{  
202 - font-size: 32rpx;  
203 - color: #545C71;  
204 - height: 120rpx;  
205 - display: flex;  
206 - align-items: center;  
207 -  
208 - .ph_d1{  
209 - width: 60rpx;  
210 - margin-right: 40rpx; 218 +
  219 +.card {
  220 + background-color: #fff;
  221 + border-radius: 20px;
  222 + overflow: hidden;
  223 + .head {
211 display: flex; 224 display: flex;
212 align-items: center; 225 align-items: center;
213 justify-content: center; 226 justify-content: center;
214 - font-size: 30rpx;  
215 - image{  
216 - width: 60rpx;  
217 - height: 60rpx; 227 + padding: 50rpx 0 30rpx;
  228 + background: linear-gradient(to bottom, #AEC7FF 0%, #FFFFFF 100%);
  229 + .icon {
  230 + width: 40rpx;
  231 + height: 40rpx;
  232 + }
  233 + .title {
  234 + font-size: 32rpx;
  235 + font-family: PingFang SC;
  236 + font-weight: bold;
  237 + color: #323232;
  238 + margin: 0 20rpx;
218 } 239 }
219 } 240 }
220 - .ph_d2{  
221 - flex: 1;  
222 - margin-right: 40rpx;  
223 - text-align: left;  
224 - text{  
225 - font-size: 28rpx;  
226 - color: #2D81FF;  
227 - margin-left: 10rpx;  
228 - padding: 5rpx 14rpx;  
229 - background: rgba(45, 129, 255, .1);  
230 - border-radius: 10rpx; 241 +
  242 + .list,
  243 + .footer{
  244 + padding: 0 30rpx;
  245 + .item {
  246 + display: flex;
  247 + align-items: center;
  248 + font-family: PingFang SC;
  249 + padding: 30rpx 0;
  250 + border-bottom: 1px solid #FAFBFA;
  251 + padding: 30rpx 0;
  252 + &:last-child {
  253 + border: 0;
  254 + }
  255 + &-index {
  256 + width: 50rpx;
  257 + height: 50rpx;
  258 + font-size: 30rpx;
  259 + font-weight: bold;
  260 + color: #979797;
  261 + display: flex;
  262 + align-items: center;
  263 + justify-content: center;
  264 + }
  265 + &-title {
  266 + flex: 1;
  267 + margin: 0 20rpx;
  268 + font-size: 28rpx;
  269 + font-weight: 500;
  270 + color: #323232;
  271 + }
  272 + &-val {
  273 + font-size: 32rpx;
  274 + font-weight: bold;
  275 + color: #2D81FF;
  276 + }
  277 + &-unit {
  278 + font-size: 26rpx;
  279 + color: #646464;
  280 + }
231 } 281 }
232 } 282 }
233 - .ph_d3{  
234 - text-align: right; 283 +
  284 + .footer {
  285 + position: fixed;
  286 + bottom: 0;
  287 + left: 0;
  288 + width: 100%;
  289 + background-color: #fff;
  290 + padding: 0 55rpx;
  291 + box-sizing: border-box;
235 } 292 }
236 } 293 }
237 -.ph_li_b{  
238 - position: fixed;  
239 - bottom: 0;  
240 - z-index: 900;  
241 - left: 0;  
242 - width: 100%;  
243 - background: #fff;  
244 - padding: 0 30rpx;  
245 - box-shadow: 0px 3rpx 8px 0px rgba(207, 207, 207, 0.5);  
246 -} 294 +
247 </style> 295 </style>