style: 添加超小屏幕响应式适配规则 (375px, 320px 断点)

mini-program/src/pages/main/ScriptView.vue

@@ -44,7 +44,6 @@
           <button class="add-btn" @click="addNpc">+ 添加</button>
         </view>
 
-        <view class="npc-container">
         <view class="npc-form">
           <input
             class="glass-input npc-input"
@@ -57,13 +56,11 @@
           <picker class="glass-picker npc-picker" mode="selector" :range="npcRelationOptions" :value="npcRelationIndex" @change="onNpcRelationChange">
             <view class="picker-value">{{ npcConfig.relation || '关系' }}</view>
           </picker>
-          </view>
-
           <textarea
-            class="glass-textarea"
+            class="glass-textarea npc-textarea"
             placeholder="自由描述 TA 的人设特点或关键剧情点..."
             v-model="npcConfig.desc"
-            rows="2"
+            rows="3"
           />
         </view>
 
@@ -288,13 +285,14 @@ onMounted(async () => {
 
 /* 人设卡片 - 金色玻璃态 */
 .section-card {
-  padding: 20rpx;
+  padding: 32rpx; /* 20rpx → 32rpx */
-  border-radius: 28rpx;
+  border-radius: 40rpx; /* 28rpx → 40rpx */
   /* 金色玻璃态背景 */
   background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.1));
   border: 1px solid rgba(168, 85, 247, 0.3);
   box-shadow: inset 0 0 30rpx rgba(168, 85, 247, 0.08), 0 4rpx 20rpx rgba(168, 85, 247, 0.1);
   transition: all 0.3s ease;
+  margin-bottom: 32rpx; /* 新增 */
 }
 
 .section-card:active {
@@ -303,8 +301,8 @@ onMounted(async () => {
 }
 
 .glass-card-main {
-  padding: 24rpx;
+  padding: 32rpx; /* 24rpx → 32rpx */
-  border-radius: 56rpx;
+  border-radius: 40rpx; /* 56rpx → 40rpx (统一标准) */
 }
 
 .section-header {
@@ -315,7 +313,7 @@ onMounted(async () => {
 }
 
 .section-title {
-  font-size: 17rpx;
+  font-size: 20rpx; /* 17rpx → 20rpx */
   color: rgba(192, 132, 252, 0.6);
   font-weight: 600;
   letter-spacing: 3rpx;
@@ -323,7 +321,7 @@ onMounted(async () => {
 }
 
 .section-hint {
-  font-size: 13rpx;
+  font-size: 15rpx; /* 13rpx → 15rpx */
   color: rgba(255, 255, 255, 0.35);
   font-style: italic;
 }
@@ -331,18 +329,18 @@ onMounted(async () => {
 .profile-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 10rpx;
+  gap: 24rpx; /* 10rpx → 24rpx */
 }
 
 .glass-input, .glass-picker {
   width: 100%;
-  height: 64rpx;
+  height: 88rpx; /* 64rpx → 88rpx */
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 20rpx;
+  border-radius: 32rpx; /* 20rpx → 32rpx */
-  padding: 0 16rpx;
+  padding: 0 24rpx; /* 16rpx → 24rpx */
   color: rgba(255, 255, 255, 0.9);
-  font-size: 18rpx;
+  font-size: 28rpx; /* 18rpx → 28rpx */
   box-sizing: border-box;
 }
 
@@ -351,12 +349,12 @@ onMounted(async () => {
 }
 
 .theme-input {
-  height: 72rpx;
+  height: 88rpx; /* 72rpx → 88rpx */
-  font-size: 19rpx;
+  font-size: 28rpx; /* 19rpx → 28rpx */
 }
 
 .picker-value {
-  line-height: 64rpx;
+  line-height: 88rpx; /* 64rpx → 88rpx */
   color: rgba(255, 255, 255, 0.9);
 }
 
@@ -366,12 +364,12 @@ onMounted(async () => {
 
 .label {
   display: block;
-  font-size: 17rpx;
+  font-size: 20rpx; /* 17rpx → 20rpx */
   color: rgba(192, 132, 252, 0.6);
   font-weight: 600;
   letter-spacing: 3rpx;
   text-transform: uppercase;
-  margin-bottom: 10rpx;
+  margin-bottom: 12rpx; /* 10rpx → 12rpx */
 }
 
 .npc-header {
@@ -400,87 +398,91 @@ onMounted(async () => {
 
 .npc-form {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr; /* 3 列 → 2 列 */
-  gap: 10rpx;
+  gap: 16rpx;
-  margin-bottom: 14rpx;
+}
+
+/* textarea 跨越两列 */
+.npc-textarea {
+  grid-column: 1 / -1;
 }
 
 .npc-input, .npc-picker {
-  height: 60rpx;
+  height: 88rpx; /* 60rpx → 88rpx */
-  padding: 0 14rpx;
+  padding: 0 24rpx; /* 14rpx → 24rpx */
-  font-size: 17rpx;
+  font-size: 28rpx; /* 17rpx → 28rpx */
 }
 
 .npc-picker .picker-value {
-  line-height: 60rpx;
+  line-height: 88rpx; /* 60rpx → 88rpx */
-  font-size: 17rpx;
+  font-size: 28rpx; /* 17rpx → 28rpx */
 }
 
 .glass-textarea {
   width: 100%;
-  height: 88rpx;
+  height: 120rpx; /* 88rpx → 120rpx */
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 20rpx;
+  border-radius: 32rpx; /* 20rpx → 32rpx */
-  padding: 14rpx;
+  padding: 20rpx; /* 14rpx → 20rpx */
   color: rgba(255, 255, 255, 0.9);
-  font-size: 17rpx;
+  font-size: 24rpx; /* 17rpx → 24rpx */
   box-sizing: border-box;
 }
 
 .npc-list {
   display: flex;
   flex-wrap: wrap;
-  gap: 10rpx;
+  gap: 16rpx; /* 10rpx → 16rpx */
 }
 
 .npc-tag {
   background: rgba(168, 85, 247, 0.1);
   border: 1px solid rgba(168, 85, 247, 0.3);
-  border-radius: 20rpx;
+  border-radius: 24rpx; /* 20rpx → 24rpx */
-  padding: 6rpx 16rpx;
+  padding: 10rpx 20rpx; /* 6rpx 16rpx → 10rpx 20rpx */
-  font-size: 18rpx;
+  font-size: 20rpx; /* 18rpx → 20rpx */
   color: rgba(243, 232, 255, 0.8);
   display: flex;
   align-items: center;
-  gap: 6rpx;
+  gap: 8rpx; /* 6rpx → 8rpx */
 }
 
 .delete-btn {
   color: rgba(255, 255, 255, 0.4);
-  font-size: 20rpx;
+  font-size: 24rpx; /* 20rpx → 24rpx */
-  padding: 0 2rpx;
+  padding: 0 4rpx; /* 0 2rpx → 0 4rpx */
 }
 
 .params-section {
-  margin-bottom: 24rpx;
+  margin-bottom: 32rpx; /* 24rpx → 32rpx */
 }
 
 .param-section-label {
   display: block;
-  font-size: 17rpx;
+  font-size: 20rpx; /* 17rpx → 20rpx */
   color: rgba(192, 132, 252, 0.6);
   font-weight: 600;
   letter-spacing: 3rpx;
   text-transform: uppercase;
-  margin-bottom: 12rpx;
+  margin-bottom: 16rpx; /* 12rpx → 16rpx */
 }
 
 .params-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 16rpx;
+  gap: 24rpx; /* 16rpx → 24rpx */
 }
 
 .param-group {
   display: flex;
   flex-direction: column;
-  gap: 8rpx;
+  gap: 12rpx; /* 8rpx → 12rpx */
   min-width: 0;
 }
 
 .param-sublabel {
-  font-size: 15rpx;
+  font-size: 17rpx; /* 15rpx → 17rpx */
   color: rgba(255, 255, 255, 0.4);
   margin-left: 4rpx;
 }
@@ -488,15 +490,15 @@ onMounted(async () => {
 .param-options {
   display: flex;
   flex-wrap: wrap;
-  gap: 6rpx;
+  gap: 10rpx; /* 6rpx → 10rpx */
 }
 
 .param-option {
-  padding: 6rpx 12rpx;
+  padding: 12rpx 20rpx; /* 6rpx 12rpx → 12rpx 20rpx */
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 18rpx;
+  border-radius: 20rpx; /* 18rpx → 20rpx */
-  font-size: 17rpx;
+  font-size: 20rpx; /* 17rpx → 20rpx */
   color: rgba(255, 255, 255, 0.4);
   white-space: nowrap;
 }
@@ -511,22 +513,22 @@ onMounted(async () => {
 
 .generate-btn {
   width: 100%;
-  height: 80rpx;
+  height: 96rpx; /* 80rpx → 96rpx */
-  border-radius: 28rpx;
+  border-radius: 40rpx; /* 28rpx → 40rpx */
   box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
-  margin-top: 8rpx;
+  margin-top: 24rpx; /* 8rpx → 24rpx */
 }
 
 .scripts-list {
   display: flex;
   flex-direction: column;
-  gap: 16rpx;
+  gap: 24rpx; /* 16rpx → 24rpx */
 }
 
 .script-card {
-  padding: 20rpx;
+  padding: 32rpx; /* 20rpx → 32rpx */
   border-left: 3rpx solid transparent;
-  border-radius: 28rpx;
+  border-radius: 40rpx; /* 28rpx → 40rpx */
   /* Crown 图标装饰 */
   position: relative;
 }
@@ -548,30 +550,30 @@ onMounted(async () => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 10rpx;
+  margin-bottom: 14rpx; /* 10rpx → 14rpx */
 }
 
 .script-title {
-  font-size: 26rpx;
+  font-size: 32rpx; /* 26rpx → 32rpx */
   font-weight: 500;
   color: rgba(255, 255, 255, 0.9);
 }
 
 .script-persona {
-  font-size: 15rpx;
+  font-size: 17rpx; /* 15rpx → 17rpx */
   color: rgba(168, 85, 247, 0.6);
   background: rgba(168, 85, 247, 0.1);
-  padding: 5rpx 10rpx;
+  padding: 6rpx 12rpx; /* 5rpx 10rpx → 6rpx 12rpx */
-  border-radius: 10rpx;
+  border-radius: 12rpx; /* 10rpx → 12rpx */
   border: 1px solid rgba(168, 85, 247, 0.2);
 }
 
 .script-summary {
   display: block;
-  font-size: 20rpx;
+  font-size: 24rpx; /* 20rpx → 24rpx */
   color: rgba(255, 255, 255, 0.5);
   line-height: 1.5;
-  margin-bottom: 14rpx;
+  margin-bottom: 16rpx; /* 14rpx → 16rpx */
 }
 
 .script-footer {
@@ -581,12 +583,12 @@ onMounted(async () => {
 }
 
 .script-style {
-  font-size: 16rpx;
+  font-size: 18rpx; /* 16rpx → 18rpx */
   color: #C084FC;
 }
 
 .select-btn {
-  font-size: 18rpx;
+  font-size: 20rpx; /* 18rpx → 20rpx */
   color: #C084FC;
   font-weight: 600;
   background: transparent;
@@ -687,18 +689,34 @@ onMounted(async () => {
   letter-spacing: 2rpx;
 }
 
-/* 超小屏幕适配 */
+/* 超小屏幕适配 - 375px 断点 */
-@media (max-width: 320px) {
+@media (max-width: 375px) {
   .params-container {
     grid-template-columns: 1fr;
   }
+}
 
-  .npc-form {
+/* 超小屏幕适配 - 320px 断点 */
-    grid-template-columns: 1fr 1fr;
+@media (max-width: 320px) {
+  .profile-grid, .npc-form {
+    grid-template-columns: 1fr;
   }
 
-  .profile-grid {
+  .section-card {
-    grid-template-columns: 1fr;
+    padding: 24rpx;
+  }
+
+  .glass-input, .glass-picker {
+    height: 80rpx;
+    font-size: 26rpx;
+  }
+
+  .picker-value {
+    line-height: 80rpx;
+  }
+
+  .generate-btn {
+    height: 88rpx;
   }
 }
 </style>