From ca74870ae474e4dbabf4771bca42f73618ce4b84 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期五, 16 八月 2024 11:22:53 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout --- src/books/sportsAndHealth/css/default.less | 653 ++++++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 536 insertions(+), 117 deletions(-) diff --git a/src/books/sportsAndHealth/css/default.less b/src/books/sportsAndHealth/css/default.less index 1bcee05..0f00ef8 100644 --- a/src/books/sportsAndHealth/css/default.less +++ b/src/books/sportsAndHealth/css/default.less @@ -1,3 +1,5 @@ +/** @format */ + .temp-bookInnerContentSports { width: 100%; height: 100%; @@ -9,7 +11,7 @@ overflow: auto; .public-sportsAndHealth { - font-family: "瀹嬩綋"; + font-family: '瀹嬩綋'; max-width: 816px; min-width: 375px; margin: 0 auto; @@ -44,25 +46,29 @@ box-sizing: border-box; } - .bodystyle-chapter001 { + .gif-Con { + max-width: 200px; + } + + .bodystyle-chapter { display: flex; justify-content: space-between; align-items: center; width: 100%; position: relative; - .bj-chapter001-bj-icon { + .bj-chapter-bj-icon { width: 100%; padding-top: 15px; } - .bj-chapter001-con { + .bj-chapter-con { width: 60%; position: absolute; left: 0; top: 5%; - .bj-chapter001-con-icon { + .bj-chapter-con-icon { width: 100%; img { @@ -70,6 +76,74 @@ width: 100%; } } + } + } + + .header-odd { + width: 100%; + height: 100px; + display: flex; + justify-content: flex-end; + align-items: flex-end; + + span { + margin-right: 28px; + font-family: 'FZLTXIHJW'; + font-size: 18px; + } + span:nth-child(3) { + margin-right: 0; + } + + .mk { + color: #f39938; + font-weight: 700; + } + + .sub { + color: #808285; + font-weight: 600; + } + + .sub-title { + color: #a8a9ad; + } + + .sub-page { + color: #a8a9ad; + } + } + + .line-page { + width: 1px; + height: 100%; + border-left: 2px dotted #eee; + margin: 0 14px; + } + + .header-even { + width: 100%; + height: 100px; + display: flex; + justify-content: flex-start; + align-items: flex-end; + span { + margin-left: 28px; + font-family: 'FZLTXIHJW'; + font-size: 18px; + } + + .sub-page { + color: #a8a9ad; + } + + .book-title { + color: #f39938; + font-weight: 700; + } + + span:nth-child(3) { + margin-left: 0; } } @@ -153,6 +227,7 @@ video { width: 100%; + height: 150px; } video::-webkit-media-text-track-display { @@ -231,7 +306,7 @@ span:hover { background-color: #89a0d0; - color: #FFF; + color: #fff; } span:nth-child(1) { @@ -256,7 +331,7 @@ font-size: 14px; font-family: 'FZLTXIHJW'; font-weight: 900; - min-width: 35px + min-width: 35px; } tr td { @@ -274,6 +349,10 @@ } } + .textHeader { + min-height: 1150px; + } + .bj-img { position: absolute; left: 0; @@ -286,18 +365,20 @@ background-repeat: no-repeat; display: flex; justify-content: flex-start; + } - .bj-empyt-chapter01 { - width: 40%; - height: 100%; - } + .bj-empyt-chapter { + width: 40%; + height: 100%; + margin-right: 5%; + } - .bj-text01 { - width: 60%; - height: 50%; - padding-top: 60%; - padding-right: 10%; - } + .bj-text { + padding-top: 60%; + padding-right: 10%; + float: right; + height: auto; + width: 100%; } .bj-img02 { @@ -312,18 +393,6 @@ background-repeat: no-repeat; display: flex; justify-content: flex-start; - - .bj-empyt-chapter02 { - width: 40%; - height: 100%; - } - - .bj-text02 { - width: 60%; - height: 50%; - padding-top: 60%; - padding-right: 10%; - } } .bj-img03 { @@ -338,18 +407,88 @@ background-repeat: no-repeat; display: flex; justify-content: flex-start; + } - .bj-empyt-chapter03 { - width: 40%; - height: 100%; - } + .bj-img04 { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 98%; + background: url('../image/dy4.jpg'); + background-position: top; + background-size: 100% 45%; + background-repeat: no-repeat; + display: flex; + justify-content: flex-start; + } - .bj-text03 { - width: 60%; - height: 50%; - padding-top: 50%; - padding-right: 10%; - } + .bj-img05 { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 98%; + background: url('../image/dy5.jpg'); + background-position: top; + background-size: 100% 45%; + background-repeat: no-repeat; + display: flex; + justify-content: flex-start; + } + .bj-img06 { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 98%; + background: url('../image/dy6.jpg'); + background-position: top; + background-size: 100% 45%; + background-repeat: no-repeat; + display: flex; + justify-content: flex-start; + } + .bj-img07 { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 98%; + background: url('../image/dy7.jpg'); + background-position: top; + background-size: 100% 45%; + background-repeat: no-repeat; + display: flex; + justify-content: flex-start; + } + + .bj-img08 { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 98%; + background: url('../image/dy8.jpg'); + background-position: top; + background-size: 100% 45%; + background-repeat: no-repeat; + display: flex; + justify-content: flex-start; + } + + .bj-img09 { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 98%; + background: url('../image/dy9.jpg'); + background-position: top; + background-size: 100% 45%; + background-repeat: no-repeat; + display: flex; + justify-content: flex-start; } .bj-byb { @@ -358,7 +497,7 @@ box-sizing: border-box; .byb-title { - font-family: "STKaiti"; + font-family: 'STKaiti'; text-align: center; color: #cd141c; } @@ -367,7 +506,6 @@ font-size: 16px; font-family: 'FZLTXIHJW'; } - } .bk-xyx { @@ -396,7 +534,7 @@ padding: 2px 8px 3px 2px; box-sizing: border-box; color: #5877ba; - font-family: "FZLTXIHJW"; + font-family: 'FZLTXIHJW'; font-size: 16px; font-weight: 700; border-radius: 15px; @@ -443,7 +581,21 @@ margin: 0; } } + .img-rights { + width: 250px; + float: right; + height: auto; + margin: auto; + margin-left: 20px; + img { + width: 100%; + } + + p { + margin: 0; + } + } .qjdrIocn { display: flex !important; justify-content: center; @@ -510,6 +662,7 @@ margin-right: 15px; padding: 0 15px; border-radius: 5px; + margin-top: 15px; span { font-size: 14px; @@ -558,9 +711,8 @@ text-indent: 2em; } - .xyx-title { - font-family: "FZLTXIHJW"; + font-family: 'FZLTXIHJW'; text-align: center; color: #cd141c; padding: 5px 0; @@ -617,7 +769,7 @@ } .xyx-fu-title { - font-family: "STKaiti"; + font-family: 'STKaiti'; text-align: center; color: #cd141c; } @@ -635,7 +787,7 @@ .xyx-ul { font-size: 16px; - font-family: "FZLTXIHJW"; + font-family: 'FZLTXIHJW'; color: #555; li { @@ -671,19 +823,19 @@ } .ls1 { - font-family: "HiFont Hei GB"; + font-family: 'HiFont Hei GB'; color: #30aad1; font-weight: bold; } .hs { - font-family: "HiFont Hei GB"; + font-family: 'HiFont Hei GB'; color: #ea6b00; font-weight: bold; } .zs1 { - font-family: "HiFont Hei GB"; + font-family: 'HiFont Hei GB'; color: #857eb4; font-weight: bold; } @@ -694,7 +846,7 @@ } div.bodycontent-div-center { - font-family: "DK-HEITI", "鏂规鍏颁涵榛戠畝浣�", "榛戜綋"; + font-family: 'DK-HEITI', '鏂规鍏颁涵榛戠畝浣�', '榛戜綋'; margin: 1em 1em 1em 1em; font-weight: normal; border-width: 1.5px; @@ -710,7 +862,7 @@ } div.bodycontent-div-left1 { - font-family: "DK-HEITI", "鏂规鍏颁涵榛戠畝浣�", "榛戜綋"; + font-family: 'DK-HEITI', '鏂规鍏颁涵榛戠畝浣�', '榛戜綋'; margin: 1em 1em 1em 1em; font-weight: normal; border-width: 1.5px; @@ -720,7 +872,7 @@ } div.bodycontent-div-left { - font-family: "DK-HEITI", "鏂规鍏颁涵榛戠畝浣�", "榛戜綋"; + font-family: 'DK-HEITI', '鏂规鍏颁涵榛戠畝浣�', '榛戜綋'; margin: 1em 1em 1em 1em; font-weight: normal; border-width: 1.5px; @@ -743,10 +895,10 @@ } div.bodystyle { - font-family: "瀹嬩綋"; + font-family: '瀹嬩綋'; font-size: 18px; text-align: justify; - padding: 10% 10%; + padding: 6% 10% 10% 10%; box-sizing: border-box; line-height: 30px; } @@ -811,11 +963,11 @@ .note { font-size: 0.8em !important; - font-family: "FZLTXIHJW"; + font-family: 'FZLTXIHJW'; } .img-right { - font-family: "FZLTXIHJW"; + font-family: 'FZLTXIHJW'; text-align: right; font-size: 0.85em; color: #5d78bb; @@ -825,7 +977,7 @@ } .img { - font-family: "FZLTXIHJW"; + font-family: 'FZLTXIHJW'; text-align: center; font-size: 0.8em; color: #5d78bb; @@ -835,7 +987,7 @@ } .img1 { - font-family: "FZLTXIHJW"; + font-family: 'FZLTXIHJW'; text-align: right; font-size: 0.85em; margin-left: 0%; @@ -864,7 +1016,7 @@ } .center1 { - font-family: "STKaiti"; + font-family: 'STKaiti'; text-align: center; margin-left: 0%; margin-right: 0%; @@ -884,7 +1036,7 @@ } .right1 { - font-family: "STKaiti"; + font-family: 'STKaiti'; text-align: right; margin-left: 0%; margin-right: 0%; @@ -896,11 +1048,11 @@ margin-left: 1em; margin-right: 1em; text-align: justify; - font-family: "cnepub", serif; + font-family: 'cnepub', serif; } h1 { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; text-align: center; font-size: 2em; margin-bottom: 0.5cm; @@ -908,7 +1060,7 @@ } h1.front { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; color: #ac92c4; text-align: center; font-size: 1.8em; @@ -917,7 +1069,7 @@ } h1.lefth1 { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; text-align: right; font-size: 2em; margin-bottom: 0.5cm; @@ -925,7 +1077,7 @@ } h2 { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; font-weight: bold; font-size: 1.2em; margin-top: 0.2em; @@ -934,7 +1086,7 @@ } h3 { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; color: #5877ba; font-weight: bold; font-size: 1.15em; @@ -945,7 +1097,7 @@ } h3.lefth3 { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; color: #5877ba; font-weight: bold; font-size: 1.15em; @@ -957,7 +1109,7 @@ } h4 { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; font-weight: bold; color: #5877ba; font-size: 1.1em; @@ -967,7 +1119,7 @@ } h4.h4-zt { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; font-weight: bold; color: #7bb4e3; font-size: 1.1em; @@ -977,7 +1129,7 @@ } h5 { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; font-weight: bold; color: #c96653; font-size: 1em; @@ -987,8 +1139,8 @@ } h6 { - font-family: "cnepub", serif; - font-family: "FZHTJW"; + font-family: 'cnepub', serif; + font-family: 'FZHTJW'; color: #36c3f4; font-size: 1.1em; margin-top: 10px; @@ -1127,13 +1279,13 @@ } .block1 { - font-family: "浠垮畫"; + font-family: '浠垮畫'; text-align: right; font-weight: 600; } .block2 { - font-family: "瀹嬩綋"; + font-family: '瀹嬩綋'; text-align: center; text-indent: 0em; font-size: 16px; @@ -1143,13 +1295,13 @@ } .block3 { - font-family: "STKaiti"; + font-family: 'STKaiti'; text-align: left; text-indent: 0em; } .kaiti { - font-family: "STKaiti"; + font-family: 'STKaiti'; } .em_dot { @@ -1172,7 +1324,7 @@ margin-bottom: 1em; padding: 1em 0.5em 1em 1em; color: #666666; - font-family: "锟斤拷锟斤拷", "锟斤拷锟斤拷"; + font-family: '锟斤拷锟斤拷', '锟斤拷锟斤拷'; } span.linethrough { @@ -1187,7 +1339,7 @@ /* 鏂板鏍峰紡 */ .custom_title1 { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; background-color: rgb(125, 164, 64); width: 70vw; position: relative; @@ -1209,7 +1361,7 @@ } .custom_chapter { - font-family: "FZHTJW"; + font-family: 'FZHTJW'; color: rgb(108, 152, 65); padding: 15px 10px; background-color: rgb(202, 217, 180); @@ -1224,8 +1376,8 @@ } .custom_chapter::before { - font-family: "FZHTJW"; - content: ""; + font-family: 'FZHTJW'; + content: ''; width: 12px; height: 60%; background-color: rgb(125, 164, 64); @@ -1236,8 +1388,8 @@ } .custom_chapter::after { - font-family: "FZHTJW"; - content: ""; + font-family: 'FZHTJW'; + content: ''; width: 12px; height: 60%; background-color: rgb(125, 164, 64); @@ -1256,7 +1408,7 @@ font-size: 21px; margin-bottom: 0.2cm; margin-top: 0.2cm; - font-family: "FZHTJW"; + font-family: 'FZHTJW'; } .img-gn { @@ -1339,7 +1491,7 @@ } .lvz { - font-family: "HiFont Hei GB"; + font-family: 'HiFont Hei GB'; color: #6eb92c; font-weight: bold; } @@ -1375,7 +1527,7 @@ } p.block-hs { - font-family: "STKaiti"; + font-family: 'STKaiti'; // font-size: "1.2em"; font-size: 16px; color: #cd141c; @@ -1618,7 +1770,7 @@ } h4.h4-dy3 { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; font-weight: bold; color: #b898c7; font-size: 1.1em; @@ -1659,8 +1811,6 @@ } @media screen and (max-width: 800px) { - - .chapter { .coverImg { height: 100%; @@ -1683,22 +1833,19 @@ .pdf-wall { max-width: 180px; position: relative; - left: 30px; - top: 25px; - border: 2px dotted #5d78bb; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; - border: 2px dotted #5d78bb; padding: 10px; box-sizing: border-box; border-radius: 10px; + top: 0 !important; .pdf-item { display: flex; flex-direction: column; - justify-content: flex-start; + justify-content: center; align-items: center; img { @@ -1706,7 +1853,6 @@ } span { - min-width: 150px; font-size: 14px; text-align: center; font-family: 'FZLTXIHJW'; @@ -1736,18 +1882,52 @@ justify-content: center; flex-wrap: wrap; } + + .bj-img { + display: flex; + flex-direction: column; + justify-content: flex-start; + background-size: 100% 50%; + } + + .bj-img02 { + display: flex; + flex-direction: column; + justify-content: flex-start; + background-size: 100% 50%; + } + + .bj-img02 { + display: flex; + flex-direction: column; + justify-content: flex-start; + background-size: 100% 50%; + } + + .bj-empyt-chapter { + height: 50%; + } + + .bj-text { + width: 100%; + padding-top: 0%; + padding: 0 10%; + box-sizing: border-box; + } + + .tablePublic table tr th { + padding: 0; + width: auto !important; + } + + div.bk-xyx { + padding: 2.5em 1.2em; + } } } - @media screen and (max-width:700px) { - // .coverImg { - // img { - // height: 100%; - // } - // } - + @media screen and (max-width: 700px) { .chapter { - .coverImg { margin: 0; } @@ -1755,12 +1935,24 @@ .page-box { min-height: 800px !important; } + + .img-float { + width: 130px; + } + + .bodystyle-chapter { + flex-direction: column; + + .bj-chapter-con { + width: auto; + position: relative; + } + } } } - @media screen and (max-width:600px) { + @media screen and (max-width: 600px) { .chapter { - .coverImg { margin: 0; height: 100%; @@ -1769,6 +1961,59 @@ .page-box { min-height: 500px !important; margin-bottom: 20px; + } + + .bj-img { + display: flex; + flex-direction: column; + justify-content: flex-start; + background-size: 100% 30%; + } + + .bj-img02 { + display: flex; + flex-direction: column; + justify-content: flex-start; + background-size: 100% 30%; + } + + .bj-img03 { + display: flex; + flex-direction: column; + justify-content: flex-start; + background-size: 100% 20%; + + .bj-text { + width: 100%; + padding-top: 0%; + padding: 35% 10% 0 10% !important; + box-sizing: border-box; + + p { + line-height: 28px; + } + } + } + + .pdf-text { + .pdf-con { + flex-direction: column; + + .pdf-view { + margin-bottom: 10px; + } + } + } + + .bj-empyt-chapter { + height: 30%; + } + + .bj-text { + width: 100%; + padding-top: 0%; + padding: 0 10%; + box-sizing: border-box; } } } @@ -1779,9 +2024,98 @@ .pdfModal { width: 100%; height: 90vh; + + .pdfBox-component { + width: 100%; + height: 100%; + position: relative; + + .preview { + width: 100%; + height: 100%; + + .imageBox { + height: calc(100% - 30px); + overflow-x: hidden; + overflow-y: auto; + background: #ccc; + box-sizing: border-box; + } + + .imageBox:hover { + cursor: zoom-in !important; + } + + ::v-deep .el-dialog__header { + background-color: rgba(0, 0, 0, 0.8); + + .header_title { + display: flex; + justify-content: space-between; + align-items: center; + color: #fff; + font-weight: 900; + font-size: 16px; + font-family: 'FZLTXIHJW'; + + span:nth-child(2):hover { + cursor: pointer; + } + } + + ::v-deep .el-dialog__title, + ::v-deep .el-dialog__headerbtn .el-dialog__close { + color: #fff; + font-weight: 900; + font-size: 16px; + font-family: 'FZLTXIHJW'; + } + } + + .bottom_tool { + height: 30px; + background-color: rgba(0, 0, 0, 0.8); + display: flex; + justify-content: flex-end; + align-items: center; + + svg { + margin-right: 15px; + fill: #d1d1d1; + } + + svg:hover { + fill: #fff; + cursor: pointer; + } + } + } + + .notBox { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: calc(100% - 30px); + min-height: 300px; + } + } } -@media screen and (max-width:800px) { +@media screen and (max-width: 1024px) { + .pdfModal { + width: 100%; + height: 80vh; + } + + .custom-dialog { + .el-dialog { + width: 90vw !important; + } + } +} + +@media screen and (max-width: 800px) { .pdfModal { width: 100%; height: 60vh; @@ -1794,8 +2128,9 @@ } } - .custom-dialog { + overflow: hidden !important; + .el-dialog__body { padding: 0; } @@ -1827,24 +2162,24 @@ } } -.tablePublic input[type="checkbox"]:checked+.checkmark { +.tablePublic input[type='checkbox']:checked + .checkmark { background: #000 !important; /* 閫変腑鏃剁殑鑳屾櫙鑹� */ } @font-face { - font-family: "FZLTZHJW"; - src: url("../Fonts/FZLTZHJW.ttf"); + font-family: 'FZLTZHJW'; + src: url('../Fonts/FZLTZHJW.ttf'); } @font-face { - font-family: "FZLTXIHJW"; - src: url("../Fonts/FZLTXIHJW.ttf"); + font-family: 'FZLTXIHJW'; + src: url('../Fonts/FZLTXIHJW.ttf'); } @font-face { - font-family: "FZHTJW"; - src: url("../Fonts/FZHTJW.ttf"); + font-family: 'FZHTJW'; + src: url('../Fonts/FZHTJW.ttf'); } br { @@ -1857,8 +2192,92 @@ user-select: none; } - - body { background-color: #e6e6e6; -} \ No newline at end of file +} + +.promptLeftBox { + width: 200px; + float: left; +} + +.promptRightBox { + width: 200px; + float: right; +} + +.learnOneMore { + width: 100px; + display: flex; + justify-content: center; + align-items: center; + + background-color: #b898c7; + border: 0.15em dotted #b898c7; + padding: 2px 8px 3px 2px; + box-sizing: border-box; + color: #ffffff; + font-family: 'FZLTXIHJW'; + font-size: 16px; + font-weight: 700; + border-radius: 15px; + + .icon { + width: 25px; + height: 25px; + border-radius: 5px; + background-color: #b898c7; + border: 1px solid #b898c7; + display: flex; + justify-content: center; + align-items: center; + margin-left: 10px; + cursor: pointer; + + svg { + fill: #fff; + } + } + + .icon:hover { + background-color: #fff; + border: 1px solid #b898c7; + + svg { + fill: #b898c7; + } + } +} + +.smallTitle { + text-indent: 1em; +} + +.subsectionContent { + text-indent: 2em; +} + +.imgp { + color: #ac92c4; + font-size: 14px; + display: flex; + justify-content: center; + align-items: center; +} +.learningObjectives { + color: #8da2d7; +} + +.header_title { + display: flex; + justify-content: space-between; + align-items: center; + // color: #fff; + font-weight: 900; + font-size: 16px; + font-family: 'FZLTXIHJW'; + + span:nth-child(2):hover { + cursor: pointer; + } +} -- Gitblit v1.9.1