Jelajahi Sumber

样式修改

yanghao 3 hari lalu
induk
melakukan
40f6b026f0
2 mengubah file dengan 55 tambahan dan 18 penghapusan
  1. 1 2
      src/views/flow/index.vue
  2. 54 16
      src/views/index.vue

+ 1 - 2
src/views/flow/index.vue

@@ -567,8 +567,7 @@ const go = async (item) => {
           //   },
           // });
           if (window.dd) {
-            const targetUrl1 =
-              "https://yfding.keruioil.com/spa/workflow/static4mobileform/index.html?_random=1778205102430#/req?iscreate=1&workflowid=681&isagent=0&f_weaver_belongto_userid=&beagenter=0&f_weaver_belongto_usertype=0";
+            const targetUrl1 = item.appUrl;
             dd.biz.util.openLink({
               url: targetUrl1,
               onSuccess: () => {},

+ 54 - 16
src/views/index.vue

@@ -2,7 +2,7 @@
   <div class="portal-home min-h-screen bg-[#eef3f9] text-[#17345f]">
     <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">
         <div class="">
           <!-- 轮播容器 -->
@@ -61,15 +61,16 @@
       <section class="portal-mobile-shortcuts mt-3 md:hidden!">
         <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')"
         >
           <img src="../assets//images/flow.png" alt="" class="w-10 h-10" />
           流程门户
         </button>
         <button
+          v-hasPermi="['portal:dashboard:view']"
           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')"
         >
           <img src="../assets//images/driveicon.png" alt="" class="w-10 h-10" />
@@ -77,7 +78,7 @@
         </button>
         <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" />
           报表门户
@@ -89,7 +90,7 @@
           <article
             v-for="section in portalSections"
             :key="section.code"
-            class="platform-block"
+            class="platform-block rounded-sm"
             :style="{ minHeight: section.height }"
           >
             <div class="platform-block__header">
@@ -1507,23 +1508,60 @@ onUnmounted(() => {
   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>