.body { min-height: 100vh; position: relative; overflow: hidden; background: top center no-repeat; background-size: contain; padding-top: 0.4rem; .card { position: relative; background: top center no-repeat; background-size: contain; height: 11.24rem; align-items: center; padding: 3.42rem 0.9rem 0; .c_t { height: 0.4rem; background: #008BCA; border-radius: 0.2rem; padding: 0 0.2rem; justify-content: center; font-size: 0.26rem; color: #FFFFFF; } .c_n { text-align: center; font-size: 0.6rem; font-weight: 600; line-height: 0.7rem; color: #009A62; border-bottom: 0.02rem solid #BBCFBE; margin-bottom: 0.12rem; } .c_d { font-size: 0.24rem; color: #2E2E2E; margin-bottom: 0.5rem; text-align: center; } .tr { width: 4.5rem; line-height: 0.4rem; flex-direction: row; align-items: center; font-size: 0.22rem; color: #2E2E2E; span { width: 1.6rem; color: #072315; padding-left: 0.16rem; } &:first-child { font-size: 0.26rem; font-weight: 500; background: #C5E2D7; } } .bo { position: absolute; left: 0; right: 0; bottom: 1.17rem; flex-direction: row; justify-content: space-between; padding: 0 0.9rem; .bo_l,.bo_r { flex-direction: row; font-size: 0.22rem; color: #072315; span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; font-size: 0.22rem; font-weight: 500; color: #2E2E2E; margin-left: 0.08rem; &:after { content: ''; width: 1.1rem; border-bottom: 0.02rem solid #BBCFBE; } } } } } .btn { width: 4rem; height: 0.8rem; justify-content: center; align-items: center; background: #FFFFFF; border-radius: 0.4rem; margin: 0 auto 0.2rem; font-weight: 600; } .cku_ex { flex-direction: row; align-items: center; font-size: 0.26rem; color: #E9EDE9; margin: 0 auto 0.6rem; &:after { content: ''; width: 0.08rem; height: 0.14rem; background: url(../assets/ckuCertificate/icon3.png) center no-repeat; background-size: contain; margin-left: 0.06rem; } } .cku_foot { flex-direction: row; align-items: center; font-size: 0.2rem; color: #B5C2BC; margin: 0 0.24rem 0.3rem; &:before { content: ''; width: 0.36rem; height: 0.36rem; background: url(../assets/ckuCertificate/icon4.png) center no-repeat; background-size: contain; margin-right: 0.1rem; } } .certificate { position: absolute; top: 0; left: 0; right: 0; z-index: -1; background: center no-repeat; background-size: contain; font-size: 30px; font-weight: 500; color: #333333; .ce_t_i { position: absolute; width: 591px; height: 108px; top: 300px; right: 200px; } .ce_t_xt{ position: absolute; width: 591px; height: 108px; bottom: 350px; left: 1100px; } .ce_t_xt1{ position: absolute; width: 591px; height: 108px; bottom: 220px; left: 1100px; } .ce_t_zaxt{ position: absolute; width: 591px; height: 108px; top: 450px; right: 200px; } .ce_t_dg{ position: absolute; width: 591px; height: 108px; top: 300px; right: 900px; } .ce_t_dg1{ position: absolute; width: 591px; height: 108px; top: 450px; right: 900px; } .ce_t_jd{ position: absolute; width: 591px; height: 108px; bottom: 400px; left: 290px; } .ce_t_jd1{ position: absolute; width: 591px; height: 108px; bottom: 540px; left: 290px; } .ce_t_mq{ position: absolute; width: 591px; height: 108px; top: 140px; right: 710px; } .ce_t_mq1{ position: absolute; width: 591px; height: 108px; top: 260px; right: 710px; } } .open_bg { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 9000; background: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; color: #FFFFFF; img { width: 95%; height: auto; margin-bottom: 0.3rem; } } &.xt { background-color: #072315; background-image: url(../assets/ckuCertificate/xt/icon1.png); .card { background-image: url(../assets/ckuCertificate/xt/icon2.png); } .certificate { width: 3508px; height: 2481px; background-image: url(../assets/ckuCertificate/xt/xt.jpg); .ce_n { padding: 390px 0 0 1478px; } .ce_t { padding: 52px 0 0 0; .ce_tr { flex-direction: row; align-items: center; height: 78px; span { box-sizing: border-box; &:nth-child(1) { width: 1818px; padding-left: 600px; } &:nth-child(2) { width: 738px; padding-left: 304px; } &:nth-child(3) { width: 680px; padding-left: 304px; } } } } .ce_b { padding: 34px 274px 0; flex-direction: row; height: 1186px; .ce_td { flex: 1; .ce_td_tr { flex: 1; .ce_td_tr_r { flex-direction: row; justify-content: space-between; } } &:nth-child(1) { .ce_td_tr { padding: 114px 85px 0; } } &:nth-child(2) { .ce_td_tr { padding: 0 160px 0; justify-content: space-around; } } &:nth-child(3) { .ce_td_tr { font-size: 26px; padding: 0 20px 0 200px; justify-content: space-around; } } } } .ce_b_t { padding: 165px 0 0 1965px; } .ce_b_c { position: absolute; width: 240px; height: 240px; right: 220px; bottom: 220px; justify-content: center; align-items: center; background: #FFFFFF; } } } &.zaXt { background-image: url(../assets/ckuCertificate/zaXt/icon1.jpg); background-color: #835638; background-size: cover; .card { background-image: url(../assets/ckuCertificate/zaXt/icon2.png); .c_t { background: #ba8627; } .c_n { color: #4d4d4d; border-bottom: 0.02rem #cccccc; } .tr { &:first-child { background: rgba(220, 166, 66, 0.33); } } .bo { .bo_l,.bo_r { span { &:after { border-bottom: 0.02rem #cccccc; } } } } } .certificate { font-size: 32px; width: 2930px; height: 4607px; background-image: url(../assets/ckuCertificate/zaXt/zaXt.jpg); .ce_t { padding: 610px 0 0 0; .ce_tr { flex-direction: row; align-items: center; height: 78px; margin: 0 0 15px; &:nth-child(1) { margin: 0 0 70px; } &:nth-child(6) { span:nth-child(2) { padding-top: 60px; } } span { box-sizing: border-box; &:nth-child(1) { width: 1690px; padding-left: 734px; span { padding-left: 118px; } } &:nth-child(2) { width: 1140px; padding-left: 350px; } } } } .ce_b { padding: 136px 368px 0; flex-direction: row; height: 2130px; .ce_td { .ce_td_tr { flex: 1; justify-content: center; span { white-space: nowrap; overflow: visible; } } &:nth-child(1) { width: 510px; .ce_td_tr { padding: 0 0 0 30px; } } &:nth-child(2) { width: 896px; .ce_td_tr { } } &:nth-child(3) { .ce_td_tr { } } } } .ce_b_t { padding: 490px 0 0 1248px; } } } &.zaJd { background-image: url(../assets/ckuCertificate/zaJd/icon1.jpg); background-color: #835638; background-size: cover; .card { background-image: url(../assets/ckuCertificate/zaJd/icon2.png); .c_t { background: #ba8627; } .c_n { color: #4d4d4d; border-bottom: 0.02rem solid #cccccc; } .tr { &:first-child { background: rgba(220, 166, 66, 0.33); } } .bo { .bo_l,.bo_r { span { &:after { border-bottom: 0.02rem solid #cccccc; } } } } } .certificate { font-size: 32px; width: 2930px; height: 4607px; background-image: url(../assets/ckuCertificate/zaJd/zaJd.jpg); .ce_t { padding: 610px 0 0 0; .ce_tr { flex-direction: row; align-items: center; height: 78px; margin: 0 0 15px; &:nth-child(1) { margin: 0 0 70px; } &:nth-child(4) { margin: 0 0 138px; } &:nth-child(5) { margin: 0 0 150px; } span { box-sizing: border-box; &:nth-child(1) { width: 1690px; padding-left: 734px; } &:nth-child(2) { width: 1140px; padding-left: 350px; } } } } .ce_b { margin: 2090px 0 0 1224px; flex-direction: row; height: 336px; .ce_td { width: 810px; &:nth-child(1) { justify-content: flex-end; padding-bottom: 20px; } &:nth-child(2) { div { flex: 1; justify-content: center; } } } } } } &.jd { background-image: url(../assets/ckuCertificate/jd/icon1.png); background-color: #151515; .card { background-image: url(../assets/ckuCertificate/jd/icon2.png); .c_t { background: #737373; } .c_n { color: #6d4a2c; border-bottom: 0.02rem solid #cccccc; } .tr { &:first-child { background: #ebddcf; } } .bo { .bo_l,.bo_r { span { &:after { border-bottom: 0.02rem solid #cccccc; } } } } } .certificate { font-size: 32px; width: 2480px; height: 3510px; background-image: url(../assets/ckuCertificate/jd/jd.jpg); .ce_t { padding: 412px 0 0 0; .ce_tr { flex-direction: row; align-items: center; height: 78px; margin: 0 0 15px; &:nth-child(1) { span:nth-child(1) { padding-left: 900px; } } &:nth-child(5) { margin: 0; } &:nth-child(6) { margin: 0 0 110px; } &:nth-child(7) { span:nth-child(1) { padding-left: 820px; } } span { box-sizing: border-box; &:nth-child(1) { width: 1270px; padding-left: 600px; } &:nth-child(2) { width: 1050px; padding-left: 350px; } } } } .ce_b { margin: 1176px 0 0 815px; height: 336px; div { flex: 1; justify-content: center; } } .ce_b_t { padding: 336px 0 0 1860px; } } } &.dnaXt { background-image: url(../assets/ckuCertificate/dnaXt/icon1.png); background-color: #072322; .card { background-image: url(../assets/ckuCertificate/dnaXt/icon2.png); .c_t { background: #008bca; } .c_n { color: #008a9a; border-bottom: 0.02rem solid #cccccc; } .c_d { margin-bottom: 0; } .c_dna { font-size: 0.28rem; font-weight: 500; color: #cb0000; margin-bottom: 0.3rem; } .tr { &:first-child { background: #ddfbff; } } .bo { .bo_l,.bo_r { span { &:after { border-bottom: 0.02rem solid #cccccc; } } } } } .certificate { width: 3508px; height: 2480px; background-image: url(../assets/ckuCertificate/dnaXt/dnaXt.jpg); .ce_t { padding: 480px 0 0 0; .ce_tr { flex-direction: row; align-items: center; height: 86px; span { width: 760px; padding-left: 350px; box-sizing: border-box; white-space: nowrap; overflow: visible; &:nth-child(1) { width: 1000px; padding-left: 600px; } &:nth-child(4) { span { width: auto; padding-left: 120px; } } } } } .ce_b { padding: 100px 268px 0; flex-direction: row; height: 1220px; .ce_td { flex: 1; .ce_td_tr { flex: 1; .ce_td_tr_r { flex-direction: row; justify-content: space-between; } } &:nth-child(1) { .ce_td_tr { justify-content: center; padding: 0 0 0 148px; } } &:nth-child(2) { .ce_td_tr { padding: 0 0 0 200px; justify-content: center; } } &:nth-child(3) { .ce_td_tr { font-size: 26px; padding: 0 50px 0 240px; justify-content: center; } } } } .ce_b_t { padding: 165px 825px 0 785px; flex-direction: row; justify-content: space-between; } .geneBox{ position: absolute; left: 780px; top: 2152px; display: block; p{ display: inline-block; } } } } &.dnaYsfyXt { background-image: url(../assets/ckuCertificate/dnaYsfyXt/icon1.png); background-color: #23070c; .card { background-image: url(../assets/ckuCertificate/dnaYsfyXt/icon2.png); .c_t { background: #008bca; } .c_n { color: #862b3d; border-bottom: 0.02rem solid #cccccc; } .c_d { margin-bottom: 0; } .c_dna { font-size: 0.28rem; font-weight: 500; color: #cb0000; margin-bottom: 0.3rem; } .tr { &:first-child { background: #efc0c8; } } .bo { .bo_l,.bo_r { span { &:after { border-bottom: 0.02rem solid #cccccc; } } } } } .certificate { width: 3508px; height: 2480px; background-image: url(../assets/ckuCertificate/dnaYsfyXt/dnaYsfyXt.jpg); .ce_t { padding: 380px 0 0 0; .ce_tr { flex-direction: row; align-items: center; height: 86px; span { width: 760px; padding-left: 350px; box-sizing: border-box; white-space: nowrap; overflow: visible; &:nth-child(1) { width: 1000px; padding-left: 600px; } &:nth-child(4) { span { width: auto; padding-left: 120px; } } } } } .ce_b { padding: 30px 270px 0; flex-direction: row; height: 1310px; .ce_td { flex: 1; .ce_td_tr { flex: 1; .ce_td_tr_r { flex-direction: row; justify-content: space-between; } } &:nth-child(1) { .ce_td_tr { justify-content: center; padding: 0 0 0 148px; } } &:nth-child(2) { .ce_td_tr { padding: 0 0 0 200px; justify-content: center; } } &:nth-child(3) { .ce_td_tr { font-size: 26px; padding: 0 50px 0 240px; justify-content: center; } } } } .ce_b_t { padding: 108px 0 0 445px; } } } &.dg { background-image: url(../assets/ckuCertificate/dg/icon1.png); background-color: #231807; .card { background-image: url(../assets/ckuCertificate/dg/icon2.png); .c_t { background: #008bca; } .c_n { color: #9a7100; border-bottom: 0.02rem solid #cccccc; } .tr { &:first-child { background: #bf9d63; } } .bo { .bo_l,.bo_r { span { &:after { border-bottom: 0.02rem solid #cccccc; } } } } } .certificate { font-size: 32px; width: 4677px; height: 3000px; background-image: url(../assets/ckuCertificate/dg/dg.jpg); .ce_t { padding: 575px 0 0 0; .ce_tr { flex-direction: row; align-items: center; height: 110px; span { width: 1040px; padding-left: 470px; box-sizing: border-box; white-space: nowrap; overflow: visible; &:nth-child(1) { width: 1370px; padding-left: 825px; } &:nth-child(4) { span { width: auto; padding-left: 140px; } } } } } .ce_b { padding: 45px 375px 0; flex-direction: row; height: 1420px; .ce_td { flex: 1; .ce_td_tr { flex: 1; .ce_td_tr_r { flex-direction: row; justify-content: space-between; } } &:nth-child(1) { .ce_td_tr { justify-content: center; padding: 0 0 0 110px; margin-right: 80px; } } &:nth-child(2) { .ce_td_tr { padding: 0 0 0 120px; justify-content: center; } } &:nth-child(3) { .ce_td_tr { font-size: 30px; padding: 0 50px 0 375px; justify-content: center; } } } } .ce_b_t { padding: 156px 0 0 4080px; } } } &.mq { background-image: url(../assets/ckuCertificate/mq/icon1.png); background-color: #231f07; .card { background-image: url(../assets/ckuCertificate/mq/icon2.png); .c_t { background: #008bca; } .c_n { color: #9a9700; border-bottom: 0.02rem solid #cccccc; } .tr { &:first-child { background: #f7f6e6; } } .bo { .bo_l,.bo_r { span { &:after { border-bottom: 0.02rem solid #cccccc; } } } } } .card1{ background-image: url(../assets/ckuCertificate/mq/icon3.png); } .certificate { font-size: 32px; width: 4608px; height: 2930px; background-image: url(../assets/ckuCertificate/mq/mq.jpg); .ce_t { padding: 338px 0 0 0; .ce_tr { flex-direction: row; align-items: center; height: 80px; margin-bottom: 14px; &:nth-child(1) { margin-bottom: 38px; } span { box-sizing: border-box; white-space: nowrap; overflow: visible; &:nth-child(1) { width: 1185px; padding-left: 400px; } &:nth-child(2) { width: 1065px; padding-left: 345px; } &:nth-child(3) { width: 1055px; padding-left: 445px; } &:nth-child(4) { width: 1145px; padding-left: 300px; span { width: auto; padding-left: 140px; } } } } } .ce_b { padding: 70px 158px 0; flex-direction: row; height: 1718px; .ce_td { flex: 1; .ce_td_tr { flex: 1; .ce_td_tr_r { flex-direction: row; justify-content: space-between; } } &:nth-child(1) { .ce_td_tr { justify-content: center; padding: 0 0 0 215px; } } &:nth-child(2) { .ce_td_tr { padding: 0 0 0 200px; justify-content: center; } } &:nth-child(3) { .ce_td_tr { font-size: 30px; padding: 0 50px 0 370px; justify-content: center; } } } } .ce_b_t { padding: 192px 0 0 1485px; } } .certificate1{ background-image: url(../assets/ckuCertificate/mq/mq1.jpg); } } &.country { background-image: url(../assets/ckuCertificate/country/icon1.png); background-color: #024950; .card { background-image: url(../assets/ckuCertificate/country/icon2.png); .c_t { background: #066A71; } .c_n { color: #066A71; border-bottom: 0.02rem solid #BBCFBE; } .c_d { margin-bottom: 0.7rem; } .tr { &:first-child { background: #C2DEE0; font-weight: 600; } } .bo { .bo_l,.bo_r { span { &:after { border-bottom: 0.02rem solid #cccccc; } } } } } .certificate { width: 3508px; height: 2480px; background-image: url(../assets/ckuCertificate/country/country.jpg); .ce_t { padding: 440px 0 0 0; .ce_tr { flex-direction: row; align-items: center; height: 95px; span { box-sizing: border-box; &:nth-child(1) { width: 1580px; padding-left: 520px; } &:nth-child(2) { width: 870px; } } } } .ce_b { padding: 0 274px 0; flex-direction: row; height: 1186px; .ce_td { flex: 1; .ce_td_tr { flex: 1; .ce_td_tr_r { flex-direction: row; justify-content: space-between; } } &:nth-child(1) { .ce_td_tr { padding: 150px 100px 0; } } &:nth-child(2) { .ce_td_tr { padding: 40px 180px 0; justify-content: space-around; } } &:nth-child(3) { .ce_td_tr { font-size: 26px; padding: 40px 20px 0 200px; justify-content: space-around; } } } } .ce_b_t { padding: 150px 0 0 2250px; } } } &.normal { width: 100%; height: 100vh; .icon { height: 1.69rem; width: 3.2rem; background: url(../assets/normalIcon.png) center center no-repeat; background-size: 100% 100%; margin: 50% auto 0.46rem; } .p { font-size: .28rem; font-weight: 600; color: #A8A8A8; line-height: .4rem; text-align: center; } } &.geneContent{ background-image: url(../assets/ckuCertificate/gene/icon1.png); background-color: #100723; background-size: cover; .card{ background-image: url(../assets/ckuCertificate/gene/gene.png); height: 10.65rem; width: 7.02rem; padding: 3.58rem .73rem 0; margin: 0 auto .5rem; display: block; position: relative; } .samplingCode{ position: absolute; font-size: .15rem; left: 4.8rem; top: .49rem; color: #71627F; line-height: .21rem; } .enName{ width: 100%; top: 3.58rem; font-size: .22rem; font-weight: 500; color: #016DF7; line-height: .3rem; text-align: center; } .gender{ width: 100%; top: 3.97rem; font-size: .19rem; font-weight: 500; color: #413C45; line-height: .28rem; margin-top: .09rem; text-align: center; } .pos{ position: absolute; font-size: .19rem; font-weight: 500; color: #413C45; line-height: .28rem; } .pedigreeCertifiedCode{ left: 2.16rem; top: 4.44rem; width: 1.5rem; } .birthdate{ left: 5.25rem; top: 4.63rem; } .identificationFlag{ left: 1.61rem; top: 5.16rem; } .dogOwner{ display: flex; left: 4.68rem; top: 5.04rem; width: 1.4rem; height: .5rem; align-items: center; flex-direction: row; } .total{ top: 5.83rem; left: 2.45rem; font-size: .21rem; font-weight: 400; color: #71627F; line-height: .29rem; display: flex; flex-direction: row; align-items: center; .jt{ margin-left: .04rem; height: .16rem; width: .13rem; background: url(../assets/ckuCertificate/gene/gt.png) center center no-repeat; background-size: 100% 100%; } } .levelNo{ top: 6.77rem; left: 1.2rem; font-size: .21rem; color: #71627F; line-height: .29rem; } .level{ left: .97rem; top: 6.41rem; font-size: .21rem; color: #71627F; line-height: .29rem; .block{ display: block; } em{ margin-right: .06rem; display: inline-block; height: .11rem; width: .11rem; border-radius: 50%; } .list{ display: flex; justify-content: space-between; flex-direction: row; width: 2.52rem; margin-bottom: .07rem; &:nth-child(1) { em{ background: #FB602F; } } &:nth-child(2) { em{ background: #64CBAA; } } &:nth-child(3) { em{ background: #9AB2D0; } } } } .state{ left: 4.67rem; top: 6.38rem; height: .99rem; width: 1.16rem; img{ height: 100%; width: 100%; } } .time{ top: 9.49rem; left: 5.1rem; font-size: .17rem; font-weight: 400; color: #71627F; line-height: .24rem; } .dnaCode{ top: 7.87rem; left: 1.92rem; font-size: .24rem; font-weight: 500; color: #4F425C; line-height: .33rem; } .geneBox{ position: absolute; left: .73rem; top: 8.28rem; display: block; p{ display: inline-block; margin: 0; } span{ display:block; height: .108rem; margin-bottom: .04rem; width: .216rem } } } .certificate{ background-image: url(../assets/ckuCertificate/gene/gene.png); height: 2130px; width: 1404px; .samplingCode{ font-size: 30px; left: 960px; top: 98px; line-height: 42px; } .enName{ font-size: 44px; top: 716px; color: #016DF7; line-height: 60px; margin-bottom: 18px; } .gender{ top: 794px; line-height: 56px; font-size: 39px; } .pedigreeCertifiedCode{ width: 300px; top: 900px; left: 432px; font-size: 39px; line-height: 56px; word-wrap: break-word; } .birthdate{ top: 926px; left: 1050px; font-size: 39px; line-height: 56px; } .identificationFlag{ top: 1032px; left: 322px; font-size: 39px; line-height: 56px; } .dogOwner{ height: 100px; width: 300px; top: 1010px; left: 936px; font-size: 39px; line-height: 56px; } .total{ top: 1166px; left: 490px; font-size: 41px; line-height: 58px; .jt{ height: 32px; width: 26px; } } .level{ top: 1282px; left: 194px; font-size: 41px; line-height: 58px; em{ margin-right: 12px; height: 24px; width: 24px; } .list{ width: 504px; margin-bottom: 14px; } } .state{ height: 198px; width: 232px; top: 1276px; left: 934px; } .geneBox{ top: 1656px; left: 146px; span{ height: 22px; width: 43px; margin-bottom: 8px; } } .time{ top: 1898px; left: 1020px; line-height: 48px; font-size: 35px; } .dnaCode{ font-size: 48px; line-height: 66px; top: 1574px; left: 384px; } } &.dnaAppRaisal { background-image: url(../assets/ckuCertificate/dnaAppRaisal/icon1.png); background-color: #072322; .card { background-image: url(../assets/ckuCertificate/dnaAppRaisal/icon2.png); .c_t { background: #008bca; } .c_n { color: #008a9a; border-bottom: 0.02rem solid #BBCFBE; } .c_d { margin-bottom: 0.1rem; } .c_dna { font-size: 0.3rem; font-weight: 500; color: #008A9A; margin-bottom: 0.2rem; } .tr { &:first-child { background: #C5E2D7; } } .bo { bottom: 1.27rem; .bo_l, .bo_r { span { &:after { border-bottom: 0.02rem solid #BBCFBE; } } } } } .certificate { font-size: 32px; width: 2480px; height: 3510px; background-image: url(../assets/ckuCertificate/dnaAppRaisal/dnaAppRaisal.jpg); .ce_t { padding: 522px 0 0 0; .ce_tr { flex-direction: row; align-items: center; height: 91px; margin: 0; &:nth-child(1) { span:nth-child(1) { padding-left: 900px; } } span { box-sizing: border-box; &:nth-child(1) { width: 1270px; padding-left: 600px; } &:nth-child(2) { width: 1050px; padding-left: 400px; } } } } .geneBox { position: absolute; top:1170px; left: 660px; display: block; p { display: inline-block; } } .ce_b_t { position: absolute; bottom: 565px; flex-direction: row; align-items: center; margin: 0; .ce_b_img { padding-left: 700px; } .ce_b_t_i { width: 1050px; padding-left: 770px; } } } } }