lc_frontend/src/views/screen/components/RegionSelector.vue

<template>
  <div v-if="modelValue" class="region-mask" @click.self="close">
    <div class="region-dialog">
      <div class="region-header">
        <span>选择区域</span>
        <span class="close" @click="close">×</span>
      </div>
      <div class="region-body">
        <div
v-for="item in regions" :key="item.code" class="region-item" :class="{ active: item.name === modelSelected }"
          @click="select(item)">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RegionSelector',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    modelSelected: {
      type: String,
      default: ''
    },
    regions: {
      type: Array,
      default: () => [
        { name: '北京', code: '2345' },
        { name: '上海', code: '2346' },
        { name: '雄安', code: '2347' },
        { name: '南京', code: '2348' },
        { name: '江苏', code: '2349' },
        { name: '西安', code: '2350' },
        { name: '成都', code: '2351' },
        { name: '重庆', code: '2352' },
        { name: '广州', code: '2353' },
        { name: '深圳', code: '2354' },
        { name: '武汉', code: '2355' },
        { name: '杭州', code: '2356' },
        { name: '苏州', code: '2357' },
        { name: '天津', code: '2358' },
        { name: '郑州', code: '2359' },
        { name: '合肥', code: '2360' },
        { name: '青岛', code: '2361' },
        { name: '厦门', code: '2362' }
      ]
    }
  },
  emits: ['update:modelValue', 'update:modelSelected', 'change'],
  methods: {
    close () {
      this.$emit('update:modelValue', false)
    },
    select (item) {
      this.$emit('update:modelSelected', item.name)
      this.$emit('change', item)
      this.$emit('update:modelValue', false)
    }
  }
}
</script>

<style scoped lang="scss">
.region-mask {
  position: fixed;
  z-index: 2000;
  display: flex;
  background: rgb(0 0 0 / 35%);
  inset: 0;
  align-items: center;
  justify-content: center;
}

.region-dialog {
  width: 700px;
  color: #fff;
  background: #0d2253;
  border: 1px solid rgb(59 130 246 / 35%);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 35%);
}

.region-header {
  position: relative;
  display: flex;
  height: 48px;
  font-weight: 600;
  background: #0f2a65;
  border-bottom: 1px solid rgb(59 130 246 / 25%);
  align-items: center;
  justify-content: center;
}

.region-header .close {
  position: absolute;
  top: 50%;
  right: 16px;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.9;
  transform: translateY(-50%);
}

.region-body {
  display: grid;
  padding: 20px 24px 28px;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px 14px;
}


.region-item {
  display: flex;
  height: 40px;
  min-width: 0;
  padding: 0 8px;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  background: rgb(30 58 138 / 35%);
  border: 1px solid rgb(59 130 246 / 35%);
  border-radius: 6px;
  transition: all 0.2s ease;
  user-select: none;
  align-items: center;
  justify-content: center;
}

.region-item:hover {
  background: rgb(30 58 138 / 50%);
  border-color: rgb(59 130 246 / 60%);
}

.region-item.active {
  font-weight: 600;
  color: #0a0a0a;
  background: #38bdf8;
  border-color: #38bdf8;
}
</style>