我的学分

@@ -506,7 +506,8 @@
 					"path": "oneMyCredit/oneMyCredit",
 					"style": {
 						"navigationBarTitleText": "我的学分",
-						"enablePullDownRefresh": false
+						"enablePullDownRefresh": false,
+						"navigationStyle": "custom"
 					}
 
 				}, {

 <template>
 	<view class="oneMyCredit">
-		<view class="header-all">
-			<view class="header-img-wrap">
-				<image class="header-img" src="/static/images/tbbj.png" mode="aspectFill"></image>
-			</view>
-			<view class="header-fen flex">
-				{{all_num}}<text>分</text>
-			</view>
-		</view>
-		<view class="statement_text">
-			注：低于80分将被无条件退学处理
+		<CustomReturn title="我的学分" color="#fff" :bgColor="bgColor"/>
+		<view class="bg-img">
+			<image src="/static/imagesV2/study/xuefen-bg.png" mode="aspectFill"></image>
 		</view>
-		<view class="learn-credit-wrap area" v-for="(item,index) in datas" :key="index">
-			<view class="learn-credit-item flex">
-				<view class="learn-credit-left">
-					<view class="learn-credit-tit">
-						{{item.title}}
+		<PaddingTopB>
+			
+			<view class="main">
+				<view class="credit-wrap">
+					<view class="credit-label">
+						我的学分（分）
 					</view>
-					<view class="learn-credit-day">
-						{{item.deduct_time}}
+					<view class="credit-content">
+						{{all_num}}
 					</view>
 				</view>
-				<view class="learn-credit-num">
-					-{{item.num}}
+				<view class="my-credit-main">
+					<view class="statement_text">
+						<text>
+							注：低于80分将被无条件退学处理
+						</text>
+					</view>
+					
+					<view class="learn-credit-wrap" >
+						<view class="learn-credit-item flex" v-for="(item,index) in datas" :key="index">
+							<view class="learn-credit-left">
+								<view class="learn-credit-tit">
+									{{item.title}}
+								</view>
+								<view class="learn-credit-day">
+									{{item.deduct_time}}
+								</view>
+							</view>
+							<view class="learn-credit-num">
+								-{{item.num}}
+							</view>
+						</view>
+					</view>
+						
+						
+					
+					
 				</view>
+				
 			</view>
-		</view>
-
-
+			
+		</PaddingTopB>
+		
 	</view>
 </template>
 
@@ -37,13 +56,19 @@
 		mapState,
 		mapMutations
 	} from 'vuex'
+	import CustomReturn from "@/components/CustomReturn/index.vue"
+	import PaddingTopB from "@/components/PaddingTopB/index.vue"
 	var that 
 	export default {
+		components: {
+			CustomReturn,
+			PaddingTopB
+		},
 		data() {
 			return {
 				all_num: "0", //分数
-				datas: []
-
+				datas: [],
+				bgColor: 'none'
 			}
 		},
 		onLoad(e) {
@@ -59,6 +84,13 @@
 		onReachBottom() {
 			that.getdata()
 		},
+		onPageScroll(e) {
+			if(e.scrollTop > 0 ) {
+				this.bgColor = '#3384fc'
+			}else {
+				this.bgColor = 'none'
+			}
+		},
 		methods: {
 			onRetry(){
 				that.page=1
@@ -134,86 +166,70 @@
 <style lang="scss" scoped>
 	.oneMyCredit {
 		position: relative;
+		
 	}
-
-	.header-all {
+	.bg-img {
+		height: 504rpx;
+		position: absolute;
 		width: 100%;
-		height: 220rpx;
-		position: relative;
-
-		.header-img-wrap {
-			width: 100%;
-			height: 100%;
-			position: absolute;
-			top: 0;
-			left: 0;
-
-			.header-img {
-				width: 100%;
-				height: 100%;
-			}
+	}
+	.main {
+		width: 100%;
+		
+	}
+	.credit-wrap {
+		padding: 70rpx 0 0 25rpx;
+		
+		.credit-label{
+			font-size: 30rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #FFFFFF;
 		}
-
-		.header-fen {
-			width: 100%;
-			font-size: 72rpx;
-			font-family: Arial;
+		.credit-content {
+			font-size: 60rpx;
+			font-family: PingFang SC;
 			font-weight: bold;
 			color: #FFFFFF;
-			justify-content: center;
-			align-items: center;
-			margin-top: 24rpx;
-			position: absolute;
-			top: 0;
-			left: 0;
-
-			text {
-				font-size: 32rpx;
-				font-family: Arial;
-				font-weight: 500;
-				color: #FFFFFF;
-			}
+			margin-top: 10rpx;
 		}
 	}
-
+	
+	.my-credit-main {
+		margin: 20rpx;
+	}
+	
 	.learn-credit-wrap {
-		height: auto;
-		border-radius: 10rpx;
+		padding: 0 20rpx;
 		background-color: #fff;
-
+		border-radius: 0 0 20rpx;
 		.learn-credit-item {
-			height: 144rpx;
-			padding: 0 30rpx;
 			justify-content: space-between;
 			align-items: center;
-			border-bottom: 1px solid #EEEEEE;
-
+			border-bottom: 1px solid #F3F3F7;
+			padding: 30rpx;
 			.learn-credit-left {
 				.learn-credit-tit {
-					height: 32rpx;
-					line-height: 32rpx;
-					font-size: 32rpx;
+					font-size: 30rpx;
 					font-family: PingFang SC;
 					font-weight: 500;
-					color: #545D71;
-					margin-bottom: 28rpx;
+					color: #323232;
+					margin-bottom: 30rpx;
 				}
 
 				.learn-credit-day {
-					height: 26rpx;
-					line-height: 26rpx;
-					font-size: 28rpx;
+					font-size: 24rpx;
 					font-family: PingFang SC;
 					font-weight: 400;
-					color: #A9B1C0;
+					color: #979797;
 				}
 			}
 
 			.learn-credit-num {
-				font-size: 32rpx;
+				font-size: 30rpx;
 				font-family: PingFang SC;
 				font-weight: 500;
-				color: #FF9000;
+				color: #FC5101;
 			}
 		}
 	}
@@ -224,12 +240,25 @@
 		}
 	}
 	.statement_text{
-		width: 100%;
-		height: 60rpx;
-		padding-left: 30rpx;
-		font-size: 28rpx;
+		font-size: 26rpx;
 		font-family: PingFang SC;
-		font-weight: 400;
-		color: #929399;
+		font-weight: 500;
+		color: #646464;
+		padding: 40rpx 20rpx 20rpx;
+		text-align: center;
+		background-color: #fff;
+		border-radius: 20rpx 20rpx 0 0;
+		text {
+			position: relative;
+			&:before {
+				content: '';
+				position: absolute;
+				bottom: 0;
+				width: 100%;
+				height: 12rpx;
+				background-color: rgba(252, 81, 1, 0.1);
+			}
+		}
+		
 	}
 </style>