目录改版

common/styles/global/pages.scss

@@ -2091,4 +2091,41 @@
 	}
 	.xx-xw-text{text-align: center;font-size: 32rpx;color: #666;margin: 32rpx auto;}
 	
+}
+
+// 单元目录
+.xuexi-dyml-page{
+	width: 100%;height: 92vh;border-radius: 16rpx 16rpx 0 0;
+	background-color: #fff;box-shadow: 0 0rpx 4rpx rgba(100, 159, 241, 0.2);
+	display: flex;flex-direction: column;
+	box-sizing: border-box;padding: 36rpx 0 0;
+	.xuexi-dyml-body{overflow-y: auto;padding: 24rpx 0 0;}
+	.dyml-title{
+		width: 80%;line-height: 1.5;margin: 24rpx auto 0;
+		text-align: center;font-size: 36rpx;color: #000;position: relative;
+		icon{
+			width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;
+			position: absolute;right: -13%;top: -60rpx;
+		}
+		icon::after{
+			content: '';width: 52rpx;height: 52rpx;@include ezy-no-repeat-cover;
+			background-image: url("@/static/images/common/close-icon.png");
+		}
+	}
+	
+	.dyml-item-box{
+		width: 670rpx;height: 97rpx;line-height: 97rpx;font-size: 32rpx;color: #333;
+		@include ezy-no-repeat-cover;margin: 24rpx auto;position: relative;
+		display: flex;
+		.dy-num{width: 180rpx;padding-left: 24rpx;box-sizing: border-box;flex-shrink: 0;}
+		.dy-title{margin: 0 84rpx 0 16rpx;@include single-line-ellipsis;}
+		icon{width: 100rpx;height: 97rpx;display: flex;align-items: center;justify-content: center;
+		position: absolute;right: 0;z-index: 3;top: 0;}
+		icon::after{
+			content: '';width: 37rpx;height: 39rpx;@include ezy-no-repeat-cover;
+			background-image: url("@/static/images/xuexi/dyml-item-btn.png");
+		}
+	}
+	.dyml-item-box:nth-child(odd){background-image: url("@/static/images/xuexi/dy-item-bj1.png");}
+	.dyml-item-box:nth-child(even){background-image: url("@/static/images/xuexi/dy-item-bj2.png");}
 }

pages/xinshuxue/components/danyuanMulu.vue

@@ -1,17 +1,18 @@
 <template>
 	<uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
 		mask-background-color="rgba(255, 255, 255, 0.1);" type="bottom">
-		<view class="xuexi-dagang-page">
+		<view class="xuexi-dyml-page">
 			<!-- 头部 -->
-			<view class="dagang-title">
+			<view class="dyml-title">
 				<text>单元目录</text>
 				<icon @click="goUpPage"></icon>
 			</view>
 			<!-- 目录 -->
-			<view class="xuexi-dagang-body">
-				<view v-for="item in list" @click="handleSelect" :key="item.danyuanId">
-					<text>{{item.danyuanName}}</text>
-					<text>{{item.intro}}</text>
+			<view class="xuexi-dyml-body">
+				<view class="dyml-item-box" v-for="item in list" @click="handleSelect" :key="item.danyuanId">
+					<text class="dy-num">{{item.danyuanName}}</text>
+					<text class="dy-title">{{item.intro}}</text>
+					<icon></icon>
 				</view>
 			</view>
 		</view>