127 lines
2.2 KiB
Vue
127 lines
2.2 KiB
Vue
<!-- 兑换商城详情 -->
|
|
<template>
|
|
<view class="uninavbar">
|
|
<image src="../../static/images/sign/return.png"></image>
|
|
</view>
|
|
<view>
|
|
<image :src="images"></image>
|
|
</view>
|
|
|
|
<view class="but" @click="butOn()">
|
|
<text>立即兑换</text>
|
|
</view>
|
|
|
|
<uni-popup ref="popup" border-radius="32rpx 32rpx 0 0" background-color="#ffffff">
|
|
<view class="uni-popup-view">
|
|
<view class="uni-top">
|
|
<text class="uni-top-text">确认兑换</text>
|
|
<view style="float: right;margin-right: 32rpx;vertical-align:middle;">
|
|
<image style="width: 32rpx;height: 32rpx;" src="../../static/images/sign/关闭.png"></image>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view>
|
|
<view>
|
|
<text></text>
|
|
<image src=""></image>
|
|
<text></text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</uni-popup>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
}
|
|
from "vue"
|
|
const popup = ref(null);
|
|
const images = ref("https://cbu01.alicdn.com/img/ibank/2018/374/990/9121099473_1558693147.jpg");
|
|
|
|
function butOn() {
|
|
popup.value.open('bottom');
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.uninavbar {
|
|
position: absolute;
|
|
z-index: 9999;
|
|
top: 110rpx;
|
|
left: 32rpx;
|
|
}
|
|
|
|
.uninavbar>image {
|
|
width: 31rpx;
|
|
height: 44rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
view>image {
|
|
width: 750rpx;
|
|
height: 500rpx;
|
|
}
|
|
|
|
.but {
|
|
width: 686rpx;
|
|
height: 88rpx;
|
|
border-radius: 44rpx 44rpx 44rpx 44rpx;
|
|
background: linear-gradient(-90deg, #c9f6f5, #f7f8e3);
|
|
}
|
|
|
|
.but>text {
|
|
font-weight: Regular;
|
|
width: 131rpx;
|
|
height: 33rpx;
|
|
font-size: 32rpx;
|
|
text-align: left;
|
|
color: #000000;
|
|
display: block;
|
|
margin: auto;
|
|
line-height: 88rpx;
|
|
}
|
|
|
|
.bot-bot {
|
|
width: 750rpx;
|
|
height: 1000rpx;
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
/* background: #ffffff; */
|
|
background-color: #000000;
|
|
position: absolute;
|
|
bottom: 40rpx;
|
|
left: 0rpx;
|
|
transition: bottom 5s;
|
|
/* Slide in effect */
|
|
}
|
|
|
|
.buts {
|
|
position: absolute;
|
|
bottom: 91rpx;
|
|
}
|
|
|
|
.uni-popup-view{
|
|
position: relative;
|
|
left: 0rpx;
|
|
height: 70vh;
|
|
width: 750rpx;
|
|
margin-top: 31rpx;
|
|
}
|
|
.uni-top{
|
|
display: flex;
|
|
}
|
|
.uni-top-text {
|
|
font-weight: Regular;
|
|
width: 124rpx;
|
|
height: 31rpx;
|
|
font-size: 30rpx;
|
|
text-align: left;
|
|
color: #000000;
|
|
display: block;
|
|
margin: auto;
|
|
line-height: 31rpx;
|
|
}
|
|
</style> |