cps：收支明细弹窗

htmldev/cps/src/views/bill/index.vue

@@ -13,11 +13,40 @@
       <van-tab title="提现"></van-tab>
     </van-tabs>
     <Main/>
+    <van-popup
+      class="fbt-van-popup"
+      v-model="showDetail"
+      position="bottom">
+      <div class="fbt-van-popup-body">
+        <h3>费用详情</h3>
+        <p>
+          <span class="label">支付类型：</span>
+          <span class="value">下单返</span>
+        </p>
+        <p>
+          <span class="label">支付时间：</span>
+          <span class="value">2021-8-12  09:23:04</span>
+        </p>
+        <p>
+          <span class="label">订单号：</span>
+          <span class="value">126452164518</span>
+        </p>
+        <p>
+          <span class="label">交易单号：</span>
+          <span class="value">1274554794</span>
+        </p>
+        <p>
+          <span class="label">备注：</span>
+          <span class="value">备注备注备注备注备注</span>
+        </p>
+        <p class="amont">+￥736.23</p>
+      </div>
+    </van-popup>
   </div>
 </template>
 
 <script>
-import { Tabs, Tab } from 'vant'
+import { Tabs, Tab, Popup } from 'vant'
 import Main from './child/main'
 
 export default {
@@ -25,11 +54,13 @@ export default {
   components: {
     'van-tabs': Tabs,
     'van-tab': Tab,
-    Main
+    Main,
+    'van-popup': Popup
   },
   data () {
     return {
-      numActiveTab: 0
+      numActiveTab: 0,
+      showDetail: false
     }
   },
   async mounted () {
@@ -97,4 +128,67 @@ h2 {
     bottom: 0;
   }
 }
+
+.fbt-van-popup {
+  background: transparent;
+
+  &-body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 343px;
+    background: #FFFFFF;
+    border-radius: 8px;
+    padding-top: 24px;
+    margin: 0 auto 16px;
+
+    h3 {
+      width: 304px;
+      font-size: 24px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+      line-height: 33px;
+    }
+
+    p {
+      display: flex;
+      align-items: center;
+      width: 304px;
+      margin-top: 12px;
+
+      &:nth-of-type(1) {
+        margin-top: 20px;
+      }
+
+      span {
+        font-size: 14px;
+        line-height: 20px;
+      }
+
+      .label {
+        width: 100px;
+        color: #999999;
+      }
+
+      .value {
+        width: calc(100% - 100px);
+        text-align: right;
+        color: #333333;
+      }
+    }
+
+    .amont {
+      justify-content: flex-end;
+      padding: 15px 0 17px;
+      margin-top: 20px;
+      border-top: 1px solid rgba(31, 49, 74, 0.1);
+      font-size: 20px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+      line-height: 28px;
+    }
+  }
+}
 </style>

htmldev/cps/src/views/marketing/save/index.vue

@@ -97,7 +97,6 @@ export default {
   top: 56px;
   right: 0;
   bottom: 0;
-  padding-bottom: 102px;
   background: #F7F6F9;
   overflow: hidden;
 }
@@ -112,7 +111,7 @@ export default {
     flex-direction: column;
     align-items: center;
     width: 100%;
-    padding-top: 15px;
+    padding: 15px 0 102px;
 
     li {
       position: relative;