二线口岸全景运行管理中心

src/views/screen/components/card-number/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card-number">
+  <div class="card-number" :class="type">
     <template v-for="item in valueCpt">
       <div class="card-item">{{item}}</div>
     </template>
@@ -15,6 +15,9 @@ const props = defineProps({
   value: {},
   min: {default: 0},
   unit: {default: ''},
+  type: {
+    default: 'type-1'
+  }
 })
 const valueCpt = computed(() => {
   const str = String(props.value).split('')
@@ -34,28 +37,9 @@ const state: any = reactive({})
   align-items: flex-end;
   gap: 5px;
   .card-item {
-    width: 26px;
-    height: 33px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-family: Source Han Sans CN;
-    font-weight: bold;
-    font-size: 22px;
-    color: #FFFFFF;
-    background: linear-gradient(0deg, #3FA4F6 0%, #F7FDFF 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    position: relative;
-    &:before {
-      content: '';
-      background-image: url("./card.png");
-      background-size: 100% 100%;
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      z-index: -1;
-    }
   }
   .unit {
     font-weight: 400;
@@ -64,5 +48,47 @@ const state: any = reactive({})
     line-height: 27px;
     opacity: 0.6;
   }
+  &.type-1 {
+    .card-item {
+      width: 26px;
+      height: 33px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      font-size: 22px;
+      color: #FFFFFF;
+      background: linear-gradient(0deg, #3FA4F6 0%, #F7FDFF 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      position: relative;
+      &:before {
+        content: '';
+        background-image: url("./card.png");
+        background-size: 100% 100%;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        z-index: -1;
+      }
+    }
+    .unit {
+      font-weight: 400;
+      font-size: 14px;
+      color: #FFFFFF;
+      line-height: 27px;
+      opacity: 0.6;
+    }
+  }
+  &.type-2 {
+    .card-item {
+      width: 18px;
+      height: 24px;
+      background: rgba(14,181,255,0.1);
+      border-radius: 0px 0px 0px 0px;
+      border: 1px solid rgba(34,177,240,0.45);
+      font-weight: 400;
+      font-size: 16px;
+      color: #1CFEFF;
+    }
+  }
 }
 </style>

src/views/screen/two-kouan-full-run-manage/components/normal.scss

@@ -36,23 +36,60 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  width: 456px;
   >.__title {
-    height: 45px;
-    width: 404px;
-    font-weight: bold;
-    font-size: 22px;
-    padding-left: 44px;
+    height: 40px;
+    width: 100%;
+    font-weight: 500;
+    font-size: 20px;
+    color: #FFFFFF;
     position: relative;
-    background: linear-gradient(180deg, rgb(212, 237, 243), rgb(176, 181, 182));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    display: flex;
+    align-items: center;
+    >span {
+      font-weight: 500;
+      font-size: 12px;
+      color: rgba(255,255,255,0.6);
+      margin-top: 8px;
+    }
+    .__buttons {
+      position: absolute;
+      right: 10px;
+      bottom: 6px;
+      display: flex;
+      align-items: center;
+      >div {
+        width: 40px;
+        height: 17px;
+        font-weight: 400;
+        font-size: 12px;
+        color: rgba(255,255,255,0.6);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &.active {
+          background-image: url("@/views/screen/two-kouan-full-run-manage/img/button-active-2.png");
+          background-size: 100% 100%;
+          font-weight: 500;
+          color: #FFFFFF;
+        }
+      }
+    }
     &:before {
       content: '';
+      width: 16px;
+      height: 16px;
+      background-image: url("@/views/screen/two-kouan-full-run-manage/img/title-icon.png");
+      background-size: 100% 100%;
+      margin-left: 16px;
+      margin-right: 8px;
+    }
+    &:after {
+      content: '';
       width: 100%;
       height: 100%;
-      background-image: url("@/views/screen/kouan-run-monitor/img/block-head.png");
-      background-size: auto 100%;
-      background-position-x: -22px;
+      background-image: url("@/views/screen/two-kouan-full-run-manage/img/title-bg.png");
+      background-size: 100% 100%;
       position: absolute;
       top: 0;
       left: 0;
@@ -62,7 +99,36 @@
   >.__block-content {
     overflow: hidden;
     flex: 1;
-    background-image: url("@/views/screen/kouan-run-monitor/img/block-bg.png");
     background-size: 100% 100%;
+    position: relative;
+    padding: 16px;
+    border: 1px solid;
+    border-image: linear-gradient(0deg, rgba(94, 188, 245, 0.4), rgba(94, 188, 245, 0)) 1 1;
+    background: rgba(4,19,35,0.5);
+    &:after {
+      content: '';
+      background-image: url("@/views/screen/two-kouan-full-run-manage/img/content-bottom.png");
+      background-size: 100% 100%;
+      width: 100%;
+      height: 8px;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
   }
 }
+.__title-1 {
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  font-size: 16px;
+  color: #FFFFFF;
+  &:before {
+    content: '';
+    background-image: url("@/views/screen/two-kouan-full-run-manage/img/title-icon-2.png");
+    background-size: 100% 100%;
+    width: 24px;
+    height: 12px;
+    margin-right: 10px;
+  }
+}