iview-- mpvue 高斯模糊背景图

<template>
  <div id="scriptDetail">
    <!-- 背景 -->
    <div class="bg" :style="{background : url}"></div>
    <!-- 遮罩 -->
    <div class="mask"></div>
    <div class="mask-white" :style="{top:topH}"></div>
    <div id="navigateBar" :style="{marginTop: ktxStatusHeightRpx , height:navigationHeightRpx , lineHeight:navigationHeightRpx}">
      <van-icon @click="goBack()" name="arrow-left" />
    </div>
    <div>
      <div><img class="drama_img" :src="src" alt=""></div>
      <div>
        <div class="drama-main">
          <div class="drama-title">孤城翁</div>
          <div class="drama-tag flex">
            <div class="tag">民国</div>
            <div class="tag">其他</div>
            <div class="tag">欢乐</div>
            <div class="tag">变格</div>
            <div class="tag">进阶</div>
            <div class="tag">对抗</div>
            <div class="tag">盒装</div>
            <div class="tag">进阶</div>
            <div class="tag">对抗</div>
            <div class="tag">盒装</div>
            <div class="tag">7人</div>
          </div>
          <div class="drama-time">上架时间 : <span>2019-07-28</span></div>
          <div class="drama-person flex">
            <div class="tag-man">♂5</div>
            <div class="tag-woman">♀2</div>
          </div>
        </div>
        <div class="price-box">￥34/人</div>
      </div>
    </div>
    <div>
      <div class="card-title">剧本介绍</div>
      <div v-bind:class="{ expansion : active }" class="card-mid">{{value}}</div>
      <div class="active" :class="{active_show:active}" @click="active = !active">
        <van-icon v-if="active" name="arrow-down" />
        <van-icon v-else name="arrow-up" />
        {{active_text}}
      </div>
    </div>
    <div>
      <div class="card-title">剧本人物</div>
      <div class="maid-out">
          <div class="maid-box">
              <div class="maid-box1" v-for="(item,index) in script" :key="index">
                <div class="">
                  <img @click="preImage(item.avatar)" class="img-script" :src="item.avatar" alt=""/>
                </div>
              </div>
          </div>
      </div>
    </div>
    <div>
      <div class="card-title">近期约局</div>
      <div>
        <organizeCard></organizeCard>
        <organizeCard></organizeCard>
        <organizeCard></organizeCard>
      </div>
    </div>
  </div>
</template>

<script>
  import organizeCard from '@/components/organize/card.vue'
export default {
  data () {
    return {
      ktxStatusHeight:null,
      navigationHeight:null,
      height:null,
      src:'https://imgsa.baidu.com/forum/w%3D580/sign=e57f7a5f10178a82ce3c7fa8c602737f/b79b2a65034f78f0906f1a6077310a55b2191cb0.jpg',
      value:`
      张云龙：研发查空教室爬虫主体功能，设计分布式redis缓存
      赵化成：集成jwt到工大易查询，增强登录安全
      陈卢坤：开发查空教室前端，及后台管理后端主体功能
      黎易荣：请假程序后台搭建
      吴政阳：tensorflow服务器集群搭建，数据库安全模块
      葛颂： 数据库读写分离实现，远程缓存搭建
      刘梧桐： 请假程序流程化设计，数据库设计，数据库集群搭建
      李立瑞： 请假程序页面设计与逻辑控制
      王太宇： 请假程序页面设计
      苏大富： 构建请假程序数据库，请假程序服务器搭建，git服务器搭建
      `,
    active:true,
    script:[
      {
        id:123,
        avatar:"https://i.loli.net/2017/08/21/599a521472424.jpg",
        name:"小叶",
      } , {
        id:12,
        avatar:"https://img.yzcdn.cn/vant/leaf.jpg",
        name:"小叶",
      } , {
        id:13453,
        avatar:"https://img.yzcdn.cn/vant/leaf.jpg",
        name:"小叶",
      } , {
        id:16783,
        avatar:"https://img.yzcdn.cn/vant/leaf.jpg",
        name:"小叶",
      }
    ]
    }
  },
  computed:{
    url:function(){
      return 'url("'+this.src+'") no-repeat'
    },
    ktxStatusHeightRpx:function(){
      return this.ktxStatusHeight+'rpx';
    },
    navigationHeightRpx:function(){
      return this.navigationHeight+'rpx';
    },
    topH:function(){
      let temp = 0;
      temp = this.navigationHeight+this.ktxStatusHeight+220;
      return temp+'rpx';
    },
    active_text:function(){
      if(this.active){
        return "展开";
      }else{
        return "收起";
      }
    }
  },
  onLoad:function(){
    let systemInfo = wx.getSystemInfoSync()
    // px转换到rpx的比例
    let pxToRpxScale = 750 / systemInfo.windowWidth;
    // 状态栏的高度
    let ktxStatusHeight = systemInfo.statusBarHeight * pxToRpxScale
    // 导航栏的高度
    let navigationHeight = 44 * pxToRpxScale
    this.ktxStatusHeight = ktxStatusHeight;
    this.navigationHeight = navigationHeight;
  },
  components:{
    organizeCard
  },
  methods: {
    goBack(){
      mpvue.navigateBack();
    },
    preImage(url){
      let that = this;
      let urls = new Array();
      this.script.forEach(item => {
        urls.push(item.avatar);
      })
      mpvue.previewImage({
        current: url,
        urls:urls
      })
    }
  }
}
</script>

<style scoped>
  #navigateBar{
    color: #FFFFFF;
    font-size: 20px;
    margin-left: 20rpx;
  }
  .drama_img{
    width: 180rpx;
    height: 250rpx;
    border-radius: 10rpx;
  }
  .flex{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .drama-main{
    height: 220rpx;
    max-height: 220rpx;
    overflow: hidden;
    margin-left: 20rpx;
    letter-spacing: 4rpx;
    color: white;
    font-size: 12px;
  }
  .drama-main .drama-title{
    font-size: 18px;
    font-weight: 400;
  }
  .drama-main .drama-tag{
    margin-top: 10rpx;
  }
  .drama-main .drama-time{
    margin: 10rpx 0;
  }
  .drama-main .drama-tag .tag{
    margin-right: 10rpx;
  }
  .tag-man{
    letter-spacing: 4rpx;
    text-align: center;
    min-width: 40rpx;
    background-color: #877ff7;
    margin-right: 10rpx;
    padding: 1rpx 10rpx;
    border-radius: 200rpx;
  }
  .tag-woman{
    letter-spacing: 5rpx;
    text-align: center;
    min-width: 40rpx;
    background-color: #f78abb;
    margin-right: 10rpx;
    padding: 1rpx 10rpx;
    border-radius: 200rpx;
  }
  .price-box{
    height: 50rpx;
    line-height: 50rpx;
    margin-left: 20rpx;
    font-size: 14px;
    font-weight: 500;
    color: black;
  }
  .expansion{
    width: 100%;
    overflow: hidden;
    -webkit-line-clamp: 5;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .card-title{
    margin-bottom: 10rpx;
    font-size: 16px;
    font-weight: 550;
  }
  .card-mid{
    /* white-space:pre-line; */
    letter-spacing: 2rpx;
    line-height: 20px;
    font-size: 16px;
    color: #8B8B8B;
  }
  .active{
    width: 100%;
    text-align: center;
    height: 60rpx;
    line-height: 60rpx;
    color: #8B8B8B;
    font-size: 16px;
  }
  .active_show{
    height: 80rpx;
    line-height: 120rpx;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 98%, #FFFFFF 100%);
    transform: translateY(-40rpx);
  }
  .maid-out{
      overflow: hidden;
  }
  .maid-box{
      background: #eee;
      padding: 10px 0;
      white-space: nowrap;
      background-color: white;
      overflow-y:auto;
  }
  .maid-box1{
      margin-right: 35rpx;
      display: inline-block;
  }
  .img-maid{
    width: 200rpx;
    height: 200rpx;
    border-radius: 12rpx;
    object-fit: cover;
  }
  .img-script{
    width: 180rpx;
    height: 250rpx;
    border-radius: 12rpx;
    object-fit: cover;
  }
  ::-webkit-scrollbar{
    display:none;/*ChromeSafari*/
  }
  /* 背景和遮罩 */
  .bg{
      position: absolute;
      top:-60%;
      left:-20%;
      z-index: -3;
      height: 130%;
      width: 130%;
      background-size: cover;
      filter: blur(10px);
  }
  .mask{
    position: absolute;
    left: 0;
    top: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.35);
  }
  .mask-white{
    position: absolute;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 25rpx;
    background: white;
  }

</style>