首页开发

src/styles/normalize.scss

@@ -357,6 +357,9 @@ template {
   width: 100%;
   height: 100%;
   color: #fff;
+  * {
+    box-sizing: border-box;
+  }
 }
 ul,li{
   padding:0;

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

@@ -1,24 +0,0 @@
-<!-- 我的动态 -->
-<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/empennage/index.vue

@@ -1,6 +1,6 @@
 <!-- 尾部链接 -->
 <template>
-  <div calss="footer">
+  <div class="link">
     <ul>
       <li><a href="http://www.sac.gov.cn/">国家标准化管理委员会</a></li>
       <li><a href="http://www.sac.gov.cn/">全国标准公共服务平台</a></li>
@@ -30,18 +30,22 @@
 </script>
 
 <style lang="scss" scoped>
-  .footer {
+  .link {
-    height: 40px;
+    height: 100%;
     ul {
       display: flex;
-      line-height: 40px;
+      height: 100%;
       text-align: center;
+      user-select: none;
       li {
         flex: 1;
-      }
+        a {
-      li:hover {
+          color: #ffffff;
-        color: blue;
+          &:hover {
-        text-decorationn: underline;
+            color: #e9ca32;
+            text-decoration: underline;
+          }
+        }
       }
     }
   }

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

@@ -1,24 +0,0 @@
-<!-- 资料中心 -->
-<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

@@ -70,11 +70,11 @@
       margin-bottom: 20px;
       .menu-item {
         flex: 1;
-        margin-right: 10px;
         height: 50px;
+        margin-right: 10px;
         line-height: 50px;
         text-align: center;
-        border: 1px solid #ddd;
+        background: rgba(182, 213, 255, 0.22);
         &:last-child {
           margin-right: 0;
         }
@@ -90,9 +90,9 @@
         .menu-item {
           flex: 1;
           line-height: 100px;
-          text-align: center;
           margin-right: 10px;
-          border: 1px solid #ddd;
+          text-align: center;
+          background: rgba(182, 213, 255, 0.22);
           &:last-child {
             margin-right: 0;
           }

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

@@ -0,0 +1,90 @@
+<!-- 资讯 -->
+<template>
+  <div class="realimeinfo">
+    <ul>
+      <li v-for="item in realimeinfoList" :key="item.id" class="time-title">
+        <a class="title" :title="item.title">{{ item.title }}</a>
+        <span class="time">{{ putTime }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Realimeinfo',
+    components: {},
+    mixins: [],
+    data() {
+      return {
+        putTime: '',
+        realimeinfoList: [
+          {
+            id: 1,
+            title: '资讯1',
+          },
+          {
+            id: 2,
+            title: '资讯2',
+          },
+          {
+            id: 3,
+            title: '资讯3',
+          },
+          {
+            id: 4,
+            title: '资讯4',
+          },
+          {
+            id: 5,
+            title: '资讯5',
+          },
+          {
+            id: 6,
+            title: '资讯6',
+          },
+        ],
+      }
+    },
+    computed: {},
+    watch: {},
+    mounted() {
+      this.getDate()
+    },
+    methods: {
+      getDate() {
+        //获取当前时间
+        var date = new Date()
+        var year = date.getFullYear()
+        var month = date.getMonth() + 1
+        var day = date.getDate()
+        if (month < 10) {
+          month = '0' + month
+        }
+        if (day < 10) {
+          day = '0' + day
+        }
+        var nowDate = year + '-' + month + '-' + day
+        this.putTime = nowDate
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .realimeinfo {
+    .time-title {
+      margin: 15px;
+      .time {
+        float: right;
+      }
+      a {
+        color: #ffffff;
+        &:hover {
+          color: #e9c851;
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,90 @@
+<!-- 标准发布 -->
+<template>
+  <div class="release">
+    <ul>
+      <li v-for="item in standardReleaseList" :key="item.id" class="time-title">
+        <a class="title" :title="item.title">{{ item.title }}</a>
+        <span class="time">{{ putTime }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Release',
+    components: {},
+    mixins: [],
+    data() {
+      return {
+        putTime: '',
+        standardReleaseList: [
+          {
+            id: 1,
+            title: '标准发布1',
+          },
+          {
+            id: 2,
+            title: '标准发布2',
+          },
+          {
+            id: 3,
+            title: '标准发布3',
+          },
+          {
+            id: 4,
+            title: '标准发布4',
+          },
+          {
+            id: 5,
+            title: '标准发布5',
+          },
+          {
+            id: 6,
+            title: '标准发布6',
+          },
+        ],
+      }
+    },
+    computed: {},
+    watch: {},
+    mounted() {
+      this.getDate()
+    },
+    methods: {
+      getDate() {
+        //获取当前时间
+        var date = new Date()
+        var year = date.getFullYear()
+        var month = date.getMonth() + 1
+        var day = date.getDate()
+        if (month < 10) {
+          month = '0' + month
+        }
+        if (day < 10) {
+          day = '0' + day
+        }
+        var nowDate = year + '-' + month + '-' + day
+        this.putTime = nowDate
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .release {
+    .time-title {
+      margin: 15px;
+      .time {
+        float: right;
+      }
+      a {
+        color: #ffffff;
+        &:hover {
+          color: #e9c851;
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+</style>

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

@@ -2,20 +2,25 @@
 <template>
   <div class="search-group">
     <el-select
-      v-model="selectkey"
+      v-model="selectKey"
       class="search-group-item"
       placeholder="请选择"
     >
       <el-option
-        v-for="item in jumppage"
+        v-for="item in jumpPage"
-        :key="item.selectkey"
+        :key="item.selectKey"
         :label="item.label"
-        :value="item.selectkey"
+        :value="item.selectKey"
       ></el-option>
     </el-select>
 
     <div class="search-condition">
-      <el-input type="text" placeholder="请输入关键词"></el-input>
+      <el-input
+        v-model="keywords"
+        type="text"
+        placeholder="请输入关键词"
+        clearable
+      ></el-input>
       <el-button class="primary_button" type="primary">搜索</el-button>
     </div>
   </div>
@@ -28,26 +33,27 @@
     mixins: [],
     data() {
       return {
-        selectkey: '',
+        selectKey: '',
-        jumppage: [
+        keywords: '',
+        jumpPage: [
           {
-            selectkey: '选项1',
+            selectKey: '选项1',
             label: '国内外标准法规',
           },
           {
-            selectkey: '选项2',
+            selectKey: '选项2',
             label: '研究报告',
           },
           {
-            selectkey: '选项3',
+            selectKey: '选项3',
             label: '企业标准',
           },
           {
-            selectkey: '选项4',
+            selectKey: '选项4',
             label: '动态&通知',
           },
           {
-            selectkey: '选项5',
+            selectKey: '选项5',
             label: '流程中心',
           },
         ],
@@ -62,20 +68,37 @@
 
 <style lang="scss" scoped>
   .search-group {
+    display: flex;
+    width: 60vw;
     height: 50px;
     margin-bottom: 20px;
-    display: flex;
     .search-group-item {
-      margin-right: 10px;
+      margin-right: 20px;
       ::v-deep {
         .el-input__inner {
-          background: transparent;
+          width: 18vm;
+          height: 40px;
+          color: #fff;
+          background: rgba(182, 213, 255, 0.22);
         }
       }
     }
     .search-condition {
-      flex: 1;
       display: flex;
+      flex: 1;
+      ::v-deep {
+        .el-input__inner {
+          height: 40px;
+          font-size: 16px;
+          color: #fff;
+          background: rgba(182, 213, 255, 0.22);
+        }
+      }
+    }
+    .primary_button {
+      width: 8.2vw;
+      height: 40px;
+      background-color: #007dfe;
     }
   }
 </style>

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

@@ -0,0 +1,90 @@
+<!-- 标准征求意见 -->
+<template>
+  <div class="solicitopinions">
+    <ul>
+      <li v-for="item in domesticDynamics" :key="item.id" class="time-title">
+        <a class="title" :title="item.title">{{ item.title }}</a>
+        <span class="time">{{ putTime }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Solicitopinions',
+    components: {},
+    mixins: [],
+    data() {
+      return {
+        putTime: '',
+        domesticDynamics: [
+          {
+            id: 1,
+            title: '标准征求意见1',
+          },
+          {
+            id: 2,
+            title: '标准征求意见2',
+          },
+          {
+            id: 3,
+            title: '标准征求意见3',
+          },
+          {
+            id: 4,
+            title: '标准征求意见4',
+          },
+          {
+            id: 5,
+            title: '标准征求意见5',
+          },
+          {
+            id: 6,
+            title: '标准征求意见6',
+          },
+        ],
+      }
+    },
+    computed: {},
+    watch: {},
+    mounted() {
+      this.getDate()
+    },
+    methods: {
+      getDate() {
+        //获取当前时间
+        var date = new Date()
+        var year = date.getFullYear()
+        var month = date.getMonth() + 1
+        var day = date.getDate()
+        if (month < 10) {
+          month = '0' + month
+        }
+        if (day < 10) {
+          day = '0' + day
+        }
+        var nowDate = year + '-' + month + '-' + day
+        this.putTime = nowDate
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .solicitopinions {
+    .time-title {
+      margin: 15px;
+      .time {
+        float: right;
+      }
+      a {
+        color: #ffffff;
+        &:hover {
+          color: #e9c851;
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+</style>

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

@@ -1,6 +1,16 @@
 <!-- 待办任务 -->
 <template>
-  <div class="to-do-list">待办任务</div>
+  <div class="to-do-list">
+    <div>
+      <h3 class="task">待办任务</h3>
+      <span class="more">MORE</span>
+    </div>
+    <ul>
+      <li v-for="item in toDoTaskList" :key="item.id" class="time-title">
+        <a>{{ item.title }}</a>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
@@ -9,7 +19,22 @@
     components: {},
     mixins: [],
     data() {
-      return {}
+      return {
+        toDoTaskList: [
+          {
+            id: 1,
+            title: '标准制定流程1',
+          },
+          {
+            id: 2,
+            title: '标准制定流程2',
+          },
+          {
+            id: 3,
+            title: '标准制定流程3',
+          },
+        ],
+      }
     },
     computed: {},
     watch: {},
@@ -21,7 +46,31 @@
 <style lang="scss" scoped>
   .to-do-list {
     flex: 1;
+    height: 100%;
     overflow: hidden;
-    border: 1px solid #ddd;
+    background: rgba(182, 213, 255, 0.22);
+    .task {
+      display: inline-block;
+      margin-left: 10px;
+      font-size: 14px;
+    }
+    .more {
+      float: right;
+      margin: 15px 15px;
+      &:hover {
+        color: red;
+        cursor: pointer;
+      }
+    }
+    .time-title {
+      margin: 10px;
+    }
+    a {
+      color: #ffffff;
+      &:hover {
+        color: #e9c851;
+        text-decoration: underline;
+      }
+    }
   }
 </style>

src/views/home/index.vue

@@ -3,7 +3,7 @@
   <div class="home">
     <div class="home_header">
       <div class="logo">
-        <span class="logo_title">全球标准法规管理系统</span>
+        <span class="logo_title"></span>
       </div>
       <div class="user_exit">
         <span class="user">当前登录人</span>
@@ -13,15 +13,24 @@
     <div class="home_main">
       <div class="left_wrapper">
         <search-group></search-group>
-        <div class="main-left-wrap">
+        <div class="main-tabs">
-          <el-tabs v-model="activeName" @tab-click="handleTabClick">
+          <div class="main-left-wrap">
-            <el-tab-pane class="tabtitle" label="资料中心" name="information">
+            <el-tabs
-              <information></information>
+              v-model="activeName"
-            </el-tab-pane>
+              class="home-tabs"
-            <el-tab-pane calss="tabtitle" label="我的动态" name="dynamic">
+              @tab-click="handleTabClick"
-              <dynamic></dynamic>
+            >
-            </el-tab-pane>
+              <el-tab-pane label="标准征求意见" name="solicitOpinions">
-          </el-tabs>
+                <solicitOpinions></solicitOpinions>
+              </el-tab-pane>
+              <el-tab-pane label="标准发布" name="release">
+                <release></release>
+              </el-tab-pane>
+              <el-tab-pane label="资讯" name="realTimeInfo">
+                <realTimeInfo></realTimeInfo>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
         </div>
       </div>
       <div class="right_wrapper">
@@ -39,9 +48,10 @@
 
 <script>
   import searchGroup from './components/searchGroup'
-  import information from './components/information'
+  import realTimeInfo from './components/realtimeinfo'
-  import dynamic from './components/dynamic'
+  import release from './components/release'
   import navMenu from './components/navMenu'
+  import solicitOpinions from './components/solicitopinions'
   import todoList from './components/todoList'
   import Empennage from 'views/home/components/empennage'
   // import empennage from 'views/home/components/empennage'
@@ -52,15 +62,16 @@
       Empennage,
       // empennage,
       searchGroup,
-      information,
+      solicitOpinions,
-      dynamic,
+      realTimeInfo,
+      release,
       navMenu,
       todoList,
     },
     mixins: [],
     data() {
       return {
-        activeName: 'information',
+        activeName: 'solicitOpinions',
       }
     },
     computed: {},
@@ -75,18 +86,25 @@
 <style lang="scss" scoped>
   .home {
     height: 100%;
-    padding: 2vh 6vw 0 6vw;
+    display: flex;
-    background: $primary-bg-color;
+    flex-direction: column;
+    padding: 1.1vh 3.51vw 4.9vh;
+    background: url('../../assets/images/home/BG.png') no-repeat;
+    background-size: 100% 100%;
     .home_header {
       position: relative;
       display: flex;
       justify-content: space-between;
+      height: 9.1vh;
+      margin-bottom: 2.7vh;
       .logo {
-        width: 850px;
+        width: 500px;
-        height: 50px;
+        height: 70px;
+        background: url('../../assets/images/home/logo.png') no-repeat;
         .logo_title {
           height: 50px;
           margin-top: 50px;
+          margin-left: 35%;
           font-size: 25px;
           font-weight: bold;
           line-height: 50px;
@@ -115,27 +133,42 @@
     }
     .home_main {
       display: flex;
-      height: 77vh;
+      flex: 1;
-      padding: 10px 0;
+      overflow: hidden;
-      margin-top: 16px;
       .left_wrapper {
         display: flex;
         flex: 1;
         flex-direction: column;
+        width: 60vw;
+        height: 100%;
         margin-right: 10px;
-        border: 1px solid #ddd;
+        .home-tabs {
-        .tabtitle {
+          margin-left: 2.34vw;
           ::v-deep {
             .el-tabs__item {
-              font-size: 40px;
+              font-size: 16px;
+              font-weight: 500;
+              color: #ffffff;
+            }
+            .el-tabs__nav-wrap::after {
+              background-color: transparent;
             }
           }
         }
+        .main-tabs {
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          width: 60vw;
+          height: 67.7vh;
+          margin-right: 10px;
+          background: rgba(182, 213, 255, 0.22);
+        }
       }
       .right_wrapper {
         display: flex;
         flex-direction: column;
-        width: 550px;
+        width: 32.2vw;
         height: 100%;
       }
       .search-condition {
@@ -146,7 +179,10 @@
       }
     }
     .footer {
-      height: 40px;
+      height: 5.2vh;
+      margin-top: 1.3vh;
+      line-height: 5.2vh;
+      background: rgba(182, 213, 255, 0.22);
       border: 1px solid #ddd;
     }
   }