diff --git a/dist.zip b/dist.zip
deleted file mode 100644
index 6806e47..0000000
Binary files a/dist.zip and /dev/null differ
diff --git a/src/components/townDetail/bottomRight.vue b/src/components/townDetail/bottomRight.vue
index e901a0c..833cc33 100644
--- a/src/components/townDetail/bottomRight.vue
+++ b/src/components/townDetail/bottomRight.vue
@@ -42,11 +42,8 @@ const aa = (cig, data) => {
             `<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.store_name || item.mer_name}</div>`,
             `<div style='  transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width:  ${item.store_name ? (item.total_sales / productRankingTotal.value).toFixed(2) * 100 : (item.total_sales / townProductCount.value).toFixed(2) * 100}%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
             `<div style=' position: relative;line-height:30px;text-align:center' >${item.total_sales} <span style='font-size:10px'>单</span>
-                    <img src="/static/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt="">
+                    <img src="/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt="">
                 </div>`,
-
-
-
         ])
     })
 
diff --git a/src/view/finance.vue b/src/view/finance.vue
index 516e0eb..aca4899 100644
--- a/src/view/finance.vue
+++ b/src/view/finance.vue
@@ -1,819 +1,867 @@
 <template>
-    <div class="box">
-        <div class="img-cls">
-            <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
-            <div class="content">
-                <div class="btns">
-                    <div style="display: flex;">
-                        <div class="btn" :class="headerIndex == 0 ? 'act-btn' : ''" @click="changeTable(0)">提现记录</div>
-                        <div class="btn" :class="headerIndex == 1 ? 'act-btn' : ''" @click="changeTable(1)">资金记录</div>
-                        <div class="btn" :class="headerIndex == 2 ? 'act-btn' : ''" @click="changeTable(2, 1)">账单管理</div>
-                    </div>
-                    <div style="margin-right: 0vw;">
-                        <div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
-                            v-if="headerIndex == 2">
-                            <div class="manageBtn " :class="{ actmanageBtn: billType == 1 }" @click="changeBill(1)">日账单
-                            </div>
-                            <div class="manageBtn" :class="{ actmanageBtn: billType == 2 }" @click="changeBill(2)">月账单</div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="bill" v-if="headerIndex == 2">
-                    <Bill v-for="(item, key) in billList" :key="index" :data="item"></Bill>
-                </div>
-
-                <div class="table" v-if="true">
-                    <dv-scroll-board :config="configs" v-if="headerIndex == 0  &&  configs.data.length" 
-                        style="width:95vw;height:78vh" />
-                    <dv-scroll-board :config="configs1" v-if="headerIndex == 1 && configs1.data.length"
-                        style="width:95vw;height:78vh" />
-                    <dv-scroll-board :config="configs2" v-if="headerIndex == 2 && configs2.data.length" @click='hdClick3'
-                        style="width:95vw;height:68vh" />
-                </div>
-
-                <Transition>
-                    <div class="pop" v-if="showPop">
-                        <img src="/static/finance/TC.png" alt=""
-                            style="width: 35vw;height: 40vh;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
-
-                        <div class="pop-content">
-                            <div class="pop-content-head">
-                                <span class="gradient-text">日账单
-                                    <span style="font-size: 10px;">{{ detailData.date }}</span>
-                                </span>
-                                <span class="off" @click="showPop = false"> 关闭</span>
-                            </div>
-
-                            <div class="pop-li">
-                                订单收入总金额： <span style="margin: 0 .5vw;"><span class="price">{{ detailData.income.number
-                                }}</span>元</span>
-                                <span>{{ detailData.income.count }}</span>
-                            </div>
-                            <div style="display: flex;justify-content: space-between;" class="pop-li">
-
-                                <div v-for="item in detailData.income.data">
-                                    {{ item[0] }} <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
-                                        item[1].slice(0, -1) }}</span>元</span>
-                                    <span>{{ item[2] }}</span>
-                                </div>
-                            </div>
-                            <div class="pop-li" style="margin-top: 3vh;">
-                                充值金额: <span style="margin: 0 2vw;"><span class="price">{{ detailData.bill.number
-                                }}</span>元</span> <span>{{
-    detailData.bill.count }}</span>
-                            </div>
-                            <div class="pop-li" style="margin-top: 3vh;">
-                                支出总金额: <span style="margin: 0 2vw;"><span class="price">{{ detailData.expend.number
-                                }}</span>元</span> <span>{{ detailData.expend.count }}</span>
-                            </div>
-
-
-
-                            <div style="display: flex;justify-content: space-between;" class="pop-li">
-
-                                <div>
-                                    应付商户金额 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
-                                        detailData.expend.data[0][1].slice(0, -1) }}</span>元</span>
-                                    <span>{{ detailData.expend.data[0][2] }}</span>
-                                </div>
-                                <div>
-                                    佣金 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
-                                        detailData.expend.data[1][1].slice(0, -1) }}</span>元</span>
-                                    <span>{{ detailData.expend.data[1][2] }}</span>
-                                </div>
-                                <div>
-                                    返回手续费 <span style="margin: 0 1vw;"><span class="price" style="color: white;">{{
-                                        detailData.expend.data[2][1].slice(0, -1) }}</span>元</span>
-                                    <span>{{ detailData.expend.data[2][2] }}</span>
-                                </div>
-                            </div>
-
-
-
-
-                            <div style="display: flex;justify-content: space-between;" class="pop-li">
-
-                                <div>
-                                    优惠券补贴 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
-                                        detailData.expend.data[3][1].slice(0, -1) }}</span>元</span>
-                                    <span>{{ detailData.expend.data[3][2] }}</span>
-                                </div>
-                                <div>
-                                    会员优惠券补贴 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
-                                        detailData.expend.data[4][1].slice(0, -1) }}</span>元</span>
-                                    <span>{{ detailData.expend.data[4][2] }}</span>
-                                </div>
-                                <div style="opacity: 0;">
-                                    返回手续费 <span style="margin: 0 1vw;"><span class="price"
-                                            style="color: white;">16.6</span>元</span>
-                                    <span>2笔</span>
-                                </div>
-                            </div>
-                            <div class="pop-li" style="margin-top: 3vh;">
-                                平台手续费收入总金额: <span class="price">{{ detailData.charge.number }} </span> 元
-                            </div>
-                        </div>
-                    </div>
-                </Transition>
-
-
+  <div class="box">
+    <div class="img-cls">
+      <img
+        src="/static/town/TABBG.png"
+        style="width: 100%; height: 100%; position: absolute"
+        alt=""
+      />
+      <div class="content">
+        <div class="btns">
+          <div style="display: flex">
+            <div
+              class="btn"
+              :class="headerIndex == 0 ? 'act-btn' : ''"
+              @click="changeTable(0)"
+            >
+              提现记录
             </div>
+            <div
+              class="btn"
+              :class="headerIndex == 1 ? 'act-btn' : ''"
+              @click="changeTable(1)"
+            >
+              资金记录
+            </div>
+            <div
+              class="btn"
+              :class="headerIndex == 2 ? 'act-btn' : ''"
+              @click="changeTable(2, 1)"
+            >
+              账单管理
+            </div>
+          </div>
+          <div style="margin-right: 0vw">
+            <div
+              style="
+                display: flex;
+                color: white;
+                justify-content: flex-end;
+                margin-right: 5vw;
+                cursor: pointer;
+              "
+              v-if="headerIndex == 2"
+            >
+              <div
+                class="manageBtn"
+                :class="{ actmanageBtn: billType == 1 }"
+                @click="changeBill(1)"
+              >
+                日账单
+              </div>
+              <div
+                class="manageBtn"
+                :class="{ actmanageBtn: billType == 2 }"
+                @click="changeBill(2)"
+              >
+                月账单
+              </div>
+            </div>
+          </div>
         </div>
-    </div>
-</template>
 
+        <div class="bill" v-if="headerIndex == 2">
+          <Bill
+            v-for="(item, key) in billList"
+            :key="index"
+            :data="item"
+          ></Bill>
+        </div>
+
+        <div class="table" v-if="true">
+          <dv-scroll-board
+            :config="configs"
+            v-if="headerIndex == 0 && configs.data.length"
+            style="width: 95vw; height: 78vh"
+          />
+          <dv-scroll-board
+            :config="configs1"
+            v-if="headerIndex == 1 && configs1.data.length"
+            style="width: 95vw; height: 78vh"
+          />
+          <dv-scroll-board
+            :config="configs2"
+            v-if="headerIndex == 2 && configs2.data.length"
+            @click="hdClick3"
+            style="width: 95vw; height: 68vh"
+          />
+        </div>
+
+        <Transition>
+          <div class="pop" v-if="showPop">
+            <img
+              src="/static/finance/TC.png"
+              alt=""
+              style="
+                width: 35vw;
+                height: 40vh;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+              "
+            />
+
+            <div class="pop-content">
+              <div class="pop-content-head">
+                <span class="gradient-text"
+                  >日账单
+                  <span style="font-size: 10px">{{ detailData.date }}</span>
+                </span>
+                <span class="off" @click="showPop = false"> 关闭</span>
+              </div>
+
+              <div class="pop-li">
+                订单收入总金额：
+                <span style="margin: 0 0.5vw"
+                  ><span class="price">{{ detailData.income.number }}</span
+                  >元</span
+                >
+                <span>{{ detailData.income.count }}</span>
+              </div>
+              <div
+                style="display: flex; justify-content: space-between"
+                class="pop-li"
+              >
+                <div v-for="item in detailData.income.data">
+                  {{ item[0] }}
+                  <span style="margin: 0 0.5vw"
+                    ><span class="price" style="color: white">{{
+                      item[1].slice(0, -1)
+                    }}</span
+                    >元</span
+                  >
+                  <span>{{ item[2] }}</span>
+                </div>
+              </div>
+              <div class="pop-li" style="margin-top: 3vh">
+                充值金额:
+                <span style="margin: 0 2vw"
+                  ><span class="price">{{ detailData.bill.number }}</span
+                  >元</span
+                >
+                <span>{{ detailData.bill.count }}</span>
+              </div>
+              <div class="pop-li" style="margin-top: 3vh">
+                支出总金额:
+                <span style="margin: 0 2vw"
+                  ><span class="price">{{ detailData.expend.number }}</span
+                  >元</span
+                >
+                <span>{{ detailData.expend.count }}</span>
+              </div>
+
+              <div
+                style="display: flex; justify-content: space-between"
+                class="pop-li"
+              >
+                <div>
+                  应付商户金额
+                  <span style="margin: 0 0.5vw"
+                    ><span class="price" style="color: white">{{
+                      detailData.expend.data[0][1].slice(0, -1)
+                    }}</span
+                    >元</span
+                  >
+                  <span>{{ detailData.expend.data[0][2] }}</span>
+                </div>
+                <div>
+                  佣金
+                  <span style="margin: 0 0.5vw"
+                    ><span class="price" style="color: white">{{
+                      detailData.expend.data[1][1].slice(0, -1)
+                    }}</span
+                    >元</span
+                  >
+                  <span>{{ detailData.expend.data[1][2] }}</span>
+                </div>
+                <div>
+                  返回手续费
+                  <span style="margin: 0 1vw"
+                    ><span class="price" style="color: white">{{
+                      detailData.expend.data[2][1].slice(0, -1)
+                    }}</span
+                    >元</span
+                  >
+                  <span>{{ detailData.expend.data[2][2] }}</span>
+                </div>
+              </div>
+
+              <div
+                style="display: flex; justify-content: space-between"
+                class="pop-li"
+              >
+                <div>
+                  优惠券补贴
+                  <span style="margin: 0 0.5vw"
+                    ><span class="price" style="color: white">{{
+                      detailData.expend.data[3][1].slice(0, -1)
+                    }}</span
+                    >元</span
+                  >
+                  <span>{{ detailData.expend.data[3][2] }}</span>
+                </div>
+                <div>
+                  会员优惠券补贴
+                  <span style="margin: 0 0.5vw"
+                    ><span class="price" style="color: white">{{
+                      detailData.expend.data[4][1].slice(0, -1)
+                    }}</span
+                    >元</span
+                  >
+                  <span>{{ detailData.expend.data[4][2] }}</span>
+                </div>
+                <div style="opacity: 0">
+                  返回手续费
+                  <span style="margin: 0 1vw"
+                    ><span class="price" style="color: white">16.6</span
+                    >元</span
+                  >
+                  <span>2笔</span>
+                </div>
+              </div>
+              <div class="pop-li" style="margin-top: 3vh">
+                平台手续费收入总金额:
+                <span class="price">{{ detailData.charge.number }} </span> 元
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+  </div>
+</template>
 
 <script setup>
 // 102B3
-import { ref, reactive, onMounted } from "vue"
-import { useRouter } from 'vue-router'
-import Bill from "@/components/Bill.vue"
-import { financial_record_titleApi, financial_recordApi, financial_record_detailApi, financial_record_detailApi2, bill_listApi, withdraw_listApi } from "@/api.js"
-import { areaObj } from '@/store/index.js'
-import { globalEventBus } from '@/common/eventBus'
+import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import Bill from "@/components/Bill.vue";
+import {
+  financial_record_titleApi,
+  financial_recordApi,
+  financial_record_detailApi,
+  financial_record_detailApi2,
+  bill_listApi,
+  withdraw_listApi,
+} from "@/api.js";
+import { areaObj } from "@/store/index.js";
+import { globalEventBus } from "@/common/eventBus";
 
+const areaStore = areaObj();
 
-
-const areaStore = areaObj()
-
-
-
-const billType = ref(1)
+const billType = ref(1);
 const changeBill = (num) => {
-    billType.value = num
-    changeTable(2, num)
-
-}
+  billType.value = num;
+  changeTable(2, num);
+};
 
 const billList = reactive([
-    // {
-    //     icon: "DD",
-    //     text: "订单总金额收入",
-    //     num: 1245
-    // },
-    // {
-    //     icon: "CZ",
-    //     text: "退款支出金额",
-    //     num: 1245
-    // },
-    // {
-    //     icon: "YJ",
-    //     text: "佣金支出金额",
-    //     num: 1245
-    // },
-    // {
-    //     icon: "PT",
-    //     text: "平台手续费",
-    //     num: 1245
-    // },
-    // {
-    //     icon: "CZ",
-    //     text: "充值金额",
-    //     num: 1245
-    // },
-    // {
-    //     icon: "CZXF",
-    //     text: "充值消费金额",
-    //     num: 1245
-    // },
-    // {
-    //     icon: "CS",
-    //     text: "产生交易的商户数",
-    //     num: 1245
-    // },
-    // {
-    //     icon: "YH",
-    //     text: "优惠券",
-    //     num: 1245
-    // },
-    // {
-    //     icon: "CS",
-    //     text: "入口商户金额",
-    //     num: 1245
-    // },
-    // {
-    //     icon: "YC",
-    //     text: "云仓库佣金",
-    //     num: 1245
-    // },
-    // {
-    //     icon: "XZ",
-    //     text: "小组服务佣金",
-    //     num: 1245
-    // },
-    // {
-    //     icon: "CY",
-    //     text: "村佣金",
-    //     num: 1245
-    // },
-    // {
-    //     icon: "ZY",
-    //     text: "镇佣金",
-    //     num: 1245
-    // },
-    // {
-    //     icon: "PT",
-    //     text: "平台剩余手续费",
-    //     num: 1245
-    // },
-])
+  // {
+  //     icon: "DD",
+  //     text: "订单总金额收入",
+  //     num: 1245
+  // },
+  // {
+  //     icon: "CZ",
+  //     text: "退款支出金额",
+  //     num: 1245
+  // },
+  // {
+  //     icon: "YJ",
+  //     text: "佣金支出金额",
+  //     num: 1245
+  // },
+  // {
+  //     icon: "PT",
+  //     text: "平台手续费",
+  //     num: 1245
+  // },
+  // {
+  //     icon: "CZ",
+  //     text: "充值金额",
+  //     num: 1245
+  // },
+  // {
+  //     icon: "CZXF",
+  //     text: "充值消费金额",
+  //     num: 1245
+  // },
+  // {
+  //     icon: "CS",
+  //     text: "产生交易的商户数",
+  //     num: 1245
+  // },
+  // {
+  //     icon: "YH",
+  //     text: "优惠券",
+  //     num: 1245
+  // },
+  // {
+  //     icon: "CS",
+  //     text: "入口商户金额",
+  //     num: 1245
+  // },
+  // {
+  //     icon: "YC",
+  //     text: "云仓库佣金",
+  //     num: 1245
+  // },
+  // {
+  //     icon: "XZ",
+  //     text: "小组服务佣金",
+  //     num: 1245
+  // },
+  // {
+  //     icon: "CY",
+  //     text: "村佣金",
+  //     num: 1245
+  // },
+  // {
+  //     icon: "ZY",
+  //     text: "镇佣金",
+  //     num: 1245
+  // },
+  // {
+  //     icon: "PT",
+  //     text: "平台剩余手续费",
+  //     num: 1245
+  // },
+]);
 
+financial_record_titleApi({
+  ...areaStore.area,
+}).then((res) => {
+  res.data.stat.forEach((item, i) => {
+    billList.push({
+      icon: foundIcon(item.name),
+      text: item.name,
+      num: item.count,
+    });
+  });
+});
 
-financial_record_titleApi(
-    {
-        ...areaStore.area
-    }
-
-).then(res => {
-    res.data.stat.forEach((item, i) => {
-        billList.push({
-            icon: foundIcon(item.name),
-            text: item.name,
-            num: item.count
-        })
-    })
-})
-
-
-let lists = [{
-        icon: "DD",
-        text: "订单收入总金额",
-        num: 1245
-    },
-    {
-        icon: "CZ",
-        text: "退款支出金额",
-        num: 1245
-    },
-    {
-        icon: "YJ",
-        text: "佣金支出金额",
-        num: 1245
-    },
-    {
-        icon: "PT",
-        text: "平台手续费",
-        num: 1245
-    },
-    {
-        icon: "CZ",
-        text: "充值金额",
-        num: 1245
-    },
-    {
-        icon: "CZXF",
-        text: "充值消费金额",
-        num: 1245
-    },
-    {
-        icon: "CS",
-        text: "产生交易的商户数",
-        num: 1245
-    },
-    {
-        icon: "YH",
-        text: "优惠券金额",
-        num: 1245
-    },
-    {
-        icon: "CS",
-        text: "入口商户金额",
-        num: 1245
-    },
-    {
-        icon: "YC",
-        text: "云仓库佣金",
-        num: 1245
-    },
-    {
-        icon: "XZ",
-        text: "小组服务佣金",
-        num: 1245
-    },
-    {
-        icon: "CY",
-        text: "村佣金",
-        num: 1245
-    },
-    {
-        icon: "ZY",
-        text: "镇佣金",
-        num: 1245
-    },
-    {
-        icon: "PT",
-        text: "平台剩余手续费",
-        num: 1245
-    },]
-
+let lists = [
+  {
+    icon: "DD",
+    text: "订单收入总金额",
+    num: 1245,
+  },
+  {
+    icon: "CZ",
+    text: "退款支出金额",
+    num: 1245,
+  },
+  {
+    icon: "YJ",
+    text: "佣金支出金额",
+    num: 1245,
+  },
+  {
+    icon: "PT",
+    text: "平台手续费",
+    num: 1245,
+  },
+  {
+    icon: "CZ",
+    text: "充值金额",
+    num: 1245,
+  },
+  {
+    icon: "CZXF",
+    text: "充值消费金额",
+    num: 1245,
+  },
+  {
+    icon: "CS",
+    text: "产生交易的商户数",
+    num: 1245,
+  },
+  {
+    icon: "YH",
+    text: "优惠券金额",
+    num: 1245,
+  },
+  {
+    icon: "CS",
+    text: "入口商户金额",
+    num: 1245,
+  },
+  {
+    icon: "YC",
+    text: "云仓库佣金",
+    num: 1245,
+  },
+  {
+    icon: "XZ",
+    text: "小组服务佣金",
+    num: 1245,
+  },
+  {
+    icon: "CY",
+    text: "村佣金",
+    num: 1245,
+  },
+  {
+    icon: "ZY",
+    text: "镇佣金",
+    num: 1245,
+  },
+  {
+    icon: "PT",
+    text: "平台剩余手续费",
+    num: 1245,
+  },
+];
 
 const foundIcon = (te) => {
-    let icons = ''
-    lists.forEach(item => {
-        item.text==te?icons=item.icon:icons='YJ'
-    })
-    return icons
-
-
-}
-
-
-
-
+  let icons = "";
+  lists.forEach((item) => {
+    item.text == te ? (icons = item.icon) : (icons = "YJ");
+  });
+  return icons;
+};
 
 const changeTable = (type, num) => {
+  if (type == 0) {
+    configs.data.splice(0, configs.data.length);
+    configs.data.splice(0, configs.data.length);
+    withdraw_listApi({
+      ...areaStore.area,
 
-    if (type == 0) {
-        configs.data.splice(0, configs.data.length)
-        configs.data.splice(0, configs.data.length)
-        withdraw_listApi(
-            {
-                ...areaStore.area,
+      limit: 50,
+    }).then((res) => {
+      addDta(res.data.list);
+    });
+  }
+  if (type == 1) {
+    configs1.data.splice(0, configs1.data.length);
+    bill_listApi({
+      ...areaStore.area,
 
-                limit: 50,
-            }
-        ).then(res => {
-            addDta(res.data.list)
+      limit: 50,
+    }).then((res) => {
+      addDta(res.data.list);
+    });
+  }
 
-        })
+  if (type == 2) {
+    configs2.data.splice(0, configs2.data.length);
+    financial_recordApi({
+      ...areaStore.area,
 
-    }
-    if (type == 1) {
-        configs1.data.splice(0, configs1.data.length)
-        bill_listApi(
-            {
-                ...areaStore.area,
+      limit: 50,
+      type: num,
+    }).then((res) => {
+      billData = res.data.list;
+      addDta(res.data.list);
+    });
+  }
 
-                limit: 50,
-            }
-        ).then(res => {
-            addDta(res.data.list)
-
-        })
-    }
-
-    if (type == 2) {
-        configs2.data.splice(0, configs2.data.length)
-        financial_recordApi({
-            ...areaStore.area,
-
-            limit: 50,
-            type: num
-        }).then(res => {
-            billData = res.data.list
-            addDta(res.data.list)
-        })
-
-    }
-
-    headerIndex.value = type
-    addConfigHead()
-}
+  headerIndex.value = type;
+  addConfigHead();
+};
 
 const hdClick = (e) => {
-   
-    alert(45)
-
-
-}
+  alert(45);
+};
 const extractTypeFn = (type) => {
-    if (type == 0) return "银行卡"
-    if (type == 1) return "支付宝"
-    if (type == 2) return "微信"
-    if (type == 3) return "零钱"
-}
+  if (type == 0) return "银行卡";
+  if (type == 1) return "支付宝";
+  if (type == 2) return "微信";
+  if (type == 3) return "零钱";
+};
 
 const statusFn = (type) => {
-    if (type == -1) return "未通过"
-    if (type == 0) return "审核中"
-    if (type == 1) return "审核通过"
-}
+  if (type == -1) return "未通过";
+  if (type == 0) return "审核中";
+  if (type == 1) return "审核通过";
+};
 
 const addDta = (data) => {
-    data.reverse().forEach((item, i) => {
-        if (headerIndex.value == 0) {
-            if (i % 2 == 0) {
-                configs.data.push(
-                    [
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${i + 1}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.merchant?.is_trader?"自营":"非自营"}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant?.mer_name}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.create_time}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.extract_money}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${'银行'}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${statusFn(item.status)}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.financial_status?"已到账":"未到账"}</div>`,
-
-                    ],
-                )
-            } else {
-                configs.data.push(
-                    [
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${i + 1}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;' >${item.merchant?.is_trader?"自营":"非自营"}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant?.mer_name}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.extract_money}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${'银行'}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${statusFn(item.status)}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.financial_status?"已到账":"未到账"}</div>`,
-                    ]
-                )
-            }
-        }
-
-
-
-        if (headerIndex.value == 1) {
-
-            if (i % 2 == 0) {
-
-                configs1.data.push(
-
-                    [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.uid}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.nickname}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.number}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.title}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mark}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.create_time}</div>`,
-                    ],
-                )
-            } else {
-                configs1.data.push(
-                    [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.uid}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.nickname}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.number}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.title}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mark}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`,
-
-                    ]
-                )
-            }
-
-
-
-        }
-        if (headerIndex.value == 2) {
-
-            if (i % 2 == 0) {
-
-                configs2.data.push(
-
-                    [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${i + 1}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.time}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.income}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.expend}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.charge}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;color:#59D7F3;cursor: pointer;'>详情</div>`,
-                    ],
-                )
-            } else {
-                configs2.data.push(
-                    [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${i + 1}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.time}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.income}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.expend}</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.charge}</div>`,
-                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#59D7F3;cursor: pointer;'>详情</div>`,
-                    ]
-                )
-            }
-
-        }
-
-
-    })
-
-console.log(configs)
-
-}
-
+  data.reverse().forEach((item, i) => {
+    if (headerIndex.value == 0) {
+      if (i % 2 == 0) {
+        configs.data.push([
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${
+            i + 1
+          }</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${
+            item.merchant?.is_trader ? "自营" : "非自营"
+          }</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant?.mer_name}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.create_time}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.extract_money}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${"银行"}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${statusFn(
+            item.status
+          )}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${
+            item.financial_status ? "已到账" : "未到账"
+          }</div>`,
+        ]);
+      } else {
+        configs.data.push([
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${
+            i + 1
+          }</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;' >${
+            item.merchant?.is_trader ? "自营" : "非自营"
+          }</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant?.mer_name}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.extract_money}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${"银行"}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${statusFn(
+            item.status
+          )}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${
+            item.financial_status ? "已到账" : "未到账"
+          }</div>`,
+        ]);
+      }
+    }
 
+    if (headerIndex.value == 1) {
+      if (i % 2 == 0) {
+        configs1.data.push([
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.uid}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.nickname}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.number}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.title}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mark}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.create_time}</div>`,
+        ]);
+      } else {
+        configs1.data.push([
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.uid}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.nickname}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.number}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.title}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mark}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`,
+        ]);
+      }
+    }
+    if (headerIndex.value == 2) {
+      if (i % 2 == 0) {
+        configs2.data.push([
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${
+            i + 1
+          }</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.time}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.income}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.expend}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.charge}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;color:#59D7F3;cursor: pointer;'>详情</div>`,
+        ]);
+      } else {
+        configs2.data.push([
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${
+            i + 1
+          }</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.time}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.income}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.expend}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.charge}</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#59D7F3;cursor: pointer;'>详情</div>`,
+        ]);
+      }
+    }
+  });
 
+  console.log(configs);
+};
 
 const configs = reactive({
-    headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
-    oddRowBGC: '',
-    evenRowBGC: "",
-    rowNum: 20,
-    columnWidth: [],
-    header: [
-    ],
-    data: [
-    ]
-})
+  headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
+  oddRowBGC: "",
+  evenRowBGC: "",
+  rowNum: 20,
+  columnWidth: [],
+  header: [],
+  data: [],
+});
 const configs1 = reactive({
-    headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
-    oddRowBGC: '',
-    evenRowBGC: "",
-    rowNum: 20,
-    header: [
-
-    ],
-    data: [
-    ]
-})
+  headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
+  oddRowBGC: "",
+  evenRowBGC: "",
+  rowNum: 20,
+  header: [],
+  data: [],
+});
 const configs2 = reactive({
-    headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
-    oddRowBGC: '',
-    evenRowBGC: "",
-    rowNum: 20,
-    header: [
+  headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
+  oddRowBGC: "",
+  evenRowBGC: "",
+  rowNum: 20,
+  header: [],
+  data: [],
+});
 
-    ],
-    data: [
-    ]
-})
-
-const headerIndex = ref(0)
-const configList = reactive([configs, configs1, configs2])
+const headerIndex = ref(0);
+const configList = reactive([configs, configs1, configs2]);
 const headerList = [
-    ['序号',  '商户类别', '商户名称', '申请时间', '转账金额（元）',  '收款方式', '审核状态', '到账状态', ],
-    ['会员ID', '昵称', '金额', '明细类型', '备注', '创建时间'],
-    ['序号', '日期', '账期内收入', '账期内支出', '平台入账金额', '操作'],
-
-]
+  [
+    "序号",
+    "商户类别",
+    "商户名称",
+    "申请时间",
+    "转账金额（元）",
+    "收款方式",
+    "审核状态",
+    "到账状态",
+  ],
+  ["会员ID", "昵称", "金额", "明细类型", "备注", "创建时间"],
+  ["序号", "日期", "账期内收入", "账期内支出", "平台入账金额", "操作"],
+];
 const addConfigHead = () => {
-    configList[headerIndex.value].header.splice(0, 9999)
-    headerList[headerIndex.value].forEach(item => {
-        configList[headerIndex.value].header.push(
-            `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>${item}</div>`
-        )
-    })
+  configList[headerIndex.value].header.splice(0, 9999);
+  headerList[headerIndex.value].forEach((item) => {
+    configList[headerIndex.value].header.push(
+      `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>${item}</div>`
+    );
+  });
+};
 
-
-}
-
-
-
-let billData = []
+let billData = [];
 // 详情弹窗
-const showPop = ref(false)
+const showPop = ref(false);
 
-const detailData = reactive({})
+const detailData = reactive({});
 
 const hdClick3 = (e) => {
-    if (e.columnIndex == 5) {
-
-        if (billType.value == 1) {
-            financial_record_detailApi(
-                { ...areaStore.area, date: billData[e.rowIndex].time }
-            ).then(res => {
-
-                for (let key in res.data) {
-                    detailData[key] = res.data[key]
-                }
-
-            })
-        }
-        if (billType.value == 2) {
-            financial_record_detailApi2(
-                { ...areaStore.area, date: billData[e.rowIndex].time }
-            ).then(res => {
-
-                for (let key in res.data) {
-                    detailData[key] = res.data[key]
-                }
-
-            })
-        }
-        showPop.value = true
-    }
-
-}
-
-
-
-onMounted(() => {
-    changeTable(2)
-    addConfigHead()
-    financial_recordApi({
-        ...areaStore.area,
-        limit: 50
-    }).then(res => {
-        addDta(res.data.list)
-    })
-})
-globalEventBus.on('header5-1', data => {
-    changeTable(0)
-})
-globalEventBus.on('header5-2', data => {
-    changeTable(1)
-})
-globalEventBus.on('header5-3', data => {
-    changeTable(2)
-})
-globalEventBus.on('header5-3-1', data => {
-    changeBill(1)
-})
-globalEventBus.on('header5-3-2', data => {
-    changeBill(2)
-})
-globalEventBus.on('header5-3-3', data => {
+  if (e.columnIndex == 5) {
     if (billType.value == 1) {
-        financial_record_detailApi(
-            { ...areaStore.area, date: data.time }
-        ).then(res => {
-
-            for (let key in res.data) {
-                detailData[key] = res.data[key]
-            }
-
-        })
+      financial_record_detailApi({
+        ...areaStore.area,
+        date: billData[e.rowIndex].time,
+      }).then((res) => {
+        for (let key in res.data) {
+          detailData[key] = res.data[key];
+        }
+      });
     }
     if (billType.value == 2) {
-        financial_record_detailApi2(
-            { ...areaStore.area, date: data.time }
-        ).then(res => {
-
-            for (let key in res.data) {
-                detailData[key] = res.data[key]
-            }
-
-        })
+      financial_record_detailApi2({
+        ...areaStore.area,
+        date: billData[e.rowIndex].time,
+      }).then((res) => {
+        for (let key in res.data) {
+          detailData[key] = res.data[key];
+        }
+      });
     }
+    showPop.value = true;
+  }
+};
 
-    showPop.value = true
-})
-globalEventBus.on('header5-3-4', data => {
-    showPop.value = false
-})
+onMounted(() => {
+  changeTable(2);
+  addConfigHead();
+  financial_recordApi({
+    ...areaStore.area,
+    limit: 50,
+  }).then((res) => {
+    addDta(res.data.list);
+  });
+});
+globalEventBus.on("header5-1", (data) => {
+  changeTable(0);
+});
+globalEventBus.on("header5-2", (data) => {
+  changeTable(1);
+});
+globalEventBus.on("header5-3", (data) => {
+  changeTable(2);
+});
+globalEventBus.on("header5-3-1", (data) => {
+  changeBill(1);
+});
+globalEventBus.on("header5-3-2", (data) => {
+  changeBill(2);
+});
+globalEventBus.on("header5-3-3", (data) => {
+  if (billType.value == 1) {
+    financial_record_detailApi({ ...areaStore.area, date: data.time }).then(
+      (res) => {
+        for (let key in res.data) {
+          detailData[key] = res.data[key];
+        }
+      }
+    );
+  }
+  if (billType.value == 2) {
+    financial_record_detailApi2({ ...areaStore.area, date: data.time }).then(
+      (res) => {
+        for (let key in res.data) {
+          detailData[key] = res.data[key];
+        }
+      }
+    );
+  }
+
+  showPop.value = true;
+});
+globalEventBus.on("header5-3-4", (data) => {
+  showPop.value = false;
+});
 </script>
 
-
 <style lang="scss" scoped>
 .box {
-    margin-top: 3vh;
-    width: 100vw;
+  margin-top: 3vh;
+  width: 100vw;
+  height: 90vh;
+  position: relative;
+
+  .img-cls {
+    width: 99%;
     height: 90vh;
-    position: relative;
-
-    .img-cls {
-
-        width: 99%;
-        height: 90vh;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        // background-color: #fff;
-        box-sizing: border-box;
-        // cursor: pointer;
-
-        .content {
-            width: 100%;
-            height: 100%;
-            padding: 2vw;
-        }
-
-    }
-
-    .btns {
-        display: flex;
-        z-index: 999999;
-        position: relative;
-        cursor: pointer;
-        justify-content: space-between;
-
-        .btn {
-            color: white;
-            // border: 1px solid #BF6D5D;
-            background-image: url('/static/index/btn.png');
-            background-size: 100% 100%;
-            padding: 1vh 1vw;
-            border-radius: 20px;
-            margin-right: 10px;
-            cursor: pointer;
-            font-size: 14px;
-        }
-
-        .act-btn {
-
-            background-image: url('/static/index/actbg.png');
-            background-size: 100% 100%;
-            border: none;
-            // border-bottom: 6px solid #BF6D5D
-            // border-bottom: 6px solid #BF6D5D;
-        }
-    }
-
-    .bill {
-        width: 95vw;
-        display: flex;
-        flex-wrap: wrap;
-        // justify-content: space-between;
-        // background-color: #fff;
-    }
-
-    .table {
-        width: 100%;
-        margin-top: 2vh;
-    }
-}
-
-.manageBtn {
-    padding: 0.75vh 0.75vw;
-    border-radius: 20px;
-    margin-right: 10px;
-    font-size: 14px;
-    // line-height: 10px;
-    background-image: url('/static/index/btn2.png');
-    background-size: 100% 100%;
-
-
-}
-
-.actmanageBtn {
-    background-image: url('/static/index/actbg2.png');
-    // background-size: 100% 100%;
-
-}
-
-
-:deep(.ceil) {
-    padding: 0 !important;
-    margin-bottom: 5px;
-    margin-right: 2px;
-}
-
-:deep(.header-item) {
-    padding: 0 !important;
-}
-
-.pop {
     position: absolute;
-    z-index: 99999999999999;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 35vw;
-    height: 40vh;
-
-    .pop-content {
-        // background-color: #fff;
-        width: 85%;
-        height: 85%;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 12px;
-
-        .pop-content-head {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 2vh;
-
-        }
-
-        .off {
-            padding: 0 1vw;
-            border: 1px solid white;
-            border-radius: 1vw;
-            color: white;
-            cursor: pointer;
-            font-size: 14px;
-        }
-
-
-        .pop-li {
-            margin-top: 1vh;
-            color: white;
-            border-bottom: 1px solid #43BEE2;
-            padding-bottom: .5vh;
-
-            .price {
-                color: #8F4C46;
-                font-size: 16px;
-            }
-        }
+    // background-color: #fff;
+    box-sizing: border-box;
+    // cursor: pointer;
 
+    .content {
+      width: 100%;
+      height: 100%;
+      padding: 2vw;
     }
+  }
+
+  .btns {
+    display: flex;
+    z-index: 999999;
+    position: relative;
+    cursor: pointer;
+    justify-content: space-between;
+
+    .btn {
+      color: white;
+      // border: 1px solid #BF6D5D;
+      background-image: url("/static/index/btn.png");
+      background-size: 100% 100%;
+      padding: 1vh 1vw;
+      border-radius: 20px;
+      margin-right: 10px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+
+    .act-btn {
+      background-image: url("/static/index/actbg.png");
+      background-size: 100% 100%;
+      border: none;
+      // border-bottom: 6px solid #BF6D5D
+      // border-bottom: 6px solid #BF6D5D;
+    }
+  }
+
+  .bill {
+    width: 95vw;
+    display: flex;
+    flex-wrap: wrap;
+    // justify-content: space-between;
+    // background-color: #fff;
+  }
+
+  .table {
+    width: 100%;
+    margin-top: 2vh;
+  }
+}
+
+.manageBtn {
+  padding: 0.75vh 0.75vw;
+  border-radius: 20px;
+  margin-right: 10px;
+  font-size: 14px;
+  // line-height: 10px;
+  background-image: url("/static/index/btn2.png");
+  background-size: 100% 100%;
+}
+
+.actmanageBtn {
+  background-image: url("/static/index/actbg2.png");
+  // background-size: 100% 100%;
+}
+
+:deep(.ceil) {
+  padding: 0 !important;
+  margin-bottom: 5px;
+  margin-right: 2px;
+}
+
+:deep(.header-item) {
+  padding: 0 !important;
+}
+
+.pop {
+  position: absolute;
+  z-index: 99999999999999;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 35vw;
+  height: 40vh;
+
+  .pop-content {
+    // background-color: #fff;
+    width: 85%;
+    height: 85%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+
+    .pop-content-head {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 2vh;
+    }
+
+    .off {
+      padding: 0 1vw;
+      border: 1px solid white;
+      border-radius: 1vw;
+      color: white;
+      cursor: pointer;
+      font-size: 14px;
+    }
+
+    .pop-li {
+      margin-top: 1vh;
+      color: white;
+      border-bottom: 1px solid #43bee2;
+      padding-bottom: 0.5vh;
+
+      .price {
+        color: #8f4c46;
+        font-size: 16px;
+      }
+    }
+  }
 }
 
 .gradient-text {
-    font-family: 'FZCYJ';
-
-    // background: linear-gradient(to bottom, #C6F2FB);
-    color: #C6F2FB;
-    font-size: 16px;
-    // -webkit-background-clip: text;
-    // -webkit-text-fill-color: transparent;
-    // font-size: 48px;
-    // font-weight: bold;
+  font-family: "FZCYJ";
+  color: #c6f2fb;
+  font-size: 16px;
 }
 
 .v-enter-active,
 .v-leave-active {
-    transition: opacity 0.5s ease;
+  transition: opacity 0.5s ease;
 }
 
 .v-enter-from,
 .v-leave-to {
-    opacity: 0;
-
+  opacity: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/view/townDetail.vue b/src/view/townDetail.vue
index cf1bc5d..880d5d5 100644
--- a/src/view/townDetail.vue
+++ b/src/view/townDetail.vue
@@ -3,9 +3,7 @@
         <dv-loading>Loading...</dv-loading>
     </div>
 
-
     <div :style="{ opacity: show ? 0 : 1 }">
-
         <div class="top box">
             <div class="l">
                 <topLeft :code="route.query.code" :key="route.query.code"></topLeft>
@@ -16,12 +14,9 @@
             <div class="r">
                 <topRight :code="route.query.code" :key="route.query.code"></topRight>
             </div>
-
-
         </div>
         <div class="bottom box">
             <div class="l">
-
                 <bottomleft :code="route.query.code" :key="route.query.code"></bottomleft>
             </div>
             <div class="c">
@@ -29,45 +24,37 @@
             </div>
             <div class="r">
                 <bottomRight :code="route.query.code" :key="route.query.code"></bottomRight>
-
             </div>
         </div>
     </div>
 </template>
 <script setup>
-import { onMounted } from 'vue';
-import bottomRight from "@/components/townDetail/bottomRight.vue"
-import bottomCenter from "@/components/townDetail/bottomCenter.vue"
-import bottomleft from "@/components/townDetail/bottomleft.vue"
-import { useRoute } from 'vue-router';
-import topCenter from "@/components/townDetail/topCenter.vue"
-import topLeft from "@/components/townDetail/topLeft.vue"
-import topRight from "@/components/townDetail/topRight.vue"
-import { ref } from 'vue'
+import { onMounted } from "vue";
+import bottomRight from "@/components/townDetail/bottomRight.vue";
+import bottomCenter from "@/components/townDetail/bottomCenter.vue";
+import bottomleft from "@/components/townDetail/bottomleft.vue";
+import { useRoute } from "vue-router";
+import topCenter from "@/components/townDetail/topCenter.vue";
+import topLeft from "@/components/townDetail/topLeft.vue";
+import topRight from "@/components/townDetail/topRight.vue";
+import { ref } from "vue";
 
-const show = ref(true)
-
-
-const route = useRoute()
+const show = ref(true);
 
+const route = useRoute();
 
 onMounted(() => {
-
     setTimeout(() => {
-        show.value = false
-    }, 1000)
-
-})
-
+        show.value = false;
+    }, 1000);
+});
 </script>
 
-
 <style lang="scss" scoped>
 .box {
     width: 100vw;
     height: 47vh;
     box-sizing: border-box;
-
 }
 
 .top {
@@ -83,9 +70,6 @@ onMounted(() => {
         box-sizing: border-box;
         position: relative;
         padding-top: 6vh;
-
-
-
     }
 
     .c {
@@ -95,19 +79,13 @@ onMounted(() => {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-
-
     }
 
-
     .r {
         width: 25vw;
         height: 46vh;
         position: relative;
         // background-color: RED;
-
-
-
     }
 }
 
@@ -119,35 +97,26 @@ onMounted(() => {
 
     .l {
         // flex: 1;
-        width: 25VW;
+        width: 25vw;
         height: 46vh;
         position: relative;
-
-
-
     }
 
     .c {
-        width: 48VW;
+        width: 48vw;
 
         height: 46vh;
         position: relative;
-
-
-
     }
 
     .r {
-        width: 25VW;
+        width: 25vw;
 
         height: 46vh;
         position: relative;
-
-
     }
 }
 
-
 .center {
     position: absolute;
     top: 50%;
@@ -159,7 +128,7 @@ onMounted(() => {
     transform: translateY(12px);
     width: 100%;
     height: 10px;
-    background-color: #122E3F;
+    background-color: #122e3f;
     // border-radius: 10px;
     overflow: hidden;
 }
@@ -167,7 +136,7 @@ onMounted(() => {
 .progress {
     width: 70%;
     height: 100%;
-    background: linear-gradient(to right, #455CCC, #51C2E0);
+    background: linear-gradient(to right, #455ccc, #51c2e0);
     transition: width 0.5s ease-in-out;
 }
 
@@ -178,4 +147,4 @@ onMounted(() => {
     transform: translate(-50%, -50%);
     color: white;
 }
-</style>
\ No newline at end of file
+</style>