From 58a1f8c0fe7c46f21382f6359be02a8e375ece04 Mon Sep 17 00:00:00 2001 From: unknown <qq1940665526@163.com> Date: 星期三, 05 六月 2024 17:59:48 +0800 Subject: [PATCH] 体育与健康样章 --- src/books/sportsAndHealth/css/default.less | 540 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 517 insertions(+), 23 deletions(-) diff --git a/src/books/sportsAndHealth/css/default.less b/src/books/sportsAndHealth/css/default.less index 7edd69b..ecfdf66 100644 --- a/src/books/sportsAndHealth/css/default.less +++ b/src/books/sportsAndHealth/css/default.less @@ -19,6 +19,21 @@ overflow: auto; } +.tablePublic input[type="checkbox"]:checked+.checkmark { + background: #000 !important; + /* 閫変腑鏃剁殑鑳屾櫙鑹� */ +} + +br { + -webkit-user-select: none; + /* Safari */ + -moz-user-select: none; + /* Firefox */ + -ms-user-select: none; + /* IE10+/Edge */ + user-select: none; +} + .public-sportsAndHealth { font-family: "瀹嬩綋"; max-width: 816px; @@ -26,8 +41,15 @@ margin: 0 auto; border-color: #f49a4c; height: 100%; + font-size: 18px; .chapter { + + .swiper-button-prev, + .swiper-button-next { + color: #5877ba; + } + .page-box { box-sizing: border-box; min-height: 1150px !important; @@ -37,32 +59,227 @@ position: relative; } - .tablePublic { + .pdf-content { + padding: 15%; + box-sizing: border-box; + } + + .bodystyle-chapter001 { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + position: relative; + + .bj-chapter001-bj-icon { + width: 100%; + padding-top: 15px; + } + + .bj-chapter001-con { + width: 60%; + position: absolute; + left: 0; + top: 5%; + + .bj-chapter001-con-icon { + width: 100%; + + img { + padding-top: 20px; + width: 100%; + } + } + } + } + + .pdf-tips-con { + position: relative; + display: flex; + justify-content: flex-start; + align-items: center; + + .pdf-wall { + max-width: 180px; + position: absolute; + right: 0; + 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; + + .pdf-item { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + + img { + width: 80px; + } + + span { + min-width: 150px; + font-size: 14px; + text-align: center; + font-family: 'FZLTXIHJW'; + line-height: 20px; + } + + span:hover { + color: #5877ba; + cursor: pointer; + text-decoration: underline; + -webkit-user-select: none; + /* Safari 3.1+ */ + -moz-user-select: none; + /* Firefox 2+ */ + -ms-user-select: none; + /* IE 10+ */ + user-select: none; + /* 鏍囧噯璇硶 */ + } + } + } + } + + .leftTable { + table { + tr td { + text-align: left !important; + } + } + } + + .parentVideo { + width: 100%; + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + + .videoItem { + width: 200px; + margin: 3px 4px; + border: 1px dotted #30aad1; + + video { + width: 100%; + } + + video::-webkit-media-text-track-display { + /* 杩欓噷鍙互娣诲姞鑷畾涔夌殑鏍峰紡浠g爜 */ + color: red; + /* 鏂囧瓧棰滆壊 */ + background-color: yellow; + /* 鑳屾櫙棰滆壊 */ + } + + span { + display: flex; + justify-content: center; + font-size: 14px; + text-align: center; + font-family: 'FZLTXIHJW'; + } + } + } + + .gif-Con { display: flex; justify-content: center; + align-items: center; + border: 0 !important; + padding: 1px !important; + } + + .imgBox-003 { + width: 100%; + height: 220px; + } + + .tablePublic { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-top: 20px; + font-family: 'FZLTXIHJW'; + + .table-bottom { + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + font-size: 16px; + + .score { + padding-top: 10px; + } + + .btn { + display: flex; + justify-content: center; + + span { + display: block; + height: 25px; + line-height: 15px; + border: 1px solid #89a0d0; + padding: 5px 15px; + box-sizing: border-box; + border-radius: 5px; + cursor: pointer; + -webkit-user-select: none; + /* Safari 3.1+ */ + -moz-user-select: none; + /* Firefox 2+ */ + -ms-user-select: none; + /* IE 10+ */ + user-select: none; + /* 鏍囧噯璇硶 */ + } + + span:hover { + background-color: #89a0d0; + color: #FFF; + } + + span:nth-child(1) { + margin-right: 10px; + } + } + } table { width: 100%; - border: 1px solid #95b2dc; + border: 1px solid #89a0d0; border-collapse: collapse; padding: 0; margin: 0; tr th { - border: 1px solid #95b2dc; - background-color: #b0a3cf; + border: 1px solid #89a0d0; + background-color: #d6dbee; color: #f49a4c; text-align: center; - padding: 5px 20px; + padding: 5px 10px; font-size: 16px; + font-family: 'FZLTXIHJW'; } tr td { - border: 1px solid #95b2dc; + border: 1px solid #89a0d0; text-align: center; padding: 3px 10px; font-size: 14px; line-height: 25px; + font-family: 'FZLTXIHJW'; input { cursor: pointer; @@ -99,7 +316,7 @@ .bj-byb { width: 100%; - padding: 10px; + padding: 20px 10px; box-sizing: border-box; .byb-title { @@ -110,19 +327,188 @@ p { font-size: 16px; + font-family: 'FZLTXIHJW'; } } + .bk-xyx { + textarea { + width: 100%; + max-width: 625px; + border: 1px solid #89a0d0; + border-radius: 5px; + } + + textarea:focus { + outline: none; + text-indent: 2em; + } + } + + .publicxbc { + min-width: 100px; + display: flex; + justify-content: center; + position: absolute; + top: -20px; + left: 10px; + background-color: #d6dbee; + padding: 5px; + box-sizing: border-box; + color: #5877ba; + font-family: "FZLTXIHJW"; + font-size: 16px; + font-weight: 700; + border-radius: 15px; + + .icon { + width: 25px; + height: 25px; + border-radius: 5px; + background-color: #007aff; + border: 1px solid #007aff; + display: flex; + justify-content: center; + align-items: center; + margin-left: 10px; + cursor: pointer; + + svg { + fill: #fff; + } + } + + .icon:hover { + background-color: #fff; + border: 1px solid #007aff; + + svg { + fill: #007aff; + } + } + } + + .qjdrIocn { + display: flex !important; + justify-content: center; + align-items: center; + -webkit-user-select: none; + /* Safari */ + -moz-user-select: none; + /* Firefox */ + -ms-user-select: none; + /* IE10+/Edge */ + user-select: none; + + /* Standard syntax */ + svg { + margin-left: 8px; + fill: #fff; + } + } + + .qjdrIocn:hover { + border: 1px solid #f49a4c; + background-color: #fff; + color: #f49a4c; + + svg { + margin-left: 8px; + fill: #f39938; + cursor: pointer; + } + } + + .coverImg { + position: absolute; + top: 0; + left: 0; + } + + .pdf-text { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + + p { + margin: 0; + margin-right: 10px; + } + + .pdf-con { + 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; + margin-left: 10px; + margin-top: -140px; + + .pdf-view { + min-width: 160px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + img { + width: 80px; + } + + span { + font-size: 14px; + text-align: center; + font-family: 'FZLTXIHJW'; + } + + span:hover { + color: #5877ba; + cursor: pointer; + text-decoration: underline; + -webkit-user-select: none; + /* Safari 3.1+ */ + -moz-user-select: none; + /* Firefox 2+ */ + -ms-user-select: none; + /* IE 10+ */ + user-select: none; + /* 鏍囧噯璇硶 */ + } + } + } + + .pdf-con-15 { + margin-top: -20px; + } + } + + .public-tips { + padding: 0; + margin: 0; + // font-weight: 900; + margin-bottom: 10px; + } + + .xyx-title { - font-family: "STKaiti"; + font-family: "FZLTXIHJW"; text-align: center; color: #cd141c; + padding: 5px 0; + font-weight: 700; } .xyx-text { p { font-size: 16px; + font-family: 'FZLTXIHJW'; + padding: 0 10px; + margin: 0; } .finishiText { @@ -135,13 +521,14 @@ border: 0; outline: none; } - + .textInputarea { width: 100%; max-width: 336px; border: 0; background-color: transparent; } + .textInputarea:focus { outline: none; } @@ -150,11 +537,19 @@ color: #0087af; font-size: 18px; font-weight: bold; + margin: 10px 0; } .xyx-fu-ss { color: #f49a4c; - font-weight: 600; + font-weight: 700; + margin: 10px 0; + } + + .xyx-fu-yy { + color: #c7685d; + font-weight: 700; + margin: 10px 0; } .xyx-fu-title { @@ -171,19 +566,38 @@ } .xyx-con { - padding: 0 15px; + padding: 0 0; } .xyx-ul { font-size: 16px; + font-family: "FZLTXIHJW"; + color: #555; + + li { + position: relative; + margin: 10px 0; + + img { + width: 20px; + position: absolute; + top: 5px; + } + + span { + margin-left: 25px; + } + } } .assess { - width: 200px; + width: 210px; height: 25px; border: 0; background-color: transparent; border-bottom: 1px solid #000; + font-size: 18px; + font-family: '瀹嬩綋'; } .assess:focus { @@ -265,7 +679,7 @@ } div.bodystyle { - font-family: "FZLTXIHJW"; + font-family: "瀹嬩綋"; font-size: 18px; text-align: justify; padding: 10% 10%; @@ -332,7 +746,8 @@ } .note { - font-size: 0.85em; + font-size: 0.8em; + font-family: "FZLTXIHJW"; } .img-right { @@ -430,10 +845,10 @@ h1.front { font-family: "FZLTZHJW"; - color: #b898c7; + color: #ac92c4; text-align: center; font-size: 1.8em; - margin-bottom: 0.5cm; + margin-bottom: 2em; margin-top: 0.5cm; } @@ -526,7 +941,7 @@ } .imz { - width: 96%; + width: 100%; text-align: center; } @@ -648,14 +1063,19 @@ } .block1 { - font-family: "STKaiti"; + font-family: "浠垮畫"; text-align: right; + font-weight: 600; } .block2 { - font-family: "STKaiti"; + font-family: "瀹嬩綋"; text-align: center; text-indent: 0em; + font-size: 16px; + font-weight: 700; + margin: -3px 0; + color: #333; } .block3 { @@ -892,7 +1312,8 @@ p.block-hs { font-family: "STKaiti"; - font-size: "1.2em"; + // font-size: "1.2em"; + font-size: 16px; color: #cd141c; line-height: 20px; } @@ -970,7 +1391,7 @@ div.bk-xyx { background-color: #f9f7fc; border: 0.15em dotted #95b2dc; - padding: 0.5em; + padding: 0.5em 1.2em; margin-bottom: 2em; margin-top: 0.5em; border-radius: 1em; @@ -1128,9 +1549,13 @@ } .bj1-mk { - background-color: #99b4df; + background-image: url('../image/mk.png'); + background-position: center; + background-repeat: no-repeat; + background-size: 100% 100%; color: #ffffff; - padding: 0.3em 0.7em 0.3em 0.7em; + padding: 5px 28px 15px 25px; + // padding: 0.3em 0.7em 0.3em 0.7em; font-weight: bold; font-size: 1em; } @@ -1145,6 +1570,75 @@ font-weight: bold; } } + + @media screen and (max-width: 800px) { + .chapter{ + .pdf-tips-con { + width: 100%; + min-width: 200px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + padding: 20px 0; + + .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; + + .pdf-item { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + + img { + width: 80px; + } + + span { + min-width: 150px; + font-size: 14px; + text-align: center; + font-family: 'FZLTXIHJW'; + line-height: 20px; + } + + span:hover { + color: #5877ba; + cursor: pointer; + text-decoration: underline; + -webkit-user-select: none; + /* Safari 3.1+ */ + -moz-user-select: none; + /* Firefox 2+ */ + -ms-user-select: none; + /* IE 10+ */ + user-select: none; + /* 鏍囧噯璇硶 */ + } + } + } + } + .parentVideo { + width: 100%; + display: flex; + justify-content: center; + flex-wrap: wrap; + } + } + } } body { -- Gitblit v1.9.1