From db35f2d7073e761b3ae841b3f5fa9c3f5e99cf28 Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Thu, 23 May 2024 18:45:37 +0800
Subject: [PATCH] 1

---
 .env.development                      |   8 +-
 src/api/merchant.js                   |  46 +++++
 src/layout/myAside.vue                |   1 +
 src/router/index.js                   |   6 +
 src/views/saleHome/index.vue          |   2 +-
 src/views/saleOrder/indexCount.vue    | 117 +-----------
 src/views/wallet/component/detail.vue | 255 ++++++++++++++++++++++++++
 src/views/wallet/component/order.vue  | 203 ++++++++++++++++++++
 src/views/wallet/index.vue            |  44 +++++
 9 files changed, 569 insertions(+), 113 deletions(-)
 create mode 100644 src/api/merchant.js
 create mode 100644 src/views/wallet/component/detail.vue
 create mode 100644 src/views/wallet/component/order.vue
 create mode 100644 src/views/wallet/index.vue

diff --git a/.env.development b/.env.development
index 23c6711..8a2f4db 100644
--- a/.env.development
+++ b/.env.development
@@ -1,7 +1,7 @@
 VITE_NOW_TYPE = 'dist'
 
-# VITE_PUSH_URL = 'ws://192.168.1.22:8787'
-# VITE_BASE_URL = 'http://192.168.1.22:8546'
+VITE_PUSH_URL = 'ws://192.168.1.22:8787'
+VITE_BASE_URL = 'http://192.168.1.22:8546'
 
-VITE_PUSH_URL ='wss://erp.lihaink.cn/pull'
-VITE_BASE_URL = 'https://erp.lihaink.cn'
\ No newline at end of file
+# VITE_PUSH_URL ='wss://erp.lihaink.cn/pull'
+# VITE_BASE_URL = 'https://erp.lihaink.cn'
\ No newline at end of file
diff --git a/src/api/merchant.js b/src/api/merchant.js
new file mode 100644
index 0000000..a9fbb85
--- /dev/null
+++ b/src/api/merchant.js
@@ -0,0 +1,46 @@
+import request from '@/utils/axios.js'
+
+/**
+  * @description 获取余额和银行信息
+  */
+export function amountAccountApi() {
+    return request.get(`/merchant/Merchant/amount_account`)
+}
+
+
+/**
+  * @description 提现列表
+  */
+export function amountTakingListsApi(data) {
+    return request.get(`/merchant/Merchant/taking_lists`, {params: data})
+}
+
+
+/**
+* @description 提现总次数和金额
+*/
+export function amountTakingInfoApi() {
+    return request.get(`/merchant/Merchant/taking_info`)
+}
+
+/**
+* @description 提现操作
+*/
+export function amountWithdrawApi(data) {
+    return request.post(`/merchant/Merchant/withdraw`, data)
+}
+
+/**
+  * @description 7日订单统计
+  */
+export function financialRecordApi(data) {
+  return request.get(`/financial/FinancialRecord/lists`, {params: data})
+}
+
+/**
+  * @description 余额明细
+  */
+export function financialRecordListsApi(data) {
+  return request.get(`/financial/FinancialRecord/api_lists`, {params: data})
+}
+
diff --git a/src/layout/myAside.vue b/src/layout/myAside.vue
index 38f23ac..36eeca5 100644
--- a/src/layout/myAside.vue
+++ b/src/layout/myAside.vue
@@ -59,6 +59,7 @@ const list = ref([
   },
   { name: "purchaseOrder", title: "采购订单", ico: "Van", count: 0 },
   { name: "orderCount", title: "订单统计", ico: "DocumentRemove", count: 0 },
+  { name: "wallet", title: "余额提现", ico: "Wallet", count: 0 },
   // { name: "test", title: "打印", ico: "Tickets", count: 0 },
 ]);
 const aup = () => {
diff --git a/src/router/index.js b/src/router/index.js
index dd5af33..79a8fcd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -41,6 +41,12 @@ const routes = [
         meta: { title: '订单统计' },
         component: () => import('@/views/saleOrder/indexCount.vue'),
       },
+      {
+        path: '/wallet',
+        name: 'wallet',
+        meta: { title: '提现' },
+        component: () => import('@/views/wallet/index.vue'),
+      },
       {
         path: '/test',
         name: 'test',
diff --git a/src/views/saleHome/index.vue b/src/views/saleHome/index.vue
index e3efb65..88af3da 100644
--- a/src/views/saleHome/index.vue
+++ b/src/views/saleHome/index.vue
@@ -227,4 +227,4 @@ onUnmounted(() => {
   background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
 }
 </style>
-, onMounted, onUnmounted
+
diff --git a/src/views/saleOrder/indexCount.vue b/src/views/saleOrder/indexCount.vue
index 4f16d1e..1713812 100644
--- a/src/views/saleOrder/indexCount.vue
+++ b/src/views/saleOrder/indexCount.vue
@@ -1,24 +1,9 @@
 <script setup>
 import { ref } from "vue";
-import {
-  orderListApi,
-  orderStatusApi,
-  orderLadingApi,
-  cartListApi,
-  statisticsApi,
-  orderPriceApi,
-} from "@/api/store.js";
-import { useUserStore } from "@/store/user.js";
-import pay from "@/components/pay.vue";
+import { amountTakingListsApi, financialRecordApi } from "@/api/merchant.js";
 import { ElMessage } from "element-plus";
-import { useRouter } from "vue-router";
 
-const userStore = useUserStore();
 const orderList = ref([]);
-const router = useRouter();
-
-const tabPosition = ref(1); // 1-全部, 2-未收银
-const payRef = ref(null);
 
 const where = ref({
   page_no: 1,
@@ -26,110 +11,26 @@ const where = ref({
 });
 
 const loading = ref(false);
-const total = ref(0);
 
 const getOrderList = () => {
-  orderPriceApi(where.value).then((res) => {
-    orderList.value = res.data;
-    // total.value = res.data.count;
+  financialRecordApi(where.value).then((res) => {
+    orderList.value = res.data.lists;
   });
 };
 
-// getOrderList();
+getOrderList();
 
-const formData = ref({});
-const getStatistics = () => {
-  loading.value = true;
-  statisticsApi(userStore.userInfo.service.mer_id, {
-    staff_id: userStore.userInfo.service.service_id,
-  }).then((res) => {
-    formData.value = res.data.data;
-    loading.value = false;
-  });
-};
-// getStatistics();
-
-const prevClick = (e) => {
-  where.value.page_no = e;
-  getOrderList();
-};
-
-const nextClick = (e) => {
-  where.value.page_no = e;
-  getOrderList();
-};
-
-const currentChange = (e) => {
-  where.value.page_no = e;
-  getOrderList();
-};
 </script>
 
 <template>
   <div v-loading="loading" element-loading-text="加载中" class="my-order">
-    <div class="from" v-if="formData.today">
-      <div class="form-card green">
-        <div>{{ formData.today.payPrice }}</div>
-        <div class="tips">今日线上收银金额</div>
-      </div>
-      <div class="form-card green">
-        <div>{{ formData.yesterday.payPrice }}</div>
-        <div class="tips">昨日线上收银金额</div>
-      </div>
-      <div class="form-card green">
-        <div>{{ formData.month.payPrice }}</div>
-        <div class="tips">本月线上收银金额</div>
-      </div>
-      <div class="form-card">
-        <div>{{ (formData.today.cashPayment + formData.today.payPrice).toFixed(2) }}</div>
-        <div class="tips">今日收银 线上+现金 总金额</div>
-      </div>
-      <div class="form-card">
-        <div>{{ (formData.month.cashPayment + formData.month.payPrice).toFixed(2) }}</div>
-        <div class="tips">本月收银 线上+现金 总金额</div>
-      </div>
-      <div class="form-card red">
-        <div>{{ formData.today.cashPayment }}</div>
-        <div class="tips">今日现金收银金额</div>
-      </div>
-      <div class="form-card red">
-        <div>{{ formData.yesterday.cashPayment }}</div>
-        <div class="tips">昨日现金收银金额</div>
-      </div>
-      <div class="form-card red">
-        <div>{{ formData.month.cashPayment }}</div>
-        <div class="tips">本月现金收银金额</div>
-      </div>
-      <div class="form-card">
-        <div>
-          {{ (formData.yesterday.cashPayment + formData.yesterday.payPrice).toFixed(2) }}
-        </div>
-        <div class="tips">昨日收银 线上+现金 总金额</div>
-      </div>
-      <!-- <div class="form-card">
-            <div>{{formData.today.orderNum}}</div>
-            <div class="tips">今日订单数</div>
-        </div>
-        <div class="form-card">
-            <div>{{formData.yesterday.orderNum}}</div>
-            <div class="tips">昨日订单数</div>
-        </div>
-        <div class="form-card">
-            <div>{{formData.month.orderNum}}</div>
-            <div class="tips">本月订单数</div>
-        </div> -->
-    </div>
     <div class="table">
       <el-table :data="orderList" style="width: 100%">
-        <el-table-column prop="day" label="日期" width="260" />
-        <el-table-column prop="total" label="订单数量" />
-        <el-table-column prop="cash_payment" label="现金收银金额" />
-        <el-table-column prop="pay_price" label="线上收银金额" />
-        <el-table-column label="总金额">
-          <template #default="scope">
-            {{ (((+scope.row.pay_price || 0) + (+scope.row.cash_payment || 0))).toFixed(2) }}
-          </template>
-        </el-table-column>
+        <el-table-column prop="record_date" label="时间" width="260" />
+        <el-table-column prop="cashier_cash_total_amount" label="现金收银金额(元)" />
+        <el-table-column prop="cashier_total_amount" label="线上收银金额(元)" />
+        <el-table-column prop="platofrm_total_amount" label="平台订单金额(元)" />
+        <el-table-column prop="total_amount" label="总金额(元)" />
       </el-table>
     </div>
   </div>
diff --git a/src/views/wallet/component/detail.vue b/src/views/wallet/component/detail.vue
new file mode 100644
index 0000000..2f67ddc
--- /dev/null
+++ b/src/views/wallet/component/detail.vue
@@ -0,0 +1,255 @@
+<script setup>
+import { onMounted, onUnmounted, ref } from "vue";
+import { amountTakingListsApi, financialRecordListsApi } from "@/api/merchant.js";
+import { ElMessage } from "element-plus";
+import mitt from "@/utils/mitt.js";
+import moment from "moment";
+
+const where = ref({
+  page_no: 1,
+  page_size: 15,
+  loadend: false,
+  loading: false,
+  create_time: "",
+  start_time: ""
+});
+const changeDate = () => {
+  where.value.page_no = 1;
+  where.value.loadend = false;
+  where.value.loading = false;
+  goods_list.value = [];
+  getOrderList();
+};
+
+const listType = ref(1);
+const goods_list = ref([]);
+const getOrderList = () => {
+  console.log("触底", !where.value.loadend , !where.value.loading);
+  if (!where.value.loadend && !where.value.loading) {
+    console.log("加载");
+    where.value.loading = true;
+    if (listType.value == 1)
+      amountTakingListsApi({
+        page_no: where.value.page_no,
+        page_size: where.value.page_size,
+        create_time: where.value.create_time,
+      }).then((res) => {
+        goods_list.value = [...goods_list.value, ...res.data.lists];
+        if (res.data.lists.length < where.value.page_size)
+          where.value.loadend = true;
+        where.value.loading = false;
+        where.value.page_no++;
+      });
+    if (listType.value == 2)
+      financialRecordListsApi({
+        page_no: where.value.page_no,
+        page_size: where.value.page_size,
+        start_time: moment(where.value.start_time || new Date()).format('YYYY-MM-DD'),
+        // end_time: moment('2024-05-16').format('YYYY-MM-DD'),
+      }).then((res) => {
+        goods_list.value = [...goods_list.value, ...res.data.lists];
+        if (res.data.lists.length < where.value.page_size)
+          where.value.loadend = true;
+        where.value.loading = false;
+        where.value.page_no++;
+      });
+  }
+};
+getOrderList();
+
+const changeListType = () => {
+  where.value.page_no = 1;
+  where.value.loadend = false;
+  where.value.loading = false;
+  goods_list.value = [];
+  getOrderList();
+};
+
+onMounted(() => {
+  mitt.on("get-taking-lists", (res) => {
+    where.value.page_no = 1;
+    where.value.loadend = false;
+    where.value.loading = false;
+    goods_list.value = [];
+    getOrderList();
+  });
+});
+
+onUnmounted(() => {
+  mitt.off("get-taking-lists");
+});
+</script>
+
+<template>
+  <div class="my-order">
+    <div class="date">
+      <div>
+        <el-date-picker
+        v-if="listType==1"
+          v-model="where.create_time"
+          type="month"
+          placeholder="请选择月份"
+          @change="changeDate"
+        />
+        <el-date-picker
+        v-if="listType==2"
+          v-model="where.start_time"
+          type="date"
+          placeholder="请选择日期"
+          @change="changeDate"
+          format="YYYY-MM-DD"
+        />
+        <el-button type="primary" style="margin-left: 1rem">重置</el-button>
+      </div>
+      <el-radio-group v-model="listType" @change="changeListType">
+        <el-radio-button label="提现记录" :value="1" />
+        <el-radio-button label="余额明细" :value="2" />
+      </el-radio-group>
+    </div>
+    <div class="detail">
+      <div
+        class="table"
+        v-loading="where.loading"
+        v-infinite-scroll="getOrderList"
+        infinite-scroll-distance="300"
+        infinite-scroll-delay="300"
+        style="overflow: auto"
+        :infinite-scroll-immediate="false"
+        v-if="listType==1"
+      >
+        <el-table :data="goods_list">
+          <el-table-column
+            prop="merchant_bank_info.is_own"
+            label="账户类型"
+            width="100"
+          >
+            <template #default="{ row }">
+              <div>
+                {{ row.merchant_bank_info.is_own ? "对公账户" : "个人账户" }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="price" label="银行卡">
+            <template #default="{ row }">
+              <div>
+                {{ row.merchant_bank_info.bank_info.name }} ({{
+                  row.merchant_bank_info.bank_code.slice(-4)
+                }})
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="amount" label="提现金额" width="150" />
+          <el-table-column label="备注/凭证" width="200">
+            <template #default="{ row }">
+              <div v-if="row.arrival_proof">
+                <el-image
+                  style="width: 3rem; height: 3rem; margin-right: 0.2rem"
+                  v-for="(item, index) in JSON.parse(row.arrival_proof)"
+                  :key="index"
+                  :src="item"
+                  :preview-src-list="JSON.parse(row.arrival_proof)"
+                  :initial-index="index"
+                ></el-image>
+              </div>
+              <div v-else>{{ row.fail_msg }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="提现状态" width="100">
+            <template #default="{ row }">
+              <el-tag v-if="row.arrival_proof" type="success">已到账</el-tag>
+              <el-tag v-else-if="row.is_check == 1" type="primary"
+                >待转账</el-tag
+              >
+              <el-tag v-else-if="row.is_check == 0" type="info">待审核</el-tag>
+              <el-tag v-else-if="row.is_check == 2" type="danger"
+                >提现失败</el-tag
+              >
+            </template>
+          </el-table-column>
+          <el-table-column prop="create_time" label="提现时间" width="200" />
+        </el-table>
+      </div>
+
+      <div
+        class="table"
+        v-loading="where.loading"
+        v-infinite-scroll="getOrderList"
+        infinite-scroll-distance="500"
+        infinite-scroll-delay="500"
+        style="overflow: auto"
+        :infinite-scroll-immediate="false"
+        v-if="listType==2"
+      >
+      <el-table :data="goods_list">
+          <el-table-column
+            prop="number_sn"
+            label="订单号"
+            width="250"
+          >
+          </el-table-column>
+          <el-table-column prop="number" label="变动金额" width="180" />
+          <el-table-column prop="financial_type" label="变动类型" width="180" />
+          <el-table-column prop="create_time" label="时间" />
+        </el-table>
+      </div>
+      
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.my-order {
+  border-radius: 1.2rem;
+  height: 100%;
+  flex: 1;
+  background-color: #fff;
+  position: relative;
+  overflow: hidden;
+
+  .date {
+    padding: 1rem 1rem 0 1rem;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .detail {
+    height: calc(100vh - 100px - 4rem);
+    box-sizing: border-box;
+    position: relative;
+
+    .table {
+      padding: 1rem;
+      padding-bottom: 6rem;
+      overflow-y: auto;
+      height: 100%;
+
+      .table-title {
+        font-weight: bold;
+      }
+      .table-info {
+        display: flex;
+        flex-wrap: wrap;
+        color: #777;
+        font-size: 0.9rem;
+        padding-bottom: 1rem;
+        margin-bottom: 1rem;
+        border-bottom: 1px solid #eee;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        .info-item {
+          width: 33%;
+          display: flex;
+          padding-top: 1rem;
+          .info-item-title {
+            flex-shrink: 0;
+            padding-right: 1rem;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/wallet/component/order.vue b/src/views/wallet/component/order.vue
new file mode 100644
index 0000000..77c81ea
--- /dev/null
+++ b/src/views/wallet/component/order.vue
@@ -0,0 +1,203 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import { useUserStore } from "@/store/user.js";
+import { ElMessage } from "element-plus";
+import { useRouter } from "vue-router";
+import mitt from "@/utils/mitt.js";
+import { amountAccountApi, amountTakingInfoApi, amountWithdrawApi } from "@/api/merchant.js";
+
+const userStore = useUserStore();
+
+const info = ref({
+  balance: 0,
+  count: 0,
+  total: 0
+});
+
+const bankList = ref([]);
+const getInfo = () => {
+  amountAccountApi().then((res) => {
+    res.data.bank_list.forEach(item => {
+      if(item.is_check){
+        form.value.merchant_bank_id = item.id; //选择默认银行卡
+      }
+    });
+    if(!form.value.merchant_bank_id) form.value.merchant_bank_id = res.data.bank_list[0].id;
+    bankList.value = res.data.bank_list;
+    info.value.balance = res.data.balance;
+  });
+  amountTakingInfoApi().then(res=>{
+    info.value = Object.assign(info.value, res.data);
+  })
+};
+
+getInfo();
+
+const form = ref({
+  merchant_bank_id: '',
+  amount: ''
+});
+const setForm = (e)=>{
+  form.value.merchant_bank_id = e.id
+}
+
+const submit = ()=>{
+  if(+form.value.amount <= 0) {
+    form.value.amount = '';
+    return ElMessage.error('提现金额必须大于0');
+  }
+  if(+form.value.amount > +info.value.balance) {
+    form.value.amount = info.value.balance;
+    return ElMessage.error('提现金额不能大于余额');
+  }
+  amountWithdrawApi(form.value).then(res=>{
+    form.value.amount = "";
+    ElMessage.success('提现成功，等待管理员审核');
+    mitt.emit('get-taking-lists')
+    getInfo();
+  })
+}
+</script>
+
+<template>
+  <div class="my-order">
+    <div class="header-nav">
+      <div class="nav-item">
+        {{ "提现" }}
+      </div>
+      <div class="nav-body">
+        <div class="my-money">
+          <div>我的余额:</div>
+          <div style="text-align: center; color: #2ec479;">
+            <span>{{ info.balance }}</span>元
+          </div>
+        </div>
+        <div class="my-count">
+          <div class="count">提现次数: <span>{{ info.count }}</span>次</div>
+          <div class="money">累计提现到账: <span style="color: #ff4a00;"> {{ info.total }}</span>元</div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="order-lists"
+      infinite-scroll-distance="300"
+      infinite-scroll-delay="500"
+      style="overflow: auto"
+    >
+      <div
+        class="item"
+        :class="{ 'item-active': form.merchant_bank_id == item.id }"
+        v-for="(item, index) in bankList"
+        :key="index"
+        @click="setForm(item, index)"
+      >
+        <div>
+          提现至 
+          <span style="color:#1890ff;">{{item.bank_name}}({{item.bank_code.slice(-4)}})</span>
+          <span class="own">{{ item.is_own==1?'对公':'个人' }}</span>
+        </div>
+      </div>
+    </div>
+    <div style="height: 8.2rem;"></div>
+    <div class="order-footer">
+      <div class="input-btn">
+        <el-input v-model="form.amount" placeholder="请输入提现金额" type="number"></el-input>
+        <el-button class="btn" type="primary" @click="form.amount=info.balance">全部</el-button>
+      </div>
+      <div class="order-btn">
+        <el-button class="btn" type="primary" @click="submit" :disabled="info.balance<=0">立即提现</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.my-order {
+  border-radius: 1.2rem;
+  height: 100%;
+  background-color: #fff;
+  width: 30rem;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .header-nav {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 1rem;
+    height: 7.5rem;
+
+    .nav-item {
+      font-weight: bold;
+    }
+
+    .nav-body {
+      .my-money {
+        padding: 0.4rem 0;
+        height: 4rem;
+        span {
+          font-size: 1.5rem;
+          font-weight: bold;
+        }
+      }
+      .my-count {
+        height: 1.4rem;
+        display: flex;
+        justify-content: space-between;
+        color: #777;
+      }
+    }
+  }
+  .order-lists {
+    flex: 1;
+    overflow-y: auto;
+    .item {
+      padding: 1rem;
+      border-bottom: 1px solid #eee;
+      .own{
+        font-size: 0.7rem;
+        padding: 0.1rem 0.2rem;
+        background-color: #2ec479;
+        color: #fff;
+        margin-left: 1rem;
+        border-radius: 0.2rem;
+      }
+    }
+    .item-active {
+      background-color: #efefef;
+    }
+  }
+  .order-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    box-shadow: 0 -1px 0.625rem #eee;
+    background-color: #fff;
+
+    .input-btn{
+      display: flex;
+      padding: 1rem 1.5rem;
+      padding-bottom: 0;
+
+      .btn{
+        margin-left: 1rem;
+      }
+    }
+
+    .order-btn {
+      height: 3.2rem;
+      padding: 1rem 1.5rem;
+      .btn {
+        width: 100%;
+        height: 100%;
+        font-size: 1.2rem;
+        border-radius: 3rem;
+      }
+    }
+  }
+}
+input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+</style>
diff --git a/src/views/wallet/index.vue b/src/views/wallet/index.vue
new file mode 100644
index 0000000..acf71bd
--- /dev/null
+++ b/src/views/wallet/index.vue
@@ -0,0 +1,44 @@
+<script setup>
+import order from "./component/order.vue";
+import detail from "./component/detail.vue";
+import padding from "@/components/padding.vue";
+import { ref, nextTick } from "vue";
+
+
+</script>
+
+<template>
+  <div class="my-card">
+    <order style="flex-shrink: 0;" ref="orderRef"/>
+    <padding />
+    <detail ref="detailRef"/>
+  </div>
+</template>
+
+<style lang="scss">
+.my-card {
+  display: flex;
+  
+}
+/* 修改滚动条的样式 */
+::-webkit-scrollbar {
+  width: 0.315rem; /* 设置滚动条的宽度 */
+}
+
+/* 设置滚动条的轨道样式 */
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1; /* 设置轨道的背景色 */
+  /* margin: 1.25rem 0; */
+}
+
+/* 设置滚动条的滑块样式 */
+::-webkit-scrollbar-thumb {
+  background-color: #ccc; /* 设置滑块的背景色 */
+  border-radius: 0.315rem; /* 设置滑块的圆角 */
+}
+
+/* 设置滚动条鼠标悬停时的滑块样式 */
+::-webkit-scrollbar-thumb:hover {
+  background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
+}
+</style>