修改首页调整布局

BoBoooooo · Dec 27, 2018 · 76deb1d · 76deb1d
1 parent 984bd25
commit 76deb1d
Show file tree

Hide file tree

Showing 8 changed files with 237 additions and 176 deletions.
diff --git a/src/router/index.js b/src/router/index.js
@@ -107,6 +107,14 @@ export const asyncRouterMap = [{
       title: '热门书籍',
     },
   },
+  {
+    path: 'zhihu',
+    name: 'zhihu',
+    component: () => import('@/views/DouBan/zhihu'),
+    meta: {
+      title: '知乎日报',
+    },
+  },
 
   ],
 },

diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
@@ -94,14 +94,14 @@
       }
     }
   }
-  .sidebar-container .nest-menu .el-submenu>.el-submenu__title,
-  .sidebar-container .el-submenu .el-menu-item {
-    min-width: 180px !important;
-    background-color: $subMenuBg !important;
-    &:hover {
-      background-color: $menuHover !important;
-    }
-  }
+  // .sidebar-container .nest-menu .el-submenu>.el-submenu__title,
+  // .sidebar-container .el-submenu .el-menu-item {
+  //   min-width: 180px !important;
+  //   background-color: $subMenuBg !important;
+  //   &:hover {
+  //     background-color: $menuHover !important;
+  //   }
+  // }
   .el-menu--collapse .el-menu .el-submenu {
     min-width: 180px !important;
   }

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -8,6 +8,6 @@ $yellow:#FEC171;
 $panGreen: #30B08F;
 
 //sidebar
-$menuBg:#304156;
-$subMenuBg:#1f2d3d;
+$menuBg:#292421;
+$subMenuBg:#292421;
 $menuHover:#001528;
diff --git a/src/views/DouBan/zhihu.vue b/src/views/DouBan/zhihu.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="dashboard-container">
+    <github-corner />
+
+    <el-row>
+      <el-col
+        :span="6"
+        :offset="1">
+        <el-card body-style="{ padding: '15px 0px',height:'250px'}">
+          <img
+            src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/100/h/100"
+            style="border-radius:80px">
+          <br><br>
+          <div class="dashboard-text">Anshare_Vue_Admin</div>
+          <div class="bottom clearfix">
+            <span style="display:block;">{{ currentDate }}</span>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col
+        :span="6"
+        :offset="2">
+        <el-card :body-style="{ padding: '15px 0px',height:'250px'}">
+          <img
+            src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/100/h/100"
+            style="border-radius:80px">
+
+          <div class="dashboard-text">
+            <span style="display:block;">Author:BoBo</span>
+            <span style="display:block;">Follow me on GitHub</span>
+
+          </div>
+
+        </el-card>
+      </el-col>
+
+      <el-col
+        :span="6"
+        :offset="2">
+
+        <el-card
+          :body-style="{ padding: '15px 15px',height:'250px'}"
+          style="overflow:auto">
+          <span
+            v-for="(item,index) in history"
+            :key="index"
+            style="text-align:left;padding:5px;display:block;margin-top:2px">
+            {{ item }}
+          </span>
+        </el-card>
+        <el-input
+          v-model="request"
+          placeholder="快来和我聊天吧！"
+          style="padding-top:10px"
+          @keyup.enter.native="chat"
+        >
+          <i
+            slot="suffix"
+            class="el-input__icon el-icon-circle-check-outline" />
+        </el-input>
+      </el-col>
+    </el-row>
+
+    <el-row>
+      <h3>知乎日报</h3>
+      <el-col
+        v-for="(item,index) in report"
+        :key="index"
+        :span="6"
+        :offset="index%3===0?1:2"
+        style="margin-top:5px">
+        <el-card :body-style="{ padding: '15px 0px',height:'250px'}">
+
+          <div
+            class="dashboard-text"
+            style="padding-top:0px">
+            <img :src="getImage(item.thumbnail)">
+            <a
+              :href="'http:\/\/daily.zhihu.com\/story\/'+item.news_id"
+              target="_blank"><span style="display:block;font-size:14px">{{ item.title }}</span></a>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+import GithubCorner from '@/components/GithubCorner'
+import { mapGetters } from 'vuex'
+import { parseTime } from '@/utils/index'
+import axios from 'axios'
+
+export default {
+  name: 'DashBoard',
+  components: { GithubCorner },
+  data() {
+    return {
+      currentDate: parseTime(new Date()),
+      weather: null,
+      loading: false,
+      report: null,
+      music: null,
+      request: '',
+      msg: '',
+      history: [],
+    }
+  },
+  computed: {
+    ...mapGetters(['name', 'roles', 'AllRouters']),
+  },
+  created() {
+    this.GetNowTime()
+    this.GetReport()
+  },
+  methods: {
+    getImage(url) {
+      if (url !== undefined) {
+        return url.replace('https://', 'https://images.weserv.nl/?url=')
+      }
+    },
+    GetNowTime() {
+      setInterval(() => {
+        this.currentDate = parseTime(new Date())
+      }, 1000)
+    },
+    chat() {
+      this.history.push(this.request)
+      axios
+        .post('/Chat', {
+          key: '050b4fa163454f13bf3372cb1715f5d4',
+          info: this.request,
+          userid: 'a123456',
+        })
+        .then((response) => {
+          console.log(response)
+          this.request = ''
+          this.history.push(response.data.text)
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    GetReport() {
+      axios.get('/report/hot').then((response) => {
+        console.log(response)
+        this.report = response.data.recent
+      })
+    },
+    GetMusic() {
+      axios.get('/music?id=3778678&limit=30').then((response) => {
+        this.music = response.data
+        console.log(this.music)
+      })
+    },
+  },
+
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard {
+  &-title {
+    text-align: center;
+    font-family: inherit;
+    font-size: 40px;
+  }
+  &-container {
+    text-align: center;
+
+    margin: 30px;
+  }
+  &-text {
+    text-align: center;
+    margin: 0 30px 30px 30px;
+
+    font-size: 1em;
+    line-height: 30px;
+    span {
+      display: block;
+      padding-top: 10px;
+      color:black;
+    }
+  }
+}
+</style>