talk_appAmin/pages/signln/exdetail.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>