首页

.gitignore

@@ -17,3 +17,4 @@ dist-ssr
 stats.html
 /docker/.run
 /.vite/deps_temp_327c80ff
+.vscode/settings.json

src/styles/variables.scss

@@ -47,8 +47,28 @@
   --fc-color-default: #000000;
   --fc-color-1: #00000090;
   --fc-color-2: #00000060;
+  --fc-color-3: #AFB9D0;
+  --fc-color-4: #A6ABB1;
+  --fc-color-5: #333333;
+  --fc-color-6: #666666;
+
+  --gray-bg-1: #F1F3F5;
+
+  --hj-fs-12: 12px;
+  --hj-fs-14: 14px;
+  --hj-fs-16: 16px;
+  --hj-fs-18: 18px;
+  --hj-fs-20: 20px;
+  --hj-fs-22: 22px;
+  --hj-fs-24: 24px;
+  --hj-fs-26: 26px;
+  --hj-fs-28: 28px;
+  --hj-fs-30: 30px;
+  --hj-fs-32: 32px;
+  --hj-fs-34: 34px;
+  --hj-fs-36: 36px;
+  --hj-fs-38: 38px;
 
-  --gray-bg-1: #F1F3F5
 }
 
 

src/views/main/components/header.vue

@@ -1,13 +1,68 @@
-<script setup lang="ts"></script>
-
 <template>
-  <div class="main-header">dd</div>
+  <div class="main-header">
+    <div class="main-logo">
+      <img src="@/assets/logo.png" alt="">
+      <span>维修检测平台</span>
+    </div>
+    <div class="main-user" ref="buttonRef" @click="onClickOutside">
+      <span class="user-name">李明华</span>
+      <img src="@/assets/logo.png" alt="">
+    </div>
+  </div>
+
+  <el-popover ref="popoverRef" :virtual-ref="buttonRef" trigger="click" title="" virtual-triggering>
+    <div>退出登录</div>
+  </el-popover>
 </template>
 
+<script setup lang="ts">
+import { ref, unref } from "vue";
+import { ClickOutside as vClickOutside } from "element-plus";
+
+const buttonRef = ref();
+const popoverRef = ref();
+const onClickOutside = () => {
+  unref(popoverRef).popperRef?.delayHide?.();
+};
+</script>
+
 <style scoped lang="scss">
 .main-header {
   width: 100%;
   height: $main-header-height;
   background-color: $hj-white-1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+
+  .main-logo {
+    img {
+      vertical-align: middle;
+      width: 36px;
+      height: 36px;
+    }
+
+    span {
+      font-size: var(--hj-fs-16);
+      color: var(--fc-color-3);
+    }
+  }
+
+  .main-user {
+    cursor: pointer;
+
+    img {
+      vertical-align: middle;
+      width: 18px;
+      height: 20px;
+    }
+
+    .user-name {
+      margin-right: 10px;
+      font-size: var(--hj-fs-14);
+      color: var(--fc-color-4);
+    }
+  }
 }
 </style>

src/views/main/components/layout.vue

@@ -12,6 +12,7 @@
 
 <style scoped lang="scss">
 .layout {
+  position: relative;
   height: calc(100vh - $main-header-height);
   flex: 1;
   background-color: var(--gray-bg-1);

src/views/modules/home/components/add.vue

@@ -0,0 +1,41 @@
+<template>
+	<form @submit.prevent="handleSubmit">
+		<div>
+			<label for="name">Name:</label>
+			<input type="text" id="name" v-model="form.name" required>
+		</div>
+		<div>
+			<label for="email">Email:</label>
+			<input type="email" id="email" v-model="form.email" required>
+		</div>
+		<button type="submit">Submit</button>
+	</form>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive } from 'vue';
+
+export default defineComponent({
+	name: 'AddForm',
+	setup() {
+		const form = reactive({
+			name: '',
+			email: ''
+		});
+
+		const handleSubmit = () => {
+			console.log('Form submitted:', form);
+			// Here you can add code to send the form data to your backend or handle it as needed
+		};
+
+		return {
+			form,
+			handleSubmit
+		};
+	}
+});
+</script>
+
+<style scoped>
+/* Add your styles here */
+</style>

src/views/modules/home/home.vue

@@ -1,7 +1,310 @@
-<script setup lang="ts"></script>
-
 <template>
-  <div class="mainContentBox">dfdfas</div>
+  <div class="mainContentBox">
+    <div class="content-head">
+      <div class="head-box-all">
+        <div class="box-all">
+          <el-checkbox
+            v-model="checkAll"
+            :indeterminate="isIndeterminate"
+            @change="handleCheckAllChange"
+          >
+          </el-checkbox>
+          <span>显示全部</span>
+        </div>
+        <div class="box-num">{{ checkedCities.length }}</div>
+        <div class="box-text">工程类型</div>
+      </div>
+      <div class="head-box-group">
+        <el-checkbox-group
+          v-model="checkedCities"
+          @change="handleCheckedCitiesChange"
+        >
+          <div class="head-box-item" v-for="city in cities" :key="city">
+            <el-checkbox label="" :value="city"></el-checkbox>
+            <div class="name">射频类</div>
+            <div class="num">99+</div>
+          </div>
+        </el-checkbox-group>
+      </div>
+    </div>
+    <div class="content-body">
+      <div class="cotent-btns">
+        <div>工程列表</div>
+        <div>
+          <el-button type="primary">
+            <span class="add">+</span>
+            新增工程
+          </el-button>
+          <el-button class="active">
+            <i />
+            按时间倒序
+          </el-button>
+          <el-button class="normal">
+            <i />
+            按创建人姓名
+          </el-button>
+        </div>
+      </div>
+
+      <div class="content-list">
+        <div v-for="item in 10" :key="item" class="content-list-item">
+          <div class="list-item-flex">
+            <div class="list-itme-tit">变频模块</div>
+            <div>
+              <span class="item-gray">发布</span><el-switch v-model="value" />
+            </div>
+          </div>
+          <div class="list-item-flex">
+            <div><span class="item-gray">工程类型：</span>1</div>
+            <div><span class="item-gray">版本：</span>1</div>
+          </div>
+          <div class="list-item-flex">
+            <div><span class="item-gray">开发人员：</span>受到1</div>
+            <div><span class="item-gray">更新时间：</span>1</div>
+          </div>
+          <div class="list-item-btns">
+            <span>
+              <el-icon>
+                <Edit />
+              </el-icon>
+            </span>
+            <span>
+              <el-icon>
+                <DeleteFilled />
+              </el-icon>
+            </span>
+            <span>
+              <el-icon>
+                <Tools />
+              </el-icon>
+            </span>
+            <span>
+              <el-icon>
+                <CaretRight />
+              </el-icon>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<style scoped lang="scss"></style>
+<script lang="ts" setup>
+import { ref } from "vue";
+
+import type { CheckboxValueType } from "element-plus";
+
+const checkAll = ref(false);
+const isIndeterminate = ref(true);
+const checkedCities = ref(["Shanghai", "Beijing"]);
+const cities = [
+  "Shanghai",
+  "Beijing",
+  "Guangzhou",
+  "Shenzhen",
+  "1",
+  "2",
+  "3",
+  "4",
+];
+
+const handleCheckAllChange = (val: CheckboxValueType) => {
+  checkedCities.value = val ? cities : [];
+  isIndeterminate.value = false;
+};
+const handleCheckedCitiesChange = (value: CheckboxValueType[]) => {
+  const checkedCount = value.length;
+  checkAll.value = checkedCount === cities.length;
+  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length;
+};
+
+const value = ref(true);
+
+import AddComponent from "@/components/add.vue"; // Adjust the path as necessary
+
+// Existing reactive references and methods...
+
+// Register the child component locally
+const AddComponent = defineAsyncComponent(() => import("@/components/add.vue"));
+</script>
+
+<style scoped lang="scss">
+.mainContentBox {
+  position: absolute;
+  width: 100%;
+
+  .content-head {
+    color: var(--hj-white-1);
+    display: flex;
+    height: 100px;
+    background: var(--gray-bg-1);
+    // width: 100%;
+    // overflow: hidden;
+    min-width: 0;
+
+    .head-box-all {
+      padding: 6px;
+      box-sizing: border-box;
+      border-radius: 4px 0 0 4px;
+      width: 90px;
+      height: 100px;
+      background: linear-gradient(270deg, #3b7cff 0%, #8aa9ec 100%);
+      color: var(--hj-white-1);
+      font-size: var(--hj-fs-12);
+      text-align: center;
+
+      .box-all {
+        color: var(--hj-white-1);
+        font-size: var(--hj-fs-12);
+      }
+
+      .box-num {
+        text-align: center;
+        font-size: var(--hj-fs-24);
+      }
+    }
+
+    .head-box-group {
+      flex: 1;
+
+      .el-checkbox-group {
+        height: 100%;
+        width: 100%;
+        overflow-x: auto;
+        overflow-y: hidden;
+        white-space: nowrap;
+        display: flex;
+        align-content: center;
+        align-items: center;
+        flex-direction: row;
+
+        .head-box-item {
+          position: relative;
+          flex: 0 0 182px;
+          font-size: var(--hj-fs-14);
+          margin-top: 16px;
+          padding: 6px;
+          margin-left: 12px;
+          height: 67px;
+          background: linear-gradient(90deg, #3cbaff 0%, #3b7cff 100%);
+          border-radius: 4px 4px 4px 4px;
+          color: var(--hj-white-1);
+          text-align: center;
+
+          .el-checkbox {
+            position: absolute;
+            left: 6px;
+            top: 0;
+          }
+
+          .name {
+            line-height: 16px;
+            margin-top: 12px;
+            font-size: var(--hj-fs-14);
+          }
+
+          .num {
+            line-height: 26px;
+            font-size: var(--hj-fs-20);
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+
+  .content-body {
+    .cotent-btns {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 26px;
+      margin-bottom: 12px;
+
+      .add {
+        width: 12px;
+        height: 12px;
+        line-height: 12px;
+        border-radius: 12px;
+        text-align: center;
+        background-color: #fff;
+        color: #3b7cff;
+        margin-right: 10px;
+      }
+
+      .active,
+      .normal {
+        i {
+          width: 14px;
+          height: 14px;
+          border-radius: 14px;
+          vertical-align: middle;
+          margin-right: 10px;
+        }
+      }
+
+      .active {
+        border: 1px solid #1989fa;
+        color: #1871f8;
+
+        i {
+          border: 4px solid #3b7cff;
+        }
+      }
+
+      .normal {
+        i {
+          border: 1px solid #d5d8de;
+        }
+      }
+    }
+  }
+
+  .content-list {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+
+    .content-list-item {
+      border: 1px solid #ccc;
+      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
+      border-radius: 4px 4px 4px 4px;
+      padding-top: 12px;
+    }
+
+    .list-item-flex {
+      margin-bottom: 12px;
+      padding: 0 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: var(--hj-fs-12);
+      color: var(--fc-color-5);
+
+      .list-itme-tit {
+        font-size: var(--hj-fs-14);
+        font-weight: bold;
+      }
+
+      .item-gray {
+        color: var(--fc-color-3);
+      }
+    }
+
+    .list-item-btns {
+      height: 37px;
+      line-height: 37px;
+      color: var(--fc-color-6);
+      display: flex;
+      justify-content: space-around;
+      border-top: 1px solid rgba(175, 185, 208, 0.3);
+
+      span {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>