uniapp全屏幕高斯模糊背景图-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp全屏幕高斯模糊背景图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uniapp全屏幕高斯模糊背景图,javascript,前端,vue,vue.js,前端框架文章来源地址https://www.toymoban.com/news/detail-755272.html

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

到了这里，关于uniapp全屏幕高斯模糊背景图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！