From 5711798e5618511eced42557cfc9f63d40e64336 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期五, 21 三月 2025 16:30:10 +0800
Subject: [PATCH] 设备页面-样式优化

---
 src/views/CNAS/resourceDemand/device/component/deviceOverview.vue |  273 ++++++++++++++++++++++++------------------------------
 1 files changed, 122 insertions(+), 151 deletions(-)

diff --git a/src/views/CNAS/resourceDemand/device/component/deviceOverview.vue b/src/views/CNAS/resourceDemand/device/component/deviceOverview.vue
index bb5ae55..1bdd8e4 100644
--- a/src/views/CNAS/resourceDemand/device/component/deviceOverview.vue
+++ b/src/views/CNAS/resourceDemand/device/component/deviceOverview.vue
@@ -1,158 +1,8 @@
 <!-- 璁惧鎬昏 -->
-<style scoped>
-.title {
-  height: 60px;
-  line-height: 60px;
-}
-
-.search {
-  background-color: #fff;
-  height: 50px;
-  display: flex;
-  align-items: center;
-}
-
-.search_thing {
-  width: 350px;
-  display: flex;
-  align-items: center;
-}
-
-.search_label {
-  width: 110px;
-  font-size: 14px;
-  text-align: left;
-}
-
-.search_input {
-  width: calc(100% - 110px);
-}
-
-.table {
-  background-color: #fff;
-  height: calc(100vh - 17em);
-  /* padding: 10px; */
-  overflow-y: auto;
-}
-
-.card {
-  list-style-type: none;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, 330px);
-  justify-content: start;
-  grid-gap: 16px;
-  min-height: 300px;
-  padding-left: 0;
-}
-
-.card li {
-  width: 330px;
-  height: 165px;
-  border-radius: 8px 8px 8px 8px;
-  border: 1px solid #EEEEEE;
-  margin: 0 !important;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 16px;
-  font-size: 14px;
-  color: #666666;
-  position: relative;
-  overflow: hidden;
-}
-
-.card li .img {
-  width: 90px;
-  height: 90px;
-  border-radius: 16px;
-  margin-right: 10px;
-}
-
-.list-left .list-left-info {
-  line-height: 36px;
-  display: flex;
-}
-
-.text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap
-}
-
-.circles {
-  position: absolute;
-  width: 70px;
-  height: 70px;
-  right: 0;
-  top: 0;
-  z-index: 0;
-}
-
-.circles .circle {
-  border-radius: 50%;
-  opacity: 0.2;
-}
-
-.circle0,
-.circle1,
-.circle2 {
-  width: 60px;
-  height: 60px;
-  position: absolute;
-}
-
-.circle3 {
-  width: 16px;
-  height: 16px;
-  position: absolute;
-}
-
-.circle0 {
-  bottom: 6px;
-  left: 0;
-}
-
-.circle1 {
-  bottom: 0;
-  right: -30px;
-}
-
-.circle2 {
-  left: 0;
-  top: -30px;
-}
-
-.circle3 {
-  top: 0;
-  right: 0;
-}
-
-.success .circle {
-  background: #34BD66;
-}
-
-.danger .circle {
-  background: #FF3838;
-}
-
-.warning .circle {
-  background: #FBB247;
-}
-
-.info .circle {
-  background: #909399;
-}
-
-.el-form-item {
-  margin-top: 11px;
-  margin-bottom: 11px;
-}
-</style>
-
 <template>
   <div class="role_manage">
     <div>
-      <el-form :model="entity" inline label-position="right" label-width="80px">
+      <el-form :model="entity" inline label-position="right">
         <el-form-item label="鐘舵��:">
           <el-select v-model="entity.deviceStatus" placeholder="鍏ㄩ儴" size="small" clearable>
             <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
@@ -387,3 +237,124 @@
   }
 }
 </script>
+<style scoped>
+.table {
+  background-color: #fff;
+  height: calc(100vh - 17em);
+  /* padding: 10px; */
+  overflow-y: auto;
+}
+
+.card {
+  list-style-type: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 330px);
+  justify-content: start;
+  grid-gap: 16px;
+  min-height: 300px;
+  padding-left: 0;
+}
+
+.card li {
+  width: 330px;
+  height: 165px;
+  border-radius: 8px 8px 8px 8px;
+  border: 1px solid #EEEEEE;
+  margin: 0 !important;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 16px;
+  font-size: 14px;
+  color: #666666;
+  position: relative;
+  overflow: hidden;
+}
+
+.card li .img {
+  width: 90px;
+  height: 90px;
+  border-radius: 16px;
+  margin-right: 10px;
+}
+
+.list-left .list-left-info {
+  line-height: 36px;
+  display: flex;
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap
+}
+
+.circles {
+  position: absolute;
+  width: 70px;
+  height: 70px;
+  right: 0;
+  top: 0;
+  z-index: 0;
+}
+
+.circles .circle {
+  border-radius: 50%;
+  opacity: 0.2;
+}
+
+.circle0,
+.circle1,
+.circle2 {
+  width: 60px;
+  height: 60px;
+  position: absolute;
+}
+
+.circle3 {
+  width: 16px;
+  height: 16px;
+  position: absolute;
+}
+
+.circle0 {
+  bottom: 6px;
+  left: 0;
+}
+
+.circle1 {
+  bottom: 0;
+  right: -30px;
+}
+
+.circle2 {
+  left: 0;
+  top: -30px;
+}
+
+.circle3 {
+  top: 0;
+  right: 0;
+}
+
+.success .circle {
+  background: #34BD66;
+}
+
+.danger .circle {
+  background: #FF3838;
+}
+
+.warning .circle {
+  background: #FBB247;
+}
+
+.info .circle {
+  background: #909399;
+}
+
+.el-form-item {
+  margin-top: 11px;
+  margin-bottom: 11px;
+}
+</style>

--
Gitblit v1.9.3