chat/src/pages/find/find.vue

<template>
  <div class="cx-find">
    <!-- <div class="bannerBox">
      <div class="imgBox">
          <img class="bannerImg" v-for="(item, index) in imgArr" :key="item" :src="item" v-show="index == nowIndex">
      </div>
      <div class="circleBox">
        <p v-for="(item, index) in imgArr" :key="index" :class="(index == nowIndex) ? 'selected' : 'bannerCircle'"></p>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      nowIndex: 0,
      timeObj: {},
      imgArr: []
    }
  },

  onLoad() {
    setTimeout(() => {
      this.imgArr = [
        '../../static/images/headPic1.jpg',
        '../../static/images/headPic2.jpg',
        '../../static/images/headPic3.jpg',
        '../../static/images/headPic4.jpg',
        '../../static/images/headPic5.jpg',
        '../../static/images/avart.jpg',
        '../../static/images/avart2.jpg'
    ]
    }, 1000);
    // this.autoPlay();

    // const obj = new Map([['id', 101], ['name', 'admin'], ['age', 18], ['sex', '男']]);
    // for(const [key, value] of obj) {
    //   console.log(`Key: ${key}, Value:  ${value}`);
    // }

    //判断当前环境：开发环境/生产环境
    // if (process.env.NODE_ENV === 'development') {
    //   console.log('开发环境');
    // } else {
    //   console.log('生产环境');
    // }

  },

  methods: {
    // autoPlay() {
    //     let that = this;
    //     for(let i=0; i<this.imgArr.length; i++) {
    //         this.imgArr[i] = this.nowIndex;
    //     };
    //     if (this.nowIndex == 0) {
    //        this.timeObj = setInterval(() => {
    //             that.nowIndex++;
    //         }, 2500);
    //     };
    //     if (this.nowIndex == this.imgArr.length) {
    //        clearInterval(this.timeObj);
    //        this.nowIndex = 0;
    //     };
    // }
  }
}
</script>

<style lang="less">
  .cx-find {
    .bannerBox {
      margin: 10rpx 5%;
      position: relative;
      width: 90%;
      height: 350rpx;
      .imgBox {
        width: 100%;
        height: 100%;
        .bannerImg {
          width: 100%;
          height: 100%;
        }
      }
      .circleBox {
        position: absolute;
        bottom: 0;
        left: 0;
        margin-left: 162rpx;
        width: 350rpx;
        height: 12rpx;
        display: flex;
        p {
          margin-left: 8rpx;
          justify-content: center;
          margin-top: 1rpx;
          float: left;
          width: 40rpx;
          height: 10rpx;
        }
      }
    }
    .bannerCircle {
      background: rgba(0, 0, 0, .3);
    }
    .selected {
      background: rgba(208, 2, 27, .7);
    }
  }
</style>