标题组件

components/common/common-title-mini.vue

+<!-- 标题组件 -->
+<template>
+  <ul class="common-title-mini">
+    <li class="left">{{title}}</li>
+    <li v-if="needRightBtn"></li>
+  </ul>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "证书分布情况"
+    },
+    needRightBtn: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.common-title-mini {
+  // margin: 15px;
+  margin: 30px 15px 20px;
+  li {
+    display: inline-block;
+    &.left {
+      // width: 216px;
+      display: block;
+      height: 18px;
+      line-height: 18px;
+      font-size: 18px;
+      font-weight: 700;
+      color: rgba(55, 56, 57, 1);
+    }
+  }
+}
+</style>

pages/index.vue

@@ -225,7 +225,7 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .container {
   margin: 0 auto;
   min-height: 100vh;

pages/rank-days.vue

+<template>
+  <div>
+    <CommonHeader title="完成天数排名"></CommonHeader>
+    <CommonTitle title="证书分布情况"></CommonTitle>
+    <RankingItemDays :rankList="rankList"></RankingItemDays>
+  </div>
+</template>
+<script>
+import CommonHeader from "@/components/common/common-header";
+import CommonTitle from "@/components/common/common-title";
+import RankingItemDays from "@/components/bussiness/ranking-item-days";
+export default {
+  props: {
+    rankList: {
+      type: Array,
+      default: () => [
+        {
+          subId: 10000,
+          subName: null,
+          certCount: 0,
+          joinCount: 0,
+          certRate: 0,
+          costTime: 2000
+        },
+        {
+          subId: 10000,
+          subName: null,
+          certCount: 0,
+          joinCount: 0,
+          certRate: 0,
+          costTime: 2000
+        },
+        {
+          subId: 10000,
+          subName: null,
+          certCount: 0,
+          joinCount: 0,
+          certRate: 0,
+          costTime: 2000
+        },
+        {
+          subId: 10000,
+          subName: null,
+          certCount: 0,
+          joinCount: 0,
+          certRate: 0,
+          costTime: 2000
+        },
+        {
+          subId: 10000,
+          subName: null,
+          certCount: 0,
+          joinCount: 0,
+          certRate: 0,
+          costTime: 2000
+        }
+      ]
+    }
+  },
+  data() {
+    return {};
+  },
+  components: {
+    CommonHeader,
+    CommonTitle,
+    RankingItemDays
+  },
+};
+</script>
+<style lang="less" scoped>
+</style>
\ No newline at end of file