2

pages/course/tryListen.vue

@@ -4,22 +4,30 @@
 		<public-module></public-module>
 		<z-nav-bar :title="pageTitle"></z-nav-bar>
 		<view class="learnBox box" >
-			<view class="learn flexbox shiting">
-				<view class="item" v-for="(item, index) in courseList" :key="index">
+			<view class="newBox">
+				<view class="item flexbox" v-for="(item, index) in courseList" :key="index">
+					<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
 					<view class="imgcontainer">
 						<image :src="item.image" mode="aspectFit"></image>
 					</view>
-					<view class="buyItems flexbox">
+					<view class="buyItems">
 						<view class="txt555">
 							{{item.title}}
 						</view>
-						<!-- <view class="buybtn" @click="onPageJump()">
-							<span>购买</span>
-						</view> -->
+						<view class="jianjie" v-html="item.content">
+			
+						</view>
+						<view class="tag-view">
+							<uni-tag style="margin-right: 10rpx;" text="高级" type="primary" size="small" />
+							<uni-tag style="margin-right: 10rpx;" text="选修" size="small" type="success" />
+						</view>
+						<view class="btn_box">
+							<text>课程详情</text>
+						</view>
 					</view>
-		
+					
 				</view>
-			</view>	
+			</view>
 					<u-divider v-show="status == 2" text="已加载全部"></u-divider>
 					<u-divider v-show="status == 3" text="暂无数据"></u-divider>
 					<u-divider v-show="status == 1" text="加载中..."></u-divider>
@@ -137,7 +145,57 @@
 		@include pleft_right(10px);
 		min-height: calc(100vh - 270rpx);
 	}
-
+	.newBox {
+	
+		.item {
+			margin-bottom: 20rpx;
+			background-color: #fff;
+			border-radius: 20rpx;
+			@include ptop_bottm(10px);
+			@include pleft_right(10px);
+	
+			@include mshadow(10px, 1) .imgcontainer {
+				display: block;
+				width: 110rpx;
+				margin-right: 20rpx;
+				// background-size: cover;
+				// background-position: center;
+				height: 200rpx;
+				flex-grow: 1;
+				// @include ptop_bottm(10px);
+				overflow: hidden;
+	
+				// @include pleft_right(10px);
+				image {
+					width: 100%;
+					height: 200rpx;
+				}
+			}
+			.btn_box{ text-align: right;
+				text{
+					border-radius: 20rpx;
+					padding: 3px 5px;  @include theme("btn_bg");
+					font-size: 28rpx; color: #fff;
+				}
+			}
+			.buyItems {
+				width: 60%;
+			}
+	
+			.jianjie {
+				margin-top: 10rpx;
+				font-size: 24rpx;
+				@include bov();
+				color: #9c9c9c;
+			}
+	
+			.txt555 {
+				font-size: 30rpx;
+				color: #000;
+				@include bov()
+			}
+		}
+	}
 	.learnBox {
 		background-color: #fff;
 		margin-top: 10px;