Fix styles of index page (#185)

Co-authored-by: AceDataCloud <office@acedata.cloud>
AceDataCloud · Feb 20, 2025 · 8bf0476 · 8bf0476
1 parent 101a3fa
commit 8bf0476
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 11 deletions.
diff --git a/change/@acedatacloud-nexior-232b6b6e-2ed3-4672-b39d-81fa92f74624.json b/change/@acedatacloud-nexior-232b6b6e-2ed3-4672-b39d-81fa92f74624.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix ux styles for index",
+  "packageName": "@acedatacloud/nexior",
+  "email": "office@acedata.cloud",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/common/TopHeader.vue b/src/components/common/TopHeader.vue
@@ -32,7 +32,11 @@
           @route="undefined"
           @click="openTab('https://platform.acedata.cloud/support')"
         ></el-menu-item>
-        <el-menu-item v-t="'common.nav.referral'" index="/distribution"></el-menu-item>
+        <el-menu-item
+          v-t="'common.nav.referral'"
+          @route="undefined"
+          @click="openTab('https://platform.acedata.cloud/earning')"
+        ></el-menu-item>
       </el-menu>
     </el-col>
     <el-col :md="4" :xs="11">
@@ -178,10 +182,10 @@ $height: 60px;
       color: inherit !important;
       &.is-active {
         color: inherit !important;
-        border-bottom: 2px solid var(--el-color-primary);
+        border-bottom: none !important;
       }
       &:hover {
-        border-bottom: 2px solid var(--el-color-primary);
+        border-bottom: 2px solid var(--el-color-primary) !important;
       }
     }
   }

diff --git a/src/pages/index/Index.vue b/src/pages/index/Index.vue
@@ -53,7 +53,7 @@
             :xs="24"
             class="mb-4"
           >
-            <el-card class="info text-center" shadow="hover">
+            <el-card class="info text-center" shadow="hover" @click="onClickCapability(capability)">
               <div class="icon-wrapper">
                 <font-awesome-icon :icon="capability.icon" class="icon" />
               </div>
@@ -311,7 +311,8 @@ export default defineComponent({
               {
                 title: this.$t('index.title.chat'),
                 subtitle: this.$t('index.subtitle.chat'),
-                icon: 'fa-regular fa-comment'
+                icon: 'fa-regular fa-comment',
+                path: '/chat'
               }
             ]
           : []),
@@ -320,7 +321,8 @@ export default defineComponent({
               {
                 title: this.$t('index.title.midjourney'),
                 subtitle: this.$t('index.subtitle.midjourney'),
-                icon: 'fa-solid fa-palette'
+                icon: 'fa-solid fa-palette',
+                path: '/midjourney'
               }
             ]
           : []),
@@ -329,7 +331,8 @@ export default defineComponent({
               {
                 title: this.$t('index.title.qrart'),
                 subtitle: this.$t('index.subtitle.qrart'),
-                icon: 'fa-solid fa-qrcode'
+                icon: 'fa-solid fa-qrcode',
+                path: '/qrart'
               }
             ]
           : []),
@@ -338,7 +341,8 @@ export default defineComponent({
               {
                 title: this.$t('index.title.suno'),
                 subtitle: this.$t('index.subtitle.suno'),
-                icon: 'fa-solid fa-music'
+                icon: 'fa-solid fa-music',
+                path: '/suno'
               }
             ]
           : []),
@@ -347,7 +351,8 @@ export default defineComponent({
               {
                 title: this.$t('index.title.luma'),
                 subtitle: this.$t('index.subtitle.luma'),
-                icon: 'fa-solid fa-film'
+                icon: 'fa-solid fa-film',
+                path: '/luma'
               }
             ]
           : []),
@@ -356,15 +361,20 @@ export default defineComponent({
               {
                 title: this.$t('index.title.headshots'),
                 subtitle: this.$t('index.subtitle.headshots'),
-                icon: 'fa-solid fa-id-card'
+                icon: 'fa-solid fa-id-card',
+                path: '/headshots'
               }
             ]
           : [])
       ];
     }
   },
   mounted() {},
-  methods: {}
+  methods: {
+    onClickCapability(capability: any) {
+      this.$router.push(capability.path);
+    }
+  }
 });
 </script>
 
@@ -422,6 +432,7 @@ export default defineComponent({
       font-size: 20px;
       padding: 0 20px;
       color: var(--el-text-color-secondary);
+      margin-bottom: 20px;
     }
     .btn-try {
       padding: 25px 62px;
@@ -484,6 +495,9 @@ export default defineComponent({
   @media (max-width: 767px) {
     padding: 100px 20px;
   }
+  .container {
+    cursor: pointer;
+  }
   .info {
     .title {
       font-size: 20px;