主页样式调整

src/views/MainPage.vue

@@ -3,6 +3,8 @@
     <div class="spacer"></div>
 
     <div class="main-content">
+
+      <p class="welcome">{{userName}}，欢迎来到炬融圈</p>
       <!-- 轮播图 -->
       <div class="carousel">
         <swiper
@@ -41,13 +43,13 @@
       <div class="action-area">
         <div class="action-grid-horizontal">
           <router-link to="/matching?quantitative=true" class="action-item">
-            <img src="/imgs/mainpage/dinglianghuoqu1.png" alt="定量获取" class="action-image" />
+            <img src="/imgs/mainpage/dinglianghuoqu1.png" alt="定量获取" class="action-image1" />
           </router-link>
           <router-link to="/matching" class="action-item">
-            <img src="/imgs/mainpage/huoqurongdou1.png" alt="获取融豆" class="action-image" />
+            <img src="/imgs/mainpage/huoqurongdou1.png" alt="获取融豆" class="action-image2" />
           </router-link>
           <router-link to="/myshop" class="action-item">
-            <img src="/imgs/mainpage/shangcheng1.png" alt="商城" class="action-image" />
+            <img src="/imgs/mainpage/shangcheng1.png" alt="商城" class="action-image3" />
           </router-link>
         </div>
       </div>
@@ -68,7 +70,7 @@
     </div>
 
     <!-- 欢迎弹窗 -->
-    <el-dialog
+    <!-- <el-dialog
       v-model="showWelcomeDialog"
       width="90%"
       :style="{ height: '425px' }"
@@ -97,16 +99,17 @@
           <el-button @click="showWelcomeDialog = false">关闭</el-button>
         </span>
       </template>
-    </el-dialog>
+    </el-dialog> -->
   </div>
 </template>
 
 <script>
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Autoplay, Pagination } from 'swiper';
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, computed } from 'vue';
 import { ElMessage, ElDialog, ElButton } from 'element-plus';
 import { transferAPI } from '../utils/api';
+import { useUserStore } from '../stores/user';
 import 'swiper/css';
 import 'swiper/css/autoplay';
 import 'swiper/css/pagination';
@@ -117,9 +120,17 @@ export default {
     SwiperSlide,
   },
   setup() {
+    // 用户store
+    const userStore = useUserStore();
+    
     // 响应式数据
     const userPoints = ref(0);
     const showWelcomeDialog = ref(false);
+    
+    // 计算属性 - 获取用户名
+    const userName = computed(() => {
+      return userStore.user?.username || '用户';
+    });
     const carouselItems = ref([
       { image: '/imgs/top/1.jpg', title: '限时优惠活动' },
       { image: '/imgs/top/2.jpg', title: '新用户专享' },
@@ -189,6 +200,7 @@ export default {
     return {
       modules: [Autoplay, Pagination],
       userPoints,
+      userName,
       carouselItems,
       headerItems,
       newsItems,
@@ -227,7 +239,7 @@ export default {
   position: relative;
   background-image: url('/imgs/mainpage/jingganglan-1.png'), url('/imgs/mainpage/jingganglan-2.png');
   background-size: 100% 10%, 100% 100%;
-  background-position: center 24%, center 100%;
+  background-position: center 28%, center 100%;
   background-repeat: no-repeat, no-repeat;
 }
 
@@ -242,6 +254,13 @@ export default {
   width: 100%;
 }
 
+/* 欢迎文字 */
+.welcome {
+  font-size: 15px;
+  font-weight: 500;
+  color: white;
+}
+
 .spacer {
   height: 40px;
 }
@@ -346,12 +365,31 @@ export default {
   transform: scale(1.05);
 }
 
-.action-image {
+.action-image1 {
-  width: 100%;
+  width: 300%;
   height: auto;
-  max-width: 110px;
+  max-width: 180px;
   object-fit: contain;
   border-radius: 8px;
+  margin-left: 40px;
+}
+
+.action-image2 {
+  width: 300%;
+  height: auto;
+  max-width: 180px;
+  object-fit: contain;
+  border-radius: 8px;
+  margin-left: 20px;
+}
+
+.action-image3 {
+  width: 300%;
+  height: auto;
+  max-width: 180px;
+  object-fit: contain;
+  border-radius: 8px;
+  margin-left: 40px;
 }
 
 /* 热门资讯 */
@@ -360,7 +398,8 @@ export default {
   padding: 16px;
   background-color: white;
   border-radius: 12px;
-  box-shadow: var(--box-shadow);
+  border: 1px solid #e0e0e0;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   margin: 0 auto;
   opacity: 1;
 }