<template>
  <div class="jscz">
    <van-nav-bar title="教师成长" left-arrow @click-left="onClickLeft" />
    <ul class="js-kind" v-if="pageData">
      <li v-for="v in pageData" :key="v">
        <router-link :to="{
          name: 'jsyx',
          params: {
            yjkc_id: v.yjkc_id
          }
        }">
          <img :src="resolveSingleFileString(v.yjkc_img).url" alt="" />
          <div class="des">
            <p class="des-title">{{ v.yjkc_title }}</p>
            <p class="des-nav">{{ v.yjkc_kcjj }}</p>
            <p class="des-total">
              <span class="des-hour">{{ v.ks_num }}节课时</span><span class="des-browse">浏览{{ v.yjkc_lll }}</span>
            </p>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { resolveSingleFileString } from '~/utils/helper';
import { jscz_lb } from './api'
let https = ref(window.GLOBAL_CONFIG.api)
const onClickLeft = () => history.back();

const lbData = {
  page: '1',
  limit: '999',
};
let pageData = ref([]);
jscz_lb(lbData).then(res => {
  pageData.value = res.data.page_data;
  console.log(pageData.value);
})
</script>
<style lang="scss" scoped>
* {
  --van-nav-bar-arrow-size: 0.5*13.3vw;
  --van-nav-bar-icon-color: #fff;
  --van-nav-bar-title-text-color: #fff;
  --van-nav-bar-title-font-size: 0.36*13.3vw;
  --van-nav-bar-background: #003eee;
}

::v-deep .van-nav-bar {
  .van-nav-bar__title {
    font-weight: 350;
    font-family: Segoe UI, Segoe UI-Regular;
  }
}

.jscz {
  min-height: 100vh;
  background-color: #fff;
}

.js-kind {
  box-sizing: border-box;

  li {
    height: 2*13.3vw;
    font-size: 0.32*13.3vw;
    padding-top: 0.2*13.3vw;
    padding-left: 0.2*13.3vw;
    box-sizing: border-box;
    border-bottom: 1px solid #e4e4e4;

    a {
      display: flex;

      img {
        width: 2.58*13.3vw;
        height: 1.6*13.3vw;
        background: rgba(0, 0, 0, 0);
        border-radius: 0.1*13.3vw;
      }

      .des {
        height: 100%;
        line-height: 0.4*13.3vw;
        padding: 0.2*13.3vw;
        box-sizing: border-box;

        p {
          height: 0.45*13.3vw;
          line-height: 0.45*13.3vw;
        }

        .des-title {
          font-size: 0.28*13.3vw;
          font-family: Segoe UI, Segoe UI-Regular;
          font-weight: 400;
          color: #000000;
        }

        .des-nav {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-family: Segoe UI, Segoe UI-Regular;
          width: 4.24*13.3vw;
          opacity: 0.5;
          font-size: 0.24*13.3vw;
          font-weight: 400;
          color: #000000;
        }

        .des-total {
          font-size: 0.24*13.3vw;
          font-family: Segoe UI, Segoe UI-Regular;
          font-weight: 400;

          .des-hour {
            //   width: 0.98*13.3vw;
            color: #003eee;
            margin-right: 0.5*13.3vw;
          }

          .des-browse {
            opacity: 0.5;
            color: #000000;
          }
        }
      }
    }
  }
}
</style>
