

<template>
  <div class="content">
    <div class="h885 bg-white pl50 pt30">
      <div class="flex items-center">
        <div class="vertical-line mr10"></div>
        <span class="font20 font-bold mr15">技巧练习</span>
        <div class="lh34 select-border round4 pr15 pl15">试听</div>
      </div>
      <div class="">
        <div class="flex justify-between">
          <div
            v-for="(item, index) in list"
            :key="index"
            class="flex radius4 pt15"
          >
            <div class="lh34 w140 text-left font18">{{ index + 1 }}. 技巧</div>
            <div class="flex">
              <div class="w64 lh34 mr15 round4 overflow-hidden select-border">
                视频
              </div>
              <div class="w64 lh34 mr15 round4 overflow-hidden select-border">
                练习
              </div>
              <div class="w64 lh34 mr15 round4 overflow-hidden select-border">
                回顾
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex items-center pt30">
        <div class="vertical-line mr10"></div>
        <span class="font20 font-bold mr15">全部错误题回顾</span>
        <div class="lh34 round4 pr15 pl15 select-border mr15">错误回顾</div>
        <div class="lh34 round4 pr15 pl15 select-border">清空全部错题</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    return {
      list: [{}, {}, {}],
    };
  },
});
</script>

<style lang="scss" scoped>
.select-border {
  border: 1px solid #f9de5b;
}
.select-border:hover {
  border: 1px solid #f9de5b;
  background-color: #f9de5b;
  cursor: pointer;
}
.radius4 {
  border-radius: 4px;
}
.bg-primary-yellow {
  background-color: #f9de5b;
}
.bg-light-yellow {
  background: #fff7cc;
}

.w1603 {
  width: 1603px;
}

.content {
  padding: 0 30px;
  padding-top: 21px;
  padding-bottom: 30px;

  .vertical-line {
    width: 5px;
    height: 20px;
    background: #f9de5b;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
  }
}
</style>