proginn-frontend/kaifain_v2/components/Carousel.vue

<template lang="pug">
  .carousel-wrapper#carousel
    b-carousel(
      v-model="curIndex"
      :arrow="false"
      :pause-hover="false"
      :indicator="list.length > 1"
      indicator-style="is-lines"
      @change="onChange"
      )
      b-carousel-item(
        v-for="(item, idx) in list"
        :key="idx"
        @click="onClick(item)"
        )
        .pic(:style="{backgroundImage: `url('${item.image_url}')`, backgroundColor: item.theme_color || 'transparent'}")
        .container.is-content(v-if="item.title || item.desc" :style="{textAlign: item.cont_position || 'left'}")
          .text-content
            .title {{item.title}}
            .desc {{item.desc}}
            .button.is-primary.is-inverted.is-outlined(
              v-if="item.button_text"
              @click.stop="onClick(item, true)"
              ) {{item.button_text}}

</template>

<script lang="ts">
import Vue from 'vue'

const insertOrUpdateStyleTag = (item) => {
  const id = `carousel-style`
  const css = `.kaifain-view .carousel {background: ${item && item.theme_color || '#eee'}} .kaifain-view .carousel .carousel-item .text-content .button.is-primary:hover{color:${item && item.theme_color || '#20242d'}}`
  let dom = document.getElementById(id)

  if (!dom) {
    const wrapper = document.querySelector('#carousel')

    if (wrapper) {
      dom = document.createElement('style')
      dom.id = id
      dom.innerHTML = css

      wrapper.appendChild(dom)
    }
  } else {
    dom.innerHTML = css
  }
}

export default Vue.extend({
  name: 'Carousel',
  components: {
  },

  props: {
    list: Array
  },

  data() {
    return {
      curIndex: 1
    }
  },

  methods: {
    onClick(item, isButton = false) {
      if (!isButton && item.button_text) {
        return
      }

      window.open(item.jump_target)
    },

    onChange(idx: number) {
      const item = this.list[idx]
      item && insertOrUpdateStyleTag(item)
    }
  }

})
</script>

<style lang="scss">
.kaifain-view .carousel {
  width: 100%;
  height: 400px;
  background: #eee;

  .carousel-indicator {
    margin-bottom: 16px;

    .indicator-item {
      .indicator-style.is-lines {
        width: 48px;
        height: 4px;
        opacity: 0.2;
      }

      &.is-active .indicator-style {
        opacity: 0.8;
      }
    }
  }

  .carousel-item {
    width: 100%;
    height: 400px;

    .pic {
      background-position: center center;
      background-repeat: no-repeat;
      background-size: auto 100%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .text-content {
      position: relative;
      z-index: 1;
      margin-top: 140px;

      > * {
        color: #fff;
      }

      .desc {
        opacity: 0.76;
      }

      .button {
        margin-top: 44px;
        min-width: 128px;
        height: 2.572em;

        &.is-primary {
          font-size: 0.875rem;

          &:hover {
            color: #2487ff;
          }
        }
      }
    }
  }
}
</style>