1562 lines
40 KiB
CSS
1562 lines
40 KiB
CSS
|
@charset "UTF-8";
|
||
|
|
body {
|
||
|
|
-webkit-user-select: none;
|
||
|
|
-moz-user-select: none;
|
||
|
|
-ms-user-select: none;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right_side_content .template-content {
|
||
|
|
padding: 40px 40px 60px 40px;
|
||
|
|
position: relative;
|
||
|
|
padding-left: 153px;
|
||
|
|
}
|
||
|
|
.template-content .tip-box {
|
||
|
|
width: 100%;
|
||
|
|
height: 30px;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 30px;
|
||
|
|
text-align: center;
|
||
|
|
border: 1px dashed #ccc;
|
||
|
|
color: rgba(41, 43, 51, 0.6);
|
||
|
|
}
|
||
|
|
.template-content > div:not(:last-child) {
|
||
|
|
margin-right: 40px;
|
||
|
|
}
|
||
|
|
.template-content > .module-panel {
|
||
|
|
width: 90px;
|
||
|
|
position: absolute;
|
||
|
|
left: 260px;
|
||
|
|
max-height: 500px;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar{
|
||
|
|
width: 5px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
border-radius: 0;
|
||
|
|
background-color: rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
|
||
|
|
background-color: rgba(0,0,0,.06);
|
||
|
|
}
|
||
|
|
.template-content > .module-panel > .desc {
|
||
|
|
cursor: default;
|
||
|
|
font-size: 12px;
|
||
|
|
font-family: "PingFang SC Regular";
|
||
|
|
color: rgba(41, 43, 51, 0.6);
|
||
|
|
margin-bottom: 18px;
|
||
|
|
}
|
||
|
|
.template-content > .module-panel .module-item {
|
||
|
|
width: 73px;
|
||
|
|
height: 73px;
|
||
|
|
background-color: rgba(0, 182, 242, 0.1);
|
||
|
|
border-radius: 5px;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.template-content > .module-panel .module-item:last-child {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.template-content > .module-panel .module-item.selected {
|
||
|
|
background-color: #00b6f2;
|
||
|
|
}
|
||
|
|
.template-content > .module-panel .module-item.selected > p {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.template-content > .module-panel .module-item > p {
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 73px;
|
||
|
|
color: #00B6F2;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.template-content > .module-panel .two-line-desc {
|
||
|
|
padding-top: 20px;
|
||
|
|
}
|
||
|
|
.template-content > .module-panel .two-line-desc > p {
|
||
|
|
line-height: 20px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel {
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
width: 377px;
|
||
|
|
position: relative;
|
||
|
|
background: #F6F6F6;
|
||
|
|
margin-left: 100px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel > div {
|
||
|
|
position: relative;
|
||
|
|
-webkit-box-sizing: content-box;
|
||
|
|
box-sizing: content-box;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .header {
|
||
|
|
height: 64px;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
-webkit-box-align: center;
|
||
|
|
-ms-flex-align: center;
|
||
|
|
align-items: center;
|
||
|
|
-webkit-box-pack: justify;
|
||
|
|
-ms-flex-pack: justify;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 20px 17px 0;
|
||
|
|
background-color: #22292C;
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .header .cross-icon {
|
||
|
|
width: 14px;
|
||
|
|
height: 14px;
|
||
|
|
background: url("../img/store/white-cross.png") no-repeat center/cover;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .header .ellipsis-icon {
|
||
|
|
width: 16px;
|
||
|
|
height: 4px;
|
||
|
|
background: url("../img/store/white-ell.png") no-repeat center/cover;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .header > p {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.template-content > .display-panel .banner-box {
|
||
|
|
padding-bottom: 5px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .banner-box .banner-container {
|
||
|
|
width: 375px;
|
||
|
|
height: 210px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .imagescontent-box .images-container {
|
||
|
|
width: 375px;
|
||
|
|
height: 139px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .imagescontent-box .images-container img{
|
||
|
|
width: 100%;
|
||
|
|
height: 119px;
|
||
|
|
padding: 0 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-content > .display-panel .banner-box .banner-container > img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .banner-indicator {
|
||
|
|
width: 100%;
|
||
|
|
height: 20px;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
-webkit-box-pack: center;
|
||
|
|
-ms-flex-pack: center;
|
||
|
|
justify-content: center;
|
||
|
|
-webkit-box-align: center;
|
||
|
|
-ms-flex-align: center;
|
||
|
|
align-items: center;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: 8px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .banner-box .banner-indicator .indicator {
|
||
|
|
width: 4px;
|
||
|
|
height: 4px;
|
||
|
|
margin: 1px 5px 1px 0;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: #aaa;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .banner-box .banner-indicator .indicator:first-child {
|
||
|
|
width: 6px;
|
||
|
|
height: 6px;
|
||
|
|
background-color: rgba(255, 255, 255, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-content > .display-panel .banner-box .showBig,.template-content > .display-panel .banner-box .showSmall{
|
||
|
|
display: flex;
|
||
|
|
width: 800px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .banner-box .showSmall .banner-container{
|
||
|
|
width: 321px;
|
||
|
|
height: 180px;
|
||
|
|
margin: 0 0 0 26px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .banner-box .showSmall .banner-container img,#display_images{
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.template-content > .display-panel .search-box {
|
||
|
|
padding: 5px 15px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .search-box .search {
|
||
|
|
width: 100%;
|
||
|
|
height: 30px;
|
||
|
|
background: #f5f5f5;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .search-box .search .search-icon {
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
background: url("../img/store/search.png") no-repeat center/cover;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .search-box .search .search-text {
|
||
|
|
line-height: 30px;
|
||
|
|
color: rgba(41, 43, 51, 0.4);
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .mui-slider-indicator {
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
-webkit-box-pack: center;
|
||
|
|
-ms-flex-pack: center;
|
||
|
|
justify-content: center;
|
||
|
|
-webkit-box-align: center;
|
||
|
|
-ms-flex-align: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .mui-table-view::before,
|
||
|
|
.template-content > .display-panel .mui-table-view::after {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .listcontent-box {
|
||
|
|
padding: 15px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-content > .display-panel .listcontent-box.withtitle {
|
||
|
|
padding: 0 0 15px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-content > .display-panel .imagescontent-box {
|
||
|
|
padding: 15px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-content > .display-panel .imagescontent-box.withtitle {
|
||
|
|
padding: 0 0 15px 0;
|
||
|
|
}
|
||
|
|
/* .template-content > .display-panel .listcontent-box > */
|
||
|
|
.course-box,.live-box,.images-box{
|
||
|
|
width: 100%;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
-webkit-box-pack: justify;
|
||
|
|
-ms-flex-pack: justify;
|
||
|
|
justify-content: space-between;
|
||
|
|
height: 50px;
|
||
|
|
/* padding: 0 15px; */
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
/* .template-content > .display-panel .listcontent-box */
|
||
|
|
.course-box > p,.live-box > p,.images-box > p {
|
||
|
|
font-size: 18px;
|
||
|
|
line-height: 50px;
|
||
|
|
color: #292b33;
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .imagescontent-box > .images-list > .images-item {
|
||
|
|
width: calc(49% - 9px);
|
||
|
|
margin: 4px 0;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: wrap;
|
||
|
|
padding: 0 6px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .imagescontent-box > .images-list > .images-item > img{
|
||
|
|
width: 170px;
|
||
|
|
max-height: 96px;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* .template-content > .display-panel .listcontent-box > */
|
||
|
|
.course-box > a ,.live-box a,.live-box-more a,.course-box-more a,.images-box a,.images-box-more a{
|
||
|
|
font-size: 12px;
|
||
|
|
color: rgba(41, 43, 51, 0.4);
|
||
|
|
line-height: 46px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*直播开始*/
|
||
|
|
|
||
|
|
|
||
|
|
.template-content > .display-panel .listcontent-box > .course-list,.livecontent-box > .live-list,.imagescontent-box > .images-list{
|
||
|
|
padding-bottom: 15px;
|
||
|
|
width: 98%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content:space-between;
|
||
|
|
}
|
||
|
|
.livecontent-box >.live-list > li {
|
||
|
|
width: calc(49% - 10px);
|
||
|
|
margin: 5px 0;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: wrap;
|
||
|
|
padding: 0 6px;
|
||
|
|
|
||
|
|
|
||
|
|
/*height: 60px;
|
||
|
|
width: 100%;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
-webkit-box-align: center;
|
||
|
|
-ms-flex-align: center;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 15px;
|
||
|
|
margin-bottom: 15px;*/
|
||
|
|
}
|
||
|
|
.course-list > li:last-child,.livecontent-box > .live-list>li:last-child,.imagescontent-box > .images-list>li:last-child {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.live-list > li .teacher-box{
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.live-list > li .teacher-box > img{
|
||
|
|
width: 170px;
|
||
|
|
height: 95px;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
.live-list > li .teacher-box .live-time-box{
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
display: flex;
|
||
|
|
font-size: 14px;
|
||
|
|
bottom: 0;
|
||
|
|
justify-content: space-between;
|
||
|
|
background: linear-gradient(rgba(87,87,87,0),rgba(0,0,0,.5));
|
||
|
|
padding:0 10px;
|
||
|
|
border-radius:5px;
|
||
|
|
}
|
||
|
|
.live-list > li .teacher-box .live-state.liveback{
|
||
|
|
background:#0ed646;
|
||
|
|
}
|
||
|
|
.live-list > li .teacher-box .live-state.living{
|
||
|
|
background:#0486FE;
|
||
|
|
}
|
||
|
|
.live-list > li .teacher-box .live-state.livewait{
|
||
|
|
background:#F56C6C;
|
||
|
|
}
|
||
|
|
.live-list > li .teacher-box .live-state.liveend{
|
||
|
|
background:#CCCCCC;
|
||
|
|
}
|
||
|
|
.live-list > li .teacher-box .live-state{
|
||
|
|
position: absolute;
|
||
|
|
top: 6px;
|
||
|
|
right: 6px;
|
||
|
|
width: 50px;
|
||
|
|
height: 14px;
|
||
|
|
line-height: 14px;
|
||
|
|
border-radius: 7px;
|
||
|
|
text-align: center;
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 10px;
|
||
|
|
}
|
||
|
|
.live-list > li .content {
|
||
|
|
-webkit-box-flex: 1;
|
||
|
|
-ms-flex: 1 0 60%;
|
||
|
|
flex: 1 0 60%;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
-webkit-box-direction: normal;
|
||
|
|
-ms-flex-direction: column;
|
||
|
|
flex-direction: column;
|
||
|
|
-webkit-box-pack: justify;
|
||
|
|
-ms-flex-pack: justify;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-top: 6px;
|
||
|
|
height: 47px;
|
||
|
|
}
|
||
|
|
.livecontent-box .live-list > li .content > p {
|
||
|
|
width: auto;
|
||
|
|
font-size: 14px;
|
||
|
|
margin: 0;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
color: #292b33;
|
||
|
|
overflow : hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-line-clamp: 2;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
}
|
||
|
|
.course-list > li .content > span,.live-list > li .content > span {
|
||
|
|
width: 210px;
|
||
|
|
font-size: 12px;
|
||
|
|
color: rgba(41, 43, 51, 0.6);
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
.course-list > li .content > i,.live-list > li .content > i {
|
||
|
|
width: 100%;
|
||
|
|
float: left;
|
||
|
|
font-size: 12px;
|
||
|
|
font-style: normal;
|
||
|
|
color: rgba(41, 43, 51, 0.4);
|
||
|
|
}
|
||
|
|
.live-list > li .price {
|
||
|
|
-webkit-box-flex: 0;
|
||
|
|
-ms-flex: 0 0 15%;
|
||
|
|
flex: 0 0 15%;
|
||
|
|
color: #00B6F2;
|
||
|
|
font-size: 16px;
|
||
|
|
text-align: right;
|
||
|
|
margin-top: -30px;
|
||
|
|
}
|
||
|
|
.live-item .teacher-box .live-time-main{
|
||
|
|
color: #FFF;
|
||
|
|
font-size: 10px;
|
||
|
|
line-height: 23px;
|
||
|
|
}
|
||
|
|
.live-item .teacher-box .live-price{
|
||
|
|
color: #FFF;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
/*直播结束*/
|
||
|
|
|
||
|
|
|
||
|
|
.template-content > .display-panel .border-box {
|
||
|
|
padding: 5px 0;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .border-box .border-light {
|
||
|
|
height: 1px;
|
||
|
|
background-color: rgba(0, 0, 0, 0.05);
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .border-box .border-heavy {
|
||
|
|
height: 12px;
|
||
|
|
background-color: #fafafa;
|
||
|
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .text-box {
|
||
|
|
padding: 60px;
|
||
|
|
line-height: 1.5em;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .text-box > *:not(:last-child) {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .text-box img {
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
@media (-webkit-min-device-pixel-ratio: 2) {
|
||
|
|
.template-content > .display-panel .border-light, .template-content > .display-panel .border-heavy {
|
||
|
|
-webkit-transform: scaleY(0.5);
|
||
|
|
transform: scaleY(0.5);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (-webkit-min-device-pixel-ratio: 3) {
|
||
|
|
.template-content > .display-panel .border-light, .template-content > .display-panel .border-heavy {
|
||
|
|
-webkit-transform: scaleY(0.33);
|
||
|
|
transform: scaleY(0.33);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .grazy_worker {
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
-webkit-box-pack: center;
|
||
|
|
-ms-flex-pack: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 16px 0;
|
||
|
|
background: #F5F5F5;
|
||
|
|
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||
|
|
margin: 0 0 50px 0;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .grazy_worker i {
|
||
|
|
font-size: 12px;
|
||
|
|
color: rgba(41, 43, 51, 0.2);
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .menuNav {
|
||
|
|
display: inline-block;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 50px;
|
||
|
|
z-index: 102;
|
||
|
|
background: #fbfbfb;
|
||
|
|
border-top: 1px solid rgba(41, 43, 51, 0.12);
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .menuNav ul {
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .menuNav ul li {
|
||
|
|
-webkit-box-flex: 1;
|
||
|
|
-ms-flex: 1 1 20%;
|
||
|
|
flex: 1 1 20%;
|
||
|
|
height: 50px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .menuNav .navcontent {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .menuNav .navcontent a {
|
||
|
|
float: left;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding-top: 5px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .menuNav .navcontent a .bottom-tab-icon {
|
||
|
|
height: 24px;
|
||
|
|
display: block;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .menuNav .navcontent a .index-icon {
|
||
|
|
background: url("../img/store/1.png") no-repeat center/24px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .menuNav .navcontent a .course-icon {
|
||
|
|
background: url("../img/store/2.png") no-repeat center/24px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .menuNav .navcontent a .quiz-icon {
|
||
|
|
background: url("../img/store/3.png") no-repeat center/24px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .menuNav .navcontent a .discuss-icon {
|
||
|
|
background: url("../img/store/4.png") no-repeat center/24px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .menuNav .navcontent a .info-icon {
|
||
|
|
background: url("../img/store/5.png") no-repeat center/24px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .menuNav .navcontent a span {
|
||
|
|
float: left;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
color: rgba(41, 43, 51, 0.4);
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .menuNav .NavActive a .index-icon {
|
||
|
|
background: url("../img/store/1a.png") no-repeat center/24px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .menuNav .NavActive a .course-icon {
|
||
|
|
background: url("../img/store/2a.png") no-repeat center/24px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .menuNav .NavActive a .quiz-icon {
|
||
|
|
background: url("../img/store/3a.png") no-repeat center/24px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .menuNav .NavActive a .discuss-icon {
|
||
|
|
background: url("../img/store/4a.png") no-repeat center/24px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .menuNav .NavActive a .info-icon {
|
||
|
|
background: url("../img/store/5a.png") no-repeat center/24px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .menuNav .NavActive a span {
|
||
|
|
color: #292b33;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .editable {
|
||
|
|
cursor: pointer;
|
||
|
|
background: #FFF;
|
||
|
|
margin-top: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .mask {
|
||
|
|
position: absolute;
|
||
|
|
z-index: 999;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel {
|
||
|
|
width: 412px;
|
||
|
|
padding: 24px 20px;
|
||
|
|
background-color: #FAFAFA;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
border-radius: 5px;
|
||
|
|
position: fixed;
|
||
|
|
right: 50px;
|
||
|
|
top: 300px;
|
||
|
|
-webkit-transition: top 1s;
|
||
|
|
transition: top 1s;
|
||
|
|
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .panel-name {
|
||
|
|
font-size: 18px;
|
||
|
|
color: #292b33;
|
||
|
|
margin-bottom: 18px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .banner-setting .setting-item, .images-setting .setting-item {
|
||
|
|
padding: 15px;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
background-color: #fff;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .banner-setting .setting-item .img-box, .images-setting .setting-item .img-box{
|
||
|
|
-webkit-box-flex: 0;
|
||
|
|
-ms-flex: 0 0 106px;
|
||
|
|
flex: 0 0 106px;
|
||
|
|
height: 60px;
|
||
|
|
margin-right: 15px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .banner-setting .setting-item .img-box input, .images-setting .setting-item .img-box input {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .banner-setting .setting-item .img-box > .mask, .images-setting .setting-item .img-box > .mask {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: #FAFAFA;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .banner-setting .setting-item .img-box > .mask > p, .images-setting .setting-item .img-box > .mask > p {
|
||
|
|
text-align: center;
|
||
|
|
line-height: 60px;
|
||
|
|
color: #00b6f2;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .banner-setting .setting-item .img-box > .mask > .img-add-box ,.images-setting .setting-item .img-box > .mask > .img-add-box {
|
||
|
|
display: none;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .banner-setting .setting-item .img-box > .mask > .img-add-box > img , .images-setting .setting-item .img-box > .mask > .img-add-box > img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .banner-setting .setting-item .img-box > .mask > .img-add-box::after,.images-setting .setting-item .img-box > .mask > .img-add-box::after{
|
||
|
|
content: "修改";
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 60px;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
background-color: rgba(0, 0, 0, 0.6);
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .banner-setting .setting-item .img-box > .mask > .img-add-box:hover::after, .images-setting .setting-item .img-box > .mask > .img-add-box:hover::after {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .banner-setting .add-btn, .images-setting .add-btn {
|
||
|
|
height: 40px;
|
||
|
|
width: 100%;
|
||
|
|
background-color: #fff;
|
||
|
|
border: 1px solid #F5F5F5;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
-webkit-box-align: center;
|
||
|
|
-ms-flex-align: center;
|
||
|
|
align-items: center;
|
||
|
|
-webkit-box-pack: center;
|
||
|
|
-ms-flex-pack: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-bottom: 18px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .banner-setting .add-btn > .add-icon, .images-setting .add-btn > .add-icon {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background: url("../img/store/add.png") no-repeat center/cover;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .banner-setting .add-btn > p, .images-setting .add-btn > p {
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 14px;
|
||
|
|
color: rgba(41, 43, 51, 0.6);
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .banner-setting .info p , .images-setting .info p {
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 17px;
|
||
|
|
color: rgba(41, 43, 51, 0.4);
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .listcontent-setting {
|
||
|
|
/* display: none; */
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .listcontent-setting h4 ,.livecontent-setting h4 {
|
||
|
|
font-weight: 400;
|
||
|
|
color: #292b33;
|
||
|
|
font-size: 18px;
|
||
|
|
margin-bottom: 18px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .listcontent-setting > .course-setting,.livecontent-setting > .live-setting {
|
||
|
|
padding-bottom: 24px;
|
||
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .listcontent-setting > .course-setting .choose-course > p,.livecontent-setting > .live-setting .choose-live > p {
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #00B6F2;
|
||
|
|
line-height: 18px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .listcontent-setting > .caption-setting,.livecontent-setting > .caption-setting {
|
||
|
|
padding-top: 24px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .listcontent-setting > .caption-setting > .row:first-of-type,.livecontent-setting > .caption-setting > .row:first-of-type {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .listcontent-setting > .caption-setting .caption-content > input,.livecontent-setting > .caption-setting .caption-content > input,.more-url {
|
||
|
|
width: 100%;
|
||
|
|
height: 30px;
|
||
|
|
line-height: 30px;
|
||
|
|
padding: 0 0 0 15px;
|
||
|
|
border: 2px solid #f5f5f5;
|
||
|
|
}
|
||
|
|
.more-url{
|
||
|
|
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .listcontent-setting > .caption-setting .info,.livecontent-setting > .caption-setting .info {
|
||
|
|
padding-left: 78px;
|
||
|
|
font-size: 12px;
|
||
|
|
color: rgba(41, 43, 51, 0.4);
|
||
|
|
margin: 8px 0 18px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .listcontent-setting .panel-name,.template-content > .setting-panel .livecontent-setting .panel-name {
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 18px;
|
||
|
|
color: rgba(41, 43, 51, 0.6);
|
||
|
|
margin-right: 22px;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .listcontent-setting .row,.livecontent-setting .row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .listcontent-setting .row:not(:last-child),.livecontent-setting .row:not(:last-child) {
|
||
|
|
margin-bottom: 18px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .listcontent-setting .row > .content,.livecontent-setting .row > .content {
|
||
|
|
overflow: visible;
|
||
|
|
width: auto;
|
||
|
|
flex: 1;
|
||
|
|
flex-direction: row;
|
||
|
|
justify-content: flex-start;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .listcontent-setting .row > .content .select-box,.livecontent-setting .row > .content .select-box {
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .listcontent-setting .row > .content .select-box > .placeholder-box,.livecontent-setting .row > .content .select-box > .placeholder-box {
|
||
|
|
color: rgba(41, 43, 51, 0.8);
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .listcontent-setting .row > .content .checkbox ,.livecontent-setting .row > .content .checkbox{
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
border: 2px solid #f5f5f5;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .listcontent-setting .row > .content .checkbox.checked,.livecontent-setting .row > .content .checkbox.checked {
|
||
|
|
border: 0;
|
||
|
|
background: #00B6F2 url("../img/store/checked-tick.png") no-repeat center/8px 6px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .border-setting {
|
||
|
|
/* display: none; */
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .border-setting > h4 {
|
||
|
|
font-weight: 400;
|
||
|
|
color: #292b33;
|
||
|
|
font-size: 18px;
|
||
|
|
margin-bottom: 18px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .border-setting > .row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .border-setting > .row > .content {
|
||
|
|
overflow: visible;
|
||
|
|
width: auto;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .border-setting > .row > .content .select-box {
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .border-setting > .row > .content .select-box > .placeholder-box {
|
||
|
|
background-color: rgba(0, 0, 0, 0.05);
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .border-setting > .row > .content .select-box > .placeholder-box.light {
|
||
|
|
height: 1px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .border-setting > .row > .content .select-box > .placeholder-box.heavy {
|
||
|
|
height: 12px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .border-setting > .row > .content .select-box .slide-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 15px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .border-setting > .row > .content .select-box .slide-item > div {
|
||
|
|
background-color: rgba(0, 0, 0, 0.05);
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .border-setting > .row > .content .select-box .slide-item .light-weight {
|
||
|
|
height: 1px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .border-setting > .row > .content .select-box .slide-item .heavy-weight {
|
||
|
|
height: 12px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .border-setting .panel-name {
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 18px;
|
||
|
|
color: rgba(41, 43, 51, 0.6);
|
||
|
|
margin-right: 22px;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .text-setting {
|
||
|
|
display: none;
|
||
|
|
line-height: 1.5em;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .text-setting img {
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .link-box {
|
||
|
|
-webkit-box-flex: 1;
|
||
|
|
-ms-flex: 1;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .link-box > p {
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 20px;
|
||
|
|
color: rgba(41, 43, 51, 0.8);
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .link-box .select-box {
|
||
|
|
width: 100%;
|
||
|
|
height: 30px;
|
||
|
|
border: 2px solid #F5F5F5;
|
||
|
|
padding: 6px 3px 6px 8px;
|
||
|
|
border-radius: 3px;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
-webkit-box-pack: justify;
|
||
|
|
-ms-flex-pack: justify;
|
||
|
|
justify-content: space-between;
|
||
|
|
-webkit-box-align: center;
|
||
|
|
-ms-flex-align: center;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .link-box .select-box > .slide-box {
|
||
|
|
display: none;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 1;
|
||
|
|
top: 33px;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
padding: 5px 0;
|
||
|
|
background-color: #fff;
|
||
|
|
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
|
||
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .link-box .select-box > .slide-box > .slide-item {
|
||
|
|
width: 100%;
|
||
|
|
height: 30px;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 30px;
|
||
|
|
color: rgba(41, 43, 51, 0.8);
|
||
|
|
padding-left: 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .link-box .select-box > .slide-box > .slide-item:hover {
|
||
|
|
background-color: #F2F2F2;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .link-box .select-box.already-selected {
|
||
|
|
border: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .link-box .select-box > .placeholder-box {
|
||
|
|
-webkit-box-flex: 1;
|
||
|
|
-ms-flex: 1;
|
||
|
|
flex: 1;
|
||
|
|
height: 100%;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 14px;
|
||
|
|
color: rgba(41, 43, 51, 0.3);
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .link-box .select-box .slide-icon {
|
||
|
|
-webkit-box-flex: 0;
|
||
|
|
-ms-flex: 0 0 20px;
|
||
|
|
flex: 0 0 20px;
|
||
|
|
height: 20px;
|
||
|
|
background: url("../img/store/gray_arrow@2x.png") no-repeat center/cover;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .link-box .select-box .selected-box {
|
||
|
|
background-color: #6897B1;
|
||
|
|
border-radius: 3px;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
max-width: 200px;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .link-box .select-box .selected-box > p {
|
||
|
|
-webkit-box-flex: 1;
|
||
|
|
-ms-flex: 1;
|
||
|
|
flex: 1;
|
||
|
|
height: 100%;
|
||
|
|
font-size: 12px;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
line-height: 12px;
|
||
|
|
color: #fff;
|
||
|
|
padding: 9px 26px 9px 10px;
|
||
|
|
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .link-box .select-box .selected-box > .cross-icon {
|
||
|
|
width: 33px;
|
||
|
|
height: 30px;
|
||
|
|
background: url("../img/store/white-close.png") no-repeat center/14px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.template-content .editing {
|
||
|
|
cursor: move;
|
||
|
|
}
|
||
|
|
.template-content .editing .edit-btn {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
position: absolute;
|
||
|
|
top: 5px;
|
||
|
|
background-color: #00B6F2;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
background-size: 16px;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
.template-content .editing .moveup-btn {
|
||
|
|
display: none;
|
||
|
|
background-image: url("../img/store/up_arrow.png");
|
||
|
|
right: 114px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.template-content .editing .movedown-btn {
|
||
|
|
display: none;
|
||
|
|
background-image: url("../img/store/down_arrow.png");
|
||
|
|
right: 80px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.template-content .editing .draggable-btn {
|
||
|
|
display: none;
|
||
|
|
background-image: url("../img/store/drag_handle.png");
|
||
|
|
right: 46px;
|
||
|
|
cursor:move;
|
||
|
|
}
|
||
|
|
.template-content .editing.moveable .draggable-btn {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.template-content .editing .delete-btn {
|
||
|
|
display: none;
|
||
|
|
background-image: url("../img/store/delete.png");
|
||
|
|
right: 12px;
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
.template-content .editing.editable:not(.banner-box) .delete-btn {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.template-content .editing.editable:not(.banner-box) .delete-btn, .template-content .editing.editable:not(.banner-box) .moveup-btn, .template-content .editing.editable:not(.banner-box) .movedown-btn {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.template-content .editing .editing-box {
|
||
|
|
position: absolute;
|
||
|
|
z-index: 1000;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
-webkit-box-sizing: content-box;
|
||
|
|
box-sizing: content-box;
|
||
|
|
width: 98%;
|
||
|
|
height: 98%; /* 94 */
|
||
|
|
border: 3px dashed #00B6F2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dialog {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
background-color: rgba(0, 0, 0, 0.4);
|
||
|
|
display: none;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.operation-panel {
|
||
|
|
width: 100%;
|
||
|
|
height: 60px;
|
||
|
|
background-color: #fff;
|
||
|
|
box-shadow: 0 -1px rgba(0, 0, 0, 0.05);
|
||
|
|
position: fixed;
|
||
|
|
z-index: 103;
|
||
|
|
bottom: 0;
|
||
|
|
left: 260;
|
||
|
|
/* display: flex; */
|
||
|
|
align-items: center;
|
||
|
|
padding-left: 60px;
|
||
|
|
}
|
||
|
|
.operation-panel > .save-btn {
|
||
|
|
width: 100px;
|
||
|
|
height: 30px;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 30px;
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
background-color: #00B6F2;
|
||
|
|
border-radius: 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
margin-right: 20px;
|
||
|
|
}
|
||
|
|
.operation-panel > .showqr {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #00B6F2;
|
||
|
|
}
|
||
|
|
.row{
|
||
|
|
margin:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-content {
|
||
|
|
padding: 40px;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.right_side_content .operation-panel {
|
||
|
|
width: 100%;
|
||
|
|
height: 60px;
|
||
|
|
background-color: #fff;
|
||
|
|
box-shadow: 0 -1px rgba(0, 0, 0, 0.05);
|
||
|
|
position: fixed;
|
||
|
|
z-index: 1009;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding-left: 60px;
|
||
|
|
}
|
||
|
|
.operation-panel > .save-btn {
|
||
|
|
width: 100px;
|
||
|
|
height: 30px;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 30px;
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
background-color: #00B6F2;
|
||
|
|
border-radius: 18px;
|
||
|
|
cursor: pointer;
|
||
|
|
margin-right: 20px;
|
||
|
|
}
|
||
|
|
.operation-panel > .showqr {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #00B6F2;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
::webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-content > .display-panel .bundle-box {
|
||
|
|
padding: 15px 0;
|
||
|
|
height:250px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box.withtitle {
|
||
|
|
padding: 0 0 15px 0;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box > .bundle-title-box {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
height: 50px;
|
||
|
|
padding: 0 15px;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box > .bundle-title-box > p {
|
||
|
|
font-size: 18px;
|
||
|
|
line-height: 50px;
|
||
|
|
color: #292b33;
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box > .bundle-title-box > a {
|
||
|
|
font-size: 12px;
|
||
|
|
color: rgba(41, 43, 51, 0.4);
|
||
|
|
line-height: 60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-content > .setting-panel .bundle-setting {
|
||
|
|
/* display: none; */
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .bundle-setting h4 {
|
||
|
|
font-weight: 400;
|
||
|
|
color: #292b33;
|
||
|
|
font-size: 18px;
|
||
|
|
margin-bottom: 18px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .bundle-setting > .course-setting {
|
||
|
|
padding-bottom: 24px;
|
||
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .bundle-setting > .course-setting .row{
|
||
|
|
align-items: center !important;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .bundle-setting > .course-setting .choose-course > span {
|
||
|
|
font-size: 15px;
|
||
|
|
color: rgba(41, 43, 51, 0.8);
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .bundle-setting > .course-setting .choose-course > p {
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #00B6F2;
|
||
|
|
line-height: 18px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .bundle-setting > .caption-setting {
|
||
|
|
padding-top: 24px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .bundle-setting > .caption-setting > .row:first-of-type {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .bundle-setting > .caption-setting .caption-content > input {
|
||
|
|
width: 100%;
|
||
|
|
height: 30px;
|
||
|
|
line-height: 30px;
|
||
|
|
padding: 0 0 0 15px;
|
||
|
|
border: 2px solid #f5f5f5;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .bundle-setting > .caption-setting .info {
|
||
|
|
padding-left: 78px;
|
||
|
|
font-size: 12px;
|
||
|
|
color: rgba(41, 43, 51, 0.4);
|
||
|
|
margin: 8px 0 18px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .bundle-setting .panel-name {
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 18px;
|
||
|
|
color: rgba(41, 43, 51, 0.6);
|
||
|
|
margin-right: 22px;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .bundle-setting .row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .bundle-setting .row:not(:last-child) {
|
||
|
|
margin-bottom: 18px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .bundle-setting .row > .content {
|
||
|
|
overflow: visible;
|
||
|
|
width: auto;
|
||
|
|
flex: 1;
|
||
|
|
flex-direction: row;
|
||
|
|
justify-content: flex-start;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .bundle-setting .row > .content .checkbox {
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
border: 2px solid #f5f5f5;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
.template-content > .setting-panel .bundle-setting .row > .content .checkbox.checked {
|
||
|
|
border: 0;
|
||
|
|
background: #00B6F2 url("../img/store/checked-tick.png") no-repeat center/8px 6px;
|
||
|
|
}
|
||
|
|
/*直播展示面板-直播list样式增加*/
|
||
|
|
.live-item{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.live-item .content{
|
||
|
|
|
||
|
|
}
|
||
|
|
.live-item .content>span{
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.live-item .content>span.live-price{
|
||
|
|
color: #00B6F2;
|
||
|
|
}
|
||
|
|
.live-time-content{
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
justify-content:flex-end;
|
||
|
|
align-items: center;
|
||
|
|
align-self: flex-end;
|
||
|
|
}
|
||
|
|
.live-time-content i.live-time-icon{
|
||
|
|
display: block;
|
||
|
|
width: 11px;
|
||
|
|
height: 11px;
|
||
|
|
margin-right: 5px;
|
||
|
|
background: url(../img/store/live-time@2x.png) no-repeat center/cover;
|
||
|
|
background-size: 11px;
|
||
|
|
}
|
||
|
|
.live-time-content>span.live-time-main{
|
||
|
|
font-size: 11px;
|
||
|
|
color: rgba(41,43,51,.3);
|
||
|
|
}
|
||
|
|
.course-list > li .content >i{
|
||
|
|
display: inline-block;
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
.course-list > li .content >i.tag-video{
|
||
|
|
background: url(../img/store/tag-video@3x.png) no-repeat center/cover;
|
||
|
|
}
|
||
|
|
.course-list > li .content >i.tag-audio{
|
||
|
|
background: url(../img/store/tag-audio@3x.png) no-repeat center/cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.banner-row{
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
}
|
||
|
|
.banner-row .panel-name{
|
||
|
|
margin-right: 22px;
|
||
|
|
font-size: 14px!important;
|
||
|
|
width: 20%;
|
||
|
|
line-height: 26px;
|
||
|
|
}
|
||
|
|
.banner-row .content.show-method{
|
||
|
|
width: 100%;
|
||
|
|
overflow: inherit;
|
||
|
|
}
|
||
|
|
.banner-border{
|
||
|
|
width: 100%;
|
||
|
|
height: 1px;
|
||
|
|
background: rgba(0,0,0,.05);
|
||
|
|
}
|
||
|
|
.setting-box.banner-settingbox{
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.course-list > .smallList {
|
||
|
|
height: 70px;
|
||
|
|
width: 100%;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
-webkit-box-align: center;
|
||
|
|
-ms-flex-align: center;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 15px;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
.course-list > .smallList .teacher-box {
|
||
|
|
-webkit-box-flex: 0;
|
||
|
|
-ms-flex: 0 0 125px;
|
||
|
|
flex: 0 0 125px;
|
||
|
|
margin-right: 15px;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
-webkit-box-pack: center;
|
||
|
|
-ms-flex-pack: center;
|
||
|
|
justify-content: center;
|
||
|
|
-webkit-box-align: center;
|
||
|
|
-ms-flex-align: center;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-list > .smallList .teacher-box > img{
|
||
|
|
width: 125px;
|
||
|
|
height: 70px;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-list > .smallList .content > p{
|
||
|
|
padding-left: 20px;
|
||
|
|
width: auto;
|
||
|
|
height: 40px;
|
||
|
|
font-size: 14px;
|
||
|
|
margin: 0;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
color: #303133;
|
||
|
|
overflow : hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-line-clamp: 2;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-list > .smallList .studybox{
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
-webkit-box-pack: center;
|
||
|
|
-ms-flex-pack: center;
|
||
|
|
-webkit-box-align: center;
|
||
|
|
-ms-flex-align: center;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-list > .smallList .studybox i{
|
||
|
|
font-size: 12px;
|
||
|
|
color:#C0C4CC;
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-list > .smallList .studybox .price{
|
||
|
|
font-size: 14px;
|
||
|
|
color: #0486FE;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bc {
|
||
|
|
width: 98%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content:space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bigList {
|
||
|
|
width: calc(49% - 9px);
|
||
|
|
margin: 4px 0;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: wrap;
|
||
|
|
padding: 0 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.longItem {
|
||
|
|
/* width: calc(49% - 9px); */
|
||
|
|
margin: 4px 0;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: wrap;
|
||
|
|
padding: 0 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.longItem .teacher-box {
|
||
|
|
width: 100%;
|
||
|
|
height: 200px;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.longItem .teacher-box img{
|
||
|
|
width: 100%;
|
||
|
|
height: 200px;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bigList .teacher-box {
|
||
|
|
width: 100%;
|
||
|
|
height: 96px;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bigList .teacher-box > img{
|
||
|
|
width: 170px;
|
||
|
|
height: 96px;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bigList .content > p{
|
||
|
|
width: auto;
|
||
|
|
height: 40px;
|
||
|
|
font-size: 14px;
|
||
|
|
margin: 0;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
color: #303133;
|
||
|
|
overflow : hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-line-clamp: 2;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bigList .studybox{
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -ms-flexbox;
|
||
|
|
display: flex;
|
||
|
|
-webkit-box-pack: center;
|
||
|
|
-ms-flex-pack: center;
|
||
|
|
-webkit-box-align: center;
|
||
|
|
-ms-flex-align: center;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-list > .bigList .studybox i{
|
||
|
|
font-size: 12px;
|
||
|
|
color:#C0C4CC;
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-list > .bigList .studybox .price{
|
||
|
|
font-size: 14px;
|
||
|
|
color: #0486FE;
|
||
|
|
}
|
||
|
|
.nav-section{
|
||
|
|
height: 90px;
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
background: #FFFFFF;
|
||
|
|
}
|
||
|
|
.nav-li img{
|
||
|
|
display: block;
|
||
|
|
width: 42px;
|
||
|
|
height: 42px;
|
||
|
|
}
|
||
|
|
.nav-li p{
|
||
|
|
color: #666666;
|
||
|
|
font-size: 12px;
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 6px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box{
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box > .morebundle{
|
||
|
|
float: left;
|
||
|
|
width: 8000px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box > .onebundle{
|
||
|
|
width: 100%;
|
||
|
|
height: 260px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding:0 12px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box > .onebundle > li img{
|
||
|
|
width:350px;
|
||
|
|
height: 198px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box .content{
|
||
|
|
margin: 4px 0;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box .content h1{
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 20px;
|
||
|
|
color: #303133;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box .infoBox{
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-content > .display-panel .bundle-box .infoBox .courseNum{
|
||
|
|
font-size: 12px;
|
||
|
|
color: #909399;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box .infoBox .price{
|
||
|
|
font-size: 14px;
|
||
|
|
color: #0486FE;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box .content .h1{
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: rgb(41, 43, 51);
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
margin: 0px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-content > .display-panel .bundle-box > .morebundle > li:nth-child(1){
|
||
|
|
float:left;
|
||
|
|
width:270px;
|
||
|
|
margin:0 15px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box > .morebundle > li:nth-child(2){
|
||
|
|
float:left;
|
||
|
|
width:270px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-content > .display-panel .bundle-box > .morebundle > li:nth-child(1) img{
|
||
|
|
width:270px;
|
||
|
|
height: 152px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box > .morebundle > li:nth-child(2) img{
|
||
|
|
width:270px;
|
||
|
|
height: 152px;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box {
|
||
|
|
padding: 15px 0;
|
||
|
|
/*height: 269px;*/
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box.withtitle {
|
||
|
|
padding: 0 0 15px 0;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box > .bundle-title-box {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
height: 50px;
|
||
|
|
padding: 0 15px;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box > .bundle-title-box > p {
|
||
|
|
font-size: 18px;
|
||
|
|
line-height: 50px;
|
||
|
|
color: #292b33;
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
.template-content > .display-panel .bundle-box > .bundle-title-box > a {
|
||
|
|
font-size: 12px;
|
||
|
|
color: rgba(41, 43, 51, 0.4);
|
||
|
|
line-height: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.course-title i{
|
||
|
|
display: inline-block;
|
||
|
|
width: 16px;
|
||
|
|
position: absolute;
|
||
|
|
top: 2px;
|
||
|
|
left: 2px;
|
||
|
|
height: 16px;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
i.tag-audio{
|
||
|
|
background: url(../img/store/tag-audio@3x.png) no-repeat center/cover;
|
||
|
|
}
|
||
|
|
i.tag-video{
|
||
|
|
background: url(../img/store/tag-video@3x.png) no-repeat center/cover;
|
||
|
|
}
|
||
|
|
.course-title {
|
||
|
|
color: #303133;
|
||
|
|
overflow:hidden;
|
||
|
|
position: relative;
|
||
|
|
text-overflow:ellipsis;
|
||
|
|
display:-webkit-box;
|
||
|
|
-webkit-box-orient:vertical;
|
||
|
|
-webkit-line-clamp:2;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
.course-title p{
|
||
|
|
padding-left: 20px;
|
||
|
|
}
|