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

View file

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

View file

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

View file

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