feat: 新增银行系统前端

Yi.Bbs.Vue3/src/assets/styles/index.scss

@@ -129,7 +129,7 @@ table {
 
 /* custom */
 li {
-  list-style: none;
+   list-style: none;
 }
 
 button {

Yi.Bbs.Vue3/src/components/ArticleContentInfo.vue

@@ -1,13 +1,18 @@
 <style scoped lang="scss">
-/*::v-dedp .markdown-body pre{
-    padding: 0 !important;
-}*/
-::v-deep  .pre-out
+@import '@/assets/atom-one-dark.css';
+@import '@/assets/github-markdown.css';
+
+::v-deep(.li-list){
+    list-style: inside !important;
+    //list-style: decimal !important;
+    
+}
+::v-deep(.pre-out)
 {
 padding: 0;
 overflow-x: hidden;
 }
-::v-deep .pre {
+::v-deep(.pre) {
     padding: 0;
     margin-bottom: 0;
     overflow-x: hidden;
@@ -53,7 +58,7 @@ overflow-x: hidden;
 
 }
 
-::v-deep .nav-ul {
+::v-deep(.nav-ul) {
     border-right: 1px solid #FFFFFF;
     margin-top: 12px;
     padding-left: 10px;
@@ -77,8 +82,7 @@ import { marked } from 'marked';
 
 import hljs from "highlight.js";
 //可以设置加载样式切换主题
-import '@/assets/atom-one-dark.css'
-import '@/assets/github-markdown.css'
+
 import {nextTick , ref, watch } from 'vue';
 const BREAK_LINE_REGEXP = /\r\n|\r|\n/g;
 
@@ -145,7 +149,6 @@ const navHandler = (code) => {
 const getLinesCount = (text) => {
     return (text.trim().match(BREAK_LINE_REGEXP) || []).length;
 }
-
 watch(props, (n, o) => {
     codeCopyDic=[];
     marked.setOptions({
@@ -168,7 +171,7 @@ watch(props, (n, o) => {
     );
     //需要注意代码块样式
    const soureHtml  = marked(n.code);
-    outputHtml.value= soureHtml.replace(/<pre>/g, '<pre class="pre-out">');
+    outputHtml.value= soureHtml.replace(/<pre>/g, '<pre class="pre-out">').replace(/<li>/g, '<li class="li-list">');
         nextTick(()=>{
             addCopyEvent();
         }) 

Yi.Bbs.Vue3/src/layout/activity/components/ActivityNav.vue

@@ -1,36 +1,41 @@
 <template>
-        <el-menu
-        default-active="1"
-        class="el-menu-vertical-demo"
-        @open="handleOpen"
-        @close="handleClose"
-        router
-      >
-      <el-menu-item index="1"  :route="{path:'/activity/sign'}">
-        <el-icon><Present /></el-icon>
-          <span>每日签到</span>
-        </el-menu-item>
-        <el-menu-item index="2" :route="{path:'/activity/level'}">
-          <el-icon><Ticket /></el-icon>
-          <span>等级</span>
-        </el-menu-item>
-        <el-menu-item index="3" :route="{path:'/activity/sign'}">
-            <el-icon><Memo /></el-icon>
-          <span>任务列表</span>
-        </el-menu-item>
-        <el-menu-item index="4" :route="{path:'/activity/lucky'}">
-            <el-icon><HelpFilled /></el-icon>
-          <span>大转盘</span>
-        </el-menu-item>
-        <el-menu-item index="5" :route="{path:'/activity/bank'}">
-            <el-icon><Sunrise /></el-icon>
-          <span>银行</span>
-        </el-menu-item>
-        <el-menu-item index="6" :route="{path:'/activity/sign'}">
-            <el-icon><Sunrise /></el-icon>
-          <span>娱乐城</span>
-        </el-menu-item>
-      </el-menu>
+  <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" router>
+    <el-menu-item index="1" :route="{ path: '/activity/sign' }">
+      <el-icon>
+        <Present />
+      </el-icon>
+      <span>每日签到</span>
+    </el-menu-item>
+    <el-menu-item index="2" :route="{ path: '/activity/level' }">
+      <el-icon>
+        <Ticket />
+      </el-icon>
+      <span>等级</span>
+    </el-menu-item>
+    <el-menu-item index="3" :route="{ path: '/activity/x' }">
+      <el-icon>
+        <Memo />
+      </el-icon>
+      <span>任务列表(暂未开放)</span>
+    </el-menu-item>
+    <el-menu-item index="4" :route="{ path: '/activity/lucky' }">
+      <el-icon>
+        <HelpFilled />
+      </el-icon>
+      <span>大转盘</span>
+    </el-menu-item>
+    <el-menu-item index="5" :route="{ path: '/activity/bank' }">
+      <el-icon>
+        <Money />
+      </el-icon> <span>银行(即将开放)</span>
+    </el-menu-item>
+    <el-menu-item index="6" :route="{ path: '/activity/x' }">
+      <el-icon>
+        <Sunrise />
+      </el-icon>
+      <span>娱乐城(暂未开放)</span>
+    </el-menu-item>
+  </el-menu>
 
 </template>
 <script setup>
@@ -42,12 +47,12 @@ const handleClose = (key, keyPath) => {
 }
 </script>
 <style lang="scss" scoped>
-.el-menu-item
-{
-    justify-content: center;
+.el-menu-item {
+  justify-content: center;
 }
-.el-menu{
-    border-right-width: 0px !important;
+
+.el-menu {
+  border-right-width: 0px !important;
 
 }
 </style>

Yi.Bbs.Vue3/src/main.js

@@ -8,6 +8,8 @@ import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 import "element-plus/dist/index.css";
 import "./assets/main.css";
 import "@/assets/styles/index.scss"; // global css
+import '@/assets/atom-one-dark.css'
+import '@/assets/github-markdown.css'
 
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 import directive from "./directive"; // directive

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' }]
+      }
+    }
+  ]
+};