最终版

pages/club/club.vue

@@ -155,7 +155,7 @@ loadShows();
     cursor: pointer;
     color: #72706a;
     border-radius: 10%;
-	width: 75px;
+	width: 70px;
 	height: 30px;
 }
 .text-container{
@@ -183,6 +183,7 @@ loadShows();
 .h3{
     padding: 10px;
     margin: 0;
+	font-size: 16px;
 }
 
 .h2 {
@@ -195,11 +196,11 @@ loadShows();
     display: flex;
     justify-content: space-between;
 }
-.h3{
+/* .h3{
         display: inline-block;
         font-size: 20px;
         
-}
+} */
 .sub-topic {
     margin: 10px 0;
     padding: 10px;
@@ -230,8 +231,9 @@ loadShows();
   position: relative;
 }
 .sub-image{
-	width: 120px;
-	height: 80px;
+	width: 90%;
+	height: 90%;
+	
 }
 .player{
 	position: absolute;

pages/home/home.vue

@@ -8,88 +8,25 @@
 						<view class="articleimage" v-for="(article, subIndex) in group" :key="subIndex">
 							<view class="el-image">
 								<img :src="article.cover" alt="文章图片"></img>
-								<text class="play-icon"></text>
-								<text class="corner-mark">{{ article.cornerMark }}</text>
-							</view>
-							<view class="articleinfo">
-								<text class="articletitle">{{ article.name }}</text><br>
-								<text class="avatarName">
-									{{ article.user.username }}
-								</text>
-							</view>
-						</view>
-					</view>
-				</li>
-			</ul>
+								<view class="play-icon-container">
+									<text class="play-icon" v-if="article.flagType===1"></text>
+								<text class="play-icon-background" v-if="article.flagType===1"></text>
 								</view>
-	</view>
-
-
-
-<!--      <div class="sidebar-right" style="width: 400px; float: right;">
-        <div>
-          <img
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAHJSURBVFiF1ZhRkoMgDIb/OD1CPc/SWe5Vey86i+dx75B9KHHEWsEItvu/tFYGviaQkBCUGqw1AECM6+RnEz49ADChB4DWuU67DinAOmJ8TWBy5ZnQb4XNBgxg1/TItJhwywVNAg7WGmL87KZaUA5os/YyWK0KHPDYv4O13eqYVy9KujSlNUsuAh4JJ3oF+QT4DjjREmQE+E44ERMurXNenqND8m64wBAdyhEwdZqO1JRlBNRYjwk3hLRWUlOWBtBZTzb0+e4uAbSohKkBgJBbt8rLlwBKJUGFSVxsSkxaGNQM1pqmxuFonetKWXM1F+9RCWsS49oo91+29oJWs+Bcwe2bTzz9flvWLDhPSVu0Zc3DLKjVCY94Zo5YLNzOt2Qsf6pGM5P2plQdcART7HQm9Ccm3IjLu3h05865i1uwFBjwCE1NCBV+72RAVAWaAtN5IFiQCf0eN4+1syqiLkvaJmNNogjYPvwxTRskqfPdETAJ1IpcKTHNFOR6YomqOm3aKy2xHjBLdUy4HI8Ta+7JCLB1zteoL3KVLNxFH936EH1080h0BGSqR5jTwKwGmXPp/f8t4Lk+tom+JKmpJ5WhERgZI2FLW7/8AexhA1wjeFcZAAAAAElFTkSuQmCC"
-            alt style="width: 20px; height: 20px; margin-right: 5px; vertical-align: middle;">精选视频
-        </div>
-        <ul class="data-list" >
-          <li class="data-list-li articleList" v-for="(article, index) in articleData" :key="index">
-    <div class="articleimg">
-      <div class="el-image articleimg-img" >
-        <img :src="article.cover" alt="文章图片">
-        <span class="play-time">{{ article.videoDuration }}</span>
-      </div>
-    </div>
-    <div class="articleinfo">
-      <h5>{{ article.name }}</h5>
-      <span class="homepage-list-li-see">
-        <img :src="seeSrc" alt="浏览量图标">
-        {{ article.viewCount }}
-      </span>
-      <span class="articleinfo-time">{{ article.releaseTime }}</span>
-    </div>
-  </li>
-</ul>
-      </div> -->
-
 
-<!--    <view class="class123">
-        <view class="container" style="width: 100%;">
-            <view class="title"><b>推荐</b></view>
-            <ul class="data-list">
-                <li class="data-list-li articleList" v-for="(group, index) in chunk(articleData.value, 2)" :key="index">
-                    <view class="article-row flex-row">
-                        <view class="articleimage" v-for="(article, subIndex) in group" :key="subIndex" style="width: 48%; margin-right: 2%;" v-if="subIndex < 2">
-                            <view class="el-image">
-                                <img :src="article.cover" alt="文章图片"></img>
-                                <text class="play-icon"></text>
 								<text class="corner-mark">{{ article.cornerMark }}</text>
 							</view>
 							<view class="articleinfo">
-                                <text class="articletitle">{{ article.name }}</text><br>
-                                <text class="avatarName">
+								<view class="articletitle">{{ article.name }}</view><br>
+								<view class="avatarName">
 									{{ article.user.username }}
-                                </text>
 								</view>
 							</view>
-                        <view class="articleimage" v-for="(article, subIndex) in group" :key="subIndex" style="width: 100%; margin-top: 10px;" v-if="subIndex === 2">
-                            <view class="el-image">
-                                <img :src="article.cover" alt="文章图片"></img>
-                                <text class="play-icon"></text>
-                                <text class="corner-mark">{{ article.cornerMark }}</text>
-                            </view>
-                            <view class="articleinfo">
-                                <text class="articletitle">{{ article.name }}</text><br>
-                                <text class="avatarName">
-                                    {{ article.user.username }}
-                                </text>
-                            </view>
 						</view>
 					</view>
 				</li>
 			</ul>
 		</view>
-    </view> -->
+	</view>
 </template>
 
 <script setup>
@@ -128,6 +65,14 @@ function chunk(arr, size = 2) {
 <style lang="scss">
 	.class123 {
 		background-color: #f1f1f1;
+		width: 100%;
+	}
+	.play-icon-container {
+	  width: 30px;
+	  /* 可以根据需求调整这个容器宽度，用于控制整体大小和布局 */
+	  height: 30px;
+	  /* 可以根据需求调整这个容器高度，用于控制整体大小和布局 */
+	  position: absolute;
 	}
 
 	.play-icon {
@@ -137,9 +82,23 @@ function chunk(arr, size = 2) {
 		border-width: 10px 0 10px 16px;
 		border-color: transparent transparent transparent rgba(255, 255, 255, 1);
 		position: absolute;
-		top: 35%;
-		left: 50%;
-		transform: translate(-50%, -50%);
+		bottom: 200%;
+		left: 170%;
+		transform: translate(200%, -50%);
+		z-index: 1;
+	}
+
+	.play-icon-background {
+	  content: "";
+	  width: 35px;
+	  height: 35px;
+	  border-radius: 50%;
+	  background-color: rgba(0, 0, 0, 0.6);
+	  position: absolute;
+	  bottom: 210%;
+	  left: 120%;
+	  transform: translateX(100%);
+	  z-index: 0;
 	}
 
 	.daohang {
@@ -156,8 +115,7 @@ function chunk(arr, size = 2) {
 	}
 
 	.title {
-		margin-left: 7px;
-		font-size: 18px;
+		font-size: 22px;
 		color: #000000;
 		padding: 10px 0;
 	}
@@ -176,13 +134,14 @@ function chunk(arr, size = 2) {
 	.article-row {
 		display: flex;
 		justify-content: space-between;
+		width: 100%;
 	}
 
 	.articleimage {
 		position: relative;
-		width: 50%;
+		width: 48%;
 		height: 50%;
-		margin-right: 10px;
+		margin: 3px;
 		border-radius: 5px;
 		overflow: hidden;
 	}
@@ -195,7 +154,6 @@ function chunk(arr, size = 2) {
 	}
 
 	.articleinfo {
-		position: relative;
 		// bottom: 0;
 		// left: 0;4
 		width: 100%;
@@ -211,11 +169,12 @@ function chunk(arr, size = 2) {
 		padding: 0;
 		font-size: 14px;
 		color: #000000;
+		width: 95%;
 	}
 
 	.avatarName {
 		margin-left: 0;
-		display: inline-block;
+		margin-top: -12px;
 		font-size: 12px;
 		color: gray;
 	}

pages/live/live.vue

@@ -49,11 +49,15 @@
 	function getLive() {
 		liveApi.getLiveList()
 			.then(resp => {
-				if (resp.code == 0) {
-					liveList.value = resp.data.liveList;
+				if (resp.code == 200) {
+					liveList.value = resp.data;
 					console.log(liveList.value);
 				} else {
-					alert("获取直播列表失败，请联系管理员");
+					uni.showToast({
+						title: '获取直播列表失败，请联系管理员',
+						icon:'error',
+						duration: 2000
+					});
 				}
 			})
 	}
@@ -77,11 +81,19 @@
 	function booking(liveId, userId) {
 		liveApi.addReservation(liveId, userId)
 			.then(resp => {
-				if (resp.code == 0) {
+				if (resp.code == 200) {
 					getLive();
-					alert("预约成功！");
+					uni.showToast({
+						title: '预约成功',
+						icon:'success',
+						duration: 2000
+					});
 				} else {
-					alert("预约失败！请联系管理员");
+					uni.showToast({
+						title: '预约失败',
+						icon:'error',
+						duration: 2000
+					});
 				}
 			})
 
@@ -90,10 +102,18 @@
 	function cancelBooking(liveId, userId) {
 		liveApi.cancelReservation(liveId, userId)
 			.then(resp => {
-				if (resp.code == 0) {
-					alert("取消预约成功！");
+				if (resp.code == 200) {
+					uni.showToast({
+						title: '取消预约成功',
+						icon:'success',
+						duration: 2000
+					});
 				} else {
-					alert("取消预约失败！请联系管理员");
+					uni.showToast({
+						title: '取消预约失败',
+						icon:'error',
+						duration: 2000
+					});
 				}
 			})
 		getLive();