Merge pull request '邓洁 : header和footer编写完成' (#2) from dj into master

Reviewed-on: #2

src/App.vue

@@ -3,7 +3,7 @@
     <div>
       <Header></Header>
     </div>
-    <div>
+    <div style="flex: 1;">
       <router-view/>
     </div>
     <div>
@@ -29,6 +29,16 @@ export default {
 }
 </script>
 <style lang="scss">
+#app{
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
 *{
   padding: 0;
   margin: 0;
@@ -39,4 +49,7 @@ a{
   cursor: pointer;
   text-align: center;
 }
+li{
+  list-style: none;
+}
 </style>

src/views/footer/index.vue

@@ -1,15 +1,197 @@
 <template>
+  <div class="footer_bg">
+    <el-row type="flex" class="up_footer">
+      <el-col :span="4">
+      </el-col>
+      <el-col :span="16">
+        <div class="up_left">
+          <el-image
+            style="margin-bottom: 15px"
+            :src="require('@/assets/footer/elogo.png')"></el-image>
           <div>
-    脚
+            广东祥睿陶瓷有限公司
+          </div>
+        </div>
+        <div class="up_middle">
+          <ul>
+            <li v-for="(footerItem,footerIndex) in footerList" :key="footerIndex">
+              <a>{{ footerItem.title }}</a>
+              <div class="item" v-for="(footerItems,footerItemsIndex) in footerItem.items" :key="footerItemsIndex">
+                  <a>{{ footerItems.name }}</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="up_right">
+          <el-image
+            style="width: 100px; height: 100px"
+            :src="require('@/assets/footer/qr.jpg')"></el-image>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row type="flex" class="down_footer">
+      <el-col :span="3">
+      </el-col>
+      <el-col :span="18">
+        <div>
+          版权所有©广东祥睿陶瓷有限公司 2018-2019 未经本网书面授权，请勿转载、摘编或建立镜像，否则视为侵权。
+        </div>
+        <div>
+          地址：佛山市禅城区华夏陶瓷博览城陶博会展三环路5座B3 技术支持：弈天网络
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 export default {
-  name: "index"
+  name: "index",
+  data() {
+    return {
+      footerList: [
+        {
+          title: '关于我们',
+          items: [
+            {
+              name: '企业简介'
+            },
+            {
+              name: '品牌文化'
+            },
+            {
+              name: '企业观点'
+            }
+          ]
+        },
+        {
+          title: '新闻资讯',
+          items: [
+            {
+              name: '公司新闻'
+            },
+            {
+              name: '行业动态'
+            },
+            {
+              name: '瓷砖百科'
+            }
+          ]
+        },
+        {
+          title: '形象展示',
+          items: [
+            {
+              name: '资质荣誉'
+            },
+            {
+              name: '工程案例'
+            }
+          ]
+        },
+        {
+          title: '招商加盟',
+          items: [
+            {
+              name: '支持策略'
+            },
+            {
+              name: '加盟条件'
+            }
+          ]
+        },
+        {
+          title: '联系我们',
+          items: [
+            {
+              name: '联系方式'
+            }
+          ]
+        }
+      ]
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.footer_bg {
+  height: 276px;
+  width: 100%;
+  background-color: #111;
+  color: #fff;
 
+  .up_footer {
+    color: #fff;
+    width: 100%;
+    float: left;
+    padding: 50px 0 50px;
+    font-size: 12px;
+
+    .up_left {
+      float: left;
+      margin-right: 15px;
+
+      > div {
+        font-size: 14px;
+        clear: both;
+        width: 251px;
+        line-height: 36px;
+        float: left;
+        text-align: center;
+        background-color: #111;
+      }
+    }
+
+    .up_middle {
+      ul {
+        float: left;
+
+        li {
+          color: #eee;
+          display: inline;
+          float: left;
+          padding: 0 40px 0 40px;
+          border-right: 1px solid #444;
+          font-size: 14px;
+
+          > a {
+            color: #fff;
+            font-size: 15px;
+            line-height: 26px;
+          }
+
+          > a:hover {
+            text-decoration: underline;
+          }
+
+          .item {
+            color: #aaa;
+            font-size: 13px;
+              > a {
+                line-height: 24px;
+              }
+            > a:hover{
+              text-decoration: underline;
+            }
+          }
+        }
+      }
+    }
+
+    .up_right {
+      float: right;
+    }
+  }
+
+  .down_footer {
+    color: #aaa;
+    width: 100%;
+    float: left;
+    padding: 12px 0;
+    font-size: 12px;
+    border-top: 1px solid #333;
+    text-align: center;
+  }
+}
 </style>

src/views/header/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="header_bg">
     <el-row type="flex" class="up_header">
-      <el-col :span="3">
+      <el-col :span="4">
       </el-col>
-      <el-col :span="18">
+      <el-col :span="16" style="z-index: 400;">
           <span class="up_left">
             艺鹏瓷砖 —— 拒绝千篇一律，艺术无处不在
           </span>
@@ -13,9 +13,9 @@
       </el-col>
     </el-row>
     <el-row type="flex" class="down_header">
-      <el-col :span="3">
+      <el-col :span="4">
       </el-col>
-      <el-col :span="18">
+      <el-col :span="16">
         <div class="down_left">
           <a href="/">
             <el-image
@@ -24,11 +24,11 @@
         </div>
         <div class="down_right">
           <ul>
-            <li v-for="(item,index) in navList" :key="index">
+            <li v-for="(item,index) in navList" :key="index" class="nav">
-              <a :href="item.href">
+              <a :href="item.href" class="nav_item">
                 {{ item.title }}
               </a>
-              <ul class="subNav">
+              <ul class="subNav" v-if="item.children">
                 <li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
                   <a :href="childrenItem.href">
                     {{ childrenItem.title }}
@@ -52,9 +52,6 @@ export default {
         {
           href: '',
           title: '网站首页',
-          children:[
-
-          ]
         },
         {
           href: '',
@@ -77,16 +74,80 @@ export default {
           ]
         }, {
           href: '',
-          title: '产品中心'
+          title: '产品中心',
+          children:[
+            {
+              href: '',
+              title:'瓷抛大理石'
+            },
+            {
+              href: '',
+              title:'通体大理石'
+            },{
+              href: '',
+              title:'中板通体大理石'
+            },{
+              href: '',
+              title:'大板通体大理石'
+            },{
+              href: '',
+              title:'银河系大板'
+            },{
+              href: '',
+              title:'仿古砖600x600'
+            },{
+              href: '',
+              title:'金刚大理石'
+            },{
+              href: '',
+              title:'岩板'
+            },{
+              href: '',
+              title:'微水泥'
+            }
+          ]
         }, {
           href: '',
-          title: '新闻资讯'
+          title: '新闻资讯',
+          children:[
+            {
+              href: '',
+              title:'公司新闻'
+            },
+            {
+              href: '',
+              title:'行业动态'
+            },{
+              href: '',
+              title:'瓷砖百科'
+            }
+          ]
         }, {
           href: '',
-          title: '形象展示'
+          title: '形象展示',
+          children:[
+            {
+              href: '',
+              title:'资质荣誉'
+            },
+            {
+              href: '',
+              title:'工程案例'
+            }
+          ]
         }, {
           href: '',
-          title: '招商加盟'
+          title: '招商加盟',
+          children: [
+            {
+              href: '',
+              title:'支持策略'
+            },
+            {
+              href: '',
+              title:'加盟条件'
+            },
+          ]
         }, {
           href: '',
           title: '联系我们'
@@ -98,6 +159,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
+
 .header_bg {
   height: 130px;
   width: 100%;
@@ -151,13 +213,13 @@ export default {
         display: inline;
         float: left;
 
-        >li {
+        >.nav {
           position: relative;
           display: inline;
           width: 100px;
           float: left;
 
-          > a {
+          > .nav_item {
             color: #fff;
             display: inline-block;
             position: relative;
@@ -165,17 +227,38 @@ export default {
             line-height: 85px;
             font-size: 14px;
           }
-          a:hover{
+          .nav_item:hover{
             text-decoration: underline;
           }
+
           .subNav{
+            display: none;
             width: 100px;
-            background-color: red;
+            background-color: #000;
+            padding: 12px 0;
+            >li{
+              width: 100%;
+              text-align: center;
+              height: 35px;
+              line-height: 35px;
+              >a{
+                color: #fff;
+                font-size: 12px;
+              }
+              >a:hover{
+                text-decoration: underline;
+              }
+            }
+          }
+
+        }
+        >.nav:hover {
+          .subNav{
+            display: block;
           }
         }
       }
     }
   }
 }
-
 </style>

src/views/index/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div>首页</div>
+  <div>
+
+  </div>
 </template>
 
 <script>