产品

src/App.vue

@@ -11,12 +11,14 @@ export default {
 </script>
 
 <style>
+html,body,#app{
+ height: 100%;
+}
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

src/components/commonComponents/headerTab.vue

@@ -1,29 +1,31 @@
 <template>
   <div class="header-tab">
     <el-row>
-       <el-col :span="12"><img src="../../assets/image/home/logo/logo.png" alt=""></el-col>
-  <el-col :span="12"><el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
-  <el-menu-item index="1">首页</el-menu-item>
-  <el-menu-item index="2">解决方案</el-menu-item>
-  <el-menu-item index="3">产品中心</el-menu-item>
-  <el-menu-item index="4">新闻资讯</el-menu-item>
-  <el-menu-item index="5">关于我们</el-menu-item>
-</el-menu></el-col>
- 
-</el-row>
-
+      <el-col :span="12">
+        <img class="logo" src="../../assets/image/home/logo/logo.png" alt>
+      </el-col>
+      <el-col :span="12">
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+          <el-menu-item index="1">首页</el-menu-item>
+          <el-menu-item index="2">解决方案</el-menu-item>
+          <el-menu-item index="3">产品中心</el-menu-item>
+          <el-menu-item index="4">新闻资讯</el-menu-item>
+          <el-menu-item index="5">关于我们</el-menu-item>
+        </el-menu>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 export default {
-  data() {
+  data () {
     return {
       activeIndex: "1"
     };
   },
   methods: {
-    handleSelect(key, keyPath) {
+    handleSelect (key, keyPath) {
       if (key === "2") {
         this.activeIndex = "2";
         this.$router.push("/solution");
@@ -83,4 +85,7 @@ export default {
   padding: 0;
   margin: 0 20px;
 }
+.logo{
+  height: 35px;
+}
 </style>

src/components/pages/productCenter/productCenter.vue

@@ -1,15 +1,19 @@
 <template>
   <div class="product-center">
-      <headerTab></headerTab>
-   
-  <div>
-
-  产品中心
-
-
+    <headerTab></headerTab>
+    <div class="product_box">
+      <div class="product_top">
+        <div class="product_top_con">
+          <div class="product_top_con_left">
+            <h3>{{tittle}}</h3>
+          </div>
+          <div class="product_top_con_right">
+            <h3>{{tittle}}</h3>
+          </div>
+        </div>
+      </div>
     </div>
     <footerNav></footerNav>
-
   </div>
 </template>
 
@@ -19,10 +23,10 @@ import footerNav from "@/components/commonComponents/footerNav";
 
 export default {
   components: { headerTab, footerNav },
- 
+
   data () {
     return {
-  
+      tittle: '二手房管理平台'
     }
   }
 }
@@ -30,5 +34,38 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
+.product-center {
+  background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
+  width: 100%;
+  min-width: 1260px;
+  height: 390px;
+  background-size: cover;
+}
+.product_box {
+  width: 1260px;
+  height: 390px;
+  margin: 0 auto;
+}
+.product_top {
+  width: 1260px;
+  height: 390px;
+}
+.product_top_con_left {
+  display: inline-block;
+  color: #fff;
+}
+.product_top_con_left h3{
+  font-size:33px;
+  font-weight:100;
+}
+.product_top_con_right {
+  display: inline-block;
+  color: #fff;
+}
+.product_top_con {
+  text-align: center;
+  line-height: 390px;
+  display: flex;
+  justify-content: space-between;
+}
 </style>