upp

houtai/src/assets/styles/base.css

@@ -137,7 +137,9 @@ a {
 .pageTitlt {
   font-size: 20px;
   font-weight: 700;
-  color: var(--themeColor);
+  color: var(--themeColor2);
+  padding-left: 40px;
+  line-height: 60px;
 }
 #upInput {
   display: none;

houtai/src/assets/styles/base.less

@@ -188,7 +188,9 @@ a {
 .pageTitlt {
   font-size: 20px;
   font-weight: 700;
-  color: var(--themeColor);
+  color: var(--themeColor2);
+  padding-left: 40px;
+  line-height: 60px;
 }
 
 

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

@@ -1,8 +1,7 @@
 .Hot {
   :global {
     .hotMainBox {
-      height: calc(100% - 40px);
-      margin-top: 12px;
+      height: 100%;
       overflow: auto;
       overflow-y: overlay;
 
@@ -96,7 +95,7 @@
       }
 
       .downBox {
-        margin: 15px 0;
+        margin: 15px 0 0;
         height: 464px;
         display: flex;
 

houtai/src/pages/A1Hot/index.tsx

@@ -275,7 +275,6 @@ function Hot() {
 
   return (
     <div className={styles.Hot}>
-      <div className="pageTitlt">热度统计</div>
       <div className="hotMainBox">
         {/* 上面 */}
         <div className="topBox">

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

@@ -10,11 +10,10 @@
       z-index: 10;
       width: 220px;
       height: 100%;
-      box-shadow: 0px 0px 5px 3px;
       background-color: var(--themeColor2);
 
       .layoutLeftTop {
-        padding: 20px 20px 40px;
+        padding: 20px;
       }
 
       .layoutLeftMain {
@@ -36,6 +35,21 @@
               margin-left: 15px;
               opacity: .7;
             }
+            .tabImg2{
+              display: none;
+            }
+          }
+
+          .activeRow1 {
+            &>.txt {
+              opacity: 1;
+            }
+            .tabImg1{
+              display: none;
+            }
+            .tabImg2{
+              display: block;
+            }
           }
 
           .mainBoxL2Row {
@@ -108,16 +122,15 @@
 
 
       .layoutRightTop {
+        background-color: #f5f4ed;
         height: 60px;
-        background-image: url('../../assets/img/layoutTop.jpg');
-        background-size: 100% 100%;
         display: flex;
-        justify-content: flex-end;
+        justify-content: space-between;
         position: relative;
-        z-index: 11;
+        z-index: 20;
 
         .user {
-          padding-right: 40px;
+          padding-right: 66px;
           display: flex;
           align-items: center;
           padding-left: 55px;
@@ -126,11 +139,9 @@
           background: url('../../assets/img/user.png') no-repeat left center;
           background-size: 40px 40px;
           font-size: 16px;
-          color: #fff;
 
           .userInco {
             margin-left: 10px;
-            color: #fff;
           }
 
           .userInco1 {
@@ -144,20 +155,19 @@
             opacity: 0;
             pointer-events: none;
             transition: bottom .3s;
-            height: 120px;
             position: absolute;
-            left: 50%;
-            transform: translateX(-50%);
-            bottom: -80px;
-            padding-top: 20px;
-            color: rgb(226, 223, 223);
+            left: 0px;
+            bottom: -60px;
+            box-shadow: 0px 0px 3px 1px #ccc;
+            padding: 10px 0;
+            background-color: #fff;
+
 
             &>span {
-              background-color: var(--themeColor);
               display: block;
               width: 100%;
-              height: 50px;
-              line-height: 50px;
+              height: 40px;
+              line-height: 40px;
               text-align: center;
 
               &:first-child {
@@ -165,7 +175,7 @@
               }
 
               &:hover {
-                color: #fff;
+                color: var(--themeColor2);
               }
             }
           }
@@ -174,7 +184,7 @@
             .userSet {
               opacity: 1;
               pointer-events: auto;
-              bottom: -110px;
+              bottom: -100px;
             }
 
             .userInco1 {
@@ -198,7 +208,7 @@
           width: 100%;
           height: 100%;
           overflow: hidden;
-          padding: 20px 30px;
+          padding: 0px 30px 20px;
 
           &>div {
             width: 100%;

houtai/src/pages/Layout/index.tsx

@@ -199,6 +199,31 @@ function Layout() {
     setPath(pathTemp);
   }, [location]);
 
+  // 页面title信息文字
+  const pageTitlt = useMemo(() => {
+    let txt = "";
+    list.forEach((v1) => {
+      v1.son.forEach((v2) => {
+        if (v2.path === path) txt = v2.name;
+      });
+    });
+    return txt;
+  }, [list, path]);
+
+  // 第一级菜单选中高亮
+  const row1ActiveFu = useCallback(
+    (title: string) => {
+      let flag = false;
+      list.forEach((v1) => {
+        v1.son.forEach((v2) => {
+          if (v2.path === path && v1.title === title) flag = true;
+        });
+      });
+      return flag;
+    },
+    [list, path]
+  );
+
   const userInfo = useMemo(() => {
     return getTokenInfo().user;
   }, []);
@@ -247,8 +272,14 @@ function Layout() {
         <div className="layoutLeftMain">
           {list.map((v1) => (
             <div className="mainBoxL2RowBox" key={v1.title}>
-              <div className="mainBoxL2RowBoxTit">
-                <img className="tabImg" src={v1.inco} alt="" />
+              <div
+                className={classNames(
+                  "mainBoxL2RowBoxTit",
+                  row1ActiveFu(v1.title) ? "activeRow1" : ""
+                )}
+              >
+                <img className="tabImg1" src={v1.inco} alt="" />
+                <img className="tabImg2" src={v1.incoAc} alt="" />
                 <div className="txt">{v1.title}</div>
               </div>
               {v1.son.map((v2) => (
@@ -273,6 +304,7 @@ function Layout() {
       {/* 右边 */}
       <div className="layoutRight">
         <div className="layoutRightTop">
+          <div className="pageTitlt">{pageTitlt}</div>
           {/* 用户相关 */}
           <div className="user">
             {userInfo.realName}