upp

houtai/src/assets/styles/base.css

@@ -11,11 +11,11 @@ html {
 body {
   font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
   height: 100%;
-  color: #7e8293;
+  color: black;
 }
 a {
   text-decoration: none;
-  color: #7e8293;
+  color: black;
   outline: none;
 }
 i {
@@ -40,7 +40,8 @@ textarea {
 }
 /* 主题色 */
 :root {
-  --themeColor: #b34831;
+  --themeColor: #f0d99c;
+  --themeColor2: #93886e;
 }
 a {
   color: var(--themeColor);
@@ -63,7 +64,7 @@ a {
   min-width: 1600px;
   min-height: 900px;
   overflow-y: auto;
-  /* 普通按钮的颜色 */
+  /* 普通文字按钮的颜色 */
   /* 按钮的危险颜色 */
   /* antd分页器样式 */
   /* 表格的图片居中 */

houtai/src/assets/styles/base.less

@@ -13,12 +13,12 @@ html {
 body {
   font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
   height: 100%;
-  color: #7e8293;
+  color: black;
 }
 
 a {
   text-decoration: none;
-  color: #7e8293;
+  color: black;
   outline: none;
 }
 
@@ -49,7 +49,8 @@ textarea {
 
 /* 主题色 */
 :root {
-  --themeColor: #b34831;
+  --themeColor: #f0d99c;
+  --themeColor2: #93886e;
 }
 
 a {
@@ -73,6 +74,7 @@ a {
   transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
+
 // 重置antd样式
 #root {
   width: 100vw;
@@ -81,7 +83,9 @@ a {
   min-height: 900px;
   overflow-y: auto;
 
-  /* 普通按钮的颜色 */
+
+
+  /* 普通文字按钮的颜色 */
   .ant-btn-text {
     color: #409eff;
   }

houtai/src/index.tsx

@@ -25,7 +25,7 @@ root.render(
     locale={locale}
     theme={{
       token: {
-        colorPrimary: "#b34831",
+        colorPrimary: "#93886e",
       },
     }}
   >

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

@@ -1,48 +1,73 @@
-.HotMap{
+.HotMap {
   position: relative;
   width: 100%;
   height: calc(100% - 30px);
-  :global{
-    .infoBox{
+
+  :global {
+    .infoBox {
       z-index: 10;
       position: absolute;
       bottom: 20px;
       right: 30px;
-      background-color: rgba(0,0,0,.6);
+      background-color: rgba(0, 0, 0, .6);
       color: #fff;
       padding: 15px 10px;
       border-radius: 4px;
       font-size: 14px;
-      &>div{
+
+      &>div {
         font-size: 16px;
         font-weight: 700;
       }
-      &>p{
-        &:nth-of-type(1){
+
+      &>p {
+        &:nth-of-type(1) {
           margin-top: 10px;
         }
       }
     }
+    .svgBox{
+      user-select: none;
+      position: absolute;
+      left: 45%;
+      transform: translateX(-50%);
+      top: -20px;
+    }
+
+
+    .leftNumBox {
+      z-index: 10;
+      position: absolute;
+      bottom: 20px;
+      left: 30px;
+      font-size: 14px;
+    }
+
     // .hot0{
     //   pointer-events: none;
     // }
-    .hot1{
-      fill:#ffd385;
+    .hot1 {
+      fill: #ffd385;
     }
-    .hot2{
-      fill:#fbb86b;
+
+    .hot2 {
+      fill: #fbb86b;
     }
-    .hot3{
-      fill:#f59d50;
+
+    .hot3 {
+      fill: #f59d50;
     }
-    .hot4{
-      fill:#f38033;
+
+    .hot4 {
+      fill: #f38033;
     }
-    .hot5{
-      fill:#ed6618;
+
+    .hot5 {
+      fill: #ed6618;
     }
-    .activePath{
-      fill:#b7d3de;
+
+    .activePath {
+      fill: #b7d3de;
     }
   }
 }

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

@@ -18,6 +18,7 @@
           cursor: pointer;
           margin-left: 10px;
           font-size: 14px;
+          color: #7e8293;
         }
       }
 
@@ -96,7 +97,7 @@
 
       .downBox {
         margin: 15px 0;
-        height: 518px;
+        height: 464px;
         display: flex;
 
         .downBoxL {
@@ -125,55 +126,12 @@
 
           .downBoxLMain {
             height: calc(100% - 62px);
-
-            .downBoxLMain1 {
-              border-radius: 10px;
-              background-color: #fff;
-              margin-bottom: 6px;
-              padding: 10px 15px 0;
-              height: 200px;
-
-              .downBoxLMain1echartsBox {
-                height: calc(100% - 30px);
-                display: flex;
-
-                .downBoxLMain1echartsBoxRow {
-                  position: relative;
-                  width: 33.33%;
-                  height: 100%;
-
-                  .echartsBox {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                  }
-
-                  .downBoxLMain1echartsBoxTxt {
-                    position: absolute;
-                    z-index: 10;
-                    top: 50%;
-                    transform: translateY(-50%);
-                    left: 29.5%;
-                    text-align: center;
-                    min-width: 34px;
-
-                    &>p {
-                      font-weight: 700;
-                      font-size: 18px;
-                    }
-                  }
-                }
-              }
-            }
-
             .downBoxLMain2 {
               display: flex;
-              height: 250px;
+              height: 400px;
 
               &>div {
-                width: calc(50% - 3px);
+                width: calc(33.33% - 4px);
                 height: 100%;
                 border-radius: 10px;
                 background-color: #fff;
@@ -181,19 +139,55 @@
                 position: relative;
               }
 
+              .echarts4Box {
+                position: relative;
+                width: 100%;
+                height: 368px;
+
+                #echarts4 {
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                  width: 100%;
+                  height: 100%;
+                }
+
+                .echarts4BoxTxt {
+                  position: absolute;
+                  z-index: 10;
+                  top: 30%;
+                  left: 45%;
+                  text-align: center;
+                  min-width: 34px;
+
+
+                  &>p {
+                    font-weight: 700;
+                    font-size: 18px;
+                  }
+                }
+              }
+
               .downBoxLMain2L {
-                margin-right: 6px;
+                margin: 0 6px;
+              }
+              .noneInfo {
+                width: 100%;
+                height: calc(100% - 32px);
+                display: flex;
+                justify-content: center;
+                align-items: center;
               }
 
               .downBoxLMain2LRowBox {
-                margin-top: 10px;
+                margin-top: 30px;
 
                 .downBoxLMain2LRow {
-                  margin-bottom: 8px;
+                  margin-bottom: 15px;
                   border-radius: 5px;
                   box-shadow: 0px 0px 2px 0px #ccc;
-                  height: 40px;
-                  line-height: 40px;
+                  height: 46px;
+                  line-height: 46px;
                   padding: 0 20px 0 8px;
                   display: flex;
                   justify-content: space-between;
@@ -226,7 +220,7 @@
           .downBoxRBox {
             position: relative;
             width: 100%;
-            height: 475px;
+            height: 420px;
 
             #echarts7 {
               position: absolute;

houtai/src/pages/A1Hot/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { ExclamationCircleFilled, CalendarOutlined } from "@ant-design/icons";
 import styles from "./index.module.scss";
-import { Select, Tooltip } from "antd";
+import { Empty, Select, Tooltip } from "antd";
 
 import * as echarts from "echarts/core";
 import { GridComponent } from "echarts/components";
@@ -204,11 +204,6 @@ function Hot() {
         name: "板车",
       },
     ];
-    // 左边饼图配置文件
-    const data4Obj = {
-      legend: { top: "center", right: 45 },
-      series: { center: ["34%", "50%"], radius: ["60%", "80%"] },
-    };
 
     // 第一个饼图
     const data7 = [
@@ -238,14 +233,19 @@ function Hot() {
         name: "板车1",
       },
     ];
+    // 左边饼图配置文件
+    const data4Obj = {
+      legend: { left: "center", bottom: 20 },
+      series: { center: ["50%", "35%"], radius: ["50%", "70%"] },
+    };
     // 右边饼图配置文件
     const data7Obj = {
-      legend: { left: "center", bottom: 15 },
+      legend: { left: "center", bottom: 5 },
       series: { center: ["50%", "35%"], radius: ["40%", "60%"] },
     };
+    // echartsFu2("#echarts4", data4, data4Obj);
+    // echartsFu2("#echarts5", data4, data4Obj);
     echartsFu2("#echarts4", data4, data4Obj);
-    echartsFu2("#echarts5", data4, data4Obj);
-    echartsFu2("#echarts6", data4, data4Obj);
     echartsFu2("#echarts7", data7, data7Obj);
   }, [echartsFu1, echartsFu2]);
 
@@ -270,6 +270,7 @@ function Hot() {
     },
     { name: "啊实打实大苏打", pcs: 10 },
     { name: "啊实打实大苏打", pcs: 10 },
+    { name: "啊实打实大苏打", pcs: 10 },
   ]);
 
   return (
@@ -279,10 +280,10 @@ function Hot() {
         {/* 上面 */}
         <div className="topBox">
           <div className="topBoxL">
-            {/* 线上访问次数盒子 */}
+            {/* 线上访客盒子 */}
             <div className="topBoxL1">
               <div className="hotTit">
-                线上访问次数 58
+                线上访客 58
                 <Tooltip title="近14个自然日的访客数；一天内同一访客多次访问记为1">
                   <div className="inco">
                     <ExclamationCircleFilled />
@@ -294,11 +295,11 @@ function Hot() {
               <div className="hotTime">近十四天数据</div>
             </div>
             <div className="topBoxL2">
-              {/* 大屏热度盒子 */}
+              {/* 万物墙热度盒子 */}
               <div className="topBoxL2L">
                 <div className="hotTit">
-                  大屏热度 264
-                  <Tooltip title="查看馆藏/场景/视频信息时，记为1点热度">
+                  万物墙热度 264
+                  <Tooltip title="查看场景/文物/视频时，记为1点热度">
                     <div className="inco">
                       <ExclamationCircleFilled />
                     </div>
@@ -327,7 +328,7 @@ function Hot() {
           {/* 地图盒子 */}
           <div className="topBoxR">
             <div className="hotTit">
-              线上访问热力图
+              访客来源
               <Tooltip title="根据近30天访问情况进行统计">
                 <div className="inco">
                   <ExclamationCircleFilled />
@@ -356,44 +357,29 @@ function Hot() {
                 ]}
               />
               <div className="downBoxLTopTit">
-                注：数据的统计，需定时从数据库中获取，因此可能产生一定延迟
+                可对浏览总数、馆藏排行、场景排行进行日期区间的筛选
               </div>
             </div>
             <div className="downBoxLMain">
-              <div className="downBoxLMain1">
-                <div className="hotTit">
-                  浏览总数
-                  <Tooltip title="对文物或场景的访问记为1">
-                    <div className="inco">
-                      <ExclamationCircleFilled />
-                    </div>
-                  </Tooltip>
-                </div>
-                <div className="downBoxLMain1echartsBox">
-                  <div className="downBoxLMain1echartsBoxRow">
-                    <div className="echartsBox" id="echarts4"></div>
-                    <div className="downBoxLMain1echartsBoxTxt">
-                      <div>文物</div>
-                      <p>124</p>
-                    </div>
-                  </div>
-                  <div className="downBoxLMain1echartsBoxRow">
-                    <div className="echartsBox" id="echarts5"></div>
-                    <div className="downBoxLMain1echartsBoxTxt">
-                      <div>vr展馆</div>
-                      <p>58</p>
-                    </div>
+              <div className="downBoxLMain2">
+                <div className="downBoxLMain2EchBox">
+                  <div className="hotTit">
+                    浏览总数
+                    <Tooltip title="在所选时间段内，每查看一次对应内容记为1">
+                      <div className="inco">
+                        <ExclamationCircleFilled />
+                      </div>
+                    </Tooltip>
                   </div>
-                  <div className="downBoxLMain1echartsBoxRow">
-                    <div className="echartsBox" id="echarts6"></div>
-                    <div className="downBoxLMain1echartsBoxTxt">
-                      <div>全景</div>
-                      <p>2</p>
+                  <div className="echarts4Box">
+                    <div className="echarts4BoxTxt">
+                      <div>总数</div>
+                      <p>124</p>
                     </div>
+                    <div id="echarts4"></div>
                   </div>
                 </div>
-              </div>
-              <div className="downBoxLMain2">
+
                 <div className="downBoxLMain2L">
                   <div className="hotTitSelect">
                     <div>藏品排行</div>
@@ -403,21 +389,27 @@ function Hot() {
                       onChange={(e) => setSelect2(e)}
                       options={[
                         { value: 0, label: "按浏览" },
-                        { value: 1, label: "按弹幕" },
-                        { value: 2, label: "按点赞" },
+                        { value: 1, label: "按点赞" },
+                        { value: 2, label: "按弹幕" },
                       ]}
                     />
                   </div>
-                  <div className="downBoxLMain2LRowBox">
-                    {likeData.map((v, i) => (
-                      <div className="downBoxLMain2LRow" key={i}>
-                        <div className="downBoxLMain2LRow1" title={v.name}>
-                          {i + 1}. {v.name}
+                  {likeData.length ? (
+                    <div className="downBoxLMain2LRowBox">
+                      {likeData.map((v, i) => (
+                        <div className="downBoxLMain2LRow" key={i}>
+                          <div className="downBoxLMain2LRow1" title={v.name}>
+                            {i + 1}. {v.name}
+                          </div>
+                          <div className="downBoxLMain2LRow2">{v.pcs}</div>
                         </div>
-                        <div className="downBoxLMain2LRow2">{v.pcs}</div>
-                      </div>
-                    ))}
-                  </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="noneInfo">
+                      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+                    </div>
+                  )}
                 </div>
                 <div className="downBoxLMain2R">
                   <div className="hotTitSelect">
@@ -432,16 +424,24 @@ function Hot() {
                       ]}
                     />
                   </div>
-                  <div className="downBoxLMain2LRowBox">
-                    {likeData.map((v, i) => (
-                      <div className="downBoxLMain2LRow" key={i}>
-                        <div className="downBoxLMain2LRow1" title={v.name}>
-                          {i + 1}. {v.name}
+
+                  {likeData.length ? (
+                    <div className="downBoxLMain2LRowBox">
+                      {likeData.map((v, i) => (
+                        <div className="downBoxLMain2LRow" key={i}>
+                          <div className="downBoxLMain2LRow1" title={v.name}>
+                            {i + 1}. {v.name}
+                          </div>
+                          <div className="downBoxLMain2LRow2">{v.pcs}</div>
                         </div>
-                        <div className="downBoxLMain2LRow2">{v.pcs}</div>
-                      </div>
-                    ))}
-                  </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="noneInfo">
+                      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+                    </div>
+                  )}
+
                   <div className="downBoxLMain2LRow"></div>
                 </div>
               </div>

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

@@ -11,101 +11,85 @@
       width: 220px;
       height: 100%;
       box-shadow: 0px 0px 5px 3px;
+      background-color: var(--themeColor2);
 
       .layoutLeftTop {
-        height: 60px;
-        background-color: var(--themeColor);
-        padding: 7px 0 0 20px;
-
-        &>h3 {
-          color: #fff;
-        }
+        padding: 20px 20px 40px;
       }
 
       .layoutLeftMain {
-        height: calc(100% - 60px);
+        height: calc(100% - 173px);
         padding: 20px;
-        background-image: url('../../assets/img/layoutLeftMain.jpg');
-        background-size: 100% 100%;
 
         .mainBoxL2RowBox {
           margin-bottom: 20px;
-          .mainBoxL2RowBoxTit{
+          color: #fff;
+
+          .mainBoxL2RowBoxTit {
             padding-left: 3px;
             display: flex;
             margin-bottom: 10px;
             font-size: 16px;
             font-weight: 700;
-            color: black;
-            &>.txt{
+
+            &>.txt {
               margin-left: 15px;
+              opacity: .7;
             }
           }
+
           .mainBoxL2Row {
-            padding-left: 50px;
+            width: 160px;
+            opacity: .7;
+            padding-left: 42px;
             cursor: pointer;
             height: 40px;
             line-height: 40px;
             font-size: 14px;
             position: relative;
             margin-bottom: 5px;
-  
-            .rowTip{
+            border-radius: 6px;
+
+            .rowTip {
               height: 26px;
               width: 26px;
               position: absolute;
               z-index: 10;
-              right: 30px;
+              right: 10px;
               top: 50%;
               transform: translateY(-50%);
               border-radius: 50%;
               background-color: var(--themeColor);
               font-size: 12px;
-              color: #fff;
+              color: black;
               display: flex;
               justify-content: center;
               align-items: center;
             }
 
-            .tabImg {
-              z-index: 3;
-              position: absolute;
-              top: 50%;
-              left: 20px;
-              transform: translateY(-50%);
-              width: 20px;
-            }
-
-            .tabImgAc {
-              z-index: 3;
-              position: absolute;
-              top: 50%;
-              left: 20px;
-              transform: translateY(-50%);
-              width: 20px;
-              display: none;
-            }
 
             &:hover {
-              color: #fff;
-              background-image: url('../../assets/img/activeLL.png');
-              background-size: 100% 100%;
+              background-color: var(--themeColor);
+              opacity: 1;
+              color: black;
 
-              .tabImgAc {
-                display: block;
+              .rowTip {
+                background-color: var(--themeColor2);
+                color: #fff;
               }
             }
-    
+
           }
 
           .active {
-            color: #fff;
             pointer-events: none;
-            background-image: url('../../assets/img/activeLL.png');
-            background-size: 100% 100%;
+            background-color: var(--themeColor);
+            opacity: 1;
+            color: black;
 
-            .tabImgAc {
-              display: block;
+            .rowTip {
+              background-color: var(--themeColor2);
+              color: #fff;
             }
           }
         }
@@ -210,10 +194,9 @@
         height: calc(100% - 60px);
 
         .mainBoxR {
+          background-color: #f5f4ed;
           width: 100%;
           height: 100%;
-          background-image: url('../../assets/img/bg.jpg');
-          background-size: 100% 100%;
           overflow: hidden;
           padding: 20px 30px;
 

houtai/src/pages/Layout/index.tsx

@@ -22,12 +22,11 @@ import { useDispatch } from "react-redux";
 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 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 { MessageFu } from "@/utils/message";
+import logoImg from "@/assets/img/logo.png";
 
 function Layout() {
   const dispatch = useDispatch();
@@ -35,6 +34,7 @@ function Layout() {
   type ListTempType = {
     title: string;
     inco: any;
+    incoAc: any;
     son: {
       id: number;
       name: string;
@@ -43,8 +43,6 @@ function Layout() {
       Com: React.LazyExoticComponent<
         React.MemoExoticComponent<() => JSX.Element>
       >;
-      inco: any;
-      incoAc: any;
       num?: number;
     }[];
   }[];
@@ -54,6 +52,7 @@ function Layout() {
       {
         title: "数据统计",
         inco: inco1,
+        incoAc: inco1Ac,
         son: [
           {
             id: 100,
@@ -61,14 +60,13 @@ function Layout() {
             path: "/",
             done: false,
             Com: React.lazy(() => import("../A1Hot")),
-            inco: inco1,
-            incoAc: inco1Ac,
           },
         ],
       },
       {
         title: "内容管理",
         inco: inco2,
+        incoAc: inco2Ac,
         son: [
           {
             id: 200,
@@ -76,8 +74,6 @@ function Layout() {
             path: "/scene",
             done: false,
             Com: React.lazy(() => import("../B1Scene")),
-            inco: inco2,
-            incoAc: inco2Ac,
           },
           {
             id: 300,
@@ -85,8 +81,6 @@ function Layout() {
             path: "/goods",
             done: false,
             Com: React.lazy(() => import("../B2Goods")),
-            inco: inco2,
-            incoAc: inco2Ac,
           },
           {
             id: 400,
@@ -94,8 +88,6 @@ function Layout() {
             path: "/wall",
             done: false,
             Com: React.lazy(() => import("../B3Wall")),
-            inco: inco2,
-            incoAc: inco2Ac,
           },
           {
             id: 500,
@@ -103,8 +95,6 @@ function Layout() {
             path: "/barrage",
             done: false,
             Com: React.lazy(() => import("../B4Barrage")),
-            inco: inco2,
-            incoAc: inco2Ac,
             num: 0,
           },
           {
@@ -113,8 +103,6 @@ function Layout() {
             path: "/topic",
             done: false,
             Com: React.lazy(() => import("../B5Topic")),
-            inco: inco2,
-            incoAc: inco2Ac,
           },
           {
             id: 700,
@@ -122,8 +110,6 @@ function Layout() {
             path: "/smart",
             done: false,
             Com: React.lazy(() => import("../B6Smart")),
-            inco: inco2,
-            incoAc: inco2Ac,
           },
         ],
       },
@@ -138,7 +124,8 @@ function Layout() {
     if (userInfo.isAdmin === 1) {
       listTemp.push({
         title: "系统管理",
-        inco: inco4,
+        inco: inco3,
+        incoAc: inco3Ac,
         son: [
           {
             id: 800,
@@ -146,8 +133,6 @@ function Layout() {
             path: "/user",
             done: true,
             Com: React.lazy(() => import("../C1User")),
-            inco: inco3,
-            incoAc: inco3Ac,
           },
           {
             id: 900,
@@ -155,8 +140,6 @@ function Layout() {
             path: "/role",
             done: true,
             Com: React.lazy(() => import("../C2Role")),
-            inco: inco3,
-            incoAc: inco3Ac,
           },
           {
             id: 1000,
@@ -164,8 +147,6 @@ function Layout() {
             path: "/log",
             done: true,
             Com: React.lazy(() => import("../C3Log")),
-            inco: inco4,
-            incoAc: inco4Ac,
           },
         ],
       });
@@ -260,7 +241,7 @@ function Layout() {
       {/* 左边 */}
       <div className="layoutLeft">
         <div className="layoutLeftTop">
-          <h3>鸦片战争博物馆</h3>
+          <img src={logoImg} alt="" />
         </div>
         {/* 左边主体 */}
         <div className="layoutLeftMain">
@@ -279,8 +260,6 @@ function Layout() {
                     v2.path === path ? "active" : ""
                   )}
                 >
-                  <img className="tabImg" src={v2.inco} alt="" />
-                  <img className="tabImgAc" src={v2.incoAc} alt="" />
                   {v2.id === 500 ? (
                     <div className="rowTip">{v2.num}</div>
                   ) : null}

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

@@ -6,64 +6,59 @@
   position: relative;
 
   :global {
-    .loginTop{
-      height: 60px;
-      background-image: url('../../assets/img/top.jpg');
-      background-size: 100% 100%;
-      padding: 7px 0 0 20px;
-      color: #fff;
-    }
+
     .main {
+      border-top: 3px solid rgba(200, 185, 146, .8);
       border-radius: 6px;
       position: absolute;
-      top: 52%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 1266px;
-      height: 694px;
-      .mainLeft{
-        width: 50%;
-        height: 100%;
-        background-image: url('../../assets/img/loginLeft.png');
+      top: 50%;
+      right: 240px;
+      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);
+      .logo{
+        margin: 0 auto;
+        width: 375px;
+        height: 233px;
+        background-image: url('../../assets/img/logo.png');
         background-size: 100% 100%;
-        position: relative;
-        .mainLeftTitle{
-          font-size: 20px;
-          letter-spacing: 5px;
-          position: absolute;
-          left: 50%;
-          bottom: 60px;
-          transform: translateX(-50%);
-          color: #fff;
-        }
       }
-      .mainRight {
-        position: absolute;
-        right: 8px;
-        top: 10%;
-        width: 50%;
-        height: 80%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        background-image: url('../../assets/img/loginRight.png');
-        background-size: 100% 100%;
-
-        &>h1 {
-          letter-spacing: 6px;
-          font-size: 30px;
-          font-weight: 600;
-        }
+       
 
         .inputBox {
           width: 100%;
 
+          input::-webkit-input-placeholder {
+            /* WebKit browsers */
+            color: rgba(255,255,255,.5);
+          }
+
+          input:-moz-placeholder {
+            /* Mozilla Firefox 4 to 18 */
+            color: rgba(255,255,255,.5);
+          }
+
+          input::-moz-placeholder {
+            /* Mozilla Firefox 19+ */
+            color: rgba(255,255,255,.5);
+          }
+
+          input:-ms-input-placeholder {
+            /* Internet Explorer 10+ */
+            color: rgba(255,255,255,.5);
+          }
+
+
           .inputBoxRow {
-            width: 400px;
+            width: 370px;
             margin: 50px auto;
 
             .ant-input-suffix .ant-input-password-icon {
+              color: var(--themeColor);
               font-size: 22px;
             }
           }
@@ -104,24 +99,33 @@
             padding: 0 11px;
             width: 100%;
             height: 60px;
-
+            border: none;
+            border-bottom: 1px solid var(--themeColor);
+            border-radius: 0;
+            color: var(--themeColor);
             .ant-input {
               background-color: transparent;
               width: 100%;
               height: 60px;
+              color: #fff;
             }
           }
+          .ant-input-affix-wrapper-focused{
+            box-shadow:none
+          }
         }
 
         .loginBtn {
 
           .ant-btn {
+            color: black;
+            background-color: #f0d99c;
+            border-radius: 25px;
             font-size: 24px;
-            width: 400px;
-            height: 60px;
+            width: 375px;
+            height: 50px;
           }
         }
-      }
 
     }
   }

houtai/src/pages/Login/index.tsx

@@ -47,19 +47,9 @@ export default function Login() {
 
   return (
     <div className={styles.Login}>
-      <div className="loginTop">
-        <h3>
-          中医药文化宣传教育基地
-          <br />
-          线上展馆管理后台
-        </h3>
-      </div>
       <div className="main">
-        <div className="mainLeft">
-          <div className="mainLeftTitle">江苏省中医药管理局</div>
-        </div>
-        <div className="mainRight">
-          <h1>欢迎登录</h1>
+
+          <div className="logo"></div>
           {/* 账号密码输入框 */}
           <div className="inputBox">
             <div className="inputBoxRow">
@@ -90,7 +80,6 @@ export default function Login() {
               登 录
             </Button>
           </div>
-        </div>
       </div>
     </div>
   );