<template> <view> <!-- 弹窗 --> <view class="bgbox" @click="getClose" v-if="type"></view> <!-- 提示 --> <view class="tips" v-if="type==1"> <image :src="bgimg" class="bgimg"></image> <view class="tipa"> <view class="tit mb12">温馨提示</view> <view class="txt">您当前已有<text>1</text>条预约申请</view> <view class="txt">可前往查看详情</view> <view class="flexcj mt16"> <view class="tbtn btn1" @click="getClose">查看详情</view> <view class="tbtn btn2" @click="getClose">我知道了</view> </view> </view> </view> </view> </template> <script> export default{ props:{ type: { type: Number, default () { return 0 } }, }, watch:{ }, data(){ return{ // type:0, bgimg:require("@/static/images/order/come/ytbg.png"), } }, mounted() { }, methods:{ getClose(){ this.$emit("getClose") }, } } </script> <style lang="scss" scoped> // 公共 // end .tips{ position: fixed;left: 100rpx;right: 100rpx;height: 494rpx;top: 50%;margin-top: -280rpx;border-radius: 14rpx;z-index: 10;background: #FEFEFE; padding-bottom: 36rpx;box-sizing: border-box; .bgimg{width: 100%;height: 204rpx;} .tipa{padding:4rpx 40rpx 0; .tit{font-size: 30rpx;font-weight: bold;color: #000000;text-align: center;} .txt{font-size: 30rpx;font-weight: 500;color: #666666;text-align: center; text{color: $com-cd3;padding: 0 4rpx;} } .tbtn{text-align: center;font-size: 30rpx;font-weight: 500;flex:0 0 auto;width: 214rpx;height: 70rpx;border-radius: 35rpx;line-height: 70rpx; &.btn1{color: #666666;;border: 2rpx solid #E6E6E6;} &.btn2{color: $com-cd3;border: 1px solid $com-cd3;} } } } </style>