301hospital/web/src/views/expert/carousel/bigpic_demo.vue

<template>
  <div class="lunbo " id="jssor_1">
    <ul ref="jssor" class="jssor-wrapper" data-u="slides" @mousedown="mousedown" @mousemove="mousemove">
      <li class="jssor-slide" @click.stop="handleItem(item)"
        :class="{ weiyi: i % 2 != 0, flipActive: active.id == item.id }" v-for="(item, i) in piclist" :key="i">
        <div data-u="image">

          <div class="imgdefault">
            <!-- 'http://192.168.0.109:8004/'+ -->

            <img :class="{ hideImg: noImg }" :src="item.thumb" alt="" />
            <p>
              <strong :title="item.name">{{ item.name }}</strong>
              <span v-if="item.level != 6" :title="item.title || g_typeStr[item.level]">{{ item.title ||
                  g_typeStr[item.level]
              }}</span>
              <span :title="item.years ? `（${item.years}）` : ''">{{ item.years ? `（${item.years}）` : "" }}</span>
            </p>
          </div>

          <div class="imgactive">
            <h2>
              <strong :title="item.name">{{ item.name }}</strong>
              <span :title="item.years ? `（${item.years}）` : ''">{{ item.years ? `（${item.years}）` : "" }}</span>
            </h2>
            <h2>
              <strong v-if="item.level != 6" :title="item.title || g_typeStr[item.level]">{{ item.title ||
                  g_typeStr[item.level]
              }}</strong>
            </h2>

            <!-- 'http://192.168.0.245:8004/'+ -->
            <div v-if="showVideo && item.video" @click.stop="openVideo(item)" class="iivideo"
              :class="{ iimask: showBofang, iinourl: item.url }">
              <img class="bofang" :src="require(`@/assets/images/expert/bofang.png`)" v-if="showBofang" />
              <img class="poster" :src="item.thumb" v-if="showBofang" />
            </div>

            <p :class="{ novideo: !item.video, nourl: !item.video && !item.url }" v-html="item.description"></p>

            <div class="enter" :title="item.urlName" v-if="item.url" @click.stop="open(item)">
              <span>{{ item.urlName || "-" }}</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>

var jssor_1_options = {
  $AutoPlay: 0,
  $Idle: 0,
  $SlideDuration: 5000,
  $SlideEasing: $Jease$.$Linear,
  $PauseOnHover: 4,
  $SlideSpacing: 60,
  $SlideWidth: 340,
  $SlideHeight: 560,
  $Loop: 0,
  $Align: 0
};

export default {
  props: ["list"],
  data() {
    return {
      piclist: [...this.list],
      active: "",
      showBofang: "",
      hadvideo: false,
      clkLock: false,
      showVideo: false,
      noImg: false,
      TO: null,
      TT: null,
      TTT: null,
      isStopProp: true
    };
  },

  methods: {
    mousedown(e) {
      if (this.isStopProp) {
        e.stopPropagation()
      }
    },
    mousemove(e) {
      if (this.isStopProp) {
        e.stopPropagation()
      }
    },
    listenFn() {
      window.jssor_1_slider.$AutoPlay(1)
      this.isStopProp = false
    },
    open(item) {
      let windowObjectReference = window.open();
      let temp = this.changetohttp(item.url);
      windowObjectReference.location.href = temp;
      // window.open(item.url,'_blank')
    },
    openVideo(item) {
      this.$emit("current", item);
    },
    handleItem(item) {
      if (this.clkLock) {
        return;
      }

      setTimeout(() => {
        this.clkLock = false;
      }, 500);

      this.clkLock = true;

      if (item == this.active) {
        this.active = "";
        if (!this.isStopProp) {
          window.jssor_1_slider.$AutoPlay(1)
        }

        this.noImg = false;
        this.TO && clearTimeout(this.TO);
        this.TO = setTimeout(() => {
          this.showVideo = false;
        }, 300);

      } else {
        this.active = item;
        if (!this.isStopProp) {
          window.jssor_1_slider.$AutoPlay(0)
        }
        this.TT && clearTimeout(this.TT);
        this.TT = setTimeout(() => {
          this.noImg = true;
        }, 600);
        if (item.video) {
          this.showVideo = true;
        } else {
          this.showVideo = false;
        }
      }
      this.showBofang = true;
      this.hadvideo = false;
    },
  },

  mounted() {
    window.jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
    window.jssor_1_slider.$AutoPlay(0)
    this.$bus.$on('startLoop', this.listenFn)
  },

  destroyed() {
    this.$bus.$off("startLoop", this.listenFn);
  },

};
</script>

<style lang="less" scoped>
@jianjinw: 10%;

.lunbo {
  width: 100%;
  position: relative;
  height: 100%;
  color: #fff;
  bottom: 0;
  left: 0;
  padding: 0 10px;

  .jssor-wrapper {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    padding: 0 60px;

    .jssor-slide {
      display: inline-block;
      margin: 0;
      position: relative;
      top: 158px !important;
      height: auto;
      // cursor: pointer;
      width: 340px;
      perspective: 1000px;

      .imgdefault,
      .imgactive {
        width: 100%;
        padding: 10px;
        display: inline-block;
        vertical-align: bottom;
        border: 2px solid rgba(243, 199, 165, 0.4);
        background: linear-gradient(180deg, rgba(178, 69, 81, 0.2) 0%, rgba(239, 167, 120, 0.2) 100%);
        position: relative;
        backface-visibility: hidden;
        transition: 0.6s;
        transform-style: preserve-3d;

        //transform: rotateX(0);
        &::before {
          filter: blur(2px);
          content: '';
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background: rgba(178, 69, 81, .2);
          z-index: -1;
        }

        >img {
          width: 100%;
          height: 414px;
          position: relative;
          object-fit: cover;
        }

        >p {
          text-align: left;
          font-size: 22px;
          font-weight: bold;
          margin: 10px 0;
          white-space: nowrap;

          >strong {
            font-size: 22px;
            font-weight: bold;
            width: 90px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
            vertical-align: bottom;
          }

          >span {
            display: inline-block;
            font-size: 16px;
            width: 78px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
            vertical-align: bottom;
            text-align: center;

            &:last-of-type {
              width: auto;
              max-width: 170px;
            }
          }
        }
      }

      .imgactive {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 560px;
        text-align: left;
        transform: rotateY(-180deg);
        background: linear-gradient(180deg, rgba(178, 69, 81, 0.5) 0%, rgba(239, 167, 120, 0.5) 100%);
        padding: 20px 26px;

        .iivideo {
          width: 100%;
          height: 70%;
          position: relative;
          z-index: 99;
          overflow: hidden;

          .bofang {
            position: absolute;
            top: 50%;
            cursor: pointer;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
          }

          .poster {
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
          }
        }

        .iinourl {
          height: 60%;
        }

        .iimask {
          &::before {
            content: "";
            display: inline-block;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 1;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
          }
        }

        >h2 {
          font-size: 24px;
          font-weight: normal;
          margin-bottom: 6px;
          height: 7%;

          >strong {
            font-size: 24px;
            font-weight: bold;
            width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
            vertical-align: bottom;
          }

          &:last-of-type {
            >strong {
              width: 300px;
            }
          }

          span {
            width: auto;
            max-width: 160px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
            vertical-align: bottom;
          }
        }

        >p {
          text-indent: 28px;
          font-weight: normal;
          font-size: 14px;
          width: 100%;
          max-height: 12%;
          overflow-y: auto;
          overflow-x: hidden;
          line-height: 1.5;
          white-space: break-spaces;
        }

        .novideo {
          max-height: 64%;
          min-height: 320px;
          font-size: 16px;
          margin-top: 40px;
          text-align: justify;
          overflow-y: auto;
          padding-right: 10px;
          margin-bottom: 20px;
        }

        .nourl {
          max-height: 76%;
          min-height: 380px;
        }

        .enter {
          margin: 0 auto;
          background: linear-gradient(360deg, #ffe0a6 0%, #fcf5d3 100%);
          height: 45px;
          line-height: 45px;
          width: 70%;
          color: #a58056;
          position: relative;
          padding: 0 20px;
          cursor: pointer;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: bottom;

          >span {
            font-size: 20px;
          }
        }
      }
    }

    .flipActive {
      width: 360px;

      .imgdefault {
        transform: rotateY(-180deg);

        >img {
          width: 100%;
          position: relative;
        }

        .hideImg {
          display: none;
        }
      }

      .imgactive {
        transform: rotateY(0deg);
      }
    }

    .weiyi {
      transform: translateY(-55px);
    }
  }

}

@media screen and (max-width: 1700px) {
  .lunbo {

    .jssor-wrapper {

      .jssor-slide {
        top: 124px !important;

      }
    }
  }

}
</style>