concrete-transportation-uniapp-20250821/components/show-example.vue

<template>
	<view class="b-relative">
		<view class="mask" :class="{ 'active':!!show }" @click="close" v-if="!!show"></view>
		<view class="iu b-relative" :class="{ 'active':!!show }">
			<view class="it">查看示例</view>
			<view class="itc" @click="close">关闭</view>
			<view class="ii" v-if="!url"></view>
			<view class="ii" v-if="url">
				<image class="ii" :src="url" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				
			}
		},
		methods: {
			close(){
				this.$emit("close")
			}
		},
		props: {
			show: {
				type: Boolean,
				required: false,
				default: false
			},
			url: {
				type: String,
				required: true
			}
		}
	}
</script>

<style>
	.mask{
		content: ' ';
		width: 100vw;
		height: 100vh;
		background-color: rgba(51, 51, 51, 0.8);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		opacity: 0;
	}
	.mask.active{
		opacity: 1;
	}
	.iu{
		width: calc(100vw - 88rpx);
		min-height: 342rpx;
		padding: 44rpx;
		background-color: #FFF;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1000;
		transform: translateY(100%);
		transition: .2s ease-in;
	}
	.iu.active{
		transform: translateY(0);
	}
	.it{
		font-size: 32rpx;
		height: 72rpx;
		line-height: 72rpx;
		color: #111;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
	}
	.itc{
		font-size: 28rpx;
		line-height: 72rpx;
		color: #888;
		
		position: absolute;
		right: 44rpx;
		top: 28rpx;
	}
	.ii{
		width: 670rpx;
		min-height: 342rpx;
		border-radius: 16rpx;
	}
	.ic{
		width: 110rpx;
		height: 110rpx;
		position: absolute;
		top: calc(50% - 55rpx);
		left: calc(50% - 55rpx);
	}
</style>