Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a29a1b93 1 parent 4aa73da9

✨ feat: 底部组件完善显示样式

Inline Side-by-side
Showing 1 changed file with 113 additions and 30 deletions
<!--
* @Date: 2024-09-26 13:42:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-26 15:43:37
* @LastEditTime: 2024-09-27 19:34:39
* @FilePath: /hager/src/components/common/hagerFooter.vue
* @Description: 文件描述
-->
<template>
<div class="hager-footer">
<el-row class="hidden-xs-only">
<el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
<el-col :sm="20" :md="20" :lg="18" :xl="16">
<div style="display: flex; justify-content: space-between; color: #FFF;">
<hager-box>
<el-row :gutter="0" style="color: #FFF; margin: 2rem 0;">
<el-col :span="14">
<el-row :gutter="0">
<el-col :span="8">
<div class="link-box">
<div class="link-title">产品目录</div>
<div class="link-info">
<p>空气断路器</p>
<p>塑壳断路器</p>
<p>自动转换开关</p>
<p>接触器及热过载继电器</p>
<p>隔离开关</p>
<p>配电箱</p>
<p>终端配电</p>
<p>Unimes开关柜</p>
<p>Berker</p>
<p>志系列</p>
<p>KNX控制系统</p>
<p>RCU客房控制系统</p>
<p>Agardio数字化能源解决方案</p>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="link-box">
<div class="link-title">解决方案</div>
<div class="link-info">
<p>住宅解决方案</p>
<p>商建解决方案</p>
<p>公建解决方案</p>
<p>供电局解决方案</p>
<p>发电解决方案</p>
<p>石油石化解决方案</p>
<p>冶金解决方案</p>
<p>电子解决方案</p>
<p>通信解决方案</p>
<p>算力解决方案</p>
<p>交通解决方案</p>
<p>其它解决方案</p>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="link-box">
<div class="link-title">企业</div>
<div class="link-info">
<p>海格全球</p>
<p>海格电气在中国</p>
<p>创新设计与用户体验</p>
<p>生产研发与服务</p>
<p>可持续发展的企业文化</p>
<p>荣誉展示</p>
</div>
</div>
</el-col>
</el-row>
</el-col>
<el-col :span="10">
<div>
<div>产品目录</div>
<div>空气短路器</div>
<div>空气短路器</div>
<div>空气短路器</div>
<div class="link-box" style="margin-bottom: 2rem;">
<div class="link-title">海格电气在中国</div>
<div class="link-info">
<div>来自德国的海格电气，延承德系基因的匠心与专业，为全球住宅、酒店、医院、公共建筑、商业建筑、工业及能源领域，提供安全、稳定的电气设施与服务。坚持可持续发展，专注为你，构建更安全、更清洁、更愉悦的未来电气世界。</div>
</div>
</div>
<div class="link-box">
<div class="link-title">联系我们</div>
<div class="link-info link-contact">
<p>海格电气中国总部</p>
<p>上海市静安区山西北路99号苏河湾中心21层01、02单元</p>
<p>粤ICP备2021117768号-3</p>
</div>
</div>
<div style="margin-top: 2rem;">
<el-image style="width: 3rem; height: 3rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
</div>
</div>
<div>
<div>解决方案</div>
<div>住宅解决方案</div>
<div>住宅解决方案</div>
<div>住宅解决方案</div>
</div>
<div>
<div>企业</div>
<div>海格全球</div>
<div>海格全球</div>
<div>海格全球</div>
</div>
<div>
<div>海格电气在中国</div>
<div>联系我们</div>
<div>图标</div>
</div>
</div>
</el-col>
<el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
</el-row>
</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 {
......@@ -63,5 +115,36 @@ export default {
<style lang="less" scoped>
.hager-footer {
background-color: #414141;
.link-box {
.link-title {
font-size: 1.15rem;
font-weight: 600;
color: #FFF;
margin-bottom: 0.5rem;
}
.link-info {
font-size: 0.75rem;
color: #FFF;
line-height: 2;
display: flex;
flex-direction: column;
p {
display: inline-block;
&:hover {
text-decoration: underline;
cursor: pointer;
}
}
&.link-contact {
p {
color: #7a98c7;
&:hover {
text-decoration: underline;
cursor: pointer;
}
}
}
}
}
}
</style>
......