<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>