Initial commit

.env.development

@@ -0,0 +1,7 @@
+# 开发环境配置
+
+ENV = 'development'
+VUE_APP_BASE_API_URL = 'http://127.0.0.1:8888/api/front'
+VUE_APP_BASE_IMG_URL = 'http://47.106.243.172:8888'
+
+

.env.production

@@ -0,0 +1,4 @@
+# 生产环境配置
+
+ENV = 'production'
+VUE_APP_BASE_API_URL = 'http://47.106.243.172:8888'

package.json

@@ -8,8 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.27.2",
     "core-js": "^3.8.3",
-    "vue": "^3.2.13"
+    "element-plus": "^2.2.0",
+    "jquery": "^3.6.0",
+    "vue": "^3.2.13",
+    "vue-router": "^4.0.15"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/App.vue

@@ -1,26 +1,11 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div id="app">
+    <router-view />
+  </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
+export default  {
+  name:  'App'
 }
 </script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

src/api/home.js

@@ -0,0 +1,5 @@
+import request from '../utils/request'
+
+export function listHomeBooks() {
+    return request.get('/home/books');
+}

src/assets/styles/about.css

@@ -0,0 +1,27 @@
+@charset "utf-8";
+.userBox { width: 998px; border: 1px solid #eaeaea; margin: 0 auto 50px; background: #fff }
+.my_l { width: 198px; float: left;    font-size: 13px;
+    padding-top: 20px; }
+.my_l li a { display: block; height: 48px; line-height: 48px; padding-left: 40px; border-left: 2px solid transparent; font-size: 14px; margin: 0 0 2px; }
+.my_l li .on { border-left: 2px solid #f80; background: #f8f8f8 }
+.my_r { width: 739px; padding: 30px; float: right; border-left: 1px solid #ededed; min-height: 470px; background: #fff }
+.my_r .title { padding: 15px 0 }
+.my_r h4 { font-size: 15px; color: #666; font-weight: bold }
+.newsBox { }
+.news_list .dot { width: 4px; height: 4px; border-radius: 50%; background-color: #999; display: inline-block; margin: 0 10px 3px 0; }
+.news_list li { padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid #f5f5f5 }
+.news_list li h5 { font-size: 14px }
+.news_list li p { color: #999; padding-top: 15px }
+.news_nav { color: #999; padding: 0px 0; line-height: 2.5; }
+.news_nav a { font: 12px/1 "Microsoft YaHei"; margin: 0 5px; }
+.news_title { text-align: center; border-bottom: 1px solid #eee; margin: 30px auto 40px; }
+.news_title h2 { font-size: 20px; }
+.news_title .from { color: #999; display: block; margin: 20px 0; }
+.news_title .time { margin-left: 20px }
+.news_title .click { margin-left: 40px }
+.news_info { padding: 0 60px; line-height: 28px; font-size: 14px; min-height:400px }
+.news_info p { margin-bottom: 30px }
+.aboutBox h2 { font-size:16px; margin-bottom:15px }
+.about_info { line-height: 28px; font-size: 14px; min-height:400px }
+.about_info p, .about_info h4 { margin-bottom: 10px }
+.news_info img { max-width: 100% }

src/assets/styles/base.css

@@ -0,0 +1,235 @@
+@charset "utf-8";
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, a, blockquote, th { margin: 0; padding: 0 }
+h1, h2, h3, h4, h5, h6 { font-size: 14px }
+ol, ul, li { list-style: none outside none }
+table { border-collapse: collapsse; border-spacing: 0 }
+fieldset, img { border: 0 none }
+/*html { background: ##f5f5f5 }*/
+body { background: #f5f5f5; color: #333; font: 12px/1.5 PingFangSC-Regular,HelveticaNeue-Light,'Helvetica Neue Light','Microsoft YaHei',sans-serif,"宋体"; text-align: left }
+input::-moz-focus-inner {
+border:none;
+padding:0
+}
+a img { border: none }
+a { outline: none; color: #333; text-decoration: none }
+a:hover, .topBar a:hover, .red, .record_list li:hover .read_link a { color: #f70 }
+.red1 { color: #ff4040 }
+.unlink { text-decoration: underline }
+.blue { color: #5fc3f3 }
+.green { color: #360 }
+.black { color: #000 }
+.black3 { color: #333 }
+.black6 { color: #666 }
+.black9 { color: #999 }
+.ccc { color: #ccc }
+.orange { color: #f60 }
+.font12 { font-size: 12px!important }
+.font14 { font-size: 14px!important }
+.font16 { font-size: 16px!important }
+.font18 { font-size: 18px!important }
+.font20 { font-size: 20px!important }
+.font26 { font-size: 26px!important }
+.ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all }
+textarea { resize: none; outline: none; border: 1px solid #CCC; font: 12px/1.8 "microsoft yahei", Arial; padding-left: 5px }
+input { outline: none; border: none; /* padding-left: 5px; font-size: 13px;*/ font-family: "microsoft yahei", Arial; *background:none
+}
+i, em, cite { font-style: normal }
+.layui-inline, input, label { vertical-align: middle }
+button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; outline: 0 }
+button, select { text-transform: none }
+/*select { -webkit-appearance: none; border: none }*/
+input { line-height: normal }
+input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0 }
+input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height:auto }
+input[type=search] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box }
+input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance:none }
+input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-appearance: none }
+:-moz-placeholder { color: #999 }
+::-moz-placeholder { color: #999 }
+input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #999 }
+input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999 }
+.cf { zoom: 1 }
+.cf:before, .cf:after { content: ""; display: table; display: block; font-size: 0; height: 0; line-height: 0; clear: both; visibility: hidden }
+.cf:after { clear: both }
+.clear { clear: both }
+.tl { text-align: left }
+.tc { text-align: center }
+.tr { text-align: right }
+.fl { float: left }
+.fr { float: right }
+.block { display: block }
+.none, .hidden { display: none }
+/*base end*/
+.channelWrap { background: #fff; border-radius: 6px; padding: 20px; margin-bottom: 20px }
+.channelWrap.channelBanner { padding-bottom: 14px }
+.wrap_left { width: 750px }
+.wrap_right { width: 250px }
+.wrap_inner { padding: 20px; border-radius: 6px; background: #fff; }
+.wrap_bg { border-radius: 6px; background: #fff; }
+.pad20 { padding: 20px }
+.pad20_nobt { padding: 20px 20px 0 }
+.topBar { width: 100%; background: #fbfaf8; border-bottom: 1px solid #eae6e2; height: 35px; line-height: 35px }
+.box_center { width: 1020px; margin: 0 auto }
+.top_l { float: left }
+.top_r { float: right }
+.topBar .line { display: inline-block; padding: 0 12px; color: #e5d9da }
+.topBar a { display: inline-block; color: #8C8C8C }
+.topBar a.on { color: #333 }
+.topMain { height: 92px; background: #fff; overflow: hidden }
+.logo { width: 198px; float: left; padding: 23px 130px 0 0; display: block }
+.logo img { width: auto; height: 48px }
+.searchBar { width: 342px; margin-top: 27px; overflow: hidden }
+.searchBar .search/*, .searchBar .hotword*/ { width: 342px; overflow: hidden }
+.searchBar .s_int { width: 250px; padding: 0 14px 0 18px; height: 36px; line-height: 36px\9; vertical-align: middle; border: 1px solid #f80; border-right: none; color: #333; float: left; border-radius: 20px 0 0 20px; font-size: 14px; /*background: #fff;*/ background: 0 0 }
+/*.searchBar .s_btn { width: 78px; height: 38px; line-height: 38px; background: #f65167; color: #fff; font-size: 16px; text-align: center; float: left; cursor: pointer; padding: 0 }
+.searchBar .s_btn:hover { background:#E23249 }*/
+.searchBar .search_btn { float: left;
+    width: 58px;
+    height: 38px;
+    text-align: center;
+    border-radius: 0 20px 20px 0;
+    background-color: #f80; cursor: pointer; }
+.searchBar .search_btn .icon { width: 18px; height: 18px; display: block; margin: 9px auto 0; background: url(../images/search.png) no-repeat; background-size:cover; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/search.png', sizingMethod='scale'); }
+
+/*.hotword { padding-top: 3px }
+.hotword a, .hotword span { color: #999; margin: 0 6px 0 5px }
+.hotword a:hover { color: #666 }*/
+.bookShelf { margin-top: 27px; padding-left: 20px; overflow: hidden }
+.bookShelf .sj_link { height: 38px; line-height: 38px; padding-left: 30px; font-size: 15px; color: #404040; background: url(../images/icon_sj.png) no-repeat 6px 50%; float: left }
+.bookShelf .user_link { height: 38px; line-height: 38px; padding-left: 20px; font-size: 15px; color: #404040; float: right }
+.bookShelf .user_head { width: 26px; height: 26px; border-radius: 50%; float: left; margin: 6px 5px 0 0 }
+.bookShelf .user_name { max-width: 100px; display: inline-block }
+.bookShelf .line { float: left; color: #ccc }
+/*.bookShelf img { position: absolute; top: 17px; left: 17px; z-index: 10 }*/
+.mainNav { width: 100%; height: 48px; background: #f80; margin-bottom: 20px }
+.mainNav .nav li { float: left }
+.mainNav .nav li a { float: left; height: 44px; line-height: 48px; color: #fff; font-size: 16px; margin: 0 34px; border-bottom: 2px solid #f80; transition: color .3s,background-color .3s,border .3s }
+.mainNav .nav li.on a, .mainNav .nav li a:hover { border-bottom: 2px solid rgba(255,255,255,.8) }
+.footer { padding: 0 0 20px; /*margin-top: 20px; background: #fbfaf8; border-top: 1px solid #e0e0e0; */text-align: center; font-size: 12px }
+.copyright ul li { color: #999; line-height: 26px }
+.copyright .menu { padding: 2px 0 6px; font-size: 12px }
+.copyright .line { display: inline-block; padding: 0 12px; color: #e5d9da }
+.copyright p { margin-top: 10px; color: #999 }
+.code_bar img { margin-left: 66px }
+.rBar { float: right; width: 268px }
+.btn_gray, .btn_red, .btn_ora, .btn_ora_white, .btn_red1 {  border-radius: 20px; font-size: 15px; display: inline-block; text-align: center; cursor: pointer; /*padding: 0 34px; height: 34px; line-height: 34px;*/ padding: 11px 36px; line-height: 1; }
+.btn_gray { border: 1px solid #dedede; background: #fafafa; }
+.btn_red, .btn_ora { border: 1px solid #f80; background: #f80; color: #fff }
+.btn_red1 { border: 1px solid #ff4040; background: #ff4040; color: #fff }
+.btn_ora_white { border: 1px solid #f80; color: #f80 }
+.btn_ora_white:hover { background: #fefaf6 }
+.btn_link { padding: 2px 6px; background: #f80; color: #fff; border-radius: 2px }
+.btn_gray:hover { background: #f0f0f0; color: #333 }
+.btn_ora:hover, .btn_red:hover, .btn_link:hover { background: #f70; color: #fff }
+.btn_red1:hover { background: #fc2525; color: #fff }
+.pay_Checkout .btn_red, .btn_big {
+    font-size: 16px;
+    padding: 15px 0;
+    border-radius: 4px;
+    width: 196px; }
+i.vip { width: 26px; height: 14px; text-align: center; line-height: 14px; font-size: 11px; color: #fff; background: #fe8034; border-radius: 2px; margin: 13px 0 0 3px; display: inline-block; transform: scale(0.88); }
+i.vip_b { width: 36px; height: 22px; text-align: center; line-height: 22px; font-size: 15px; color: #fff; background: #f70; border-radius: 4px; margin-left: 5px; display: inline-block; vertical-align: 3px }
+.pageBox { text-align: center; padding: 20px 0 }
+.pageBox a, .pageBox span { display: inline-block; color: #999; padding: 6px 10px; margin: 0 5px; border-radius: 4px; font-size: 14px; line-height: 1 }
+.pageBox .current, .pageBox a:hover { background: #f80; color: #fff }
+.top_nearread { display: inline-block; position: relative; margin-right: 10px; float:left }
+.top_nearread .nearread { padding: 0 9px }
+.top_nearread .nearread.on { border-left: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; background: #FFF; padding: 0 8px; height: 36px; position: relative; z-index: 8 }
+.icon_down { display: inline-block; vertical-align: middle; margin: 2px 0 0 5px; width: 0px; height: 0px; overflow: hidden; border-width: 4px; border-style: solid dashed dashed; border-color: #7f7f7f transparent transparent; }
+.book_record { width: 382px; position: absolute; top: 0; right: 0; z-index: 9 }
+.record_box { width: 380px; background: #fff; margin-top:35px; border: 1px solid #d9d9d9 }
+.book_record .sp { width:77px; height:6px; background:#fff; position:absolute; top:32px; right:1px }
+.record_title { padding: 14px 10px }
+.record_title a { border: 1px solid #dedede; background: #fafafa; border-radius: 2px; font-size: 12px; padding: 6px 12px; line-height: 1; margin-right: 14px }
+.record_title a.on { border: 1px solid #f65167; background: #f65167; color: #fff }
+.record_box .all { display: block; height: 28px; line-height: 28px; text-align: center; background: #f6f6f6 }
+.record_list ul { margin-bottom: 10px }
+.record_list li { clear: both; padding: 10px; line-height: 1; overflow: hidden }
+.record_list li:hover { background: #f6f6f6 }
+.record_list li .cover { width: 50px; height: 63px; background: #f6f6f6 }
+.record_list li .cover img { width: 100%; height: 100%; }
+.record_list a { display: inline; color: #333 }
+.record_list .book_intro { width: 300px; height: 65px; padding-left: 10px; position: relative; }
+.record_list .book_intro p { height: 20px; line-height: 20px; overflow: hidden; color: #999; }
+.record_list .book_intro .p1 { font-size: 14px; }
+.record_list .book_intro .p2 { margin: 2px 0; white-space: nowrap; text-overflow: ellipsis }
+.record_list .book_intro .p3 { }
+.record_list .book_intro i.vip { margin:0 0 0 3px }
+.record_list .read_link a { color: #fff }
+.manBody {}
+.manBody .mainNav { background:#3e3d43 }
+.manBody .searchBar .s_int { border: 1px solid #878689; border-right:none; background-position:8px -22px }
+.manBody .mainNav .nav li.on a, .manBody .mainNav .nav li a:hover { background:#313035 }
+.nav_sub { margin-bottom: 16px }
+.nav_sub a { padding: 0 6px }
+
+.copyright .menu a { color: #666; font-size: 12px }
+.copyright .menu a:hover, .bookShelf .sj_link:hover { color: #f70 }
+
+.rightList .more, .more_bar { margin: 1px 0; height: 34px; line-height: 34px; border-radius: 1px; background-color: #f7f7f7; text-align: center }
+.rightList .more a, .more_bar a { display: block; color: #666 }
+.header, .footer { min-width: 1020px }
+
+/*base*/
+.noborder { border: 0!important }
+.nomargin { margin: 0!important }
+.ml { margin-left: 12px }
+.mr { margin-right: 12px }
+.ml5 { margin-left: 5px }
+.ml10 { margin-left: 10px }
+.ml15 { margin-left: 15px }
+.ml20 { margin-left: 20px }
+.mr5 { margin-right: 5px }
+.mr10 { margin-right: 10px }
+.mr15 { margin-right: 15px }
+.mr20 { margin-right: 20px }
+.mt5 { margin-top: 5px }
+.mt10 { margin-top: 10px }
+.mt15 { margin-top: 15px }
+.mt20 { margin-top: 20px }
+.mb5 { margin-bottom: 5px }
+.mb10 { margin-bottom: 10px }
+.mb15 { margin-bottom: 15px }
+.mb20 { margin-bottom: 20px }
+.mb50 { margin-bottom: 50px }
+.pointer { cursor: pointer }
+.notindent { text-indent: inherit!important }
+.vm { vertical-align: middle!important }
+.border_t { border-top: 1px solid #eee }
+.border_b { border-bottom: 1px solid #eee }
+.border_l { border-left: 1px solid #eee }
+.border_r { border-right: 1px solid #eee }
+.layui-laypage-curr{
+    background: #f80;
+}
+.layui-laypage-curr em {
+   color: #fff;
+}
+.layui-disabled, .layui-disabled:hover {
+    color: #d2d2d2 !important;
+    cursor: not-allowed !important
+}
+
+#noFeedbackNote {
+    line-height: 400px;
+    text-align: center;
+    border-top: 1px solid #eee;
+}
+
+#txtDescription {
+    /*width: 900px;*/
+    height: 288px;
+    margin: 20px auto 20px;
+    padding: 10px;
+
+
+    /*新增样式*/
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid #eee;
+    font-size: 14px;
+}
+
+.userBox {
+    margin: 0 auto
+}

src/assets/styles/book.css

@@ -0,0 +1,155 @@
+@charset "utf-8";
+.Interaction_tab a, .Interaction_tab a .icon, .Interaction_tab a.fr .icon, .dashang_bar .l_bar .list li, .btn_pc, .btn_flw, .fansBox .fans_bg, .icon_hg { background: url(../images/icon_interation.png) no-repeat }
+.InteractionBox { padding: 15px 14px 11px }
+.Interaction_tab a { width: 339px; height: 60px; line-height: 60px; font-size: 14px; color: #000 }
+/*.Interaction_tab a:hover, .Interaction_tab a.on { background-position: 0 -60px; color: #000 }*/
+.Interaction_tab a .icon { width: 38px; height: 60px; float: left; margin: 0 10px 0 64px; background-position: -348px 0 }
+.Interaction_tab a.fr .icon { background-position: -348px -60px }
+.Interaction_tab h4 { font-size: 17px; margin-right: 8px; display: inline }
+.InteractionBox .l_bar, .InteractionBox .r_bar { width: 335px; margin: 0 2px; float: left }
+.InteractionBox .r_bar .time { padding-right: 1px }
+.InteractionBox .l_bar .tit { padding: 22px 14px 0 4px }
+.InteractionBox .l_bar .tit .red, .InteractionBox .r_bar .tit .red { padding: 0 5px }
+.InteractionBox .l_bar .tit .fl { font-size: 17px }
+.InteractionBox .l_bar .tit .fr { padding-top: 7px }
+.dashang_bar .l_bar .list { padding-top: 20px }
+.dashang_bar .l_bar .list li { width: 90px; height: 134px; line-height: 1; float: left; margin: 0 20px 0 6px; text-align: center; background-position: 0 -130px }
+.dashang_bar .l_bar .list li img { width: 60px; height: 60px; background: #fff; margin: 35px 15px 10px; border-radius: 50%; box-shadow: 0 1px 0 rgba(0,0,0,.3) }
+.dashang_bar .l_bar .list li .user_name { line-height: 1!important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; padding: 0 10px }
+.dashang_bar .l_bar .list .li_1 { }
+.dashang_bar .l_bar .list .li_2 { background-position: -100px -130px }
+.dashang_bar .l_bar .list .li_3 { background-position: -200px -130px; margin-right: 0 }
+.InteractionBox .r_bar .tit { padding: 14px 1px 12px 1px }
+.InteractionBox .r_bar .tit strong { display: block; font-size: 13px }
+.InteractionBox .r_bar .list, .InteractionBox .r_bar .sum { margin: 0 1px }
+.InteractionBox .r_bar .list li { height: 27px; line-height: 27px; overflow: hidden; border-top: 1px dotted #ccc; color: #999 }
+.InteractionBox .r_bar .list li .user_name { margin-right: 8px }
+.InteractionBox .r_bar .sum { border-top: 1px dotted #ccc; line-height: 34px }
+.btn_pc, .btn_flw { width: 140px; height: 44px; display: inline-block; background-position: 0 -270px }
+.btn_flw { width: 122px; background-position: -150px -270px }
+.flower_bar .l_bar .list { padding: 0 14px 0 4px }
+.flower_bar .l_bar li { padding: 15px 0 6px; overflow: hidden; clear: both }
+.flower_bar .l_bar .book_intro { width: 265px }
+.flower_bar .l_bar .cover img { width: 45px; height: 56px; background: #f6f6f6; margin: 2px 16px 0 0 }
+.flower_bar .l_bar .book_intro .txt { height: 38px; line-height: 18px; padding-top: 2px; color: #999; overflow: hidden; display: block }
+.r_fansBrank .book_intro { float: inherit!important }
+.user_level1, .user_level2, .user_level3, .user_level4, .user_level5, .user_level6, .user_level7, .user_level8, .user_level9, .user_level10, .user_level11 { width: 30px; height: 16px; line-height: 16px; text-align: center; border-radius: 2px; margin: 11px 0 0; color: #fff }
+.user_level1 { background: #d0d0d0 }
+.user_level2 { background: #c0c0c0 }
+.user_level3 { background: #b4b3b3 }
+.user_level4 { background: #a0dfe6 }
+.user_level5 { background: #77d2db }
+.user_level6 { background: #b4d894 }
+.user_level7 { background: #94c766 }
+.user_level8 { background: #ffc24c }
+.user_level9 { background: #ffa800 }
+.user_level10 { background: #ff6e26 }
+.user_level11 { background: #ff0000 }
+/*固定悬浮图层*/
+.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: url(../images/icon_readpage.png) no-repeat 0 -142px }
+.on .icon_check { display: block }
+.closePopup { position: absolute; top: 20px; right: 20px; width: 16px; height: 15px; background: url(../images/icon_readpage.png) no-repeat -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 }
+/*捧场、送鲜花*/
+.pcBox, .flowerBox { width: 500px; margin-left: -251px; margin-top: -215px }
+.propsList { padding: 15px 0 10px 20px }
+.propsList li { float: left; cursor: pointer; margin: 0 8px 16px; text-align: center }
+.propWrap { width: 134px; height: 54px; line-height: 54px; text-align: center; font-size: 15px; color: #000; display: block; border: 1px solid #e6e6e6; background: #fafafa; position: relative }
+.on .propWrap, .propWrap:hover { width: 132px; height: 52px; line-height: 52px; color: #f70; border: 2px solid #f80; background: #fff }
+.propsList li i { display: none; line-height: 1 }
+.propsList li .propsBox { padding-top: 20px }
+.have_num { padding: 0 30px 10px; font-size: 14px; color: #999 }
+.have_num .red { margin: 0 4px }
+.popup_text { width: 418px; height: 62px; padding: 8px 10px; margin: 8px 30px 20px; color: #555; border: 1px solid #e6e6e6; }
+/*消息提示*/
+.newsTipBox { width: 400px; padding-bottom: 30px; margin-left: -200px; margin-top: -105px }
+.tipWrap { padding: 30px; font-size: 14px }
+/*遮罩层*/
+.maskBox { position: fixed; left: 0; top: 0; z-index: 995; width: 100%; height: 100%; background: black; filter: alpha(opacity=30); opacity: 0.3; animation: mask 2s ease-out 0s 1 normal }
+@keyframes mask { 0% {
+filter:alpha(opacity=0);
+opacity:0
+}
+100% {
+filter:alpha(opacity=30);
+opacity:0.3
+}
+}
+.fansBox { width: 998px; border: 1px solid #eaeaea }
+.fansHead { height: 54px; line-height: 54px; margin: 0 14px; border-bottom: 1px solid #eaeaea; font-weight: normal }
+.fansHead h2 { font-size: 20px; font-weight: normal }
+.fansCon { padding: 20px }
+.fansCon .r_bar { width: 204px }
+.fansCon .cover { width: 200px; height: 250px; background: #f6f6f6; border: 1px solid #ebebeb; padding: 1px; }
+.fansCon .btn_red { width: 202px; margin: 2px 0 14px; padding: 10px 0 }
+.fansCon .l_bar { width: 750px }
+.fansCon .l_bar .list1 { padding-top: 4px }
+.fansCon .list1 li { width: 33%; line-height: 1; float: left }
+.fansCon .list1 .fans_bg { width: 90px; height: 112px; background-position: 0 -320px; position: relative; margin-right: 18px }
+.fansCon .list1 .fans_bg img { width: 60px; height: 60px; background: #fff; margin: 39px 15px 0; border-radius: 50%; box-shadow: 0 1px 0 rgba(0,0,0,.3) }
+.fansCon .list1 h5 { font-size: 16px; padding: 9px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.fansCon .list1 li .user_name { line-height: 1!important }
+.fansCon .list1 .li_2 .fans_bg { background-position: -100px -320px }
+.fansCon .list1 .li_3 .fans_bg { background-position: -200px -320px }
+.fansCon .fans_info { width: 136px; font-size: 14px }
+.fansCon .fans_info .fans_pointer { padding: 14px 0 22px }
+.fans_level span { padding: 1px 10px 2px }
+.icon_hg { width: 30px; height: 30px; display: inline-block; background-position: -300px -320px; position: absolute; top: -13px; right: -13px }
+.fansCon .list2 { padding: 0 }
+.fansCon .list2 li { width: 250px; float: left; height: 59px; padding: 0 0 19px; display: inline }
+.fansCon .list2 .num { font: 16px/59px "microsoft yahei", Arial, "宋体"; width: 32px; color: #666; font-weight: bold }
+.fansCon .list2 .img { width: 40px; height: 40px; margin-top: 10px; position: relative }
+.fansCon .list2 .img img { width: 100%; height: 100%; border-radius: 50% }
+.fansCon .list2 .img span { display: block; margin: 0; position: absolute; left: 5px; bottom: 0 }
+.fansCon .list2 .msg { display: inline; width: 164px; padding: 8px 0 0 12px; }
+.fansCon .list2 .msg h4 { line-height: 24px; font-weight: normal; font-size: 16px; overflow: hidden; height: 24px; white-space: nowrap; text-overflow: ellipsis; }
+.fansCon .list2 .msg p { font-size: 12px; line-height: 16px; color: #999; }
+.fansTop { margin-bottom: 8px; border-bottom: 1px solid #eaeaea }
+.fans_tab { width: 1005px; overflow: hidden; }
+.fans_tab ul { float: left; width: 280px; margin-right: 55px; }
+.fans_tab li { line-height: 39px; overflow: hidden; font-size: 14px; height: 39px; border-bottom: 1px solid #ebebeb; }
+.fans_tab li .num { float: left; width: 40px; color: #666; }
+.fans_tab li a { float: left; overflow: hidden; width: 200px; white-space: nowrap; text-overflow: ellipsis; }
+.fans_tab li .fans_level { float: left; font-size: 12px; width: 40px; text-align: right; color: #999; }
+.fansRule dl { padding: 20px 20px 30px }
+.fansRule dt { line-height: 24px; margin-bottom: 6px; font-size: 16px; }
+.fansRule dd { font-size: 12px; line-height: 20px; margin-bottom: 16px; color: #777; }
+.fansRule table { width: 100%; border-collapse: collapse; }
+.fansRule table th, .fansRule table td { font-weight: 400; min-width: 40px; padding: 12px 0; text-align: left; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; }
+.fansRule ol li { list-style-type: decimal; list-style-position: inside; }
+.InteractionBox .l_bar, .flower_bar .l_bar { display: none }
+.dashang_bar { float: left }
+.flower_bar { float: right }
+.author_head { text-align: center }
+.author_head .head img { width:64px; height:64px; border-radius: 50%; background:#f6f6f6; display: block; margin: 0 auto }
+.author_head .msg { margin-top: -4px }
+.author_head .msg h4 { font-size:14px; line-height:2.4 }
+.icon_qyzz { padding: 5px; line-height:1; background:#f70; color:#fff; border-radius:3px; display:inline-block }
+.author_intro, .author_book { border-top:1px dotted #e0e0e0 }
+.author_intro h4,.author_book h4 { font-weight: normal; font-size: 12px; padding:10px 0 5px }
+.author_intro .intro_txt, .author_book .book_txt { line-height:1.8; padding-bottom:10px }
+.author_book .rightList ul { padding:0 }
+
+
+.tj_bar .cover { float: left; display: block; margin-right: 10px }
+.tj_bar .cover img { width: 64px; height: auto; background: #f6f6f6 }
+.tj_bar .book_intro { padding: 15px 0; clear: both; word-break: break-all; zoom: 1; overflow: hidden }
+.tj_bar .dec { width: 136px; float: right }
+.tj_bar .book_intro .book_name { display: block; font-size: 14px; line-height: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden }
+.tj_bar .book_intro .txt { height: 54px; line-height: 1.5; color: #808080; overflow: hidden; display: block; margin-top: 10px; }
+.tj_bar li { border-bottom: 1px solid #eee }
+.tj_bar li:last-child { border: none }
+.tj_bar li:last-child .book_intro { padding: 15px 0 2px }
+
+.friend_link { display: none }
+.footer { background: #fff; padding: 16px 0 20px }
+

src/assets/styles/layer.css

@@ -0,0 +1 @@
+.layermbox{position:absolute;left:0;top:0;width:100%;z-index:19891014}.layermmain,.laymshade{position:fixed;left:0;top:0;width:100%;height:100%}.layermbtn span,.layermchild{display:inline-block;position:relative}.laymshade{background-color:rgba(0,0,0,.5);pointer-events:auto}.layermmain{display:table;font-family:Helvetica,arial,sans-serif;pointer-events:none}.layermmain .section{display:table-cell;vertical-align:middle;text-align:center}.layermchild{text-align:left;background-color:#fff;font-size:14px;border-radius:6px;box-shadow:0 0 8px rgba(0,0,0,.1);pointer-events:auto;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.18s;animation-duration:.18s}.layermborder{border:1px solid #999}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.layermanim{animation-name:bounceIn;-webkit-animation-name:bounceIn}.layermbox0 .layermchild{max-width:260px;min-width:150px}.layermbox1 .layermchild{border:none;border-radius:0}.layermbox2 .layermchild{width:auto;max-width:260px;min-width:40px;border:none;background-color:rgba(0,0,0,.6);color:#fff}.layermchild h3{padding:0 45px 0 10px;height:50px;line-height:50px;font-size:16px;font-weight:400;border-radius:5px 5px 0 0;border-bottom:1px solid #EBEBEB}.layermbtn span,.layermchild h3{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layermcont{padding:20px 15px;line-height:22px;border-radius:5px}.layermbox1 .layermcont{padding:0}.layermbox2 .layermcont{text-align:center;padding:30px 30px 0;line-height:0}.layermbox2 .layermcont i{width:1.5rem;height:1.5rem;margin-left:8px;display:inline-block;background-color:#fff;border-radius:100%;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.layermbox2 .layermcont i:first-child{margin-left:0;-webkit-animation-delay:-.32s;animation-delay:-.32s}.layermbox2 .layermcont i.laymloadtwo{-webkit-animation-delay:-.16s;animation-delay:-.16s}.layermbox2 .layermcont>div{line-height:22px;padding-top:7px;margin-bottom:20px;font-size:14px}.layermbtn{position:relative;height:40px;line-height:40px;font-size:0;text-align:center;border-top:1px solid #EBEBEB}.layermbtn span{width:50%;text-align:center;font-size:14px;cursor:pointer;border-radius:0 5px 0 0}.layermbtn span:first-child{height:39px;background-color:#fff;border-radius:0 0 0 5px}.layermbtn:before{content:'\20';position:absolute;width:1px;height:39px;left:50%;top:0;background-color:#EBEBEB}.layermend{position:absolute;right:7px;top:10px;width:30px;height:30px;border:0;font-weight:400;background:0 0;cursor:pointer;-webkit-appearance:none;font-size:30px}.layermend::after,.layermend::before{position:absolute;left:5px;top:13px;content:'';width:20px;height:2px;background-color:rgba(0,0,0,.3);transform:rotate(45deg);-webkit-transform:rotate(45deg);border-radius:3px}.layermend::after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}

src/assets/styles/main.css

@@ -0,0 +1,245 @@
+@charset "utf-8";
+.items_txt .author a, .updateTable .author a { cursor: text }
+.friend_link { padding: 12px 0 0; line-height: 2.4; text-align: center }
+.friend_link a { margin: 0 10px; display: inline-block }
+/*.leftBox, .rightBox, .rightBox2 { margin-bottom: 14px }
+.channelBanner .leftBox, .channelBanner .rightBox { height: 334px; overflow: hidden }*/
+.channelPic .leftBox, .channelPic .rightBox { /*height: 515px; */overflow: hidden }
+.channelTable .leftBox { /*height: 1046px;*/ overflow: hidden }
+.scBigImg img, .rightList li.on .cover img, .itemsList .items_img img { box-shadow: 0 0 1px rgba(0,0,0,.05) }
+.scBigImg:hover img, .rightList li.on .cover a:hover img, .itemsList .items_img:hover img { box-shadow: 0 0 1px rgb(0,0,0,.25) }
+.leftBox { width: 720px; float: left; /*border: 1px solid #EAEAEA*/ }
+.sliderContent { width: 306px; float: left; /*margin: 16px 0 16px 14px;*/ position: relative }
+.scSmallImg { position: absolute; top: 0px; right: 0px; /*height: 335px*/ }
+.scSmallImg li { height: 65px; margin-bottom: 8px; border: 2px solid #fff }
+.scSmallImg li.on { border: 2px solid #FF7800 }
+.scSmallImg img { width: auto; height: 65px; cursor: pointer; filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6 }
+.scSmallImg li.on img { filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1 }
+.scBigImg dd { display: none }
+.scBigImg dd.on { display: block }
+.scBigImg img { width: 240px; height: 300px; background: #f6f6f6 }
+.hot_articles { width: 396px; float: right; padding: 0 2px }
+.hot_articles dl { padding: 0 4px 8px; border-bottom: 1px dotted #eae6e2 }
+.hot_articles .hot_recommend { margin-bottom: 12px; }
+.hot_articles dt { /*height: 40px; line-height: 40px;*/ padding-bottom: 7px; text-align: center; font-size: 16px; font-weight: 600; line-height: 1.8 }
+.hot_articles dt a { color: #F70 }
+.hot_articles dd { line-height: 30px; font-size: 14px; overflow: hidden }
+.hot_articles dd a { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
+.hot_articles .hot_recommend dd a { width: 49%; padding-right: 1%; float: left; }
+.hot_articles .hot_notice dd a { padding-right: 1%; }
+.hot_articles span.tit { color: #f70; margin-right: 6px }
+.hot_articles .hot_notice { border: none }
+.hot_articles .line { padding: 0 14px; color: #eee }
+.rightBox { width: 240px; float: right; /*border: 1px solid #EAEAEA;*/ position: relative }
+.rightBox .title, .wrap_right_cont .title { /*height: 48px; margin: 0 14px;*/ border-bottom: 1px solid #e0e0e0 }
+.rightBox .title h3, .wrap_right_cont .title h3 { line-height: 1; padding-bottom: 14px; display: inline-block; font-size: 20px; font-weight: 600; /*border-bottom: 4px solid transparent*/ }
+/*.rightBox .title h3.on { border-color: #f80 }*/
+.rightList ul { padding: 0  }
+.rightList li { /*border-bottom: 1px dotted #e0e0e0; height: 37px; line-height: 37px;*/ overflow: hidden; position: relative; vertical-align: middle }
+.rightList li:last-child { border: none }
+.rightList .book_name { font-size: 14px; height: 34px; line-height: 34px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden }
+.rightList .book_intro { background: #f7f7f7; border: 1px solid #eee; clear: both; padding: 8px; word-break: break-all; zoom: 1; overflow: hidden; display: none }
+.rightList .cover, .rightList .book_intro .txt { display: none }
+.rightList li.on { height: auto; padding: 4px 0; border: none }
+.rightList li.on .book_intro { display: block }
+.rightList li.on .cover { float: left; display: block }
+.rightList li.on .cover img { width: 60px; height: auto; background: #f6f6f6; margin-right: 9px }
+.rightList li.on .book_intro .name { line-height: 26px; height: 26px; display: block; overflow: hidden }
+.rightList_nobor ul { padding: 4px 14px 10px }
+.rightList_nobor li { height: auto; padding: 10px 0!important; border: none }
+.book_intro .author { color: #999; display: block; line-height: 30px }
+.book_intro .class { color: #999; display: block; line-height: 1 }
+.rightList .on .book_intro .txt { height: 72px; line-height: 1.5; color: #808080; overflow: hidden; display: block }
+
+.rightList li i, .rankTable .rank i { width: 17px; height: 17px; line-height: 17px; text-align: center; background-color: #999; color: #fff; vertical-align: middle; display: inline-block; font-size: 12px; }
+.rightList li i { float: left; margin: 8px 7px 0 0; }
+.rankTable .rank i { margin: 1px 1px 0 }
+/*.rightList li.on i { position: absolute; top: 12px; left: 0; margin: 0; display:none }*/
+.rightList li.num1 i, .rankTable .rank .num1 { background-color: #fc7403 }
+.rightList li.num2 i, .rankTable .rank .num2 { background-color: #f79415 }
+.rightList li.num3 i, .rankTable .rank .num3 { background-color: #ffa95e }
+.rightList li.num1 i,.rightList li.num2 i,.rightList li.num3 i { display:block }
+/*.rightList .more{ margin: 1px 0; height: 34px; line-height: 34px; border-radius: 1px; background-color: #f7f7f7; text-align: center }
+.rightList .more a{ display: block; color: #666 }*/
+.leftBox .title { border-bottom: 1px solid #e9e9e9 }
+.leftBox .title h2 { line-height: 1; padding-bottom: 14px; display: inline-block; font-size: 20px; font-weight: 600; /*border-bottom: 4px solid transparent*/ }
+.picRecommend { width: 720px; padding: 12px 0 0 }
+.itemsList { width: 50%; float: left; padding: 17px 0 }
+.itemsList .items_img { float: left; margin-right: 14px }
+.itemsList .items_img img { width: 96px; height: 120px; background: #f6f6f6 }
+.items_txt { width: 230px; float: left; /*padding-right: 20px;*/ }
+.items_txt h4 { height: 20px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all; margin-bottom: 8px; font-size: 16px; font-weight: normal }
+.items_txt .author { margin: 8px 0 }
+.items_txt .author a { color: #a6a6a6 }
+.items_txt .intro { margin-top: 8px; line-height: 1.5; height: 54px; overflow: hidden }
+.searchTipBar { color: #333; font-size: 14px; padding: 1px 7px 16px 7px }
+.leftBox .updateTable { width: 718px; }
+.updateTable { color: #999 }
+.updateTable table { width: 100%; margin-bottom: 14px; }
+.updateTable th, .updateTable td { height: 41px; line-height: 41px; vertical-align: middle; padding-left: 1px; text-align: left }
+.updateTable th { font-weight: normal; font-size: 14px; }
+.updateTable td { border-top: 1px solid #eee }
+.updateTable .style { width: 74px; font-size: 14px; }
+.updateTable .name { width: 192px; padding-right: 10px; font-size: 14px; }
+.updateTable .name a, .updateTable .chapter a { max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all }
+.updateTable .chapter { padding-right: 5px }
+.updateTable .chapter a { max-width: 200px; float: left; color: #666 }
+.updateTable .author { width: 82px; text-align: left }
+.updateTable .time { width: 82px; text-align: center }
+.updateTable .word { width: 60px; padding-right: 10px; text-align: right }
+.updateTable .rank { width: 2.5em; padding-right: 10px; text-align: center }
+.updateTable .name a, .updateTable .chapter a, .updateTable .author a { height: 41px; line-height: 41px; display: inline-block; overflow: hidden }
+.rankBox { padding-bottom: 14px; height: auto!important }
+.rankTable th { background: #f9f9f9; color: #333 }
+.rankTable td { border: none; height: 40px; line-height: 40px }
+.rankTable tr:nth-child(2n) td { background: #fafafa }
+.rankTable .chapter a { max-width: 176px }
+.classTable { font-size: 14px }
+.classTable .rank { width: 60px; }
+.classTable .rank i { float: inherit; margin: 0; color: #fff }
+.classTable .style { width: 100px; }
+.classTable .name { width: 250px; }
+.classTable .name a, .classTable .chapter a { max-width: 90% }
+.classTable .author { width: 120px }
+.classTable .word { width: 80px; padding-right: 15px }
+.rightBox2 { width: 266px; float: right; border: 1px solid #EAEAEA; position: relative; overflow: hidden }
+.rightBox2 .title h3 { height: 45px; line-height: 48px; padding: 0 30px; font-size: 18px; font-weight: normal; color: #ff758f; border-bottom: 4px solid #ff758f }
+.rightList2 li { vertical-align: middle }
+.rightList2 li a { display: block; /*padding: 0 30px;*/ height: 47px; line-height: 47px; font-size: 16px; overflow: hidden; border-top: 1px dotted #eee; }
+.rightList2 li:first-child a { border: none }
+.rightList2 li a.on, .rightList2 li a:hover { color: #f70 }
+.so_tag { /*padding: 4px 14px 0;*/  font-size: 14px; padding: 5px 0 }
+.so_tag li { padding: 0 0 24px; /*border-bottom: 1px solid #eee*/ }
+.so_tag li:last-child { padding: 0 0 4px }
+.so_tag li .tit, .so_tag li a { line-height: 1; padding: 3px 7px; margin-right: 12px }
+.so_tag li .tit { color: #999 }
+.so_tag li a.on, .so_tag li a:hover { color: #f70 }
+.so_tag li .so_girl { display: inline-block }
+.so_tag li .so_boy { display: inline-block/*; margin: 8px 0 0 140px;*/ }
+
+/*.payBox { width: 998px; border: 1px solid #eaeaea }*/
+.payHead { height: 36px; line-height: 36px; padding: 20px 0 30px; margin: 0 24px; font-size: 16px; border-bottom: 1px solid #eaeaea }
+.payHead .user_name { margin-right: 25px }
+.payHead .btn_gray { font-size: 14px; padding: 10px 20px; margin-left: 20px }
+.payFoot { line-height: 2.4; padding: 30px 0 40px; margin: 0 24px; font-size: 13px; color: #999; border-top: 1px solid #eee; }
+.payCon { margin: 0 24px }
+.payCon h5 { font-size: 16px; font-weight: normal; padding: 28px 0 2px }
+.pay_way { padding-bottom: 5px }
+.pay_way li { width: 196px; text-align: center; border: 2px solid #eee; border-radius: 4px; margin: 20px 26px 3px 0; float: left; cursor: pointer; line-height: 1 }
+.pay_way li.on { border-color: #f80 }
+.pay_way li .pay_pic { width: 180px; margin: 12px auto; }
+.pay_way li strong { font-size: 24px; display: block; line-height: 1; padding: 20px 0 5px }
+.pay_way li .pay_mn { display: table-cell; width: 196px; height: 40px; vertical-align: middle; line-height: 1.2; padding-bottom: 12px; font-size: 14px; text-align: center }
+.pay_way li .pay_mn em.red { display: block }
+.pay_Checkout { padding: 20px 0; font-size: 14px; line-height: 1.8; }
+.pay_Checkout .btn_red { margin: 20px 0; }
+
+.payResultBox { padding: 90px 40px 160px; text-align: center }
+.payResultBox h3 { font-size: 38px; line-height: 1; padding-bottom: 30px; }
+.payResultBox .list { display: inline-block; padding-bottom: 15px;}
+.payResultBox .list li { font-size: 16px; line-height: 36px }
+.payResultImg { width: 60px;
+    margin-right: 12px;
+    vertical-align: middle; }
+/*.bookCover, .reply_bar { padding: 14px }*/
+.bookCover .book_cover { width: 200px; display: block; height: auto; margin-right: 25px; float: left; position: relative; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.3), 0 0 5px #f9f2e9 inset; transition: color .3s,background-color .3s,border .3s;
+}
+.bookCover .cover { width: 100%; height: 100%; background: #f6f6f6;
+	-webkit-transition: -webkit-transform .3s ease-out;
+  -moz-transition: -moz-transform .3s ease-out;
+  -ms-transition: -ms-transform .3s ease-out;
+  transition: transform .3s ease-out;
+}
+.bookCover .cover:hover {
+  -webkit-transform: scale(1.05);
+  -moz-transform: scale(1.05);
+  -o-transform: scale(1.05);
+  transform: scale(1.05) }
+.book_info { width: 755px; float: left }
+.book_info h1 { font-size: 25px; display: inline-block; line-height: 1; }
+.book_info .author { font-size: 14px; margin-left: 20px; color: #444 }
+.book_info .list { padding: 15px 0 20px }
+.book_info .list li { line-height: 26px; color: #666 }
+.book_info .list li .item { width: 20%; display: inline-block }
+/*目录页*/
+.book_info1 { text-align: center; padding: 10px 0 15px }
+.book_info1 .tit { padding: 10px 0 20px }
+.book_info1 h1 { font-size: 28px; display: inline-block }
+.book_info1 .list { padding: 5px 0; font-size: 14px }
+.book_info1 .list li { line-height: 26px; color: #999 }
+.book_info1 .list li span { display: inline-block; margin: 0 15px }
+.dirWrap { padding-bottom: 30px }
+.dirWrap h3 { padding-left: 6px; font-size: 14px; background: #f9f9f9; height: 40px; line-height: 40px; font-weight: normal; position: relative; cursor: pointer; margin: 0 0 5px; border-radius: 3px }
+.dirList { overflow: hidden; padding-bottom: 20px }
+.dirList li { float: left; width: 265px; padding-left: 5px; padding-right: 30px; height: 40px; line-height: 40px; overflow: hidden; border-bottom: 1px dotted #ddd; *zoom:1; font-size: 14px
+}
+.dirList li a { float: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap }
+.dirList li i.red { padding-left: 5px }
+.book_info .intro_txt { height: 96px; min-height: 96px; line-height: 24px; font-size: 14px; position: relative; margin-bottom: 26px; overflow: hidden }
+.book_info .intro_txt em.black9 { font-weight: bold; color: #333; display: block; }
+/*.book_info .intro_txt p { text-indent:2em }*/
+.icon_show, .icon_hide { display:inline-block; color:#2972cc; height: 24px; padding:0 2px 0 10px; text-indent: 0; text-align: center; font-size: 12px; position: absolute; right: 0; bottom: 0; background: #fff }
+.icon_show i, .icon_hide i { display:inline-block; width:12px; height:12px; background:url(../images/icon_dt.png) no-repeat 0 2px; margin-right: 4px; *vertical-align:middle }
+.icon_hide i { background-position:-12px 2px }
+.icon_hide { display: none }
+.btns .btn_red, .btns .btn_ora, .btns .btn_addsj { margin-right: 24px }
+.book_tit { /*height: 48px; line-height: 48px; margin: 0 14px;*/ border-bottom: 1px solid #eee; overflow: hidden; padding-bottom: 14px; line-height: 1.2 }
+.book_tit .fl { font-size: 14px; color: #666 }
+.book_tit .fl h3 { font-size: 20px; color: #333; margin-right: 5px; display: inline }
+.book_tit .fr { font-size: 13px }
+.bookChapter .list { padding: 8px 0 }
+.bookChapter .list li { line-height: 36px; overflow: hidden }
+.zj_yl { color: #999; font-size: 13px }
+/*.bookChapter .list li .zj { width: 50%; float: left }
+.bookChapter .list li .zj_1 a { color: #f60 }*/
+
+
+
+/*.commentBar { padding: 0 14px }*/
+.comment_list { padding: 20px 0; border-bottom: 1px solid #eee }
+.comment_list:last-child { border: none }
+.comment_list .user_heads { /*width: 54px; height: 54px; float: left;*/ position:relative; margin-right: 20px }
+.comment_list .user_head { width: 50px; height: 50px; border-radius: 50%; background: #f6f6f6 }
+.comment_list .user_heads span { display: block; margin: 0; position: absolute; left: 12px; bottom: 0 }
+.comment_list ul { width: 640px }
+.comment_list .li_0 { font-family: "宋体" }
+.comment_list .li_0 strong { font-size: 14px; color: #f00 }
+.comment_list .li_1 { overflow: hidden }
+.comment_list .user_name { color: #ed4259 }
+.comment_list .li_2 { padding: 6px 0 }
+.comment_list .li_3 { color: #999 }
+.comment_list .reply { padding-left: 12px }
+.comment_list .num { color: #ed4259; margin: 0 3px }
+.comment_list .li_4 { line-height: 34px; padding-top: 8px; margin-top: 15px; border-top: 1px solid #eaeaea }
+.no_comment { padding: 70px 14px 115px; color: #CCCCCC; text-align: center; font-size: 14px; }
+.pl_bar li { display: block }
+.pl_bar .name { color: #666; padding-top: 2px; font-size: 14px }
+.pl_bar .dec { font-size: 14px; line-height: 1.8; padding: 12px 0 }
+.pl_bar .other { line-height: 24px; color: #999; font-size: 13px }
+.pl_bar .other a { display: inline-block; color: #999 }
+.pl_bar .reply { padding-left: 22px; background: url(../images/icon_reply.png) no-repeat 0 2px }
+.reply_bar .tit { line-height: 52px; font-size: 13px }
+.replay_text { width: 100%; height: 110px; border: 1px solid #eaeaea; border-radius: 5px; padding: 10px; box-sizing: border-box; font-size: 14px; box-shadow: 0 0 4px 2px hsla(0,0%,92%,.35); }
+.replay_text:hover { background: #fff }
+.reply_btn { padding: 17px 0 19px; overflow: hidden }
+.reply_bar .reply_btn { padding-bottom: 4px }
+.reply_btn .btn_red { padding: 10px 20px; font-size: 14px }
+.reply_btn .fr { margin-top: 8px }
+.write_bar { padding: 1rem 0; margin: 0 1rem }
+.write_comment { padding: 1rem; background: #f6f6f6; min-height: 16rem }
+.write_comment .text { width: 100%; min-height: 10rem; border: 1px solid #ddd; font-size: 0.875rem; line-height: 1.8; margin-bottom: 1rem }
+.book_comment_tit { font-size: 24px; padding: 20px 15px 10px 15px }
+.page_bar { padding: 1rem 0; margin: 0 1rem; border-top: 1px solid #eee }
+.page_bar li { width: 33.3%; float: left; text-align: center }
+.page_bar li a, .page_bar li .select_page { display: block; height: 2rem; line-height: 2rem; font-size: 0.875rem; border: 1px solid #eee; background: #fff; box-sizing: border-box }
+.page_bar .previous a { margin-right: 1rem }
+.page_bar .next a { margin-left: 1rem }
+.page_bar li .select_page { width: 100% }
+.icon_jh, .icon_zd { text-align: center; margin: 2px 5px 0 0; color: #fff; font-size: 12px; padding: 3px 3px; line-height: 1; display: inline-block; background: #ed4259; border-radius: 2px }
+.icon_zd { background: #4a90e2 }
+
+
+.hot_notice span, .items_txt .intro a, .updateTable .author a, .updateTable .style a, .updateTable .time a, .updateTable th { color: #888 }
+.items_txt .intro a:hover, .rightList .more a:hover, .updateTable .style a:hover, .rightList .on .book_intro .txt:hover { color: #f70 }
+.icon_show:hover, .icon_hide:hover { color: #2972cc }
+.channelChapterlist { min-height: 600px }

src/assets/styles/read.css

@@ -0,0 +1,181 @@
+@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 }
+/* 作者的话 */
+.author_say { margin: 35px auto 10px; width: 90%; min-height: 70px; border-radius: 3px; background: url(../images/author_say.png) no-repeat; border: 1px solid #e3e3e3/*rgba(0,0,0,.1)*/ }
+.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_dz i { width:25px; height:25px; display:inline-block; position:relative; top:4px; margin-right:6px; background:url(../images/icon_readdz.png) no-repeat }
+.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 }

src/assets/styles/user.css

@@ -0,0 +1,137 @@
+@charset "utf-8";
+.updateTable .style a { color:#999 }
+.updateTable .author a { color:#999; cursor:text }
+.bind, .updateTable .style a:hover { color:#f65167 }
+.userBox { /*width: 998px; border: 1px solid #eaeaea;*/ margin:0 auto 50px; background: #fff; border-radius: 6px }
+.channelViewhistory .userBox { margin: 0 auto }
+.user_l { width:350px; float:left; padding:100px 124px }
+.user_l h3 { font-size:23px; font-weight:normal; line-height:1; text-align: center }
+.user_l #LabErr { color:#ff4040; display:block; height:40px; line-height:40px; text-align: center; font-size: 14px }
+.user_l .log_list { width:350px }
+.user_l .s_input { margin-bottom:25px; font-size:14px }
+.s_input { width:348px; height:38px; line-height:38px\9; vertical-align:middle; border:1px solid #ddd; border-radius:2px }
+.icon_name, .icon_key, .icon_code { width:312px; padding-left:36px; background:url(../images/icon_user.png) no-repeat 13px 13px }
+.icon_key { background-position: 13px -51px }
+.icon_code { background-position: 13px -117px; width:200px; float:left }
+.code_pic { height:38px; float:right }
+.btn_phone  { height:40px; width:100px; float:right; cursor:pointer; padding:0; text-align:center; border-radius:2px; background:#dfdfdf }
+.log_code { *padding-bottom:25px }
+.user_l .btn_red { width:100%; font-size:19px; padding:12px }
+.autologin { color:#999; line-height:1; margin-bottom:18px }
+.autologin em { vertical-align:2px; margin-left:4px }
+.user_r { width:259px; margin:80px 0; padding:20px 70px; border-left:1px dotted #e3e3e3; float:right; text-align:center }
+.user_r .tit { font-size:16px; line-height:1; padding: 6px 0 25px }
+.user_r .btn_ora { padding:10px 34px }
+.fast_login { padding:60px 0 0 }
+.fast_list { text-align:center; padding:0.5rem }
+.fast_list li { display:inline-block; *display:inline; zoom:1  }
+.fast_list li .img { width:48px; height:48px; margin:20px 0 5px }
+.fast_list li a:hover { opacity:0.8; filter: alpha(opacity=80); -moz-opacity: 0.8 }
+.fast_list li span { display:block }
+.fast_list .login_qq { margin:0 42px }
+.fast_list .login_wb a { color:#f55c5b }
+.fast_list .login_qq a { color:#51b7ff }
+.fast_list .login_wx a { color:#66d65e }
+.fast_tit { position:relative; overflow:hidden }
+.fast_tit .lines { position:absolute; top:50%; left:0; width:100%; height:1px; line-height:1; background:#eaeaea }
+.fast_tit .title { background:#fff; font-size:16px; padding:3px 14px; position:relative; display:inline-block; z-index:999 }
+/*userinfo*/
+.my_l { width:198px; float:left; font-size: 13px; padding-top: 20px; }
+.my_l li a { display:block; height:42px; line-height:42px; padding-left:62px; border-left:4px solid #fff; background:url(../images/icon_user.png) no-repeat; margin-bottom:5px; color: #666 }
+.my_l li .on { background-color:#fafafa; border-left:2px solid #f80; color:#000; border-radius: 0 2px 2px 0 }
+.my_l .link_1 { background-position:32px -188px }
+.my_l .link_2 { background-position:32px -230px }
+.my_l .link_3 { background-position:32px -272px }
+.my_l .link_4 { background-position:32px -314px }
+.my_l .link_5 { background-position:32px -356px }
+.my_l .link_6 { background-position:32px -397px }
+.my_l .link_7 { background-position:32px -440px }
+.my_l .link_8 { background-position:32px -481px }
+.my_r { width:739px; padding:0 30px 30px; float:right; border-left:1px solid #efefef; min-height:470px }
+.my_info { padding:30px 0 5px }
+.user_big_head { /*width:110px; height:110px; padding:4px; border:1px solid #eaeaea;*/ margin-right:30px; float:left;     width: 80px;
+    height: 80px;
+    border-radius: 50%; }
+.my_r .my_name { font-size:18px; line-height:1; padding:5px 0 12px 0 }
+.my_r .s_input { width:318px; padding:0 10px }
+.my_list li { line-height:28px }
+.my_list li i, .my_list li em.red { margin-right:6px }
+.my_list .binded { color:#999; margin-left:6px }
+.my_list .btn_link { margin-left:12px }
+.mytab_list li { line-height:30px; padding:10px 0; font-size:14px }
+.mytab_list li .tit { width:70px; color: #aaa; text-align:right; display:inline-block; margin-right:18px }
+.mytab_list .user_img { width:48px; height:48px; vertical-align:middle; border-radius:50% }
+.my_bookshelf .title { padding:20px 0 15px; line-height:30px }
+.my_bookshelf h4 { font-size:14px; color:#666 }
+.my_bookshelf h2 { font-size:18px; font-weight:normal }
+.updateTable { width: 739px; color: #999 }
+.updateTable table { width: 100%; margin-bottom:14px }
+.updateTable th, .updateTable td { height: 40px; line-height: 40px; vertical-align: middle; padding-left: 6px; font-weight:normal; text-align:left }
+.updateTable th { background:#f9f9f9; color:#333; border-top:1px solid #eee }
+.updateTable td { height:40px; line-height:40px }
+.updateTable .style { width:80px; padding-left:10px }
+.updateTable .name { width: 178px; padding-right: 10px }
+.updateTable .name a, .updateTable .chapter a { max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.updateTable .chapter { padding-right: 5px }
+.updateTable .chapter a { max-width:220px; float: left }
+.updateTable .author { width: 72px; text-align: left }
+.updateTable .goread { width: 80px; text-align:center }
+.updateTable .time { width: 86px }
+.updateTable .word { width: 64px; padding-right:10px; text-align: right }
+.updateTable .rank { width: 30px; padding-right:10px; text-align: center }
+.updateTable .name a, .updateTable .chapter a, .updateTable .author a { height: 40px; line-height: 40px; display: inline-block; overflow: hidden }
+.updateTable tr:nth-child(2n) td { background:#fafafa }
+.dataTable { width: 739px }
+.dataTable table { width: 100%; margin-bottom:14px; border-collapse:collapse }
+.dataTable th, .dataTable td { height: 40px; line-height: 40px; vertical-align: middle; padding:0 10px; font-weight:normal; text-align:center; border:1px solid #eaeaea }
+.dataTable th { background:#f8f8f8 }
+.nodate { border-top: 1px solid #eaeaea; padding:60px 0 }
+.viewhistoryBox { /*padding: 0 30px 30px; */ padding: 0 20px 10px }
+.viewhistoryBox .updateTable { width:100% }
+/*.btn_gray, .btn_red, .btn_ora { font-size:14px; padding:8px 28px }*/
+.book_tit { height: 48px; line-height:48px; margin: 0 14px; border-bottom: 1px solid #eaeaea; overflow:hidden }
+.book_tit .fl { font-size:14px; color:#999 }
+.book_tit .fl h3 { font-size:18px; color:#333; font-weight:normal; margin-right:5px; display:inline }
+.book_tit .fr { font-size:14px }
+
+.commentBar, .feedback_list { border-top:1px solid #eee; margin-bottom:15px }
+/*.comment_list { padding: 16px 0; border-bottom: 1px solid #eee }
+.comment_list .user_head { width:54px; height:54px; border-radius:50%; float: left; margin-right: 14px }
+.comment_list .li_1 { overflow: hidden }
+.comment_list .user_name { color: #ed4259 }
+.comment_list .li_2 { padding:3px 0; color:#999 }
+.comment_list .li_3, .comment_list .li_4 { margin-left:68px }
+.comment_list .reply { padding-left: 12px }
+.comment_list .num { color: #ed4259; margin: 0 3px }
+.comment_list .li_4 { line-height:34px; padding-top:8px; margin-top:15px; border-top:1px solid #eaeaea }
+.comment_list .li_4 .more { background:#f7f7f7; border-radius:2px; color:#ed4259; text-align:center }*/
+.no_contet { padding:190px 0 40px; text-align:center; color:#999; border-top:1px solid #eee }
+.no_comment { background:url(../images/no_comment.png) no-repeat center 80px }
+
+.comment_list { padding: 20px 0; border-bottom: 1px solid #eee }
+.comment_list:last-child { border: none }
+.comment_list .user_heads { /*width: 54px; height: 54px; float: left;*/ position:relative; margin-right: 20px }
+.comment_list .user_head { width: 50px; height: 50px; border-radius: 50%; background: #f6f6f6 }
+.comment_list .user_heads span { display: block; margin: 0; position: absolute; left: 12px; bottom: 0 }
+.comment_list ul { /*width: 640px;*/ width: 660px; }
+.comment_list .li_0 { font-family: "宋体" }
+.comment_list .li_0 strong { font-size: 14px; color: #f00 }
+.comment_list .li_1 { overflow: hidden }
+.comment_list .user_name { color: #ed4259 }
+.comment_list .li_2 { padding: 6px 0 }
+.comment_list .li_3 { color: #999 }
+.comment_list .reply { padding-left: 12px }
+.comment_list .num { color: #ed4259; margin: 0 3px }
+.comment_list .li_4 { line-height: 34px; padding-top: 8px; margin-top: 15px; border-top: 1px solid #eaeaea }
+.pl_bar li { display: block }
+.pl_bar .name { color: #666; padding-top: 2px; font-size: 14px }
+.pl_bar .dec { font-size: 14px; line-height: 1.8; padding: 12px 0 }
+.pl_bar .other { line-height: 24px; color: #999; font-size: 13px }
+.pl_bar .other a { display: inline-block; color: #999 }
+.pl_bar .reply { padding-left: 22px; background: url(../images/icon_reply.png) no-repeat 0 2px }
+/*.no_comment { padding: 70px 14px 115px; color: #CCCCCC; text-align: center; font-size: 14px; }*/
+.reply_bar {
+    background: #f9f9f9;
+    border: 1px solid #eee; border-radius: 6px;
+    padding: 10px;
+    line-height: 1.8;}

src/components/Header.vue

@@ -0,0 +1,80 @@
+ <template>
+  <div class="header">
+    <div class="topBar" style="display: none">
+      <div class="box_center cf">
+        <div class="top_l">
+          <a href="/" class="on">小说精品屋</a><i class="line">|</i
+          ><a href="/?m=2">手机女生版</a><i class="line">|</i
+          ><a href="/?m=1">手机男生版</a><i class="line">|</i
+          ><a href="/">客户端下载</a>
+        </div>
+        <div class="top_r">
+          <div class="top_nearread">
+            <a
+              href="javascript:void(0);"
+              class="nearread"
+              id="headerUserHistoryBtn"
+              >最近阅读<i class="icon_down"></i
+            ></a>
+            <div
+              class="book_record"
+              style="display: none"
+              id="headerUserHistory"
+            ></div>
+          </div>
+          <span> </span>
+        </div>
+      </div>
+    </div>
+    <div class="topMain">
+      <div class="box_center cf">
+        <a href="/?m=2" class="logo fl"><img :src="logo" alt="小说精品屋" /></a>
+        <div class="searchBar fl">
+          <div class="search cf">
+            <input
+              type="text"
+              placeholder="书名、作者、关键字"
+              class="s_int"
+              name="searchKey"
+              id="searchKey"
+            />
+            <label class="search_btn" id="btnSearch" onclick="searchByK()"
+              ><i class="icon"></i
+            ></label>
+          </div>
+        </div>
+        <div class="bookShelf fr" id="headerUserInfo">
+          <a class="sj_link" href="/user/favorites.html">我的书架</a>
+          <span class="user_link"
+            ><i class="line mr20">|</i
+            ><a href="/user/login.html" class="mr15">登录</a
+            ><a href="/user/register.html">注册</a></span
+          >
+        </div>
+      </div>
+    </div>
+    <div class="mainNav" id="mainNav">
+      <div class="box_center cf">
+        <ul class="nav" id="navModule">
+          <li class="on"><a href="/">首页</a></li>
+          <li><a href="/book/bookclass.html">全部作品</a></li>
+          <li><a href="/book/book_ranking.html">排行榜</a></li>
+          <li class=""><a href="/pay/index.html">充值</a></li>
+          <li><a href="/author/index.html" target="_blank">作家专区</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import logo from "@/assets/images/logo.png";
+export default {
+  name: "Header",
+  setup() {
+    return {
+      logo
+    };
+  },
+};
+</script>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/main.js

@@ -1,4 +1,15 @@
 import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 import App from './App.vue'
+import router from '@/router'
+import '@/assets/styles/base.css'
+import '@/assets/styles/main.css'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+
+app.use(ElementPlus)
+
+app.use(router)
+
+app.mount('#app')

src/router/index.js

@@ -0,0 +1,27 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+
+const router = createRouter({
+  // createWebHistory 路由模式路径不带#号(生产环境下不能直接访问项目，需要 nginx 转发)
+  // createWebHashHistory 路由模式路径带#号
+  history: createWebHashHistory(), 
+  routes: [
+    {
+      path: '/',
+      redirect: '/home'
+    },
+    {
+      path: '/home',
+      name: 'home',
+      component: () => import('@/views/Home')
+	   
+    },
+    {
+      path: '/home',
+      name: 'book',
+      component: () => import('@/views/Home')
+	   
+    }
+  ]
+})
+
+export default router

src/utils/auth.js

@@ -0,0 +1,15 @@
+
+const TokenKey = 'Authorization'
+
+
+export const getToken = () => {
+    localStorage.getItem(TokenKey);
+}
+
+export const setToken = (token) => {
+  return localStorage.setItem(TokenKey, token)
+}
+
+export const removeToken = () =>  {
+  return localStorage.removeItem(TokenKey)
+}

src/utils/index.js

@@ -0,0 +1,27 @@
+
+export const getQueryObject = (url) => {
+  url = url == null ? window.location.href : url
+  const search = url.substring(url.lastIndexOf('?') + 1)
+  const obj = {}
+  const reg = /([^?&=]+)=([^?&=]*)/g
+  search.replace(reg, (rs, $1, $2) => {
+    const name = decodeURIComponent($1)
+    let val = decodeURIComponent($2)
+    val = String(val)
+    obj[name] = val
+    return rs
+  })
+  return obj
+}
+
+export const getQueryString = (name) => {
+  return getQueryObject(window.location.href)[name];
+}
+
+export const getLocal = (name) => {
+  return localStorage.getItem(name)
+}
+
+export const setLocal = (name, value) => {
+  localStorage.setItem(name, value)
+}

src/utils/request.js

@@ -0,0 +1,41 @@
+import axios from 'axios'
+import router from '@/router'
+import { ElMessage } from 'element-plus'
+import {getToken,removeToken, setToken} from '@/utils/auth'
+
+
+
+axios.defaults.baseURL = process.env.VUE_APP_BASE_API_URL
+axios.defaults.timeout = 10000
+axios.defaults.withCredentials = true
+axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
+axios.defaults.headers['Authorization'] = getToken() || ''
+axios.defaults.headers.post['Content-Type'] = 'application/json'
+
+axios.interceptors.response.use(res => {
+  if (typeof res.data !== 'object') {
+    ElMessage.error('服务端异常！')
+    return Promise.reject(res)
+  }
+  if (res.data.code != "00000") {
+    if (res.data.message) {
+      ElMessage.error(res.data.message)
+    }
+    // 登录已过期
+    if (res.data.code == 'A0230') {
+      // 移除 token 
+      removeToken();
+      router.push({ path: '/login' })
+    }
+
+    return Promise.reject(res.data)
+  }
+
+  return res.data
+}, error => {
+  ElMessage.error('网络异常！')
+  console.log(error)
+  Promise.reject(error)
+})
+
+export default axios

vue.config.js

@@ -1,4 +1,20 @@
 const { defineConfig } = require('@vue/cli-service')
+const webpack = require("webpack");
 module.exports = defineConfig({
-  transpileDependencies: true
+  devServer:{
+    // 端口号的配置
+		port:1024  
+	},
+  transpileDependencies: true,
+  lintOnSave: false,
+  configureWebpack: {
+    plugins: [
+        new webpack.ProvidePlugin({
+            $:"jquery",
+            jQuery:"jquery",
+            "windows.jQuery":"jquery"
+        })
+    ]
+}
 })
+

yarn.lock

@@ -951,6 +951,16 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
+"@ctrl/tinycolor@^3.4.1":
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz#75b4c27948c81e88ccd3a8902047bcd797f38d32"
+  integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==
+
+"@element-plus/icons-vue@^1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz#5d2788ea356f1458068e6d400e724ca5f3d29aca"
+  integrity sha512-Iz/nHqdp1sFPmdzRwHkEQQA3lKvoObk8azgABZ81QUOpW9s/lUyQVUSh0tNtEPZXQlKwlSh7SPgoVxzrE0uuVQ==
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.npmmirror.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -966,6 +976,18 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@floating-ui/core@^0.6.2":
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.6.2.tgz#f2813f0e5f3d5ed7af5029e1a082203dadf02b7d"
+  integrity sha512-jktYRmZwmau63adUG3GKOAVCofBXkk55S/zQ94XOorAHhwqFIOFAy1rSp2N0Wp6/tGbe9V3u/ExlGZypyY17rg==
+
+"@floating-ui/dom@^0.4.5":
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.4.5.tgz#2e88d16646119cc67d44683f75ee99840475bbfa"
+  integrity sha512-b+prvQgJt8pieaKYMSJBXHxX/DYwdLsAWxKYqnO5dO2V4oo/TYBZJAUQCVNjTWWsrs6o4VDrNcP9+E70HAhJdw==
+  dependencies:
+    "@floating-ui/core" "^0.6.2"
+
 "@hapi/hoek@^9.0.0":
   version "9.3.0"
   resolved "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
@@ -1061,6 +1083,11 @@
   resolved "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
+"@popperjs/core@npm:@sxzz/popperjs-es@^2.11.6":
+  version "2.11.7"
+  resolved "https://registry.yarnpkg.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz#a7f69e3665d3da9b115f9e71671dae1b97e13671"
+  integrity sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==
+
 "@sideway/address@^4.1.3":
   version "4.1.4"
   resolved "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
@@ -1193,6 +1220,18 @@
   resolved "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
   integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
 
+"@types/lodash-es@^4.17.6":
+  version "4.17.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.6.tgz#c2ed4c8320ffa6f11b43eb89e9eaeec65966a0a0"
+  integrity sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*", "@types/lodash@^4.14.182":
+  version "4.14.182"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
+  integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
+
 "@types/mime@^1":
   version "1.3.2"
   resolved "https://registry.npmmirror.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
@@ -1561,6 +1600,11 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/devtools-api@^6.0.0":
+  version "6.1.4"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz#b4aec2f4b4599e11ba774a50c67fa378c9824e53"
+  integrity sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==
+
 "@vue/reactivity-transform@3.2.33":
   version "3.2.33"
   resolved "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.33.tgz#286063f44ca56150ae9b52f8346a26e5913fa699"
@@ -1625,6 +1669,27 @@
   resolved "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
   integrity sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==
 
+"@vueuse/core@^8.2.6":
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-8.4.2.tgz#e5be73f40394150e6a1b6abd59e5adb7c6bb6c1f"
+  integrity sha512-dUVU96lii1ZdWoNJXauQNt+4QrHz1DKbuW+y6pDR2N10q7rGZJMDU7pQeMcC2XeosX7kMODfaBuqsF03NozzLg==
+  dependencies:
+    "@vueuse/metadata" "8.4.2"
+    "@vueuse/shared" "8.4.2"
+    vue-demi "*"
+
+"@vueuse/metadata@8.4.2":
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-8.4.2.tgz#b33e6b7bd5ca69e3f24ea41b149267118bcd566f"
+  integrity sha512-2BIj++7P0/I5dfMsEe8q7Kw0HqVAjVcyNOd9+G22/ILUC9TVLTeYOuJ1kwa1Gpr+0LWKHc6GqHiLWNL33+exoQ==
+
+"@vueuse/shared@8.4.2":
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-8.4.2.tgz#5900f06ff78bd8b6df4cbf48f8ca82dd6d9747d1"
+  integrity sha512-hILXMEjL8YQhj1LHN/HZ49UThyfk8irTjhele2nW+L3N55ElFUBGB/f4w0rg8EW+/suhqv7kJJPTZzvHCqxlIw==
+  dependencies:
+    vue-demi "*"
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -1917,6 +1982,11 @@ astral-regex@^2.0.0:
   resolved "https://registry.npmmirror.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
+async-validator@^4.0.7:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-4.1.1.tgz#3cd1437faa2de64743f7d56649dd904c946a18fe"
+  integrity sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA==
+
 async@^2.6.2:
   version "2.6.4"
   resolved "https://registry.npmmirror.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
@@ -1924,6 +1994,11 @@ async@^2.6.2:
   dependencies:
     lodash "^4.17.14"
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
+
 at-least-node@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
@@ -1941,6 +2016,14 @@ autoprefixer@^10.2.4:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
+axios@^0.27.2:
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
+  integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
+  dependencies:
+    follow-redirects "^1.14.9"
+    form-data "^4.0.0"
+
 babel-loader@^8.2.2:
   version "8.2.5"
   resolved "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e"
@@ -2313,6 +2396,13 @@ colorette@^2.0.10:
   resolved "https://registry.npmmirror.com/colorette/-/colorette-2.0.16.tgz#713b9af84fdb000139f04546bd4a93f62a5085da"
   integrity sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -2590,6 +2680,11 @@ csstype@^2.6.8:
   resolved "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
   integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
 
+dayjs@^1.11.1:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.2.tgz#fa0f5223ef0d6724b3d8327134890cfe3d72fbe5"
+  integrity sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw==
+
 debug@2.6.9:
   version "2.6.9"
   resolved "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -2648,6 +2743,11 @@ define-properties@^1.1.3:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
+
 depd@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
@@ -2769,6 +2869,27 @@ electron-to-chromium@^1.4.118:
   resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz#186180a45617283f1c012284458510cd99d6787f"
   integrity sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==
 
+element-plus@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/element-plus/-/element-plus-2.2.0.tgz#58467d1efde071c2bc12caa9fb451e515667fc78"
+  integrity sha512-zxmAFEAa1T/n09rR+NozXcWl5CjaFtqoaxhFSafag0dgc90tgEHitDXfegdFAl4ahugdNTqu9aLzngx3VhDAtA==
+  dependencies:
+    "@ctrl/tinycolor" "^3.4.1"
+    "@element-plus/icons-vue" "^1.1.4"
+    "@floating-ui/dom" "^0.4.5"
+    "@popperjs/core" "npm:@sxzz/popperjs-es@^2.11.6"
+    "@types/lodash" "^4.14.182"
+    "@types/lodash-es" "^4.17.6"
+    "@vueuse/core" "^8.2.6"
+    async-validator "^4.0.7"
+    dayjs "^1.11.1"
+    escape-html "^1.0.3"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    lodash-unified "^1.0.2"
+    memoize-one "^6.0.0"
+    normalize-wheel-es "^1.1.2"
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -2835,7 +2956,7 @@ escalade@^3.1.1:
   resolved "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
-escape-html@~1.0.3:
+escape-html@^1.0.3, escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
@@ -3223,11 +3344,20 @@ flatted@^3.1.0:
   resolved "https://registry.npmmirror.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
   integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.14.9:
   version "1.15.0"
   resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.0.tgz#06441868281c86d0dda4ad8bdaead2d02dca89d4"
   integrity sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ==
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -3767,6 +3897,11 @@ joi@^17.4.0:
     "@sideway/formula" "^3.0.0"
     "@sideway/pinpoint" "^2.0.0"
 
+jquery@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
+  integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==
+
 js-message@1.0.7:
   version "1.0.7"
   resolved "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz#fbddd053c7a47021871bb8b2c95397cc17c20e47"
@@ -3914,6 +4049,16 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
+lodash-unified@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/lodash-unified/-/lodash-unified-1.0.2.tgz#bb2694db3533781e5cce984af60cfaea318b83c1"
+  integrity sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.npmmirror.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -4034,6 +4179,11 @@ memfs@^3.4.1:
   dependencies:
     fs-monkey "1.0.3"
 
+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
+
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -4074,7 +4224,7 @@ mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
   resolved "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
-mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
+mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
   version "2.1.35"
   resolved "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
@@ -4256,6 +4406,11 @@ normalize-url@^6.0.1:
   resolved "https://registry.npmmirror.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
+normalize-wheel-es@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-wheel-es/-/normalize-wheel-es-1.1.2.tgz#285e43676a62d687bf145e33452ea6be435162d0"
+  integrity sha512-scX83plWJXYH1J4+BhAuIHadROzxX0UBF3+HuZNY2Ks8BciE7tSTQ+5JhTsvzjaO0/EJdm4JBGrfObKxFf3Png==
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -5745,6 +5900,11 @@ vary@~1.1.2:
   resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
+vue-demi@*:
+  version "0.12.5"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.5.tgz#8eeed566a7d86eb090209a11723f887d28aeb2d1"
+  integrity sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==
+
 vue-eslint-parser@^8.0.1:
   version "8.3.0"
   resolved "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz#5d31129a1b3dd89c0069ca0a1c88f970c360bd0d"
@@ -5772,6 +5932,13 @@ vue-loader@^17.0.0:
     hash-sum "^2.0.0"
     loader-utils "^2.0.0"
 
+vue-router@^4.0.15:
+  version "4.0.15"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.15.tgz#b4a0661efe197f8c724e0f233308f8776e2c3667"
+  integrity sha512-xa+pIN9ZqORdIW1MkN2+d9Ui2pCM1b/UMgwYUCZOiFYHAvz/slKKBDha8DLrh5aCG/RibtrpyhKjKOZ85tYyWg==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0"
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
   version "4.1.3"
   resolved "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"