'样式'

src/pages/pay/payment/pay-entry.vue

@@ -11,12 +11,12 @@
     </transition>
     <transition name="trans">
       <div v-show="show" class="modal-show-bank">
-        <transition name="show">
         <div class="down">
           <div class="top">
             <img src="@/assets/payment/back.png" @click="show=false" >
             <span>支付方式</span>
           </div>
+          <scroll>
             <list-item :item-height="56" class="pay-way">
             <item
               v-for="(item,index) in nongBank"
@@ -77,9 +77,9 @@
               </section>
             </item>
           </list-item>
+          </scroll>
         </div>
-      </transition></div>
-    </transition>
+    </div></transition>
     <transition name="trans">
       <div v-show="confirm" class="modal-show-confirm">
         <div class="down">
@@ -361,6 +361,9 @@ export default {
 </script>
 <style lang='less' >
 #payment-pay-entry {
+  .vue-better-scroll__wrapper{
+    padding: 0;
+  }
   .trans-enter-active,
   .trans-leave-active {
     transition: opacity 0.5s;
@@ -382,19 +385,18 @@ export default {
       height: 466px;
       width: 100%;
      position: relative;
-      bottom: -18%;
+      top:16%;
       background: #fff;
       border-radius: 12px 12px 0 0;
       overflow: scroll;
       display: flex;
-      justify-content: center;
+      align-items: center;
+      flex-direction: column;
       .top {
-        position: fixed;
         padding-left: 24px;
         width: 330px;
         height: 54px;
         display: flex;
-        z-index: 999;
         align-items: center;
         background-color: #fff;
         img {
@@ -410,7 +412,7 @@ export default {
         }
       }
       .info {
-        margin-top: 60px;
+        //margin-top: 60px;
       }
     }
   }
@@ -427,19 +429,18 @@ export default {
       height: 466px;
       width: 100%;
      position: relative;
-      bottom: -18%;
+      top:16%;
       background: #fff;
       border-radius: 12px 12px 0 0;
       overflow: scroll;
       display: flex;
-      justify-content: center;
+      align-items: center;
+      flex-direction: column;
       .top {
-        position: fixed;
         left: 24px;
         width: 330px;
         height: 54px;
         display: flex;
-        z-index: 999;
         align-items: center;
         background-color: #fff;
         img {
@@ -457,8 +458,8 @@ export default {
       .pay-way {
         //width: 350px;
         //margin: 0 auto;
-        width: 90%;
-        margin-top: 54px;
+        width: 100%;
+       padding: 0 4% 0 4%;
         background: #fff;
         .hls-item {
           padding-left: 12px;