fix search box, fix color

This commit is contained in:
KUN1007 2023-06-06 16:20:02 +08:00
parent 5e3cd1a63e
commit 027f17e9e7
4 changed files with 11 additions and 13 deletions

View file

@ -44,7 +44,7 @@ defineProps(['isMainPage'])
<style lang="scss" scoped> <style lang="scss" scoped>
/* 搜索帖子 */ /* 搜索帖子 */
.container { .container {
height: 40px; height: 39px;
width: 1px; width: 1px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -55,7 +55,6 @@ defineProps(['isMainPage'])
/* 相对于二级菜单定位 */ /* 相对于二级菜单定位 */
position: relative; position: relative;
display: flex; display: flex;
border-bottom: 1px solid var(--kungalgame-trans-blue-4);
box-sizing: border-box; box-sizing: border-box;
&:hover { &:hover {
background-color: var(--kungalgame-trans-white-5); background-color: var(--kungalgame-trans-white-5);
@ -68,7 +67,7 @@ defineProps(['isMainPage'])
/* 搜索框表单 */ /* 搜索框表单 */
.search-form { .search-form {
display: flex; display: flex;
height: 40px; height: 39px;
/* 随着页面自增长 */ /* 随着页面自增长 */
width: 1px; width: 1px;
flex-grow: 1; flex-grow: 1;
@ -83,7 +82,7 @@ defineProps(['isMainPage'])
/* 框体 */ /* 框体 */
.input { .input {
padding: 0 15px; padding: 0 15px;
height: 40px; height: 39px;
width: 100%; width: 100%;
/* 搜索时输入的字体大小 */ /* 搜索时输入的字体大小 */
font-size: 16px; font-size: 16px;
@ -96,8 +95,8 @@ defineProps(['isMainPage'])
/* 搜索按钮 */ /* 搜索按钮 */
.search-btn { .search-btn {
/* 正方形,不缩小 */ /* 正方形,不缩小 */
height: 40px; height: 39px;
width: 40px; width: 39px;
flex-shrink: 0; flex-shrink: 0;
border-left: 1px solid var(--kungalgame-trans-blue-4); border-left: 1px solid var(--kungalgame-trans-blue-4);
/* 搜索图标居中 */ /* 搜索图标居中 */
@ -120,12 +119,12 @@ defineProps(['isMainPage'])
/* 相对于 nav 的搜索区域绝对定位 */ /* 相对于 nav 的搜索区域绝对定位 */
position: absolute; position: absolute;
/* 紧贴搜索区定位 */ /* 紧贴搜索区定位 */
top: 40px; top: 39px;
left: 0; left: 0;
/* 无 hover 时不显示搜索历史 */ /* 无 hover 时不显示搜索历史 */
display: none; display: none;
flex-direction: column; flex-direction: column;
background-color: var(--kungalgame-trans-white-5); background-color: var(--kungalgame-white);
color: var(--kungalgame-font-color-3); color: var(--kungalgame-font-color-3);
border: 1px solid var(--kungalgame-red-1); border: 1px solid var(--kungalgame-red-1);
border-radius: 7px; border-radius: 7px;

View file

@ -58,6 +58,7 @@ import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue'
flex-shrink: 0; flex-shrink: 0;
/* 交互区距离外面半透明总容器的距离 */ /* 交互区距离外面半透明总容器的距离 */
margin-top: 5px; margin-top: 5px;
border-bottom: 1px solid var(--kungalgame-trans-blue-4);
} }
/* 筛选、搜索帖子、更多 */ /* 筛选、搜索帖子、更多 */
.nav-article-sort-container { .nav-article-sort-container {
@ -76,7 +77,6 @@ import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue'
flex-grow: 1; flex-grow: 1;
border-radius: 5px 0 0 0; border-radius: 5px 0 0 0;
position: relative; position: relative;
border-bottom: 1px solid var(--kungalgame-trans-blue-4);
border-right: 1px solid var(--kungalgame-trans-blue-4); border-right: 1px solid var(--kungalgame-trans-blue-4);
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
@ -103,7 +103,7 @@ import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue'
} }
.sort-submenu > div { .sort-submenu > div {
padding: 10px 0; padding: 10px 0;
background-color: var(--kungalgame-trans-white-5); background-color: var(--kungalgame-trans-white-2);
font-size: 14px; font-size: 14px;
color: var(--kungalgame-font-color-3); color: var(--kungalgame-font-color-3);
text-decoration: none; text-decoration: none;
@ -136,7 +136,6 @@ import KUNGalgameSearchBox from '@/components/KUNGalgameSearchBox.vue'
flex-grow: 1; flex-grow: 1;
border-radius: 0 5px 0 0; border-radius: 0 5px 0 0;
cursor: pointer; cursor: pointer;
border-bottom: 1px solid var(--kungalgame-trans-blue-4);
border-left: 1px solid var(--kungalgame-trans-blue-4); border-left: 1px solid var(--kungalgame-trans-blue-4);
box-sizing: border-box; box-sizing: border-box;
} }

View file

@ -49,7 +49,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
max-width: 1350px; max-width: 1350px;
max-width: 1200px; max-width: 1200px;
/* 背景色和边框阴影 */ /* 背景色和边框阴影 */
background-color: var(--kungalgame-trans-white-5); background-color: var(--kungalgame-trans-white-2);
border: 1px solid var(--kungalgame-blue-4); border: 1px solid var(--kungalgame-blue-4);
box-shadow: var(--shadow); box-shadow: var(--shadow);
border-radius: 7px; border-radius: 7px;

View file

@ -60,7 +60,7 @@ import { Icon } from '@iconify/vue'
border-radius: 5px; border-radius: 5px;
/* 帖子内容距离边的距离 */ /* 帖子内容距离边的距离 */
padding: 0 10px; padding: 0 10px;
background-color: var(--kungalgame-trans-white-5); background-color: var(--kungalgame-trans-white-2);
/* 相对于底部状态的定位 */ /* 相对于底部状态的定位 */
position: relative; position: relative;
display: inline-block; display: inline-block;