InsertCoin.vue

<!--
 * 投币弹框
-->
<script setup lang="ts">
import { ref } from 'vue';

defineExpose({
  openModel,
});

const show = ref(false);
const amount = ref(1);
const giveLike = ref(true);

function openModel() {
  show.value = true;
}
function onClose() {
  show.value = false;
}
</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%">1</div>
          <div>
            <q-checkbox v-model="giveLike" label="同时点赞内容" />
          </div>
          <div class="row justify-center">
            <q-btn unelevated color="primary" label="确定" />
          </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 {
  //   background-color: bisque;
}
.experience-box {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  margin-top: 6px;
  margin-bottom: 16px;
}
</style>