Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
2453fe7f 1 parent b031fac0

✨ feat: 新增解决方案主页面结构

Inline Side-by-side
Showing 2 changed files with 146 additions and 16 deletions
<!--
* @Date: 2024-09-29 15:49:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-29 17:10:28
* @LastEditTime: 2024-09-29 17:24:02
* @FilePath: /hager/src/views/solution/detail.vue
* @Description: 文件描述
-->
<template>
<div class="hager-solution-detail">
<el-image style="width: 100%; height: 25rem" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
<el-image style="width: 100%; height: 35rem" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
<hager-box class="box-n">
<el-row :gutter="0">
<el-col :span="12" style="height: 25rem;">
......@@ -193,18 +193,6 @@ export default {
line-height: 1.6;
margin-bottom: 15px;
}
.card-link {
display: inline-block;
color: #0072c6;
font-size: 14px;
text-decoration: none;
font-weight: bold;
}
.card-link:hover {
text-decoration: underline;
}
}
}
}
......
<template>
<div class="hager-solution-index"></div>
<div class="hager-solution-index">
<el-image style="width: 100%; height: 35rem" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
<hager-box class="box-n">
<hager-h1 title="行业解决方案" sub="Industry Solutions" style="margin: 2rem 0;"></hager-h1>
<div> 海格电气产品已广泛应用于电子产品制造业，为其供配电系统稳定、可靠的运行提供可靠保障。 </div>
<div class="hager-industry-solutions">
<div class="card">
<img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
<div class="card-content">
<div style="display: flex; align-items: center; justify-content: space-between;">
<span>住宅解决方案</span>
<i class="el-icon-right"></i>
</div>
<p>Residential Solution Case</p>
</div>
</div>
<div class="card">
<img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
<div class="card-content">
<div style="display: flex; align-items: center; justify-content: space-between;">
<span>住宅解决方案</span>
<i class="el-icon-right"></i>
</div>
<p>Residential Solution Case</p>
</div>
</div>
<div class="card">
<img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
<div class="card-content">
<div style="display: flex; align-items: center; justify-content: space-between;">
<span>住宅解决方案</span>
<i class="el-icon-right"></i>
</div>
<p>Residential Solution Case</p>
</div>
</div>
<div class="card">
<img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
<div class="card-content">
<div style="display: flex; align-items: center; justify-content: space-between;">
<span>住宅解决方案</span>
<i class="el-icon-right"></i>
</div>
<p>Residential Solution Case</p>
</div>
</div>
<div class="card">
<img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
<div class="card-content">
<div style="display: flex; align-items: center; justify-content: space-between;">
<span>住宅解决方案</span>
<i class="el-icon-right"></i>
</div>
<p>Residential Solution Case</p>
</div>
</div>
<div class="card">
<img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
<div class="card-content">
<div style="display: flex; align-items: center; justify-content: space-between;">
<span>住宅解决方案</span>
<i class="el-icon-right"></i>
</div>
<p>Residential Solution Case</p>
</div>
</div>
<div class="card">
<img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
<div class="card-content">
<div style="display: flex; align-items: center; justify-content: space-between;">
<span>住宅解决方案</span>
<i class="el-icon-right"></i>
</div>
<p>Residential Solution Case</p>
</div>
</div>
</div>
</hager-box>
</div>
</template>
<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerH1 from '@/components/common/hagerH1.vue';
import hagerMore from '@/components/hagerMore.vue';
export default {
components: { hagerBox, hagerH1, hagerMore },
mixins: [mixin.init],
data () {
return {
......@@ -22,5 +104,65 @@ export default {
</script>
<style lang="less" scoped>
.hager-solution-index {}
.hager-solution-index {
.hager-industry-solutions {
margin: 2rem 0;
display: grid;
grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
gap: 1.5rem; /* 每个项目之间的间距 */
.case-item {
position: relative;
height: 12rem;
padding: 1.5rem;
text-align: center;
color: #FFF;
border-radius: 8px;
background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
background-size: cover;
background-position: top center;
transition: transform 0.3s ease-in-out;
&:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
}
.card {
// width: 300px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
background-color: #fff;
margin: 0;
transition: transform 0.3s ease-in-out;
&:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.card-image {
width: 100%;
height: auto;
object-fit: cover;
}
.card-content {
padding: 15px;
}
.card h3 {
font-size: 18px;
color: #0072c6;
margin-bottom: 10px;
}
.card p {
font-size: 14px;
color: #333;
line-height: 1.6;
margin-bottom: 15px;
}
}
}
}
</style>
......