首页修改样式

src/assets/less/home.less

@@ -1,3 +1,37 @@
+.web-info{
+  text-align: center;
+  .web-content{
+    text-align: center;
+    .title{
+      font-size: 14px;
+      font-weight: 400;
+      letter-spacing: 0px;
+      line-height: 18px;
+      color: rgba(174, 174, 178, 1);
+    }
+    .content {
+      margin-top: 10px;
+      span {
+        font-size: 20px;
+        font-weight: 700;
+        letter-spacing: 0px;
+        line-height: 26px;
+        color: rgba(83, 162, 211, 1);
+      }
+
+    }
+  }
+}
+.web-link{
+  text-align: left;
+  font-size: 18px;
+  margin: 22px 0;
+  line-height: 18px
+}
+
+.border-right{
+  border-right: 1px solid rgba(229, 229, 234, 1);
+}
 .home {
   //background: url("../../assets/home/top-bg.png") repeat-x;
   background-size: 50% 200px;
@@ -166,22 +200,12 @@
     margin: 0 !important;
 
     .wrap {
-      box-shadow: 0px 2px 4px 0px @primary-color;
       padding: 15px;
       overflow: hidden;
       background: #fff;
       border-radius: 10px;
       transition: all .3s;
 
-      &.blue {
-        box-shadow: 0px 2px 4px 0px @primary-color;
-      }
-
-      &.effect:hover {
-        box-shadow: none;
-        background: rgb(241, 248, 255);
-      }
-
       img {
         width: 15px;
       }
@@ -191,11 +215,19 @@
         width: calc(100% - 15px);
         text-align: center;
 
+        .title{
+          font-size: 16px;
+          font-weight: 400;
+          letter-spacing: 0px;
+          line-height: 21px;
+          color: rgba(142, 142, 147, 1);
+        }
         p:last-child {
-          font-size: 30px;
-          text-align: center;
-          margin-top: 10px;
-
+          font-size: 32px;
+          font-weight: 700;
+          letter-spacing: 0px;
+          line-height: 38px;
+          color: rgba(13, 62, 122, 1);
         }
       }
     }
@@ -387,3 +419,4 @@
     margin-top: 7%;
   }
 }
+

src/views/adweb/data/chart/areaChart.vue

@@ -84,28 +84,28 @@ export default {
             stack: 'UV',
             symbol: 'circle',  //设定为实心点
             symbolSize: 6,   //设定实心点的大小
-            color:"#544BEB",     //设定实线点的颜色
-            areaStyle: {
-              color:{
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [{
-                  offset: 0, color: '#544BEB' // 0% 处的颜色
-                }, {
-                  offset: 1, color: '#fff' // 100% 处的颜色
-                }],
-
-              }
-            },
+            color:"#53A2D3",     //设定实线点的颜色
+            // areaStyle: {
+            //   color:{
+            //     type: 'linear',
+            //     x: 0,
+            //     y: 0,
+            //     x2: 0,
+            //     y2: 1,
+            //     colorStops: [{
+            //       offset: 0, color: '#53A2D3' // 0% 处的颜色
+            //     }, {
+            //       offset: 1, color: '#fff' // 100% 处的颜色
+            //     }],
+            //
+            //   }
+            // },
             emphasis: {
               focus: 'series'
             },
-            smooth:true,
+            smooth:false,
             lineStyle:{
-              color:'#544BEB',
+              color:'#53A2D3',
               width:2
             },
             data: this.dataSource.uv
@@ -115,28 +115,28 @@ export default {
             type: 'line',
             symbol: 'circle',  //设定为实心点
             symbolSize: 6,   //设定实心点的大小
-            color:"#F0B358",     //设定实线点的颜色
+            color:"#FF951A",     //设定实线点的颜色
             stack: 'PV',
-            areaStyle: {
-              color:{
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [{
-                  offset: 0, color: '#F0B358' // 0% 处的颜色
-                }, {
-                  offset: 1, color: '#fff' // 100% 处的颜色
-                }],
-              }
-            },
+            // areaStyle: {
+            //   color:{
+            //     type: 'linear',
+            //     x: 0,
+            //     y: 0,
+            //     x2: 0,
+            //     y2: 1,
+            //     colorStops: [{
+            //       offset: 0, color: '#FF951A' // 0% 处的颜色
+            //     }, {
+            //       offset: 1, color: '#fff' // 100% 处的颜色
+            //     }],
+            //   }
+            // },
             emphasis: {
               focus: 'series'
             },
-            smooth:true,
+            smooth:false,
             lineStyle:{
-              color:'#F0B358',
+              color:'#FF951A',
               width:2
             },
             data: this.dataSource.pv
@@ -146,28 +146,28 @@ export default {
             type: 'line',
             symbol: 'circle',  //设定为实心点
             symbolSize: 6,   //设定实心点的大小
-            color:"#58CCA8",     //设定实线点的颜色
+            color:"#399C5C",     //设定实线点的颜色
             stack: 'enquiry',
-            areaStyle: {
-              color:{
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [{
-                  offset: 0, color: '#58CCA8' // 0% 处的颜色
-                }, {
-                  offset: 1, color: '#fff' // 100% 处的颜色
-                }],
-              }
-            },
+            // areaStyle: {
+            //   color:{
+            //     type: 'linear',
+            //     x: 0,
+            //     y: 0,
+            //     x2: 0,
+            //     y2: 1,
+            //     colorStops: [{
+            //       offset: 0, color: '#399C5C' // 0% 处的颜色
+            //     }, {
+            //       offset: 1, color: '#fff' // 100% 处的颜色
+            //     }],
+            //   }
+            // },
             emphasis: {
               focus: 'series'
             },
-            smooth:true,
+            smooth:false,
             lineStyle:{
-              color:'#58CCA8',
+              color:'#399C5C',
               width:2
             },
             data: this.dataSource.enquiry

src/views/adweb/data/trafficAnalysis.vue

@@ -34,19 +34,19 @@
   <a-spin :spinning="loading" tip="加载中...">
     <a-row class="r2">
       <a-col :span="6">
-        <p class="t1"><img src="@/assets/trafficAnalysis/uvicon.svg" />访客数（UV）</p>
+        <p class="t1">访客数（UV）</p>
         <p class="t3">{{ flowIndexNums.uv }}</p>
       </a-col>
       <a-col :span="6">
-        <p class="t1"><img src="@/assets/trafficAnalysis/pvicon.svg" />浏览量（PV）</p>
+        <p class="t1">浏览量（PV）</p>
         <p class="t3">{{ flowIndexNums.pv }}</p>
       </a-col>
       <a-col :span="6">
-        <p class="t1"><img src="@/assets/trafficAnalysis/sessions.svg" />会话数</p>
+        <p class="t1">会话数</p>
         <p class="t3">{{ flowIndexNums.sessions }}</p>
       </a-col>
       <a-col :span="6">
-        <p class="t1"><img src="@/assets/trafficAnalysis/enquirycounticon.svg" />询盘数</p>
+        <p class="t1">询盘数</p>
         <router-link
           :to="{ path: '/inquiry/list', query: {dateType: queryParam.dateType, start: queryParam.start, end: queryParam.end} }">
           <p class="t2">{{ flowIndexNums.enquiry }}</p>
@@ -60,59 +60,36 @@
             <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: #F0B358;"></i>浏览量（PV）</span>
-                  <span><i style="background: #58CCA8;"></i>询盘数</span>
+                  <span><i style="background: #53A2D3"></i>访客数（UV）</span>
+                  <span><i style="background: #FF951A"></i>浏览量（PV）</span>
+                  <span><i style="background: #399C5C"></i>询盘数</span>
                 </div>
                 <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-row class="r2">
             <a-col style="width: 20%;">
-              <div class="wrap">
-                <img src="@/assets/trafficAnalysis/dailyVisitCount.svg" />
-                <div class="fr">
-                  <p>日均访问量</p>
-                  <p style="font-size: 25px;">{{ statistics.averageVisit }}</p>
-                </div>
-              </div>
+              <p class="t1">日均访问量</p>
+              <p class="t3">{{ statistics.averageVisit }}</p>
             </a-col>
             <a-col style="width: 20%;">
-              <div class="wrap">
-                <img src="@/assets/trafficAnalysis/avgVisitTime.svg" />
-                <div class="fr">
-                  <p>平均访问时长</p>
-                  <p style="font-size: 25px;">{{ statistics.averageVisitDuration }}</p>
-                </div>
-              </div>
+              <p class="t1">平均访问时长</p>
+              <p class="t3">{{ statistics.averageVisitDuration }}</p>
             </a-col>
             <a-col style="width: 20%;">
-              <div class="wrap">
-                <img src="@/assets/trafficAnalysis/avgVisitPage.svg" />
-                <div class="fr">
-                  <p>访客平均访问页面数</p>
-                  <p style="font-size: 25px;">{{ statistics.averageVisitPage }}</p>
-                </div>
-              </div>
+              <p class="t1">访客平均访问页面数</p>
+              <p class="t3">{{ statistics.averageVisitPage }}</p>
             </a-col>
             <a-col style="width: 20%;">
-              <div class="wrap">
-                <img src="@/assets/trafficAnalysis/tiaochu.svg" />
-                <div class="fr">
-                  <p>跳出率</p>
-                  <p style="font-size: 25px;">{{ statistics.bounceRate }}</p>
-                </div>
-              </div>
+              <p class="t1">跳出率</p>
+              <p class="t3">{{ statistics.bounceRate }}</p>
             </a-col>
             <a-col style="width: 20%;">
-              <div class="wrap">
-                <img src="@/assets/trafficAnalysis/uvTransfer.svg" />
-                <div class="fr">
-                  <p>UV到询盘转化率</p>
-                  <p style="font-size: 25px;">{{ statistics.conversionRate }}</p>
-                </div>
-              </div>
+              <p class="t1">UV到询盘转化率</p>
+              <p class="t3">{{ statistics.conversionRate }}</p>
             </a-col>
           </a-row>
         </a-card>
@@ -253,7 +230,7 @@ import { onMounted, reactive, ref, watch } from "vue";
 import { getAction } from "@/api/manage/manage";
 import moment from "moment";
 import MapAdweb from "@/components/chart/mapAdweb.vue";
-import 'flag-icon-css/css/flag-icons.css'
+import "flag-icon-css/css/flag-icons.css";
 
 
 const queryParam = reactive<any>({});
@@ -303,7 +280,7 @@ const mediaListColumns = ref([
   },
   {
     title: "访客数（UV）",
-    dataIndex: "totalUsers",
+    dataIndex: "totalUsers"
   },
   {
     title: "占比",
@@ -311,7 +288,7 @@ const mediaListColumns = ref([
   },
   {
     title: "新访客数",
-    dataIndex: "newUsers",
+    dataIndex: "newUsers"
   },
   {
     title: "新客占比",
@@ -319,23 +296,23 @@ const mediaListColumns = ref([
   },
   {
     title: "浏览量（PV）",
-    dataIndex: "pageViews",
+    dataIndex: "pageViews"
   },
   {
     title: "平均访问页面数",
-    dataIndex: "pageViewsPerSession",
+    dataIndex: "pageViewsPerSession"
   },
   {
     title: "会话数",
-    dataIndex: "sessions",
+    dataIndex: "sessions"
   },
   {
     title: "平均会话时长",
     key: "avgSessionDurationSlot",
-    sortDirections: ['descend', 'ascend'],
+    sortDirections: ["descend", "ascend"],
     sorter: (a, b) => a.avgSessionDuration - b.avgSessionDuration,
     scopedSlots: {
-      customRender: 'avgSessionDurationSlot',
+      customRender: "avgSessionDurationSlot"
     }
   }
 ]);
@@ -599,17 +576,22 @@ const setTime = (time) => {
 
 .r1 {
   margin: 20px;
+
   .choose-site {
     display: flex;
   }
 
   .t1 {
-    font-size: 18px;
+    font-size: 16px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 21px;
   }
 
   .ant-form-item {
     flex: 1;
   }
+
   .ant-calendar-picker {
     margin-right: 20px;
   }
@@ -658,10 +640,11 @@ const setTime = (time) => {
     }
 
     &.t3 {
-      font-size: 30px;
-      font-weight: 500;
-      line-height: 1;
-      padding-left: 25px;
+      font-size: 32px;
+      font-weight: 700;
+      letter-spacing: 0px;
+      line-height: 38px;
+      color: rgba(13, 62, 122, 1);
     }
   }
 }

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

@@ -2,41 +2,85 @@
   <div class="home">
     <!--网站概况-->
     <a-row class="top-title">
-      <a-col :span="24">
+      <a-col :span="6">
         <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-col :span="6">
+        <div class="web-link">
+          <a :href="siteDomain" target="_blank">{{ siteDomain }}</a>
         </div>
       </a-col>
     </a-row>
 
     <!--基础信息-->
     <a-card title="网站概况">
-      <a-row :gutter="[16, 16]" class="r2">
-        <a-col :span="6" class="c1">
+      <a-row >
+        <a-col class="border-right" :span="12" >
           <a-spin :spinning="baseInfoLoading">
-            <div class="wrap">
-              <p class="mb"
-                >交付状态：<span class="big">{{ filter_Null_format(baseInfo.deliveryProgress) }}</span>
-              </p>
-              <a-progress :steps="6" :percent="baseInfo.percentage" />
-              <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 == 3">站点停止</span>
-              </p>
-              <p>网站运行：{{ filter_Null_format(baseInfo.runDays) }}天</p>
-            </div>
+            <a-row class="web-info">
+              <a-col :span="8">
+                <div class="web-content">
+                  <p class="title">交付状态</p>
+                  <p class="content">
+                    <span>{{ filter_Null_format(baseInfo.deliveryProgress) }}</span>
+                  </p>
+                  <a-progress style="width: 40%" :steps="6" :percent="baseInfo.percentage" />
+                </div>
+              </a-col>
+              <a-col :span="8">
+                <div class="web-content">
+                  <p class="title">运行状态</p>
+                  <p class="content">
+                    <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>
+                </div>
+              </a-col>
+              <a-col :span="8">
+                <div class="web-content">
+                  <p class="title">网站运行</p>
+                  <p class="content">
+                    <span>
+                    {{ filter_Null_format(baseInfo.runDays) }}天
+                    </span>
+                  </p>
+                </div>
+              </a-col>
+            </a-row>
           </a-spin>
         </a-col>
-        <a-col :span="6" class="c2">
+        <a-col :span="12">
           <a-spin :spinning="baseInfoLoading">
-            <div class="wrap">
-              <p class="big mb">{{ filter_Null_format(baseInfo.planName) }}</p>
-              <p>提单时间：{{ filter_Null_format(baseInfo.createTime) }}</p>
-              <p>预计服务到期时间：{{ filter_Null_format(baseInfo.endTime) }}</p>
-            </div>
+            <a-row class="web-info">
+              <a-col :span="8">
+                <div class="web-content">
+                  <p class="title">套餐类型</p>
+                  <p class="content">
+                    <span>{{ filter_Null_format(baseInfo.planName) }}</span>
+                  </p>
+                </div>
+              </a-col>
+              <a-col :span="8">
+                <div class="web-content">
+                  <p class="title">提单时间</p>
+                  <p class="content">
+                    <span>{{ filter_Null_format(baseInfo.createTime) }}</span>
+                  </p>
+                </div>
+              </a-col>
+              <a-col :span="8">
+                <div class="web-content">
+                  <p class="title">预计服务到期时间</p>
+                  <p class="content">
+                    <span >{{ filter_Null_format(baseInfo.endTime) }}</span>
+                  </p>
+                </div>
+              </a-col>
+            </a-row>
           </a-spin>
         </a-col>
       </a-row>
@@ -46,62 +90,57 @@
       <a-col :span="24">
         <a-card title="核心数据">
           <a-row class="r5" :gutter="[20, 20]">
-            <a-col :span="4">
+            <a-col :span="4" class="border-right">
               <div class="wrap effect">
                 <a-spin :spinning="coreInfoLoading">
                   <router-link :to="{ path: '/inquiry/list', query: { timeType: 'thisWeek' } }">
-                    <img src="../../../../assets/home/weekEnquiry.svg" />
                     <div class="fr">
-                      <p>本周询盘数</p>
+                      <p class="title">本周询盘数</p>
                       <p class="theme-color">{{ filter_Null_format(currentWeekEnquiryCount) }}</p>
                     </div>
                   </router-link>
                 </a-spin>
               </div>
             </a-col>
-            <a-col :span="4">
+            <a-col :span="4" class="border-right">
               <div class="wrap effect">
                 <a-spin :spinning="coreInfoLoading">
                   <router-link :to="{ path: '/inquiry/list', query: { timeType: 'thisMonth' } }">
-                    <img src="../../../../assets/home/monthEnquiry.svg" />
                     <div class="fr">
-                      <p>本月询盘数</p>
+                      <p class="title">本月询盘数</p>
                       <p class="theme-color">{{ filter_Null_format(currentMonthEnquiryCount) }}</p>
                     </div>
                   </router-link>
                 </a-spin>
               </div>
             </a-col>
-            <a-col :span="4">
+            <a-col :span="4" class="border-right">
               <router-link :to="{ path: '/inquiry/list' }">
                 <div class="wrap effect">
                   <a-spin :spinning="coreInfoLoading">
-                    <img src="../../../../assets/home/totalEnquiry.svg" />
                     <div class="fr">
-                      <p>累计询盘数</p>
+                      <p class="title">累计询盘数</p>
                       <p class="theme-color">{{ filter_Null_format(totalEnquiryCount) }}</p>
                     </div>
                   </a-spin>
                 </div>
               </router-link>
             </a-col>
-            <a-col :span="4">
+            <a-col :span="4" class="border-right">
               <div class="wrap blue">
                 <a-spin :spinning="coreInfoLoading">
-                  <img src="../../../../assets/home/seoReach.svg" />
                   <div class="fr">
-                    <p>本周流量</p>
+                    <p class="title">本周流量</p>
                     <p>{{ filter_Null_format(thisWeekData.totalUsers) }}</p>
                   </div>
                 </a-spin>
               </div>
             </a-col>
-            <a-col :span="4">
+            <a-col :span="4" class="border-right">
               <div class="wrap blue">
                 <a-spin :spinning="coreInfoLoading">
-                  <img src="../../../../assets/home/nowReach.svg" />
                   <div class="fr">
-                    <p>本月流量</p>
+                    <p class="title">本月流量</p>
                     <p>{{ filter_Null_format(thisMonthData.totalUsers) }}</p>
                   </div>
                 </a-spin>
@@ -110,9 +149,8 @@
             <a-col :span="4">
               <div class="wrap blue">
                 <a-spin :spinning="coreInfoLoading">
-                  <img src="../../../../assets/home/seoReachRate.svg" />
                   <div class="fr">
-                    <p>累计流量</p>
+                    <p class="title">累计流量</p>
                     <p>{{ filter_Null_format(allTimeData.totalUsers) }}</p>
                   </div>
                 </a-spin>
@@ -120,18 +158,14 @@
             </a-col>
             <a-col :span="24" style="margin-top: 10px">
               <a-table
+                class="ant-table-striped"
                 :loading="coreDetailLoading"
                 :columns="columns"
-                :rowKey="(record, index) => index"
                 :pagination="false"
                 :data-source="coreDataTable"
+                :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
+                bordered
               >
-                <!--          <template slot="b" slot-scope="text,record">-->
-                <!--            {{text}}<a-icon type="arrow-up" style="color:red" />-->
-                <!--          </template>-->
-                <!--          <template slot="c" slot-scope="text,record">-->
-                <!--            {{text}}<a-icon type="arrow-down" style="color:#58CBA8" />-->
-                <!--          </template>-->
               </a-table>
               <p style="color: #999; font-size: 13px">注：今日数据每小时更新一次。</p>
             </a-col>
@@ -144,9 +178,9 @@
               </div>
               <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: #f0b358"></i>浏览量（PV）</span>
-                  <span><i style="background: #58cca8"></i>询盘数</span>
+                  <span><i style="background: #53A2D3"></i>访客数（UV）</span>
+                  <span><i style="background: #FF951A"></i>浏览量（PV）</span>
+                  <span><i style="background: #399C5C"></i>询盘数</span>
                 </div>
                 <a-spin :spinning="chartsLoading" style="float: left; width: 100%">
                   <area-chart v-if="coreDataChart.x.length > 0" :dataSource="coreDataChart" />
@@ -155,47 +189,42 @@
               </a-col>
             </a-row>
             <a-row class="r5-1" :gutter="[20, 20]">
-              <a-col style="width: 20%">
+              <a-col style="width: 20%" class="border-right">
                 <div class="wrap">
-                  <img src="@/assets/trafficAnalysis/dailyVisitCount.svg" />
                   <div class="fr">
-                    <p>日均访问量</p>
+                    <p class="title">日均访问量</p>
                     <p style="font-size: 25px">{{ averageVisit }}</p>
                   </div>
                 </div>
               </a-col>
-              <a-col style="width: 20%">
+              <a-col style="width: 20%" class="border-right">
                 <div class="wrap">
-                  <img src="@/assets/trafficAnalysis/avgVisitTime.svg" />
                   <div class="fr">
-                    <p>平均访问时长</p>
+                    <p class="title">平均访问时长</p>
                     <p style="font-size: 25px">{{ averageVisitDuration }}</p>
                   </div>
                 </div>
               </a-col>
-              <a-col style="width: 20%">
+              <a-col style="width: 20%" class="border-right">
                 <div class="wrap">
-                  <img src="@/assets/trafficAnalysis/avgVisitPage.svg" />
                   <div class="fr">
-                    <p>访客平均访问页面数</p>
+                    <p class="title">访客平均访问页面数</p>
                     <p style="font-size: 25px">{{ averageVisitPage }}</p>
                   </div>
                 </div>
               </a-col>
-              <a-col style="width: 20%">
+              <a-col style="width: 20%" class="border-right">
                 <div class="wrap">
-                  <img src="@/assets/trafficAnalysis/tiaochu.svg" />
                   <div class="fr">
-                    <p>跳出率</p>
+                    <p class="title">跳出率</p>
                     <p style="font-size: 25px">{{ bounceRate }}</p>
                   </div>
                 </div>
               </a-col>
               <a-col style="width: 20%">
                 <div class="wrap">
-                  <img src="@/assets/trafficAnalysis/uvTransfer.svg" />
                   <div class="fr">
-                    <p>UV到询盘转化率</p>
+                    <p class="title">UV到询盘转化率</p>
                     <p style="font-size: 25px">{{ conversionRate }}</p>
                   </div>
                 </div>
@@ -518,7 +547,6 @@
     .wrap {
       width: 400px;
       padding: 20px 20px;
-      background: url('../../../../assets/home/pop-bg.svg') no-repeat;
       background-position: bottom right;
 
       p {