home page

components/pc/pageHeader.vue

@@ -163,7 +163,7 @@
 
       }
     }
-    >.bc-layout-container-header-pad{
+    .container-header-pad{
       height:66*$length;
       background-color: transparent;
     }

components/pc/projectCard.vue

@@ -86,7 +86,7 @@
     .project-card{
       @extend %cursorPointer;
       box-sizing:border-box;
-      padding:0 20*$length 24*$length;
+      padding:21*$length 20*$length 24*$length;
       width:938*$length;
       border-bottom:1px dashed #EFEFEF;
       @extend %flex-row-spb;

pages/home.vue

+<template>
+  <div class="home-container">
+     <div class="home-container__l">
+       <banner :imgArr="imgArr" style="margin-top: 40px"></banner>
+       <card-container style="margin-top: 40px" title="项目推荐" label="换一换" more="加载更多">
+         <project-card></project-card>
+         <project-card></project-card>
+         <project-card></project-card>
+       </card-container>
+       <card-container style="margin-top: 16px" title="精选博文" label="换一换" more="加载更多">
+         <project-card></project-card>
+         <project-card></project-card>
+         <project-card></project-card>
+       </card-container>
+     </div>
+     <div class="home-container__r">
+       <card-container style="margin-top: 40px" title="最新资讯" label="换一换" more="更多">
+
+       </card-container>
+       <card-container style="margin-top: 16px" title="话题热搜榜" label="实时更新" more="更多">
+
+       </card-container>
+       <card-container style="margin-top: 16px"  title="社区精英" label="换一换" more="更多">
+
+       </card-container>
+
+       <card-container style="margin-top: 16px"  title="推荐问答" label="换一换" more="更多">
+
+       </card-container>
+     </div>
+  </div>
+</template>
+
+<script>
+
+
+  import Banner from '../components/pc/banner';
+  import CardContainer from '../components/pc/cardContainer';
+  import ProjectCard from '../components/pc/projectCard';
+  
+  export default {
+    data(){
+      return{
+        imgArr:[
+          'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg',
+          'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/22e2d91201a2478683044f116d1d8186-file',
+          'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file',
+          'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
+          'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg',
+          'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/22e2d91201a2478683044f116d1d8186-file',
+          'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file',
+          'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
+
+        ],
+      }
+    },
+    components:{
+
+      CardContainer,Banner,ProjectCard
+
+
+    },
+
+    methods:{
+      showAlert(){
+
+        // $alert 使用方法
+        this.$alert('确认清空消息列表？', '', {
+          confirmButtonText: '确定',
+          // callback: action => {
+          //   this.$message({
+          //     type: 'info',
+          //     message: `action: ${ action }`,
+          //     confirmButtonPosition: 'left',
+          //   });
+          // }
+        });
+      }
+    },
+
+
+    mounted(){
+      // this.$popupbox();
+
+      // message 使用方法
+
+      // this.$message({
+      //   message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
+      //   type:'info'
+      // })
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .home-container{
+    width: $pageWidth;
+    margin:0 auto;
+    padding-bottom: 32*$length;
+    @extend %flex-row-spb;
+    align-items: flex-start;
+    .home-container__l{
+      overflow:hidden;
+       width:938*$length;
+     }
+    .home-container__r{
+      overflow:hidden;
+      width:302*$length;
+    }
+  }
+</style>