update: 初始化：新疆大屏基础搭建

src/views/indexSun.vue

@@ -1,144 +1,122 @@
 <template>
-    <div class="outer">
+    <div class="sun-screen-box">
-        <login-out-button out-url="login" />
+        <div class="sun-screen-title">
-        <div class="title-d outer-title">
+            <div class="sun-title-left">2025年06月14日 12:21:21</div>
-            <div class="title-d-left">
+            <div class="sun-title-center">应急就医服务中心</div>
-                {{ dayTimeO }}
+            <div class="sun-title-right">累计运行时间：3642天</div>
         </div>
-            <div class="title-d-middle"> 应急就医服务中心</div>
+        <div class="sun-body-content">
-            <div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
+            <div class="sun-body-left">
-        </div>
+                <div class="sun-body-left-one">
-        <div class="body-d">
-            <div class="body-d-left">
                     <OneL />
+                </div>
+                <div class="sun-body-left-two">
                     <twoL />
+                </div>
+                <div class="sun-body-left-three" style="margin-bottom: 0">
                     <threeL />
                 </div>
-            <div class="body-d-middle">
+            </div>
+            <div class="sun-body-center">
                 <CenterMap />
             </div>
-            <div class="body-d-right">
+            <div class="sun-body-right">
+                <div class="sun-body-right-one">
                     <oneR :title="'体检数据'" :type="1" />
+                </div>
+                <div class="sun-body-right-two">
                     <oneR :title="'健康打卡数据'" :type="2" />
                 </div>
             </div>
         </div>
+    </div>
 </template>
 <script setup lang="ts">
-    import LoginOutButton from '/@/views/components/loginOutButton.vue';
-    import { onMounted, onUnmounted, ref } from 'vue';
-    import { useTopTime } from '/@/utils/utils.ts';
-    import OneL from '/@/views/indexSun/oneL.vue';
     import twoL from '/@/views/indexSun/twoL.vue';
     import threeL from '/@/views/indexSun/threeL.vue';
+    import OneL from '/@/views/indexSun/oneL.vue';
     import oneR from '/@/views/indexSun/oneR.vue';
     import CenterMap from '/@/views/indexSun/centerMap.vue';
-    const dayTimeO = ref();
-    const dayTimeT = ref();
-    const interval = ref(1);
-    function init() {
-        getTime();
-        interval.value = setInterval(() => {
-            getTime();
-        }, 1000);
-    }
-    function getTime() {
-        const { timeLeft, timeRight } = useTopTime();
-        dayTimeO.value = timeLeft;
-        dayTimeT.value = timeRight;
-    }
-    onMounted(() => {
-        init();
-    });
-    onUnmounted(() => {
-        clearInterval(interval.value);
-    });
 </script>
 <style lang="less" scoped>
-    .outer {
+    .sun-screen-box {
-        height: 100%;
+        height: 100vh;
-        box-sizing: border-box;
+        letter-spacing: 2px;
         background: url('/@/assets/indexSun/bigBg.png') no-repeat;
         background-size: 100% 100%;
-        position: relative;
+        .sun-screen-title {
-        .title-d {
             height: 80px;
-            line-height: 60px;
-            display: flex;
-            color: #fff;
             background: url('/@/assets/indexSun/bg.png') no-repeat;
             background-size: 100% 100%;
-            .title-d-left,
+            display: flex;
-            .title-d-middle,
-            .title-d-right {
             font-size: 22px;
+            color: #fff;
             text-align: center;
-                font-weight: bold;
+            line-height: 60px;
-                letter-spacing: 1px;
+            .sun-title-left,
+            .sun-title-right {
+                width: 23%;
             }
-            > :nth-child(1) {
+            .sun-title-center {
-                width: 20%;
+                flex: 1;
-            }
-
-            > :nth-child(2) {
-                width: 60%;
                 font-size: 50px;
                 line-height: 80px;
                 letter-spacing: 10px;
                 text-shadow: 2px 2px 5px rgba(118, 141, 219, 0.53);
                 font-weight: bold;
             }
-
-            > :nth-child(3) {
-                width: 20%;
         }
-        }
+        .sun-body-content {
-        .body-d {
-            display: flex;
             height: calc(100% - 80px);
+            padding: 10px 20px;
+            display: flex;
             justify-content: space-between;
-            padding: 10px 20px 0;
+            .sun-body-left,
-            > :nth-child(1) {
+            .sun-body-right {
+                height: 100%;
                 width: 22%;
-            }
-            > :nth-child(2) {
-                width: 50%;
-            }
-            > :nth-child(3) {
-                width: 24.5%;
-            }
-            .body-d-left {
                 display: flex;
                 flex-direction: column;
-                > div {
+                justify-content: space-between;
+            }
+            .sun-body-center {
+                flex: 1;
+                margin: 0 10px;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+            }
+            .sun-body-left {
+                .sun-body-left-one,
+                .sun-body-left-two,
+                .sun-body-left-three {
+                    margin-bottom: 10px;
                     border: 1px solid #00ccff;
                     border-radius: 14px;
-                }
+                    .one-l-box,
-                > :nth-child(2) {
+                    .two-l-box,
-                    height: 37%;
+                    .three-l-box {
-                }
+                        height: 100%;
-                > :nth-child(3) {
-                    height: 37%;
-                }
-                > :nth-child(n + 1) {
-                    margin-bottom: 15px;
                     }
                 }
-            .body-d-right {
+                .sun-body-left-one {
-                display: flex;
+                    height: 27%;
-                flex-direction: column;
+                }
-                > div {
+                .sun-body-left-two,
+                .sun-body-left-three {
+                    height: 36%;
+                }
+            }
+            .sun-body-right {
+                .sun-body-right-one,
+                .sun-body-right-two {
+                    height: 49.5%;
                     border: 1px solid #00ccff;
                     border-radius: 14px;
-                    height: 48.5%;
+                    .three-l-box {
-                }
+                        height: 100%;
-                > :nth-child(n + 1) {
-                    margin-bottom: 15px;
                     }
                 }
-            .body-d-middle {
-                display: flex;
-                flex-direction: column;
             }
         }
     }

src/views/indexSun/oneL.vue

@@ -215,7 +215,7 @@
             }
             .server-item {
                 //    font-size: 16px;
-                padding: 5px 3% 5px 5%;
+                padding: 3px 3% 3px 5%;
                 &.hasCursor {
                     cursor: pointer;
                 }

src/views/indexSun/threeL.vue

@@ -66,6 +66,12 @@
             .content-item {
                 height: 100%;
                 overflow: hidden;
+                letter-spacing: 1px;
+                .scroll {
+                    width: 98%;
+                    height: 100%;
+                    overflow: hidden;
+
                     .item-d {
                         border-bottom: 1px solid #0076b4;
                         height: 40px;
@@ -87,4 +93,5 @@
                 }
             }
         }
+    }
 </style>

src/views/indexSun/twoL.vue

@@ -107,7 +107,7 @@
                     display: flex;
                     align-items: center;
                     justify-content: center;
-                    width: 60px;
+                    //width: 60px;
                 }
                 .selected {
                     color: #00ccff;