init

src/views/screen/components/RegionSelector.vue

@@ -0,0 +1,148 @@
+<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>