117 lines
2.5 KiB
Vue
117 lines
2.5 KiB
Vue
<!-- 首页优惠券弹窗 -->
|
||
<template>
|
||
<up-popup :show="show" bgColor="transparent" mode="center" @close="close">
|
||
<view class="container">
|
||
<view class="content">
|
||
<image class="bg" :src="bgUrl" mode="widthFix"></image>
|
||
<view class="info">
|
||
<view class="u-flex u-row-center">
|
||
<image
|
||
:show-menu-by-longpress="true"
|
||
:src="code"
|
||
style="height: 240rpx"
|
||
mode="heightFix"
|
||
></image>
|
||
</view>
|
||
<view
|
||
class="color-999 font-12 text-center u-m-t-10"
|
||
style="line-height: 36rpx"
|
||
>长按识别关注，更多优惠不能错过</view
|
||
>
|
||
</view>
|
||
<view class="close" @click="close">
|
||
<up-icon name="close-circle" size="34" color="#fff"></up-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</up-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
import _ from "lodash";
|
||
import dayjs from "dayjs";
|
||
import { onMounted, ref } from "vue";
|
||
|
||
const bgUrl = ref(
|
||
"https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/41239c8852874aa39d1f106e45456e10.png"
|
||
);
|
||
|
||
const show = ref(false);
|
||
const code = ref(
|
||
"https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240408/4d6e818a01f145a898d8c2368f4b5ad1.jpg"
|
||
);
|
||
|
||
|
||
const emit=defineEmits(['close'])
|
||
|
||
function close() {
|
||
show.value = false;
|
||
emit('close');
|
||
}
|
||
onMounted(() => {
|
||
show.value = true;
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.u-row-center {
|
||
justify-content: center;
|
||
}
|
||
.container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 54rpx;
|
||
.content {
|
||
width: 100%;
|
||
position: relative;
|
||
.close {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: -100rpx;
|
||
transform: translateX(-50%);
|
||
}
|
||
.bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.info {
|
||
position: absolute;
|
||
bottom: 86rpx;
|
||
left: 60rpx;
|
||
right: 60rpx;
|
||
}
|
||
.btn-wrap {
|
||
width: 60%;
|
||
position: absolute;
|
||
left: 20%;
|
||
&.btn-wrap1 {
|
||
bottom: 74upx;
|
||
}
|
||
&.btn-wrap2 {
|
||
bottom: 74upx;
|
||
}
|
||
&.btn-wrap3 {
|
||
bottom: 38upx;
|
||
}
|
||
.btn-img {
|
||
width: 100%;
|
||
}
|
||
.t {
|
||
font-size: 42upx;
|
||
font-weight: bold;
|
||
color: #b43a14;
|
||
position: absolute;
|
||
top: 44%;
|
||
left: 54%;
|
||
white-space: nowrap;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|