提交

.eslintrc.json

@@ -1,16 +1,20 @@
 {
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "extends": "eslint:recommended",
-    "parserOptions": {
-        "ecmaVersion": "latest",
-        "sourceType": "module",
-        "ecmaFeatures":{
-            "jsx": true
-        }
-    },
-    "rules": {
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "plugins": ["solid"],
+  "extends": ["eslint:recommended", "plugin:solid/recommended"],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
     }
+  },
+  "rules": {
+    "solid/reactivity": "warn",
+    "solid/no-destructure": "warn",
+    "solid/jsx-no-undef": "error"
+  }
 }

package.json

@@ -10,7 +10,6 @@
   "license": "MIT",
   "devDependencies": {
     "eslint": "^8.15.0",
-    "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-solid": "^0.4.7",
     "vite": "^2.5.7",
     "vite-plugin-eslint": "^1.6.0",

src/api/bigScreen.js

@@ -1,6 +1,5 @@
 import { Net } from "../utils/require";
 import config from "../base/config";
-import utils from "../utils/index";
 
 export function getGeography(data) {
   return Net({

src/components/bacgroundMap.jsx

@@ -1,20 +1,12 @@
-import { onMount, mergeProps, createSignal } from "solid-js"
+import { onMount } from "solid-js"
 import { Scene } from '@antv/l7';
 import { GaodeMap } from '@antv/l7-maps';
-import { useLocation } from "solid-app-router";
 
 import config from "../base/config"
 
 import "./bacgroundMap.css"
 
-import baseText from "../base/baseText"
-
-function itemHead(props) {
-    const pathname = useLocation().pathname;
-    let dis = false;
-    baseText.bottoms.map(v => {
-        dis = v.path === pathname ? v.BG : false;
-    })
+function itemHead() {
     onMount(() => {
         new Scene({
             id: 'map',

src/components/itemHead.jsx

@@ -1,17 +1,16 @@
 import { Show } from 'solid-js';
-import config from "../base/config"
 
 import "./itemHead.css"
 
 function itemHead(props) {
-    return <div className="subject">
-        <div className="subjectTitle">
-            <span className="text">{props.title}</span>
+    return <div class="subject">
+        <div class="subjectTitle">
+            <span class="text">{props.title}</span>
             <Show when={!props.noimg}>
-                <img src="/src/assets/img/hadIcon.png" className="subjectIcon" />
+                <img src="/src/assets/img/hadIcon.png" class="subjectIcon" />
             </Show>
         </div>
-        <div className="subjectSubTitle">{props.subtitle}</div>
+        <div class="subjectSubTitle">{props.subtitle}</div>
     </div>
 }
 

src/components/laydate.jsx

@@ -7,7 +7,7 @@ import "./laydate.css"
 function laydateRender(props) {
     const time = utils.getTime();
     onMount(() => {
-        laydate.render({
+        window.laydate.render({
             elem: "#" + props.id,
             range: true,
             format: "yyyy/MM/dd",
@@ -19,9 +19,9 @@ function laydateRender(props) {
             theme: '#1db7b6'
         });
     })
-    return <div className="back">
-        <i className="icon iconfont">&#xe637;</i>
-        <input className="layui-input" style={'width:' + props.width} id={props.id} type="text" placeholder="开始日期 - 结束时间" />
+    return <div class="back">
+        <i class="icon iconfont">&#xe637;</i>
+        <input class="layui-input" style={'width:' + props.width} id={props.id} type="text" placeholder="开始日期 - 结束时间" />
     </div>
 }
 

src/components/selsect.jsx

@@ -1,27 +1,26 @@
-import { Dynamic } from "solid-js/web";
-import { mergeProps, Show, createSignal } from "solid-js";
+import { mergeProps, createSignal, For } from "solid-js";
 
-import config from "../base/config"
+// import config from "../base/config"
 
 
 import "./select.css"
 
-function selectOption(e) {
-    console.log(e.target.getAttribute('code'))
-    setActSelect(e.target.getAttribute('code'))
-}
 
 function table(props) {
     const parentProps = mergeProps(props);
     const [actSelect, setActSelect] = createSignal(0);
+    function selectOption(e) {
+        console.log(e.target.getAttribute('code'))
+        setActSelect(e.target.getAttribute('code'))
+    }
     // 监听parops更新
-    return <div className="local_select">
-        <div className="title_select">
-            <i className="icon_select iconfont icon-arrow-down"></i>
+    return <div class="local_select">
+        <div class="title_select">
+            <i class="icon_select iconfont icon-arrow-down"></i>
             {parentProps.title}
         </div>
         <For each={parentProps.list}>
-            {(li, i) => (
+            {li => (
                 <div classList={{ 'option_select': true, 'option_act_select': li.code == actSelect() }} code={li.code} onClick={selectOption} >{li.name}</div>
             )}
         </For>

src/components/table.jsx

@@ -1,7 +1,4 @@
-import { Dynamic } from "solid-js/web";
-import { mergeProps, Show } from "solid-js";
-
-import config from "../base/config"
+import { mergeProps, Show, For } from "solid-js";
 
 import TableItem from "./tableItem";
 
@@ -9,15 +6,15 @@ import "./table.css"
 
 function table(props) {
     const parentProps = mergeProps(props);
-    return <div className={"table " + (props.localclass || "") }>
+    return <div class={"table " + (props.localclass || "") }>
         <Show when={parentProps.head && parentProps.head.length}>
-            <div className="head">
+            <div class="head">
                 <TableItem list={parentProps.head || []} />
             </div>
         </Show>
         <Show when={parentProps.body && parentProps.body.length}>
-            <div className="bodyB">
-                <div className="body">
+            <div class="bodyB">
+                <div class="body">
                     <For each={parentProps.body}>
                         {(b) => (
                             <TableItem showColor={b.color || "rgb(215 1 1 / 60%)"} list={b.col || []} />

src/components/tableItem.jsx

@@ -1,20 +1,19 @@
 import { Dynamic } from "solid-js/web";
-import { mergeProps } from "solid-js";
-import config from "../base/config"
+import { mergeProps, For } from "solid-js";
 
 import "./tableItem.css"
 
 
 function Scroll(props) {
     const parentProps = mergeProps(props);
-    return <div className={'colItem col' + parentProps.flex} style={parentProps.style}>
+    return <div class={'colItem col' + parentProps.flex} style={parentProps.style}>
         <div class="j">{parentProps.text} </div>
         <marquee behavior="scroll">{props.text} </marquee>
     </div>
 }
 function Text(props) {
     const parentProps = mergeProps(props);
-    return <div className={'colItem col' + parentProps.flex} style={parentProps.style}>
+    return <div class={'colItem col' + parentProps.flex} style={parentProps.style}>
         {props.text}
     </div>
 }
@@ -26,7 +25,7 @@ const objComponents = {
 
 function tableItem(props) {
     const parentProps = mergeProps(props);
-    return <div className="tableItem row" style={'box-shadow: 0 4px 3px 0 ' + props.showColor}>
+    return <div class="tableItem row" style={'box-shadow: 0 4px 3px 0 ' + props.showColor}>
         <For each={parentProps.list}>
             {li => (
                 <Dynamic text={li.text} flex={li.flex || 1} component={objComponents[li.type || 'Text']} />

src/components/titleStyle.jsx

@@ -26,16 +26,16 @@ function titleStyle() {
     onCleanup(()=>{
         animationID >= 0 && window.cancelrequestAnimFrame(animationID);
     })
-    return <div className="headTitle">
-        <div className="title">
-            <div className="bgUp"></div>
-            <div className="bgDown"></div>
-            <div className="textTop">
+    return <div class="headTitle">
+        <div class="title">
+            <div class="bgUp"></div>
+            <div class="bgDown"></div>
+            <div class="textTop">
                 舆情态势感知
-                <span style="font-size: 0.2rem;padding-left: 1em">陕西广电融媒体集团</span>
+                <span style={{"font-size":"0.2rem","padding-left":"1em"}}>陕西广电融媒体集团</span>
             </div>
-            <div className="textBottom">
-                <i className="iconfont icon-shijian"></i>
+            <div class="textBottom">
+                <i class="iconfont icon-shijian"></i>
                 <span>
                     &nbsp;
                     {timeDate().year}-{timeDate().month}-{timeDate().day}

src/components/water.jsx

@@ -1,14 +1,12 @@
 import { mergeProps } from "solid-js";
-import utils from "../utils/index"
 
 import "./water.css"
 
 function water(props) {
     const parentProps = mergeProps(props);
-    console.log(Math.ceil(parentProps.percentage / 100 * 80))
-    return <div id="waterBox" className="waterBox">
+    return <div id="waterBox" class="waterBox">
         <div class="wave">
-            <div className="wave-text">
+            <div class="wave-text">
                 {parentProps.text}
                 <p>{parentProps.percentage}%</p>
             </div>

src/pages/Fifth.jsx

@@ -499,19 +499,19 @@ function fifth() {
     }
   ]
   return (
-    <div className="page row FifthLayout">
-      <div className="col1">
+    <div class="page row FifthLayout">
+      <div class="col1">
         <ItemHead title="专题监测信息" subtitle="Thematic monitoring information" />
         <Table head={tHead} body={tBody} />
       </div>
-      <div className="col1">
-        <div className="height50" ref={WordEle}>
+      <div class="col1">
+        <div class="height50" ref={WordEle}>
           <ItemHead title="倾向趋势" subtitle="Tendency Trend" />
-          <div className="chart3" id="Trend"></div>
+          <div class="chart3" id="Trend"></div>
         </div>
-        <div className="height50">
+        <div class="height50">
           <ItemHead title="聚焦媒体榜" subtitle="Key point propogation node" />
-          <div className="chart" id="rect"></div>
+          <div class="chart" id="rect"></div>
         </div>
       </div>
     </div>

src/pages/First.jsx

@@ -1,11 +1,11 @@
-import { onMount, createSignal } from "solid-js"
+import { onMount, createSignal, For } from "solid-js"
 import { Scene, Marker, Popup } from '@antv/l7';
-import { ProvinceLayer } from '@antv/l7-district';
+// import { ProvinceLayer } from '@antv/l7-district';
 import { GaodeMap } from '@antv/l7-maps';
 
 import Laydate from "../components/laydate"
 
-import config from "../base/config"
+// import config from "../base/config"
 
 import "../assets/style/first.css"
 
@@ -92,15 +92,15 @@ function first() {
     ]
     console.log("---")
     return (
-        <div className="page firstStyle">
-            <div className="firstTitle">
-                <div className="T">
-                    <div className="STitle">舆论场态势实时感知</div>
+        <div class="page firstStyle">
+            <div class="firstTitle">
+                <div class="T">
+                    <div class="STitle">舆论场态势实时感知</div>
                 </div>
-                <div className="B">
-                    <div className="row btnGroup">
+                <div class="B">
+                    <div class="row btnGroup">
                         <For each={['全部热点', '行业热点']}>{(v, i) =>
-                            <div className={'col1 button ' + (tab() === i() ? 'select' : '')} tab={i()} onClick={e => setTab(i())}>{v}</div>
+                            <div class={'col1 button ' + (tab() === i() ? 'select' : '')} tab={i()} onClick={() => setTab(i())}>{v}</div>
                         }</For>
                     </div>
                     <Laydate width="13em" id="laydate" />

src/pages/Fourth.jsx

@@ -174,13 +174,13 @@ function TrendChart() {
 function WordsChart() {
   WordCanvas.width = WordEle.offsetWidth
   WordCanvas.height = WordEle.offsetHeight - 110
-  TagCanvas.Start("wordCloud", "tags", {
+  window.TagCanvas.Start("wordCloud", "tags", {
     textColour: "#3AEDE4",
     outlineColour: "rgba(0,0,0,0)",
     maxSpeed: 0.003,
     lock: "y",
   });
-  TagCanvas.SetSpeed("wordCloud", [3, 3]);
+  window.TagCanvas.SetSpeed("wordCloud", [3, 3]);
 }
 
 
@@ -209,12 +209,12 @@ function Fourth() {
     }
   ]
   return (
-    <div className="page">
-      <div className="row FourthLayout height50">
-        <div className="col4" style="padding: 0 .5em">
-          <div className="timeSub">
+    <div class="page">
+      <div class="row FourthLayout height50">
+        <div class="col4" style={{"padding":"0 .5em"}}>
+          <div class="timeSub">
             预警运行时间：
-            <div className="numberFonts">
+            <div class="numberFonts">
               <span>{timeDate().year[2]}</span>
               <span>{timeDate().year[3]}</span>
               年
@@ -225,7 +225,7 @@ function Fourth() {
               <span>{timeDate().day[1]}</span>
               日
             </div>
-            <div className="numberFonts">
+            <div class="numberFonts">
               <span>{timeDate().hour[0]}</span>
               <span>{timeDate().hour[1]}</span>
               时
@@ -237,64 +237,64 @@ function Fourth() {
               秒
             </div>
           </div>
-          <div className="dataTotal" style={'height: ' + itemHeight() + 'px'}>
-            <img style="float: right" src="/src/assets/img/border_right.png" height="100%" />
-            <div className="error">
+          <div class="dataTotal" style={'height: ' + itemHeight() + 'px'}>
+            <img style={{"float":"right"}} src="/src/assets/img/border_right.png" height="100%" />
+            <div class="error">
               <div>
-                <img src="/src/assets/img/all_error.png" style="width:7em" />
+                <img src="/src/assets/img/all_error.png" style={{"width":"7em"}} />
                 <div>全部预警</div>
               </div>
               <div>
-                <img src="/src/assets/img/public_error.png" style="width:7em" />
+                <img src="/src/assets/img/public_error.png" style={{"width":"7em"}} />
                 <div>公共预警</div>
               </div>
             </div>
-            <img src="/src/assets/img/link.gif" style="float: right;width: 35%;height: 80%;margin-top: 2em" />
-            <div className="data" style="width: calc(75% - 1.68rem) ;height: 100%">
-              <div className="allData">
+            <img src="/src/assets/img/link.gif" style={{"float":"right","width":"35%","height":"80%","margin-top":"2em"}} />
+            <div class="data" style={{"width":"calc(75% - 1.68rem)","height":"100%"}}>
+              <div class="allData">
                 <div>监测信息总量</div>
                 <img src="/src/assets/img/arrow_right.png" class="arrow" />
                 <p>445349</p>
               </div>
-              <div className="filterData">
+              <div class="filterData">
                 <div>排除信息量</div>
                 <img src="/src/assets/img/arrow_right.png" class="arrow" />
                 <p>444393</p>
               </div>
-              <div className="proData">
+              <div class="proData">
                 <div>排除信息占比</div>
                 <img src="/src/assets/img/arrow_right.png" class="arrow arrow_left" />
                 <p>99.79%</p>
               </div>
-              <div style="height: 180px">
-              <div className="img">
-                <img src="/src/assets/img/w1.png" style="top: 16px" alt="" />
-                <img src="/src/assets/img/w2.png" style="top: 106px" alt="" />
+              <div style={{"height":"180px"}}>
+              <div class="img">
+                <img src="/src/assets/img/w1.png" style={{"top":"16px"}} alt="" />
+                <img src="/src/assets/img/w2.png" style={{"top":"106px"}} alt="" />
               </div>
               </div>
               <Water percentage={0.21} text="舆情预警" />
             </div>
           </div>
         </div>
-        <div className="col3">
+        <div class="col3">
           <ItemHead title="预警信息" subtitle="Warning Information" />
           <Table head={tHead} body={tBody} />
         </div>
       </div>
-      <div className="row FourthLayout height50">
-        <div className="col1">
+      <div class="row FourthLayout height50">
+        <div class="col1">
           <ItemHead title="预警分类" subtitle="Warning Classification" />
-          <div className="chart3" id="Classification"></div>
+          <div class="chart3" id="Classification"></div>
         </div>
-        <div className="col1">
+        <div class="col1">
           <ItemHead title="预警趋势" subtitle="Warning Trend" />
-          <div className="chart3" id="Trend"></div>
+          <div class="chart3" id="Trend"></div>
         </div>
-        <div className="col1" ref={WordEle}>
+        <div class="col1" ref={WordEle}>
           <ItemHead title="高频热词" subtitle="High-frequency words" />
-          <div className="chart3 heightWord">
+          <div class="chart3 heightWord">
             <canvas id="wordCloud" ref={WordCanvas}></canvas>
-            <div id="tags" class="tags" style="display: none">
+            <div id="tags" class="tags" style={{"display":"none"}}>
               <ul>
                 <li>
                   <a href="http://www.google.com" target="_blank">Google</a>

src/pages/Second.jsx

@@ -1,11 +1,11 @@
-import { onMount, createSignal } from "solid-js"
+import { onMount, createSignal, For } from "solid-js"
 import { Scene, Marker, Popup } from '@antv/l7';
-import { ProvinceLayer } from '@antv/l7-district';
+// import { ProvinceLayer } from '@antv/l7-district';
 import { GaodeMap } from '@antv/l7-maps';
 
 import Laydate from "../components/laydate"
 
-import config from "../base/config"
+// import config from "../base/config"
 
 import "../assets/style/Second.css"
 
@@ -91,15 +91,15 @@ function second() {
         }
     ]
     return (
-        <div className="page SecondStyle">
-            <div className="SecondTitle">
-                <div className="T">
-                    <div className="STitle">舆论场态势实时感知</div>
+        <div class="page SecondStyle">
+            <div class="SecondTitle">
+                <div class="T">
+                    <div class="STitle">舆论场态势实时感知</div>
                 </div>
-                <div className="B">
-                    <div className="row btnGroup">
+                <div class="B">
+                    <div class="row btnGroup">
                         <For each={['全部热点', '行业热点']}>{(v, i) =>
-                            <div className={'col1 button ' + (tab() === i() ? 'select' : '')} tab={i()} onClick={e => setTab(i())}>{v}</div>
+                            <div class={'col1 button ' + (tab() === i() ? 'select' : '')} tab={i()} onClick={() => setTab(i())}>{v}</div>
                         }</For>
                     </div>
                     <Laydate width="13em" id="laydate" />

src/pages/Third.jsx

@@ -65,11 +65,6 @@ function TrendChart() {
       fill: "#ddd"
     },
     customItems: (items) => {
-      const keys = {
-        value: "非负面",
-        nagetiveValue: "负面",
-        value: "非负面",
-      }
       for (let i = 0; i < items.length; i++) {
         const v = items[i];
         v.name = v.name === 'value' ? '非负面' : '负面'
@@ -94,48 +89,48 @@ function TrendChart() {
 }
 
 function HistoryListComponent(props) {
-  return <div className="historylist">
-    <div className="row">
-      <div className="col5">
-        <div className="listName">
-          <span className={'sortNum ' + (props.i < 4 ? 'sortNumBG' : '')}>{props.i}</span>
+  return <div class="historylist">
+    <div class="row">
+      <div class="col5">
+        <div class="listName">
+          <span class={'sortNum ' + (props.i < 4 ? 'sortNumBG' : '')}>{props.i}</span>
           {props.item.title}
         </div>
       </div>
-      <div className="col2 listName" style="text-align: right">
-        <Switch fallback={<div>风险度：<span style="color: green">{props.item.risk}</span></div>}>
+      <div class="col2 listName" style={{"text-align":"right"}}>
+        <Switch fallback={<div>风险度：<span style={{"color":"green"}}>{props.item.risk}</span></div>}>
           <Match when={props.item.risk > 40}>
-            风险度：<span style="color: red">{props.item.risk}</span>
+            风险度：<span style={{"color":"red"}}>{props.item.risk}</span>
           </Match>
         </Switch>
       </div>
     </div>
-    <div style="text-align: right;padding-right: 5px;font-size: .1rem">
+    <div style={{"text-align":"right","padding-right":"5px","font-size":".1rem"}}>
       {props.item.date}
-      <img src="/src/assets/img/zz.png" style="width:2.5em;margin-left: 5px" alt="" />
+      <img src="/src/assets/img/zz.png" style={{"width":"2.5em","margin-left":"5px"}} alt="" />
     </div>
   </div>
 }
 
 function RealTimeListComponent(props) {
-  return <div className="row">
-    <div className="col1 realTime">
-      <div className="text listName">{props.item.date.replace(/\-/g, '/')}</div>
-      <div className="circular"></div>
+  return <div class="row">
+    <div class="col1 realTime">
+      <div class="text listName">{props.item.date.replace(/-/g, '/')}</div>
+      <div class="circular"></div>
     </div>
-    <div className="col1 historylist border-right">
-      <div className="row">
-        <div className="col5">
-          <div className="listName">
+    <div class="col1 historylist border-right">
+      <div class="row">
+        <div class="col5">
+          <div class="listName">
             {props.item.title}
           </div>
         </div>
       </div>
-      <div style="text-align: right;padding-right: 5px;font-size: .1rem">
-        <div className="col2 listName" style="text-align: right">
-          <Switch fallback={<div>风险度：<span style="color: green">{props.item.risk}</span></div>}>
+      <div style={{"text-align":"right","padding-right":"5px","font-size":".1rem"}}>
+        <div class="col2 listName" style={{"text-align":"right"}}>
+          <Switch fallback={<div>风险度：<span style={{"color":"green"}}>{props.item.risk}</span></div>}>
             <Match when={props.item.risk > 40}>
-              风险度：<span style="color: red">{props.item.risk}</span>
+              风险度：<span style={{"color":"red"}}>{props.item.risk}</span>
             </Match>
           </Switch>
         </div>
@@ -144,33 +139,33 @@ function RealTimeListComponent(props) {
   </div>
 }
 
-function FuncClassItemComponent(props) {
-  return <div className="funcClassItem">
-    <div className="row">
-      <div className="col4">十四运</div>
-      <div className="col1">2</div>
+function FuncClassItemComponent() {
+  return <div class="funcClassItem">
+    <div class="row">
+      <div class="col4">十四运</div>
+      <div class="col1">2</div>
     </div>
-    <div className="row">
-      <div className="col1">
+    <div class="row">
+      <div class="col1">
         0 <p>风险度</p>
       </div>
-      <div className="col2">
-        <div className="row">
-          <div className="col1">0 <p>重视度</p></div>
-          <div className="col1">0 <p>敏感度</p></div>
+      <div class="col2">
+        <div class="row">
+          <div class="col1">0 <p>重视度</p></div>
+          <div class="col1">0 <p>敏感度</p></div>
         </div>
-        <div className="row">
-          <div className="col1">0 <p>传播度</p></div>
-          <div className="col1">0 <p>关注度</p></div>
+        <div class="row">
+          <div class="col1">0 <p>传播度</p></div>
+          <div class="col1">0 <p>关注度</p></div>
         </div>
       </div>
     </div>
   </div>
 }
 
-function SwiperFuncClassComponent(props) {
+function SwiperFuncClassComponent() {
   onMount(() => {
-    new Swiper('.swiper-container2', {
+    new window.Swiper('.swiper-container2', {
       pagination: '.swiper-pagination',
       slidesPerView: 3,
       slidesPerColumn: 2,
@@ -179,7 +174,7 @@ function SwiperFuncClassComponent(props) {
     });
   })
 
-  return <div className="chart3 swiper-container swiper-container2">
+  return <div class="chart3 swiper-container swiper-container2">
     <div class="swiper-wrapper">
       <div class="swiper-slide">
         <FuncClassItemComponent />
@@ -213,10 +208,9 @@ function SwiperFuncClassComponent(props) {
 
 function TrackFunc() {
   onMount(() => {
-    new Swiper(".swiper-container1", {
-      effect: "cards",
-      pagination: '.swiper-pagination',
+    new window.Swiper(".swiper-container1", {
       effect: "coverflow",
+      pagination: '.swiper-pagination',
       grabCursor: true,
       centeredSlides: true,
       slidesPerView: "auto",
@@ -230,7 +224,7 @@ function TrackFunc() {
     });
   })
 
-  return <div className="chart3 swiper-container swiper-container1">
+  return <div class="chart3 swiper-container swiper-container1">
     <div class="swiper-wrapper">
       <div class="swiper-slide">
         1
@@ -288,20 +282,20 @@ function third() {
   ]
 
   return (
-    <div className="page">
-      <div className="row height50 ThirdLayourt">
-        <div className="col2">
+    <div class="page">
+      <div class="row height50 ThirdLayourt">
+        <div class="col2">
           <ItemHead title="追踪事件" subtitle="Tracking Event" />
           <TrackFunc />
         </div>
-        <div className="col3" ref={WordEle}>
-          <div className="chart3" id="Trend"></div>
+        <div class="col3" ref={WordEle}>
+          <div class="chart3" id="Trend"></div>
         </div>
       </div>
-      <div className="row height50 ThirdLayourt">
-        <div className="col1">
+      <div class="row height50 ThirdLayourt">
+        <div class="col1">
           <ItemHead title="实时预警" subtitle="RealTime Warning" />
-          <div className="chart3" style="    overflow-y: scroll;height: calc(100% - 64px)">
+          <div class="chart3" style={{"overflow-y":"scroll","height":"calc(100% - 64px)"}}>
             <For each={historyData}>
               {(item, i) => (
                 <RealTimeListComponent item={item} i={i() + 1} />
@@ -309,12 +303,12 @@ function third() {
             </For>
           </div>
         </div>
-        <div className="col1 layout">
-          <div className="datetime">
+        <div class="col1 layout">
+          <div class="datetime">
             <Laydate width="13em" id="laydate" />
           </div>
           <ItemHead title="历史事件榜" noimg={true} subtitle="History EventList" />
-          <div className="chart3" style="    overflow-y: scroll;height: calc(100% - 64px)">
+          <div class="chart3" style={{"overflow-y":"scroll","height":"calc(100% - 64px)"}}>
             <For each={historyData}>
               {(item, i) => (
                 <HistoryListComponent item={item} i={i() + 1} />
@@ -322,8 +316,8 @@ function third() {
             </For>
           </div>
         </div>
-        <div className="col3 layout">
-          <div className="datetime">
+        <div class="col3 layout">
+          <div class="datetime">
             <Selsect title="123" list={list} />
             <Selsect title="123" list={list} />
           </div>

src/pages/bigScreen/Home.jsx

@@ -1,4 +1,4 @@
-import { onMount, createSignal, Show } from "solid-js";
+import { onMount, createSignal, Show, For } from "solid-js";
 import { createStore } from "solid-js/store";
 import dayjs from "dayjs"
 
@@ -17,13 +17,13 @@ import Activity from "./components/Activity";
 import Map from "./components/Map-l7";
 // import Map from "./components/Map";
 import NewMedia from "./components/NewMedia";
-import NewMediaTrend from "./components/NewMediaTrend" 
+import NewMediaTrend from "./components/NewMediaTrend"
 
 import { getWeather } from "../../api/bigScreen"
 const [TimeDate, setTimeDate] = createSignal("");
 const [eHeight, seteHeight] = createSignal(0);
 const [Weather, setWeather] = createSignal("请稍候...");
-const [Geography, setGeography] = createSignal({
+const [Geography] = createSignal({
     latitude: -190,
     longitude: -190
 })
@@ -202,7 +202,7 @@ function BigScreenHome() {
         setTimeDate(dayjs().format('YYYY-MM-DD HH:mm:ss'));
         seteHeight(Math.floor($ele.offsetWidth / 16 * 9) + 70);
         time = dingshi();
-        
+
         getWeather().then(r => setTQ(r.data))
         getData().then(r => {
             if (r.code != 0) return
@@ -211,7 +211,7 @@ function BigScreenHome() {
                 const v = JSON.parse(JSON.stringify(HeadTitle()[i]));
                 if (v.title === '重大活动传播总量') v.value = r.data.activity_total.data
                 if (v.title === "新媒体月度传播力") v.value = r.data.media_month_play.data
-                if (v.title === "传统媒体-昨日收视时长") v.value = (r.data.media_overview.data.timeCount/60).toFixed(0)
+                if (v.title === "传统媒体-昨日收视时长") v.value = (r.data.media_overview.data.timeCount / 60).toFixed(0)
                 if (v.title === "传统媒体-日收视次数") v.value = r.data.media_overview.data.watchCount
                 if (v.title === "传统媒体-日活跃用户") v.value = r.data.media_overview.data.activeUser
                 if (v.title === "传统媒体-覆盖终端") v.value = r.data.media_overview.data.totalUser
@@ -242,23 +242,23 @@ function BigScreenHome() {
         // })
     })
     return (
-        <div className="home">
-            <div className="homeHeader">
-                <div className="sz">{TimeDate()}</div>
-                <div className="tq">{Weather()}</div>
+        <div class="home">
+            <div class="homeHeader">
+                <div class="sz">{TimeDate()}</div>
+                <div class="tq">{Weather()}</div>
                 <div class="headTitle">陕西广电融媒体集团大数据平台</div>
                 {/* <div className="tq">
                     <iframe style="height: 5em; " src="//i.tianqi.com/index.php?c=code&id=10&color=%23C6C6C6&icon=1&site=16" frameborder="0"></iframe>
                 </div> */}
             </div>
-            <div className="body">
-                <div style="display: flex;width: 100%;">
-                    <For each={HeadTitle()}>{(title, i) =>
-                        <div className="itemHeader">
-                            <div className="itemMain">
-                                <div className="icons">
+            <div class="body">
+                <div style={{ "display": "flex", "width": "100%" }}>
+                    <For each={HeadTitle()}>{title =>
+                        <div class="itemHeader">
+                            <div class="itemMain">
+                                <div class="icons">
                                     <svg t="1650243218920" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
-                                        <For each={title.path}>{(dItem, o) =>
+                                        <For each={title.path}>{dItem =>
                                             <path d={dItem.d} fill={dItem.color}></path>
                                         }</For>
                                     </svg>
@@ -273,8 +273,8 @@ function BigScreenHome() {
                                         <path d="M229.888 942.08L51.712 394.24l466.432-338.944L984.576 394.24l-178.176 547.84z" fill="rgba(3, 76, 117, 1)" ></path>
                                     </svg>
                                 </div>
-                                <div className="text">
-                                    <span className="textNum">{utils.formatNumber(title.value, 2)}</span>
+                                <div class="text">
+                                    <span class="textNum">{utils.formatNumber(title.value, 2)}</span>
                                     <br />
                                     {title.title}
                                 </div>
@@ -283,9 +283,9 @@ function BigScreenHome() {
                     }
                     </For>
                 </div>
-                <div className="main">
-                    <div ref={$ele} className="mainbody left">
-                        <div style="margin-bottom: 6px">
+                <div class="main">
+                    <div ref={$ele} class="mainbody left">
+                        <div style={{ "margin-bottom": "6px" }}>
                             <Show when={eHeight() > 0 && oriData.watch_rank && oriData.watch_rank.name} >
                                 <ListeningRate
                                     title={oriData.watch_rank.name}
@@ -296,7 +296,7 @@ function BigScreenHome() {
                             </Show>
                             <Show when={eHeight() > 0 && oriData.activity_spread && oriData.activity_spread.name}>
                                 <Activity
-                                    styleCss="margin-left: 6px;"
+                                    styleCss={{ marginLeft: '6px' }}
                                     title={oriData.activity_spread.name}
                                     list={oriData.activity_spread.data}
                                     width={Math.floor($ele.offsetWidth / 2 - 10)}
@@ -305,7 +305,7 @@ function BigScreenHome() {
                             </Show>
                         </div>
                         <Show when={eHeight() > 0 && oriData.schedule_rank && oriData.schedule_rank.name} >
-                            <div style="margin-bottom: 6px">
+                            <div style={{ "margin-bottom": "6px" }}>
                                 <Column
                                     title={oriData.schedule_rank.name}
                                     list={oriData.schedule_rank.data}
@@ -323,9 +323,9 @@ function BigScreenHome() {
                             />
                         </Show>
                     </div>
-                    <div className="mainbody center">
+                    <div class="mainbody center">
                         {/* <Show when={eHeight() > 0 && Geography().longitude !== -190} > */}
-                        <div style="margin-bottom: 6px">
+                        <div style={{ "margin-bottom": "6px" }}>
                             <Show when={eHeight() > 0 && oriData.cm_area && oriData.cm_area.name}>
                                 <Map
                                     title={oriData.cm_area.name}
@@ -337,17 +337,17 @@ function BigScreenHome() {
                                 />
                             </Show>
                         </div>
-                        <div className="flex">
-                            <For each={proTv()} >{(item, i) => <div className="flexItem">
-                                <p className="textNum">{utils.formatNumber(item.value, 2)}%</p>
+                        <div class="flex">
+                            <For each={proTv()} >{item => <div class="flexItem">
+                                <p class="textNum">{utils.formatNumber(item.value, 2)}%</p>
                                 {item.text}
                             </div>
                             }</For>
                         </div>
                     </div>
-                    <div className="mainbody right">
+                    <div class="mainbody right">
                         <Show when={eHeight() > 0 && oriData.platform_trend && oriData.platform_trend.name}>
-                            <div style="margin-bottom: 6px">
+                            <div style={{ "margin-bottom": "6px" }}>
                                 <SelfPlatform
                                     title={oriData.platform_trend.name}
                                     list={oriData.platform_trend.data}
@@ -357,7 +357,7 @@ function BigScreenHome() {
                             </div>
                         </Show>
                         <Show when={eHeight() > 0 && oriData.media_spread_trend && oriData.media_spread_trend.name}>
-                            <div style="margin-bottom: 6px">
+                            <div style={{ "margin-bottom": "6px" }}>
                                 <NewMediaTrend
                                     title={oriData.media_spread_trend.name}
                                     list={oriData.media_spread_trend.data}

src/pages/bigScreen/components/Activity.jsx

@@ -1,26 +1,29 @@
-import { onMount } from "solid-js";
-import { createStore } from "solid-js/store";
+import { onMount, createSignal, For } from "solid-js";
 
 import utils from "../../../utils/index"
 import "../../../assets/style/BigScreenHome.css"
 
 function ListeningRate(prop) {
-    const [TableList] = createStore(prop.list)
+    const [TableList] = createSignal(prop.list)
     onMount(() => { })
-    const maxlen = Math.ceil(prop.width / 28);
     return (
-        <div className="livRang" style={`width:${prop.width}px;${prop.styleCss}`}>
-            <div className="head">{prop.title}</div>
-            <div className="table">
-                <div className="tr" style="background-color: #03375e;">
-                    <div className='td'>序号</div>
-                    <div className='td' style='flex:2'>活动名称</div>
-                    <div className='td'>传播次数</div>
+        <div class="livRang" style={{
+            width:`${prop.width}px`
+        }}>
+            <div class="head">{prop.title}</div>
+            <div class="table">
+                <div class="tr" style={{"background-color":"#03375e"}}>
+                    <div class='td'>序号</div>
+                    <div class='td' style={{"flex":"2"}}>活动名称</div>
+                    <div class='td'>传播次数</div>
                 </div>
-                <div style={`height:${prop.height - 42}px;overflow-y: auto;`}>
-                    <For each={TableList}>{(item, i) => <div className="tr trColor">
-                        <div className='td'>{i() + 1}</div>
-                        <div className='td' style='flex:2;min-width: 0'>
+                <div style={{
+                    height:`${prop.height - 42}px`,
+                    overflow: 'auto'
+                }}>
+                    <For each={TableList}>{(item, i) => <div class="tr trColor">
+                        <div class='td'>{i() + 1}</div>
+                        <div class='td' style={{"flex":"2","min-width":"0"}}>
                             {/* <Show when={maxlen <= item.activity.length}>
                                 <marquee behavior="scroll">{item.activity} </marquee>
                             </Show>
@@ -29,7 +32,7 @@ function ListeningRate(prop) {
                             {/* </Show> */}
                             
                         </div>
-                        <div className='td'>{utils.formatNumber(item.readCount)}</div>
+                        <div class='td'>{utils.formatNumber(item.readCount)}</div>
                     </div>}</For>
                 </div>
             </div>

src/pages/bigScreen/components/Column_g2.jsx

@@ -162,8 +162,10 @@ function Column(prop) {
         TrendChart(prop.width, prop.height, $canvas)
     })
     return (
-        <div className="livRang" style={`width:${prop.width}px;`}>
-            <div className="head">{prop.title}</div>
+        <div class="livRang" style={{
+            width:`${prop.width}px`
+        }}>
+            <div class="head">{prop.title}</div>
             <div ref={$canvas}></div>
         </div>
     );

src/pages/bigScreen/components/ListeningRate_g2.jsx

@@ -24,7 +24,6 @@ registerShape('point', 'circular', {
         const x = cfg.x;
         const y = cfg.y;
         const width = cfg.size;
-        console.log(cfg)
         return [
             { x: x - width / 2, y },
             { x, y: y + width*2 },
@@ -121,8 +120,10 @@ function ListeningRate(prop) {
         TrendChart(prop.width, prop.height - 10, $canvas)
     })
     return (
-        <div className="livRang" style={`width:${prop.width}px;`}>
-            <div className="head">{prop.title}</div>
+        <div class="livRang" style={{
+            height:`${prop.width}px`
+        }}>
+            <div class="head">{prop.title}</div>
             <div ref={$canvas}></div>
         </div>
     );

src/pages/bigScreen/components/Map-l7.jsx

@@ -1,4 +1,4 @@
-import { onMount, refetchResources } from "solid-js";
+import { onMount } from "solid-js";
 import { Scene, PointLayer, PolygonLayer, LineLayer, Marker } from '@antv/l7';
 import { Mapbox } from '@antv/l7-maps';
 // import { GaodeMap } from '@antv/l7-maps';
@@ -7,9 +7,9 @@ import { Mapbox } from '@antv/l7-maps';
 import json from "../../../assets/file/100000_full.json"
 
 import utils from "../../../utils/index"
-import config from "../../../base/config"
+// import config from "../../../base/config"
 
-import { getGeography, getMapfull } from "../../../api/bigScreen"
+import { getMapfull } from "../../../api/bigScreen"
 
 import "../../../assets/style/BigScreenHome.css"
 
@@ -40,20 +40,20 @@ function Map(prop) {
     /***
      * 高德天气，暂时不用只能在https下可以
      */
-    function getWatcher(local) {
-        getGeography({
-            radius: 1,
-            key: config.webToke,
-            location: [local.lng, local.lat].join()
-        }).then(res => {
-            let adcode = res.regeocode.addressComponent.adcode.split("");
-            getWeather({
-                key: config.webToke,
-                // city: adcode[0] + adcode[1] + adcode[2] + adcode[3] + "00"
-                city: 610100
-            }).then(r => prop.setfun(r))
-        })
-    }
+    // function getWatcher(local) {
+    //     getGeography({
+    //         radius: 1,
+    //         key: config.webToke,
+    //         location: [local.lng, local.lat].join()
+    //     }).then(res => {
+    //         let adcode = res.regeocode.addressComponent.adcode.split("");
+    //         getWeather({
+    //             key: config.webToke,
+    //             // city: adcode[0] + adcode[1] + adcode[2] + adcode[3] + "00"
+    //             city: 610100
+    //         }).then(r => prop.setfun(r))
+    //     })
+    // }
     function TrendChart() {
         scene = new Scene({
             id: $canvas,
@@ -275,9 +275,15 @@ function Map(prop) {
         TrendChart()
     })
     return (
-        <div className="livRang map" style={`width:${prop.width}px;`}>
-            <div className="head">{prop.title}</div>
-            <div ref={$canvas} style={`width:${prop.width}px;height:${prop.height}px;position: relative;`}></div>
+        <div class="livRang map" style={{
+            width: `${prop.width}px`
+        }}>
+            <div class="head">{prop.title}</div>
+            <div ref={$canvas} style={{
+                width:`${prop.width}px`,
+                height:`${prop.height}px`,
+                position: 'relative'
+            }}></div>
         </div>
     );
 }

src/pages/bigScreen/components/Map.jsx

@@ -5,8 +5,8 @@ import * as D3 from "d3"
 
 import json from "../../../assets/file/100000_full.json"
 
-import utils from "../../../utils/index"
-import config from "../../../base/config"
+// import utils from "../../../utils/index"
+// import config from "../../../base/config"
 
 import { getMapfull } from "../../../api/bigScreen"
 
@@ -198,7 +198,7 @@ class chinaMap {
                 })
             })
             // 添加坐标
-            const centerv3 = new THREE.Vector3(elem.properties.center[0], -elem.properties.center[1], 0.2);
+            // const centerv3 = new THREE.Vector3(elem.properties.center[0], -elem.properties.center[1], 0.2);
             this.map.add(province)
 
         })
@@ -249,10 +249,16 @@ function Map(prop) {
         })
     })
     return (
-        <div className="livRang map" style={`width:${prop.width}px;`}>
-            <div className="head">{prop.title}</div>
-            <div ref={$bg} style="position: relative;">
-                <div ref={$canvas} style={`width:${prop.width}px;height:${prop.height}px;position: relative;`}></div>
+        <div class="livRang map" style={{
+            width:`${prop.width}px`
+        }}>
+            <div class="head">{prop.title}</div>
+            <div ref={$bg} style={{"position":"relative"}}>
+                <div ref={$canvas} style={{
+                    width:`${prop.width}px`,
+                    height:`${prop.height}px`,
+                    position: 'relative'
+                }}></div>
                 <div ref={$tooltip} id="tooltip"></div>
             </div>
         </div>

src/pages/bigScreen/components/NewMedia.jsx

@@ -1,4 +1,4 @@
-import { onMount, createSignal } from "solid-js";
+import { onMount, createSignal, For } from "solid-js";
 import { createStore } from "solid-js/store";
 
 import utils from "../../../utils/index"
@@ -6,9 +6,6 @@ import "../../../assets/style/BigScreenHome.css"
 
 let timeout = undefined;
 function NewMedia(prop) {
-    const [origin, setOrigin] = createStore(prop.list || {})
-    const [act, setact] = createSignal(0)
-    const [TableList, setTableList] = createSignal(getlist())
     function getlist() {
         const setli = [];
         for (let i = 0; i < Math.floor((prop.height - 42) / 40); i++) {
@@ -22,7 +19,9 @@ function NewMedia(prop) {
         }
         return setli
     }
-    const maxlen = Math.ceil(prop.width / 90)
+    const [origin] = createStore(prop.list || {})
+    const [act, setact] = createSignal(0)
+    const [TableList, setTableList] = createSignal(getlist())
     onMount(() => { })
     function imgClick(index) {
         setact(index);
@@ -38,30 +37,35 @@ function NewMedia(prop) {
     }
 
     timeout = timeoutFun()
-
+    let p = prop.styleCss || {};
+    p.width = `${prop.width}px`;
+    p.height = `${prop.height + 40}px`;
     return (
-        <div className="livRang" style={`width:${prop.width}px;height: ${prop.height + 40}px;${prop.styleCss}`}>
-            <div className="head">{prop.title}</div>
-            <div style="white-space: nowrap;display: flex">
-                <For each={origin}>{(item, i) => <div className="TabBtn">
-                    <img onClick={() => imgClick(i())} style="width: 100%;vertical-align: middle;margin-right: 3px" src={'/src/assets/img/' + item.name + (act() === i() ? '-o' : '') + '.png'} />
+        <div class="livRang" style={p}>
+            <div class="head">{prop.title}</div>
+            <div style={{"white-space":"nowrap","display":"flex"}}>
+                <For each={origin}>{(item, i) => <div class="TabBtn">
+                    <img onClick={() => imgClick(i())} style={{"width":"100%","vertical-align":"middle","margin-right":"3px"}} src={'/src/assets/img/' + item.name + (act() === i() ? '-o' : '') + '.png'} />
                     {/* <span style="vertical-align: middle;">{item.name}</span> */}
                 </div>}</For>
             </div>
-            <div className="table" >
-                <div className="tr" style="background-color: #03375e;">
-                    <div className='td'>序号</div>
-                    <div className='td' style="flex: 2">部门</div>
-                    <div className='td' style="flex: 2">账号</div>
-                    <div className='td' style="flex: 2">当月阅读量</div>
+            <div class="table" >
+                <div class="tr" style={{"background-color":"#03375e"}}>
+                    <div class='td'>序号</div>
+                    <div class='td' style={{"flex":"2"}}>部门</div>
+                    <div class='td' style={{"flex":"2"}}>账号</div>
+                    <div class='td' style={{"flex":"2"}}>当月阅读量</div>
                 </div>
-                <div style={`height:${prop.height - 82}px;overflow: hidden;`}>
-                    <For each={TableList()}>{(item, i) => <div className="tr trColor">
-                        <div className='td'>{i() + 1}</div>
-                        <div className='td' style="flex: 2">
+                <div style={{
+                    height:`${prop.height - 82}px`,
+                    overflow: 'hidden'
+                }}>
+                    <For each={TableList()}>{(item, i) => <div class="tr trColor">
+                        <div class='td'>{i() + 1}</div>
+                        <div class='td' style={{"flex":"2"}}>
                             {item.depName}
                         </div>
-                        <div className='td' style="flex: 2">
+                        <div class='td' style={{"flex":"2"}}>
                             {/* <Show when={maxlen <= item.userName.length}>
                                 <marquee behavior="scroll">{item.userName}</marquee>
                             </Show>
@@ -69,7 +73,7 @@ function NewMedia(prop) {
                                 {item.userName}
                             {/* </Show> */}
                         </div>
-                        <div className='td' style="flex: 2">{utils.formatNumber(item.readCount)}</div>
+                        <div class='td' style={{"flex":"2"}}>{utils.formatNumber(item.readCount)}</div>
                     </div>}</For>
                 </div>
             </div>

src/pages/bigScreen/components/NewMediaTrend.jsx

@@ -103,8 +103,10 @@ function Usertrend(prop) {
         TrendChart(prop.width, prop.height, $canvas)
     })
     return (
-        <div className="livRang" style={`width:${prop.width}px;`}>
-            <div className="head">{prop.title}</div>
+        <div class="livRang" style={{
+            width: `${prop.width}px`
+        }}>
+            <div class="head">{prop.title}</div>
             <div ref={$canvas}></div>
         </div>
     );

src/pages/bigScreen/components/SelfPlatform.jsx

@@ -34,15 +34,13 @@ function Usertrend(prop) {
                 70,
             ]
         });
-        let max = 0, maxText = "", min = Infinity, minText = "";
+        let max = 0, min = Infinity;
         (data || []).map(v => {
             if (v.sales > max) {
                 max = v.sales;
-                maxText = v.Data;
             }
             if (v.sales < min) {
                 min = v.sales;
-                minText = v.Data;
             }
         })
         chart.data(data);
@@ -96,8 +94,10 @@ function Usertrend(prop) {
         TrendChart(prop.width, prop.height, $canvas)
     })
     return (
-        <div className="livRang" style={`width:${prop.width}px;`}>
-            <div className="head">{prop.title}</div>
+        <div class="livRang" style={{
+            width: `${prop.width}px`
+        }}>
+            <div class="head">{prop.title}</div>
             <div ref={$canvas}></div>
         </div>
     );

src/pages/bigScreen/components/Usertrend.jsx

@@ -34,15 +34,13 @@ function Usertrend(prop) {
                 70,
             ]
         });
-        let max = 0, maxText = "", min = Infinity, minText = "";
+        let max = 0, min = Infinity;
         (data || []).map(v => {
             if (v.sales > max) {
                 max = v.sales;
-                maxText = v.Data;
             }
             if (v.sales < min) {
                 min = v.sales;
-                minText = v.Data;
             }
         })
         chart.data(data);
@@ -97,8 +95,10 @@ function Usertrend(prop) {
         TrendChart(prop.width, prop.height, $canvas)
     })
     return (
-        <div className="livRang" style={`width:${prop.width}px;`}>
-            <div className="head">{prop.title}</div>
+        <div class="livRang" style={{
+            width: `${prop.width}px`
+        }}>
+            <div class="head">{prop.title}</div>
             <div ref={$canvas}></div>
         </div>
     );

src/router/index.jsx

@@ -1,5 +1,5 @@
-import { lazy, createSignal, Show } from "solid-js";
-import { Routes, Route, Link, useLocation } from "solid-app-router";
+import { lazy, createSignal, Show, For } from "solid-js";
+import { Routes, Route, Link } from "solid-app-router";
 
 import BacgroundMap from "../components/bacgroundMap"
 import TitleStyle from "../components/titleStyle"
@@ -18,12 +18,12 @@ const [BottomLi, setBottomLi] = createSignal(baseText.bottoms);
 
 const changeBottomTab = function (e) {
     const path = e.target.getAttribute("path");
-    setBottomLi(BottomLi().map((bot, i) => (bot.path !== path ? { ...bot, select: false } : { ...bot, select: true })));
+    setBottomLi(BottomLi().map(bot => (bot.path !== path ? { ...bot, select: false } : { ...bot, select: true })));
 }
 
 export default function localRouter() {
     // 根据路由选择tab
-    setBottomLi(BottomLi().map((bot, i) => (bot.path === location.pathname ? { ...bot, select: true } : { ...bot, select: false })));
+    setBottomLi(BottomLi().map(bot => (bot.path === location.pathname ? { ...bot, select: true } : { ...bot, select: false })));
     return <>
         <Show when={location.pathname !== '/'}>
             <TitleStyle />
@@ -38,7 +38,7 @@ export default function localRouter() {
         </Routes>
         <Show when={location.pathname !== '/'}>
             <div class='bottom'>
-                <For each={BottomLi()}>{(bottom, i) =>
+                <For each={BottomLi()}>{bottom =>
                     <Link onClick={changeBottomTab} class="nav" href={bottom.path} path={bottom.path} classList={{ 'item': true, 'act': bottom.select }}>
                         {bottom.name}
                     </Link>

yarn.lock

@@ -2217,16 +2217,6 @@ array-union@^2.1.0:
   resolved "https://registry.npmmirror.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
-array.prototype.flatmap@^1.2.5:
-  version "1.3.0"
-  resolved "https://registry.npmmirror.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz#a7e8ed4225f4788a70cd910abcf0791e76a5534f"
-  integrity sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.2"
-    es-shim-unscopables "^1.0.0"
-
 as-number@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmmirror.com/as-number/-/as-number-1.0.0.tgz#acb27e34f8f9d8ab0da9e376f3b8959860f80a66"
@@ -2975,13 +2965,6 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
-doctrine@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmmirror.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
-  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
-  dependencies:
-    esutils "^2.0.2"
-
 doctrine@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
@@ -3011,7 +2994,7 @@ errno@^0.1.1:
   dependencies:
     prr "~1.0.1"
 
-es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19.5:
+es-abstract@^1.19.0, es-abstract@^1.19.5:
   version "1.20.0"
   resolved "https://registry.npmmirror.com/es-abstract/-/es-abstract-1.20.0.tgz#b2d526489cceca004588296334726329e0a6bfb6"
   integrity sha512-URbD8tgRthKD3YcC39vbvSDrX23upXnPcnGAjQfgxXF5ID75YcENawc9ZX/9iTP9ptUyfCLIxTTuMYoRfiOVKA==
@@ -3040,13 +3023,6 @@ es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19
     string.prototype.trimstart "^1.0.5"
     unbox-primitive "^1.0.2"
 
-es-shim-unscopables@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmmirror.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
-  integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
-  dependencies:
-    has "^1.0.3"
-
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmmirror.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -3197,26 +3173,6 @@ escape-string-regexp@^4.0.0:
   resolved "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
-eslint-plugin-react@^7.29.4:
-  version "7.29.4"
-  resolved "https://registry.npmmirror.com/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz#4717de5227f55f3801a5fd51a16a4fa22b5914d2"
-  integrity sha512-CVCXajliVh509PcZYRFyu/BoUEz452+jtQJq2b3Bae4v3xBUWPLCmtmBM+ZinG4MzwmxJgJ2M5rMqhqLVn7MtQ==
-  dependencies:
-    array-includes "^3.1.4"
-    array.prototype.flatmap "^1.2.5"
-    doctrine "^2.1.0"
-    estraverse "^5.3.0"
-    jsx-ast-utils "^2.4.1 || ^3.0.0"
-    minimatch "^3.1.2"
-    object.entries "^1.1.5"
-    object.fromentries "^2.0.5"
-    object.hasown "^1.1.0"
-    object.values "^1.1.5"
-    prop-types "^15.8.1"
-    resolve "^2.0.0-next.3"
-    semver "^6.3.0"
-    string.prototype.matchall "^4.0.6"
-
 eslint-plugin-solid@^0.4.7:
   version "0.4.7"
   resolved "https://registry.npmmirror.com/eslint-plugin-solid/-/eslint-plugin-solid-0.4.7.tgz#a3e0d062e2e80b175a3d814719bbf5a297119196"
@@ -3336,7 +3292,7 @@ estraverse@^4.1.1:
   resolved "https://registry.npmmirror.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
 
-estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
+estraverse@^5.1.0, estraverse@^5.2.0:
   version "5.3.0"
   resolved "https://registry.npmmirror.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
@@ -3827,13 +3783,6 @@ is-callable@^1.1.4, is-callable@^1.2.4:
   resolved "https://registry.npmmirror.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
   integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
 
-is-core-module@^2.2.0:
-  version "2.9.0"
-  resolved "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69"
-  integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==
-  dependencies:
-    has "^1.0.3"
-
 is-core-module@^2.8.1:
   version "2.8.1"
   resolved "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
@@ -3989,7 +3938,7 @@ jsonfile@^2.1.0:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
-"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.2.0:
+jsx-ast-utils@^3.2.0:
   version "3.3.0"
   resolved "https://registry.npmmirror.com/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz#e624f259143b9062c92b6413ff92a164c80d3ccb"
   integrity sha512-XzO9luP6L0xkxwhIJMTJQpZo/eeN60K08jHdexfD569AGxeNug6UketeHXEhROoM8aR7EcUoOQmIhcJQjcuq8Q==
@@ -4336,41 +4285,6 @@ object.assign@^4.1.2:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
-object.entries@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.npmmirror.com/object.entries/-/object.entries-1.1.5.tgz#e1acdd17c4de2cd96d5a08487cfb9db84d881861"
-  integrity sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-
-object.fromentries@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.npmmirror.com/object.fromentries/-/object.fromentries-2.0.5.tgz#7b37b205109c21e741e605727fe8b0ad5fa08251"
-  integrity sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-
-object.hasown@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.npmmirror.com/object.hasown/-/object.hasown-1.1.1.tgz#ad1eecc60d03f49460600430d97f23882cf592a3"
-  integrity sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==
-  dependencies:
-    define-properties "^1.1.4"
-    es-abstract "^1.19.5"
-
-object.values@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.npmmirror.com/object.values/-/object.values-1.1.5.tgz#959f63e3ce9ef108720333082131e4a459b716ac"
-  integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-
 once@^1.3.0:
   version "1.4.0"
   resolved "https://registry.npmmirror.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -4412,7 +4326,7 @@ path-key@^3.1.0:
   resolved "https://registry.npmmirror.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
-path-parse@^1.0.6, path-parse@^1.0.7:
+path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
@@ -4498,7 +4412,7 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.npmmirror.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
-prop-types@^15.5.10, prop-types@^15.8.1:
+prop-types@^15.5.10:
   version "15.8.1"
   resolved "https://registry.npmmirror.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -4693,14 +4607,6 @@ resolve@^1.22.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^2.0.0-next.3:
-  version "2.0.0-next.3"
-  resolved "https://registry.npmmirror.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46"
-  integrity sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==
-  dependencies:
-    is-core-module "^2.2.0"
-    path-parse "^1.0.6"
-
 reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
@@ -4954,20 +4860,6 @@ stream-source@0.3:
   resolved "https://registry.npmmirror.com/stream-source/-/stream-source-0.3.5.tgz#b97f52d0f8ea566db071db679b985403a31e0340"
   integrity sha512-ZuEDP9sgjiAwUVoDModftG0JtYiLUV8K4ljYD1VyUMRWtbVf92474o4kuuul43iZ8t/hRuiDAx1dIJSvirrK/g==
 
-string.prototype.matchall@^4.0.6:
-  version "4.0.7"
-  resolved "https://registry.npmmirror.com/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz#8e6ecb0d8a1fb1fda470d81acecb2dba057a481d"
-  integrity sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-    get-intrinsic "^1.1.1"
-    has-symbols "^1.0.3"
-    internal-slot "^1.0.3"
-    regexp.prototype.flags "^1.4.1"
-    side-channel "^1.0.4"
-
 string.prototype.trimend@^1.0.5:
   version "1.0.5"
   resolved "https://registry.npmmirror.com/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz#914a65baaab25fbdd4ee291ca7dde57e869cb8d0"