/* 模块背景色 */ .index-page, .activity-page { background: #fafafa; } img { object-fit: inherit !important; } * { box-sizing: border-box; } button { border: 0; } /* 浏览图标 */ .view-icon { width: 12px; height: 12px; background: url(/uploads/image/ssi/liulan-2x.png); display: inline-block; background-size: 12px 12px; margin-right: 5px; } /* 图书图片 */ .edit-icon { width: 12px; height: 12px; background: url(/uploads/image/ssi/kecheng-2x.png); display: inline-block; background-size: 12px 12px; margin-right: 5px; } /* .course-item .arrow-right-icon{ position: relative; left: 90px; } .livenum-box .arrow-right-icon{ position: relative; left: 400px; } .activity-item .arrow-right-icon{ position: relative; left: 100px; } */ .remen-icon { width: 52px; height: 23px; background: url(/uploads/image/ssi/remen-2x.png); display: inline-block; background-size: 52px 23px; position: absolute; margin-top: 20px; margin-left: -3px; } .time-gray-icon { width: 12px; height: 12px; background: url(/uploads/image/ssi/shijian-2x1.png); display: inline-block; background-size: 12px 12px; margin-right: 6px; vertical-align: middle; margin-bottom: 2.7px; } .address-icon { width: 12px; height: 12px; background: url(/uploads/image/ssi/dizhi-2x.png); display: inline-block; background-size: 12px 12px; margin-right: 6px; vertical-align: middle; margin-bottom: 3px; } .people-icon { width: 12px; height: 12px; background: url(/uploads/image/ssi/yuyuerenshu-2x.png); display: inline-block; background-size: 12px 12px; margin-right: 8px; } .people2-icon { width: 12px; height: 12px; background: url(/uploads/image/ssi/yuyuerenshu-2x1.png); display: inline-block; background-size: 12px 12px; margin-right: 6px; } .top1-icon { width: 80px; height: 32px; background: ; display: block; background-size: 80px 32px; margin: auto; } .top2-icon { width: 80px; height: 32px; background: ; display: block; background-size: 80px 32px; margin: auto; } .top3-icon { width: 80px; height: 32px; background: ; display: block; background-size: 80px 32px; margin: auto; } .top4-icon { width: 80px; height: 32px; background: ; display: block; background-size: 80px 32px; margin: auto; } .top5-icon { width: 80px; height: 32px; background: ; display: block; background-size: 80px 32px; margin: auto; } .top6-icon { width: 80px; height: 32px; background: ; display: block; background-size: 80px 32px; margin: auto; } .top1k-icon { width: 64px; height: 72px; background: url(/uploads/image/ssi/top1k-2x.png); display: block; background-size: 64px 72px; position: absolute; margin-top: 23px; margin-left: 56px; cursor: pointer; } .top2k-icon { width: 64px; height: 72px; background: url(/uploads/image/ssi/top2k-2x.png); display: block; background-size: 64px 72px; position: absolute; margin-top: 23px; margin-left: 56px; cursor: pointer; } .top3k-icon { width: 64px; height: 72px; background: url(/uploads/image/ssi/top3k-2x.png); display: block; background-size: 64px 72px; position: absolute; margin-top: 23px; margin-left: 56px; cursor: pointer; } .close-icon { width: 20px; height: 20px; background: url(/uploads/image/ssi/ic_close-2x.png); display: block; background-size: 20px 20px; position: absolute; top: 24px; right: 24px; cursor: pointer; } .fire-icon { width: 14px; height: 15px; background: url(/uploads/image/ssi/rd-2x.png); display: inline-block; background-size: cover; margin-left: 8px; } .red-dian{ display: block; width: 4px; height: 4px; background: #d71338; margin-top: 10px; margin-right: 8px; border-radius: 50%; } /* 轮播图 */ .top-box { display: flex; align-items: center; justify-content: center; height: 448px; } .banner-box { width: 100%; height: 448px; overflow: hidden; position: absolute; left: 0; } .banner-bg{ height: 448px; width: 100%; background: url(/uploads/image/ssi/adbgdefalut.jpg); background-size: cover; background-repeat: no-repeat; min-width: 1200px; margin: 0 auto; background-position: center; position: relative; } .left-card{ position: absolute; top: 32px; width: 1200px; left: 50%; margin-left: -600px; display: flex; flex-direction: column; align-items: flex-end; z-index: 1; pointer-events: none; } /* 免费领取 */ .qhkh-box { padding: 20px 24px; width: 282px; height: 180px; background: url(/uploads/image/ssi/kh-2x.png); background-size: cover; background-repeat: no-repeat; display: flex; flex-direction: column; justify-content: space-between; pointer-events: all; } .free-box{ padding: 20px 24px; width: 282px; height: 180px; background: url(/uploads/image/ssi/lq-2x.png); background-size: cover; background-repeat: no-repeat; display: flex; flex-direction: column; justify-content: space-between; margin-top: 24px; pointer-events: all; } .left-card h5{ font-size: 28px; font-weight: bold; color: #222222; } .left-card .desc{ font-size: 16px; font-weight: 400; color: #666666; } .left-card button{ width: fit-content; padding: 0 18px; line-height: 40px; border-radius: 20px; font-size: 14px; font-weight: 500; text-align: center; display: block; color: #ffffff; cursor: pointer; } .left-card .qhkh-box button{ background: #ff8048; } .left-card .free-box button{ background: #d71338; } /* 模块标题 */ .first-title { padding-top: 32px; display: flex; align-items: center; justify-content: space-between; width: auto; margin: auto; } .first-title h5{ font-size: 38px; font-weight: bold; color: #222222; display: flex; align-items: center; } .first-title span,.first-title a{ font-size: 16px; font-weight: 400; color: #666666; display: flex; align-items: center; cursor: pointer; } .first-title .arrow-right-icon{ width: 16px; height: 16px; position: static; margin-left: 9px; background-size: cover; } /* 模块描述 */ .content-box .live-box .desc { width: 600px; } /* 领取弹窗 */ .popup-bg { background: rgba(0, 0, 0, 0.4); width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 111111; display: none; } .popup-bg .popup-lqbox { position: fixed; top: 36%; left: 50%; margin-left: -150px; width: 300px; z-index: 1111; background: #ffffff; border-radius: 12px; text-align: center; padding: 60px 0; } .popup-bg .popup-lqbox p { font-size: 16px; font-weight: 500; color: #de2828; } .popup-bg .popup-lqbox img { width: 140px; height: 140px; margin-bottom: 15px; } /* 加载更多按钮 */ .more-btn { padding-bottom: 60px; } .more-btn button { padding: 0 26px; height: 40px; background: #fdf2f2; border-radius: 20px; font-size: 16px; font-weight: 500; color: #de2828; cursor: pointer; display: block; margin: 0 auto; } /* 导航栏标签 */ .navbar-box { text-align: center; padding-bottom: 39px; margin-top: 32px; } .navbar-box label { font-size: 20px; font-weight: 400; color: #222222; margin-right: 220px; cursor: pointer; position: relative; } .navbar-box label:last-of-type { margin-right: 0px; } .navbar-box .active { font-weight: 500; color: #de2828; } .navbar-box .active::after { content: ""; width: 88px; height: 4px; background: #de2828; border-radius: 4px; display: inline-block; position: absolute; margin-top: 40px; left: 50%; margin-left: -44px; } /* 滚动条 */ .scroll-view::-webkit-scrollbar { display: none; } .scroll-view-box { width: auto; height: 48px; margin: auto; background: #f5f5f5; border-radius: 24px; font-size: 16px; font-weight: 500; padding: 4px 0px 4px 4px; margin-top: 32px; display: flex; align-items: center; justify-content: flex-start; position: relative; } .scroll-view { width: inherit; overflow-x: auto; overflow-y: hidden; white-space: nowrap; margin-right: 48px; } .scroll-view .swiper-slide { width: auto !important; } .scroll-view label { padding: 0 14px; height: 40px; line-height: 40px; display: inline-block; cursor: pointer; } .activity-box .scroll-view .active, .activity-box .scroll-view label{ padding: 0 28px; } .scroll-view .active { color: #ffffff; height: 40px; padding: 0 18px; background: #d71338; border-radius: 20px; } /* 课程精选 */ .course-content { margin: 0 auto; margin-top: 24px; width: 1200px; display: flex; flex-direction: row; justify-content: flex-start; } .course-item:hover { background: #ffffff; } .course-item { display: flex; flex-direction: column; width: 282px; background: #ffffff; box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 0.16); border-radius: 12px; cursor: pointer; margin-right: 24px; padding-bottom: 20px; } .course-item img { width: 282px; height: 160px; border-radius: 12px 12px 0px 0px; margin: 0; } .course-item h5 { font-size: 18px; font-weight: 500; color: #222222; margin-top: 12px; margin-bottom: 20px; margin-left: 16px; padding: 0px; text-align: left; } .course-item p { font-size: 14px; font-weight: 400; color: #666666; } .content-box .learn-btn{ width: 100%; height: 40px; background: rgba(222, 40, 40, 0.04); border-radius: 20px; font-size: 14px; font-weight: 500; color: #de2828; display: block; margin: auto; cursor: pointer; } .course-item .learn-btn{ margin: 0 16px; width: calc(100% - 32px); } .activity-item .learn-btn{ margin-top: 16px; } .course-item .num-box { font-size: 12px; font-weight: 400; color: #999999; display: flex; align-items: center; position: relative; padding-bottom: 24px; } .num-box span:not(:last-of-type) { margin-right: 30px; } /* 精选直播 */ .line-item { width: 6px; height: 6px; background: #666666; display: block; border-radius: 50%; margin-bottom: 84px; position: absolute; margin-top: 41px; } .time-box>div:not(:last-child) .line-item::after{ width: 2px; height: 107px; background: #eeeeee; content: ""; display: block; position: relative; left: 2px; top: 6px; } .live-box { width: 894px; } .live-redian-box{ display: flex; } #redian-content{ position: relative; } .redian-box{ margin-left: 24px; background: #ffffff; box-shadow: 0px 2px 4px 0px rgba(221,221,221,0.16); border-radius: 12px; border: 1px solid #f5f5f5; margin-left: 24px; width: 280px; height: auto; margin-top: 32px; padding: 24px 20px; } .redian-box .first-title h5{ font-size: 20px; font-weight: bold; color: #222222; } .redian-box .first-title{ padding: 0; } .redian-item{ font-size: 16px; font-weight: 400; color: #222222; line-height: 24px; margin-top: 26px; display: flex; cursor: pointer; } .redian-item p{ width: 219px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .redian-item p a{ font-size: 16px !important; font-weight: 400 !important; color: #222222 !important; } .live-content { display: flex; margin-top: 24px; } .live-time-item.active { background: #ffffff; border: 1px solid #f5f5f5; box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 0.16); border-radius: 12px; } .info-content{ display: flex; flex-direction: row; width: 100%; } .live-time-item { width: 244px; padding: 20px 20px; cursor: pointer; margin-left: 18px; } .live-time-item span { font-size: 16px; font-weight: 400; color: #666666; margin-bottom: 2px; } .live-time-item h5 { font-size: 18px; font-weight: 500; color: #222222; } .live-info-item { background: #ffffff; box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 0.16); border-radius: 12px; cursor: pointer; } .content-box .live-item2 .learn-btn{ width: 200px; height: 28px; border-radius: 0px 0px 6px 6px; display: block; padding: 0; margin: 0; } .live-item1{ margin-right: 24px; width: 435px; } .content-box .live-item11 .learn-btn{ margin-top: 36px; } .live-item11{ padding: 35px 36px 35px 32px; display: flex; justify-content: flex-start; flex: 1; border: 1px solid #f5f5f5; } .live-info-item.live-item11 span{ font-size: 16px; font-weight: 400; color: #222222; margin: 24px 0 16px 0; } .live-info-item.live-item11 .livenum-box label{ font-size: 16px; font-weight: 400; color: #999999; } .live-info-item.live-item11 .time-icon{ width: 16px; height: 16px; background-size: cover; margin-right: 8px; } .live-info-item.live-item11 .people-icon{ width: 16px; height: 16px; background-size: cover; margin-right: 8px; } .live-item2{ display: flex; flex-direction: row; padding: 19px 16px; margin-bottom: 24px; border: 1px solid #f5f5f5; } .live-item3{ display: flex; flex-direction: row; width: 435px; height: 112px; margin-bottom: 24px; } .live-item3:last-child,.live-item2:last-child{ margin-bottom: 0px; } .live-info-item.live-item1>div{ padding: 20px 20px 24px 20px; } .live-info-item.live-item3>div{ padding-right: 16px; flex: 1; } .flex-between{ display: flex; flex-direction: column; justify-content: space-between; width: 100%; } .live-info-item.live-item11 .liveyg-icon{ margin-top: 55px; } .live-info-item.live-item2 .liveyg-icon{ margin-top: 36px; } .live-info-item.live-item1 h5 { font-size: 22px; font-weight: 500; color: #222222; margin-bottom: 21px; } .live-info-item.live-item11 h5 { font-size: 24px; font-weight: 500; color: #222222; } .live-info-item.live-item2 h5{ margin-top: 9px; } .live-info-item.live-item1 img { width: 435px; height: 247px; border-radius: 12px 12px 0px 0px; display: block; } .live-info-item.live-item11 img { width: 550px; height: 312px; border-radius: 12px; margin-right: 32px; display: block; } .live-info-item.live-item2 img { width: 200px; height: 112px; border-radius: 6px 6px 0px 0px; display: block; margin-right: 16px; } .live-info-item.live-item3 img { width: 200px; border-radius: 12px 0px 0px 12px; display: block; margin-right: 16px; } .live-info-item.live-item3 h5 { font-size: 18px; font-weight: 500; color: #222222; margin-top: 4px; min-height: 52px; } .live-info-item span { font-size: 12px; font-weight: 400; color: #222222; margin-top: 12px; display: flex; align-items: center; } .live-info-item h5 { font-size: 22px; font-weight: 500; color: #222222; } .live-info-item p { font-size: 16px; font-weight: 400; color: #666666; margin-top: 6px; } .livenum-box label { font-size: 12px; font-weight: 400; color: #999999; margin: 0; } .livenum-box { margin-top: 6px; display: flex; align-items: center; position: relative; } .nodate{ padding: 20px 0 70px 0; font-size: 16px; font-weight: 400; color: #666666; text-align: center; margin: auto; } .nodate-icon{ width: 288px; height: 180px; background: url(/uploads/image/ssi/zwsj-2x.png); display: block; background-size: 288px 180px; margin: auto; margin-bottom: 8px; } .content-box{ width: 1200px; margin: auto; } /* 上甲活动行 */ .activity-box { position: relative; } .activity-content { margin: auto; width: 1200px; margin-top: 24px; display: flex; } .activity-item:not(:last-child) { margin-right: 24px; } .activity-item:hover { background: #ffffff; } .activity-item { width: 282px; background: #ffffff; box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 0.16); border-radius: 12px; cursor: pointer; display: flex; flex-direction: column; } .activity-item > div { padding: 12px 16px 16px 16px; display: flex; flex-direction: column; justify-content: space-between; flex: 1; } .activity-item > img { width: 100%; height: 160px; border-radius: 12px 12px 0px 0px; } .activity-item > img.default { background: #eee; } .activity-item p { font-size: 12px; font-weight: 400; color: #999999; } .activity-item p:first-of-type { margin-bottom: 9px; } .activity-item h5 { font-size: 18px; font-weight: 500; color: #222222; margin-bottom: 12px; } .activity-item span:last-of-type { margin-top: 12px; margin-bottom: 4px; } /* 达人榜 */ .rank-content { display: flex; justify-content: flex-start; margin-top: 24px; } .person-item:not(:last-child) { margin-right: 24px; } .person-item { width: 178px; min-width: 178px; height: 200px; background: #ffffff; box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 0.16); border-radius: 12px; border: 1px solid #f5f5f5; text-align: center; font-size: 20px; font-weight: 400; color: #222222; } .person-item img { width: 64px; height: 64px; border-radius: 50%; margin: 31px auto 11px; display: block; border: 2px solid #eeeeee; cursor: pointer; } .rank-box .more-btn { margin-top: 32px; } /* 上甲合作机构 */ .partners-item label { font-size: 20px; font-weight: 500; color: #de2828; position: relative; padding-left: 16px; margin: 24px 16px 0 0; display: block; } .partners-item label::after { content: ""; display: inline-block; position: absolute; width: 4px; height: 20px; background: #d71338; border-radius: 20px; left: 0; top: 2px; } .partners-item .imglist { display: flex; flex-wrap: wrap; flex-direction: row; width: 1232px; margin: auto; justify-content: flex-start; } .partners-item .imgitem { width: 282px; background: #ffffff; box-shadow: 0px 2px 8px 0px rgba(204, 204, 204, 0.16); border-radius: 12px; border: 1px solid #f5f5f5; margin-right: 24px; margin-top: 24px; } .partners-item .imgitem:nth-child(4n) { margin-right: 0px; } .imgitem img { /* width: 248px; */ height: 83px; display: block; margin: 2.5px auto; cursor: pointer; } .pore { position: relative; } .flex1 { flex: 1; } .flex-column-between { display: flex; flex-direction: column; justify-content: space-between; flex: 1; } /* 一行省略 */ .course-item h5, .course-item p, .live-time-item span, .live-info-item p, .live-info-item.live-item1 h5, .activity-item p, .person-item span { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-line-clamp: 1; -webkit-box-orient: vertical !important; } /* 二行省略 */ .live-time-item h5, .live-info-item.live-item3 h5, .live-info-item.live-item2 h5, .live-info-item.live-item11 h5, .activity-item h5 { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-line-clamp: 2; -webkit-box-orient: vertical !important; } /* el-tabs标签样式 */ .index-nav-bar .el-tabs__nav-wrap::after { height: 0; } .index-nav-bar { padding: 0 24px; list-style: none; margin-bottom: 0; margin-top: 32px; margin-bottom: 24px; } .index-nav-bar .el-tabs__header { margin: 0; } .index-nav-bar .el-tabs__nav-scroll { width: max-content; margin: auto; } .index-nav-bar .el-tabs, .index-nav-bar.el-tabs { position: relative; } .index-nav-bar.el-tabs .el-tabs__item:not(:last-of-type) { margin-right: 220px; } .index-nav-bar.el-tabs .el-tabs__item { font-size: 20px; color: #222222; font-weight: 400; position: relative; list-style: none; padding: 0; cursor: pointer; border-bottom: none; float: left; line-height: 55px; height: 55px; } .index-nav-bar .el-tabs__active-bar { width: 60px; height: 4px; background: #de2828; border-radius: 4px; font-weight: 500; color: #de2828; } .content-box,.top-box{ display: none; } .course-content,.live-content,.activity-content,.rank-content{ position: relative; } .vh100{ min-height: 100vh; } .time-box>div { position: relative; } .popup-wrap { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, .4); z-index: 10; display: none; } /* .el-table__row:hover{ background: #fdf2f2; } */ .popup-box { background: #ffffff; border-radius: 12px; font-size: 16px; color: #666666; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 400px; min-height: 360px; } .popup-head { height: 72px; padding: 0 24px; border-radius: 12px 12px 0px 0px; display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 500; color: #323232; border-bottom: 1px solid #eeeeee; } .close-icon { display: inline-block; width: 20px; height: 20px; cursor: pointer; } .popup-content { overflow: hidden; display: flex; height: 288px; } .popup-content .left { width: 401px; padding: 24px 24px 40px; overflow: auto; } .popup-head-img { display: inline-block; width: 60px; height: 60px; margin-right: 20px; border-radius: 50%; } .left>div{ display: flex; align-items: center; margin-bottom: 12px; } /* .left>p{ height: 152px; } */ .popup-content .name { font-weight: 500; color: #222222; } .popup-content .right { border-left: 1px solid #eeeeee; text-align: center; line-height: 24px; color: #222222; width: 239px; padding-top: 40px; } .code-img { display: block; width: 136px; height: 136px; margin: 0 auto 16px; } .live-info-item { position: relative; } .live-info-item.live-item1>div.livenum-box{ justify-content: space-between; padding: 0 16px; position: absolute; top: 207px; margin: 0; height: 40px; background: linear-gradient(180deg, rgba(19,9,44,0) 0%, #323232 100%); width: 100%; margin: 0; } .live-item1 .livenum-box>span{ font-size: 12px; font-weight: 500; color: #ff853d; display: flex; align-items: center; margin: 0; } .live-item1 .livenum-box label{ font-size: 12px; font-weight: 400; color: #ffffff; } /* 活动行列表页 */ .activity-page .content-box { margin-bottom: 58px; } .right-scroll-icon.up { transform: rotate(-90deg); } .right-scroll-icon.down { transform: rotate(90deg); } .more-menu-popup { position: absolute; left: 0; right: 0; top: 173px; width: 100%; padding: 24px 0 4px 24px; background: #ffffff; box-shadow: 0px 2px 4px 0px rgba(221,221,221,0.16); border-radius: 12px; border: 1px solid #eeeeee; } .activity-page .more-menu-popup { top: 56px; } .more-menu-popup span { display: inline-block; height: 32px; line-height: 32px; text-align: center; background: #fafafa; border-radius: 20px; font-size: 14px; font-weight: 400; color: #333333; padding: 0 20px; margin-right: 24px; margin-bottom: 20px; cursor: pointer; } .more-menu-popup span.active { background: #fef7f7; font-weight: 500; color: #de2828; } .activity-page .activity-content { flex-wrap: wrap; } .activity-page .activity-item { margin-right: 24px; margin-bottom: 24px; } .activity-page .activity-item:nth-child(4n) { margin-right: 0; }