后期修改完善,上线版本
This commit is contained in:
@ -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 {
|
||||
|
||||
@ -61,7 +61,7 @@ export default {
|
||||
|
||||
.loading-text {
|
||||
margin-top: 15px;
|
||||
font-family: 'Poppins-Medium', serif;
|
||||
font-family: 'Poppins-Medium';
|
||||
color: #7B61FF;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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; }
|
||||
|
||||
@ -84,6 +84,7 @@
|
||||
background-color: $white;
|
||||
color: $main-font-color;
|
||||
cursor: pointer;
|
||||
font-weight: 'Poppins-Regular';
|
||||
}
|
||||
|
||||
.pagination-number {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user