*

dsk-operate-ui/src/assets/styles/index.scss

@@ -121,7 +121,7 @@ aside {
 
 //main-container全局样式
 .app-container {
-  padding: 20px;
+  padding: 16px;
 }
 
 .components-container {
@@ -208,9 +208,12 @@ ul, li {
   margin: 0;
 }
 
+.app-main{
+  background-color: #f5f5f5;
+}
 .app-container {
   margin: 12px 24px;
-  background: #FFFFFF;
+  background-color: #f5f5f5;
   .el-input__inner{
     border-color: #D9D9D9;
     color: #232323;
@@ -425,3 +428,131 @@ ul, li {
     }
   }
 }
+
+//组件公用样式
+//
+// 无边框、阴影card
+.el-card.noborder{
+  border-color: #f5f5f5;
+  box-shadow: none;
+  margin-bottom: 12px;
+  .el-card__body{
+    padding: 0;
+  }
+}
+//el-tabs
+.tabpane{
+  &.w100{
+    .el-tabs__nav-scroll{
+      padding-left: 16px;
+    }
+    .el-tabs__content{
+      padding: 16px;
+    }
+  }
+  .el-tabs__header{
+    margin: 0;
+  }
+  .el-tabs__nav-wrap::after{
+    background-color: #EFEFEF;
+    height: 1px;
+  }
+  .el-tabs__item{
+    font-size: 16px;
+    color: #232323;
+    line-height: 50px;
+    height: 50px;
+  }
+  .is-active{
+    color: #0081FF;
+    font-weight: bold;
+  }
+}
+//按钮
+.btn{
+  margin-left: 8px;
+  border-radius: 4px;
+  display: inline-block;
+  font-size: 14px;
+  cursor: pointer;
+  text-align: center;
+  &.h28 {
+    height: 28px;
+    padding: 0 10px;
+  }
+  &.h32 {
+    height: 32px;
+    padding: 0 16px;
+  }
+  &.h34{
+    width: 80px;
+    height: 34px;
+  }
+  .img{
+    height: 100%;
+    float: left;
+    width: 16px;
+  }
+}
+.btn_default{
+  border: 1px solid #0081FF;
+  color: #0081FF;
+  &.h28{
+    line-height: 26px;
+  }
+  &.h32 {
+    line-height: 30px;
+  }
+  &.h34{
+    line-height: 32px;
+  }
+  &:hover{
+    color: #006AD1;
+    border-color: #006AD1;
+  }
+}
+.btn_primary{
+  background-color: #0081FF;
+  color: #fff;
+  &.h28{
+    line-height: 28px;
+  }
+  &.h32{
+    line-height: 32px;
+  }
+  &.h34{
+    line-height: 34px;
+  }
+  &:hover{
+    background-color: #006AD1;
+  }
+}
+//搜索框
+.searchInput{
+  width: 590px;
+  height: 34px;
+  border-radius: 2px 0px 0px 2px;
+  opacity: 1;
+  border: 1px solid #EFEFEF;
+  position: relative;
+  overflow: hidden;
+  .el-input{
+    margin: -2px -1px;
+  }
+  .btn{
+    background: #F5F5F5;
+    color: #0081FF;
+    cursor: pointer;
+    width: 60px;
+    line-height: 32px;
+    height: 32px;
+    text-align: center;
+    position: absolute;
+    right: 0;
+    top: 0;
+    border-radius: 0;
+    &:hover{
+      color: #006AD1;
+    }
+  }
+}

dsk-operate-ui/src/views/project/projectList/index.vue

 <template>
   <div class="app-container">
-    <el-card class="box-card" shadow="never">
+    <el-card class="box-card noborder nopad">
+      <div class="btns">
+        <div class="btn btn_default h28"><div class="img img1"></div>新建项目商机</div>
+        <div class="btn btn_primary h28"><div class="img img2"></div>批量导出</div>
+      </div>
+      <el-tabs v-model="activeName" @tab-click="handleClick" class="tabpane w100">
+        <el-tab-pane label="我参与的项目" name="first">
+          <div class="searchInput">
+            <el-input type="text" placeholder="请输入项目或业主单位名称关键词进行搜索"></el-input>
+            <div class="btn">搜索</div>
+          </div>
+          <div class="sellist">
+            <div class="selli">
+              <span>
+              地区团队
+              </span>aaa
+            </div>
+            <div class="selli">
+              <span>
+              项目信息
+              </span>aaa
+            </div>
+          </div>
+          <div class="scbtns">
+            <div class="btn btn_primary h34">查询</div>
+            <div class="btn btn_default h34">重置</div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="公司全部项目" name="second">配置管理</el-tab-pane>
+      </el-tabs>
+    </el-card>
+
+    <el-card class="box-card noborder">
+
     </el-card>
   </div>
 </template>
@@ -11,6 +44,7 @@ export default {
   name: 'ProjectList',
   data() {
     return {
+      activeName:'first',
     }
   },
   created() {
@@ -21,5 +55,49 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+  .app-container{
+    padding: 0;
+  }
+  .noborder{
+    position: relative;
+  }
+  .btns{
+    position: absolute;
+    top: 11px;
+    right: 12px;
+    z-index: 2;
+    .img.img1{
+      background: url('../../../../src/assets/images/add.png')no-repeat center center;
+    }
+    .btn_default:hover{
+      .img1{
+        background: url('../../../../src/assets/images/add_1.png')no-repeat center center;
+      }
+    }
+    .img.img2{
+      background: url('../../../../src/assets/images/import.png')no-repeat center center;
+    }
+  }
+  .scbtns{
+    border-top: 1px solid #EFEFEF;
+    padding: 24px 0 8px;
+    .btn{
+      margin: 0 16px 0 0;
+    }
+  }
+  .sellist{
+    width: 100%;
+    padding: 10px 0;
+    .selli{
+      width: 100%;
+      height: 34px;
+      line-height: 34px;
+      font-size: 14px;
+      color: #232323;
+      >span{
+        float: left;
+        margin-right: 28px;
+      }
+    }
+  }
 </style>