1

src/components/downloadImg/index.vue

@@ -0,0 +1,52 @@
+<script setup>
+defineProps({
+  type: {
+    type: String,
+    required: true,
+  },
+})
+
+const visible = defineModel({default: false})
+
+const options = {
+  ios: {label: 'iOS', img: `${window.config.assetsUrl}app/ios.png`},
+  android: {label: 'Android', img: `${window.config.assetsUrl}app/android.png`},
+}
+</script>
+
+<template>
+  <el-dialog v-model="visible" title="扫码下载" width="500px" :close-on-click-modal="true">
+    <div class="dialog-body flex j-c a-c">
+      <div class="download-option">
+        <img :src="options[type]?.img" :alt="type" />
+        <span class="label">{{ options[type]?.label }}</span>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.dialog-body {
+  gap: 40px;
+  padding: 20px 0;
+
+  .download-option {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    cursor: pointer;
+
+    img {
+      width: 140px;
+      height: 140px;
+      object-fit: contain;
+    }
+
+    .label {
+      font-size: 16px;
+      color: #333;
+    }
+  }
+}
+</style>