@page { margin: 0 } body { margin: 0 } .sheet { margin: 0; overflow: hidden; position: relative; box-sizing: border-box; page-break-after: always; align-items: flex-start; justify-content: flex-start; } /** Paper sizes **/ body.A3 .sheet { width: 297mm; height: 419mm } body.A3.landscape .sheet { width: 420mm; height: 296mm } body.A4 .sheet { width: 210mm; height: 296mm } body.A4.landscape .sheet { width: 297mm; height: 209mm } body.A5 .sheet { width: 148mm; height: 209mm } body.A5.landscape .sheet { width: 210mm; height: 147mm } /** Padding area **/ .sheet.padding-10mm { padding: 10mm } .sheet.padding-15mm { padding: 15mm } .sheet.padding-20mm { padding: 20mm } .sheet.padding-25mm { padding: 25mm } /** For screen preview **/ @media screen { body { background: #e0e0e0 } .sheet { background: white; box-shadow: 0 .5mm 2mm rgba(0,0,0,.3); margin: 5mm; padding-bottom: 5mm; } } .panelTop{ position: absolute; width:100%; height:118px; justify-content: space-between; align-items: flex-start; padding-top: 45px; } .left{ margin-left: 30px; align-items: flex-start; justify-content: flex-start; } .right{ margin-right: 25px; justify-content: flex-end; } .panelTopTitle{ font-size:32px; } .panelTopRight{ align-items: flex-end; height:80px; justify-content: space-between; margin-right: 15px; } .panelTopRight2{ align-items: flex-end; } .panelTopTitle2{ font-size:12px; margin-top: 5px; } .panelTopTitle3{ font-size:12px; } .imgQRCode{ width:110px; height:110px; } .panelMain{ width:97%; margin: 130px 0 0 0; height:254mm; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; align-self: center; visibility:hidden; } .main{ width:44%; justify-content: flex-start; margin-left: 20px; } .line{ width:1px; height:100%; background-color: #ddd; } .footer{ position: absolute; bottom: 0; width: 100%; z-index: 10; /*justify-content: flex-end;*/ } .pageNumber{ font-size:10px; color:#999; margin-bottom: 4px; /*margin-right: 20px;*/ } /* 段落显示************************ */ .editFieldNull{ height:25px; } .editFieldNull2{ height:30px; } .panelItem { font-weight: 400; flex-wrap: wrap; justify-content: flex-start; z-index: 5; } .panelField1 { width: 100%; justify-content: flex-start; align-items: flex-start; font-size: 18px; } .panelField11 { justify-content: flex-start; } .panelTag { width: 100%; min-height: 46px; align-items: flex-start; justify-content: flex-start; margin-top: 15px; z-index: 5; } .panelTag .panelTagLine { margin: 0 0 0 25px; max-width: 325px; height: 5px; } .panelTag .panelTag1 { width: auto; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; border-bottom: 3px solid #aaa; } .panelTag .tag { font-size: 16px; margin: 0 7px 10px 7px; font-weight: 400; } .right2 { position: absolute; top: 0; right: 0; width: 67px; height: 75px; align-items: flex-start; } .universalpic_show_white_30x30 { width: 18px; height: 18px; margin: 34px 25px 0 25px; } .universalpic_hide_white_34x34 { width: 18px; height: 10px; margin: 34px 25px 0 25px; } .panelField20{ width: 100%; justify-content: center; } .panelField2 { width: 100%; justify-content: flex-start; align-items: flex-start; font-size: 10px; margin-top: 10px; } .panelField3 { margin-top: 15px; } .panelItem .panelSound { width: 20px; height: 20px; margin: 0 5px 0 0; background-color: #eee; border-radius: 50%; } .panelItem .panelSoundHover { background-color: #d2d2d2; } .panelItem .panelSoundHover1 { color: #d2d2d2; } .panelItem .universalpic_starting_tc01_26x26{ width: 13px; height: 13px; margin: 5px 10px 5px 0; } .panelItem .universalpic_read_mark_black_20x20 { width: 10px; height: 10px; } .panelItem .panelRecorder { width:100%; justify-content: flex-start; } .panelItem .panelRecorder0 { width: 84px; height: 35px; background-color: #fff; border-radius: 5px; } .panelItem .universalpic_voicerecorder_transmit_black_44x34{ width: 22px; height: 17px; } .panelItem .textProblem{ padding: 1px 10px; background-color: #ddd; border-radius: 11px; text-align: center; font-size:14px; line-height: 22px; font-weight: 500; margin: 0 0 15px 0; width: 65px; } .panelItem .textDot{ font-size:18px; margin-right: 10px; } .textLine { text-decoration: underline; } .panelItem .textHighlighter { background-color: #ddd; } .panelItem .textNormal { min-height: 25px; } .panelItem .textNormal0 { margin-left: 5px; } .panelItem .textNormal2 { font-size: 18px; } .panelItem .textPinyin { text-decoration: underline; margin-right: 5px; } .panelItem .imageContainer { width: 325px; margin: 3px 0; border-radius: 10px; background-color: rgba(0,0,0,0.1); } .panelItem .imageContainer3 { width: 600px; margin: 3px 0; border-radius: 10px; background-color: rgba(0,0,0,0.1); } .panelItem .imageFree { width: 325px; border-radius: 3px; } .panelItem .imageFree3 { width: 600px; border-radius: 3px; } .panelItem .imageContainerSmall { width: 50px; margin: 3px 0; border-radius: 10px; background-color: rgba(0,0,0,0.1); } .panelItem .imageFreeSmall { width: 50px; border-radius: 5px; } .panelItem .imageContainer2 { width: 325px; border-radius: 5px; background-color: rgba(0,0,0,0.1); } .panelItem .imageFree2 { width: 325px; border-radius: 5px; } .panelItem .textBr { width: 100%; height: 12px; } .panelItem .textReturn { width: 100%; } .panelItem .textReturn2 { width: 100%; height: 15px; } .timg{ margin: 130px 0 0 25px; position: fixed; top:130px; left:160px; z-index: 10; } /* ******************************** */ .ShowAnswer4{ visibility:hidden; } /** Fix for Chrome issue #273306 **/ @media print { body.A3.landscape { width: 420mm } body.A3, body.A4.landscape { width: 297mm } body.A4, body.A5.landscape { width: 210mm } body.A5 { width: 148mm } .textProblem{ background-color: #aaa !important; -webkit-print-color-adjust: exact; } .panelItem .textHighlighter { background-color: #ddd !important; -webkit-print-color-adjust: exact; } }