53 lines
1.0 KiB
Vue
53 lines
1.0 KiB
Vue
<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>
|