refactor: 调整页面布局和样式,优化移动端导航
- 移除部分页面中的 hover 效果以简化样式 - 调整 AppHeader 中的汉堡菜单尺寸 - 优化移动端路由跳转逻辑,避免重复跳转 - 重新排序首页 Swiper 中的视频和图片位置
@ -192,8 +192,8 @@ console.log(route)
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hamburger {
|
.hamburger {
|
||||||
width: 30px;
|
width: 25px;
|
||||||
height: 24px;
|
height: 18px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
@ -210,11 +210,11 @@ console.log(route)
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
top: 10px;
|
top: 9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(3) {
|
&:nth-child(3) {
|
||||||
top: 20px;
|
top: 18px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3,17 +3,16 @@
|
|||||||
<!-- Swiper 容器 -->
|
<!-- Swiper 容器 -->
|
||||||
<div class="group_666" style="position: relative;height: 100vh;">
|
<div class="group_666" style="position: relative;height: 100vh;">
|
||||||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||||||
<swiper-slide>
|
|
||||||
<video class="video_1" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline"
|
|
||||||
:src="`${cdnUrl}/img/1212.mp4`" style="width: 100%;height:100%;object-fit: cover;"></video>
|
|
||||||
</swiper-slide>
|
|
||||||
<swiper-slide>
|
<swiper-slide>
|
||||||
<img :src="`${cdnUrl}/img/banner.png`" style="width: 100%;height: 100%;object-fit: cover;">
|
<img :src="`${cdnUrl}/img/banner.png`" style="width: 100%;height: 100%;object-fit: cover;">
|
||||||
</swiper-slide>
|
</swiper-slide>
|
||||||
<swiper-slide>
|
<swiper-slide>
|
||||||
<img :src="`${cdnUrl}/img/banner2.png`" style="width: 100%;height: 100%;object-fit: cover;">
|
<img :src="`${cdnUrl}/img/banner2.png`" style="width: 100%;height: 100%;object-fit: cover;">
|
||||||
</swiper-slide>
|
</swiper-slide>
|
||||||
|
<swiper-slide>
|
||||||
|
<video class="video_1" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline"
|
||||||
|
:src="`${cdnUrl}/img/1212.mp4`" style="width: 100%;height:100%;object-fit: cover;"></video>
|
||||||
|
</swiper-slide>
|
||||||
</swiper>
|
</swiper>
|
||||||
<div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;">
|
<div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;">
|
||||||
<div class="flex-row justify-center align-center">
|
<div class="flex-row justify-center align-center">
|
||||||
@ -484,9 +483,7 @@ const router = useRouter()
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||||
if (coMobile) {
|
if (coMobile) {
|
||||||
router.push('/phone_index/')
|
window.location.href="/web/phone_index/";
|
||||||
} else {
|
|
||||||
router.push('/')
|
|
||||||
}
|
}
|
||||||
getIndexNews();
|
getIndexNews();
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
|
@ -447,13 +447,6 @@ const checkMobile = () => {
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
checkMobile()
|
checkMobile()
|
||||||
window.addEventListener('resize', checkMobile)
|
window.addEventListener('resize', checkMobile)
|
||||||
|
|
||||||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
||||||
if (coMobile) {
|
|
||||||
router.push('/phone_index')
|
|
||||||
} else {
|
|
||||||
router.push('/')
|
|
||||||
}
|
|
||||||
getIndexNews();
|
getIndexNews();
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
// 初始化 ScrollReveal
|
// 初始化 ScrollReveal
|
||||||
|
@ -656,11 +656,6 @@ const animate = () => {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
/* 强制每个单元格左对齐 */
|
/* 强制每个单元格左对齐 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-item:hover {
|
|
||||||
background-color: #4A4C5F;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-wl {
|
.service-wl {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 340px;
|
width: 340px;
|
||||||
@ -670,10 +665,6 @@ const animate = () => {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-wl:hover {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-yw {
|
.service-yw {
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
@ -699,15 +690,6 @@ const animate = () => {
|
|||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.service_top1 {
|
.service_top1 {
|
||||||
|
@ -494,25 +494,12 @@ const animate = () => {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-wl:hover {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-yw {
|
.service-yw {
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.service_top1 {
|
.service_top1 {
|
||||||
@ -696,11 +683,6 @@ const animate = () => {
|
|||||||
text-transform: none;
|
text-transform: none;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #FC7428;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
}
|
}
|
||||||
|
Before Width: | Height: | Size: 186 KiB After Width: | Height: | Size: 83 KiB |
BIN
public/img/home_al/op15.png
Normal file
After Width: | Height: | Size: 170 KiB |
Before Width: | Height: | Size: 170 KiB After Width: | Height: | Size: 152 KiB |
Before Width: | Height: | Size: 157 KiB After Width: | Height: | Size: 186 KiB |