You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
1.6 KiB
102 lines
1.6 KiB
<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>
|