mirror of
https://github.com/KoriIku/luxirty-search
synced 2024-11-21 16:18:13 +00:00
对移动端进行适配
This commit is contained in:
KoriIku
parent
662dccde96
commit
6b6dcfffcb
@ -4,7 +4,10 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="icon" href="/favicon.ico">
|
<link rel="icon" href="/favicon.ico">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Vite App</title>
|
<title>Luxirty Search</title>
|
||||||
|
<meta name="description" content="Luxirty Search 是一个为程序员优化的搜索引擎，去除内容农场，无广告，简洁，快。">
|
||||||
|
<meta name="keywords" content="效率工具, 搜索引擎">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 15 KiB |
@ -82,6 +82,13 @@ a,
|
|||||||
height: 46px;
|
height: 46px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 针对小屏幕的样式 */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.gsc-search-box.gsc-search-box-tools {
|
||||||
|
width: calc(100vw - 28px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.gsc-search-box.gsc-search-box-tools {
|
.gsc-search-box.gsc-search-box-tools {
|
||||||
background: #333333;
|
background: #333333;
|
||||||
@ -118,6 +125,15 @@ a,
|
|||||||
margin-left: 218px;
|
margin-left: 218px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 针对小屏幕的样式 */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.gsc-results,
|
||||||
|
.gsc-webResult {
|
||||||
|
width: calc(100vw - 20px) !important;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.gs-webResult.gs-result a.gs-title:link,
|
.gs-webResult.gs-result a.gs-title:link,
|
||||||
.gs-webResult.gs-result a.gs-title:link b,
|
.gs-webResult.gs-result a.gs-title:link b,
|
||||||
.gs-imageResult a.gs-title:link,
|
.gs-imageResult a.gs-title:link,
|
||||||
@ -178,6 +194,13 @@ a,
|
|||||||
margin-left: 218px;
|
margin-left: 218px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 针对小屏幕的样式 */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.gsc-refinementBlock {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* 自动补全框美化 */
|
/* 自动补全框美化 */
|
||||||
.gssb_a {
|
.gssb_a {
|
||||||
padding: 6px 12px !important;
|
padding: 6px 12px !important;
|
||||||
@ -213,43 +236,60 @@ a,
|
|||||||
|
|
||||||
/* 表格容器样式 */
|
/* 表格容器样式 */
|
||||||
table.gsc-completion-container {
|
table.gsc-completion-container {
|
||||||
width: 601px; /* 保持原有宽度 */
|
width: 601px;
|
||||||
position: absolute; /* 保持绝对定位 */
|
/* 保持原有宽度 */
|
||||||
left: 203px; /* 保持原有左边距 */
|
position: absolute;
|
||||||
top: 69px; /* 保持原有顶部距离 */
|
/* 保持绝对定位 */
|
||||||
background-color: #ffffff; /* 默认背景色 */
|
left: 203px;
|
||||||
border-radius: 4px; /* 边角圆润 */
|
/* 保持原有左边距 */
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
|
top: 69px;
|
||||||
|
/* 保持原有顶部距离 */
|
||||||
|
background-color: #ffffff;
|
||||||
|
/* 默认背景色 */
|
||||||
|
border-radius: 4px;
|
||||||
|
/* 边角圆润 */
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
/* 添加阴影效果 */
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加轻微阴影效果 */
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||||
border: 1px solid transparent; /* 设置透明边框，以避免默认边框影响 */
|
/* 添加轻微阴影效果 */
|
||||||
|
border: 1px solid transparent;
|
||||||
|
/* 设置透明边框，以避免默认边框影响 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 单元格样式 */
|
/* 单元格样式 */
|
||||||
table.gsc-completion-container td {
|
table.gsc-completion-container td {
|
||||||
padding: 12px; /* 内边距 */
|
padding: 12px;
|
||||||
transition: background-color 0.3s, color 0.3s; /* 背景和文字色变换效果 */
|
/* 内边距 */
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
/* 背景和文字色变换效果 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 字体样式 */
|
/* 字体样式 */
|
||||||
table.gsc-completion-container span {
|
table.gsc-completion-container span {
|
||||||
color: #333; /* 默认文字颜色 */
|
color: #333;
|
||||||
font-size: 16px; /* 字体大小 */
|
/* 默认文字颜色 */
|
||||||
|
font-size: 16px;
|
||||||
|
/* 字体大小 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 黑暗模式样式 */
|
/* 黑暗模式样式 */
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
table.gsc-completion-container {
|
table.gsc-completion-container {
|
||||||
background-color: #1e1e1e; /* 黑暗模式背景色 */
|
background-color: #1e1e1e;
|
||||||
|
/* 黑暗模式背景色 */
|
||||||
}
|
}
|
||||||
|
|
||||||
table.gsc-completion-container td {
|
table.gsc-completion-container td {
|
||||||
background-color: #1e1e1e; /* 黑暗模式单元格背景色 */
|
background-color: #1e1e1e;
|
||||||
color: #f0f0f0; /* 黑暗模式文字色 */
|
/* 黑暗模式单元格背景色 */
|
||||||
|
color: #f0f0f0;
|
||||||
|
/* 黑暗模式文字色 */
|
||||||
}
|
}
|
||||||
|
|
||||||
table.gsc-completion-container span {
|
table.gsc-completion-container span {
|
||||||
color: #f0f0f0; /* 黑暗模式文字色 */
|
color: #f0f0f0;
|
||||||
|
/* 黑暗模式文字色 */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -9,6 +9,16 @@
|
|||||||
<div class="search-container">
|
<div class="search-container">
|
||||||
<div class="gcse-searchbox-only" data-resultsUrl="search"></div>
|
<div class="gcse-searchbox-only" data-resultsUrl="search"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 添加页脚 -->
|
||||||
|
<footer>
|
||||||
|
<p>
|
||||||
|
© Create by <a href="https://github.com/KoriIku">Luxirty</a> with love |
|
||||||
|
<a href="https://github.com/KoriIku/luxiry-search" target="_blank">
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -59,4 +69,23 @@ export default {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: var(--uv-styles-color-text-default);
|
color: var(--uv-styles-color-text-default);
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
/* 新增的页脚样式 */
|
||||||
|
footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px; /* 离底部20px */
|
||||||
|
text-align: center; /* 居中对齐 */
|
||||||
|
width: 100%; /* 宽度为100% */
|
||||||
|
font-size: 14px; /* 字体大小 */
|
||||||
|
color: var(--uv-styles-color-text-default); /* 使用与其他文本一致的颜色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
text-decoration: none; /* 去掉下划线 */
|
||||||
|
color: var(--uv-styles-color-text-default); /* 使用与其他文本一致的颜色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a:hover {
|
||||||
|
text-decoration: underline; /* 悬停时加下划线 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -5,12 +5,12 @@
|
|||||||
<div class="gcse-searchbox"></div>
|
<div class="gcse-searchbox"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="search-result-zone">
|
<div class="search-result-zone">
|
||||||
<div class="gcse-searchresults"></div>
|
<div class="gcse-searchresults" data-linkTarget="_blank" data-refinementStyle="link"></div>
|
||||||
</div>
|
</div>
|
||||||
<footer>
|
<footer>
|
||||||
<p>
|
<p>
|
||||||
© Create by <a href="https://your-website.com">Luxirty</a> with love |
|
© Create by <a href="https://github.com/KoriIku">Luxirty</a> with love |
|
||||||
<a href="https://github.com/your-username" target="_blank">
|
<a href="https://github.com/KoriIku/luxiry-search" target="_blank">
|
||||||
GitHub
|
GitHub
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
@ -21,14 +21,8 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'SearchPage',
|
name: 'SearchPage',
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
githubIcon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23345a80' d='M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z'/%3E%3C/svg%3E"
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.loadGoogleCSE();
|
this.loadGoogleCSE();
|
||||||
this.addTargetBlank();
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
loadGoogleCSE() {
|
loadGoogleCSE() {
|
||||||
@ -37,23 +31,6 @@ export default {
|
|||||||
script.async = true;
|
script.async = true;
|
||||||
document.head.appendChild(script);
|
document.head.appendChild(script);
|
||||||
},
|
},
|
||||||
addTargetBlank() {
|
|
||||||
const observer = new MutationObserver((mutations) => {
|
|
||||||
mutations.forEach((mutation) => {
|
|
||||||
if (mutation.type === 'childList') {
|
|
||||||
const links = document.querySelectorAll('.gs-title a.gs-title');
|
|
||||||
links.forEach((link) => {
|
|
||||||
link.setAttribute('target', '_blank');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
observer.observe(document.body, {
|
|
||||||
childList: true,
|
|
||||||
subtree: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@ -86,10 +63,30 @@ export default {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 针对小屏幕的样式 */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.search-container {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: 0px;
|
||||||
|
min-height: 48px;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-title {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* 黑暗模式样式 */
|
/* 黑暗模式样式 */
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.search-title {
|
.search-title {
|
||||||
color: #d1d5db; /* 黑暗模式下的颜色 */
|
color: #d1d5db;
|
||||||
|
/* 黑暗模式下的颜色 */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -130,21 +127,27 @@ footer img {
|
|||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
footer {
|
footer {
|
||||||
background-color: #222222; /* 深色背景 */
|
background-color: #222222;
|
||||||
color: #cccccc; /* 浅灰色字体，确保可读性 */
|
/* 深色背景 */
|
||||||
border-top: 1px solid #444444; /* 深色边框 */
|
color: #cccccc;
|
||||||
|
/* 浅灰色字体，确保可读性 */
|
||||||
|
border-top: 1px solid #444444;
|
||||||
|
/* 深色边框 */
|
||||||
}
|
}
|
||||||
|
|
||||||
footer a {
|
footer a {
|
||||||
color: #80a0c2; /* 链接颜色改为浅色 */
|
color: #80a0c2;
|
||||||
|
/* 链接颜色改为浅色 */
|
||||||
}
|
}
|
||||||
|
|
||||||
footer a:hover {
|
footer a:hover {
|
||||||
color: #a0c3e0; /* 悬停时的链接颜色略微加亮 */
|
color: #a0c3e0;
|
||||||
|
/* 悬停时的链接颜色略微加亮 */
|
||||||
}
|
}
|
||||||
|
|
||||||
footer img {
|
footer img {
|
||||||
opacity: 0.9; /* 提高图像的亮度，适应深色背景 */
|
opacity: 0.9;
|
||||||
|
/* 提高图像的亮度，适应深色背景 */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user