|
@@ -2,7 +2,7 @@
|
|
|
<div class="portal-home min-h-screen bg-[#eef3f9] text-[#17345f]">
|
|
<div class="portal-home min-h-screen bg-[#eef3f9] text-[#17345f]">
|
|
|
<Header />
|
|
<Header />
|
|
|
|
|
|
|
|
- <main class="mx-auto max-w-[1400px] px-6 pb-8 pt-20">
|
|
|
|
|
|
|
+ <main class="mx-auto max-w-[1400px] px-3 pb-8 pt-20">
|
|
|
<section class="hero-banner overflow-hidden rounded-[6px] relative">
|
|
<section class="hero-banner overflow-hidden rounded-[6px] relative">
|
|
|
<div class="">
|
|
<div class="">
|
|
|
<!-- 轮播容器 -->
|
|
<!-- 轮播容器 -->
|
|
@@ -61,15 +61,16 @@
|
|
|
<section class="portal-mobile-shortcuts mt-3 md:hidden!">
|
|
<section class="portal-mobile-shortcuts mt-3 md:hidden!">
|
|
|
<button
|
|
<button
|
|
|
type="button"
|
|
type="button"
|
|
|
- class="portal-mobile-shortcut flex flex-col items-center justify-center"
|
|
|
|
|
|
|
+ class="portal-mobile-shortcut flex flex-col items-center justify-center cursor-pointer"
|
|
|
@click="router.push('/flow')"
|
|
@click="router.push('/flow')"
|
|
|
>
|
|
>
|
|
|
<img src="../assets//images/flow.png" alt="" class="w-10 h-10" />
|
|
<img src="../assets//images/flow.png" alt="" class="w-10 h-10" />
|
|
|
流程门户
|
|
流程门户
|
|
|
</button>
|
|
</button>
|
|
|
<button
|
|
<button
|
|
|
|
|
+ v-hasPermi="['portal:dashboard:view']"
|
|
|
type="button"
|
|
type="button"
|
|
|
- class="portal-mobile-shortcut flex flex-col items-center justify-center"
|
|
|
|
|
|
|
+ class="portal-mobile-shortcut flex flex-col items-center justify-center cursor-pointer"
|
|
|
@click="router.push('/drive')"
|
|
@click="router.push('/drive')"
|
|
|
>
|
|
>
|
|
|
<img src="../assets//images/driveicon.png" alt="" class="w-10 h-10" />
|
|
<img src="../assets//images/driveicon.png" alt="" class="w-10 h-10" />
|
|
@@ -77,7 +78,7 @@
|
|
|
</button>
|
|
</button>
|
|
|
<button
|
|
<button
|
|
|
type="button"
|
|
type="button"
|
|
|
- class="portal-mobile-shortcut flex flex-col items-center justify-center"
|
|
|
|
|
|
|
+ class="portal-mobile-shortcut flex flex-col items-center justify-center cursor-pointer"
|
|
|
>
|
|
>
|
|
|
<img src="../assets//images/report.png" alt="" class="w-10 h-10" />
|
|
<img src="../assets//images/report.png" alt="" class="w-10 h-10" />
|
|
|
报表门户
|
|
报表门户
|
|
@@ -89,7 +90,7 @@
|
|
|
<article
|
|
<article
|
|
|
v-for="section in portalSections"
|
|
v-for="section in portalSections"
|
|
|
:key="section.code"
|
|
:key="section.code"
|
|
|
- class="platform-block"
|
|
|
|
|
|
|
+ class="platform-block rounded-sm"
|
|
|
:style="{ minHeight: section.height }"
|
|
:style="{ minHeight: section.height }"
|
|
|
>
|
|
>
|
|
|
<div class="platform-block__header">
|
|
<div class="platform-block__header">
|
|
@@ -1507,23 +1508,60 @@ onUnmounted(() => {
|
|
|
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
|
|
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.consult-dialog :deep(.el-dialog__header) {
|
|
|
|
|
- margin-right: 0;
|
|
|
|
|
- padding-bottom: 12px;
|
|
|
|
|
|
|
+.carousel-container {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ /* 确保容器在移动端有合适的高度,或者使用 aspect-ratio */
|
|
|
|
|
+ height: 220px;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.carousel-slide {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ inset: 0; /* 确保填满父容器 */
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.consult-dialog :deep(.el-dialog__body) {
|
|
|
|
|
- padding-top: 8px;
|
|
|
|
|
|
|
+.hero-visual {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ inset: 0; /* 关键:让背景层填满整个 slide */
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.consult-dialog :deep(.el-upload--picture-card) {
|
|
|
|
|
- --el-upload-picture-card-size: 92px;
|
|
|
|
|
|
|
+.hero-visual img {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ /* 关键修改:使用 cover 确保图片填满容器且不留白,即使部分被裁剪 */
|
|
|
|
|
+ object-fit: cover;
|
|
|
|
|
+ /* 如果希望完整显示图片但可能有留白,改用 object-fit: contain; 但通常 banner 推荐 cover */
|
|
|
|
|
+ display: block; /* 消除 img 默认的底部间隙 */
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-@media (max-width: 640px) {
|
|
|
|
|
- .consult-dialog :deep(.el-dialog) {
|
|
|
|
|
- width: calc(100vw - 24px) !important;
|
|
|
|
|
- margin-top: 8vh !important;
|
|
|
|
|
|
|
+/* 移动端适配优化 */
|
|
|
|
|
+@media (max-width: 768px) {
|
|
|
|
|
+ .carousel-container {
|
|
|
|
|
+ /* 移动端可以适当减小高度,或者保持比例 */
|
|
|
|
|
+ height: 220px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .carousel-caption {
|
|
|
|
|
+ /* 移动端调整文字位置,避免遮挡图片或超出屏幕 */
|
|
|
|
|
+ left: 20px;
|
|
|
|
|
+ right: 20px;
|
|
|
|
|
+ top: 50%;
|
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
|
+ text-align: center; /* 移动端居中通常更好看 */
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .hero-script {
|
|
|
|
|
+ font-size: 40px; /* 适当减小字体 */
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .hero-text {
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|