首页基本框架

package.json

@@ -9,16 +9,21 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
-    "vue": "^2.6.14"
+    "element-ui": "^2.15.13",
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "node-sass": "^9.0.0",
+    "sass-loader": "^13.3.2",
     "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {

src/App.vue

@@ -1,21 +1,13 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+<!--    <nav>-->
+<!--      <router-link to="/">Home</router-link> |-->
+<!--      <router-link to="/about">About</router-link>-->
+<!--    </nav>-->
+    <router-view/>
   </div>
 </template>
 
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
-</script>
-
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -23,6 +15,18 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+}
+
+nav {
+  padding: 30px;
+}
+
+nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+nav a.router-link-exact-active {
+  color: #42b983;
 }
 </style>

src/assets/styles/element-ui.scss

@@ -0,0 +1,92 @@
+// cover some element-ui styles
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+.cell {
+  .el-tag {
+    margin-right: 0px;
+  }
+}
+
+.small-padding {
+  .cell {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+.fixed-width {
+  .el-button--mini {
+    padding: 7px 10px;
+    width: 60px;
+  }
+}
+
+.status-col {
+  .cell {
+    padding: 0 10px;
+    text-align: center;
+
+    .el-tag {
+      margin-right: 0px;
+    }
+  }
+}
+
+// to fixed https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+// refine element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+// dropdown
+.el-dropdown-menu {
+  a {
+    display: block
+  }
+}
+
+// fix date-picker ui bug in filter-item
+.el-range-editor.el-input__inner {
+  display: inline-flex !important;
+}
+
+// to fix el-date-picker css style
+.el-range-separator {
+  box-sizing: content-box;
+}
+
+.el-menu--collapse
+  > div
+  > .el-submenu
+  > .el-submenu__title
+  .el-submenu__icon-arrow {
+  display: none;
+}

src/assets/styles/element-variables.scss

@@ -0,0 +1,32 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #59A3A4;
+$--color-success: #13ce66;
+$--color-warning: #ffba00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+
+// $--border-color-light: #dfe4ed;
+$--border-color-light: #D0E0DB;
+$--border-color-lighter:#D0E0DB;
+
+$--table-border: 1px solid #D0E0DB;
+
+/* icon font path, required */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}

src/components/SearchInput.vue

@@ -0,0 +1,184 @@
+<template>
+    <div class="search-item">
+        <el-popover
+                placement="bottom"
+                width="475"
+                ref="popover"
+                trigger="focus"
+                :visible-arrow="false"
+                style="padding-top: 0"
+                v-model="visible">
+            <div class="search-content">
+                <div class="search-his" v-show="historySearch.length > 0">
+                    <div>
+                        <span class="title">搜索历史</span>
+                        <span class="clear" @click="clearHistory"><i class="el-icon-circle-close"></i>清空</span>
+                    </div>
+                    <el-tag
+                            v-for="tag in historySearch"
+                            :key="tag.name"
+                            size="small"
+                            closable
+                            style="margin-right: 10px; margin-top: 10px; cursor: pointer"
+                            @click="handleSearch(tag.name)"
+                            :type="tag.type">
+                        {{ tag.name }}
+                    </el-tag>
+                </div>
+
+                <div :class="'search-hot ' + (historySearch.length > 0 ? 'mt' : '') ">
+                    <span class="title">热门搜索</span>
+                    <ul class="hot-list">
+                        <li v-for="(item, index) in items" :key="index" class="hot-item">
+              <span v-if="index < 3" class="top">
+                <i class="iconvs vs-hot"></i>
+              </span>
+                            <span v-else>
+                {{ index + 1 }}
+              </span>
+                            <span @click="handleSearch(item)">{{ item }}</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </el-popover>
+        <el-input
+                size="medium"
+                :placeholder="tipsWord"
+                style="width: 500px"
+                clearable
+                v-popover:popover
+                @keyup.enter.native="searchRequest"
+                v-model="search">
+            <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="searchRequest"></i>
+        </el-input>
+    </div>
+</template>
+
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            isMouseOver: false,
+            search: '',
+            tipsWord: '',
+            historySearch: [
+                {name: '标签一66666', type: 'info'},
+                {name: '标签二无敌无敌', type: 'info'},
+                {name: '标签三66', type: 'info'},
+                {name: '标签四1', type: 'info'},
+                {name: '标签四2', type: 'info'},
+                {name: '标签四3', type: 'info'},
+                {name: '标签四4', type: 'info'},
+                {name: '标签五', type: 'danger'}
+            ],
+            items: [
+                '重生之我是都市霸主',
+                '热搜',
+                '热搜重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主',
+                '热搜',
+                '热搜',
+                '热搜',
+                '热搜',
+                '热搜',
+                '热搜',
+                '热搜'
+            ]
+        }
+    },
+    methods: {
+        handleSearch(word) {
+            this.search = word
+            this.searchRequest()
+        },
+        clearHistory() {
+            this.historySearch = []
+        },
+        searchRequest() {
+            const params = {
+                word: this.search || this.tipsWord
+            }
+            const queryString = new URLSearchParams(params).toString();
+            const url = `${window.location.origin}/video/search?${queryString}`;
+            window.open(url, '_blank');
+        }
+    },
+    mounted() {
+        this.tipsWord = this.items[0]
+    }
+};
+</script>
+
+<style scoped>
+.search-item ::v-deep .el-input .el-input__inner {
+    border-radius: 8px !important;
+}
+
+.search-content span.title {
+    display: inline-block;
+    font-size: 15px;
+    font-weight: bold;
+}
+
+.search-content .search-his span.clear {
+    float: right;
+    cursor: pointer;
+}
+
+.search-content .search-his span.clear:hover {
+    color: #00aeec;
+}
+
+.search-content .mt {
+    margin-top: 10px;
+}
+
+.search-content .search-hot {
+    width: 100%;
+}
+
+.search-content .search-hot ul.hot-list {
+    width: 100%;
+    display: flex;
+    padding: 0;
+    flex-wrap: wrap;
+    margin-top: 5px;
+    list-style: none;
+}
+
+.search-content .search-hot ul.hot-list li.hot-item {
+    width: 50%;
+    height: 30px;
+    font-size: 15px;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+}
+
+.search-content .search-hot ul.hot-list li.hot-item span:first-child {
+    width: 10%;
+    color: #999999;
+    text-align: center;
+    display: inline-block;
+}
+
+.search-content .search-hot ul.hot-list li.hot-item span:last-child {
+    margin-left: 5px;
+    width: 80%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.search-content .search-hot ul.hot-list li.hot-item span.top {
+    color: #EA322BFF;
+}
+
+.search-content .search-hot ul.hot-list li.hot-item:hover {
+    background-color: #f2f2f2;
+}
+
+</style>
+

src/main.js

@@ -1,8 +1,14 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
+import Element from 'element-ui'
+import './assets/styles/element-variables.scss'
+
 
 Vue.config.productionTip = false
 
+Vue.use(Element);
 new Vue({
-  render: h => h(App),
+  router,
+  render: h => h(App)
 }).$mount('#app')

src/router/index.js

@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: HomeView
+  },
+  {
+    path: '/about',
+    name: 'about',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+  }
+]
+
+const router = new VueRouter({
+  routes
+})
+
+export default router

src/views/AboutView.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

src/views/HomeView.vue

@@ -0,0 +1,154 @@
+<template>
+    <el-container>
+        <el-header style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
+            <template>
+                <div class="header">
+                    <div class="logo-all">
+                        <img class="logo" src="../assets/logo/logo.png">
+                        <span style="cursor: pointer;margin-left: 10px;font-size: 25px;font-weight: bold;font-family:'楷体';">HelloGithub</span>
+                    </div>
+
+                    <el-menu :default-active="activeIndex" class="el-menu" mode="horizontal"
+                             active-text-color="#42b983"
+                             @select="handleSelect">
+                        <el-menu-item class="menu-item" index="1">首 页</el-menu-item>
+                        <el-menu-item class="menu-item" index="2">月 刊</el-menu-item>
+                        <el-menu-item class="menu-item" index="3"><i class="el-icon-trophy" style="color: #ffca00"></i>榜
+                            单
+                        </el-menu-item>
+
+                        <el-menu-item index="4">文 章</el-menu-item>
+                    </el-menu>
+                    <SearchInput></SearchInput>
+                    <el-button type="success" round icon="el-icon-thumb">提交项目</el-button>
+                </div>
+            </template>
+
+        </el-header>
+        <el-container>
+            <el-aside width="23%" style="display: flex;flex-direction: row;justify-content: flex-end;margin-top: 20px;">
+                <template>
+                    <el-card class="box-card" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
+                        <div slot="header" class="clearfix">
+                            <span><i class="el-icon-menu"></i> 热门标签</span>
+                        </div>
+                        <div class="bottom clearfix">
+                            <div v-for="o in 4" :key="o" class="text item">
+                                <el-tag style="margin-top: 10px" type="success">{{ '标签 ' + o }}</el-tag>
+                            </div>
+                            <div style="margin-top: 10px;width: 100%;height: 0;border-top: 1px solid #eee;"></div>
+                            <div>
+                                <i class="el-icon-setting"></i>
+                                <el-button type="text" class="button">管理标签</el-button>
+                            </div>
+
+                        </div>
+
+                    </el-card>
+                </template>
+
+            </el-aside>
+            <el-main style="display: flex;flex-direction: row;flex-wrap: nowrap">
+                <template >
+                    <div>
+                        <el-tabs type="border-card" style="width: 700px">
+                            <el-tab-pane label="最热">
+                                最热
+                            </el-tab-pane>
+                            <el-tab-pane label="最新">
+                                最新
+                            </el-tab-pane>
+                        </el-tabs>
+                    </div>
+                    <div  style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
+                        <el-card class="box-card" style="width: 200px">
+                            <el-button type="info" plain @click="loginDialogVisible = true">登 录</el-button>
+                        </el-card>
+
+                        <el-card class="box-card" style="margin-top: 20px;width: 200px">
+                            <div slot="header" class="clearfix">
+                                <span>卡片名称</span>
+                                <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
+                            </div>
+                            <div v-for="o in 4" :key="o" class="text item">
+                                {{'列表内容 ' + o }}
+                            </div>
+                        </el-card>
+                    </div>
+                </template>
+
+                <el-dialog
+                    title="登录"
+                    :visible.sync="loginDialogVisible"
+                    width="30%"
+                    :before-close="handleClose">
+                    <span>这是一段信息</span>
+                    <span slot="footer" class="dialog-footer">
+                    <el-button @click="loginDialogVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="loginDialogVisible = false">确 定</el-button>
+                    </span>
+                </el-dialog>
+
+
+
+            </el-main>
+        </el-container>
+    </el-container>
+</template>
+
+<script>
+import SearchInput from "@/components/SearchInput.vue";
+
+export default {
+    components: {
+        SearchInput,
+    },
+    data() {
+        return {
+            activeIndex: '1',
+            activeIndex2: '1',
+            loginDialogVisible: false
+        };
+    },
+    methods: {
+        handleSelect(key, keyPath) {
+            console.log(key, keyPath);
+        },
+        handleClose() {
+            this.$confirm('确认关闭？')
+
+        }
+    }
+}
+</script>
+<style>
+.logo-all {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.logo {
+    width: 30px;
+    height: 30px;
+    border-radius: 50px;
+}
+
+.header {
+    /*background-color: #eefdf7;*/
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.el-menu {
+    font-weight: bold;
+    font-size: 18px;
+}
+
+.box-card {
+    width: 150px;
+}
+
+</style>