Wuchuan/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"
          />
        </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 {
    &.open {
    }
    &.playing {
      bottom: 0;
    }
    &.open.playing {
      height: 157px;
    }
    .frame-container {
      background: rgba(163, 51, 40, 0.90);
      button.collapse {
        > img {
        }
      }
      #scrollFrame.frame {
        background: transparent;
        ul#thumb-container {
          li.thumbImg {
            // 在这里写也没用
          }
        }
      }
      #scroller {
        .handle {
        }
      }
    }
  }
}


.mobile {
  #drawer-container {
    #drawer {
      &.open {
      }
      &.playing {
      }
      &.open.playing {
        height: 138px;
      }
      .frame-container {
        button.collapse {
          > img {
          }
        }
        #scrollFrame.frame {
          ul#thumb-container {
            li.thumbImg {
              // 在这里写也没用
            }
          }
        }
        #scroller {
          .handle {
          }
        }
      }
    }
  }
}
</style>

<style lang="less">
// 每个item
#thumb-container .thumbImg {
}
// 选中后
.frame .slidee li.thumbImg.active {
}

// 场景封面图
// 平时
#thumb-container .thumbImg img {
  border: 0.7vw solid transparent;
}
// hover时
.frame .slidee li.thumbImg.hasHover>img:hover {
}
// 选中后
.frame .slidee li.thumbImg.active>img {
  border: 0.7vw solid #E5C4A8 !important;
}

// 场景名称
// 平时
.frame .slidee li .overlay {
  color: #fff;
}
// 选中后
.frame .slidee li.thumbImg.active>.overlay {
  color: #E5C4A8;
  font-weight: bold;
}

.mobile {
  // 每个item
  #thumb-container .thumbImg {
  }
  // 选中后
  .frame .slidee li.thumbImg.active {
  }

  // 场景封面图
  // 平时
  #thumb-container .thumbImg img {
  }
  // hover时
  .frame .slidee li.thumbImg.hasHover>img:hover {
  }
  // 选中后
  .frame .slidee li.thumbImg.active>img {
  }

  // 场景名称
  // 平时
  .frame .slidee li .overlay {
  }
  // 选中后
  .frame .slidee li.thumbImg.active>.overlay {
  }
}
</style>