From bac7941b8dc29e70643c44fb393c49d2eaa3015b Mon Sep 17 00:00:00 2001 From: yiming <m13691596795@163.com> Date: 星期三, 07 八月 2024 16:06:22 +0800 Subject: [PATCH] 体育与健康完成 --- src/books/sportsAndHealth/css/default.less | 626 ++++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 490 insertions(+), 136 deletions(-) diff --git a/src/books/sportsAndHealth/css/default.less b/src/books/sportsAndHealth/css/default.less index 1bcee05..33b398e 100644 --- a/src/books/sportsAndHealth/css/default.less +++ b/src/books/sportsAndHealth/css/default.less @@ -18,9 +18,82 @@ font-size: 18px; .chapter { + //new + .fl{ + display: flex; + } + .fd-c{ + flex-direction: column; + } + .al-c{ + align-items: center; + } + .w50{ + width: 50%; + } + .w56{ + width: 56%; + } + .w13{ + width: 13%; + } + .w24{ + width: 24%; + } + .w22{ + width: 22%; + } + .w32{ + width: 32%; + } + .w34{ + width: 34%; + } + .span-P{ + font-family: "FZLTXIHJW"; + font-size: 14px; + color:#F79447 ; + } + .span-S{ + color:#F79447 ; + } + .tl{ + text-align: left !important; + } + .tw-no{ + text-wrap: nowrap; + } + .table-p{ + margin: 0%; + text-indent: 0; + font-size: 14px; + line-height: 25px; + font-family: "FZLTXIHJW"; + } + .imgBox{ + display: flex; + flex-direction: column-reverse; + position: relative; + .img{ + position: absolute; + left: 40%; + bottom:-10%; + } + } + + .table-text{ + border: none; + background-color: transparent; + resize: none; + &:focus { + outline: none; + } + } + + //over textarea { width: 100%; - font-family: 'FZLTXIHJW'; + font-family: "FZLTXIHJW"; padding: 2px 5px; box-sizing: border-box; } @@ -44,25 +117,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 +147,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; } } @@ -100,7 +245,7 @@ span { font-size: 14px; text-align: center; - font-family: 'FZLTXIHJW'; + font-family: "FZLTXIHJW"; display: flex; align-items: center; justify-content: flex-start; @@ -168,7 +313,7 @@ justify-content: center; font-size: 14px; text-align: center; - font-family: 'FZLTXIHJW'; + font-family: "FZLTXIHJW"; } } } @@ -192,7 +337,7 @@ justify-content: center; align-items: center; padding-top: 20px; - font-family: 'FZLTXIHJW'; + font-family: "FZLTXIHJW"; .table-bottom { width: 100%; @@ -231,7 +376,7 @@ span:hover { background-color: #89a0d0; - color: #FFF; + color: #fff; } span:nth-child(1) { @@ -254,9 +399,9 @@ text-align: center; padding: 5px 10px; font-size: 14px; - font-family: 'FZLTXIHJW'; + font-family: "FZLTXIHJW"; font-weight: 900; - min-width: 35px + min-width: 35px; } tr td { @@ -265,7 +410,7 @@ padding: 3px 10px; font-size: 14px; line-height: 25px; - font-family: 'FZLTXIHJW'; + font-family: "FZLTXIHJW"; input { cursor: pointer; @@ -274,30 +419,36 @@ } } + .textHeader { + min-height: 1150px; + } + .bj-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; - background: url('../image/dy1.jpg'); + background: url("../image/dy1.jpg"); background-position: top; background-size: 100% 50%; 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 { @@ -306,24 +457,12 @@ top: 0; width: 100%; height: 100%; - background: url('../image/dy2.jpg'); + background: url("../image/dy2.jpg"); background-position: top; background-size: 100% 50%; 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 { @@ -332,26 +471,98 @@ top: 0; width: 100%; height: 98%; - background: url('../image/dy3.jpg'); + background: url("../image/dy3.jpg"); background-position: top; background-size: 100% 45%; background-repeat: no-repeat; display: flex; justify-content: flex-start; - - .bj-empyt-chapter03 { - width: 40%; - height: 100%; - } - - .bj-text03 { - width: 60%; - height: 50%; - padding-top: 50%; - padding-right: 10%; - } } + .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-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 { width: 100%; padding: 20px 10px; @@ -365,9 +576,8 @@ p { font-size: 16px; - font-family: 'FZLTXIHJW'; + font-family: "FZLTXIHJW"; } - } .bk-xyx { @@ -382,7 +592,7 @@ outline: none; } } - + .publicxbc { min-width: 100px; display: flex; @@ -400,7 +610,7 @@ font-size: 16px; font-weight: 700; border-radius: 15px; - + .icon { width: 25px; height: 25px; @@ -434,6 +644,21 @@ height: auto; margin: auto; margin-right: 20px; + + img { + width: 100%; + } + + p { + margin: 0; + } + } + .img-rights { + width: 250px; + float: right; + height: auto; + margin: auto; + margin-left: 20px; img { width: 100%; @@ -496,7 +721,7 @@ .pdf-con { display: flex; justify-content: flex-start; - align-items: center; + flex-direction: column; padding: 10px 0; box-sizing: border-box; border-radius: 10px; @@ -505,16 +730,16 @@ min-width: 160px; display: flex; justify-content: center; - align-items: center; border: 0.15em dashed #b898c7; margin-right: 15px; + margin-top: 5%; padding: 0 15px; border-radius: 5px; span { font-size: 14px; text-align: center; - font-family: 'FZLTXIHJW'; + font-family: "FZLTXIHJW"; display: flex; align-items: center; justify-content: flex-start; @@ -558,7 +783,6 @@ text-indent: 2em; } - .xyx-title { font-family: "FZLTXIHJW"; text-align: center; @@ -570,7 +794,7 @@ .xyx-text { p { font-size: 16px; - font-family: 'FZLTXIHJW'; + font-family: "FZLTXIHJW"; padding: 0 10px; margin: 0; } @@ -661,7 +885,7 @@ background-color: transparent; border-bottom: 1px solid #000; font-size: 18px; - font-family: '瀹嬩綋'; + font-family: "瀹嬩綋"; } .assess:focus { @@ -746,7 +970,7 @@ font-family: "瀹嬩綋"; font-size: 18px; text-align: justify; - padding: 10% 10%; + padding: 6% 10% 10% 10%; box-sizing: border-box; line-height: 30px; } @@ -828,12 +1052,22 @@ font-family: "FZLTXIHJW"; text-align: center; font-size: 0.8em; - color: #5d78bb; + color: #F79447; margin-left: 0%; margin-right: 0%; text-indent: 0em; } + + .img-2{ + font-family: "FZLTXIHJW"; + text-align: center; + font-size: 0.8em; + color: #457EBA; + margin-left: 0%; + margin-right: 0%; + text-indent: 0em; + } .img1 { font-family: "FZLTXIHJW"; text-align: right; @@ -1497,7 +1731,7 @@ border: 1px solid #89a0d0; border-radius: 5px; font-size: 14px; - font-family: 'FZLTXIHJW'; + font-family: "FZLTXIHJW"; text-indent: 2em; line-height: 22px; padding: 2px 5px; @@ -1636,7 +1870,7 @@ } .bj1-mk { - background-image: url('../image/mk.png'); + background-image: url("../image/mk.png"); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; @@ -1650,6 +1884,7 @@ .zt-ls { color: #99b4df; font-weight: bold; + text-indent: 1em; } .zt-cs { @@ -1659,8 +1894,6 @@ } @media screen and (max-width: 800px) { - - .chapter { .coverImg { height: 100%; @@ -1683,22 +1916,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,10 +1936,9 @@ } span { - min-width: 150px; font-size: 14px; text-align: center; - font-family: 'FZLTXIHJW'; + font-family: "FZLTXIHJW"; line-height: 20px; } @@ -1736,18 +1965,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 +2018,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%; @@ -1770,64 +2045,67 @@ 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; -} -@media screen and (max-width:800px) { - .pdfModal { - width: 100%; - height: 60vh; - } - - .custom-dialog { - .el-dialog { - width: 90vw !important; - } - } -} - - -.custom-dialog { - .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 { +.tablePublic input[type="checkbox"]:checked + .checkmark { background: #000 !important; /* 閫変腑鏃剁殑鑳屾櫙鑹� */ } @@ -1857,8 +2135,84 @@ 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; +} + -- Gitblit v1.9.1