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

feat：页面美化，添加广告位

Browse Source
This commit is contained in:
陶然
2026-03-02 18:49:02 +08:00
parent f492194fab
commit 226997fb25
8 changed files with 381 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Home/Home.vue
+59 -4
View File
@@ -34,12 +34,12 @@ onMounted(() => {
<!-- 收藏工具 -->
<div id="collect">
<!-- 收藏标题 -->
<div class="mt-8 mb-3 text-xl font-bold text-[--base-black]">
<div class="mt-8 mb-3 text-xl font-bold text-[--base-black] tech-title">
收藏工具
</div>
<!-- 收藏卡片 -->
<div v-if="toolsStore.collectedTools.length > 0" class="flex justify-between flex-wrap self-card-div c-xs:ml-0" :gutter="10">
<router-link v-for="(item, index) in toolsStore.collectedTools" :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">
<router-link v-for="(item, index) in toolsStore.collectedTools" :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 tech-card">
<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">
@@ -73,12 +73,12 @@ onMounted(() => {
<!-- 工具分类列表 -->
<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">
<div class="mt-8 mb-3 text-xl font-bold text-[--base-black] tech-title" :id="'cate_' + cate.id">
{{ cate.title }}
</div>
<!-- card -->
<div class="flex justify-between flex-wrap self-card-div c-xs:ml-0" :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">
<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 tech-card">
<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">
@@ -109,4 +109,59 @@ onMounted(() => {
content: "";
width: 24%
}
/* 科技感卡片样式 */
.router-link-active .tech-card {
border-color: #409EFF;
box-shadow: 0 0 20px rgba(64, 158, 255, 0.3);
}
.tech-card {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid transparent;
background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
}
.tech-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(64, 158, 255, 0.2);
border-color: #409EFF;
}
.tech-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #409EFF, #667eea, #764ba2);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.tech-card:hover::before {
transform: scaleX(1);
}
/* 科技感标题样式 */
.tech-title {
position: relative;
display: inline-block;
margin-bottom: 1rem;
}
.tech-title::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(90deg, #409EFF, #667eea);
border-radius: 3px;
}
</style>