Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
de095077 1 parent 7dfd93db

fix 兼容性调整

Inline Side-by-side
Showing 4 changed files with 126 additions and 49 deletions
<!--
* @Date: 2024-09-26 13:36:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-15 10:18:01
* @FilePath: /hager/index.html
* @Description: 文件描述
-->
<!doctype html>
<html lang="en">
<head>
......
<!--
* @Date: 2024-09-26 13:42:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-12 15:16:42
* @LastEditTime: 2024-10-15 11:01:58
* @FilePath: /hager/src/components/common/hagerHeader.vue
* @Description: 文件描述
-->
<template>
<div class="hager-header">
<div class="header-top"></div>
<div v-if="choose_country" class="location-banner">
<div>You are loca­l­ised in the follo­wing country : </div>
<div></div>
</div>
<!-- <div class="header-top hidden-xs-only"></div> -->
<el-row class="hidden-xs-only" style="background-color: #fff;">
<el-col :sm="1" :md="1" :lg="3" :xl="4">&nbsp;</el-col>
<el-col :sm="22" :md="22" :lg="18" :xl="16" style="position: relative;height: 5rem;">
......@@ -259,20 +263,34 @@ export default {
is_active: '',
p_index: 0,
show_menu: false,
margin_top: 0,
choose_country: false, // 主动选择了国家地区
}
},
mounted () {
//
let margin_top = 5; // 默认高度
let once_header_height = 5; // 选择国家地区高度
// let hidden_header_height = 2; // 可隐藏高度s
if (this.choose_country) { // 没有点击国家地区
margin_top += once_header_height;
}
$('.wrapper').css('marginTop', margin_top + 'rem');
// 监听屏幕滚动
// $('.wrapper').css('marginTop', margin_top + hidden_header_height + 'rem');
// window.addEventListener('scroll', (evt) => {
// if ($(window).scrollTop()) {
// $('.header-top').css('height', 0);
// $('.wrapper').css('marginTop', margin_top - hidden_header_height + 'rem');
// } else {
// $('.header-top').css('height', '2rem');
// $('.wrapper').css('marginTop', margin_top + hidden_header_height + 'rem');
// }
// });
//
this.product_info = this.product_menu[0]['info'];
// 修改数据结构显示
this.product_info.product = this.splitProductList(this.product_info.product);
// 监听屏幕滚动
window.addEventListener('scroll', (evt) => {
if ($(window).scrollTop()) {
$('.header-top').css('height', 0);
} else {
$('.header-top').css('height', '2rem');
}
})
},
watch: {
'$route' (to, from) {
......@@ -382,6 +400,13 @@ export default {
left: 0;
right: 0;
z-index: 9;
.location-banner {
display: flex;
background: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), #00477e;
width: 100%;
height: 5rem;
color: white;
}
.header-top {
display: flex;
background-color: #00477e;
......
<!--
* @Date: 2024-08-27 10:06:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-11 17:28:51
* @LastEditTime: 2024-10-15 11:49:38
* @FilePath: /hager/src/views/index.vue
* @Description: 文件描述
-->
......@@ -49,13 +49,17 @@
<hager-box class="box-2n" @screen-width="handleScreenWidth">
<hager-h1 title="解决方案" sub="Solution"></hager-h1>
<div v-if="!is_xs" class="hager-solution">
<div
@click="goToSolution(item)"
class="solution-item"
:style="{ backgroundImage: 'url('+item.src+')' }"
v-for="(item, index) in solution_list" :key="index">
<p>{{ item.title }}</p>
</div>
<el-row :gutter="15">
<el-col :span="6" v-for="(item, index) in solution_list" :key="index">
<div
@click="goToSolution(item)"
class="solution-item"
:style="{ backgroundImage: 'url('+item.src+')' }"
>
<p>{{ item.title }}</p>
</div>
</el-col>
</el-row>
</div>
<div v-else>
<swiper ref="mySolutionSwiper" class="swiper" :options="swiperOption" @slideChange="onSolutionSlideChange">
......@@ -76,16 +80,20 @@
<hager-box class="box-n">
<hager-h1 title="产品中心" sub="Product Center"></hager-h1>
<div v-if="!is_xs" class="hager-product-center">
<div @click ="goToProduct(item)" v-for="(item, index) in product_list" :key="index" class="product-item">
<el-image style="height: 14rem;" :src="item.src" fit="cover"></el-image>
<p style="margin-top: 1rem;">{{ item.title }}</p>
</div>
<el-row :gutter="15">
<el-col :span="6" v-for="(item, index) in product_list" :key="index">
<div @click ="goToProduct(item)" class="product-item">
<div class="img" :style="{ backgroundImage: 'url('+item.src+')' }"></div>
<p style="margin-top: 1rem;">{{ item.title }}</p>
</div>
</el-col>
</el-row>
</div>
<div v-else>
<swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
<swiper-slide v-for="(item, index) in product_list" :key="index">
<div @click="goToProduct(item)" class="product-item xs">
<el-image style="height: 8rem; margin: 1rem; margin-bottom: 0;" :src="item.src" fit="cover"></el-image>
<div class="img" :style="{ height: '8rem', margin: '1rem', backgroundImage: 'url('+item.src+')' }"></div>
<p style="margin: 0.5rem;">{{ item.title }}</p>
</div>
</swiper-slide>
......@@ -385,15 +393,6 @@ export default {
}
.hager-solution {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
gap: 1.5rem; /* 每个项目之间的间距 */
&.xs {
display: flex;
overflow: hidden; /* 超出部分隐藏 */
width: calc(100vw - 1rem); /* 容器宽度适应屏幕 */
gap: 1rem;
}
}
.solution-item {
position: relative;
......@@ -478,11 +477,9 @@ export default {
font-weight: bold;
font-size: 1.35rem;
color: @secondary-color;
display: -webkit-box; /* 结合其他属性进行多行文本处理 */
-webkit-line-clamp: 1; /* 设置显示的行数 */
-webkit-box-orient: vertical; /* 垂直排列 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 使用省略号替代超出的文本 */
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 用省略号表示被截断的部分 */
}
.news-item-sub {
color: @primary-color;
......@@ -500,9 +497,9 @@ export default {
.hager-product-center {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
gap: 1.5rem; /* 每个项目之间的间距 */
// display: grid;
// grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
// gap: 1.5rem; /* 每个项目之间的间距 */
// &.xs {
// display: flex;
// overflow: hidden; /* 超出部分隐藏 */
......@@ -527,9 +524,15 @@ export default {
// flex: 0 0 50vw; /* 每个子元素宽度为屏幕宽度的一半 (显示2个元素) */
// padding: 0 20px;
// box-sizing: border-box;
padding: 0;
margin-top: 1rem;
padding-bottom: 0.25rem;
// padding-bottom: 0.25rem;
padding: 0.1rem;
}
.img {
height: 14rem;
background-size: cover; /* 相当于 object-fit: cover */
background-position: center; /* 让图片居中 */
background-repeat: no-repeat;
}
}
......
......@@ -39,6 +39,62 @@
</div>
</div>
</hager-box>
<hager-box v-if="!is_xs" class="box-2n">
<hager-h1 title="我们的服务" sub="Service Advantage" style="margin: 2rem 0;"></hager-h1>
<div style="display: grid;grid-template-columns: repeat(3, 1fr);gap: 1.5rem;">
<div>
<div>快速</div>
<div>
<p>7x24小时全天实时在线</p>
<p>全国32个城市办事处</p>
<p>快速响应机制：承诺2小时内与客户达成沟通，必要时24小时内到场处理</p>
</div>
</div>
<div>
<div>专业</div>
<div>
<p>全由海格技术人员组成，提供专业技术服务
拥有60余年专业经验，服务于整个项目周期服务多样化，包含且不限于邮件、电话、微信群，现场拜访交流、小型推广会等；</p>
</div>
</div>
<div>
<div>增值</div>
<div>
<p>为客户提供定制化服务，充分满足客户需求
针对客户需求提供过保产品保养及维修服务
针对现有产品（改造/升级/退市及一定使用
年限）提出替换/升级方案并实施完成</p>
</div>
</div>
</div>
</hager-box>
<div v-else style="padding: 1rem;">
<hager-h1 title="我们的服务" sub="Service Advantage" style="margin: 2rem 0;"></hager-h1>
<div>
<div>快速</div>
<div>
<p>7x24小时全天实时在线</p>
<p>全国32个城市办事处</p>
<p>快速响应机制：承诺2小时内与客户达成沟通，必要时24小时内到场处理</p>
</div>
</div>
<div>
<div>专业</div>
<div>
<p>全由海格技术人员组成，提供专业技术服务
拥有60余年专业经验，服务于整个项目周期服务多样化，包含且不限于邮件、电话、微信群，现场拜访交流、小型推广会等；</p>
</div>
</div>
<div>
<div>增值</div>
<div>
<p>为客户提供定制化服务，充分满足客户需求
针对客户需求提供过保产品保养及维修服务
针对现有产品（改造/升级/退市及一定使用
年限）提出替换/升级方案并实施完成</p>
</div>
</div>
</div>
</div>
</template>
......