Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7ffc187b 1 parent 91eefa08

🐞 fix: 细节调整优化

Inline Side-by-side
Showing 4 changed files with 47 additions and 34 deletions
<!--
* @Date: 2024-09-26 13:36:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-16 17:07:50
* @LastEditTime: 2024-10-17 09:45:26
* @FilePath: /hager/src/App.vue
* @Description: 文件描述
-->
......@@ -81,6 +81,7 @@ body {
.text {
font-weight: bold;
.title {
margin-bottom: 1rem;
font-size: 2.5rem;
color: @secondary-color;
}
......
<!--
* @Date: 2024-09-26 13:42:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-16 10:32:24
* @LastEditTime: 2024-10-17 11:04:59
* @FilePath: /hager/src/components/common/hagerHeader.vue
* @Description: 文件描述
-->
......@@ -13,7 +13,7 @@
<el-row>
<el-col :sm="6" :md="6" :lg="6" :xl="6">
<div class="nav-logo">
<el-image style="width: auto; height: 2.5rem" src="https://cdn.ipadbiz.cn/hager/icon/logo@2x.png" fit="fit"></el-image>
<el-image style="width: 8rem; height: 2.5rem" src="https://cdn.ipadbiz.cn/hager/icon/logo@2x.png" fit="fit"></el-image>
</div>
</el-col>
<el-col :sm="10" :md="10" :lg="10" :xl="10">
......@@ -31,12 +31,12 @@
<div @click="goToWeb" class="tooltip">
<el-tooltip class="item" effect="dark" content="国际站" placement="bottom">
<!-- <i class=el-icon-orange style="font-size: 1.25rem;"></i> -->
<el-image style="width: auto; height: 1rem" src="https://cdn.ipadbiz.cn/hager/icon/%E8%AF%AD%E8%A8%80@2x.png" fit="fit"></el-image>
<el-image style="width: 1rem; height: 1rem" src="https://cdn.ipadbiz.cn/hager/icon/%E8%AF%AD%E8%A8%80@2x.png" fit="fit"></el-image>
</el-tooltip>
</div>
<div @click="goToLogin" class="tooltip">
<el-tooltip class="item" effect="dark" content="用户登录" placement="bottom">
<el-image style="width: auto; height: 1rem" src="https://cdn.ipadbiz.cn/hager/icon/%E7%99%BB%E9%99%86@2x.png" fit="fit"></el-image>
<el-image style="width: 1rem; height: 1rem" src="https://cdn.ipadbiz.cn/hager/icon/%E7%99%BB%E9%99%86@2x.png" fit="fit"></el-image>
<!-- <i class=el-icon-user style="font-size: 1.25rem;"></i> -->
</el-tooltip>
</div>
......@@ -52,14 +52,14 @@
<el-row>
<el-col :sm="16" :md="16" :lg="16" :xl="16">
<div class="nav-wrapper">
<div :class="[is_active === 'product' ? 'active' : '', 'item']" @click="onClickProduct" @mouseenter="onClickProduct">
<el-image style="width: auto; height: 0.65rem" src="https://cdn.ipadbiz.cn/hager/icon/%E8%8F%9C%E5%8D%95@2x.png" fit="fit"></el-image>
产品中心
<div :class="[is_active === 'product' ? 'active' : '', 'item']" @click="onClickProduct">
<el-image style="width: auto; height: 0.65rem" src="https://cdn.ipadbiz.cn/hager/icon/%E8%8F%9C%E5%8D%95@2x.png" fit="fit"></el-image>&nbsp;
<span @mouseenter="onClickProduct">产品中心</span>
</div>
<div :class="[is_active === 'solution' ? 'active' : '', 'item']" @click="goTo('/solution/index')">解决方案</div>
<div :class="[is_active === '新闻中心' ? 'active' : '', 'item']">新闻中心</div>
<div :class="[is_active === '招聘信息' ? 'active' : '', 'item']">招聘信息</div>
<div :class="[is_active === '关于海格' ? 'active' : '', 'item']">关于海格</div>
<div :class="[is_active === 'about' ? 'active' : '', 'item']" @click="goTo('/about')">关于海格</div>
<div :class="[is_active === '联系我们' ? 'active' : '', 'item']">联系我们</div>
<div :class="[is_active === 'index' ? 'active' : '', 'item']" @click="goTo('/')">首页</div>
</div>
......@@ -530,6 +530,7 @@ export default {
color: @secondary-color;
margin-right: 1.5rem;
font-size: 0.95rem;
height: 1.5rem;
&:hover {
cursor: pointer;
color: @primary-color;
......
<!--
* @Date: 2024-09-29 15:49:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-16 17:42:18
* @LastEditTime: 2024-10-16 18:55:21
* @FilePath: /hager/src/views/solution/detail.vue
* @Description: 文件描述
-->
......@@ -58,7 +58,8 @@
<swiper-slide v-for="(item, index) in product_list" :key="index">
<div class="card-box" @click="goToProduct(item)">
<div class="card-image-wrapper">
<el-image :src="item.src" fit="fit"></el-image>
<!-- <el-image :src="item.src" fit="fit"></el-image> -->
<img :src="item.src" style="">
</div>
<p class="card-title">{{ item.title }}</p>
</div>
......@@ -239,33 +240,40 @@ export default {
}
.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;
}
}
// display: grid;
// grid-template-columns: repeat(3, 1fr); /* 一行显示4个 */
// gap: 1.5rem; /* 每个项目之间的间距 */
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* 确保子元素之间的空间被均匀分配 */
// .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 {
// margin: 0.5rem;
flex: 0 0 32.33%; /* 宽度为 1/3 */
margin-bottom: 1rem; /* 在元素之间添加间距 */
box-sizing: border-box; /* 防止 padding 或 margin 影响宽度 */
// width: 300px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
background-color: #fff;
margin: 0;
// margin: 0;
transition: transform 0.3s ease-in-out;
&:hover {
transform: scale(1.05);
......@@ -332,6 +340,11 @@ export default {
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
img {
width: 14rem;
margin-left: calc((100% - 14rem) / 2);
height: auto;
}
}
.card-title {
color: @secondary-color;
......
......@@ -194,12 +194,10 @@ export default {
<style lang="less" scoped>
.hager-solution-index {
.hager-solution-top {
width: 100%;
.banner-text-wrapper {
height: 100%;
display: flex;
// align-items: center;
justify-content: center;
flex-direction: column;
}
......