update

1.更新西安大屏样式

src/assets/less/index.less

@@ -1,5 +1,6 @@
 @import "./amap-item";
 @import "./themeType";
+@import "./public-title";
 
 .type-time {
   padding-right: 4%;
@@ -13,7 +14,7 @@
     cursor: pointer;
   }
 
-  .select {
+  .select.dark {
     color: var(--typeTimeSelectColor);
     position: relative;
 
@@ -30,9 +31,25 @@
     }
   }
 
-  .unSelect {
+  .unSelect.dark {
     color: var(--typeTimeUnSelectColor);
   }
+  .select.light {
+    color: #5876DB;
+    background-color: #BDC9F5;
+    position: relative;
+    margin-left: 5px;
+    border: 1px solid #607DDB;
+    border-radius: 5px;
+  }
+
+  .unSelect.light {
+    background-color: #BDC9F5;
+    margin-left: 5px;
+    color: #889BDB;
+    border: 1px solid #BDC9F5;
+    border-radius: 5px;
+  }
 }
 
 *::-webkit-scrollbar {

src/assets/less/public-title.less

@@ -0,0 +1,96 @@
+
+.public-title.dark {
+    background: linear-gradient(90deg, rgba(106, 112, 124, 0.4) 0%, rgba(106, 112, 124, 0) 70%, rgba(106, 112, 124, 0) 100%);
+    opacity: 1;
+    border-top: 1px solid #6a707c;
+    border-bottom: 1px solid #6a707c;
+    border-image: linear-gradient(
+        90deg,
+        rgba(217.0000022649765, 231.00000143051147, 255, 0.5),
+        rgba(217.0000022649765, 231.00000143051147, 255, 0)
+    )
+    1 1;
+    color: #ffffff;
+
+    &:before {
+        position: absolute;
+        content: '';
+        width: 7px;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background-color: #45a2ff;
+    }
+
+    .tips {
+        font-size: 16px;
+        padding-right: 10px;
+        font-weight: normal;
+    }
+}
+.public-title.light {
+    background: url("/@/assets/images/title-background.png") no-repeat;
+    background-size: 100% 100%;
+    color: #576BAD;
+}
+
+.server-item.light {
+    color: #607DDB;
+}
+.server-item.dark {
+
+    &:nth-child(odd) {
+        background-color: #0a0a0c;
+    }
+}
+
+.right-top-item.light{
+    >span:nth-child(1) {
+        color: #607DDB;
+    }
+    >span:nth-child(2) {
+        color: #F58584;
+    }
+    >div {
+        color: #607DDB;
+    }
+
+    .terminal-icon {
+        background: url('/@/assets/images/terminalNew.png') no-repeat;
+    }
+
+    .position {
+        background: url('/@/assets/images/positionNew.png') no-repeat;
+    }
+}
+.right-top-item.dark {
+    .fixed-width {
+        display: inline-flex;
+        width: 100px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    span {
+        color: #ffffff;
+        font-size: 16px;
+    }
+
+    .terminal-icon {
+        background: url('/@/assets/images/terminal.png') no-repeat;
+    }
+
+    .position {
+        background: url('/@/assets/img/position.png') no-repeat;
+    }
+}
+
+.outer-title.light{
+    color: #576BAD;
+    background: url('/@/assets/images/top-title-new.png') no-repeat;
+}
+.outer-title.dark{
+    color: #ffffff;
+    background: url('/@/assets/images/top-title.png') no-repeat;
+}

src/assets/less/themeType.less

@@ -22,4 +22,4 @@
 //右侧区域
 .body-d-right.light {
   padding: 0 16px;
-}
+}

src/components/body-d-left/oneL.vue

@@ -1,12 +1,12 @@
 <template>
     <div class="common-card" :class="[themeType]">
-        <public-title title="服务详情数据" />
+        <public-title title="服务详情数据" :themeType="themeType" />
         <div class="inner">
             <div class="type-time">
                 <span
                     v-for="(item, index) in typeTime"
                     :key="index"
-                    :class="[selectIndex === index ? 'select' : 'unSelect']"
+                    :class="[selectIndex === index ? 'select' : 'unSelect', themeType]"
                     @click="handleSelect(index, item.value)"
                     >{{ item.name }}</span
                 >
@@ -16,7 +16,7 @@
                     v-for="(item, index) in statistics"
                     :key="index"
                     class="server-item"
-                    :class="['gross', 'alerdyreceive'].includes(item.key) ? 'hasCursor' : ''"
+                    :class="[['gross', 'alerdyreceive'].includes(item.key) ? 'hasCursor' : '', themeType]"
                     @click="handleClick(item)"
                 >
                     <span>{{ item?.name }}</span>
@@ -116,7 +116,7 @@
 
         .server-container {
             color: #fff;
-            padding-top: 4%;
+            padding-top: 10px;
             height: 88%;
             display: grid;
             align-items: start;
@@ -128,34 +128,18 @@
                 left: 50%;
                 top: 50%;
             }
+        }
 
-            .server-item {
+        .server-item {
-                font-size: 16px;
+            font-size: 16px;
-                padding: 6px 0;
+            padding: 6px 6% 6px 5%;
 
-                &.hasCursor {
+            &.hasCursor {
-                    cursor: pointer;
+                cursor: pointer;
-                }
-
-                span {
-                    display: inline-block;
-                    width: 50%;
-                }
-
-                span:nth-child(1) {
-                    text-align: left;
-                    padding-left: 5%;
-                }
-
-                span:nth-child(2) {
-                    text-align: right;
-                    padding-right: 6%;
-                }
             }
 
-            .server-item:nth-child(odd) {
+            display: flex;
-                background-color: #0a0a0c;
+            justify-content: space-between;
-            }
         }
     }
 </style>

src/components/body-d-right/oneR.vue

@@ -7,7 +7,7 @@
         </public-title>
         <div class="inner">
             <vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4" v-bind="classOption">
-                <div class="item" v-for="(item, i) in scrollList" :key="i">
+                <div class="item right-top-item" :class="themeType" v-for="(item, i) in scrollList" :key="i">
                     <span class="fixed-width" :title="item?.realName">{{ item?.realName }}</span>
                     <span class="fixed-width" :title="item?.eventType_dictText">{{ item?.eventType_dictText }}</span>
                     <div class="time-icon">
@@ -168,19 +168,6 @@
                 justify-content: space-between;
                 padding: 3% 0;
 
-                .fixed-width {
-                    display: inline-flex;
-                    width: 100px;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                }
-
-                span {
-                    color: #ffffff;
-                    font-size: 16px;
-                }
-
                 .time-icon {
                     display: flex;
                     align-items: center;
@@ -191,18 +178,16 @@
                     display: inline-block;
                     width: 18px;
                     height: 18px;
-                    background: url('/@/assets/images/terminal.png') no-repeat;
                     background-size: 100% 100%;
                     cursor: pointer;
                 }
 
                 .position {
+                    width: 18px;
+                    height: 18px;
+                    background-size: 100% 100%;
                     margin-left: 5px;
                     display: inline-block;
-                    width: 20px;
-                    height: 20px;
-                    background: url('/@/assets/img/position.png') no-repeat;
-                    background-size: 100% 100%;
                     cursor: pointer;
                 }
             }
@@ -214,6 +199,7 @@
 
         .con-item {
             padding: 1.3% 0;
+            display: flex;
 
             span:nth-child(1) {
                 font-weight: bold;

src/components/body-d-right/threeR.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="common-card" :class="themeType">
-        <public-title title="基层医疗点远程会诊" />
+        <public-title title="基层医疗点远程会诊" :theme-type="themeType" />
         <div class="inner">
             <div class="inner-item" data-text="应急就医-服务中心"></div>
             <div class="inner-item" data-text="采油九厂-薛岔作业区"></div>

src/components/publicTitle.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="title-d">
+    <div class="title-d public-title" :class="props.themeType">
         <span>{{ props.title }}</span>
-        <div>
+        <div v-if="props.themeType !== 'light'">
             <span class="tips"><slot name="right"></slot></span>
             <img src="../assets/img/point.png" alt="" />
         </div>
@@ -34,36 +34,10 @@
         text-align: left;
         height: 40px;
         line-height: 40px;
-        background: linear-gradient(90deg, rgba(106, 112, 124, 0.4) 0%, rgba(106, 112, 124, 0) 70%, rgba(106, 112, 124, 0) 100%);
+
-        opacity: 1;
-        border-top: 1px solid #6a707c;
-        border-bottom: 1px solid #6a707c;
-        border-image: linear-gradient(
-                90deg,
-                rgba(217.0000022649765, 231.00000143051147, 255, 0.5),
-                rgba(217.0000022649765, 231.00000143051147, 255, 0)
-            )
-            1 1;
-        color: #ffffff;
         font-size: 20px;
         font-weight: 700;
         display: flex;
         justify-content: space-between;
-
-        &:before {
-            position: absolute;
-            content: '';
-            width: 7px;
-            height: 100%;
-            top: 0;
-            left: 0;
-            background-color: #45a2ff;
-        }
-
-        .tips {
-            font-size: 16px;
-            padding-right: 10px;
-            font-weight: normal;
-        }
     }
 </style>

src/views/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="outer">
-        <div class="title-d">
+        <div class="title-d outer-title" :class="themeType">
             <div class="title-d-left">
                 {{ dayTimeO }}
             </div>
@@ -329,14 +329,12 @@
         line-height: 80px;
         display: flex;
         padding-bottom: 9px;
-        background: url('/@/assets/images/top-title.png') no-repeat;
         background-size: 100% 100%;
 
         .title-d-left,
         .title-d-middle,
         .title-d-right {
             font-size: 27px;
-            color: #ffffff;
             line-height: 60px;
             text-align: center;
         }