更新样式

src/assets/styles/element-variables.scss

@@ -30,3 +30,20 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 :export {
   theme: $--color-primary;
 }
+.PageHeader{
+  width:53vw;
+  height:70px;
+  margin-left:20vw;
+  margin-top:50px;
+  border-radius: 6px;
+  background-color: #ffffff;
+  box-shadow: -10px 5px 10px 5px #eaeaea
+}
+.PageContent{
+  width:53vw;
+  margin-left:20vw;
+  margin-top:20px;
+  border-radius: 6px;
+  background-color: #ffffff;
+  box-shadow: -10px 5px 10px 5px #eaeaea
+}

src/components/Header.vue

@@ -2,12 +2,11 @@
     <div class="header">
         <div class="logo-all">
             <img class="logo" src="../assets/logo/logo.png">
-            <span style="cursor: pointer;margin-left: 5px;font-size: 150%;font-weight: bold;font-family:'楷体';">HelloGithub</span>
+            <span class="HeaderWord">HelloGithub</span>
         </div>
 
         <el-menu :default-active="$route.path" class="el-menu" mode="horizontal"
                  active-text-color="#42b983"
-                 style="width: 30vw;"
                  router>
             <el-menu-item class="menu-item" index="/home"><i class="el-icon-s-home" style="color: #13ce66"></i>首 页</el-menu-item>
             <el-menu-item class="menu-item" index="/monthly"><i class="el-icon-s-claim" style="color: #00b2ff"></i>月 刊</el-menu-item>
@@ -15,8 +14,8 @@
             </el-menu-item>
             <el-menu-item class="menu-item" index="/paper"><i class="el-icon-s-management" style="color: #5b6bc9"></i>文 章</el-menu-item>
         </el-menu>
-        <SearchInput></SearchInput>
+        <SearchInput class="HeaderInput"></SearchInput>
-        <el-button type="success" round icon="el-icon-thumb">提交项目</el-button>
+        <el-button class="HeaderSubmitBtn" type="success" round icon="el-icon-thumb">提交项目</el-button>
     </div>
 </template>
 
@@ -33,30 +32,89 @@ export default {
 </script>
 
 <style scoped>
-.logo-all {
+/*适用于小屏幕，手持设备*/
-    height: 60px;
+/*@media(orientation: portrait){*/
-    width: 12vw;
+/*    .logo-all {*/
-    display: flex;
+/*        height: 20px;*/
-    align-items: center;
+/*        width: 10vw;*/
-}
+/*        display: flex;*/
-.logo {
+/*        align-items: center;*/
-    width: 30px;
+/*        background-color: #ff4949;*/
-    height: 30px;
+/*        margin-left:1vw;*/
-    border-radius: 50px;
+/*    }*/
-}
+/*    .logo {*/
-.header {
+/*        width: 20px;*/
-    display: flex;
+/*        height: 20px;*/
-    flex-direction: row;
+/*        border-radius: 6px;*/
-    align-items: center;
+/*    }*/
-    justify-content: space-evenly;
+/*    .HeaderWord{*/
-}
+/*        cursor: pointer;*/
-.el-menu {
+/*        margin-left: 5px;*/
-    font-weight: bold;
+/*        font-size: 80%;*/
-    font-size: 18px;
+/*        font-weight: bold;*/
-    display: flex;
+/*        font-family:'楷体';*/
-    justify-content: space-evenly;
+/*    }*/
-}
+/*    .header {*/
-.menu-item {
+/*        display: flex;*/
-    width: 6vw;
+/*        flex-direction: row;*/
+/*        align-items: center;*/
+/*        !*justify-content: space-evenly;*!*/
+/*    }*/
+/*    .el-menu {*/
+/*        font-weight: bold;*/
+/*        font-size: 5px;*/
+/*        display: flex;*/
+/*        justify-content: space-evenly;*/
+/*        width: 10vw;*/
+/*    }*/
+/*    .menu-item {*/
+/*        width: 2vw;*/
+/*        font-size:2px;*/
+/*    }*/
+/*    .HeaderInput{*/
+/*        width:15vw;*/
+/*        font-size:1px;*/
+/*    }*/
+/*    .HeaderSubmitBtn{*/
+
+/*    }*/
+/*}*/
+
+@media(orientation: landscape){
+    .logo-all {
+        height: 60px;
+        width: 12vw;
+        display: flex;
+        align-items: center;
+    }
+    .logo {
+        width: 30px;
+        height: 30px;
+        border-radius: 50px;
+    }
+    .HeaderWord{
+        cursor: pointer;
+        margin-left: 5px;
+        font-size: 150%;
+        font-weight: bold;
+        font-family:'楷体';
+    }
+    .header {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-evenly;
+    }
+    .el-menu {
+        font-weight: bold;
+        font-size: 18px;
+        display: flex;
+        justify-content: space-evenly;
+        width: 30vw;
+    }
+    .menu-item {
+        width: 6vw;
+    }
 }
+
 </style>

src/components/Monthly.vue

@@ -1,15 +1,111 @@
+
 <template>
-<div>
+<!--<div>-->
-    月刊
+<!--    月刊-->
-</div>
+<!--</div>-->
+    <div>
+        <div class="PageHeader">
+            <br/>
+            <el-page-header  @back="goBack" style="justify-content: center;">
+                <div slot="title" style="font-size:23px;font-weight: 600;"></div>
+                <div slot="content" style="font-size:23px;font-weight: 600;">
+                    HelloGitHub 月刊
+                </div>
+            </el-page-header>
+        </div>
+        <div class="PageContent">
+            <div style="width:50vw;margin-left:20px">
+                <el-carousel :interval="4000" type="card" height="250px">
+                    <el-carousel-item v-for="item in 6" :key="item">
+                        <h3 class="medium">{{ item }}</h3>
+                    </el-carousel-item>
+                </el-carousel>
+            </div>
+
+            <div style="margin-top:30px;width:50vw;margin-left:20px">
+                <el-row :gutter="24">
+                    <el-col :span="24">
+                        <el-card shadow="always" style="font-size: 18px;
+                        text-align:left;background-color: #fddbb8;
+                        border-color: rgba(255,243,232,0.89);border-radius:10px">
+                            <span style="font-size:20px;font-weight:550">「HelloGitHub 月刊」</span>
+                            分享 GitHub 上有趣、入门级的开源项目，每月 28 号发布最新一期。内容包
+                            括开发利器、开源书籍、教程、企业级项目等， 让你发现编程的乐趣、爱上开源！
+                        </el-card>
+                    </el-col>
+                </el-row>
+            </div>
+
+            <div style="margin-top:30px;width:50vw;margin-left:20px">
+                <el-row :gutter="24">
+                    <el-col :span="8">
+                        <el-card shadow="always" class="card_style">
+                            <span style="font-size:20px;font-weight:520;color: #676767">已发布</span>
+                        </el-card>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-card shadow="always" class="card_style">
+                            <span style="font-size:20px;font-weight:550">「HelloGitHub 月刊」</span>
+                            分享 GitHub 上有趣、入门级的开源项目，每月 28 号发布最新一期。内容包
+                            括开发利器、开源书籍、教程、企业级项目等， 让你发现编程的乐趣、爱上开源！
+                        </el-card>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-card shadow="always" style="font-size: 18px;
+                        text-align:left;background-color: #fddbb8;border-color: rgba(255,243,232,0.89)">
+                            <span style="font-size:20px;font-weight:550">「HelloGitHub 月刊」</span>
+                            分享 GitHub 上有趣、入门级的开源项目，每月 28 号发布最新一期。内容包
+                            括开发利器、开源书籍、教程、企业级项目等， 让你发现编程的乐趣、爱上开源！
+                        </el-card>
+                    </el-col>
+                </el-row>
+            </div>
+
+        </div>
+    </div>
+
 </template>
 
 <script>
 export default {
-    name: "MonthlyComponent"
+    name: "MonthlyComponent",
+    methods: {
+        goBack() {
+            window.history.go(-1);
+        }
+    }
 }
 </script>
+<style scoped lang="scss">
+::v-deep .el-page-header__left{
+    left:-250px;
+}
+::v-deep .el-icon-back{
+    font-size:20px;
+}
 
-<style scoped>
+.el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 200px;
+    margin: 0;
+}
 
+.el-carousel__item:nth-child(2n) {
+    background-size: cover;
+    background-image: url("../../src/assets/images/美人.jpg");
+}
+
+.el-carousel__item:nth-child(2n+1) {
+    background-size: cover;
+    background-image: url("../../src/assets/images/美人.jpg");
+}
+.card_style{
+    font-size: 18px;
+    background-color: #fddbb8;
+    border-color: rgba(255,243,232,0.89);
+    text-align: center;
+    border-radius:10px;
+}
 </style>

src/components/Paper.vue

@@ -1,7 +1,13 @@
 <template>
-  <div>
+    <div class="PageHeader">
-      文章
+        <br/>
-  </div>
+        <el-page-header  @back="goBack" style="justify-content: center;">
+            <div slot="title" style="font-size:23px;font-weight: 600;"></div>
+            <div slot="content" style="font-size:23px;font-weight: 600;">
+                HelloGitHub 文章
+            </div>
+        </el-page-header>
+    </div>
 </template>
 
 <script>
@@ -10,6 +16,8 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-
+::v-deep .el-page-header__left{
+  left:-250px;
+}
 </style>

src/components/Ranking.vue

@@ -1,7 +1,13 @@
 <template>
-  <div>
+    <div class="PageHeader">
-      榜单
+        <br/>
-  </div>
+        <el-page-header  @back="goBack" style="justify-content: center;">
+            <div slot="title" style="font-size:23px;font-weight: 600;"></div>
+            <div slot="content" style="font-size:23px;font-weight: 600;">
+                HelloGitHub 榜单
+            </div>
+        </el-page-header>
+    </div>
 </template>
 
 <script>
@@ -10,6 +16,8 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-
+::v-deep .el-page-header__left{
+  left:-250px;
+}
 </style>