1585346868
/
NGS


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <title data-i18n="home.title">首页</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#ff4c3b" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="">
<meta name="msapplication-TileImage" content="#">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 


<link rel="icon" href="#" type="image/x-icon" />
<link rel="apple-touch-icon" href="#">

<link rel="stylesheet" id="rtl-link" type="text/css" href="https://txbj.assets.youyanen.com/student/browsers/assets/css/vendors/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://txbj.assets.youyanen.com/student/browsers/assets/css/vendors/slick-theme.css">
<link rel="stylesheet" type="text/css" href="https://txbj.assets.youyanen.com/student/browsers/assets/css/vendors/slick.css">
<link rel="stylesheet" type="text/css" href="https://txbj.assets.youyanen.com/student/browsers/assets/css/vendors/iconly.css">
<link rel="stylesheet" id="change-link" type="text/css" href="https://txbj.assets.youyanen.com/student/browsers/assets/css/style.css">
<link rel="stylesheet" href="https://txbj.assets.youyanen.com/student/browsers/assets/css/font-awesome.min.css">
<link rel="stylesheet" href="https://txbj.assets.youyanen.com/student/browsers/assets/css/cropper.min.css">
<link rel="stylesheet" href="https://txbj.assets.youyanen.com/browser/css/bootstrap-icons.min.css">

  <style>
    body.home2-page {
      background: #f5f5f5;
      padding-bottom: 72px;
    }

    body.home2-page header {
      position: relative;
      left: 0 !important;
      top: 0;
      transform: none !important;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      max-width: 100% !important;
      margin: 0;
      padding: 12px 15px 0;
      background: #f5f5f5;
      box-shadow: none;
      z-index: 1;
    }

    body.home2-page header .brand-logo {
      display: block;
      line-height: 0;
    }

    body.home2-page header .brand-logo img {
      width: auto;
      max-width: 140px;
      max-height: 36px;
      height: auto;
      object-fit: contain;
      display: block;
    }

    .home2-page .loader {
      display: none !important;
    }

    .home2-wrap {
      background: #f5f5f5;
    }

  /* Nav icons */
    .home2-nav {
      display: flex;
      justify-content: space-between;
      padding: 18px 16px 8px;
      background: #f5f5f5;
    }

    .home2-nav-item {
      flex: 1;
      text-align: center;
      text-decoration: none;
      color: #444;
    }

    .home2-nav-icon {
      width: 52px;
      height: 52px;
      margin: 0 auto 8px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 22px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
    }

    .home2-nav-icon.orange { background: #ff4c3b; }
    .home2-nav-icon.purple { background: #9b59b6; }
    .home2-nav-icon.green { background: #2ecc71; }
    .home2-nav-icon.blue { background: #3498db; }
    .home2-nav-icon.pink { background: #ff6b9d; }

    .home2-nav-label {
      font-size: 12px;
      font-weight: 500;
    }

  /* Promo banner */
    .home2-promo {
      margin: 8px 15px 0;
      border-radius: 16px;
      overflow: hidden;
      background: linear-gradient(135deg, #ff7a6a 0%, #ff4c3b 55%, #e53e30 100%);
      min-height: 96px;
      display: flex;
      align-items: center;
      text-decoration: none;
      color: #fff;
      box-shadow: 0 6px 18px rgba(255, 143, 0, .28);
    }

    .home2-promo-img {
      width: 110px;
      height: 96px;
      object-fit: contain;
      flex-shrink: 0;
      margin-left: 4px;
    }

    .home2-promo-text {
      flex: 1;
      padding: 12px 14px 12px 0;
    }

    .home2-promo-title {
      margin: 0 0 6px;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: 1px;
    }

    .home2-promo-sub {
      margin: 0;
      font-size: 13px;
      font-weight: 600;
      opacity: .95;
    }

    .home2-promo-sub .yellow {
      color: #ffe066;
    }

  /* Section */
    .home2-section {
      padding: 22px 15px 0;
    }

    .home2-section-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .home2-section-title {
      margin: 0;
      font-size: 20px;
      font-weight: 800;
      color: #222;
      line-height: 1.3;
    }

    .home2-section-sub {
      margin: 4px 0 0;
      font-size: 13px;
      color: #999;
      font-weight: 400;
    }

    .home2-more-btn {
      flex-shrink: 0;
      padding: 4px 12px;
      border: 1px solid #ddd;
      border-radius: 999px;
      background: #fff;
      color: #666;
      font-size: 12px;
      text-decoration: none;
      white-space: nowrap;
      line-height: 1.6;
    }

  /* Video scroll */
    .home2-video-scroll {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 6px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }

    .home2-video-scroll::-webkit-scrollbar {
      display: none;
    }

    .home2-video-card {
      flex: 0 0 68%;
      max-width: 280px;
      scroll-snap-align: start;
      border-radius: 14px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
      text-decoration: none;
      color: inherit;
      position: relative;
    }

    .home2-video-thumb {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 10;
      background: linear-gradient(135deg, #e8f4fc 0%, #d4e8f7 100%);
      overflow: hidden;
    }

    .home2-video-thumb img,
    .home2-video-preview {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .home2-video-preview {
      display: block;
      pointer-events: none;
    }

    .home2-video-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .home2-video-play {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, .12);
    }

    .home2-video-play span {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .88);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ff4c3b;
      font-size: 18px;
      padding-left: 3px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    }

    .home2-video-avatar {
      position: absolute;
      right: 8px;
      bottom: 8px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 2px solid #fff;
      object-fit: cover;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    }

    .home2-video-empty {
      padding: 28px 16px;
      text-align: center;
      color: #999;
      font-size: 14px;
      background: #fff;
      border-radius: 14px;
    }

    .home2-nav-item:hover {
      color: #444;
    }

    .home2-promo:hover {
      color: #fff;
    }

  /* Teacher recommend */
    .home2-teacher-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .home2-tr-card {
      position: relative;
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
      overflow: hidden;
      cursor: pointer;
    }

    .home2-tr-card-link {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .home2-tr-card-link:focus {
      outline: none;
    }

    .home2-tr-card-link:focus-visible {
      outline: 2px solid #ff4c3b;
      outline-offset: 2px;
    }

    .home2-tr-hot {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 8px 5px 10px;
      background: linear-gradient(135deg, #ffd54f 0%, #ffb300 100%);
      color: #7a4f00;
      font-size: 11px;
      font-weight: 700;
      border-radius: 14px 0 12px 0;
      line-height: 1.2;
    }

    .home2-tr-inner {
      display: flex;
      gap: 12px;
      padding: 12px;
      align-items: stretch;
    }

    .home2-tr-thumb {
      position: relative;
      flex: 0 0 118px;
      width: 118px;
      height: 118px;
      border-radius: 12px;
      overflow: hidden;
      display: block;
      background: #eee;
    }

    .home2-tr-thumb img,
    .home2-tr-thumb video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .home2-tr-thumb video {
      pointer-events: none;
    }

    .home2-tr-play {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .92);
      color: #ff4c3b;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      padding-left: 2px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    }

    .home2-tr-thumb-label {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 18px 6px 6px;
      background: linear-gradient(transparent, rgba(0, 0, 0, .62));
      color: #fff;
      font-size: 10px;
      line-height: 1.35;
      word-break: break-word;
    }

    .home2-tr-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-top: 2px;
    }

    .home2-tr-name-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }

    .home2-tr-name-main {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 6px;
    }

    .home2-tr-software {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex-shrink: 0;
    }

    .home2-tr-software-icon {
      width: 20px;
      height: 20px;
      object-fit: contain;
      display: block;
    }

    .home2-tr-name {
      font-family: Georgia, "Times New Roman", "Songti SC", serif;
      font-size: 20px;
      font-weight: 700;
      color: #111;
      line-height: 1.1;
    }

    .home2-tr-loc {
      font-size: 13px;
      color: #999;
    }

    .home2-tr-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px;
    }

    .home2-tr-tag {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 999px;
      background: #fff5f4;
      color: #ff4c3b;
      border: 1px solid rgba(255, 76, 59, .35);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
      white-space: nowrap;
    }

    .home2-tr-tag-primary {
      background: linear-gradient(135deg, #ff6a5a 0%, #ff4c3b 100%);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 2px 6px rgba(255, 76, 59, .28);
    }

    .home2-tr-bottom {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    .home2-tr-book-btn {
      position: relative;
      z-index: 1;
      flex-shrink: 0;
      padding: 6px 14px;
      border: 1px solid #ff4c3b;
      border-radius: 999px;
      color: #ff4c3b;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      background: #fff;
      white-space: nowrap;
    }

    .home2-tr-book-btn:hover {
      color: #ff4c3b;
      background: #fff5f4;
    }

    .home2-teacher-empty {
      padding: 28px 16px;
      text-align: center;
      color: #999;
      font-size: 14px;
      background: #fff;
      border-radius: 14px;
    }

    @media (max-width: 360px) {
      .home2-nav-icon { width: 46px; height: 46px; font-size: 19px; }
      .home2-nav-label { font-size: 11px; }
      .home2-tr-thumb { flex-basis: 104px; width: 104px; height: 104px; }
      .home2-tr-name { font-size: 18px; }
    }
  </style>
</head>

<body class="home2-page ">

  <!-- loader strat -->
<div class="loader">
    <span></span>
    <span></span>
</div>
<!-- loader end -->

<style>
header .brand-logo img.brand-logo-img {
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
    opacity: 0;
    transition: opacity .12s ease;
}

header .brand-logo img.brand-logo-img.is-ready {
    opacity: 1;
}
</style>

<header style="background-color: transparent;">
    <a href="/public/open/index.html" class="brand-logo">
        <img class="img-fluid brand-logo-img" alt="" id="img-logo-dark" width="179" height="34">
    </a>
</header>

 
  <div class="home2-wrap">

    <!-- Nav icons -->
    <nav class="home2-nav">
      <a href="/public/open/teacher.html" class="home2-nav-item">
        <div class="home2-nav-icon orange"><i class="fa fa-users"></i></div>
        <div class="home2-nav-label" data-i18n="home.nav_teacher">教师列表</div>
      </a>
      <a href="/public/open/book.html" class="home2-nav-item">
        <div class="home2-nav-icon purple"><i class="fa fa-book"></i></div>
        <div class="home2-nav-label" data-i18n="home.nav_book">教材库</div>
      </a>
      <a href="/public/user/course.html" class="home2-nav-item">
        <div class="home2-nav-icon green"><i class="fa fa-calendar"></i></div>
        <div class="home2-nav-label" data-i18n="home.nav_course">我的课程</div>
      </a>
      <a href="/public/open/teacher.html" class="home2-nav-item">
        <div class="home2-nav-icon pink"><i class="fa fa-play-circle"></i></div>
        <div class="home2-nav-label" data-i18n="home.nav_free">免费课</div>
      </a>
    </nav>

    <!-- Promo banner -->
    <!-- <a href="/public/open/book.html" class="home2-promo">
      <img class="home2-promo-img" src="/public/assets/images/index2/promo-boy.svg" alt="">
      <div class="home2-promo-text">
        <h2 class="home2-promo-title" data-i18n="home.promo_title">经典教材介绍</h2>
        <p class="home2-promo-sub"><span class="yellow">KID's BOX</span> / POWER UP</p>
      </div>
    </a> -->


    <!-- Video clips -->
    <section class="home2-section" style="display:none;padding-bottom: 24px;">
      <div class="home2-section-head">
        <div>
          <h2 class="home2-section-title" data-i18n="home.clips_title">来看精彩切片吧</h2>
          <p class="home2-section-sub" data-i18n="home.clips_sub">外教课堂切片</p>
        </div>
        <a href="/public/open/teacher.html" class="home2-more-btn" data-i18n="home.more">更多 &gt;</a>
      </div>
      <div class="home2-video-scroll" id="home2_video_list"></div>
    </section>

    <!-- Teacher recommend -->
    <section class="home2-section" style="padding-bottom: 24px;">
      <div class="home2-section-head">
        <div>
          <h2 class="home2-section-title" data-i18n="home.teacher_title">外教推荐</h2>
          <p class="home2-section-sub" data-i18n="home.teacher_sub">启蒙 / 绘本 / 儿歌 / 自然拼读</p>
        </div>
        <a href="/public/open/teacher.html" class="home2-more-btn" data-i18n="home.all">全部 &gt;</a>
      </div>
      <div class="home2-teacher-list" id="home2_teacher_list"></div>
    </section>

  </div>

  <div class="bottom-panel">
    <ul>
    <li>
        <a href="/public/open/index.html">
            <div class="icon">
                <i class="iconly-Home icli"></i>
                <i class="iconly-Home icbo"></i>
            </div>
            <span data-i18n="nav.home">首页</span>
        </a>
    </li>
    <!-- <li>
        <a href="/public/open/teacher.html">
            <div class="icon">
                <i class="iconly-Category icli"></i>
                <i class="iconly-Category icbo"></i>
            </div>
            <span data-i18n="nav.teacher">教师</span>
        </a>
    </li>

    <li>
        <a href="/public/open/book.html">
            <div class="icon">
                <i class="iconly-Document icli"></i>
                <i class="iconly-Document icbo"></i>
            </div>
            <span data-i18n="nav.book">教材库</span>
        </a>
    </li> -->
    <li>
        <a href="/public/user/course.html">
            <div class="icon">
                <i class="iconly-Calendar icli"></i>
                <i class="iconly-Calendar icbo"></i>
                <span class="bottom-homework-badge" id="bottom_homework_pending" hidden></span>
            </div>
            <span data-i18n="nav.course">课程</span>
        </a>
    </li>
    <li>
        <a href="/public/user/chatlist.html">
            <div class="icon">
                <i class="iconly-Chat icli"></i>
                <i class="iconly-Chat icbo"></i>
                <span class="bottom-im-badge" id="bottom_im_unread" hidden></span>
            </div>
            <span data-i18n="nav.message">消息</span>
        </a>
    </li>
    <li>
        <a href="/public/user/profile.html">
            <div class="icon">
                <i class="iconly-Profile icli"></i>
                <i class="iconly-Profile icbo"></i>
            </div>
            <span data-i18n="nav.profile">个人中心</span>
        </a>
    </li>
</ul>
<style>
  .bottom-panel ul li .icon {
    position: relative;
  }

  /* 覆盖 .bottom-panel ul li a span 的菜单文字样式，避免角标把图标撑开 */
  .bottom-panel ul li a .icon .bottom-im-badge,
  .bottom-panel ul li a .icon .bottom-homework-badge {
    position: absolute;
    top: -4px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    margin: 0;
    padding: 0 4px;
    border-radius: 999px;
    background: #ff4c3b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    text-transform: none;
    display: block;
    box-sizing: border-box;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
  }

  .bottom-panel ul li a .icon .bottom-homework-badge {
    right: -28px;
  }

  .bottom-panel ul li a .icon .bottom-im-badge[hidden],
  .bottom-panel ul li a .icon .bottom-homework-badge[hidden] {
    display: none !important;
  }
</style>
<script src="/public/assets/js/im-unread-badge.js"></script>
<script src="/public/assets/js/homework-pending-badge.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
  if (typeof I18n !== 'undefined') I18n.apply();

  // 基础路径（/public）请确保与页面中使用的一致
  const basePath = "/public";
  // 当前页面路径（不含域名）
  const currentPath = window.location.pathname;
  
  // 仅选择 .bottom-panel 内的导航链接
  const navLinks = document.querySelectorAll(".bottom-panel ul li a");
  
  navLinks.forEach(function(link) {
    const href = link.getAttribute("href");
    // 如果链接以 basePath 开头，则取其后面的部分
    const relativePath = href.startsWith(basePath) ? href.substring(basePath.length) : href;
    
    // 判断当前路径中是否包含该相对路径
    if (currentPath.includes(relativePath)) {
      link.parentElement.classList.add("active");
    } else {
      link.parentElement.classList.remove("active");
    }
  });
});

</script>
  </div>

  <script src="https://txbj.assets.youyanen.com/student/browsers/assets/js/jquery-3.3.1.min.js"></script>
<script src="https://txbj.assets.youyanen.com/student/browsers/assets/js/bootstrap.bundle.min.js"></script>
<script src="https://txbj.assets.youyanen.com/student/browsers/assets/js/slick.js"></script>
<script src="https://txbj.assets.youyanen.com/student/browsers/assets/js/filter.js"></script>
<script src="/public/assets/js/script.js"></script>
<script src="https://txbj.assets.youyanen.com/student/browsers/assets/js/sweetalert2.js"></script>
<script src="/public/assets/js/i18n.js"></script>
<script src="/public/assets/js/user.js"></script>
<script src="/public/assets/js/customer_service.js"></script>
<script src="/public/assets/js/utils.js"></script>
  <script src="/public/assets/js/home2_teacher.js"></script>

  <script>
    $(document).ready(function () {
      I18n.apply();
      loadHome2TeacherList();
      initCustomerServiceFab();
    });

    function getTeacherCountryLabel(country) {
      if (String(country) === '3') return I18n.t('home.country_ph');
      if (String(country) === '2') return I18n.t('home.country_us');
      if (String(country) === '1') return I18n.t('home.country_cn');
      return '';
    }

    function parseTeachingObjects(teacher) {
      try {
        return JSON.parse(teacher.teaching_objects || '[]');
      } catch (e) {
        return [];
      }
    }

    function buildTeacherThumbLabel(teacher) {
      var objects = parseTeachingObjects(teacher);
      var parts = [];
      for (var i = 0; i < objects.length; i++) {
        if (String(objects[i]) === '1') parts.push(I18n.t('home.object_kids'));
        if (String(objects[i]) === '2') parts.push(I18n.t('home.object_adult'));
        if (String(objects[i]) === '3') parts.push(I18n.t('home.object_ielts'));
      }
      if (parts.length) return parts.join(' / ');
      return I18n.t('home.teacher_intro');
    }

    function renderHome2TeacherCard(teacher, index) {
      var detailUrl = '/public/open/teacher_details.html?id=' + teacher.id;
      var avatarUrl = teacher.avatar
        ? 'https://txbj.assets.youyanen.com/' + teacher.avatar
        : '/public/assets/images/avatar/default.png';
      var thumbMedia = '<img src="' + avatarUrl + '" alt="' + teacher.nickname + '" loading="lazy">';
      var hotHtml = Number(teacher.level) === 2
        ? '<span class="home2-tr-hot">' + I18n.t('home.gold') + '</span>'
        : '';
      var cardClass = hotHtml ? 'home2-tr-card has-hot' : 'home2-tr-card';
      var tagsHtml = Home2TeacherEva.buildCardTagsHtml(teacher.id, teacher);

      return '' +
        '<div class="' + cardClass + '">' +
          hotHtml +
          '<a class="home2-tr-card-link" href="' + detailUrl + '" aria-label="' + I18n.t('home.view_teacher', {name: teacher.nickname}) + '"></a>' +
          '<div class="home2-tr-inner">' +
            '<div class="home2-tr-thumb">' +
              thumbMedia +
              '<span class="home2-tr-thumb-label">' + buildTeacherThumbLabel(teacher) + '</span>' +
            '</div>' +
            '<div class="home2-tr-info">' +
              '<div class="home2-tr-name-row">' +
                '<div class="home2-tr-name-main">' +
                  '<span class="home2-tr-name">' + teacher.nickname + '</span>' +
                  '<span class="home2-tr-loc">' + getTeacherCountryLabel(teacher.country) + '</span>' +
                '</div>' +
                Home2TeacherEva.buildTeachingSoftwareHtml(teacher) +
              '</div>' +
              tagsHtml +
              '<div class="home2-tr-bottom">' +
                '<a class="home2-tr-book-btn" href="' + detailUrl + '">' + I18n.t('home.book') + '</a>' +
              '</div>' +
            '</div>' +
          '</div>' +
        '</div>';
    }

    function loadHome2TeacherList() {
      user.newTeacherList(function (code, msg, data) {
        var $list = $('#home2_teacher_list');
        $list.empty();
        if (code !== 200 || !data || !data.data || !data.data.length) {
          $list.html('<div class="home2-teacher-empty">' + I18n.t('home.no_teacher') + '</div>');
          return;
        }
        var teachers = data.data;
        for (var i = 0; i < teachers.length; i++) {
          $list.append(renderHome2TeacherCard(teachers[i], i));
        }
      });
    }

    function loadHome2VideoClips() {
      var teachers = user.getTeacherList({});
      var $list = $('#home2_video_list');
      $list.empty();

      var clips = [];
      if (teachers && teachers.length) {
        for (var i = 0; i < teachers.length; i++) {
          var teacher = teachers[i];
          if (!teacher.course_video) continue;
          var videos = [];
          try {
            videos = JSON.parse(teacher.course_video);
          } catch (e) {
            continue;
          }
          for (var j = 0; j < videos.length; j++) {
            clips.push({
              teacher: teacher,
              video: videos[j]
            });
            if (clips.length >= 6) break;
          }
          if (clips.length >= 6) break;
        }
      }

      if (!clips.length) {
        $list.html('<div class="home2-video-empty">' + I18n.t('home.no_clips') + '</div>');
        return;
      }

      for (var k = 0; k < clips.length; k++) {
        var item = clips[k];
        var teacher = item.teacher;
        var videoUrl = 'https://txbj.assets.youyanen.com/' + item.video;
        var avatar = teacher.avatar
          ? 'https://txbj.assets.youyanen.com/' + teacher.avatar
          : '/public/assets/images/avatar/default.png';
        var cardHtml =
          '<a class="home2-video-card" href="/public/open/teacher_details.html?id=' + teacher.id + '">' +
            '<div class="home2-video-thumb">' +
              '<video class="home2-video-preview" muted playsinline preload="metadata" src="' + videoUrl + '"></video>' +
              '<div class="home2-video-play"><span><i class="fa fa-play"></i></span></div>' +
              '<img class="home2-video-avatar" src="' + avatar + '" alt="">' +
            '</div>' +
          '</a>';
        $list.append(cardHtml);
      }
    }

  </script>
</body>

</html>