没有显示瀑布的效果

[mahongbo79]

<template>
  <div class="bg">
    <div class="header">
      <!-- header站位 -->
    </div>

    <div class="banner">
      {{ $t("home.Activities") }}
    </div>

    <Waterfall  :list="list">
      <template #item="{ item, url, index }">
        <div class="card">
          <LazyImg class="card_img" :url="url" />
          <p class="text">这是内容</p>
        </div>
      </template>
    </Waterfall>

  </div>
</template>

<script>
import { LazyImg, Waterfall } from 'vue-waterfall-plugin'
import 'vue-waterfall-plugin/dist/style.css'

export default {
  data() {
    return {
      list: [
      {
        "src": "./1.jpg",
      },
      {
        "src": "./icn-load.png",
      },
      {
        "src": "./icn-pople.png",
      },
      {
        "src": "./1.jpg",
      },
      {
        "src": "./1.jpg",
      },
      {
        "src": "./icn-eye.png",
      },
      {
        "src": "./icn-eye.png",
      },
      {
        "src": "./icn-eye.png",
      },
      {
        "src": "./icn-eye.png",
      },
      {
        "src": "./icn-eye.png",
      },
      {
        "src": "./icn-eye.png",
      },
      {
        "src": "./icn-eye.png",
      },
                   
      ]
    };
  },
  components: { LazyImg, Waterfall }, // 组件列表
}
</script>


<style lang="scss" scoped>
.bg {
  background-color: #ffffff;
  .header {
    width: 100%;
    height: 0.64rem;
    background: #1c2532;
  }

  .banner {
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 62px;
    background: url("../../assets/images/toolplatforms/banner.png") no-repeat;
    // background-size: contain;
    background-size: 100%;
    overflow: hidden;
    height: 300px;
  }

  .waterfall-list {
    margin: 0 auto;
    width: 70%;
    position: relative;
    height: 700px;

  }

  .card_img{
    border-radius: 5px;
  }



}
</style>

[heikaimu]

你检查下报错或者样式什么的吧，你这样我也不知道原因

[mahongbo79]

不好意思，确实没有报错，才上来求教的

[mahongbo79]

显示这个样子，检查了好几遍，代码应该没有什么问题

[heikaimu]

你这个图片不都是方形的吗？这不就是正常显示的结果？
你要换不同比例的图才看得出效果啊

[mahongbo79]

哦，不好意思，我理解错了。换成别的图，就OK了