/* 页面初始化 */ *{ box-sizing: border-box; font-family:Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif; } a{ cursor: pointer; } .nav-main .search{ box-sizing:content-box; } /* ///////////////////////////// */ /* 抬头图片 */ .title-image{ width:100%; position: relative; height:250px; background-image:url('../image/title-bar.png'); background-size:cover; background-repeat: no-repeat; background-position: center; } .title-image .top-navigator{ display:none; } @media screen and (max-width:600px){ .title-image{ height:180px; } .title-image .top-navigator{ display: block; position: absolute; bottom:0; background:rgba(0,0,0,0.5); color:white; border:none; } .title-image .top-navigator span::before{ /* display:none; */ /* margin-top:3px; */ background-image:url('../image/location.png'); } .title-image .top-navigator .location{ font-size: 14px !important; float:left; } .type-wrap .top-navigator{ display:none; } .type-wrap .type-logo{ display:none; } } /* navigator共用区 */ .top-navigator{ width:100%; padding:5px 15px; color:#B5B5B4; height:38px; } .top-navigator img{ float:left; } .top-navigator span{ float: left; position: relative; padding-left:25px; line-height:27px; } .top-navigator span::before{ content: ''; display: block; position: absolute; left:0; margin-top:3px; width:20px; height:20px; background-image:url('../image/location.png'); background-repeat: no-repeat; background-size:auto 20px; } .type-wrap .top-navigator{ width:90%; } /* 中间内容部分 */ .main-wrap{ max-width:1200px; margin: 0 auto; margin-top:20px; } .main-wrap::after{ content:''; clear:both; display: block; } /* 左侧菜单栏 */ .main-wrap .type-wrap{ float:left; width:280px; margin-bottom:20px; /* height:100%; */ } .main-wrap .type-wrap .type-logo{ background: rgb(127,47,106); height:70px; border-radius:10px; width:90%; color: white; font-size:30px; text-align: center; line-height:70px; margin-bottom:30px; } .main-wrap .type-wrap .type-content{ width:90%; position: relative; } .main-wrap .type-wrap .type-content .type-item{ cursor:pointer; border-left:2px solid transparent; height:41px; box-sizing: border-box; line-height:41px; white-space: nowrap; text-overflow: ellipsis; position: relative; background:#eee; border-radius: 10px; margin-top:5px; border:1px solid #ccc; font-size:16px; } .main-wrap .type-wrap .type-content .type-item a{ width:100%; height:100%; padding-left: 40px; display: block; transition:left 300ms linear; position: absolute; left:0; } .main-wrap .type-wrap .type-content .type-active a{ background:rgb(145,68,124); color:white; border-radius: 5px; } .main-wrap .type-wrap .type-content .type-item a::after{ content:''; display:block; width:4px; height:4px; background:rgb(145,68,124); border-radius:50%; position: absolute; left:30px; top:50%; transform: translate(0,-50%); } .main-wrap .type-wrap .type-content .type-active a::after{ background:white; } .main-wrap .type-wrap .type-content .type-item:hover a{ background:rgb(145,68,124); color:white; border-radius: 5px; } .main-wrap .type-wrap .type-content .type-item:hover a::after{ background:white; } @media screen and (max-width:1200px){ .main-wrap{ margin:20px; } } @media screen and (max-width:600px){ .main-wrap{ padding:0 15px; margin:0; } .main-wrap .type-wrap{ float:none; width:100%; margin-bottom:0; } .main-wrap .type-wrap .type-logo{ font-size:20px; height:40px; line-height:40px; text-align:left; background:none; color:#CC173A; border-bottom:2px solid #F5F5F5; position:relative; } .main-wrap .type-wrap .type-logo::after{ content:''; display: block; position: absolute; bottom:0; left: 0; height:2px; width:80px; border-bottom:2px solid #CC173A; } .main-wrap .type-wrap .type-content{ margin:0; padding:15px 0 ; background : none; width:100%; } .main-wrap .type-wrap .type-content ul{ width:100%; display: flex; justify-content: space-between; flex-wrap: wrap; } .main-wrap .type-wrap .type-content ul .type-item{ width:32%; border:none; text-align: center; background:#EFEFEF; border-radius:5px; margin:6px 0; height:35px; line-height:35px; } .main-wrap .type-wrap .type-content ul .type-item:hover{ border:none; color:black; } /* .main-wrap .type-wrap .type-content ul .type-active{ border:none; background:#CC173A; color:white !important; } */ .main-wrap .type-wrap .type-content .type-item a{ left: 0; padding: 0; } .main-wrap .type-wrap .type-content .type-active a{ border-radius:5px; left: 0 !important; padding: 0; } .main-wrap .type-wrap .type-content .type-item a::after{ content: '' !important; display: none; } .main-wrap .type-wrap .type-content .type-item:hover a{ left:0; border-radius:5px; } } /* 右侧列表区 */ .main-wrap .lists-wrap{ float:right; width:calc(100% - 280px - 10px); padding: 0 15px; margin-left:10px; border:1px dotted rgb(145,68,124); margin-bottom:30px; } .main-wrap .lists-wrap .top-navigator .title-name{ display:inline-block; padding:3.5px; padding-left: 0; font-size:18px; border-bottom: 2px solid #A52C27; color:#CC173A;; } .main-wrap .lists-wrap .top-navigator{ padding-left: 0 !important; min-width:320px; } /* 右侧教师区 */ .lists-wrap .teacher-title{ width:100%; text-align:center; font-size:16px; color:black; padding:20px 0 ; border-bottom: 1px solid rgb(145,68,124); } .lists-wrap .letter{ width:100%; padding: 10px 0 ; } .lists-wrap .letter ul::after{ content:''; display:block; clear: both; } .lists-wrap .letter ul li{ float:left; padding:2px 10px;; font-size:16px; } .lists-wrap .letter ul li a{ color:rgb(135,29,40); text-decoration:underline; } /* 主要内容区 */ .lists-wrap .teacher-content{ width:100%; } .lists-wrap .teacher-content .teachars-wrap{ width:100%; padding:5px 0; color:black; } .lists-wrap .teacher-content .teachars-wrap li{ display:inline-block; min-width:170px; font-size: 16px; line-height:40px; text-align:center; } .lists-wrap .teacher-content .teachars-wrap .tearch-name a{ color:rgb(145,68,124); text-decoration:none; } .lists-wrap .teacher-content .content-main{ width:100%; margin-top:5px; /* height:400px; overflow-y: scroll;*/ box-sizing:border-box; } .lists-wrap .teacher-content .content-main .content-items{ margin-bottom:5px; } .lists-wrap .teacher-content .content-main .content-items .letter-items-title{ background:#eee; padding:2px 10px; font-size:16px; box-sizing:border-box; cursor:pointer; /*display:none;*/ } .lists-wrap .teacher-content .content-main .content-items .letter-items-title.active{ color:rgb(135,29,40); } .lists-wrap .teacher-content .content-main .content-items .items-list{ /* display:none; */ } .lists-wrap .teacher-content .content-main .content-items .items-list.active{ display:block; } @media screen and (max-width:600px){ .main-wrap .lists-wrap{ width:100%; margin-left:0; float:none; padding: 0; border:none; border-top:1px solid #CACACA; padding-bottom:10px; border-bottom:1px solid rgb(145,68,124);; margin-bottom:20px; } .lists-wrap .teacher-content .teachars-wrap li{ display:inline-block; min-width:80px; margin-right:0px; } }