github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-15 04:09:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance the marketplace page (#298)

Browse Source
This commit is contained in:
Fine0830
2023-07-11 22:32:36 +08:00
committed by GitHub
parent a521e041a7
commit 5367af47c4
9 changed files with 80 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/marketplace/Menus.vue
View File

@@ -18,13 +18,15 @@ limitations under the License. -->
<div class="mr-20 mt-10 flex-h category">
<el-card
class="item"
v-for="(menu, index) in appStore.activateMenus"
v-for="(menu, index) in appStore.allMenus"
:key="index"
@click="handleItems(menu)"
:class="currentItems.name === menu.name ? 'active' : ''"
>
<router-link :to="menu.hasGroup ? '' : menu.path || ''">
<div class="title" :class="menu.hasGroup ? '' : 'actived-font'"> {{ menu.title }}</div>
<div class="title" :class="menu.activate ? (menu.hasGroup ? '' : 'actived-font') : 'disabled'">
{{ menu.title }}</div
>
</router-link>
<div class="mt-10"> {{ menu.description }} </div>
<el-link :href="menu.documentLink" target="_blank" class="link" v-show="menu.documentLink">
@@ -35,7 +37,7 @@ limitations under the License. -->
<div class="mt-10 cards">
<el-card shadow="hover" v-for="(item, index) in currentItems.subItems || []" :key="index" class="card">
<router-link :to="item.path || ''">
<div class="title actived-font"> {{ item.title }}</div>
<div class="title" :class="item.activate ? 'actived-font' : 'disabled'"> {{ item.title }}</div>
</router-link>
<div class="mt-10"> {{ item.description }} </div>
<el-link :href="item.documentLink" target="_blank" class="link" v-show="item.documentLink">
@@ -54,13 +56,13 @@ limitations under the License. -->
const { t } = useI18n();
const appStore = useAppStoreWithOut();
const currentItems = ref<MenuOptions>(appStore.activateMenus[0] || {});
const currentItems = ref<MenuOptions>(appStore.allMenus[0] || {});
function handleItems(item: MenuOptions) {
currentItems.value = item;
}
appStore.setPageTitle("Categories");
appStore.setPageTitle("Marketplace");
</script>
<style lang="scss" scoped>
.menus {
@@ -86,6 +88,10 @@ limitations under the License. -->
color: $active-color;
}
.disabled {
color: #aaa;
}
.card {
margin-bottom: 30px;
cursor: pointer;