Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a865425d 1 parent 78cdd05a

✨ feat: 新增测试功能显示

Inline Side-by-side
Showing 7 changed files with 138 additions and 56 deletions
......@@ -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']
......
<!--
* @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>
<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>
<router-view style="margin-top: 3rem;"></router-view>
<hager-footer></hager-footer>
</div>
</template>
......@@ -34,7 +28,6 @@ export default {
},
methods: {
}
}
</script>
......
<!--
* @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>
<!--
* @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">
<div style="display: flex; background-color: gray;">
<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>
<el-col :sm="20" :md="20" :lg="18" :xl="16">
<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>
</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>
......
<!--
* @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,24 +9,42 @@
<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">
<div style="display: flex; background-color: gray;">
<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 :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 @mouseover="onMouseOver" @mouseleave="onMouseLeave">产品中心</div>
<div>解决方案</div>
<div>新闻中心</div>
<div>招聘信息</div>
<div>关于海格</div>
<div>联系我们</div>
<div>首页</div>
</div>
</el-col>
<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>
......@@ -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>
......
/*
* @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,
......
<!--
* @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">
<div style="height: 5rem;">{{ index + 1 }}</div>
</div>
<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 {
}
......