样式调整

README.md

@@ -1,9 +1,10 @@
 1.使用 yarn。 npm 有问题
+node 版本：24.12.0（如果 npm run build 报错，使用 22.18.0）
 
-2.测试后端文档地址：https://sit-jiningbwg.4dage.com/api/doc.html#/home
+2.测试后端文档地址：xxxx
 
-3.测试堡垒机位置：227/data/data/museum_neimenggu_jining_storage_data
+3.测试堡垒机位置：xxxxx
 
-4：测试网址：https://sit-jiningbwg.4dage.com/backstage
+4：测试网址：xxxx
 
-5：蓝湖地址：https://lanhuapp.com/web/#/item/project/product?tid=de3e5e3e-a489-4b19-862a-7c87ce113467&pid=b9372812-c1fc-4468-b4df-66d479852d37&image_id=64607cd0-37bc-4303-bd30-18ed52cc6b0d&docId=64607cd0-37bc-4303-bd30-18ed52cc6b0d&docType=axure&versionId=002aa9ce-c05b-489d-9908-d2df106c9942&pageId=94d8a5537a30480f93582ce01f79905c&parentId=6d680122-8ca9-4720-b76b-75e22561a31c&share_type=quickShare
+5：蓝湖地址：https://lanhuapp.com/web/#/item/project/product?tid=de3e5e3e-a489-4b19-862a-7c87ce113467&pid=bee8cc26-6a17-4b77-8e80-45b03b05465a&image_id=a4256a90-52f3-41bc-acb3-6ae1344fa1c2&docId=a4256a90-52f3-41bc-acb3-6ae1344fa1c2&docType=axure&versionId=77cd75fb-b6af-43d6-b5e2-11d3ac67d9b5&pageId=2fe0d9a1b6a144c1b199ed14c162aa98&parentId=8f795cc5-2462-4553-acc4-02267adcff9a&share_type=quickShare

src/App.tsx

@@ -1,4 +1,3 @@
-import '@/assets/styles/base.css'
 // 关于路由
 import React from 'react'
 import { Router, Route, Switch } from 'react-router-dom'

src/assets/styles/base.css

@@ -7,10 +7,18 @@ html {
   height: 100%;
   font-size: 14px;
 }
+/* 主题色 */
+:root {
+  --themeColor: #002c15;
+  --themeColor2: #fddb77;
+  --boxBcaColor: #f7efed;
+}
+
 body {
-  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
+  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: black;
+  color: var(--themeColor) !important;
 }
 i {
   font-style: normal;
@@ -33,11 +41,7 @@ textarea {
   resize: none !important;
   min-height: 100px !important;
 }
-/* 主题色 */
-:root {
-  --themeColor: #b02b23;
-  --themeColor2: #f7c481;
-}
+
 /* 找不到页面 */
 .noFindPage {
   opacity: 0;
@@ -68,7 +72,6 @@ textarea {
   /* antd分页器样式 */
   /* 表格的图片居中 */
   /* antd图片预览组件 */
-  /* antd表格居中 */
 }
 #root a {
   text-decoration: none;
@@ -107,9 +110,6 @@ textarea {
 #root .ant-image {
   display: none;
 }
-#root .ant-table-cell {
-  text-align: center !important;
-}
 #root #A2Table3 .ant-table-row-expand-icon {
   background-color: var(--themeColor);
   color: #fff;
@@ -135,20 +135,20 @@ textarea {
   font-weight: 700;
   position: absolute;
   z-index: 11;
-  top: -56px;
+  top: -73px;
   left: -18px;
   padding-left: 40px;
-  color: var(--themeColor);
+  color: var(--themeColor2);
+  text-shadow: 1px 1px 1px black;
+  letter-spacing: 2px;
 }
 .pageTitle::before {
   position: absolute;
-  left: 20px;
-  top: 50%;
-  transform: translateY(-50%);
-  content: '';
-  width: 6px;
-  height: 20px;
-  background-color: var(--themeColor);
+  left: 0px;
+  content: '|';
+  font-size: 20px;
+  font-weight: 700;
+  top: -3px;
 }
 .mySorrl::-webkit-scrollbar {
   /*滚动条整体样式*/
@@ -177,3 +177,16 @@ textarea {
   height: 100%;
   text-align: center;
 }
+.ant-table-body {
+  background-color: var(--boxBcaColor) !important;
+}
+/* antd表格居中 */
+.ant-table-cell {
+  text-align: center !important;
+}
+.ant-table-header .ant-table-cell {
+  color: var(--themeColor) !important;
+}
+.ant-table-body .ant-table-cell {
+  border-color: #ccc !important;
+}

src/assets/styles/base.less

@@ -14,7 +14,7 @@ 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: black;
+  color: #fff !important;
 }
 
 i {
@@ -45,8 +45,9 @@ textarea {
 
 /* 主题色 */
 :root {
-  --themeColor: #b02b23;
-  --themeColor2: #f7c481;
+  --themeColor: #002c15;
+  --themeColor2: #fddb77;
+  --boxBcaColor: #f7efed;
 }
 
 /* 找不到页面 */
@@ -191,12 +192,6 @@ textarea {
     display: none;
   }
 
-  /* antd表格居中 */
-
-  .ant-table-cell {
-    text-align: center !important;
-  }
-
   // 树型 表格 定制化
   #A2Table3 {
     .ant-table-row-expand-icon {
@@ -233,20 +228,20 @@ textarea {
   font-weight: 700;
   position: absolute;
   z-index: 11;
-  top: -56px;
+  top: -73px;
   left: -18px;
   padding-left: 40px;
-  color: var(--themeColor);
+  color: var(--themeColor2);
+  text-shadow: 1px 1px 1px black;
+  letter-spacing: 2px;
 
   &::before {
     position: absolute;
-    left: 20px;
-    top: 50%;
-    transform: translateY(-50%);
-    content: '';
-    width: 6px;
-    height: 20px;
-    background-color: var(--themeColor);
+    left: 0px;
+    content: '|';
+    font-size: 20px;
+    font-weight: 700;
+    top: -3px;
   }
 }
 
@@ -289,3 +284,25 @@ textarea {
   height: 100%;
   text-align: center;
 }
+
+// --------关于表格
+.ant-table-body {
+  background-color: var(--boxBcaColor) !important;
+}
+/* antd表格居中 */
+
+.ant-table-cell {
+  text-align: center !important;
+}
+
+.ant-table-header {
+  .ant-table-cell {
+    color: var(--themeColor) !important;
+  }
+}
+
+.ant-table-body {
+  .ant-table-cell {
+    border-color: #ccc !important;
+  }
+}

src/components/SpinLodingSon/index.module.scss

@@ -1,7 +1,7 @@
 .SpinLodingSon {
   width: 100%;
   height: 100%;
-  background-color: #fff;
+  // background-color: #fff;
   border-radius: 10px;
   display: flex;
   justify-content: center;

src/index.tsx

@@ -1,4 +1,5 @@
 // import 'default-passive-events';
+import '@/assets/styles/base.css'
 
 import App from './App'
 import store from './store/index'
@@ -22,7 +23,7 @@ root.render(
     locale={locale}
     theme={{
       token: {
-        colorPrimary: '#b02b23'
+        colorPrimary: '#002c15'
       }
     }}
   >

src/pages/Layout/data.ts

@@ -6,6 +6,7 @@ const tabLeftArr: RouterType = [
   {
     id: 1,
     name: '工作台',
+    show: true,
     son: [
       {
         id: 100,
@@ -37,6 +38,7 @@ const tabLeftArr: RouterType = [
   {
     id: 2,
     name: '入藏管理',
+    show: true,
     son: [
       {
         id: 100,
@@ -68,6 +70,7 @@ const tabLeftArr: RouterType = [
   {
     id: 3,
     name: '藏品台账',
+    show: true,
     son: [
       {
         id: 100,
@@ -98,6 +101,7 @@ const tabLeftArr: RouterType = [
   {
     id: 4,
     name: '藏品管理',
+    show: true,
     son: [
       {
         id: 100,
@@ -128,6 +132,7 @@ const tabLeftArr: RouterType = [
   {
     id: 5,
     name: '文创管理',
+    show: true,
     son: [
       {
         id: 100,
@@ -146,6 +151,7 @@ const tabLeftArr: RouterType = [
   {
     id: 6,
     name: '库房管理',
+    show: true,
     son: [
       {
         id: 100,
@@ -183,6 +189,7 @@ const tabLeftArr: RouterType = [
   {
     id: 7,
     name: '藏品维护',
+    show: true,
     son: [
       {
         id: 100,
@@ -207,6 +214,7 @@ const tabLeftArr: RouterType = [
   {
     id: 8,
     name: '展品管理',
+    show: true,
     son: [
       {
         id: 100,
@@ -220,6 +228,7 @@ const tabLeftArr: RouterType = [
   {
     id: 9,
     name: '系统管理',
+    show: true,
     son: [
       {
         id: 100,
@@ -285,4 +294,5 @@ const tabLeftArr: RouterType = [
 export default tabLeftArr
 
 // 里面的页面，不是左边的tab栏
+// 这里的id要和tab栏的id相同，不然没有权限进入页面
 export const routerSon: RouterTypeRow[] = []

src/pages/Layout/index.module.scss

@@ -2,61 +2,105 @@
   width: 100%;
   height: 100%;
   display: flex;
+  background-image: url('../../assets/img/bgC.jpg');
+  background-size: 100% 100%;
 
   :global {
     .layoutLeft {
       position: relative;
       width: 220px;
       height: 100%;
-      background-image: url('../../assets/img/layoutBj.png');
-      background-size: 100% 100%;
 
       .layoutLeftTop {
         text-align: center;
         padding: 20px 20px 0px;
+        .logo {
+          width: 150px;
+          position: relative;
+          top: -5px;
+        }
       }
 
       .layoutLeftMain {
-        height: calc(100% - 67px);
+        background-image: linear-gradient(rgba(27, 27, 28, 0.7), rgba(0, 0, 0, 0.3));
+        margin-top: 27px;
+        height: calc(100% - 80px);
         overflow-y: auto;
         padding-bottom: 10px;
+        padding: 30px 0 0;
+        backdrop-filter: blur(4px);
+
         &::-webkit-scrollbar-thumb {
-          background: var(--themeColor2);
+          background: var(--themeColor);
         }
 
         .layoutLRowBox {
+          margin-bottom: 20px;
           .layoutLRowBoxTxt {
-            font-size: 18px;
-            font-weight: 700;
-            height: 40px;
-            line-height: 40px;
-            padding-left: 40px;
+            padding-left: 60px;
+            cursor: pointer;
+            margin: 0px auto;
+            width: 200px;
+            font-size: 16px;
+            height: 48px;
+            line-height: 48px;
             color: #fff;
+            background-image: url('../../assets/img/UnionNo.png');
+            background-size: 100% 100%;
+            position: relative;
             // opacity: .8;
+            & > span {
+              position: absolute;
+              top: 2px;
+              right: 36px;
+              display: inline-block;
+              margin-left: 20px;
+              transition: all 0.3s;
+            }
+            .layoutLRowBoxTxtIcon {
+              transform: rotate(180deg);
+            }
+          }
+          .layoutLRowBoxTxtShow {
+            background-image: url('../../assets/img/Union.png');
           }
 
           .layoutLRowBoxRow {
-            opacity: 1;
+            padding-left: 75px;
+            width: 200px;
+            margin: 3px auto;
+            opacity: 0.8;
             color: #fff;
-            text-align: center;
             cursor: pointer;
-
+            transition: all 0.3s;
             font-size: 16px;
             height: 40px;
             line-height: 40px;
+            background-color: #3e3129;
+            overflow: hidden;
+            position: relative;
 
             &:hover {
-              background-image: url('../../assets/img/layAc.png');
-              background-size: 100% 100%;
-              color: var(--themeColor);
+              opacity: 1;
+              background-color: #ab925b;
+            }
+            & > span {
+              position: absolute;
+              right: 20px;
+              display: inline-block;
+              margin-left: 20px;
+              transition: all 0.3s;
+              font-size: 14px;
             }
           }
+          .layoutLRowBoxRowHide {
+            height: 0;
+            margin: 0 auto;
+          }
 
           .active {
-            // pointer-events: none;
-            background-image: url('../../assets/img/layAc.png');
-            background-size: 100% 100%;
-            color: var(--themeColor);
+            opacity: 1;
+            background-color: #ab925b;
           }
         }
       }
@@ -90,12 +134,12 @@
             height: 60px;
             display: flex;
             align-items: center;
-            color: var(--themeColor);
+            color: #fff;
           }
 
           .userInco {
             margin-left: 10px;
-            color: var(--themeColor);
+            color: #fff;
           }
 
           .userInco1 {
@@ -140,14 +184,18 @@
 
       .layoutRightMain {
         height: calc(100% - 60px);
-        padding: 15px;
-        background-color: #ecedf1;
+        padding: 15px 15px 0;
+        margin-top: 20px;
+        height: calc(100% - 80px);
 
         .mainBoxR {
           width: 100%;
           height: 100%;
           // overflow: hidden;
           position: relative;
+          background-image: url('../../assets/img/cBac.png');
+          background-size: 100% 100%;
+          padding: 24px 15px 15px;
 
           & > div {
             width: 100%;

src/pages/Layout/index.tsx

@@ -17,6 +17,7 @@ import tabLeftArr, { routerSon } from './data'
 import MyPopconfirm from '@/components/MyPopconfirm'
 import store from '@/store'
 import SpinLodingSon from '@/components/SpinLodingSon'
+import { DownOutlined, RightOutlined } from '@ant-design/icons'
 
 function Layout() {
   const [loding, setLoding] = useState(false)
@@ -57,7 +58,7 @@ function Layout() {
           const dom = document.querySelector('.layoutLeftMain') as HTMLDivElement
           if (dom) {
             dom.scrollTo({
-              top: sroolRef.current.offsetTop - 400,
+              top: sroolRef.current.offsetTop - 350,
               behavior: 'smooth'
             })
           }
@@ -233,7 +234,7 @@ function Layout() {
       {/* 左边 */}
       <div className='layoutLeft'>
         <div className='layoutLeftTop'>
-          <img src={require('@/assets/img/layLogo.png')} alt='' />
+          <img className='logo' src={require('@/assets/img/logo.png')} alt='' />
         </div>
         {/* 左边主体 */}
         <div className='layoutLeftMain mySorrl'>
@@ -243,16 +244,38 @@ function Layout() {
               key={v.id}
               hidden={!v.son.length || (v.son.length === 1 && v.son[0].name === '藏品详情')}
             >
-              <div className='layoutLRowBoxTxt'>{v.name}</div>
+              <div
+                className={classNames('layoutLRowBoxTxt', v.show ? 'layoutLRowBoxTxtShow' : '')}
+                onClick={() => {
+                  setList(
+                    list.map(c => ({
+                      ...c,
+                      show: c.id === v.id ? !c.show : c.show
+                    }))
+                  )
+                }}
+              >
+                {v.name}
+                <span className={classNames(v.show ? 'layoutLRowBoxTxtIcon' : '')}>
+                  <DownOutlined />
+                </span>
+              </div>
               {v.son.map(v2 => (
                 <div
                   key={v2.id}
                   hidden={v2.id >= 9901}
-                  className={classNames('layoutLRowBoxRow', pathAcFu(v2.path) ? 'active' : '')}
+                  className={classNames(
+                    'layoutLRowBoxRow',
+                    pathAcFu(v2.path) ? 'active' : '',
+                    v.show ? '' : 'layoutLRowBoxRowHide'
+                  )}
                   ref={pathAcFu(v2.path) ? sroolRef : null}
                   onClick={() => pathCutFu(v2)}
                 >
                   {v2.name}
+                  <span>
+                    <RightOutlined />
+                  </span>
                 </div>
               ))}
             </div>

src/pages/Login/index.module.scss

@@ -6,22 +6,43 @@
   padding: 8%;
   background-image: url('../../assets/img/bg.jpg');
   background-size: 100% 100%;
+  position: relative;
 
   :global {
+    .LogoImg {
+      position: absolute;
+      top: 60px;
+      left: 50px;
+    }
+
     .mainRight {
+      padding-bottom: 45px;
+      position: absolute;
+      right: 4.5%;
+      top: 28%;
       border-radius: 6px;
-      width: 530px;
+      width: 400px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
+      background-color: #3a110a;
+      color: var(--themeColor2);
+      border-radius: 10px;
+      overflow: hidden;
 
-      .inputBox {
-        padding: 30px 0 60px;
+      & > h3 {
         width: 100%;
+        height: 75px;
+        text-align: center;
+        line-height: 75px;
+        font-size: 22px;
+        letter-spacing: 2px;
+        background-color: #002c15;
+      }
 
-        background-image: url('../../assets/img/loginBj.png');
-        background-size: 100% 100%;
+      .inputBox {
+        width: 100%;
 
         input::-webkit-input-placeholder {
           /* WebKit browsers */
@@ -44,11 +65,11 @@
         }
 
         .inputBoxRow {
-          width: 370px;
+          width: 300px;
           margin: 30px auto;
 
           .ant-input-suffix .ant-input-password-icon {
-            color: var(--themeColor);
+            color: var(--themeColor2);
             font-size: 22px;
           }
         }
@@ -91,7 +112,7 @@
 
         input:-webkit-autofill {
           font-size: 18px !important;
-          -webkit-text-fill-color: var(--themeColor) !important;
+          -webkit-text-fill-color: var(--themeColor2) !important;
           background-image: none;
           -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; //填充阴影，可以用来遮住背景色
           background-color: transparent;
@@ -103,16 +124,17 @@
           padding: 0 11px;
           width: 100%;
           height: 60px;
-          border: 1px solid var(--themeColor);
-          border-radius: 4px;
-          color: var(--themeColor);
+          border: none;
+          border-bottom: 1px solid var(--themeColor2);
+          border-radius: 0px;
+          color: var(--themeColor2);
 
           .ant-input {
             background-color: transparent;
 
             width: 100%;
             height: 60px;
-            color: var(--themeColor);
+            color: var(--themeColor2);
           }
         }
 
@@ -121,14 +143,25 @@
         }
 
         .loginBtn {
-          text-align: center;
-          .ant-btn {
-            color: #fff;
-            background-color: var(--themeColor);
-            border-radius: 25px;
-            font-size: 18px;
-            width: 375px;
-            height: 50px;
+          cursor: pointer;
+          font-size: 20px;
+          width: 300px;
+          height: 48px;
+          margin: 0 auto;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background-color: #1a0704;
+          color: var(--themeColor2);
+          transition: 'opacity' 0.3;
+          & > img {
+            display: block;
+            position: relative;
+            top: 1px;
+            margin-right: 10px;
+          }
+          &:hover {
+            opacity: 0.8;
           }
         }
       }

src/pages/Login/index.tsx

@@ -1,6 +1,6 @@
 import styles from './index.module.scss'
 
-import { Input, Button } from 'antd'
+import { Input } from 'antd'
 import { UserOutlined, LockOutlined, NumberOutlined } from '@ant-design/icons'
 import { useCallback, useEffect, useState } from 'react'
 import { Base64 } from 'js-base64'
@@ -73,11 +73,13 @@ export default function Login() {
 
   return (
     <div className={styles.Login}>
+      {/* logg */}
+      <div className='LogoImg'>
+        <img src={require('@/assets/img/logo2.png')} alt='' />
+      </div>
+
       <div className='mainRight'>
-        {/* logg */}
-        <div className='LogoImg'>
-          <img src={require('@/assets/img/loginTit.png')} alt='' />
-        </div>
+        <h3>青岛啤酒博物馆藏品管理系统</h3>
 
         {/* 账号密码输入框 */}
         <div className='inputBox'>
@@ -115,10 +117,8 @@ export default function Login() {
             ) : null}
           </div>
           {/* 登录按钮 */}
-          <div className='loginBtn'>
-            <Button type='primary' size='large' onClick={loginClickFu}>
-              登 录
-            </Button>
+          <div className='loginBtn' onClick={loginClickFu}>
+            <img src={require('@/assets/img/loginBtn.png')} alt='' />登 录
           </div>
         </div>
       </div>

src/pages/Z1user/index.module.scss

@@ -3,7 +3,7 @@
     .selectBox {
       border-radius: 10px;
       padding: 15px 24px;
-      background-color: #fff;
+      background-color: var(--boxBcaColor);
       display: flex;
       justify-content: space-between;
     }
@@ -13,7 +13,7 @@
       overflow: hidden;
       margin-top: 15px;
       height: calc(100% - 77px);
-      background-color: #fff;
+      background-color: var(--boxBcaColor);
     }
   }
 }

src/pages/Z1user/index.tsx

@@ -160,7 +160,7 @@ function Z1user() {
       {/* 表格主体 */}
       <div className='tableBox'>
         <MyTable
-          yHeight={630}
+          yHeight={585}
           list={tableInfo.list}
           columnsTemp={Z1tableC}
           lastBtn={tableLastBtn}

src/pages/Z2log/index.module.scss

@@ -2,7 +2,7 @@
   :global {
     .logTop {
       border-radius: 10px;
-      background-color: #fff;
+      background-color: var(--boxBcaColor);
 
       .tableSelectBox {
         padding: 15px 24px;
@@ -19,7 +19,7 @@
       border-radius: 10px;
       margin-top: 15px;
       height: calc(100% - 77px);
-      background-color: #fff;
+      background-color: var(--boxBcaColor);
     }
   }
 }

src/pages/Z2log/index.tsx

@@ -3,7 +3,6 @@ import { getLogListAPI } from '@/store/action/Z2log'
 import { Input, DatePicker } from 'antd'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-
 import styles from './index.module.scss'
 import MyTable from '@/components/MyTable'
 import { Z2tableC } from '@/utils/tableData'
@@ -80,7 +79,7 @@ function Z2log() {
       {/* 表格主体 */}
       <div className='tableMain'>
         <MyTable
-          yHeight={630}
+          yHeight={585}
           list={tableInfo.list}
           columnsTemp={Z2tableC}
           pageNum={fromData.pageNum}

src/store/reducer/layout.ts

@@ -47,7 +47,6 @@ type LayoutActionType =
       }
     }
 
-// 频道 reducer
 export default function layoutReducer(state = initState, action: LayoutActionType) {
   switch (action.type) {
     // 所有图片点击预览查看大图

src/types/api/layot.d.ts

@@ -17,6 +17,7 @@ export type RouterTypeRow = {
 export type RouterType = {
   id: number
   name: string
+  show: boolean
   son: RouterTypeRow[]
 }[]