<template>
  <div class="search">
    <h1 class="sear-title">特色作品,搜索一下</h1>
    <div class="inp">
      <input v-model="searMsg" type="text" placeholder="搜索关键字" />
      <span class="inp-sear"></span>
    </div>
    <ul class="classify">
      <li @click="classIndex=i" :class="[classIndex===i?'classes':'']" v-for="(c,i) in classes" :key="c">{{c}}</li>
    </ul>
  </div>
</template>
<script setup>
import { ref } from "vue";
const searMsg = ref("");
const classes = ref(["微课", "课件", "教案", "微视频", "网络资源"]);
const classIndex=ref(1);
</script>
<style lang="scss" scoped>
.search {
  width: 100%;
  min-width: 1280px;
  height: 457px;
  padding: 20px 0;
  background: url("../../assets/ysgc/back.png");
  background-repeat: no-repeat;
  .sear-title {
    width: 400px;
    height: 67px;
    font-size: 48px;
    margin: 0 auto;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    color: #000000;
    line-height: 67px;
  }
  .inp {
    width: 497px;
    margin: 40px auto;
    height: 50px;
    line-height: 50px;
    position: relative;
    input {
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #00a3ff;
      outline: none;
      width: 100%;
      height: 100%;
      padding-left: 17px;
    }
    .inp-sear {
      display: block;
      width: 26px;
      height: 26px;
      background: #00a3ff;
      border-radius: 6px;
      position: absolute;
      top: 10px;
      right: 10px;
      background-image: url("../../assets/ysgc/search.png");
      background-size: 60%;
      background-position: center;
      background-repeat: no-repeat;
    }
  }
  .classify {
    width: 300px;
    height: 22px;
    margin: 0 auto;
    opacity: 0.6;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #000000;
    line-height: 22px;
    display: flex;
    justify-content: space-between;
    li {
      position: relative;
    }
    li:not(:last-child)::after {
      position: absolute;
      content: "";
      width: 1px;
      height: 13px;
      background-color: #000000;
      top: 5px;
      right: -13px;
    }
    .classes{
    color: #000000;
    font-weight: 550;
    opacity: 1 !important;
    }
  }
}

</style>