148 lines
2.9 KiB
Vue
148 lines
2.9 KiB
Vue
<template>
|
||
<div class="app">
|
||
<header class="header">
|
||
<div class="logo-container">
|
||
<img :src="logoImg" alt="百盘搜" class="logo">
|
||
<h1 class="site-title">百盘搜</h1>
|
||
</div>
|
||
<div class="search-container">
|
||
<input type="text" placeholder="请输入您要搜索的关键词" v-model="searchKeyword" @keyup.enter="handleSearch">
|
||
<button @click="handleSearch" class="search-button">
|
||
<img :src="searchIcon" alt="搜索" class="search-icon">
|
||
</button>
|
||
</div>
|
||
</header>
|
||
<div class="notice-bar">
|
||
<span class="notice-icon">📢</span>
|
||
<span>备用站点：</span>
|
||
<a href="https://www.feizhupan.com" target="_blank">https://www.feizhupan.com</a>，
|
||
<a href="https://www.dashengpan.xyz" target="_blank">https://www.dashengpan.xyz</a>，
|
||
<span>请保存到浏览器书签中。</span>
|
||
</div>
|
||
<main class="main-content">
|
||
<NuxtPage />
|
||
</main>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue';
|
||
import { useRouter } from 'vue-router';
|
||
import logoImg from '~/assets/logo.png';
|
||
import searchIcon from '~/assets/search-icon.svg';
|
||
|
||
const router = useRouter();
|
||
const searchKeyword = ref('');
|
||
|
||
function handleSearch() {
|
||
if (searchKeyword.value.trim()) {
|
||
router.push({ path: '/', query: { keyword: searchKeyword.value } });
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||
background-color: #f5f5f5;
|
||
color: #333;
|
||
}
|
||
|
||
.app {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
align-items: center;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 1rem 2rem;
|
||
background-color: #fff;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
width: 100%;
|
||
max-width: 1200px;
|
||
}
|
||
|
||
.logo-container {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo {
|
||
width: 40px;
|
||
height: 40px;
|
||
margin-right: 0.5rem;
|
||
}
|
||
|
||
.site-title {
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
color: #ff9500;
|
||
}
|
||
|
||
.search-container {
|
||
display: flex;
|
||
width: 50%;
|
||
max-width: 600px;
|
||
border: 2px solid #ff9500;
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.search-container input {
|
||
flex-grow: 1;
|
||
padding: 0.6rem 1rem;
|
||
border: none;
|
||
outline: none;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.search-button {
|
||
background-color: #ff9500;
|
||
border: none;
|
||
padding: 0.6rem 1rem;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.search-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.notice-bar {
|
||
background-color: #fff8e6;
|
||
padding: 0.5rem 2rem;
|
||
color: #9e6500;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-size: 0.9rem;
|
||
width: 100%;
|
||
max-width: 1200px;
|
||
}
|
||
|
||
.notice-bar a {
|
||
color: #ff9500;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.main-content {
|
||
flex: 1;
|
||
padding: 2rem;
|
||
width: 100%;
|
||
max-width: 1200px;
|
||
}
|
||
</style>
|