admin_home/src/views/template/style/1/components/banner/1.vue

<template>
  <div class="bannerItemBox">
    <el-carousel height="226px">
      <el-carousel-item :key="1">
        <div class="bannerItemPositioningBox">
          <div class="shadowBox">banner样式1标题标题标题标题标题标题</div>
          <img src="@/assets/template/component/banner1.png" /> 
        </div>
      </el-carousel-item>
      <el-carousel-item :key="2">
        <div class="bannerItemPositioningBox">
          <div class="shadowBox">banner样式1标题标题标题标题标题标题</div>
          <img src="@/assets/template/component/banner2.png" /> 
        </div>
      </el-carousel-item>
      <el-carousel-item :key="3">
        <div class="bannerItemPositioningBox">
          <div class="shadowBox">banner样式1标题标题标题标题标题标题</div>
          <img src="@/assets/template/component/banner3.png" /> 
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  props: {
    
  },
  data() {
    return {
      
    };
  },
  methods: {
    
  },
  mounted() {

  },
};
</script>

<style scoped lang="less">
  .bannerItemBox {
    width: 100%;
    .bannerItemPositioningBox {
      position: relative;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
      .shadowBox {
        position: absolute;
        width: 100%;
        bottom: 0;
        width: 100%;
        left: 0;
        background: rgba(0,0,0,0.5);
        color: #fff;
        font-size: 14px;
        padding: 10px;
      }
    }
  }
</style>