Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b031fac0 1 parent 0e6f982c

✨ feat: 解决方案详情页完善

Inline Side-by-side
Showing 2 changed files with 147 additions and 6 deletions
<!--
* @Date: 2024-08-27 10:06:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-29 16:49:36
* @LastEditTime: 2024-09-29 17:12:34
* @FilePath: /hager/src/views/index.vue
* @Description: 文件描述
-->
......@@ -237,9 +237,5 @@ export default {
background-color: #f3f3f3;
}
}
.news-container {
}
}
</style>
......
<!--
* @Date: 2024-09-29 15:49:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-29 16:30:31
* @LastEditTime: 2024-09-29 17:10:28
* @FilePath: /hager/src/views/solution/detail.vue
* @Description: 文件描述
-->
......@@ -25,6 +25,80 @@
<hager-h1 title="使用产品" sub="Our advantages" style="margin: 2rem 0;"></hager-h1>
<hager-h-carousel></hager-h-carousel>
</hager-box>
<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-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>
<i class="el-icon-right"></i>
</div>
</div>
</div>
<div style="display: flex; justify-content: center; margin-top: 2rem;">
<hager-more></hager-more>
</div>
</hager-box>
<hager-box class="box-n">
<hager-h1 title="我们的优势" sub="OUR ADVANTAGES" style="margin: 2rem 0;"></hager-h1>
<div>
海格突出的优势来自于我们以客户为中心的价值观和互惠互利，共同发展的经营原则，旺盛捷非常善于倾听和理解客户的需求和关注，我们提供有效的解决方案，整合各个行业的最佳资源，我们的产品和服务使我们与传统的EMS不同，我们更多地关注产品质量与产品数量的有机统一；我们不仅向客户分享我们最好的行业经验，还分享制造成本节约的成果，与传统EMS相比，无沦订单大小，我们在成本、质量、灵活性、技术和应方面都具有明显的优势：
</div>
</hager-box>
</div>
</template>
......@@ -62,5 +136,76 @@ export default {
background-color: #f1f1f1;
padding: 2rem 0;
}
.hager-success-cases {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(3, 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;
}
.card-link {
display: inline-block;
color: #0072c6;
font-size: 14px;
text-decoration: none;
font-weight: bold;
}
.card-link:hover {
text-decoration: underline;
}
}
}
}
</style>
......