样式修改

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>
</div>
<div class="line"></div>
<div style="padding-top:10px;">
<el-checkbox-group v-model="checkList.list">
<el-checkbox :label="item.id" v-for="(item, i) in list" :key="i">{{ item.title }}</el-checkbox>
@@ -24,7 +25,7 @@
</template>
<script setup>
import { reactive ,ref,watchEffect,watch,defineExpose} from 'vue';
import { reactive, ref, watchEffect, watch, defineExpose } from 'vue';
//props
const props = defineProps({
list: {
@@ -45,48 +46,48 @@ const props = defineProps({
},
watchData: {
type: Function,
default:()=>{
return ()=>{}
default: () => {
return () => { }
}
},
clearList:{
type:Boolean,
default:true
clearList: {
type: Boolean,
default: true
}
})
let list =reactive([])
let show =null
let list = reactive([])
let show = null
let closeSeach = props.closeSeach
let selectSeach = props.selectSeach
let watchData= props.watchData
let watchData = props.watchData
//所选选项
let checkList = reactive({list:[]})
let checkList = reactive({ list: [] })
//监听刷新
watchEffect(() => {
show = props.show
list.splice(0,list.length)
list.splice(0, list.length)
list.push(...props.list)
// console.log(show)
if(show&&props.clearList){
checkList.list=[]
if (show && props.clearList) {
checkList.list = []
}
})
watch(()=>checkList.list,(nval,avl)=>{
watch(() => checkList.list, (nval, avl) => {
watchData(nval)
})
//取消
let closeBtn=()=>{
let closeBtn = () => {
// checkList.list.splice(0,checkList.list.length)
closeSeach()
}
//设置参数
let setCheckData=(data)=>{
checkList.list=data
let setCheckData = (data) => {
checkList.list = data
}
defineExpose({
@@ -168,11 +169,19 @@ defineExpose({
.top-box {
display: flex;
align-items: center;
border-bottom: 1px dashed #ebebeb;
padding-bottom: 20px;
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 {
width: 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-weight: 650;
font-style: normal;
font-size: 14px;
color: #000000;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner{
background:#50e3c2;
border-color:#50e3c2;
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
background: #50e3c2;
border-color: #50e3c2;
}
</style>

View File

@@ -378,6 +378,7 @@ defineExpose({
-webkit-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;
overflow-y: auto;
.title {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;

View File

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

View File

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