乡村相册

2022-03-14 16:06:16 +08:00
parent 1e307dbb49
commit 39ec25b828
4 changed files with 520 additions and 6 deletions
--- a/src/saas/AppCountryAlbum/Photo.vue
+++ b/src/saas/AppCountryAlbum/Photo.vue
@@ -0,0 +1,90 @@
+<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>