feat: 样式调整

tzipc-ui/src/theme/blueTheme/index.scss

@@ -13,6 +13,7 @@ $blueTheme: (
     buttonActiveBackgroundColor:#013dac,
     buttonActiveFontColor: #fff,
     tableRowBackgroundColor: #ffffffaa,
+    loginTitleFontColor: #fff,
 
     // 定制颜色定制背景图
     basicBackgroundColor: #000000,
@@ -30,6 +31,9 @@ $blueTheme: (
     subTitleBackgroundImage: url(/theme/blueTheme/subTitleBg.png),
     subBigTitleBackgroundImage: url(/theme/blueTheme/bigSubTitleBg.png),
     deviceImage: url(/theme/blueTheme/device.png),
+    deviceImage1: url(/theme/blueTheme/img1.png),
+    deviceImage2: url(/theme/blueTheme/img2.png),
+    deviceImage3: url(/theme/blueTheme/img3.png),
 
     // element ui 样式
     elTableHeaderBackgroundColor: #fff,

tzipc-ui/src/theme/default/index.scss

@@ -14,6 +14,8 @@ $default: (
     buttonActiveFontColor: #fff,
     tableRowBackgroundColor: #000000b4,
 
+    loginTitleFontColor: #fff,
+
     // 定制颜色定制背景图
     basicBackgroundColor: #000000,
     loginBackgroundImage: url(/theme/default/loginBg.png),
@@ -30,6 +32,9 @@ $default: (
     subTitleBackgroundImage: url(/theme/default/subTitleBg.png),
     subBigTitleBackgroundImage: url(/theme/default/bigSubTitleBg.png),
     deviceImage: url(/theme/default/device.png),
+    deviceImage1: url(/theme/default/img1.png),
+    deviceImage2: url(/theme/default/img2.png),
+    deviceImage3: url(/theme/default/img3.png),
 
     // element ui 样式
     elTableHeaderBackgroundColor: #fff,

tzipc-ui/src/theme/redTheme/index.scss

@@ -13,6 +13,7 @@ $redTheme: (
     buttonActiveBackgroundColor: #ad352f,
     buttonActiveFontColor: #fff,
     tableRowBackgroundColor: #ffffffb5,
+    loginTitleFontColor: #ad352f,
 
     // 定制颜色定制背景图
     basicBackgroundColor: #000000,
@@ -31,6 +32,9 @@ $redTheme: (
     subTitleBackgroundImage: url(/theme/redTheme/subTitleBg.png),
     subBigTitleBackgroundImage: url(/theme/redTheme/bigSubTitleBg.png),
     deviceImage: url(/theme/redTheme/device.png),
+    deviceImage1: url(/theme/redTheme/img1.png),
+    deviceImage2: url(/theme/redTheme/img2.png),
+    deviceImage3: url(/theme/redTheme/img3.png),
 
     // element ui 样式
     elTableHeaderBackgroundColor: #fff,

tzipc-ui/src/views/login.vue

@@ -3,9 +3,13 @@
     <div class="login-content">
       <div
         class="login-content-title"
-        style="margin-bottom: 1rem;"
+        style="margin-bottom: 1rem;text-align: center;"
       >
-        <img :src="getTitleBg()">
+        <!-- <img :src="getTitleBg()"> -->
+
+        <div
+          class="text-main-wrapper"
+        >油膜轴承监测与预测性维护数字管理系统</div>
       </div>
       <div
         class="login-content-sub-title"
@@ -228,6 +232,22 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss">
 @import "@/theme/index.scss";
+
+@font-face {
+  font-family: "BiaoTi";
+  src: url(../assets/biaoti.ttf);
+}
+
+.text-main-wrapper {
+  position: absolute;
+  left:calc(50% - 40vw);
+  bottom: .6rem;
+  @include font_color(loginTitleFontColor);
+  letter-spacing: .1rem;
+  width: 80vw;
+  font-size: 1.8rem;
+  font-family: "BiaoTi";
+}
 .login {
   height: 100vh;
   width: 100vw;
@@ -245,6 +265,7 @@ export default {
     .login-content-title {
       padding: 0 15px;
       width: 100%;
+      position: relative;
       img {
         width: 100%;
         height: 100%;

tzipc-ui/src/views/zf/bigscreen/index.vue

@@ -20,11 +20,28 @@
         style="grid-row: span 2;grid-column: span 2;padding: 2rem;"
         @click="(e) => { e.stopPropagation() }"
       >
-        <div class="device-image">
-          <div @click="handleTypeChange(['rtd', 'rto'])"></div>
-          <div @click="handleTypeChange(['ftd', 'fto'])"></div>
-          <div @click="handleTypeChange(['rbd', 'rbo'])"></div>
-          <div @click="handleTypeChange(['fbd', 'fbo'])"></div>
+        <div :class="`device-image-${curImageIndex}`">
+          <div @click="() => {
+            curImageIndex = 1
+            handleTypeChange(['rtd', 'rto'])
+          }"></div>
+          <div
+            @click="() => {
+              curImageIndex = 2
+              handleTypeChange(['ftd', 'fto'])
+            }"
+          ></div>
+          <div
+            @click="() => {
+              curImageIndex = 3
+              handleTypeChange(['rbd', 'rbo'])
+            }"></div>
+          <div
+            @click="() => {
+              curImageIndex = 4
+              handleTypeChange(['fbd', 'fbo'])
+            }"
+          ></div>
         </div>
       </div>
       <div class="grid-item-wrapper">
@@ -451,6 +468,8 @@ export default {
           },
         ],
       },
+
+      curImageIndex: 1
     };
   },
   mounted() {
@@ -1297,6 +1316,20 @@ export default {
   grid-template-rows: 1fr 1fr;
 }
 
+@for $i from 1 through 3 {
+  .device-image-#{$i} {
+    width: 100%;
+    height: 100%;
+    @include background_bg(deviceImage#{$i});
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+  }
+}
+
 .bottom-grid-wrapper {
   display: grid;
   height: 100%;
@@ -1333,8 +1366,7 @@ export default {
 }
 
 .scroll-text-wrapper {
-  border: 1px solid #ff0000b5;
-  background-color: #eb16161a;
+  color: #ff0000b5;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1343,17 +1375,17 @@ export default {
   overflow: hidden;
   .scroll-inner {
     position: absolute;
-    width: 100%;
-    animation: scrollAnimation 10s linear infinite;
+    white-space: nowrap;
+    animation: scrollAnimation 300s linear infinite;
   }
 }
 
 @keyframes scrollAnimation {
   0% {
-    left: 100%;
+    transform: translateX(100%);
   }
   100% {
-    left: -100%;
+    transform: translateX(-100%);
   }
 }
 </style>