feat: 竖屏适配
All checks were successful
deploy to server / build-and-deploy (push) Successful in 2m53s
All checks were successful
deploy to server / build-and-deploy (push) Successful in 2m53s
- 为各个页面实现竖屏适配 ISSUE: resolve #53
This commit is contained in:
@ -83,4 +83,10 @@
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.homepage-carousel .el-carousel__item {
|
||||
height: 50vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,19 +7,20 @@
|
||||
<div v-if="!pending">
|
||||
<el-carousel
|
||||
class="recommend-carousel"
|
||||
height="auto"
|
||||
:height="carouselHeight"
|
||||
arrow="never"
|
||||
indicator-position="outside"
|
||||
:autoplay="false"
|
||||
>
|
||||
<el-carousel-item
|
||||
v-for="n in Math.floor(products.length / 3) + 1"
|
||||
v-for="n in pages"
|
||||
ref="carouselItem"
|
||||
:key="n"
|
||||
class="recommend-list"
|
||||
>
|
||||
<div class="recommend-card-group">
|
||||
<el-card
|
||||
v-for="(item, index) in products.slice((n - 1) * 3, n * 3)"
|
||||
v-for="(item, index) in pageProducts(n)"
|
||||
:key="index"
|
||||
class="recommend-card"
|
||||
@click="handleProductCardClick(item.id.toString() || '')"
|
||||
@ -64,9 +65,32 @@
|
||||
},
|
||||
});
|
||||
|
||||
const carouselHeight = ref<string>('auto');
|
||||
const perPage = ref(3);
|
||||
const carouselItem = ref<HTMLElement | null>(null);
|
||||
|
||||
const { getImageUrl } = useDirectusImage();
|
||||
const { height } = useElementSize(carouselItem);
|
||||
|
||||
const products = computed(() => props.homepageData?.recommendProducts || []);
|
||||
const pages = computed(() =>
|
||||
Math.ceil(products.value.length / perPage.value)
|
||||
);
|
||||
|
||||
const updatePerPage = () => {
|
||||
const width = window.innerWidth;
|
||||
if (width < 768) {
|
||||
perPage.value = 1;
|
||||
} else if (width < 1024) {
|
||||
perPage.value = 2;
|
||||
} else {
|
||||
perPage.value = 3;
|
||||
}
|
||||
};
|
||||
|
||||
const pageProducts = (n: number) => {
|
||||
return products.value.slice((n - 1) * perPage.value, n * perPage.value);
|
||||
};
|
||||
|
||||
const handleProductCardClick = (documentId: string) => {
|
||||
// 使用路由导航到产品详情页
|
||||
@ -76,6 +100,21 @@
|
||||
router.push(localePath(`/products/${documentId}`));
|
||||
}
|
||||
};
|
||||
|
||||
watch(height, (h) => {
|
||||
if (h > 0) {
|
||||
carouselHeight.value = h + 40 + 'px';
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
updatePerPage();
|
||||
window.addEventListener('resize', updatePerPage);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', updatePerPage);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -126,7 +165,7 @@
|
||||
.recommend-list {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
height: 400px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.recommend-card-group {
|
||||
@ -134,7 +173,7 @@
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.recommend-card {
|
||||
@ -173,4 +212,16 @@
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.recommend-card {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.recommend-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,19 +5,20 @@
|
||||
<div v-if="!pending">
|
||||
<el-carousel
|
||||
class="recommend-carousel"
|
||||
height="auto"
|
||||
:height="carouselHeight"
|
||||
arrow="never"
|
||||
indicator-position="outside"
|
||||
:autoplay="false"
|
||||
>
|
||||
<el-carousel-item
|
||||
v-for="n in Math.floor(solutions.length / 3) + 1"
|
||||
v-for="n in pages"
|
||||
ref="carouselItem"
|
||||
:key="n"
|
||||
class="recommend-list"
|
||||
>
|
||||
<div class="recommend-card-group">
|
||||
<el-card
|
||||
v-for="(item, index) in solutions.slice((n - 1) * 3, n * 3)"
|
||||
v-for="(item, index) in pageSolutions(n)"
|
||||
:key="index"
|
||||
class="recommend-card"
|
||||
@click="handleSolutionCardClick(item.id.toString() || '')"
|
||||
@ -62,11 +63,34 @@
|
||||
},
|
||||
});
|
||||
|
||||
const carouselHeight = ref<string>('auto');
|
||||
const perPage = ref(3);
|
||||
const carouselItem = ref<HTMLElement | null>(null);
|
||||
|
||||
const { getImageUrl } = useDirectusImage();
|
||||
const { height } = useElementSize(carouselItem);
|
||||
|
||||
const solutions = computed(
|
||||
() => props.homepageData?.recommendSolutions || []
|
||||
);
|
||||
const pages = computed(() =>
|
||||
Math.ceil(solutions.value.length / perPage.value)
|
||||
);
|
||||
|
||||
const updatePerPage = () => {
|
||||
const width = window.innerWidth;
|
||||
if (width < 768) {
|
||||
perPage.value = 1;
|
||||
} else if (width < 1024) {
|
||||
perPage.value = 2;
|
||||
} else {
|
||||
perPage.value = 3;
|
||||
}
|
||||
};
|
||||
|
||||
const pageSolutions = (n: number) => {
|
||||
return solutions.value.slice((n - 1) * perPage.value, n * perPage.value);
|
||||
};
|
||||
|
||||
const handleSolutionCardClick = (documentId: string) => {
|
||||
// 使用路由导航到产品详情页
|
||||
@ -76,6 +100,21 @@
|
||||
router.push(localePath(`/solutions/${documentId}`));
|
||||
}
|
||||
};
|
||||
|
||||
watch(height, (h) => {
|
||||
if (h > 0) {
|
||||
carouselHeight.value = h + 40 + 'px';
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
updatePerPage();
|
||||
window.addEventListener('resize', updatePerPage);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', updatePerPage);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -126,7 +165,7 @@
|
||||
.recommend-list {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
height: 400px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.recommend-card-group {
|
||||
@ -134,7 +173,7 @@
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.recommend-card {
|
||||
@ -173,4 +212,16 @@
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.recommend-card {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.recommend-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -42,4 +42,11 @@
|
||||
color: var(--el-text-color-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.product-tabs ::v-deep(.el-tabs__nav) {
|
||||
float: none;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<el-carousel
|
||||
v-else
|
||||
class="product-carousel"
|
||||
height="500px"
|
||||
height="auto"
|
||||
:autoplay="false"
|
||||
:loop="false"
|
||||
arrow="always"
|
||||
@ -18,8 +18,9 @@
|
||||
<el-carousel-item
|
||||
v-for="(item, index) in product.images || []"
|
||||
:key="index"
|
||||
class="product-carousel-item"
|
||||
>
|
||||
<div class="product-carousel-item">
|
||||
<div>
|
||||
<el-image
|
||||
:src="getImageUrl(item.image || '')"
|
||||
:alt="product.name"
|
||||
@ -59,6 +60,10 @@
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.product-carousel-item {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.product-image .el-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -99,4 +104,23 @@
|
||||
line-height: 1.6;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.product-header {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.product-carousel-item {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.product-image .el-image {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.product-info h1 {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<footer class="jinshen-footer">
|
||||
<div class="footer-container">
|
||||
<div class="footer-container hide-on-mobile">
|
||||
<!-- Logo 和公司信息 -->
|
||||
<div class="footer-section">
|
||||
<div class="footer-logo">
|
||||
@ -250,6 +250,10 @@
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.hide-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 1.5rem 1rem;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<header class="header-container">
|
||||
<!-- Logo -->
|
||||
<div class="logo-section">
|
||||
<NuxtLink :to="$localePath('/')" class="logo-link">
|
||||
<el-image
|
||||
@ -11,6 +12,7 @@
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- 桌面菜单 -->
|
||||
<div class="header-menu-section">
|
||||
<!-- 导航菜单 -->
|
||||
<el-menu
|
||||
@ -48,6 +50,7 @@
|
||||
</el-link>
|
||||
|
||||
<el-link
|
||||
class="hide-on-mobile"
|
||||
type="info"
|
||||
:underline="false"
|
||||
href="http://cal.jinshen.cn"
|
||||
@ -56,7 +59,7 @@
|
||||
<el-icon class="mdi mdi-calculator action-icon" />
|
||||
</el-link>
|
||||
|
||||
<el-dropdown @command="setLocale">
|
||||
<el-dropdown class="hide-on-mobile" @command="setLocale">
|
||||
<el-link type="info" :underline="false">
|
||||
<el-icon class="mdi mdi-translate action-icon" />
|
||||
</el-link>
|
||||
@ -67,6 +70,82 @@
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
||||
<!-- 汉堡按钮（仅移动端显示） -->
|
||||
<el-link type="info" :underline="false">
|
||||
<el-icon
|
||||
class="mdi mdi-menu mobile-menu-button"
|
||||
@click="mobileMenuVisible = true"
|
||||
/>
|
||||
</el-link>
|
||||
|
||||
<!-- Drawer 抽屉菜单 -->
|
||||
<client-only>
|
||||
<el-drawer
|
||||
v-model="mobileMenuVisible"
|
||||
class="mobile-drawer"
|
||||
direction="rtl"
|
||||
size="70%"
|
||||
>
|
||||
<template #header>
|
||||
<div class="drawer-header">
|
||||
<h1>菜单</h1>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<h2>站点导航</h2>
|
||||
<el-menu
|
||||
:default-active="activeName"
|
||||
class="mobile-menu"
|
||||
mode="vertical"
|
||||
router
|
||||
@select="mobileMenuVisible = false"
|
||||
>
|
||||
<el-menu-item index="products" :route="$localePath('/products')">
|
||||
{{ $t('navigation.products') }}
|
||||
</el-menu-item>
|
||||
<el-menu-item
|
||||
index="solutions"
|
||||
:route="$localePath('/solutions')"
|
||||
>
|
||||
{{ $t('navigation.solutions') }}
|
||||
</el-menu-item>
|
||||
<el-menu-item index="support" :route="$localePath('/support')">
|
||||
{{ $t('navigation.support') }}
|
||||
</el-menu-item>
|
||||
<el-menu-item index="about" :route="$localePath('/about')">
|
||||
{{ $t('navigation.about-us') }}
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<h2>实用工具</h2>
|
||||
<el-menu
|
||||
:default-active="activeName"
|
||||
class="mobile-menu"
|
||||
mode="vertical"
|
||||
@select="mobileMenuVisible = false"
|
||||
>
|
||||
<el-menu-item @click="openExternalLink('http://cal.jinshen.cn')">
|
||||
{{ $t('navigation.calculator') }}
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-dropdown @command="setLocale">
|
||||
<el-link type="info" :underline="false">
|
||||
<el-icon class="mdi mdi-translate mobile-menu-button" />
|
||||
</el-link>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="zh">简体中文</el-dropdown-item>
|
||||
<el-dropdown-item command="en">English</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</client-only>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
@ -78,6 +157,7 @@
|
||||
const { setLocale } = useI18n();
|
||||
|
||||
const activeName = ref<string | undefined>(undefined);
|
||||
const mobileMenuVisible = ref(false);
|
||||
|
||||
const refreshMenu = () => {
|
||||
const path = router.currentRoute.value.path;
|
||||
@ -94,6 +174,10 @@
|
||||
}
|
||||
};
|
||||
|
||||
const openExternalLink = (url: string) => {
|
||||
window.open(url, '_blank');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
refreshMenu();
|
||||
// 监听路由变化以更新激活状态
|
||||
@ -105,10 +189,10 @@
|
||||
|
||||
<style scoped>
|
||||
.header-container {
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
height: 80px;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
@ -167,4 +251,88 @@
|
||||
.action-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.mobile-menu-button {
|
||||
display: none; /* 默认隐藏汉堡按钮 */
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.el-drawer__header) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.el-drawer__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.mobile-drawer h1 {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mobile-drawer h2 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
border: none;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.mobile-menu .el-menu-item {
|
||||
font-size: 16px;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.mobile-menu .el-menu-item.is-active {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.mobile-menu .el-menu-item:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.header-container {
|
||||
height: 70px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.website-logo {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.header-menu-section .header-menu .el-menu-item {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header-menu-section {
|
||||
display: none; /* 隐藏横向菜单 */
|
||||
}
|
||||
|
||||
.hide-on-mobile {
|
||||
display: none; /* 隐藏部分图标 */
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mobile-menu-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="question-category">
|
||||
<el-row :gutter="12">
|
||||
<el-row class="hide-on-mobile" :gutter="12">
|
||||
<el-col :span="8">
|
||||
<span class="select-label">产品分类</span>
|
||||
<el-select
|
||||
@ -43,6 +43,48 @@
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="display-on-mobile" :gutter="12">
|
||||
<el-col :span="12">
|
||||
<span class="select-label">产品分类</span>
|
||||
<el-select
|
||||
v-model="model.selectedType"
|
||||
placeholder="选择产品类型"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="type in productTypeOptions"
|
||||
:key="type.id"
|
||||
:label="type.name"
|
||||
:value="type.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<span class="select-label">产品系列</span>
|
||||
<el-select
|
||||
v-model="model.selectedProduct"
|
||||
placeholder="选择系列产品"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="product in productOptions"
|
||||
:key="product.id"
|
||||
:label="product.name"
|
||||
:value="product.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="display-on-mobile">
|
||||
<span class="select-label">关键词</span>
|
||||
<el-input
|
||||
v-model="model.keyword"
|
||||
placeholder="输入关键词..."
|
||||
clearable
|
||||
:prefix-icon="Search"
|
||||
/>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -82,4 +124,18 @@
|
||||
height: 40px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.display-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hide-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
.display-on-mobile {
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -86,7 +86,8 @@
|
||||
}
|
||||
|
||||
.card-group {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 50px;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 2rem;
|
||||
@ -121,4 +122,15 @@
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-group {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user