90 lines
1.6 KiB
Vue
90 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<div class="photo">
|
||
|
|
<image mode="aspectFit" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" />
|
||
|
|
<div class="photo-footer">
|
||
|
|
<div class="item" @click="back">
|
||
|
|
<image src="./images/fenxiang.png" />
|
||
|
|
<span>分享</span>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<image src="./images/xiazai.png" />
|
||
|
|
<span>下载</span>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<image src="./images/shanchu.png" />
|
||
|
|
<span>删除</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'Photo',
|
||
|
|
|
||
|
|
appName: '相片',
|
||
|
|
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
onLoad () {
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
back () {
|
||
|
|
uni.navigateBack({
|
||
|
|
delta: 1
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.photo {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
background: #000;
|
||
|
|
|
||
|
|
.photo-footer {
|
||
|
|
display: flex;
|
||
|
|
position: fixed;
|
||
|
|
align-items: center;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 1;
|
||
|
|
width: 100%;
|
||
|
|
height: 216px;
|
||
|
|
background: #1E1E21;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex: 1;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
font-size: 28px;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& > image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|