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
1 <!-- 1 <!--
2 * @Date: 2024-09-26 13:36:06 2 * @Date: 2024-09-26 13:36:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-27 20:32:41 4 + * @LastEditTime: 2024-09-29 14:33:50
5 * @FilePath: /hager/src/App.vue 5 * @FilePath: /hager/src/App.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div style=" display: flex; flex-direction: column; min-height: 100vh;"> 9 <div style=" display: flex; flex-direction: column; min-height: 100vh;">
10 <hager-header></hager-header> 10 <hager-header></hager-header>
11 - <router-view style="margin-top: 3rem; flex-grow: 1;"></router-view> 11 + <router-view style="margin-top: 5rem; flex-grow: 1;"></router-view>
12 <hager-footer></hager-footer> 12 <hager-footer></hager-footer>
13 </div> 13 </div>
14 </template> 14 </template>
......
1 /* 1 /*
2 * @Date: 2024-08-26 10:42:15 2 * @Date: 2024-08-26 10:42:15
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-27 16:54:22 4 + * @LastEditTime: 2024-09-29 14:27:23
5 * @FilePath: /hager/src/route.js 5 * @FilePath: /hager/src/route.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -21,4 +21,12 @@ export default [{ ...@@ -21,4 +21,12 @@ export default [{
21 title: '海格电器' 21 title: '海格电器'
22 }, 22 },
23 children: [] 23 children: []
24 +}, {
25 + path: '/product/detail',
26 + name: '详情页',
27 + component: () => import('@/views/product/detail'),
28 + meta: {
29 + title: '海格电器'
30 + },
31 + children: []
24 }] 32 }]
......
1 <!-- 1 <!--
2 * @Date: 2024-08-27 10:06:30 2 * @Date: 2024-08-27 10:06:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-29 14:01:03 4 + * @LastEditTime: 2024-09-29 15:03:02
5 * @FilePath: /hager/src/views/index.vue 5 * @FilePath: /hager/src/views/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hager-container"> 9 <div class="hager-container">
10 - <el-carousel height="40rem" :interval="8000"> 10 + <el-carousel height="40rem" :interval="8000" style="margin-top: 5rem;">
11 <el-carousel-item v-for="item in 4" :key="item"> 11 <el-carousel-item v-for="item in 4" :key="item">
12 <el-image style="width: 100%; height: 100%;" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image> 12 <el-image style="width: 100%; height: 100%;" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
13 </el-carousel-item> 13 </el-carousel-item>
14 </el-carousel> 14 </el-carousel>
15 <hager-box class="box-n"> 15 <hager-box class="box-n">
16 - <!-- <hager-carousel></hager-carousel> -->
17 <hager-h1 title="海格全球" sub="Hager Global"></hager-h1> 16 <hager-h1 title="海格全球" sub="Hager Global"></hager-h1>
18 <div class="hager-global"> 17 <div class="hager-global">
19 <p>海格集团是全球领先的电气及智能化鲜决方案和服务提供商，应用领域涵盖住宅，商业建筑，公共建筑和工业。</p> 18 <p>海格集团是全球领先的电气及智能化鲜决方案和服务提供商，应用领域涵盖住宅，商业建筑，公共建筑和工业。</p>
...@@ -133,7 +132,6 @@ ...@@ -133,7 +132,6 @@
133 <script> 132 <script>
134 import mixin from '@/common/mixin'; 133 import mixin from '@/common/mixin';
135 import hagerBox from '@/components/common/hagerBox'; 134 import hagerBox from '@/components/common/hagerBox';
136 -// import hagerCarousel from '@/components/hagerCarousel';
137 import hagerH1 from '@/components/common/hagerH1.vue'; 135 import hagerH1 from '@/components/common/hagerH1.vue';
138 import hagerMore from '@/components/hagerMore.vue'; 136 import hagerMore from '@/components/hagerMore.vue';
139 137
......
1 +<!--
2 + * @Date: 2024-09-29 14:26:41
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-09-29 15:44:40
5 + * @FilePath: /hager/src/views/product/detail.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="product-detail">
10 + <hager-box>
11 + <div>
12 + <el-breadcrumb separator="/">
13 + <el-breadcrumb-item>所有产品</el-breadcrumb-item>
14 + <el-breadcrumb-item>配电产品</el-breadcrumb-item>
15 + <el-breadcrumb-item>低压主配电</el-breadcrumb-item>
16 + <el-breadcrumb-item>HW+系列空气断路器</el-breadcrumb-item>
17 + </el-breadcrumb>
18 + </div>
19 + </hager-box>
20 + <hager-box class="box-n">
21 + <el-row :gutter="10">
22 + <el-col :span="10">
23 + <hager-carousel></hager-carousel>
24 + </el-col>
25 + <el-col :span="14">
26 + <div>
27 + <div style="font-size: 2rem; font-weight: bold;">HW+系列空气断路器</div>
28 + <div style="margin: 1rem 0 2rem;">全新智能型hw+系列空气断路器，可搭载集通讯、自诊断、功能编程、维护预警、远程监控、测量、报警、保护功能于一体的Sentinel Energy控制器。</div>
29 + <ul style="padding: 0 1rem;">
30 + <li>实现谐波测量，实时监测电能质量；</li>
31 + <li>图文显示多电量参数，系统状态一目了然；</li>
32 + <li>支持Modbus远程通讯协议，无线蓝牙连接等多种通讯方式，全方位提升客户的数字化体验。</li>
33 + </ul>
34 + </div>
35 + </el-col>
36 + </el-row>
37 + </hager-box>
38 + <hager-box class="box-2n">
39 + <hager-h1 title="产品优势" sub="Product advantages"></hager-h1>
40 + <div class="product-advantage" style="">
41 + <div class="item">
42 + <p>极致的分断能力： 全系列Icu=Ics</p>
43 + <p>极致的分断能力： 全系列Icu=Ics</p>
44 + <p>极致的分断能力： 全系列Icu=Ics</p>
45 + <p>极致的分断能力： 全系列Icu=Ics</p>
46 + <p>极致的分断能力： 全系列Icu=Ics</p>
47 + </div>
48 + <div class="item">
49 + <p>极致的分断能力： 全系列Icu=Ics</p>
50 + <p>极致的分断能力： 全系列Icu=Ics</p>
51 + <p>极致的分断能力： 全系列Icu=Ics</p>
52 + <p>极致的分断能力： 全系列Icu=Ics</p>
53 + <p>极致的分断能力： 全系列Icu=Ics</p>
54 + </div>
55 + <div class="item">
56 + <p>极致的分断能力： 全系列Icu=Ics</p>
57 + <p>极致的分断能力： 全系列Icu=Ics</p>
58 + <p>极致的分断能力： 全系列Icu=Ics</p>
59 + <p>极致的分断能力： 全系列Icu=Ics</p>
60 + <p>极致的分断能力： 全系列Icu=Ics</p>
61 + </div>
62 + </div>
63 + </hager-box>
64 + <hager-box class="box-n">
65 + <hager-h1 title="产品资料" sub="Product Information"></hager-h1>
66 + <div class="product-info">
67 + <div class="info-control">
68 + <div class="control-left">
69 + <div class="button active" style="margin-right: 1rem;">产品样本</div>
70 + <div class="button" style="margin-right: 1rem;">技术参数</div>
71 + <div class="button" style="margin-right: 1rem;">产品说明书</div>
72 + <div class="button" style="margin-right: 1rem;">安装教程</div>
73 + </div>
74 + <div>
75 + <div class="button">下载选中</div>
76 + </div>
77 + </div>
78 + <div>
79 + <div class="info-list">
80 + <div class="info-list-title">
81 + <i class="el-icon-document" style="font-size: 1.5rem;"></i>&nbsp;&nbsp;Hw+系列空气断路器&nbsp;&nbsp;17.77MB
82 + </div>
83 + <div class="info-list-control">
84 + <span>预览</span>&nbsp;
85 + <span>直接下载</span>&nbsp;
86 + <i class="el-icon-folder-checked"></i>
87 + </div>
88 + </div>
89 + </div>
90 + </div>
91 + </hager-box>
92 + </div>
93 +</template>
94 +
95 +<script>
96 +import mixin from 'common/mixin';
97 +import hagerBox from '@/components/common/hagerBox';
98 +import hagerCarousel from '@/components/hagerCarousel';
99 +import hagerH1 from '@/components/common/hagerH1.vue';
100 +
101 +export default {
102 + components: { hagerBox, hagerCarousel, hagerH1 },
103 + mixins: [mixin.init],
104 + data () {
105 + return {
106 +
107 + }
108 + },
109 + mounted () {
110 +
111 + },
112 + methods: {
113 +
114 + }
115 +}
116 +</script>
117 +
118 +<style lang="less" scoped>
119 +.product-detail {
120 + .box-n {
121 + background-color: #fff;
122 + padding: 2rem 0;
123 + }
124 + .box-2n {
125 + background-color: #f1f1f1;
126 + padding: 2rem 0;
127 + }
128 + .product-advantage {
129 + margin-top: 1rem;
130 + display: flex;
131 + flex-wrap: wrap;
132 + gap: 3rem;
133 + .item {
134 + flex: 0 1 calc(50% - 3rem); /* 每行2个元素，减去gap的宽度 */
135 + box-sizing: border-box; /* 确保padding和border不会影响宽度计算 */
136 + padding-top: 1rem;
137 + background-color: #f0f0f0;
138 + border-top: 4px solid #03aae3;
139 + p {
140 + line-height: 2;
141 + }
142 + }
143 + }
144 + .product-info {
145 + .info-control {
146 + display: flex;
147 + border-bottom: 4px solid #03aae3;
148 + padding-bottom: 1rem;
149 + margin-top: 2rem;
150 + .control-left {
151 + display: flex;
152 + flex: 1 0 0;
153 + }
154 + .button {
155 + background-color: #f3f3f3;
156 + padding: 1rem 2.2rem;
157 + border-radius: 5px;
158 + &:hover {
159 + cursor: pointer;
160 + }
161 + &.active {
162 + background-color: #03aae3;
163 + color: #fff;
164 + }
165 + }
166 + }
167 + .info-list {
168 + display: flex;
169 + justify-content: space-between;
170 + align-items: center;
171 + padding: 2rem 0;
172 + color: #6b6b6b;
173 + .info-list-title {
174 + display: flex; align-items: center;
175 + }
176 + .info-list-control {
177 + span {
178 + &:hover {
179 + cursor: pointer;
180 + color: #03aae3;
181 + text-decoration: underline;
182 + }
183 + }
184 + }
185 + }
186 + }
187 +}
188 +</style>