style: 历史页面样式修改
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="table_search_bar flex flex-justify-between flex-align-center">
|
<div class="table_search_bar flex flex-align-center flex-justify-between">
|
||||||
<div class="search_preset flex flex-1">
|
<div class="search_preset flex ">
|
||||||
<div
|
<div
|
||||||
class="preset_item gallery_btn white"
|
class="preset_item gallery_btn white"
|
||||||
v-for="item in buttonList"
|
v-for="item in buttonList"
|
||||||
@@ -11,15 +11,15 @@
|
|||||||
{{ item.label }}
|
{{ item.label }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="search_input flex flex-align-center">
|
<div class="search_input flex flex-align-center" :style="{ width: inputWidth }">
|
||||||
<input
|
<input
|
||||||
class="search_input_inner flex-1"
|
class="search_input_inner"
|
||||||
v-model="searchParams.searchText"
|
v-model="searchParams.searchText"
|
||||||
:bordered="false"
|
:bordered="false"
|
||||||
@keydown.enter="handleSearch"
|
@keydown.enter="handleSearch"
|
||||||
:placeholder="placeholder"
|
:placeholder="placeholder"
|
||||||
/>
|
/>
|
||||||
<SearchOutlined @click="handleSearch" />
|
<SearchOutlined class="search_input_icon" @click="handleSearch" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -36,6 +36,7 @@ interface ButtonItem {
|
|||||||
interface Props {
|
interface Props {
|
||||||
buttonList: ButtonItem[]
|
buttonList: ButtonItem[]
|
||||||
placeholder?: string
|
placeholder?: string
|
||||||
|
inputWidth?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
interface SearchParams {
|
interface SearchParams {
|
||||||
@@ -91,11 +92,13 @@ const handleSearch = () => {
|
|||||||
line-height: 4rem;
|
line-height: 4rem;
|
||||||
min-width: 10rem;
|
min-width: 10rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
border-width: 0.1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search_input {
|
.search_input {
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
|
width: 23rem; // 默认宽度
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: 0.1rem solid #000;
|
border: 0.1rem solid #000;
|
||||||
border-radius: 43rem;
|
border-radius: 43rem;
|
||||||
@@ -106,6 +109,10 @@ const handleSearch = () => {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
padding-left: 3rem;
|
padding-left: 3rem;
|
||||||
border-radius: 4rem;
|
border-radius: 4rem;
|
||||||
|
width: calc(100% - 2rem);
|
||||||
|
}
|
||||||
|
.search_input_icon {
|
||||||
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user