upp

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

@@ -6,6 +6,7 @@
       overflow-y: overlay;
 
       .hotTit {
+        padding-left: 15px;
         position: relative;
         z-index: 10;
         font-weight: 700;
@@ -19,14 +20,36 @@
           font-size: 14px;
           color: #7e8293;
         }
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 5px;
+          height: 22px;
+          background-color: var(--themeColor2);
+        }
       }
 
       .hotTitSelect {
+        padding-left: 15px;
         font-weight: 700;
         font-size: 16px;
         display: flex;
         justify-content: space-between;
         align-items: center;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 5px;
+          width: 5px;
+          height: 22px;
+          background-color: var(--themeColor2);
+        }
       }
 
       .hotTime {
@@ -125,6 +148,7 @@
 
           .downBoxLMain {
             height: calc(100% - 62px);
+
             .downBoxLMain2 {
               display: flex;
               height: 400px;
@@ -170,6 +194,7 @@
               .downBoxLMain2L {
                 margin: 0 6px;
               }
+
               .noneInfo {
                 width: 100%;
                 height: calc(100% - 32px);
@@ -193,9 +218,46 @@
 
                   .downBoxLMain2LRow1 {
                     width: calc(100% - 50px);
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
+                    display: flex;
+                    align-items: center;
+
+                    .num {
+                      width: 20px;
+                      height: 20px;
+                      margin-right: 10px;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                      font-size: 12px;
+                      color: #fff;
+                    }
+
+                    .num1 {
+                      background-color: #ed6618;
+                    }
+
+                    .num2 {
+                      background-color: #f38033;
+                    }
+
+                    .num3 {
+                      background-color: #f59d50;
+                    }
+
+                    .num4 {
+                      background-color: #fbb86b;
+                    }
+
+                    .num5 {
+                      background-color: #ffd385;
+                    }
+
+                    .txt {
+                      width: calc(100% - 30px);
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                      white-space: nowrap;
+                    }
                   }
 
                   .downBoxLMain2LRow2 {

houtai/src/pages/A1Hot/index.tsx

@@ -13,6 +13,7 @@ import { TooltipComponent, LegendComponent } from "echarts/components";
 import { PieChart } from "echarts/charts";
 import { LabelLayout } from "echarts/features";
 import HotMap from "./HotMap";
+import classNames from "classnames";
 
 echarts.use([
   GridComponent,
@@ -30,10 +31,11 @@ function Hot() {
 
   // 折线图
   const echartsFu1 = useCallback(
-    (dom: string, data1: string[], data2: number[]) => {
+    (dom: string, data1: string[], data2: number[], color: string[]) => {
       const chartDom1: any = document.querySelector(dom)!;
       const myChart1 = echarts.init(chartDom1);
       const option1 = {
+        color: color,
         grid: {
           left: "-24", //距左边边框的距离
           right: "0%", //距右边边框的距离
@@ -86,6 +88,7 @@ function Hot() {
       let chartDom2: any = document.querySelector(dom);
       let myChart2 = echarts.init(chartDom2);
       let option2 = {
+        color:['#11A480','#00BBF6','#F97C7C','#93876D','#ECDFBF'],
         tooltip: {
           trigger: "item",
         },
@@ -158,7 +161,7 @@ function Hot() {
       "2023-2-14",
     ];
     const data1_2 = [0, 5, 6, 8, 11, 0, 3, 1, 5, 6, 1, 7, 5, 2];
-    echartsFu1("#echarts1", data1_1, data1_2);
+    echartsFu1("#echarts1", data1_1, data1_2, ["#11A480"]);
 
     // 第二个折线 echarts----------------------------
     const data2_1 = [
@@ -171,7 +174,7 @@ function Hot() {
       "2023-2-14",
     ];
     const data2_2 = [5, 6, 8, 11, 0, 5, 2];
-    echartsFu1("#echarts2", data2_1, data2_2);
+    echartsFu1("#echarts2", data2_1, data2_2, ["#00BBF6"]);
 
     // 第三个折线 echarts----------------------------
     const data3_1 = [
@@ -184,7 +187,7 @@ function Hot() {
       "2023-2-14",
     ];
     const data3_2 = [0, 5, 6, 8, 11, 20, 1];
-    echartsFu1("#echarts3", data3_1, data3_2);
+    echartsFu1("#echarts3", data3_1, data3_2, ["#F97C7C"]);
 
     // 第一个饼图
     const data4 = [
@@ -282,7 +285,7 @@ function Hot() {
             {/* 线上访客盒子 */}
             <div className="topBoxL1">
               <div className="hotTit">
-                线上访客 58
+                线上访客&nbsp;&nbsp;<span style={{ color: "#11A480" }}>58</span>
                 <Tooltip title="近14个自然日的访客数；一天内同一访客多次访问记为1">
                   <div className="inco">
                     <ExclamationCircleFilled />
@@ -297,7 +300,8 @@ function Hot() {
               {/* 万物墙热度盒子 */}
               <div className="topBoxL2L">
                 <div className="hotTit">
-                  万物墙热度 264
+                  万物墙热度&nbsp;&nbsp;
+                  <span style={{ color: "#00BBF6" }}>264</span>
                   <Tooltip title="查看场景/文物/视频时，记为1点热度">
                     <div className="inco">
                       <ExclamationCircleFilled />
@@ -311,7 +315,8 @@ function Hot() {
               {/* 穿戴设备热度盒子 */}
               <div className="topBoxL2R">
                 <div className="hotTit">
-                  穿戴设备热度 14
+                  穿戴设备热度&nbsp;&nbsp;
+                  <span style={{ color: "#F97C7C" }}>14</span>
                   <Tooltip title="穿戴设备每次启动，记为1点热度">
                     <div className="inco">
                       <ExclamationCircleFilled />
@@ -398,7 +403,23 @@ function Hot() {
                       {likeData.map((v, i) => (
                         <div className="downBoxLMain2LRow" key={i}>
                           <div className="downBoxLMain2LRow1" title={v.name}>
-                            {i + 1}. {v.name}
+                            <div
+                              className={classNames(
+                                "num",
+                                i === 0
+                                  ? "num1"
+                                  : i === 1
+                                  ? "num2"
+                                  : i === 2
+                                  ? "num3"
+                                  : i === 3
+                                  ? "num4"
+                                  : "num5"
+                              )}
+                            >
+                              {i + 1}
+                            </div>
+                            <div className="txt">{v.name}</div>
                           </div>
                           <div className="downBoxLMain2LRow2">{v.pcs}</div>
                         </div>
@@ -429,7 +450,23 @@ function Hot() {
                       {likeData.map((v, i) => (
                         <div className="downBoxLMain2LRow" key={i}>
                           <div className="downBoxLMain2LRow1" title={v.name}>
-                            {i + 1}. {v.name}
+                            <div
+                              className={classNames(
+                                "num",
+                                i === 0
+                                  ? "num1"
+                                  : i === 1
+                                  ? "num2"
+                                  : i === 2
+                                  ? "num3"
+                                  : i === 3
+                                  ? "num4"
+                                  : "num5"
+                              )}
+                            >
+                              {i + 1}
+                            </div>
+                            <div className="txt">{v.name}</div>
                           </div>
                           <div className="downBoxLMain2LRow2">{v.pcs}</div>
                         </div>

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

@@ -30,30 +30,20 @@
             margin-bottom: 10px;
             font-size: 16px;
             font-weight: 700;
+            opacity: .7;
 
             &>.txt {
               margin-left: 15px;
-              opacity: .7;
-            }
-            .tabImg2{
-              display: none;
             }
           }
 
           .activeRow1 {
-            &>.txt {
-              opacity: 1;
-            }
-            .tabImg1{
-              display: none;
-            }
-            .tabImg2{
-              display: block;
-            }
+            opacity: 1;
+
           }
 
           .mainBoxL2Row {
-            width: 160px;
+            width: 175px;
             opacity: .7;
             padding-left: 42px;
             cursor: pointer;
@@ -69,7 +59,7 @@
               width: 26px;
               position: absolute;
               z-index: 10;
-              right: 10px;
+              right: 20px;
               top: 50%;
               transform: translateY(-50%);
               border-radius: 50%;
@@ -85,7 +75,7 @@
             &:hover {
               background-color: var(--themeColor);
               opacity: 1;
-              color: black;
+              color: var(--themeColor2);
 
               .rowTip {
                 background-color: var(--themeColor2);
@@ -99,7 +89,7 @@
             pointer-events: none;
             background-color: var(--themeColor);
             opacity: 1;
-            color: black;
+            color: var(--themeColor2);
 
             .rowTip {
               background-color: var(--themeColor2);

houtai/src/pages/Layout/index.tsx

@@ -19,9 +19,6 @@ import encodeStr from "@/utils/pass";
 import { getDictListAPI, passWordEditAPI } from "@/store/action/login";
 import { getTokenInfo, removeTokenInfo } from "@/utils/storage";
 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 inco1Ac from "@/assets/img/inco1Ac.png";
 import inco2Ac from "@/assets/img/inco2Ac.png";
 import inco3Ac from "@/assets/img/inco3Ac.png";
@@ -33,7 +30,6 @@ function Layout() {
 
   type ListTempType = {
     title: string;
-    inco: any;
     incoAc: any;
     son: {
       id: number;
@@ -51,7 +47,6 @@ function Layout() {
     const arr: ListTempType = [
       {
         title: "数据统计",
-        inco: inco1,
         incoAc: inco1Ac,
         son: [
           {
@@ -65,7 +60,6 @@ function Layout() {
       },
       {
         title: "内容管理",
-        inco: inco2,
         incoAc: inco2Ac,
         son: [
           {
@@ -124,7 +118,6 @@ function Layout() {
     if (userInfo.isAdmin === 1) {
       listTemp.push({
         title: "系统管理",
-        inco: inco3,
         incoAc: inco3Ac,
         son: [
           {
@@ -278,8 +271,7 @@ function Layout() {
                   row1ActiveFu(v1.title) ? "activeRow1" : ""
                 )}
               >
-                <img className="tabImg1" src={v1.inco} alt="" />
-                <img className="tabImg2" src={v1.incoAc} alt="" />
+                <img src={v1.incoAc} alt="" />
                 <div className="txt">{v1.title}</div>
               </div>
               {v1.son.map((v2) => (