From 69494808b8ce6a39b161649b5e444f2f6f836628 Mon Sep 17 00:00:00 2001 From: unknown <qq1940665526@163.com> Date: 星期一, 17 六月 2024 17:19:58 +0800 Subject: [PATCH] 优化 --- src/books/sportsAndHealth/css/default.less | 304 +++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 259 insertions(+), 45 deletions(-) diff --git a/src/books/sportsAndHealth/css/default.less b/src/books/sportsAndHealth/css/default.less index 5e889a2..775f1d2 100644 --- a/src/books/sportsAndHealth/css/default.less +++ b/src/books/sportsAndHealth/css/default.less @@ -44,25 +44,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 +74,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; } } @@ -274,6 +346,10 @@ } } + .textHeader { + min-height: 1150px; + } + .bj-img { position: absolute; left: 0; @@ -286,18 +362,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 +390,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 +404,6 @@ 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-byb { @@ -746,7 +800,7 @@ font-family: "瀹嬩綋"; font-size: 18px; text-align: justify; - padding: 10% 10%; + padding: 6% 10% 10% 10%; box-sizing: border-box; line-height: 30px; } @@ -1659,7 +1713,18 @@ } @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; @@ -1672,22 +1737,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 { @@ -1695,7 +1757,6 @@ } span { - min-width: 150px; font-size: 14px; text-align: center; font-family: 'FZLTXIHJW'; @@ -1724,6 +1785,145 @@ display: flex; 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; } } } @@ -1758,6 +1958,20 @@ .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; -- Gitblit v1.9.1