保证金页面

src/views/system/asset/securityFund.vue

+<template>
+  <div class="app-container securityFund">
+    <el-card class="box-card">
+      <div class="header">
+        <i class="el-icon-warning" style="color: #F1914E; "></i>
+        这里展示您保证金的交保、退保、补缴、扣除等记录，保证金并不是向云仓付费，而是作为专项资产在您的账户中。保证金余额不支持直接提现，当退出相应服务后可申请退还保证金！
+      </div>
+      <div class="securityFund-title">
+        <i style="display: inline-block; width: 3px; height: 15px; background: #3AA0FF; margin-right: 5px;"></i>
+        保证金
+      </div>
+      <div class="securityFund-content">
+        <div style="display: flex; align-items: center;">
+          <span><i class="el-icon-success" style="color: #67c23a; font-size: 26px;"></i></span>
+          <span style="margin: 0 20px 0 5px;">已缴纳保证金</span>
+          <span>合约期内保证金不能提现，合作到期后双方如终止合作则退还保证金。</span>
+        </div>
+        <div style="display: flex; justify-content: space-between; margin-top: 50px;">
+          <div style="width: 48%; text-align: center; border-right: 2px solid #E8E7E7;">
+            <div>保证金金额</div>
+            <div style="font-size: 30px; color: #3AA0FF; margin-top: 20px;">￥5000.00</div>
+          </div>
+          <div style="width: 48%; text-align: center; display: flex; justify-content: center; align-items: flex-end;">
+            <div>
+              <div>初始应缴</div>
+              <div style="font-size: 30px; color: #3AA0FF; margin-top: 20px;">￥5000.00</div>
+            </div>
+            <div style="padding: 6px 0 6px 10px;">【保证金额度说明】</div>
+            <div style="padding: 6px 0;">【保证金额度说明】</div>
+          </div>
+        </div>
+        <div style="text-align: center; margin-top: 50px; width: 96%;">
+          <el-button type="primary" size="mini" style="width: 80px;">充值</el-button>
+          <el-button size="mini" style="width: 80px;">申请退保</el-button>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+  .securityFund .header {
+    border: 1px solid #F1914E; 
+    background: #FFF5ED; 
+    padding: 15px; 
+    font-size: 14px;
+    margin: 10px auto;
+  }
+  .securityFund-title {
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+    font-size: 15px;
+    color: #333;
+    border-bottom: 2px solid #F6F6F8;
+    padding-bottom: 10px;
+    margin-top: 40px;
+  }
+  .securityFund-content {
+    background: #F8FBFD;
+    height: 300px;
+    color: #333;
+    font-weight: bold;
+    font-size: 14px;
+    padding: 30px;
+    margin-top: 30px;
+  }
+</style>
\ No newline at end of file