• zhangsan's avatar
    1 · d18e56f5
    zhangsan authored
    d18e56f5
App.vue 3.47 KB
<template>
  <div class="app">
    <router-view v-slot="{ Component }">
      <keep-alive :include="['home', 'category', 'user']">
        <component :is="Component" />
      </keep-alive>
    </router-view>
    <page-loading />
    <van-popup v-model:show="show" :style="{ padding: '20px 0 50px' }">
      <img class="yjbg123" src="@/static/yj.png" alt="">
      <div class="yjwarp">
        <var-button class="varbtn11" @click="eventBus.popupVisible = false" block>我知道了</var-button>
        <var-button class="varbtn11" @click="gotoyj" block>去填写邮寄信息</var-button>
      </div>
    </van-popup>
    <van-popup v-model:show="show1" :style="{ padding: '20px 0 50px',background:'transparent' }">
     <div class="yjbg34">
      <img src="@/static/active34/1.png" alt="">
      <div class="yjwarp">
        <img src="@/static/active34/2.png" @click="eventBus.popupVisible1 = false" alt="">
        <img src="@/static/active34/3.png" @click="gotoyj" alt="">
      </div>
     </div>
    </van-popup>
  </div>
</template>

<script lang="ts" setup>
import eventBus from '@/utils/eventBus';
import PageLoading from '@/components/PageLoading.vue'
import { useRoute,useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
const gotoyj = ()=>{
  eventBus.popupVisible = false
  eventBus.popupVisible1 = false
  router.push('/kpsl/cardsl')
}
const show = computed(()=>eventBus.popupVisible && route?.path != '/kpsl/cardsl')
const show1 = computed(()=>eventBus.popupVisible1 && (!['/kpsl/cardsl','/kpsl/cardActive'].includes(route?.path)))
</script>

<style lang="scss">
.yjbg123{
  width: 100%;
  height: auto;
}
.yjwarp{
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  .varbtn11{
    width: 45%;
    background: #3a9256;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
  }
}
.yjbg34{
  position: relative;
  img{
    width: 100%;
    height: auto;
  }
  .yjwarp{
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    img{
      width: 45%;
    }
  }
}
// <div class="yjbg34">
//       <img src="@/static/active34/1.png" alt="">
//       <div class="yjwarp">
//         <var-button class="varbtn11" @click="eventBus.popupVisible = false" block>我知道了</var-button>
//         <var-button class="varbtn11" @click="gotoyj" block>去填写邮寄信息</var-button>
//       </div>
//      </div>
/* 移动端适配 */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
*{
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
}

.app {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

/* 适配刘海屏 */
@supports (padding-top: constant(safe-area-inset-top)) {
  .app {
    padding-top: constant(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
  }
}

@supports (padding-top: env(safe-area-inset-top)) {
  .app {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>