完成 青少年保护外的设置功能 部分作品创作

App.vue

@@ -113,16 +113,15 @@
 			uni.$on('check_login', function(callback) {
 				let skeyLogin = uni.getStorageSync("is_login");
 				console.log("skeylogin", skeyLogin);
-				callback();
-				// 调试阶段不再拦截
-				// if (skeyLogin == null || skeyLogin == undefined || skeyLogin == "") {
-				// 	uni.removeStorageSync("wapptoken");
-				// 	uni.redirectTo({
-				// 		url: '/pages/login/login'
-				// 	});
-				// } else if (typeof callback === 'function') {
-				// 	callback(); // 登录状态有效时执行回调
-				// }
+				// callback(); 
+				if (skeyLogin == null || skeyLogin == undefined || skeyLogin == "") {
+					uni.removeStorageSync("wapptoken");
+					uni.redirectTo({
+						url: '/pages/login/login'
+					});
+				} else if (typeof callback === 'function') {
+					callback(); // 登录状态有效时执行回调
+				}
 			});
 
 		},

components/PageHeader/PageHeader.vue

@@ -1,9 +1,9 @@
 <template>
   <view class="page-header">
     <view class="status-bar"></view>
-    <view class="navbar" :style=" cssStyle ">
+    <view class="navbar" :style="cssStyle">
       <view class="navbar-left">
-        <view class="back-icon" @click="goBack">
+        <view class="back-icon" @click="isBack ? goBack() : back()">
           <uni-icons type="left" size="20" color="#000000"></uni-icons>
         </view>
       </view>
@@ -26,9 +26,13 @@ export default {
       type: String,
       default: ''
     },
-    cssStyle:{
+    cssStyle: {
       type: Object,
       default: () => ({})
+    },
+    isBack: {
+      type: Boolean,
+      default: true
     }
   },
   methods: {
@@ -36,6 +40,9 @@ export default {
       uni.navigateBack({
         delta: 1
       });
+    },
+    back() { 
+      this.$emit('back');
     }
   }
 }

pages/makedetail/makeImgDetail.scss

@@ -2,175 +2,201 @@
   min-height: 100vh;
   background: #f8f9fa;
   padding: 0 0rpx;
-  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
-
-.nav-bar {
-  width: 750rpx;
-  height: 96rpx;
-  background-color: #fff;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 24rpx;
-  box-sizing: border-box;
-  border-bottom: 1rpx solid #f0f0f0;
-  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
-
-  .left {
-    width: 120rpx;
-    .uni-btn-icon {
-      font-size: 50rpx;
-      color: #333;
-      transition: color 0.2s;
-      
-      &:active {
-        color: #2b85e4;
-      }
-    }
+  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
+  background: url("../../static/makedetail/cz_bg_top.png") center top / 100%
+      auto no-repeat,
+    #f2f6f2;
+  .status-bar {
+    height: var(--status-bar-height);
   }
-
-  .center {
-    flex: 1;
-    text-align: center;
-    font-size: 34rpx;
-    font-weight: 600;
-    color: #333;
-  }
-
-  .right {
-    width: 260rpx;
+  .nav-bar {
+    width: 100vw;
+    height: 96rpx;
     display: flex;
     align-items: center;
-    font-size: 28rpx;
-    
-    image {
-      width: 42rpx;
-      height: 42rpx;
+    justify-content: space-between;
+    padding: 0 24rpx;
+    box-sizing: border-box;
+    background: url("../../static/makedetail/cz_bg_top.png") center top / 100%
+        auto no-repeat,
+      #f2f6f2;
+    background-position-y: var(--status-bar-height);
+    @keyframes rotate360 {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
     }
-    
-    .coinM, .coinC {
+    .left {
       display: flex;
-      flex-direction: row;
       align-items: center;
-      justify-content: center;
-      border: solid 1px #f0f0f0;
-      border-radius: 40rpx;
-      background: rgba(250,250,250,0.9);
-      transition: transform 0.2s, box-shadow 0.2s;
-      box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
-      margin-left: 16rpx;
-      
-      &:active {
-        transform: scale(0.98);
+      .create {
+        font-family: "Alimama ShuHeiTi-Bold";
+        font-weight: 700;
+        color: #1f1f1f;
+        font-size: 36rpx;
+        margin-left: 15rpx;
+        margin-right: 4rpx;
       }
-      
-      text {
-        padding: 6rpx 20rpx;
-        font-weight: 500;
+      .edit {
+        width: 44rpx;
+        height: 44rpx;
+      }
+      .uni-btn-icon {
+        font-size: 45rpx;
+        font-weight: bold;
+        color: #1f1f1f;
+        transition: color 0.2s;
+
+        &:active {
+          color: #2b85e4;
+        }
       }
     }
-    
-    .coinM {
-      border-color: #ffecb3;
-      background: rgba(255,248,225,0.4);
-    }
-    
-    .coinC {
-      border-color: #e3f2fd;
-      background: rgba(227,242,253,0.4);
-    }
-  }
-}
 
+    .right {
+      display: flex;
+      align-items: center;
+      font-size: 28rpx;
+      font-family: "PingFang SC-Bold";
+      font-weight: 400;
+      image {
+        width: 40rpx;
+        height: 40rpx;
+        margin-right: 4rpx;
+      }
 
-  .preview-section {
-    margin: 30rpx 30rpx;
-    
-    .preview-title {
-      font-size: 30rpx;
-      font-weight: 600;
-      margin-bottom: 20rpx;
-      color: #333;
-      position: relative;
-      padding-left: 20rpx;
-      
-      &:before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 6rpx;
-        height: 32rpx;
-        width: 8rpx;
-        background: #2b85e4;
-        border-radius: 4rpx;
+      .coinM,
+      .coinC {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        border-radius: 40rpx;
+        transition: transform 0.2s, box-shadow 0.2s;
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+        margin-left: 16rpx;
+        background: #fff;
+        padding: 4rpx 12rpx 4rpx 8rpx;
+        &:active {
+          transform: scale(0.98);
+        }
+
+        text {
+          // padding: 6rpx 15rpx;
+        }
       }
     }
-    
+  }
+
+  .preview-section,
+  .description-section,
+  .action-section,
+  .environment-section,
+  .image-section,
+  .style-section {
+    margin: 20rpx;
+    background: #fff;
+    border-radius: 20rpx;
+    padding: 20rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+    ::v-deep .uni-textarea-textarea,
+    ::v-deep .uni-input-input {
+      font-size: 28rpx;
+      color: #1f1f1f;
+      font-family: "PingFang SC-Medium";
+      font-weight: 400;
+    }
+  }
+  .preview-section {
+    width: 710rpx;
+    height: 590rpx;
+    margin: 0 auto;
+    margin-bottom: 20rpx;
+    background: #fff;
+    border-radius: 20rpx;
+
     .preview-card {
-      height: 420rpx;
-      background: linear-gradient(135deg, #3494E6, #EC6EAD);
-      border-radius: 24rpx;
+      width: 346rpx;
+      height: 468rpx;
+      margin: 0 auto;
       display: flex;
-      flex-direction: column;
       align-items: center;
       justify-content: center;
-      box-shadow: 0 8rpx 30rpx rgba(52, 148, 230, 0.15);
-      overflow: hidden;
-      position: relative;
-      
-      &:before {
-        content: '';
-        position: absolute;
-        width: 200%;
-        height: 200%;
-        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 60%);
-        top: -50%;
-        left: -50%;
+      flex-direction: column;
+      background: url("../../static/makedetail/cz_bg_shengcheng.png")
+        center/100% 100% no-repeat;
+      image {
+        width: 52rpx;
+        height: 50rpx;
       }
-      
-      .loading-icon {
-        width: 80rpx;
-        height: 80rpx;
-        margin-bottom: 20rpx;
-        animation: spin 2s linear infinite;
+      color: #fff;
+      .text1 {
+        font-family: "PingFang SC-Bold";
+        font-weight: 400;
+        font-size: 28rpx;
+        padding-top: 24rpx;
+        padding-bottom: 4rpx;
       }
-      
-      @keyframes spin {
-        from { transform: rotate(0deg); }
-        to { transform: rotate(360deg); }
+      .text2 {
+        font-family: "PingFang SC-Medium";
+        font-weight: 400;
+        font-size: 24rpx;
       }
-      
-      .loading-text {
-        color: #fff;
-        font-size: 34rpx;
-        margin-bottom: 16rpx;
-        font-weight: 500;
-        text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
+    }
+  }
+  .lineUp-section {
+    .section-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      .member-box {
+        display: flex;
+        align-items: center;
+        background: #fffaf1;
+        border-radius: 12rpx;
+        border: 2rpx solid #fbd6a1;
+        font-size: 24rpx;
+        font-family: "PingFang SC-Bold";
+        padding: 10rpx 12rpx 8rpx 12rpx;
+        color: #814600;
+
+        image {
+          width: 34rpx;
+          height: 34rpx;
+          margin-right: 8rpx;
+        }
       }
-      
-      .sub-text {
-        color: rgba(255,255,255,0.9);
-        font-size: 26rpx;
+    }
+    .preview-card {
+      background: #fff;
+      color: #1f1f1f;
+      image {
+        animation: rotate360 0.8s linear infinite;
       }
     }
   }
-
-  .description-section, .action-section, .environment-section, .image-section, .style-section {
-    margin: 30rpx 30rpx;
-    background: #fff;
-    border-radius: 20rpx;
-    padding: 30rpx;
-    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
+  .description-section {
+    margin-top: 0;
+    position: relative;
+    .section-title {
+      padding-bottom: 0;
+    }
+    .input-area {
+      min-height: 212rpx;
+      padding-bottom: 50rpx;
+    }
   }
-
   .section-title {
-    font-size: 30rpx;
-    font-weight: 600;
-    margin-bottom: 24rpx;
-    color: #333;
+    font-size: 28rpx;
+    font-weight: 400;
+    font-family: "PingFang SC-Bold";
+    color: #1f1f1f;
     position: relative;
-    
+    margin-bottom: 20rpx;
     .required {
       color: #ff4d4f;
       margin-left: 4rpx;
@@ -180,54 +206,63 @@
   .input-area {
     width: 100%;
     height: 200rpx;
-    background: #f9f9f9;
+    background: #f2f6f2;
     border-radius: 16rpx;
     padding: 24rpx;
     font-size: 28rpx;
     border: 1rpx solid #f0f0f0;
     transition: border-color 0.3s, box-shadow 0.3s;
-    
+
     &:focus {
       border-color: #2b85e4;
-      box-shadow: 0 0 0 2rpx rgba(43,133,228,0.2);
+      box-shadow: 0 0 0 2rpx rgba(43, 133, 228, 0.2);
     }
   }
 
   .input-box {
     width: 100%;
     height: 88rpx;
-    background: #f9f9f9;
+    background: #f2f6f2;
     border-radius: 16rpx;
     padding: 0 24rpx;
     margin-bottom: 24rpx;
     border: 1rpx solid #f0f0f0;
     transition: border-color 0.3s, box-shadow 0.3s;
-    
+
     &:focus {
       border-color: #2b85e4;
-      box-shadow: 0 0 0 2rpx rgba(43,133,228,0.2);
+      box-shadow: 0 0 0 2rpx rgba(43, 133, 228, 0.2);
     }
   }
 
   .tag-group {
     display: flex;
     flex-wrap: wrap;
-    gap: 20rpx;
-    
+    gap: 10rpx;
+
     .tag {
-      padding: 12rpx 32rpx;
+      padding: 10rpx 25rpx 8rpx 25rpx;
       background: #f5f7fa;
-      border-radius: 36rpx;
-      font-size: 26rpx;
+      border-radius: 12rpx;
+      font-size: 24rpx;
       color: #666;
       transition: all 0.3s;
       border: 1rpx solid transparent;
-      box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
-      
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
+      border: 2rpx solid #e6e6e6;
+      background: #ffffff;
       &:active {
-        background: #e3f2fd;
-        color: #2b85e4;
-        border-color: #2b85e4;
+        // background: #e3f2fd;
+        // color: #2b85e4;
+        // border-color: #2b85e4;
+        background: #f7ffea;
+        border-radius: 12rpx;
+        border: 2rpx solid #7ebc00;
+      }
+      &.active {
+        background: #f7ffea;
+        border-radius: 12rpx;
+        border: 2rpx solid #7ebc00;
       }
     }
   }
@@ -235,28 +270,30 @@
   .style-scroll {
     white-space: nowrap;
     padding: 10rpx 0;
-    
+
     .style-item {
       display: inline-block;
       margin-right: 24rpx;
       text-align: center;
       flex-direction: column;
       transition: transform 0.3s;
-      
+
       &:active {
         transform: scale(0.97);
       }
-      
+
       image {
-        width: 180rpx;
-        height: 180rpx;
+        width: 166rpx;
+        height: 166rpx;
         border-radius: 16rpx;
         margin-bottom: 12rpx;
-        box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
+        padding: 4rpx;
+        border-radius: 24rpx;
+        // box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
         transition: all 0.3s;
         border: 4rpx solid transparent;
       }
-      
+
       text {
         display: block;
         font-size: 26rpx;
@@ -268,47 +305,62 @@
 
   .bottom-button {
     padding: 40rpx 30rpx;
-    
+
     .generate-btn {
-      width: 100%;
-      height: 96rpx;
-      background: linear-gradient(135deg, #2b85e4, #1976d2);
-      color: #fff;
-      border-radius: 48rpx;
-      font-size: 34rpx;
-      font-weight: 600;
+      width: 626rpx;
+      height: 88rpx;
+      background: url("../../static//makedetail/cz_btn_lijishengcheng.png")
+        center / 100% 100% no-repeat;
+      font-family: "PingFang SC-Bold";
+      color: #acf934;
+      font-size: 32rpx;
       display: flex;
       align-items: center;
       justify-content: center;
-      box-shadow: 0 8rpx 20rpx rgba(43,133,228,0.3);
-      letter-spacing: 2rpx;
-      transition: transform 0.2s, box-shadow 0.2s;
-      
+      border-radius: 58rpx;
+      image {
+        width: 36rpx;
+        height: 36rpx;
+        margin: 4rpx;
+        margin-left: 12rpx;
+      }
+      &.prohibit {
+        background: #d7ded7;
+        color: #1f1f1f;
+        overflow: hidden;
+        box-shadow: none;
+        border: 0rpx solid transparent;
+        transform: none;margin: 0 auto;
+        
+
+      }
       &:active {
         transform: scale(0.98);
-        box-shadow: 0 4rpx 10rpx rgba(43,133,228,0.2);
+        box-shadow: 0 4rpx 10rpx rgba(43, 133, 228, 0.2);
       }
     }
-    
+
     .promotion-link {
       text-align: center;
       margin-top: 30rpx;
       color: #2b85e4;
       font-size: 26rpx;
-      
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #814600;
+      .jiantou {
+        width: 28rpx;
+        height: 28rpx;
+        left: 10rpx;
+      }
+      .vip {
+        width: 34rpx;
+        height: 34rpx;
+        margin-right: 12rpx;
+      }
       text {
         position: relative;
-        
-        &:after {
-          content: '';
-          position: absolute;
-          width: 100%;
-          height: 1rpx;
-          background: currentColor;
-          bottom: -4rpx;
-          left: 0;
-          opacity: 0.5;
-        }
       }
     }
   }
@@ -317,7 +369,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 24rpx;
+    margin-bottom: 20rpx;
 
     .clear-text {
       display: flex;
@@ -325,57 +377,82 @@
       font-size: 24rpx;
       color: #999;
       transition: color 0.3s;
-      
+
       &:active {
         color: #ff4d4f;
       }
 
-      image {
+      > image {
         width: 28rpx;
         height: 28rpx;
         margin-right: 8rpx;
       }
+      .clear-box {
+        display: flex;
+        align-items: center;
+        color: #0084ff;
+        > image {
+          margin-top: 3rpx;
+          margin-right: 5rpx;
+          width: 24rpx;
+          height: 24rpx;
+        }
+      }
     }
   }
-
+  ::v-deep .uni-textarea-placeholder {
+    color: #999999;
+  }
+  ::v-deep .input-placeholder {
+    font-family: "PingFang SC-Medium";
+    color: #999;
+    font-size: 28rpx;
+  }
   .word-count {
     text-align: right;
     font-size: 24rpx;
     color: #999;
     margin-top: 12rpx;
+    position: absolute;
+    right: 40rpx;
+    bottom: 36rpx;
   }
 
   .style-item {
     &.active {
       image {
-        border: 4rpx solid #2b85e4;
-        box-shadow: 0 0 0 2rpx rgba(43,133,228,0.3);
+        // border: 4rpx solid #2b85e4;
+        // box-shadow: 0 0 0 2rpx rgba(43, 133, 228, 0.3);
+
+        border: 4rpx solid #acf934;
+        border-radius: 24rpx;
       }
       text {
-        color: #2b85e4;
-        font-weight: 500;
+        // color: #2b85e4;
+        // font-weight: 500;
       }
     }
   }
 
   .right-info {
-    .coin, .diamond {
+    .coin,
+    .diamond {
       display: flex;
       align-items: center;
-      
+
       image {
         width: 40rpx;
         height: 40rpx;
         margin-right: 8rpx;
       }
-      
+
       text {
         font-size: 28rpx;
-        color: #333;
+        color: #1f1f1f;
       }
     }
   }
-} 
+}
 /* 添加新样式 */
 .lyrics-overlay {
   position: absolute;
@@ -438,7 +515,7 @@
 
     .detail-value {
       font-size: 28rpx;
-      color: #333;
+      color: #1f1f1f;
     }
   }
 }

pages/makedetail/makeImgDetail.vue

@@ -1,47 +1,67 @@
 <template>
 	<view class="makedetail-container">
+		<view class="status-bar"></view>
 		<!-- 顶部导航 -->
 		<view class="nav-bar">
 			<view class="left">
 				<view class="uni-btn-icon" @click="goBack">&#xe601;</view>
+				<view class="create">灵感创作</view>
+				<image src="@/static/makedetail/cz_icon_lingganchuangzuo.png" class="edit"></image>
 			</view>
-			<view class="center">发表创作</view>
 			<view class="right">
 				<view class="coinM">
 					<image src="/static/icon/coin_m.png" mode="aspectFit"></image>
-					<text>{{myinfo.num_gmm}}</text>
+					<text>{{ myinfo.num_gmm }}</text>
 				</view>
 				<view class="coinC">
 					<image src="/static/icon/coin_cd.png" mode="aspectFit"></image>
-					<text>{{myinfo.num_gmd}}</text>
+					<text>{{ myinfo.num_gmd }}</text>
 				</view>
 			</view>
 		</view>
 
+		<!-- 排队预览区域 -->
+		<view class="preview-section lineUp-section" v-if="queuing">
+			<view class="section-title">
+				<text>创作预览</text>
+				<view class="member-box">
+					<image src="@/static/makedetail/wd_icon_vip(1).png" mode="aspectFit"></image>
+					升级会员插队加速
+				</view>
+			</view>
+			<view class="preview-card">
+				<image src="@/static/makedetail/cz_icon_jiazai.png" mode="aspectFit"></image>
+				<view class="text1">排队中1/262</view>
+				<view class="text2">退出不影响继续生成</view>
+			</view>
+		</view>
 		<!-- 创作预览区域 -->
 		<view class="preview-section" v-if="inQueue">
-			<view class="preview-title">创作预览</view>
+			<view class="section-title">创作预览</view>
 			<view class="preview-card">
-				<image class="loading-icon" src="/static/loading.png" mode="aspectFit"></image>
-				<text class="loading-text">{{queueMessage}}</text>
-				<text class="sub-text">请耐心等待制作完成</text>
+				<image src="@/static/makedetail/cz_icon_shengcheng.png" mode="aspectFit"></image>
+				<view class="text1">生成中0%</view>
+				<view class="text2">退出不影响继续生成</view>
 			</view>
 		</view>
 
 		<!-- 以下区域在非排队状态下显示 -->
-		<view v-if="!inQueue">
+		<view>
 			<!-- 创作描述输入区 -->
 			<view class="description-section">
 				<view class="section-header">
-					<text class="section-title">创作描述<text class="required">*</text></text>
+					<text class="section-title">创作描述<text style="display: none;" class="required">*</text></text>
 					<view class="clear-text" @click="clearDescription">
 						<image src="/static/clear.png" mode="aspectFit"></image>
-						<text>清空文本</text>
+						<view class="clear-box">
+							<image src="@/static/makedetail/cz_icon_qingkongwenben.png" class="edit"></image>
+							<text>清空文本</text>
+						</view>
 					</view>
 				</view>
-				<textarea class="input-area" v-model="description" placeholder="请输入描述语,例如:穿着白色运动服,外表俊朗..."
-					maxlength="1000" @input="onDescriptionInput"></textarea>
-				<view class="word-count">{{descriptionLength}}/1000</view>
+				<textarea auto-height class="input-area" v-model="description" placeholder="请输入描述语,例如:穿着白色运动服,外表俊朗..."
+					maxlength="1000" @input="onDescriptionInput" disabled="doYouWantToEdit"></textarea>
+				<view class="word-count">{{ descriptionLength }}/1000</view>
 			</view>
 
 			<!-- 行为动作选择区 -->
@@ -49,8 +69,8 @@
 				<view class="section-title">行为动作</view>
 				<input class="input-box" v-model="action" placeholder="可输入也可点击推荐词" />
 				<view class="tag-group">
-					<text class="tag" v-for="(item, index) in actionTags" :key="index"
-						@click="selectAction(item)">{{item}}</text>
+					<text class="tag" v-for="(item, index) in actionTags" :key="index" @click="selectAction(item)"
+						:class="{ active: action == item }">{{ item }}</text>
 				</view>
 			</view>
 
@@ -60,7 +80,7 @@
 				<input class="input-box" v-model="environment" placeholder="可输入也可点击推荐词" />
 				<view class="tag-group">
 					<text class="tag" v-for="(item, index) in environmentTags" :key="index"
-						@click="selectEnvironment(item)">{{item}}</text>
+						@click="selectEnvironment(item)" :class="{ active: environment == item }">{{ item }}</text>
 				</view>
 			</view>
 
@@ -69,28 +89,39 @@
 				<view class="section-title">主体形象</view>
 				<input class="input-box" v-model="image" placeholder="可输入也可点击推荐词" />
 				<view class="tag-group">
-					<text class="tag" v-for="(item, index) in imageTags" :key="index"
-						@click="selectImage(item)">{{item}}</text>
+					<text class="tag" v-for="(item, index) in imageTags" :key="index" @click="selectImage(item)"
+						:class="{ active: image == item }">{{ item
+						}}</text>
 				</view>
 			</view>
-
 			<!-- 参考风格选择区 -->
 			<view class="style-section">
-				<view class="section-title">选择参考风格<text class="required">*</text></view>
+				<view class="section-title">选择参考风格<text style="display: none;" class="required">*</text></view>
 				<scroll-view class="style-scroll" scroll-x>
 					<view class="style-item" v-for="(item, index) in styleList" :key="index"
-						:class="{'active': selectedStyle === index}" @click="selectStyle(index)">
+						:class="{ 'active': selectedStyle === index }" @click="selectStyle(index)">
 						<image :src="item.image" mode="aspectFill"></image>
-						<text>{{item.name}}</text>
+						<text>{{ item.name }}</text>
 					</view>
 				</scroll-view>
+
 			</view>
 
 			<!-- 底部按钮 -->
 			<view class="bottom-button">
-				<button class="generate-btn" @click="generateImage">立即生成(消耗10贡献)</button>
+				<button v-if="!doYouWantToEdit" class="generate-btn" @click="generateImage">立即生成
+					<image src="/static/icon/coin_cd.png" mode="aspectFit"></image>
+					10
+				</button>
+
+				<view v-else class="generate-btn prohibit"  >生成中
+				</view>
+
+
 				<view class="promotion-link">
+					<image class="vip" src="/static/makedetail/wd_icon_vip(1).png" mode="aspectFit"></image>
 					<text> 即刻开通订阅，获取各种福利! </text>
+					<image class="jiantou" src="/static/makedetail/cz_icon_jiantou.png" mode="aspectFit"></image>
 				</view>
 			</view>
 		</view>
@@ -98,175 +129,179 @@
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				description: '',
-				descriptionLength: 0,
-				action: '',
-				environment: '',
-				image: '',
-				selectedStyle: -1,
-				actionTags: ['跳舞', '开枪', '喝咖啡', '看书', '运动'],
-				environmentTags: ['都市大道', '大树底下', '办公室', '厨房'],
-				imageTags: ['戴着墨镜', '戴着耳机', '戴着帽子', '手持冲浪板'],
-				styleList: [{
-						name: '自然共生',
-						image: '/static/style1.png'
-					},
-					{
-						name: '国风新锋',
-						image: '/static/style2.png'
-					},
-					{
-						name: '萌系治愈',
-						image: '/static/style3.png'
-					}
-				],
-				inQueue: false,
-				queueMessage: '',
-				myinfo: {}
+export default {
+	data() {
+		return {
+			description: '',
+			descriptionLength: 0,
+			action: '',
+			environment: '',
+			image: '',
+			selectedStyle: -1,
+			actionTags: ['跳舞', '开枪', '喝咖啡', '看书', '运动'],
+			environmentTags: ['都市大道', '大树底下', '办公室', '厨房'],
+			imageTags: ['戴着墨镜', '戴着耳机', '戴着帽子', '手持冲浪板'],
+			styleList: [{
+				name: '自然共生',
+				image: '../../static/dome/fenge.png'
+			},
+			{
+				name: '国风新锋',
+				image: '../../static/dome/fenge.png'
+			},
+			{
+				name: '萌系治愈',
+				image: '../../static/dome/fenge.png'
 			}
+			],
+			inQueue: false,//是否创作中
+			queuing: false,//是否排队中
+			queueMessage: '',
+			myinfo: {}
+		}
+	},
+	onLoad(e) {
+		// this.checkQueueStatus()
+		this.getMyInfo();
+	}, 
+	methods: {
+		doYouWantToEdit() {
+			return this.inQueue || this.queuing
 		},
-		onLoad() {
-			// this.checkQueueStatus()
-			this.getMyInfo();
+		goBack() {
+			uni.navigateBack()
 		},
-		methods: {
-			goBack() {
-				uni.navigateBack()
-			},
-			getMyInfo() {
-				uni.request({
-					url: this.$apiHost + '/My/getnum',
-					method: 'GET',
-					header: {
-						'content-type': 'application/json',
-						'sign': getApp().globalData.headerSign
-					},
-					data: {
-						uuid: getApp().globalData.uuid
-					},
-					success: (res) => {
-						console.log("获取用户信息：", res.data);
-						this.myinfo = res.data
-					}
-				})
+		getMyInfo() {
+			uni.request({
+				url: this.$apiHost + '/My/getnum',
+				method: 'GET',
+				header: {
+					'content-type': 'application/json',
+					'sign': getApp().globalData.headerSign
+				},
+				data: {
+					uuid: getApp().globalData.uuid
+				},
+				success: (res) => {
+					console.log("获取用户信息：", res.data);
+					this.myinfo = res.data
+				}
+			})
 
-			},
-			checkQueueStatus() {
-				uni.request({
-					url: this.$apiHost + '/WorkAI/queueStatus',
-					method: 'GET',
-					header: {
-						'Content-Type': 'application/x-www-form-urlencoded',
-						'sign': getApp().globalData.headerSign
-					},
-					data: {
-						uuid: getApp().globalData.uuid,
-						task_type: 1
-					},
-					success: (res) => {
-						console.log("队列状态：", res.data);
-						if (res.data.success === "yes") {
-							this.inQueue = res.data.in_queue
-							if (this.inQueue) {
-								this.queueMessage = res.data.str
-							}
+		},
+		checkQueueStatus() {
+			uni.request({
+				url: this.$apiHost + '/WorkAI/queueStatus',
+				method: 'GET',
+				header: {
+					'Content-Type': 'application/x-www-form-urlencoded',
+					'sign': getApp().globalData.headerSign
+				},
+				data: {
+					uuid: getApp().globalData.uuid,
+					task_type: 1
+				},
+				success: (res) => {
+					console.log("队列状态：", res.data);
+					if (res.data.success === "yes") {
+						this.inQueue = res.data.in_queue
+						if (this.inQueue) {
+							this.queueMessage = res.data.str
 						}
-					},
-					fail: (err) => {
-						console.log('获取队列状态失败：', err);
-						uni.showToast({
-							title: '获取状态失败',
-							icon: 'none'
-						});
 					}
-				})
-			},
-			clearDescription() {
-				this.description = ''
-				this.descriptionLength = 0
-			},
-			onDescriptionInput(e) {
-				this.descriptionLength = e.detail.value.length
-			},
-			selectAction(tag) {
-				this.action = tag
-			},
-			selectEnvironment(tag) {
-				this.environment = tag
-			},
-			selectImage(tag) {
-				this.image = tag
-			},
-			selectStyle(index) {
-				this.selectedStyle = index
-			},
-			generateImage() {
-				if (!this.description) {
+				},
+				fail: (err) => {
+					console.log('获取队列状态失败：', err);
 					uni.showToast({
-						title: '请输入创作描述',
+						title: '获取状态失败',
 						icon: 'none'
-					})
-					return
-				}
-				// if (this.selectedStyle === -1) {
-				//   uni.showToast({
-				//     title: '请选择参考风格',
-				//     icon: 'none'
-				//   })
-				//   return
-				// }
-				let style = '';
-				if (this.selectedStyle !== -1) {
-					style = this.styleList[this.selectedStyle].name
+					});
 				}
-
-				let that = this
-				uni.request({
-					url: this.$apiHost + '/WorkAI/creatorLG',
-					data: {
-						uuid: getApp().globalData.uuid,
-						description: this.description,
-						action: this.action,
-						environment: this.environment,
-						subject: this.image,
-						style: style
-					},
-					method: 'POST',
-					header: {
-						'Content-Type': 'application/x-www-form-urlencoded',
-						'sign': getApp().globalData.headerSign
-					},
-					dataType: 'json',
-					success: (res) => {
-						console.log("生成结果：", res.data);
-						uni.showToast({
-							title: res.data.str || '请求成功',
-							icon: 'none'
-						});
-						if (res.data.success == "yes") {
-							// TODO: 处理生成成功后的逻辑
-							setTimeout(function() {
-								// that.checkQueueStatus()
-								uni.navigateBack()
-							}, 500);
-						}
-					},
-					fail: (err) => {
-						console.log('生成失败：', err);
-						uni.showToast({
-							title: '生成请求失败',
-							icon: 'none'
-						});
-					}
+			})
+		},
+		clearDescription() {
+			this.description = ''
+			this.descriptionLength = 0
+		},
+		onDescriptionInput(e) {
+			this.descriptionLength = e.detail.value.length
+		},
+		selectAction(tag) {
+			this.action = tag
+		},
+		selectEnvironment(tag) {
+			this.environment = tag
+		},
+		selectImage(tag) {
+			this.image = tag
+		},
+		selectStyle(index) {
+			this.selectedStyle = index
+		},
+		generateImage() {
+			if (!this.description) {
+				uni.showToast({
+					title: '请输入创作描述',
+					icon: 'none'
 				})
+				return
+			}
+			// if (this.selectedStyle === -1) {
+			//   uni.showToast({
+			//     title: '请选择参考风格',
+			//     icon: 'none'
+			//   })
+			//   return
+			// }
+			let style = '';
+			if (this.selectedStyle !== -1) {
+				style = this.styleList[this.selectedStyle].name
 			}
+
+			let that = this
+			uni.request({
+				url: this.$apiHost + '/WorkAI/creatorLG',
+				data: {
+					uuid: getApp().globalData.uuid,
+					description: this.description,
+					action: this.action,
+					environment: this.environment,
+					subject: this.image,
+					style: style
+				},
+				method: 'POST',
+				header: {
+					'Content-Type': 'application/x-www-form-urlencoded',
+					'sign': getApp().globalData.headerSign
+				},
+				dataType: 'json',
+				success: (res) => {
+					console.log("生成结果：", res.data);
+					uni.showToast({
+						title: res.data.str || '请求成功',
+						icon: 'none'
+					});
+					if (res.data.success == "yes") {
+						// TODO: 处理生成成功后的逻辑
+						setTimeout(function () {
+							// that.checkQueueStatus()
+							uni.navigateBack()
+						}, 500);
+					}
+				},
+				fail: (err) => {
+					console.log('生成失败：', err);
+					uni.showToast({
+						title: '生成请求失败',
+						icon: 'none'
+					});
+				}
+			})
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	@import './makeImgDetail.scss';
+@import './makeImgDetail.scss';
 </style>

pages/makedetail/makeMusicDetail.scss

@@ -1,108 +1,223 @@
 .make-music-detail {
-  width: 100%;
   min-height: 100vh;
-  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
-  display: flex;
-  flex-direction: column;
-
-.nav-bar {
-  width: 750rpx;
-  height: 96rpx;
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(10px);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 24rpx;
-  box-sizing: border-box;
-  border-bottom: 1rpx solid rgba(0,0,0,0.05);
-  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-
-  .left {
-    width: 120rpx;
-    .uni-btn-icon {
-      font-size: 50rpx;
-      color: #2b2b2b;
-      transition: all 0.3s ease;
-      
-      &:active {
-        color: #007AFF;
-        transform: scale(0.95);
+  background: #f8f9fa;
+  padding: 0 0rpx;
+  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
+  background: url("../../static/makedetail/cz_bg_top.png") center top / 100%
+      auto no-repeat,
+    #f2f6f2;
+  .status-bar {
+    height: var(--status-bar-height);
+  }
+  .nav-bar {
+    width: 100vw;
+    height: 96rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 24rpx;
+    box-sizing: border-box;
+    background: url("../../static/makedetail/cz_bg_top.png") center top / 100%
+        auto no-repeat,
+      #f2f6f2;
+    background-position-y: var(--status-bar-height);
+    @keyframes rotate360 {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
       }
     }
-  }
+    .left {
+      display: flex;
+      align-items: center;
+      .create {
+        font-family: "Alimama ShuHeiTi-Bold";
+        font-weight: 700;
+        color: #1f1f1f;
+        font-size: 36rpx;
+        margin-left: 15rpx;
+        margin-right: 4rpx;
+      }
+      .edit {
+        width: 44rpx;
+        height: 44rpx;
+      }
+      .uni-btn-icon {
+        font-size: 45rpx;
+        font-weight: bold;
+        color: #1f1f1f;
+        transition: color 0.2s;
 
-  .center {
-    flex: 1;
-    text-align: center;
-    font-size: 34rpx;
-    font-weight: 600;
-    color: #333;
-  }
+        &:active {
+          color: #2b85e4;
+        }
+      }
+    }
 
-  .right {
-    width: 260rpx;
-    display: flex;
-    align-items: center;
-    font-size: 28rpx;
-    
-    image {
-      width: 42rpx;
-      height: 42rpx;
+    .right {
+      display: flex;
+      align-items: center;
+      font-size: 28rpx;
+      font-family: "PingFang SC-Bold";
+      font-weight: 400;
+      image {
+        width: 40rpx;
+        height: 40rpx;
+        margin-right: 4rpx;
+      }
+
+      .coinM,
+      .coinC {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        border-radius: 40rpx;
+        transition: transform 0.2s, box-shadow 0.2s;
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+        margin-left: 16rpx;
+        background: #fff;
+        padding: 4rpx 12rpx 4rpx 8rpx;
+        &:active {
+          transform: scale(0.98);
+        }
+
+        text {
+          // padding: 6rpx 15rpx;
+        }
+      }
     }
-    
-    .coinM, .coinC {
+  }
+  .preview-section,
+  .style-section,
+  .input-section {
+    margin: 20rpx;
+    background: #fff;
+    border-radius: 20rpx;
+    padding: 20rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+    ::v-deep .uni-textarea-textarea,
+    ::v-deep .uni-input-input {
+      font-size: 28rpx;
+      color: #1f1f1f;
+      font-family: "PingFang SC-Medium";
+      font-weight: 400;
+    }
+  }
+  .preview-section {
+    width: 710rpx;
+    height: 590rpx;
+    margin: 0 auto;
+    margin-bottom: 20rpx;
+    background: #fff;
+    border-radius: 20rpx;
+
+    .preview-card {
+      width: 346rpx;
+      height: 468rpx;
+      margin: 0 auto;
       display: flex;
-      flex-direction: row;
       align-items: center;
       justify-content: center;
-      border: solid 1px #f0f0f0;
-      border-radius: 40rpx;
-      background: rgba(250,250,250,0.9);
-      transition: transform 0.2s, box-shadow 0.2s;
-      box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
-      margin-left: 16rpx;
-      
-      &:active {
-        transform: scale(0.98);
+      flex-direction: column;
+      background: url("../../static/makedetail/cz_bg_shengcheng.png")
+        center/100% 100% no-repeat;
+      image {
+        width: 52rpx;
+        height: 50rpx;
       }
-      
-      text {
-        padding: 6rpx 20rpx;
-        font-weight: 500;
+      color: #fff;
+      .text1 {
+        font-family: "PingFang SC-Bold";
+        font-weight: 400;
+        font-size: 28rpx;
+        padding-top: 24rpx;
+        padding-bottom: 4rpx;
+      }
+      .text2 {
+        font-family: "PingFang SC-Medium";
+        font-weight: 400;
+        font-size: 24rpx;
+      }
+    }
+  }
+  .lineUp-section {
+    .section-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      .member-box {
+        display: flex;
+        align-items: center;
+        background: #fffaf1;
+        border-radius: 12rpx;
+        border: 2rpx solid #fbd6a1;
+        font-size: 24rpx;
+        font-family: "PingFang SC-Bold";
+        padding: 10rpx 12rpx 8rpx 12rpx;
+        color: #814600;
+
+        image {
+          width: 34rpx;
+          height: 34rpx;
+          margin-right: 8rpx;
+        }
       }
     }
-    
-    .coinM {
-      border-color: #ffecb3;
-      background: rgba(255,248,225,0.4);
+    .preview-card {
+      background: #fff;
+      color: #1f1f1f;
+      image {
+        animation: rotate360 0.8s linear infinite;
+      }
     }
-    
-    .coinC {
-      border-color: #e3f2fd;
-      background: rgba(227,242,253,0.4);
+  }
+  .section-title {
+    font-size: 28rpx;
+    font-weight: 400;
+    font-family: "PingFang SC-Bold";
+    color: #1f1f1f;
+    position: relative;
+    margin-bottom: 20rpx;
+    .required {
+      color: #ff4d4f;
+      margin-left: 4rpx;
+    }
+  }
+
+  .input-area {
+    width: 100%;
+    height: 200rpx;
+    background: #f2f6f2;
+    border-radius: 16rpx;
+    padding: 24rpx;
+    font-size: 28rpx;
+    border: 1rpx solid #f0f0f0;
+    transition: border-color 0.3s, box-shadow 0.3s;
+
+    &:focus {
+      border-color: #2b85e4;
+      box-shadow: 0 0 0 2rpx rgba(43, 133, 228, 0.2);
     }
   }
-}
 
   .content {
-    flex: 1;
-    padding: 30rpx;
+    flex: 1; 
 
     .input-section {
-      margin-bottom: 40rpx;
+      margin-bottom: 20rpx;
       animation: fadeIn 0.5s ease;
 
       .label {
-        font-size: 32rpx;
-        font-weight: 600;
+        font-size: 28rpx;
+        font-weight: 400;
+        font-family: "PingFang SC-Bold";
+        color: #1f1f1f;
+        position: relative;
         margin-bottom: 20rpx;
-        display: block;
-        color: #2b2b2b;
       }
 
       .input-field {
@@ -114,10 +229,10 @@
         font-size: 28rpx;
         background: #fff;
         transition: all 0.3s ease;
-        
+
         &:focus {
-          border-color: #007AFF;
-          box-shadow: 0 0 0 2rpx rgba(0,122,255,0.1);
+          border-color: #007aff;
+          box-shadow: 0 0 0 2rpx rgba(0, 122, 255, 0.1);
         }
       }
 
@@ -129,10 +244,10 @@
         font-size: 28rpx;
         background: #fff;
         transition: all 0.3s ease;
-        
+
         &:focus {
-          border-color: #007AFF;
-          box-shadow: 0 0 0 2rpx rgba(0,122,255,0.1);
+          border-color: #007aff;
+          box-shadow: 0 0 0 2rpx rgba(0, 122, 255, 0.1);
         }
       }
 
@@ -143,16 +258,16 @@
         margin-top: 16rpx;
 
         .ai-btn {
-          color: #007AFF;
+          color: #007aff;
           font-size: 28rpx;
           font-weight: 500;
           padding: 10rpx 20rpx;
           border-radius: 30rpx;
-          background: rgba(0,122,255,0.1);
+          background: rgba(0, 122, 255, 0.1);
           transition: all 0.3s ease;
-          
+
           &:active {
-            background: rgba(0,122,255,0.2);
+            background: rgba(0, 122, 255, 0.2);
             transform: scale(0.98);
           }
         }
@@ -185,19 +300,19 @@
           position: relative;
           padding-bottom: 15rpx;
           transition: all 0.3s ease;
-          
+
           &.active {
-            color: #007AFF;
+            color: #007aff;
             font-weight: 600;
-            
+
             &:after {
-              content: '';
+              content: "";
               position: absolute;
               bottom: -17rpx;
               left: 0;
               width: 100%;
               height: 4rpx;
-              background: #007AFF;
+              background: #007aff;
               border-radius: 4rpx;
             }
           }
@@ -218,11 +333,11 @@
           border: 2rpx solid transparent;
 
           &.active {
-            background: rgba(0,122,255,0.1);
-            color: #007AFF;
-            border-color: #007AFF;
+            background: rgba(0, 122, 255, 0.1);
+            color: #007aff;
+            border-color: #007aff;
           }
-          
+
           &:active {
             transform: scale(0.98);
           }
@@ -231,49 +346,18 @@
     }
   }
 
-  .preview-section {
-    padding: 30rpx;
-    
-    .preview-card {
-      background: #fff;
-      border-radius: 20rpx;
-      padding: 40rpx;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
-      
-      .loading-icon {
-        width: 120rpx;
-        height: 120rpx;
-        margin-bottom: 30rpx;
-        animation: rotate 2s linear infinite;
-      }
-      
-      .loading-text {
-        font-size: 32rpx;
-        color: #333;
-        margin-bottom: 16rpx;
-        text-align: center;
-      }
-      
-      .sub-text {
-        font-size: 28rpx;
-        color: #999;
-      }
-    }
-  }
+ 
 
   .bottom-section {
     padding: 40rpx 30rpx;
-    background: rgba(255,255,255,0.95);
+    background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
-    border-top: 2rpx solid rgba(0,0,0,0.05);
+    border-top: 2rpx solid rgba(0, 0, 0, 0.05);
 
     .submit-btn {
       width: 100%;
       height: 88rpx;
-      background: linear-gradient(135deg, #007AFF, #00b4ff);
+      background: linear-gradient(135deg, #007aff, #00b4ff);
       color: #fff;
       border-radius: 44rpx;
       display: flex;
@@ -282,11 +366,11 @@
       font-size: 32rpx;
       font-weight: 600;
       transition: all 0.3s ease;
-      box-shadow: 0 8rpx 20rpx rgba(0,122,255,0.3);
+      box-shadow: 0 8rpx 20rpx rgba(0, 122, 255, 0.3);
 
       &:active {
         transform: scale(0.98);
-        box-shadow: 0 4rpx 10rpx rgba(0,122,255,0.2);
+        box-shadow: 0 4rpx 10rpx rgba(0, 122, 255, 0.2);
       }
 
       .small {
@@ -302,20 +386,88 @@
       margin-top: 20rpx;
 
       .link-text {
-        color: #007AFF;
+        color: #007aff;
         font-size: 24rpx;
         text-decoration: underline;
         opacity: 0.9;
         transition: opacity 0.3s ease;
-        
+
         &:active {
           opacity: 0.7;
         }
       }
     }
   }
-}
+  .bottom-button {
+    padding: 40rpx 30rpx;
+
+    .generate-btn {
+      width: 626rpx;
+      height: 88rpx;
+      background: url("../../static//makedetail/cz_btn_lijishengcheng.png")
+        center / 100% 100% no-repeat;
+      font-family: "PingFang SC-Bold";
+      color: #acf934;
+      font-size: 32rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 58rpx;
+      image {
+        width: 36rpx;
+        height: 36rpx;
+        margin: 4rpx;
+        margin-left: 12rpx;
+      }
+      &.prohibit {
+        background: #d7ded7;
+        color: #1f1f1f;
+        overflow: hidden;
+        box-shadow: none;
+        border: 0rpx solid transparent;
+        transform: none;margin: 0 auto;
+        
+
+      }
+      &:active {
+        transform: scale(0.98);
+        box-shadow: 0 4rpx 10rpx rgba(43, 133, 228, 0.2);
+      }
+    }
 
+    .promotion-link {
+      text-align: center;
+      margin-top: 30rpx;
+      color: #2b85e4;
+      font-size: 26rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #814600;
+      .jiantou {
+        width: 28rpx;
+        height: 28rpx;
+        left: 10rpx;
+      }
+      .vip {
+        width: 34rpx;
+        height: 34rpx;
+        margin-right: 12rpx;
+      }
+      text {
+        position: relative;
+      }
+    }
+  }
+}
+::v-deep .uni-textarea-placeholder {
+  color: #999999;
+}
+::v-deep .input-placeholder {
+  font-family: "PingFang SC-Medium";
+  color: #999;
+  font-size: 28rpx;
+}
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -334,4 +486,4 @@
   to {
     transform: rotate(360deg);
   }
-} 
+}

pages/makedetail/makeMusicDetail.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="make-music-detail">
 		<!-- 顶部导航 -->
-		<view class="nav-bar">
+		<!-- <view class="nav-bar">
 			<view class="left">
 				<view class="uni-btn-icon" @click="goBack">&#xe601;</view>
 			</view>
@@ -9,40 +9,84 @@
 			<view class="right">
 				<view class="coinM">
 					<image src="/static/icon/coin_m.png" mode="aspectFit"></image>
-					<text>{{myinfo.num_gmm}}</text>
+					<text>{{ myinfo.num_gmm }}</text>
 				</view>
 				<view class="coinC">
 					<image src="/static/icon/coin_cd.png" mode="aspectFit"></image>
-					<text>{{myinfo.num_gmd}}</text>
+					<text>{{ myinfo.num_gmd }}</text>
 				</view>
 			</view>
-		</view>
+		</view> -->
 
-		<!-- 队列状态显示 -->
+		<!-- 顶部导航 -->
+		<view class="nav-bar">
+			<view class="left">
+				<view class="uni-btn-icon" @click="goBack">&#xe601;</view>
+				<view class="create">音乐制作</view>
+				<image src="@/static/makedetail/cz_icon_lingganchuangzuo.png" class="edit"></image>
+			</view>
+			<view class="right">
+				<view class="coinM">
+					<image src="/static/icon/coin_m.png" mode="aspectFit"></image>
+					<text>{{ myinfo.num_gmm }}</text>
+				</view>
+				<view class="coinC">
+					<image src="/static/icon/coin_cd.png" mode="aspectFit"></image>
+					<text>{{ myinfo.num_gmd }}</text>
+				</view>
+			</view>
+		</view>
+		<!-- 队列状态显示
 		<view class="preview-section" v-if="inQueue">
 			<view class="preview-card">
 				<image class="loading-icon" src="/static/loading.png" mode="aspectFit"></image>
 				<text class="loading-text">{{queueMessage}}</text>
 				<text class="sub-text">请耐心等待制作完成</text>
 			</view>
+		</view> -->
+
+		<!-- 排队预览区域 -->
+		<view class="preview-section lineUp-section" v-if="queuing">
+			<view class="section-title">
+				<text>创作预览</text>
+				<view class="member-box">
+					<image src="@/static/makedetail/wd_icon_vip(1).png" mode="aspectFit"></image>
+					升级会员插队加速
+				</view>
+			</view>
+			<view class="preview-card">
+				<image src="@/static/makedetail/cz_icon_jiazai.png" mode="aspectFit"></image>
+				<view class="text1">{{ queueMessage }}</view>
+				<view class="text2">退出不影响继续生成</view>
+			</view>
+		</view>
+		<!-- 创作预览区域 -->
+		<view class="preview-section" v-if="inQueue">
+			<view class="section-title">创作预览</view>
+			<view class="preview-card">
+				<image src="@/static/makedetail/cz_icon_shengcheng.png" mode="aspectFit"></image>
+				<view class="text1">生成中0%</view>
+				<view class="text2">退出不影响继续生成</view>
+			</view>
 		</view>
 
+
 		<!-- 主要内容区 -->
-		<view class="content" v-if="!inQueue">
+		<view class="content">
 			<!-- 歌曲名称输入 -->
 			<view class="input-section">
 				<text class="label">歌曲名称</text>
 				<input type="text" placeholder="请输入名称..." class="input-field" maxlength="30" v-model="songName" />
-				<text class="count">{{songName.length}}/30</text>
+				<text class="count">{{ songName.length }}/30</text>
 			</view>
 
 			<!-- 创作歌词输入 -->
 			<view class="input-section">
 				<text class="label">创作歌词</text>
 				<textarea placeholder="请在此处输入您想要进行联想的内容或者歌词" class="textarea-field" maxlength="800" v-model="lyrics"
-					:style="{height: textareaHeight + 'px'}" @input="onTextareaInput" />
+					:style="{ height: textareaHeight + 'px' }" @input="onTextareaInput" />
 				<view class="textarea-footer">
-					<text class="count">{{lyrics.length}}/800</text>
+					<text class="count">{{ lyrics.length }}/800</text>
 					<text class="ai-btn" v-if="false">AI润词</text>
 				</view>
 			</view>
@@ -51,215 +95,237 @@
 			<view class="style-section">
 				<text class="label">音乐风格</text>
 				<view class="tabs">
-					<text :class="{'active': selectedTab === 'emotion'}" @click="selectTab('emotion')">情感</text>
-					<text :class="{'active': selectedTab === 'genre'}" @click="selectTab('genre')">流派</text>
-					<text :class="{'active': selectedTab === 'era'}" @click="selectTab('era')">年代</text>
-					<text :class="{'active': selectedTab === 'instrument'}" @click="selectTab('instrument')">乐器</text>
+					<text :class="{ 'active': selectedTab === 'emotion' }" @click="selectTab('emotion')">情感</text>
+					<text :class="{ 'active': selectedTab === 'genre' }" @click="selectTab('genre')">流派</text>
+					<text :class="{ 'active': selectedTab === 'era' }" @click="selectTab('era')">年代</text>
+					<text :class="{ 'active': selectedTab === 'instrument' }" @click="selectTab('instrument')">乐器</text>
 				</view>
 				<view class="tags">
 					<text v-for="(tag, index) in currentTags" :key="index"
 						:class="['tag', { active: selectedTags[selectedTab].includes(tag) }]" @click="toggleTag(tag)">
-						{{tag}}
+						{{ tag }}
 					</text>
 				</view>
 			</view>
 		</view>
 
 		<!-- 底部按钮 -->
-		<view class="bottom-section" v-if="!inQueue">
-			<button class="submit-btn" @click="generateMusic">立即生成<text class="small">(需消耗10枚豆)</text></button>
-			<view class="promotion-text">
-				<text class="link-text">即刻开通订阅，我取各种福利</text>
+		// <view class="bottom-section" v-if="!inQueue">
+			// <button class="submit-btn" @click="generateMusic">立即生成<text class="small">(需消耗10枚豆)</text></button>
+			// <view class="promotion-text">
+				// <text class="link-text">即刻开通订阅，我取各种福利</text>
+				// </view>
+			// </view>
+
+		<!-- 底部按钮 -->
+		<view class="bottom-button">
+			<button v-if="!doYouWantToEdit" class="generate-btn" @click="generateMusic">立即生成
+				<image src="/static/icon/coin_cd.png" mode="aspectFit"></image>
+				10
+			</button>
+
+			<view v-else class="generate-btn prohibit">生成中
+			</view>
+
+
+			<view class="promotion-link">
+				<image class="vip" src="/static/makedetail/wd_icon_vip(1).png" mode="aspectFit"></image>
+				<text> 即刻开通订阅，获取各种福利! </text>
+				<image class="jiantou" src="/static/makedetail/cz_icon_jiantou.png" mode="aspectFit"></image>
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
-	export default {
-		name: 'MakeMusicDetail',
-		data() {
-			return {
-				songName: '',
-				lyrics: '',
-				selectedTags: {
-					emotion: [],
-					genre: [],
-					era: [],
-					instrument: []
+export default {
+	name: 'MakeMusicDetail',
+	data() {
+		return {
+			songName: '',
+			lyrics: '',
+			selectedTags: {
+				emotion: [],
+				genre: [],
+				era: [],
+				instrument: []
+			},
+			textareaHeight: 120,
+			minHeight: 120,
+			selectedTab: 'emotion',
+			tagOptions: {
+				emotion: ['欢快', '悲伤', '积极', '浪漫', '忧郁', '华丽', '闪耀', '神秘', '惊怒', '紧张', '恐怖', '平静'],
+				genre: ['流行', '摇滚', '民谣', '电子', 'R&B', '嘻哈', '古典', '爵士'],
+				era: ['80年代', '90年代', '00年代', '10年代', '20年代'],
+				instrument: ['钢琴', '吉他', '贝斯', '鼓', '小提琴', '萨克斯', '电子合成器']
+			},
+			inQueue: true,//是否创作中
+			queuing: true,//是否排队中
+			queueMessage: '',
+			myinfo: {}
+		}
+	},
+	onLoad() {
+		// this.checkQueueStatus();
+		this.getMyInfo();
+	},
+	computed: {
+		currentTags() {
+			return this.selectedTab ? this.tagOptions[this.selectedTab] : [];
+		}
+	},
+	methods: {
+		doYouWantToEdit() {
+			return this.inQueue || this.queuing
+		},
+		goBack() {
+			uni.navigateBack({
+				delta: 1
+			});
+		},
+		getMyInfo() {
+			uni.request({
+				url: this.$apiHost + '/My/getnum',
+				method: 'GET',
+				header: {
+					'content-type': 'application/json',
+					'sign': getApp().globalData.headerSign
 				},
-				textareaHeight: 120,
-				minHeight: 120,
-				selectedTab: 'emotion',
-				tagOptions: {
-					emotion: ['欢快', '悲伤', '积极', '浪漫', '忧郁', '华丽', '闪耀', '神秘', '惊怒', '紧张', '恐怖', '平静'],
-					genre: ['流行', '摇滚', '民谣', '电子', 'R&B', '嘻哈', '古典', '爵士'],
-					era: ['80年代', '90年代', '00年代', '10年代', '20年代'],
-					instrument: ['钢琴', '吉他', '贝斯', '鼓', '小提琴', '萨克斯', '电子合成器']
+				data: {
+					uuid: getApp().globalData.uuid
 				},
-				inQueue: false,
-				queueMessage: '',
-				myinfo: {}
-			}
+				success: (res) => {
+					console.log("获取用户信息：", res.data);
+					this.myinfo = res.data
+				}
+			})
+
 		},
-		onLoad() {
-			// this.checkQueueStatus();
+		checkQueueStatus() {
+			uni.request({
+				url: this.$apiHost + '/WorkAI/queueStatus',
+				method: 'GET',
+				header: {
+					'content-type': 'application/json',
+					'sign': getApp().globalData.headerSign
+				},
+				data: {
+					uuid: getApp().globalData.uuid,
+					task_type: 2
+				},
+				success: (res) => {
+					console.log("音乐队列状态：", res.data);
+					if (res.data.success === "yes") {
+						this.inQueue = res.data.in_queue
+						if (this.inQueue) {
+							this.queueMessage = res.data.str
+						}
+					}
+				},
+				fail: (err) => {
+					console.log('获取队列状态失败：', err);
+					uni.showToast({
+						title: '获取状态失败',
+						icon: 'none'
+					});
+				}
+			})
 			this.getMyInfo();
 		},
-		computed: {
-			currentTags() {
-				return this.selectedTab ? this.tagOptions[this.selectedTab] : [];
+		generateMusic() {
+			if (!this.songName.trim()) {
+				uni.showToast({
+					title: '请输入歌曲名称',
+					icon: 'none'
+				})
+				return
 			}
-		},
-		methods: {
-			goBack() {
-				uni.navigateBack({
-					delta: 1
-				});
-			},
-			getMyInfo() {
-				uni.request({
-					url: this.$apiHost + '/My/getnum',
-					method: 'GET',
-					header: {
-						'content-type': 'application/json',
-						'sign': getApp().globalData.headerSign
-					},
-					data: {
-						uuid: getApp().globalData.uuid
-					},
-					success: (res) => {
-						console.log("获取用户信息：", res.data);
-						this.myinfo = res.data
-					}
+			if (!this.lyrics.trim()) {
+				uni.showToast({
+					title: '请输入歌词内容',
+					icon: 'none'
 				})
+				return
+			}
 
-			},
-			checkQueueStatus() {
-				uni.request({
-					url: this.$apiHost + '/WorkAI/queueStatus',
-					method: 'GET',
-					header: {
-						'content-type': 'application/json',
-						'sign': getApp().globalData.headerSign
-					},
-					data: {
-						uuid: getApp().globalData.uuid,
-						task_type: 2
-					},
-					success: (res) => {
-						console.log("音乐队列状态：", res.data);
-						if (res.data.success === "yes") {
-							this.inQueue = res.data.in_queue
-							if (this.inQueue) {
-								this.queueMessage = res.data.str
-							}
-						}
-					},
-					fail: (err) => {
-						console.log('获取队列状态失败：', err);
-						uni.showToast({
-							title: '获取状态失败',
-							icon: 'none'
-						});
-					}
-				})
-				this.getMyInfo();
-			},
-			generateMusic() {
-				if (!this.songName.trim()) {
+			// 合并所有选中的标签
+			let allSelectedTags = [
+				...this.selectedTags.emotion,
+				...this.selectedTags.genre,
+				...this.selectedTags.era,
+				...this.selectedTags.instrument
+			];
+
+			let that = this
+			uni.request({
+				url: this.$apiHost + '/WorkAI/creatorMusic',
+				data: {
+					uuid: getApp().globalData.uuid,
+					name: this.songName,
+					lyrics: this.lyrics,
+					style: allSelectedTags.join(',')
+				},
+				method: 'POST',
+				header: {
+					'Content-Type': 'application/x-www-form-urlencoded',
+					'sign': getApp().globalData.headerSign
+				},
+				dataType: 'json',
+				success: (res) => {
+					console.log("生成结果：", res.data);
 					uni.showToast({
-						title: '请输入歌曲名称',
+						title: res.data.str || '请求成功',
 						icon: 'none'
-					})
-					return
-				}
-				if (!this.lyrics.trim()) {
+					});
+					if (res.data.success == "yes") {
+						setTimeout(function () {
+							// that.checkQueueStatus()
+							//返回上一页
+							uni.navigateBack()
+						}, 500);
+					}
+				},
+				fail: (err) => {
+					console.log('生成失败：', err);
 					uni.showToast({
-						title: '请输入歌词内容',
+						title: '生成请求失败',
 						icon: 'none'
-					})
-					return
+					});
 				}
+			})
+		},
+		onTextareaInput(e) {
+			const lineHeight = 20; // 假设每行高度为20px
+			const padding = 30; // 上下padding各15px
+			const value = e.detail.value;
+			const lines = value.split('\n').length;
+			// 计算每行的平均字符数
+			const avgCharsPerLine = 30; // 根据实际输入框宽度调整
+			const textLines = Math.ceil(value.length / avgCharsPerLine);
 
-				// 合并所有选中的标签
-				let allSelectedTags = [
-					...this.selectedTags.emotion,
-					...this.selectedTags.genre,
-					...this.selectedTags.era,
-					...this.selectedTags.instrument
-				];
-
-				let that = this
-				uni.request({
-					url: this.$apiHost + '/WorkAI/creatorMusic',
-					data: {
-						uuid: getApp().globalData.uuid,
-						name: this.songName,
-						lyrics: this.lyrics,
-						style: allSelectedTags.join(',')
-					},
-					method: 'POST',
-					header: {
-						'Content-Type': 'application/x-www-form-urlencoded',
-						'sign': getApp().globalData.headerSign
-					},
-					dataType: 'json',
-					success: (res) => {
-						console.log("生成结果：", res.data);
-						uni.showToast({
-							title: res.data.str || '请求成功',
-							icon: 'none'
-						});
-						if (res.data.success == "yes") {
-							setTimeout(function() {
-								// that.checkQueueStatus()
-								//返回上一页
-								uni.navigateBack()
-							}, 500);
-						}
-					},
-					fail: (err) => {
-						console.log('生成失败：', err);
-						uni.showToast({
-							title: '生成请求失败',
-							icon: 'none'
-						});
-					}
-				})
-			},
-			onTextareaInput(e) {
-				const lineHeight = 20; // 假设每行高度为20px
-				const padding = 30; // 上下padding各15px
-				const value = e.detail.value;
-				const lines = value.split('\n').length;
-				// 计算每行的平均字符数
-				const avgCharsPerLine = 30; // 根据实际输入框宽度调整
-				const textLines = Math.ceil(value.length / avgCharsPerLine);
-
-				// 取行数的最大值，确保有足够空间显示
-				const totalLines = Math.max(lines, textLines);
-				const newHeight = Math.max(totalLines * lineHeight + padding, this.minHeight);
+			// 取行数的最大值，确保有足够空间显示
+			const totalLines = Math.max(lines, textLines);
+			const newHeight = Math.max(totalLines * lineHeight + padding, this.minHeight);
 
-				this.textareaHeight = newHeight;
-			},
-			selectTab(tab) {
-				if (this.selectedTab !== tab) {
-					this.selectedTab = tab;
-					// 不再清空已选择的标签
-				}
-			},
-			toggleTag(tag) {
-				if (this.selectedTags[this.selectedTab].includes(tag)) {
-					this.selectedTags[this.selectedTab] = this.selectedTags[this.selectedTab].filter(t => t !== tag);
-				} else {
-					this.selectedTags[this.selectedTab].push(tag);
-				}
+			this.textareaHeight = newHeight;
+		},
+		selectTab(tab) {
+			if (this.selectedTab !== tab) {
+				this.selectedTab = tab;
+				// 不再清空已选择的标签
+			}
+		},
+		toggleTag(tag) {
+			if (this.selectedTags[this.selectedTab].includes(tag)) {
+				this.selectedTags[this.selectedTab] = this.selectedTags[this.selectedTab].filter(t => t !== tag);
+			} else {
+				this.selectedTags[this.selectedTab].push(tag);
 			}
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	@import './makeMusicDetail.scss';
+@import './makeMusicDetail.scss';
 </style>

pages/my/editInfo.vue

@@ -80,6 +80,20 @@
 		<DialogBox ref="DialogBox"></DialogBox>
 
 		<view class="popSel" v-if="showPop" @tap.stop="onPreview">
+			<PageHeader title="添加标签" @back="showPop = false" :isBack="false" style="background: #f2f6f2;" />
+			<view style="height: 90rpx;"></view>
+			<view class="headLabel">
+				<view class="avator-box">
+					<CircleAvatar class="avator" :src="avator"></CircleAvatar>
+					<view class="one-omit">{{ nickname }}</view>
+				</view>
+				<view class="tag-box">
+					<view class="tag" v-for="(item, index) in sel_tags" :key="index">
+						{{ item }}
+						<image class="close" src="../../static/me/close.png" mode="widthFix" @click="delTag(item)" />
+					</view>
+				</view>
+			</view>
 			<view class="list_info">
 				<view class="name">你的兴趣爱好是？</view>
 				<view class="desc">提示：最多选择10个兴趣爱好标签</view>
@@ -166,7 +180,7 @@ export default {
 	},
 	onLoad() {
 		let tagStr =
-			"🎮 游戏、🎁 盲盒、😊 小可爱、😊 小可爱、🐱 喵星人、💪 纹身、跑步、跳绳、举重、听音乐、看电影、绘画、写小说、看书、做弹弓玩、做木剑玩、做橡皮枪玩、积木、用麻将搭金字塔、拼图、拆装、扑克牌、小汽车、手表、鞋之类的、弹吉他、钢琴、萨克斯、葫芦丝、大号、小号、折纸、剪纸、品茶、涂鸦、英雄联盟、qq堂、cs、cf、地下城勇士、桌面游戏";
+			"看书、做弹弓玩、做木剑玩、做橡皮枪玩、积木、用麻将搭金字塔、拼图、拆装、扑克牌、小汽车、手表、鞋之类的、弹吉他、钢琴、萨克斯、葫芦丝、大号、小号、折纸、剪纸、品茶、涂鸦、英雄联盟、qq堂、cs、cf、地下城勇士、桌面游戏";
 		this.list_tag = tagStr.split("、");
 		this.getInfoData();
 	},
@@ -320,7 +334,7 @@ export default {
 							uni.navigateBack()
 						}, 800)
 					} else {
-this.closePropUp()
+						this.closePropUp()
 					}
 					this.getInfoData()
 				}
@@ -426,14 +440,66 @@ this.closePropUp()
 <style scoped lang="scss">
 @import 'normal.scss';
 
+page {
+	font-family: PingFang SC-Medium;
+}
+
 .popSel {
 	position: fixed;
 	z-index: 999999;
 	top: 0;
 	left: 0;
-	background-color: #ffffff;
+	background-color: #f2f6f2;
 	width: 100vh;
 	height: 100vh;
+
+	.headLabel {
+		width: 686rpx;
+		margin: 28rpx 32rpx;
+		min-height: 222rpx;
+		background: #fff;
+		box-sizing: border-box;
+		padding: 30rpx 40rpx 46rpx 20rpx;
+		border-radius: 20rpx;
+		.avator-box {
+			display: flex;
+			align-items: center;
+
+			.avator {
+				width: 80rpx;
+				height: 80rpx;
+				margin-right: 20rpx;
+			}
+		}
+
+		.tag-box {
+			display: flex;
+			flex-direction: row;
+			justify-content: flex-start;
+			align-items: center;
+			flex-wrap: wrap;
+			font-size: 24rpx;
+
+			.tag {
+				margin-right: 16rpx;
+				margin-top: 20rpx;
+				padding: 6rpx 10rpx;
+				border: 2rpx solid #DCE1DC;
+				color: #9E9E9E;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				border-radius: 42rpx;
+				line-height: 1;
+
+				.close {
+					width: 20rpx;
+					margin-left: 12rpx;
+					position: relative;
+				}
+			}
+		}
+	}
 }
 
 .openNicknamePopUpWindow {
@@ -449,49 +515,55 @@ this.closePropUp()
 
 	}
 }
-.item_tag {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    flex-wrap: wrap;
-    width: 690rpx;
-    padding: 20rpx;
-    .tag {
-      border-radius: 12rpx;
-      margin-right: 10rpx;
-      margin-top: 10rpx;
-      padding: 8rpx 16rpx;
-      height: 60rpx;
-      border: 2rpx solid #eee;
-      color: #333;
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      background: #eeeeee;
-      .close {
-        width: 28rpx;
-        margin-left: 2rpx;
-        position: relative;
-      }
-    }
-    .active {
-      border-radius: 20rpx;
-      border: 2rpx solid #ff5967;
-    }
-    .addNew {
-      margin-right: 10rpx;
-      margin-top: 10rpx;
-      padding: 0rpx 20rpx;
-      height: 60rpx;
-      border-radius: 12rpx;
-      background: #1f1f1f;
-      color: #fff;
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-    }
-  }
+
+.popSel {
+	.item_tag {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+		flex-wrap: wrap;
+		width: 690rpx;
+		padding: 20rpx;
+
+		.tag { 
+			border-radius: 94rpx;
+			margin-right: 10rpx;
+			margin-top: 10rpx;
+			padding: 8rpx 16rpx;
+			font-size: 28rpx;
+			color: #333;
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
+			align-items: center;
+			background: #fff;
+			border-width: 0;
+			.close {
+				width: 28rpx;
+				margin-left: 2rpx;
+				position: relative;
+			}
+		}
+
+		.active { 
+			border-width: 0;
+			background: #ACF934;
+		}
+
+		.addNew {
+			margin-right: 10rpx;
+			margin-top: 10rpx;
+			padding: 0rpx 20rpx;
+			height: 60rpx;
+			border-radius: 12rpx;
+			background: #1f1f1f;
+			color: #fff;
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
+			align-items: center;
+		}
+	}
+}
 </style>

pages/my/normal.scss

@@ -3,16 +3,12 @@ page {
       auto no-repeat,
     #f2f6f2;
 }
- 
+
 .PageHeader {
   background: url("../../static/me/wd_bg_bianjiziliao.png") center top / 100%
       auto no-repeat,
     #f2f6f2;
   background-position-y: var(--status-bar-height);
-  background: url("../../static/me/wd_bg_bianjiziliao.png") center top / 100%
-      auto no-repeat,
-    #f2f6f2;
-  background-position-y: var(--status-bar-height);
 }
 .topBody {
   width: 750rpx;
@@ -27,7 +23,6 @@ page {
   .textContent {
     color: #1f1f1f;
     max-width: 400rpx;
-
   }
   .textPrompt {
     color: #999999;
@@ -317,7 +312,7 @@ page {
     justify-content: space-between;
     align-items: center;
     border-bottom: solid 0px #393939;
-    
+
     .arrow {
       width: 36rpx;
     }
@@ -477,7 +472,6 @@ page {
     position: relative;
     left: 0;
     top: 0;
-   
   }
   ::v-deep.uv-input {
     width: 694rpx !important;
@@ -489,9 +483,8 @@ page {
   }
 }
 .openContentPopUpWindow {
- 
   ::v-deep.uv-textarea {
-    width: 694rpx !important; 
+    width: 694rpx !important;
     border-radius: 20rpx !important;
     border: 1rpx solid #000000 !important;
     margin: 0 auto;