Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b9c0e4c0 1 parent f07e5bd0

✨ feat: 基本自适应布局结构

Inline Side-by-side
Showing 7 changed files with 215 additions and 9 deletions
1 +<!--
2 + * @Date: 2024-09-26 13:36:06
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-09-26 13:40:04
5 + * @FilePath: /hager/index.html
6 + * @Description: 文件描述
7 +-->
1 <!doctype html> 8 <!doctype html>
2 <html lang="en"> 9 <html lang="en">
3 <head> 10 <head>
4 <meta charset="UTF-8" /> 11 <meta charset="UTF-8" />
5 <link rel="icon" type="image/svg+xml" href="/vite.svg" /> 12 <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 13 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 - <title>Vite + Vue</title> 14 + <title>海格电器</title>
8 </head> 15 </head>
9 <body> 16 <body>
10 <div id="app"></div> 17 <div id="app"></div>
......
1 +<!--
2 + * @Date: 2024-09-26 13:36:06
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-09-26 14:33:29
5 + * @FilePath: /hager/src/App.vue
6 + * @Description: 文件描述
7 +-->
1 <template> 8 <template>
2 - <div> 9 + <div class="">
3 - <router-view></router-view> 10 + <hager-header></hager-header>
11 + <el-row>
12 + <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
13 + <el-col :sm="20" :md="20" :lg="18" :xl="16">
14 + <router-view style="padding-top: 3rem;"></router-view>
15 + </el-col>
16 + <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
17 + </el-row>
18 + <hager-footer></hager-footer>
4 </div> 19 </div>
5 </template> 20 </template>
6 21
7 -<script setup> 22 +<script>
23 +import hagerHeader from '@/components/common/hagerHeader.vue';
24 +import hagerFooter from '@/components/common/hagerFooter.vue';
8 25
26 +export default {
27 + components: { hagerHeader, hagerFooter },
28 + data () {
29 + return {
30 +
31 + }
32 + },
33 + mounted () {
34 +
35 + },
36 + methods: {
37 +
38 + }
39 +}
9 </script> 40 </script>
10 41
11 -<style lang="less" scoped> 42 +<style lang="less">
43 +* {
44 + outline: none;
45 +}
46 +
47 +html,
48 +body {
49 + font-size: 16px;
50 + width: 100%;
51 + height: 100%;
52 + margin: 0;
53 + padding: 0;
54 + p {
55 + margin: 0;
56 + padding: 0;
57 + }
58 +}
12 59
60 +.global-center {
61 + position: relative;
62 + top: 50%;
63 + transform: translateY(-50%);
64 +}
13 </style> 65 </style>
......
1 +/*
2 + * @Date: 2022-07-26 09:49:54
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-08-19 17:11:29
5 + * @FilePath: /web/src/common/mixin.js
6 + * @Description: 文件描述
7 + */
8 +
9 +export default {
10 + // 初始化设置
11 + init: {
12 + mounted () {
13 + document.title = this.$route.meta.title;
14 + },
15 + methods: {
16 + },
17 + },
18 +};
1 +<!--
2 + * @Date: 2024-09-26 13:42:22
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-09-26 14:36:26
5 + * @FilePath: /hager/src/components/common/hagerFooter.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="hager-footer">
10 + <el-row class="hidden-xs-only">
11 + <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
12 + <el-col :sm="14" :md="14" :lg="13" :xl="12">
13 + <div style="display: flex; background-color: gray;">
14 + <div>图标</div>
15 + <div>产品中心</div>
16 + <div>解决方案</div>
17 + <div>新闻中心</div>
18 + <div>招聘信息</div>
19 + <div>关于海格</div>
20 + <div>联系我们</div>
21 + <div>首页</div>
22 + </div>
23 + </el-col>
24 + <el-col :sm="6" :md="6" :lg="5" :xl="4">
25 + <div style="display: flex; background-color: blue;">
26 + <div>搜索</div>
27 + <div>地球仪</div>
28 + <div>用户</div>
29 + </div>
30 + </el-col>
31 + <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
32 + </el-row>
33 + </div>
34 +</template>
35 +
36 +<script>
37 +import mixin from 'common/mixin';
38 +
39 +export default {
40 + mixins: [mixin.init],
41 + data () {
42 + return {
43 +
44 + }
45 + },
46 + mounted () {
47 +
48 + },
49 + methods: {
50 +
51 + }
52 +}
53 +</script>
54 +
55 +<style lang="less" scoped>
56 +.hager-footer {
57 +
58 +}
59 +</style>
1 +<!--
2 + * @Date: 2024-09-26 13:42:11
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-09-26 14:34:49
5 + * @FilePath: /hager/src/components/common/hagerHeader.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="hager-header">
10 + <el-row class="hidden-xs-only">
11 + <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
12 + <el-col :sm="14" :md="14" :lg="13" :xl="12">
13 + <div style="display: flex; background-color: gray;">
14 + <div>图标</div>
15 + <div>产品中心</div>
16 + <div>解决方案</div>
17 + <div>新闻中心</div>
18 + <div>招聘信息</div>
19 + <div>关于海格</div>
20 + <div>联系我们</div>
21 + <div>首页</div>
22 + </div>
23 + </el-col>
24 + <el-col :sm="6" :md="6" :lg="5" :xl="4">
25 + <div style="display: flex; background-color: blue;">
26 + <div>搜索</div>
27 + <div>地球仪</div>
28 + <div>用户</div>
29 + </div>
30 + </el-col>
31 + <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
32 + </el-row>
33 + </div>
34 +</template>
35 +
36 +<script>
37 +import mixin from 'common/mixin';
38 +
39 +export default {
40 + mixins: [mixin.init],
41 + data () {
42 + return {
43 +
44 + }
45 + },
46 + mounted () {
47 +
48 + },
49 + methods: {
50 +
51 + }
52 +}
53 +</script>
54 +
55 +<style lang="less" scoped>
56 +.hager-header {
57 + position: fixed;
58 + top: 0;
59 + left: 0;
60 + right: 0;
61 +}
62 +</style>
1 /* 1 /*
2 * @Date: 2024-08-26 10:42:15 2 * @Date: 2024-08-26 10:42:15
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-08-26 10:53:44 4 + * @LastEditTime: 2024-09-26 14:44:17
5 - * @FilePath: /vite-project/src/route.js 5 + * @FilePath: /hager/src/route.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
8 export default [{ 8 export default [{
...@@ -10,6 +10,7 @@ export default [{ ...@@ -10,6 +10,7 @@ export default [{
10 name: '首页', 10 name: '首页',
11 component: () => import('@/views/index'), 11 component: () => import('@/views/index'),
12 meta: { 12 meta: {
13 + title: '海格电器'
13 }, 14 },
14 children: [] 15 children: []
15 }] 16 }]
......
1 <!-- 1 <!--
2 * @Date: 2024-08-27 10:06:30 2 * @Date: 2024-08-27 10:06:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-26 13:37:46 4 + * @LastEditTime: 2024-09-26 14:42:54
5 * @FilePath: /hager/src/views/index.vue 5 * @FilePath: /hager/src/views/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 - <div></div> 9 + <div>
10 + <div v-for="(item, index) in 100" :key="index">
11 + <div style="height: 5rem;">{{ index + 1 }}</div>
12 + </div>
13 + </div>
10 </template> 14 </template>
11 15
12 <script> 16 <script>
17 +import mixin from '@/common/mixin'
13 18
14 export default { 19 export default {
20 + mixins: [mixin.init],
15 components: {}, 21 components: {},
16 data () { 22 data () {
17 return { 23 return {
18 } 24 }
19 }, 25 },
20 async mounted () { 26 async mounted () {
27 +
21 }, 28 },
22 methods: { 29 methods: {
23 30
......