|
* {
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 100%;
}
body {
width: 7.5rem;
}
img {
display: block;
max-width: 100%;
}
.head {
height: 0.9rem;
}
.linkus {
width: 100%;
height: 2.4rem;
background: url('../img/linkus-bg.png') no-repeat center center;
background-size: 100% 100%;
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.linkus .title {
font-size: 0.32rem;
margin-bottom: 0.5rem;
}
.linkus .form-box {
display: flex;
align-items: center;
justify-content: space-between;
}
.linkus .form-box input {
width: 3.6rem;
height: 0.6rem;
border-radius: 0.3rem;
border: 1px solid #ffffff;
background-color: transparent;
outline-style: none;
color: #ffffff;
font-size: .28rem;
margin-right: .3rem;
position: relative;
padding: 0 .1rem 0 .65rem;
z-index: 1;
}
.linkus .form-box input::-webkit-input-placeholder {
color: #ffffff;
}
.linkus .form-box input:-moz-placeholder {
color: #ffffff;
}
.linkus .form-box input::-moz-placeholder {
color: #ffffff;
}
.linkus .form-box input:-ms-input-placeholder {
color: #ffffff;
}
.linkus .form-box input::-ms-input-placeholder {
color: #ffffff;
}
.linkus .input-box {
display: flex;
position: relative;
}
.linkus .input-box i {
position: absolute;
width: .4rem;
height: .4rem;
display: block;
background: url('../img/icon.png') no-repeat center center;
background-size: 100% 100%;
left: .2rem;
top: 50%;
transform: translateY(-50%);
}
.linkus .form-box button {
border: transparent;
outline-style: none;
background-color: #FFB505;
color: #ffffff;
font-size: 0.24rem;
line-height: 0.6rem;
width: 2.4rem;
border-radius: 1.1rem;
letter-spacing: .01rem;
}
/* 三年磨一剑 */
.info {
background-color: #eeeeee;
padding: .4rem .2rem;
}
.info-swiper {
margin: .3rem 0;
}
.info-msg {
font-size: .24rem;
color: #333333;
line-height: 150%;
}
.info-btn {
display: block;
width: 2.44rem;
height: .6rem;
background-color: #00AAF6;
color: #ffffff;
font-size: .24rem;
border: transparent;
outline-style: none;
font-size: 0.24rem;
border-radius: .1rem;
margin: .3rem auto 0;
}
/* 教师列表 */
.teacher {
padding: .4rem .2rem;
}
.teach-title {
margin-bottom: .5rem;
}
.teac-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.teacher .teac-item {
width: 3.5rem;
height: 4.5rem;
border: .02rem solid #E0E0E0;
border-radius: .2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: .2rem;
}
.tea-avatar {
width: 1.42rem;
border-radius: 50%;
margin-bottom: .25rem;
}
.tea-name {
font-size: .28rem;
font-weight: bold;
margin-bottom: .1rem;
}
.tea-title {
font-size: .24rem;
color: #666666;
margin-bottom: .2rem;
text-align: center;
width: 80%;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.tea-info {
text-align: center;
font-size: .2rem;
line-height: 150%;
width: 80%;
margin: 0 auto;
height: 1.5rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}
.tixi {
background-color: #ffffff !important;
}
.tixi-title {
margin-bottom: .3rem;
}
.pingtai {
background-color: #eeeeee;
padding: .4rem .2rem;
}
.pingtai-box {
display: flex;
justify-content: space-between;
}
.pingtai-btn {
width: 2.3rem;
height: 0.82rem;
font-size: .24rem;
border: .04rem solid #24B3ED;
color: #24B3ED;
outline-style: none;
border-radius: .08rem;
}
.active-btn {
background-color: #24B3ED;
color: #ffffff;
margin-bottom: .24rem;
}
/* 底部 */
.fixed {
display: flex;
font-size: 0.28rem;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: 2;
}
.bottom {
margin-bottom: .7rem;
}
.zixun, .test {
text-align: center;
width: 50%;
line-height: 1rem;
}
.zixun {
color: #ffffff;
background-color: #00AAF6;
}
.test {
background-color: orange;
}
|