|
|
@@ -1,913 +0,0 @@
|
|
|
-<!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>
|