fix:页面优化

src/views/gas/index.vue

@@ -12,41 +12,167 @@ const selectChannel = (channel: string, event: any) => {
 
 <template>
   <main class="main-content">
-    <el-row style="margin-top: 20px">
+    <!-- 状态显示 -->
+    <el-row justify="center" align="middle" class="status-row">
       <el-col :span="24">
-        <div>
-          是否在线：{{ gasStore.isOnline ? '在线' : '离线' }}
-        </div>
+        <el-card class="status-card" :body-style="{ padding: '60px' }">
+          <div class="status-info-row">
+            <!-- 已连接/未连接 SVG 图标 -->
+            <svg
+              v-if="gasStore.isOnline"
+              class="status-icon"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <circle cx="12" cy="12" r="10" stroke="#67c23a" stroke-width="2" fill="none" />
+              <path
+                d="M9 12l2 2 4-4"
+                stroke="#67c23a"
+                stroke-width="2"
+                fill="none"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            <svg
+              v-else
+              class="status-icon"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <circle cx="12" cy="12" r="10" stroke="#f56c6c" stroke-width="2" fill="none" />
+              <line
+                x1="15"
+                y1="9"
+                x2="9"
+                y2="15"
+                stroke="#f56c6c"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+              <line
+                x1="9"
+                y1="9"
+                x2="15"
+                y2="15"
+                stroke="#f56c6c"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+            </svg>
+            <h3 class="status-text">{{ gasStore.isOnline ? '已连接' : '未连接' }}</h3>
+          </div>
+          <div class="status-info">
+            <h3>当前通道：{{ gasStore.currentChannel === gasStore.channelSwitcherMap[0] ? '降解通道' : gasStore.currentChannel === gasStore.channelSwitcherMap[1] ? '消毒通道' : '除湿通道' }}</h3>
+          </div>
+        </el-card>
       </el-col>
     </el-row>
-    <el-row>
-      <el-col :span="24">
-        <div>
-          当前通道：{{ gasStore.currentChannel === gasStore.channelSwitcherMap[0] ? '降解通道' : gasStore.currentChannel === gasStore.channelSwitcherMap[1] ? '消毒通道' : '除湿通道' }}
-        </div>
+
+    <!-- 控制通道按钮 -->
+    <el-row justify="center" align="middle" :gutter="20">
+      <el-col :xs="24" :sm="12" :md="6" class="button-col">
+        <el-button
+          type="primary"
+          size="large"
+          class="channel-button"
+          :disabled="(!gasStore.isOnline) || gasStore.currentChannel === gasStore.channelSwitcherMap[0]"
+          @click="selectChannel(gasStore.channelSwitcherMap[0], $event)"
+        >
+          降解通道
+        </el-button>
       </el-col>
-    </el-row>
-    <el-row>
-      <el-col :span="24">
-        <div>
-          通道控制：
-          <bt-button type="primary" button-text="降解通道" :disabled="(!gasStore.isOnline) || gasStore.currentChannel === gasStore.channelSwitcherMap[0]" @click="selectChannel(gasStore.channelSwitcherMap[0], $event)" />
-          <bt-button type="primary" button-text="消毒通道" :disabled="(!gasStore.isOnline) || gasStore.currentChannel === gasStore.channelSwitcherMap[1]" @click="selectChannel(gasStore.channelSwitcherMap[1], $event)" />
-          <bt-button type="primary" button-text="除湿通道" :disabled="(!gasStore.isOnline) || gasStore.currentChannel === gasStore.channelSwitcherMap[2]" @click="selectChannel(gasStore.channelSwitcherMap[2], $event)" />
-        </div>
+      <el-col :xs="24" :sm="12" :md="6" class="button-col">
+        <el-button
+          type="primary"
+          size="large"
+          class="channel-button"
+          :disabled="(!gasStore.isOnline) || gasStore.currentChannel === gasStore.channelSwitcherMap[1]"
+          @click="selectChannel(gasStore.channelSwitcherMap[1], $event)"
+        >
+          消毒通道
+        </el-button>
+      </el-col>
+      <el-col :xs="24" :sm="12" :md="6" class="button-col">
+        <el-button
+          type="primary"
+          size="large"
+          class="channel-button"
+          :disabled="(!gasStore.isOnline) || gasStore.currentChannel === gasStore.channelSwitcherMap[2]"
+          @click="selectChannel(gasStore.channelSwitcherMap[2], $event)"
+        >
+          除湿通道
+        </el-button>
       </el-col>
     </el-row>
   </main>
 </template>
 
 <style lang="scss" scoped>
-$lineHeight: 12vh;
+$background-color: #ffffff;
+$card-background: #f9f9f9;
+$button-height: 50px;
+$button-padding: 0 20px;
+
 .main-content {
   height: 100%;
-  background: $gradient-color;
+  background: $background-color;
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
-.el-row {
-  margin-bottom: 20px;
-  margin-left: 20px;
+
+.status-row {
+  width: 100%;
+  max-width: 650px;
+  margin-bottom: 30px;
+}
+
+.status-card {
+  background: $card-background;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  text-align: center;
+}
+
+.status-info-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 40px;
+}
+
+.status-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+}
+
+.status-text {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #333;
+  margin: 0;
+}
+
+.status-info h3 {
+  font-size: 1.2rem;
+  color: #333;
+  margin: 0;
+}
+
+.button-col {
+  width: 200px;
+}
+
+.channel-button {
+  width: 100%;
+  height: $button-height;
+  padding: $button-padding;
+  font-size: 1.1rem;
+  border-radius: 8px;
+  transition: transform 0.2s ease;
+  margin-top: 40px;
 }
 </style>