Style OK

terwer · Mar 23, 2019 · 64020dc · 64020dc
1 parent bdbb91d
commit 64020dc
Show file tree

Hide file tree

Showing 12 changed files with 182 additions and 39 deletions.
diff --git a/jvue-front/components/themes/dark/Aside.vue b/jvue-front/components/themes/dark/Aside.vue
@@ -12,9 +12,20 @@
           </el-col>
           <el-col :xs="24" :md="post.thumbnails.length > 0 ? 18 : 24">
             <div>
-              <h2 :class="post.thumbnails.length > 0 ? 'has-image-title' : ''">
-                {{ post.title === "" ? "暂无标题" : post.title }}
-              </h2>
+              <nuxt-link
+                class="aside-link-dark"
+                :to="
+                  post.name === ''
+                    ? '/post-dark/' + post.id + '.html'
+                    : '/post-dark/' + post.name + '.html'
+                "
+              >
+                <h2
+                  :class="post.thumbnails.length > 0 ? 'has-image-title' : ''"
+                >
+                  {{ post.title === "" ? "暂无标题" : post.title }}
+                </h2>
+              </nuxt-link>
             </div>
           </el-col>
         </el-row>

diff --git a/jvue-front/components/themes/dark/PostList.vue b/jvue-front/components/themes/dark/PostList.vue
@@ -11,8 +11,16 @@
             <img :src="post.thumbnails[0]" class="image" alt="image" />
           </el-col>
           <el-col :xs="24" :md="post.thumbnails.length > 0 ? 18 : 24">
-            <div>
-              <h2>{{ post.title === "" ? "暂无标题" : post.title }}</h2>
+            <div class="post-list-title-dark">
+              <nuxt-link
+                :to="
+                  post.name === ''
+                    ? '/post-dark/' + post.id + '.html'
+                    : '/post-dark/' + post.name + '.html'
+                "
+              >
+                <h2>{{ post.title === "" ? "暂无标题" : post.title }}</h2>
+              </nuxt-link>
               <div class="bottom clearfix">
                 <div class="page desc">
                   {{ post.desc === "" ? "暂无简介" : post.desc }}
@@ -39,7 +47,9 @@
                     : '/post-dark/' + post.name + '.html'
                 "
               >
-                <el-button type="text" class="read-more">查看全文</el-button>
+                <el-button type="text" class="read-more-dark"
+                  >查看全文</el-button
+                >
               </nuxt-link>
             </div>
           </el-col>
@@ -92,13 +102,17 @@ export default {
   line-height: 12px;
 }
 
-.read-more {
+.read-more-dark {
   padding: 0;
   margin-top: 15px;
   float: left;
   color: #e78c6c;
 }
 
+.read-more-dark:hover {
+  color: #ffcb6b;
+}
+
 .image {
   width: 100%;
   max-height: 150px;

diff --git a/jvue-front/components/themes/default/Aside.vue b/jvue-front/components/themes/default/Aside.vue
@@ -12,9 +12,20 @@
           </el-col>
           <el-col :xs="24" :md="post.thumbnails.length > 0 ? 18 : 24">
             <div>
-              <h2 :class="post.thumbnails.length > 0 ? 'has-image-title' : ''">
-                {{ post.title === "" ? "暂无标题" : post.title }}
-              </h2>
+              <nuxt-link
+                class="aside-link"
+                :to="
+                  post.name === ''
+                    ? '/post-dark/' + post.id + '.html'
+                    : '/post-dark/' + post.name + '.html'
+                "
+              >
+                <h2
+                  :class="post.thumbnails.length > 0 ? 'has-image-title' : ''"
+                >
+                  {{ post.title === "" ? "暂无标题" : post.title }}
+                </h2>
+              </nuxt-link>
             </div>
           </el-col>
         </el-row>

diff --git a/jvue-front/components/themes/default/PostList.vue b/jvue-front/components/themes/default/PostList.vue
@@ -11,8 +11,16 @@
             <img :src="post.thumbnails[0]" class="image" alt="image" />
           </el-col>
           <el-col :xs="24" :md="post.thumbnails.length > 0 ? 18 : 24">
-            <div>
-              <h2>{{ post.title === "" ? "暂无标题" : post.title }}</h2>
+            <div class="post-list-title">
+              <nuxt-link
+                :to="
+                  post.name === ''
+                    ? '/post/' + post.id + '.html'
+                    : '/post/' + post.name + '.html'
+                "
+              >
+                <h2>{{ post.title === "" ? "暂无标题" : post.title }}</h2>
+              </nuxt-link>
               <div class="bottom clearfix">
                 <div class="page">
                   {{ post.desc === "" ? "暂无简介" : post.desc }}
@@ -39,7 +47,7 @@
                     : '/post/' + post.name + '.html'
                 "
               >
-                <el-button type="text" class=".read-more">查看全文</el-button>
+                <el-button type="text" class="read-more">查看全文</el-button>
               </nuxt-link>
             </div>
           </el-col>
@@ -92,6 +100,10 @@ export default {
   float: left;
 }
 
+.read-more:hover {
+  color: #212121;
+}
+
 .image {
   width: 100%;
   max-height: 150px;

diff --git a/jvue-front/pages/about-dark.vue b/jvue-front/pages/about-dark.vue
@@ -1,21 +1,21 @@
 <template>
   <el-container>
-    <el-main>
+    <el-main class="el-container-dark">
       <el-row>
         <el-col :xs="0" :md="2">&nbsp;</el-col>
         <el-col :xs="24" :md="20">
-          <el-main>
+          <el-main class="el-main-dark">
             <el-container>
-              <el-main>
+              <el-main class="el-main-dark">
                 <el-container>
-                  <el-header>
+                  <el-header class="el-header-dark">
                     <HeaderTime />
                   </el-header>
-                  <el-header>
+                  <el-header class="el-header-dark">
                     <Header />
                   </el-header>
-                  <el-main>
-                    <div class="about">
+                  <el-main class="el-main-dark">
+                    <div class="about about-dark">
                       <div class="visit">
                         谢谢您，您是第
                         <img
@@ -103,9 +103,9 @@ export default {
 };
 </script>
 
-<style>
-@import "./dark.css";
+<style lang="scss">
 @import "./common.css";
+@import "./dark.css";
 </style>
 
 <style lang="scss" scoped>

diff --git a/jvue-front/pages/about.vue b/jvue-front/pages/about.vue
@@ -104,8 +104,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "./common.css";
 @import "./default.css";
+</style>
 
+<style lang="scss" scoped>
 .visit {
   font-size: 24px;
 }

diff --git a/jvue-front/pages/dark.css b/jvue-front/pages/dark.css
@@ -48,3 +48,30 @@
     padding: 11.5px 20px !important;
   }
 }
+.about-dark{
+  border: solid 1px #f3f3f3;
+  border-radius: 4px;
+  padding: 10px;
+}
+.post-dark{
+  border: solid 1px #f3f3f3;
+  border-radius: 4px;
+  padding: 10px;
+  margin: 15px;
+}
+.post-dark .el-breadcrumb__inner a,
+.post-dark .el-breadcrumb__inner.is-link {
+  color: #ffcb6b;
+}
+.post-list-title-dark h2{
+  color: #c792ea;
+}
+.post-list-title-dark h2:hover{
+  color: #ffcb6b;
+}
+.aside-link-dark h2{
+  color: #c792ea;
+}
+.aside-link-dark h2:hover{
+  color: #ffcb6b;
+}
diff --git a/jvue-front/pages/default.css b/jvue-front/pages/default.css
@@ -11,4 +11,16 @@
  * 自定义默认主题
  * css名称必须有default关键字
  */
+.post-list-title h2{
+  color: #409EFF;
+}
+.post-list-title h2:hover{
+  color: #000000;
+}
+.aside-link h2{
+  color: #409EFF;
+}
+.aside-link h2:hover{
+  color: #000000;
+}
 
diff --git a/jvue-front/pages/index-default.vue b/jvue-front/pages/index-default.vue
@@ -77,7 +77,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "./common.css";
 @import "./default.css";
 </style>
diff --git a/jvue-front/pages/post-dark/_id.vue b/jvue-front/pages/post-dark/_id.vue
@@ -1,20 +1,20 @@
 <template>
   <el-container>
-    <el-main>
+    <el-main class="el-container-dark">
       <el-row>
         <el-col :xs="0" :md="2">&nbsp;</el-col>
         <el-col :xs="24" :md="20">
-          <el-main>
+          <el-main class="el-main-dark">
             <el-container>
-              <el-main>
+              <el-main class="el-main-dark">
                 <el-container>
-                  <el-header>
+                  <el-header class="el-header-dark">
                     <HeaderTime />
                   </el-header>
-                  <el-header>
+                  <el-header class="el-header-dark">
                     <Header />
                   </el-header>
-                  <el-main>
+                  <el-main class="el-main-dark">
                     <div id="post" class="post-dark">
                       <!-- 导航 -->
                       <el-breadcrumb separator="/">
@@ -29,7 +29,7 @@
 
                       <!-- 文章标题 -->
                       <div id="postTitle">
-                        <router-link
+                        <nuxt-link
                           :to="
                             postObj.name === ''
                               ? '/post-dark/' + postObj.id + '.html'
@@ -39,7 +39,7 @@
                           <h1>
                             {{ postObj.title }}
                           </h1>
-                        </router-link>
+                        </nuxt-link>
                       </div>
 
                       <!-- 文章详情 -->
@@ -165,6 +165,56 @@ export default {
 @import "../common.css";
 @import "../dark.css";
 @import "../../plugins/lib/vue-hljs/vs2015.css";
+.post-dark {
+  margin: 20px;
+  p {
+    color: #f3f3f3;
+  }
+}
+.post-dark #postTitle {
+  a {
+    color: #000;
+    line-height: 1.5;
+    text-decoration: none;
+  }
+  a:hover {
+    color: red;
+  }
+  h1 {
+    color: #f3f3f3;
+    border-bottom: 1px solid #ddd;
+    font-size: 14px;
+    font-weight: bold;
+    margin: 20px 0 10px;
+    padding-bottom: 5px;
+  }
+  h1:hover {
+    color: #ffcb6b;
+  }
+}
+
+.post-dark #postContent {
+  h1 {
+    color: #c792ea;
+    font-size: 28px;
+    font-weight: bold;
+    line-height: 1.5;
+    margin: 10px 0;
+  }
+  h2 {
+    color: #ffcb6b;
+    font-size: 21px;
+    font-weight: bold;
+    line-height: 1.5;
+    margin: 10px 0;
+  }
+  p {
+    // 图片自适应
+    img {
+      max-width: 100% !important;
+    }
+  }
+}
 </style>
 
 <style lang="scss" scoped></style>
diff --git a/jvue-front/pages/post/_id.vue b/jvue-front/pages/post/_id.vue
@@ -29,7 +29,7 @@
 
                       <!-- 文章标题 -->
                       <div id="postTitle">
-                        <router-link
+                        <nuxt-link
                           :to="
                             postObj.name === ''
                               ? '/post/' + postObj.id + '.html'
@@ -39,7 +39,7 @@
                           <h1>
                             {{ postObj.title }}
                           </h1>
-                        </router-link>
+                        </nuxt-link>
                       </div>
 
                       <!-- 文章详情 -->

diff --git a/jvue-front/plugins/lib/vue-hljs/vs2015.css b/jvue-front/plugins/lib/vue-hljs/vs2015.css
@@ -1,10 +1,13 @@
 .hljs {
-    font-family: "dejavu sans mono","Fira Code",Menlo,Monaco,Consolas,"Courier New",monospace;
-    display: block;
-    overflow-x: auto;
-    padding: .5em;
-    background: #212121;
-    color: #DCDCDC
+  font-family: "dejavu sans mono","Fira Code",Menlo,Monaco,Consolas,"Courier New",monospace;
+  display: block;
+  overflow-x: auto;
+  padding: .5em;
+  background: #181818;
+  color: #DCDCDC;
+  border: solid 1px #181818;
+  border-radius: 5px;
+  line-height: 1.6;
 }
 
 .hljs-keyword, .hljs-literal, .hljs-symbol, .hljs-name {