修改样式

src/pages/help/detail.vue

@@ -1,18 +1,16 @@
 <template>
   <view class='app-container'>
-    <view class="form" v-for="item in tableData" :key="item.opinionId">
-      <view :class="['status', item.status === 1 ? 'status-info' : 'status-success']">
-        {{ status[item.status] }}
-      </view>
-      <view class="question">
-        {{ item.content }}
-      </view>
-      <view v-if="item.status === 3">
-        <h3>
-          回复：
-        </h3>
-        <view class="answer">
-          {{ item.reply }}
+    <view class="list">
+      <view class="item" v-for="item in tableData" :key="item.opinionId">
+        <view :class="['status', item.status === 1 ? 'status-info' : 'status-success']">
+          {{ status[item.status] }}
+        </view>
+        <view class="content">
+          {{ item.content }}
+        </view>
+        <view v-if="item.status === 3">
+          <span>回复：</span>
+          <view class="reply">{{ item.reply }}</view>
         </view>
       </view>
     </view>
@@ -43,9 +41,6 @@ export default {
       }
     }
   },
-  beforeCreate() {
-    document.querySelector('body').setAttribute('style', 'background-color:#FAFAFA;')
-  },
   onLoad() {
     this.getDetail()
   },
@@ -55,7 +50,7 @@ export default {
         if (res.data.code === 0) {
           res.data.data.records.map(i => {
             this.tableData.push(i)
-          })          
+          })
           this.hasMore = res.data.data.hasMore
         }
       })
@@ -72,51 +67,60 @@ export default {
 
 <style lang="scss" scoped>
 .app-container {
+  background-color: #FAFAFA;
   color: #353535;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
 
-  .form {
-    background-color: #FFF;
-    padding: 0 32rpx 32rpx;
-    margin-bottom: 40rpx;
-    border-radius: 16rpx;
-  }
+  .list {
+    flex: 1;
 
-  .status {
-    padding: 8rpx 20rpx;
-    display: inline-block;
-    border-bottom-left-radius: 16rpx;
-    border-bottom-right-radius: 16rpx;
-    font-size: 24rpx;
-    color: #FFF;
-    margin-bottom: 24rpx;
-  }
+    .item {
+      background-color: #FFF;
+      padding: 0 32rpx 32rpx;
+      margin-bottom: 40rpx;
+      border-radius: 16rpx;
 
-  .status-info {
-    background-color: #999;
-  }
+      .status {
+        padding: 8rpx 20rpx;
+        display: inline-block;
+        border-bottom-left-radius: 16rpx;
+        border-bottom-right-radius: 16rpx;
+        font-size: 24rpx;
+        color: #FFF;
+        margin-bottom: 24rpx;
+      }
 
-  .status-success {
-    background: linear-gradient(180deg, #A4D099 0%, #78B06A 100%);
-  }
+      .status-info {
+        background-color: #999;
+      }
 
-  .question {
-    font-size: 28rpx;
-  }
+      .status-success {
+        background: linear-gradient(180deg, #A4D099 0%, #78B06A 100%);
+      }
 
-  h3 {
-    color: #999;
-    font-size: 24rpx;
-    margin: 16rpx 0;
-  }
+      .content {
+        font-size: 28rpx;
+      }
 
-  .answer {
-    background-color: #E0E0E0;
-    font-size: 24rpx;
-    padding: 20rpx;
-    border-radius: 16rpx;
+      span {
+        color: #999;
+        font-size: 24rpx;
+        margin: 16rpx 0;
+        display: block;
+      }
+
+      .reply {
+        background-color: #E0E0E0;
+        font-size: 24rpx;
+        padding: 20rpx;
+        border-radius: 16rpx;
+      }
+    }
   }
 
-  .has-more{
+  .has-more {
     color: #999;
     font-size: 24rpx;
     text-align: center;