仇子明 / ai-nav-link-nuxt3 · 提交

转到一个项目

作者 xiaoqiu
提交 5bdbc515989cd33db39aeb86bc4a8e7f143d5f2f 1 个父辈 a995a34a

更改了网站名称，优化了搜索点击

内嵌 并排对比
正在显示 7 个修改的文件 包含 50 行增加 和 34 行删除
<template>
<footer class="bg-gray-800 dark:bg-gray-950 text-white py-12 px-8 mt-auto transition-colors duration-300">
<footer
class="bg-gray-800 dark:bg-gray-950 text-white py-12 px-8 mt-auto transition-colors duration-300"
>
<div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">
{{ webSite.webname.slice(0, 7) }}
{{ webSite.webname.split("|")[0] }}
</h3>
<p class="text-gray-400">
提供安全、快速的网址跳转服务，保护您的隐私安全。
... ...
... ... @@ -15,7 +15,7 @@
{{ webSite.webname }}
</h1>
<h2 class="md:text-xl text-base font-bold">
{{ webSite.webname.slice(0, 7) }}
{{ webSite.webname.split("|")[0] }}
</h2>
</NuxtLink>
... ... @@ -29,7 +29,6 @@
</template>
<script setup>
import { Promotion } from "@element-plus/icons-vue";
const webSite = useState("webSite");
</script>
... ...
<template>
<!-- From Uiverse.io by ZAKARIAE48CHELLE -->
<div class="input-wrapper">
<button class="icon">
<div class="input-wrapper" :class="{ active: isExpanded }">
<button class="icon" @click="toggleSearch" type="button">
<svg
width="25px"
height="25px"
... ... @@ -25,29 +24,46 @@
</svg>
</button>
<input
ref="searchInput"
v-model="keyWord"
type="text"
name="searchKeyword"
class="input"
placeholder="输入应用名称回车查找"
@keyup.enter="onSearch"
@blur="handleBlur"
/>
</div>
</template>
<script setup>
const keyWord = ref("");
const isExpanded = ref(false);
const searchInput = ref(null);
function toggleSearch() {
isExpanded.value = !isExpanded.value;
if (isExpanded.value && searchInput.value) {
nextTick(() => {
searchInput.value.focus();
});
}
}
function handleBlur() {
if (!keyWord.value) {
isExpanded.value = false;
}
}
function onSearch() {
if (keyWord.value) {
// 跳转到搜索页面
// this.$router.push({ path: "/search", query: { q: keyword.value } });
window.location.href = "/search?keyword=" + keyWord.value;
}
}
</script>
<style scoped>
/* From Uiverse.io by ZAKARIAE48CHELLE */
.input-wrapper {
display: flex;
align-items: center;
... ... @@ -72,8 +88,9 @@ function onSearch() {
.input::placeholder,
.input {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
font-family:
"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
Arial, sans-serif;
font-size: 17px;
}
... ... @@ -93,13 +110,12 @@ function onSearch() {
outline: none;
border-style: none;
border-radius: 50%;
pointer-events: painted;
background-color: transparent;
transition: 0.2s linear;
z-index: 10;
}
.icon:focus ~ .input,
.input:focus {
.input-wrapper.active .input {
box-shadow: none;
width: 250px;
border-radius: 0px;
... ... @@ -108,29 +124,28 @@ function onSearch() {
transition: all 500ms cubic-bezier(0, 0.11, 0.35, 2);
}
/* 当最大宽度为768pxs时 */
@media (max-width: 768px) {
.input-wrapper {
width: 200px;
gap: 10px;
}
.icon {
width: 35px;
height: 35px;
width: 44px;
height: 44px;
}
.input {
width: 35px;
height: 35px;
padding-right: 35px;
width: 44px;
height: 44px;
padding-right: 44px;
}
.input::placeholder,
.input {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
font-family:
"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
Arial, sans-serif;
font-size: 14px;
}
.icon:focus ~ .input,
.input:focus {
.input-wrapper.active .input {
box-shadow: none;
width: 180px;
border-radius: 0px;
... ...
... ... @@ -67,8 +67,8 @@ export default defineNuxtConfig({
],
app: {
head: {
title: 'Annie网站 - 优质 AI 工具集合、AI 资源网站、AI 导航平台',
titleTemplate: '%s | Annie网站',
title: 'AI工具盒 - 优质 AI 工具集合、AI 资源网站、AI 导航平台',
titleTemplate: '%s | AI工具盒',
htmlAttrs: {
lang: 'zh-CN'
},
... ... @@ -78,18 +78,18 @@ export default defineNuxtConfig({
{ name: "force-rendering", content: "webkit"},
{ "http-equiv":"X-UA-Compatible", content:"IE=edge, chrome=1" },
{ name: 'viewport', content:"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" },
{ name: 'description', content: 'Annie网站是专业的AI工具导航平台，汇集全网优质AI工具，包含AI写作、AI绘画、AI视频、AI对话、AI代码、AI设计、AI办公等各类AI资源，让你快速找到好用的AI工具。' },
{ name: 'description', content: 'AI工具盒是专业的AI工具导航平台，汇集全网优质AI工具，包含AI写作、AI绘画、AI视频、AI对话、AI代码、AI设计、AI办公等各类AI资源，让你快速找到好用的AI工具。' },
{ name: 'keywords', content: 'AI工具,AI导航,AI资源,AI写作,AI绘画,AI视频,AI对话,ChatGPT,AI代码,AI设计,人工智能工具' },
{ name: 'author', content: 'Annie网站' },
{ name: 'author', content: 'AI工具盒' },
{ name:'robots', content:'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1'},
{ name: 'googlebot', content: 'index, follow' },
{ name: 'format-detection', content: 'telephone=no' },
{ name: 'referrer', content: 'origin-when-cross-origin' },
{ property: 'og:type', content: 'website' },
{ property: 'og:site_name', content: 'Annie网站' },
{ property: 'og:site_name', content: 'AI工具盒' },
{ property: 'og:locale', content: 'zh_CN' },
{ property: 'twitter:card', content: 'summary_large_image' },
{ property: 'twitter:site', content: '@Annie网站' }
{ property: 'twitter:site', content: '@AI工具盒' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
... ...
... ... @@ -61,7 +61,7 @@ useHead({
{ property: "og:locale", content: "zh_CN" },
{
property: "og:title",
content: "Annie网站 - 优质 AI 工具集合、AI 资源网站、AI 导航平台",
content: "AI工具盒 - 优质 AI 工具集合、AI 资源网站、AI 导航平台",
},
{
property: "og:description",
... ... @@ -69,12 +69,12 @@ useHead({
"专业 AI 工具导航网站，汇集全网优质 AI 工具，包含 AI 写作、AI 绘画、AI 视频、AI 对话、AI 代码、AI 设计、AI 办公等各类 AI 资源，让你快速找到好用的 AI 工具。",
},
{ property: "og:url", content: "https://aiboxgo.com/" },
{ property: "og:site_name", content: "Annie网站" },
{ property: "og:site_name", content: "AI工具盒" },
{ property: "og:type", content: "website" },
{ property: "twitter:card", content: "summary_large_image" },
{
property: "twitter:title",
content: "Annie网站 - 优质 AI 工具集合、AI 资源网站、AI 导航平台",
content: "AI工具盒 - 优质 AI 工具集合、AI 资源网站、AI 导航平台",
},
{
property: "twitter:description",
... ...
不能预览此文件类型