Vue realizes the component of ground glass background wall

Time:2020-5-23

effect

Vue realizes the component of ground glass background wall

Vue realizes the component of ground glass background wall

Vue realizes the component of ground glass background wall

code

<! -- background wall -- >
<template>
  <div class="user-info">
    <img :src="head_img" class="blur">
    <! -- User Image -- >
    <div class="cover">
      <van-image
        round
        width="80px"
        height="80px"
        :src="head_img"
        class="user-image"
      />
      <br>
      <div class="text-info">
        <! -- user nickname -- >
        <span class="user-name">
          {{user_name}}
          <img v-if="sex==1" style="width: 14px;margin-right: -14px;">
          <img v-if="sex==0" style="width: 14px;margin-right: -14px;">
        </span>
        <! -- follow information -- >
        <table class="user-follow" cellspacing="0" cellpadding="0" border="0">
          <tr>
            <td>{{follow_ Num}} attention</td>
            <td>{{fans_ Num}} fans</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;
  }
  /*Translucent Black Mask*/
  .user-info .cover{
    width:100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    position: relative;
  }
</style>

Recommended Today

Configure Apache to support PHP in the Apache main configuration file httpd.conf Include custom profile in

In Apache’s main configuration file / conf/ http.conf Add at the bottom Include “D:workspace_phpapache-php.conf” The file path can be any In D: workspace_ Create under PHP file apache- php.conf file Its specific content is [html] view plain copy PHP-Module setup LoadFile “D:/xampp/php/php5ts.dll” LoadModule php5_module “D:/xampp/php/php5apache2_2.dll” <FilesMatch “.php$”> SetHandler application/x-httpd-php </FilesMatch> <FilesMatch “.phps$”> SetHandler application/x-httpd-php-source </FilesMatch> […]