ct/app/components/index/Carousel.vue

<!--<template>-->
<!--  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">-->
<!--    <ol class="carousel-indicators" style="background-color: rgba(0,0,0,0.08);">-->
<!--      <li-->
<!--          v-for="(item, index) in carouselItems"-->
<!--          :key="index"-->
<!--          :class="{ active: index === currentSlide }"-->
<!--          :data-slide-to="index"-->
<!--          :data-target="`#carousel-example-generic`"-->
<!--          @click="goToSlide(index)"-->
<!--      />-->
<!--    </ol>-->

<!--    &lt;!&ndash; Wrapper for slides &ndash;&gt;-->
<!--    <div class="carousel-inner" role="listbox">-->
<!--      <div-->
<!--          v-for="(item, index) in carouselItems"-->
<!--          :key="index"-->
<!--          :class="{ active: index === currentSlide }"-->
<!--          class="item"-->
<!--      >-->
<!--        <img-->
<!--            :alt="item.alt"-->
<!--            :src="item.image"-->
<!--            style="width: 100%;"-->
<!--        >-->
<!--        <div v-if="item.caption" class="carousel-caption">-->
<!--          <h2>{{ item.caption.title }}</h2>-->
<!--          <ul v-if="item.caption.links" class="list-unstyled hidden-xs hidden-sm">-->
<!--            <li v-for="(link, linkIndex) in item.caption.links" :key="linkIndex">-->
<!--              <a :href="link.href" :target="link.target">-->
<!--                <img :alt="link.alt" :src="link.image">-->
<!--              </a>-->
<!--              <span/>{{ link.text }}-->
<!--            </li>-->
<!--          </ul>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; Controls &ndash;&gt;-->
<!--    <a-->
<!--        class="left carousel-control"-->
<!--        data-slide="prev"-->
<!--        href="#carousel-example-generic"-->
<!--        role="button"-->
<!--        @click.prevent="previousSlide"-->
<!--    >-->
<!--      <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"/>-->
<!--      <span class="sr-only">Previous</span>-->
<!--    </a>-->
<!--    <a-->
<!--        class="right carousel-control"-->
<!--        data-slide="next"-->
<!--        href="#carousel-example-generic"-->
<!--        role="button"-->
<!--        @click.prevent="nextSlide"-->
<!--    >-->
<!--      <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"/>-->
<!--      <span class="sr-only">Next</span>-->
<!--    </a>-->
<!--  </div>-->
<!--</template>-->

<!--<script lang="ts" setup>-->
<!--import {ref, onMounted, onUnmounted} from 'vue'-->

<!--// 响应式数据-->
<!--const currentSlide = ref(2) // 默认显示第三张图片-->
<!--const autoPlayInterval = ref<NodeJS.Timeout | null>(null)-->

<!--// 轮播图数据-->
<!--const carouselItems = [-->
<!--  {-->
<!--    image: '/www.yuxiit.com/img/yuxiupdata/banner_2021_1.png',-->
<!--    alt: '成本降低，效率更高'-->
<!--  },-->
<!--  {-->
<!--    image: '/www.yuxiit.com/img/yuxiupdata/banner_2021_2.png',-->
<!--    alt: '成本降低，效率更高'-->
<!--  },-->
<!--  {-->
<!--    image: '/www.yuxiit.com/img/yuxiupdata/index23.png',-->
<!--    alt: '共享单车最佳拍档',-->
<!--  }-->
<!--]-->

<!--// 方法-->
<!--const goToSlide = (index: number) => {-->
<!--  currentSlide.value = index-->
<!--}-->

<!--const nextSlide = () => {-->
<!--  currentSlide.value = (currentSlide.value + 1) % carouselItems.length-->
<!--}-->

<!--const previousSlide = () => {-->
<!--  currentSlide.value = currentSlide.value === 0 ? carouselItems.length - 1 : currentSlide.value - 1-->
<!--}-->

<!--const startAutoPlay = () => {-->
<!--  autoPlayInterval.value = setInterval(() => {-->
<!--    nextSlide()-->
<!--  }, 5000) // 5秒自动切换-->
<!--}-->

<!--const stopAutoPlay = () => {-->
<!--  if (autoPlayInterval.value) {-->
<!--    clearInterval(autoPlayInterval.value)-->
<!--    autoPlayInterval.value = null-->
<!--  }-->
<!--}-->

<!--// 生命周期-->
<!--onMounted(() => {-->
<!--  startAutoPlay()-->
<!--})-->

<!--onUnmounted(() => {-->
<!--  stopAutoPlay()-->
<!--})-->
<!--</script>-->

<!--<style scoped>-->
<!--.carousel {-->
<!--  position: relative;-->
<!--}-->

<!--.carousel-inner {-->
<!--  position: relative;-->
<!--  width: 100%;-->
<!--  overflow: hidden;-->
<!--}-->

<!--.carousel-inner > .item {-->
<!--  position: relative;-->
<!--  display: none;-->
<!--  transition: 0.6s ease-in-out left;-->
<!--}-->

<!--.carousel-inner > .item.active {-->
<!--  display: block;-->
<!--}-->

<!--.carousel-inner > .item > img {-->
<!--  display: block;-->
<!--  width: 100%;-->
<!--  height: auto;-->
<!--}-->

<!--.carousel-indicators {-->
<!--  position: absolute;-->
<!--  bottom: 10px;-->
<!--  left: 50%;-->
<!--  z-index: 15;-->
<!--  width: 60%;-->
<!--  padding-left: 0;-->
<!--  margin-left: -30%;-->
<!--  text-align: center;-->
<!--  list-style: none;-->
<!--}-->

<!--.carousel-indicators li {-->
<!--  display: inline-block;-->
<!--  width: 10px;-->
<!--  height: 10px;-->
<!--  margin: 1px;-->
<!--  text-indent: -999px;-->
<!--  cursor: pointer;-->
<!--  background-color: #000 \9;-->
<!--  background-color: rgba(0, 0, 0, 0);-->
<!--  border: 1px solid #fff;-->
<!--  border-radius: 10px;-->
<!--}-->

<!--.carousel-indicators .active {-->
<!--  width: 12px;-->
<!--  height: 12px;-->
<!--  margin: 0;-->
<!--  background-color: #fff;-->
<!--}-->

<!--.carousel-control {-->
<!--  position: absolute;-->
<!--  top: 0;-->
<!--  bottom: 0;-->
<!--  left: 0;-->
<!--  width: 15%;-->
<!--  font-size: 20px;-->
<!--  color: #fff;-->
<!--  text-align: center;-->
<!--  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);-->
<!--  background-color: rgba(0, 0, 0, 0);-->
<!--  filter: alpha(opacity=50);-->
<!--  opacity: .5;-->
<!--}-->

<!--.carousel-control.right {-->
<!--  right: 0;-->
<!--  left: auto;-->
<!--}-->

<!--.carousel-control:hover,-->
<!--.carousel-control:focus {-->
<!--  color: #fff;-->
<!--  text-decoration: none;-->
<!--  filter: alpha(opacity=70);-->
<!--  opacity: .7;-->
<!--}-->

<!--.carousel-control .icon-prev,-->
<!--.carousel-control .icon-next,-->
<!--.carousel-control .glyphicon-chevron-left,-->
<!--.carousel-control .glyphicon-chevron-right {-->
<!--  position: absolute;-->
<!--  top: 50%;-->
<!--  z-index: 5;-->
<!--  display: inline-block;-->
<!--  margin-top: -10px;-->
<!--}-->

<!--.carousel-control .icon-prev,-->
<!--.carousel-control .glyphicon-chevron-left {-->
<!--  left: 50%;-->
<!--  margin-left: -10px;-->
<!--}-->

<!--.carousel-control .icon-next,-->
<!--.carousel-control .glyphicon-chevron-right {-->
<!--  right: 50%;-->
<!--  margin-right: -10px;-->
<!--}-->

<!--.carousel-caption {-->
<!--  position: absolute;-->
<!--  right: 15%;-->
<!--  bottom: 20px;-->
<!--  left: 15%;-->
<!--  z-index: 10;-->
<!--  padding-top: 20px;-->
<!--  padding-bottom: 20px;-->
<!--  color: #fff;-->
<!--  text-align: center;-->
<!--  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);-->
<!--}-->

<!--.carousel-caption h2 {-->
<!--  font-size: 2.5em;-->
<!--  margin-bottom: 20px;-->
<!--}-->

<!--.carousel-caption .list-unstyled {-->
<!--  list-style: none;-->
<!--  padding: 0;-->
<!--  margin: 0;-->
<!--}-->

<!--.carousel-caption .list-unstyled li {-->
<!--  display: inline-block;-->
<!--  margin: 0 10px;-->
<!--  vertical-align: top;-->
<!--}-->

<!--.carousel-caption .list-unstyled a {-->
<!--  color: #fff;-->
<!--  text-decoration: none;-->
<!--}-->

<!--.carousel-caption .list-unstyled img {-->
<!--  width: 50px;-->
<!--  height: 50px;-->
<!--  margin-bottom: 10px;-->
<!--}-->

<!--@media (max-width: 768px) {-->
<!--  .carousel-caption h2 {-->
<!--    font-size: 1.5em;-->
<!--  }-->

<!--  .carousel-caption .list-unstyled {-->
<!--    display: none;-->
<!--  }-->
<!--}-->
<!--</style>-->