chuanshan_static/src/components/showCollection.vue

<template>
  <div>
    <div class="ui-body">
      <div class="ui-con" @click.stop>
        <div class="img-con img-k">
          <img
            @click.stop="$hideBroadcast()"
            :src="require(`@/assets/images/close.png`)"
            alt
          />
          <div class="show-detail">
            <div
              class="collection-item"
              :style="{ background: $linear[item.bgid] }"
            >
              <img :src="item.imgstr" alt="" />
            </div>
            <div class="show-info">
              <h3>{{ item.name }}</h3>
              <p v-if="item.time">年代：{{ item.time }}</p>
              <p v-if="item.size">尺寸：{{ item.size }}</p>
              <div v-if="item.describe" class="desc">{{ item.describe }}</div>
              <div class="qrcode" v-if="activeItem && activeItem.qrcode">
                <img
                  :src="`${$cdn}/images/qrcode/${activeItem.qrcode}.png`"
                  alt=""
                />
                <span>了解更多故事</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["item"],
  data() {
    return {
      activeItem: null,
    };
  },
  watch: {},
  mounted() {},
};
</script>

<style lang="less" scoped>
@import "../assets/style/globalVars.less";
.ui-body {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: relative;
  z-index: 9999999;
  max-width: 70%;

  .ui-con {
    text-align: center;
    font-size: 0;
    width: 100%;
    height: 82vh;
    box-sizing: border-box;
    overflow: hidden;
    .img-con {
      height: 100%;
      font-size: 0;
      .show-detail {
        height: 100%;
        width: 100%;
        background: #fff;
        display: flex;
        align-items: flex-start;
        .collection-item {
          width: 60%;
          height: 100%;
          margin-right: 1.67rem;
          background: #403f3d;
          position: relative;
          > img {
            width: 80%;
            transform: translate(-50%, -50%);
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: 0;
          }
        }
        .close {
          position: absolute;
          top: 0.83rem;
          right: 0.83rem;
          width: 1.67rem;
          cursor: pointer;
        }

        .show-info {
          padding-top: 1.67rem;
          padding-right: 1.67rem;
          color: #444444;
          text-align: left;
          width: 40%;
          > h3 {
            color: #df3b2f;
            font-size: 1.67rem;
            max-width: 22.92rem;
            margin-bottom: 1.25rem;
          }
          > p {
            line-height: 1.42rem;
            font-size: 0.83rem;
          }
          .qrcode {
            position: absolute;
            right: 0.83rem;
            bottom: 0.42rem;
            text-align: center;
            > img {
              width: 2.92rem;
            }
            > span {
              display: block;
              font-size: 0.67rem;
            }
          }

          .desc {
            border-top: 0.04rem solid #d1d1d1;
            margin-top: 1.25rem;
            padding-top: 1.25rem;
            font-size: 0.83rem;
          }
        }
      }

      > img:not(.img) {
        width: 2.08rem;
        height: 2.08rem;
        position: absolute;
        z-index: 999;
        right: 0rem;
        top: -2.5rem;
        cursor: pointer;
        &:last-child {
          top: unset;
          bottom: 2.25rem;
        }
      }
    }
    iframe,
    video {
      width: 100%;
      min-height: 22.92rem;
    }
    img {
      width: 100%;
      height: auto;
    }
  }
  .ui-name {
    text-align: center;
    color: #fff;
    letter-spacing: 0.08rem;
    margin-top: 0.83rem;
  }
}
.full {
  width: 100%;
  height: 100%;
  z-index: 99999999;
  position: relative;
  iframe,
  video {
    width: 100%;
    height: 100%;
  }
  .img {
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .full-btn {
    width: 1.25rem;
    position: absolute;
    right: 0.5rem;
    top: 1.25rem;
    cursor: pointer;
  }
}
</style>