提交

src/assets/style/BigScreenHome.css

@@ -169,30 +169,30 @@
 }
 
 .home .tooltip {
-    position: relative;
-    width: 6em;
-    height: 5em;
-    line-height: 1.5em;
-    overflow: hidden;
-    z-index: 10;
-    background-size: 100% 100%;
-    background-color: rgba(6, 30, 56, 0.9);
-    background-image: url(/src/assets/img/k.png);
-    animation-name: example;
-    animation-duration: 0.4s;
-  }
-  
-  .home .tooltipSon {
-    position: absolute;
-    width: 6em;
-    height: 5em;
-    line-height: 2em;
-    text-align: center;
-    padding: 5px 10px;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
+  position: relative;
+  width: 6em;
+  height: 5em;
+  line-height: 1.5em;
+  overflow: hidden;
+  z-index: 10;
+  background-size: 100% 100%;
+  background-color: rgba(6, 30, 56, 0.9);
+  background-image: url(/src/assets/img/k.png);
+  animation-name: example;
+  animation-duration: 0.4s;
+}
+
+.home .tooltipSon {
+  position: absolute;
+  width: 6em;
+  height: 5em;
+  line-height: 2em;
+  text-align: center;
+  padding: 5px 10px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
 
 .home .map {
   position: relative;
@@ -238,12 +238,11 @@
   width: 100%;
 }
 
-
-.center{
-    overflow: hidden;
-    position: relative;
+.center {
+  overflow: hidden;
+  position: relative;
 }
 
-.selfSwiper{
-    width: 438px;
+.selfSwiper {
+  width: 438px;
 }

src/pages/CommonBigScreen/components/Activity.jsx

@@ -4,8 +4,9 @@ import utils from "../../../utils/index"
 import "../../../assets/style/CommonBigScreenHome.css"
 
 function ListeningRate(prop) {
-    onMount(() => { })
-
+    let len = Math.ceil((prop.list.length || 0) / 2);
+    onMount(() => {  })
+    
     return (
         <div class="livRang" style={{
             width: `${prop.width}px`
@@ -22,7 +23,7 @@ function ListeningRate(prop) {
                     <div style={{
                         height: `${prop.height - 42}px`,
                     }}>
-                        <For each={prop.list}>{(item, i) => <div class="tr trColor" style={{ display: i() + 1 > 6 ? 'none' : 'flex' }}>
+                        <For each={prop.list}>{(item, i) => <Show  when={i() + 1 <= len}><div class="tr trColor" style={{ display: 'flex' }}>
                             <div class='td'>{i() + 1}</div>
                             <Show when={item.activity.length > 11}>
                                 <marquee class='td' style={{ "flex": "2", "min-width": "0" }}>
@@ -35,7 +36,7 @@ function ListeningRate(prop) {
                                 </dev>
                             </Show>
                             <div class='td'>{utils.formatNum(item.readCount)}</div>
-                        </div>}</For>
+                        </div></Show>}</For>
                     </div>
                 </div>
                 <div class="table">
@@ -47,7 +48,7 @@ function ListeningRate(prop) {
                     <div style={{
                         height: `${prop.height - 42}px`,
                     }}>
-                        <For each={prop.list}>{(item, i) => <div class="tr trColor" style={{ display: i() + 1 <= 6 ? 'none' : 'flex' }}>
+                        <For each={prop.list}>{(item, i) => <Show when={i() + 1 > len}><div class="tr trColor" style={{ display: 'flex' }}>
                             <div class='td'>{i() + 1}</div>
                             <Show when={item.activity.length > 11}>
                                 <marquee class='td' style={{ "flex": "2", "min-width": "0" }}>
@@ -60,7 +61,7 @@ function ListeningRate(prop) {
                                 </dev>
                             </Show>
                             <div class='td'>{utils.formatNum(item.readCount)}</div>
-                        </div>}</For>
+                        </div></Show>}</For>
                     </div>
                 </div>
             </div>

src/pages/bigScreen/components/Activity.jsx

@@ -4,6 +4,7 @@ import utils from "../../../utils/index"
 import "../../../assets/style/CommonBigScreenHome.css"
 
 function ListeningRate(prop) {
+    let len = Math.ceil((prop.list.length || 0) / 2);
     onMount(() => { })
 
     return (
@@ -22,7 +23,7 @@ function ListeningRate(prop) {
                     <div style={{
                         height: `${prop.height - 42}px`,
                     }}>
-                        <For each={prop.list}>{(item, i) => <div class="tr trColor" style={{ display: i() + 1 > 6 ? 'none' : 'flex' }}>
+                        <For each={prop.list}>{(item, i) => <Show when={i() + 1 <= len}><div class="tr trColor" style={{ display: 'flex' }}>
                             <div class='td'>{i() + 1}</div>
                             <Show when={item.activity.length > 11}>
                                 <marquee class='td' style={{ "flex": "2", "min-width": "0" }}>
@@ -35,7 +36,7 @@ function ListeningRate(prop) {
                                 </dev>
                             </Show>
                             <div class='td'>{utils.formatNum(item.readCount)}</div>
-                        </div>}</For>
+                        </div></Show>}</For>
                     </div>
                 </div>
                 <div class="table">
@@ -47,7 +48,7 @@ function ListeningRate(prop) {
                     <div style={{
                         height: `${prop.height - 42}px`,
                     }}>
-                        <For each={prop.list}>{(item, i) => <div class="tr trColor" style={{ display: i() + 1 <= 6 ? 'none' : 'flex' }}>
+                        <For each={prop.list}>{(item, i) => <Show when={i() + 1 > len}><div class="tr trColor" style={{ display: 'flex' }}>
                             <div class='td'>{i() + 1}</div>
                             <Show when={item.activity.length > 11}>
                                 <marquee class='td' style={{ "flex": "2", "min-width": "0" }}>
@@ -60,7 +61,7 @@ function ListeningRate(prop) {
                                 </dev>
                             </Show>
                             <div class='td'>{utils.formatNum(item.readCount)}</div>
-                        </div>}</For>
+                        </div></Show>}</For>
                     </div>
                 </div>
             </div>