选择站点显示url

src/components/Adweb/selectSite.vue

@@ -49,7 +49,7 @@
   };
 
   let siteInfo = reactive([{ code: '', id: '', name: '' }]);
-  let selectSiteInfo = reactive({ code: '', id: '', name: '', status: '' });
+  let selectSiteInfo = reactive({ code: '', id: '', name: '', status: '', domain: '' });
   let siteCode = ref();
 
   onBeforeMount(() => {

src/views/dashboard/Analysis/homePage/adweb3Home.vue

@@ -6,6 +6,7 @@
         <div style="display: flex; margin-top: 20px">
           <span class="t1"> 站点： </span>
           <select-site @set-site-info="changeUser" selectWidth="300px" />
+          <a :href="siteDomain" style="margin-left: 24px" class="t1 t2" target="_blank">{{ siteDomain }}</a>
         </div>
       </a-col>
     </a-row>
@@ -17,12 +18,11 @@
           <a-spin :spinning="baseInfoLoading">
             <div class="wrap">
               <p class="mb"
-              >交付状态：<span class="big">{{ filter_Null_format(baseInfo.deliveryProgress) }}</span>
+                >交付状态：<span class="big">{{ filter_Null_format(baseInfo.deliveryProgress) }}</span>
               </p>
               <p
-              >运行状态：<span v-if="baseInfo.runStatus == 0">创建失败</span><span
-                v-if="baseInfo.runStatus == 1">正常运行</span
-              ><span v-if="baseInfo.runStatus == 2">运行异常</span>
+                >运行状态：<span v-if="baseInfo.runStatus == 0">创建失败</span><span v-if="baseInfo.runStatus == 1">正常运行</span
+                ><span v-if="baseInfo.runStatus == 2">运行异常</span>
                 <span v-if="baseInfo.runStatus == 3">站点停止</span>
               </p>
               <p>网站运行：{{ filter_Null_format(baseInfo.runDays) }}天</p>
@@ -137,15 +137,9 @@
 
             <a-row class="r5-1">
               <div class="fl">
-                <a-button :type="timeChooseIndex == 7 ? 'primary' : ''" @click="changeTime(7)">
-                  最近7天
-                </a-button>
-                <a-button :type="timeChooseIndex == 30 ? 'primary' : ''" @click="changeTime(30)">
-                  最近30天
-                </a-button>
-                <a-button :type="timeChooseIndex == 180 ? 'primary' : ''" @click="changeTime(180)">
-                  最近六个月
-                </a-button>
+                <a-button :type="timeChooseIndex == 7 ? 'primary' : ''" @click="changeTime(7)"> 最近7天 </a-button>
+                <a-button :type="timeChooseIndex == 30 ? 'primary' : ''" @click="changeTime(30)"> 最近30天 </a-button>
+                <a-button :type="timeChooseIndex == 180 ? 'primary' : ''" @click="changeTime(180)"> 最近六个月 </a-button>
               </div>
               <a-col :span="24">
                 <div class="fr" v-if="coreDataChart.x.length > 0">
@@ -214,420 +208,420 @@
 </template>
 
 <script lang="ts" setup name="Adweb3Home">
-import areaChart from "/@/views/adweb/data/chart/areaChart.vue";
-import { getAction } from "/@/api/manage/manage";
-import { useUserStore } from "/@/store/modules/user";
-import selectSite from "/@/components/Adweb/selectSite.vue";
-import "/@/assets/less/home.less";
-import { useMessage } from "/@/hooks/web/useMessage";
-import { onMounted, reactive, ref } from "vue";
-
-const { createMessage } = useMessage();
-
-const columns = [
-  {
-    title: "指标",
-    dataIndex: "targetName"
-  },
-  {
-    title: "今日",
-    dataIndex: "todayCount"
-  },
-  {
-    title: "昨日",
-    dataIndex: "yesterdayCount",
-    scopedSlots: { customRender: "yesterdayCount" }
-  },
-  {
-    title: "本周",
-    dataIndex: "currentWeekCount",
-    scopedSlots: { customRender: "currentWeekCount" }
-  },
-  {
-    title: "上周",
-    dataIndex: "lastWeekCount"
-  },
-  {
-    title: "本月",
-    dataIndex: "currentMonthCount"
-  },
-  {
-    title: "上月",
-    dataIndex: "lastMonthCount"
-  },
-  {
-    title: "全部",
-    dataIndex: "totalCount"
-  }
-];
-
-const userRole = ref("");
-const timeChooseIndex = ref(7);
-//网站概况
-
-let selectSiteInfo = reactive<any>({});
-const siteCode = ref("");
-const siteStatus = ref(0);
-let baseInfo = reactive<any>({});
-const baseInfoLoading = ref(false);
-
-//物料完成情况
-// TODO
-
-//核心数据
-const coreInfoLoading = ref(false);
-const coreDetailLoading = ref(false);
-const chartsLoading = ref(false);
-const achievePercent = ref(0);
-const appointWordCount = ref(0);
-const currentAchieveCount = ref(0);
-const currentMonthEnquiryCount = ref(0);
-const currentWeekEnquiryCount = ref(0);
-const totalEnquiryCount = ref(0);
-let flowIndicator = ref({});
-let coreDataTable = ref([]);
-const coreDataChart = ref({
-  x: [],
-  uv: [],
-  pv: [],
-  enquiry: []
-});
-const averageVisit = ref(0);
-const averageVisitDuration = ref(0);
-const averageVisitPage = ref(0);
-const bounceRate = ref(0);
-const conversionRate = ref(0);
-
-const isShow = ref(false);
-
-onMounted(() => {
-  userRole.value = useUserStore().roleList;
-});
-
-//改变站点
-function changeUser(selectedParamSiteInfo: any) {
-  siteCode.value = selectedParamSiteInfo.code;
-
-  siteStatus.value = selectedParamSiteInfo.status;
-
-  getAllInfo();
-}
-
-function filter_Null_format(value) {
-  if (value === "" || value === null || value === undefined) {
-    return "--";
-  } else {
-    return value;
+  import areaChart from '/@/views/adweb/data/chart/areaChart.vue';
+  import { getAction } from '/@/api/manage/manage';
+  import { useUserStore } from '/@/store/modules/user';
+  import selectSite from '/@/components/Adweb/selectSite.vue';
+  import '/@/assets/less/home.less';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { onMounted, reactive, ref } from 'vue';
+
+  const { createMessage } = useMessage();
+
+  const columns = [
+    {
+      title: '指标',
+      dataIndex: 'targetName',
+    },
+    {
+      title: '今日',
+      dataIndex: 'todayCount',
+    },
+    {
+      title: '昨日',
+      dataIndex: 'yesterdayCount',
+      scopedSlots: { customRender: 'yesterdayCount' },
+    },
+    {
+      title: '本周',
+      dataIndex: 'currentWeekCount',
+      scopedSlots: { customRender: 'currentWeekCount' },
+    },
+    {
+      title: '上周',
+      dataIndex: 'lastWeekCount',
+    },
+    {
+      title: '本月',
+      dataIndex: 'currentMonthCount',
+    },
+    {
+      title: '上月',
+      dataIndex: 'lastMonthCount',
+    },
+    {
+      title: '全部',
+      dataIndex: 'totalCount',
+    },
+  ];
+
+  const userRole = ref('');
+  const timeChooseIndex = ref(7);
+  //网站概况
+
+  const siteDomain = ref('');
+  const siteCode = ref('');
+  const siteStatus = ref(0);
+  let baseInfo = reactive<any>({});
+  const baseInfoLoading = ref(false);
+
+  //物料完成情况
+  // TODO
+
+  //核心数据
+  const coreInfoLoading = ref(false);
+  const coreDetailLoading = ref(false);
+  const chartsLoading = ref(false);
+  const achievePercent = ref(0);
+  const appointWordCount = ref(0);
+  const currentAchieveCount = ref(0);
+  const currentMonthEnquiryCount = ref(0);
+  const currentWeekEnquiryCount = ref(0);
+  const totalEnquiryCount = ref(0);
+  let flowIndicator = ref({});
+  let coreDataTable = ref([]);
+  const coreDataChart = ref({
+    x: [],
+    uv: [],
+    pv: [],
+    enquiry: [],
+  });
+  const averageVisit = ref(0);
+  const averageVisitDuration = ref(0);
+  const averageVisitPage = ref(0);
+  const bounceRate = ref(0);
+  const conversionRate = ref(0);
+
+  const isShow = ref(false);
+
+  onMounted(() => {
+    userRole.value = useUserStore().roleList;
+  });
+
+  //改变站点
+  function changeUser(selectedParamSiteInfo: any) {
+    siteCode.value = selectedParamSiteInfo.code;
+    siteDomain.value = selectedParamSiteInfo.domain;
+    siteStatus.value = selectedParamSiteInfo.status;
+
+    getAllInfo();
   }
-}
-
-//保证先获取到站点列表，获取到siteCode及siteId后再进行此方法
-function getAllInfo() {
-  getBaseInfo();
-  getCoreData();
-  getCoreDataChart();
-}
-
-//获取基础信息
-function getBaseInfo() {
-  let d = {
-    siteCode: siteCode.value
-  };
-  baseInfoLoading.value = true;
-  getAction("/adweb/adwebSiteManage/siteBasicInfo", d).then(function(res) {
-    baseInfoLoading.value = false;
-    if (res.code == 200) {
-      baseInfo = res.result;
-      isShow.value = true;
+
+  function filter_Null_format(value) {
+    if (value === '' || value === null || value === undefined) {
+      return '--';
     } else {
-      createMessage.error("获取站点基础信息失败，请刷新重试");
+      return value;
     }
-  });
-}
-
-const yesterdayData = ref({});
-const todayData = ref({});
-const thisWeekData = ref({});
-const lastWeekData = ref({});
-const thisMonthData = ref({});
-const lastMonthData = ref({});
-const allTimeData = ref({});
-
-//获取核心数据
-function getCoreData() {
-  let d = {
-    siteCode: siteCode.value
-  };
-  coreInfoLoading.value = true;
-  getAction("/dmp-data/site-periodic/stats", d).then(function(res) {
-    coreInfoLoading.value = false;
+  }
+
+  //保证先获取到站点列表，获取到siteCode及siteId后再进行此方法
+  function getAllInfo() {
+    getBaseInfo();
+    getCoreData();
+    getCoreDataChart();
+  }
+
+  //获取基础信息
+  function getBaseInfo() {
+    let d = {
+      siteCode: siteCode.value,
+    };
+    baseInfoLoading.value = true;
+    getAction('/adweb/adwebSiteManage/siteBasicInfo', d).then(function (res) {
+      baseInfoLoading.value = false;
+      if (res.code == 200) {
+        baseInfo = res.result;
+        isShow.value = true;
+      } else {
+        createMessage.error('获取站点基础信息失败，请刷新重试');
+      }
+    });
+  }
+
+  const yesterdayData = ref({});
+  const todayData = ref({});
+  const thisWeekData = ref({});
+  const lastWeekData = ref({});
+  const thisMonthData = ref({});
+  const lastMonthData = ref({});
+  const allTimeData = ref({});
+
+  //获取核心数据
+  function getCoreData() {
+    let d = {
+      siteCode: siteCode.value,
+    };
+    coreInfoLoading.value = true;
+    getAction('/dmp-data/site-periodic/stats', d).then(function (res) {
+      coreInfoLoading.value = false;
+      if (res.code == 200) {
+        yesterdayData.value = res.result.yesterday;
+        todayData.value = res.result.today;
+        thisWeekData.value = res.result.thisWeek;
+        lastWeekData.value = res.result.lastWeek;
+        thisMonthData.value = res.result.thisMonth;
+        lastMonthData.value = res.result.lastMonth;
+        allTimeData.value = res.result.allTime;
+        // achievePercent.value = res.data.achievePercent;
+        // appointWordCount.value = res.data.appointWordCount;
+        // currentAchieveCount.value = res.data.currentAchieveCount;
+        // currentMonthEnquiryCount.value = res.data.currentMonthEnquiryCount;
+        // currentWeekEnquiryCount.value = res.data.currentWeekEnquiryCount;
+        // totalEnquiryCount.value = res.data.totalEnquiryCount;
+        // flowIndicator = res.data.flowIndicator;
+        currentWeekEnquiryCount.value = thisWeekData.value.enquires;
+        currentMonthEnquiryCount.value = thisMonthData.value.enquires;
+        totalEnquiryCount.value = allTimeData.value.enquires;
+        coreDataTable.value = [];
+        coreDataTable.value.push(
+          {
+            targetName: '访客数(UV)',
+            todayCount: todayData.value.totalUsers,
+            yesterdayCount: yesterdayData.value.totalUsers,
+            currentWeekCount: thisWeekData.value.totalUsers,
+            lastWeekCount: lastWeekData.value.totalUsers,
+            currentMonthCount: thisMonthData.value.totalUsers,
+            lastMonthCount: lastMonthData.value.totalUsers,
+            totalCount: allTimeData.value.totalUsers,
+          },
+          {
+            targetName: '访问量(PV)',
+            todayCount: todayData.value.pageViews,
+            yesterdayCount: yesterdayData.value.pageViews,
+            currentWeekCount: thisWeekData.value.pageViews,
+            lastWeekCount: lastWeekData.value.pageViews,
+            currentMonthCount: thisMonthData.value.pageViews,
+            lastMonthCount: lastMonthData.value.pageViews,
+            totalCount: allTimeData.value.pageViews,
+          },
+          {
+            targetName: '询盘数',
+            todayCount: todayData.value.enquires,
+            yesterdayCount: yesterdayData.value.enquires,
+            currentWeekCount: thisWeekData.value.enquires,
+            lastWeekCount: lastWeekData.value.enquires,
+            currentMonthCount: thisMonthData.value.enquires,
+            lastMonthCount: lastMonthData.value.enquires,
+            totalCount: allTimeData.value.enquires,
+          },
+          {
+            targetName: '询盘转化率',
+            todayCount: todayData.value.enquiryConversionRate,
+            yesterdayCount: yesterdayData.value.enquiryConversionRate,
+            currentWeekCount: thisWeekData.value.enquiryConversionRate,
+            lastWeekCount: lastWeekData.value.enquiryConversionRate,
+            currentMonthCount: thisMonthData.value.enquiryConversionRate,
+            lastMonthCount: lastMonthData.value.enquiryConversionRate,
+            totalCount: allTimeData.value.enquiryConversionRate,
+          }
+        );
+      } else {
+        createMessage.error('获取核心数据信息失败，请刷新重试');
+      }
+    });
+  }
+
+  //改变图表的时间维度
+  function changeTime(time) {
+    console.log(time);
+    timeChooseIndex.value = time;
+    getCoreDataChart();
+  }
+
+  //核心数据的面积图
+  const getCoreDataChart = async () => {
+    let d = {
+      siteCode: siteCode.value,
+      dateType: timeChooseIndex.value,
+    };
+    chartsLoading.value = true;
+    const res = await getAction('/dmp-data/site-overview/stats', d);
     if (res.code == 200) {
-      yesterdayData.value = res.result.yesterday;
-      todayData.value = res.result.today;
-      thisWeekData.value = res.result.thisWeek;
-      lastWeekData.value = res.result.lastWeek;
-      thisMonthData.value = res.result.thisMonth;
-      lastMonthData.value = res.result.lastMonth;
-      allTimeData.value = res.result.allTime;
-      // achievePercent.value = res.data.achievePercent;
-      // appointWordCount.value = res.data.appointWordCount;
-      // currentAchieveCount.value = res.data.currentAchieveCount;
-      // currentMonthEnquiryCount.value = res.data.currentMonthEnquiryCount;
-      // currentWeekEnquiryCount.value = res.data.currentWeekEnquiryCount;
-      // totalEnquiryCount.value = res.data.totalEnquiryCount;
-      // flowIndicator = res.data.flowIndicator;
-      currentWeekEnquiryCount.value = thisWeekData.value.enquires;
-      currentMonthEnquiryCount.value = thisMonthData.value.enquires;
-      totalEnquiryCount.value = allTimeData.value.enquires;
-      coreDataTable.value = [];
-      coreDataTable.value.push(
-        {
-          targetName: "访客数(UV)",
-          todayCount: todayData.value.totalUsers,
-          yesterdayCount: yesterdayData.value.totalUsers,
-          currentWeekCount: thisWeekData.value.totalUsers,
-          lastWeekCount: lastWeekData.value.totalUsers,
-          currentMonthCount: thisMonthData.value.totalUsers,
-          lastMonthCount: lastMonthData.value.totalUsers,
-          totalCount: allTimeData.value.totalUsers
-        },
-        {
-          targetName: "访问量(PV)",
-          todayCount: todayData.value.pageViews,
-          yesterdayCount: yesterdayData.value.pageViews,
-          currentWeekCount: thisWeekData.value.pageViews,
-          lastWeekCount: lastWeekData.value.pageViews,
-          currentMonthCount: thisMonthData.value.pageViews,
-          lastMonthCount: lastMonthData.value.pageViews,
-          totalCount: allTimeData.value.pageViews
-        },
-        {
-          targetName: "询盘数",
-          todayCount: todayData.value.enquires,
-          yesterdayCount: yesterdayData.value.enquires,
-          currentWeekCount: thisWeekData.value.enquires,
-          lastWeekCount: lastWeekData.value.enquires,
-          currentMonthCount: thisMonthData.value.enquires,
-          lastMonthCount: lastMonthData.value.enquires,
-          totalCount: allTimeData.value.enquires
-        },
-        {
-          targetName: "询盘转化率",
-          todayCount: todayData.value.enquiryConversionRate,
-          yesterdayCount: yesterdayData.value.enquiryConversionRate,
-          currentWeekCount: thisWeekData.value.enquiryConversionRate,
-          lastWeekCount: lastWeekData.value.enquiryConversionRate,
-          currentMonthCount: thisMonthData.value.enquiryConversionRate,
-          lastMonthCount: lastMonthData.value.enquiryConversionRate,
-          totalCount: allTimeData.value.enquiryConversionRate
+      let r = res.result == null ? {} : res.result;
+      averageVisit.value = r.dailyTotalUsers == null ? '0' : r.dailyTotalUsers;
+      averageVisitDuration.value = r.avgTimeOnPage == null ? '0' : r.avgTimeOnPage;
+      averageVisitPage.value = r.pageViewsPerSession == null ? '0' : r.pageViewsPerSession;
+      bounceRate.value = r.bounceRate == null ? '0' : r.bounceRate;
+      conversionRate.value = r.enquiryConversionRate == null ? '0' : r.enquiryConversionRate;
+      let x = [],
+        pv = [],
+        uv = [],
+        enquiry = [];
+      if (r.dailyStats != null && r.dailyStats.length > 0) {
+        for (let i in r.dailyStats) {
+          x.push(r.dailyStats[i].date);
+          pv.push(r.dailyStats[i].pageViews);
+          uv.push(r.dailyStats[i].totalUsers);
+          enquiry.push(r.dailyStats[i].enquires);
         }
-      );
+      }
+      coreDataChart.value.x = x;
+      coreDataChart.value.pv = pv;
+      coreDataChart.value.uv = uv;
+      coreDataChart.value.enquiry = enquiry;
     } else {
-      createMessage.error("获取核心数据信息失败，请刷新重试");
+      averageVisit.value = 0;
+      averageVisitDuration.value = 0;
+      averageVisitPage.value = 0;
+      bounceRate.value = 0;
+      coreDataChart.value.x = [];
+      coreDataChart.value.pv = [];
+      coreDataChart.value.uv = [];
+      coreDataChart.value.enquiry = [];
+      createMessage.error('获取核心数据图表信息失败，请刷新重试');
     }
-  });
-}
-
-//改变图表的时间维度
-function changeTime(time) {
-  console.log(time);
-  timeChooseIndex.value = time;
-  getCoreDataChart();
-}
-
-//核心数据的面积图
-const getCoreDataChart = async () => {
-  let d = {
-    siteCode: siteCode.value,
-    dateType: timeChooseIndex.value
+    chartsLoading.value = false;
   };
-  chartsLoading.value = true;
-  const res = await getAction("/dmp-data/site-overview/stats", d);
-  if (res.code == 200) {
-    let r = res.result == null ? {} : res.result;
-    averageVisit.value = r.dailyTotalUsers == null ? "0" : r.dailyTotalUsers;
-    averageVisitDuration.value = r.avgTimeOnPage == null ? "0" : r.avgTimeOnPage;
-    averageVisitPage.value = r.pageViewsPerSession == null ? "0" : r.pageViewsPerSession;
-    bounceRate.value = r.bounceRate == null ? "0" : r.bounceRate;
-    conversionRate.value = r.enquiryConversionRate == null ? "0" : r.enquiryConversionRate;
-    let x = [],
-      pv = [],
-      uv = [],
-      enquiry = [];
-    if (r.dailyStats != null && r.dailyStats.length > 0) {
-      for (let i in r.dailyStats) {
-        x.push(r.dailyStats[i].date);
-        pv.push(r.dailyStats[i].pageViews);
-        uv.push(r.dailyStats[i].totalUsers);
-        enquiry.push(r.dailyStats[i].enquires);
-      }
-    }
-    coreDataChart.value.x = x;
-    coreDataChart.value.pv = pv;
-    coreDataChart.value.uv = uv;
-    coreDataChart.value.enquiry = enquiry;
-  } else {
-    averageVisit.value = 0;
-    averageVisitDuration.value = 0;
-    averageVisitPage.value = 0;
-    bounceRate.value = 0;
-    coreDataChart.value.x = [];
-    coreDataChart.value.pv = [];
-    coreDataChart.value.uv = [];
-    coreDataChart.value.enquiry = [];
-    createMessage.error("获取核心数据图表信息失败，请刷新重试");
-  }
-  chartsLoading.value = false;
-};
 </script>
 
 <style lang="less">
-.home {
-  .ant-select {
-    color: #fff;
+  .home {
+    .ant-select {
+      color: #fff;
 
-    .ant-select-selection {
-      background-color: transparent;
-    }
+      .ant-select-selection {
+        background-color: transparent;
+      }
 
-    .ant-select-arrow {
-      color: #fff;
+      .ant-select-arrow {
+        color: #fff;
+      }
     }
   }
-}
 </style>
 
 <style scoped lang="less">
-p,
-span {
-  color: #000;
-  margin: 0;
-}
-
-.theme-color {
-  color: @primary-color;
-}
-
-.title {
-  font-size: 18px;
-  color: #000;
-}
+  p,
+  span {
+    color: #000;
+    margin: 0;
+  }
+
+  .theme-color {
+    color: @primary-color;
+  }
+
+  .title {
+    font-size: 18px;
+    color: #000;
+  }
 </style>
 
 <style lang="less">
-.pop-wrap {
-  .ant-popover-inner-content {
-    padding: 0;
-  }
+  .pop-wrap {
+    .ant-popover-inner-content {
+      padding: 0;
+    }
 
-  .wrap {
-    width: 400px;
-    padding: 20px 20px;
-    background: url('../../../../assets/home/pop-bg.svg') no-repeat;
-    background-position: bottom right;
+    .wrap {
+      width: 400px;
+      padding: 20px 20px;
+      background: url('../../../../assets/home/pop-bg.svg') no-repeat;
+      background-position: bottom right;
 
-    p {
-      line-height: 1.8;
+      p {
+        line-height: 1.8;
 
-      i {
-        color: @primary-color;
-        margin-right: 10px;
+        i {
+          color: @primary-color;
+          margin-right: 10px;
+        }
       }
-    }
 
-    .name {
-      font-size: 18px;
-      margin-bottom: 20px;
-    }
+      .name {
+        font-size: 18px;
+        margin-bottom: 20px;
+      }
 
-    .job {
-      font-size: 15px;
-      color: #9f9f9f;
-    }
+      .job {
+        font-size: 15px;
+        color: #9f9f9f;
+      }
 
-    .ant-col-8 {
-      text-align: right;
+      .ant-col-8 {
+        text-align: right;
+      }
     }
   }
-}
-
-.faban {
-  .ant-modal {
-    .ant-modal-content {
-      background-color: transparent;
-      box-shadow: none;
 
-      .ant-modal-close {
-        top: 70px;
-        right: -10px;
+  .faban {
+    .ant-modal {
+      .ant-modal-content {
+        background-color: transparent;
+        box-shadow: none;
 
-        .ant-modal-close-x {
-          width: auto;
-          height: auto;
-        }
-      }
+        .ant-modal-close {
+          top: 70px;
+          right: -10px;
 
-      .self-close {
-        i {
-          color: #fff;
-          border: 1px solid #fff;
-          width: 25px;
-          height: 25px;
-          display: block;
-          line-height: 25px;
+          .ant-modal-close-x {
+            width: auto;
+            height: auto;
+          }
         }
-      }
 
-      .ant-modal-body {
-        .top-bg {
-          background: url('../../../../assets/home/faban/topbg.png') no-repeat;
-          min-height: 242px;
-          background-size: 100% 100%;
-          display: flex;
-          justify-content: center;
-          align-items: flex-end;
-          font-size: 38px;
-          padding-bottom: 60px;
-
-          p {
+        .self-close {
+          i {
             color: #fff;
+            border: 1px solid #fff;
+            width: 25px;
+            height: 25px;
+            display: block;
+            line-height: 25px;
           }
         }
 
-        .info-wrap {
-          background: #fff;
-          padding: 0 40px;
-          overflow: hidden;
-          border-bottom-left-radius: 15px;
-          border-bottom-right-radius: 15px;
-          margin-top: -1px;
-
-          p {
-            position: relative;
-            padding-left: 30px;
-            margin-bottom: 5px;
-            letter-spacing: 1px;
-
-            &:before {
-              content: '';
-              position: absolute;
-              left: 0;
-              width: 15px;
-              height: 15px;
-              background: url('../../../../assets/home/faban/dot.svg');
-              background-repeat: no-repeat;
-              top: 3px;
+        .ant-modal-body {
+          .top-bg {
+            background: url('../../../../assets/home/faban/topbg.png') no-repeat;
+            min-height: 242px;
+            background-size: 100% 100%;
+            display: flex;
+            justify-content: center;
+            align-items: flex-end;
+            font-size: 38px;
+            padding-bottom: 60px;
+
+            p {
+              color: #fff;
             }
           }
 
-          img {
-            width: 70px;
-            float: right;
-            padding: 40px 0;
+          .info-wrap {
+            background: #fff;
+            padding: 0 40px;
+            overflow: hidden;
+            border-bottom-left-radius: 15px;
+            border-bottom-right-radius: 15px;
+            margin-top: -1px;
+
+            p {
+              position: relative;
+              padding-left: 30px;
+              margin-bottom: 5px;
+              letter-spacing: 1px;
+
+              &:before {
+                content: '';
+                position: absolute;
+                left: 0;
+                width: 15px;
+                height: 15px;
+                background: url('../../../../assets/home/faban/dot.svg');
+                background-repeat: no-repeat;
+                top: 3px;
+              }
+            }
+
+            img {
+              width: 70px;
+              float: right;
+              padding: 40px 0;
+            }
           }
         }
       }
     }
   }
-}
 </style>