【需求 20331】 styles: 优化布局等

src/layoutCulture/index.vue

 <template>
   <div class="layout-culture pb-11 h-full bg-[linear-gradient(to_bottom,#F0FBFD_0%,#ECEFFF_100%)]">
     <div
-      class="header flex px-40 items-center justify-between bg-white mb-1 shadow-sm fixed top-0 left-0 right-0 z-100 w-100vw"
+      class="header flex px-20 lg:px-40 items-center justify-between bg-white mb-1 shadow-sm fixed top-0 left-0 right-0 z-100 w-100vw"
     >
       <!-- Logo区域 -->
       <div @click="router.push('/')" class="flex items-center flex-shrink-0 min-w-0 cursor-pointer">
@@ -102,9 +102,7 @@
       </div>
     </div>
     <div class="flex-1 w-full flex items-center justify-center">
-      <div
-        class="container max-h-none px-0 lg:px-10 2xl:px-43 transition-all duration-300 min-h-[calc(100vh-96px)]"
-      >
+      <div class="container max-h-none transition-all duration-300 min-h-[calc(100vh-96px)]">
         <router-view v-slot="{ Component, route }">
           <transition name="fade" mode="out-in">
             <!-- 注释不能放到keep-alive下面 route是最终的路由信息 Component是当前n级路由的组件 二级路由 homePage videoDetail -->
@@ -228,4 +226,29 @@ const isDropdownHover = ref(false)
 .fade-leave-active {
   transition: all 0.3s ease;
 }
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 890px;
+    padding: 0 5px;
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+    padding: 0 50px;
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+    padding: 0 110px;
+  }
+}
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+    padding: 0 150px;
+  }
+}
 </style>

src/views/homePage/homeTab/components/recommendList.vue

@@ -49,6 +49,9 @@
                     dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm')
                   }}</span>
                 </span>
+                <span class="text-sm text-gray-500">{{
+                  articleTypeListOptions.find((i) => i.value === item.type)?.label
+                }}</span>
                 <!-- 分隔符 -->
                 <div class="hidden sm:block w-1 h-1 bg-gray-300 rounded-full"></div>
                 <div class="flex items-center gap-1 hover:text-blue-500 transition-colors">
@@ -140,6 +143,7 @@ import { TABS_REF_KEY, ArticleTypeEnum } from '@/constants'
 import { useScrollTop } from '@/hooks'
 import dayjs from 'dayjs'
 import { jumpToArticleDetailPage } from '@/utils'
+import { articleTypeListOptions } from '@/constants'
 
 const { list, total, searchParams, loading, goToPage, changePageSize, refresh } = usePageSearch(
   getArticleList,

src/views/homePage/index.vue

@@ -15,7 +15,7 @@
     </div>
 
     <div class="flex gap-3">
-      <div class="left flex-1 basis-full xl:basis-3/4 transition-all duration-500">
+      <div class="left lg:basis-3/4 transition-all duration-500">
         <div
           id="tabsRef"
           ref="tabsRef"
@@ -57,7 +57,7 @@
         </div>
       </div>
       <!-- 屏幕变小直接隐藏 -->
-      <div class="right flex-col gap-3 flex basis-1/4">
+      <div class="right flex-col gap-3 flex lg:basis-1/4">
         <!-- 等级等相关信息 -->
         <div
           ref="levelContainerRef"
@@ -142,13 +142,13 @@
         </div>
 
         <div class="submit-container common-box rounded-lg bg-#EDEAFE">
-          <div class="grid grid-cols-3 gap-2 mb-4">
+          <div class="grid grid-cols-3 mb-4 gap-0 2xl:gap-2">
             <div
               class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 p-2 rounded-lg hover:bg-white/10"
               @click="publishTopic"
             >
               <svg-icon name="topic_release" size="80" />
-              <div class="text-xs sm:text-sm">话题发布</div>
+              <div class="text-xs 2xl:text-sm">话题发布</div>
             </div>
             <div
               class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 p-2 rounded-lg hover:bg-white/10"
@@ -158,7 +158,7 @@
                 <svg-icon name="answer" size="80" />
               </el-badge>
 
-              <div class="text-xs sm:text-sm">回答问题</div>
+              <div class="text-xs 2xl:text-sm">回答问题</div>
             </div>
 
             <div
@@ -166,7 +166,7 @@
               class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 p-2 rounded-lg hover:bg-white/10"
             >
               <svg-icon name="video_release" size="80" />
-              <div class="text-xs sm:text-sm">视频发布</div>
+              <div class="text-xs 2xl:text-sm">视频发布</div>
             </div>
           </div>
           <div class="flex justify-center items-center">
@@ -216,11 +216,11 @@
                   class="flex items-center justify-between hover:bg-white/10 rounded-lg transition-colors duration-200 group"
                 >
                   <div class="flex items-center min-w-0 flex-1">
-                    <div class="h-70px flex items-center justify-center">
+                    <div class="h-16 2xl:h-19 flex items-center justify-center">
                       <svg-icon :name="item.svgName" size="46" />
                     </div>
                     <div
-                      class="flex flex-col items-start justify-center ml-2 sm:ml-3 min-w-0 flex-1"
+                      class="flex flex-col items-start justify-center mx-2 sm:ml-3 min-w-0 flex-1"
                     >
                       <el-tooltip :content="item.description" placement="top">
                         <div class="text-14px truncate w-full font-medium mb-1 cursor-pointer">
@@ -230,17 +230,16 @@
 
                       <div class="color-#333 text-xs w-full flex items-center flex-nowrap">
                         <svg-icon name="small_coin" size="16" class="mr-1" />
-                        <div class="truncate w-130px">
-                          +{{ item.rewardValue }}亚币{{
-                            TaskDateLimitTypeText[item.limitType] &&
-                            `(${TaskDateLimitTypeText[item.limitType] + '刷新'})`
-                          }}
-                        </div>
+                        <el-tooltip :content="getTaskRewardDescription(item)" placement="bottom">
+                          <div class="truncate w-130px">
+                            {{ getTaskRewardDescription(item) }}
+                          </div>
+                        </el-tooltip>
                       </div>
                     </div>
                   </div>
                   <button
-                    class="w-72px h-32px shadow-[0_1px_8px_0_rgba(255,141,54,0.25)] border-none text-xs sm:text-sm rounded-full"
+                    class="w-16 h-8 2xl:w-18 2xl:h-9 shadow-[0_1px_8px_0_rgba(255,141,54,0.25)] border-none text-xs sm:text-sm rounded-full"
                     :class="[
                       item.currentCount === item.limitCount
                         ? 'bg-#FFC5A1 cursor-not-allowed'
@@ -257,7 +256,6 @@
                     >
                   </button>
                 </div>
-                <!-- 分割线 -->
                 <el-divider style="margin: 0" />
               </div>
             </div>
@@ -355,6 +353,12 @@ const currentTaskList = computed(() =>
   currentTask.value === TaskTypeEnum.REGULAR_TASK ? regularTaskList.value : specialTaskList.value,
 )
 
+const getTaskRewardDescription = (item: TaskItemDto) => {
+  return `+${item.rewardValue}亚币${
+    TaskDateLimitTypeText[item.limitType] && `(${TaskDateLimitTypeText[item.limitType] + '刷新'})`
+  }`
+}
+
 // 用户账号信息
 const userAccountData = ref<UserAccountDataDto>({} as UserAccountDataDto)
 const currentLevelData = computed<{

src/views/searchPage/index.vue

@@ -49,7 +49,7 @@
           <el-radio-group
             size="default"
             v-model="searchParams.sortLogic"
-            @change="(val: number) => changeSort(val)"
+            @change="(val) => changeSort(val as number)"
           >
             <el-radio-button
               v-for="sort in sortOptions"