This commit is contained in:
yanran200730
2022-05-31 17:03:35 +08:00
parent b3e59fae03
commit f931c3eabb

View File

@@ -3,25 +3,26 @@
<div class="photo-wrapper">
<image mode="widthFix" :src="img" @click="isShow = true" />
</div>
<u-popup v-model="isShow" :mask-custom-style="{background: 'rgba(0, 0, 0, 0)'}" :closeable="false" border-radius="32" mode="bottom" @close="isShow = false, currIndex = -1">
<div class="photo-bottom">
<div class="top">
<h2>查看图片</h2>
<p>长按图片进行分享给他人</p>
<image @click="isShow = false, currIndex = -1" src="./images/down_boldw.png" />
<!-- <u-popup v-model="isShow" :mask="false" :closeable="false" border-radius="32" mode="bottom" @close="isShow = false, currIndex = -1">
</u-popup> -->
<div class="photo-bottom" :class="[isShow ? 'active' : '']">
<div class="top">
<h2>查看图片</h2>
<p>长按图片进行分享给他人</p>
<image @click="isShow = false, currIndex = -1" src="./images/down_boldw.png" />
</div>
<div class="btns">
<div class="btn-item" hover-class="bg-hover" @click="back">
<image src="./images/fanhui-black.png" />
<span>返回</span>
</div>
<div class="btns">
<div class="btn-item" hover-class="bg-hover" @click="back">
<image src="./images/fanhui-black.png" />
<span>返回</span>
</div>
<div class="btn-item" hover-class="bg-hover" @click="remove">
<image src="./images/remove-black.png" />
<span>删除</span>
</div>
<div class="btn-item" hover-class="bg-hover" @click="remove">
<image src="./images/remove-black.png" />
<span>删除</span>
</div>
</div>
</u-popup>
</div>
</div>
</template>
@@ -132,6 +133,20 @@
}
.photo-bottom {
position: fixed;
bottom: 0;
left: 0;
z-index: 11;
width: 100%;
transform: translateY(100%);
background: #fff;
border-radius: 32px 32px 0 0;
transition: all ease 0.4s;
&.active {
transform: translateY(0);
}
.top {
display: flex;
position: relative;