✨ feat: 新增测试功能显示

hookehuyr
Commit a865425dd18aa6678f7fe1b596ba7e597dc943e9 a865425d 1 parent 78cdd05a
Showing 7 changed files with 118 additions and 36 deletions
components.d.ts
src/App.vue
src/components/common/hagerBox.vue
src/components/common/hagerFooter.vue
src/components/common/hagerHeader.vue
src/main.js
src/views/index.vue
--- a/components.d.ts
View file @a865425
+++ b/components.d.ts
View file @a865425
@@ -7,8 +7,11 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ElButton: typeof import('element-ui/lib/button')['default']
     ElCol: typeof import('element-ui/lib/col')['default']
+    ElCollapseTransition: typeof import('element-ui/lib/transitions/collapse-transition')['default']
     ElRow: typeof import('element-ui/lib/row')['default']
+    HagerBox: typeof import('./src/components/common/hagerBox.vue')['default']
     HagerFooter: typeof import('./src/components/common/hagerFooter.vue')['default']
     HagerHeader: typeof import('./src/components/common/hagerHeader.vue')['default']
     Navbar: typeof import('./src/components/navbar.vue')['default']
--- a/src/App.vue
View file @a865425
+++ b/src/App.vue
View file @a865425
 <!--
  * @Date: 2024-09-26 13:36:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-26 14:33:29
+ * @LastEditTime: 2024-09-26 17:16:14
  * @FilePath: /hager/src/App.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="">
     <hager-header></hager-header>
-    <el-row>
+    <router-view style="margin-top: 3rem;"></router-view>
-      <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
-      <el-col :sm="20" :md="20" :lg="18" :xl="16">
-        <router-view style="padding-top: 3rem;"></router-view>
-      </el-col>
-      <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
-    </el-row>
     <hager-footer></hager-footer>
   </div>
 </template>
@@ -34,7 +28,6 @@ export default {
   },
   methods: {
-
   }
 }
 </script>
--- a/src/components/common/hagerBox.vue 0 → 100644
View file @a865425
+++ b/src/components/common/hagerBox.vue 0 → 100644
View file @a865425
+<!--
+ * @Date: 2024-09-26 17:15:15
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-09-26 17:15:27
+ * @FilePath: /hager/src/components/common/hagerBox.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="hagerBox">
+    <el-row>
+      <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
+      <el-col :sm="20" :md="20" :lg="18" :xl="16">
+        <slot></slot>
+      </el-col>
+      <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import mixin from 'common/mixin';
+
+export default {
+  mixins: [mixin.init],
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.hagerBox {}
+</style>
--- a/src/components/common/hagerFooter.vue
View file @a865425
+++ b/src/components/common/hagerFooter.vue
View file @a865425
 <!--
  * @Date: 2024-09-26 13:42:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-26 14:36:26
+ * @LastEditTime: 2024-09-26 15:43:37
  * @FilePath: /hager/src/components/common/hagerFooter.vue
  * @Description: 文件描述
 -->
@@ -9,23 +9,31 @@
   <div class="hager-footer">
     <el-row class="hidden-xs-only">
       <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
-      <el-col :sm="14" :md="14" :lg="13" :xl="12">
+      <el-col :sm="20" :md="20" :lg="18" :xl="16">
-        <div style="display: flex; background-color: gray;">
+        <div style="display: flex; justify-content: space-between; color: #FFF;">
-          <div>图标</div>
+          <div>
-          <div>产品中心</div>
+            <div>产品目录</div>
+            <div>空气短路器</div>
+            <div>空气短路器</div>
+            <div>空气短路器</div>
+          </div>
+          <div>
             <div>解决方案</div>
-          <div>新闻中心</div>
+            <div>住宅解决方案</div>
-          <div>招聘信息</div>
+            <div>住宅解决方案</div>
-          <div>关于海格</div>
+            <div>住宅解决方案</div>
+          </div>
+          <div>
+            <div>企业</div>
+            <div>海格全球</div>
+            <div>海格全球</div>
+            <div>海格全球</div>
+          </div>
+          <div>
+            <div>海格电气在中国</div>
             <div>联系我们</div>
-          <div>首页</div>
+            <div>图标</div>
           </div>
-      </el-col>
-      <el-col :sm="6" :md="6" :lg="5" :xl="4">
-        <div style="display: flex; background-color: blue;">
-          <div>搜索</div>
-          <div>地球仪</div>
-          <div>用户</div>
         </div>
       </el-col>
       <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
@@ -54,6 +62,6 @@ export default {
 <style lang="less" scoped>
 .hager-footer {
-
+  background-color: #414141;
 }
 </style>
--- a/src/components/common/hagerHeader.vue
View file @a865425
+++ b/src/components/common/hagerHeader.vue
View file @a865425
 <!--
  * @Date: 2024-09-26 13:42:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-26 14:34:49
+ * @LastEditTime: 2024-09-26 16:52:12
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @Description: 文件描述
 -->
@@ -9,10 +9,12 @@
   <div class="hager-header">
     <el-row class="hidden-xs-only">
       <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
-      <el-col :sm="14" :md="14" :lg="13" :xl="12">
+      <el-col :sm="20" :md="20" :lg="18" :xl="16" style="position: relative;">
+        <el-row>
+          <el-col :sm="16" :md="16" :lg="16" :xl="16">
             <div style="display: flex; background-color: gray;">
               <div>图标</div>
-          <div>产品中心</div>
+              <div @mouseover="onMouseOver" @mouseleave="onMouseLeave">产品中心</div>
               <div>解决方案</div>
               <div>新闻中心</div>
               <div>招聘信息</div>
@@ -21,13 +23,29 @@
               <div>首页</div>
             </div>
           </el-col>
-      <el-col :sm="6" :md="6" :lg="5" :xl="4">
+          <el-col :sm="8" :md="8" :lg="8" :xl="8">
             <div style="display: flex; background-color: blue;">
               <div>搜索</div>
               <div>地球仪</div>
               <div>用户</div>
             </div>
           </el-col>
+        </el-row>
+        <el-collapse-transition>
+          <div v-show="show" style="position: absolute; top: 2rem; left: 0; width: 100%; height: auto; background-color: #f1f1f1;">
+            <div>
+              lorem ipsum dolor sit amet consectetur adipisicing elit.
+              lorem ipsum dolor sit amet consectetur adipisicing elit.
+              lorem ipsum dolor sit amet consectetur adipisicing elit.
+              lorem ipsum dolor sit amet consectetur adipisicing elit.
+              lorem ipsum dolor sit amet consectetur adipisicing elit.
+              lorem ipsum dolor sit amet consectetur adipisicing elit.
+              lorem ipsum dolor sit amet consectetur adipisicing elit.
+              lorem ipsum dolor sit amet consectetur adipisicing elit.
+            </div>
+          </div>
+        </el-collapse-transition>
+      </el-col>
       <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
     </el-row>
   </div>
@@ -40,14 +58,21 @@ export default {
   mixins: [mixin.init],
   data () {
     return {
-
+      show: true,
     }
   },
   mounted () {
   },
   methods: {
-
+    onMouseOver() {
+      // 当鼠标悬停时
+      this.show = true;
+    },
+    onMouseLeave() {
+      // 当鼠标离开时
+      this.show = false;
+    }
   }
 }
 </script>
@@ -58,5 +83,6 @@ export default {
   top: 0;
   left: 0;
   right: 0;
+  z-index: 9;
 }
 </style>
--- a/src/main.js
View file @a865425
+++ b/src/main.js
View file @a865425
 /*
  * @Date: 2024-08-26 10:12:56
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-26 15:24:16
+ * @LastEditTime: 2024-09-26 16:31:40
  * @FilePath: /hager/src/main.js
  * @Description: 文件描述
  */
@@ -15,10 +15,13 @@ import router from './router'
 import 'element-ui/lib/theme-chalk/display.css'; // 基于断点的隐藏类，用于在某些条件下隐藏元素
 // import '@/styles/element-ui/element-variables.scss' // 自定义主题, 不需要展示屏蔽
 // import { Button, Row, Col, } from 'element-ui';
+// collapse 展开折叠
+import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
 Vue.use(VueRouter);
 // Vue.use(ElementUI);
 // Vue.use(Button).use(Row).use(Col)
+Vue.component(CollapseTransition.name, CollapseTransition)
 new Vue({
   router,
--- a/src/views/index.vue
View file @a865425
+++ b/src/views/index.vue
View file @a865425
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-26 14:42:54
+ * @LastEditTime: 2024-09-26 17:18:46
  * @FilePath: /hager/src/views/index.vue
  * @Description: 文件描述
 -->
 <template>
   <div>
-    <div v-for="(item, index) in 100" :key="index">
+    <hager-box style="background-color: #fff;">
+      <div v-for="(item, index) in 10" :key="index">
         <div style="height: 5rem;">{{ index + 1 }}</div>
       </div>
+    </hager-box>
+    <hager-box style="background-color: #f1f1f1;">
+      <div v-for="(item, index) in 10" :key="index">
+        <div style="height: 5rem;">{{ index + 1 }}</div>
+      </div>
+    </hager-box>
   </div>
 </template>
 <script>
-import mixin from '@/common/mixin'
+import mixin from '@/common/mixin';
+import hagerBox from '@/components/common/hagerBox';
 export default {
   mixins: [mixin.init],
-  components: {},
+  components: { hagerBox },
   data () {
     return {
     }