Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3bfa5393 1 parent 70d584f9

细节调整

Inline Side-by-side
Showing 5 changed files with 84 additions and 45 deletions
......@@ -19,6 +19,7 @@ declare module 'vue' {
ElImage: typeof import('element-ui/lib/image')['default']
ElInput: typeof import('element-ui/lib/input')['default']
ElRow: typeof import('element-ui/lib/row')['default']
ElTooltip: typeof import('element-ui/lib/tooltip')['default']
HagerBox: typeof import('./src/components/common/hagerBox.vue')['default']
HagerCarousel: typeof import('./src/components/hagerCarousel.vue')['default']
HagerFooter: typeof import('./src/components/common/hagerFooter.vue')['default']
......
<!--
* @Date: 2024-09-26 13:42:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-27 20:31:41
* @LastEditTime: 2024-09-30 16:26:28
* @FilePath: /hager/src/components/common/hagerFooter.vue
* @Description: 文件描述
-->
......@@ -124,7 +124,7 @@ export default {
margin-bottom: 0.5rem;
}
.link-info {
font-size: 0.75rem;
font-size: 0.85rem;
color: #FFF;
line-height: 2;
display: flex;
......
<!--
* @Date: 2024-09-26 13:42:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-30 11:34:14
* @LastEditTime: 2024-09-30 17:21:13
* @FilePath: /hager/src/components/common/hagerHeader.vue
* @Description: 文件描述
-->
......@@ -10,11 +10,11 @@
<el-row class="hidden-xs-only" style="background-color: #fff;">
<el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
<el-col :sm="20" :md="20" :lg="18" :xl="16" style="position: relative;height: 5rem;">
<el-row style="">
<el-row>
<el-col :sm="16" :md="16" :lg="16" :xl="16">
<div class="nav-wrapper">
<div>图标</div>
<div :class="[is_active === 'product' ? 'active' : '', 'item']" @click="onClickProduct">产品中心</div>
<div :class="[is_active === 'product' ? 'active' : '', 'item']" @click="onClickProduct" @mouseenter="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>
......@@ -24,13 +24,21 @@
</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;">
<i class=el-icon-zoom-out></i>&nbsp;
<div class="nav-right">
<div class="search">
<i class=el-icon-search></i>&nbsp;
<input style="border: 0;background-color: #e3f1f7;" placeholder="搜索" />
</div>
<div style="margin: 0 1rem;"><i class=el-icon-eleme></i></div>
<div><i class=el-icon-eleme></i></div>
<div @click="goToWeb" class="tooltip">
<el-tooltip class="item" effect="dark" content="国际站" placement="bottom">
<i class=el-icon-orange style="font-size: 1.25rem;"></i>
</el-tooltip>
</div>
<div @click="goToLogin" class="tooltip">
<el-tooltip class="item" effect="dark" content="用户登录" placement="bottom">
<i class=el-icon-user style="font-size: 1.25rem;"></i>
</el-tooltip>
</div>
</div>
</el-col>
</el-row>
......@@ -229,6 +237,7 @@ export default {
watch: {
'$route' (to, from) {
this.is_active = to.meta.tag;
this.show = false;
}
},
methods: {
......@@ -301,7 +310,15 @@ export default {
}
});
this.closeMenu();
}
},
goToWeb () {
console.warn('暂无跳转');
},
goToLogin () {
this.$router.push({
path: '/login'
});
},
}
}
</script>
......@@ -407,5 +424,25 @@ export default {
color: @primary-color;
}
}
.nav-right {
display: flex;
height: 5rem;
align-items: center;
justify-content: right;
.search {
display: flex;
align-items: center;
border-radius: 1rem;
border: 1px solid #f5f5f5;
background-color: #e3f1f7;
padding: 0.5rem 1rem;
}
.tooltip {
margin: 0 1rem;
&:hover {
cursor: pointer;
}
}
}
}
</style>
......
<!--
* @Date: 2024-08-27 10:06:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-30 16:21:59
* @LastEditTime: 2024-09-30 16:57:53
* @FilePath: /hager/src/views/index.vue
* @Description: 文件描述
-->
......@@ -55,19 +55,7 @@
<hager-box class="box-n">
<hager-h1 title="产品中心" sub="Product Center"></hager-h1>
<div class="hager-product-center">
<div class="product-item">
<el-image style="width: 14rem; height: 14rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
<p style="margin-top: 1rem;">atS三型特决井天</p>
</div>
<div class="product-item">
<el-image style="width: 14rem; height: 14rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
<p style="margin-top: 1rem;">atS三型特决井天</p>
</div>
<div class="product-item">
<el-image style="width: 14rem; height: 14rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
<p style="margin-top: 1rem;">atS三型特决井天</p>
</div>
<div class="product-item">
<div v-for="(item, index) in 4" :key="index" class="product-item">
<el-image style="width: 14rem; height: 14rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
<p style="margin-top: 1rem;">atS三型特决井天</p>
</div>
......@@ -315,6 +303,12 @@ export default {
color: #333;
border-radius: 8px;
background-color: #f3f3f3;
transition: transform 0.3s ease-in-out;
&:hover {
cursor: pointer;
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
}
}
}
......
<!--
* @Date: 2024-09-27 16:53:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-30 14:09:02
* @LastEditTime: 2024-09-30 16:48:54
* @FilePath: /hager/src/views/product/index.vue
* @Description: 文件描述
-->
......@@ -22,24 +22,8 @@
<div class="product-nav-title">按产品类别查找</div>
<el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_input"></el-input>
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="低压主配电" name="1">
<div class="p-item">acb hw01 空气断路器</div>
<div class="p-item">unimes（优跃）开关柜</div>
<div class="p-item">unimes（优跃）面板开关</div>
<div class="p-item">acb hw04 空气断路器</div>
<div class="p-item">acb hwo5 空气断路器</div>
<div class="p-item">acb hw06 空气断路器</div>
<div class="p-item">acb hwo7 空气断路器</div>
</el-collapse-item>
<el-collapse-item title="分配电" name="2">
</el-collapse-item>
<el-collapse-item title="终端配电" name="3">
</el-collapse-item>
<el-collapse-item title="开关面板" name="4">
</el-collapse-item>
<el-collapse-item title="酒店客控" name="5">
</el-collapse-item>
<el-collapse-item title="智能家居" name="6">
<el-collapse-item v-for="(item, index) in c_list" :key="index" :title="item.title" :name="item.name">
<div @click="goToP(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.name }}</div>
</el-collapse-item>
</el-collapse>
</div>
......@@ -71,7 +55,22 @@ export default {
data () {
return {
search_input: '',
activeNames: ['1']
activeNames: ['1'],
c_list: [{
title: '低压主配电',
name: '1',
list: [{
id: '',
name: 'acb hw01 空气断路器'
}]
}, {
title: '分配电',
name: '2',
list: [{
id: '',
name: 'acb hw01 空气断路器'
}]
}]
}
},
mounted () {
......@@ -80,6 +79,14 @@ export default {
methods: {
handleChange(val) {
console.log(val);
},
goToP (item) { // 跳转产品详情
this.$router.push({
path: '/product/detail',
query: {
// id: id
}
});
}
}
}
......