From d8c24a06b3e7844ad65e7c821c022dbb36d29430 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期二, 19 十一月 2024 17:15:08 +0800 Subject: [PATCH] 各图书bug修改 --- src/books/sportsAndHealth/css/default.less | 764 ++++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 650 insertions(+), 114 deletions(-) diff --git a/src/books/sportsAndHealth/css/default.less b/src/books/sportsAndHealth/css/default.less index 94cd6a1..a69a747 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; @@ -18,7 +20,6 @@ font-size: 18px; .chapter { - textarea { width: 100%; font-family: 'FZLTXIHJW'; @@ -45,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 { @@ -71,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; } } @@ -154,6 +227,7 @@ video { width: 100%; + height: 150px; } video::-webkit-media-text-track-display { @@ -232,7 +306,7 @@ span:hover { background-color: #89a0d0; - color: #FFF; + color: #fff; } span:nth-child(1) { @@ -257,7 +331,7 @@ font-size: 14px; font-family: 'FZLTXIHJW'; font-weight: 900; - min-width: 35px + min-width: 35px; } tr td { @@ -275,6 +349,10 @@ } } + .textHeader { + min-height: 1150px; + } + .bj-img { position: absolute; left: 0; @@ -287,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 { @@ -313,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 { @@ -339,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 { @@ -359,7 +497,7 @@ box-sizing: border-box; .byb-title { - font-family: "STKaiti"; + font-family: 'STKaiti'; text-align: center; color: #cd141c; } @@ -368,7 +506,6 @@ font-size: 16px; font-family: 'FZLTXIHJW'; } - } .bk-xyx { @@ -397,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; @@ -444,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; @@ -464,17 +615,17 @@ } } - .qjdrIocn:hover { - border: 1px solid #f49a4c; - background-color: #fff; - color: #f49a4c; + // .qjdrIocn:hover { + // border: 1px solid #f49a4c; + // background-color: #fff; + // color: #f49a4c; - svg { - margin-left: 8px; - fill: #f39938; - cursor: pointer; - } - } + // svg { + // margin-left: 8px; + // fill: #f39938; + // cursor: pointer; + // } + // } .coverImg { position: absolute; @@ -511,6 +662,7 @@ margin-right: 15px; padding: 0 15px; border-radius: 5px; + margin-top: 15px; span { font-size: 14px; @@ -559,9 +711,8 @@ text-indent: 2em; } - .xyx-title { - font-family: "FZLTXIHJW"; + font-family: 'FZLTXIHJW'; text-align: center; color: #cd141c; padding: 5px 0; @@ -618,7 +769,7 @@ } .xyx-fu-title { - font-family: "STKaiti"; + font-family: 'STKaiti'; text-align: center; color: #cd141c; } @@ -636,7 +787,7 @@ .xyx-ul { font-size: 16px; - font-family: "FZLTXIHJW"; + font-family: 'FZLTXIHJW'; color: #555; li { @@ -672,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; } @@ -695,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; @@ -711,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; @@ -721,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; @@ -744,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; } @@ -812,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; @@ -826,7 +977,7 @@ } .img { - font-family: "FZLTXIHJW"; + font-family: 'FZLTXIHJW'; text-align: center; font-size: 0.8em; color: #5d78bb; @@ -836,7 +987,7 @@ } .img1 { - font-family: "FZLTXIHJW"; + font-family: 'FZLTXIHJW'; text-align: right; font-size: 0.85em; margin-left: 0%; @@ -865,7 +1016,7 @@ } .center1 { - font-family: "STKaiti"; + font-family: 'STKaiti'; text-align: center; margin-left: 0%; margin-right: 0%; @@ -885,7 +1036,7 @@ } .right1 { - font-family: "STKaiti"; + font-family: 'STKaiti'; text-align: right; margin-left: 0%; margin-right: 0%; @@ -897,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; @@ -909,7 +1060,7 @@ } h1.front { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; color: #ac92c4; text-align: center; font-size: 1.8em; @@ -918,7 +1069,7 @@ } h1.lefth1 { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; text-align: right; font-size: 2em; margin-bottom: 0.5cm; @@ -926,7 +1077,7 @@ } h2 { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; font-weight: bold; font-size: 1.2em; margin-top: 0.2em; @@ -935,7 +1086,7 @@ } h3 { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; color: #5877ba; font-weight: bold; font-size: 1.15em; @@ -946,7 +1097,7 @@ } h3.lefth3 { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; color: #5877ba; font-weight: bold; font-size: 1.15em; @@ -958,7 +1109,7 @@ } h4 { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; font-weight: bold; color: #5877ba; font-size: 1.1em; @@ -968,7 +1119,7 @@ } h4.h4-zt { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; font-weight: bold; color: #7bb4e3; font-size: 1.1em; @@ -978,7 +1129,7 @@ } h5 { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; font-weight: bold; color: #c96653; font-size: 1em; @@ -988,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; @@ -1128,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; @@ -1144,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 { @@ -1173,7 +1324,7 @@ margin-bottom: 1em; padding: 1em 0.5em 1em 1em; color: #666666; - font-family: "锟斤拷锟斤拷", "锟斤拷锟斤拷"; + font-family: '锟斤拷锟斤拷', '锟斤拷锟斤拷'; } span.linethrough { @@ -1188,7 +1339,7 @@ /* 鏂板鏍峰紡 */ .custom_title1 { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; background-color: rgb(125, 164, 64); width: 70vw; position: relative; @@ -1210,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); @@ -1225,8 +1376,8 @@ } .custom_chapter::before { - font-family: "FZHTJW"; - content: ""; + font-family: 'FZHTJW'; + content: ''; width: 12px; height: 60%; background-color: rgb(125, 164, 64); @@ -1237,8 +1388,8 @@ } .custom_chapter::after { - font-family: "FZHTJW"; - content: ""; + font-family: 'FZHTJW'; + content: ''; width: 12px; height: 60%; background-color: rgb(125, 164, 64); @@ -1257,7 +1408,7 @@ font-size: 21px; margin-bottom: 0.2cm; margin-top: 0.2cm; - font-family: "FZHTJW"; + font-family: 'FZHTJW'; } .img-gn { @@ -1340,7 +1491,7 @@ } .lvz { - font-family: "HiFont Hei GB"; + font-family: 'HiFont Hei GB'; color: #6eb92c; font-weight: bold; } @@ -1376,7 +1527,7 @@ } p.block-hs { - font-family: "STKaiti"; + font-family: 'STKaiti'; // font-size: "1.2em"; font-size: 16px; color: #cd141c; @@ -1619,7 +1770,7 @@ } h4.h4-dy3 { - font-family: "FZLTZHJW"; + font-family: 'FZLTZHJW'; font-weight: bold; color: #b898c7; font-size: 1.1em; @@ -1661,6 +1812,15 @@ @media screen and (max-width: 800px) { .chapter { + .coverImg { + height: 100%; + overflow: hidden; + } + + .page-box { + min-height: 1000px !important; + } + .pdf-tips-con { width: 100%; min-width: 200px; @@ -1673,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 { @@ -1696,7 +1853,6 @@ } span { - min-width: 150px; font-size: 14px; text-align: center; font-family: 'FZLTXIHJW'; @@ -1726,32 +1882,328 @@ 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) { + .chapter { + .coverImg { + margin: 0; + } + + .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) { + .chapter { + .coverImg { + margin: 0; + height: 100%; + } + + .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; + } } } } } } +.pdfModal { + width: 100%; + height: 90vh; + .pdfBox-component { + width: 100%; + height: 100%; + position: relative; -.tablePublic input[type="checkbox"]:checked+.checkmark { + .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; + } + } +} + +.w50{ + width: 50%; +} + +.w57{ + width: 57%; +} + +.fl{ + display: flex; +} + +.fd-c{ + flex-direction: column; +} + +.al-c{ + align-items: center; +} + +.span-P{ + color: rgb(246, 147, 71); +} + +@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; + } + + .custom-dialog { + .el-dialog { + width: 90vw !important; + } + } +} + +.custom-dialog { + overflow: hidden !important; + + .el-dialog__body { + padding: 0; + } + + .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; + } + } + + .el-dialog__title, + .el-dialog__headerbtn .el-dialog__close { + color: #fff; + font-weight: 900; + font-size: 16px; + font-family: 'FZLTXIHJW'; + } + } +} + +.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 { @@ -1764,8 +2216,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