下面的代码是AI给我生成的，感觉还行（尤其是那个小小的效果）

效果图：

image.png

源代码：

<template>
  <view v-if="show" class="lang-modal">
    <view class="lang-modal-mask" @click="handleClose"/>
    <view class="lang-modal-content">
      <view class="lang-title">تىل تاللاش</view>
      <view 
        class="lang-item" 
        :class="{'active': locale === 'ug'}"
        @click="handleSelect('ug')"
      >
        <text>ئۇيغۇرچە</text>
        <text v-if="locale === 'ug'" class="check-icon">✓</text>
      </view>
      <view 
        class="lang-item" 
        :class="{'active': locale === 'zh'}"
        @click="handleSelect('zh')"
      >
        <text>简体中文</text>
        <text v-if="locale === 'zh'" class="check-icon">✓</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapState } from 'vuex'

export default Vue.extend({
  name: 'NurLangModal',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState(['locale'])
  },
  methods: {
    handleSelect(lang: string) {
      this.$store.dispatch('setLang', lang)
      this.$emit('update:show', false)
    },
    handleClose() {
      this.$emit('update:show', false)
    }
  }
})
</script>

<style lang="scss" scoped>
.lang-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;

  &-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    animation: fadeIn 0.2s ease-out;
  }

  &-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 600rpx;
    background: #fff;
    border-radius: 24rpx;
    overflow: hidden;
    animation: slideIn 0.3s ease-out;
  }

  .lang-title {
    text-align: center;
    font-size: 32rpx;
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;
  }

  .lang-item {
    padding: 30rpx;
    text-align: center;
    font-size: 28rpx;
    border-bottom: 1rpx solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    
    &.active {
      color: $u-primary;
      background: #f8f8f8;
    }
    
    &:active {
      background: #f0f0f0;
    }

    .check-icon {
      margin-left: 10rpx;
    }
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from {
    transform: translate(-50%, -40%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
</style>

使用方式：

<nur-lang-modal :show.sync="showLanSelectModal"/>