Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
da0fa471 1 parent ab0c70db

✨ feat: 新增产品中心详情页

Inline Side-by-side
Showing 4 changed files with 201 additions and 7 deletions
<!--
* @Date: 2024-09-26 13:36:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-27 20:32:41
* @LastEditTime: 2024-09-29 14:33:50
* @FilePath: /hager/src/App.vue
* @Description: 文件描述
-->
<template>
<div style=" display: flex; flex-direction: column; min-height: 100vh;">
<hager-header></hager-header>
<router-view style="margin-top: 3rem; flex-grow: 1;"></router-view>
<router-view style="margin-top: 5rem; flex-grow: 1;"></router-view>
<hager-footer></hager-footer>
</div>
</template>
......
/*
* @Date: 2024-08-26 10:42:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-27 16:54:22
* @LastEditTime: 2024-09-29 14:27:23
* @FilePath: /hager/src/route.js
* @Description: 文件描述
*/
......@@ -21,4 +21,12 @@ export default [{
title: '海格电器'
},
children: []
}, {
path: '/product/detail',
name: '详情页',
component: () => import('@/views/product/detail'),
meta: {
title: '海格电器'
},
children: []
}]
......
<!--
* @Date: 2024-08-27 10:06:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-29 14:01:03
* @LastEditTime: 2024-09-29 15:03:02
* @FilePath: /hager/src/views/index.vue
* @Description: 文件描述
-->
<template>
<div class="hager-container">
<el-carousel height="40rem" :interval="8000">
<el-carousel height="40rem" :interval="8000" style="margin-top: 5rem;">
<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>
</el-carousel>
<hager-box class="box-n">
<!-- <hager-carousel></hager-carousel> -->
<hager-h1 title="海格全球" sub="Hager Global"></hager-h1>
<div class="hager-global">
<p>海格集团是全球领先的电气及智能化鲜决方案和服务提供商，应用领域涵盖住宅，商业建筑，公共建筑和工业。</p>
......@@ -133,7 +132,6 @@
<script>
import mixin from '@/common/mixin';
import hagerBox from '@/components/common/hagerBox';
// import hagerCarousel from '@/components/hagerCarousel';
import hagerH1 from '@/components/common/hagerH1.vue';
import hagerMore from '@/components/hagerMore.vue';
......
<!--
* @Date: 2024-09-29 14:26:41
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-29 15:44:40
* @FilePath: /hager/src/views/product/detail.vue
* @Description: 文件描述
-->
<template>
<div class="product-detail">
<hager-box>
<div>
<el-breadcrumb separator="/">
<el-breadcrumb-item>所有产品</el-breadcrumb-item>
<el-breadcrumb-item>配电产品</el-breadcrumb-item>
<el-breadcrumb-item>低压主配电</el-breadcrumb-item>
<el-breadcrumb-item>HW+系列空气断路器</el-breadcrumb-item>
</el-breadcrumb>
</div>
</hager-box>
<hager-box class="box-n">
<el-row :gutter="10">
<el-col :span="10">
<hager-carousel></hager-carousel>
</el-col>
<el-col :span="14">
<div>
<div style="font-size: 2rem; font-weight: bold;">HW+系列空气断路器</div>
<div style="margin: 1rem 0 2rem;">全新智能型hw+系列空气断路器，可搭载集通讯、自诊断、功能编程、维护预警、远程监控、测量、报警、保护功能于一体的Sentinel Energy控制器。</div>
<ul style="padding: 0 1rem;">
<li>实现谐波测量，实时监测电能质量；</li>
<li>图文显示多电量参数，系统状态一目了然；</li>
<li>支持Modbus远程通讯协议，无线蓝牙连接等多种通讯方式，全方位提升客户的数字化体验。</li>
</ul>
</div>
</el-col>
</el-row>
</hager-box>
<hager-box class="box-2n">
<hager-h1 title="产品优势" sub="Product advantages"></hager-h1>
<div class="product-advantage" style="">
<div class="item">
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
</div>
<div class="item">
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
</div>
<div class="item">
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
<p>极致的分断能力： 全系列Icu=Ics</p>
</div>
</div>
</hager-box>
<hager-box class="box-n">
<hager-h1 title="产品资料" sub="Product Information"></hager-h1>
<div class="product-info">
<div class="info-control">
<div class="control-left">
<div class="button active" style="margin-right: 1rem;">产品样本</div>
<div class="button" style="margin-right: 1rem;">技术参数</div>
<div class="button" style="margin-right: 1rem;">产品说明书</div>
<div class="button" style="margin-right: 1rem;">安装教程</div>
</div>
<div>
<div class="button">下载选中</div>
</div>
</div>
<div>
<div class="info-list">
<div class="info-list-title">
<i class="el-icon-document" style="font-size: 1.5rem;"></i>&nbsp;&nbsp;Hw+系列空气断路器&nbsp;&nbsp;17.77MB
</div>
<div class="info-list-control">
<span>预览</span>&nbsp;
<span>直接下载</span>&nbsp;
<i class="el-icon-folder-checked"></i>
</div>
</div>
</div>
</div>
</hager-box>
</div>
</template>
<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerCarousel from '@/components/hagerCarousel';
import hagerH1 from '@/components/common/hagerH1.vue';
export default {
components: { hagerBox, hagerCarousel, hagerH1 },
mixins: [mixin.init],
data () {
return {
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.product-detail {
.box-n {
background-color: #fff;
padding: 2rem 0;
}
.box-2n {
background-color: #f1f1f1;
padding: 2rem 0;
}
.product-advantage {
margin-top: 1rem;
display: flex;
flex-wrap: wrap;
gap: 3rem;
.item {
flex: 0 1 calc(50% - 3rem); /* 每行2个元素，减去gap的宽度 */
box-sizing: border-box; /* 确保padding和border不会影响宽度计算 */
padding-top: 1rem;
background-color: #f0f0f0;
border-top: 4px solid #03aae3;
p {
line-height: 2;
}
}
}
.product-info {
.info-control {
display: flex;
border-bottom: 4px solid #03aae3;
padding-bottom: 1rem;
margin-top: 2rem;
.control-left {
display: flex;
flex: 1 0 0;
}
.button {
background-color: #f3f3f3;
padding: 1rem 2.2rem;
border-radius: 5px;
&:hover {
cursor: pointer;
}
&.active {
background-color: #03aae3;
color: #fff;
}
}
}
.info-list {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 0;
color: #6b6b6b;
.info-list-title {
display: flex; align-items: center;
}
.info-list-control {
span {
&:hover {
cursor: pointer;
color: #03aae3;
text-decoration: underline;
}
}
}
}
}
}
</style>