动态页面列表样式 首页轮播图样式

components/Carousel.vue

@@ -15,27 +15,31 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="relative h-300px w-full overflow-hidden md:h-600px xl:h-800px">
+  <div class="relative h-400px w-full overflow-hidden md:h-600px xl:h-800px">
     <AViews
       v-model="pages"
       h-full
-      class="h-full absolute w-full [&_.a-views-wrapper]:h-full"
+      class="absolute h-full w-full [&_.a-views-wrapper]:h-full"
     >
       <AView v-for="(item, i) in carousels" :key="i" :value="i" h-full>
         <!-- <NuxtImg :src="item.img" fit="cover" class="w-full h-full" height="600" width="1000"/> -->
-        <ImageLoading :src="item.img" fit="cover" class="w-full h-full" height="600" width="1000"/>
+        <ImageLoading :src="item.img" fit="cover" class="h-full w-full" height="600" width="1000" />
+
+        <div class="absolute left-0 top-0 z-1 h-full w-full" style="background-image: linear-gradient(0deg,hsl(var(--a-body-bg-c)),transparent 65%, hsl(var(--a-body-bg-c))); pointer-events: none; pointer-events: none;" />
       </AView>
     </AViews>
 
     <Section class="top-0 z-10 h-full w-full flex items-center justify-center text-shadow">
       <Typography
         text-color="white"
+        link-btn-class="scale-150"
+        topic-class="text-5xl lg:text-7xl text-dark dark:text-white "
+        description-class="text-2xl lg:text-4xl text-dark dark:text-white "
         :topic="$t(carousels[pages].title)" :description="$t(carousels[pages].description)" :link="{
           ...carousels[pages].link,
           name: $t(carousels[pages].link.name),
         }"
       />
     </Section>
-    <div class="absolute left-0 top-0 z-1 h-full w-full" style="background-image: linear-gradient(0deg,hsl(var(--a-body-bg-c)),transparent 65%, hsl(var(--a-body-bg-c))); pointer-events: none; pointer-events: none;" />
   </div>
 </template>

components/Typography.vue

@@ -6,6 +6,8 @@ $defineProps<{
   topicClass?: string
   description?: string
   descriptionClass?: string
+  linkClass?: string
+  linkBtnClass?: string
   link?: {
     href: string
     name: string
@@ -27,8 +29,8 @@ $defineProps<{
         description
       }}
     </p>
-    <LocaleNuxtLink v-if="link" :href="link?.href">
+    <LocaleNuxtLink v-if="link" :href="link?.href" :class="linkClass">
-      <ABtn variant="light" class="group" color="white" icon="i-solar-arrow-right-linear transition-all group-hover:px-4">
+      <ABtn variant="light" :class="linkBtnClass" class="group" color="white" icon="i-solar-arrow-right-linear transition-all group-hover:px-4">
         {{ link?.name }}
       </ABtn>
     </LocaleNuxtLink>

locales/en-UK.json

@@ -194,5 +194,10 @@
   "wechat": "微信公众号:ttsetset",
   "waiting": "waiting...",
   "notfound": "not found",
-  "copylink": "Copy share link"
+  "copylink": "Copy share link",
+  "filtrate": "Filtrate",
+  "filtrate.discription": "Filter by condition",
+  "level": [
+    "EASY", "NORMAL", "HARD"
+  ]
 }

locales/zh-CN.json

@@ -189,5 +189,10 @@
   "wechat": "微信公众号",
   "waiting": "建设中...",
   "notfound": "未知区域",
-  "copylink": "复制分享链接"
+  "copylink": "复制分享链接",
+  "filtrate": "筛选",
+  "filtrate.discription": "根据条件过滤",
+  "level": [
+    "入门", "中级", "专家"
+  ]
 }

pages/community/vamx.vue

@@ -19,16 +19,16 @@ const list = computed(() => {
 
 const status = [
   {
-    color: 'bg-rose',
+    color: 'bg-green',
-    text: '入门',
+    text: 'level[0]',
   },
   {
     color: 'bg-amber',
-    text: '中级',
+    text: 'level[1]',
   },
   {
-    color: 'bg-green',
+    color: 'bg-rose',
-    text: '专家',
+    text: 'level[2]',
   },
 ]
 </script>
@@ -39,8 +39,8 @@ const status = [
       <div>
         <ACard
           shadow="none"
-          title="筛选"
+          :title="$t('filtrate')"
-          subtitle="根据条件过滤"
+          :subtitle="$t('filtrate.discription')"
           class="w-full md:w-300px"
         >
           <!-- <img
@@ -97,9 +97,9 @@ const status = [
                 </small>
               </p>
             </div>
-            <div class="flex items-center gap-2">
+            <div class="flex flex-shrink-0 items-center gap-2">
               <div class="h-10px w-10px rounded-full" :class="status[item.level].color" />
-              {{ status[item.level].text }}
+              {{ $t(status[item.level].text) }}
             </div>
           </div>
         </LocaleNuxtLink>

pages/release/index.vue

@@ -24,8 +24,8 @@ const list = computed(() => {
       <div>
         <ACard
           shadow="none"
-          title="筛选"
+          :title="$t('filtrate')"
-          subtitle="根据条件过滤"
+          :subtitle="$t('filtrate.discription')"
           class="w-full md:w-300px"
         >
           <!-- <img
@@ -49,46 +49,38 @@ const list = computed(() => {
         </ACard>
       </div>
 
-      <ACard w-full shadow="none">
+      <ACard w-full shadow="none" class="divide-y divide-dark-50/10">
-        <AList
+        <LocaleNuxtLink v-for="(item, i) in list" :key="i" class="group relative m-4 h-150px w-full flex items-center justify-start" :href="item.href">
-          :items="list"
+          <div :href="item.href" class="absolute h-full w-1/3 overflow-hidden rounded bg-light-50/10 transition-all group-hover:(w-full opacity-50) md:w-1/2" style="mask-image:linear-gradient(270deg, transparent, #000);-webkit-mask-image:linear-gradient(290deg, transparent 12%, #000 80%);">
-          icon-append
+            <ImageLoading class="h-full w-full" :src="item.img" />
-          class="[--a-list-item-gap:1rem] gap-2 divide-y-1 divide-dark-50/10"
-        >
-          <div v-if="!list.length" class="flex items-center justify-center py-20 text-7xl font-bold text-dark-50/10">
-            EMPTY
           </div>
-          <template #item-prepend="{ attrs }">
+          <div class="h-full flex flex-grow flex-col items-end justify-between py-2">
-            <LocaleNuxtLink :href="attrs.href" class="h-150px w-300px overflow-hidden rounded bg-light-50/10" style="mask-image:linear-gradient(270deg, transparent, #000);-webkit-mask-image:linear-gradient(290deg, transparent 12%, #000 80%);">
+            <div>
-              <ImageLoading class="h-full w-full" :src="attrs.img" />
+              <div class="text-title text-right">
-            </LocaleNuxtLink>
+                {{ item.title }}
-          </template>
-          <template #item-content="{ item, attrs }">
-            <LocaleNuxtLink :href="attrs.href" class="h-full flex flex-grow flex-col justify-between py-2">
-              <div>
-                <div class="text-title">
-                  {{ item.title }}
-                </div>
-                <div class="text-description text-opacity-80">
-                  {{ item.subtitle }}
-                </div>
               </div>
-              <small>
+              <div class="text-description text-right text-opacity-80">
-                {{ attrs.createTime }}
+                {{ item.subtitle }}
-              </small>
+              </div>
-            </LocaleNuxtLink>
+            </div>
-          </template>
+            <small>
-          <template #item-append="{ attrs }">
+              {{ item.createTime }}
-            <ABtn
+            </small>
-              variant="text" icon="i-bx-link-external" icon-only @click="copy(`http://www.topverse.world${attrs.href}`)"
+          </div>
-            >
+          <ABtn
-              <ATooltip
+            variant="text" icon="i-bx-link-external" icon-only class="mx-2 h-50px w-50px"
-                transition="fade"
+            @click.prevent="copy(`http://www.topverse.world${item.href}`)"
-                :text="$t('copylink')"
+          >
-              />
+            <ATooltip
-            </ABtn>
+              transition="fade"
-          </template>
+              :text="$t('copylink')"
-        </AList>
+            />
+          </ABtn>
+        </LocaleNuxtLink>
+
+        <div v-if="!list.length" class="flex items-center justify-center py-20 text-7xl font-bold text-dark-50/10">
+          EMPTY
+        </div>
       </ACard>
     </Section>
   </div>