yeyin/tools-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 首页改版

Browse Source
This commit is contained in:
osiris
2024-02-19 11:19:26 +08:00
parent ef62d26a14
commit 81146ad040
42 changed files with 979 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Home/About.vue
+34
View File
@@ -0,0 +1,34 @@
<script setup lang="ts">
import { reactive } from 'vue'
// import { copy } from '@/utils/string'
// const info = reactive({
// title: "关于本站",
// })
//copy
// const copyRes = async (resStr: string) => {
// copy(resStr)
// }
</script>
<template>
<div class="flex flex-col mt-3 flex-1">
<div class="bg-white rounded-md p-5">
<br>
<p>本项目是一个开源工具站</p>
<br>
<p>本项目开源地址：<el-link href="https://github.com/taoran1401/tools-web">https://github.com/taoran1401/tools-web</el-link></p>
<br>
<p class="font-bold">联系作者/问题反馈</p>
<br>
<p>反馈中心：<el-link href="https://txc.qq.com/products/619520">https://txc.qq.com/products/619520</el-link></p>
<br>
<p>邮箱：taoran0796@163.com</p>
<br>
</div>
</div>
</template>
<style scoped>
</style>
src/components/Home/Home.vue
+72 -30
View File
@@ -1,58 +1,100 @@
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { onMounted } from 'vue';
import { RouterLink } from "vue-router"
import { Star } from '@element-plus/icons-vue'
import { useToolsStore } from '@/store/modules/tools'
import { useRoute } from "vue-router"
//store
const toolsStore = useToolsStore()
//查询参数
const searchParam = reactive({
cateId: 0,
title: ''
})
const getToolsList = async () => {
const route = useRoute()
const getToolsCate = async () => {
try {
await toolsStore.getTools(searchParam)
await toolsStore.getToolCate()
} catch (error) {
console.log(error)
}
}
onMounted(() => {
getToolsList()
getToolsCate()
if (route.query && route.query.value) {//底部导航跳转过来的则定位到响应位置
document?.querySelector('#' + `${route.query.value}`)?.scrollIntoView();
} else {//其他位置跳转过来不需要定位的则定位到顶部
document?.querySelector('#collect')?.scrollIntoView()
}
})
</script>
<template>
<div>
<!-- card -->
<div class="mr-3 flex justify-between flex-wrap self-card-div c-xs:ml-3" :gutter="10">
<router-link v-for="(item, index) in toolsStore.list" :key="index" :to="item.url" class="flex flex-col mt-3 border-solid rounded border-gray w-[32.5%] p-2 bg-gray-100 hover:shadow-md c-xs:w-[99.5%]">
<div class="flex items-center border-b pb-2">
<el-image :src="item.logo" class="w-10 h-10 min-h-[2.5rem] min-w-[2.5rem] rounded-full"></el-image>
<div class="flex flex-col ml-2 w-full">
<div class="flex">
<div class="font-semibold text-lg line-clamp-1">{{ item.title }}</div>
</div>
<div class="flex justify-between">
<el-text size="small">{{ item.cate }}</el-text>
<el-button :icon="Star" circle size="small"/>
<div class="mr-6">
<!-- collect -->
<div id="collect">
<!-- cate title -->
<div class="mt-8 mb-8 text-xl font-bold text-[--base-black]">
我的收藏
</div>
<!-- card -->
<div class="flex justify-between flex-wrap self-card-div c-xs:ml-3" :gutter="10" v-if="toolsStore.collect.length > 0">
<router-link v-for="(item, index) in toolsStore.list" :key="index" :to="item.url" class="flex flex-col mt-5 border-solid rounded-2xl border-gray w-[24%] p-2 bg-white hover:shadow-md c-xs:w-[99.5%] c-md:w-[24%] c-sm:w-[32%] p-5">
<div class="flex items-center border-b pb-2">
<el-image :src="item.logo" class="w-10 h-10 min-h-[2.5rem] min-w-[2.5rem] rounded-full"></el-image>
<div class="flex flex-col ml-2 w-full">
<div class="flex">
<div class="font-semibold text-lg line-clamp-1">{{ item.title }}</div>
</div>
<div class="flex justify-between">
<el-text size="small">{{ item.cate }}</el-text>
<el-button :icon="Star" circle size="small"/>
</div>
</div>
</div>
</div>
<div class="flex items-center justify-between mt-2">
<el-text line-clamp="1">{{ item.desc }}</el-text>
</div>
</router-link>
<div class="flex items-center justify-between mt-2">
<el-text line-clamp="2">{{ item.desc }}</el-text>
</div>
</router-link>
<!-- 占位 div -->
<div class="w-[24%] c-md:w-[24%] c-sm:w-[32%]"></div>
</div>
<div v-else class="bg-white rounded-2xl">
<el-empty description="暂无收藏" />
</div>
</div>
<!-- list -->
<div v-for="(cate, index) in toolsStore.cates" :key="index">
<!-- cate title -->
<div class="mt-8 mb-3 text-xl font-bold text-[--base-black]" :id="'cate_' + cate.id">
{{ cate.title }}
</div>
<!-- card -->
<div class="flex justify-between flex-wrap self-card-div c-xs:ml-3" :gutter="10">
<router-link v-for="(item, index) in cate.list" :key="index" :to="item.url" class="flex flex-col mt-5 border-solid rounded-2xl border-gray w-[24%] p-2 bg-white hover:shadow-md c-xs:w-[99.5%] c-md:w-[24%] c-sm:w-[32%] p-5 hover:-translate-y-2 duration-300">
<div class="flex items-center border-b pb-2">
<el-image :src="item.logo" class="w-10 h-10 min-h-[2.5rem] min-w-[2.5rem] rounded-full"></el-image>
<div class="flex flex-col ml-2 w-full">
<div class="flex">
<div class="font-semibold text-lg line-clamp-1">{{ item.title }}</div>
</div>
<div class="flex justify-between">
<el-text size="small">{{ item.cate }}</el-text>
<el-button :icon="Star" circle size="small"/>
</div>
</div>
</div>
<div class="flex items-center justify-between mt-2">
<el-text line-clamp="2">{{ item.desc }}</el-text>
</div>
</router-link>
<!-- 占位 div -->
<div class="w-[24%] c-md:w-[24%] c-sm:w-[32%] "></div>
</div>
</div>
</div>
</template>
<style scoped>
.self-card-div:after{
content: "";
width: 32.5%
width: 24%
}
</style>