样式修改

This commit is contained in:
2023-08-07 11:21:45 +08:00
parent 587476c41b
commit 94b3444189
4 changed files with 40 additions and 25 deletions

View File

@@ -9,6 +9,7 @@
<span :class="[(checkList.list && checkList.list.length) ? 'none-title' : 'title']">不限 <span :class="[(checkList.list && checkList.list.length) ? 'none-title' : 'title']">不限
</span> </span>
</div> </div>
<div class="line"></div>
<div style="padding-top:10px;"> <div style="padding-top:10px;">
<el-checkbox-group v-model="checkList.list"> <el-checkbox-group v-model="checkList.list">
<el-checkbox :label="item.id" v-for="(item, i) in list" :key="i">{{ item.title }}</el-checkbox> <el-checkbox :label="item.id" v-for="(item, i) in list" :key="i">{{ item.title }}</el-checkbox>
@@ -24,7 +25,7 @@
</template> </template>
<script setup> <script setup>
import { reactive ,ref,watchEffect,watch,defineExpose} from 'vue'; import { reactive, ref, watchEffect, watch, defineExpose } from 'vue';
//props //props
const props = defineProps({ const props = defineProps({
list: { list: {
@@ -45,48 +46,48 @@ const props = defineProps({
}, },
watchData: { watchData: {
type: Function, type: Function,
default:()=>{ default: () => {
return ()=>{} return () => { }
} }
}, },
clearList:{ clearList: {
type:Boolean, type: Boolean,
default:true default: true
} }
}) })
let list =reactive([]) let list = reactive([])
let show =null let show = null
let closeSeach = props.closeSeach let closeSeach = props.closeSeach
let selectSeach = props.selectSeach let selectSeach = props.selectSeach
let watchData= props.watchData let watchData = props.watchData
//所选选项 //所选选项
let checkList = reactive({list:[]}) let checkList = reactive({ list: [] })
//监听刷新 //监听刷新
watchEffect(() => { watchEffect(() => {
show = props.show show = props.show
list.splice(0,list.length) list.splice(0, list.length)
list.push(...props.list) list.push(...props.list)
// console.log(show) // console.log(show)
if(show&&props.clearList){ if (show && props.clearList) {
checkList.list=[] checkList.list = []
} }
}) })
watch(()=>checkList.list,(nval,avl)=>{ watch(() => checkList.list, (nval, avl) => {
watchData(nval) watchData(nval)
}) })
//取消 //取消
let closeBtn=()=>{ let closeBtn = () => {
// checkList.list.splice(0,checkList.list.length) // checkList.list.splice(0,checkList.list.length)
closeSeach() closeSeach()
} }
//设置参数 //设置参数
let setCheckData=(data)=>{ let setCheckData = (data) => {
checkList.list=data checkList.list = data
} }
defineExpose({ defineExpose({
@@ -168,11 +169,19 @@ defineExpose({
.top-box { .top-box {
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px dashed #ebebeb;
padding-bottom: 20px;
cursor: pointer; cursor: pointer;
} }
.line {
height: 1px;
width: 100%;
background-image: linear-gradient(to right, #d7d7d7 0%, #d7d7d7 50%, transparent 0%);
background-size: 2px 1px;
background-repeat: repeat-x;
margin-top:20px;
margin-bottom:5px;
}
.none-btn { .none-btn {
width: 14px; width: 14px;
height: 14px; height: 14px;
@@ -207,16 +216,18 @@ defineExpose({
} }
} }
} }
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650; font-weight: 650;
font-style: normal; font-style: normal;
font-size: 14px; font-size: 14px;
color: #000000; color: #000000;
} }
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner{
background:#50e3c2; /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
border-color:#50e3c2; background: #50e3c2;
border-color: #50e3c2;
} }
</style> </style>

View File

@@ -378,6 +378,7 @@ defineExpose({
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
padding: 20px 25px; padding: 20px 25px;
overflow-y: auto;
.title { .title {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;

View File

@@ -30,8 +30,8 @@
</div> </div>
</div> </div>
<img src="../../assets/homeImage/selectInfoTabIcon.svg" <img src="../../assets/homeImage/selectInfoTabIcon.svg"
v-show="selectTabCheck.id !== item.id" class="img" alt=""> v-show="selectTabCheck.id !== item.id&&item.id" class="img" alt="">
<img src="../../assets/homeImage/selectImg.svg" v-show="selectTabCheck.id === item.id" <img src="../../assets/homeImage/selectImg.svg" v-show="selectTabCheck.id === item.id&&item.id"
class="img" alt=""> class="img" alt="">
</div> </div>
<div class="hid-box"> <div class="hid-box">
@@ -385,6 +385,7 @@ let setSelectPosition = (type) => {
//点击区域/学校选项 //点击区域/学校选项
let clearSelectTabCheck = ref(true) let clearSelectTabCheck = ref(true)
let setSelectData = (id, data = [], title) => { let setSelectData = (id, data = [], title) => {
console.log(data)
showSelect.value = true showSelect.value = true
if (id === selectTabCheck.id) { if (id === selectTabCheck.id) {
clearSelectTabCheck.value = false clearSelectTabCheck.value = false
@@ -399,6 +400,7 @@ let setSelectData = (id, data = [], title) => {
schoolSelectObj.title = '' schoolSelectObj.title = ''
setLocation('location',[selectTabCheck.id + '']) setLocation('location',[selectTabCheck.id + ''])
if (id === '') { if (id === '') {
selectData.data=[]
setSeachCondition('location', []) setSeachCondition('location', [])
} }
} }

View File

@@ -2861,6 +2861,7 @@ img {
height: 16px; height: 16px;
position: absolute; position: absolute;
right: 20px; right: 20px;
cursor:pointer;
} }
} }
} }