no message

src/pages/pay/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class='app-container'>
+  <view class='app-container' flex column>
     <view class="header">
       <view class="info" flex>
         <view class="dev-img" flex center>
@@ -20,10 +20,9 @@
     </view>
     <view class="main">
       <view class="title">流量选择</view>
-      <view flex between>
-        <view :class="['list', active === index ? 'active' : '']"
-          :style="{ 'width': `calc(${100 / options.length}% - 5px)` }" v-for="(item, index) in options" :key="index"
-          flex column between @click="getActive(item, index)" :data-content-before="item.operators"
+      <view flex wrap>
+        <view :class="['list', active === index ? 'active' : '']" v-for="(item, index) in options" :key="index" flex
+          column between @click="getActive(item, index)" :data-content-before="item.operators"
           :data-content-after="item.tagName">
           <view class="flow">{{ item.name }}</view>
           <view class="discount icon">{{ item.goodDiscountedPrice }}</view>
@@ -217,20 +216,23 @@ export default {
 }
 
 .main {
+  flex: 1;
   padding: 0 32rpx;
+  margin-bottom: 320rpx;
 
   .active {
     background-color: rgba(199, 170, 134, 0.12);
   }
 
   .list {
+    width: calc(100% / 3 - 10px);
     height: 268rpx;
     border: 1px solid #C7AA86;
     border-radius: 16rpx;
     padding: 48rpx 0;
     color: #FFD5A0;
     position: relative;
-    margin: 24rpx 0;
+    margin: 24rpx 5px 0;
 
     .flow {
       font-size: 32rpx;
@@ -280,6 +282,7 @@ export default {
   .explain {
     font-size: 24rpx;
     opacity: 0.5;
+    margin-top: 24rpx;
   }
 }