首页组件创建

package.json

@@ -1,9 +1,8 @@
 {
-  "name": "vue-admin-beautiful",
+  "name": "laws-system-foton",
   "version": "1.0.0",
-  "author": "vue-admin-beautiful",
+  "author": "91isoft",
   "participants": [],
-  "homepage": "https://chu1204505056.gitee.io/vue-admin-beautiful",
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
@@ -13,10 +12,6 @@
     "lint": "vue-cli-service lint",
     "lint:style": "stylelint-config-prettier-check"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/chuzhixin/vue-admin-beautiful.git"
-  },
   "gitHooks": {
     "pre-commit": "lint-staged"
   },

src/views/home/components/dynamic/index.vue

@@ -0,0 +1,24 @@
+<!-- 我的动态 -->
+<template>
+  <div class="dynamic">我的动态</div>
+</template>
+
+<script>
+  export default {
+    name: 'Dynamic',
+    components: {},
+    mixins: [],
+    data() {
+      return {}
+    },
+    computed: {},
+    watch: {},
+    mounted() {},
+    methods: {},
+  }
+</script>
+
+<style lang="scss" scoped>
+  .dynamic {
+  }
+</style>

src/views/home/components/information/index.vue

@@ -0,0 +1,24 @@
+<!-- 资料中心 -->
+<template>
+  <div class="information">资料中心</div>
+</template>
+
+<script>
+  export default {
+    name: 'Information',
+    components: {},
+    mixins: [],
+    data() {
+      return {}
+    },
+    computed: {},
+    watch: {},
+    mounted() {},
+    methods: {},
+  }
+</script>
+
+<style lang="scss" scoped>
+  .information {
+  }
+</style>

src/views/home/components/navMenu/index.vue

@@ -0,0 +1,103 @@
+<!-- 右侧导航 -->
+<template>
+  <div class="nav-menu">
+    <div class="top">
+      <div class="menu-item">高级检索</div>
+      <div class="menu-item">个人中心</div>
+      <div class="menu-item">统计图表</div>
+    </div>
+    <div class="bottom">
+      <div v-for="(menuList, index) in navMenu" :key="index" class="menu-wrap">
+        <div v-for="menu in menuList" :key="menu.title" class="menu-item">
+          {{ menu.title }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'NavMenu',
+    components: {},
+    mixins: [],
+    data() {
+      return {
+        navMenu: [
+          [
+            {
+              title: '国内法规',
+              path: '/',
+            },
+            {
+              title: '国外法规',
+              path: '/',
+            },
+            {
+              title: '标准清单',
+              path: '/',
+            },
+          ],
+          [
+            {
+              title: '国内外政策',
+              path: '/',
+            },
+            {
+              title: '企业标准',
+              path: '/',
+            },
+            {
+              title: '标准预警',
+              path: '/',
+            },
+          ],
+        ],
+      }
+    },
+    computed: {},
+    watch: {},
+    mounted() {},
+    methods: {},
+  }
+</script>
+
+<style lang="scss" scoped>
+  .nav-menu {
+    margin-bottom: 10px;
+    .top {
+      margin-bottom: 20px;
+      display: flex;
+      .menu-item {
+        margin-right: 10px;
+        flex: 1;
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        border: 1px solid #ddd;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+    .bottom {
+      .menu-wrap {
+        display: flex;
+        margin-bottom: 10px;
+        &:last-child {
+          margin-bottom: 0;
+        }
+        .menu-item {
+          flex: 1;
+          line-height: 100px;
+          text-align: center;
+          border: 1px solid #ddd;
+          margin-right: 10px;
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/home/components/searchGroup/index.vue

@@ -0,0 +1,81 @@
+<!-- 搜索栏 -->
+<template>
+  <div class="search-group">
+    <el-select
+      v-model="selectkey"
+      class="search-group-item"
+      placeholder="请选择"
+    >
+      <el-option
+        v-for="item in jumppage"
+        :key="item.selectkey"
+        :label="item.label"
+        :value="item.selectkey"
+      ></el-option>
+    </el-select>
+
+    <div class="search-condition">
+      <el-input type="text" placeholder="请输入关键词"></el-input>
+      <el-button class="primary_button" type="primary">搜索</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'SearchGroup',
+    components: {},
+    mixins: [],
+    data() {
+      return {
+        selectkey: '',
+        jumppage: [
+          {
+            selectkey: '选项1',
+            label: '国内外标准法规',
+          },
+          {
+            selectkey: '选项2',
+            label: '研究报告',
+          },
+          {
+            selectkey: '选项3',
+            label: '企业标准',
+          },
+          {
+            selectkey: '选项4',
+            label: '动态&通知',
+          },
+          {
+            selectkey: '选项5',
+            label: '流程中心',
+          },
+        ],
+      }
+    },
+    computed: {},
+    watch: {},
+    mounted() {},
+    methods: {},
+  }
+</script>
+
+<style lang="scss" scoped>
+  .search-group {
+    height: 50px;
+    margin-bottom: 20px;
+    display: flex;
+    .search-group-item {
+      margin-right: 10px;
+      ::v-deep {
+        .el-input__inner {
+          background: transparent;
+        }
+      }
+    }
+    .search-condition {
+      flex: 1;
+      display: flex;
+    }
+  }
+</style>

src/views/home/components/todoList/index.vue

@@ -0,0 +1,27 @@
+<!-- 待办任务 -->
+<template>
+  <div class="to-do-list">待办任务</div>
+</template>
+
+<script>
+  export default {
+    name: 'ToDoList',
+    components: {},
+    mixins: [],
+    data() {
+      return {}
+    },
+    computed: {},
+    watch: {},
+    mounted() {},
+    methods: {},
+  }
+</script>
+
+<style lang="scss" scoped>
+  .to-do-list {
+    flex: 1;
+    overflow: hidden;
+    border: 1px solid #ddd;
+  }
+</style>

src/views/home/index.vue

@@ -12,66 +12,54 @@
     </div>
     <div class="home_main">
       <div class="left_wrapper">
-        <!--  搜索栏-->
+        <search-group></search-group>
-        <div class="search-group">
+        <div class="main-left-wrap">
-          <el-select
+          <el-tabs v-model="activeName" @tab-click="handleTabClick">
-            v-model="selectkey"
+            <el-tab-pane label="资料中心" name="information">
-            class="search-group-item"
+              <information></information>
-            placeholder="请选择"
+            </el-tab-pane>
-          >
+            <el-tab-pane label="我的动态" name="dynamic">
-            <el-option
+              <dynamic></dynamic>
-              v-for="item in jumppage"
+            </el-tab-pane>
-              :key="item.selectkey"
+          </el-tabs>
-              :label="item.label"
-              :value="item.selectkey"
-            ></el-option>
-          </el-select>
-        </div>
-        <div class="search-condition">
-          <el-input type="text" placeholder="请输入关键词"></el-input>
-          <el-button class="primary_button" type="primary">搜索</el-button>
         </div>
       </div>
+      <div class="right_wrapper">
+        <nav-menu></nav-menu>
+        <todo-list></todo-list>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+  import searchGroup from './components/searchGroup'
+  import information from './components/information'
+  import dynamic from './components/dynamic'
+  import navMenu from './components/navMenu'
+  import todoList from './components/todoList'
+
   export default {
     name: 'Home',
-    components: {},
+    components: {
+      searchGroup,
+      information,
+      dynamic,
+      navMenu,
+      todoList,
+    },
     mixins: [],
     data() {
       return {
-        selectkey: '',
+        activeName: 'information',
-        jumppage: [
-          {
-            selectkey: '选项1',
-            label: '国内外标准法规',
-          },
-          {
-            selectkey: '选项2',
-            label: '研究报告',
-          },
-          {
-            selectkey: '选项3',
-            label: '企业标准',
-          },
-          {
-            selectkey: '选项4',
-            label: '动态&通知',
-          },
-          {
-            selectkey: '选项5',
-            label: '流程中心',
-          },
-        ],
       }
     },
     computed: {},
     watch: {},
     mounted() {},
-    methods: {},
+    methods: {
+      handleTabClick(tab, event) {},
+    },
   }
 </script>
 
@@ -120,19 +108,19 @@
       height: 77vh;
       padding: 10px 0;
       margin-top: 16px;
+      display: flex;
       .left_wrapper {
         display: flex;
-        .search-group {
+        border: 1px solid #ddd;
-          width: 160px;
+        flex: 1;
-          margin-right: 10px;
+        margin-right: 10px;
-          .search-group-item {
+        flex-direction: column;
-            ::v-deep {
+      }
-              .el-input__inner {
+      .right_wrapper {
-                background: transparent;
+        width: 550px;
-              }
+        height: 100%;
-            }
+        display: flex;
-          }
+        flex-direction: column;
-        }
       }
       .search-condition {
         display: block;