作者 mxd

我的学分

@@ -506,7 +506,8 @@ @@ -506,7 +506,8 @@
506 "path": "oneMyCredit/oneMyCredit", 506 "path": "oneMyCredit/oneMyCredit",
507 "style": { 507 "style": {
508 "navigationBarTitleText": "我的学分", 508 "navigationBarTitleText": "我的学分",
509 - "enablePullDownRefresh": false 509 + "enablePullDownRefresh": false,
  510 + "navigationStyle": "custom"
510 } 511 }
511 512
512 }, { 513 }, {
1 <template> 1 <template>
2 <view class="oneMyCredit"> 2 <view class="oneMyCredit">
3 - <view class="header-all">  
4 - <view class="header-img-wrap">  
5 - <image class="header-img" src="/static/images/tbbj.png" mode="aspectFill"></image>  
6 - </view>  
7 - <view class="header-fen flex">  
8 - {{all_num}}<text>分</text>  
9 - </view>  
10 - </view>  
11 - <view class="statement_text">  
12 - 注:低于80分将被无条件退学处理 3 + <CustomReturn title="我的学分" color="#fff" :bgColor="bgColor"/>
  4 + <view class="bg-img">
  5 + <image src="/static/imagesV2/study/xuefen-bg.png" mode="aspectFill"></image>
13 </view> 6 </view>
14 - <view class="learn-credit-wrap area" v-for="(item,index) in datas" :key="index">  
15 - <view class="learn-credit-item flex">  
16 - <view class="learn-credit-left">  
17 - <view class="learn-credit-tit">  
18 - {{item.title}} 7 + <PaddingTopB>
  8 +
  9 + <view class="main">
  10 + <view class="credit-wrap">
  11 + <view class="credit-label">
  12 + 我的学分(分)
19 </view> 13 </view>
20 - <view class="learn-credit-day">  
21 - {{item.deduct_time}} 14 + <view class="credit-content">
  15 + {{all_num}}
22 </view> 16 </view>
23 </view> 17 </view>
24 - <view class="learn-credit-num">  
25 - -{{item.num}} 18 + <view class="my-credit-main">
  19 + <view class="statement_text">
  20 + <text>
  21 + 注:低于80分将被无条件退学处理
  22 + </text>
  23 + </view>
  24 +
  25 + <view class="learn-credit-wrap" >
  26 + <view class="learn-credit-item flex" v-for="(item,index) in datas" :key="index">
  27 + <view class="learn-credit-left">
  28 + <view class="learn-credit-tit">
  29 + {{item.title}}
  30 + </view>
  31 + <view class="learn-credit-day">
  32 + {{item.deduct_time}}
  33 + </view>
  34 + </view>
  35 + <view class="learn-credit-num">
  36 + -{{item.num}}
  37 + </view>
  38 + </view>
  39 + </view>
  40 +
  41 +
  42 +
  43 +
26 </view> 44 </view>
  45 +
27 </view> 46 </view>
28 - </view>  
29 -  
30 - 47 +
  48 + </PaddingTopB>
  49 +
31 </view> 50 </view>
32 </template> 51 </template>
33 52
@@ -37,13 +56,19 @@ @@ -37,13 +56,19 @@
37 mapState, 56 mapState,
38 mapMutations 57 mapMutations
39 } from 'vuex' 58 } from 'vuex'
  59 + import CustomReturn from "@/components/CustomReturn/index.vue"
  60 + import PaddingTopB from "@/components/PaddingTopB/index.vue"
40 var that 61 var that
41 export default { 62 export default {
  63 + components: {
  64 + CustomReturn,
  65 + PaddingTopB
  66 + },
42 data() { 67 data() {
43 return { 68 return {
44 all_num: "0", //分数 69 all_num: "0", //分数
45 - datas: []  
46 - 70 + datas: [],
  71 + bgColor: 'none'
47 } 72 }
48 }, 73 },
49 onLoad(e) { 74 onLoad(e) {
@@ -59,6 +84,13 @@ @@ -59,6 +84,13 @@
59 onReachBottom() { 84 onReachBottom() {
60 that.getdata() 85 that.getdata()
61 }, 86 },
  87 + onPageScroll(e) {
  88 + if(e.scrollTop > 0 ) {
  89 + this.bgColor = '#3384fc'
  90 + }else {
  91 + this.bgColor = 'none'
  92 + }
  93 + },
62 methods: { 94 methods: {
63 onRetry(){ 95 onRetry(){
64 that.page=1 96 that.page=1
@@ -134,86 +166,70 @@ @@ -134,86 +166,70 @@
134 <style lang="scss" scoped> 166 <style lang="scss" scoped>
135 .oneMyCredit { 167 .oneMyCredit {
136 position: relative; 168 position: relative;
  169 +
137 } 170 }
138 -  
139 - .header-all { 171 + .bg-img {
  172 + height: 504rpx;
  173 + position: absolute;
140 width: 100%; 174 width: 100%;
141 - height: 220rpx;  
142 - position: relative;  
143 -  
144 - .header-img-wrap {  
145 - width: 100%;  
146 - height: 100%;  
147 - position: absolute;  
148 - top: 0;  
149 - left: 0;  
150 -  
151 - .header-img {  
152 - width: 100%;  
153 - height: 100%;  
154 - } 175 + }
  176 + .main {
  177 + width: 100%;
  178 +
  179 + }
  180 + .credit-wrap {
  181 + padding: 70rpx 0 0 25rpx;
  182 +
  183 + .credit-label{
  184 + font-size: 30rpx;
  185 + font-family: PingFang SC;
  186 + font-weight: 500;
  187 + color: #FFFFFF;
155 } 188 }
156 -  
157 - .header-fen {  
158 - width: 100%;  
159 - font-size: 72rpx;  
160 - font-family: Arial; 189 + .credit-content {
  190 + font-size: 60rpx;
  191 + font-family: PingFang SC;
161 font-weight: bold; 192 font-weight: bold;
162 color: #FFFFFF; 193 color: #FFFFFF;
163 - justify-content: center;  
164 - align-items: center;  
165 - margin-top: 24rpx;  
166 - position: absolute;  
167 - top: 0;  
168 - left: 0;  
169 -  
170 - text {  
171 - font-size: 32rpx;  
172 - font-family: Arial;  
173 - font-weight: 500;  
174 - color: #FFFFFF;  
175 - } 194 + margin-top: 10rpx;
176 } 195 }
177 } 196 }
178 - 197 +
  198 + .my-credit-main {
  199 + margin: 20rpx;
  200 + }
  201 +
179 .learn-credit-wrap { 202 .learn-credit-wrap {
180 - height: auto;  
181 - border-radius: 10rpx; 203 + padding: 0 20rpx;
182 background-color: #fff; 204 background-color: #fff;
183 - 205 + border-radius: 0 0 20rpx;
184 .learn-credit-item { 206 .learn-credit-item {
185 - height: 144rpx;  
186 - padding: 0 30rpx;  
187 justify-content: space-between; 207 justify-content: space-between;
188 align-items: center; 208 align-items: center;
189 - border-bottom: 1px solid #EEEEEE;  
190 - 209 + border-bottom: 1px solid #F3F3F7;
  210 + padding: 30rpx;
191 .learn-credit-left { 211 .learn-credit-left {
192 .learn-credit-tit { 212 .learn-credit-tit {
193 - height: 32rpx;  
194 - line-height: 32rpx;  
195 - font-size: 32rpx; 213 + font-size: 30rpx;
196 font-family: PingFang SC; 214 font-family: PingFang SC;
197 font-weight: 500; 215 font-weight: 500;
198 - color: #545D71;  
199 - margin-bottom: 28rpx; 216 + color: #323232;
  217 + margin-bottom: 30rpx;
200 } 218 }
201 219
202 .learn-credit-day { 220 .learn-credit-day {
203 - height: 26rpx;  
204 - line-height: 26rpx;  
205 - font-size: 28rpx; 221 + font-size: 24rpx;
206 font-family: PingFang SC; 222 font-family: PingFang SC;
207 font-weight: 400; 223 font-weight: 400;
208 - color: #A9B1C0; 224 + color: #979797;
209 } 225 }
210 } 226 }
211 227
212 .learn-credit-num { 228 .learn-credit-num {
213 - font-size: 32rpx; 229 + font-size: 30rpx;
214 font-family: PingFang SC; 230 font-family: PingFang SC;
215 font-weight: 500; 231 font-weight: 500;
216 - color: #FF9000; 232 + color: #FC5101;
217 } 233 }
218 } 234 }
219 } 235 }
@@ -224,12 +240,25 @@ @@ -224,12 +240,25 @@
224 } 240 }
225 } 241 }
226 .statement_text{ 242 .statement_text{
227 - width: 100%;  
228 - height: 60rpx;  
229 - padding-left: 30rpx;  
230 - font-size: 28rpx; 243 + font-size: 26rpx;
231 font-family: PingFang SC; 244 font-family: PingFang SC;
232 - font-weight: 400;  
233 - color: #929399; 245 + font-weight: 500;
  246 + color: #646464;
  247 + padding: 40rpx 20rpx 20rpx;
  248 + text-align: center;
  249 + background-color: #fff;
  250 + border-radius: 20rpx 20rpx 0 0;
  251 + text {
  252 + position: relative;
  253 + &:before {
  254 + content: '';
  255 + position: absolute;
  256 + bottom: 0;
  257 + width: 100%;
  258 + height: 12rpx;
  259 + background-color: rgba(252, 81, 1, 0.1);
  260 + }
  261 + }
  262 +
234 } 263 }
235 </style> 264 </style>