完成页面 UI 优化

components/CommentSection/CommentSection.vue

@@ -8,29 +8,30 @@
 				<text class="comment-count">共 {{ tableTotal }} 条评论</text>
 			</view>
 
-			<CComment v-if="userInfo.user_id"   ref="ccRef" :myInfo="userInfo" :userInfo="author" :tableData="tableData"
+			<CComment v-if="userInfo.user_id" ref="ccRef" :myInfo="userInfo" :userInfo="author" :tableData="tableData"
 				:tableTotal.sync="tableTotal" :deleteMode="deleteMode" @likeFun="likeFun" @replyFun="replyFun"
 				@deleteFun="deleteFun" :isComment="articleInfo.can_comment"></CComment>
 
-		<!-- 	<view class="comment-button" @tap="openComment">
+			<!-- 	<view class="comment-button" @tap="openComment">
 				<text class="fa fa-pencil"></text>
 				<text>发表新评论</text>
 			</view> -->
+			<view style="height: 110rpx;width: 100%;"></view>
 			<view class="bottomFixed">
 				<view class="inbutBox" @tap="openComment">
 					<view class="left-box">
-						<image src="@/static/icon/cz_icon_xiugaifengmian.png"></image>
+						<image src="@/static/icon/sy_icon_fabiao.png"></image>
 						<text>发表你的想法...</text>
 					</view>
 					<view class="emoji-trigger">
-						<text class="fa fa-smile-o"></text>
+						<!-- <text class="fa fa-smile-o"></text> -->
+						<image style="width: 48rpx ;height: 48rpx;" src="@/static/icon/sy_icon_biaoqing.png"></image>
 					</view>
 				</view>
 				<view class="giveTheThumbsUpBox" @click="giveTheThumbsUp()">
 					<image v-if="!isLikeFalg" src="@/static/icon/icon-19.png"></image>
 					<image v-else src="@/static/icon/icon-18.png"></image>
-
-					{{ articleInfo.num_like }}
+					<span :style="{ color: isLikeFalg ? '#8de10b' : '#999' }">{{ articleInfo.num_like }}</span>
 				</view>
 			</view>
 		</template>
@@ -54,7 +55,7 @@ export default {
 			type: Object,
 			required: true
 		},
-		 
+
 		articleInfo: {
 			// type 
 			default: () => ({ is_like: 0 })
@@ -89,7 +90,7 @@ export default {
 	},
 	created() {
 		this.loadCommentData();
-		this.getInfoData() 
+		this.getInfoData()
 	},
 	onMounted() {
 
@@ -245,7 +246,7 @@ export default {
 						if (res.data.success === "yes") {
 							callback(res.data.comment);
 							this.loadCommentData(); // 重新加载评论列表
-						}else{
+						} else {
 							uni.showToast({
 								title: res.data.str,
 								icon: 'none'
@@ -316,10 +317,10 @@ export default {
 					'content-type': 'application/json'
 				},
 				success: (res) => {
-				 
-						this.userInfo = res.data;
-						console.log("获取用户信息成功:", res.data); 
-					 
+
+					this.userInfo = res.data;
+					console.log("获取用户信息成功:", res.data);
+
 				}
 			});
 		},
@@ -332,13 +333,14 @@ export default {
 	background-color: #fff;
 	padding: 20rpx;
 	margin-top: 20rpx;
-	border-radius: 12rpx;
+	border-radius: 12rpx; 
 
 	.section-header {
 		display: flex;
 		align-items: center;
 		margin-bottom: 20rpx;
 		padding-left: 28rpx;
+
 		.fa {
 			font-size: 36rpx;
 			color: #666;
@@ -391,13 +393,14 @@ export default {
 		height: 104rpx;
 		padding: 20rpx 32rpx 16rpx 32rpx;
 		background-color: #fff;
-		// position: fixed;
+		position: fixed;
+		z-index: 99;
 		left: 0;
 		bottom: var(--window-bottom);
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-
+		border-top: #F6F6F6 solid 2rpx;
 		.inbutBox {
 			background: #F6F6F6;
 			border-radius: 34rpx;
@@ -411,7 +414,12 @@ export default {
 			.left-box {
 				display: flex;
 				align-items: center;
+				color: #999;
 
+				image {
+					width: 32rpx;
+					height: 32rpx;
+				}
 			}
 
 			image {
@@ -421,7 +429,12 @@ export default {
 			}
 
 			.emoji-trigger {
-				font-size: 48rpx;
+				display: flex;
+				align-items: center;
+
+				image {
+					margin: 0 !important;
+				}
 			}
 		}
 

components/cc-comment/cc-comment.vue

@@ -39,8 +39,8 @@
 			</view>
 		</view>
 		<!-- 评论弹窗 -->
-		<uni-popup ref="cPopupRef" type="bottom" @change="popChange">
-			<view class="c_popup_box">
+		<uni-popup ref="cPopupRef" type="bottom" @change="popChange" style="z-index: 100;">
+			<view class="c_popup_box" >
 				<view class="reply_text">
 					<template v-if="Object.keys(replyTemp).length">
 						<span class="text_aid">回复给</span>
@@ -581,6 +581,7 @@ export default {
 .c_total {
 	padding: 20rpx 30rpx 0 28rpx;
 	font-size: 28rpx;
+	display: none;
 }
 
 .empty_box {
@@ -601,28 +602,34 @@ export default {
 }
 
 .c_comment {
-	padding: 20rpx 30rpx;
+	padding: 10rpx 30rpx;
 	font-size: 28rpx;
 
 	.children_item {
-		padding: 10rpx 0rpx 10rpx 0rpx;
+		padding: 6rpx 0rpx 6rpx 0rpx;
 		margin-top: 10rpx;
-		margin-left: 80rpx;
+		margin-left: 96rpx;
 		// background-color: $uni-bg-color-grey;
-
+		::v-deep.user_avatar{
+			width: 44rpx;
+			height: 44rpx;
+		}
 		.expand_reply,
 		.shrink_reply {
 			margin-top: 10rpx;
-			margin-left: 80rpx;
-
+			margin-left: 65rpx;
+			display: inline-flex;
+			align-items: center;
 			.txt {
-				font-weight: 600;
+				font-weight: 500;
 				color: $uni-color-primary;
 				font-size: 26rpx !important;
 			}
 
 			.uni-icons {
 				font-size: 30rpx !important;
+				display: inline-block;
+				padding-top: 2rpx;
 			}
 		}
 	}

components/cc-comment/componets/common.vue

@@ -1,35 +1,36 @@
 <template>
   <view class="comment_item">
-    <view class="top">
-      <view class="top_left" @click="goToUserHomepage(data.user_id)">
-        <img  class="user_avatar" :src="data.user_avatar" />
-        <uni-tag v-if="data.author" class="tag" type="primary" :inverted="false" text="作者" size="mini" circle />
-        <span class="user_name">{{ data.user_name }}</span>
-        <span class="user_name">{{ cReplyName }}</span>
+    <img class="user_avatar" @click="goToUserHomepage(data.user_id)" :src="data.user_avatar" />
+    <view class="comment_content">
+      <view class="top">
+        <view class="top_left" @click="goToUserHomepage(data.user_id)">
+          <uni-tag v-if="data.author" class="tag" type="primary" :inverted="false" text="作者" size="mini" circle />
+          <span class="user_name">{{ data.user_name  }}</span>
+          <span class="user_name cReplyName" v-if="cReplyName">▸</span>
+          <span class="user_name">{{ cReplyName }}</span>
+        </view>
       </view>
-      <view class="top_right" @click="likeClick(data)">
-        <span :class="[data.is_like ? 'active' : '', 'like_count']">{{ cLikeCount }}</span>
-        <uni-icons v-show="data.is_like" type="hand-up-filled" size="24" color="#8de10b"></uni-icons>
-        <uni-icons v-show="!data.is_like" type="hand-up" size="24" color="#999"></uni-icons>
+      <view class="content" @click="replyClick(data)">
+        {{ c_content }}
+        <span class="shrink" v-if="isShrink" @click.stop="expandContentFun(data.user_content)">...展开</span>
+        <span class="shrink" v-if="!isShrink && user_content.length > contentShowLength"
+          @click.stop="shrinkContentFun(data.user_content)">
+          收起</span>
       </view>
-    </view>
-    <view class="content" @click="replyClick(data)">
-      {{ c_content }}
-      <span class="shrink" v-if="isShrink" @click.stop="expandContentFun(data.user_content)">...展开</span>
-      <span
-        class="shrink"
-        v-if="!isShrink && user_content.length > contentShowLength"
-        @click.stop="shrinkContentFun(data.user_content)"
-      >
-        收起</span
-      >
-    </view>
-    <view class="bottom">
-      <span class="create_time">{{ data.create_time }}</span>
-      <span v-if="data.owner" class="delete" @click="deleteClick(data)">删除</span>
-      <!-- <span v-else class="reply" @click="replyClick(props.data)"
+      <view class="bottom">
+        <view>
+          <span class="create_time">{{ data.create_time }}</span>
+          <span v-if="data.owner" class="delete" @click="deleteClick(data)">删除</span>
+        </view>
+        <!-- <span v-else class="reply" @click="replyClick(props.data)"
           >回复</span
         > -->
+        <view class="bottom_right" @click="likeClick(data)">
+          <image style="width: 32rpx; height: 32rpx;" v-show="!data.is_like" src="@/static/icon/icon-19.png"></image>
+          <image style="width: 32rpx; height: 32rpx;" v-show="data.is_like" src="@/static/icon/icon-18.png"></image>
+          <span :class="[data.is_like ? 'active' : '', 'like_count']">{{ cLikeCount }}</span>
+        </view>
+      </view>
     </view>
   </view>
 </template>
@@ -40,7 +41,7 @@ export default {
     // 评论数据
     data: {
       type: Object,
-      default: () => {},
+      default: () => { },
     },
   },
   data() {
@@ -55,7 +56,7 @@ export default {
   computed: {
     // 被回复人名称
     cReplyName: function () {
-      return this.data?.reply_name ? ` ▸ ` + this.data?.reply_name : "";
+      return this.data?.reply_name ? this.data?.reply_name : "";
     },
     // 点赞数显示
     cLikeCount: function () {
@@ -97,18 +98,18 @@ export default {
     deleteClick(item) {
       this.$emit("deleteClick", item);
     },
-	goToUserHomepage(id) {
-	  uni.$emit('check_login', () => {
-	    if (!id) {
-	      return;
-	    }
-	    uni.navigateTo({
-	      url: "/pages/my/userHomepage?id=" + id,
-	    });
-	  })
-	},
+    goToUserHomepage(id) {
+      uni.$emit('check_login', () => {
+        if (!id) {
+          return;
+        }
+        uni.navigateTo({
+          url: "/pages/my/userHomepage?id=" + id,
+        });
+      })
+    },
   },
-  mounted() { 
+  mounted() {
     this.user_content = this.data.user_content;
     this.isShrink = this.user_content.length > this.contentShowLength;
     this.c_content = this.isShrink ? this.user_content.slice(0, this.contentShowLength + 1) : this.user_content;
@@ -122,75 +123,128 @@ export default {
   display: flex;
   align-items: center;
 }
+
 .ellipsis {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
 ////////////////////
 .comment_item {
   font-size: 28rpx;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 16rpx;
+  .user_avatar {
+    width: 68rpx;
+    height: 68rpx;
+    border-radius: 50%;
+    margin-right: 20rpx;
+  }
+
+  .comment_content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+  }
+
   .top {
     @extend .center;
     justify-content: space-between;
     width: 100%;
+
     .top_left {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       overflow: hidden;
-      .user_avatar {
-        width: 68rpx;
-        height: 68rpx;
-        border-radius: 50%;
-        margin-right: 12rpx;
-      }
+
+
+
       .tag {
         margin-right: 6rpx;
       }
+
       .user_name {
         @extend .ellipsis;
         max-width: 180rpx;
         color: #8c8c8c;
       }
     }
+
     .top_right {
       @extend .center;
       margin-left: auto;
       min-width: 60rpx;
       justify-content: flex-end;
+
       .like_count {
         color: #8c8c8c;
+
         &.active {
           color: #8de10b;
         }
       }
     }
   }
+
   .content {
-    padding: 10rpx;
-    margin-left: 70rpx;
-    color: #333;
+    padding: 12rpx; 
+    padding-left: 0;
+    color: #1f1f1f;
+    font-family: "PingFang SC Bold";
+    font-weight: 400;
+
     &:active {
       background-color: #f2f2f2;
     }
+
     .shrink {
       padding: 20rpx 20rpx 20rpx 0rpx;
       color: #007aff;
     }
   }
-  .bottom {
-    padding-left: 80rpx;
+
+  .bottom { 
     font-size: 24rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
     .create_time {
       color: #8c8c8c;
     }
+
     .delete {
       padding: 20rpx 20rpx 0 20rpx;
       color: #c0c0c0;
     }
+
     .reply {
       color: #007aff;
     }
+
+    .bottom_right {
+      @extend .center;
+      margin-left: auto;
+      min-width: 60rpx;
+      justify-content: flex-end;
+
+      .like_count {
+        color: #8c8c8c;
+
+        &.active {
+          color: #8de10b;
+        }
+      }
+    }
+  }
+  .cReplyName{
+    display: inline-block;
+    padding: 0 6rpx;
   }
 }
 </style>

pages.json

@@ -331,12 +331,14 @@
 		}, {
 			"path": "pages/isLand/mainLand",
 			"style": {
-				"navigationBarTitleText": "主大陆"
+				"navigationBarTitleText": "主大陆",
+				"navigationStyle": "custom"
 			}
 		}, {
 			"path": "pages/isLand/homeLand",
 			"style": {
-				"navigationBarTitleText": "主岛"
+				"navigationBarTitleText": "主岛",
+				"navigationStyle": "custom"
 			}
 		}, {
 			"path": "pages/isLand/HuaTian",

pages/index/articleDetail.scss

@@ -46,21 +46,21 @@ page {
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    margin-left: 10rpx;
+    // margin-left: 10rpx;
 
     .navbar-title {
       display: flex;
       align-items: center;
 
       .navbar-avatar {
-        width: 50rpx;
-        height: 50rpx;
-        border-radius: 25rpx;
+        width: 60rpx;
+        height: 60rpx;
+        border-radius: 50%;
         margin-right: 10rpx;
       }
 
       .navbar-text {
-        font-size: 32rpx;
+        font-size: 28rpx;
         font-weight: bold;
         color: #333;
         margin-right: 10rpx;
@@ -111,10 +111,11 @@ page {
 }
 // 轮播图样式
 ::v-deep.swiper-box {
-  padding-bottom: 32rpx;
+  padding-bottom: 48rpx;
+  border-radius: 0 !important;
   .uv-swiper__wrapper__item__wrapper__image {
-    width: 100%;
-
+    width: 100%; 
+    border-radius: 0 !important;
     background-color: transparent !important;
   }
   .uv-swiper__indicator {
@@ -227,7 +228,6 @@ page {
 .body {
   width: 750rpx;
   border-radius: 40rpx 40rpx 0 0;
-  padding-top: 30rpx;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -239,7 +239,7 @@ page {
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
-    padding: 40rpx 50rpx 20rpx;
+    padding: 38rpx 32rpx 0 32rpx;
     width: 100%;
     box-sizing: border-box;
 
@@ -252,7 +252,7 @@ page {
 
     .article-content {
       width: 100%;
-      padding-top: 40rpx;
+      padding-top: 12rpx;
       padding-bottom: 28rpx;
       .content {
         font-family: "PingFang SCMedium";
@@ -265,13 +265,13 @@ page {
       max-width: 500rpx;
       height: 120rpx;
       border-radius: 12rpx;
-      border: 2rpx solid #f2f6f2;
+      border: 4rpx solid #f2f6f2;
       padding: 10rpx;
       box-sizing: border-box;
       display: flex;
       flex-direction: flex-start;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+      // box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
       
       &:active {
         transform: scale(0.98);
@@ -296,14 +296,13 @@ page {
         
         .tit {
           font-family: "PingFang SC-Bold";
-          font-family: PingFang SC, PingFang SC;
           font-weight: 400;
           font-size: 24rpx;
           transition: all 0.3s ease;
+          color: 1f1f1f;
         }
         .tex {
           font-family: "PingFang SC-Medium";
-          font-family: PingFang SC, PingFang SC;
           font-size: 20rpx;
           color: #999999;
           line-height: 28rpx;
@@ -696,7 +695,8 @@ page {
   background-color: #f8f8f8;
   padding: 30rpx 0;
   margin-top: 20rpx;
-  border-radius: 30rpx 30rpx 0 0;
+  // border-radius: 30rpx 30rpx 0 0;
+  border-radius: 0;
 
   .section-header {
     display: flex;

pages/index/articleDetail.vue

@@ -44,7 +44,7 @@
 
 		<template v-if="isMessage">
 			<!--  轮播图部分 -->
-			<uv-swiper v-if="articleInfo.type == 'user'" class="swiper-box" height="1032rpx" :list="swperImages"
+			<uv-swiper v-if="articleInfo.type == 'user'" class="swiper-box" height="1048rpx" :list="swperImages"
 				indicator indicatorMode="dot" bgColor="#fff" :autoplay="false" @click="previewImage">
 			</uv-swiper>
 

pages/index/workDetail.scss

@@ -46,21 +46,21 @@ page {
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    margin-left: 10rpx;
+    // margin-left: 10rpx;
 
     .navbar-title {
       display: flex;
       align-items: center;
 
       .navbar-avatar {
-        width: 50rpx;
-        height: 50rpx;
-        border-radius: 25rpx;
+        width: 60rpx;
+        height: 60rpx;
+        border-radius: 50%;
         margin-right: 10rpx;
       }
 
       .navbar-text {
-        font-size: 32rpx;
+        font-size: 28rpx;
         font-weight: bold;
         color: #333;
         margin-right: 10rpx;

pages/isLand/homeLand.scss

@@ -37,25 +37,45 @@
   }
 
   /* 第一层：UI层（最上层） */
-  .ui-layer {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-    z-index: 100;
+  // .ui-layer {
+    // position: fixed;
+    // top: 0;
+    // left: 0;
+    // right: 0;
+    // bottom: 0;
+    // pointer-events: none;
+    // z-index: 100;
     
     /* UI层内部元素需要启用交互 */
     .ui-content {
-      position: absolute;
-      top: 120rpx;
-      right: 20rpx;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: 100;
       pointer-events: none; /* 默认不接收事件 */
       z-index: 101;
       display: flex;
       flex-direction: column;
       align-items: flex-end;
+      padding-right: 20rpx;
+      .status-bar {
+        height: var(--status-bar-height);
+      }
+      .customHead{
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        padding-left: 20rpx;
+        padding-top: 35rpx;
+        box-sizing: border-box;
+        .back-button {
+          width: 56rpx;
+          height: 56rpx;
+          pointer-events: auto;
+        }
+      }
     }
     
     .currency-display {
@@ -118,7 +138,7 @@
         }
       }
     }
-  }
+  // }
 
   /* 示例按钮样式 */
   .dialog-button {

pages/isLand/homeLand.vue

@@ -1,68 +1,78 @@
 <template>
- <view class="home-land-container">
-    <!-- 第三层：背景 -->
-    <view class="background-layer"></view>
-  
-    <!-- 第二层：地图 -->
+	<view class="home-land-container">
+		<!-- 第三层：背景 -->
+		<view class="background-layer"></view>
+
+		<!-- 第二层：地图 -->
     <view class="map-layer" id="mapLayer" :style="{ transform: `translateX(${translateX}px)` }" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @mousedown="onmousedown" @mousemove="onmousemove" @mouseup="onmouseup">
       <image class="island-image" src="/static/island/island.png" mode="widthFix" style="width:1536rpx; bottom: 0rpx;left: 0rpx; position: absolute;"></image>
-      <view style="position: absolute;width: 670rpx;left: 340rpx; bottom:320rpx;align-items: center;">
+			<view style="position: absolute;width: 670rpx;left: 340rpx; bottom:320rpx;align-items: center;">
         <image class="house-image" src="/static/island/building/home1.png" mode="widthFix" style="width:670rpx; position: static;" @click="onHouseClick" :animation="houseAnimationData">	</image>
-      </view>
+			</view>
 
-      <view style="position: absolute;width: 300rpx;left:280rpx; bottom:200rpx;align-items: center;">
+			<view style="position: absolute;width: 300rpx;left:280rpx; bottom:200rpx;align-items: center;">
         <image class="table-image" src="/static/island/building/workTable.png" mode="widthFix" style="width:670rpx; position: static;" @click="onTableClick" :animation="tableAnimationData">	</image>
-      </view>
+			</view>
 
-      <view style="position: absolute;width:200rpx;left:660rpx; bottom:260rpx;align-items: center;">
+			<view style="position: absolute;width:200rpx;left:660rpx; bottom:260rpx;align-items: center;">
         <image class="mailBox-image" src="/static/island/building/mailBox.png" mode="widthFix" style="width:670rpx; position: static;" >	</image>
-      </view>
+			</view>
 
-      <view style="position: absolute;width:200rpx;left:1000rpx; bottom:450rpx;align-items: center;">
+			<view style="position: absolute;width:200rpx;left:1000rpx; bottom:450rpx;align-items: center;">
         <image class="taskBoard-image" src="/static/island/building/taskBoard.png" mode="widthFix" style="width:670rpx; position: static;" @click="showTask" :animation="taskAnimationData">	</image>
-      </view>
+			</view>
 
-      <!-- 引导箭头 -->
+			<!-- 引导箭头 -->
       <view class="guide-arrow" v-if="showGuideArrow" :style="{ left: guideArrowPosition.x + 'rpx', bottom: guideArrowPosition.y + 'rpx', transform: `rotate(${guideArrowPosition.r}deg)` }">
-        <image src="/static/island/arrow.png" mode="aspectFit"></image>
-      </view>
+				<image src="/static/island/arrow.png" mode="aspectFit"></image>
+			</view>
 
-      <!-- 主岛箭头 -->
+			<!-- 主岛箭头 -->
       <view class="main-arrow" @click="goToMainLand" :animation="mainArrowAnimation" :style="{ opacity: mainArrowVisible ? 1 : 0 }">
-        <!-- <image src="/static/island/main_arrow.png" mode="widthFix" style="width: 100rpx;"></image> -->
+				<!-- <image src="/static/island/main_arrow.png" mode="widthFix" style="width: 100rpx;"></image> -->
 		<view class="arrow" ></view>
-        <text class="main-text">主岛</text>
-
-      </view>
-    </view>
-  
-    <!-- 第一层：UI -->
-    <view class="ui-layer">
-      <view class="ui-content">
-        <!-- 添加货币计数器 -->
-        <view class="currency-display" >
-          <view class="currency-item">
-            <image src="/static/island/UI/wd_icon_coin.png" mode="widthFix" class="currency-icon"></image>
-            <text class="currency-value">{{userInfo.num_gmd}}</text>
-          </view>
-          <view class="currency-item">
-            <image src="/static/island/UI/wd_icon_xingyuan.png" mode="widthFix" class="currency-icon"></image>
-            <text class="currency-value">{{userInfo.num_gmg}}</text>
-          </view>
-        </view>
-        <view class="ui-buttons">
-		  <image src="/static/island/icon_backpack.png" mode="widthFix" style="width:100rpx" @click="showInventory"></image>
-        </view>
-      </view>
-    </view>
-
-    <!-- 对话框组件 -->
-    <backpack-dialog :visible.sync="inventoryVisible" @close="onInventoryClose"></backpack-dialog>
-    <character-dialog :visible.sync="characterVisible" @close="onCharacterClose"></character-dialog>
-    <shop-dialog :visible.sync="shopVisible" @close="onShopClose" @buy="onShopBuy"></shop-dialog>
-    <task-dialog class="task-dialog" :visible.sync="taskVisible" @close="onTaskClose" type="main"></task-dialog>
-    
-    <!-- 引导对话组件 -->
+				<text class="main-text">主岛</text>
+
+			</view>
+		</view>
+
+		<!-- 第一层：UI -->
+		<!-- <view class="ui-layer"> -->
+			<view class="ui-content">
+				<view class="status-bar"></view>
+				<view class="customHead">
+					<!-- 添加返回按钮 -->
+					<view class="back-button" @click="goBack()">
+						<image src="/static/island/UI/back_button.png" mode="widthFix" style="width:100rpx"></image>
+					</view>
+					<!-- 添加货币计数器 -->
+					<view class="currency-display">
+						<view class="currency-item">
+							<image src="/static/island/UI/wd_icon_coin.png" mode="widthFix" class="currency-icon">
+							</image>
+							<text class="currency-value">{{ userInfo.num_gmd }}</text>
+						</view>
+						<view class="currency-item">
+							<image src="/static/island/UI/wd_icon_xingyuan.png" mode="widthFix" class="currency-icon">
+							</image>
+							<text class="currency-value">{{ userInfo.num_gmg }}</text>
+						</view>
+					</view>
+				</view>
+				<view class="ui-buttons">
+					<image src="/static/island/icon_backpack.png" mode="widthFix" style="width:100rpx"
+						@click="showInventory"></image>
+				</view>
+			</view>
+		<!-- </view> -->
+
+		<!-- 对话框组件 -->
+		<backpack-dialog :visible.sync="inventoryVisible" @close="onInventoryClose"></backpack-dialog>
+		<character-dialog :visible.sync="characterVisible" @close="onCharacterClose"></character-dialog>
+		<shop-dialog :visible.sync="shopVisible" @close="onShopClose" @buy="onShopBuy"></shop-dialog>
+		<task-dialog class="task-dialog" :visible.sync="taskVisible" @close="onTaskClose" type="main"></task-dialog>
+
+		<!-- 引导对话组件 -->
     <talk-guide 
       v-if="showTalkGuide"
       :guide-data="currentTalkData"
@@ -71,12 +81,12 @@
       @talk-complete="onTalkComplete"
     ></talk-guide>
 
-    <!-- 制造台对话框组件 -->
-    <crafting-dialog :visible.sync="craftingVisible" @close="craftingVisible = false"></crafting-dialog>
+		<!-- 制造台对话框组件 -->
+		<crafting-dialog :visible.sync="craftingVisible" @close="craftingVisible = false"></crafting-dialog>
 
-    <!-- 引导管理器 -->
-    <guide-manager ref="guideManager"></guide-manager>
-  </view> 
+		<!-- 引导管理器 -->
+		<guide-manager ref="guideManager"></guide-manager>
+	</view>
 </template>
 
 
@@ -106,7 +116,7 @@ export default {
 			startX: 0,
 			currentX: 0,
 			isDragging : false,
-			
+
 			// 获取屏幕宽度和背景宽度
 			screenWidth: 0,
 			backgroundWidth: 0,
@@ -180,7 +190,7 @@ export default {
 			}
 		});
 		this.getUserMoney();
-		
+
 		// 启动定时器，每2秒更新一次铃钱
 		this.moneyTimer = setInterval(() => {
 			this.getUserMoney();
@@ -219,22 +229,22 @@ export default {
 					// 获取岛屿图片的宽度和高度
 					this.backgroundWidth = data.width;
 					this.islandHeight = data.height;
-					
+
 					// 计算最大可移动距离
 					this.maxTranslate = this.backgroundWidth - this.screenWidth;
-					
+
 					// 初始位置居中
 					// this.translateX = -this.maxTranslate / 2;
 					// this.translateX = 0;
-					
+
 					// 打印调试信息
 					// console.log('屏幕宽度:', this.screenWidth);
 					// console.log('背景宽度:', this.backgroundWidth);
 					// console.log('岛屿高度:', this.islandHeight);
 					// console.log('最大可移动距离:',this.maxTranslate);
-					
+
 					// console.log('岛屿data:', data);
-					
+
 				} else {
 					console.error('未能获取岛屿图片的尺寸');
 				}
@@ -244,22 +254,22 @@ export default {
 		touchStart(e) {
 			this.startX = e.touches[0].clientX;
 			this.currentX = this.translateX;
-			console.log('this.startX =',this.startX);
-			console.log('this.currentX =',this.currentX);
+			console.log('this.startX =', this.startX);
+			console.log('this.currentX =', this.currentX);
 		},
 		// 触摸移动
 		touchMove(e) {
 			console.log('----------- touchMove');
 			const moveX = e.touches[0].clientX - this.startX;
 			let newTranslateX = this.currentX + moveX;
-			
+
 			// 限制移动范围，不让背景两侧露出
 			if (newTranslateX > 0) {
 				newTranslateX = 0;
 			} else if (newTranslateX < -this.maxTranslate) {
 				newTranslateX = -this.maxTranslate;
 			}
-			
+
 			this.translateX = newTranslateX;
 			console.log('moveX =',moveX);
 			console.log('this.translateX =',this.translateX);
@@ -270,7 +280,7 @@ export default {
 			this.currentX = this.translateX;
 			console.log('this.currentX =',this.currentX);
 		},
-		
+
 		onmousedown(e) {
 			console.log('----------- onmousedown');
 			console.log('----------- e',e);
@@ -279,26 +289,26 @@ export default {
 			this.currentX = this.translateX;
 			mapLayer.style.cursor = 'grabbing';
 		},
-		
+
 		onmousemove(e) {
 			if(this.isDragging){
 				console.log('----------- onmousemove');
 				const moveX = e.clientX - this.startX;
 				let newTranslateX = this.currentX + moveX;
-				
+
 				//限制移动范围，不让背景两侧露出
 				if (newTranslateX > 0) {
 					newTranslateX = 0;
 				} else if (newTranslateX < -this.maxTranslate) {
 					newTranslateX = -this.maxTranslate;
 				}
-				
+
 				this.translateX = newTranslateX;
 				console.log('moveX =',moveX);
 				console.log('this.translateX =',this.translateX);
 			}
 		},
-		
+
 		onmouseup(e) {
 			console.log('----------- onmouseup');
 			this.isDragging = false;
@@ -309,10 +319,10 @@ export default {
 			if(this.houseAnimating) return;
 			// 处理点击事件
 			console.log('House clicked!');
-			
+
 			// 播放房子的点击动画
 			this.playAnimation('house');
-			
+
 			// uni.showToast({
 			// 	title: 'House clicked!',
 			// 	icon: 'none'
@@ -322,10 +332,10 @@ export default {
 		onTableClick(event) {
 			if(this.tableAnimating) return;
 			console.log('Table clicked!');
-			
+
 			// 播放大厅的点击动画
 			this.playAnimation('table');
-			
+
 			// 显示制造台界面
 			this.craftingVisible = true;
 
@@ -336,10 +346,10 @@ export default {
 			if(this.taskAnimating) return;
 			// 处理点击事件
 			console.log('Task clicked!');
-			
+
 			// 播放大厅的点击动画
 			this.playAnimation('task');
-			
+
 			// uni.showToast({
 			// 	title: 'task clicked!',
 			// 	icon: 'none'
@@ -348,7 +358,7 @@ export default {
 
 		playAnimation(type) {
 			let self = this;
-			
+
 			// 根据类型设置对应的动画状态
 			if (type === 'house') {
 				this.houseAnimating = true;
@@ -366,9 +376,9 @@ export default {
 
 			// 定义果冻动画序列
 			animation.scale(0.95).step({ duration: 100 })
-					.scale(1.05).step({ duration: 100 })
-					.scale(0.98).step({ duration: 100 })
-					.scale(1).step({ duration: 100 });
+				.scale(1.05).step({ duration: 100 })
+				.scale(0.98).step({ duration: 100 })
+				.scale(1).step({ duration: 100 });
 
 			// 根据类型应用动画到对应的元素
 			if (type === 'house') {
@@ -509,7 +519,7 @@ export default {
 			// 调用引导管理器的下一步
 			console.log('----------- onTalkComplete');
 			this.$refs.guideManager && this.$refs.guideManager.nextStep();
-			
+
 			// 获取新的对话数据
 			const newTalkData = this.$refs.guideManager.getCurrentTalkData();
 			console.log('----------- onTalkComplete newTalkData:', newTalkData);
@@ -536,7 +546,7 @@ export default {
 			if (this.$refs.guideManager) {
 				const arrowPosition = this.$refs.guideManager.getCurrentArrowPosition();
 				console.log('----------- checkAndShowGuideArrow arrowPosition:', arrowPosition);
-				
+
 				if (arrowPosition) {
 					// 显示引导箭头
 					this.showGuideArrow = true;
@@ -546,7 +556,7 @@ export default {
 						y: arrowPosition.y,
 						r: arrowPosition.r || 0
 					};
-					
+
 					console.log('----------- guideArrowPosition:', this.guideArrowPosition);
 					console.log('----------- showGuideArrow:', this.showGuideArrow);
 				} else {
@@ -554,7 +564,12 @@ export default {
 					this.showGuideArrow = false;
 				}
 			}
-		}
+		},
+		goBack() { 
+			uni.navigateBack({
+				delta: 1
+			});
+		},
 	},
 	beforeDestroy() {
 		this.mainArrowAnimating = false;
@@ -565,121 +580,123 @@ export default {
 
 <style lang="scss" scoped>
 @import './homeLand.scss';
-.ui-layer {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  z-index: 100;
-
-  .ui-content {
-    position: absolute;
-    top: 20rpx;
-    right: 20rpx;
-    pointer-events: auto;
-    z-index: 101;
-  }
-
-  .ui-buttons {
-    display: flex;
-    flex-direction: column;
-    gap: 20rpx;
-    
-    .ui-button {
-      background: rgba(255, 255, 255, 0.9);
-      border: none;
-      padding: 16rpx 32rpx;
-      border-radius: 8rpx;
-      font-size: 28rpx;
-      color: #333;
-      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-      min-width: 120rpx;
-      
-      &:active {
-        opacity: 0.8;
-        transform: scale(0.95);
-      }
-    }
-  }
-}
+
+// .ui-layer {
+// 	position: fixed;
+// 	top: 0;
+// 	left: 0;
+// 	right: 0;
+// 	bottom: 0;
+// 	pointer-events: none;
+// 	z-index: 100;
+
+	.ui-content {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%; 
+		pointer-events: auto;
+		z-index: 101; 
+	}
+ 
+	.ui-buttons {
+		display: flex;
+		flex-direction: column;
+		gap: 20rpx;
+
+		.ui-button {
+			background: rgba(255, 255, 255, 0.9);
+			border: none;
+			padding: 16rpx 32rpx;
+			border-radius: 8rpx;
+			font-size: 28rpx;
+			color: #333;
+			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+			min-width: 120rpx;
+
+			&:active {
+				opacity: 0.8;
+				transform: scale(0.95);
+			}
+		}
+	}
+// }
 
 .map-layer {
-  position: relative;
-  z-index: 1;
-  cursor: grab;
-  
-  &:active {
-    cursor: grabbing;
-  }
+	position: relative;
+	z-index: 1;
+	cursor: grab;
+
+	&:active {
+		cursor: grabbing;
+	}
 }
 
 .guide-arrow {
-  position: absolute;
-  z-index: 10;
-  width: 100rpx;
-  height: 100rpx;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+	position: absolute;
+	z-index: 10;
+	width: 100rpx;
+	height: 100rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
   pointer-events: none; /* 防止箭头阻挡点击事件 */
-  
-  image {
-    width: 100rpx;
-    height: 100rpx;
+
+	image {
+		width: 100rpx;
+		height: 100rpx;
     animation: pulse 1.5s infinite; /* 添加脉冲动画 */
-  }
+	}
 }
 
 @keyframes pulse {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.2);
-    opacity: 0.8;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
+	0% {
+		transform: scale(1);
+		opacity: 1;
+	}
+	50% {
+		transform: scale(1.2);
+		opacity: 0.8;
+	}
+	100% {
+		transform: scale(1);
+		opacity: 1;
+	}
 }
 
 .main-arrow {
-//   background: rgba(255, 255, 255, 0.9);
-  position: absolute;
-  height: 190rpx;
-  right: 50rpx;
+	//   background: rgba(255, 255, 255, 0.9);
+	position: absolute;
+	height: 190rpx;
+	right: 50rpx;
   bottom: 20rpx;  // 改为 bottom 定位
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
-  z-index: 10;
-  transition: opacity 0.5s ease-in-out;
-
-  .arrow {
-    content: '';
-    display: block;
-    width: 60rpx;
-    height: 60rpx;
-    background: url('/static/island/arrow.png') no-repeat center center;
-    background-size: contain;
-    transform: rotate(270deg);
-  }
-
-  .main-text {
-    color: #ffffff;
-    font-size: 32rpx;
-    text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
-    margin-top: 10rpx;
-  }
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	cursor: pointer;
+	z-index: 10;
+	transition: opacity 0.5s ease-in-out;
+
+	.arrow {
+		content: '';
+		display: block;
+		width: 60rpx;
+		height: 60rpx;
+		background: url('/static/island/arrow.png') no-repeat center center;
+		background-size: contain;
+		transform: rotate(270deg);
+	}
+
+	.main-text {
+		color: #ffffff;
+		font-size: 32rpx;
+		text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
+		margin-top: 10rpx;
+	}
 }
 .task-dialog{
 	 ::v-deep.dialog-content{
-		  background: transparent !important;
-	  }
+		background: transparent !important;
+	}
 }
-</style> 
+</style>

pages/isLand/mainLand.scss

@@ -39,27 +39,46 @@
     }
 
     /* 第一层：UI层（最上层） */
-    .ui-layer {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      pointer-events: none;
-      z-index: 100;
+    // .ui-layer {
+    //   position: fixed;
+    //   top: 0;
+    //   left: 0;
+    //   right: 0;
+    //   bottom: 0;
+    //   pointer-events: none;
+    //   z-index: 100;
       
       /* UI层内部元素需要启用交互 */
       .ui-content {
-        position: absolute;
-        top: 120rpx;
-        right: 20rpx;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        z-index: 100;
         pointer-events: none; /* 默认不接收事件 */
         z-index: 101;
         display: flex;
         flex-direction: column;
         align-items: flex-end;
+        padding-right: 20rpx;
+        .status-bar {
+          height: var(--status-bar-height);
+        }
+        .customHead{
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          padding-left: 20rpx;
+          padding-top: 35rpx;
+          box-sizing: border-box;
+          .back-button {
+            width: 56rpx;
+            height: 56rpx;
+            pointer-events: auto;
+          }
+        }
       }
-      
       .currency-display {
         display: flex;
         flex-direction: row;
@@ -136,4 +155,4 @@
     font-size: 16px;
     color: #333;
   }
-} 
+// } 

pages/isLand/mainLand.vue

@@ -96,8 +96,14 @@
 		</view>
 
 		<!-- 第一层：UI -->
-		<view class="ui-layer">
+		<!-- <view class="ui-layer"> -->
 			<view class="ui-content">
+				<view class="status-bar"></view>
+				<view class="customHead">
+					<!-- 添加返回按钮 -->
+					<view class="back-button" @click="goBack()">
+						<image src="/static/island/UI/back_button.png" mode="widthFix" style="width:100rpx"></image>
+					</view>
 				<!-- 添加货币计数器 -->
 				<view class="currency-display">
 					<view class="currency-item">
@@ -110,6 +116,7 @@
 						<text class="currency-value">{{userInfo.num_gmg}}</text>
 					</view>
 				</view>
+			</view>
 				<view class="ui-buttons">
 					<image src="/static/island/icon_backpack.png" mode="widthFix" style="width:100rpx"
 						@click="showInventory" class="ui-icon-button"></image>
@@ -117,7 +124,7 @@
           <button class="ui-button" @click="showShop">商店</button> -->
 				</view>
 			</view>
-		</view>
+		<!-- </view> -->
 
 
     <!-- 对话框组件 -->
@@ -618,6 +625,11 @@ export default {
 						this.showGuideArrow = false;
 					}
 				}
+			},
+			goBack() {
+				uni.navigateBack({
+					delta: 1
+				});
 			}
 		}
 	}
@@ -627,22 +639,24 @@ export default {
 <style lang="scss" scoped>
 	@import './mainLand.scss';
 
-	.ui-layer {
+	// .ui-layer {
+	// 	position: fixed;
+	// 	top: 0;
+	// 	left: 0;
+	// 	right: 0;
+	// 	bottom: 0;
+	// 	pointer-events: none;
+	// 	z-index: 100;
+
+	.ui-content {
 		position: fixed;
 		top: 0;
 		left: 0;
-		right: 0;
-		bottom: 0;
-		pointer-events: none;
-		z-index: 100;
-
-		.ui-content {
-			position: absolute;
-			top: 20rpx;
-			right: 20rpx;
-			pointer-events: auto;
-			z-index: 101;
-		}
+		width: 100%; 
+		pointer-events: auto;
+		z-index: 101; 
+	}
+ 
 
 		.ui-buttons {
 			display: flex;
@@ -682,7 +696,7 @@ export default {
 				background-repeat: no-repeat;
 			}
 		}
-	}
+	// }
 
 	.map-layer {
 		position: relative;

pages/isLand/talkGuide.vue

@@ -158,9 +158,9 @@ export default {
       color: #987453;
       margin-bottom: 10rpx;
       display: inline-block;
-      background-color: #F8F3E9;
+      background-color: #fddec1;
       padding: 4rpx 16rpx;
-      border-radius: 20rpx;
+      border-radius: 30rpx;
       border: 2rpx solid #DEB691;
       position: absolute;
       top: -25rpx;

pages/makedetail/makeDetail.scss

@@ -47,21 +47,21 @@ page {
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    margin-left: 10rpx;
+    // margin-left: 10rpx;
 
     .navbar-title {
       display: flex;
       align-items: center;
 
       .navbar-avatar {
-        width: 50rpx;
-        height: 50rpx;
-        border-radius: 25rpx;
+        width: 60rpx;
+        height: 60rpx;
+        border-radius: 50%;
         margin-right: 10rpx;
       }
 
       .navbar-text {
-        font-size: 32rpx;
+        font-size: 28rpx;
         font-weight: bold;
         color: #333;
         margin-right: 10rpx;

pages/makedetail/makeImgDetail.scss

@@ -16,7 +16,7 @@
     align-items: center;
     justify-content: space-between;
     padding: 0 24rpx;
-	padding-top: var(--status-bar-height);
+    padding-top: var(--status-bar-height);
     box-sizing: border-box;
     background: url("../../static/makedetail/cz_bg_top.png") center top / 100%
         auto no-repeat,
@@ -216,7 +216,7 @@
     border-radius: 16rpx;
     padding: 24rpx;
     font-size: 28rpx;
-    border: 1rpx solid #f0f0f0;
+    // border: 1rpx solid #f0f0f0;
     transition: border-color 0.3s, box-shadow 0.3s;
 
     &:focus {
@@ -232,7 +232,7 @@
     border-radius: 16rpx;
     padding: 0 24rpx;
     margin-bottom: 24rpx;
-    border: 1rpx solid #f0f0f0;
+    // border: 1rpx solid #f0f0f0;
     transition: border-color 0.3s, box-shadow 0.3s;
 
     &:focus {
@@ -244,14 +244,16 @@
   .tag-group {
     display: flex;
     flex-wrap: wrap;
-    gap: 10rpx;
+    gap: 10rpx 16rpx;
 
     .tag {
-      padding: 18rpx 35rpx 16rpx 35rpx;
+      padding: 9rpx 28rpx 9rpx 28rpx;
       background: #f5f7fa;
       border-radius: 12rpx;
       font-size: 28rpx;
-      color: #666;
+      color: #1f1f1f;
+      font-family: "PingFang SC-Bold";
+      font-weight: 400;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       border: 1rpx solid transparent;
       // box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
@@ -259,9 +261,9 @@
       background: #ffffff;
       position: relative;
       overflow: hidden;
-      
+
       &::after {
-        content: '';
+        content: "";
         position: absolute;
         top: 0;
         left: 0;
@@ -272,22 +274,22 @@
         transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         border-radius: 12rpx;
       }
-      
+
       &:active {
         transform: scale(0.95);
         &::after {
           transform: scale(1);
         }
       }
-      
+
       &.active {
-        background: #f7ffea;
+        // background: #f7ffea;
         border-radius: 12rpx;
         border: 2rpx solid #7ebc00;
         color: #7ebc00;
         font-weight: 500;
-        box-shadow: 0 4rpx 12rpx rgba(126, 188, 0, 0.15);
-        
+        // box-shadow: 0 4rpx 12rpx rgba(126, 188, 0, 0.15);
+
         &::after {
           transform: scale(1);
         }
@@ -301,35 +303,46 @@
 
     .style-item {
       display: inline-block;
-      margin-right: 24rpx;
+      margin-right: 12rpx;
       text-align: center;
       flex-direction: column;
       transition: transform 0.3s;
-      
+      &.active {
+        .image {
+          border: 6rpx solid #acf934;
+          border-radius: 24rpx;
+        }
+        text {
+          // color: #2b85e4;
+          // font-weight: 500;
+        }
+      }
       &:active {
         transform: scale(0.97);
       }
 
       .image {
-        width: 166rpx;
-        height: 166rpx; 
+        width: 175rpx;
+        height: 175rpx;
         margin-bottom: 12rpx;
-        padding: 4rpx;
-        border-radius:16rpx;
+        padding: 8rpx;
+        border-radius: 24rpx;
         // box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
         transition: all 0.3s;
-        border: 4rpx solid transparent;
+        border: 6rpx solid transparent;
         image {
           border-radius: 16rpx;
-          width:100%;
-          height:100%;
+          width: 100%;
+          height: 100%;
         }
       }
 
       text {
         display: block;
         font-size: 26rpx;
-        color: #666;
+        color: #1f1f1f;
+        font-family: "PingFang SC-Bold";
+        font-weight: 400;
         transition: color 0.3s;
       }
     }
@@ -362,9 +375,8 @@
         overflow: hidden;
         box-shadow: none;
         border: 0rpx solid transparent;
-        transform: none;margin: 0 auto;
-        
-
+        transform: none;
+        margin: 0 auto;
       }
       &:active {
         transform: scale(0.98);
@@ -450,19 +462,6 @@
     bottom: 36rpx;
   }
 
-  .style-item {
-    &.active {
-      .image { 
-        border: 4rpx solid #acf934;
-        border-radius: 16rpx;
-      }
-      text {
-        // color: #2b85e4;
-        // font-weight: 500;
-      }
-    }
-  }
-
   .right-info {
     .coin,
     .diamond {

pages/makedetail/makeMusicDetail.scss

@@ -6,17 +6,22 @@
   background: url("../../static/makedetail/cz_bg_top.png") center top / 100%
       auto no-repeat,
     #f2f6f2;
+    min-height: 100vh;
+    padding-bottom: 240rpx;
+    position: relative;
+    left: 0;
+    top: 0;
   .status-bar {
     height: var(--status-bar-height);
   }
-  .nav-bar { 
+  .nav-bar {
     width: 100vw;
     height: calc(96rpx + var(--status-bar-height));
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 24rpx;
-	padding-top: var(--status-bar-height);
+    padding-top: var(--status-bar-height);
     box-sizing: border-box;
     background: url("../../static/makedetail/cz_bg_top.png") center top / 100%
         auto no-repeat,
@@ -62,7 +67,7 @@
       align-items: center;
       font-size: 28rpx;
       font-family: "PingFang SC-Bold";
-      font-weight: 400; 
+      font-weight: 400;
       min-width: 306rpx;
       // width: 260rpx;
       image {
@@ -397,7 +402,7 @@
           top: 0;
           transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
           // box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
-          
+
           &:active {
             transform: scale(0.95);
             // box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);
@@ -416,12 +421,12 @@
             display: none;
             transition: all 0.3s ease;
           }
-          
+
           &.active {
             background: #acf934;
             font-family: "CustomFont" !important;
             box-shadow: 0 4rpx 12rpx rgba(172, 249, 52, 0.3);
-            
+
             .indicator-triangle {
               display: block;
               transform: translateX(-50%) scale(1.2);
@@ -431,17 +436,24 @@
       }
 
       .tags {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10rpx;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 24rpx 18rpx;
         margin-top: 20rpx;
 
         .tag {
-          padding: 18rpx 35rpx 16rpx 35rpx;
+          // padding: 18rpx 35rpx 16rpx 35rpx;
+          width: 152rpx;
+          height: 64rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
           background: #f5f7fa;
-          border-radius: 12rpx;
+          border-radius: 16rpx;
           font-size: 28rpx;
-          color: #666;
+          font-weight: 400;
+          font-family: "PingFang SC-Bold";
+          color: #1f1f1f;
           transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
           border: 1rpx solid transparent;
           // box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
@@ -449,9 +461,9 @@
           background: #ffffff;
           position: relative;
           overflow: hidden;
-          
+
           &::after {
-            content: '';
+            content: "";
             position: absolute;
             top: 0;
             left: 0;
@@ -460,24 +472,24 @@
             background: rgba(126, 188, 0, 0.1);
             transform: scale(0);
             transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            border-radius: 12rpx;
+            // border-radius: 16rpx;
           }
-          
+
           &:active {
             transform: scale(0.95);
             &::after {
               transform: scale(1);
             }
           }
-          
+
           &.active {
-            background: #f7ffea;
-            border-radius: 12rpx;
+            // background: #f7ffea;
+            border-radius: 16rpx;
             border: 2rpx solid #7ebc00;
             color: #7ebc00;
             font-weight: 500;
-            box-shadow: 0 4rpx 12rpx rgba(126, 188, 0, 0.15);
-            
+            // box-shadow: 0 4rpx 12rpx rgba(126, 188, 0, 0.15);
+
             &::after {
               transform: scale(1);
             }
@@ -539,7 +551,10 @@
   }
   .bottom-button {
     padding: 40rpx 30rpx;
-
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
     .generate-btn {
       width: 626rpx;
       height: 88rpx;

pages/makedetail/makeMusicDetail.vue

@@ -51,7 +51,7 @@
 		<!-- 主要内容区 -->
 		<view class="content">
 			<!-- 歌曲名称输入 -->
-			<view class="input-section">
+			<view class="input-section" style="margin-top: 0;">
 				<text class="label">歌曲名称</text>
 				<input type="text" placeholder="请输入名称..." class="input-field" maxlength="30" v-model="songName"
 					:disabled="doYouWantToEdit()" />

pages/my/my.scss

@@ -365,7 +365,7 @@ page {
         height: 2rpx;
         background-color: #F2F6F2;
         margin:10rpx 0;
-        
+        margin-bottom: 20rpx;
       }
       .bom {
         display: flex;

pages/my/userHomepage.vue

@@ -2,6 +2,7 @@
   <view class="page">
     <view class="topBody">
       <view class="header">
+        <view class="reserveASeat"></view>
         <view class="card-box">
           <view class="card-top">
             <view class="top-box">
@@ -38,6 +39,7 @@
           
               </uv-text>
             </view>
+            <view class="line"></view>
             <view class="bom">
               <view class="follow_info">
                 <view class="follow-box">
@@ -65,11 +67,17 @@
         </view>
       </view>
 
-      <view class="myinfo">
+      <view class="myinfo"  >
         <!-- 作品列表 -->
-        <view class="numlist1" style="margin-top: 30rpx">
+        <view class="numlist" >
           <WorkItem v-for="(item, index) in worksList" :subtitle="true" :key="index" :item="item"
             @click="goWork(item)" />
+          <view v-if="isDataLoaded && worksList.length === 0" class="empty-state">
+            <image src="@/static/icon/xx_img_zanwuxiaoxi.png" mode="aspectFit" class="empty-image">
+            </image>
+            <text class="empty-text">暂无作品</text>
+            <text class="empty-subtext">他还没有开始创作作品~</text>
+          </view>
         </view>
       </view>
     </view>
@@ -128,6 +136,7 @@ export default {
       shareImg: "",
       userId: 0,
       id: 0,
+      isDataLoaded: false,
     };
   },
   onLoad(e) {
@@ -272,8 +281,7 @@ export default {
     loadWorksList() {
       if (this.isLoading) return;
       this.isLoading = true;
-
-      // 根据activeTab选择不同的API
+      this.isDataLoaded = false;
 
       uni.request({
         url: this.$apiHost + '/Work/getlist',
@@ -301,16 +309,18 @@ export default {
             }
           } else {
             this.hasMore = false;
+            this.worksList = [];
           }
-
-
         },
         complete: () => {
           this.isLoading = false;
+          this.isDataLoaded = true;
         },
         fail: (e) => {
           console.log("请求列表失败:", e);
           this.isLoading = false;
+          this.isDataLoaded = true;
+          this.worksList = [];
         },
       });
     },
@@ -357,42 +367,41 @@ export default {
 </script>
 
 <style scoped lang="scss">
-// 导入FontAwesome
 @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
-
-page {
+ page {
   background-color: #fff;
-  padding-top: var(--status-bar-height);
-  padding-bottom: 144rpx;
 }
-
 .page {
   background-color: #fff;
   width: 100%;
   min-height: 100vh;
 }
-
+.reserveASeat {
+  width: 100%;
+  height: calc(var(--status-bar-height));
+}
 .topBody {
   width: 750rpx;
+  background: transparent;
 }
+ 
 
 .header {
   padding: 20rpx;
-  padding-top:calc( 48rpx  + var(--status-bar-height));
+  padding-top: 48rpx;
   background: linear-gradient(225deg, #cdff9f 0%, #acff5f 30%, #d0ffa5 100%);
-  min-height: 720rpx;
-  margin-bottom: -210rpx;
-
+  min-height: calc(520rpx + var(--status-bar-height));
+  margin-bottom: calc(-40rpx );
+ 
   .card-box {
     width: 100%;
-    min-height: 440rpx;
+    min-height: 410rpx;
     position: relative;
     left: 0;
     top: 0%;
     overflow: hidden;
-
     .card-top {
-      height: 435rpx;
+      height: 410rpx;
       width: 100%;
       background: url("../../static/me/my-card-bg.png") top center / 100% auto,
         #fff;
@@ -400,28 +409,29 @@ page {
       top: 0%;
       left: 0;
       z-index: 5;
-      padding: 24rpx;
+      padding: 24rpx 0;
       padding-top: 16rpx;
       box-sizing: border-box;
       border-radius: 25rpx;
-
       .top-box {
         display: flex;
         justify-content: space-between;
-        padding-top: 8rpx;
-        background: url("../../static/me/car-top-bg-center.png") top center/ 146rpx 50rpx no-repeat;
-
+        align-items: center;
+        // padding-top: 8rpx;
+        background: url("../../static/me/car-top-bg-center.png") top center/
+          146rpx 50rpx no-repeat;
+          padding-right: 24rpx;
+          padding-left: 24rpx;
         .hello-box {
           font-family: "CustomFont" !important;
           font-size: 36rpx;
           font-weight: 700;
         }
-
         .settingBtn-box {
-          width: 74rpx;
+          width: 148rpx;
           display: flex;
           align-items: center;
-          justify-content: space-between;
+          justify-content: flex-end;
 
           image {
             width: 64rpx;
@@ -429,18 +439,18 @@ page {
           }
         }
       }
-
       .userinfo-box {
         min-height: 120rpx;
         width: 100%;
         display: flex;
-
+        padding-right: 24rpx;
+        padding-left: 24rpx;
+        padding-top: 18rpx;
         .avator {
           width: 120rpx;
           height: 120rpx;
           margin-right: 16rpx;
         }
-
         .userinfo-right {
           .nickname {
             font-weight: bold;
@@ -450,82 +460,89 @@ page {
             justify-content: flex-start;
             align-items: center;
             display: flex;
-
-            >text {
+            padding-bottom: 12rpx;
+            > text {
               max-width: 380rpx;
               font-family: "PingFang SC-Bold";
               font-weight: 400;
               font-size: 36rpx;
             }
-
             image {
               width: 36rpx;
               margin-left: 8rpx;
               margin-right: 10rpx;
             }
-
             .level {
               font-weight: 400;
-              font-size: 20rpx;
+              font-size: 22rpx;
               font-family: "PingFang SC-Bold";
               background: linear-gradient(360deg, #acf934 0%, #ffe439 100%);
               border-radius: 8rpx;
               padding: 2rpx 8rpx;
             }
           }
-
           .label {
-            height: 55rpx;
-            height: 110rpx;
+            height: 40rpx;
+            // height: 110rpx;
             overflow: hidden;
-
-            >view {
+            > view {
               color: #acf934;
               font-family: "PingFang SC-Medium";
               font-weight: 400;
-              font-size: 20rpx;
+              font-size: 24rpx;
               background: #1f1f1f;
               border-radius: 6px 6px 6px 6px;
               display: inline-block;
-              margin-left: 10rpx;
+              margin-right: 10rpx;
               margin-bottom: 10rpx;
               padding: 6rpx 16rpx;
             }
           }
         }
       }
-
       .intro_row {
-        width: 100%;
-        margin-bottom: 20rpx;
+        width: 100%; 
         display: flex;
         align-items: center;
-
+        padding-right: 24rpx;
+        padding-left: 24rpx;
+        padding-top: 12rpx;
+        padding-bottom: 12rpx;
         .intro_text {
           color: #1f1f1f;
-          font-size: 28rpx;
+          font-size: 24rpx;
           font-family: "PingFang SC-Bold";
           font-weight: 400;
           padding-right: 0rpx;
+          ::v-deep.uv-text__value{
+            font-size: 26rpx !important;
+          }
         }
-
         .add_icon {
           width: 28rpx;
           margin-left: 10rpx;
         }
       }
-
+      .line{
+        width: 100%;
+        height: 2rpx;
+        background-color: #F2F6F2;
+        margin:10rpx 0;
+        margin-bottom: 20rpx;
+        
+        
+      }
       .bom {
         display: flex;
         align-items: center;
         justify-content: space-between;
-
+        padding-right: 24rpx;
+        padding-left: 24rpx;
         .follow_info {
           display: flex;
           align-items: center;
           justify-content: space-between;
-          width: 340rpx;
-
+          max-width: 300rpx;
           .follow-box {
             display: flex;
             flex-direction: column;
@@ -533,20 +550,17 @@ page {
             justify-content: center;
             text-align: center;
           }
-
           .num {
             width: 100%;
             font-size: 36rpx;
             font-weight: bold;
             color: #333;
           }
-
           .label {
             width: 100%;
-            font-size: 28rpx;
+            font-size: 24rpx;
             color: #999;
           }
-
           .separator {
             width: 2rpx;
             height: 24rpx;
@@ -554,7 +568,7 @@ page {
             margin: 0 30rpx;
           }
         }
-
+    
         .points-box {
           display: flex;
           justify-content: space-between;
@@ -577,24 +591,142 @@ page {
             }
           }
         }
+        
       }
-    }
+
+      .follow_info {
+        // display: none;
+      }
+    } 
   }
 }
-
+.thread {
+  height: 210rpx;
+  padding: 50rpx;
+  font-size: 52rpx;
+  color: #6e6a6a;
+  padding-top: 80rpx;
+}
 .myinfo {
   width: 100%;
   display: flex;
   flex-direction: column;
   border-radius: 28rpx 28rpx 0 0;
   padding: 24rpx 20rpx;
+  padding-top: 14rpx;
   justify-content: flex-start;
   box-sizing: border-box;
   background: #fff;
+  overflow: hidden;
+  .line {
+    width: 100%;
+    height: 2rpx;
+    background: #f2f6f2;
+    margin-bottom: 8rpx;
+    margin-top: 32rpx;
+  }
+  .subtitle {
+    display: flex;
+    .item {
+      padding: 0 43rpx;
+      font-weight: 400;
+      font-size: 28rpx;
+      color: #999999;
+      font-family: "PingFang SC-Medium";
+      &.active {
+        font-family: "PingFang SC-Bold";
+        font-weight: 400;
+        font-size: 28rpx;
+        color: #1f1f1f;
+      }
+    }
+  }
+  .tablist {
+    display: flex;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    background: #ffffff;
+    .item {
+      padding: 15rpx 38rpx;
+      color: #1f1f1f;
+      font-size: 28rpx;
+      background: #f2f6f2;
+      margin-right: 20rpx;
+      border-radius: 30rpx;
+      position: relative;
+      left: 0;
+      top: 0; 
+      line-height: 1;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      // box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+      
+      &:active {
+        transform: scale(0.95);
+        // box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);
+      }
+
+      .indicator-triangle {
+        position: absolute;
+        bottom: -10rpx;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 10rpx solid transparent;
+        border-right: 10rpx solid transparent;
+        border-top: 10rpx solid #acf934;
+        display: none;
+        transition: all 0.3s ease;
+      }
+      &.active {
+        background: #acf934;
+        font-family: "CustomFont" !important;
+        box-shadow: 0 4rpx 12rpx rgba(172, 249, 52, 0.3);
+        
+        .indicator-triangle {
+          display: block;
+          transform: translateX(-50%) scale(1.2);
+        }
+      }
+    }
+  }
 
-  .numlist1 {
+ 
+  .numlist  {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
+    margin-top: 30rpx
+  }
+ 
+}
+ 
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60rpx 0;
+  margin-top: 40rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  width: 710rpx;
+
+  .empty-image {
+    width: 240rpx;
+    height: 240rpx;
+    margin-bottom: 30rpx;
+  }
+
+  .empty-text {
+    font-size: 32rpx;
+    color: #333333;
+    margin-bottom: 16rpx;
+    font-weight: 500;
+  }
+
+  .empty-subtext {
+    font-size: 28rpx;
+    color: #999999;
   }
 }
 </style>