style(support): 调整下拉框样式
All checks were successful
deploy to server / build-and-deploy (push) Successful in 2m50s
All checks were successful
deploy to server / build-and-deploy (push) Successful in 2m50s
- 将下拉框高度调整为40px - 在下拉框上方添加label
This commit is contained in:
@ -26,32 +26,47 @@
|
|||||||
</el-breadcrumb>
|
</el-breadcrumb>
|
||||||
</div>
|
</div>
|
||||||
<div class="document-category">
|
<div class="document-category">
|
||||||
<el-select v-model="selectedType" placeholder="选择产品类型" clearable>
|
<el-row :gutter="12">
|
||||||
<el-option
|
<el-col :span="8">
|
||||||
v-for="type in productionTypeOptions"
|
<span class="select-label">产品分类</span>
|
||||||
:key="type.documentId"
|
<el-select
|
||||||
:label="type.type"
|
v-model="selectedType"
|
||||||
:value="type.documentId"
|
placeholder="选择产品类型"
|
||||||
/>
|
clearable
|
||||||
</el-select>
|
>
|
||||||
<el-select
|
<el-option
|
||||||
v-model="selectedProduction"
|
v-for="type in productionTypeOptions"
|
||||||
placeholder="选择系列产品"
|
:key="type.documentId"
|
||||||
clearable
|
:label="type.type"
|
||||||
>
|
:value="type.documentId"
|
||||||
<el-option
|
/>
|
||||||
v-for="production in productionOptions"
|
</el-select>
|
||||||
:key="production.documentId"
|
</el-col>
|
||||||
:label="production.title"
|
<el-col :span="8">
|
||||||
:value="production.documentId"
|
<span class="select-label">产品系列</span>
|
||||||
/>
|
<el-select
|
||||||
</el-select>
|
v-model="selectedProduction"
|
||||||
<el-input
|
placeholder="选择系列产品"
|
||||||
v-model="keyword"
|
clearable
|
||||||
placeholder="输入关键词..."
|
>
|
||||||
clearable
|
<el-option
|
||||||
:prefix-icon="Search"
|
v-for="production in productionOptions"
|
||||||
/>
|
:key="production.documentId"
|
||||||
|
:label="production.title"
|
||||||
|
:value="production.documentId"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<span class="select-label">关键词</span>
|
||||||
|
<el-input
|
||||||
|
v-model="keyword"
|
||||||
|
placeholder="输入关键词..."
|
||||||
|
clearable
|
||||||
|
:prefix-icon="Search"
|
||||||
|
/>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-content">
|
<div class="page-content">
|
||||||
<document-list :documents="filteredDocuments" />
|
<document-list :documents="filteredDocuments" />
|
||||||
@ -182,12 +197,23 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.document-category {
|
.document-category {
|
||||||
display: flex;
|
|
||||||
padding: 0rem 2rem;
|
padding: 0rem 2rem;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-content {
|
.page-content {
|
||||||
padding: 1rem 2rem 2rem;
|
padding: 1rem 2rem 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.select-label {
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-select__wrapper),
|
||||||
|
:deep(.el-input__wrapper) {
|
||||||
|
height: 40px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -25,33 +25,49 @@
|
|||||||
</el-breadcrumb-item>
|
</el-breadcrumb-item>
|
||||||
</el-breadcrumb>
|
</el-breadcrumb>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="question-category">
|
<div class="question-category">
|
||||||
<el-select v-model="selectedType" placeholder="选择产品类型" clearable>
|
<el-row :gutter="12">
|
||||||
<el-option
|
<el-col :span="8">
|
||||||
v-for="type in productionTypeOptions"
|
<span class="select-label">产品分类</span>
|
||||||
:key="type.documentId"
|
<el-select
|
||||||
:label="type.type"
|
v-model="selectedType"
|
||||||
:value="type.documentId"
|
placeholder="选择产品类型"
|
||||||
/>
|
clearable
|
||||||
</el-select>
|
>
|
||||||
<el-select
|
<el-option
|
||||||
v-model="selectedProduction"
|
v-for="type in productionTypeOptions"
|
||||||
placeholder="选择系列产品"
|
:key="type.documentId"
|
||||||
clearable
|
:label="type.type"
|
||||||
>
|
:value="type.documentId"
|
||||||
<el-option
|
/>
|
||||||
v-for="production in productionOptions"
|
</el-select>
|
||||||
:key="production.documentId"
|
</el-col>
|
||||||
:label="production.title"
|
<el-col :span="8">
|
||||||
:value="production.documentId"
|
<span class="select-label">产品系列</span>
|
||||||
/>
|
<el-select
|
||||||
</el-select>
|
v-model="selectedProduction"
|
||||||
<el-input
|
placeholder="选择系列产品"
|
||||||
v-model="keyword"
|
clearable
|
||||||
placeholder="输入关键词..."
|
>
|
||||||
clearable
|
<el-option
|
||||||
:prefix-icon="Search"
|
v-for="production in productionOptions"
|
||||||
/>
|
:key="production.documentId"
|
||||||
|
:label="production.title"
|
||||||
|
:value="production.documentId"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<span class="select-label">关键词</span>
|
||||||
|
<el-input
|
||||||
|
v-model="keyword"
|
||||||
|
placeholder="输入关键词..."
|
||||||
|
clearable
|
||||||
|
:prefix-icon="Search"
|
||||||
|
/>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-content">
|
<div class="page-content">
|
||||||
<question-list :questions="filteredQuestions" />
|
<question-list :questions="filteredQuestions" />
|
||||||
@ -174,12 +190,23 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.question-category {
|
.question-category {
|
||||||
display: flex;
|
|
||||||
padding: 0rem 2rem;
|
padding: 0rem 2rem;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-content {
|
.page-content {
|
||||||
padding: 1rem 2rem 2rem;
|
padding: 1rem 2rem 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.select-label {
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-select__wrapper),
|
||||||
|
:deep(.el-input__wrapper) {
|
||||||
|
height: 40px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user