From 660be19d5e548734674dde108b0fc7ff3fbcf12c Mon Sep 17 00:00:00 2001
From: TimSpan <cat20201314@163.com>
Date: Wed, 14 May 2025 16:17:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=8F=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json   |   7 +
 package.json        |   1 +
 src/views/index.vue | 457 +++++++++++++++++++++++++++++++++++---------
 3 files changed, 371 insertions(+), 94 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a6d9faa..ab32889 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "jsencrypt": "^3.3.2",
         "lodash-es": "^4.17.21",
         "naive-ui": "^2.41.0",
+        "odometer": "^0.4.8",
         "pinia": "^3.0.1",
         "pinia-plugin-persistedstate": "^4.2.0",
         "sass": "^1.85.1",
@@ -3793,6 +3794,12 @@
         "node": "^14.16.0 || >=16.10.0"
       }
     },
+    "node_modules/odometer": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmmirror.com/odometer/-/odometer-0.4.8.tgz",
+      "integrity": "sha512-bfKuAhWE/qMCiX9bwX90c5bTpt7MDVeq1e6YsOHQrYokNhv9jhS5JbR9kg6i+FeWmDgalf3VUtwNx1aVaZ8cgg==",
+      "license": "MIT"
+    },
     "node_modules/ohash": {
       "version": "2.0.11",
       "resolved": "https://registry.npmmirror.com/ohash/-/ohash-2.0.11.tgz",
diff --git a/package.json b/package.json
index cfc4912..426cfc3 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "jsencrypt": "^3.3.2",
     "lodash-es": "^4.17.21",
     "naive-ui": "^2.41.0",
+    "odometer": "^0.4.8",
     "pinia": "^3.0.1",
     "pinia-plugin-persistedstate": "^4.2.0",
     "sass": "^1.85.1",
diff --git a/src/views/index.vue b/src/views/index.vue
index b18c111..65a355d 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -7,39 +7,70 @@
           <span class="homeSpan">2024-11-25</span>
         </blockquote>
         <span>【系统菜单调整通知】</span>
-        <span>为了更方便功能查找使用，从新编排了菜单位置，基础信息相关的页面都在顶部”基础信息“下</span>
+        <span>
+          为了更方便功能查找使用，从新编排了菜单位置，基础信息相关的页面都在顶部”基础信息“下
+        </span>
       </div>
       <div class="home2Item">
         <blockquote class="public">
           <div class="header-wrapper">
             <span>供应商</span>
-            <div class="fold-button" @click="toggleFold">
+            <div
+              class="fold-button"
+              @click="toggleFold"
+            >
               <span>{{ isFold ? "展开" : "收起" }}</span>
-              <Icon name="LineMdPerson" :style="{ transform: isFold ? 'rotate(90deg)' : 'rotate(265deg)' }"></Icon>
+              <Icon
+                name="LineMdPerson"
+                :style="{
+                  transform: isFold ? 'rotate(90deg)' : 'rotate(265deg)',
+                }"
+              ></Icon>
             </div>
           </div>
         </blockquote>
         <!-- 折叠内容区域 -->
-        <div :style="{height:isFold?'420px':'600px'}">
+        <div :style="{ height: isFold ? '420px' : '600px' }">
           <div class="fold-content">
             <!-- 这里放具体内容 -->
             <div class="fold-content_item">
-              <div class="fold-content_item_index" v-for="(item,index) in foldContentItemIndex" :key="index">
+              <div
+                class="fold-content_item_index"
+                v-for="(item, index) in foldContentItemIndex"
+                :key="index"
+              >
                 <div class="fold-content_item_index_top">
                   <div class="content">{{ item.titleName }}</div>
                   <span>{{ item.video }}</span>
                 </div>
-                <div class="intermediate" v-for="items in item.intermediate" :key="items.key">
+                <div
+                  class="intermediate"
+                  v-for="items in item.intermediate"
+                  :key="items.key"
+                >
                   <span style="width: 50px">{{ items.name }}</span>
                   <span style="width: 50px">{{ items.digital }}</span>
                   <span style="width: 50px">{{ items.mechanism }}</span>
                   <span style="width: 50px">{{ items.digitalKey }}</span>
                 </div>
                 <hr />
-                <div style="display: flex;align-items: center;justify-content: space-between">
-                  <div style="display: flex;">
+                <div
+                  style="
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                  "
+                >
+                  <div style="display: flex">
                     <div class="risk">{{ item.risk }}</div>
-                    <div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">
+                    <div
+                      style="
+                        font-weight: bold;
+                        color: #009688 !important;
+                        margin-left: 10px;
+                        line-height: 18px;
+                      "
+                    >
                       {{ item.score }}分
                     </div>
                   </div>
@@ -49,7 +80,6 @@
                   </div>
                 </div>
               </div>
-
             </div>
           </div>
         </div>
@@ -57,93 +87,199 @@
       <div class="home4Item">
         <div class="home4ItemIndex">
           <div class="home4ItemIndexItem">
-            <blockquote class="public" style="margin-top: 10px">
+            <blockquote
+              class="public"
+              style="margin-top: 10px"
+            >
               <div class="header-wrapper">
                 <span>用户数据</span>
               </div>
             </blockquote>
             <div>
-              <div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
-                <div style="background-color: #F7F7F7;color: #666">总数</div>
+              <div
+                style="
+                  display: flex;
+                  justify-content: space-between;
+                  padding: 12px 15px;
+                  line-height: 20px;
+                "
+              >
+                <div style="background-color: #f7f7f7; color: #666">总数</div>
                 <div style="font-size: 20px">15452</div>
               </div>
-              <div style="display: flex;justify-content: space-between;padding: 12px  15px;line-height: 20px">
-                <div style="background-color: #F7F7F7;color: #666"> 日活跃量</div>
+              <div
+                style="
+                  display: flex;
+                  justify-content: space-between;
+                  padding: 12px 15px;
+                  line-height: 20px;
+                "
+              >
+                <div style="background-color: #f7f7f7; color: #666">
+                  日活跃量
+                </div>
                 <div style="font-size: 20px">6666</div>
               </div>
-              <div style="display: flex;justify-content: space-between;padding: 12px  15px;line-height: 20px">
-                <div style="background-color: #F7F7F7;color: #666">用户</div>
+              <div
+                style="
+                  display: flex;
+                  justify-content: space-between;
+                  padding: 12px 15px;
+                  line-height: 20px;
+                "
+              >
+                <div style="background-color: #f7f7f7; color: #666">用户</div>
                 <div style="font-size: 20px">524</div>
               </div>
             </div>
           </div>
-          <div class="home4ItemIndexItem" >
-            <blockquote class="public" style="margin-top: 10px">
+          <div class="home4ItemIndexItem">
+            <blockquote
+              class="public"
+              style="margin-top: 10px"
+            >
               <div class="header-wrapper">
                 <span>每日消息</span>
               </div>
             </blockquote>
             <div>
-              <div style="display: flex;justify-content: space-between;padding: 12px 15px;line-height: 20px">
-                <div style="background-color: #F7F7F7;color: #666">今日发送</div>
+              <div
+                style="
+                  display: flex;
+                  justify-content: space-between;
+                  padding: 12px 15px;
+                  line-height: 20px;
+                "
+              >
+                <div style="background-color: #f7f7f7; color: #666">
+                  今日发送
+                </div>
                 <div style="font-size: 20px">0</div>
               </div>
-              <div style="display: flex;justify-content: space-between;padding: 12px  15px;line-height: 20px">
-                <div style="background-color: #F7F7F7;color: #666"> 接受率</div>
+              <div
+                style="
+                  display: flex;
+                  justify-content: space-between;
+                  padding: 12px 15px;
+                  line-height: 20px;
+                "
+              >
+                <div style="background-color: #f7f7f7; color: #666">接受率</div>
                 <div style="font-size: 20px">20%</div>
               </div>
-              <div style="display: flex;justify-content: space-between;padding: 12px  15px;line-height: 20px">
-                <div style="background-color: #F7F7F7;color: #666">查看率</div>
-                <div style="font-size: 20px;color: #FFB800 !important">30%</div>
+              <div
+                style="
+                  display: flex;
+                  justify-content: space-between;
+                  padding: 12px 15px;
+                  line-height: 20px;
+                "
+              >
+                <div style="background-color: #f7f7f7; color: #666">查看率</div>
+                <div style="font-size: 20px; color: #ffb800 !important">
+                  30%
+                </div>
               </div>
             </div>
           </div>
         </div>
-        <div class="home4Item2Index" >
-          <blockquote class="public" style="margin-top: 10px">
+        <div class="home4Item2Index">
+          <blockquote
+            class="public"
+            style="margin-top: 10px"
+          >
             <div class="header-wrapper">
               <span>客户点评</span>
             </div>
           </blockquote>
-          <div style="display: flex;justify-content: space-between">
+          <div style="display: flex; justify-content: space-between">
             <div class="home4Item2IndexITem">
-              <span style="margin-left: 20px;background-color: #F7F7F7; color: #666">好评率</span>
+              <span
+                style="
+                  margin-left: 20px;
+                  background-color: #f7f7f7;
+                  color: #666;
+                "
+              >
+                好评率
+              </span>
               <div style="display: flex">
-                <div style="width: 33%;text-align: center;margin-top: 19px">
+                <div style="width: 33%; text-align: center; margin-top: 19px">
                   <span>口味</span>
-                  <div style="color: #FFB800;font-size: 18px">54.64%</div>
+                  <div style="color: #ffb800; font-size: 18px">54.64%</div>
                 </div>
-                <div style="width: 33%;text-align: center;margin-top: 19px">
+                <div style="width: 33%; text-align: center; margin-top: 19px">
                   <span>卫生</span>
-                  <div style="color: #FFB800;font-size: 18px">54.64%</div>
+                  <div style="color: #ffb800; font-size: 18px">54.64%</div>
                 </div>
-                <div style="width: 33%;text-align: center;margin-top: 19px">
+                <div style="width: 33%; text-align: center; margin-top: 19px">
                   <span>态度</span>
-                  <div style="color: #FFB800;font-size: 18px">67.92%</div>
+                  <div style="color: #ffb800; font-size: 18px">67.92%</div>
                 </div>
               </div>
             </div>
             <div class="home4Item2IndexITem">
-              <span style="margin-left: 20px;background-color: #F7F7F7; color: #666">综合TOP3</span>
+              <span
+                style="
+                  margin-left: 20px;
+                  background-color: #f7f7f7;
+                  color: #666;
+                "
+              >
+                综合TOP3
+              </span>
               <div>
                 <div
-                  style="display: flex;align-items: center;justify-content: space-around;line-height: 10px;padding: 5px 0">
-                  <div><img style="width: 20px;height: 20px"
-                            src="https://wx.wy2020.com/assets/common/images/medal/gold_medal.png"></div>
+                  style="
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-around;
+                    line-height: 10px;
+                    padding: 5px 0;
+                  "
+                >
+                  <div>
+                    <img
+                      style="width: 20px; height: 20px"
+                      src="https://wx.wy2020.com/assets/common/images/medal/gold_medal.png"
+                    />
+                  </div>
                   <div>技术部</div>
                   <div>68.91%</div>
                 </div>
                 <div
-                  style="display: flex;align-items: center;justify-content: space-around;line-height: 10px;padding:  5px 0">
-                  <div><img style="width: 20px;height: 20px"
-                            src="https://wx.wy2020.com/assets/common/images/medal/silver_medal.png"></div>
+                  style="
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-around;
+                    line-height: 10px;
+                    padding: 5px 0;
+                  "
+                >
+                  <div>
+                    <img
+                      style="width: 20px; height: 20px"
+                      src="https://wx.wy2020.com/assets/common/images/medal/silver_medal.png"
+                    />
+                  </div>
                   <div>技术部</div>
                   <div>68.91%</div>
                 </div>
                 <div
-                  style="display: flex;align-items: center;justify-content: space-around;line-height: 10px;padding:  5px 0">
-                  <div><img style="width: 20px;height: 20px"
-                            src="https://wx.wy2020.com/assets/common/images/medal/bronze_medal.png"></div>
+                  style="
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-around;
+                    line-height: 10px;
+                    padding: 5px 0;
+                  "
+                >
+                  <div>
+                    <img
+                      style="width: 20px; height: 20px"
+                      src="https://wx.wy2020.com/assets/common/images/medal/bronze_medal.png"
+                    />
+                  </div>
                   <div>技术部</div>
                   <div>68.91%</div>
                 </div>
@@ -155,7 +291,10 @@
     </div>
     <div style="width: 25%">
       <div class="home3Item">
-        <blockquote class="public" style="margin-left: 0">
+        <blockquote
+          class="public"
+          style="margin-left: 0"
+        >
           <div class="header-wrapper">
             <span>快捷入口</span>
           </div>
@@ -163,30 +302,32 @@
         <div class="home3ItemIndex">
           <div class="home3ItemIndexEachItem">
             <div>基础信息管理</div>
-            <i style="font-size: 20px"> > </i>
+            <i style="font-size: 20px">></i>
           </div>
           <div class="home3ItemIndexEachItem">
             <div>设备台账</div>
-            <i style="font-size: 20px"> > </i>
+            <i style="font-size: 20px">></i>
           </div>
           <div class="home3ItemIndexEachItem">
             <div>设备状态</div>
-            <i style="font-size: 20px"> > </i>
+            <i style="font-size: 20px">></i>
           </div>
           <div class="home3ItemIndexEachItem">
             <div>营养食安</div>
-            <i style="font-size: 20px"> > </i>
+            <i style="font-size: 20px">></i>
           </div>
           <div class="home3ItemIndexEachItem">
-            <div>数据分析 </div>
-            <i style="font-size: 20px"> > </i>
+            <div>数据分析</div>
+            <i style="font-size: 20px">></i>
           </div>
         </div>
       </div>
 
-
       <div class="home5Item">
-        <blockquote class="public" style="margin-left: 0">
+        <blockquote
+          class="public"
+          style="margin-left: 0"
+        >
           <div class="header-wrapper">
             <span>系统事项</span>
           </div>
@@ -194,21 +335,58 @@
         <div class="home5ItemIndex">
           <div class="home5ItemIndexEachItem">
             <div>未处理</div>
-            <i style="font-size: 20px;color:red"> 458 </i>
+            <div
+              ref="odometerEl"
+              style="font-size: 20px; color: red"
+            ></div>
+            <!-- <i style="font-size: 20px; color: red">458</i> -->
           </div>
           <div class="home5ItemIndexEachItem">
             <div>已处理</div>
-            <i style="font-size: 20px"> 12 </i>
+            <div
+              style="font-size: 20px"
+              ref="odometerEl2"
+            ></div>
           </div>
         </div>
       </div>
-
     </div>
   </div>
 </template>
 <script setup lang="ts">
   import { ref } from "vue";
+  import "odometer/themes/odometer-theme-default.css";
+  // @ts-ignore
+  import Odometer from "odometer";
+  const odometerEl = ref(null);
+  const odometerEl2 = ref(null);
 
+  const targetNumber = 458;
+  const targetNumber2 = 12;
+
+  onMounted(() => {
+    const od = new Odometer({
+      el: odometerEl.value,
+      value: 0,
+      format: "(,ddd)", // 格式化为千位分隔
+      duration: 2000,
+    });
+
+    setTimeout(() => {
+      od.update(targetNumber);
+    }, 100);
+
+    const od2 = new Odometer({
+      el: odometerEl2.value,
+      value: 0,
+      format: "(,ddd)", // 格式化为千位分隔
+      duration: 2000,
+    });
+
+    setTimeout(() => {
+      od2.update(targetNumber2);
+    }, 100);
+  });
   const isFold = ref(true);
   const toggleFold = () => {
     isFold.value = !isFold.value;
@@ -218,67 +396,157 @@
       titleName: "某某小学",
       video: "屏幕",
       intermediate: [
-        { key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
-        { key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
-        { key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
+        {
+          key: 1,
+          name: "环境监测",
+          digital: "0 / 0",
+          mechanism: "留样柜",
+          digitalKey: "1 / 1",
+        },
+        {
+          key: 2,
+          name: "晨检机",
+          digital: "1 / 1",
+          mechanism: "点评机",
+          digitalKey: "0 / 0",
+        },
+        {
+          key: 3,
+          name: "资质",
+          digital: "19",
+          mechanism: "健康证",
+          digitalKey: "94",
+        },
       ],
       risk: "低风险",
       score: "100",
       ranking: "排名",
-      num: 1
+      num: 1,
     },
     {
       titleName: "某某中学",
       video: "屏幕",
       intermediate: [
-        { key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
-        { key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
-        { key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
+        {
+          key: 1,
+          name: "环境监测",
+          digital: "0 / 0",
+          mechanism: "留样柜",
+          digitalKey: "1 / 1",
+        },
+        {
+          key: 2,
+          name: "晨检机",
+          digital: "1 / 1",
+          mechanism: "点评机",
+          digitalKey: "0 / 0",
+        },
+        {
+          key: 3,
+          name: "资质",
+          digital: "19",
+          mechanism: "健康证",
+          digitalKey: "94",
+        },
       ],
       risk: "低风险",
       score: "95",
       ranking: "排名",
-      num: 2
+      num: 2,
     },
     {
       titleName: "某某幼儿园",
       video: "屏幕",
       intermediate: [
-        { key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
-        { key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
-        { key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
+        {
+          key: 1,
+          name: "环境监测",
+          digital: "0 / 0",
+          mechanism: "留样柜",
+          digitalKey: "1 / 1",
+        },
+        {
+          key: 2,
+          name: "晨检机",
+          digital: "1 / 1",
+          mechanism: "点评机",
+          digitalKey: "0 / 0",
+        },
+        {
+          key: 3,
+          name: "资质",
+          digital: "19",
+          mechanism: "健康证",
+          digitalKey: "94",
+        },
       ],
       risk: "低风险",
       score: "80",
       ranking: "排名",
-      num: 3
+      num: 3,
     },
     {
       titleName: "某某小学",
       video: "屏幕",
       intermediate: [
-        { key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
-        { key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
-        { key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
+        {
+          key: 1,
+          name: "环境监测",
+          digital: "0 / 0",
+          mechanism: "留样柜",
+          digitalKey: "1 / 1",
+        },
+        {
+          key: 2,
+          name: "晨检机",
+          digital: "1 / 1",
+          mechanism: "点评机",
+          digitalKey: "0 / 0",
+        },
+        {
+          key: 3,
+          name: "资质",
+          digital: "19",
+          mechanism: "健康证",
+          digitalKey: "94",
+        },
       ],
       risk: "低风险",
       score: "90",
       ranking: "排名",
-      num: 4
+      num: 4,
     },
     {
       titleName: "某某小学",
       video: "屏幕",
       intermediate: [
-        { key: 1, name: "环境监测", digital: "0 / 0", mechanism: "留样柜", digitalKey: "1 / 1" },
-        { key: 2, name: "晨检机", digital: "1 / 1", mechanism: "点评机", digitalKey: "0 / 0" },
-        { key: 3, name: "资质", digital: "19", mechanism: "健康证", digitalKey: "94" }
+        {
+          key: 1,
+          name: "环境监测",
+          digital: "0 / 0",
+          mechanism: "留样柜",
+          digitalKey: "1 / 1",
+        },
+        {
+          key: 2,
+          name: "晨检机",
+          digital: "1 / 1",
+          mechanism: "点评机",
+          digitalKey: "0 / 0",
+        },
+        {
+          key: 3,
+          name: "资质",
+          digital: "19",
+          mechanism: "健康证",
+          digitalKey: "94",
+        },
       ],
       risk: "低风险",
       score: "100",
       ranking: "排名",
-      num: 5
-    }
+      num: 5,
+    },
   ]);
 </script>
 <style scoped lang="scss">
@@ -287,20 +555,21 @@
     justify-content: space-between;
     //align-items: center;
     font-size: 14px;
-    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+      "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
 
     .homeItem {
       width: 100%;
       background: var(--bg-color);
       margin-bottom: 10px;
-      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
       padding: 10px 15px;
       color: var(--text-color);
 
       .homeItemIndex {
         margin-bottom: 10px;
         line-height: 1.6;
-        border-left: 5px solid #5FB878;
+        border-left: 5px solid #5fb878;
         border-radius: 0 2px 2px 0;
         padding-left: 10px;
 
@@ -309,9 +578,9 @@
           padding: 0 6px;
           font-size: 12px;
           text-align: center;
-          background-color: #FF5722;
+          background-color: #ff5722;
           color: #fff;
-          border-radius: 2px
+          border-radius: 2px;
         }
       }
     }
@@ -320,7 +589,7 @@
       width: 100%;
       background: var(--bg-color);
       margin-bottom: 10px;
-      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
       padding: 10px 15px;
       color: var(--text-color);
 
@@ -397,7 +666,7 @@
               border: none !important;
               border-bottom: 1px solid var(--border-bottom) !important;
               clear: both;
-              background: 0 0
+              background: 0 0;
             }
 
             .risk {
@@ -459,7 +728,7 @@
       margin-bottom: 15px;
       border-radius: 2px;
       background: var(--bg-color);
-      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
       padding: 10px 15px;
       height: 25%;
       color: var(--text-color);
@@ -473,22 +742,22 @@
           flex-wrap: wrap;
           align-items: center;
           justify-content: space-around;
-          background-color: #F7F7F7;
+          background-color: #f7f7f7;
           border-radius: 4px;
           height: 50px;
           width: 30%;
           color: #666;
           margin-right: 10px;
-          margin-bottom: 10px
+          margin-bottom: 10px;
         }
       }
     }
 
-    .home5Item{
+    .home5Item {
       margin-bottom: 15px;
       border-radius: 2px;
       background: var(--bg-color);
-      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
       padding: 10px 15px;
       height: 10%;
       color: var(--text-color);
@@ -501,13 +770,13 @@
           flex-wrap: wrap;
           align-items: center;
           justify-content: space-around;
-          background-color: #F7F7F7;
+          background-color: #f7f7f7;
           border-radius: 4px;
           height: 50px;
           width: 45%;
           color: #666;
           margin-right: 10px;
-          margin-bottom: 10px
+          margin-bottom: 10px;
         }
       }
     }
@@ -515,7 +784,7 @@
 
   .public {
     margin-bottom: 10px;
-    border-left: 5px solid #5FB878;
+    border-left: 5px solid #5fb878;
     border-radius: 0 2px 2px 0;
     padding-left: 10px;
     height: 18px;