邓洁 : header 开始编写

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>西南交通大学 保卫处</title>
+    <title>艺鹏瓷砖|广东祥睿陶瓷有限公司</title>
     <script>
       fnResize();
       window.onresize = function() {

src/App.vue

@@ -28,5 +28,15 @@ export default {
   },
 }
 </script>
-<style>
+<style lang="scss">
+*{
+  padding: 0;
+  margin: 0;
+}
+a{
+  width: 100%;
+  text-decoration: none;
+  cursor: pointer;
+  text-align: center;
+}
 </style>

src/views/header/index.vue

@@ -1,15 +1,181 @@
 <template>
-  <div>
-    头部5464654646
+  <div class="header_bg">
+    <el-row type="flex" class="up_header">
+      <el-col :span="3">
+      </el-col>
+      <el-col :span="18">
+          <span class="up_left">
+            艺鹏瓷砖 —— 拒绝千篇一律，艺术无处不在
+          </span>
+        <span class="up_right">
+            广东祥睿陶瓷有限公司
+          </span>
+      </el-col>
+    </el-row>
+    <el-row type="flex" class="down_header">
+      <el-col :span="3">
+      </el-col>
+      <el-col :span="18">
+        <div class="down_left">
+          <a href="/">
+            <el-image
+              :src="require('@/assets/header/logo.png')"></el-image>
+          </a>
+        </div>
+        <div class="down_right">
+          <ul>
+            <li v-for="(item,index) in navList" :key="index">
+              <a :href="item.href">
+                {{ item.title }}
+              </a>
+              <ul class="subNav">
+                <li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
+                  <a :href="childrenItem.href">
+                    {{ childrenItem.title }}
+                  </a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 export default {
-  name: "index"
+  name: "index",
+  data() {
+    return {
+      navList: [
+        {
+          href: '',
+          title: '网站首页',
+          children:[
+
+          ]
+        },
+        {
+          href: '',
+          title: '关于我们',
+          children:[
+            {
+              href: '',
+              title:'企业简介'
+            },
+            {
+              href: '',
+              title:'品牌文化'
+            },{
+              href: '',
+              title:'企业观点'
+            },{
+              href: '',
+              title:'企业文化'
+            }
+          ]
+        }, {
+          href: '',
+          title: '产品中心'
+        }, {
+          href: '',
+          title: '新闻资讯'
+        }, {
+          href: '',
+          title: '形象展示'
+        }, {
+          href: '',
+          title: '招商加盟'
+        }, {
+          href: '',
+          title: '联系我们'
+        }
+      ]
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.header_bg {
+  height: 130px;
+  width: 100%;
+  background-color: #111;
+  color: #fff;
+
+  .up_header {
+    border-bottom: 1px solid #333;
+    height: 36px;
+
+    .up_left {
+      color: #fff;
+      display: inline;
+      line-height: 36px;
+      float: left;
+      margin-left: 90px;
+      font-size: 12px;
+    }
+
+    .up_right {
+      color: #ccc;
+      display: inline;
+      float: right;
+      line-height: 35px;
+      font-size: 12px;
+    }
+  }
+
+  .down_header {
+    position: relative;
+    width: 100%;
+    float: left;
+    padding: 4px 0;
+    z-index: 30;
+
+    .down_left {
+      position: absolute;
+      top: -30px;
+      float: left;
+
+      > a:hover:after {
+        border: none;
+      }
+    }
+
+    .down_right {
+      position: relative;
+      float: right;
+
+      >ul {
+        display: inline;
+        float: left;
+
+        >li {
+          position: relative;
+          display: inline;
+          width: 100px;
+          float: left;
+
+          > a {
+            color: #fff;
+            display: inline-block;
+            position: relative;
+            height: 85px;
+            line-height: 85px;
+            font-size: 14px;
+          }
+          a:hover{
+            text-decoration: underline;
+          }
+          .subNav{
+            width: 100px;
+            background-color: red;
+          }
+        }
+      }
+    }
+  }
+}
 
 </style>