修改样式

src/views/adweb/marketing/googleads.vue

@@ -1,203 +1,205 @@
 <template>
-  <div class="search-form">
-    <!-- 站点选择和时间筛选 -->
-    <a-row class="r1 search-form-container" :gutter="8">
-      <a-col :xl="7" :xxl="6">
-        <div class="choose-site">
-          <span class="t1">站点：</span>
-          <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="onChangeDatePicker" :disabledDate="disabledDate" :value="rangeDate" style="width: 70%" />
-        </div>
-      </a-col>
-      <a-col :xl="9" :xxl="12">
-        <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>
-  <a-spin :spinning="loading" tip="加载中...">
-    <a-row>
-      <a-col :span="16">
-        <a-row class="r2">
-          <a-col :span="24">
-            <p class="t3 company-name">{{ customerStats.descriptiveName }}</p>
-          </a-col>
-        </a-row>
-        <a-row class="r2">
-          <a-col :span="8">
-            <p class="t1">账户余额</p>
-            <p class="t3">
-              <span class="value">{{ customerStats.balance }}</span>
-              <span class="currency">{{ customerStats.currency }}</span>
-            </p>
-          </a-col>
-          <a-col :span="8">
-            <p class="t1">总花费</p>
-            <p class="t3">
-              <span class="value">{{ customerStats.cost }}</span>
-              <span class="currency">{{ customerStats.currency }}</span>
-            </p>
-          </a-col>
-          <a-col :span="8">
-            <p class="t1">转化数</p>
-            <p class="t3">{{ customerStats.conversions }}</p>
-          </a-col>
-        </a-row>
-      </a-col>
-      <a-col :span="8">
-        <a-row class="r2" style="height: 195px">
-          <a-col :span="24">
-            <p class="t1">优化得分</p>
-            <div class="score-circle" style="padding-bottom: 10px">
-              <a-progress
-                type="circle"
-                :percent="customerStats.optiScore.toFixed(2)"
-                :width="80"
-                :stroke-color="{
-                  '0%': '#FFB800',
-                  '100%': '#FFC53D',
-                }"
-              />
-            </div>
-          </a-col>
-        </a-row>
-      </a-col>
-    </a-row>
-
-    <a-row>
-      <a-col :span="24">
-        <a-card style="margin: 10px" title="核心数据">
-          <a-row class="r5" :gutter="8">
-            <a-row class="r5-1">
-              <a-col :span="24">
-                <template v-if="dailyStats.values && dailyStats.values.length > 0">
-                  <div class="fl">
-                    <a-button-group>
-                      <a-button :class="{ active: activeChart === 'impression' }" @click="switchChart('impression')">展示</a-button>
-                      <a-button :class="{ active: activeChart === 'clicks' }" @click="switchChart('clicks')">点击</a-button>
-                      <a-button :class="{ active: activeChart === 'ctr' }" @click="switchChart('ctr')">点击率（%）</a-button>
-                      <a-button :class="{ active: activeChart === 'conversion' }" @click="switchChart('conversion')">转化数</a-button>
-                      <a-button :class="{ active: activeChart === 'cost' }" @click="switchChart('cost')">花费</a-button>
-                    </a-button-group>
-                  </div>
-
-                  <line-chart :chartType="activeChart" :dailyStats="dailyStats" />
-                </template>
-                <template v-else>
-                  <a-empty />
-                </template>
-              </a-col>
-            </a-row>
+  <div class="googlleads">
+    <div class="search-form">
+      <!-- 站点选择和时间筛选 -->
+      <a-row class="r1 search-form-container" :gutter="8">
+        <a-col :xl="7" :xxl="6">
+          <div class="choose-site">
+            <span class="t1">站点：</span>
+            <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="onChangeDatePicker" :disabledDate="disabledDate" :value="rangeDate" style="width: 70%" />
+          </div>
+        </a-col>
+        <a-col :xl="9" :xxl="12">
+          <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>
+    <a-spin :spinning="loading" tip="加载中...">
+      <a-row>
+        <a-col :span="16">
+          <a-row class="r2">
+            <a-col :span="24">
+              <p class="t3 company-name">{{ customerStats.descriptiveName }}</p>
+            </a-col>
           </a-row>
-        </a-card>
-      </a-col>
-    </a-row>
-    <a-row>
-      <a-col :span="24">
-        <a-card style="margin: 10px" title="广告系列">
-          <a-table
-            :columns="campaignColumns"
-            :data-source="tableData"
-            :loading="loading"
-            :pagination="{
-              pageSize: 10,
-              showSizeChanger: false,
-              showQuickJumper: true,
-              showTotal: (total) => `共 ${total} 条`,
-            }"
-            bordered
-            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
-            style="width: 100%"
-          />
-        </a-card>
-      </a-col>
-    </a-row>
-    <a-row :gutter="8">
-      <a-col :span="12">
-        <a-card style="margin: 10px" title="TOP关键词">
-          <a-table
-            :columns="keywordColumns"
-            :data-source="keywordData"
-            :loading="loading"
-            :pagination="{
-              pageSize: 10,
-              showSizeChanger: false,
-              showQuickJumper: true,
-              showTotal: (total) => `共 ${total} 条`,
-            }"
-            bordered
-            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
-            style="width: 100%"
-          />
-        </a-card>
-      </a-col>
-      <a-col :span="12">
-        <a-card style="margin: 10px" title="TOP展示位">
-          <a-table
-            :columns="positionColumns"
-            :data-source="positionData"
-            :loading="loading"
-            :pagination="{
-              pageSize: 10,
-              showSizeChanger: false,
-              showQuickJumper: true,
-              showTotal: (total) => `共 ${total} 条`,
-            }"
-            bordered
-            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
-            style="width: 100%"
-          />
-        </a-card>
-      </a-col>
-    </a-row>
-    <a-row>
-      <a-col :span="24">
-        <a-card style="margin: 10px" title="TOP国家/地区">
-          <a-row class="r5">
-            <a-col :span="18">
-              <map-adweb v-if="countryMapData.length > 0" :dataSource="countryMapData" height="400" />
-              <a-empty v-else style="margin-top: 50px" />
+          <a-row class="r2">
+            <a-col :span="8">
+              <p class="t1">账户余额</p>
+              <p class="t3">
+                <span class="value">{{ customerStats.balance }}</span>
+                <span class="currency">{{ customerStats.currency }}</span>
+              </p>
             </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="true"
-              >
-                <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.impressions }} | {{ record.clicks }} </template>
-                </template>
-              </a-table>
+            <a-col :span="8">
+              <p class="t1">总花费</p>
+              <p class="t3">
+                <span class="value">{{ customerStats.cost }}</span>
+                <span class="currency">{{ customerStats.currency }}</span>
+              </p>
+            </a-col>
+            <a-col :span="8">
+              <p class="t1">转化数</p>
+              <p class="t3">{{ customerStats.conversions }}</p>
             </a-col>
           </a-row>
-        </a-card>
-      </a-col>
-    </a-row>
-  </a-spin>
+        </a-col>
+        <a-col :span="8">
+          <a-row class="r2" style="height: 195px">
+            <a-col :span="24">
+              <p class="t1">优化得分</p>
+              <div class="score-circle" style="padding-bottom: 10px">
+                <a-progress
+                  type="circle"
+                  :percent="customerStats.optiScore.toFixed(2)"
+                  :width="80"
+                  :stroke-color="{
+                    '0%': '#FFB800',
+                    '100%': '#FFC53D',
+                  }"
+                />
+              </div>
+            </a-col>
+          </a-row>
+        </a-col>
+      </a-row>
+
+      <a-row>
+        <a-col :span="24">
+          <a-card style="margin: 10px" title="核心数据">
+            <a-row class="r5" :gutter="8">
+              <a-row class="r5-1">
+                <a-col :span="24">
+                  <template v-if="dailyStats.values && dailyStats.values.length > 0">
+                    <div class="fl">
+                      <a-button-group>
+                        <a-button :class="{ active: activeChart === 'impression' }" @click="switchChart('impression')">展示</a-button>
+                        <a-button :class="{ active: activeChart === 'clicks' }" @click="switchChart('clicks')">点击</a-button>
+                        <a-button :class="{ active: activeChart === 'ctr' }" @click="switchChart('ctr')">点击率（%）</a-button>
+                        <a-button :class="{ active: activeChart === 'conversion' }" @click="switchChart('conversion')">转化数</a-button>
+                        <a-button :class="{ active: activeChart === 'cost' }" @click="switchChart('cost')">花费</a-button>
+                      </a-button-group>
+                    </div>
+
+                    <line-chart :chartType="activeChart" :dailyStats="dailyStats" />
+                  </template>
+                  <template v-else>
+                    <a-empty />
+                  </template>
+                </a-col>
+              </a-row>
+            </a-row>
+          </a-card>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="24">
+          <a-card style="margin: 10px" title="广告系列">
+            <a-table
+              :columns="campaignColumns"
+              :data-source="tableData"
+              :loading="loading"
+              :pagination="{
+                pageSize: 10,
+                showSizeChanger: false,
+                showQuickJumper: true,
+                showTotal: (total) => `共 ${total} 条`,
+              }"
+              bordered
+              :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
+              style="width: 100%"
+            />
+          </a-card>
+        </a-col>
+      </a-row>
+      <a-row :gutter="8">
+        <a-col :span="12">
+          <a-card style="margin: 10px" title="TOP关键词">
+            <a-table
+              :columns="keywordColumns"
+              :data-source="keywordData"
+              :loading="loading"
+              :pagination="{
+                pageSize: 10,
+                showSizeChanger: false,
+                showQuickJumper: true,
+                showTotal: (total) => `共 ${total} 条`,
+              }"
+              bordered
+              :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
+              style="width: 100%"
+            />
+          </a-card>
+        </a-col>
+        <a-col :span="12">
+          <a-card style="margin: 10px" title="TOP展示位">
+            <a-table
+              :columns="positionColumns"
+              :data-source="positionData"
+              :loading="loading"
+              :pagination="{
+                pageSize: 10,
+                showSizeChanger: false,
+                showQuickJumper: true,
+                showTotal: (total) => `共 ${total} 条`,
+              }"
+              bordered
+              :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
+              style="width: 100%"
+            />
+          </a-card>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="24">
+          <a-card style="margin: 10px" title="TOP国家/地区">
+            <a-row class="r5">
+              <a-col :span="18">
+                <map-adweb v-if="countryMapData.length > 0" :dataSource="countryMapData" height="400" />
+                <a-empty v-else style="margin-top: 50px" />
+              </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="true"
+                >
+                  <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.impressions }} | {{ record.clicks }} </template>
+                  </template>
+                </a-table>
+              </a-col>
+            </a-row>
+          </a-card>
+        </a-col>
+      </a-row>
+    </a-spin>
+  </div>
 </template>
 
 <script setup lang="ts" name="marketing-googleads">
@@ -624,21 +626,21 @@
 </script>
 
 <style scoped lang="less">
-  .search-form {
-    position: fixed;
-    width: 100%;
-    z-index: 999;
-    top: 110px;
-    background-color: #f5f5f5;
-    //background-color: var(--header-bg-color) !important;
-
-    .search-form-container {
-      align-items: center;
-    }
-  }
-
-  :global(.jeecg-layout-content) {
+  .googlleads {
     padding-top: 72px;
+
+    .search-form {
+      position: fixed;
+      width: 100%;
+      z-index: 999;
+      top: 110px;
+      background-color: #f5f5f5;
+      //background-color: var(--header-bg-color) !important;
+
+      .search-form-container {
+        align-items: center;
+      }
+    }
   }
 
   .r1 {

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

@@ -54,7 +54,7 @@
                     <CheckCircle-Outlined :style="{ fontSize: '26px', color: 'green' }" />
                   </template>
                   <template v-else-if="index == current">
-                    <LoadingOutlined :style="{ fontSize: '26px', color: '#53a2d3' }" />
+                    <ClockCircle-Outlined :style="{ fontSize: '26px', color: '#9b9696' }" />
                   </template>
                   <template v-else>
                     <Lock-Outlined :style="{ fontSize: '26px', color: '#e5e7eb' }" />
@@ -253,7 +253,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { onMounted, reactive, ref, h } from 'vue';
 
-  import { LockOutlined, CheckCircleOutlined, LoadingOutlined } from '@ant-design/icons-vue';
+  import { LockOutlined, CheckCircleOutlined, LoadingOutlined, ClockCircleOutlined } from '@ant-design/icons-vue';
 
   const { createMessage } = useMessage();