upp

houtai/src/assets/styles/base.css

@@ -144,10 +144,22 @@ textarea {
   display: none;
 }
 .pageTitle {
-  position: absolute;
-  top: -5px;
-  left: 0;
   font-size: 20px;
   font-weight: 700;
-  color: var(--themeColor);
+  position: relative;
+  padding-left: 40px;
+  height: 50px;
+  line-height: 50px;
+  background-color: #fff;
+  border-radius: 10px;
+}
+.pageTitle::before {
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  content: '';
+  width: 6px;
+  height: 20px;
+  background-color: var(--themeColor);
 }

houtai/src/assets/styles/base.less

@@ -197,10 +197,22 @@ textarea {
 }
 
 .pageTitle{
-  position: absolute;
-  top: -5px;
-  left: 0;
   font-size: 20px;
   font-weight: 700;
-  color: var(--themeColor);
+  position: relative;
+  padding-left: 40px;
+  height: 50px;
+  line-height: 50px;
+  background-color: #fff;
+  border-radius: 10px;
+  &::before {
+    position: absolute;
+    left: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    content: '';
+    width: 6px;
+    height: 20px;
+    background-color: var(--themeColor);
+  }
 }

houtai/src/pages/A1Hot/index.module.scss

@@ -1,72 +1,144 @@
 .Hot {
-  position: relative;
-  padding-top: 30px;
 
   :global {
 
-    .hotTopTime {
-      border-radius: 10px;
+    .hotTopBox {
       background-color: #fff;
+      border-radius: 10px;
       height: 50px;
-      display: flex;
-      align-items: center;
-      padding: 10px;
+      position: relative;
+
+      .hotTopTime {
+        position: absolute;
+        left: 180px;
+        top: 0;
+        padding: 10px 20px;
+        height: 50px;
+        display: flex;
+        align-items: center;
+      }
     }
 
-    .hotMain {
-      margin-top: 15px;
+    .hotMainBox {
       width: 100%;
       height: calc(100% - 65px);
-      display: flex;
-
-      .hotBoxTit {
-        font-size: 18px;
-        padding-left: 10px;
-        font-weight: 600;
-        position: relative;
-
-        .hotBoxTitRight{
-          position: absolute;
-          right: 0;
-          top: 50%;
-          transform: translateY(-50%);
-        }
 
-        &::before {
-          position: absolute;
-          left: 0;
-          top: 50%;
-          transform: translateY(-50%);
-          content: '';
-          width: 4px;
-          height: 20px;
-          background-color: var(--themeColor);
-        }
+      .noneInfo {
+        width: 100%;
+        height: calc(100% - 32px);
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
-      &>div {
-        padding: 10px;
+
+      .hotMain {
+        margin-top: 15px;
+        width: 100%;
         height: 100%;
-        border-radius: 10px;
-        background-color: #fff;
-      }
+        display: flex;
+
+        .hotBoxTit {
+          font-size: 18px;
+          position: relative;
+
+          .hotBoxTitRight {
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+
 
-      .hotBox1 {
-        width: 300px;
-        #echarts1{
-          width: 100%;
-          height: calc(100% - 30px);
         }
-      }
 
-      .hotBox2 {
-        width: calc(50% - 160px);
-        margin: 0 10px;
-      }
+        &>div {
+          padding: 10px 20px;
+          height: 100%;
+          border-radius: 10px;
+          background-color: #fff;
+        }
+
+        .hotBox1 {
+          width: 300px;
+          position: relative;
+
+          #echarts1 {
+            width: 100%;
+            height: calc(100% - 30px);
+          }
+        }
+
+        .hotBox2 {
+          width: calc(50% - 160px);
+          margin: 0 10px;
+        }
+
+        .hotBox3 {
+          width: calc(50% - 160px);
+          padding: 10px 0 10px 20px;
+
+          .hotBoxTit {
+            .hotBoxTitRight {
+              right: 20px;
+            }
+          }
+
+          .hotListBox {
+            .row {
+              width: calc(100% - 20px);
+            }
+          }
+        }
+
+        .hotListBox::-webkit-scrollbar {
+          /*滚动条整体样式*/
+          width: 5px;
+          /*高宽分别对应横竖滚动条的尺寸*/
+          height: 1px;
+        }
+
+        .hotListBox::-webkit-scrollbar-thumb {
+          /*滚动条里面小方块*/
+          border-radius: 10px;
+          -webkit-box-shadow: inset 0 0 5px transparent;
+          background: var(--themeColor);
+        }
+
+        .hotListBox::-webkit-scrollbar-track {
+          /*滚动条里面轨道*/
+          -webkit-box-shadow: inset 0 0 5px transparent;
+          border-radius: 10px;
+          background: transparent;
+        }
+
+        .hotListBox {
+          width: 100%;
+          height: calc(100% - 50px);
+          margin-top: 20px;
+          overflow-y: auto;
+
+          .row {
+            height: 60px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 15px;
+            border-radius: 5px;
+            border: 1px solid #dddddd;
+            margin-bottom: 15px;
+
+            .rowLeft {
+              width: calc(100% - 100px);
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
+        }
 
-      .hotBox3 {
-        width: calc(50% - 160px);
       }
     }
+
   }
 }

houtai/src/pages/A1Hot/index.tsx

@@ -1,6 +1,5 @@
-import { Select } from "antd";
-import React, { useCallback, useEffect, useState } from "react";
-import { CalendarOutlined } from "@ant-design/icons";
+import { Empty, Select } from "antd";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import styles from "./index.module.scss";
 
 import * as echarts from "echarts/core";
@@ -25,12 +24,15 @@ echarts.use([
 function Hot() {
   // 日期下拉框
   const [select1, setSelect1] = useState<1 | 7 | 30 | "">(7);
+  const select1Ref = useRef<1 | 7 | 30 | "">(7);
 
   // 热门场馆下拉
-  const [select2, setSelect2] = useState<"visit" | "star">("visit");
+  const [select2, setSelect2] = useState<"visit" | "star" | "">("visit");
+  const select2Ref = useRef<"visit" | "star" | "">("");
 
   // 热门馆藏下拉
-  const [select3, setSelect3] = useState<"visit" | "star">("visit");
+  const [select3, setSelect3] = useState<"visit" | "star" | "">("visit");
+  const select3Ref = useRef<"visit" | "star" | "">("");
 
   // 获取饼图的函数
   const getEchartsFu = useCallback(
@@ -49,8 +51,10 @@ function Hot() {
         legend: {
           orient: "vertical",
           left: "center",
-          bottom: "20%",
+          bottom: "12%",
           data,
+          // 设置间距
+          itemGap: 20,
           formatter: (name: string) => {
             let resName = "";
             data.forEach((v) => {
@@ -68,7 +72,7 @@ function Hot() {
           {
             name: "",
             type: "pie",
-            radius: [80, 120],
+            radius: [60, 100],
             center: ["50%", "30%"],
             // 设置圆角
             itemStyle: {
@@ -98,9 +102,11 @@ function Hot() {
     []
   );
 
-  // 获取数据
-  const getInfoAPIFu = useCallback(() => {
-    const data = [
+  // 时间改变的时候 获取3个数据
+  const getInfoAPIFu1 = useCallback(() => {
+    console.log("1获取饼图数据", select1Ref.current);
+
+    const data1 = [
       { value: 124, name: "新闻资讯", icon: "circle" },
       { value: 100, name: "虚拟漫游", icon: "circle" },
       { value: 200, name: "馆藏鉴赏", icon: "circle" },
@@ -108,66 +114,244 @@ function Hot() {
       { value: 70, name: "周边查询", icon: "circle" },
       { value: 155, name: "游客服务", icon: "circle" },
     ];
-    getEchartsFu(data);
+    getEchartsFu(data1);
+
+    // -------------
+    console.log(
+      "2获取场馆数据",
+      select1Ref.current,
+      select2Ref.current ? select2Ref.current : "visit"
+    );
+
+    const data2 = [
+      { id: 1, name: "撒大苏打撒旦", num: 550 },
+      {
+        id: 2,
+        name: "撒大苏打撒旦撒大苏打撒旦sadas撒大苏打撒旦撒大苏打撒旦sadas撒大苏打撒旦撒大苏打撒旦sadas",
+        num: 550,
+      },
+      { id: 3, name: "撒大苏打撒旦", num: 550 },
+      { id: 4, name: "撒大苏打撒旦", num: 550 },
+      { id: 5, name: "撒大苏打撒旦", num: 550 },
+      { id: 6, name: "撒大", num: 550 },
+      { id: 7, name: "撒大苏打撒旦", num: 550 },
+      { id: 8, name: "撒大苏打撒旦", num: 550 },
+    ];
+    setList1(data2);
+
+    // ---------------
+
+    console.log(
+      "3获取馆藏数据",
+      select1Ref.current,
+      select3Ref.current ? select3Ref.current : "visit"
+    );
+    const data3 = [
+      { id: 1, name: "撒大苏打撒旦", num: 550 },
+      {
+        id: 2,
+        name: "撒大苏打撒旦撒大打撒旦撒大苏打撒旦sadas",
+        num: 550,
+      },
+      { id: 3, name: "撒大苏打撒旦", num: 550 },
+      { id: 4, name: "撒大苏打撒旦", num: 550 },
+      { id: 5, name: "撒大苏打撒旦", num: 550 },
+      { id: 6, name: "撒大", num: 550 },
+      { id: 7, name: "撒大苏打撒旦", num: 550 },
+      { id: 8, name: "撒大苏打撒旦", num: 550 },
+      { id: 9, name: "撒大苏打撒旦", num: 550 },
+      {
+        id: 10,
+        name: "撒大苏打撒旦撒大打撒旦撒大苏打撒旦sadas",
+        num: 550,
+      },
+      { id: 11, name: "撒大苏打撒旦", num: 550 },
+      { id: 12, name: "撒大苏打撒旦", num: 550 },
+      { id: 13, name: "撒大苏打撒旦", num: 550 },
+      { id: 14, name: "撒大", num: 550 },
+    ];
+    setList2(data3);
+
+    // 每次变化馆藏盒子滚动到顶部
+    const dom: HTMLDivElement = document.querySelector("#goodsSroolBox")!;
+    if (dom) dom.scrollTop = 0;
   }, [getEchartsFu]);
 
+  // 获取热门场馆数据
+  const [list1, setList1] = useState([
+    { id: 1, name: "撒大苏打撒旦", num: 550 },
+  ]);
+
+  const getInfoAPIFu2 = useCallback(() => {
+    console.log("2获取场馆数据", select1Ref.current, select2Ref.current);
+
+    const data = [
+      { id: 1, name: "撒大苏打撒旦", num: 550 },
+      {
+        id: 2,
+        name: "撒大苏打撒旦撒大苏打撒旦sadas撒大苏打撒旦撒大苏打撒旦sadas撒大苏打撒旦撒大苏打撒旦sadas",
+        num: 550,
+      },
+      { id: 3, name: "撒大苏打撒旦", num: 550 },
+      { id: 4, name: "撒大苏打撒旦", num: 550 },
+      { id: 5, name: "撒大苏打撒旦", num: 550 },
+      { id: 6, name: "撒大", num: 550 },
+      { id: 7, name: "撒大苏打撒旦", num: 550 },
+      { id: 8, name: "撒大苏打撒旦", num: 550 },
+    ];
+    setList1(data);
+  }, []);
+
+  // 获取馆藏数据
+
+  const [list2, setList2] = useState([
+    { id: 1, name: "撒大苏打撒旦", num: 550 },
+  ]);
+
+  const getInfoAPIFu3 = useCallback(() => {
+    console.log("3获取馆藏数据", select1Ref.current, select3Ref.current);
+    const data = [
+      { id: 1, name: "撒大苏打撒旦", num: 550 },
+      {
+        id: 2,
+        name: "撒大苏打撒旦撒大打撒旦撒大苏打撒旦sadas",
+        num: 550,
+      },
+      { id: 3, name: "撒大苏打撒旦", num: 550 },
+      { id: 4, name: "撒大苏打撒旦", num: 550 },
+      { id: 5, name: "撒大苏打撒旦", num: 550 },
+      { id: 6, name: "撒大", num: 550 },
+      { id: 7, name: "撒大苏打撒旦", num: 550 },
+      { id: 8, name: "撒大苏打撒旦", num: 550 },
+      { id: 9, name: "撒大苏打撒旦", num: 550 },
+      {
+        id: 10,
+        name: "撒大苏打撒旦撒大打撒旦撒大苏打撒旦sadas",
+        num: 550,
+      },
+      { id: 11, name: "撒大苏打撒旦", num: 550 },
+      { id: 12, name: "撒大苏打撒旦", num: 550 },
+      { id: 13, name: "撒大苏打撒旦", num: 550 },
+      { id: 14, name: "撒大", num: 550 },
+    ];
+    setList2(data);
+  }, []);
+
+  // 改变时间选择发送3个请求
+  useEffect(() => {
+    select1Ref.current = select1;
+    getInfoAPIFu1();
+  }, [getInfoAPIFu1, select1]);
+
+  // 热门场馆改变
+  useEffect(() => {
+    // 第一次的时候不发送请求
+    if (!select2Ref.current) select2Ref.current = select2;
+    else {
+      select2Ref.current = select2;
+      getInfoAPIFu2();
+    }
+  }, [getInfoAPIFu2, select2]);
+
+  // 热门馆藏的改变
   useEffect(() => {
-    getInfoAPIFu();
-  }, [getInfoAPIFu]);
+    // 第一次的时候不发送请求
+    if (!select3Ref.current) select3Ref.current = select3;
+    else {
+      select3Ref.current = select3;
+      getInfoAPIFu3();
+    }
+    // 每次变化滚动到顶部
+    const dom: HTMLDivElement = document.querySelector("#goodsSroolBox")!;
+    if (dom) dom.scrollTop = 0;
+  }, [getInfoAPIFu3, select3]);
 
   return (
     <div className={styles.Hot}>
-      <div className="pageTitle">热度统计</div>
-      <div className="hotTopTime">
-        <CalendarOutlined />
-        &emsp;
-        <Select
-          value={select1}
-          style={{ width: 100 }}
-          onChange={(e) => setSelect1(e)}
-          options={[
-            { value: 1, label: "今日" },
-            { value: 7, label: "近七天" },
-            { value: 30, label: "近三十天" },
-            { value: "", label: "全部" },
-          ]}
-        />
-      </div>
-      <div className="hotMain">
-        <div className="hotBox1">
-          <div className="hotBoxTit">热门板块</div>
-          {/* 第一个echarts盒子 */}
-          <div id="echarts1"></div>
+      <div className="hotTopBox">
+        <div className="pageTitle">热度统计</div>
+        <div className="hotTopTime">
+          <Select
+            value={select1}
+            style={{ width: 100 }}
+            onChange={(e) => setSelect1(e)}
+            options={[
+              { value: 1, label: "今日" },
+              { value: 7, label: "近七天" },
+              { value: 30, label: "近三十天" },
+              { value: "", label: "全部" },
+            ]}
+          />
         </div>
-        <div className="hotBox2">
-          <div className="hotBoxTit">
-            热门场馆
-            <div className="hotBoxTitRight">
-              <Select
-                value={select2}
-                style={{ width: 100 }}
-                onChange={(e) => setSelect2(e)}
-                options={[
-                  { value: "visit", label: "按浏览" },
-                  { value: "star", label: "按点赞" },
-                ]}
-              />
+      </div>
+
+      <div className="hotMainBox">
+        <div className="hotMain">
+          <div className="hotBox1">
+            <div className="hotBoxTit">热门板块</div>
+            {/* 第一个echarts盒子 */}
+            <div id="echarts1"></div>
+          </div>
+          <div className="hotBox2">
+            <div className="hotBoxTit">
+              热门场馆
+              <div className="hotBoxTitRight">
+                <Select
+                  value={select2}
+                  style={{ width: 100 }}
+                  onChange={(e) => setSelect2(e)}
+                  options={[
+                    { value: "visit", label: "按浏览" },
+                    { value: "star", label: "按点赞" },
+                  ]}
+                />
+              </div>
+            </div>
+            {/* 场馆数据 */}
+            <div className="hotListBox">
+              {list1.map((v) => (
+                <div className="row" key={v.id}>
+                  <div className="rowLeft" title={v.name}>
+                    {v.name}
+                  </div>
+                  <div className="rowRight">{v.num}</div>
+                </div>
+              ))}
             </div>
           </div>
-        </div>
-        <div className="hotBox3">
-          <div className="hotBoxTit">
-            热门馆藏
-            <div className="hotBoxTitRight">
-              <Select
-                value={select3}
-                style={{ width: 100 }}
-                onChange={(e) => setSelect3(e)}
-                options={[
-                  { value: "visit", label: "按浏览" },
-                  { value: "star", label: "按点赞" },
-                ]}
-              />
+          <div className="hotBox3">
+            <div className="hotBoxTit">
+              热门馆藏
+              <div className="hotBoxTitRight">
+                <Select
+                  value={select3}
+                  style={{ width: 100 }}
+                  onChange={(e) => setSelect3(e)}
+                  options={[
+                    { value: "visit", label: "按浏览" },
+                    { value: "star", label: "按点赞" },
+                  ]}
+                />
+              </div>
+            </div>
+            {/* 馆藏数据 */}
+            <div className="hotListBox" id="goodsSroolBox">
+              {list2.length ? (
+                list2.slice(0, 20).map((v) => (
+                  <div className="row" key={v.id}>
+                    <div className="rowLeft" title={v.name}>
+                      {v.name}
+                    </div>
+                    <div className="rowRight">{v.num}</div>
+                  </div>
+                ))
+              ) : (
+                <div className="noneInfo">
+                  <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+                </div>
+              )}
+
+              {}
             </div>
           </div>
         </div>

houtai/src/pages/Layout/index.module.scss

@@ -7,26 +7,24 @@
 
     .layoutLeft {
       position: relative;
-      z-index: 10;
+      z-index: 15;
       width: 220px;
       height: 100%;
       box-shadow: 0px 0px 5px 3px;
+      background-image: url('../../assets/img/layoutLeftMain.jpg');
+      background-size: 100% 100%;
 
       .layoutLeftTop {
         height: 60px;
         background-color: var(--themeColor);
-        padding: 7px 0 0 20px;
-
-        &>h3 {
-          color: #fff;
-        }
+        padding: 10px;
+        padding-left: 20px;
       }
 
       .layoutLeftMain {
         height: calc(100% - 60px);
         padding: 20px;
-        background-image: url('../../assets/img/layoutLeftMain.jpg');
-        background-size: 100% 100%;
+
 
         .mainBoxL2Row {
           padding-left: 60px;
@@ -35,7 +33,9 @@
           line-height: 50px;
           font-size: 16px;
           position: relative;
-          margin-bottom: 15px;
+          margin-top: 25px;
+          border-radius: 8px;
+          color: var(--themeColor);
 
           .tabImg {
             z-index: 3;
@@ -58,8 +58,7 @@
 
           &:hover {
             color: #fff;
-            background-image: url('../../assets/img/activeLL.png');
-            background-size: 100% 100%;
+            background-color: var(--themeColor);
 
             .tabImgAc {
               display: block;
@@ -72,9 +71,7 @@
         .active {
           color: #fff;
           pointer-events: none;
-          background-image: url('../../assets/img/activeLL.png');
-          background-size: 100% 100%;
-
+          background-color: var(--themeColor);
           .tabImgAc {
             display: block;
           }
@@ -91,14 +88,14 @@
 
       .layoutRightTop {
         height: 60px;
-        background-image: url('../../assets/img/layoutTop.jpg');
-        background-size: 100% 100%;
+        background-color: var(--themeColor);
         display: flex;
         justify-content: flex-end;
         position: relative;
         z-index: 11;
 
         .user {
+          margin-right: 40px;
           padding-right: 40px;
           display: flex;
           align-items: center;
@@ -175,8 +172,8 @@
       .layoutRightMain {
         height: calc(100% - 60px);
         padding: 15px 30px 20px;
-        background-color: #ccc;
-
+        background-image: url('../../assets/img/loginBox.jpg');
+        background-size: 100% 100%;
 
         .mainBoxR {
           width: 100%;

houtai/src/pages/Layout/index.tsx

@@ -22,10 +22,13 @@ import inco1 from "@/assets/img/inco1.png";
 import inco2 from "@/assets/img/inco2.png";
 import inco3 from "@/assets/img/inco3.png";
 import inco4 from "@/assets/img/inco4.png";
+import inco5 from "@/assets/img/inco5.png";
 import inco1Ac from "@/assets/img/inco1Ac.png";
 import inco2Ac from "@/assets/img/inco2Ac.png";
 import inco3Ac from "@/assets/img/inco3Ac.png";
 import inco4Ac from "@/assets/img/inco4Ac.png";
+import inco5Ac from "@/assets/img/inco5Ac.png";
+import logonImg from '@/assets/img/logo2.png'
 import { MessageFu } from "@/utils/message";
 
 const NotFound = React.lazy(() => import("@/components/NotFound"));
@@ -72,8 +75,8 @@ function Layout() {
         name: "游客服务",
         path: "/guest",
         Com: React.lazy(() => import("../A5Guest")),
-        inco: inco2,
-        incoAc: inco2Ac,
+        inco: inco5,
+        incoAc: inco5Ac,
       },
     ];
   }, []);
@@ -142,11 +145,7 @@ function Layout() {
       {/* 左边 */}
       <div className="layoutLeft">
         <div className="layoutLeftTop">
-          <h3>
-            中医药文化宣传教育基地
-            <br />
-            线上展馆管理后台
-          </h3>
+        <img src={logonImg} alt="" />
         </div>
         {/* 左边主体 */}
         <div className="layoutLeftMain">

houtai/src/pages/Login/index.module.scss

@@ -5,6 +5,16 @@
   background-size: cover;
   position: relative;
 
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .4);
+  }
+
   :global {
 
     .main {
@@ -16,17 +26,15 @@
       transform: translateY(-50%);
       width: 530px;
       height: 720px;
-      background-color: rgba(200, 185, 146, 0.40);
       padding-top: 60px;
       text-align: center;
-      backdrop-filter: blur(10px);
+      background-image: url('../../assets/img/loginBox.jpg');
+      background-size: 100% 100%;
 
       .logo {
-        margin: 0 auto;
+        margin: 30px auto 0;
         width: 375px;
-        height: 233px;
-        background-image: url('../../assets/img/logo.png');
-        background-size: 100% 100%;
+        height: 120px;
       }
 
 
@@ -35,22 +43,22 @@
 
         input::-webkit-input-placeholder {
           /* WebKit browsers */
-          color: rgba(255, 255, 255, .5);
+          color: rgba(157, 107, 57, .5);
         }
 
         input:-moz-placeholder {
           /* Mozilla Firefox 4 to 18 */
-          color: rgba(255, 255, 255, .5);
+          color: rgba(157, 107, 57, .5);
         }
 
         input::-moz-placeholder {
           /* Mozilla Firefox 19+ */
-          color: rgba(255, 255, 255, .5);
+          color: rgba(157, 107, 57, .5);
         }
 
         input:-ms-input-placeholder {
           /* Internet Explorer 10+ */
-          color: rgba(255, 255, 255, .5);
+          color: rgba(157, 107, 57, .5);
         }
 
 
@@ -89,7 +97,7 @@
 
         input:-webkit-autofill {
           font-size: 18px !important;
-          -webkit-text-fill-color: #fff !important;
+          -webkit-text-fill-color: var(--themeColor) !important;
           background-image: none;
           -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; //填充阴影，可以用来遮住背景色
           background-color: transparent;
@@ -111,7 +119,6 @@
             background-color: transparent;
             width: 100%;
             height: 60px;
-            color: #fff;
           }
         }
 
@@ -121,7 +128,7 @@
       }
 
       .loginBtn {
-
+        margin-top: 100px;
         .ant-btn {
           border-radius: 25px;
           font-size: 24px;

houtai/src/pages/Login/index.tsx

@@ -9,6 +9,7 @@ import { setTokenInfo } from "@/utils/storage";
 import history from "@/utils/history";
 import { MessageFu } from "@/utils/message";
 import { userLoginAPI } from "@/store/action/layout";
+import logoImg from '@/assets/img/logo.png'
 
 export default function Login() {
   // 账号密码
@@ -40,7 +41,9 @@ export default function Login() {
   return (
     <div className={styles.Login}>
       <div className="main">
-        <div className="logo"></div>
+        <div className="logo">
+          <img src={logoImg} alt="" />
+        </div>
         {/* 账号密码输入框 */}
         <div className="inputBox">
           <div className="inputBoxRow">