zycp-demo/assets/css/common/style.css

2212 lines
39 KiB
CSS

/* 登录页面 */
.login-txt{
padding: 0 .4rem;
min-height: 6.6rem;
}
.login-txt .logo{
width: 1.4rem;
height: 1.4rem;
background-color: #e70012;
border-radius: .1rem;
overflow: hidden;
margin: 1rem auto .1rem;
}
.login-txt .logo>img{
width: 1.2rem;
height: 1.2rem;
margin: .1rem auto;
}
.login-txt .company{
font-family: 'Fzcs-Gbk';
font-size: .48rem;
line-height: 1.5;
text-align: center;
margin-bottom: .7rem;
}
.login-txt .phone-number{
padding-top: .2rem;
}
.login-txt .phone-number>span{
display: block;
font-size: .28rem;
line-height: 1.5;
color: #666;
}
.login-txt .phone-number>input{
width: 100%;
height: .9rem;
line-height: .9rem;
font-size: .32rem;
border-bottom: .02rem solid #e2e4e6;
}
.login-txt .agreement{
padding-top: .2rem;
overflow: hidden;
}
.login-txt .agreement>span{
display: block;
width: .26rem;
height: .26rem;
border-radius: .04rem;
background-color: #FFFFFF;
border: .02rem solid #999999;
margin: .07rem .08rem 0 0;
float: left;
}
.login-txt .agreement>span img{
width: .18rem;
height: .13rem;
margin: .045rem auto 0;
}
.login-txt .agreement>span.checked{
border: .02rem solid #3440c9;
background-color: #3440c9;
}
.login-txt .agreement>p{
width: calc(100% - .34rem);
font-size: .28rem;
line-height: 1.5;
float: left;
}
.login-txt .agreement>p span{
word-break: break-all;
color: #3440c9;
}
.login-btns{
margin-top: .3rem;
}
.login-btns>span{
display: flex;
justify-content: center;
align-items: center;
height: .8rem;
background-color: #3440c9;
border-radius: .16rem;
font-size: .32rem;
color: #FFFFFF;
}
.login-btns>span.nail-btn{
background-color: #348bff;
}
.login-btns>span.nail-btn>img{
width: .4rem;
height: .52rem;
margin-right: .08rem;
}
/* 登录方式 */
.login-mode{
width: 100%;
margin-top: 2rem;
}
.mode-title{
display: flex;
justify-content: center;
align-items: center;
font-size: .32rem;
line-height: 1.5;
}
.mode-title>span{
width: .9rem;
height: .02rem;
background-color: #d3d3d3;
margin: 0 .1rem;
}
.mode-item{
display: flex;
justify-content: center;
align-items: center;
margin-top: .3rem;
}
.mode-item li{
width: 1.8rem;
}
.mode-item li>span{
display: flex;
justify-content: center;
align-items: center;
width: 1.2rem;
height: 1.2rem;
margin: 0 auto;
border-radius: 100%;
background-color: #348bff;
}
.mode-item li>span img{
height: .76rem;
}
.mode-item li:last-child>span{
background-color: #ff9834;
}
.mode-item li:last-child>span img{
height: .72rem;
}
.mode-item li>p{
display: flex;
justify-content: center;
align-items: center;
width: 1.8rem;
height: .44rem;
background-color: #dbeaff;
border-radius: .1rem;
border: .02rem solid #3440c9;
font-size: .24rem;
margin-top: .12rem;
opacity: 0;
}
.mode-item li>p.active{
opacity: 1;
transition: all .6s;
}
/* 阅读授权弹窗 */
.my-confirm2>p{
text-align: center !important;
font-size: .32rem;
}
/* 钉钉授权登录弹窗 */
.nail-popup{
width: 100%;
padding: .65rem;
background-color: #FFFFFF;
position: fixed;
bottom: 0;
z-index: 999;
}
.nail-popup-title{
display: flex;
align-items: center;
height: .64rem;
}
.nail-popup-title>span{
display: flex;
justify-content: center;
align-items: center;
width: .64rem;
height: .64rem;
border-radius: .12rem;
background-color: #e70012;
}
.nail-popup-title>span img{
width: .55rem;
height: .55rem;
}
.nail-popup-title>p{
font-family: 'Fzcs-Gbk';
font-size: .48rem;
line-height: .64rem;
margin: 0 .08rem;
}
.nail-popup-title>em{
font-size: .32rem;
}
.nail-popup>p{
font-size: .42rem;
line-height: 1.5;
margin: .2rem 0;
}
.nick-name>span{
font-size: .28rem;
line-height: 1.5;
color: #999999;
}
.nick-name>p{
display: flex;
justify-content: space-between;
align-items: center;
font-size: .32rem;
line-height: 1.5;
padding: .15rem 0;
border-bottom: .02rem solid #e1e3e5;
}
.nick-name>p img{
width: .35rem;
height: .24rem;
}
/* 授权按钮 */
.nail-popup-btns span{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: .8rem;
margin-top: .4rem;
background-color: #348bff;
border-radius: .16rem;
font-size: .32rem;
color: #FFFFFF;
}
.nail-popup-btns span:last-child{
margin-top: .15rem;
background-color: rgba(0,0,0,0);
color: #333333;
}
/* 手机验证码 */
.verification-txt{
padding: .1rem .4rem 0;
}
.verification-txt>p{
font-size: .4rem;
line-height: 1.5;
}
.verification-txt>span{
display: block;
font-size: .26rem;
line-height: 1.5;
color: #999999;
margin-top: .2rem;
}
/* 输入验证码 */
.security-code-wrap {
overflow: hidden;
padding: .2rem 0;
position: relative;
}
.security-code-container {
display: flex;
justify-content: space-between;
width: 3.48rem;
}
.field-wrap {
list-style: none;
display: block;
width: .72rem;
height: 1rem;
line-height: 1rem;
font-size: .64rem;
background-color: #fff;
border-bottom: .02rem solid #e0e2e4;
}
.char-field {
display: block;
width: 100%;
text-align: center;
font-style: normal;
}
.input-code {
position: absolute;
left: 0;
top: 0;
width: 3.48rem;
height: 1rem;
opacity: 0;
overflow: visible;
z-index: -1;
}
/* 重获验证码 */
.getCode{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: .8rem;
margin-top: .4rem;
background-color: #348bff;
border-radius: .16rem;
font-size: .32rem;
color: #FFFFFF;
}
/* 首页css */
.header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 1rem;
background: rgba(255,255,255,0);
padding: 0 0.3rem;
box-sizing: border-box;
position: fixed;
z-index: 10;
left: 0;
top: 0;
}
.header .back{
width: .19rem;
height: .32rem;
}
.header .back>img{
width: 100%;
height: .32rem;
}
.header .header-title{
width: calc(100% - 0.19rem);
font-size: .36rem;
color: #FFFFFF;
text-align: center;
text-indent: -.095rem;
}
.header.white{
background-color: #FFFFFF;
box-shadow: 0 0 .15rem rgba(29,47,67,.05);
}
.header.white .header-title{
color: #000000;
}
.header.scroll{
box-shadow: 0 0 .2rem rgba(29,47,67,.1);
}
.pull-content{
margin-top: 1rem;
}
/* 轮播图 */
.banner-wrap {
width: 100%;
height: 3.9rem;
}
.banner-wrap img {
width: 100%;
height: 100%
}
.index-receive{
width: 100%;
position: relative;
}
.index-receive>img{
width: 100%;
}
.index-receive>span{
display: block;
font-size: .24rem;
line-height: .47rem;
text-indent: .25rem;
color: #FFFFFF;
position: absolute;
left: 0;
bottom: 0;
}
/* 公共标题 */
.index-title{
display: flex;
justify-content: space-between;
}
.index-title h2{
font-size: .34rem;
line-height: 1.5;
letter-spacing: .02rem;
}
.index-title h2>em{
color: #333fc9;
}
.index-title span{
display: flex;
justify-content: center;
align-items: center;
width: 1.4rem;
height: .42rem;
line-height: .42rem;
padding-top: .02rem;
background-color: #d1d5ff;
background-image: url(../../../assets/images/home/index/arrow-more.png);
background-repeat: no-repeat;
background-position: 1.18rem center;
background-size: .11rem .2rem;
border-radius: .21rem;
font-size: .24rem;
color: #333fc9;
text-align: center;
text-indent: -.1rem;
}
.section{
padding: .4rem .25rem 0;
}
/* 专家团队 */
.index-expert{
padding-bottom: .24rem;
}
.index-expert-list{
display: flex;
justify-content: space-between;
margin-top: .2rem;
}
.index-expert-list>li{
width: 31.5%;
border-radius: .12rem;
box-shadow: 0 0 .2rem rgba(29,47,67,.1);
padding-bottom: .15rem;
overflow: hidden;
}
.expert-img{
width: 100%;
height: 2rem;
overflow: hidden;
}
.expert-img>img{
width: 100%;
min-height: 2rem;
}
.expert-name{
padding: .15rem .12rem 0;
font-size: .28rem;
line-height: 1.5;
overflow: hidden;
}
.expert-name>span{
font-size: .24rem;
color: #ff7716;
float: right;
}
.expert-honor{
padding: 0 .12rem;
margin-top: .02rem;
}
.expert-honor>span{
display: inline-block;
padding: 0 .1rem;
margin-left: .06rem;
border-radius: .04rem;
background-color: #e9eaf1;
font-size: .24rem;
color: #878787;
line-height: 1.8;
}
.expert-honor>span:first-child{
margin-left: 0;
}
/* 计划 */
.index-plan{
padding: .24rem .25rem;
background-color: #f0f1f6;
}
.index-plan-list{
display: flex;
justify-content: space-between;
}
.index-plan-list>li{
width: 31.5%;
height: 2.4rem;
border-radius: .12rem;
overflow: hidden;
}
.index-plan-list>li>img{
width: 100%;
min-height: 2.4rem;
}
.index-plan-list>li>p{
font-size: .28rem;
line-height: 1.5;
margin-top: -.58rem;
color: #FFFFFF;
text-align: center;
}
/* 专业测评 */
.index-evaluation-list{
display: flex;
justify-content: space-between;
margin-top: .2rem;
}
.index-evaluation-list>li{
width: 48.875%;
border-radius: .12rem;
box-shadow: 0 0 .2rem rgba(29,47,67,.1);
padding-bottom: .3rem;
overflow: hidden;
}
.evaluation-img{
width: 100%;
height: 2.1rem;
overflow: hidden;
}
.evaluation-img>img{
width: 100%;
min-height: 2.1rem;
}
.index-evaluation-list li>p{
padding: .18rem .12rem 0;
font-size: .28rem;
line-height: 1.5;
text-align: center;
overflow: hidden;
}
.evaluation-btn{
width: 1.48rem;
border-radius: .24rem;
background-image: linear-gradient(to right,#faddb1, #cbab72);
font-size: .24rem;
line-height: 2;
text-align: center;
margin: .1rem auto 0;
}
/* 有谱直播 */
.index-live-list{
display: flex;
justify-content: space-between;
margin-top: .2rem;
}
.index-live-list>li{
width: 48.875%;
height: 2.1rem;
border-radius: .12rem;
overflow: hidden;
}
.index-live-list>li img{
width: 100%;
min-height: 2.1rem;
}
/* 有谱头条 */
.index-headlines{
width: calc(100% - 0.5rem);
margin: .4rem auto 0;
padding: .4rem .25rem .25rem;
border-radius: .12rem;
background-color: #edf0fb;
}
.index-headlines-list{
}
.index-headlines-list>li{
margin-top: .2rem;
overflow: hidden;
}
.index-headlines-list>li p{
font-size: .28rem;
line-height: 1.4;
text-align: justify;
}
.index-headlines-list>li p::before{
content: "";
display: block;
width: .12rem;
height: .12rem;
border-radius: 100%;
background-color: #333fc9;
margin: .13rem .1rem .28rem 0;
float: left;
}
.index-headlines-list>li span{
display: block;
font-size: .24rem;
line-height: 1.5;
color: #878787;
text-indent: .22rem;
}
/* 专家列表 */
.expert-receive{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: .8rem;
padding: 0 .3rem;
background-image: linear-gradient(to left,#f5bf44, #f4ac37);
}
.expert-receive>img{
width: .34rem;
height: .26rem;
}
.expert-receive>p{
width: calc(100% - 0.8rem);
font-size: .3rem;
color: #5e4212;
margin: 0 .15rem;
}
.expert-receive>span{
display: block;
width: .16rem;
height: .28rem;
background-image: url(../../images/home/expert/arrow-notice.png);
background-size: .16rem .28rem;
}
.expert-receive-01{
background-image: linear-gradient(to left,#dee7f7, #dee7f7);
}
.expert-receive-01>p{
width: calc(100% - .34rem);
margin: 0 0 0 .15rem;
font-size: .26rem;
color: #1e6eff;
}
/* 分类地址 */
.expert-nav-list{
display: flex;
justify-content: space-between;
align-items: center;
}
.expert-nav-item{
display: flex;
align-items: center;
width: calc(100% - 2.5rem);
}
.expert-nav-item>li{
font-size: .28rem;
color: #999999;
margin-right: .3rem;
}
.expert-nav-item>li.active{
font-size: .32rem;
color: #333333;
}
.expert-nav-item>li:last-child{
margin: 0;
}
/* 选择地址 */
.addr-select{
width: 2.5rem;
height: .8rem;
background-image: url(../../images/home/expert/arrow-down.png);
background-repeat: no-repeat;
background-size: .22rem .12rem;
background-position: center right;
}
.addr-select>div{
width: 100%;
font-size: .28rem;
line-height: .8rem;
text-align: right;
padding-right: .35rem;
}
/* 地址弹出框 */
.addr-select-bg{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
position: fixed;
top: 0;
z-index: 998;
}
.addr-select-item{
width: 100%;
padding: .2rem .25rem;
border-radius: .2rem .2rem 0 0;
background-color: #FFFFFF;
box-shadow: 0 0 .13rem rgba(29,47,67,.1);
position: fixed;
bottom: 0;
z-index: 999;
}
.addr-btns{
display: flex;
justify-content: space-between;
align-items: center;
}
.addr-btns>span{
font-size: .32rem;
line-height: .8rem;
color: #999999;
}
.addr-btns>span:last-child{
color: #333fc9;
}
.addr-select-item ul{
max-height: 4.8rem;
overflow-y: auto;
}
.addr-select-item li{
display: flex;
justify-content: space-between;
align-items: center;
font-size: .32rem;
line-height: .8rem;
opacity: .8;
cursor: pointer;
}
.addr-select-item li.checked{
color: #333fc9;
}
.addr-select-item li>img{
width: .4rem;
height: .28rem;
}
/* 咨询师列表 */
.expert-list-all{
padding-top: 0;
}
.expert-list>li{
padding: .24rem;
margin-top: .24rem;
border-radius: .1rem;
background-color: #FFFFFF;
box-shadow: 0 0 .13rem rgba(29,47,67,.1);
}
.expert-list-con{
display: flex;
justify-content: space-between;
align-items: center;
}
.expert-list-img{
width: 2.4rem;
height: 2.4rem;
border-radius: .04rem;
overflow: hidden;
}
.expert-list-img>img{
width: 100%;
min-height: 2.4rem;
}
.expert-list-txt{
width: calc(100% - 2.6rem);
}
.expert-list-txt>div{
display: flex;
flex-wrap: wrap;
align-items: center;
}
.expert-list-txt>.title>h2{
font-size: .32rem;
line-height: 1.5;
margin-right: .12rem;
}
.expert-list-txt>.title span{
height: .34rem;
border-radius: .04rem;
background-color: #bac0fe;
padding: 0 .06rem;
font-size: .24rem;
line-height: .37rem;
color: #303dca;
}
.expert-list-txt>.integral{
font-size: .24rem;
line-height: 1.5;
color: #ff7716;
}
.expert-list-txt>.integral span:first-child{
margin-right: .5rem;
}
.expert-list-txt>.honor span{
height: .34rem;
border-radius: .04rem;
background-color: #e9eaf1;
padding: 0 .08rem;
font-size: .24rem;
line-height: .37rem;
color: #878787;
margin: .05rem .1rem .05rem 0;
}
.expert-list-txt>.slogan{
font-size: .26rem;
line-height: 1.3;
padding-top: .06rem;
text-align: justify;
}
/* 按钮 */
.expert-list-btns{
display: flex;
justify-content: center;
margin-top: .3rem;
}
.expert-list-btns>div{
width: 2.4rem;
height: .6rem;
border-radius: .3rem;
margin: 0 .1rem;
border: 1px solid #333fc9;
font-size: .26rem;
line-height: .6rem;
color: #333fc9;
text-align: center;
}
.expert-list-btns>div:first-child{
background-color: #333fc9;
color: #FFFFFF;
}
.expert-list-btns>div.noservice{
background-color: #e1e1e1;
border: 1px solid #e1e1e1;
}
/* 弹窗 */
.my-confirm-bg{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
position: fixed;
top: 0;
z-index: 998;
}
.my-confirm{
width: 5rem;
padding: .4rem .5rem;
background-color: #FFFFFF;
border-radius: .3rem;
box-shadow: 0 0 .13rem rgba(29,47,67,.1);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 999;
}
.my-confirm>p{
font-size: .28rem;
line-height: 1.5;
text-align: justify;
}
.confirm-btns{
display: flex;
justify-content: center;
margin-top: .4rem;
}
.confirm-btns>span{
width: 1.4rem;
line-height: .5rem;
border-radius: .25rem;
background-color: #333fc9;
font-size: .26rem;
color: #FFFFFF;
text-align: center;
margin: 0 .15rem;
}
.confirm-btns>span:first-child{
background-color: #ff7716;
}
/* 咨询师详情页 */
.detail-header{
background-color: #333fc9;
}
.white-back img{
-webkit-filter: invert(100%) grayscale(100%) brightness(1000%);
-moz-filter: invert(100%) grayscale(100%) brightness(1000%);
-ms-filter: invert(100%) grayscale(100%) brightness(1000%);
-o-filter: invert(100%) grayscale(100%) brightness(1000%);
filter: invert(100%) grayscale(100%) brightness(1000%);
}
.white .white-back img{
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
}
.detail-banner{
height: 3rem;
background-color: #333fc9;
position: relative;
}
.detail-photo{
display: flex;
justify-content: space-between;
align-items: center;
width: 6.8rem;
height: 1.4rem;
position: absolute;
left: .35rem;
bottom: .35rem;
}
.detail-photo>span{
width: 1.4rem;
height: 1.4rem;
border-radius: 100%;
overflow: hidden;
}
.detail-photo>span img{
width: 1.4rem;
min-height: 1.4rem;
}
.detail-photo>.detail-txt{
width: calc(100% - 1.54rem);
}
.detail-photo>.detail-txt h1{
display: flex;
align-items: center;
font-size: .36rem;
line-height: 1.5;
color: #FFFFFF;
padding-left: .06rem;
}
.detail-photo>.detail-txt h1>span{
height: .34rem;
padding: 0 .1rem;
margin-left: .08rem;
font-size: .24rem;
line-height: .34rem;
background-color: #bac0fe;
border-radius: .04rem;
color: #333fc9;
font-weight: normal;
}
.detail-photo>.detail-txt p{
display: flex;
align-items: center;
flex-wrap: wrap;
}
.detail-photo>.detail-txt p>span{
height: .36rem;
padding: 0 .1rem;
margin-left: .06rem;
font-size: .24rem;
line-height: .34rem;
border-radius: .04rem;
border: .02rem solid #bac0fe;
color: #bac0fe;
margin-top: .1rem;
}
.expert-abstract{
width: 7rem;
padding: .1rem .25rem;
border: .02rem solid #e2e4e6;
border-radius: .1rem;
margin: .2rem auto 0;
}
.expert-abstract>h2{
display: flex;
justify-content: center;
align-items: center;
margin-top: .1rem;
}
.expert-abstract>h2>span{
font-size: .32rem;
line-height: 1.5;
margin: 0 .1rem;
}
.expert-abstract>p{
font-size: .28rem;
line-height: 1.5;
margin-top: .1rem;
color: #999999;
text-align: justify;
}
.detail-section{
padding: 0 .25rem .24rem;
margin-bottom: .24rem;
background-color: #FFFFFF;
}
.detail-section h2{
font-size: .34rem;
line-height: 1.5;
color: #333fc9;
}
.detail-section h2::before{
content: "";
display: block;
width: .08rem;
height: .34rem;
border-radius: .04rem;
background-color: #333fc9;
margin: .07rem .1rem 0 0;
float: left;
}
.detail-section>div{
border-bottom: .02rem solid #e2e4e6;
padding: .3rem 0 .2rem;
}
.detail-section>div:last-child{
border-bottom: 0;
}
.expert-body p,
.expert-region p,
.expert-case p{
font-size: .3rem;
line-height: 1.5;
text-align: justify;
margin-top: .2rem;
}
.detail-section h3{
font-size: .32rem;
line-height: 1.5;
margin-bottom: .1rem;
color: #333fc9;
text-align: justify;
overflow: hidden;
}
.detail-section h3>span{
color: #333333;
}
.detail-section h3>span::before{
content: "";
display: block;
width: .2rem;
height: .2rem;
border-radius: 100%;
background-color: #333fc9;
margin: .14rem .12rem 0 0;
float: left;
}
.expert-case{
border-bottom: 0;
}
.expert-case p{
display: flex;
justify-content: space-between;
}
.expert-case p>span:first-child{
width: 1.5rem;
text-align: left;
color: #999999;
}
.expert-case p>span:last-child{
width: calc(100% - 1.5rem);
}
.expert-case-item{
margin-top: .4rem;
border-bottom: .02rem dashed #e2e4e6;
padding-bottom: .2rem;
}
.expert-case-list>.expert-case-item:first-child{
margin-top: .25rem;
}
.expert-case-list>.expert-case-item:last-child{
border-bottom: 0;
}
.expert-region span{
display: block;
margin: .1rem 0;
}
.expert-case-item .case-img{
width: 100%;
height: 4.35rem;
border-radius: .1rem;
margin-bottom: .2rem;
overflow: hidden;
}
.expert-case-item .case-img>img{
width: 100%;
min-height: 4.35rem;
}
/* 完善考生信息 */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
color: #dedede;
}
.information-list{
width: 100%;
}
.information-list>li{
padding: .12rem 0 .08rem;
border-bottom: .02rem solid #999999;
}
.information-list>li>span{
font-size: .26rem;
line-height: 2.2;
color: #999999;
}
.information-list>li>span em{
margin-right: .1rem;
color: #ff2727;
}
.information-list>li p{
display: flex;
justify-content: space-between;
align-items: center;
}
.information-list>li p>input{
width: calc(100% - .2rem);
font-size: .32rem;
line-height: 2.2;
}
.information-list>li p>img{
width: .16rem;
height: .28rem;
}
.course-list{
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
padding: .05rem 0 .08rem;
}
.course-list>span{
display: block;
width: 31.5%;
background-color: #edeef9;
border: .02rem solid #edeef9;
border-radius: .1rem;
font-size: .3rem;
line-height: .5rem;
text-align: center;
margin: .1rem 2.25% .1rem 0;
}
.course-list>span:nth-of-type(3n){
margin-right: 0;
}
.course-list>span.checked{
background-color: #e4e6ff;
border: .02rem solid #3440c9;
color: #3440c9;
}
.information-btn{
width: calc(100% - .5rem);
background-color: #3440c9;
border-radius: .16rem;
font-size: .32rem;
color: #FFFFFF;
line-height: .9rem;
text-align: center;
margin: .3rem auto;
letter-spacing: .02rem;
}
.seek-card{
width: 6.55rem;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 999;
}
.seek-card>img:first-child{
width: 6.55rem;
height: 6.88rem;
}
.seek-card>img:last-child{
width: .58rem;
height: .58rem;
margin: .7rem auto 0;
}
/* 向TA提问 */
.list-section{
padding: .25rem .25rem 0;
}
.ask-top{
padding: .6rem 0 .55rem;
background-image: url(../../images/home/expert/expert-bg.png);
background-size: cover;
border-radius: .1rem;
overflow: hidden;
}
.ask-top>span{
display: block;
width: 1.4rem;
height: 1.4rem;
margin: 0 auto;
border-radius: 100%;
overflow: hidden;
}
.ask-top>span img{
width: 100%;
min-height: 1.4rem;
}
.ask-top>p{
padding: 0 .7rem;
margin-top: .1rem;
font-size: .28rem;
line-height: 1.4;
text-align: justify;
}
.ask-mode-item{
display: flex;
justify-content: space-between;
align-items: center;
height: .88rem;
margin-top: .25rem;
}
.ask-mode-item>span{
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: .88rem;
font-size: .28rem;
color: #3640c1;
font-weight: bold;
border: .02rem solid #3640c1;
}
.ask-mode-item>span:first-child{
border-radius: .12rem 0 0 .12rem;
}
.ask-mode-item>span:last-child{
border-radius: 0 .12rem .12rem 0;
}
.ask-mode-item>span.active{
background-color: #3640c1;
color: #FFFFFF;
}
.ask-mode-txt>p{
font-size: .28rem;
line-height: 1.5;
font-weight: bold;
text-align: center;
margin: .6rem 0 .25rem;
}
.ask-mode-txt>p span{
display: block;
width: 5.4rem;
margin: .1rem auto 0;
font-size: .26rem;
font-weight: normal;
}
.ask-mode-txt>img{
width: 4.5rem;
height: auto;
margin: 0 auto;
}
.ask-mode-txt>span{
display: block;
width: 4.5rem;
margin: .3rem auto 0;
background-color: #3640c1;
border-radius: .16rem;
font-size: .32rem;
line-height: .9rem;
text-align: center;
color: #FFFFFF;
}
.ask-mode-txt .mode-links{
width: 6rem;
padding: .4rem;
margin: 0 auto;
border: .02rem solid #999999;
font-size: .26rem;
line-height: 1.5;
text-align: justify;
word-break: break-all;
}
/* 测评页面 */
.evaluation-list{
padding-top: .25rem;
}
.evaluation-item{
width: 7rem;
padding: .2rem .2rem;
border-radius: .1rem;
box-shadow: 0 0 .13rem rgba(29,47,67,.1);
margin: .25rem auto 0;
}
.evaluation-list .evaluation-item:first-child{
margin-top: 0;
}
.evaluation-item>h2{
font-size: .32rem;
line-height: 1.5;
text-align: center;
}
.evaluation-txt{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: .15rem;
}
.evaluation-txt>span{
width: 2.4rem;
height: 2.4rem;
overflow: hidden;
}
.evaluation-txt>span img{
width: 2.4rem;
min-height: 2.4rem;
}
.evaluation-txt>p{
width: calc(100% - 2.48rem);
font-size: .24rem;
line-height: .342rem;
text-align: justify;
display: -webkit-box;
color: #666666;
-webkit-line-clamp: 7;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
.evaluation-bottom{
display: flex;
justify-content: space-between;
align-items: center;
height: .6rem;
padding-top: .2rem;
border-top: .02rem solid #e0e2e4;
margin-top: .2rem;
}
.evaluation-bottom>span{
font-size: .24rem;
color: #666666;
}
.evaluation-bottom>span em{
color: #333fc9;
}
.evaluation-bottom>span:last-child{
width: 1.48rem;
height: .48rem;
border-radius: .24rem;
background-color: #333fc9;
line-height: .48rem;
text-align: center;
color: #FFFFFF;
}
/* 提示框 */
.evaluation-tips{
width: 6rem;
padding: .3rem;
background-color: #FFFFFF;
border-radius: .2rem;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 999;
}
.evaluation-tips li{
display: flex;
justify-content: space-between;
margin: .15rem 0;
}
.evaluation-tips p{
width: calc(100% - .22rem);
font-size: .28rem;
line-height: 1.5;
text-align: justify;
}
.evaluation-tips span{
display: block;
width: .12rem;
height: .12rem;
background-color: #333fc9;
border-radius: 100%;
margin: .15rem .1rem 0 0;
}
.tips-btn{
width: 100%;
margin-top: .6rem;
background-color: #333fc9;
border-radius: .16rem;
font-size: .32rem;
line-height: .8rem;
text-align: center;
color: #FFFFFF;
}
/* 测评入口 */
.entrance h3{
font-size: .3rem;
line-height: 1.5;
text-align: justify;
font-weight: normal;
}
.entrance .entrance-tips{
font-size: .28rem;
line-height: 1.5;
color: #ff7716;
padding: .25rem 0;
margin-top: .25rem;
border-top: .02rem solid #e2e4e6;
}
.entrance-btns{
padding-top: .15rem;
}
.entrance-btns>span{
display: block;
width: 100%;
margin-top: .25rem;
border-radius: .06rem;
border: .02rem solid #333fc9;
font-size: .32rem;
color: #333fc9;
line-height: .8rem;
text-align: center;
}
.entrance-btns>span:first-child{
background-color: #333fc9;
color: #FFFFFF;
}
/* 测评答题 */
.question-item .number{
font-size: .28rem;
line-height: 1.5;
}
.question-item .number>span{
font-size: .64rem;
line-height: 1.2;
color: #333fc9;
}
.question-item .number>em{
font-size: .6rem;
line-height: 1.2;
}
.question-item>h3{
margin: .3rem 0 .6rem;
font-size: .3rem;
line-height: 1.5;
text-align: justify;
}
.question-btns>span{
display: block;
width: 100%;
margin-top: .25rem;
border-radius: .06rem;
background-color: #d6d9f4;
font-size: .32rem;
line-height: .8rem;
text-align: center;
transition: all .6s;
}
.question-btns>span:hover{
background-color: #333fc9;
color: #FFFFFF;
transition: all .6s;
}
/* 我的页面 */
.my-content{
background-color: #f1f4f7;
margin-bottom: 0;
min-height: 100vh;
}
.my-banner{
position: relative;
}
.my-photo{
display: flex;
align-items: center;
width: 6.3rem;
height: 1.2rem;
position: absolute;
left: .6rem;
top: 1.5rem;
}
.my-photo>span{
width: 1.2rem;
height: 1.2rem;
border-radius: 100%;
border: .04rem solid #FFFFFF;
overflow: hidden;
}
.my-photo>span img{
width: 100%;
min-height: 1.16rem;
}
.my-photo>p{
font-size: .4rem;
line-height: 1.5;
color: #FFFFFF;
margin-left: .25rem;
}
/* 咨询卡 */
.user-receive{
width: 6.9rem;
height: 1.6rem;
border-radius: .1rem;
margin: -.8rem auto 0;
box-shadow: 0 0 .13rem rgba(29,47,67,.3);
overflow: hidden;
position: relative;
z-index: 1;
}
.user-receive>img{
width: 6.9rem;
height: 1.6rem;
}
.line{
width: 100%;
height: .8rem;
background-color: #FFFFFF;
margin-top: -.8rem;
}
.receive-txt{
display: flex;
align-items: center;
width: 6.1rem;
height: .48rem;
position: absolute;
left: .4rem;
bottom: .2rem;
}
.receive-txt>span{
width: 1.4rem;
border-radius: .24rem;
background-image: linear-gradient(to right, #663b00 , #3f2300);
font-size: .24rem;
line-height: .48rem;
text-align: center;
color: #FFFFFF;
}
.receive-txt>p{
font-size: .24rem;
line-height: 1.5;
color: #4f2d00;
margin-left: .16rem;
}
.receive-txt>.receive-btn{
background-color: #e81d1d;
background-image: none;
}
.student-information{
padding: .3rem .3rem 0;
background-color: #FFFFFF;
}
.student-information>li{
display: flex;
justify-content: space-between;
align-items: center;
height: .9rem;
}
.student-information>li>span,
.feedback>span,
.my-report>span{
width: .7rem;
}
.student-information>li>span img,
.feedback>span img,
.my-report>span img{
width: .44rem;
height: .44rem;
}
.student-information>li>p,
.feedback>p,
.my-report>p{
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - .6rem);
font-size: .34rem;
line-height: 2;
}
.student-information>li>p em{
font-size: .26rem;
color: #999999;
margin-right: .2rem;
padding-top: .02rem;
}
.student-information>li>img,
.feedback>img,
.my-report>img{
width: .16rem;
height: .28rem;
}
.student-information>li:first-child{
border-bottom: .02rem solid #e0e2e4;
}
.feedback,
.my-report{
padding: 0 .3rem;
background-color: #FFFFFF;
margin-top: .24rem;
display: flex;
justify-content: space-between;
align-items: center;
height: .9rem;
}
.my-report.open>img{
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
-o-transform:rotate(-90deg); /* Opera */
}
/* 报告列表 */
.report-list{
width: 100%;
height: 0;
padding: 0 .3rem;
background-color: #FFFFFF;
margin-bottom: .48rem;
overflow: hidden;
}
.report-list>li{
display: flex;
justify-content: space-between;
align-items: center;
height: .7rem;
}
.report-list>li p{
width: calc(100% - 2.2rem);
font-size: .28rem;
color: #666;
text-decoration: underline;
color: #3844ce;
}
.report-list>li span{
width: 2.1rem;
font-size: .24rem;
text-align: right;
color: #999999;
}
.report-list.open{
margin-top: .02rem;
padding: .15rem .3rem;
height: auto;
}
.feedback-btn{
background-color: #FFFFFF;
font-size: .34rem;
line-height: .9rem;
text-align: center;
color: #ea2828;
border-bottom: 1.5rem solid #f1f4f7;
}
/* 绑定手机 */
.bind-content{
min-height: calc(100vh - 1rem);
background-color: #f1f4f7;
}
.phone-bind{
padding: 0 .25rem;
background-color: #FFFFFF;
border-top: .25rem solid #f1f4f7;
margin-bottom: .25rem;
}
.phone-bind>li{
display: flex;
align-items: center;
height: 1rem;
font-size: .3rem;
}
.phone-bind>li:first-child{
border-bottom: .02rem solid #e2e4e6;
}
.phone-bind>li span{
width: 1.6rem;
color: #999999;
}
.phone-bind>li input{
width: calc(100% - 3.2rem);
height: 1rem;
padding-right: .15rem;
font-size: .3rem;
}
.phone-bind>li em{
width: 1.6rem;
font-size: .32rem;
color: #3440c9;
}
.bind-btn{
width: 7rem;
border-radius: .06rem;
background-color: #3440c9;
font-size: .32rem;
line-height: .8rem;
text-align: center;
color: #FFFFFF;
margin: 0 auto;
}
/* 个人信息 */
.phone-info{
background-color: #FFFFFF;
border-top: .25rem solid #f1f4f7;
margin-bottom: .25rem;
}
.phone-info>li{
display: flex;
justify-content: space-between;
align-items: center;
height: 1rem;
padding: 0 .25rem;
font-size: .3rem;
}
.phone-info>li:first-child{
height: 1.65rem;
border-bottom: .25rem solid #f1f4f7;
}
.phone-info>li:first-child p{
width: 1.1rem;
height: 1.1rem;
border-radius: 100%;
overflow: hidden;
}
.phone-info>li:first-child p>img{
width: 1.1rem;
min-height: 1.1rem;
}
.phone-info>li span{
width: .8rem;
color: #999999;
}
.phone-info>li input{
width: calc(100% - .8rem);
height: 1rem;
padding-right: .15rem;
font-size: .3rem;
text-align: right;
}
/* 意见与反馈 */
.feedback-msg{
width: 100%;
padding: .25rem;
}
.feedback-msg>textarea{
display: block;
width: 100%;
height: 2.8rem;
border-radius: .1rem;
background-color: #FFFFFF;
padding: .15rem .25rem;
font-size: .3rem;
line-height: 1.5;
}
/* 报告页面 */
.report-nav{
display: flex;
justify-content: center;
background-color: #FFFFFF;
border-top: .25rem solid #f1f4f7;
border-bottom: .25rem solid #f1f4f7;
padding: .2rem .25rem;
overflow: hidden;
}
.report-nav>li{
width: 50%;
font-size: .32rem;
line-height: .8rem;
border: .02rem solid #333fc9;
text-align: center;
color: #333fc9;
}
.report-nav>li:first-child{
border-radius: .1rem 0 0 .1rem;
}
.report-nav>li:last-child{
border-radius: 0 .1rem .1rem 0;
}
.report-nav>li.active{
background-color: #333fc9;
color: #FFFFFF;
}
.report-item-all{
background-color: #FFFFFF;
padding: .2rem .25rem;
}
.report-relation{
display: flex;
justify-content: space-between;
}
.report-relation>span{
font-size: .28rem;
color: #999999;
line-height: 2;
}
.report-box{
margin-top: .3rem;
}
.report-title{
font-size: .32rem;
line-height: 1.5;
font-weight: bold;
}
.report-box>span{
display: block;
font-size: .28rem;
line-height: 1.6;
text-align: justify;
color: #666666;
margin: .08rem 0 .2rem;
}
.report-exponent{
padding: .25rem 0;
border-bottom: .02rem dashed #dedede;
}
.report-item>.report-exponent:first-child{
padding-top: .1rem;
}
.report-item>.report-exponent:last-child{
padding-bottom: .1rem;
border: 0;
}
.exponent-title,
.exponent-list{
display: flex;
justify-content: space-between;
}
.exponent-list{
margin-top: .2rem;
}
.exponent-item{
width: 31.5%;
margin-top: .2rem;
}
.exponent-item>span{
display: block;
font-size: .3rem;
line-height: 1.5;
font-weight: bold;
text-align: center;
border-bottom: .02rem solid #333fc9;
}
.exponent-item-son{
margin-top: .15rem;
}
.exponent-item-son span{
display: block;
font-size: .28rem;
line-height: 1.2;
margin: .15rem 0;
text-align: center;
color: #666666;
}
/* 咨询师端 */
.consultant{
background-color: #FFFFFF;
}
.consultant-photo{
display: flex;
justify-content: space-between;
align-items: center;
padding: .25rem;
background-color: #FFFFFF;
border-bottom: .25rem solid #f1f4f7;
}
.consultant-photo>div{
width: calc(100% - 1.84rem);
display: flex;
align-items: center;
}
.consultant-photo>div>span{
width: 1.8rem;
height: 1.8rem;
border-radius: 100%;
margin: 0 auto;
overflow: hidden;
}
.consultant-photo>div>span img{
width: 2rem;
min-height: 2rem;
}
.consultant-photo>div>p{
width: calc(100% - 1.9rem);
margin-left: .1rem;
}
.consultant-photo>div>p span{
display: block;
font-size: .3rem;
line-height: 1.6;
color: #444444;
}
.consultant-photo>div>p em{
color: #888888;
}
.consultant-photo>p{
width: 1.84rem;
font-size: .26rem;
height: .6rem;
line-height: .6rem;
border-radius: .15rem;
background-color: #3844ce;
text-align: center;
color: #FFFFFF;
margin: .1rem auto 0;
}
.consultant-info{
padding: .05rem .25rem;
}
.consultant-info>p{
font-size: .3rem;
line-height: 1.4;
margin: .28rem 0;
}
.consultant-info>p span{
color: #888888;
}
.case-administer{
display: flex;
justify-content: space-between;
align-items: center;
height: 1.2rem;
padding: .2rem .25rem;
border-top: .25rem solid #f1f4f7;
}
.case-administer h3{
font-size: .32rem;
}
.case-administer>span{
width: 1.32rem;
font-size: .26rem;
height: .6rem;
line-height: .6rem;
border-radius: .15rem;
background-color: #3844ce;
text-align: center;
color: #FFFFFF;
}
.consultant-case{
padding: .2rem .25rem;
}
.consultant-case>li{
display: flex;
justify-content: space-between;
align-items: center;
border: .02rem solid #f1f4f7;
border-top: 0;
}
.consultant-case>li:first-child{
border-top: .02rem solid #f1f4f7;
}
.consultant-case>li>span{
display: flex;
justify-content: center;
align-items: center;
height: 1.4rem;
border-left: .02rem solid #f1f4f7;
}
.consultant-case>li>span:first-child{
width: 1.4rem;
border-left: 0;
}
.consultant-case>li>span:first-child img{
width: 1.2rem;
height: 1rem;
margin: .1rem;
border-radius: .04rem;
}
.consultant-case>li>span:nth-of-type(2){
justify-content: flex-start;
width: 3.3rem;
padding: 0 .1rem;
font-size: .3rem;
line-height: 1.4;
}
.consultant-case>li>span:nth-of-type(3){
width: 1.15rem;
}
.consultant-case>li>span:last-child{
width: 1.15rem;
}
.consultant-case>li>span ins{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
font-style: normal;
text-decoration: none;
}
.consultant-case>li>span:last-child em{
width: 100%;
line-height: .5rem;
text-align: center;
color: #3844ce;
font-size: .28rem;
}
.consultant-case>li>span:last-child em:last-child{
color: #ea2828;
}
.consultant-case>li:first-child span{
height: .8rem;
justify-content: center;
}
.consultant-case>li>span p{
display: -webkit-box;
-webkit-line-clamp: 2;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
/* 编辑案例页 */
.key-list>span{
width: 1.5rem;
margin-right: .25rem;
}
.case{
padding-bottom: .25rem;
}
.case-cover{
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
padding: .2rem .25rem;
background-color: #FFFFFF;
}
.case-cover>p{
width: 100%;
font-size: .32rem;
line-height: 1.5;
margin-bottom: .15rem;
}
.cover-img{
width: 4rem;
height: 3rem;
border: .02rem dashed #dedede;
}
.cover-btn{
width: 1.5rem;
height: .6rem;
background-color: #3844ce;
border-radius: .1rem;
line-height: .6rem;
font-size: .3rem;
color: #FFFFFF;
text-align: center;
margin-left: .5rem;
}
.case-msg{
padding: .2rem .25rem;
background-color: #FFFFFF;
}
.case-msg>li{
margin-bottom: .5rem;
}
.case-msg p{
font-size: .32rem;
line-height: 1.5;
margin-bottom: .15rem;
}
.case-msg input,
.case-msg textarea{
width: 100%;
height: .8rem;
line-height: .8rem;
padding: 0 .1rem;
border: .02rem solid #dedede;
border-radius: .04rem;
font-size: .3rem;
color: #666666;
}
.case-msg textarea{
height: 2.4rem;
padding: .1rem;
line-height: 1.5;
}
.case-btn{
width: 7rem;
margin: .3rem auto 0;
background-color: #3844ce;
border-radius: .16rem;
font-size: .32rem;
line-height: .8rem;
text-align: center;
color: #FFFFFF;
}
/* 修改基本资料 */
.personal-item{
padding: .3rem .25rem 0;
background-color: #FFFFFF;
}
.edit-list .personal-item:first-child{
padding-top: 0;
}
.personal-item>p{
font-size: .3rem;
line-height: 2;
padding-bottom: .1rem;
color: #444;
font-weight: bold;
}
.personal-item>p span{
color: #333333;
font-weight: normal;
}
.edit-list .personal-item:first-child>p{
padding: .15rem 0 0 0;
}
.personal-txt{
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.personal-photo{
width: 4rem;
height: 4.25rem;
border: .02rem dashed #dedede;
}
.personal-photo>span{
display: block;
font-size: .28rem;
line-height: 1.6;
padding: .15rem;
text-align: justify;
color: #888888;
}
.edit-btn{
width: 1.5rem;
height: .6rem;
background-color: #3844ce;
font-size: .3rem;
line-height: .6rem;
border-radius: .1rem;
text-align: center;
color: #FFFFFF;
}
.personal-item .left{
display: flex;
justify-content: space-around;
align-items: center;
}
.personal-item .left>.personal-txt>span{
width: 4rem;
height: .6rem;
font-size: .32rem;
line-height: .6rem;
}
.personal-item .left>.personal-txt input{
width: 4rem;
height: .6rem;
padding: 0 .1rem;
border: .02rem solid #dedede;
border-radius: .04rem;
}
.personal-top{
width: 100%;
}
.personal-top>textarea{
width: 100%;
height: 1.8rem;
padding: .1rem;
border: .02rem solid #dedede;
border-radius: .04rem;
margin-bottom: .2rem;
font-size: .3rem;
line-height: 1.5;
}
.city-item,
.price-item{
display: flex;
align-items: center;
margin-bottom: .2rem;
}
.city-item>div,
.price-item>div{
width: 3.5rem;
font-size: .3rem;
color: #888888;
text-align: right;
}
.price-item>div{
padding-right: .18rem;
}
.city-item>input,
.price-item>input{
width: 3.5rem;
height: .6rem;
padding: 0 .1rem;
border: .02rem solid #dedede;
border-radius: .04rem;
background-image: url(../../images/home/expert/arrow-down.png);
background-repeat: no-repeat;
background-size: .22rem .12rem;
background-position: 3.1rem center;
font-size: .3rem;
}
.preview-btns{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 1rem;
box-shadow: 0 0 .15rem rgba(29,47,67,.05);
background-color: #FFFFFF;
position: fixed;
bottom: 0;
z-index: 9;
}
.preview-btns>span{
width: 3rem;
height: .8rem;
background-color: #3844ce;
text-align: center;
line-height: .8rem;
margin: 0 .2rem;
border-radius: .16rem;
color: #FFFFFF;
}
.preview-btns>span:last-child{
background-color: #ff9834;
}
.bottom-box{
margin-bottom: 1.3rem;
}