changshuBWG/src/components/ww-card/index.vue

<template>
  <div class="ww-layout">
    <p class="ph">NO.{{data.num}}</p>
    <p>点赞数：{{data.zan}}</p>
    <div class="ww-detail">
      <p class="theme-color1">{{data.sub1}}</p>
      <p class="theme-color1">{{data.sub2}}</p>
    </div>
    <p class="theme-color1">{{data.name}}</p>
    <div class="img" :style="{backgroundImage: `url(${data.img})`}"></div>
  </div>
</template>
<script>
export default {
  props: ['data']
}
</script>
<style scoped>
.ww-layout{
  width:100%;
  height:200px;
  background:rgba(255,255,255,0.05);
  border-radius:3px;
  position: relative;
  overflow: hidden;
  padding: 1rem;
}

.ww-layout .img{
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  height: 200px;
  background-image: url(https://show.4dage.com/3D/2018/model/SD/images/s02.jpg);
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
}

.ph{
  color:#532f1c;
  font-size: 32px;
  font-weight: bold;
}
.ww-detail{
  margin: 25px 0;
}

.ww-detail p{
  margin-bottom: 4px;
}

p{
  margin-bottom: 12px;
}

</style>