修改样式

src/pages/help/index.vue

@@ -1,26 +1,30 @@
 <template>
   <view class="app-container">
-    <h3>问题类型</h3>
-    <view class="radio-list">
-      <radio-group @change="radioChange">
-        <label v-for="item in typeOptions" :key="item.id">
-          <radio :value="item.id.toString()" color="#A4D099" :checked="item.id == active"
-            style="transform: scale(0.7); margin: -3px;" />
-          <span>{{ item.name }}</span>
-        </label>
-      </radio-group>
-    </view>
-    <view class="textarea">
-      <textarea v-model="form.content" maxlength="200" placeholder="请描述您遇到的问题或意见" />
-    </view>
-    <view class="upload">
-      <view class="img-list" v-for="(item, index) in imageFiles" :key="index">
-        <uni-icons class="close" type="closeempty" color="#FFF" size="12" @click="getDelete(index)" />
-        <img :src="item" />
+    <view class="list">
+      <view class="item margin-bottom">
+        <h3>问题类型</h3>
+      </view>
+      <view class="item margin-bottom">
+        <radio-group @change="radioChange">
+          <label v-for="item in typeOptions" :key="item.id">
+            <radio :value="item.id.toString()" color="#A4D099" :checked="item.id == active"
+              style="transform: scale(0.7); margin: -7rpx;" />
+            <span>{{ item.name }}</span>
+          </label>
+        </radio-group>
+      </view>
+      <view class="item margin-bottom">
+        <textarea v-model="form.content" maxlength="200" placeholder="请描述您遇到的问题或意见" />
+      </view>
+      <view class="item upload margin-bottom">
+        <view class="img-list" v-for="(item, index) in imageFiles" :key="index">
+          <uni-icons class="close" type="closeempty" color="#FFF" size="12" @click="getDelete(index)" />
+          <img :src="item" />
+        </view>
+        <button v-if="imageFiles.length < 9" @click="upload">
+          <uni-icons type="plusempty" color="#A4D099" size="36" />
+        </button>
       </view>
-      <button v-if="imageFiles.length < 9" @click="upload">
-        <uni-icons type="plusempty" color="#A4D099" size="36" />
-      </button>
     </view>
     <view class="submit">
       <button type="submit" circle @click="getSubmit">提交</button>
@@ -60,14 +64,6 @@ export default {
   onLoad() {
     this.getList()
   },
-  onReady() {
-    // 背景改色
-    document.querySelector('body').setAttribute('style', 'background-color:#FFF;')
-    // 全局顶部动态高度
-    this.$nextTick(() => {
-      document.getElementsByClassName('app-container')[0].style = this.$el.clientHeight > uni.getSystemInfoSync().safeArea.height ? '' : 'height: 100%'
-    })
-  },
   methods: {
     // 反馈类型
     getList() {
@@ -137,96 +133,100 @@ export default {
 
 <style lang="scss" scoped>
 .app-container {
+  background-color: #FFF;
   color: #353535;
-  position: relative;
-}
-.radio-list {
-  margin-top: 20px;
-
-  uni-radio-group {
-    display: flex;
-    flex-wrap: wrap;
-  }
+  display: flex;
+  flex-flow: column nowrap;
+  min-height: 100vh;
+
+  .list {
+    flex: 1;
+
+    .item {
+      uni-radio-group {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+
+        label {
+          width: 144rpx;
+          font-size: 24rpx;
+          display: flex;
+          align-items: flex-start;
+        }
 
-  label {
-    width: 25%;
-    font-size: 24rpx;
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: 25px;
-  }
+        span {
+          word-break: break-all;
+        }
+      }
 
-  span {
-    word-break: break-all;
-  }
-}
+      textarea {
+        border-radius: 8px;
+        height: 240rpx;
+        background-color: #FAFAFA;
+      }
+    }
 
-textarea {
-  border-radius: 8px;
-  height: 240rpx;
-  background-color: #FAFAFA;
-}
+    .upload {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+
+      .img-list {
+        display: flex;
+        position: relative;
+
+        .close {
+          width: 40rpx;
+          height: 40rpx;
+          line-height: 40rpx;
+          border-radius: 50%;
+          position: absolute;
+          right: 0rpx;
+          top: 0rpx;
+          background-color: #888;
+        }
 
-.upload {
-  margin: 24px 0 80px;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  height: calc(160rpx * 3 + 24rpx * 3);
+        img {
+          width: 160rpx;
+          height: 160rpx;
+          border-radius: 16rpx;
+        }
+      }
 
-  .img-list {
-    position: relative;
+      button {
+        width: 160rpx;
+        height: 160rpx;
+        line-height: 160rpx;
+        margin: 0;
+        background-color: #F0F7EE;
+        border-radius: 16rpx;
+      }
+    }
   }
 
-  img {
-    width: 160rpx;
-    height: 160rpx;
-    margin: 0 12px 12px 0;
-    border-radius: 16rpx;
-  }
+  .submit {
+    width: 100%;
+    margin-top: 100px;
 
-  .close {
-    width: 40rpx;
-    height: 40rpx;
-    line-height: 40rpx;
-    text-align: center;
-    border-radius: 50%;
-    position: absolute;
-    right: 28rpx;
-    top: 4rpx;
-    background-color: #888;
-    z-index: 99;
-  }
+    button {
+      width: 400rpx;
+      height: 80rpx;
+      line-height: 80rpx;
+    }
 
-  button {
-    width: 160rpx;
-    height: 160rpx;
-    line-height: 160rpx;
-    margin: 0;
-    background-color: #F0F7EE;
-    border-radius: 16rpx;
+    .contact {
+      width: 100%;
+      font-size: 24rpx;
+      color: #999;
+      display: flex;
+      justify-content: space-around;
+      margin-top: 95rpx;
+    }
   }
 }
 
-.submit {
-  width: 100%;
-  position: absolute;
-  left: 0;
-  bottom: 20px;
-
-  button {
-    width: 400rpx;
-    height: 80rpx;
-    line-height: 80rpx;
-  }
-
-  .contact {
-    width: 100%;
-    font-size: 24rpx;
-    color: #999;
-    display: flex;
-    justify-content: space-around;
-    margin-top: 30rpx;
-  }
+.margin-bottom {
+  margin-bottom: 20px;
 }
 </style>