[update 87469] 首页样式

This commit is contained in:
danshihao
2024-08-05 19:43:05 +08:00
parent ad7562389e
commit 39a84c6408
7 changed files with 199 additions and 70 deletions
+15 -18
View File
@@ -1,19 +1,19 @@
<template>
<!-- 搜索区域 -->
<div class="search-wrapper">
<a-select class="resource-type-select" v-model="resourceType">
<a-select class="resource-type-select" v-model="resourceType" size="large">
<a-select-option value="all">{{ $t('dashboard.generalSearch.all')}}</a-select-option>
<a-select-option v-for="item in resourceTypeOptions" :key="item.value" :value="item.value" :title="item.title">
{{ item.title }}
</a-select-option>
</a-select>
<a-input class="search-input" v-model="searchValue" :placeholder="$t('pleaseEnter')" @pressEnter="searchInputEnter">
<a-input class="search-input" size="large" v-model="searchValue" :placeholder="$t('pleaseEnter')" @pressEnter="searchInputEnter">
<a-icon slot="prefix" type="search" style="color: #0064FA;" />
</a-input>
<div class="btn-box">
<a-button type="primary" icon="search" @click="toSearchWindow('title')">{{ $t('dashboard.retrieval.titleSearch') }}</a-button>
<a-button type="primary" icon="search" @click="toSearchWindow('fullText')">{{ $t('dashboard.retrieval.fullSearch') }}</a-button>
<a-button type="primary" class="btn-ghost" ghost @click="toAdvancedSearch"><img :src="require('@/assets/image/icon/super-search.png')" alt='' class="btn-icon">{{ $t('dashboard.retrieval.advancedSearch') }}</a-button>
<a-button type="primary" size="large" icon="search" @click="toSearchWindow('title')">{{ $t('dashboard.retrieval.titleSearch') }}</a-button>
<a-button type="primary" size="large" icon="search" @click="toSearchWindow('fullText')">{{ $t('dashboard.retrieval.fullSearch') }}</a-button>
<a-button type="primary" size="large" class="btn-ghost" ghost @click="toAdvancedSearch"><img :src="require('@/assets/image/icon/super-search.png')" alt='' class="btn-icon">{{ $t('dashboard.retrieval.advancedSearch') }}</a-button>
</div>
</div>
</template>
@@ -80,21 +80,21 @@ export default {
<style lang="less" scoped>
@height: 56px;
.search-wrapper {
width: 80%;
margin: 0 auto;
width: 80%;
display: grid;
grid-template-columns: 102px 1fr auto;
grid-template-columns: 120px 1fr auto;
grid-gap: 10px;
& > .resource-type-select {
flex: 0 0 102px;
height: 100%;
color: @primary-color;
/deep/.ant-select-arrow svg {
fill: @primary-color;
}
/deep/.ant-select-selection--single {
height: @height;
height: 100%;
border-color: @primary-color;
}
/deep/.ant-select-arrow {
@@ -108,7 +108,8 @@ export default {
}
& > .search-input {
flex: auto;
height: 100%;
font-size: 16px;
//margin-left: 10px;
/deep/.ant-input-prefix {
left: 24px;
@@ -116,14 +117,14 @@ export default {
/deep/.ant-input {
padding-left: 40px;
height: @height;
height: 100%;
border-color: @primary-color;
}
}
.btn-box .ant-btn {
flex: 138px;
height: @height;
min-width: 138px;
height: 100%;
&:not(:first-child) {
margin-left: 10px;
@@ -133,10 +134,6 @@ export default {
.btn-icon {
margin-right: 8px;
vertical-align: top;
}
@media screen and (max-width: 1366px) {
@height: 42px;
vertical-align: sub;
}
</style>