ai_mooc_h5/src/pages/home/wode/wdsy.vue

<template>
  <div>
    <van-nav-bar title="我的声音" @click-left="back">
      <template #left>
        <van-icon name="arrow-left" color="#ffffff" size="18px" />
      </template>
    </van-nav-bar>
    <div class="px-20px">
      <div class="flex items-center p-4px box-border bg-hex-1A1B22 rounded-12px text-14px">
        <div class="type_item" :class="activeType==index?'active':''" v-for="(item, index) in typeData" :key="index" @click="handleClick(index)">{{item}}</div>
      </div>
      <div class="mt-15px grid grid-cols-2 gap-12px">
        <div class="" v-for="i in 6" :key="i">
          <img class="w-full" :src="voiceImg" alt="" />
          <div class="text-center text-white mb-10px">声音{{i}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import voiceImg from "~/assets/wode/voice.png";
const router = useRouter()

function back() {
  router.back();
}


const typeData = $ref(["通过", "不通过", "待审核"]);
let activeType = $ref("");

handleClick(0);
function handleClick(index) {
  activeType = index;
}
</script>

<style lang="scss" scoped>
.type_item {
  flex: 1;
  color: #808080;
  text-align: center;
  line-height: 40px;
  &.active {
    color: #fff;
    background: #db664d;
    border-radius: 8px;
  }
}
</style>