feat: 引入字体

src/assets/fonts/fonts.scss

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: "AliFangYuanTi"; /*字体名-自定义*/
+  src: url("./AlimamaFangYuanTiVF-Thin.ttf"); /* 字体路径 */
+  font-weight: normal;
+  font-style: normal;
+}

src/assets/svgs/add-voucher.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716004195627" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13032" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M646.272 604.0576H365.8496a21.5552 21.5552 0 0 0 0 43.1104h280.4224a21.5552 21.5552 0 0 0 0-43.1104z" fill="#6169ff" p-id="13033"></path><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m256.768 762.7264a43.904 43.904 0 0 1-44.9792 41.8816H285.3888a42.496 42.496 0 0 1-42.8544-41.8816V311.808a42.0352 42.0352 0 0 1 42.8544-41.1136h93.7728a43.9552 43.9552 0 0 1 42.8288-32.1024h47.2576a39.8848 39.8848 0 0 1 72.2688 0h46.4384a43.9296 43.9296 0 0 1 42.88 32.1024h94.3616a42.7264 42.7264 0 0 1 43.52 41.8304z" fill="#6169ff" p-id="13034"></path><path d="M502.2976 357.888a33.536 33.536 0 0 0 3.712-66.9696 34.5088 34.5088 0 0 0-35.4048 33.5104 33.5104 33.5104 0 0 0 31.6928 33.4592z" fill="#6169ff" p-id="13035"></path><path d="M646.272 459.4176H364.4416a21.5552 21.5552 0 1 0 1.408 43.0848H647.68a21.5552 21.5552 0 1 0-1.3824-43.0848z" fill="#6169ff" p-id="13036"></path></svg>

src/assets/svgs/balance-inquiry.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716004212622" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13305" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M612.8896 360.96a18.944 18.944 0 0 0-26.752 1.6128l-60.7744 70.3744-53.0688-70.144a18.9696 18.9696 0 0 0-28.8 24.704l47.104 62.2592H455.936a18.9696 18.9696 0 1 0 0.3328 37.9392h48.8704v26.6752H456.192a18.9952 18.9952 0 0 0 0 37.9648h48.8704v47.7184a18.9952 18.9952 0 0 0 37.9648 0v-47.7184h55.6288a18.9952 18.9952 0 0 0 0-37.9648h-55.6288v-26.6752h55.9616a18.9696 18.9696 0 1 0-0.3328-37.9392h-37.632l53.504-62.0288a18.9696 18.9696 0 0 0-1.6384-26.7776z" fill="#0dafff" p-id="13306"></path><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m-242.6624 635.2128V333.8496a64.4352 64.4352 0 0 1 64.2816-64.384h389.12a64.4608 64.4608 0 0 1 64.2816 64.3328v248.4992a49.6384 49.6384 0 0 0-23.6032-7.1936l-91.0592-3.4048a50.3296 50.3296 0 0 0-45.696 28.5696 49.6896 49.6896 0 0 0 8.448 55.6288l40.2688 43.52h-341.76a64.3584 64.3584 0 0 1-64.2816-64.2048z m399.0272 172.1856H388.48a20.2752 20.2752 0 1 1-0.1792-40.5504H668.16a20.2752 20.2752 0 1 1 0.1536 40.5504z m152.3712-25.1392a16.4352 16.4352 0 0 1-12.3648 4.8128 17.3056 17.3056 0 0 1-12.0832-5.5296l-137.0112-147.7888a16.9216 16.9216 0 0 1-2.8928-19.0976 17.6896 17.6896 0 0 1 16.2816-10.0352l89.6 3.3792a16.768 16.768 0 0 1 12.0576 5.504 16.5888 16.5888 0 0 1 4.6336 12.3904 16.896 16.896 0 0 1-5.4528 12.16 18.048 18.048 0 0 1-12.4928 4.5824l-47.7952-1.792 108.3904 116.9152a17.3568 17.3568 0 0 1-0.8704 24.4992z" fill="#0dafff" p-id="13307"></path></svg>

src/assets/svgs/data-analysis.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716004266100" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13863" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m289.4848 685.7984a85.6576 85.6576 0 0 1-85.5808 85.5552h-414.72a85.6576 85.6576 0 0 1-85.5808-85.5552v-117.76h184.96a32.1536 32.1536 0 0 0 22.912-9.7024l19.4816-20.1472 57.1904 106.3168a31.7696 31.7696 0 0 0 28.16 16.9472h1.4848a31.872 31.872 0 0 0 28.16-19.6096l74.24-174.464 31.232 88.448a32.1536 32.1536 0 0 0 30.208 21.5808h107.8784z m0-155.7248h-97.024l-40.6528-115.2a32 32 0 0 0-59.7504-1.9712l-77.2864 181.3504-52.0448-96.7168a30.848 30.848 0 0 0-6.0928-8.1152 31.9232 31.9232 0 0 0-45.1072 0.8704l-29.568 30.4896H215.6032v-165.7344a85.7088 85.7088 0 0 1 85.5808-85.5808h414.72a85.7088 85.7088 0 0 1 85.5808 85.5808z" fill="#37b9d3" p-id="13864"></path></svg>

src/assets/svgs/data-queries.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716004057871" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12325" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M411.904 521.6256a66.8672 66.8672 0 1 0 64.4608 66.8416 66.8672 66.8672 0 0 0-64.4608-66.8928z m20.2496 87.04a28.6464 28.6464 0 1 1-0.2048-40.32 28.6208 28.6208 0 0 1 0.2048 40.32z" fill="#3987ff" p-id="12326"></path><path d="M526.4384 454.6816h152.7296a19.0976 19.0976 0 0 0 0-38.1696h-152.7296a19.0976 19.0976 0 0 0 0 38.1696z" fill="#3987ff" p-id="12327"></path><path d="M455.68 384l-62.848 62.848-24.7296-24.6272a19.072 19.072 0 0 0-26.9568 26.9568l38.1696 38.1696a19.072 19.072 0 0 0 26.9568 0l76.3648-76.3392A19.072 19.072 0 1 0 455.68 384z" fill="#3987ff" p-id="12328"></path><path d="M679.168 569.2928h-152.7296a19.072 19.072 0 0 0 0 38.144h152.7296a19.072 19.072 0 1 0 0-38.144z" fill="#3987ff" p-id="12329"></path><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m267.2384 702.848a76.3904 76.3904 0 0 1-76.3648 76.3648H321.1264a76.3392 76.3392 0 0 1-76.3392-76.3648V321.1008a76.3392 76.3392 0 0 1 76.416-76.3392h381.6704a76.3904 76.3904 0 0 1 76.3648 76.3904z" fill="#3987ff" p-id="12330"></path></svg>

src/assets/svgs/financial-statement.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716004236540" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13582" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M415.0272 610.0736a20.8384 20.8384 0 0 0 20.864-20.864v-171.2128a20.8384 20.8384 0 0 0-41.7024 0v171.2128a20.8384 20.8384 0 0 0 20.8384 20.864z" fill="#3a87ff" p-id="13583"></path><path d="M508.416 609.8688a20.864 20.864 0 0 0 21.1712-20.48v-66.56a20.8896 20.8896 0 0 0-41.7792 0v66.56a20.8896 20.8896 0 0 0 20.608 20.48z" fill="#3a87ff" p-id="13584"></path><path d="M604.9536 609.664a20.864 20.864 0 0 0 21.1712-20.48V455.68a20.8896 20.8896 0 1 0-41.7536 0.5888v132.9152a20.864 20.864 0 0 0 20.5824 20.48z" fill="#3a87ff" p-id="13585"></path><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m234.0608 738.3552a66.3296 66.3296 0 0 1-66.2528 66.2272H335.7952a66.3552 66.3552 0 0 1-66.2784-66.2272V281.8048a66.3552 66.3552 0 0 1 66.2784-66.2272h275.2512a20.7104 20.7104 0 0 1 14.592 5.9392l114.1248 111.488a20.8128 20.8128 0 0 1 6.2976 14.9248z" fill="#3a87ff" p-id="13586"></path><path d="M616.2432 348.2624h79.36l-79.36-77.4656z" fill="#3a87ff" p-id="13587"></path><path d="M634.88 641.8944h-243.456a20.864 20.864 0 0 0 0 41.728h243.968a20.864 20.864 0 1 0-0.512-41.728z" fill="#3a87ff" p-id="13588"></path></svg>

src/assets/svgs/more.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716003997595" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11794" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M260.1984 566.7328l89.216 43.8784v-77.952l-89.216-43.9552z" fill="#3987ff" p-id="11795"></path><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m-28.8 799.232a23.3984 23.3984 0 0 1-9.7024 19.2768 19.6352 19.6352 0 0 1-20.1984 1.5104l-225.536-112.9728a23.04 23.04 0 0 1-12.2624-20.7872v-242.2016a23.4752 23.4752 0 0 1 9.728-19.2768 19.6608 19.6608 0 0 1 20.1984-1.5104l225.5104 112.9472a23.04 23.04 0 0 1 12.2624 20.7872z m13.4144-297.9328l-239.9488-121.0368a23.7824 23.7824 0 0 1 0-41.5232l239.9488-121.0368a19.6096 19.6096 0 0 1 17.792 0l239.9488 121.0368a23.7824 23.7824 0 0 1 0 41.5232l-239.9488 121.0368a19.6096 19.6096 0 0 1-17.7664 0z m298.9568 184.8832a23.04 23.04 0 0 1-12.2624 20.7872l-225.4848 112.9728a19.712 19.712 0 0 1-20.224-1.5104 23.424 23.424 0 0 1-9.7024-19.2768v-242.1504a23.04 23.04 0 0 1 12.2624-20.7872l225.4848-112.9472a19.6864 19.6864 0 0 1 20.224 1.5104 23.3984 23.3984 0 0 1 9.7024 19.2768z" fill="#3987ff" p-id="11796"></path></svg>

src/main.ts

@@ -15,6 +15,8 @@ import ArcoVueIcon from "@arco-design/web-vue/es/icon";
 import "virtual:svg-icons-register";
 // 引入i18n
 import i18n from "@/lang/index";
+// 引入字体
+import "@/assets/fonts/fonts.scss";
 const app = createApp(App);
 app.use(ArcoVue, {
   componentPrefix: "arco"

src/style/global-style.scss

@@ -7,3 +7,24 @@
 .margin-right-text {
   margin-right: $margin-text;
 }
+
+.flex-row-between-center {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-middling {
+  width: 200px;
+}
+
+.row-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.row-start-center {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}

src/views/home/home.vue

@@ -1,17 +1,49 @@
 <template>
   <div class="home">
     <!-- 常用功能 -->
-    <div>
+    <div class="shortcut-box">
-      <div class="shortcut">
+      <div class="box-title">
         <div>常用功能</div>
         <div>
-          <span><icon-unordered-list /></span>
+          <span><icon-edit /></span>
-          <span>自定义</span>
+          <span class="margin-left-text">自定义</span>
         </div>
       </div>
-      <a-divider :margin="10" />
+      <a-divider :margin="16" />
-      <div>
+      <div class="flex-row-between-center">
-        <div v-for="item in shortcut" :key="item.id">{{ item.name }}</div>
+        <div class="card-middling row-center" v-for="item in shortcut" :key="item.id">
+          <div>
+            <SvgIcon :name="item.svg" :size="40" />
+            <span class="shortcut-card-label">{{ item.name }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 第三板指标 -->
+    <div class="target-box">
+      <div class="box-title">
+        <div>第三板指标</div>
+      </div>
+      <a-divider :margin="16" />
+      <div class="row-start-center">
+        <div class="target-grade">
+          <div class="target-grade-innerbox">
+            <div class="grade-value">{{ targetData.all.value }}</div>
+            <div class="target-title">{{ targetData.all.title }}</div>
+          </div>
+        </div>
+        <div class="target-other" v-for="(item, index) in targetData.list" :key="index">
+          <div>
+            <div>
+              <span class="other-value">{{ item.value }}</span>
+              <span>
+                <icon-play-arrow-fill class="target-up" v-if="item.type === 'up'" />
+                <icon-play-arrow-fill class="target-down" v-else />
+              </span>
+            </div>
+            <div class="target-title">{{ item.title }}</div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -22,34 +54,68 @@ const shortcut = ref([
   {
     id: 1,
     name: "数据查询",
-    icon: "home",
+    svg: "data-queries"
-    path: "/home"
   },
   {
     id: 2,
     name: "新增凭证",
-    icon: "dashboard",
+    svg: "add-voucher"
-    path: "/home"
   },
   {
     id: 3,
     name: "余额查询",
-    icon: "component",
+    svg: "balance-inquiry"
-    path: "/home"
   },
   {
     id: 4,
     name: "财务报表",
-    icon: "component",
+    svg: "financial-statement"
-    path: "/home"
   },
   {
     id: 5,
+    name: "数据统计",
+    svg: "data-analysis"
+  },
+  {
+    id: 6,
     name: "更多",
-    icon: "form",
+    svg: "more"
-    path: "/home"
   }
 ]);
+
+const targetData = reactive({
+  all: {
+    title: "综合评分",
+    value: 9.9
+  },
+  list: [
+    {
+      title: "资产负债率",
+      value: "78%",
+      type: "up"
+    },
+    {
+      title: "毛利率",
+      value: "88%",
+      type: "down"
+    },
+    {
+      title: "营业收入增长率",
+      value: "58%",
+      type: "up"
+    },
+    {
+      title: "净利润增长率",
+      value: "76%",
+      type: "up"
+    },
+    {
+      title: "净资产收益率",
+      value: "76%",
+      type: "down"
+    }
+  ]
+});
 </script>
 
 <style lang="scss" scoped>
@@ -57,11 +123,75 @@ const shortcut = ref([
   height: 700px;
   border-radius: $radius-box;
   padding: $padding;
-  background: #fff;
+  background: $color-bg-2;
 }
-.shortcut {
+.box-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  font-size: $font-size-body-3;
+  color: $color-text-1;
+}
+.shortcut-box {
+  .shortcut-card-label {
+    font-size: $font-size-body-3;
+    margin-left: 20px;
+    color: $color-text-2;
+  }
+}
+.target-box {
+  border: 1px solid cyan;
+  margin-top: calc($padding * 2);
+  .target-grade {
+    width: 180px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    &::before {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      content: "";
+      height: 30px;
+      width: 1px;
+      background: $color-border-2;
+    }
+    .target-grade-innerbox {
+      text-align: center;
+      .grade-value {
+        font-family: "AliFangYuanTi";
+        font-size: $font-size-title-2;
+        font-weight: bold;
+        color: $color-danger;
+      }
+    }
+  }
+  .target-other {
+    width: 180px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .other-value {
+      font-family: "AliFangYuanTi";
+      font-weight: bold;
+      margin-right: $margin-text;
+    }
+    .target-up {
+      transform: rotate(-90deg);
+      color: $color-danger;
+    }
+    .target-down {
+      transform: rotate(90deg);
+      color: $color-success;
+    }
+  }
+  .target-title {
+    margin-top: $margin-text;
+    color: $color-text-3;
+  }
 }
 </style>