Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
e6e31e4e 1 parent 7ffc187b

✨ feat: 新增关于海格首页

Inline Side-by-side
Showing 2 changed files with 185 additions and 1 deletions
/*
* @Date: 2024-08-26 10:42:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-30 09:47:44
* @LastEditTime: 2024-10-17 09:22:48
* @FilePath: /hager/src/route.js
* @Description: 文件描述
*/
......@@ -50,4 +50,13 @@ export default [{
tag: 'solution'
},
children: []
}, {
path: '/about',
name: '关于海格',
component: () => import('@/views/about'),
meta: {
title: '海格电器',
tag: 'about'
},
children: []
}]
......
<!--
* @Date: 2024-10-17 09:22:56
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-17 10:46:59
* @FilePath: /hager/src/views/about/index.vue
* @Description: 文件描述
-->
<template>
<div class="hager-about-page">
<hager-box class="top-img" :style="{ height: top_img_height, backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner04@2x.png)' }">
<div v-if="!is_xs" class="banner-text-wrapper top-center">
<div class="text">
<p class="title">海格E3可持续发展理念</p>
<p class="sub">Ethics 道德</p>
<p class="sub">Environment 环境</p>
<p class="sub">Energy 能源</p>
</div>
</div>
</hager-box>
<hager-box class="box-n" style="margin-top: 2rem;">
<el-row v-for="(item, index) in intro_list" :key="index" style="margin-bottom: 3rem;">
<el-col :span="12">
<div v-if="index % 2 === 0" class="about-img" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
<div v-else class="about-box">
<div class="title">
<p class="c">{{ item.c_title }}</p>
<p class="e">{{ item.e_title }}</p>
</div>
<div class="introduce" v-clamp="3">{{ item.content }}</div>
<div class="more">
<div class="btn" @click="goTo(item.link)">MORE</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div v-if="index % 2 === 0" class="about-box">
<div class="title">
<p class="c">{{ item.c_title }}</p>
<p class="e">{{ item.e_title }}</p>
</div>
<div class="introduce" v-clamp="3">{{ item.content }}</div>
<div class="more">
<div class="btn" @click="goTo(item.link)">MORE</div>
</div>
</div>
<div v-else class="about-img" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
</el-col>
</el-row>
</hager-box>
</div>
</template>
<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
export default {
components: { hagerBox },
mixins: [mixin.init],
data () {
return {
intro_list: [{
img: 'https://cdn.ipadbiz.cn/hager/img/about/g01@2x.png',
c_title: '海格全球',
e_title: 'Hager Group',
content: '海格集团是全球领先的电气及智能化解决方案和服务提供商，应用领域涵盖住宅、商业建筑、公共建筑和工业。',
link: '/about/global',
},{
img: 'https://cdn.ipadbiz.cn/hager/img/about/g02@2x.png',
c_title: '海格电气在中国',
e_title: 'Hager in China',
content: '海格电气于1997 年进入中国市场，至今已在中国设立了3家工厂和32个销售办事处，通过覆盖全国的营销网络及高资质合作伙伴，为中国客户提供全球领先的解决方案和高效服务。',
link: '/about/china',
},{
img: 'https://cdn.ipadbiz.cn/hager/img/about/g03@2x.png',
c_title: '创新设计',
e_title: 'Innovative Design',
content: '海格电气一直致力于创新，我们与客户共同着手面向未来的主题。海格电气仔细倾听客户的声音，以使我们的设计语言能够被普遍理解。',
link: '/about/design',
},{
img: 'https://cdn.ipadbiz.cn/hager/img/about/g04@2x.png',
c_title: '生产研发',
e_title: 'Production and R&D',
content: '为配合海格集团在全球的业务扩展计划，目前中国有2个生产基地，分别位于惠州和东莞，主要为亚太乃至全球市场提供优质的配电及相关产品。海格集团在全球拥有22家生产基地，主要分布于欧洲。',
link: '/about/product',
},{
img: 'https://cdn.ipadbiz.cn/hager/img/about/g05@2x.png',
c_title: '可持续发展',
e_title: 'Sustainable Development',
content: '海格集团是全球领先的电气及智能化解决方案和服务提供商，应用领域涵盖住宅、商业建筑、公共建筑和工业。',
link: '/about/development',
},{
img: 'https://cdn.ipadbiz.cn/hager/img/about/g06@2x.png',
c_title: '荣誉展示',
e_title: 'Honors',
content: '海格集团是行业创新领导者之一，我们与来自工业和电气领域的客户一起致力于引领面向未来的主题，如家庭互联、智能建筑技术、能源效率、生活辅助系统、电动交通、可再生能源。',
link: '/about/honors',
}]
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.hager-about-page {
.top-img {
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
.top-center {
position: absolute;
transform: translateY(100%); /* 垂直与水平居中 */
}
}
.about-img {
width: 100%;
height: 20rem;
background-repeat: no-repeat;
background-size: cover;
}
.about-box {
background-color: #F7F7F7;
position: relative; /* 父容器设置为相对定位 */
padding: 2rem;
height: 20rem; /* 让 .about-box 撑满父容器 */
box-sizing: border-box;
.title {
font-weight: bold;
.c {
font-size: 2rem;
color: @secondary-color;
}
.e {
font-size: 1.5rem;
color: @primary-color;
}
}
.introduce {
position: absolute; /* 绝对定位 */
overflow: auto; /* 防止内容过多时溢出 */
margin-top: 1rem;
padding-right: 1rem;
line-height: 1.75;
}
.more {
position: absolute; /* 固定在容器底部 */
bottom: 1rem;
.btn {
background-color: #F56400;
width: 8rem;
height: 1rem;
padding: 1rem;
color: #FFF;
text-align: center;
line-height: 1rem;
&:hover {
background-color: #FFF;
color: #F56400;
cursor: pointer;
border: 1px solid #F56400;
}
}
}
}
}
</style>