图表

components/common/common-header.vue

-<!-- 头部组件 -->
+<!-- Tabs组件 -->
 <template>
-  <section class="common-header" :style="{'background-color': bgColor}">
-      <img src="" @click="back"/>
-      <span></span>
-  </section>
+  <div class="common-header">
+    <span class="left">
+      <img src="../../assets/images/left-array-black.png" @click="back" />
+    </span>
+    <span class="center">{{title}}</span>
+    <span v-show="needRightBtn" class="right">
+      &nbsp;
+      <!-- <img src="../../assets/images/left-array-black.png" @click="back" /> -->
+    </span>
+  </div>
 </template>
 <script>
 export default {
   props: {
     title: {
       type: String,
-      default: '项目名称'
-    },  
-    bgColor: {
-      type: String,
-      default: '#fff'
+      default: "标题内容标题内容标题内容标题"
+    },
+    needRightBtn: {
+      type: Boolean,
+      default: true
     }
   },
   methods: {
-    back() {
-      if( true ) {
-        this.$router.history(-1);
-      } else {
-        this.$rocNative.back();
-      }
-    }
-  },
-}
+    back() {}
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/style/mixin';
-@import '@/assets/style/global';
 .common-header {
-  margin-top: px2rem(60px);
+  padding-top: 50px;
+  display: flex;
+  width: 100%;
+  height: 44px;
+  line-height: 44px;
+  flex-direction: row nowrap;
+  align-content: center;
+  align-items: center;
+  text-align: center;
+  justify-content: center; /* 水平居中 */
+  span {
+    display: block;
+  }
+  .left {
+    box-sizing: border-box;
+    text-align: left;
+    padding-top: 10px;
+    padding-left: 15px;
+    // height: 44px;
+    // line-height: 44px;
+    width: 60px;
+  }
+  .center {
+    flex: 1;
+    font-size: 17px;
+    font-weight: 700;
+    color: #030303;
+  }
+  .right {
+    width: 60px;
+  }
+  img {
+    width: 20px;
+    height: 20px;
+  }
 }
 </style>

components/common/common-loading.vue

@@ -2,7 +2,7 @@
 	<div class="common-loader loader--style3" title="2">
         <div class="loader-mask"></div>
         <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-            width="40" height="40" viewBox="0 0 60 60" style="enable-background:new 0 0 80 80;" xml:space="preserve">
+            width="80" height="80" viewBox="0 0 60 60" style="enable-background:new 0 0 80 80;" xml:space="preserve">
             <path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
                 <animateTransform attributeType="xml"
                 attributeName="transform"
@@ -18,7 +18,7 @@
 </template>
 
 <style lang="scss" scoped>
-    @import '@/assets/style/mixin';
+    // @import '@/assets/style/mixin';
     .common-loader {
         &-mask {
             position: fixed;
@@ -31,8 +31,8 @@
         }
         svg {
             position: absolute;
-            top: px2rem(280px);
-            left: px2rem(172px);
+            top: 280px;
+            left: 172px;
             z-index: 101;
         }
     }

components/common/common-swiper-item.vue

 <!-- Swipter的子组件 -->
 <template>
   <section class="common-swiper-item">
-      
+    <article class="middle">
+      <div class="title">
+        <span>获证率</span>
+        <span>
+          <img src="../../assets/images/left-array-black.png"/>
+        </span>
+      </div>
+      <div class="ratio">
+        <span>21.6%</span>
+      </div>
+      <div class="statics">
+        <span>已获人数 5678</span>
+        <span>应参与人数 5678</span>
+      </div>
+    </article>
+    <article class="mini">
+      <div class="item">
+        <div class="wrapper">
+          <span>
+            <div class="desc">人员参与率</div>
+            <div class="ratio">21.6%</div>
+          </span>
+          <img src="../../assets/images/left-array-black.png" />
+        </div>
+        <span class="desc-num">已获人数 5678</span>
+        <span class="desc-num">应参与人数 5678</span>
+      </div>
+            <div class="item">
+        <div class="wrapper">
+          <span>
+            <div class="desc">人员参与率</div>
+            <div class="ratio">21.6%</div>
+          </span>
+          <img src="../../assets/images/left-array-black.png" />
+        </div>
+        <span class="desc-num">已获人数 5678</span>
+        <span class="desc-num">应参与人数 5678</span>
+      </div>
+      <!-- <div class="item"></div>
+      <div class="item"></div>-->
+    </article>
   </section>
 </template>
 <script>
@@ -9,19 +49,88 @@ export default {
   props: {
     itemData: {
       type: Array,
-      default: () => []
+      default: () => [{}]
     }
   },
-  methods: {
-    
-  },
-}
+  methods: {}
+};
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/style/mixin';
-@import '@/assets/style/global';
 .common-swiper-item {
-  margin-top: 0;
+  display: block;
+  .middle {
+    display: block;
+    box-sizing: border-box;
+    // width: 100%;
+    height: 120px;
+    margin: 5px 15px;
+    // width: 345px;
+    height: 128px;
+    padding: 20px 15px;
+    background: #b4d4ce;
+    box-shadow: 0px 5px 10px 0px rgba(68, 146, 132, 0.1);
+    border-radius: 6px;
+    border: 1px solid rgba(180, 212, 206, 1);
+    .ratio {
+      margin-bottom: 10px;
+      // height: 80px;
+      span {
+        color: #449284;
+        font-size: 29px;
+      }
+    }
+    .title,
+    .statics {
+      display: flex;
+      justify-content: space-between;
+      span {
+        color: #449284;
+        font-size: 14px;
+      }
+    }
+  }
+  .mini {
+    display: block;
+    margin: 9px 15px;
+    .item {
+      display: inline-block;
+      width: 138px;
+      height: 105px;
+      padding: 15px;
+      background: #000;
+      border-radius: 6px;
+      background: rgba(255, 255, 255, 1);
+      box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.04);
+      border: 1px solid rgba(231, 232, 233, 1);
+      .wrapper {
+        display: flex;
+        justify-content: space-between;
+        padding-bottom: 10px;
+        .desc {
+          color: #676869;
+          font-size: 12px;
+          font-weight: 700;
+          padding-bottom: 2px;
+        }
+        .ratio {
+          color: #449284;
+          font-size: 21px;
+          font-weight: 700;
+        }
+        img {
+          width: 30px;
+          height: 30px;
+        }
+      }
+      .desc-num {
+        display: block;
+        height: 22px;
+        line-height: 22px;
+        color: #979899;
+        font-size: 12px;
+      }
+    }
+  }
 }
 </style>

components/common/common-tabs.vue

 <!-- Tabs组件 -->
 <template>
-  <section class="common-tabs">
-      dd
-  </section>
+  <div class="common-tabs-wrapper">
+    <section class="common-tabs">
+      <span
+        v-for="(item, index) in tapList"
+        :class="{'active': index === cIndex}"
+        :key="index"
+        @click="clickTab(index)"
+      >{{item}}</span>
+    </section>
+    <span class="over"></span>
+    <span class="border"></span>
+  </div>
+
 </template>
 <script>
 export default {
+  data() {
+    return {
+      cIndex: 0
+    };
+  },
   props: {
     tapList: {
       type: Array,
-      default: () => []
+      default: () => [
+        "总体概况",
+        "人群分析",
+        "课程分析",
+        "考试分析",
+        "考试分析"
+      ]
     }
   },
   methods: {
-    
-  },
-}
+    clickTab(index) {
+      this.cIndex = index;
+      this.$emit("tabClicked", index);
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/style/mixin';
-@import '@/assets/style/global';
+// article {
+//   height: 36px;
+//   margin-bottom: -4px;
+// }
+.common-tabs-wrapper {
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  .over {
+    display: block;
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    width: 100%;
+    height: 6px;   
+    z-index: 2;
+    background: #fff;
+    // border-bottom: 1px solid red;
+  }
+  .border {
+    display: block;
+    width: 100%;
+    height: 1px;
+    bottom: -5px;
+    left: 0;
+    // padding-top: 6px;
+    border-bottom: 1px solid #F0F1F2;
+    position: absolute;
+    z-index: 2;
+  }
+}
 .common-tabs {
+  white-space: nowrap;
+  overflow-x: auto;
+  height: 30px;
+  padding-bottom: 6px;
+  span {
+    display: inline-block;
+    height: 30px;
+    line-height: 30px;
+    font-size: 13px;
+    font-weight: 700;
+    margin: 0 6px;
+    color: #979899;
+    background: #f0f1f2;
+    padding: 0 12px;
+    border-radius: 30px;
+    &:first-child {
+      margin-left: 15px;
+    }
+    &.active {
+      color: #449284;
+      background: #e3efed;
+    }
+
+  }
   margin-top: 0;
 }
 </style>

components/common/common-title.vue

 <!-- Tabs组件 -->
 <template>
-  <div class="common-header">
-    <span class="left">
-      <img src="../../assets/images/left-array-black.png" @click="back" />
-    </span>
-    <span class="center">{{title}}</span>
-    <span v-show="needRightBtn" class="right">
-      <img src="../../assets/images/left-array-black.png" @click="back" />
-    </span>
-  </div>
+  <section class="common-title">
+    <span class="left">{{title}}</span>
+    <span v-if="needRightBtn"></span>
+  </section>
 </template>
 <script>
 export default {
   props: {
     title: {
       type: String,
-      default: "标题内容标题内容标题内容标题"
+      default: "证书分布情况"
     },
     needRightBtn: {
       type: Boolean,
-      default: true
+      default: false
     }
   },
-  methods: {
-    back() {}
-  }
+  methods: {}
 };
 </script>
 
 <style lang="scss" scoped>
-// @import '@/assets/style/mixin';
-// @import '@/assets/style/global';
-// .common-header {
-//   display: flex;
-//   justify-content: center; /* 水平居中 */
-//   text-align: center;
-// }
-.common-header {
-  display: flex;
-  width: 100%;
-  height: 44px;
-  line-height: 44px;
-  flex-direction: row nowrap;
-  align-content: center;
-  align-items: center;
-  text-align: center;
-  justify-content: center; /* 水平居中 */
+.common-title {
+  margin: 30px 15px 15px;
   span {
-    display: block;
-  }
-  .left {
-    width: 60px;
-  }
-  .center {
-    flex: 1;
-    font-size: 17px;
-    color: #030303;
-  }
-  .right {
-    width: 60px;
-  }
-  img {
-    width: 20px;
-    height: 20px;
+    display: inline-block;
+    &.left {
+      // width: 216px;
+      height: 18px;
+      font-size: 18px;
+      line-height: 18px;
+      font-weight: 700;
+      color: rgba(55, 56, 57, 1);
+    }
   }
 }
 </style>

pages/index.vue

 <template>
   <div class="container">
-    <!-- <h1>nuxt-ssr</h1> -->
+    <CommonHeader></CommonHeader>
+    <!-- <CommonTitle></CommonTitle> -->
+    <!-- <CommonLoading></CommonLoading> -->
+    <!-- <CommonTaps></CommonTaps> -->
+
+    <CommonSwiperItem></CommonSwiperItem>
     <CommonTitle></CommonTitle>
-    <!-- <ve-line :data="chartData"></ve-line> -->
+    <ve-pie :data="chartData" :settings="chartSetting" :echarts="echartsSettings" :height="chartHeight"></ve-pie>
+
   </div>
 </template>
 
 <script>
-import VeLine from 'v-charts/lib/line'
+import VePie from 'v-charts/lib/pie'
+import CommonHeader from '../components/common/common-header'
 import CommonTitle from '../components/common/common-title'
+import CommonLoading from '../components/common/common-loading'
+import CommonTaps from '../components/common/common-tabs'
+import CommonSwiperItem from '../components/common/common-swiper-item'
 
 export default {
+  components: {
+    CommonHeader,
+    CommonTitle, 
+    VePie, 
+    CommonLoading,
+    CommonTaps,
+    CommonSwiperItem,
+  },
   data() {
     return {
       chartData: {
@@ -23,7 +41,16 @@ export default {
           { 'date': '01-05', 'PV': 3123 },
           { 'date': '01-06', 'PV': 7123 }
         ]
-      }
+      },
+      chartSetting: {
+        width: '1000',
+        height: '800'
+      },
+      echartsSettings: {
+
+      },
+      chartWidth: '1000px',
+      chartHeight: '1000px'
     }
   },
   async asyncData() {
@@ -31,7 +58,6 @@ export default {
 
     }
   },
-  components: { CommonTitle, VeLine },
   created() {
     // this.$store.dispatch('searchHospital', { name: '测试' });
   },