build: 看板设备管理页面样式

src/views/equipment/index.vue

@@ -5,6 +5,8 @@ defineOptions({
 });
 import { watch } from "vue";
 import { useUserStore } from "@/store/modules/user";
+import { ClassList } from "@/api/school/types";
+import { CaretBottom } from "@element-plus/icons-vue";
 const userStore = useUserStore();
 watch(
   () => userStore.schoolId,
@@ -12,13 +14,448 @@ watch(
     console.log(newValue, oldValue);
   }
 );
+let equipmentInfo = ref("");
+// 教师编号
+let teacherNumber = ref(0);
+const teacherData = ref<ClassList[]>([
+  {
+    id: 0,
+    school_id: 0,
+    name: "全部",
+  },
+]);
 </script>
 
 <template>
-  <div class="container">
-    <h1>设备管理</h1>
-    <div>{{ userStore.schoolId }}</div>
+  <div class="equipment-container">
+    <!-- 设备查找 -->
+    <div class="equipment-search">
+      <el-select
+        v-model="teacherNumber"
+        placeholder="请选择使用者名称"
+        size="large"
+        :suffix-icon="CaretBottom"
+      >
+        <el-option
+          v-for="item in teacherData"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
+      <el-input
+        v-model="equipmentInfo"
+        size="large"
+        placeholder="请输入设备编号"
+      />
+      <el-button size="large" type="primary">查找</el-button>
+    </div>
+    <div class="equipment-box">
+      <div class="title"><span>水母星球脑机</span><b>5</b>台</div>
+      <el-row :gutter="15">
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
+          <div class="box-card">
+            <el-row>
+              <el-col :span="9" class="img">
+                <div class="i nj"></div>
+                <div class="value">AI30200274</div>
+              </el-col>
+              <el-col :span="15" class="info">
+                <div class="label mb-2">固件版本</div>
+                <div class="value mb-4">1.06-5-85E3FEB</div>
+                <div class="label mb-2">绑定时间</div>
+                <div class="value mb-4">2023-07-12 13:22</div>
+                <div class="label mb-2">使用者</div>
+                <div class="value mb-2">松阪老师</div>
+                <div class="value">13766278827</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
+          <div class="box-card">
+            <el-row>
+              <el-col :span="9" class="img">
+                <div class="i nj"></div>
+                <div class="value">AI30200274</div>
+              </el-col>
+              <el-col :span="15" class="info">
+                <div class="label mb-2">固件版本</div>
+                <div class="value mb-4">1.06-5-85E3FEB</div>
+                <div class="label mb-2">绑定时间</div>
+                <div class="value mb-4">2023-07-12 13:22</div>
+                <div class="label mb-2">使用者</div>
+                <div class="value mb-2">松阪老师</div>
+                <div class="value">13766278827</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
+          <div class="box-card">
+            <el-row>
+              <el-col :span="9" class="img">
+                <div class="i nj"></div>
+                <div class="value">AI30200274</div>
+              </el-col>
+              <el-col :span="15" class="info">
+                <div class="label mb-2">固件版本</div>
+                <div class="value mb-4">1.06-5-85E3FEB</div>
+                <div class="label mb-2">绑定时间</div>
+                <div class="value mb-4">2023-07-12 13:22</div>
+                <div class="label mb-2">使用者</div>
+                <div class="value mb-2">松阪老师</div>
+                <div class="value">13766278827</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
+          <div class="box-card">
+            <el-row>
+              <el-col :span="9" class="img">
+                <div class="i nj"></div>
+                <div class="value">AI30200274</div>
+              </el-col>
+              <el-col :span="15" class="info">
+                <div class="label mb-2">固件版本</div>
+                <div class="value mb-4">1.06-5-85E3FEB</div>
+                <div class="label mb-2">绑定时间</div>
+                <div class="value mb-4">2023-07-12 13:22</div>
+                <div class="label mb-2">使用者</div>
+                <div class="value mb-2">松阪老师</div>
+                <div class="value">13766278827</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
+          <div class="box-card">
+            <el-row>
+              <el-col :span="9" class="img">
+                <div class="i nj"></div>
+                <div class="value">AI30200274</div>
+              </el-col>
+              <el-col :span="15" class="info">
+                <div class="label mb-2">固件版本</div>
+                <div class="value mb-4">1.06-5-85E3FEB</div>
+                <div class="label mb-2">绑定时间</div>
+                <div class="value mb-4">2023-07-12 13:22</div>
+                <div class="label mb-2">使用者</div>
+                <div class="value mb-2">松阪老师</div>
+                <div class="value">13766278827</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
+          <div class="box-card">
+            <el-row>
+              <el-col :span="9" class="img">
+                <div class="i nj"></div>
+                <div class="value">AI30200274</div>
+              </el-col>
+              <el-col :span="15" class="info">
+                <div class="label mb-2">固件版本</div>
+                <div class="value mb-4">1.06-5-85E3FEB</div>
+                <div class="label mb-2">绑定时间</div>
+                <div class="value mb-4">2023-07-12 13:22</div>
+                <div class="label mb-2">使用者</div>
+                <div class="value mb-2">松阪老师</div>
+                <div class="value">13766278827</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="equipment-box">
+      <div class="title"><span>智脑水舞</span><b>5</b>台</div>
+      <el-row :gutter="15">
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
+          <div class="box-card">
+            <el-row>
+              <el-col :span="9" class="img">
+                <div class="i sw"></div>
+                <div class="value">AI30200274</div>
+              </el-col>
+              <el-col :span="15" class="info">
+                <div class="label mb-2">固件版本</div>
+                <div class="value mb-4">1.06-5-85E3FEB</div>
+                <div class="label mb-2">绑定时间</div>
+                <div class="value mb-4">2023-07-12 13:22</div>
+                <div class="label mb-2">使用者</div>
+                <div class="value mb-2">松阪老师</div>
+                <div class="value">13766278827</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="equipment-box">
+      <div class="title"><span>智脑碰碰车</span><b>5</b>台</div>
+      <el-row :gutter="15">
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
+          <div class="box-card">
+            <el-row>
+              <el-col :span="9" class="img">
+                <div class="i ppc"></div>
+                <div class="value">AI30200274</div>
+              </el-col>
+              <el-col :span="15" class="info">
+                <div class="label mb-2">固件版本</div>
+                <div class="value mb-4">1.06-5-85E3FEB</div>
+                <div class="label mb-2">绑定时间</div>
+                <div class="value mb-4">2023-07-12 13:22</div>
+                <div class="label mb-2">使用者</div>
+                <div class="value mb-2">松阪老师</div>
+                <div class="value">13766278827</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="equipment-box">
+      <div class="title"><span>智脑赛车</span><b>5</b>台</div>
+      <el-row :gutter="15">
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
+          <div class="box-card">
+            <el-row>
+              <el-col :span="9" class="img">
+                <div class="i sc"></div>
+                <div class="value">AI30200274</div>
+              </el-col>
+              <el-col :span="15" class="info">
+                <div class="label mb-2">固件版本</div>
+                <div class="value mb-4">1.06-5-85E3FEB</div>
+                <div class="label mb-2">绑定时间</div>
+                <div class="value mb-4">2023-07-12 13:22</div>
+                <div class="label mb-2">使用者</div>
+                <div class="value mb-2">松阪老师</div>
+                <div class="value">13766278827</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="equipment-box">
+      <div class="title"><span>智脑恐龙</span><b>5</b>台</div>
+      <el-row :gutter="15">
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
+          <div class="box-card">
+            <el-row>
+              <el-col :span="9" class="img">
+                <div class="i kl"></div>
+                <div class="value">AI30200274</div>
+              </el-col>
+              <el-col :span="15" class="info">
+                <div class="label mb-2">固件版本</div>
+                <div class="value mb-4">1.06-5-85E3FEB</div>
+                <div class="label mb-2">绑定时间</div>
+                <div class="value mb-4">2023-07-12 13:22</div>
+                <div class="label mb-2">使用者</div>
+                <div class="value mb-2">松阪老师</div>
+                <div class="value">13766278827</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="equipment-box">
+      <div class="title"><span>智脑SUV</span><b>5</b>台</div>
+      <el-row :gutter="15">
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
+          <div class="box-card">
+            <el-row>
+              <el-col :span="9" class="img">
+                <div class="i suv"></div>
+                <div class="value">AI30200274</div>
+              </el-col>
+              <el-col :span="15" class="info">
+                <div class="label mb-2">固件版本</div>
+                <div class="value mb-4">1.06-5-85E3FEB</div>
+                <div class="label mb-2">绑定时间</div>
+                <div class="value mb-4">2023-07-12 13:22</div>
+                <div class="label mb-2">使用者</div>
+                <div class="value mb-2">松阪老师</div>
+                <div class="value">13766278827</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="equipment-box">
+      <div class="title"><span>智脑UFO</span><b>5</b>台</div>
+      <el-row :gutter="15">
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
+          <div class="box-card">
+            <el-row>
+              <el-col :span="9" class="img">
+                <div class="i ufo"></div>
+                <div class="value">AI30200274</div>
+              </el-col>
+              <el-col :span="15" class="info">
+                <div class="label mb-2">固件版本</div>
+                <div class="value mb-4">1.06-5-85E3FEB</div>
+                <div class="label mb-2">绑定时间</div>
+                <div class="value mb-4">2023-07-12 13:22</div>
+                <div class="label mb-2">使用者</div>
+                <div class="value mb-2">松阪老师</div>
+                <div class="value">13766278827</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="equipment-box">
+      <div class="title"><span>智脑积木</span><b>5</b>台</div>
+      <el-row :gutter="15">
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
+          <div class="box-card">
+            <el-row>
+              <el-col :span="9" class="img">
+                <div class="i jm"></div>
+                <div class="value">AI30200274</div>
+              </el-col>
+              <el-col :span="15" class="info">
+                <div class="label mb-2">固件版本</div>
+                <div class="value mb-4">1.06-5-85E3FEB</div>
+                <div class="label mb-2">绑定时间</div>
+                <div class="value mb-4">2023-07-12 13:22</div>
+                <div class="label mb-2">使用者</div>
+                <div class="value mb-2">松阪老师</div>
+                <div class="value">13766278827</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.equipment-container {
+  position: relative;
+  padding: 20px 30px;
+}
+.equipment-search {
+  margin-bottom: 20px;
+  font-size: 16px;
+  .el-select {
+    width: 180px;
+    margin: 0 20px 0 0;
+  }
+  .el-input {
+    width: 180px;
+    margin: 0;
+  }
+  :deep(.el-input__inner) {
+    font-size: 16px;
+  }
+  .el-button {
+    font-size: 16px;
+    padding: 0 26px;
+    margin: 0 20px;
+    border-radius: 12px;
+  }
+}
+/* 自定义 el-select 样式 */
+:deep(.el-input__wrapper) {
+  background: #ffffff;
+  border-radius: 12px;
+}
+:deep(.el-input__wrapper) {
+  box-shadow: none !important;
+}
+:deep(.el-select) {
+  --el-select-input-focus-border-color: none !important;
+}
+:deep(.el-select .el-input__wrapper.is-focus) {
+  box-shadow: none !important;
+}
+:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
+  box-shadow: none !important;
+}
+.equipment-box {
+  .title {
+    font-size: 16px;
+    color: #4284f2;
+    text-indent: 0.5em;
+    span {
+      font-size: 24px;
+      display: inline-block;
+      min-width: 180px;
+    }
+    b {
+      font-size: 28px;
+    }
+  }
+  .box-card {
+    background: #ffffff;
+    border-radius: 30px;
+    border: 1px solid #e6e8eb;
+    position: relative;
+    padding: 20px 0;
+    font-size: 14px;
+    margin-bottom: 10px;
+    .info {
+      border-left: 1px solid #e0e6f1;
+      padding-left: 28px;
+      line-height: 14px;
+      .label {
+        color: #999999;
+      }
+      .value {
+        color: #23283c;
+      }
+    }
+    .img {
+      text-align: center;
+      .i {
+        width: 120px;
+        height: 120px;
+        margin: 0 auto;
+        &.nj {
+          background: url("../../assets/equipment/NJ.png") center center
+            no-repeat;
+        }
+        &.sw {
+          background: url("../../assets/equipment/SW.png") center center
+            no-repeat;
+        }
+        &.kl {
+          background: url("../../assets/equipment/KL.png") center center
+            no-repeat;
+        }
+        &.suv {
+          background: url("../../assets/equipment/SUV.png") center center
+            no-repeat;
+        }
+        &.ufo {
+          background: url("../../assets/equipment/UFO.png") center center
+            no-repeat;
+        }
+        &.ppc {
+          background: url("../../assets/equipment/PPC.png") center center
+            no-repeat;
+        }
+        &.sc {
+          background: url("../../assets/equipment/SC.png") center center
+            no-repeat;
+        }
+        &.jm {
+          background: url("../../assets/equipment/JM.png") center center
+            no-repeat;
+        }
+      }
+    }
+  }
+}
+</style>