From 37e5dc2b41fe3f79a4f45e82eba4c3b05bedd293 Mon Sep 17 00:00:00 2001 From: unknown <qq1940665526@163.com> Date: 星期四, 06 六月 2024 18:38:27 +0800 Subject: [PATCH] 优化 --- src/books/sportsAndHealth/css/default.less | 244 ++++++++++++++++++++++++++++++------------------ 1 files changed, 152 insertions(+), 92 deletions(-) diff --git a/src/books/sportsAndHealth/css/default.less b/src/books/sportsAndHealth/css/default.less index ecfdf66..56bad95 100644 --- a/src/books/sportsAndHealth/css/default.less +++ b/src/books/sportsAndHealth/css/default.less @@ -45,6 +45,13 @@ .chapter { + textarea { + width: 100%; + font-family: 'FZLTXIHJW'; + padding: 2px 5px; + box-sizing: border-box; + } + .swiper-button-prev, .swiper-button-next { color: #5877ba; @@ -52,7 +59,7 @@ .page-box { box-sizing: border-box; - min-height: 1150px !important; + min-height: 1150px; margin-bottom: 20px; box-shadow: 0 3px 6px 1px #00000029; background-color: #fff; @@ -94,46 +101,49 @@ } .pdf-tips-con { - position: relative; display: flex; + flex-direction: column; justify-content: flex-start; - align-items: center; + align-items: flex-start; + // b898c7 .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; + margin-left: 30px; .pdf-item { display: flex; - flex-direction: column; justify-content: flex-start; align-items: center; - - img { - width: 80px; - } + border: 2px dashed #b898c7; + margin: 10px; + padding: 2px 10px; + border-radius: 5px; + box-sizing: border-box; span { - min-width: 150px; font-size: 14px; text-align: center; font-family: 'FZLTXIHJW'; - line-height: 20px; + display: flex; + align-items: center; + justify-content: flex-start; + + svg { + fill: #b898c7; + } + } + + span:nth-child(2) { + padding-top: 5px; + box-sizing: border-box; } span:hover { - color: #5877ba; + color: #b898c7; cursor: pointer; text-decoration: underline; -webkit-user-select: none; @@ -269,8 +279,9 @@ color: #f49a4c; text-align: center; padding: 5px 10px; - font-size: 16px; + font-size: 14px; font-family: 'FZLTXIHJW'; + font-weight: 900; } tr td { @@ -342,7 +353,6 @@ textarea:focus { outline: none; - text-indent: 2em; } } @@ -350,11 +360,13 @@ min-width: 100px; display: flex; justify-content: center; + align-items: center; position: absolute; top: -20px; left: 10px; background-color: #d6dbee; - padding: 5px; + border: 0.15em dotted #d6dbee; + padding: 2px 8px 3px 2px; box-sizing: border-box; color: #5877ba; font-family: "FZLTXIHJW"; @@ -366,8 +378,8 @@ width: 25px; height: 25px; border-radius: 5px; - background-color: #007aff; - border: 1px solid #007aff; + background-color: #b898c7; + border: 1px solid #b898c7; display: flex; justify-content: center; align-items: center; @@ -381,11 +393,27 @@ .icon:hover { background-color: #fff; - border: 1px solid #007aff; + border: 1px solid #b898c7; svg { - fill: #007aff; + fill: #b898c7; } + } + } + + .img-float { + width: 250px; + float: left; + height: auto; + margin: auto; + margin-right: 20px; + + img{ + width: 100%; + } + + p{ + margin: 0; } } @@ -428,8 +456,9 @@ .pdf-text { display: flex; + flex-direction: column; justify-content: space-between; - align-items: center; + align-items: flex-start; margin-bottom: 20px; p { @@ -439,35 +468,42 @@ .pdf-con { display: flex; - flex-direction: column; justify-content: flex-start; - align-items: flex-start; - border: 2px dotted #5d78bb; - padding: 10px; + align-items: center; + padding: 10px 0; 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; - } + border: 0.15em dashed #b898c7; + margin-right: 15px; + padding: 0 15px; + border-radius: 5px; span { font-size: 14px; text-align: center; font-family: 'FZLTXIHJW'; + display: flex; + align-items: center; + justify-content: flex-start; + + svg { + fill: #b898c7; + } + } + + span:nth-child(2) { + padding-top: 5px; + box-sizing: border-box; } span:hover { - color: #5877ba; + color: #b898c7; cursor: pointer; text-decoration: underline; -webkit-user-select: none; @@ -1390,7 +1426,7 @@ div.bk-xyx { background-color: #f9f7fc; - border: 0.15em dotted #95b2dc; + border: 0.15em dotted #b898c7; padding: 0.5em 1.2em; margin-bottom: 2em; margin-top: 0.5em; @@ -1421,6 +1457,29 @@ margin-top: 0.5em; border-radius: 1em; position: relative; + + .xspj-text { + width: 100%; + display: flex; + justify-content: center; + + textarea { + width: 100%; + max-width: 560px; + border: 1px solid #89a0d0; + border-radius: 5px; + font-size: 14px; + font-family: 'FZLTXIHJW'; + text-indent: 2em; + line-height: 22px; + padding: 2px 5px; + box-sizing: border-box; + } + + textarea:focus { + outline: none; + } + } } p.bj-xspj { @@ -1572,72 +1631,73 @@ } @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; + .chapter { + .pdf-tips-con { + width: 100%; + min-width: 200px; 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; + padding: 20px 0; - .pdf-item { + .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: center; + align-items: flex-start; + border: 2px dotted #5d78bb; + padding: 10px; + box-sizing: border-box; + border-radius: 10px; - img { - width: 80px; - } + .pdf-item { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; - span { - min-width: 150px; - font-size: 14px; - text-align: center; - font-family: 'FZLTXIHJW'; - line-height: 20px; - } + img { + width: 80px; + } - 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; - /* 鏍囧噯璇硶 */ + 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; + } } - .parentVideo { - width: 100%; - display: flex; - justify-content: center; - flex-wrap: wrap; - } - } } } -- Gitblit v1.9.1