upp

src/assets/styles/base.css

@@ -10,12 +10,22 @@ html {
 /* 主题色 */
 :root {
   --themeColor: #002c15;
-  --themeColor2: #fddb77;
-  --boxBcaColor: #f7efed;
+  --loginTxt: #fddb77;
+  --boxBcaColor: #f8f8f8;
   --txtColor: #4c7f7a;
+  --themeColor2: #988364;
 }
 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: var(--themeColor) !important;
 }
@@ -120,20 +130,23 @@ textarea {
   font-size: 18px;
   position: absolute;
   z-index: 11;
-  top: -97px;
+  top: -72px;
   left: -18px;
   padding-left: 40px;
-  color: var(--themeColor2);
+  color: #fff;
   text-shadow: 2px 2px 2px black;
   letter-spacing: 2px;
 }
 .pageTitle::before {
   position: absolute;
-  left: -14px;
-  content: '|';
+  left: -7px;
+  content: '';
   font-size: 24px;
   font-weight: 700;
-  top: -9px;
+  top: 0px;
+  width: 2px;
+  height: 26px;
+  background-color: #596754;
 }
 .mySorrl::-webkit-scrollbar {
   /*滚动条整体样式*/
@@ -159,12 +172,14 @@ textarea {
 .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;
+  background-color: #d6e6df !important;
 }
 .ant-table-body .ant-table-cell {
   border-color: #ccc !important;

src/assets/styles/base.less

@@ -13,11 +13,13 @@ html {
 /* 主题色 */
 :root {
   --themeColor: #002c15;
-  --themeColor2: #fddb77;
-  --boxBcaColor: #f7efed;
+  --loginTxt: #fddb77;
+  --boxBcaColor: #f8f8f8;
 
   // 这个项目颜色有点杂
   --txtColor: #4c7f7a;
+
+  --themeColor2: #988364;
 }
 
 body {
@@ -226,7 +228,7 @@ textarea {
   top: -97px;
   left: -18px;
   padding-left: 40px;
-  color: var(--themeColor2);
+  color: #fff;
   text-shadow: 2px 2px 2px black;
   letter-spacing: 2px;
 
@@ -237,6 +239,7 @@ textarea {
     font-size: 24px;
     font-weight: 700;
     top: -9px;
+    color: #5a6557;
   }
 }
 

src/pages/Layout/index.module.scss

@@ -2,8 +2,6 @@
   width: 100%;
   height: 100%;
   display: flex;
-  background-image: url('../../assets/img/bgC.jpg');
-  background-size: 100% 100%;
 
   :global {
     .layoutLeft {
@@ -12,8 +10,12 @@
       height: 100%;
 
       .layoutLeftTop {
-        text-align: center;
-        padding: 20px 20px 0px;
+        height: 70px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #243220;
+
         .logo {
           width: 150px;
           position: relative;
@@ -22,13 +24,12 @@
       }
 
       .layoutLeftMain {
-        background-image: linear-gradient(rgba(27, 27, 28, 0.7), rgba(0, 0, 0, 0.3));
-        margin-top: 27px;
-        height: calc(100% - 80px);
+        height: calc(100% - 70px);
         overflow-y: auto;
         padding-bottom: 10px;
         padding: 30px 0 0;
-        backdrop-filter: blur(4px);
+        background-image: url('../../assets/img/latLeftBg.jpg');
+        background-size: 100% 100%;
 
         &::-webkit-scrollbar-thumb {
           background: var(--themeColor);
@@ -51,11 +52,11 @@
             background-image: url('../../assets/img/UnionNo.png');
             background-size: 100% 100%;
             position: relative;
+            font-weight: 700;
             // opacity: .8;
             & > span {
               position: absolute;
-              top: 2px;
-              right: 36px;
+              right: 24px;
               display: inline-block;
               margin-left: 20px;
               transition: all 0.3s;
@@ -67,9 +68,12 @@
           .layoutLRowBoxTxtShow {
             background-image: url('../../assets/img/Union.png');
           }
+          .layoutLRowBoxTxtShowAc {
+            color: var(--themeColor2);
+          }
 
           .layoutLRowBoxRow {
-            padding-left: 75px;
+            padding-left: 60px;
             width: 200px;
             margin: 3px auto;
             opacity: 0.8;
@@ -79,19 +83,18 @@
             font-size: 16px;
             height: 40px;
             line-height: 40px;
-            background-color: #3e3129;
+            background-color: #24664b;
             overflow: hidden;
             position: relative;
 
             &:hover {
               opacity: 1;
-              background-color: #ab925b;
+              background-color: var(--themeColor2);
             }
             & > span {
               position: absolute;
-              right: 20px;
+              right: 24px;
               display: inline-block;
-              margin-left: 20px;
               transition: all 0.3s;
               font-size: 14px;
             }
@@ -103,7 +106,7 @@
 
           .active {
             opacity: 1;
-            background-color: #ab925b;
+            background-color: var(--themeColor2);
           }
         }
       }
@@ -115,8 +118,9 @@
       overflow: hidden;
 
       .layoutRightTop {
-        height: 60px;
+        height: 70px;
         position: relative;
+        background-color: #243220;
 
         .user {
           position: absolute;
@@ -186,24 +190,24 @@
       }
 
       .layoutRightMain {
-        height: calc(100% - 60px);
-        padding: 15px 15px 0;
-        margin-top: 20px;
-        height: calc(100% - 80px);
+        padding: 24px 24px 20px;
+        height: calc(100% - 70px);
+        background-color: #ebeded;
 
         .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%;
             height: 100%;
             position: relative;
+            // padding: 15px;
+            border: 1px solid #d1d3d3;
+            background-color: #f7f8f8;
+            border-radius: 10px;
 
             // background-color: #fff;
             // border-radius: 10px;

src/pages/Layout/index.tsx

@@ -44,10 +44,11 @@ function Layout() {
 
   // 当前路径选中的左侧菜单
   const location = useLocation()
-  const [path, setPath] = useState('')
   const sroolRef = useRef<HTMLDivElement>(null)
   const sroolTimeRef = useRef(-1)
 
+  const [acPageName, setAcPageName] = useState(['', ''])
+
   useEffect(() => {
     if (loding) {
       const arr = location.pathname.split('/')
@@ -69,8 +70,13 @@ function Layout() {
           }
         }, 200)
       }
+      const pathRes = pathTemp.split('_')[0]
 
-      setPath(pathTemp)
+      tabLeftArr.forEach(v1 => {
+        v1.son.forEach(v2 => {
+          if (v2.path === pathRes) setAcPageName([v1.name, v2.name])
+        })
+      })
     }
   }, [location, loding])
 
@@ -222,20 +228,6 @@ function Layout() {
   // 点击用户 出来 退出登录 修改密码
   const [isUserBtnShow, setIsUserBtnShow] = useState(false)
 
-  // path的高亮判断
-  const pathAcFu = useCallback(
-    (url: string) => {
-      let flag = false
-      if (url === '/') {
-        if (path.includes('/_') || path === '/') flag = true
-      } else {
-        if (path.includes(url)) flag = true
-      }
-      return flag
-    },
-    [path]
-  )
-
   return (
     <div className={styles.Layout}>
       {/* 左边 */}
@@ -252,7 +244,11 @@ function Layout() {
               hidden={!v.son.length || (v.son.length === 1 && v.son[0].name === '藏品详情')}
             >
               <div
-                className={classNames('layoutLRowBoxTxt', v.show ? 'layoutLRowBoxTxtShow' : '')}
+                className={classNames(
+                  'layoutLRowBoxTxt',
+                  v.show ? 'layoutLRowBoxTxtShow' : '',
+                  acPageName[0] === v.name ? 'layoutLRowBoxTxtShowAc' : ''
+                )}
                 onClick={() => {
                   setList(
                     list.map(c => ({
@@ -273,10 +269,10 @@ function Layout() {
                   hidden={v2.id >= 9901}
                   className={classNames(
                     'layoutLRowBoxRow',
-                    pathAcFu(v2.path) ? 'active' : '',
+                    acPageName[1] === v2.name ? 'active' : '',
                     v.show ? '' : 'layoutLRowBoxRowHide'
                   )}
-                  ref={pathAcFu(v2.path) ? sroolRef : null}
+                  ref={acPageName[1] === v2.name ? sroolRef : null}
                   onClick={() => pathCutFu(v2)}
                 >
                   {v2.name}

src/pages/Login/index.module.scss

@@ -27,7 +27,7 @@
       justify-content: center;
       align-items: center;
       background-color: #3a110a;
-      color: var(--themeColor2);
+      color: var(--loginTxt);
       border-radius: 10px;
       overflow: hidden;
 
@@ -69,7 +69,7 @@
           margin: 30px auto;
 
           .ant-input-suffix .ant-input-password-icon {
-            color: var(--themeColor2);
+            color: var(--loginTxt);
             font-size: 22px;
           }
         }
@@ -112,7 +112,7 @@
 
         input:-webkit-autofill {
           font-size: 18px !important;
-          -webkit-text-fill-color: var(--themeColor2) !important;
+          -webkit-text-fill-color: var(--loginTxt) !important;
           background-image: none;
           -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; //填充阴影，可以用来遮住背景色
           background-color: transparent;
@@ -125,16 +125,16 @@
           width: 100%;
           height: 60px;
           border: none;
-          border-bottom: 1px solid var(--themeColor2);
+          border-bottom: 1px solid var(--loginTxt);
           border-radius: 0px;
-          color: var(--themeColor2);
+          color: var(--loginTxt);
 
           .ant-input {
             background-color: transparent;
 
             width: 100%;
             height: 60px;
-            color: var(--themeColor2);
+            color: var(--loginTxt);
           }
         }
 
@@ -152,7 +152,7 @@
           justify-content: center;
           align-items: center;
           background-color: #1a0704;
-          color: var(--themeColor2);
+          color: var(--loginTxt);
           transition: 'opacity' 0.3;
           & > img {
             display: block;

src/pages/Zother/EditTop/index.tsx

@@ -74,7 +74,7 @@ function EditTop({ rowArr, pageTxt, APIobj, fileUpInfo }: Props) {
           const flag = v.pageType === 'clue' && !v.clueId
           if (obj.id === null || obj.isNew || flag) obj.id = Date.now() + i
 
-          v.idTemp = v.id
+          obj.idTemp = obj.id
 
           arrTemp.push(obj)
         })