vue实现毛玻璃背景墙组件

秦羽 2020-07-11 PM 867℃ 0条

Vue封装的毛玻璃背景墙效果组件

- 效果

![d1.png](https://www.qinyu.cc/usr/uploads/2020/07/2072301587.png)

![d2.png](https://www.qinyu.cc/usr/uploads/2020/07/457915400.png)

![d3.png](https://www.qinyu.cc/usr/uploads/2020/07/32766969.png)

- 代码

```html

<template>
  <div class="user-info">
    <img :src="head_img" class="blur">
    
    <div class="cover">
      <van-image
        round
        width="80px"
        height="80px"
        :src="head_img"
        class="user-image"
      />
      <br>
      <div class="text-info">
        
        <span class="user-name">
          {{user_name}}
          <img v-if="sex==1" src="@/assets/man.png" style="width: 14px;margin-right: -14px;">
          <img v-if="sex==0" src="@/assets/women.png" style="width: 14px;margin-right: -14px;">
        </span>
        
        <table class="user-follow" cellspacing="0" cellpadding="0" border="0">
          <tr>
            <td>{{follow_num}} 关注</td>
            <td>{{fans_num}} 粉丝</td>
          </tr>
        </table>
      </div>
    </div>

</div>
</template>
<script>
  export default{
    props:{
      user_name:{
        default:''
      },
      follow_num:{
        default:0
      },
      fans_num:{
        default:0,
      },
      head_img:{
        default:''
      },
      sex:{
        default:-1
      },
    },
    data(){
      return{

}
    }
  }
</script>
<style scoped>
  .user-info{
    position: relative;
    height: 200px;
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
  }
  .user-image{
    vertical-align: middle;
    border: 2px solid #ffffff;
    z-index: 100;
    margin-top: 30px;
  }
  .blur{
    position: absolute;
    top:-5%;
    left: -5%;
    right: -5%;
    width:110%;
    height: 110%;
    object-fit:cover;
    -webkit-filter: blur(10px); /* Chrome, Opera */
  }
  .user-info .text-info{
    position: relative;
    margin-top: 10px;
  }
  .user-info .user-name{
    color: #ffffff;
    font-size: 16px;
    margin: 5px;
    display: block;
    font-weight: 700;
  }
  .user-info .user-follow{
    font-size: 14px;
    width: 60%;
    margin-left: 20%;
    height: 30px;
    line-height: 30px;
    color: #f5f5f5;
  }
  /*半透明黑色蒙版*/
  .user-info .cover{
    width:100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    position: relative;
  }
</style>

```

标签: vue, 毛玻璃, 背景墙

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://www.qinyu.cc/archives/54.html

上一篇 mysql备份与恢复所有数据库

下一篇利用Github的Actions实现Vue项目自动打包

vue实现毛玻璃背景墙组件

评论啦~

栏目分类

标签云

友情链接申请

vue实现毛玻璃背景墙组件

 评论啦~

 栏目分类

标签云

友情链接申请

评论啦~

栏目分类

标签云

友情链接申请