<!-- * 投币弹框 --> <script setup lang="ts"> import { ref } from 'vue'; defineExpose({ openModel, }); const emit = defineEmits<{ (e: 'onOk', value: any): void; }>(); const show = ref(false); const amount = ref(1); const giveLike = ref(true); function openModel() { show.value = true; } function onClose() { show.value = false; } function onOk() { emit('onOk', amount); } </script> <template> <q-dialog v-model="show" persistent> <q-card style="width: 500px; max-width: 500px"> <q-card-section class="row items-center q-pb-none"> <q-space /> <q-btn icon="close" flat round dense v-close-popup @click="onClose" /> </q-card-section> <div class="amount-title row justify-center"> 给UP主投上<span class="amount-box">{{ amount }}</span >枚硬币 </div> <q-card-section style="padding-bottom: 8px"> <div class="content" style="width: 100%"> <div class="img-content" style="height: 300px; width: 100%"> <div class="img-cont-box"> <div class="img-main-box img-main-box-left" :class="[ amount === 1 ? 'img-main-box-active' : 'img-main-box-unactive', ]" @click="amount = 1" > <div class="background-left"></div> </div> </div> <div class="img-cont-box"> <div class="img-main-box img-main-box-right" :class="[ amount === 2 ? 'img-main-box-active' : 'img-main-box-unactive', ]" @click="amount = 2" > <div class="background-right"></div> </div> </div> </div> <div> <q-checkbox v-model="giveLike" label="同时点赞内容" /> </div> <div class="row justify-center"> <q-btn unelevated color="primary" label="确定" @click="onOk" /> </div> <div class="experience-box row justify-center"> 经验值+10(今日20/50) </div> </div> </q-card-section> </q-card> </q-dialog> </template> <style lang="scss" scoped> .content { // background-color: pink; } .amount-title { font-size: 16px; } .amount-box { color: $primary; font-size: 32px; margin: 0 4px; transform: translateY(-18px); } .img-content { display: grid; grid-template-columns: repeat(2, 1fr); } .img-cont-box { padding: 16px; } .img-main-box { border-radius: 8px; box-sizing: border-box; width: 100%; height: 100%; position: relative; > div { width: 100%; height: 100%; box-sizing: border-box; background-repeat: no-repeat; background-size: contain; background-position: center; } &::before { position: absolute; top: 12px; left: 15px; font-size: 14px; } &:hover { cursor: pointer; } } .img-main-box-active { border: 2px solid $primary; color: $primary; } .img-main-box-unactive { border: 2px dashed rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.2); > div { filter: grayscale(1); } &:hover { border: 2px dashed $primary; color: $primary; } } .img-main-box-left { &::before { content: '1硬币'; } } .background-left { background: url('../icons/one.svg'); } .img-main-box-right { &::before { content: '2硬币'; } } .background-right { background: url('../icons/two.svg'); } .experience-box { font-size: 12px; color: rgba(0, 0, 0, 0.5); margin-top: 6px; margin-bottom: 16px; } </style>