XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页

Browse Source
This commit is contained in:
luJianJun
2023-07-10 11:44:41 +08:00
parent 444c6bb486
commit 8ceba4234d
52 changed files with 7263 additions and 5078 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
src/components/checkGroup/checkBoxGroup.vue Normal file
View File

@@ -0,0 +1,172 @@
<template>
<div class="seach-box" :class="{ 'seach-history-h': show }">
<div class="seach-info-box">
<div class="select-module-box">
<div class="top-box" @click="checkList.value.splice(0, checkList.value.length)">
<img src="../../assets/homeImage/topTitleIcon.svg"
v-show="!checkList.value || (checkList.value && !checkList.value.length)" class="img" alt="">
<div class="none-btn" v-show="(checkList.value && checkList.value.length)"></div>
<span :class="[(checkList.value && checkList.value.length) ? 'none-title' : 'title']">不限</span>
</div>
<div style="padding-top:10px;">
<el-checkbox-group v-model="checkList.value">
<el-checkbox label="复选框 A"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="复选框 D"></el-checkbox>
<el-checkbox label="复选框 E"></el-checkbox>
<el-checkbox label="复选框 F"></el-checkbox>
<el-checkbox label="复选框 G"></el-checkbox>
<el-checkbox label="复选框 H"></el-checkbox>
<el-checkbox label="复选框 I"></el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="seach-check-btn-box">
<div class="true-btn seach-btn" @click="selectSeach">选好了</div>
<div class="seach-btn" @click="closeSeach">取消</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive } from 'vue';
//
let checkList = reactive([])
</script>
<script>
export default {
props: {
list: {
type: Array,
default: function () {
return []
}
},
show: {
type: Boolean,
default: false
},
closeSeach:{
type:Function,
},
selectSeach:{
type:Function
}
}
}
</script>
<style scoped>
.seach-history-h {
max-height: 500px !important;
transition: max-height 0.5s ease-in-out;
}
.seach-box {
position: absolute;
top: 100px;
z-index: 666;
width: 100%;
max-height: 0;
overflow: hidden;
.seach-info-box {
width: 100%;
background: inherit;
background-color: rgba(255, 255, 255, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(235, 235, 235, 1);
border-radius: 16px;
-moz-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);
.seach-check-btn-box {
width: 100%;
border-top: 1px solid #ebebeb;
padding: 20px 20px 25px 20px;
display: flex;
align-items: center;
flex-direction: row-reverse;
.seach-btn {
width: 100px;
height: 40px;
background: inherit;
background-color: rgba(98, 177, 255, 0);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(170, 170, 170, 1);
border-radius: 150px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 15px;
color: #555555;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.true-btn {
background-color: rgba(98, 177, 255, 1);
border: 1px solid rgba(98, 177, 255, 1);
color: #FFFFFF;
margin-left: 10px;
}
}
.select-module-box {
padding: 25px 20px 20px 20px;
.top-box {
display: flex;
align-items: center;
border-bottom: 1px dashed #ebebeb;
padding-bottom: 20px;
cursor: pointer;
}
.none-btn {
width: 14px;
height: 14px;
border: 1px solid #d9d9d9;
border-radius: 50%;
margin-right: 10px;
}
.none-title {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #7F7F7F;
line-height: 20px;
}
}
.img {
width: 14px;
height: 14px;
margin-right: 10px;
}
.title {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 14px;
color: #000000;
line-height: 20px;
}
}
}
</style>