更新提示

src/views/MainPage.vue

@@ -78,7 +78,7 @@
     <el-dialog
       v-model="showWelcomeDialog"
       width="90%"
-      :style="{ maxWidth: '400px' }"
+      :style="{ height: '425px' }"
       :show-close="true"
       :close-on-click-modal="true"
       :close-on-press-escape="true"
@@ -453,12 +453,13 @@ export default {
 /* 欢迎弹窗样式 */
 :deep(.welcome-dialog .el-dialog__body) {
   background-image: url('/imgs/mainpage/gengxintishi.png');
-  background-size: 100% 108%;
-  background-position: center;
+  background-size: 100% 100%;
+  background-position: center bottom;
   background-repeat: no-repeat;
   position: relative;
   /* 调整背景图透明度，值范围0-1，0为完全透明，1为完全不透明 */
   opacity: 1;
+  padding-bottom: 60px;
 }
 
 :deep(.welcome-dialog .el-dialog__body::before) {
@@ -475,9 +476,14 @@ export default {
 
 .welcome-content {
   text-align: center;
-  padding: 20px 0;
+  padding: 40px 20px 0 20px;
   position: relative;
   z-index: 2;
+  height: calc(100% - 80px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .welcome-icon {
@@ -488,9 +494,9 @@ export default {
 
 .welcome-content h3 {
   color: var(--primary-color);
-  font-size: 24px;
+  font-size: 26px;
   font-weight: 600;
-  margin: 0 0 12px 0;
+  margin: 0 0 20px 0;
 }
 
 .welcome-content p {
@@ -503,8 +509,8 @@ export default {
 .welcome-features {
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  margin-top: 20px;
+  gap: 20px;
+  margin-top: 30px;
 }
 
 .feature-item {
@@ -528,10 +534,28 @@ export default {
   text-align: center;
 }
 
+:deep(.welcome-dialog .el-dialog__footer) {
+  padding: 15px 20px;
+  border-top: none;
+  background: transparent;
+  position: absolute;
+  bottom: 10;
+  left: 0;
+  right: 0;
+  z-index: 3;
+}
+
 .dialog-footer {
   display: flex;
   justify-content: center;
   gap: 12px;
+  padding: 0;
+  position: absolute;
+  bottom: 10;
+  left: 0;
+  right: 0;
+  background: transparent;
+  z-index: 3;
 }
 
 @keyframes bounce {
@@ -549,7 +573,8 @@ export default {
 /* 弹窗响应式样式 */
 @media (max-width: 480px) {
   .welcome-content {
-    padding: 16px 0;
+    padding: 30px 15px 0 15px;
+    height: calc(100% - 70px);
   }
   
   .welcome-icon {
@@ -557,13 +582,19 @@ export default {
   }
   
   .welcome-content h3 {
-    font-size: 20px;
+    font-size: 22px;
+    margin: 0 0 15px 0;
   }
   
   .welcome-content p {
     font-size: 14px;
   }
   
+  .welcome-features {
+    gap: 15px;
+    margin-top: 25px;
+  }
+  
   .feature-item {
     padding: 10px 12px;
   }
@@ -572,5 +603,13 @@ export default {
     font-size: 18px;
     margin-right: 10px;
   }
+  
+  :deep(.welcome-dialog .el-dialog__footer) {
+    padding: 10px 15px;
+  }
+  
+  :deep(.welcome-dialog .el-dialog__body) {
+    padding-bottom: 50px;
+  }
 }
 </style>