Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b0fcf7ee 1 parent 1f355bbb

图标和文字调整

Inline Side-by-side
Showing 2 changed files with 35 additions and 23 deletions
<!--
* @Date: 2024-09-26 13:42:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-15 16:53:54
* @LastEditTime: 2024-10-16 10:32:24
* @FilePath: /hager/src/components/common/hagerHeader.vue
* @Description: 文件描述
-->
......@@ -13,7 +13,7 @@
<el-row>
<el-col :sm="6" :md="6" :lg="6" :xl="6">
<div class="nav-logo">
<div>图标</div>
<el-image style="width: auto; height: 2.5rem" src="https://cdn.ipadbiz.cn/hager/icon/logo@2x.png" fit="fit"></el-image>
</div>
</el-col>
<el-col :sm="10" :md="10" :lg="10" :xl="10">
......@@ -30,12 +30,14 @@
<div class="nav-right" style="float: right;">
<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>
<!-- <i class=el-icon-orange style="font-size: 1.25rem;"></i> -->
<el-image style="width: auto; height: 1rem" src="https://cdn.ipadbiz.cn/hager/icon/%E8%AF%AD%E8%A8%80@2x.png" fit="fit"></el-image>
</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-image style="width: auto; height: 1rem" src="https://cdn.ipadbiz.cn/hager/icon/%E7%99%BB%E9%99%86@2x.png" fit="fit"></el-image>
<!-- <i class=el-icon-user style="font-size: 1.25rem;"></i> -->
</el-tooltip>
</div>
</div>
......@@ -51,7 +53,7 @@
<el-col :sm="16" :md="16" :lg="16" :xl="16">
<div class="nav-wrapper">
<div :class="[is_active === 'product' ? 'active' : '', 'item']" @click="onClickProduct" @mouseenter="onClickProduct">
<i class="el-icon-s-operation"></i>
<el-image style="width: auto; height: 0.65rem" src="https://cdn.ipadbiz.cn/hager/icon/%E8%8F%9C%E5%8D%95@2x.png" fit="fit"></el-image>
产品中心
</div>
<div :class="[is_active === 'solution' ? 'active' : '', 'item']" @click="goTo('/solution/index')">解决方案</div>
......@@ -68,8 +70,8 @@
<div style="display: flex; width: 100%;">
<div class="product-left-wrapper">
<div :class="['product-left-item', p_index === index ? 'active' : '']" v-for="(item, index) in product_menu" :key="index" @click="onClick(item, index)">
<div style="display: flex; align-items: center;">
<el-image style="width: 2rem; height: 2rem" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
<div class="icon-text">
<el-image style="width: auto; height: 1.65rem" :src="item.icon" fit="fit"></el-image>
&nbsp;
{{ item.name }}
</div>
......@@ -138,6 +140,7 @@ export default {
test1: true,
product_menu: [{
name: '配电产品',
icon: 'https://cdn.ipadbiz.cn/hager/icon/%E9%85%8D%E7%94%B5%E4%BA%A7%E5%93%81@2x.png',
info: {
name: '配电产品',
desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
......@@ -249,6 +252,7 @@ export default {
}
}, {
name: '成套产品',
icon: 'https://cdn.ipadbiz.cn/hager/icon/%E4%BA%A7%E5%93%81@2x.png',
info: {
name: '成套产品',
desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
......@@ -256,6 +260,7 @@ export default {
}
}, {
name: '开关面板',
icon: 'https://cdn.ipadbiz.cn/hager/icon/%E5%BC%80%E5%85%B3@2x.png',
info: {
name: '开关面板',
desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
......@@ -263,6 +268,7 @@ export default {
}
}, {
name: '智能控制',
icon: 'https://cdn.ipadbiz.cn/hager/icon/%E6%99%BA%E8%83%BD%E6%8E%A7%E5%88%B6@2x.png',
info: {
name: '智能控制',
desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
......@@ -452,6 +458,10 @@ export default {
i {
color: @primary-color;
}
.icon-text {
display: flex;
align-items: center;
}
}
}
.product-right-wrapper {
......@@ -498,6 +508,7 @@ export default {
&:hover {
cursor: pointer;
text-decoration: underline;
color: @primary-color;
}
}
}
......@@ -521,6 +532,7 @@ export default {
font-size: 0.95rem;
&:hover {
cursor: pointer;
color: @primary-color;
}
}
.active {
......
<!--
* @Date: 2024-08-27 10:06:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-15 18:40:38
* @LastEditTime: 2024-10-16 10:25:22
* @FilePath: /hager/src/views/index.vue
* @Description: 文件描述
-->
......@@ -13,7 +13,7 @@
</el-carousel-item>
</el-carousel>
<hager-box class="box-n">
<hager-h1 title="海格全球" sub="Hager Global"></hager-h1>
<hager-h1 title="海格全球" sub="Hager Group"></hager-h1>
<div class="hager-global">
<div class="hager-global-info-fold">
<p>海格集团是全球领先的电气及智能化解决方案和服务提供商，应用领域涵盖<span class="strong">住宅、商业建筑、公共建筑和工业。</span><i v-if="is_fold" class="el-icon-arrow-up" @click="toggleFold(true)"></i><i v-else class="el-icon-arrow-down" @click="toggleFold(false)"></i></p>
......@@ -84,7 +84,7 @@
</div>
</hager-box>
<hager-box class="box-n">
<hager-h1 title="产品中心" sub="Product Center"></hager-h1>
<hager-h1 title="产品中心" sub="Product"></hager-h1>
<div v-if="!is_xs" class="hager-product-center">
<el-row :gutter="15">
<el-col :span="6" v-for="(item, index) in product_list" :key="index">
......@@ -94,6 +94,9 @@
</div>
</el-col>
</el-row>
<div class="more-box" style="margin-top: 2rem;">
<hager-more></hager-more>
</div>
</div>
<div v-else>
<swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
......@@ -114,9 +117,6 @@
</div>
</div>
</div>
<div class="more-box" style="margin-top: 2rem;">
<hager-more></hager-more>
</div>
</hager-box>
<hager-box v-if="!is_xs" class="box-2n">
<hager-h1 title="最新资讯" sub="News"></hager-h1>
......@@ -166,8 +166,8 @@
</div>
</div>
<hager-box class="box-n">
<hager-h1 title="招聘信息" sub="Recruit"></hager-h1>
<p style="margin: 2rem 0;">心国近心，支注万你。海恰人囫指员光工，然于則行！我们哦这音齐稱央那八我们附行列，共同书与成功的扁草。用你的才罕，刨道九限可能！</p>
<hager-h1 title="招聘信息" sub="Recruitment"></hager-h1>
<p style="margin: 2rem 0;">德国匠心，专注为你。海格集团招贤纳士，携手前行！我们诚邀各界精英加入我们的行列，共同书写成功的篇章。用你的才华，创造无限可能！ </p>
<div class="more-box" style="margin-top: 2rem;">
<hager-more></hager-more>
</div>
......@@ -225,17 +225,17 @@ export default {
title: '4住宅解决方案'
}],
product_list: [{
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '三型特决井天'
src: 'https://cdn.ipadbiz.cn/hager/img/KNX%E6%99%BA%E8%83%BD%E6%8E%A7%E5%88%B6%E6%A8%A1%E5%9D%97@2x.png',
title: 'hw01 空气断路器'
}, {
src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
title: '三型特决井天'
src: 'https://cdn.ipadbiz.cn/hager/img/ats%E8%87%AA%E5%8A%A8%E8%BD%AC%E6%8D%A2%E5%BC%80%E5%85%B3@2x.png',
title: 'h3+ 智能塑壳断路器'
}, {
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '三型特决井天'
src: 'https://cdn.ipadbiz.cn/hager/img/h3+%20%E6%99%BA%E8%83%BD%E5%A1%91%E5%A3%B3%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
title: 'ats自动转换开关'
}, {
src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
title: '三型特决井天'
src: 'https://cdn.ipadbiz.cn/hager/img/hw+%20%E7%A9%BA%E6%B0%94%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
title: 'KNX智能控制模块'
}],
swiperOption: {
slidesPerView: 2,
......