Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
213625f4 1 parent 3e67f624

fix 首页细节优化调整

Inline Side-by-side
Showing 2 changed files with 64 additions and 28 deletions
......@@ -11,6 +11,7 @@ declare module 'vue' {
ElBreadcrumbItem: typeof import('element-ui/lib/breadcrumb-item')['default']
ElCarousel: typeof import('element-ui/lib/carousel')['default']
ElCarouselItem: typeof import('element-ui/lib/carousel-item')['default']
ElCheckbox: typeof import('element-ui/lib/checkbox')['default']
ElCol: typeof import('element-ui/lib/col')['default']
ElCollapse: typeof import('element-ui/lib/collapse')['default']
ElCollapseItem: typeof import('element-ui/lib/collapse-item')['default']
......
<!--
* @Date: 2024-08-27 10:06:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-20 21:33:43
* @LastEditTime: 2024-10-21 11:30:52
* @FilePath: /hager/src/views/index.vue
* @Description: 首页
-->
......@@ -48,7 +48,7 @@
</div>
</div>
<div class="more-box" style="margin-top: 1rem;">
<hager-more></hager-more>
<hager-more @click.native="getToGroup"></hager-more>
</div>
</div>
</hager-box>
......@@ -84,7 +84,6 @@
</div>
</hager-box>
<hager-box class="box-n">
<!-- TODO: 待完善, 产品分类跳转，没有更多分类了？ -->
<hager-h1 title="产品中心" sub="Product"></hager-h1>
<!-- <div v-if="!is_xs" class="hager-product-center">
<el-row :gutter="15">
......@@ -108,11 +107,11 @@
</div>
</swiper-slide>
</swiper>
<div v-if="product_list.length <= productSlidesPerView" class="more-box" style="margin-top: 2rem;">
<hager-more></hager-more>
</div>
<div v-else class="hager-product-center-more xs">
<!-- <div v-if="product_list.length <= productSlidesPerView" class="more-box" style="margin-top: 2rem;">
<hager-more></hager-more>
</div> -->
<div v-if="product_list.length > productSlidesPerView" class="hager-product-center-more xs">
<!-- <hager-more></hager-more> -->
<div class="xs-control">
<div>
<i :class="['el-icon-arrow-left', activeProductIndex === 0 ? 'disabled' : '']" @click="prevProductBtn()"></i>
......@@ -127,27 +126,27 @@
<div class="news-container">
<el-row :gutter="0" v-for="(item, index) in news_list" :key="index">
<el-col :span="12" style="background-color: #FFF; height: 25rem;">
<img class="news-item-img" v-if="index % 2 === 0" :src="item.src" alt="News Image 1">
<div v-else @click="goToNew(item)" class="news-item">
<img class="news-item-img" v-if="index % 2 === 0" :src="item.src">
<div v-else class="news-item">
<div class="news-item-title">{{ item.title }}</div>
<p class="news-item-sub" v-clamp="2">{{ item.sub }}</p>
<p class="news-item-content" v-clamp="3">{{ item.content }}</p>
<div class="news-item-more" style="margin-top: 3rem;">MORE</div>
<div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
</div>
</el-col>
<el-col :span="12" style="background-color: #FFF; height: 25rem;">
<div v-if="index % 2 === 0" @click="goToNew(item)" class="news-item">
<div v-if="index % 2 === 0" class="news-item">
<div class="news-item-title">{{ item.title }}</div>
<p class="news-item-sub" v-clamp="2">{{ item.sub }}</p>
<p class="news-item-content" v-clamp="3">{{ item.content }}</p>
<div class="news-item-more" style="margin-top: 3rem;">MORE</div>
<div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
</div>
<img class="news-item-img" v-else :src="item.src" alt="News Image 1">
<img class="news-item-img" v-else :src="item.src">
</el-col>
</el-row>
</div>
<div class="more-box" style="margin-top: 3rem;">
<hager-more></hager-more>
<hager-more @click.native="goToNews"></hager-more>
</div>
</hager-box>
<div v-else style="background-color: #f9f9f9; padding-bottom: 1rem;">
......@@ -156,11 +155,11 @@
<el-row :gutter="0" v-for="(item, index) in news_list" :key="index">
<el-col :span="24">
<img class="news-item-img xs" :src="item.src" alt="News Image 1">
<div @click="goToNew(item)" class="news-item xs">
<div class="news-item xs">
<div class="news-item-title">{{ item.title }}</div>
<p class="news-item-sub" v-clamp="2">{{ item.sub }}</p>
<p class="news-item-content" v-clamp="3">{{ item.content }}</p>
<div class="news-item-more">MORE</div>
<div class="news-item-more" @click="goToNew(item)">MORE</div>
</div>
</el-col>
</el-row>
......@@ -173,7 +172,7 @@
<hager-h1 title="招聘信息" sub="Recruitment"></hager-h1>
<p style="margin: 2rem 0;">德国匠心，专注为你。海格集团招贤纳士，携手前行！我们诚邀各界精英加入我们的行列，共同书写成功的篇章。用你的才华，创造无限可能！ </p>
<div class="more-box" style="margin-top: 2rem;">
<hager-more></hager-more>
<hager-more @click.native="goToRecruit"></hager-more>
</div>
</hager-box>
</div>
......@@ -223,37 +222,48 @@ export default {
}],
screen_width: 0,
solution_list: [{
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
id: '1',
src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
title: '1住宅解决方案'
}, {
src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
id: '1',
src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
title: '2住宅解决方案'
}, {
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
id: '1',
src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
title: '3住宅解决方案'
}, {
src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
id: '1',
src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
title: '4住宅解决方案'
}, {
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
id: '1',
src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
title: '3住宅解决方案'
}, {
src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
id: '1',
src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
title: '4住宅解决方案'
}],
product_list: [{
id: '1',
src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
title: '配电产品'
}, {
id: '1',
src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
title: '成套产品'
}, {
id: '1',
src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
title: '开关面板'
}, {
id: '1',
src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
title: '智能控制'
}, {
id: '1',
src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
title: '能源管理'
}],
......@@ -312,6 +322,11 @@ export default {
}
},
methods: {
getToGroup () {
this.$router.push({
path: '/about/global'
});
},
splitListIntoChunks (list) {
const chunkSize = 4; // 每组4个项目
const result = [];
......@@ -332,7 +347,20 @@ export default {
},
goToNew (v) {
this.$router.push({
path: '/news/detail'
path: '/news/detail',
query: {
id: v.id
}
});
},
goToNews () {
this.$router.push({
path: '/news'
});
},
goToRecruit () {
this.$router.push({
path: '/recruit'
});
},
goToSolution (v) {
......@@ -408,6 +436,12 @@ export default {
span.strong {
color: @primary-color;
}
i {
color: #F56400;
&:hover {
cursor: pointer;
}
}
}
}
.hager-global-info {
......@@ -518,9 +552,6 @@ export default {
&.xs {
padding: 2rem;
}
&:hover {
cursor: pointer;
}
.news-item-title {
font-weight: bold;
font-size: 1.35rem;
......@@ -550,6 +581,10 @@ export default {
width: 5rem;
text-align: center;
font-size: 0.8rem;
&:hover {
cursor: pointer;
}
}
// i {
// color: @primary-color;
......@@ -606,7 +641,7 @@ export default {
justify-content: center;
margin-top: 2rem;
&.xs {
justify-content: space-between;
justify-content: flex-end;
padding-left: 20%;
}
}
......