.content{ height: 100vh; width: 100%; padding: 0 .2rem; box-sizing: border-box; background: #F8F8FB; } .box{ height: 11.5rem; width: 7.1rem; position: relative; display: none; } .img{ width: 1.2rem; height: 1.8rem; position: absolute; left: 50%; transform: translateX(-50%); img{ width:1.2rem; height: 1.8rem; object-fit: cover; } } .name{ position: absolute; line-height: .4rem; font-size: .28rem; border-bottom: 1px solid #4C1947; font-weight: bold; color: #4F1A48; text-align: center; } .gender{ position: absolute; font-size: .2rem; font-weight: bold; color: #2E2E2E; line-height: .3rem; } .enName{ font-size: .18rem; font-weight: bold; color: #707172; line-height: .25rem; border-bottom: 1px solid #707172; position: absolute; text-align: center; } .enName1{ font-size: .18rem; font-weight: bold; color: #707172; line-height: .25rem; width: 1.4rem; border-bottom: 1px solid #707172; position: absolute; text-align: center; } .levelEn{ position: absolute; width: .5rem; border-bottom: 1px solid #4C1947; font-size: .24rem; font-weight: bold; color: #4F1A48; line-height: .4rem; text-align: center; } .judge,.code,.time{ position: absolute; left: 2.12rem; font-size: .2rem; font-weight: bold; color: #2E2E2E; line-height: .24rem; } .judge{ width: 1.86rem; } // 美容师资格证书 .mrzgz{ margin-top: .54rem; background: url(../assets/mrzgz.png) center center no-repeat; background-size: cover; display: block; .img{ top: 3.35rem; } .gender{ top: 5.6rem; left: 2.63rem; } .topTime{ position: absolute; top: 5.52rem; left: 3.3rem; border-bottom: 1px solid #4F1A48; font-size: .24rem; font-weight: bold; line-height: .36rem; } .name{ left: .94rem; top: 5.48rem; width: 1.92rem; color: #4C1947; border-bottom: 1px solid #4C1947; } .enName{ top: 6.66rem; left: 3.34rem; width: 1.60rem; } .enName1{ top: 7.06rem; left: .94rem; width: 1.4rem; } .judge{ top: 8.19rem; } .code{ top: 8.76rem; } .time{ top: 9.33rem; } .levelCn{ left: 3.21rem; top: 5.9rem; position: absolute; width: .5rem; border-bottom: 1px solid #4C1947; font-size: .24rem; font-weight: bold; color: #4F1A48; line-height: .33rem; text-align: center; } .levelEn{ top: 7.06rem; left: .94rem; font-size: .18rem; font-weight: bold; color: #707172; width: 1.4rem; line-height: .25rem; } .middle{ top: 8.1rem; } } .mrs{ margin-top: .54rem; background: url(../assets/mrs.png) center center no-repeat; background-size: cover; display: block; .img{ top: 3.99rem; } .gender{ top: 6.08rem; left: 2.33rem; } .name{ left: .95rem; top: 5.98rem; width: 1.7rem; color: #707172; border-bottom: 1px solid #707172; } .enName{ top: 6.8rem; left: 3.34rem; width: 1.6rem; } .judge{ top: 8.39rem; } .middle{ top: 8.2rem; } .code{ top: 8.96rem; } .time{ top: 9.53rem; } } .gjmrs{ margin-top: .54rem; background: url(../assets/gjmrs.png) center center no-repeat; background-size: cover; display: block; .img{ top: 3.99rem; } .name{ left: .95rem; top: 5.98rem; width: 1.7rem; color: #729996; border-bottom: 1px solid #729996; } .enName{ top: 7.14rem; left: 3.34rem; width: 1.6rem; color: #729996; border-bottom: 1px solid #729996; } .gender{ top: 6.08rem; left: 2.33rem; } .judge{ top: 8.39rem; } .middle{ top: 8.2rem; } .code{ top: 8.96rem; } .time{ top: 9.53rem; } } .cwzxs{ margin-top: .54rem; background: url(../assets/cwzxs.png) center center no-repeat; background-size: cover; display: block; .img{ top: 3.35rem; } .name{ left: .94rem; top: 5.48rem; width: 1.92rem; color: #F29700 ; border-bottom: 1px solid #F29700; } .genderEn{ position: absolute; top: 6.67rem; left: 2.66rem; font-size: .16rem; font-family: SourceHanSerifCN-Bold, SourceHanSerifCN; font-weight: bold; color: #9EA1AC; line-height: .4rem; } .issueDate{ text-align: center; position: absolute; top: 5.58rem; left: 3.32rem; width: 1.7rem; border-bottom: 1px solid #F29700; font-size: .26rem; font-weight: bold; color: #F29700; line-height: .3rem; } .enName{ top: 6.66rem; left: 3.36rem; width: 1.7rem; } .judge{ top: 8.19rem; } .middle{ top: 8.1rem; } .code{ top: 8.76rem; } .time{ top: 9.33rem; } .gender{ top: 5.62rem; left: 2.93rem; } } .jpzxs { margin-top: .54rem; background: url(../assets/jpzxs.png) center center no-repeat; background-size: cover; display: block; .img{ top: 3.35rem; } .name{ left: .94rem; top: 5.48rem; width: 1.92rem; color: #996638 ; border-bottom: 1px solid #996638 ; } .gender{ top: 5.62rem; left: 2.93rem; } .enName{ top: 6.66rem; left: 3.36rem; width: 1.7rem; } .genderEn{ position: absolute; top: 6.76rem; left: 2.66rem; font-size: .16rem; font-family: SourceHanSerifCN-Bold, SourceHanSerifCN; font-weight: bold; color: #9EA1AC; line-height: .23rem; } .issueDate{ text-align: center; position: absolute; top: 5.58rem; left: 3.36rem; width: 1.7rem; border-bottom: 1px solid #996638; font-size: .26rem; font-weight: bold; color: #996638; line-height: .3rem; } .judge{ top: 8.19rem; } .middle{ top: 8.1rem; } .code{ top: 8.76rem; } .time{ top: 9.33rem; } } .cwxhs{ margin-top: .54rem; background: url(../assets/cwxhs.png) center center no-repeat; background-size: cover; display: block; .img{ top: 3.55rem; } .name{ left: .94rem; top: 5.48rem; width: 2.32rem; color: #996537 ; border-bottom: 1px solid #996537 ; } .level{ position: absolute; top: 5.85rem; left: 3.62rem; width: .9rem; border-bottom: 1px solid #996638; font-size: .28rem; font-weight: bold; color: #996638; line-height: .4rem; text-align: center; font-weight: bold; } .levelEn{ top: 7.06rem; left: .94rem; width: 1.61rem; font-size: .18rem; font-weight: bold; color: #707172; line-height: .25rem; } .genderEn{ position: absolute; top: 6.76rem; left: 2.66rem; font-size: .16rem; font-family: SourceHanSerifCN-Bold, SourceHanSerifCN; font-weight: bold; color: #9EA1AC; line-height: .23rem; } .gender{ top: 5.6rem; left: 2.91rem; } .enName{ width: 1.68rem; top: 6.66rem; left: 3.31rem; } .judge{ top: 8.19rem; } .middle{ top: 8.1rem; } .code{ top: 8.76rem; } .time{ top: 9.33rem; } } .pdggjmrs { margin-top: .54rem; background: url(../assets/pdggjmrs.png) center center no-repeat; background-size: cover; display: block; .name { top: 3.6rem; left: 2.2rem; width: 2.7rem; color: #2E2E2E; border-bottom: 0px solid #2E2E2E; } .levelCn { top: 4.47rem; left: 4.35rem; position: absolute; width: 1.8rem; font-size: .24rem; font-weight: bold; color: #2E2E2E; line-height: .33rem; text-align: center; border-bottom: 0px solid #2E2E2E; } .enName { top: 5.2rem; left: 2.3rem; width: 1.4rem; color: #2E2E2E; border-bottom: 0px solid #2E2E2E; } .levelEn { top: 5.67rem; left: 1.15rem; font-size: .18rem; font-weight: bold; color: #2E2E2E; width: 1.5rem; line-height: .25rem; border-bottom: 0px solid #2E2E2E; } .judge { top: 6.2rem; left: 1.3rem; } .middle { top: 6.05rem; left: 1.3rem; } .code { top: 6.8rem; left: 1.3rem; } .time { top: 7.4rem; left: 1.3rem; } .cku_ceo_signature { position: absolute; top: 5.9rem; left: 4.5rem; width: 1.24rem; height: 0.8rem; background: url(../assets/cku_ceo_signature.png) center center no-repeat; background-size: cover; display: inline-block; } .pdg_ceo_signature { position: absolute; top: 6.7rem; left: 4.6rem; width: 1.36rem; height: 0.5rem; background: url(../assets/pdg_ceo_signature.png) center center no-repeat; background-size: cover; display: inline-block; } } .blmmrzgz{ margin-top: .54rem; background: url(../assets/blmmrs.jpg) center center no-repeat; background-size: cover; display: block; .img{ top: 2.4rem; left: 1.83rem; width:1.43rem; height: 2.16rem; img{ width:1.43rem; height: 2.16rem; object-fit: cover; } } .name{ top: 2.3rem; left: 3.1rem; width: 1.5rem; font-size: .20rem; font-weight: 600; color: #2E2E2E; line-height: .25rem; border-bottom: 0px solid #2E2E2E; } .levelCn { top: 2.95rem; left: 3.15rem; position: absolute; width: 2.25rem; font-size: .20rem; font-weight: 600; color: #2E2E2E; line-height: .25rem; text-align: center; border-bottom: 0px solid #2E2E2E; } .enName { top: 4.7rem; right: 0.42rem; width: 1.35rem; font-size: .14rem; line-height: .20rem; color: #2E2E2E; border-bottom: 0px solid #2E2E2E; } .enNameMiddle { top: 4.5rem; } .levelEn{ top: 5.03rem; right: 0.4rem; width: 2.2rem; font-size: .14rem; line-height: .20rem; color: #2E2E2E; border-bottom: 0px solid #2E2E2E; } .judge { top: 7.3rem; left: 4.4rem; width: 2.2rem; } .middle { top: 7.15rem; } .code { top: 8rem; left: 4.4rem; width: 2.2rem; } .time { top: 9.5rem; left: 4.4rem; width: 2.2rem; } }