AnhuiDaily2/src/views/gui/guide.vue

<template>
  <div id="drawer-container">
    
    <div id="drawer" class="fullWidth">
      <div class="frame-container darkGlass">

        <!-- 场景列表 -->
        <div id="scrollFrame" class="frame">
          <ul id="thumb-container" class="slidee"></ul>
        </div>
        
        <!-- 滚动条 -->
        <div class="scrollbar" id="scroller">
          <!-- thumb -->
          <div class="handle"></div>
        </div>
        
      </div>
    </div>
    
    <!-- 自动导览时显示导览进度 -->
    <div id="playHead">
      <div id="status">
        <span class="curIdx">1</span>
        of <span class="totalSteps"></span>
      </div>
      <div id="progressBar"></div>
    </div>
    
  </div>
</template>
<script>
export default {
  props: {
  },
};
</script>
<style lang="less" scoped>
#drawer-container {
  #drawer {
    font-size: 16px;
    .frame-container {
      background-color: rgba(133, 119, 69, 0.5);
      backdrop-filter: blur(10px);
      #scrollFrame.frame {
        background-color: initial;
        ul#thumb-container {
          padding: 10px 20px;
          li.thumbImg {
            // 在这里写也没用
          }
        }
      }
      #scroller {
        .handle {

        }
      }
    }
  }
}
</style>

<style lang="less">
// 场景封面图
// 平时
#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 {
  border: 3px solid #A10E0C !important;
}

// 场景名称
// 平时
.frame .slidee li .overlay {
  box-sizing: border-box;
  left: 0;
  top: 0;
  bottom: initial;
  height: 100%;
  line-height: 97px;
  transform: initial;

  color: #fff;
  background: rgba(0, 0, 0, 0.5);
}
// 选中后
.frame .slidee li.thumbImg.active>.overlay {
  top: initial;
  bottom: 0;
  height: 36px;
  line-height: 36px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%);
}
</style>