新增联动场景

ZZJ

2022-06-23 f7f0e44c4be8eb0e77fd310296c3b43bde21e4f9

 src/views/index/components/banner.vue

@@ -7,14 +7,19 @@
      arrow="never"
      ref="banner"
    >
      <el-carousel-item v-for="item in 4" :key="item">
        <div class="banner_content">
          <div class="banner_text">
            <div class="banner_title_en">SmartAI</div>
            <div class="banner_title_zh">人工智能操作系统</div>
            <div class="banner_des">为行业客户量身打造的企业级AI操作系统</div>
          </div>
      <el-carousel-item v-for="(item, index) in bannerList" :key="index">
        <div
          class="banner_content"
          :style="{
            // backgroundImage: 'url(' + baseImg + ')',
            backgroundImage: 'url(' + getUrl(item.pic) + ')',
            backgroundSize: '100% 100%',
            backgroundRepeat: 'no-repeat',
          }"
        >
          <div class="banner_text" v-html="item.name"></div>
        </div>
        <div class="link"></div>
      </el-carousel-item>
    </el-carousel>
  </div>
@@ -23,9 +28,32 @@
<script>
export default {
  name: "Banner",
  props: {
    bannerList: {},
  },
  data() {
    return {
      baseImg: "/images/index/banner.png",
    };
  },
  methods: {
    toggleBanner(i) {
      this.$refs["banner"].setActiveItem(i);
    },
    getUrl(url) {
      let result = "";

      if (!url) {
        result = this.baseImg;
        return result;
      }
      var reg = /^[0-9]/;
      if (reg.test(url)) {
        result = "http://" + url;
        return result;
      }

      return url;
    },
  },
};
@@ -41,29 +69,12 @@
  top: -62px;
  .banner_content {
    height: 100%;
    background-image: url("/images/index/banner.png");
    padding: 183px 0 0 0;

    .banner_text {
      margin: 0 auto;
      width: 1280px;
      color: #fff;

      .banner_title_en {
        font-size: 24px;
        line-height: 60px;
      }

      .banner_title_zh {
        font-size: 36px;
        font-weight: 700;
        line-height: 48px;
      }

      .banner_des {
        font-size: 14px;
        line-height: 60px;
      }
    }
  }