徐浩 / zzxyt-uniapp · 提交

转到一个项目

作者 mxd
提交 7ba374793f930e5a4634dbe95e4a6a722f48abc9 1 个父辈 3f69689a

校园排行榜 

星级排行榜
内嵌 并排对比
正在显示 3 个修改的文件 包含 200 行增加 和 96 行删除
@@ -175,7 +175,8 @@ @@ -175,7 +175,8 @@
175 "style" : 175 "style" :
176 { 176 {
177 "navigationBarTitleText": "星级排行榜", 177 "navigationBarTitleText": "星级排行榜",
178 - "enablePullDownRefresh": false 178 + "enablePullDownRefresh": false,
  179 + "navigationStyle": "custom"
179 } 180 }
180 181
181 } 182 }
@@ -42,6 +42,13 @@ @@ -42,6 +42,13 @@
42 分 42 分
43 </view> 43 </view>
44 </view> 44 </view>
  45 + <u-empty
  46 + v-if="datas.length==0"
  47 + mode="data"
  48 + text="暂无数据"
  49 + icon="/static/images/tch/img_blank.png"
  50 + >
  51 + </u-empty>
45 </view> 52 </view>
46 53
47 <view class="footer"> 54 <view class="footer">
@@ -53,10 +60,15 @@ @@ -53,10 +60,15 @@
53 <text v-else>{{mydata.key}}</text> 60 <text v-else>{{mydata.key}}</text>
54 </view> 61 </view>
55 <view class="item-title"> 62 <view class="item-title">
56 - {{mydata.title}} 63 + {{mydata.title || ''}}
  64 + </view>
  65 + <view class="item-tabs">
  66 + <view class="tab">
  67 + 本班
  68 + </view>
57 </view> 69 </view>
58 <view class="item-val"> 70 <view class="item-val">
59 - {{mydata.num}} 71 + {{mydata.num || ''}}
60 </view> 72 </view>
61 <view class="item-unit"> 73 <view class="item-unit">
62 分 74 分
@@ -289,6 +301,24 @@ @@ -289,6 +301,24 @@
289 background-color: #fff; 301 background-color: #fff;
290 padding: 0 55rpx; 302 padding: 0 55rpx;
291 box-sizing: border-box; 303 box-sizing: border-box;
  304 + .item-title {
  305 + flex: unset;
  306 + }
  307 + .item-tabs {
  308 + flex: 1;
  309 + .tab {
  310 + width: 80rpx;
  311 + height: 44rpx;
  312 + text-align: center;
  313 + line-height: 44rpx;
  314 + font-size: 26rpx;
  315 + font-family: PingFang SC;
  316 + font-weight: 400;
  317 + color: #448EFE;
  318 + background-color: rgba(49, 132, 255, 0.08);
  319 + border-radius: 5rpx;
  320 + }
  321 + }
292 } 322 }
293 } 323 }
294 324
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 - 排名 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>
9 </view> 25 </view>
10 - <view class="ph_d2">  
11 - 班主任 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.nick}}
12 </view> 37 </view>
13 - <view class="ph_d3">  
14 - 总星级 38 + <view class="item-val">
  39 + {{item.start}}
15 </view> 40 </view>
  41 + <view class="item-unit">
  42 + 分
16 </view> 43 </view>
17 - <u-empty v-if="datas.length==0" 44 + </view>
  45 + <u-empty
  46 + v-if="datas.length==0"
18 mode="data" 47 mode="data"
19 text="暂无数据" 48 text="暂无数据"
20 icon="/static/images/tch/img_blank.png" 49 icon="/static/images/tch/img_blank.png"
21 > 50 >
22 </u-empty> 51 </u-empty>
23 - <view v-for="(item,index) in datas" class="ph_li">  
24 - <view class="ph_d1">  
25 - <image v-if="item.key==1" src="/static/images/ph.png" mode="aspectFit"></image>  
26 - <image v-else-if="item.key==2" src="/static/images/ph2.png" mode="aspectFit"></image>  
27 - <image v-else-if="item.key==3" src="/static/images/ph3.png" mode="aspectFit"></image>  
28 - <text v-else>{{item.key}}</text>  
29 </view> 52 </view>
30 - <view class="ph_d2">  
31 - {{item.nick}} 53 +
  54 + <view class="footer">
  55 + <view class="item">
  56 + <view class="item-index">
  57 + <image v-if="mydata.key==1" src="/static/imagesV2/icon20.png" mode="aspectFit"></image>
  58 + <image v-else-if="mydata.key==2" src="/static/imagesV2/icon21.png" mode="aspectFit"></image>
  59 + <image v-else-if="mydata.key==3" src="/static/imagesV2/icon22.png" mode="aspectFit"></image>
  60 + <text v-else>{{mydata.key}}</text>
32 </view> 61 </view>
33 - <view class="ph_d3">  
34 - {{item.start}}分 62 + <view class="item-title">
  63 + {{mydata.nick || ''}}
35 </view> 64 </view>
  65 + <view class="item-tabs">
  66 + <view class="tab">
  67 + 本人
36 </view> 68 </view>
37 - <view class="ph_li ph_li_b">  
38 - <view class="ph_d1">  
39 - <image v-if="mydata.key==1" src="/static/images/ph.png" mode="aspectFit"></image>  
40 - <image v-else-if="mydata.key==2" src="/static/images/ph2.png" mode="aspectFit"></image>  
41 - <image v-else-if="mydata.key==3" src="/static/images/ph3.png" mode="aspectFit"></image>  
42 - <text v-else>{{mydata.key}}</text>  
43 - <!-- <text>{{mydata.key}}</text> -->  
44 </view> 69 </view>
45 - <view class="ph_d2">  
46 - {{mydata.nick}}<text>本人</text> 70 + <view class="item-val">
  71 + {{mydata.start || ''}}
47 </view> 72 </view>
48 - <view class="ph_d3">  
49 - {{mydata.start}}分 73 + <view class="item-unit">
  74 + 分
50 </view> 75 </view>
51 </view> 76 </view>
52 </view> 77 </view>
53 - <!-- 阻止滑动 -->  
54 - <!-- <view @touchmove.stop.prevent='test'></view> --> 78 + </view>
  79 +
  80 +
  81 +
  82 +
  83 + </view>
  84 +
  85 + </PaddingTopB>
  86 +
55 </view> 87 </view>
56 </template> 88 </template>
57 89
@@ -61,10 +93,17 @@ @@ -61,10 +93,17 @@
61 mapState, 93 mapState,
62 mapMutations 94 mapMutations
63 } from 'vuex' 95 } from 'vuex'
  96 + import CustomReturn from "@/components/CustomReturn/index.vue"
  97 + import PaddingTopB from "@/components/PaddingTopB/index.vue"
64 var that 98 var that
65 export default { 99 export default {
  100 + components: {
  101 + CustomReturn,
  102 + PaddingTopB
  103 + },
66 data() { 104 data() {
67 return { 105 return {
  106 + bgColor: 'transparent',
68 options:'', 107 options:'',
69 datas:'', 108 datas:'',
70 mydata:'' 109 mydata:''
@@ -73,6 +112,13 @@ @@ -73,6 +112,13 @@
73 computed: { 112 computed: {
74 ...mapState(['hasLogin', 'forcedLogin', 'userName', 'userinfo','nowtime']), 113 ...mapState(['hasLogin', 'forcedLogin', 'userName', 'userinfo','nowtime']),
75 }, 114 },
  115 + onPageScroll(e) {
  116 + if(e.scrollTop > 0 ) {
  117 + this.bgColor = '#3384fc'
  118 + }else {
  119 + this.bgColor = 'transparent'
  120 + }
  121 + },
76 onLoad(e) { 122 onLoad(e) {
77 that=this 123 that=this
78 that.options=e||{} 124 that.options=e||{}
@@ -167,87 +213,114 @@ @@ -167,87 +213,114 @@
167 // #ifdef H5 213 // #ifdef H5
168 min-height: calc(100vh - 44px); 214 min-height: calc(100vh - 44px);
169 // #endif 215 // #endif
170 - background: #F8F8F8; 216 + background: #3384fc;
171 } 217 }
172 -.ph_banner{ 218 +.bg-img {
  219 + height: 100vh;
  220 + position: absolute;
173 width: 100%; 221 width: 100%;
174 - height: 340rpx;  
175 - position: relative;  
176 - z-index: 1;  
177 - margin-bottom: -40rpx; 222 + top: 0;
178 } 223 }
179 -.ph_box{  
180 - position: relative;  
181 - z-index: 2;  
182 - background: #FFFFFF;  
183 - border-radius: 30rpx 30rpx 0 0;  
184 - padding: 30rpx 30rpx 130rpx;  
185 - min-height: calc(100vh - 300rpx);  
186 - // #ifdef H5  
187 - min-height: calc(100vh - 44px - 300rpx);  
188 - // #endif 224 +.main {
  225 + width: 100%;
  226 + padding: 25rpx 25rpx 135rpx;
  227 + box-sizing: border-box;
  228 + margin-top: 250rpx;
189 } 229 }
190 -.ph_tit{  
191 - font-size: 28rpx;  
192 - color: #929399;  
193 - height: 60rpx;  
194 - .ph_d1{  
195 - width: 60rpx;  
196 - margin-right: 40rpx; 230 +
  231 +.card {
  232 + background-color: #fff;
  233 + border-radius: 20px;
  234 + overflow: hidden;
  235 + .head {
  236 + display: flex;
  237 + align-items: center;
  238 + justify-content: center;
  239 + padding: 50rpx 0 30rpx;
  240 + background: linear-gradient(to bottom, #AEC7FF 0%, #FFFFFF 100%);
  241 + .icon {
  242 + width: 40rpx;
  243 + height: 40rpx;
197 } 244 }
198 - .ph_d2{  
199 - flex: 1;  
200 - margin-right: 40rpx;  
201 - text-align: left; 245 + .title {
  246 + font-size: 32rpx;
  247 + font-family: PingFang SC;
  248 + font-weight: bold;
  249 + color: #323232;
  250 + margin: 0 20rpx;
202 } 251 }
203 - .ph_d3{  
204 - text-align: right;  
205 } 252 }
206 -}  
207 -.ph_li{  
208 - font-size: 32rpx;  
209 - color: #545C71;  
210 - height: 120rpx; 253 +
  254 + .list,
  255 + .footer{
  256 + padding: 0 30rpx;
  257 + .item {
211 display: flex; 258 display: flex;
212 align-items: center; 259 align-items: center;
213 -  
214 - .ph_d1{  
215 - width: 60rpx;  
216 - margin-right: 40rpx; 260 + font-family: PingFang SC;
  261 + padding: 30rpx 0;
  262 + border-bottom: 1px solid #FAFBFA;
  263 + padding: 30rpx 0;
  264 + &:last-child {
  265 + border: 0;
  266 + }
  267 + &-index {
  268 + width: 50rpx;
  269 + height: 50rpx;
  270 + font-size: 30rpx;
  271 + font-weight: bold;
  272 + color: #979797;
217 display: flex; 273 display: flex;
218 align-items: center; 274 align-items: center;
219 justify-content: center; 275 justify-content: center;
220 - font-size: 30rpx;  
221 - image{  
222 - width: 60rpx;  
223 - height: 60rpx;  
224 - }  
225 } 276 }
226 - .ph_d2{ 277 + &-title {
227 flex: 1; 278 flex: 1;
228 - margin-right: 40rpx;  
229 - text-align: left;  
230 - text{ 279 + margin: 0 20rpx;
231 font-size: 28rpx; 280 font-size: 28rpx;
  281 + font-weight: 500;
  282 + color: #323232;
  283 + }
  284 + &-val {
  285 + font-size: 32rpx;
  286 + font-weight: bold;
232 color: #2D81FF; 287 color: #2D81FF;
233 - margin-left: 10rpx;  
234 - padding: 5rpx 14rpx;  
235 - background: rgba(45, 129, 255, .1);  
236 - border-radius: 10rpx;  
237 } 288 }
  289 + &-unit {
  290 + font-size: 26rpx;
  291 + color: #646464;
238 } 292 }
239 - .ph_d3{  
240 - text-align: right;  
241 } 293 }
242 -}  
243 -.ph_li_b{ 294 + }
  295 +
  296 + .footer {
244 position: fixed; 297 position: fixed;
245 bottom: 0; 298 bottom: 0;
246 - z-index: 900;  
247 left: 0; 299 left: 0;
248 width: 100%; 300 width: 100%;
249 - background: #fff;  
250 - padding: 0 30rpx;  
251 - box-shadow: 0px 3rpx 8px 0px rgba(207, 207, 207, 0.5); 301 + background-color: #fff;
  302 + padding: 0 55rpx;
  303 + box-sizing: border-box;
  304 + .item-title {
  305 + flex: unset;
  306 + }
  307 + .item-tabs {
  308 + flex: 1;
  309 + .tab {
  310 + width: 80rpx;
  311 + height: 44rpx;
  312 + text-align: center;
  313 + line-height: 44rpx;
  314 + font-size: 26rpx;
  315 + font-family: PingFang SC;
  316 + font-weight: 400;
  317 + color: #448EFE;
  318 + background-color: rgba(49, 132, 255, 0.08);
  319 + border-radius: 5rpx;
  320 + }
  321 + }
  322 + }
252 } 323 }
  324 +
253 </style> 325 </style>
  326 +