cer __LgZds5MVHW3o08T7UcX __LgZds5MVHW3o08T7UcX p { margin: 0; padding: 0; } /*sm*/ @media (max-width: 720px) { #app { height: 100%; overflow: auto; } .certificate { width: 44.38rem; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; height: 100vh; max-width: 100%; background: url(https://bcxin-saas-test.obs.cn-north-1.myhuaweicloud.com:443/upload%2F2021-11-25%2F1637825768736056960.png) no-repeat 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; background-size: 100% 100%; padding: 2rem 0; } .certificate .card-left, .certificate .card-right { transform: rotate(90deg); width: 100%; height: 50%; -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: center; box-sizing: border-box; } .card-left .left-header { box-sizing: border-box; position: relative; padding-left: 1.88rem; } .card-left .left-header .text { width: 16.47rem; font-size: 1rem; line-height: 2rem; } .card-left .left-header .text .name { display: inline-block; margin-left: 2.75rem; text-align: center; padding: 0 1.54rem; font-size: 0.8rem; border-bottom: 1px solid #040000; -webkit-box-sizing: border-box; box-sizing: border-box; } .qrcode { width: 4.5rem; height: 4.5rem; display: block; margin: 1.3rem auto; } .card-info { padding-left: 1.94rem; font-size:0.8rem; } .infoMar{ margin: 0.63rem 0 0.72rem; } .card-id{ font-size: 1rem; } /* .user { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } */ .user-photo { width: 5rem; height: 6rem; display: block; margin: 0rem auto 2.13rem; } .user-info { margin-left: 20px; margin-bottom: 0.5rem; font-size: 1rem; } .user-id { margin-top: 5.7rem; margin-left: 20px; font-size: 1rem; } } /*xl*/ @media (min-width: 721px) { #app { height: 100%; overflow: auto; } .certificate { width: 44.38rem; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row; /* width: 20rem; */ max-width: 100%; margin: 0 auto; background: url(https://bcxin-saas-test.obs.cn-north-1.myhuaweicloud.com:443/upload%2F2021-11-25%2F1637825768736056960.png) no-repeat 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; background-size: 100% 100%; padding: 4rem 0; } .certificate .card-left, .certificate .card-right { transform: rotate(0deg); box-sizing: border-box; width: 50%; height: 100%; -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0rem 0rem; } .card-left .left-header { box-sizing: border-box; position: relative; padding-left: 1.88rem; } .card-left .left-header .text { width: 16.47rem; font-size: 1rem; line-height: 2rem; } .card-left .left-header .text .name { display: inline-block; margin-left: 2.75rem; text-align: center; padding: 0 1.54rem; font-size: 1.18rem; border-bottom: 1px solid #040000; -webkit-box-sizing: border-box; box-sizing: border-box; } .qrcode { width: 6.53rem; height: 6.53rem; display: block; margin: 7% 12rem; } .card-info { padding-left: 1.94rem; font-size: 1.18rem; } .card-id{ font-size: 1.38rem; } .infoMar { margin: 0.63rem 0 1.44rem; } .user-photo { width: 4.69rem; height: 6.63rem; display: block; margin: 0rem 167px 32px; } .user-info { margin-left: 20px; margin-bottom: 8px; font-size: 1.2rem; } .user-id { margin-top: 6.3rem; } } /*mini*/ @media (max-width: 320px) { } @media (max-width: 1000px)and (min-width:320px) {} ]]> 0