110 lines
2.2 KiB
Vue
110 lines
2.2 KiB
Vue
<template>
|
|
<div class="content" v-loading.fullscreen.lock="fullscreenLoading">
|
|
<div class="tag-item" v-if="tagName">
|
|
{{tagName}}
|
|
</div>
|
|
<div class="item-card">
|
|
<ToolItemCard v-for="(item, index) in toolList" :key="index" :config="item" :category-slug="category_slug" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ToolItemCard from "~/pages/Home/components/ToolItemCard.vue";
|
|
|
|
export default {
|
|
components: {
|
|
ToolItemCard,
|
|
},
|
|
data() {
|
|
return {
|
|
tagName: '',
|
|
toolList: [],
|
|
category_slug: '',
|
|
fullscreenLoading: false,
|
|
}
|
|
},
|
|
methods: {
|
|
// 按分类获取工具列表
|
|
async getToolsByTag(slug) {
|
|
if (slug) {
|
|
this.fullscreenLoading = true;
|
|
const params = {categorySlug: slug};
|
|
const {data: res} = await this.$api.tool.getToolsList(params);
|
|
const {code, data} = res;
|
|
if (code === 0 && data.list) {
|
|
this.toolList = data.list;
|
|
}
|
|
this.fullscreenLoading = false;
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
// 监听路由变化
|
|
'$route'(to) {
|
|
const slug = to.query.category_slug;
|
|
if (slug) {
|
|
this.category_slug = slug;
|
|
this.getToolsByTag(slug);
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// 组件挂载时也检查一次路由参数
|
|
const slug = this.$route.query.category_slug;
|
|
if (slug) {
|
|
this.category_slug = slug;
|
|
this.getToolsByTag(slug);
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
padding-top: 60px;
|
|
padding-bottom: 100px;
|
|
.tag-item {
|
|
display: inline-block;
|
|
padding: 10px;
|
|
border-radius: 12px;
|
|
font-family: 'Poppins-SemiBold', sans-serif;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
background: $header-backgroungd;
|
|
}
|
|
.item-card {
|
|
display: grid;
|
|
gap: 20px;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
margin-top: 30px;
|
|
|
|
.card-caontainer {
|
|
background: #FFFFFF;
|
|
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
border: 1px solid #E2E8F0;
|
|
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
span {
|
|
color: $main-font-color;
|
|
font-size: $big-font-size;
|
|
font-weight: 600;
|
|
font-family: 'Poppins-SemiBold', serif;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
color: $grey-color;
|
|
font-family: 'Poppins-Regular', serif;
|
|
// line-height: 30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|