From 53ebc4d0af769936edca014c65105074d7cf9651 Mon Sep 17 00:00:00 2001 From: xiongxiaoyang <773861846@qq.com> Date: Thu, 26 May 2022 17:00:59 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E5=B0=8F=E8=AF=B4?= =?UTF-8?q?=E5=86=85=E5=AE=B9=E9=A1=B5=E8=B7=B3=E8=BD=AC=E5=90=8E=E7=9A=84?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=E5=92=8C=E9=94=AE=E7=9B=98?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E7=9B=91=E5=90=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/assets/styles/read.css | 178 -------- src/views/BookContent.vue | 903 +++++++++++++++++++++++++++++++++++-- 3 files changed, 873 insertions(+), 210 deletions(-) diff --git a/package.json b/package.json index bbce30c..6d076ec 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "novel-front-web", - "version": "0.1.0", + "version": "3.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", diff --git a/src/assets/styles/read.css b/src/assets/styles/read.css index ef73d1d..aa5b176 100644 --- a/src/assets/styles/read.css +++ b/src/assets/styles/read.css @@ -1,179 +1 @@ -@charset "utf-8"; -a { color: #333 } -a:hover, .redFont, .current, .bookNav a:hover, .textinfo a:hover { color: #f70 } .read_menu li a, .closePopup, .menu_left li a span, .menu_right li a span, .icon_check, .icon_yb { background: url(../images/icon_readpage.png) no-repeat } -/* 阅读页背景 */ -body { /*background-color: #4a4a4a;*/ color: #333; font-family: "Microsoft YaHei" } -.topMain { box-shadow: 0 1px 4px rgba(0,0,0,.1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66ffffff,endColorstr=#66ffffff); background: none; background: rgba(255,255,255,.4) } -.read_style_6 .topMain { border-bottom: 1px solid #444; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0cffffff,endColorstr=#0cffffff); background: rgba(255,255,255,.05) } -/*颜色：浅黄白、护眼绿、粉色、浅黄、浅灰、夜间黑*/ -body, .read_style_1 { background-color: #ebe5d8 } -.read_style_2 { background-color: #cbdec9 } -.read_style_3 { background-color: #edd4d4 } -.read_style_4 { background-color: #e0cfa3 } -.read_style_5 { background-color: #d3d3d3 } -.read_style_6 { background-color: #0e0f0f } -.read_style_1 .textbox, .read_style_1 .read_menu li a, .read_style_1 .haveRead, .read_style_1 .nextPageBox a { background-color: rgb(244, 241, 234) }/*浅黄白*/ -.read_style_2 .textbox, .read_style_2 .read_menu li a, .read_style_2 .haveRead, .read_style_2 .nextPageBox a { background-color: rgb(224, 235, 223) }/*护眼绿*/ -.read_style_3 .textbox, .read_style_3 .read_menu li a, .read_style_3 .haveRead, .read_style_3 .nextPageBox a { background-color: rgb(244, 229, 229) }/*粉色*/ -.read_style_4 .textbox, .read_style_4 .read_menu li a, .read_style_4 .haveRead, .read_style_4 .nextPageBox a { background-color: rgb(236, 226, 200) }/*浅黄*/ -.read_style_5 .textbox, .read_style_5 .read_menu li a, .read_style_5 .haveRead, .read_style_5 .nextPageBox a { background-color: rgb(229, 229, 229) }/*浅灰*/ -.read_style_6 .textbox, .read_style_6 .read_menu li a, .read_style_6 .haveRead, .read_style_6 .nextPageBox a { background-color: rgb(39, 39, 39) }/*夜间黑*/ -.read_style_1 .textbox, .read_style_1 .read_menu li a, .read_style_1 .haveRead, .read_style_1 .nextPageBox a { background-color: rgba(255, 255, 255,.45) } -.read_style_2 .textbox, .read_style_2 .read_menu li a, .read_style_2 .haveRead, .read_style_2 .nextPageBox a, .read_style_3 .textbox, .read_style_3 .read_menu li a, .read_style_3 .haveRead, .read_style_3 .nextPageBox a, .read_style_4 .textbox, .read_style_4 .read_menu li a, .read_style_4 .haveRead, .read_style_4 .nextPageBox a, .read_style_5 .textbox, .read_style_5 .read_menu li a, .read_style_5 .haveRead, .read_style_5 .nextPageBox a { background-color: rgba(255, 255, 255,.4) } -.read_style_6 .textbox, .read_style_6 .read_menu li a, .read_style_6 .haveRead, .read_style_6 .nextPageBox a { background-color: rgba(255, 255, 255,.1) } -.read_style_1 .author_say, .read_style_1 .orderBox, .read_style_2 .author_say, .read_style_2 .orderBox, .read_style_3 .author_say, .read_style_3 .orderBox, .read_style_4 .author_say, .read_style_4 .orderBox, .read_style_5 .author_say, .read_style_5 .orderBox { background-color: #fcfbfa; background-color: rgba(255,255,255,.75) } -/*.read_style_1 .nextPageBox a { border-color: #e0e0e0 } -.read_style_2 .nextPageBox a { border-color: #bad7b7 } -.read_style_3 .nextPageBox a { border-color: #e5d3d3 } -.read_style_4 .nextPageBox a { border-color: #e0dcd0 } -.read_style_5 .nextPageBox a { border-color: #d3d3d3 } -.read_style_6 .nextPageBox a { border-color: #555 }*/ -.read_style_6 .author_say, .read_style_6 .orderBox, .read_style_6 .textbox, .read_style_6 .book_title h1, .read_style_6 .read_menu li, .read_style_6 .haveRead, .read_style_6 .haveRead a, .read_style_6 .topMain a, .read_style_6 .searchBar .s_int, .read_style_6 .bookNav, .read_style_6 .bookNav a, .read_style_6 .textinfo, .read_style_6 .textinfo a, .read_style_6 .textinfo span, .read_style_6 .read_menu li a b { color: #999; box-shadow: none } -.read_style_6 .bookNav, .read_style_6 .author_say, .read_style_6 .orderBox, .read_style_6 .payFoot { border-color: #444!important } -.readBody { height: 100% } -.readMain { margin: 0 auto; position: relative; z-index: 3; width: 900px } -/* 左右菜单栏 */ -.menu_left { width: 60px; z-index: 20; position: absolute; top: 60px; left: 50%; margin-left: -511px } -.menu_right { width: 60px; z-index: 20; position: absolute; bottom: 81px; right: 50%; margin-right: -511px; display: none } -.read_menu li { box-shadow: 0 0 1px 0 rgba(0,0,0,.05); margin-bottom: 1px; width: 60px; position: relative } -.read_menu li a { display: block; width: 60px; height: 60px; position: relative; /*background-color: #fff;*/ opacity: 0.95 } -.read_menu li a i { display: none; width: 60px; text-align: center; color: #999; font-size: 13px; line-height: 1.5; padding-top: 20px } -.read_menu li a b { font-weight: 400; display: block; height: 60px; width: 60px; text-align: center; line-height: 90px; color: rgba(0,0,0,.5); } -.menu_left li a:hover, .menu_right li a:hover { opacity: 1 } -.menu_left li a span, .menu_right li a span { background-position: -1px -126px; width: 6px; height: 6px; top: 13px; right: 13px; position: absolute } -.menu_left li a.ico_catalog { background-position: -60px -10px } -.menu_left li a.ico_page { background-position: 2px -10px } -.menu_left li a.ico_comment { background-position: -122px -65px } -.menu_left li a.ico_phone { background-position: -304px -10px } -.menu_left li a.ico_shelf, .menu_left li a.ico_shelfed { background-position: -182px -10px } -.menu_left li a.ico_setup { background-position: -122px -10px } -.menu_left li a.ico_pc { background-position: 1px -62px } -.menu_left li a.ico_flower { background-position: -62px -64px } -.menu_right li a.ico_pagePrev { background-position: -184px -60px } -.menu_right li a.ico_pageNext { background-position: -243px -60px } -.menu_right li a.ico_goTop { background-position: -304px -56px } -.menu_right li a.ico_pagePrev:hover, .menu_right li a.ico_pageNext:hover, .menu_right li a.ico_goTop:hover { background-image: none } -.menu_right li a:hover i { display: block } -/* 正文栏 */ -.textbox { border-radius: 2px; width: 98%; margin: 0 auto 20px; padding-bottom: 40px; box-shadow: 0 0 1px 0 rgba(0,0,0,.25); color: #111; } -.bookNav { width: 99%; margin: 0 auto; padding: 18px 0 12px; line-height: 2.5; /*border-bottom: 1px dotted rgba(0,0,0,.1)*/ } -.bookNav a { font: 12px/1 "Microsoft YaHei"; margin: 0 5px } -.readWrap { margin: 0 auto; width: 100% } -.book_title { width: 90%; margin: 0 auto; padding-bottom: 15px; position: relative } -.book_title h1 { padding: 60px 0 30px; font: 26px/1 "Microsoft YaHei"; color: #000; text-align: center } -.textinfo { color: rgba(0,0,0,.5); font: 12px/1.8 "Microsoft YaHei"; text-align: center; position: relative } -.textinfo a, .textinfo span { color: rgba(0,0,0,.5); margin-right: 15px; display: inline-block; vertical-align: middle; margin-top: -3px; *margin-top:-1px; - overflow: hidden; text-overflow: ellipsis; white-space: nowrap } -.readBox { width: 90%; margin: 0 auto; line-height: 2; font-size: 16px; padding: 10px 0 60px; /*min-height: 469px;*/ word-wrap: break-word; word-break: break-word } -.readBox p { line-height: 2; margin-top: 1em; text-indent: 2em; } -.orderBox { width: 90%; margin: 0 auto 10px; padding: 40px 0; font-size: 14px; min-height: 330px; border: 1px solid rgba(0,0,0,.1); border-radius: 2px; } -.orderBox h3 { padding: 0 50px; font: 18px/1 "Microsoft YaHei"; margin: 25px 0 } -.order_list { padding: 0 50px; line-height: 2.6; } -.order_list .btns { padding: 20px 0 } -/* 作者的话 */ -.say_bar { padding: 14px 14px 14px 74px; font-size: 14px } -/* 翻页 */ -.nextPageBox { margin: 30px auto; text-align: center; width: 98% } -.nextPageBox a { width: 26%; height: 58px; line-height: 58px; font-size: 18px; display: inline-block; border-radius: 3px; text-align: center; /*background: rgba(255,255,255,0.5);*/ opacity:.95; border: 1px solid rgba(0,0,0,.1); } -.nextPageBox a.prev, .nextPageBox a.dir { margin-right: 40px } -.nextPageBox a:hover { /*background: rgba(255,255,255,.8);*/ opacity:1; color: #333 } -.read_style_6 .nextPageBox a { color:#999; border:none } -/*固定悬浮图层*/ -.readPopup { border: 1px solid #D9D9D9; border-radius: 3px; background: #FFF; box-shadow: 0 1px 2px #999; overflow: hidden; padding-bottom: 20px; z-index: 9999; position: fixed; left: 50%; top: 50% } -.icon_check { position: absolute; width: 29px; height: 25px; right: -1px; top: -1px; z-index: 2; background-position: 0 -142px } -.closePopup { position: absolute; top: 20px; right: 20px; width: 16px; height: 15px; background-posion: -43px -126px } -.chapterBox { width: 600px; margin-left: -300px; margin-top: -260px } -.chapterBox .scrollWrap { height: 540px } -/*弹窗内容*/ -.popupTit h2 { text-align: center; letter-spacing: 15px; color: #333; font: 700 20px/30px "Microsoft Yahei"; margin: 30px 0 } -.popupTit h3 { font-size: 16px; margin: 15px 20px } -.scrollWrap { overflow-y: scroll; position: relative } -.dirWrap { padding: 0 40px } -.scrollWrap h3 { padding-left: 26px; font-size: 14px; background: #e6e6e6; height: 30px; line-height: 30px; font-weight: normal; position: relative; cursor: pointer; margin: 0 0 15px; border-radius: 3px } -.readPopup .tc .btn_gray { margin-left: 30px } -/* 目录 */ -.dirList { overflow: hidden; *zoom:1 -} -.dirList li { float: left; width: 40%; padding-left: 26px; height: 40px; line-height: 40px; overflow: hidden; margin-right: 20px; *zoom:1 -} -.dirList li a { float: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 220px } -/* 加书架 */ -.readTipBox { width: 400px; padding-bottom: 30px; margin-left: -200px; margin-top: -105px } -.tipWrap { padding: 30px } -/* 设置 */ -.setupBox { width: 480px; margin-left: -240px; margin-top: -130px } -.setupList { padding: 5px 40px } -.setupList li { font-size: 14px; padding: 15px 0 } -.setupList li a { display: inline-block; vertical-align: middle; margin: 0 6px; text-align: center } -.readTheme a { width: 34px; height: 34px; border-radius: 50%; position: relative; border:1px solid rgba(0,0,0,.1) } -.readTheme .white { background-color: #faf6ed; margin-left: 15px } -.readTheme .green { background-color: #e2efe2 } -/*.readTheme .blue { background-color: #E8FDFE }*/ -.readTheme .pink { background-color: #FDD9D9 } -.readTheme .yellow { background-color: #F1DEBD } -.readTheme .gray { background-color: #eee } -.readTheme .night { background-color: #666 } -/*.readTheme a.current, .readTheme a:hover { box-shadow: 1px 3px 5px #aaa }*/ -.read_style_1 .readTheme .white, .read_style_2 .readTheme .green, .read_style_3 .readTheme .pink, .read_style_4 .readTheme .yellow, .read_style_5 .readTheme .gray, .read_style_6 .readTheme .night { border-color: #f80 } -.setBtn a { border: 1px solid #D9D9D9; width: 53px; height: 28px; line-height: 28px; box-shadow: 0 1px 1px #ECECEC; border-radius: 3px } -.setBtn .act { color: #CC2931 } -.setFont .setSimsun { font-family: Simsun; font-size: 13px } -.setFont .setKs { font-family: kaiti; font-size: 15px } -.setupList li.fontSize a { text-align: center; margin: 0; font-size: 16px; width: 70px; box-shadow: 0 1px 0 #ECECEC } -.setupList li.fontSize a.small { margin-left: 8px; border-right: none; border-radius: 3px 0 0 3px } -.setupList li.fontSize a.big { border-left: none; border-radius: 0 3px 3px 0 } -.setupList li.fontSize .current_font { display: inline-block; padding: 0 22px; border: 1px solid #D9D9D9; height: 28px; line-height: 28px; box-shadow: 0 1px 1px #ECECEC; vertical-align: middle } -/* 手机阅读 */ -.qrBox { width: 280px; margin-left: -140px; margin-top: -120px } -.qrList { text-align: center; width: 166px; margin: 30px auto 15px } -.qr_img { width: 160px; height: 160px; margin: 0 auto 10px; display: block } -.qrCodeBox p { color: #999 } -/*遮罩层*/ -.maskBox { position: fixed; left: 0; top: 0; z-index: 995; width: 100%; height: 100%; background: black; filter: alpha(opacity=20); opacity: 0.2; animation: mask 2s ease-out 0s 1 normal } -@keyframes mask { 0% { - filter:alpha(opacity=0); - opacity:0 -} - 100% { - filter:alpha(opacity=20); - opacity:0.2 - } -} -.pc_bar { padding: 30px 0 10px; text-align: center; position: relative; } -.icon_pc { box-shadow: 0 1px 1px rgba(0,0,0,.3); padding: 3px; display: inline-block; border-radius: 50%; } -.icon_pc span { width: 96px; height: 96px; line-height: 1; border-radius: 50%; display: inline-block; background-color: #f80; color: #fefefe; font-size: 22px; letter-spacing: 0px; text-align: center; } -.icon_pc:hover span { background: #ed4259 } -.icon_yb { width: 37px; height: 27px; display: block; background-position: 0 -173px; margin: 19px auto 7px } -.icon_pc em { filter: alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; } -.read_dz { height:40px; line-height:40px; border-radius:40px; padding:0 22px; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0c000000,endColorstr=#0c000000); background:rgba(0,0,0,.07); display:block; position:absolute; bottom:35px; right:50px; color:#444; font-size:18px } -.read_dz:hover { color:#444; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000); background:rgba(0,0,0,.1) } -.read_style_6 .read_dz { color:#aaa } -.read_dz.on { color:#f70; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0cff8800,endColorstr=#0cff8800); background:rgba(255,136,0,.05) } -.read_dz.on i { background-position:-30px 0 } -.haveRead { border-radius: 2px; /*background: #fff;*/ width: 98%; margin:0 auto 20px; } -.haveRead h4 { padding: 25px 40px 0; font-weight: normal } -.haveRead ul { padding: 0 15px 10px } -.haveRead li { float: left; width: 124px; margin: 15px 23px } -.haveRead .items_img { display: block } -.haveRead .items_img img { width: 120px; height: 150px; background: #f6f6f6; border: 1px solid #ebebeb; padding: 1px; } -.haveRead .items_img:hover img { border-color: #ccc } -.haveRead .items_link { white-space: nowrap; text-overflow: ellipsis; width: 124px; overflow: hidden; height: 30px; line-height: 30px; display: block; } -.payFoot { line-height: 2.4; padding: 30px 0 20px; margin: 10px 50px 0; font-size: 13px; color: #808080; border-top: 1px solid #eee } -.readBanner { width: 98%; padding-top: 25px } -.readBanner img { max-width: 100% } -.read_style_6 .readBanner img, .read_style_6 .haveRead .items_img img { filter:alpha(opacity=80); opacity: .8 } -:root .topMain { filter: none } - -/*全本订阅*/ -.order_bar { text-align:center; padding-bottom: 30px } -.order_zj { width: 178px; padding:15px 0; margin:0 14px; display:inline-block; transition: width .3s; border: 1px solid #d8d8d8; background: rgba(255,255,255,.7);border-radius: 4px } -.order_zj:hover { color:#333; background: rgba(255,255,255,.2); border-color:#d1d1d1 } -.order_zj h4 { font-size:18px; font-weight:normal } -.order_zj .price { font-size:12px; padding-top:6px } -.order_zj .price .red { margin-left:5px } -.order_allzj { background:#f80; color:#fff; border-color:#f80 } -.order_allzj .red { color:#fff } -.order_allzj:hover { color:#fff; background:#f70; border-color:#f70 } -.order_tip { padding:25px 0 10px; color:#999; font-size:13px } -.dqye { font-size:15px } \ No newline at end of file diff --git a/src/views/BookContent.vue b/src/views/BookContent.vue index e5be7c1..8169c33 100644 --- a/src/views/BookContent.vue +++ b/src/views/BookContent.vue @@ -86,9 +86,7 @@
-
- -
+
- 类别：{{ data.bookInfo.categoryName }} - 作者：{{ data.bookInfo.authorName }} import "@/assets/styles/book.css"; import "@/assets/styles/read.css"; -import { reactive, toRefs, onMounted } from "vue"; +import { reactive, toRefs, onMounted, onBeforeUnmount, onUnmounted } from "vue"; import { useRouter, useRoute } from "vue-router"; import { getBookContent, getPreChapterId, getNextChapterId } from "@/api/book"; import { ElMessage } from "element-plus"; @@ -285,9 +282,29 @@ export default { imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL, }); onMounted(() => { - init(route.params.chapterId) - console.log("route.params.chapterId:",route.params.chapterId) - keyDown() + init(route.params.chapterId); + console.log("route.params.chapterId:", route.params.chapterId); + keyDown(); + }); + + onBeforeUnmount(async () => { + console.log("onBeforeUnmount............"); + + document.onkeydown = (e) => { + //事件对象兼容 + let e1 = + e || event || window.event || arguments.callee.caller.arguments[0]; + //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40 + const bookId = state.data.chapterInfo.bookId; + //左 + if (e1 && e1.keyCode == 37) { + // 按下左箭头 + return; + } else if (e1 && e1.keyCode == 39) { + // 按下右箭头 + return; + } + }; }); const bookDetail = (bookId) => { @@ -298,14 +315,13 @@ export default { router.push({ path: `/chapter_list/${bookId}` }); }; - const preChapter = async (bookId) => { const { data } = await getPreChapterId(route.params.chapterId); if (data) { router.push({ path: `/book/${bookId}/${data}` }); init(data); - }else{ - ElMessage.warning("已经是第一章了！") + } else { + ElMessage.warning("已经是第一章了！"); } }; @@ -314,8 +330,8 @@ export default { if (data) { router.push({ path: `/book/${bookId}/${data}` }); init(data); - }else{ - ElMessage.warning("已经是最后一章了！") + } else { + ElMessage.warning("已经是最后一章了！"); } }; @@ -324,33 +340,858 @@ export default { state.data = data; }; - // 监听键盘 + // 监听键盘 const keyDown = () => { - document.onkeydown = (e) => { - //事件对象兼容 - let e1 = e || event || window.event || arguments.callee.caller.arguments[0] - //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40 - const bookId = state.data.chapterInfo.bookId; - //左 - if (e1 && e1.keyCode == 37) { - // 按下左箭头 - preChapter(bookId); - } else if (e1 && e1.keyCode == 39) { - // 按下右箭头 - nextChapter(bookId) - } + document.onkeydown = (e) => { + //事件对象兼容 + let e1 = + e || event || window.event || arguments.callee.caller.arguments[0]; + //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40 + const bookId = state.data.chapterInfo.bookId; + //左 + if (e1 && e1.keyCode == 37) { + // 按下左箭头 + preChapter(bookId); + } else if (e1 && e1.keyCode == 39) { + // 按下右箭头 + nextChapter(bookId); } - } - + }; + }; return { ...toRefs(state), bookDetail, chapterList, preChapter, - nextChapter + nextChapter, }; }, mounted() {}, }; + + \ No newline at end of file