Browse Source

样式修改

tanxue 1 month ago
parent
commit
535aa1395a

+ 2 - 2
common/styles/global/components.scss

@@ -1,5 +1,5 @@
 /******************** 这里放组件样式 ********************/
-	
+	
 /***** view *****/
 view{box-sizing: border-box;}
 
@@ -63,7 +63,7 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 /***** tabbar  *****/
 .ezy-custom-tabbar{
 	width: 100%;height: 100rpx;position: fixed;left: 0;right: 0;background-color: #f9f9f9;box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.4);
-	bottom: var(--window-bottom);padding: 0 24rpx env(safe-area-inset-bottom) 24rpx;box-sizing: border-box;z-index: 9;
+	bottom: env(safe-area-inset-bottom);padding: 0 24rpx env(safe-area-inset-bottom) 24rpx;box-sizing: border-box;z-index: 9;
 	display: flex;flex-direction: row;align-items: center;
 	.tabbar-item-box{
 		width: 25%;display: flex;flex-wrap: nowrap;justify-content: space-evenly;

+ 68 - 14
common/styles/global/pages.scss

@@ -939,7 +939,7 @@
 // 我的页面
 .ezy-my-page{
 	width: 100%;height: 100vh;position: relative;overflow: auto;background: #f9f9fb;
-	.my-page-box{position: relative;z-index: 1;margin-top: calc(-24rpx - var(--status-bar-height));}
+	.my-page-box{position: relative;z-index: 1;margin: 0;}
 	.my-head-box{
 		width: 100%;padding: 0 24rpx 42rpx;box-sizing: border-box;display: flex;align-items: center;color: #fff;
 		.head-img-box{width: 126rpx;height: 126rpx;margin: 0 24rpx 0 12rpx;@include ezy-no-repeat-cover;border-radius: 50%;}
@@ -2002,7 +2002,7 @@
 	width: 100%;height: 100vh;background-color: #fff;display: flex;flex-direction: column;
 	.xuexi-page-body{padding-bottom: 100rpx;}
 	// 切换单元
-	.change-dy-box{
+	/* .change-dy-box{
 		width: 100%;position: relative;display: flex;margin-bottom: 12rpx;
 		background-color: #fff;flex-shrink: 0;
 		.arrow-icon{
@@ -2023,7 +2023,32 @@
 			width: 76%;margin: 0 auto;font-size: 32rpx;color: #3fa5ff;line-height: 1.6;
 			min-height: 100rpx;text-align: center;
 		}
+	} */
+	
+	// 学习记录
+	.xxjl-card-box{
+		width: 95%;margin: 0 auto;padding: 72rpx 24rpx 24rpx;box-sizing: border-box;
+		background-color: #5795f6;border-radius: 16rpx;position: relative;
+		.card-body-box{
+			display: flex;
+			// img{width: 190rpx;height: 240rpx;border-radius: 16rpx;border: 1rpx solid #a8c3e9;}
+			// .body-right{color: #fff;}
+		}
+		/* .card-progress-box{
+			display: flex;align-items: center;
+			.xx-progress-box{flex: 1;margin-right: 64rpx;color: #fff;font-size: 28rpx;}
+			.xx-progress{border-radius: 40rpx;overflow: hidden;margin-top: 10rpx;}
+			.jxxx-btn{
+				width: 177rpx;height: 89rpx;@include ezy-no-repeat-cover;
+				background-image: url("@/static/images/xuexi/jx-xx-btn.png");
+			}
+		} */
 	}
+/* 	.xxjl-card-box::before{
+		content: '学习记录';width: 289rpx;height: 77rpx;line-height: 77rpx;@include ezy-no-repeat-cover;
+		background-image: url("@/static/images/xuexi/xx-jl-bj.png");display: block;
+		position: absolute;top: -28rpx;text-align: center;color: #fff;font-size: 34rpx;
+	} */
 	
 	// 滚动
 	.xx-scroll-body{overflow-y: auto;padding-top: 12rpx;}
@@ -2066,6 +2091,30 @@
 	
 	// 学习目录
 	.xx-item-list{
+		.xx-item-title{text-align: center;margin: 32rpx 0;font-size: 34rpx;color: #333;}
+		.item-dy-box{
+			display: flex;align-items: center;justify-content: center;color: #fff;margin-bottom: 24rpx;
+			.dy-left-box{
+				width: 174rpx;height: 127rpx;@include ezy-no-repeat-cover;font-size: 64rpx;
+				display: flex;align-items: center;box-sizing: border-box;padding:0 24rpx;
+				transition: 0.3s;
+				background-image: url("@/static/images/xuexi/xx-ml-left.png");
+			}
+			.dy-left-box:active{
+				transform: translateY(12rpx);
+			}
+			.dy-left-box::after{
+				content: '';width: 32rpx;height: 34rpx;@include ezy-no-repeat-cover;margin-left: auto;
+				background-image: url("@/static/images/xuexi/xx-ml-jt.png");display: block;
+			}
+			.dy-right-box{
+				width: 518rpx;height: 127rpx;@include ezy-no-repeat-cover;
+				display: flex;align-items: flex-start;flex-direction: column;justify-content: center;
+				box-sizing: border-box;padding:0 24rpx;font-size: 28rpx;
+				background-image: url("@/static/images/xuexi/xx-ml-right.png");
+				.dy-name{font-size: 34rpx;margin-bottom: 6rpx;}
+			}
+		}
 		.xx-item-box{
 			width: 691rpx;height: 172rpx;
 			display: flex;align-items: center;justify-content: space-between;color: #4b4b4b;;
@@ -2139,24 +2188,23 @@
 .ezy-ksp-page{
 	width: 100%;height: 100vh;display: flex;flex-direction: column;
 	.ksp-tab-box{
-		display: flex;justify-content: space-evenly;border-bottom: 1rpx solid #b7defd;margin-bottom: 32rpx;
+		display: flex;justify-content: space-evenly;border-bottom: 1rpx solid #b7defd;
 		.tab-item{color: #9a9a9a;font-size: 34rpx;padding: 16rpx 24rpx;}
 		.active{color: #5895f7;border-bottom: 4rpx solid #1684fc;}
 	}
-	.ksp-page-body{
-		// display: flex;
-	}
+	.ksp-scroll-view{overflow-y: auto;}
 	.ksp-video-box{
-		width: 95%;height: 423rpx;padding: 8px;box-sizing: border-box;border-radius: 16rpx;margin: 0 auto 32rpx;
+		width: 95%;height: 423rpx;padding: 8px;box-sizing: border-box;
+		border-radius: 16rpx;margin:32rpx auto;flex-shrink: 0;
 		.prism-big-play-btn{
 			width: 100rpx;height: 100rpx;opacity: 0.8;
 			background-image: url("@/static/images/xuexi/play-btn.png");
 		}
 	}
 	.ksp-item-list{
-		width: 95%;margin: 0 auto 32rpx;border-radius: 16rpx;position: relative;
-		background-color: #5894f6;padding: 20rpx 0 1rpx;box-sizing: border-box;
-		overflow: hidden;box-shadow: 0 0rpx 12rpx rgba(100, 159, 241, 0.4);
+		width: 95%;margin: 0 auto 24rpx;border-radius: 16rpx;position: relative;
+		background-color: #5894f6;padding: 20rpx 0;box-sizing: border-box;
+		box-shadow: 0 0rpx 12rpx rgba(100, 159, 241, 0.4);
 	}
 	.ksp-item-list::before{
 		content: '';width: 100%;height: 97rpx;@include ezy-no-repeat-cover;
@@ -2164,18 +2212,24 @@
 		position: absolute;left: 0;right: 0;top: 0;z-index: 1;
 	}
 	.list-head{
-		display: flex;align-items: center;justify-content: space-between;
-		position: relative;z-index: 2;padding:0  24rpx 24rpx;
+		width: 95%;display: flex;align-items: center;justify-content: space-between;
+		position: relative;z-index: 2;padding:0 0 24rpx;margin: 0 auto;
 		.list-title{color: #fff;font-size: 36rpx;}
 		.list-btn{
 			width: 210rpx;height: 72rpx;@include ezy-no-repeat-cover;
 			background-image: url("@/static/images/xuexi/ksp-video-play.png");
 		}
 	}
+	.list-body{
+		width: 95%;position: relative;z-index: 2;border-radius: 16rpx;
+		padding: 16rpx;box-sizing: border-box;margin: 0 auto;
+		color: #444;font-size: 32rpx;background-color: #fff;
+		img{max-width: 100%;margin: 10rpx auto 0;display: block;}
+	}
 	
 	.ksp-item-box{
-		width: 670rpx;height: 150rpx;margin: 0 auto 24rpx;padding-left: 24rpx;
-		display: flex;align-items: center;box-sizing: border-box;z-index: 2;position: relative;
+		width: 670rpx;height: 150rpx;
+		display: flex;align-items: center;position: relative;
 		@include ezy-no-repeat-cover;background-image: url("@/static/images/xuexi/ksp-item-bj.png");
 		.ksp-icon{
 			width: 104rpx;height: 104rpx;@include ezy-no-repeat-cover;flex-shrink: 0;

+ 1 - 0
pages/chanpinXuanze/index.vue

@@ -76,6 +76,7 @@
 			currentTabIndex.value = 0;
 	})
 	onLoad(() => {
+		uni.hideTabBar()
 		getShuxueList()
 	})
 </script>

+ 8 - 19
pages/chanpinneirong/index.vue

@@ -10,32 +10,20 @@
 				<view class="card-body-box">
 					<img :src="banbenInfo.cover" />
 					<view class="body-right">
-						<view>{{ banbenInfo.chanpinName }}</view>
-						<view>
-							<text>等级</text>
-							<text>{{banbenInfo.dengjiName}}</text>
-						</view>
-						<view>
-							<text>版本</text>
-							<text>{{banbenInfo.name}}</text>
-						</view>
-						<view>
-							<text>单元</text>
-							<text>{{banbenInfo.curDanyuanName}}</text>
-						</view>
-						<view>
-							<text>课程</text>
-							<text>{{banbenInfo.curKechengName}}</text>
-						</view>
+						<view class="right-name">{{ banbenInfo.chanpinName }}</view>
+						<view>等级:{{banbenInfo.dengjiName}}</view>
+						<view>版本:{{banbenInfo.name}}</view>
+						<view>单元:{{banbenInfo.curDanyuanName}}</view>
+						<view>课程:{{banbenInfo.curKechengName}}</view>
 					</view>
 				</view>
 				<view class="card-progress-box">
 					<view class="xx-progress-box">
 						<view>学习进度</view>
-						<progress :percent="curProcess" class="xx-progress" stroke-width="10"
+						<progress :percent="curProcess" class="xx-progress" stroke-width="20"
 							backgroundColor="#3c7dfd" activeColor="#ffd11c" />
 					</view>
-					<view class="jxxx-btn" @click="handlePlay(banbenInfo,'jixu')">继续学习</view>
+					<view class="jxxx-btn" @click="handlePlay(banbenInfo,'jixu')"></view>
 				</view>
 			</view>
 			<view class="xx-scroll-body">
@@ -131,6 +119,7 @@
 
 		},
 		onLoad(options) {
+			uni.hideTabBar()
 			const cacheData = cacheManager.get('xuexi-shuxue');
 			// cacheData && this.shouldUseCache(options, cacheData)
 			if (cacheData) {

BIN
static/images/xuexi/jx-xx-btn.png


BIN
static/images/xuexi/xx-jl-bj.png


BIN
static/images/xuexi/xx-ml-jt.png


BIN
static/images/xuexi/xx-ml-left.png


BIN
static/images/xuexi/xx-ml-right.png