zhaoma/src/components/TodoList.vue

<template>
  <ModalTransition class="todolist" :show="show">
    <div class="todolist-wrapper">
      <div class="btn-group">
        <div class="btn-share" :class="globalStore.inviteCount === globalStore.MAX_INVITE_DAILY ? 'has' : ''" @click="openHaibao($event)"></div>
        <!-- <div 
          class="btn-share" 
          :class="{'has': globalStore.inviteCount >= globalStore.MAX_INVITE_DAILY}"
          @click="globalStore.inviteCount < globalStore.MAX_INVITE_DAILY && openHaibao($event)">
        </div> -->
        <div class="btn-qiwei" :class="globalStore.followed_official && 'has'" @click="openQiwei($event)"></div>
      </div>
      <div class="close" @click="$emit('close')"></div>
    </div>
    <div class="fullsection" v-show="haibaoShow">
      <div class="haibao" :style="userhaibaoCover">
        <img :src="haibaoUrl" alt="">
        <div class="close" @click="haibaoShow = false"></div>
      </div>
    </div>

    <div class="fullsection" v-show="qiweiShow">
      <div class="qiwei">
        <img src="../assets/images/new/qiwei.webp" alt="">
        <div class="close" @click="qiweiShow = false"></div>
      </div>
    </div>
  </ModalTransition>
</template>

<script setup>
import { ref, computed } from "vue"
import { globalStore } from "@/globalstore";
import ModalTransition from "./ModalTransition.vue";
import globalToastEvent, { ToastType } from '../globalToastEvent';
const props = defineProps({
  show: false,
})

const emit = defineEmits(['close', 'open'])
const qiweiShow = ref(false)
const haibaoShow = ref(false)
const haibaoUrl = ref('')
const userHaibaoUrl = ref('')
const userhaibaoCover = computed(() => {
  return { backgroundImage: `url(${userHaibaoUrl.value})` }
})

const openHaibao = async (e) => {
  if (globalStore.inviteCount >= globalStore.MAX_INVITE_DAILY) {
    return;
  }
  globalToastEvent.emit(ToastType.SHOW_SHAREPAGE, true);
}

const openQiwei = (e) => {
  const target = e.currentTarget

  if (target.classList.contains("has")) {
    return
  }
  qiweiShow.value = true
}
</script>

<style scoped>
.home-wrapper {
  width: 100%;
  position: relative;
  min-height: -webkit-fill-available;
}

.home-wrapper img {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.scene-item {
  position: absolute;
  cursor: pointer;
  transition: all 0.4s ease;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid transparent;
  animation: float 4s ease-in-out infinite;
}

.scene-item:hover {
  transform: scale(1.05);
}

.scene-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.item-1 {
  width: 10vw;
  bottom: 54%;
  right: 3%;
  animation-delay: 0s;
}

.item-1 {
  width: 10vw;
  bottom: 54%;
  right: 3%;
  animation-delay: 0s;
}

.item-2 {
  width: 110px;
  bottom: 36%;
  right: 6%;
  animation-delay: 0s;
}

.item-3 {
  width: 110px;
  bottom: 25%;
  right: 6%;
  animation-delay: 0s;
}

.item-4 {
  width: 110px;
  bottom: 14%;
  right: 6%;
  animation-delay: 0s;
}

.qiwei {
  position: relative;
  width: 80.740741vw;
  /* height: 89.259259vw; */
}

.qiwei img {
  width: 100%;
  height: 100%;
  display: block;
}

.fullsection {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .7);
}

.haibao {
  position: relative;
  width: 65.37037vw;
  height: 119.444444vw;
  background-image: url("../assets/images/haibao-cover.webp");
  background-repeat: no-repeat;
  background-size: 100%;
}

.haibao img {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
}

.close {
  position: absolute;
  width: 11vw;
  height: 11vw;
  right: 3vw;
  top: -14vw;
  background-image: url("../assets/images/new/close-btn.webp");
  background-repeat: no-repeat;
  background-size: 100%;
}

.haibao .close {
  left: 50%;
  bottom: -5vw;
  top: initial;
  transform: translate3d(-50%, 0, 0);
}

.qiwei .close {
  right: 50%;
  top: 126vw;
  margin-right: -6vw;
}

.todolist-wrapper {
  position: relative;
  width: 100vw;
  height: 94vw;
  background-image: url("../assets/images/new/todo-bg.webp");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
}

.btn-group {
  position: absolute;
  right: 6vw;
  top: 35vw;
  width: 24.907407vw;
  height: 46vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.btn-group div {
  width: 24.907407vw;
  height: 10vw;
  background-repeat: no-repeat;
  background-size: 100%;
}

.btn-share {
  background-image: url("../assets/images/new/share-link.webp");
}

.btn-share.has {
  background-image: url("../assets/images/new/limit-btn.webp");
}

.btn-qiwei {
  background-image: url("../assets/images/new/add-wx.webp");
}

.btn-qiwei.has {
  background-image: url("../assets/images/new/btn-added.webp");
}

.btn-scan {
  background-image: url("../assets/images/scan-code.webp");
}

.btn-scan.has {
  background-image: url("../assets/images/new/limit-btn.webp");
}
</style>