XuzhouArtwork/src/views/gui/guide.vue

<template>
  <div id="drawer-container">
    <div
      id="drawer"
      class="fullWidth"
    >
      <div class="frame-container darkGlass">
        <button
          class="collapse"
          @click="onClickCollapse"
        >
          <img
            class=""
            src="@/assets/images/collapse.png"
            alt=""
            draggable="false"
          >
        </button>
        <!-- 场景列表 -->
        <div
          id="scrollFrame"
          class="frame"
        >
          <ul
            id="thumb-container"
            class="slidee"
          />
        </div>

        <!-- 滚动条 -->
        <div
          id="scroller"
          class="scrollbar"
        >
          <!-- thumb -->
          <div class="handle" />
          </ul>
        </div>
      </div>

      <!-- 自动导览时显示导览进度 -->
      <div id="playHead">
        <div id="status">
          <span class="curIdx">1</span>
          of <span class="totalSteps" />
        </div>
        <div id="progressBar" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
  },
  methods: {
    onClickCollapse() {
      window.toggleSceneGuide()
    }
  }
}
</script>
<style lang="less" scoped>
#drawer-container {
  #drawer {
    font-size: 16px;
    &.open {
      height: 160px;
    }
    .frame-container {
      background-color: transparent;
      button.collapse {
        position: absolute;
        top: 5px;
        left: 45px;
        width: 78px;
        height: 32px;
        z-index:1;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      #scrollFrame.frame {
        margin-left: 28px;
        margin-right: 28px;
        width: calc(100% - 28px * 2);
        height: 152px;
        background: rgba(235, 224, 214, 0.68);
        border-radius: 20px;
        padding-top: 35px;
        ul#thumb-container {
          border-radius: 20px;
          padding: 10px 20px;
          li.thumbImg {
            // 在这里写也没用
          }
        }
      }
      #scroller {
        .handle {

        }
      }
    }
  }
}
</style>

<style lang="less">
// 每个item
#thumb-container .thumbImg {
  overflow: hidden;
  border-radius: 10px;
  height: 97px;
}
// 选中后
.frame .slidee li.thumbImg.active {
  border: 3px solid #A10E0C !important;
}

// 场景封面图
// 平时
#thumb-container .thumbImg img {
  box-sizing: border-box;
  border: none;
  width: 100%;
  object-fit: cover;
}
// hover时
.frame .slidee li.thumbImg.hasHover>img:hover {
}
// 选中后
.frame .slidee li.thumbImg.active>img {
}

// 场景名称
// 平时
.frame .slidee li .overlay {
  font-size: 12px;
  font-family: DFLiShuW7;
  box-sizing: border-box;
  left: 0;
  top: initial;
  bottom: 0;
  height: 30px;
  line-height: 30px;
  transform: initial;
  color: #fff;
  background: linear-gradient(180deg, rgba(87, 36, 25, 0) 0%, rgba(87, 36, 25, 1) 50%);
}
// 选中后
.frame .slidee li.thumbImg.active>.overlay {
}
</style>