添加询盘分析页面

src/views/adweb/data/enquiryAnalysis.vue

@@ -1,571 +1,552 @@
 <template>
-  <div class="wrap home">
+  <div class="search-form">
     <!-- 站点选择和时间筛选 -->
     <a-row class="r1" :gutter="8">
-      <a-col :xl="7" :xxl="6" v-if="siteList.length > 1">
+      <a-col :xl="7" :xxl="6">
         <div class="choose-site">
           <span class="t1">站点：</span>
-          <select-site @com-methods="changeSite" />
-          <!--          <a-select v-model="queryParam.siteId"-->
-          <!--                    show-search-->
-          <!--                    :filter-option="filterOption"-->
-          <!--                    placeholder="全部站点"-->
-          <!--                    style="width: 70%"-->
-          <!--                    @change="reloadData">-->
-          <!--            <a-select-option v-for="data in siteList" :key="data.id" :value="data.id">-->
-          <!--              {{ data.name }}-->
-          <!--            </a-select-option>-->
-          <!--          </a-select>-->
+          <select-site @set-site-info="changeSite" select-width="100%" />
         </div>
       </a-col>
       <a-col :xl="8" :xxl="6">
         <div class="choose-site">
           <span class="t1">统计时间：</span>
-          <a-range-picker @change="onChangeDatePciker" :disabledDate="disabledDate" :value="rangeDate" style="width: 70%" />
+          <a-range-picker @change="onChangeDatePicker" :disabledDate="disabledDate" :value="rangeDate" style="width: 70%" />
         </div>
       </a-col>
       <a-col :xl="9" :xxl="12">
-        <a-button :class="queryParam.dateType == '' ? 'active' : ''" @click="setTime('')">全部时间</a-button>
-        <a-button :class="queryParam.dateType == 'thirtyDay' ? 'active' : ''" @click="setTime('thirtyDay')">近30天</a-button>
-        <a-button :class="queryParam.dateType == 'sevenDay' ? 'active' : ''" @click="setTime('sevenDay')">近一周</a-button>
-        <a-button :class="queryParam.dateType == 'yesterday' ? 'active' : ''" @click="setTime('yesterday')">昨日</a-button>
-        <a-button :class="queryParam.dateType == 'today' ? 'active' : ''" @click="setTime('today')">今日</a-button>
+        <a-button-group class="time-btn-group">
+          <a-button :class="queryParam.dateType == '' ? 'active' : ''" @click="setTime('')">全部时间</a-button>
+          <a-button :class="queryParam.dateType == 'thirtyDay' ? 'active' : ''" @click="setTime('thirtyDay')">近30天</a-button>
+          <a-button :class="queryParam.dateType == 'sevenDay' ? 'active' : ''" @click="setTime('sevenDay')">近一周</a-button>
+          <a-button :class="queryParam.dateType == 'yesterday' ? 'active' : ''" @click="setTime('yesterday')">昨日</a-button>
+          <a-button :class="queryParam.dateType == 'today' ? 'active' : ''" @click="setTime('today')">今日</a-button>
+        </a-button-group>
       </a-col>
     </a-row>
-
-    <!-- 占位 -->
-    <div style="height: 20px"></div>
-
-    <a-spin :spinning="loading" tips="加载中...">
-      <a-row class="r2">
+  </div>
+  <a-spin :spinning="loading" tip="加载中...">
+    <a-row class="r2">
         <a-col :span="8">
-          <p class="t1"><img src="../../../assets/home/enquiryNum.svg" />询盘数</p>
-          <router-link
-            :to="{
-              path: '/inquiry/list',
-              query: { dateType: queryParam.dateType, start: queryParam.start, end: queryParam.end, offset: 1 },
-            }"
-          >
-            <p class="t2">{{ enquiryIndexNumber.enquiry }}</p>
-          </router-link>
+          <p class="t1">询盘数</p>
+          <p class="t3">{{ enquiryIndexNumber.enquiry }}</p>
         </a-col>
         <a-col :span="8">
-          <p class="t1"><img src="../../../assets/home/unReadEnquiryNum.svg" />未读询盘数</p>
-          <router-link
-            :to="{
-              path: '/inquiry/list',
-              query: { dateType: queryParam.dateType, start: queryParam.start, end: queryParam.end, readStatus: '0', offset: 1 },
-            }"
-          >
-            <p class="t2">{{ enquiryIndexNumber.unRead }}</p>
-          </router-link>
+          <p class="t1">未读询盘数</p>
+            <p class="t3">{{ enquiryIndexNumber.unRead }}</p>
         </a-col>
         <a-col :span="8">
-          <p class="t1"><img src="../../../assets/home/conversionRate.svg" />UV到询盘的转化率</p>
+          <p class="t1">UV到询盘的转化率</p>
           <p class="t3">{{ enquiryIndexNumber.conversionRate }}</p>
         </a-col>
       </a-row>
 
-      <a-row class="r3">
-        <a-col><p class="title">询盘趋势图</p></a-col>
-      </a-row>
-      <a-row class="r5" :gutter="[20, 20]">
-        <a-row class="r5-1">
-          <a-col :span="24">
-            <div class="fr" v-if="coreDataChart.x.length > 0">
-              <span><i style="background: #544beb"></i>UV</span>
-              <span><i style="background: #58cca8"></i>询盘数</span>
-            </div>
-            <area-chart v-if="coreDataChart.x.length > 0" :dataSource="coreDataChart" />
-            <a-empty v-else style="float: right; width: 100%; margin-top: 110px" />
-          </a-col>
-        </a-row>
-      </a-row>
-
-      <a-row class="r3">
-        <a-col><p class="title">询盘地域分布</p></a-col>
-      </a-row>
-      <a-row class="r5" :gutter="[20, 20]">
-        <a-col :span="12">
-          <map-adweb
-            v-if="countryMapData.length > 0"
-            :dataSource="countryMapData"
-            :aliases="[
-              { dataKey: 'country', alias: '国家' },
-              { dataKey: 'num', alias: '访问数量' },
-            ]"
-            :height="chartheight"
-          />
-          <a-empty v-else style="margin-top: 50px">
-            <template #description>
-              <span>暂无数据</span>
-            </template>
-          </a-empty>
-        </a-col>
-        <a-col :span="2" />
-        <a-col :span="10">
-          <a-table
-            style="margin-top: 40px; margin-bottom: 40px"
-            :rowKey="
-              (record, index) => {
-                return index;
-              }
-            "
-            class="chartTable"
-            :scroll="{ y: 400 }"
-            :pagination="false"
-            :columns="chartDetailDataCol"
-            :customRow="clickRow"
-            :data-source="chartDetailData"
-            :showHeader="false"
-          >
-            <template #flagSlot="text, record">
-              <span class="img-box">
-                <img src="../../../assets/images/flag_placeholder.png" :class="'flag flag-' + record.countryCode" alt="Czech Republic" />
-              </span>
-            </template>
-            <template #numSlot="text, record"> {{ record.num }} | {{ record.proportion }} </template>
-            <template #countryNameSlot="text, record">
-              <a> {{ text === null ? record.country : text }}</a>
-            </template>
-          </a-table>
-        </a-col>
-      </a-row>
-    </a-spin>
-  </div>
+    <a-row>
+      <a-col :span="24">
+        <a-card style="margin: 10px" title="询盘趋势图">
+          <a-row class="r5" :gutter="[20,20]">
+            <a-row class="r5-1">
+              <a-col :span="24">
+                <area-chart v-if="coreDataChart.x.length > 0"
+                            :dataSource="coreDataChart"></area-chart>
+                <a-empty v-else style="float: right;width: 100%;margin-top: 110px;"></a-empty>
+              </a-col>
+            </a-row>
+          </a-row>
+        </a-card>
+      </a-col>
+      <a-col :span="24">
+        <a-card style="margin: 10px" title="询盘地域分布">
+          <a-row class="r5">
+            <a-col :span="18">
+              <map-adweb v-if="countryMapData.length > 0" :dataSource="countryMapData"
+                         height="400"></map-adweb>
+              <a-empty v-else style="margin-top: 50px;">
+              </a-empty>
+            </a-col>
+
+            <a-col :span="6">
+              <a-table
+                :rowKey="(record,index)=>{return index}"
+                class="chartTable"
+                :scroll="{ y: 500 }"
+                :pagination=false
+                :columns="chartDetailDataCol"
+                :data-source="chartDetailData"
+                :showHeader="false">
+                <template #bodyCell="{ column, record }">
+                  <template v-if="column.key === 'flagSlot' ">
+            <span class="img-box">
+              <span :class="'flag-icon flag-icon-'+record.countryCode"></span>
+            </span>
+                  </template>
+                  <template v-if="column.key === 'numSlot' ">
+                    {{ record.totalUsers }} | {{ record.totalUsersProportion }}
+                  </template>
+                </template>
+              </a-table>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+    </a-row>
+  </a-spin>
 </template>
-
-<script>
-  import '/@/assets/less/common.less';
-  import { getAction } from '/@/api/manage/manage';
-  import { JeecgListMixin } from '/@/hooks/component/JeecgListMixin';
-  import moment from 'moment';
-  import areaChart from './chart/areaChart.vue';
-  import MapAdweb from '/@/components/chart/mapAdweb.vue';
-  import selectSite from '/@/components/Adweb/selectSite.vue';
-
-  export default {
-    name: 'EnquiryAnalysis',
-    components: {
-      areaChart,
-      MapAdweb,
-      selectSite,
-    },
-    mixins: [JeecgListMixin],
-    data() {
-      return {
-        // 通用
-        ipagination: {
-          current: 1,
-          pageSize: 30,
-          pageSizeOptions: ['15', '30', '45', '60'],
-          showTotal: (total, range) => {
-            return range[0] + '-' + range[1] + ' 共' + total + '条';
-          },
-          showQuickJumper: true,
-          showSizeChanger: true,
-          total: 0,
-        },
-        disableMixinCreated: true,
-        loading: true,
-        // 筛选
-        siteList: [],
-        rangeDate: undefined,
-        // uv、pv、询盘数
-        enquiryIndexNumber: {
-          unRead: 0,
-          conversionRate: '0%',
-          enquiry: 0,
-        },
-        // 数据趋势的数据
-        coreDataChart: {
-          x: [],
-          uv: [],
-          pv: [],
-          enquiry: [],
-        },
-        // 访客数据地图分布
-        chartheight: 400,
-        countryMapData: [],
-        // 访客地域分布列表
-        chartDetailData: [],
-        chartDetailDataCol: [
-          {
-            title: '国旗',
-            align: 'center',
-            width: 30,
-            scopedSlots: { customRender: 'flagSlot' },
-          },
-          {
-            title: '国家',
-            align: 'left',
-            dataIndex: 'countryName',
-            scopedSlots: { customRender: 'countryNameSlot' },
-          },
-          {
-            title: '数量',
-            align: 'right',
-            dataIndex: 'num',
-            scopedSlots: { customRender: 'numSlot' },
-          },
-        ],
+<script lang="ts" name="data-enquiryAnalysis" setup>
+import selectSite from "@/components/Adweb/selectSite.vue";
+import areaChart from "./chart/areaChart.vue";
+import { reactive, ref } from "vue";
+import { getAction } from "@/api/manage/manage";
+import MapAdweb from "@/components/chart/mapAdweb.vue";
+import "flag-icon-css/css/flag-icons.css";
+import dayjs from 'dayjs';
+
+const queryParam = reactive<any>({});
+queryParam.limit = 10;
+queryParam.siteCode = localStorage.getItem("siteCode");
+const loading = ref(false);
+const chartDetailDataCol = ref([
+  {
+    title: "国旗",
+    align: "center",
+    key: "flagSlot",
+    width: 30,
+    scopedSlots: { customRender: "flagSlot" }
+  },
+  {
+    title: "国家",
+    align: "left",
+    dataIndex: "countryName",
+    customRender: function(text, record) {
+      return text === null ? record.country : text;
+    }
+  },
+  {
+    title: "数量",
+    align: "right",
+    key: "numSlot",
+    scopedSlots: { customRender: "numSlot" }
+  }
+]);
+const enquiryIndexNumber = ref<any>({
+  unRead: 0,
+  conversionRate: '0%',
+  enquiry: 0,
+});
+const countryMapData = ref<any>([]);
+  const coreDataChart = ref({
+  x: [],
+  uv: [],
+  pv: [],
+  enquiry: []
+});
+
+const chartDetailData = ref<any>([]);
+
+
+function changeSite(selectedSiteInfo: any) {
+  queryParam.siteCode = selectedSiteInfo.code;
+  localStorage.setItem("siteCode", queryParam.siteCode);
+  reloadData();
+}
+
+function reloadData() {
+  loading.value = true;
+  getFlowIndexNumber();
+  getCountryMapData();
+}
+//访客量、浏览量、询盘数量、折线图以及统计
+const getFlowIndexNumber = async () => {
+  try {
+    const res = await getAction("/dmp-data/site-overview/stats", queryParam);
+    if (!res.result) {
+      enquiryIndexNumber.value = {
+        unRead: 0,
+        conversionRate: '0%',
+        enquiry: 0,
       };
-    },
-    mounted() {
-      this.queryParam.dateType = 'sevenDay';
-      this.rangeDate = [moment().subtract(7, 'days'), moment().subtract(1, 'days')];
-      this.getSiteList();
-    },
-    methods: {
-      // ========================================== 筛选 ==========================================
-      //获取站点列表
-      getSiteList() {
-        let that = this;
-        getAction('/sys/api/getSiteListByUid')
-          .then(function (res) {
-            if (res.code == 0) {
-              if (res.data || res.data.length) {
-                let defaultSiteCode = localStorage.getItem('siteCode');
-                if (defaultSiteCode) {
-                  let isInSite = false;
-                  for (let i in res.data) {
-                    if (defaultSiteCode === res.data[i].code) {
-                      isInSite = true;
-                      that.queryParam.siteId = res.data[i].id;
-                      break;
-                    }
-                  }
-                  if (!isInSite) {
-                    that.queryParam.siteId = res.data[0].id;
-                    localStorage.setItem('siteCode', res.data[0].code);
-                  }
-                } else {
-                  that.queryParam.siteId = res.data[0].id;
-                  localStorage.setItem('siteCode', res.data[0].code);
-                }
-                that.siteList = res.data;
-                that.reloadData();
-              }
-            } else {
-              that.$message.error('获取站点失败！');
-            }
-          })
-          .catch(function (err) {
-            console.log(err);
-          });
-      },
-      // 搜索
-      filterOption(inputValue, option) {
-        return option.componentOptions.children[0].text.indexOf(inputValue) >= 0;
-      },
-      //搜索条件部分的逻辑
-      onChangeDatePciker(date, dateString) {
-        if (dateString.length > 0) {
-          this.rangeDate = date;
-          this.queryParam.start = dateString[0];
-          this.queryParam.end = dateString[1];
-          this.queryParam.dateType = undefined;
-          this.reloadData();
-        }
-      },
-      //日期选择只能今天之前
-      disabledDate(current) {
-        return current && current > moment().subtract(0, 'days');
-      },
-      //设置列表的时间查询条件
-      setTime(time) {
-        this.queryParam.dateType = time;
-        this.queryParam.start = '';
-        this.queryParam.end = '';
-        if (time == '') {
-          this.rangeDate = undefined;
-        } else if (time == 'sevenDay') {
-          this.rangeDate = [moment().subtract(7, 'days'), moment().subtract(1, 'days')];
-        } else if (time == 'thirtyDay') {
-          this.rangeDate = [moment().subtract(30, 'days'), moment().subtract(1, 'days')];
-        } else if (time == 'yesterday') {
-          this.rangeDate = [moment().subtract(1, 'days'), moment().subtract(1, 'days')];
-        } else if (time == 'today') {
-          this.rangeDate = [moment(), moment()];
-        }
-        this.reloadData();
-      },
-
-      changeSite(value, e) {
-        this.selectSiteInfo = e.data.attrs.info;
-        this.queryParam.siteId = this.selectSiteInfo.id;
-        this.reloadData(this.queryParam.siteId);
-      },
-
-      //重新刷新页面数据
-      reloadData(value) {
-        this.loading = true;
-        for (let i in this.siteList) {
-          if (value === this.siteList[i].id) {
-            localStorage.setItem('siteCode', this.siteList[i].code);
-          }
-        }
-        this.getFlowIndexNumber();
-        this.getCountryMapData();
-      },
-      // ========================================== 访客量、浏览量、询盘数量、折线图以及统计 ==========================================
-      getFlowIndexNumber() {
-        let that = this;
-        getAction('/datacenter/daily/number', this.queryParam).then(function (res) {
-          console.log('res', res);
-          if (!res.result) {
-            that.enquiryIndexNumber = {
-              unRead: 0,
-              conversionRate: '0%',
-              enquiry: 0,
-            };
-            that.coreDataChart = {
-              x: [],
-              uv: [],
-              pv: [],
-              enquiry: [],
-            };
-            that.loading = false;
-            return;
-          }
-
-          that.enquiryIndexNumber = res.result.enquiryIndexNumber;
-          let r = res.result.dailyTrends;
-          let x = [],
-            uv = [],
-            enquiry = [];
-          if (r != null && r.length > 0) {
-            for (let item of r) {
-              x.push(item.date);
-              uv.push(item.uvCount);
-              enquiry.push(item.enquiryCount);
-            }
-          }
-          that.coreDataChart.x = x;
-          that.coreDataChart.uv = uv;
-          that.coreDataChart.enquiry = enquiry;
-          that.loading = false;
-        });
-      },
-      // ========================================== 访客数地域分布 ==========================================
-      getCountryMapData() {
-        let that = this;
-        that.countryMapData = [];
-        that.chartDetailData = [];
-        getAction('/datacenter/enquiry/map', this.queryParam).then(function (res) {
-          if (res.code == 200) {
-            that.countryMapData = res.result.accessMap;
-            that.chartDetailData = res.result.accessList;
-            if (that.chartDetailData !== null && that.chartDetailData.length > 0) {
-              for (let item of that.chartDetailData) {
-                let searchText = item.countryName ? item.countryName : item.country;
-                let itemQueryParam = {
-                  dateType: that.queryParam.dateType,
-                  start: that.queryParam.start,
-                  end: that.queryParam.end,
-                  offset: 1, //日期相对今天偏移1天
-                  searchText: searchText,
-                };
-                item.queryParam = itemQueryParam;
-              }
-            }
-          }
-        });
-      },
-      clickRow(record, index) {
-        return {
-          on: {
-            click: () => {
-              this.$router.push({ path: '/inquiry/list', query: record.queryParam });
-            },
-          },
-        };
-      },
-    },
-  };
-</script>
+      coreDataChart.value = {
+        x: [],
+        uv: [],
+        pv: [],
+        enquiry: []
+      };
+      loading.value = false;
+      return;
+    }
+
+    enquiryIndexNumber.value.unRead = res.result.totalUsers;
+    enquiryIndexNumber.value.conversionRate = res.result.enquiryConversionRate;
+    enquiryIndexNumber.value.enquiry = res.result.enquires;
+    const r = res.result.dailyStats;
+    const x = [], pv = [], uv = [], enquiry = [];
+    if (r != null && r.length > 0) {
+      for (let item of r) {
+        x.push(item.date);
+        pv.push(item.pageViews);
+        uv.push(item.totalUsers);
+        enquiry.push(item.enquires);
+      }
+    }
+    coreDataChart.value.x = x;
+    coreDataChart.value.pv = pv;
+    coreDataChart.value.uv = uv;
+    coreDataChart.value.enquiry = enquiry;
+    loading.value = false;
+  } catch (error) {
+    console.error(error);
+  }
+};
+const getCountryMapData = async () => {
+  try {
+    const res = await getAction("/dmp-data/country/stats", queryParam);
+    if (res.code === 200) {
+      chartDetailData.value = res.result;
+      countryMapData.value = chartDetailData.value.map(entry => ({
+        name: entry.countryName,
+        value: entry.totalUsers
+      }));
+      console.log("countryMapData", countryMapData.value);
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+const rangeDate = ref([]);
+
+const onChangeDatePicker = (date, dateString) => {
+  if (dateString.length > 0) {
+    console.log("rangeDate:", rangeDate.value);
+    rangeDate.value = date;
+    console.log("date:", date);
+    queryParam.start = dateString[0];
+    queryParam.end = dateString[1];
+    queryParam.dateType = undefined;
+    reloadData();
+  }
+};
+
+function disabledDate(current) {
+  return current && current > dayjs();
+}
+
+const setTime = (time) => {
+  queryParam.dateType = time;
+  queryParam.start = "";
+  queryParam.end = "";
+
+  if (time == "") {
+    rangeDate.value = undefined;
+  } else if (time == "sevenDay") {
+    rangeDate.value = [dayjs().add(-7, 'd'), dayjs().add(-1, 'd')];
+  } else if (time == "thirtyDay") {
+    rangeDate.value = [dayjs().add(-30, 'd'), dayjs().add(-1, 'd')];
+  } else if (time == "yesterday") {
+    rangeDate.value = [dayjs().add(-1, 'd'), dayjs().add(-1, 'd')];
+  } else if (time == "today") {
+    rangeDate.value = [dayjs(), dayjs()];
+  }
 
-<!-- 询盘页面的样式 -->
+  reloadData();
+};
+
+</script>
 <style lang="less" scoped>
-  .img-box {
-    width: 22px;
-    height: 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.self-pop {
+  .ant-popover-inner-content {
+    background: rgb(245, 243, 254);
 
-    img {
-      width: 100%;
-      height: 100%;
+    p {
+      font-size: 13px;
     }
   }
 
-  .ant-alert {
-    deep(.ant-btn) {
-      border-radius: 0;
-      margin-left: 10px;
-    }
+  .ant-popover-arrow {
+    border-color: rgb(245, 243, 254) !important;
+  }
+}
+
+.img-box {
+  width: 22px;
+  height: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    width: 100%;
+    height: 100%;
   }
+}
 
-  .theme-color {
-    color: @primary-color;
+.ant-alert {
+  /deep/ .ant-btn {
+    border-radius: 0;
+    margin-left: 10px;
   }
+}
 
-  .r1 {
-    .choose-site {
-      display: flex;
+.theme-color {
+  color: @primary-color;
+}
 
-      /deep/ .ant-select-selection {
-        background: transparent;
-        color: #fff;
-      }
+.r1 {
+  margin: 20px;
 
-      /deep/ .ant-select-selection__clear {
-        background: transparent;
-      }
+  .choose-site {
+    display: flex;
+  }
 
-      /deep/ i,
-      /deep/ .ant-calendar-range-picker-separator {
-        color: #fff;
-      }
+  .t1 {
+    font-size: 18px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 32px;
+    margin-left: 10px;
+  }
+
+  .ant-form-item {
+    flex: 1;
+  }
+
+  .ant-calendar-picker {
+    margin-right: 20px;
+  }
+
+
+  /deep/ .ant-btn {
+    background: transparent;
+    margin-right: 10px;
+    padding: 4px 15px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    transition: all 0.3s;
+
+    &:hover {
+      color: @primary-color;
+      border-color: @primary-color;
     }
 
-    .t1 {
-      font-size: 18px;
-      color: #fff;
+    &.active {
+      color: @primary-color;
+      background: #e6f7ff;
+      border-color: @primary-color;
     }
+  }
 
-    .ant-calendar-picker {
-      margin-right: 20px;
+  .time-btn-group {
+    /deep/ .ant-btn {
+      background: #fff;
+      padding: 4px 15px;
+      border: 1px solid #d9d9d9;
+      transition: all 0.3s;
+      margin-right: 0;
+
+      &:first-child {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+      }
 
-      /deep/ .ant-input {
-        background: transparent;
-        color: #e2e2e2;
+      &:last-child {
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
       }
-    }
 
-    /deep/ .ant-btn {
-      background: transparent;
-      color: #e2e2e2;
-      margin-right: 10px;
+      &:not(:first-child) {
+        margin-left: -1px;
+      }
 
-      &.active {
+      &:hover {
+        color: @primary-color;
+        border-color: @primary-color;
+        position: relative;
+        z-index: 1;
         background: #fff;
-        border-color: #fff;
+      }
+
+      &.active {
         color: @primary-color;
+        background: #e6f7ff;
+        border-color: @primary-color;
+        position: relative;
+        z-index: 2;
       }
     }
   }
+}
 
-  .r2 {
-    background: #fff;
-    border-radius: 10px;
-    padding: 30px 20px;
+.r2 {
+  background: #fff;
+  padding: 30px 20px;
+  margin: 10px;
 
-    .ant-col:not(:last-child) {
-      border-right: 1px solid #e6e6e6;
-    }
+  .ant-col:not(:last-child) {
+    border-right: 1px solid #e6e6e6;
+  }
 
-    p {
-      margin: 0;
-      text-align: center;
+  p {
+    margin: 0;
+    text-align: center;
 
-      &.t1 {
-        color: #333;
-        margin-bottom: 15px;
+    &.t1 {
+      color: #333;
+      margin-bottom: 15px;
 
-        img {
-          margin-right: 10px;
-          width: 15px;
-          margin-top: -5px;
-        }
+      img {
+        margin-right: 10px;
+        width: 15px;
+        margin-top: -5px;
       }
+    }
 
-      &.t2 {
-        color: @primary-color;
-        font-size: 30px;
-        font-weight: 500;
-        line-height: 1;
-        padding-left: 25px;
-      }
+    &.t2 {
+      color: @primary-color;
+      font-size: 30px;
+      font-weight: 500;
+      line-height: 1;
+      padding-left: 25px;
+    }
 
-      &.t3 {
-        font-size: 30px;
-        font-weight: 500;
-        line-height: 1;
-        padding-left: 25px;
-      }
+    &.t3 {
+      font-size: 32px;
+      font-weight: 700;
+      letter-spacing: 0px;
+      line-height: 38px;
+      color: rgba(13, 62, 122, 1);
     }
   }
+}
 
-  .r3 {
-    margin-top: 20px;
-  }
+.r5 {
+  background: #fff;
+  padding: 10px;
+  border-radius: 10px;
+  margin: 0 !important;
 
-  .r4 {
-    margin-top: 20px;
+  .wrap {
+    box-shadow: 0px 2px 4px 0px @primary-color;
+    padding: 15px;
+    border-radius: 10px;
+    overflow: hidden;
+    background: #fff;
+    transition: all .3s;
 
-    /deep/ .ant-table-tbody {
-      background: #fff;
+    &.blue {
+      box-shadow: 0px 2px 4px 0px @primary-color;
     }
 
-    /deep/ .ant-table-tbody > tr > td {
-      border-bottom: 1px solid #f7f7f7;
+    &.effect:hover {
+      box-shadow: none;
+      background: rgb(241, 248, 255);
     }
-  }
-</style>
 
-<!-- 首页的样式 -->
-<style scoped lang="less">
-  p,
-  span {
-    color: #000;
-    margin: 0;
+    img {
+      width: 15px;
+    }
+
+    .fr {
+      float: right;
+      width: calc(100% - 15px);
+      text-align: center;
+
+      p:last-child {
+        font-size: 30px;
+        text-align: center;
+        margin-top: 10px;
+
+      }
+    }
   }
 
-  .theme-color {
-    color: @primary-color;
+  /deep/ .ant-table-thead > tr > th {
+    background: rgb(241, 248, 255);
+    border: none;
+    color: #000;
+    padding: 10px;
   }
 
-  .title {
-    font-size: 18px;
+  /deep/ .ant-table-tbody .ant-table-row td {
+    padding: 10px;
     color: #000;
   }
-</style>
-<style lang="less">
-  .pop-wrap {
-    .ant-popover-inner-content {
-      padding: 0;
+
+  .r5-1 {
+    display: inline-block;
+    width: 100%;
+    margin-top: 30px;
+
+    .fl {
+      float: left;
+      position: relative;
+
+      .ant-btn {
+        border-radius: 0;
+        border: none;
+        margin-right: 10px;
+      }
     }
 
-    .wrap {
-      width: 400px;
-      padding: 20px 20px;
-      background: url('../../../assets/home2-7/pop-bg.svg') no-repeat;
-      background-position: bottom right;
+    .fr {
+      float: right;
+      line-height: 2;
 
-      p {
-        line-height: 1.8;
+      span {
+        margin-right: 30px;
 
         i {
-          color: @primary-color;
-          margin-right: 10px;
+          display: inline-block;
+          width: 25px;
+          height: 3px;
+          background: #544BEB;
+          position: relative;
+          top: -4px;
+          margin-right: 20px;
         }
-      }
 
-      .name {
-        font-size: 18px;
-        margin-bottom: 20px;
+        &:last-child i {
+          background: #F0B358;
+        }
       }
+    }
+  }
 
-      .job {
-        font-size: 15px;
-        color: #9f9f9f;
-      }
+  .box {
+    border-radius: 10px;
+    text-align: center;
+    min-height: 180px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    p {
+      color: #fff;
 
-      .ant-col-8 {
-        text-align: right;
+      img {
+        width: 19px;
+        margin: -5px 10px 0 0;
       }
     }
+
+    .num {
+      font-size: 30px;
+      margin-bottom: 10px;
+    }
+
+    &.b1 {
+      background: rgb(233, 107, 95);
+    }
+
+    &.b2 {
+      background: rgb(88, 204, 168);
+    }
+
+    &.b3 {
+      background: rgb(124, 152, 252);
+    }
+
+    &.b4 {
+      background: #F0B358;
+    }
   }
-</style>
+}
+</style>