mirror of
https://github.com/KoriIku/luxirty-search
synced 2024-11-21 16:18:13 +00:00
加了广告屏蔽，输入框适配深色，自动补全适配深色，调整首页输入框位置
This commit is contained in:
KoriIku
parent
436e6a4ba0
commit
662dccde96
30
public/service-worker.js
Normal file
30
public/service-worker.js
Normal file
@ -0,0 +1,30 @@
|
||||
// public/service-worker.js
|
||||
|
||||
self.addEventListener('install', function(event) {
|
||||
console.log('Service Worker 安装成功');
|
||||
self.skipWaiting(); // 跳过等待，强制立即激活
|
||||
});
|
||||
|
||||
self.addEventListener('activate', function(event) {
|
||||
console.log('Service Worker 激活成功');
|
||||
event.waitUntil(
|
||||
self.clients.claim() // 让新的 Service Worker 立即接管所有页面
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', function(event) {
|
||||
const url = event.request.url;
|
||||
|
||||
// 拦截包含 'adsense' 的请求
|
||||
if (url.includes('adsense')) {
|
||||
console.log('拦截到广告请求:', url);
|
||||
|
||||
// 拦截请求并返回空响应
|
||||
event.respondWith(new Response(null, { status: 204 }));
|
||||
return;
|
||||
}
|
||||
|
||||
// 正常处理其他请求
|
||||
event.respondWith(fetch(event.request));
|
||||
});
|
||||
|
||||
@ -80,7 +80,6 @@
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -109,3 +108,19 @@ body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.root {
|
||||
--center-abs-margin: 180px;
|
||||
}
|
||||
|
||||
@media (min-width: 1124px) and (max-width: 1300px) {
|
||||
.root {
|
||||
--center-abs-margin: calc((100vw - 1068px) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1475px) and (max-width: 1675px) {
|
||||
.root {
|
||||
--center-abs-margin: calc(25vw + -188.75px);
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,5 @@
|
||||
@import './base.css';
|
||||
|
||||
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
@ -68,6 +66,45 @@ a,
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.gsc-search-box.gsc-search-box-tools {
|
||||
display: flex;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
min-height: 44px;
|
||||
border: 1px solid transparent;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 5px 1px rgba(64, 60, 67, .16);
|
||||
border-radius: 24px;
|
||||
margin: 0 auto;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
width: 692px;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.gsc-search-box.gsc-search-box-tools {
|
||||
background: #333333;
|
||||
/* 改为深色背景 */
|
||||
box-shadow: 0 2px 5px 1px rgba(0, 0, 0, .3);
|
||||
/* 调整阴影颜色，适配深色背景 */
|
||||
border: 1px solid #555555;
|
||||
/* 使用深灰色边框来代替透明 */
|
||||
}
|
||||
|
||||
.gsc-input-box .gsc-input,
|
||||
.gsc-input-box .gsc-input:focus {
|
||||
color: #ffffff !important;
|
||||
/* 将文本颜色设为白色以适配深色背景 */
|
||||
}
|
||||
|
||||
.gsc-search-button-v2 {
|
||||
background-color: #444444 !important;
|
||||
/* 按钮背景设为深灰色或其他深色 */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 修改搜索结果样式 */
|
||||
.gsc-result {
|
||||
background-color: transparent !important;
|
||||
@ -94,7 +131,7 @@ a,
|
||||
font-family: var(--fr-font-family), var(--fr-font-basefont) !important;
|
||||
text-shadow: var(--fr-font-shadow) !important;
|
||||
-webkit-text-stroke: var(--fr-font-stroke) !important;
|
||||
font-size: 22px !important;
|
||||
font-size: 1.35rem !important;
|
||||
line-height: 28px !important;
|
||||
font-weight: 400 !important;
|
||||
margin-bottom: 5px !important;
|
||||
@ -121,22 +158,6 @@ a,
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.gsc-search-box.gsc-search-box-tools {
|
||||
display: flex;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
min-height: 44px;
|
||||
border: 1px solid transparent;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 5px 1px rgba(64, 60, 67, .16);
|
||||
border-radius: 24px;
|
||||
margin: 0 auto;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
width: 692px;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
/* 隐藏图片 */
|
||||
.gs-image-box {
|
||||
display: none;
|
||||
@ -144,7 +165,7 @@ a,
|
||||
|
||||
.gsc-above-wrapper-area {
|
||||
/* border-bottom: 1px solid #e9e9e9; */
|
||||
padding: 5px 0 0 0;
|
||||
padding: 0 0 0 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
@ -180,9 +201,72 @@ a,
|
||||
|
||||
.gsc-cursor-page {
|
||||
background-color: transparent !important;
|
||||
|
||||
color: var(--color-text);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.gsc-results .gsc-cursor-box {
|
||||
margin: 5px !important;
|
||||
}
|
||||
|
||||
|
||||
/* 表格容器样式 */
|
||||
table.gsc-completion-container {
|
||||
width: 601px; /* 保持原有宽度 */
|
||||
position: absolute; /* 保持绝对定位 */
|
||||
left: 203px; /* 保持原有左边距 */
|
||||
top: 69px; /* 保持原有顶部距离 */
|
||||
background-color: #ffffff; /* 默认背景色 */
|
||||
border-radius: 4px; /* 边角圆润 */
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加轻微阴影效果 */
|
||||
border: 1px solid transparent; /* 设置透明边框，以避免默认边框影响 */
|
||||
}
|
||||
|
||||
/* 单元格样式 */
|
||||
table.gsc-completion-container td {
|
||||
padding: 12px; /* 内边距 */
|
||||
transition: background-color 0.3s, color 0.3s; /* 背景和文字色变换效果 */
|
||||
}
|
||||
|
||||
/* 字体样式 */
|
||||
table.gsc-completion-container span {
|
||||
color: #333; /* 默认文字颜色 */
|
||||
font-size: 16px; /* 字体大小 */
|
||||
}
|
||||
|
||||
/* 黑暗模式样式 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
table.gsc-completion-container {
|
||||
background-color: #1e1e1e; /* 黑暗模式背景色 */
|
||||
}
|
||||
|
||||
table.gsc-completion-container td {
|
||||
background-color: #1e1e1e; /* 黑暗模式单元格背景色 */
|
||||
color: #f0f0f0; /* 黑暗模式文字色 */
|
||||
}
|
||||
|
||||
table.gsc-completion-container span {
|
||||
color: #f0f0f0; /* 黑暗模式文字色 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 标签字体大小设置 */
|
||||
.gsc-refinementHeader.gsc-inline-block {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.gsc-result-info {
|
||||
color: #676767;
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
padding: 4px 4px 4px 4px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* 把原生的X删了 */
|
||||
a.gsst_a {
|
||||
display: none;
|
||||
}
|
||||
@ -1,6 +1,14 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="gcse-searchbox-only" data-resultsUrl="search"></div>
|
||||
<div class="about">
|
||||
<a href="#about">关于</a>
|
||||
</div>
|
||||
<div class="logo">
|
||||
Luxirty Search
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<div class="gcse-searchbox-only" data-resultsUrl="search"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -16,11 +24,39 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.home {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
top: 35vh; /* 从 30vh 增加到 35vh */
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
position: absolute;
|
||||
top: calc(35vh + 100px); /* 相应地调整，保持与 logo 的相对位置 */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.about {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.about a {
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
color: var(--uv-styles-color-text-default);
|
||||
}
|
||||
</style>
|
||||
@ -1,20 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="my-container">
|
||||
<div class="search-container" id="searchContainer">
|
||||
<h1 class="search-title">Luxirty search</h1>
|
||||
<div class="gcse-searchbox"></div>
|
||||
</div>
|
||||
<div class="search-result-zone">
|
||||
<div class="gcse-searchresults"></div>
|
||||
</div>
|
||||
<div class="my-container">
|
||||
<div class="search-container" id="searchContainer">
|
||||
<h1 class="search-title">Luxirty Search</h1>
|
||||
<div class="gcse-searchbox"></div>
|
||||
</div>
|
||||
<div class="search-result-zone">
|
||||
<div class="gcse-searchresults"></div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
© made by <a href="https://your-website.com">Luxirty</a> |
|
||||
© Create by <a href="https://your-website.com">Luxirty</a> with love |
|
||||
<a href="https://github.com/your-username" target="_blank">
|
||||
<img :src="githubIcon" alt="GitHub">
|
||||
GitHub
|
||||
</a>
|
||||
</p>
|
||||
@ -63,12 +59,14 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.my-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 让子元素垂直排列 */
|
||||
min-height: 100vh;
|
||||
/* 让容器占满整个视窗高度 */
|
||||
max-width: var(--center-width);
|
||||
min-width: 320px;
|
||||
flex-grow: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -78,6 +76,7 @@ export default {
|
||||
margin-bottom: 20px;
|
||||
margin-top: 26px;
|
||||
margin-left: 28px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.search-title {
|
||||
@ -87,6 +86,18 @@ export default {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 黑暗模式样式 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.search-title {
|
||||
color: #d1d5db; /* 黑暗模式下的颜色 */
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-zone {
|
||||
flex-grow: 1;
|
||||
/* 让搜索结果区占据剩余空间 */
|
||||
}
|
||||
|
||||
/* Footer styles */
|
||||
footer {
|
||||
background-color: #f8f9fa;
|
||||
@ -102,7 +113,6 @@ footer a {
|
||||
color: #345a80;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
@ -118,4 +128,23 @@ footer img {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
footer {
|
||||
background-color: #222222; /* 深色背景 */
|
||||
color: #cccccc; /* 浅灰色字体，确保可读性 */
|
||||
border-top: 1px solid #444444; /* 深色边框 */
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #80a0c2; /* 链接颜色改为浅色 */
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #a0c3e0; /* 悬停时的链接颜色略微加亮 */
|
||||
}
|
||||
|
||||
footer img {
|
||||
opacity: 0.9; /* 提高图像的亮度，适应深色背景 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
17
src/main.js
17
src/main.js
@ -8,4 +8,19 @@ const app = createApp(App)
|
||||
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
// 注册 Service Worker
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker.register('/service-worker.js').then((registration) => {
|
||||
console.log('Service Worker 注册成功，作用域为: ', registration.scope);
|
||||
return registration.update(); // 立即更新 Service Worker
|
||||
}).then(() => {
|
||||
app.mount('#app'); // 确保在 Service Worker 注册后再挂载 Vue 实例
|
||||
}).catch((err) => {
|
||||
console.error('Service Worker 注册失败: ', err);
|
||||
app.mount('#app'); // 即使注册失败，也要确保 Vue 挂载
|
||||
});
|
||||
});
|
||||
} else {
|
||||
app.mount('#app'); // 如果浏览器不支持 Service Worker，继续正常挂载
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user