uniapp全屏幕高斯模糊背景图

javascript 复制代码
<template>
  <view class="page-box">
    <image
      class="page-img"
      :src=url
    >
      <view class="conent">
        <view class="phone">
          <image
            class="img"
            :src=url
            @click="openBigImage(url)"
          ></image>
          <view class="box">
            <image class="ewm"></image>
            <view class="text">扫一扫识别二维码,体验"xxx",即可免费获得一张自家萌宠照片。</view>
          </view>
        </view>
      </view>
      <!-- 底部 -->
      <view class="foot">
        <image
          class="close"
          src="../../../../static/img/close.png"
        ></image>
        <view class="title">分享至</view>
        <view>
          <view class="share-box">
            <view class="left">
              <view class="icon">
                <image
                  class="img1"
                  src="http://172.16.0.85:9991/profile/wechatApplet/wx.png"
                ></image>
              </view>
              <view class="frie">分享给微信好友</view>
            </view>
            <view class="left">
              <view class="icon">
                <image
                  class="img2"
                  src="http://172.16.0.85:9991/profile/wechatApplet/pyquan.png"
                ></image>
              </view>
              <view class="frie">分享到朋友圈</view>
            </view>
            <view class="left">
              <view class="icon">
                <image
                  class="img3"
                  src="http://172.16.0.85:9991/profile/wechatApplet/baocun.png"
                ></image>
              </view>
              <view class="frie">保存到手机</view>
            </view>
          </view>
        </view>
      </view>
    </image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: ''
    };
  },
  onLoad(e) {
    this.url = e.img
  },
  methods: {
    openBigImage(img) {
      let imgsArray = [];
      imgsArray[0] = img
      uni.previewImage({
        current: 0,
        urls: imgsArray
      });
    },
  },
}
</script>

<style scoped lang="scss">
.page-box {
  background-color: #f2f2f2;
  width: 100%;
  min-height: 100vh;
  display: flex;
  .page-img {
    min-height: 100vh;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    // /高斯模糊,值越大越模糊*/
    filter: blur(100rpx);
  }
  .conent {
    box-sizing: border-box;
    padding-top: 376rpx;
    margin: 0 auto;
    z-index: 99999;
    .img {
      display: inline-block;
      width: 566rpx;
      height: 393rpx;
      border-radius: 30rpx 30rpx 30rpx 30rpx;
      margin: 30rpx;
    }
    .phone {
      width: 626rpx;
      height: 592rpx;
      background: #ffffff;
      border-radius: 30rpx 30rpx 30rpx 30rpx;
      opacity: 1;
    }
    .box {
      display: flex;
      box-sizing: border-box;
      padding: 0 30rpx;
      .ewm {
        display: inline-block;
        width: 108rpx;
        height: 108rpx;
        background-color: pink;
        margin-right: 40rpx;
      }
      .text {
        width: 410rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #333333;
        line-height: 37rpx;
      }
    }
  }
  .foot {
    position: fixed;
    bottom: 0rpx;
    left: 0rpx;
    width: 750rpx;
    height: 300rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .close {
      display: inline-block;
      width: 24rpx;
      height: 24rpx;
      margin: 24rpx 24rpx 0 704rpx;
    }
    .title {
      height: 32rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: #333333;
      line-height: 32rpx;
      text-align: center;
    }

    .share-box {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 38rpx 245rpx 0 70rpx;
      .left {
        .icon {
          width: 100rpx;
          height: 100rpx;
          background: #ffffff;
          box-shadow: 0rpx 4rpx 9rpx 0rpx rgba(0, 0, 0, 0.05);
          border-radius: 15rpx 15rpx 15rpx 15rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          .img1 {
            display: inline-block;
            width: 62rpx;
            height: 50rpx;
          }
          .img2 {
            display: inline-block;
            width: 50rpx;
            height: 50rpx;
          }
          .img3 {
            display: inline-block;
            width: 50rpx;
            height: 44rpx;
          }
        }
        .frie {
          width: 177rpx;
          height: 55rpx;
          font-size: 18rpx;
          font-weight: 400;
          color: #333333;
          line-height: 21rpx;
          margin-top: 16rpx;
        }
      }
    }
  }
}
</style>
相关推荐
慧一居士26 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead28 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_8 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js