|
|
@@ -0,0 +1,913 @@
|
|
|
+<!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">更多 ></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">全部 ></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>
|
NGS