m.hellocode.cn

main.css 4.5KB

    * { 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; }