已发稿件排行、稿件传播量排行榜、融合号粉丝量排行榜、融合号稿件数量排行榜、融合号稿件传播量排行榜、素材贡献量排行榜页面开发

src/api/index.js

@@ -1146,4 +1146,86 @@ export function getArticlePv(data) {
     method: "GET",
     data,
   });
-}
+}
+
+
+/**
+ * 融合号粉丝量排行榜
+ * @return {AxjxPromise}
+ */
+export function getFansCnt(data) {
+  return ajax({
+    urlType: "rankApi",
+    url: "/fans/fansCnt",
+    method: "GET",
+    data,
+  });
+}
+
+
+/**
+ * 融合号粉丝量排行榜分类数据
+ * @return {AxjxPromise}
+ */
+export function getAccountType(data) {
+  return ajax({
+    urlType: "rankApi",
+    url: "/ronghe/accountType",
+    method: "GET",
+    data,
+  });
+}
+
+
+/**
+ * 融合号稿件数量排行榜
+ * @return {AxjxPromise}
+ */
+export function getRongheArticleCnt(data) {
+  return ajax({
+    urlType: "rankApi",
+    url: "/ronghe/articleCnt",
+    method: "GET",
+    data,
+  });
+}
+
+
+/**
+ * 融合号稿件传播量排行榜
+ * @return {AxjxPromise}
+ */
+export function getRongheArticlePv(data) {
+  return ajax({
+    urlType: "rankApi",
+    url: "/ronghe/articlePv",
+    method: "GET",
+    data,
+  });
+}
+
+/**
+ * 素材贡献量排行榜
+ * @return {AxjxPromise}
+ */
+export function getMaterialCnt(data) {
+  return ajax({
+    urlType: "rankApi",
+    url: "/material/materialCnt",
+    method: "GET",
+    data,
+  });
+}
+
+/**
+ * 素材贡献量排行榜
+ * @return {AxjxPromise}
+ */
+export function getCategoryCnt(data) {
+  return ajax({
+    urlType: "rankApi",
+    url: "/article/categoryCnt",
+    method: "GET",
+    data,
+  });
+}

src/router/rank.js

@@ -4,15 +4,43 @@ const rankRouter = [
         path: "/manuscriptIssued",
         name: "manuscriptIssued",
         component: () =>
-            import(/* webpackChunkName: "manuscriptIssued" */ "../views/Ranking/ManuscriptIssued.vue"),
+            import(/* webpackChunkName: "ManuscriptIssued" */ "../views/Ranking/ManuscriptIssued.vue"),
     },
     //   稿件传播量排行榜
     {
-        path: "/ManuscriptDissemination",
-        name: "ManuscriptDissemination",
+        path: "/manuscriptDissemination",
+        name: "manuscriptDissemination",
         component: () =>
             import(/* webpackChunkName: "ManuscriptDissemination" */ "../views/Ranking/ManuscriptDissemination.vue"),
     },
+    //   融合号粉丝量排行榜
+    {
+        path: "/fusionVermicelli",
+        name: "fusionVermicelli",
+        component: () =>
+            import(/* webpackChunkName: "FusionVermicelli" */ "../views/Ranking/FusionVermicelli.vue"),
+    },
+    //   融合号稿件数量排行榜
+    {
+        path: "/manuscriptQuantity",
+        name: "manuscriptQuantity",
+        component: () =>
+            import(/* webpackChunkName: "ManuscriptQuantity" */ "../views/Ranking/ManuscriptQuantity.vue"),
+    },
+    //   融合号稿件传播量排行榜
+    {
+        path: "/fusionNumberManuscript",
+        name: "fusionNumberManuscript",
+        component: () =>
+            import(/* webpackChunkName: "FusionNumberManuscript" */ "../views/Ranking/FusionNumberManuscript.vue"),
+    },
+    //   素材贡献量排行榜
+    {
+        path: "/materialContribution",
+        name: "materialContribution",
+        component: () =>
+            import(/* webpackChunkName: "MaterialContribution" */ "../views/Ranking/MaterialContribution.vue"),
+    },
 ];
 
 export default rankRouter;

src/views/Ranking/FusionNumberManuscript.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="manuscriptIssued">
+    <el-loading></el-loading>
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>新媒体</el-breadcrumb-item>
+      <el-breadcrumb-item>用户分析</el-breadcrumb-item>
+      <el-breadcrumb-item>融合号稿件传播量排行榜</el-breadcrumb-item>
+    </el-breadcrumb>
+    <div class="groupType">
+      <el-row class="mb-4">
+        <el-button
+          v-for="(cur, ind) in tabs.btns"
+          :key="ind"
+          :class="cur == btnFocus ? 'btnFocus' : ''"
+          @click="handleClick(cur)"
+          >{{ cur }}</el-button
+        >
+      </el-row>
+    </div>
+    <div class="card-rank">
+      <div>
+        <el-table :data="tableData" header-row-class-name="card-tabs-header">
+          <el-table-column align="center" prop="Title" label="关键词" />
+          <el-table-column align="center" prop="pv" label="稿件传播量" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getRongheArticlePv, getAccountType } from "@/api/index";
+
+const ElLoading = require("element-plus/lib/el-loading/index");
+import "element-plus/lib/theme-chalk/el-loading.css";
+
+export default {
+  name: "fusionNumberManuscript",
+  data() {
+    return {
+      activeName: 1,
+      btnFocus: "",
+      tabs: {
+        name: "融合号稿件传播量排行榜",
+        btns: [],
+      },
+      tableData: [],
+      typeData: [],
+      tabHigh: 600,
+    };
+  },
+  mounted() {
+    this.setFansCntTypeData();
+  },
+  methods: {
+    handleClick(e) {
+      this.btnFocus = e;
+      this.setTableData();
+    },
+    setTableData() {
+      const that = this;
+      this.tableData = [];
+      this.curPage = 0;
+      this.load = ElLoading.default.service();
+      getRongheArticlePv({ type: this.btnFocus })
+        .then((res) => {
+          that.total = res.length;
+          that.tableData = res;
+          that.load.close();
+        })
+        .catch((err) => {
+          that.tableData = [];
+          console.log("catch", err);
+        });
+    },
+    setFansCntTypeData() {
+      const that = this;
+      getAccountType()
+        .then((res) => {
+          const [item] = res;
+          that.btnFocus = item;
+          that.tabs.btns = res;
+          that.setTableData();
+        })
+        .catch((err) => {
+          that.tabs.btns = [];
+          console.log("catch", err);
+        });
+    },
+  },
+};
+</script>
+<style>
+.manuscriptIssued {
+  margin: 10px;
+}
+.card-tabs,
+.el-tabs__header {
+  padding: 0 100px;
+}
+.groupType {
+  padding: 15px 0;
+  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
+}
+.card-rank {
+  padding: 10px 15px;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.card-rank div {
+  width: 100%;
+}
+h4 {
+  text-align: left;
+  color: #e18116;
+  margin-bottom: 50px;
+  font-weight: bold;
+}
+.card-tabs-header th {
+  background: #f5f7fa !important;
+}
+.btnFocus {
+  color:#FFF !important;
+  border-color:#409eff !important;
+  background-color:#409eff !important;
+}
+</style>

src/views/Ranking/FusionVermicelli.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="manuscriptIssued">
+    <el-loading></el-loading>
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>新媒体</el-breadcrumb-item>
+      <el-breadcrumb-item>用户分析</el-breadcrumb-item>
+      <el-breadcrumb-item>融合号粉丝量排行榜</el-breadcrumb-item>
+    </el-breadcrumb>
+    <div class="groupType">
+      <el-row class="mb-4">
+        <el-button
+          v-for="(cur,ind) in tabs.btns"
+          :key="ind"
+          :class="cur == btnFocus ? 'btnFocus' : ''"
+          @click="handleClick(cur)"
+          >{{ cur }}</el-button
+        >
+      </el-row>
+    </div>
+    <div class="card-rank">
+      <div>
+        <el-table
+          :data="tableData"
+          header-row-class-name="card-tabs-header"
+        >
+          <el-table-column align="center" prop="title" label="关键词" />
+          <el-table-column align="center" prop="fansCount" label="粉丝量" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getFansCnt, getAccountType } from "@/api/index";
+
+const ElLoading = require("element-plus/lib/el-loading/index");
+import "element-plus/lib/theme-chalk/el-loading.css";
+
+export default {
+  name: "FusionVermicelli",
+  data() {
+    return {
+      activeName: 1,
+      btnFocus: "",
+      tabs: {
+        name: "融合号粉丝量排行榜",
+        btns: [],
+      },
+      tableData: [],
+      typeData: [],
+    };
+  },
+  mounted() {
+    this.setFansCntTypeData();
+  },
+  methods: {
+    handleClick(e) {
+      this.btnFocus = e;
+      this.setTableData();
+    },
+    setTableData() {
+      const that = this;
+      this.tableData = [];
+      this.load = ElLoading.default.service();
+      getFansCnt({ type: this.btnFocus })
+        .then((res) => {
+          that.tableData = res;
+          that.load.close();
+        })
+        .catch((err) => {
+          that.tableData = [];
+          console.log("catch", err);
+        });
+    },
+    setFansCntTypeData() {
+      const that = this;
+      getAccountType()
+        .then((res) => {
+          const [item] = res;
+          that.btnFocus = item;
+          that.tabs.btns = res;
+          that.setTableData();
+
+        })
+        .catch((err) => {
+          that.tabs.btns = [];
+          console.log("catch", err);
+        });
+    },
+  },
+};
+</script>
+<style>
+.manuscriptIssued {
+  margin: 10px;
+}
+.card-tabs,
+.el-tabs__header {
+  padding: 0 100px;
+}
+.groupType {
+  padding: 15px 0;
+  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
+}
+.card-rank {
+  padding: 10px 15px;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.card-rank div {
+  width: 100%;
+}
+h4 {
+  text-align: left;
+  color: #e18116;
+  margin-bottom: 50px;
+  font-weight: bold;
+}
+.card-tabs-header th {
+  background: #f5f7fa !important;
+}
+.btnFocus {
+  color:#FFF !important;
+  border-color:#409eff !important;
+  background-color:#409eff !important;
+}
+</style>

src/views/Ranking/ManuscriptDissemination.vue

@@ -11,7 +11,7 @@
         <el-button
           v-for="cur in tabs.btns"
           :key="cur.value"
-          :type="cur.value == btnFocus ? 'primary' : ''"
+          :class="cur.value == btnFocus ? 'btnFocus' : ''"
           @click="handleClick(cur)"
           >{{ cur.label }}</el-button
         >
@@ -23,10 +23,9 @@
         <el-table
           :data="dayData"
           header-row-class-name="card-tabs-header"
-          :height="tabHigh"
         >
           <el-table-column align="center" prop="name" label="关键词" />
-          <el-table-column align="center" prop="cnt" label="次数" />
+          <el-table-column align="center" prop="cnt" label="传播量" />
         </el-table>
       </div>
       <div>
@@ -34,10 +33,9 @@
         <el-table
           :data="weekData"
           header-row-class-name="card-tabs-header"
-          :height="tabHigh"
         >
           <el-table-column align="center" prop="name" label="关键词" />
-          <el-table-column align="center" prop="cnt" label="次数" />
+          <el-table-column align="center" prop="cnt" label="传播量" />
         </el-table>
       </div>
       <div>
@@ -45,10 +43,9 @@
         <el-table
           :data="monthData"
           header-row-class-name="card-tabs-header"
-          :height="tabHigh"
         >
           <el-table-column align="center" prop="name" label="关键词" />
-          <el-table-column align="center" prop="cnt" label="次数" />
+          <el-table-column align="center" prop="cnt" label="传播量" />
         </el-table>
       </div>
     </div>
@@ -91,7 +88,6 @@ export default {
       dayData: [],
       weekData: [],
       monthData: [],
-      tabHigh: 600,
     };
   },
   mounted() {
@@ -104,15 +100,13 @@ export default {
     },
     setTableData() {
       const that = this;
-      if (!this.load) this.load = ElLoading.default.service();
+      this.load = ElLoading.default.service();
       getArticlePv({ type: this.btnFocus })
         .then((res) => {
           const { day, week, month } = res;
-          const len = month.length + 1;
           that.dayData = day;
           that.weekData = week;
           that.monthData = month;
-          that.tabHigh = len > 15 ? 48 * len : 600;
           that.load.close();
         })
         .catch((err) => {
@@ -124,15 +118,6 @@ export default {
     },
   },
 };
-/*
-
-融合号粉丝量排行榜
-融合号稿件数量排行榜
-融合号稿件传播量排行榜
-素材贡献量排行榜
-直播热度排行榜
-用户停留排行榜
-*/
 </script>
 <style>
 .manuscriptIssued {
@@ -148,10 +133,9 @@ export default {
 }
 .card-rank {
   padding: 10px 15px;
-  border: 1px solid #dcdfe6;
   box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
 }
 .card-rank > div {
@@ -166,4 +150,9 @@ h4 {
 .card-tabs-header th {
   background: #f5f7fa !important;
 }
+.btnFocus {
+  color:#FFF !important;
+  border-color:#409eff !important;
+  background-color:#409eff !important;
+}
 </style>

src/views/Ranking/ManuscriptIssued.vue

@@ -11,7 +11,7 @@
         <el-button
           v-for="cur in tabs.btns"
           :key="cur.value"
-          :type="cur.value == btnFocus ? 'primary' : ''"
+          :class="cur.value == btnFocus ? 'btnFocus' : ''"
           @click="handleClick(cur)"
           >{{ cur.label }}</el-button
         >
@@ -23,7 +23,6 @@
         <el-table
           :data="dayData"
           header-row-class-name="card-tabs-header"
-          :height="tabHigh"
         >
           <el-table-column align="center" prop="name" label="关键词" />
           <el-table-column align="center" prop="cnt" label="次数" />
@@ -34,7 +33,6 @@
         <el-table
           :data="weekData"
           header-row-class-name="card-tabs-header"
-          :height="tabHigh"
         >
           <el-table-column align="center" prop="name" label="关键词" />
           <el-table-column align="center" prop="cnt" label="次数" />
@@ -45,7 +43,6 @@
         <el-table
           :data="monthData"
           header-row-class-name="card-tabs-header"
-          :height="tabHigh"
         >
           <el-table-column align="center" prop="name" label="关键词" />
           <el-table-column align="center" prop="cnt" label="次数" />
@@ -91,7 +88,6 @@ export default {
       dayData: [],
       weekData: [],
       monthData: [],
-      tabHigh: 600,
     };
   },
   mounted() {
@@ -99,20 +95,19 @@ export default {
   },
   methods: {
     handleClick(e) {
+      console.log(e)
       this.btnFocus = e.value;
       this.setTableData();
     },
     setTableData() {
       const that = this;
-      if (!this.load) this.load = ElLoading.default.service();
+      this.load = ElLoading.default.service();
       getArticleCnt({ type: this.btnFocus })
         .then((res) => {
           const { day, week, month } = res;
-          const len = month.length + 1;
           that.dayData = day;
           that.weekData = week;
           that.monthData = month;
-          that.tabHigh = len > 15 ? 48 * len : 600;
           that.load.close();
         })
         .catch((err) => {
@@ -124,15 +119,6 @@ export default {
     },
   },
 };
-/*
-稿件传播量排行榜
-融合号粉丝量排行榜
-融合号稿件数量排行榜
-融合号稿件传播量排行榜
-素材贡献量排行榜
-直播热度排行榜
-用户停留排行榜
-*/
 </script>
 <style>
 .manuscriptIssued {
@@ -148,10 +134,9 @@ export default {
 }
 .card-rank {
   padding: 10px 15px;
-  border: 1px solid #dcdfe6;
   box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
 }
 .card-rank > div {
@@ -166,4 +151,9 @@ h4 {
 .card-tabs-header th {
   background: #f5f7fa !important;
 }
+.btnFocus {
+  color:#FFF !important;
+  border-color:#409eff !important;
+  background-color:#409eff !important;
+}
 </style>

src/views/Ranking/ManuscriptQuantity.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="manuscriptIssued">
+    <el-loading></el-loading>
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>新媒体</el-breadcrumb-item>
+      <el-breadcrumb-item>用户分析</el-breadcrumb-item>
+      <el-breadcrumb-item>融合号稿件数量排行榜</el-breadcrumb-item>
+    </el-breadcrumb>
+    <div class="groupType">
+      <el-row class="mb-4">
+        <el-button
+          v-for="(cur, ind) in tabs.btns"
+          :key="ind"
+          :class="cur == btnFocus ? 'btnFocus' : ''"
+          @click="handleClick(cur)"
+          >{{ cur }}</el-button
+        >
+      </el-row>
+    </div>
+    <div class="card-rank">
+      <div>
+        <el-table :data="tableData" header-row-class-name="card-tabs-header">
+          <el-table-column align="center" prop="Title" label="关键词" />
+          <el-table-column align="center" prop="cnt" label="稿件数量" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getRongheArticleCnt, getAccountType } from "@/api/index";
+
+const ElLoading = require("element-plus/lib/el-loading/index");
+import "element-plus/lib/theme-chalk/el-loading.css";
+
+export default {
+  name: "ManuscriptQuantity",
+  data() {
+    return {
+      activeName: 1,
+      btnFocus: "",
+      tabs: {
+        name: "融合号稿件数量排行榜",
+        btns: [],
+      },
+      tableData: [],
+      typeData: [],
+    };
+  },
+  mounted() {
+    this.setFansCntTypeData();
+  },
+  methods: {
+    handleClick(e) {
+      this.btnFocus = e;
+      this.setTableData();
+    },
+    setTableData() {
+      const that = this;
+      this.tableData = [];
+      this.curPage = 0;
+      this.load = ElLoading.default.service();
+      getRongheArticleCnt({ type: this.btnFocus })
+        .then((res) => {
+          that.total = res.length;
+          that.tableData = res;
+          that.load.close();
+        })
+        .catch((err) => {
+          that.tableData = [];
+          console.log("catch", err);
+        });
+    },
+    setFansCntTypeData() {
+      const that = this;
+      getAccountType()
+        .then((res) => {
+          const [item] = res;
+          that.btnFocus = item;
+          that.tabs.btns = res;
+          that.setTableData();
+        })
+        .catch((err) => {
+          that.tabs.btns = [];
+          console.log("catch", err);
+        });
+    },
+  },
+};
+</script>
+<style>
+.manuscriptIssued {
+  margin: 10px;
+}
+.card-tabs,
+.el-tabs__header {
+  padding: 0 100px;
+}
+.groupType {
+  padding: 15px 0;
+  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
+}
+.card-rank {
+  padding: 10px 15px;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.card-rank div {
+  width: 100%;
+}
+h4 {
+  text-align: left;
+  color: #e18116;
+  margin-bottom: 50px;
+  font-weight: bold;
+}
+.card-tabs-header th {
+  background: #f5f7fa !important;
+}
+.layputPage {
+  text-align: right;
+  margin: 15px 0px 10px;
+}
+.btnFocus {
+  color:#FFF !important;
+  border-color:#409eff !important;
+  background-color:#409eff !important;
+}
+</style>

src/views/Ranking/MaterialContribution.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="manuscriptIssued">
+    <el-loading></el-loading>
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>新媒体</el-breadcrumb-item>
+      <el-breadcrumb-item>用户分析</el-breadcrumb-item>
+      <el-breadcrumb-item>素材贡献量排行榜</el-breadcrumb-item>
+    </el-breadcrumb>
+    <div class="groupType">
+      <el-row class="mb-4">
+        <el-button
+          v-for="cur in tabs.btns"
+          :key="cur.value"
+          :class="cur.value == btnFocus ? 'btnFocus' : ''"
+          @click="handleClick(cur)"
+          >{{ cur.label }}</el-button
+        >
+      </el-row>
+    </div>
+    <div class="card-rank">
+      <div>
+        <h4>分中心日榜</h4>
+        <el-table
+          :data="dayData"
+          header-row-class-name="card-tabs-header"
+        >
+          <el-table-column align="center" prop="name" label="关键词" />
+          <el-table-column align="center" prop="cnt" label="贡献量" />
+        </el-table>
+      </div>
+      <div>
+        <h4>分中心周榜</h4>
+        <el-table
+          :data="weekData"
+          header-row-class-name="card-tabs-header"
+        >
+          <el-table-column align="center" prop="name" label="关键词" />
+          <el-table-column align="center" prop="cnt" label="贡献量" />
+        </el-table>
+      </div>
+      <div>
+        <h4>分中心月榜</h4>
+        <el-table
+          :data="monthData"
+          header-row-class-name="card-tabs-header"
+        >
+          <el-table-column align="center" prop="name" label="关键词" />
+          <el-table-column align="center" prop="cnt" label="贡献量" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getMaterialCnt } from "@/api/index";
+
+const ElLoading = require("element-plus/lib/el-loading/index");
+import "element-plus/lib/theme-chalk/el-loading.css";
+
+export default {
+  name: "materialContribution",
+  data() {
+    return {
+      activeName: 1,
+      btnFocus: "center",
+      tabs: {
+        name: "素材贡献量排行榜",
+        code: 1,
+        btns: [
+          {
+            label: "分中心榜",
+            value: "center",
+          },
+          {
+            label: "人员榜",
+            value: "user",
+          },
+          {
+            label: "中心内部榜",
+            value: 2,
+          },
+          {
+            label: "部门内部人员榜",
+            value: 3,
+          },
+        ],
+      },
+      dayData: [],
+      weekData: [],
+      monthData: [],
+    };
+  },
+  mounted() {
+    this.setTableData();
+  },
+  methods: {
+    handleClick(e) {
+      this.btnFocus = e.value;
+      this.setTableData();
+    },
+    setTableData() {
+      const that = this;
+      this.load = ElLoading.default.service();
+      getMaterialCnt({ type: this.btnFocus })
+        .then((res) => {
+          const { day, week, month } = res;
+          that.dayData = day;
+          that.weekData = week;
+          that.monthData = month;
+          that.load.close();
+        })
+        .catch((err) => {
+          that.dayData = [];
+          that.weekData = [];
+          that.monthData = [];
+          console.log("catch", err);
+        });
+    },
+  },
+};
+</script>
+<style>
+.manuscriptIssued {
+  margin: 10px;
+}
+.card-tabs,
+.el-tabs__header {
+  padding: 0 100px;
+}
+.groupType{
+  padding: 15px 0;
+  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
+}
+.card-rank {
+  padding: 10px 15px;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.card-rank > div {
+  width: 32%;
+}
+h4 {
+  text-align: left;
+  color: #e18116;
+  margin-bottom: 50px;
+  font-weight: bold;
+}
+.card-tabs-header th {
+  background: #f5f7fa !important;
+}
+.btnFocus {
+  color:#FFF !important;
+  border-color:#409eff !important;
+  background-color:#409eff !important;
+}
+</style>