143 lines
2.9 KiB
Vue
143 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
const loading = ref(false);
|
|
const isOpen = ref(true);
|
|
const jidiData = ref([
|
|
{
|
|
id: 1,
|
|
name: "当前全部",
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "水电基地2",
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "水电基地3",
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "水电基地4",
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "水电基地5",
|
|
},
|
|
{
|
|
id: 6,
|
|
name: "水电基地6",
|
|
},
|
|
{
|
|
id: 7,
|
|
name: "水电基地7",
|
|
},
|
|
{
|
|
id: 8,
|
|
name: "水电基地8",
|
|
},
|
|
{
|
|
id: 9,
|
|
name: "水电基地9",
|
|
},
|
|
{
|
|
id: 10,
|
|
name: "水电基地10",
|
|
},
|
|
{
|
|
id: 11,
|
|
name: "水电基地11",
|
|
},
|
|
]);
|
|
const jidiDataNum = ref(9);
|
|
const selectedItem: any = ref(1);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="jidiSelectorMod">
|
|
<a-spin :spinning="loading">
|
|
<div
|
|
class="qgc-dropdown-select"
|
|
@mouseenter="jidiDataNum = jidiData.length"
|
|
@mouseleave="jidiDataNum = 9"
|
|
>
|
|
<div class="title" @click="isOpen = !isOpen">
|
|
<div>水电基地</div>
|
|
<div style="padding-right: 5px;" :style="{ transform: !isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }">
|
|
<i class="icon iconfont icon-topOutline"></i>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="isOpen"
|
|
class="item"
|
|
v-for="i in jidiData.slice(0, jidiDataNum)"
|
|
:class="{ selected: selectedItem === i.id }"
|
|
@click="selectedItem = i.id"
|
|
>
|
|
<i class="icon iconfont icon-hydroPower"></i>
|
|
<span style="margin-left: 10px">{{ i.name }}</span>
|
|
</div>
|
|
</div>
|
|
</a-spin>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
@use "@/styles/variables.module.scss" as *;
|
|
.jidiSelectorMod {
|
|
width: 175px;
|
|
max-height: 941px;
|
|
border: 1px solid #cedce8;
|
|
border-radius: 1px;
|
|
background-color: #e5edf3;
|
|
padding: 4px;
|
|
position: relative;
|
|
border-radius: 1px;
|
|
margin: 16px 0 0 16px;
|
|
z-index: 99;
|
|
pointer-events: auto;
|
|
.qgc-dropdown-select {
|
|
width: 100%;
|
|
max-height: 941px;
|
|
overflow: auto;
|
|
.title {
|
|
height: 26.14px;
|
|
padding: 0 2px;
|
|
font-size: 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
color: $primary-title-color;
|
|
cursor: pointer;
|
|
|
|
.icon-topOutline {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
font-size: 12px;
|
|
scale: 0.6;
|
|
position: relative;
|
|
top: -3px;
|
|
}
|
|
}
|
|
|
|
.item {
|
|
margin: 4px 0;
|
|
border-radius: 2px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #acc4d6;
|
|
line-height: 30px;
|
|
padding: 0 8px;
|
|
font-size: 14px;
|
|
background-color: #fff;
|
|
transition: background-color 0.3s, color 0.3s;
|
|
cursor: pointer;
|
|
&:hover,
|
|
&.selected {
|
|
background-color: #2f6b98;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|