Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a86e211f 1 parent 2453fe7f

✨ feat: 新增公用颜色和样式

Inline Side-by-side
Showing 10 changed files with 102 additions and 33 deletions
/*
* @Date: 2022-07-26 09:49:54
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-08-19 17:11:29
* @FilePath: /web/src/common/mixin.js
* @LastEditTime: 2024-09-30 09:44:55
* @FilePath: /hager/src/common/mixin.js
* @Description: 文件描述
*/
......@@ -12,6 +12,11 @@ export default {
mounted () {
document.title = this.$route.meta.title;
},
data () {
return {
top_img_height: '35rem',
};
},
methods: {
},
},
......
<!--
* @Date: 2024-09-29 10:07:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-29 15:19:21
* @LastEditTime: 2024-09-30 10:06:04
* @FilePath: /hager/src/components/common/hagerH1.vue
* @Description: 文件描述
-->
......@@ -44,12 +44,12 @@ export default {
<style lang="less" scoped>
.hagerH1 {
.h1 {
color: #333;
color: @secondary-color;
font-size: 1.75rem;
font-weight: bold;
}
.sub {
color: #03aae3;
color: @primary-color;
font-size: 1.25rem;
font-weight: bold;
}
......
<!--
* @Date: 2024-09-26 13:42:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-29 14:27:53
* @LastEditTime: 2024-09-30 09:59:51
* @FilePath: /hager/src/components/common/hagerHeader.vue
* @Description: 文件描述
-->
......@@ -12,20 +12,20 @@
<el-col :sm="20" :md="20" :lg="18" :xl="16" style="position: relative;height: 5rem;">
<el-row style="">
<el-col :sm="16" :md="16" :lg="16" :xl="16">
<div style="display: flex;height: 5rem; align-items: center; justify-content: space-around;">
<div class="nav-wrapper">
<div>图标</div>
<div @click="onClickProduct">产品中心</div>
<div>解决方案</div>
<div>新闻中心</div>
<div>招聘信息</div>
<div>关于海格</div>
<div>联系我们</div>
<div>首页</div>
<div :class="[is_active === 'product' ? 'active' : '', 'item']" @click="onClickProduct">产品中心</div>
<div :class="[is_active === 'solution' ? 'active' : '', 'item']" @click="goTo('/solution/index')">解决方案</div>
<div :class="[is_active === '新闻中心' ? 'active' : '', 'item']">新闻中心</div>
<div :class="[is_active === '招聘信息' ? 'active' : '', 'item']">招聘信息</div>
<div :class="[is_active === '关于海格' ? 'active' : '', 'item']">关于海格</div>
<div :class="[is_active === '联系我们' ? 'active' : '', 'item']">联系我们</div>
<div :class="[is_active === 'index' ? 'active' : '', 'item']" @click="goTo('/')">首页</div>
</div>
</el-col>
<el-col :sm="8" :md="8" :lg="8" :xl="8">
<div style="display: flex; height: 5rem; align-items: center;justify-content: right;">
<div style="display: flex; align-items: center; border-radius: 1rem; border: 1px solid# f5f5f5; background-color: #e3f1f7; padding: 0.5rem 1rem;">
<div style="display: flex; align-items: center; border-radius: 1rem; border: 1px solid #f5f5f5; background-color: #e3f1f7; padding: 0.5rem 1rem;">
<i class=el-icon-zoom-out></i>&nbsp;
<input style="border: 0;background-color: #e3f1f7;" placeholder="搜索" />
</div>
......@@ -54,7 +54,7 @@
<div v-for="(item, index) in product_info.product" :key="index" class="product-right-center-item">
<div>{{ item.name }}</div>
<div>
<div v-for="(p, idx) in item.list" :key="idx">{{ p.name }}</div>
<div @click="goToP(p.id)" v-for="(p, idx) in item.list" :key="idx">{{ p.name }}</div>
</div>
</div>
</div>
......@@ -70,6 +70,7 @@
<script>
import mixin from 'common/mixin';
import { parseQueryString } from '@/utils/tools';
export default {
mixins: [mixin.init],
......@@ -198,11 +199,20 @@ export default {
}
}],
product_info: {},
is_active: '',
}
},
mounted () {
this.product_info = this.product_menu[0]['info'];
},
watch: {
'$route' (to, from) {
this.is_active = to.meta.tag;
// console.warn(from);
// console.warn(location.hash);
// console.warn(parseQueryString(window.location.href));
}
},
methods: {
onClickProduct() {
// 当鼠标悬停时
......@@ -213,6 +223,22 @@ export default {
},
closeMenu () {
this.show = false;
},
goTo (path) { // 跳转页面
if (this.$route.path !== path) { // 不能重复点击当前页面
this.$router.push({
path,
});
}
},
goToP (id) {
this.$router.push({
path: '/product/detail',
query: {
id: id
}
});
this.closeMenu();
}
}
}
......@@ -248,5 +274,19 @@ export default {
}
}
}
.nav-wrapper {
display: flex;
height: 5rem;
align-items: center;
justify-content: space-around;
.item {
&:hover {
cursor: pointer;
}
}
.active {
color: @primary-color;
}
}
}
</style>
......
<!--
* @Date: 2024-09-27 19:49:03
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-29 14:58:52
* @LastEditTime: 2024-09-30 10:04:50
* @FilePath: /hager/src/components/hagerCarousel.vue
* @Description: 文件描述
-->
......@@ -161,7 +161,7 @@ export default {
}
.thumbnail.active {
border: 2px solid #00f; /* 选中的缩略图边框样式 */
border: 2px solid @primary-color; /* 选中的缩略图边框样式 */
}
.main-image {
......
/*
* @Date: 2024-08-26 10:42:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-29 16:11:58
* @LastEditTime: 2024-09-30 09:47:44
* @FilePath: /hager/src/route.js
* @Description: 文件描述
*/
......@@ -10,7 +10,8 @@ export default [{
name: '首页',
component: () => import('@/views/index'),
meta: {
title: '海格电器'
title: '海格电器',
tag: 'index'
},
children: []
}, {
......@@ -18,7 +19,8 @@ export default [{
name: '二级目录',
component: () => import('@/views/product/index'),
meta: {
title: '海格电器'
title: '海格电器',
tag: 'product'
},
children: []
}, {
......@@ -26,7 +28,8 @@ export default [{
name: '详情页',
component: () => import('@/views/product/detail'),
meta: {
title: '海格电器'
title: '海格电器',
tag: 'product'
},
children: []
}, {
......@@ -34,7 +37,8 @@ export default [{
name: '解决方案',
component: () => import('@/views/solution/index'),
meta: {
title: '海格电器'
title: '海格电器',
tag: 'solution'
},
children: []
}, {
......@@ -42,7 +46,8 @@ export default [{
name: '解决方案详情',
component: () => import('@/views/solution/detail'),
meta: {
title: '海格电器'
title: '海格电器',
tag: 'solution'
},
children: []
}]
......
// 自定义颜色
@primary-color: #3498db;
@secondary-color: #03467c;
@text-color: #333;
@background-color: #f5f5f5;
<!--
* @Date: 2024-08-27 10:06:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-29 17:12:34
* @LastEditTime: 2024-09-30 09:45:01
* @FilePath: /hager/src/views/index.vue
* @Description: 文件描述
-->
<template>
<div class="hager-container">
<el-carousel height="40rem" :interval="8000">
<el-carousel :height="top_img_height" :interval="8000">
<el-carousel-item v-for="item in 4" :key="item">
<el-image style="width: 100%; height: 100%;" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
</el-carousel-item>
......@@ -151,6 +151,13 @@ export default {
// boxes[boxes.length - 1].classList.add('other');
// }
},
watch: {
// 监听$route对象的变化
$route(to, from) {
console.log('路由变化了：', to.path);
// 在此处执行你想要的逻辑
}
},
methods: {
}
......
<!--
* @Date: 2024-09-29 14:26:41
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-29 15:44:40
* @LastEditTime: 2024-09-30 10:06:55
* @FilePath: /hager/src/views/product/detail.vue
* @Description: 文件描述
-->
......@@ -135,7 +135,7 @@ export default {
box-sizing: border-box; /* 确保padding和border不会影响宽度计算 */
padding-top: 1rem;
background-color: #f0f0f0;
border-top: 4px solid #03aae3;
border-top: 4px solid @primary-color;
p {
line-height: 2;
}
......@@ -144,7 +144,7 @@ export default {
.product-info {
.info-control {
display: flex;
border-bottom: 4px solid #03aae3;
border-bottom: 4px solid @primary-color;
padding-bottom: 1rem;
margin-top: 2rem;
.control-left {
......@@ -159,7 +159,7 @@ export default {
cursor: pointer;
}
&.active {
background-color: #03aae3;
background-color: @primary-color;
color: #fff;
}
}
......@@ -177,7 +177,7 @@ export default {
span {
&:hover {
cursor: pointer;
color: #03aae3;
color: @primary-color;
text-decoration: underline;
}
}
......
<template>
<div class="hager-solution-index">
<el-image style="width: 100%; height: 35rem" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
<el-image :style="{ width: '100%', height: top_img_height }" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
<hager-box class="box-n">
<hager-h1 title="行业解决方案" sub="Industry Solutions" style="margin: 2rem 0;"></hager-h1>
<div> 海格电气产品已广泛应用于电子产品制造业，为其供配电系统稳定、可靠的运行提供可靠保障。 </div>
......
/*
* @Date: 2024-08-26 10:12:56
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-26 15:25:44
* @LastEditTime: 2024-09-30 09:58:00
* @FilePath: /hager/vite.config.js
* @Description: 文件描述
*/
......@@ -77,6 +77,13 @@ return defineConfig({
// mainFields: [''], // package.json 中，在解析包的入口点时尝试的字段列表。注意，这比从 exports 字段解析的情景导出优先级低：如果一个入口点从 exports 成功解析，主字段将被忽略。
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'], // 导入时想要省略的扩展名列表。注意，不 建议忽略自定义导入类型的扩展名（例如：.vue），因为它会干扰 IDE 和类型支持。
},
css: {
preprocessorOptions: {
less: {
additionalData: `@import "@/styles/variables.less";`, // 自动导入变量文件
},
},
},
logLevel: 'info', // 调整控制台输出的级别，默认为 'info'。
// clearScreen: true, // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息。命令行模式下请通过 --clearScreen false 设置。
server: {
......