后期修改完善,上线版本

This commit is contained in:
2025-11-12 18:11:11 +08:00
parent c54f9c9976
commit 8f57683dd5
98 changed files with 2110 additions and 867 deletions

View File

@ -44,13 +44,14 @@ export default {
name: "Footer",
data() {
return {
first: [{
name: 'Home',
path: '/home/list',
meta: {
parent: 'Home',
first: [
{
name: 'Home',
path: '/home/list',
meta: {
parent: 'Home',
},
},
},
{
name: 'AI Daily News',
path: '/dailyNews',
@ -59,15 +60,10 @@ export default {
},
},
{
name: 'AI Hub',
name: 'AI Launches',
path: '/launches',
meta: {
parent: 'Hub',
}
},
{
name: 'Learn',
meta: {
parent: 'Learn',
parent: 'Launches',
}
},
{
@ -99,11 +95,6 @@ export default {
goto(path) {
this.$router.push(path);
},
/**
* 判断当前导航项是否应该被选中
* @param {Object} item 导航项
* @returns {Boolean} 是否选中
*/
isParentMatch(item) {
// 首先检查路径匹配逻辑,保持向后兼容性
const pathMatch = item.path && item.path === this.$route.path;
@ -159,7 +150,7 @@ export default {
font-size: $larg-font-size;
color: $main-color;
font-weight: bold;
font-family: 'Poppins-Bold', serif;
font-family: 'Poppins-Bold';
}
}
@ -172,14 +163,14 @@ export default {
.bottom-span {
color: $grey-color;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
}
.navigation-bottom {
margin-bottom: 14px;
span {
display: inline-block;
font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
cursor: pointer;
margin-left: 30px;
&:hover {

View File

@ -61,7 +61,7 @@ export default {
.loading-text {
margin-top: 15px;
font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
color: #7B61FF;
}

View File

@ -9,16 +9,19 @@
<div class="flex">
<div class="navigation-item pointer" v-for="item in navRoutes" :key="item.path"
@click="handleParentClick(item)" @mouseenter="showSubmenu(item)" @mouseleave="hideSubmenu">
<span
:class="{ 'selected-navigation': isParentMatch(item) }">{{
item.meta.navigationName }}
<i class="el-icon-arrow-down" v-if="item.meta.children"></i>
</span>
<span
:class="{ 'selected-navigation': isParentMatch(item) }">{{item.meta.navigationName }}
<i class="el-icon-arrow-down" v-if="item.meta.children"></i>
</span>
<div v-if="activeMenu === item.path && item.meta.children" class="submenu">
<div v-for="sub in item.children" :key="sub.path" @click.stop="goto(sub.path)"
class="submenu-item pointer">
<img :src="`/logo/${sub.meta.icon}.png`" alt="" />
<div class="wh-24 flex-center mr-10" :style="{ background: sub.meta.color }">
<img :src="`/menu/${sub.meta.icon}.png`" alt="" />
</div>
{{ sub.name }}
<!-- 添加真实的DOM元素作为背景动画 -->
<div class="submenu-item-bg" :style="{ backgroundColor: sub.meta.color || '#f1f5f9' }"></div>
</div>
</div>
</div>
@ -122,11 +125,13 @@ export default {
</script>
<style lang="scss" scoped>
.mr-10 {
margin-right: 10px;
}
#header-container {
width: 100%;
height: $navigationBarHeight;
background: $header-backgroungd;
height: 72px;
.navigation-container {
height: $navigationBarHeight;
@ -137,7 +142,7 @@ export default {
.logo {
@include flex-center;
color: $white;
//font-family: 'Poppins-Bold', serif;
font-family: 'Poppins-Bold';
span {
font-size: $normal-font-size;
@ -148,7 +153,7 @@ export default {
margin-left: 20px;
padding: 10px;
position: relative;
//font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
span {
color: $grey;
@ -159,8 +164,7 @@ export default {
&.selected-navigation {
color: $white;
font-weight: 500;
//font-family: 'Poppins-Bold', serif;
font-family: 'Poppins-Bold';
}
}
@ -168,30 +172,65 @@ export default {
z-index: 10;
position: absolute;
top: 100%;
left: 50%;
padding: 20px 10px;
transform: translateX(-50%);
background: $white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 6px;
&-item {
white-space: nowrap; // 防止文字换行
padding: 10px;
color: #000000;
.submenu-item {
white-space: nowrap;
padding: 8px;
color: #1e293b;
@include display-flex;
font-size: 18px;
position: relative;
overflow: hidden;
z-index: 1;
margin-bottom: 16px;
img {
margin-right: 10px;
width: 24px;
height: 24px;
transition: transform 0.3s ease;
}
// 鼠标悬停效果
&:hover {
background: #F5F6F9;
color: $main-color;
cursor: pointer;
img {
transform: scale(1.1); // 放大图片到1.1倍
}
.submenu-item-bg {
left: 0;
}
}
// 真实的DOM元素作为背景动画
.submenu-item-bg {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
z-index: -1;
transition: left 0.3s ease;
}
&:last-child {
margin-bottom: 0;
}
}
}
}
}
}
@keyframes slideIn {
from {
left: -100%;
}
to {
left: 0;
}
}
</style>

View File

@ -147,12 +147,11 @@ export default {
width: 100%;
.nav-button {
width: 44px;
height: 44px;
width: 36px;
height: 36px;
cursor: pointer;
background-color: #FFFFFF;
background: transparent !important;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
display: flex;
align-items: center;
@ -163,8 +162,8 @@ export default {
}
img {
width: 44px;
height: 44px;
width: 36px;
height: 36px;
}
&.disabled {

View File

@ -151,7 +151,7 @@ export default {
.my-tabs__item.is-disabled {
color: #1e293b;
cursor: not-allowed;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
}
.my-tabs__close { margin-left: 6px; color: #999; }
.my-tabs__close:hover { color: #f56c6c; }

View File

@ -84,6 +84,7 @@
background-color: $white;
color: $main-font-color;
cursor: pointer;
font-weight: 'Poppins-Regular';
}
.pagination-number {

View File

@ -34,7 +34,7 @@ export default {
:size="24"
:disabled="readonly">
</el-rate>
<div class="rate-num" :class="value ? 'gradient-box' : ''">{{ value }}</div>
<div class="rate-num" :class="value ? 'gradient-box' : ''">{{ (value).toFixed(1) }}</div>
</div>
</template>
@ -46,7 +46,7 @@ export default {
}
}
.rate-num {
width: 28px;
width: 36px;
height: 28px;
line-height: 28px;
text-align: center;
@ -54,7 +54,7 @@ export default {
color: #fff;
border-radius: 12px;
margin-left: 8px;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
}
.gradient-box {
background: $header-backgroungd;

View File

@ -1,5 +1,5 @@
<template>
<div class="search-select-container">
<div class="search-select-container" ref="searchContainer">
<!-- 使用现有的 SearchInput 组件 -->
<SearchInput
ref="searchInput"
@ -9,22 +9,23 @@
/>
<!-- 搜索结果展示区域 -->
<div v-if="searched && hasResults" class="results-list">
<div
v-for="(item, index) in searchResults"
:key="index"
class="result-item flex items-center"
@click="selectItem(item)"
>
<img alt="" :src="item.icon_url || ''" />
<div>{{ item.name || '' }}</div>
<div v-if="searched" class="results-list">
<div v-if="hasResults">
<div
v-for="(item, index) in searchResults"
:key="index"
class="result-item flex items-center"
@click="selectItem(item)"
>
<img alt="" :src="item.icon_url || ''" />
<div>{{ item.name || '' }}</div>
</div>
</div>
<!-- 无结果提示 -->
<div v-else class="no-results flex items-center">
<img src="/search/icon_alarm.png" alt="" />
<div>No relevant content was found</div>
</div>
</div>
<!-- 无结果提示 -->
<div v-else-if="searched && !hasResults" class="no-results flex items-center">
<img src="/search/icon_alarm.png" alt="" />
<div>No relevant content was found</div>
</div>
</div>
</template>
@ -52,11 +53,32 @@ export default {
return this.searchResults && this.searchResults.length > 0;
}
},
mounted() {
// 添加点击事件监听
document.addEventListener('click', this.handleDocumentClick);
},
beforeDestroy() {
// 移除事件监听,避免内存泄漏
document.removeEventListener('click', this.handleDocumentClick);
},
methods: {
handleDocumentClick(event) {
// 判断点击是否在搜索容器内部
const searchContainer = this.$refs.searchContainer;
if (searchContainer && !searchContainer.contains(event.target)) {
// 点击在搜索容器外部,清空搜索状态
this.clearSearchState();
}
},
clearSearchState() {
this.searched = false;
this.searchResults = [];
},
async handleSearch(value) {
if (!value) {
this.searched = false;
this.searchResults = [];
this.clearSearchState();
return;
}
@ -73,8 +95,7 @@ export default {
},
selectItem(item) {
this.searched = false;
this.searchResults = [];
this.clearSearchState();
this.jumpToToolDetail(item);
},
@ -112,6 +133,7 @@ export default {
}
.results-list {
position: absolute;
padding: 30px 20px;
margin-top: 10px;
border-radius: 12px;
@ -119,6 +141,8 @@ export default {
overflow-y: auto;
background: white;
box-shadow: 0 10px 30px #0000000d;
width: 100%;
z-index: 999;
.result-item {
padding: 20px 30px;
@ -147,14 +171,16 @@ export default {
.no-results {
gap: 30px;
padding: 10px 16px;
text-align: center;
border-radius: 8px;
margin: 16px auto 0;
color: #1E293B;
font-family: 'Poppins-SemiBold', serif;
@include gradient-border($linear-gradient-start, $linear-gradient-end);
width: fit-content; // 改为自适应内容宽度
font-family: 'Poppins-SemiBold';
width: 100%;
cursor: pointer;
padding: 20px 30px;
&:hover {
color: #7C62FF;
background: #F5F6F9;
}
img {
width: 24px;