<!-- * @Author: 纪泽龙 jizelong@qq.com * @Date: 2024-07-15 10:26:41 * @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditTime: 2024-07-31 16:25:42 * @FilePath: /zh-baseversion-web/src/views/bigWindow/components/Bottom.vue * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <template> <div class="big-bottom"> <div class="left"> <img v-if="cont != list.length - 3" @click.stop="cont++" src="@/assets/firstimage/l.png" alt="" /> </div> <div class="container"> <transition name="fadeBottom" mode="out-in"> <div v-if="activeCom.label" class="children" @click.stop=""> <div v-for="item in activeCom.children" :key="item.value" :title="'河北冉盛升新能源有限公123123123司'" class="child zzz" :class="[{ active: selectActive.includes(item.value) }]" @click.stop="selectActiveChange(item.value)" > {{ item.label }} </div> </div> </transition> <div class="all" @click.stop="selectAll" :class="{ active: selectActive.length == listFlatArr.length && selectActive.length > 1, }" > 全部 </div> <div class="other"> <div class="other2"> <div class="move" :style="{ left: -cont * 144 + 'px' }"> <div v-for="item in list" @click.stop="itemClick(item)" :key="item.value" class="item" :class="[ { active: item.label == activeCom.label }, { minOne: selectSome(item) }, { maxAll: selectEvery(item) }, ]" > {{ item.label }} </div> </div> </div> </div> </div> <div class="right"> <img v-if="cont != 0" @click.stop="cont--" src="@/assets/firstimage/r.png" alt="" /> </div> </div> </template> <script> import { mapGetters, mapActions } from "vuex"; export default { name: "", data() { return { cont: 0, list: [ { value: 1, label: "天然气公司", children: [ // { value: 10, label: "东阿道夫阿" }, // { value: 11, label: "阿发送到" }, // { value: 19, label: "发打算发大水" }, ], }, { value: 2, label: "液化气公司", children: [ // { value: 21, label: "2-1" }, // { value: 22, label: "2-2" }, ], }, { value: 3, label: "加气站", children: [ // { value: 31, label: "3-1" }, // { value: 32, label: "3-2" }, ], }, ], // 被选中的公司 activeCom: {}, selectShowNum: [], // 被选中的值 selectActive: [], listFlatArr: [], }; }, computed: { ...mapGetters(["company", "systemSetting"]), }, mounted() { this.GetCompany().then((res) => { this.company.forEach((item) => { this.list[item.companyType - 1].children.push({ value: item.conpanyId, label: item.companyName, }); }); this.selectAll(); }); }, methods: { ...mapActions({ GetCompany: "bigWindowCompany/GetCompany", }), selectUpClear() { this.activeCom = {}; }, selectAll() { // 生成所有都选中的数组 this.listFlatArr = this.list .map((item) => { return item.children.map((iten) => { return iten.value; }); }) .flat(); // 如果是全选中状态,则全取消,否则全选 if (this.selectActive.length == this.listFlatArr.length) { this.selectActive = []; } else { this.selectActive = [...this.listFlatArr]; } this.$emit("listChange", this.selectActive); }, itemClick(item) { if (item.children.length == 0) return; if (this.activeCom == item) { this.activeCom = {}; } else { this.activeCom = item; } }, selectActiveChange(value) { const num = this.selectActive.indexOf(value); if (num >= 0) { this.selectActive.splice(num, 1); } else { this.selectActive.push(value); } this.$emit("listChange", this.selectActive); }, selectSome(item) { return ( item.children.length > 0 && item.children.some((item) => { return this.selectActive.includes(item.value); }) ); }, // 都被选中 selectEvery(item) { return ( item.children.length > 0 && item.children.every((item) => { return this.selectActive.includes(item.value); }) ); }, }, }; </script> <style lang="scss" scoped> .big-bottom { width: 810px; height: 50px; position: fixed; bottom: 5px; left: 50%; margin-left: -405px; background: url("~@/assets/firstimage/btmA.png") no-repeat bottom center, url("~@/assets/firstimage/btmB.png") no-repeat bottom center; box-sizing: border-box; padding: 0 80px; display: flex; justify-content: space-between; align-items: center; .container { // background: red; flex: 1; margin-right: 22px; height: 28px; display: flex; .all { transition: all 0.2s linear; width: 128px; margin-right: 16px; text-align: center; line-height: 28px; color: #fff; font-size: 16px; cursor: pointer; background: url("~@/assets/firstimage/btm-item.png") no-repeat bottom center; &.active { background: url("~@/assets/firstimage/btm-item-active.png") no-repeat bottom center; } &:hover { opacity: 0.7; } } .other { flex: 1; width: 0; position: relative; .other2 { width: 100%; height: 100%; overflow: hidden; .move { transition: all 0.5s linear; width: 1000px; height: 100%; // background: blue; position: relative; display: flex; align-items: center; left: 0px; .item { transition: all 0.2s linear; width: 128px; margin-right: 16px; text-align: center; line-height: 28px; color: #fff; font-size: 16px; cursor: pointer; background: url("~@/assets/firstimage/btm-item.png") no-repeat bottom center; &.active { // color: #1ec9e3; background: url("~@/assets/firstimage/btm-item-two.png") no-repeat bottom center !important; } // 最少选中一个 &.minOne { background: url("~@/assets/firstimage/btm-item-one.png") no-repeat bottom center; } // 全选中 &.maxAll { background: url("~@/assets/firstimage/btm-item-active.png") no-repeat bottom center; } &:hover { opacity: 0.7; } } } } } .children { transition: all 1s linear; width: 620px; max-height: 214px; position: absolute; // background: red; background: rgba(2, 26, 51, 0.9); border: 1px solid #127bd1; box-shadow: inset 0px 0px 10px 0px #164db2; left: 50%; margin-left: -310px; // top: -215px; bottom: 50px; display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; padding: 20px 20px 0px 20px; // 滚动条 overflow-y: auto; &::-webkit-scrollbar { width: 10px; background: #012a53; position: absolute; top: 0; } &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ // border-radius: 10px; // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #00000052; border-radius: 8px; } &::-webkit-scrollbar-track { /*滚动条里面轨道*/ // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); // border-radius: 10px; // background-color: red; } &::-webkit-scrollbar-button:start { // overflow: hidden; } &::-webkit-scrollbar-button:end { // overflow: hidden; } .child { transition: all 0.5s linear; width: 275px; height: 32px; margin-bottom: 16px; background: #0b2d47; box-sizing: border-box; padding-left: 21px; line-height: 32px; color: #5ac8fb; border: 1px solid rgba(54, 136, 255, 0.2392); cursor: pointer; &.active { background: rgba(23, 149, 234, 0.5); box-sizing: border-box; border: 1px solid #408AD7; color: #fff; } &:hover { opacity: 0.7; } } } } .left { margin-right: 32px; color: white; } .right { color: white; } .left, .right { width: 14px; height: 20px; img { transition: all 0.5s linear; width: 100%; height: 100%; cursor: pointer; &:hover { opacity: 0.7; } } } // background: red; } </style>