首页开发

src/views/home/index.vue

@@ -1,6 +1,39 @@
 <!-- 首页 -->
 <template>
-  <div class="home">首页首页首页首页</div>
+  <div class="home">
+    <div class="home_header">
+      <div class="logo">
+        <span class="logo_title">全球标准法规管理系统</span>
+      </div>
+      <div class="user_exit">
+        <span class="user">当前登录人</span>
+        <span class="exit">退出</span>
+      </div>
+    </div>
+    <div class="home_main">
+      <div class="left_wrapper">
+        <!--  搜索栏-->
+        <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>
+        <div class="search-condition">
+          <el-input type="text" placeholder="请输入关键词"></el-input>
+          <el-button class="primary_button" type="primary">搜索</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -9,7 +42,31 @@
     components: {},
     mixins: [],
     data() {
-      return {}
+      return {
+        selectkey: '',
+        jumppage: [
+          {
+            selectkey: '选项1',
+            label: '国内外标准法规',
+          },
+          {
+            selectkey: '选项2',
+            label: '研究报告',
+          },
+          {
+            selectkey: '选项3',
+            label: '企业标准',
+          },
+          {
+            selectkey: '选项4',
+            label: '动态&通知',
+          },
+          {
+            selectkey: '选项5',
+            label: '流程中心',
+          },
+        ],
+      }
     },
     computed: {},
     watch: {},
@@ -20,8 +77,69 @@
 
 <style lang="scss" scoped>
   .home {
-    width: 100%;
     height: 100%;
+    padding: 2vh 6vw 0 6vw;
     background: $primary-bg-color;
+    .home_header {
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      .logo {
+        width: 850px;
+        height: 50px;
+        .logo_title {
+          height: 50px;
+          margin-top: 50px;
+          font-size: 25px;
+          font-weight: bold;
+          line-height: 50px;
+          color: #fff;
+        }
+      }
+      .user_exit {
+        span {
+          display: inline-block;
+          margin-top: 50px;
+          color: #fff;
+        }
+        .user,
+        .exit {
+          height: 50px;
+          margin: 5px;
+          font-size: 14px;
+          line-height: 50px;
+          color: #fff;
+          cursor: pointer;
+          &:hover {
+            color: red;
+          }
+        }
+      }
+    }
+    .home_main {
+      height: 77vh;
+      padding: 10px 0;
+      margin-top: 16px;
+      .left_wrapper {
+        display: flex;
+        .search-group {
+          width: 160px;
+          margin-right: 10px;
+          .search-group-item {
+            ::v-deep {
+              .el-input__inner {
+                background: transparent;
+              }
+            }
+          }
+        }
+      }
+      .search-condition {
+        display: block;
+        .el-input {
+          width: 300px;
+        }
+      }
+    }
   }
 </style>