feat: 新增银行系统前端

Yi.Bbs.Vue3/src/views/bank/Index.vue

@@ -1,31 +1,61 @@
 <template>
-<div class="bank-body">
-    <h2>小心谨慎选择银行机构，确保资金安全</h2>
-    <div>
-<ExchangeRate/>
-    </div>
-    <el-divider />
-    <div>
-        <el-row :gutter="20">
-            <el-col :span=8 v-for="i in 10">
-                <BankCard ></BankCard>
-            </el-col>
+    <div class="bank-body">
+        <h2>小心谨慎选择银行机构，确保资金安全</h2>
+        <div>
+            <ExchangeRate :option="statisOptions" />
+        <div class="div-show">
+            <p class="p-rate">当前实时利息：<span>110%</span>（可获取投入的百分之110%的本金）</p>
+            <el-button type="primary"><el-icon><AddLocation /></el-icon>申领银行卡</el-button>
+        </div>
+        </div>
+        <el-divider />
+        <div>
+            <el-row :gutter="20">
+                <el-col :span=8 v-for="i in 6">
+                    <BankCard></BankCard>
+                </el-col>
             </el-row>
-      
+
+        </div>
     </div>
-</div>
 </template>
 <script setup>
 import BankCard from "./components/BankCard.vue"
-import ExchangeRate from "./components/ExchangeRate.vue"
+import ExchangeRate from "./components/ExchangeRateChart.vue"
+import {computed, ref} from "vue";
+const weekList=ref([]);
+const statisOptions = computed(() => {
+  return {
+    xAxis: {
+      data: ['1时', '2时', '3时', '4时', '5时', '6时', '7时','1时', '2时', '3时', '4时', '5时', '6时', '7时','5时', '6时', '7时','1时', '2时', '3时', '4时', '5时', '6时', '7时']
+    },
+    series: {
+      data:[10, 6, 13, 11, 12, 12, 9,10, 11, 13, 11, 8, 14, 9,12, 12, 9,10, 11, 13, 11, 8, 14, 9]
+    },
+  };
+});
 </script>
 <style scoped lang="scss">
-.bank-body
-{
-    padding: 10px;
+.bank-body {
+    padding: 20px 30px;
 }
-h2{
-text-align: center;
+
+h2 {
+    text-align: center;
 
 }
+.div-show
+{
+    display: flex;
+    justify-content: space-between;
+    .p-rate
+  {
+span{
+  font-weight:600;
+  font-size: larger;
+}
+
+  }
+}
+
 </style>

Yi.Bbs.Vue3/src/views/bank/components/BankCard.vue

@@ -7,21 +7,29 @@
         <p>剩余定期提款时间还剩: 2天12小时</p>
     </div>    
         <div class="div-oper">
-            <el-button>存款</el-button><el-button>提款</el-button>
+            <el-button>存款</el-button><el-button type="danger">提款</el-button>
         </div>
     </div>
 </template>
 <style scoped lang="scss">
 .card {
-    background-color: green;
     height: 140px;
     margin: 10px 0;
+    border-radius: 15px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
     .card-body
     {
+        padding: 5px;
         height: 100px;
+        background-color: #FDC830;
+  color: #FFFFFF;
+      border-radius: 15px 15px 0 0;
     }
     .div-oper {
-        background-color: aqua;
+        padding: 5px;
+        padding-right: 10px;
+        border-radius:0 0 15px 15px ;
+        background-color: #FFFFFF;
         text-align: end;
         height: 40px;
     }

Yi.Bbs.Vue3/src/views/bank/components/ExchangeRate.vue

@@ -1,16 +0,0 @@
-<template>
-    <div>
-    <div class="rate">
-        银行利息汇率趋势图
-    </div>
-    <p>当前实时汇率：110%（可获取投入的百分之110%的本金）</p>
-    </div>
-    </template>
-<style scoped lang="scss">
-.rate
-{
-background-color: brown;
-height: 100px;
-
-}
-</style>

Yi.Bbs.Vue3/src/views/bank/components/ExchangeRateChart.vue

@@ -0,0 +1,43 @@
+<template>
+    <div>
+    <div class="rate v-chart"  ref="statis">
+        银行利息利息趋势图
+    </div>
+   
+    
+    </div>
+    </template>
+
+<script setup >
+  import useEcharts from "@/hooks/useEcharts";
+  import { exchangeRateConfig } from "../hooks/exchangeRateConfig";
+  import {ref} from 'vue';
+  const props = defineProps({
+    option: {
+      type: Object,
+      default: () => {},
+    },
+  });
+  const emits = defineEmits([
+    "chart-click", // 点击chart
+  ]);
+  
+  let statis = ref(null);
+  const { resize } = useEcharts(statis, emits, props, exchangeRateConfig);
+  defineExpose({
+    resize,
+  });
+
+
+</script>
+<style scoped lang="scss">
+.rate
+{
+height: 300px;
+
+}
+.v-chart {
+    width: 100%;
+  }
+
+</style>

Yi.Bbs.Vue3/src/views/bank/hooks/exchangeRateConfig.js

@@ -0,0 +1,47 @@
+export const exchangeRateConfig ={
+  title: {
+    text: '银行利息趋势图'
+  },
+  tooltip: {
+    trigger: 'axis'
+  },
+  legend: {},
+  toolbox: {
+    show: true,
+    feature: {
+      dataZoom: {
+        yAxisIndex: 'none'
+      },
+      dataView: { readOnly: false },
+      magicType: { type: ['line', 'bar'] },
+      restore: {},
+      saveAsImage: {}
+    }
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: []
+  },
+  yAxis: {
+    type: 'value',
+    axisLabel: {
+      formatter: '{value} 率'
+    }
+  },
+  series: [
+    {
+      type: 'line',
+      data: [],
+      markPoint: {
+        data: [
+          { type: 'max', name: 'Max' },
+          { type: 'min', name: 'Min' }
+        ]
+      },
+      markLine: {
+        data: [{ type: 'average', name: 'Avg' }]
+      }
+    }
+  ]
+};