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

226
src/components/indexSeachInfo/indexSeachInfo.vue Normal file
View File

@@ -0,0 +1,226 @@
<template>
<div style="margin-top:15px;">
<div class="title-box">
<div class="box"></div>
<div class="title">{{ title }}</div>
</div>
<div style="padding:0 0 0 18px;">
<div class="info-box-bg">
<div class="box"
:class="[{ 'jus-sp': seachType === '1' || seachType === '3' }, { 'pad-15': seachType === '3' }]">
<div class="btn" v-for="(item, i) in btn" :key="i" :class="{ 'mg-l-15': i % 4 !== 0 }"
v-if="seachType === '1'">
{{ item.text }}</div>
<div class="btn seach-long-btn" :class="{ 'mg-l-15': i % 3 !== 0 }" v-if="seachType === '2'"
v-for="(item, i) in btn" :key="i">{{ item.text }}</div>
<div class="select-btn" v-if="seachType === '3'" @click="setSelectType(i + 1)"
:class="[{ 'mg-l-15': i + 1 !== 1 }, { 'select-btn-click': i + 1 === selectType }]"
v-for="(item, i) in btn" :key="i">
{{ item.text }}
<img :src="selectType === i + 1 ? require('../../assets/homeImage/seachSelectBtn.svg') : require('../../assets/homeImage/selectImg.svg')"
class="img" alt="">
</div>
</div>
<checkBoxGroup :show="selectType!==''" v-if="seachType === '3'" :selectSeach="selectSeach" :closeSeach="closeSeach"></checkBoxGroup>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import checkBoxGroup from "../checkGroup/checkBoxGroup.vue";
let selectType = ref('')
//
let setSelectType = (num) => {
if (num === selectType.value) {
selectType.value = ''
} else {
selectType.value = num
}
}
//取消按钮
let closeSeach = () => {
selectType.value = ''
}
//确认按钮
let selectSeach=()=>{
}
</script>
<script>
export default {
props: {
title: {
type: String,
default: '123'
},
btn: {
type: Array,
default: function () {
return []
}
},
seachType: {
type: String,
default: null
}
}
}
</script>
<style scoped>
.pad-15 {
padding: 0 15px 0px 15px !important;
}
.jus-sp {
justify-content: space-around;
}
.title-box {
display: flex;
align-items: center;
.box {
width: 5px;
height: 16px;
background: inherit;
background-color: rgba(80, 227, 194, 1);
border: none;
border-radius: 40px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.title {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
text-align: left;
margin-left: 10px;
}
}
.info-box-bg {
margin-top: 22px;
background: #d7d7d7 !important;
background: inherit;
border: none;
border-radius: 16px;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
width: 550px;
position: relative;
.box {
display: flex;
flex-wrap: wrap;
background: #FFFFFF;
transform: translate(0, -4px);
border-radius: 16px;
padding: 0 15px 10px 15px;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
}
.select-btn-click {
border: 1px solid rgba(80, 227, 194, 1) !important;
color: rgba(80, 227, 194, 1) !important;
}
.select-btn {
width: 162px;
height: 40px;
background: inherit;
background-color: rgba(246, 246, 246, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(235, 235, 235, 1);
border-radius: 76px;
-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: 14px;
color: #555555;
display: flex;
justify-content: center;
align-items: center;
margin: 27px 0;
cursor: pointer ;
.img {
width: 14px;
height: 14px;
object-fit: contain;
margin-left: 10px;
}
}
.seach-long-btn {
width: 161px !important;
height: 32px !important;
cursor: pointer ;
}
.btn {
width: 117px;
height: 32px;
background: inherit;
background-color: rgba(246, 246, 246, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(235, 235, 235, 1);
border-radius: 35px;
-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: 14px;
color: #555555;
line-height: 32px;
text-align: center;
margin-top: 10px;
cursor: pointer ;
}
.mg-l-15 {
margin-left: 15px;
}
}
/deep/ .el-checkbox__inner {
border-radius: 4px;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
background-color: rgba(80, 227, 194, 1);
border-color: rgba(80, 227, 194, 1);
}
/deep/ .el-checkbox__inner:hover {
border-color: rgba(80, 227, 194, 1);
}
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
color: rgba(80, 227, 194, 1);
}
</style>