正在显示
3 个修改的文件
包含
114 行增加
和
84 行删除
| @@ -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> |
static/imagesV2/study/xuefen-bg.png
0 → 100644
34.2 KB
-
请 注册 或 登录 后发表评论