pictures.vue

<template lang='pug'>
    div.infopage()
        div.content()
            div.left()
                div.spBox()
                    img(:src="picUrl")
                    div.Licon(@click="changePic(1)")
                      img(src="@/assets/images/left.png")
                    div.Ricon(@click="changePic(2)")
                      img(src="@/assets/images/right.png")
            div.right()
                div.itemBox()
                    div.picItem(:class="[picUrl==e.url?'active':'']" v-for="(e,i) in PicData" :key="i" @click="cliPic(e,i)")
                        div.picBox()
                            img(:src="e.url")
                            p 第{{i+1}}张

</template>
<script>
export default {
  data() {
    return {
      flag: 0,
      PicData: [],
      picUrl: '',
      picIdex: 0
    }
  },
  methods: {
    init(val) {
      let path = 'http://10.20.2.210:8089'
      this.PicData.push({ 'url': path + val.byx2 })
      this.PicData.push({ 'url': path + val.byx3 })
      this.PicData.push({ 'url': path + val.byx4 })
      this.PicData.push({ 'url': path + val.byx5 })
      this.picUrl = this.PicData[0].url
      console.log(this.picUrl)
    },
    cliPic(val, i) {
      this.picUrl = val.url
      this.picIdex = i
    },
    changePic(n) {
      let len = this.PicData.length - 1
      if (n == 1) {
        this.picIdex = this.picIdex <= 0 ? len : this.picIdex - 1
      } else {
        this.picIdex = this.picIdex >= len ? 0 : this.picIdex + 1
      }
      this.picUrl = this.PicData[this.picIdex].url
    }
  }
}
</script>
<style scoped lang="scss">
.infopage {
  margin: 0 20px 0 24px;
  img {
    width: 100%;
    height: 100%;
  }
  .content {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    .left {
      box-sizing: border-box;
      width: 70%;
      height: 750px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border: 2px solid rgba(47, 141, 199, 0.5);
      background-color: rgba(1, 26, 66, 0.5);
      border-radius: 4px;
      overflow: hidden;
      .spBox {
        width: 95%;
        height: 93%;
        border: 2px solid rgba(47, 141, 199, 0.5);
        border-radius: 4px;
        overflow: hidden;
        position: relative;
        .Licon{
          width:60px;
          height:60px;
          position: absolute;
          left: 30px;
          top:50%;
          transform: translateY(-50%);
          z-index: 5;
          cursor:pointer;
        }
        .Ricon{
          width:60px;
          height:60px;
          position: absolute;
          top:50%;
          transform: translateY(-50%);
          z-index: 5;
          right: 30px;
          cursor:pointer;
        }
      }
    }
    .right {
      width: 30%;
      height: 750px;
      margin-left: 24px;
      padding: 0 20px 0 24px;
      color: #fff;
      box-sizing: border-box;
      background-color: rgba(1, 26, 66, 0.5);
      border: 2px solid rgba(47, 141, 199, 0.5);
      border-radius: 4px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .itemBox{
        width: 95%;
        height: 93%;
        overflow: auto;
        .active {
            opacity: 1 !important;
        }
        .picItem {
            display: flex;
            justify-content: start;

            height: 140px;
            opacity: 0.5;
            margin-bottom: 20px;
            .picBox {
                cursor:pointer;
                width: 60%;
                height: 142px;
                border:2px solid rgba(23, 94, 204, 0.3);
                position: relative;

                p {
                    position: absolute;
                    bottom: -18px;
                    right: -60px;
                    font-size: 14px;
                }
            }
        }
      }
      .itemBox::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
</style>