提交 e4644875 authored 作者: 朱政's avatar 朱政

fix:资助体系下拉框样式修改

上级 14956991
流水线 #344 已通过 于阶段
in 1 分 47 秒
...@@ -5,14 +5,14 @@ ...@@ -5,14 +5,14 @@
<div class="left-title"> <div class="left-title">
<img src="./assets/icon01.png" alt="" /> <img src="./assets/icon01.png" alt="" />
<div class="tit">资助领域分布情况</div> <div class="tit">资助领域分布情况</div>
<div :class="radio1 === true ? 'btn-select' : 'btn'" style=" right:250px;" @click="setRadio1(true)"> <div :class="radio1 === true ? 'btn-select' : 'btn'" style=" right:254px;" @click="setRadio1(true)">
资助经费 资助经费
</div> </div>
<div :class="radio1 === false ? 'btn-select' : 'btn'" style=" right: 150px;" @click="setRadio1(false)"> <div :class="radio1 === false ? 'btn-select' : 'btn'" style=" right: 166px;" @click="setRadio1(false)">
资助项目 资助项目
</div> </div>
<el-select v-model="value1" placeholder="Select" class="select" style=" right: 31px;" <el-select v-model="value1" placeholder="Select" class="select" popper-class="datasub-select-popper"
@change="handleLeft1YearChange"> @change="handleLeft1YearChange">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
...@@ -39,7 +39,8 @@ ...@@ -39,7 +39,8 @@
<div class="left-title"> <div class="left-title">
<img src="./assets/icon03.png" alt="" /> <img src="./assets/icon03.png" alt="" />
<div class="tit">机构资助领域情况</div> <div class="tit">机构资助领域情况</div>
<el-select v-model="value2" placeholder="Select" class="select" @change="handleGetOrgFundsArea"> <el-select v-model="value2" placeholder="Select" class="select" popper-class="datasub-select-popper"
@change="handleGetOrgFundsArea">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</div> </div>
...@@ -65,13 +66,14 @@ ...@@ -65,13 +66,14 @@
<div class="right-title"> <div class="right-title">
<img src="./assets/icon02.png" alt="" /> <img src="./assets/icon02.png" alt="" />
<div class="tit">资助经费变化情况</div> <div class="tit">资助经费变化情况</div>
<div :class="radio2 === true ? 'btn-select' : 'btn'" style=" right:250px;" @click="setRadio2(true)"> <div :class="radio2 === true ? 'btn-select' : 'btn'" style=" right:254px;" @click="setRadio2(true)">
资助经费 资助经费
</div> </div>
<div :class="radio2 === false ? 'btn-select' : 'btn'" style=" right: 150px;" @click="setRadio2(false)"> <div :class="radio2 === false ? 'btn-select' : 'btn'" style=" right: 166px;" @click="setRadio2(false)">
资助项目 资助项目
</div> </div>
<el-select v-model="value" placeholder="Select" class="select" @change="handleRight1RangeChange"> <el-select v-model="value" placeholder="Select" class="select" popper-class="datasub-select-popper"
@change="handleRight1RangeChange">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</div> </div>
...@@ -98,7 +100,8 @@ ...@@ -98,7 +100,8 @@
<div class="right-title"> <div class="right-title">
<img src="./assets/icon04.png" alt="" /> <img src="./assets/icon04.png" alt="" />
<div class="tit">项目资助强度分布</div> <div class="tit">项目资助强度分布</div>
<el-select v-model="value3" placeholder="Select" class="select" @change="handleRight2YearChange"> <el-select v-model="value3" placeholder="Select" class="select" popper-class="datasub-select-popper"
@change="handleRight2YearChange">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</div> </div>
...@@ -1227,10 +1230,20 @@ onMounted(() => { ...@@ -1227,10 +1230,20 @@ onMounted(() => {
.select { .select {
width: 120px; width: 120px;
height: 28px; height: 28px;
padding: 0px 12px; /* 统一四个下拉框:总宽 120px(含内边距),不影响 right/left 定位与按钮间距 */
box-sizing: border-box;
/* padding 放到 el-select__wrapper,避免内部触发器被压缩到 96px */
padding: 0;
position: absolute; position: absolute;
top: 11px; top: 11px;
right: 31px; right: 38px;
}
.select :deep(.el-select__wrapper) {
min-height: 28px;
box-sizing: border-box;
padding: 0 12px;
} }
} }
...@@ -1307,16 +1320,27 @@ onMounted(() => { ...@@ -1307,16 +1320,27 @@ onMounted(() => {
padding: 0px 12px; padding: 0px 12px;
position: absolute; position: absolute;
top: 11px; top: 11px;
right: 163px;
} }
.select { .select {
width: 120px; width: 120px;
height: 28px; height: 28px;
padding: 0px 12px; /* 统一四个下拉框:总宽 120px(含内边距),不影响 right/left 定位与按钮间距 */
box-sizing: border-box;
/* padding 放到 el-select__wrapper,避免内部触发器被压缩到 96px */
padding: 0;
position: absolute; position: absolute;
top: 11px; top: 11px;
right: 31px; right: 38px;
}
.select :deep(.el-select__wrapper) {
min-height: 28px;
box-sizing: border-box;
padding: 0 12px;
} }
} }
...@@ -1420,12 +1444,18 @@ onMounted(() => { ...@@ -1420,12 +1444,18 @@ onMounted(() => {
} }
} }
/* 参考智库概览页下拉框:不改默认 hover/selected 底色,只给选项文字做左缩进 */
:global(.datasub-select-popper .el-select-dropdown__item) {
padding-left: 20px;
}
.btn { .btn {
position: absolute; position: absolute;
top: 11px; top: 11px;
/* 切换按钮 */ /* 切换按钮 */
width: 85px;
height: 28px; height: 28px;
/* 自动布局 */ /* 自动布局 */
display: flex; display: flex;
...@@ -1440,7 +1470,7 @@ onMounted(() => { ...@@ -1440,7 +1470,7 @@ onMounted(() => {
border: 1px solid rgba(230, 231, 232, 1); border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px; border-radius: 4px;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei; font-family: "Source Han Sans CN";
font-style: Regular; font-style: Regular;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -1453,7 +1483,7 @@ onMounted(() => { ...@@ -1453,7 +1483,7 @@ onMounted(() => {
position: absolute; position: absolute;
top: 11px; top: 11px;
/* 切换按钮 */ /* 切换按钮 */
width: 85px;
height: 28px; height: 28px;
/* 自动布局 */ /* 自动布局 */
display: flex; display: flex;
...@@ -1467,7 +1497,7 @@ onMounted(() => { ...@@ -1467,7 +1497,7 @@ onMounted(() => {
border: 1px solid rgba(5, 95, 194, 1); border: 1px solid rgba(5, 95, 194, 1);
border-radius: 4px; border-radius: 4px;
background: rgba(231, 243, 255, 1); background: rgba(231, 243, 255, 1);
font-family: Microsoft YaHei; font-family: "Source Han Sans CN";
font-style: Regular; font-style: Regular;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<div class="select-box"> <div class="select-box">
<el-select v-model="sortModel" class="resource-library-sort-select" placeholder="发布时间" style="width: 120px" <el-select v-model="sortModel" class="resource-library-sort-select" placeholder="发布时间" style="width: 120px"
:teleported="true" placement="bottom-start" :popper-options="resourceLibrarySortPopperOptions" :teleported="true" placement="bottom-start" :popper-options="resourceLibrarySortPopperOptions"
@change="handleResourceLibrarySortChange"> @change="handleResourceLibrarySortChange" popper-class="datasub-select-popper">
<template #prefix> <template #prefix>
<img v-if="sortModel !== true" src="@/views/thinkTank/ThinkTankDetail/thinkDynamics/images/image down.png" <img v-if="sortModel !== true" src="@/views/thinkTank/ThinkTankDetail/thinkDynamics/images/image down.png"
class="resource-library-sort-prefix-img" alt="" @click.stop="toggleResourceLibrarySortPrefix" /> class="resource-library-sort-prefix-img" alt="" @click.stop="toggleResourceLibrarySortPrefix" />
...@@ -322,7 +322,9 @@ onMounted(async () => { ...@@ -322,7 +322,9 @@ onMounted(async () => {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
:global(.datasub-select-popper .el-select-dropdown__item) {
padding-left: 20px;
}
.reslib-page { .reslib-page {
width: 1600px; width: 1600px;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论