scss公共样式

shuishen

2022-09-23 6263f5bba7adb4a85f39ea8a6e6d6d926b953b0e

scss公共样式

 src/components/select/index.vue

New file
@@ -0,0 +1,133 @@
<template>
    <div class="selects-container">
        <!-- 选择框 -->
        <div
            :class="{ 'selects-box-show': !isshow, 'selects-box-hide': isshow }"
            class="selects0"
            @click="isshow = !isshow"
        >
            <p v-text="xz"></p>
        </div>
        <!-- 下拉框大盒子 -->
        <div
            :class="{ show: !isshow, hade: isshow, issel: num >= 4 }"
            class="sel"
            :style="{ height: 35 * num + 'px' }"
        >
            <!-- 下拉框 -->
            <div
                @click="cutValue(i)"
                :style="{ display: num >= i + 1 ? 'block' : 'none' }"
                v-for="(item, i) in num"
                :key="i"
                v-text="sel[i]"
            ></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'mapSelect',
    props: {
        //显示多少个下拉框
        num: {
            type: Number,
            required: true //必传
        },
        //下拉框显示的数据
        sel: {
            type: Array,
            required: true //必传
        }
    },
    data () {
        return {
            isshow: true, //控制下拉框显示及隐藏
            xz: "请选择" //默认展示的内容
        }
    },
    methods: {
        //点击换文字的方法
        cutValue (val) {
            this.isshow = true
            this.xz = this.sel[val] //拿到父组件传来的数据
            this.$emit("va", val, this.sel[val])
        }
    }
};
</script>

<style lang="scss" scoped>
//显示下拉框
.show {
    display: block;
}
//隐藏下拉框
.hade {
    display: none;
}
//点击时改变选择框的边框颜色
.selects-box-show {
    border: 1px solid #01be6e;
}
//恢复边框颜色
.selects-box-hide {
    border: 1px solid #e4e4e4;
}
.selects-container {
    width: 100%;
    height: 100%;
    .selects0 {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
            line-height: 100%;
            display: inline;
            color: #666666; //默认字体颜色
            font-size: 15px; //默认字体大小
            padding-left: 10px;
        }
        img {
            margin-right: 10px;
            transform: translateY(-2px);
        }
    }
    //当下拉框数量超过4个时 使用固定高度
    .issel {
        height: 140px !important;
    }
    .sel {
        width: 100%;
        height: 140px;
        overflow: auto;
        border: 1px solid #01be6e; //下拉框边框颜色
        border-top: none;
        div {
            width: 100%;
            height: 35px; //下拉框高度
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 35px;
            padding-left: 10px;
            background: rgba(7, 22, 37, 0.8); //下拉框默认背景
        }
        //鼠标移到下拉框时的背景
        div:hover {
            background: rgba(17, 52, 88, 0.8);
            color: white;
        }
        .selects0:hover {
            background: white;
        }
    }
    //隐藏滚动条
    .sel::-webkit-scrollbar {
        display: none;
    }
}
</style>

 src/styles/public/index.scss

New file
@@ -0,0 +1 @@
$bg-color-blue: rgba(7, 22, 37, 0.8);

 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-23 10:23:07
 * @LastEditTime: 2022-09-23 14:19:15
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -129,6 +129,10 @@
            <div class="layers-control-btn">
                <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
            </div>
        </div>

        <div class="region-select">
            <map-select @va="childValue" :num="count" :sel="sel"></map-select>
        </div>

        <div class="top-container">
@@ -369,7 +373,9 @@
            twoSelected: '',
            threeSelected: '',
            twoChooseData: {},
            threeChooseData: []
            threeChooseData: [],
            sel: ["男", "女"], //下拉框的内容 （Array类型） 必传
            count: 2 //下拉框条数  （Number类型） 必传
        }
    },
    created () {
@@ -549,6 +555,9 @@
    updated () {
    },
    methods: {
        childValue (index, val) {
            console.log(index, val)
        },
        getCenter (arr) {
            let centerLonLat = []
            if (arr.length) {
@@ -1116,6 +1125,8 @@
</script>

<style scoped lang="scss">
@import '@/styles/public/index.scss';

.container {
    color: #fff;

@@ -1125,7 +1136,7 @@
        left: 0;
        width: 400px;
        height: calc(100% - 80px);
        background: rgba(7, 22, 37, 0.8);
        background: $bg-color-blue;

        .person-box {
            height: 40%;
@@ -1268,5 +1279,13 @@
            position: relative;
        }
    }

    .region-select {
        position: absolute;
        top: 120px;
        left: 420px;
        width: 200px;
        height: 36px;
    }
}
</style>