合并

src/views/detail/detail.vue

@@ -3,62 +3,33 @@
     <el-row>
       <el-col :span="24" class="top">
         <div class="w_1200">
-          <top :topInfo="topInfo"></top>
+          头部
         </div>
       </el-col>
-      <el-col :span="24">
-        <el-col :span="24" class="menu" :style="`background:${backColor}`">
-          <div class="w_1200">
-            <native></native>
-          </div>
-        </el-col>
-      </el-col>
-      <el-col :span="24" class="main">
+      <el-col :span="24" class="menu">
         <div class="w_1200">
-          <el-col :span="24" class="mainInfo">
-            <el-col :span="6" class="mainLeft">
-              <mainLeft :mainLeftList="mainLeftList"></mainLeft>
-            </el-col>
-            <el-col :span="17" class="mainRight">
-              <contentInfo :contentList="contentList"></contentInfo>
-            </el-col>
-          </el-col>
+          导航
         </div>
       </el-col>
-      <el-col :span="24" class="down">
+      <el-col :span="24" class="content">
         <div class="w_1200">
-          <footDown :downList="downList"></footDown>
+          内容
         </div>
       </el-col>
+      <el-col :span="24" class="down">
+        <div class="w_1200">底部</div>
+      </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import top from '../../layout/list/top.vue';
-import native from '../../layout/index/native.vue';
-import mainLeft from '../../layout/list/mainLeft.vue';
-import contentInfo from '../../layout/detail/content.vue';
-import footDown from '../../layout/index/foot.vue';
 export default {
-  name: 'detial',
-  props: {
-    topInfo: null,//头部
-    mainLeftList: null,//主体左侧导航
-    contentList: null,//主体右侧内容
-    downList: null,//底部
-  },
-  components: {
-    top,
-    native,
-    mainLeft,
-    contentInfo,
-    footDown,
-  },
-  data: () => ({
-    backColor: '#850000',
-  }),
-  created() { },
+  name: 'detail',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
   computed: {},
   methods: {},
 };
@@ -70,33 +41,21 @@ export default {
   margin: 0 auto;
 }
 .top {
-  padding: 15px 0;
+  height: 100px;
   border: 1px solid #ccc;
 }
 .menu {
+  margin-bottom: 20px;
   height: 40px;
-}
-.main {
-  min-height: 500px;
-  background-color: #f0f0f0;
-}
-.mainInfo {
-  margin: 20px 0;
-}
-.mainLeft {
-  min-height: 44px;
-  background-color: #fff;
   border: 1px solid #ccc;
 }
-.mainRight {
-  float: right;
-  width: 880px;
-  background-color: #fff;
-  padding: 20px 30px;
-  min-height: 460px;
+.content{
+  margin-bottom:20px;
+  min-height:500px;
+  border:1px solid #ccc;
 }
 .down {
   height: 100px;
-  background-color: #333;
+  border: 1px solid #ccc;
 }
 </style>

src/views/index/index.vue

@@ -7,8 +7,9 @@
         </div>
       </el-col>
       <el-col :span="24" class="menu">
-        <div class="w_1200"></div>
-        <native></native>
+        <div class="w_1200">
+          <native></native>
+        </div>
       </el-col>
       <el-col :span="24" class="main">
         <div class="w_1200">
@@ -16,7 +17,7 @@
             <news title="通知公告"></news>
           </el-col>
           <el-col :span="17" class="news">
-            新闻动态
+            <news :newslist="newslist"></news>
           </el-col>
         </div>
       </el-col>
@@ -31,7 +32,9 @@
         </div>
       </el-col>
       <el-col :span="24" class="down">
-        <div class="w_1200">底部</div>
+        <div class="w_1200">
+          <foot></foot>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -41,16 +44,18 @@
 import top from '../../layout/index/top.vue';
 import native from '../../layout/index/native.vue';
 import news from '../../layout/index/news.vue';
+import foot from '../../layout/index/foot.vue';
 
 export default {
   name: 'index',
   props: {
-    logolist:null,
+    logolist: null,
   },
   components: {
     top,
     native,
     news,
+    foot,
   },
   data: () => ({}),
   created() { },

src/views/list/list.vue

@@ -3,61 +3,37 @@
     <el-row>
       <el-col :span="24" class="top">
         <div class="w_1200">
-          <top :topInfo="topInfo"></top>
+          头部
         </div>
       </el-col>
-      <el-col :span="24">
-        <el-col :span="24" class="menu" :style="`background:${backColor}`">
-          <div class="w_1200">
-            <native></native>
-          </div>
-        </el-col>
+      <el-col :span="24" class="menu">
+        <div class="w_1200">
+          导航
+        </div>
       </el-col>
       <el-col :span="24" class="main">
         <div class="w_1200">
-          <el-col :span="24" class="mainInfo">
-            <el-col :span="6" class="mainLeft">
-              <mainLeft :mainLeftList="mainLeftList"></mainLeft>
-            </el-col>
-            <el-col :span="17" class="mainRight">
-              <mainRight :mainRightList="mainRightList"></mainRight>
-            </el-col>
+          <el-col :span="6" class="mainLeft">
+            左侧导航
+          </el-col>
+          <el-col :span="17" class="mainRight">
+            右侧列表展示
           </el-col>
         </div>
       </el-col>
       <el-col :span="24" class="down">
-        <div class="w_1200">
-          <footDown :downList="downList"></footDown>
-        </div>
+        <div class="w_1200">底部</div>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import top from '../../layout/list/top.vue';
-import native from '../../layout/index/native.vue';
-import mainLeft from '../../layout/list/mainLeft.vue';
-import mainRight from '../../layout/list/mainRight.vue';
-import footDown from '../../layout/index/foot.vue';
 export default {
   name: 'list',
-  props: {
-    topInfo: null,//头部
-    mainLeftList: null,//主体左侧导航
-    mainRightList: null,//主体右侧导航
-    downList: null,//底部
-  },
-  components: {
-    top,
-    native,
-    mainLeft,
-    mainRight,
-    footDown,
-  },
-  data: () => ({
-    backColor: '#850000',
-  }),
+  props: {},
+  components: {},
+  data: () => ({}),
   created() { },
   computed: {},
   methods: {},
@@ -70,33 +46,32 @@ export default {
   margin: 0 auto;
 }
 .top {
-  padding: 15px 0;
+  height: 100px;
   border: 1px solid #ccc;
 }
 .menu {
+  margin-bottom: 20px;
   height: 40px;
+  border: 1px solid #ccc;
 }
 .main {
   min-height: 500px;
-  background-color: #f0f0f0;
-}
-.mainInfo {
-  margin: 20px 0;
+  margin-bottom: 20px;
+  border: 1px solid #ccc;
 }
-.mainLeft {
-  min-height: 44px;
-  background-color: #fff;
+.main .mainLeft {
+  min-height: 500px;
   border: 1px solid #ccc;
 }
-.mainRight {
+.main .mainRight {
   float: right;
   width: 880px;
-  background-color: #fff;
-  padding: 20px 30px;
-  min-height: 460px;
+  min-height: 500px;
+  border: 1px solid #ccc;
 }
 .down {
   height: 100px;
-  background-color: #333;
+  border: 1px solid #ccc;
 }
 </style>
+