Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
1f2f3082 1 parent 080d4a9a

✨ feat(解决方案详情): 样式更新到设计稿

Inline Side-by-side
Showing 3 changed files with 92 additions and 81 deletions
<!--
* @Date: 2024-09-29 16:27:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-29 16:48:19
* @LastEditTime: 2024-10-10 15:17:58
* @FilePath: /hager/src/components/hagerHCarousel.vue
* @Description: 文件描述
-->
......@@ -12,15 +12,20 @@
<div class="carousel">
<div class="carousel-track" :style="trackStyle">
<div v-for="item in items" :key="item.id" class="carousel-item">
<!-- <img :src="item.image" :alt="item.name" style="width: 100%;"> -->
<div class="product-item">
<el-image style="width: 14rem; height: 14rem;" :src="item.image" fit="fit"></el-image>
</div>
<h3>{{ item.name }}</h3>
<div class="product-desc">
<p>{{ item.description }}</p>
<p>{{ item.description }}</p>
<p>{{ item.description }}</p>
<p>{{ item.description }}</p>
<p>{{ item.description }}</p>
</div>
</div>
</div>
</div>
<div v-if="items.length > 4" @click="nextItem" class="arrow right-arrow"><i class="el-icon-arrow-right"></i></div>
</div>
</div>
......@@ -36,27 +41,27 @@ export default {
items: [{
id: 1,
image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
name: 'Item 1',
description: 'This is the description for Item 1.'
name: 'hW空气材路幸',
description: '额定电流范围：630-5000A'
}, {
id: 2,
image: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
name: 'Item 2',
description: 'This is the description for Item 2.'
name: 'hW空气材路幸',
description: '额定电流范围：630-5000A'
}, {
id: 3,
image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
name: 'Item 3',
description: 'This is the description for Item 3.'
name: 'hW空气材路幸',
description: '额定电流范围：630-5000A'
}, {
id: 4,
image: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
name: 'Item 4',
name: 'hW空气材路幸',
description: 'This is the description for Item 4.'
}, {
id: 5,
image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
name: 'Item 5',
name: 'hW空气材路幸',
description: 'This is the description for Item 5.'
}, {
id: 6,
......@@ -121,9 +126,21 @@ export default {
.carousel-item {
flex: 0 0 25%; /* 4 items, so each takes 25% */
box-sizing: border-box;
padding: 10px;
padding: 1rem;
padding-left: 0;
// text-align: center;
h3 {
font-size: 1.15rem;
color: @secondary-color;
margin: 0.5rem 0;
}
.product-desc {
color: @text-color;
font-size: 0.85rem;
p {
margin-bottom: 0.25rem;
}
}
.product-item {
height: auto;
padding: 1.5rem;
......
<!--
* @Date: 2024-08-27 10:06:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-10 14:19:59
* @LastEditTime: 2024-10-10 14:44:15
* @FilePath: /hager/src/views/index.vue
* @Description: 文件描述
-->
......@@ -19,7 +19,7 @@
<p>海格申气品牌代表了集闭的核心业务，蜀盖配电系统。申缆管理系统。KNX 智能榕制系统和开关面板，楼宇自动化和安防系统。集团旗下还拥有 7 E3 / DC</p>
<p>海格集团是行业创新领导者之一，我们与来自工业和电气领域的客户一起致力于引领面向未来的主题，如家庭互联、智能建筑技术，能源效率、生活辅助系统，电动交通、
可再生能源。配电系统是这盛技术得以实现的中枢。也是伴随我们成长的其础产品</p>
<div class="hager-global-info">
<div :class="['hager-global-info', is_xs ? 'xs' : '']">
<div class="hager-global-info-item">
<p class="num"><span>32</span>亿</p>
<p class="text">2023年销售额32亿欧元</p>
......@@ -265,6 +265,9 @@ export default {
padding: 2rem;
align-items: center;
text-align: center;
&.xs {
flex-direction: column;
}
.hager-global-info-item {
.num {
color: @primary-color;
......
<!--
* @Date: 2024-09-29 15:49:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-29 17:24:02
* @LastEditTime: 2024-10-10 15:40:35
* @FilePath: /hager/src/views/solution/detail.vue
* @Description: 文件描述
-->
......@@ -13,10 +13,9 @@
<el-col :span="12" style="height: 25rem;">
<img style="width: 100%; height: 100%; border-radius: 5px;object-fit: cover;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="News Image 1">
</el-col>
<el-col :span="12" style="background-color: #FFF; height: 25rem;">
<div style="padding: 3rem;">
<div style="font-weight: bold; font-size: 1.25rem;">学校解决方案</div>
<p>Electronic solutions</p>
<el-col class="brief-introduction" :span="12">
<div class="intro-box">
<hager-h1 title="学校解决方案" sub="Electronic solutions"></hager-h1>
<p style="margin: 2rem 0;">淨於电气开乐驾能民电峰决方案，提供安全。可靠。摄作友好。易于堆护的电力划！ 1h14. n53 X0(009121 3098. 228 41324849 56MeD 换至备用电源，保障救学和生活的连续性。</p>
<i class="el-icon-right"></i>
</div>
......@@ -28,63 +27,11 @@
<hager-box class="box-2n">
<hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1>
<div class="hager-success-cases">
<div class="card">
<img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
<div class="card" v-for="(item, index) in success_data_list" :key="index">
<img :src="item.img" alt="学校图片" class="card-image">
<div class="card-content">
<h3>厦门翔城中小学</h3>
<p>
占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。
</p>
<i class="el-icon-right"></i>
</div>
</div>
<div class="card">
<img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
<div class="card-content">
<h3>厦门翔城中小学</h3>
<p>
占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。
</p>
<i class="el-icon-right"></i>
</div>
</div>
<div class="card">
<img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
<div class="card-content">
<h3>厦门翔城中小学</h3>
<p>
占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。
</p>
<i class="el-icon-right"></i>
</div>
</div>
<div class="card">
<img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
<div class="card-content">
<h3>厦门翔城中小学</h3>
<p>
占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。
</p>
<i class="el-icon-right"></i>
</div>
</div>
<div class="card">
<img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
<div class="card-content">
<h3>厦门翔城中小学</h3>
<p>
占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。
</p>
<i class="el-icon-right"></i>
</div>
</div>
<div class="card">
<img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
<div class="card-content">
<h3>厦门翔城中小学</h3>
<p>
占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。
</p>
<h3>{{ item.title }}</h3>
<p>{{ item.sub }}</p>
<i class="el-icon-right"></i>
</div>
</div>
......@@ -114,7 +61,31 @@ export default {
mixins: [mixin.init],
data () {
return {
success_data_list: [{
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
}, {
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
}, {
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
}, {
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
}, {
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
}, {
title: '厦门翔城中小学',
sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
}]
}
},
mounted () {
......@@ -136,6 +107,17 @@ export default {
background-color: #f1f1f1;
padding: 2rem 0;
}
.brief-introduction {
background-color: #FFF;
height: 25rem;
.intro-box {
padding: 3rem;
i {
color: @primary-color;
font-size: 1.5rem;
}
}
}
.hager-success-cases {
margin-top: 2rem;
display: grid;
......@@ -178,13 +160,22 @@ export default {
}
.card-content {
padding: 15px;
padding: 1rem 1.5rem;
h3 {
color: @secondary-color;
font-size: 1.25rem;
margin: 0;
margin-bottom: 0.5rem;
}
p {
font-size: 0.95rem;
line-height: 1.8;
}
i {
margin-top: 1rem;
color: @primary-color;
font-size: 1.5rem;
}
.card h3 {
font-size: 18px;
color: #0072c6;
margin-bottom: 10px;
}
.card p {
......