From 491bcd8d1332083394c4237bc922b32b1c56b4db Mon Sep 17 00:00:00 2001
From: hrx <18603305412@163.com>
Date: Mon, 22 Sep 2025 17:57:25 +0800
Subject: [PATCH 1/2] uptada style

---
 f/web-kboss/src/layout/components/Navbar.vue  | 296 ++++++------
 .../src/layout/components/Sidebar/index.vue   | 103 ++--
 f/web-kboss/src/main.js                       |   3 +-
 f/web-kboss/src/router/index.js               |   4 +-
 f/web-kboss/src/styles/index.css              |  22 +
 f/web-kboss/src/styles/variables.scss         |  22 +-
 .../qualificationReview/apprvedInfo/index.vue |  38 +-
 .../noApproveInfo/index.vue                   |   2 +-
 .../views/customer/rechargeRecord/index.vue   |   2 +-
 .../operation/consultingMangement/index.vue   |   4 +-
 .../views/operation/menuMangement/index.vue   |  56 +--
 .../publicCostomerManagement/index.vue        | 199 +++++---
 .../operation/supplierManagement/index.vue    | 160 +++++--
 .../src/views/product/mainPage/index.vue      | 442 ++++++++++--------
 .../productHome/productIndex/index.vue        | 222 ++++-----
 15 files changed, 922 insertions(+), 653 deletions(-)
 create mode 100644 f/web-kboss/src/styles/index.css

diff --git a/f/web-kboss/src/layout/components/Navbar.vue b/f/web-kboss/src/layout/components/Navbar.vue
index 5bd0eb4..0329e03 100644
--- a/f/web-kboss/src/layout/components/Navbar.vue
+++ b/f/web-kboss/src/layout/components/Navbar.vue
@@ -1,39 +1,30 @@
 <template>
-  <div class="navbar"
-       style="height: 48px;background-color: white;color: white!important;">
+  <div class="navbar" style="height: 48px;background-color: white;color: white!important;">
     <div class="logo" v-if="isShowKbossCharge">
-      <img @click="$router.push('/product/productHome')" src="./img/img.png" alt=""
-           class="img">
+      <img @click="$router.push('/product/productHome')" src="./img/img.png" alt="" class="img">
       <span style="color: #423f3f;font-size: 20px;margin-left: 15px">平台充值中心</span>
     </div>
     <!--          v-show="!role.includes('客户')" -->
     <!--    v-if="!isShowKbossCharge&&!role.includes('客户')||isMobileScreen"-->
-    <hamburger
-
-      v-if="false"
-      style="display: flex;justify-content: center;align-items: center;color: white!important;"
-      id="hamburger-container" :is-active="sidebar.opened"
-      class="hamburger-container"
-      @toggleClick="toggleSideBar"/>
+    <hamburger v-if="false" style="display: flex;justify-content: center;align-items: center;color: white!important;"
+      id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
     <breadcrumb style="color:white!important;display: flex;justify-content: center;align-items: center;height: 100%;"
-                id="breadcrumb-container"
-                class="breadcrumb-container"/>
+      id="breadcrumb-container" class="breadcrumb-container" />
     <div class="right-menu"
-         style="display:flex;justify-content: center!important;align-items: center!important;margin-right: 10px;">
+      style="display:flex;justify-content: center!important;align-items: center!important;margin-right: 10px;">
       <template style="justify-content: center;align-items: center;transform: translate(0,-30px)!important;">
         <span v-if="isShowKbossCharge" @click="$router.push('/product/productHome')"
-              class="right-menu-item hover-effect "
-              style="font-size: 16px;display: flex;justify-content: center;align-items: center">
-            <b style="display: flex;justify-content: center;align-items: center">
-      回到首页
-            </b>
-          </span>
+          class="right-menu-item hover-effect "
+          style="font-size: 16px;display: flex;justify-content: center;align-items: center">
+          <b style="display: flex;justify-content: center;align-items: center">
+            回到首页
+          </b>
+        </span>
         <!--        <el-button @click="openChou" type="text">全部产品</el-button>-->
         <el-tooltip v-if="role.includes('客户')" class="item" effect="dark" content="查询产品" placement="bottom">
           <span class="right-menu-item hover-effect"
-                style="font-size: 26px;display: flex;justify-content: center;align-items: center">
-              <i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-search"
-                 @click="showSearch"/>
+            style="font-size: 26px;display: flex;justify-content: center;align-items: center">
+            <i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-search" @click="showSearch" />
           </span>
         </el-tooltip>
         <!--        <el-tooltip class="item " effect="dark" content="购物车" placement="bottom" v-if="org_type==2||org_type==3">-->
@@ -48,18 +39,17 @@
         <!--        </el-tooltip>-->
         <el-tooltip class="item" effect="dark" content="信息" placement="bottom">
           <span class="right-menu-item hover-effect"
-                style="font-size: 26px;display: flex;justify-content: center;align-items: center">
-            <el-badge :value="count==0?'':count" :max="9" class="badge"
-                      style="height: 35px;display: flex;justify-content: center;align-items: center">
-              <i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-message" @click="infrom"/>
+            style="font-size: 26px;display: flex;justify-content: center;align-items: center">
+            <el-badge :value="count == 0 ? '' : count" :max="9" class="badge"
+              style="height: 35px;display: flex;justify-content: center;align-items: center">
+              <i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-message" @click="infrom" />
             </el-badge>
           </span>
         </el-tooltip>
         <el-tooltip v-if="!role.includes('客户')" class="item" effect="dark" content="可视化大屏" placement="bottom">
           <span class="right-menu-item hover-effect"
-                style="font-size: 26px;display: flex;justify-content: center;align-items: center">
-              <i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-s-data"
-                 @click="goScreen"/>
+            style="font-size: 26px;display: flex;justify-content: center;align-items: center">
+            <i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-s-data" @click="goScreen" />
           </span>
         </el-tooltip>
 
@@ -69,8 +59,7 @@
       </template>
       <!-- <el-tooltip class="item" effect="dark" content="操作" placement="bottom"> -->
       <el-dropdown @visible-change="handleShow" class="avatar-container right-menu-item hover-effect nick-name-style"
-                   style="margin-right: 0"
-                   trigger="click">
+        style="margin-right: 0" trigger="click">
         <div class="avatar-wrapper">
           <!-- <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> -->
           <i
@@ -84,48 +73,37 @@
           <!-- <div class="block"><el-avatar shape="square" size=small :src="squareUrl"></el-avatar></div> -->
         </div>
         <el-dropdown-menu slot="dropdown" style="width: 230px;font-size: 16px;" divided>
-          <div
-            style="display: flex;flex-direction: column;padding:15px 15px;background-color: #f0f2f5">
+          <div style="display: flex;flex-direction: column;padding:15px 15px;background-color: #f0f2f5">
             <span style="font-weight: bold;font-size: 20px;margin-bottom: 5px;color: #333333">{{ nick_name }}</span>
-            <span
-              style="font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center"> ID:  <span
-              ref="contentToCopy">
-              {{
-                userId
-              }}
+            <span style="font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center"> ID:
+              <span ref="contentToCopy">
+                {{
+                  userId
+                }}
 
-            </span>
-                <svg
-                  @click="copyBtn"
-                  class="copy-btn"
-                  viewBox="0 0 1024 1024"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="12"
-                  height="12"
-                  style="fill: #1019ab;"
-                >
-<path
-  d="M394.666667 106.666667h448a74.666667 74.666667 0 0 1 74.666666 74.666666v448a74.666667 74.666667 0 0 1-74.666666 74.666667H394.666667a74.666667 74.666667 0 0 1-74.666667-74.666667V181.333333a74.666667 74.666667 0 0 1 74.666667-74.666666z m0 64a10.666667 10.666667 0 0 0-10.666667 10.666666v448a10.666667 10.666667 0 0 0 10.666667 10.666667h448a10.666667 10.666667 0 0 0 10.666666-10.666667V181.333333a10.666667 10.666667 0 0 0-10.666666-10.666666H394.666667z m245.333333 597.333333a32 32 0 0 1 64 0v74.666667a74.666667 74.666667 0 0 1-74.666667 74.666666H181.333333a74.666667 74.666667 0 0 1-74.666666-74.666666V394.666667a74.666667 74.666667 0 0 1 74.666666-74.666667h74.666667a32 32 0 0 1 0 64h-74.666667a10.666667 10.666667 0 0 0-10.666666 10.666667v448a10.666667 10.666667 0 0 0 10.666666 10.666666h448a10.666667 10.666667 0 0 0 10.666667-10.666666v-74.666667z"
-  p-id="1521"></path>
-    </svg>
+              </span>
+              <svg @click="copyBtn" class="copy-btn" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
+                width="12" height="12" style="fill: #1019ab;">
+                <path
+                  d="M394.666667 106.666667h448a74.666667 74.666667 0 0 1 74.666666 74.666666v448a74.666667 74.666667 0 0 1-74.666666 74.666667H394.666667a74.666667 74.666667 0 0 1-74.666667-74.666667V181.333333a74.666667 74.666667 0 0 1 74.666667-74.666666z m0 64a10.666667 10.666667 0 0 0-10.666667 10.666666v448a10.666667 10.666667 0 0 0 10.666667 10.666667h448a10.666667 10.666667 0 0 0 10.666666-10.666667V181.333333a10.666667 10.666667 0 0 0-10.666666-10.666666H394.666667z m245.333333 597.333333a32 32 0 0 1 64 0v74.666667a74.666667 74.666667 0 0 1-74.666667 74.666666H181.333333a74.666667 74.666667 0 0 1-74.666666-74.666666V394.666667a74.666667 74.666667 0 0 1 74.666666-74.666667h74.666667a32 32 0 0 1 0 64h-74.666667a10.666667 10.666667 0 0 0-10.666666 10.666667v448a10.666667 10.666667 0 0 0 10.666666 10.666666h448a10.666667 10.666667 0 0 0 10.666667-10.666666v-74.666667z"
+                  p-id="1521"></path>
+              </svg>
             </span>
           </div>
           <el-divider style="margin: 0!important;"></el-divider>
-          <div
-            v-if="role.includes('客户')"
+          <div v-if="role.includes('客户')"
             style="padding: 0 18px;  width: 100%;height: 60px;display: flex;justify-content: space-between;align-items: center">
 
-            <span style="color:#666;display: block;font-size: 14px;"
-                  class="moneyNow"><span style="display: block;margin-bottom: 5px">余额</span>{{
-                mybalance ? mybalance : initMybalance()
-              }} ￥</span>
+            <span style="color:#666;display: block;font-size: 14px;" class="moneyNow"><span
+                style="display: block;margin-bottom: 5px">余额</span>{{
+                  mybalance ? mybalance : initMybalance()
+                }} ￥</span>
             <el-button v-if="!isShowKbossCharge" type="primary" @click="$router.push('/kbossCharge')" plain
-                       style="padding: 8px; ">
+              style="padding: 8px; ">
               充值
             </el-button>
           </div>
-          <el-dropdown-item v-if="role.includes('客户')"
-                            @click.native="$router.push('/customer/customerInformation')">
+          <el-dropdown-item v-if="role.includes('客户')" @click.native="$router.push('/customer/customerInformation')">
             <span style="display: block">个人中心</span>
           </el-dropdown-item>
           <!--           channelManagementShow=true-->
@@ -158,7 +136,7 @@
 
     <!-- 移动端通知弹框 -->
     <el-drawer :visible.sync="drawer" v-if="isMobile" :direction="direction" :withHeader="false" size="90%"
-               class="drawerMobile">
+      class="drawerMobile">
       <el-container class="container">
         <el-aside width="95px" class="aside">
           <div class="header">消息中心</div>
@@ -178,9 +156,9 @@
                 <el-button size="mini" type="danger" @click="delMessage">删除</el-button>
               </div>
               <el-table :header-cell-style="rowClass" @expand-change="expandChangeHandler" ref="table"
-                        @row-click="expandChangeHandler1" class="table" :row-class-name="rowStyle"
-                        :data="alliInformationList?alliInformationList:[]" height="680" tooltip-effect="dark"
-                        @selection-change="handleSelectionChange">
+                @row-click="expandChangeHandler1" class="table" :row-class-name="rowStyle"
+                :data="alliInformationList ? alliInformationList : []" height="680" tooltip-effect="dark"
+                @selection-change="handleSelectionChange">
                 <el-table-column type="expand" width="30px">
                   <template slot-scope="props">
                     <div class="msgtext">
@@ -204,8 +182,8 @@
                 <el-button size="mini" type="danger" @click="delMessage">删除</el-button>
               </div>
               <el-table :header-cell-style="rowClass" @row-click="expandChangeHandler1" class="table" ref="table"
-                        @expand-change="expandChangeHandler" :row-class-name="rowStyle" :data="unreadMessageList"
-                        height="680" tooltip-effect="dark" @selection-change="handleSelectionChange">
+                @expand-change="expandChangeHandler" :row-class-name="rowStyle" :data="unreadMessageList" height="680"
+                tooltip-effect="dark" @selection-change="handleSelectionChange">
                 <el-table-column type="expand" width="30px">
                   <template slot-scope="props">
                     <div class="msgtext">
@@ -228,8 +206,8 @@
                 <el-button size="mini" type="danger" @click="delMessage">删除</el-button>
               </div>
               <el-table :header-cell-style="rowClass" ref="table" class="table" @row-click="expandChangeHandler2"
-                        @expand-change="expandChangeHandler" @selection-change="handleSelectionChange"
-                        :row-class-name="rowStyle" :data="readInformationList" height="680" tooltip-effect="dark">
+                @expand-change="expandChangeHandler" @selection-change="handleSelectionChange"
+                :row-class-name="rowStyle" :data="readInformationList" height="680" tooltip-effect="dark">
                 <el-table-column type="expand" width="30px">
                 </el-table-column>
                 <el-table-column type="selection" width="55"></el-table-column>
@@ -246,7 +224,7 @@
 
     <!-- 通知弹框 -->
     <el-drawer @close="closeMesssageWindow" :visible.sync="drawer" v-else :direction="direction" :withHeader="false"
-               size="70%" class="drawer">
+      size="70%" class="drawer">
       <el-container style="height: 100vh">
         <el-aside width="200px" class="aside">
           <div class="header" style="font-size:16px;">消息中心</div>
@@ -266,8 +244,8 @@
                 <el-button size="small" type="danger" @click="delMessage">删除</el-button>
               </div>
               <el-table @expand-change="expandChangeHandler" ref="table" @row-click="expandChangeHandler1" class="table"
-                        :row-class-name="rowStyle" :data="alliInformationList?alliInformationList:[]" height="780"
-                        tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
+                :row-class-name="rowStyle" :data="alliInformationList ? alliInformationList : []" height="780"
+                tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                 <el-table-column type="expand" width="30px">
                   <template slot-scope="props">
                     <div class="msgtext">
@@ -291,8 +269,8 @@
                 <el-button size="small" type="danger" @click="delMessage">删除</el-button>
               </div>
               <el-table @row-click="expandChangeHandler1" ref="table" @expand-change="expandChangeHandler"
-                        :row-class-name="rowStyle" :data="unreadMessageList" height="780" tooltip-effect="dark"
-                        style="width: 100%" @selection-change="handleSelectionChange">
+                :row-class-name="rowStyle" :data="unreadMessageList" height="780" tooltip-effect="dark"
+                style="width: 100%" @selection-change="handleSelectionChange">
                 <el-table-column type="expand" width="30px">
                   <template slot-scope="props">
                     <div class="msgtext">
@@ -315,8 +293,8 @@
                 <el-button size="small" type="danger" @click="delMessage">删除</el-button>
               </div>
               <el-table ref="table" @row-click="expandChangeHandler2" @expand-change="expandChangeHandler"
-                        @selection-change="handleSelectionChange" :row-class-name="rowStyle" :data="readInformationList"
-                        height="780" tooltip-effect="dark" style="width: 100%">
+                @selection-change="handleSelectionChange" :row-class-name="rowStyle" :data="readInformationList"
+                height="780" tooltip-effect="dark" style="width: 100%">
                 <el-table-column type="expand" width="30px">
                 </el-table-column>
                 <el-table-column type="selection" width="55"></el-table-column>
@@ -334,8 +312,8 @@
 
 
     <!-- 修改密码弹窗 -->
-    <el-dialog title="修改密码 " :visible.sync="passwordDialog" width="45%" :before-close="handleClose1"
-               style="width: 80%">
+    <el-dialog title="修改密码" :visible.sync="passwordDialog" width="45%" :before-close="handleClose1"
+      custom-class="password-dialog" class="password-dialog-wrapper">
       <el-form ref="passwordForm" :model="passwordForm" label-width="120px" style="width: 80%" :rules="rules">
         <el-form-item label="旧密码:" prop="password">
           <el-input v-model="passwordForm.password" placeholder="请输入旧密码" show-password></el-input>
@@ -355,9 +333,9 @@
 
     <!-- 修改个人信息弹窗 -->
     <el-dialog title="修改个人信息" :visible.sync="editUserInfoDialog" width="45%" :before-close="handleClose2"
-               style="width: 80%" class="userInfoDialog">
+      style="width: 80%" class="userInfoDialog">
       <el-form ref="editUserInfoForm" :model="editUserInfoForm" label-width="120px" style="width: 70%"
-               :rules="editRules">
+        :rules="editRules">
         <el-form-item label="昵称:" prop="">
           <el-input v-model="editUserInfoForm.nick_name" placeholder="请输入昵称"></el-input>
         </el-form-item>
@@ -373,8 +351,8 @@
         <el-form-item label="二维码名片:" prop="">
           <div class="upload-box">
             <el-upload style="height: 60px; width: 60px;" class="avatar-uploader" action="#" :show-file-list="false"
-                       :auto-upload="false" :on-change="handleAvatarSuccess">
-              <img style="height: 60px; width: 60px" v-if="imageUrl" :src="imageUrl" class="avatar"/>
+              :auto-upload="false" :on-change="handleAvatarSuccess">
+              <img style="height: 60px; width: 60px" v-if="imageUrl" :src="imageUrl" class="avatar" />
               <i style="height: 60px; width: 60px" v-else class="el-icon-plus avatar-uploader-icon"></i>
             </el-upload>
           </div>
@@ -388,7 +366,7 @@
 
     <!-- Form -->
     <el-button type="text" @click="dialogFormVisible = true" v-if="this.$store.state.operationAnalysis.themeStates"
-               class="themeBtn">
+      class="themeBtn">
       <img src="../../icons/svg/主题.png" alt="" style="width: 26px;height: 26px;">
     </el-button>
 
@@ -425,39 +403,30 @@
     </el-dialog>
     <!--    渠道管理-->
 
-    <el-dialog
-      title="渠道管理信息提示"
-      :visible.sync="channelManagementShow"
-      custom-class="channel-dialog-style">
-      <span class="indent">开元云公司作为一级分销商面对直接客户，售出设备产品。产品由供应商上传平台，设置产品价格配置，及设备账号密码等配置信息，开元云进行审核，审核通过产品上线，客户可直接购买。开元云可以将产品分配给各供应商销售，分配时配置给供应商的折扣，供应商得到产品及开元云的折扣后，设置折扣面向客户，客户通过kboss进行购买，分销商的客户如自己上传产品，也可以成为开元云的供应商。</span>
+    <el-dialog title="渠道管理信息提示" :visible.sync="channelManagementShow" custom-class="channel-dialog-style">
+      <span
+        class="indent">开元云公司作为一级分销商面对直接客户，售出设备产品。产品由供应商上传平台，设置产品价格配置，及设备账号密码等配置信息，开元云进行审核，审核通过产品上线，客户可直接购买。开元云可以将产品分配给各供应商销售，分配时配置给供应商的折扣，供应商得到产品及开元云的折扣后，设置折扣面向客户，客户通过kboss进行购买，分销商的客户如自己上传产品，也可以成为开元云的供应商。</span>
       <span slot="footer" class="dialog-footer">
-    <el-button @click="channelManagementShow = false">取 消</el-button>
-    <el-button type="primary" @click="ChannelConfirmBtn">我已知晓，并进行后续操作</el-button>
-  </span>
+        <el-button @click="channelManagementShow = false">取 消</el-button>
+        <el-button type="primary" @click="ChannelConfirmBtn">我已知晓，并进行后续操作</el-button>
+      </span>
     </el-dialog>
 
     <!--    searhcDiaolog-->
 
-    <el-dialog
-      title="全站搜索"
-      :visible.sync="searchDialogVisible"
-      width="800px"
-      :close-on-click-modal="false"
+    <el-dialog title="全站搜索" :visible.sync="searchDialogVisible" width="800px" :close-on-click-modal="false"
       :before-close="handleClose">
       <el-input placeholder="请输入搜索关键字" v-model="searchValue" class="input-with-select">
         <el-button @click="searchBtn" :loading="searchLoading" slot="append" icon="el-icon-search"></el-button>
       </el-input>
 
-      <ul v-loading="searchLoading" class="searchUl" v-if="searchResultList.length>0">
-        <li v-for="(item,index) in searchResultList" :key="index">
-          <span class="title" @click="goProductPage(item)"><div style="margin-right: 5px">{{ item.product_name }}</div> <img
-            v-if="item.type=='jd'"
-            src="./images/京东云.svg"
-            alt="">
-           <img
-             v-else-if="item.type=='bd'"
-             src="./images/百度智能云.svg"
-             alt=""></span>
+      <ul v-loading="searchLoading" class="searchUl" v-if="searchResultList.length > 0">
+        <li v-for="(item, index) in searchResultList" :key="index">
+          <span class="title" @click="goProductPage(item)">
+            <div style="margin-right: 5px">{{ item.product_name }}</div> <img v-if="item.type == 'jd'"
+              src="./images/京东云.svg" alt="">
+            <img v-else-if="item.type == 'bd'" src="./images/百度智能云.svg" alt="">
+          </span>
           <span class="description">{{ item.description }}</span>
           <!--          <span class="tags">123</span>-->
         </li>
@@ -466,15 +435,10 @@
         <img style="width: 200px;height: 200px;" src="./images/empty.svg" alt="">
       </div>
       <span slot="footer" class="dialog-footer">
-  </span>
+      </span>
     </el-dialog>
-    <el-drawer
-      direction="ltr"
-      style="z-index: 1000;width: 1205px"
-      title=""
-      custom-class="myDrawer"
-      :visible.sync="drawerPro"
-      :with-header="false">
+    <el-drawer direction="ltr" style="z-index: 1000;width: 1205px" title="" custom-class="myDrawer"
+      :visible.sync="drawerPro" :with-header="false">
       <div style="width: 100%;height: 100%;background: white">
         <ul class="allProStyle">
           <li @click="goHomePage"><img src="./img/a.svg" alt=""> 阿里云</li>
@@ -486,7 +450,7 @@
 </template>
 
 <script>
-import {mapGetters, mapState} from "vuex";
+import { mapGetters, mapState } from "vuex";
 import Breadcrumb from "@/components/Breadcrumb";
 import Hamburger from "@/components/Hamburger";
 import Screenfull from "@/components/Screenfull";
@@ -513,9 +477,9 @@ import {
 import messagedrawer from "@/layout/components/inFram/message";
 import store from "@/store";
 import PromotionalInvitationCode from "@/views/customer/promotionalInvitationCode/index.vue";
-import {reqApplyChannel} from "@/api/customer/channel";
-import {reqSearchProductList} from "@/api/product/product";
-import {bdProducts, jdProducts} from "@/views/product/productionData";
+import { reqApplyChannel } from "@/api/customer/channel";
+import { reqSearchProductList } from "@/api/product/product";
+import { bdProducts, jdProducts } from "@/views/product/productionData";
 import { getHomePath } from "@/views/setting/tools";
 
 export default {
@@ -557,13 +521,13 @@ export default {
       },
       rules: {
         password: [
-          {required: true, message: "请输入旧密码", trigger: "blur"},
+          { required: true, message: "请输入旧密码", trigger: "blur" },
         ],
         newpassword: [
-          {required: true, message: "请输入新密码", trigger: "blur"},
+          { required: true, message: "请输入新密码", trigger: "blur" },
         ],
         configPassword: [
-          {required: true, message: "请确认新密码", trigger: "blur"},
+          { required: true, message: "请确认新密码", trigger: "blur" },
         ],
       },
       editRules: {
@@ -573,7 +537,7 @@ export default {
               /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
             message: "请输入有效的手机号",
           },
-          {message: "请输入有效的手机号", trigger: "change"},
+          { message: "请输入有效的手机号", trigger: "change" },
         ],
       },
       squareUrl:
@@ -672,60 +636,60 @@ export default {
           console.log("对等连接~~")
           this.$router.push({
             path: '/product/baiduProduct',
-            query: {product_name: '网络'}
+            query: { product_name: '网络' }
           })
         } else if (bdProducts['存储'].includes(item.product_name)) {
           this.$router.push({
             path: 'baiduProduct',
-            query: {product_name: '存储'}
+            query: { product_name: '存储' }
           })
         } else if (bdProducts['云与业务安全'].includes(item.product_name)) {
           this.$router.push({
             path: 'baiduProduct',
-            query: {product_name: '云与业务安全'}
+            query: { product_name: '云与业务安全' }
           })
         } else if (bdProducts['计算'].includes(item.product_name)) {
           console.log("跳转了")
           this.$router.push({
             path: 'baiduProduct',
-            query: {product_name: '计算'}
+            query: { product_name: '计算' }
           })
         } else if (bdProducts['数据库'].includes(item.product_name)) {
           this.$router.push({
             path: 'baiduProduct',
-            query: {product_name: '数据库'}
+            query: { product_name: '数据库' }
           })
         } else {
           this.$router.push({
             path: 'baiduProduct',
-            query: {product_name: 'AI能力引擎'}
+            query: { product_name: 'AI能力引擎' }
           })
         }
       } else if (item.type === "jd") {
         if (jdProducts['网络与CDN'].includes(item.product_name)) {
           this.$router.push({
             name: 'jdProduct',
-            params: {product_name: '网络与CDN'}
+            params: { product_name: '网络与CDN' }
           })
         } else if (jdProducts['存储'].includes(item.product_name)) {
           this.$router.push({
             name: 'jdProduct',
-            params: {product_name: '存储'}
+            params: { product_name: '存储' }
           })
         } else if (jdProducts['安全'].includes(item.product_name)) {
           this.$router.push({
             name: 'jdProduct',
-            params: {product_name: '安全'}
+            params: { product_name: '安全' }
           })
         } else if (jdProducts['弹性计算'].includes(item.product_name)) {
           this.$router.push({
             name: 'jdProduct',
-            params: {product_name: '弹性计算'}
+            params: { product_name: '弹性计算' }
           })
         } else if (jdProducts['数据库'].includes(item.product_name)) {
           this.$router.push({
             name: 'jdProduct',
-            params: {product_name: '数据库'}
+            params: { product_name: '数据库' }
           })
         } else {
           // console.log("走了京哦else")
@@ -745,7 +709,7 @@ export default {
       // setTimeout(() => {
       //   this.searchLoading = false
       // }, 300)
-      reqSearchProductList({name: this.searchValue}).then(res => {
+      reqSearchProductList({ name: this.searchValue }).then(res => {
         this.searchLoading = false
         if (res.status) {
           this.searchResultList = res.data
@@ -779,7 +743,7 @@ export default {
 
     },
     channelFirstBtn() {
-      reqApplyChannel({user_id: this.userId}).then(res => {
+      reqApplyChannel({ user_id: this.userId }).then(res => {
         if (res.code == "100" || res.code == "210") {
           this.$message.success(res.msg)
         } else if (res.code == "300") {
@@ -790,7 +754,7 @@ export default {
       })
     },
     ChannelConfirmBtn() {//渠道确定按钮
-      reqApplyChannel({user_id: this.userId, code: '200'}).then(res => {
+      reqApplyChannel({ user_id: this.userId, code: '200' }).then(res => {
         if (res.status) {
           this.$message.success("申请渠道成功，后续会有相关人员和您沟通~")
           this.channelManagementShow = false
@@ -891,7 +855,7 @@ export default {
         }
       })
     },
-    rowStyle({row, rowIndex}) {//改变表格某一行样式
+    rowStyle({ row, rowIndex }) {//改变表格某一行样式
       if (this.isOne == true && row.id == this.oneId) {
         return 'unReadColor';
       } else if (row.msgstatus == 1) {
@@ -914,7 +878,7 @@ export default {
       this.getMsg()
     },
     getMsg() {//获取所有信息
-      getMsgAPI({userid: this.userId}).then(res => {
+      getMsgAPI({ userid: this.userId }).then(res => {
         if (res.status && res.msg) {
           this.alliInformationList = res.msg
         }
@@ -1044,7 +1008,7 @@ export default {
       }, 100000);
     },
     async getUserInfo() {  //获取个人信息
-      getUserInfoAPI({id: this.userId}).then((res) => {
+      getUserInfoAPI({ id: this.userId }).then((res) => {
         if (res.status == true) {
           // this.nick_name = res.data[0].username;
           this.userInfoList = res.data;
@@ -1085,7 +1049,7 @@ export default {
                   type: "success",
                 });
                 this.passwordDialog = false;
-                this.$router.push({name: "Login"});
+                this.$router.push({ name: "Login" });
               } else {
                 this.$message({
                   message: res.msg,
@@ -1134,7 +1098,7 @@ export default {
 
     editOnsubmit() {  //修改个人信息
       this.editUserInfoForm.contactor_phone = this.editUserInfoForm.mobile;
-      editUserInfoAPI({...this.editUserInfoForm, id: this.userId,}).then(
+      editUserInfoAPI({ ...this.editUserInfoForm, id: this.userId, }).then(
         (res) => {
           if (res.status == true) {
             this.$message({
@@ -1318,6 +1282,41 @@ export default {
 };
 </script>
 <style lang="less">
+::v-deep .password-dialog {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .el-dialog {
+    margin: 0 auto !important;
+    position: relative;
+    top: 0;
+
+    @media screen and (max-width: 1200px) {
+      width: 70% !important;
+    }
+
+    @media screen and (max-width: 768px) {
+      width: 90% !important;
+    }
+  }
+
+  .el-dialog__header {
+    text-align: center;
+  }
+
+  .el-dialog__body {
+    padding: 20px;
+  }
+}
+
+.password-dialog-wrapper {
+  ::v-deep .el-dialog {
+    margin-top: 0 !important;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
 .channel-dialog-style {
   position: relative;
   width: 700px;
@@ -1335,8 +1334,10 @@ export default {
 }
 
 .indent {
-  display: block; /* 将 span 元素转换为块级元素 */
-  text-indent: 2em; /* 设置首行缩进的大小为 2 个字符 */
+  display: block;
+  /* 将 span 元素转换为块级元素 */
+  text-indent: 2em;
+  /* 设置首行缩进的大小为 2 个字符 */
   line-height: 25px;
 }
 
@@ -1650,6 +1651,7 @@ export default {
   .logo {
     display: none;
   }
+
   .hamburger-container {
     display: block;
   }
@@ -1667,7 +1669,8 @@ export default {
   border-bottom-color: #255fd5 !important;
 }
 
-.searchUl, .searchEmpty {
+.searchUl,
+.searchEmpty {
 
   height: 250px;
   width: 100%;
@@ -1723,7 +1726,6 @@ export default {
     }
   }
 }
-
 </style>
 <style>
 .cuxiao-style {
diff --git a/f/web-kboss/src/layout/components/Sidebar/index.vue b/f/web-kboss/src/layout/components/Sidebar/index.vue
index 9b994a5..189d746 100644
--- a/f/web-kboss/src/layout/components/Sidebar/index.vue
+++ b/f/web-kboss/src/layout/components/Sidebar/index.vue
@@ -4,21 +4,27 @@
     <!-- <div style="color:#fff;height:30px;">1232</div> -->
     <!-- <el-row :gutter="20">
         <el-col :span="6">
-          <img src="../../../../public/logo
-          s/logo_rgba/noWhite/kkyLogoNoWhiteNoText.png" alt="">
+          <img src="../../../../public/logos/logo_rgba/noWhite/kkyLogoNoWhiteNoText.png" alt="">
         </el-col>
         <el-col :span="18">
           <img src="../../../../public/logos/logo_rgba/noWhite/kkyLogoNoWhiteText.png.png" alt="">
         </el-col>
       </el-row> -->
     <!-- </div> -->
-    <div :class="{ 'has-logo': showLogo }">
+    <div :class="{ 'has-logo': showLogo }" class="sidebar-container">
       <logo @click="$router.push('/homePage/index')" v-if="showLogo" :collapse="isCollapse"/>
-      <happy-scroll color="rgba(0,0,0,0.5)" size="5">
-        <el-menu :collapse="isCollapse" :background-color="variables.menuBg" :text-color="variables.menuText"
-                 :unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false"
-                 :default-active="$route.path" mode="vertical"
-                 style="overflow-y: auto;height: 100vh ;"
+      <!-- 将 happy-scroll 移到 el-menu 外层，并移除 el-menu 上的固定高度 -->
+      <happy-scroll color="rgba(0,0,0,0.5)" size="5" class="menu-scroll-container">
+        <el-menu
+          :collapse="isCollapse"
+          :background-color="variables.menuBg"
+          :text-color="variables.menuText"
+          :unique-opened="true"
+          :active-text-color="variables.menuActiveText"
+          :collapse-transition="false"
+          :default-active="$route.path"
+          mode="vertical"
+          class="el-menu-vertical"
         >
           <sidebar-item v-for="(route, index) in permission_routes" :key="index" :item="route" :base-path="route.path"/>
         </el-menu>
@@ -30,7 +36,7 @@
 <script>
 import {mapGetters} from "vuex";
 import Logo from "./Logo";
-import SidebarItem from "./SidebarItem";
+import SidebarItem from "./SidebarItem.vue";
 import variables from "../../../styles/variables.scss";
 
 export default {
@@ -41,17 +47,7 @@ export default {
   },
   components: {SidebarItem, Logo},
   computed: {
-
     ...mapGetters(["permission_routes", "sidebar"]),
-    // activeMenu() {
-    //   const route = this.$route
-    //   const { meta, path } = route
-    //   // if set path, the sidebar will highlight the path you set
-    //   if (meta.activeMenu) {
-    //     return meta.activeMenu
-    //   }
-    //   return path
-    // },
     showLogo() {
       return true
     },
@@ -69,25 +65,78 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+/* stylelint-disable */
 .index {
   //margin-top: 50px;
+  width: 100%; // 确保父容器宽度为100%
+  height: 100%; // 占满父级高度
+  position: relative; // 为内部绝对定位元素提供参考
 
   .log {
     width: 100%;
-    height: 80px;
+    height: 80px; // Logo区域高度
+    flex-shrink: 0; // 防止在Flex布局中被压缩
   }
-}
 
-::v-deep .happy-scroll {
-  overflow-x: hidden;
+  .sidebar-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box; // 包含padding/border在width内计算
+  }
 
-  .happy-scroll-container {
-    width: 100% !important;
+  .menu-scroll-container {
+    flex: 1; // 占据剩余空间
+    width: 100%;
+    overflow-x: hidden; // 关键：隐藏水平滚动条
 
+    ::v-deep .happy-scroll-container {
+      width: 100% !important; // 强制容器宽度100%
+      // 重要：移除可能由库添加的 min-width
+      min-width: unset !important;
 
-    .happy-scroll-content {
-      width: 100%;
+      .happy-scroll-content {
+        width: 100%;
+        min-width: unset !important; // 确保内容区域也不设置最小宽度
+        box-sizing: border-box; // 包含padding/border在width内计算
+      }
+    }
+  }
+
+  ::v-deep .el-menu-vertical {
+    border: none; // 移除默认边框
+    height: 100%; // 撑满滚动容器
+    width: 100% !important; // 关键：强制菜单宽度100%，匹配容器
+    min-width: 100% !important; // 关键：强制最小宽度100%
+    box-sizing: border-box; // 包含padding/border在width内计算
+
+    // 防止菜单项文字过长导致溢出
+    .el-submenu__title,
+    .el-menu-item {
+      white-space: nowrap; // 防止文字换行
+      overflow: hidden; // 隐藏溢出内容
+      text-overflow: ellipsis; // 溢出时显示省略号
+    }
+  }
+
+  // 针对折叠状态的特殊处理
+  ::v-deep .el-menu--collapse {
+    // Element UI 默认折叠宽度为 64px
+    width: 64px !important; // 明确折叠宽度
+    min-width: 64px !important;
+
+    // 确保折叠时子菜单项不溢出
+    .el-submenu__title,
+    .el-menu-item {
+      text-overflow: clip; // 折叠时直接裁剪文字
+      justify-content: center; // 图标居中
     }
   }
 }
+/* stylelint-enable */
 </style>
+
+
+
+
diff --git a/f/web-kboss/src/main.js b/f/web-kboss/src/main.js
index 9661195..6267322 100644
--- a/f/web-kboss/src/main.js
+++ b/f/web-kboss/src/main.js
@@ -51,11 +51,10 @@ import App from './App'
 import store from './store'
 import router from './router'
 // import 'default-passive-events'
-
 import './icons' // icon
 import './permission' // permission control
 // import './utils/error-log' // error log
-
+import index from '@/styles/index.css'
 import { v4 as uuidv4 } from 'uuid';//引入uuid
 // uuidv4();
 
diff --git a/f/web-kboss/src/router/index.js b/f/web-kboss/src/router/index.js
index 1a9c650..87c0f64 100644
--- a/f/web-kboss/src/router/index.js
+++ b/f/web-kboss/src/router/index.js
@@ -772,7 +772,7 @@ export const asyncRoutes = [
     },
     {
       path: "unsubscribe",
-  
+
       component: () => import("@/views/customer/unsubscribe"),
       name: "Unsubscribe",
       meta: {
@@ -1554,8 +1554,6 @@ export const asyncRoutes = [
         //     fullPath: "/operation/approval/approveBusinessConfig"
         //   }
         // },
-
-
         {
           path: "approvalConfig",
           component: () => import("@/views/operation/approval/approvalConfig"),
diff --git a/f/web-kboss/src/styles/index.css b/f/web-kboss/src/styles/index.css
new file mode 100644
index 0000000..4a7bd09
--- /dev/null
+++ b/f/web-kboss/src/styles/index.css
@@ -0,0 +1,22 @@
+.backgroundColor{
+  background-color: #fff;
+  height: calc(100vh - 80px);
+  padding: 10px;
+}
+.bf{
+  background-color: #fff;
+}
+.p10{
+  padding: 10px;
+}
+.h100{
+  height: calc(100vh - 100px);
+}
+.p0{
+  padding: 0;
+}
+.flex{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/f/web-kboss/src/styles/variables.scss b/f/web-kboss/src/styles/variables.scss
index 543fbe0..4bf4d4f 100644
--- a/f/web-kboss/src/styles/variables.scss
+++ b/f/web-kboss/src/styles/variables.scss
@@ -1,4 +1,4 @@
-// base color
+// / base color
 $blue: #324157;
 $light-blue: #3A71A8;
 $red: #C03639;
@@ -10,16 +10,18 @@ $panGreen: #30B08F;
 
 // sidebar
 $menuText: #000;
-$menuActiveText: #1b14d9; //当前子菜单的字体颜色
-$subMenuActiveText: #100101; // https://github.com/ElemeFE/element/issues/12951
+$menuActiveText: #1b14d9; // 当前激活菜单项的文字颜色
+$subMenuActiveText: #100101; // 当前激活子菜单项的文字颜色
 
-$menuBg: #fff; //整体背景颜色
-$menuHover: #f7f7f7; //鼠标浮动一级菜单背景
+$menuBg: #fff; // 整体背景颜色
+$menuHover: #f0f0f0; // 鼠标悬浮一级菜单背景色 (轻微变化更友好)
+$subMenuBg: #f7f7f7; // 子菜单背景色
+$subMenuHover: #eaeaea; // 鼠标悬浮子菜单背景色 (轻微变化更友好)
 
-$subMenuBg: #f7f7f7; //子菜单下拉
-$subMenuHover: #0177f8; //鼠标浮动子菜单背景
+$sideBarWidth: 230px; // 侧边栏宽度
 
-$sideBarWidth: 230px;
+// Element UI 默认折叠宽度为 64px
+// $sideBarCollapseWidth: 64px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
@@ -32,5 +34,9 @@ $sideBarWidth: 230px;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
   sideBarWidth: $sideBarWidth;
+  // sideBarCollapseWidth: $sideBarCollapseWidth;
 }
 
+
+
+
diff --git a/f/web-kboss/src/views/customer/qualificationReview/apprvedInfo/index.vue b/f/web-kboss/src/views/customer/qualificationReview/apprvedInfo/index.vue
index d5b42d1..fb9c8c0 100644
--- a/f/web-kboss/src/views/customer/qualificationReview/apprvedInfo/index.vue
+++ b/f/web-kboss/src/views/customer/qualificationReview/apprvedInfo/index.vue
@@ -1,28 +1,26 @@
 <template>
-    <div>
+  <div class="backgroundColor">
 
-<qualificationBox :approveInfo="approveInfo"></qualificationBox>
-</div>
+    <qualificationBox :approveInfo="approveInfo"></qualificationBox>
+  </div>
 </template>
 <script>
 import qualificationBox from '../qualificationBox/index.vue';
 export default {
-    name: 'apprvedInfo',
-    components: {
-        qualificationBox
-    },
-    data() {
-        return {
-            approveInfo:{
-                audit_status:"approved,rejected",
-            }
-        }
-    },
-    created(){
-        // this.initData()
-    },
+  name: 'apprvedInfo',
+  components: {
+    qualificationBox
+  },
+  data() {
+    return {
+      approveInfo: {
+        audit_status: "approved,rejected",
+      }
+    }
+  },
+  created() {
+    // this.initData()
+  },
 }
 </script>
-<style scoped>
-
-</style>
\ No newline at end of file
+<style scoped></style>
diff --git a/f/web-kboss/src/views/customer/qualificationReview/noApproveInfo/index.vue b/f/web-kboss/src/views/customer/qualificationReview/noApproveInfo/index.vue
index b39a177..2e68b61 100644
--- a/f/web-kboss/src/views/customer/qualificationReview/noApproveInfo/index.vue
+++ b/f/web-kboss/src/views/customer/qualificationReview/noApproveInfo/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="backgroundColor">
 
         <qualificationBox :approveInfo="approveInfo"></qualificationBox>
     </div>
diff --git a/f/web-kboss/src/views/customer/rechargeRecord/index.vue b/f/web-kboss/src/views/customer/rechargeRecord/index.vue
index 95a1d45..62d58a0 100644
--- a/f/web-kboss/src/views/customer/rechargeRecord/index.vue
+++ b/f/web-kboss/src/views/customer/rechargeRecord/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="leftTable">
+  <div class="leftTable backgroundColor">
     <div class="findButtonMobile" v-if="isMobile">
       <el-row class="searchOne">
         <el-col :span="24" class="colOne">
diff --git a/f/web-kboss/src/views/operation/consultingMangement/index.vue b/f/web-kboss/src/views/operation/consultingMangement/index.vue
index 7d5d438..647174e 100644
--- a/f/web-kboss/src/views/operation/consultingMangement/index.vue
+++ b/f/web-kboss/src/views/operation/consultingMangement/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="backgroundColor">
         <el-button size="small" style="margin-bottom: 5px;" type="primary" @click="getTableData('1')">
             <i class="el-icon-upload2"> </i>
             全部导出</el-button>
@@ -61,4 +61,4 @@ export default {
     }
 }
 </script>
-<style scoped></style>
\ No newline at end of file
+<style scoped></style>
diff --git a/f/web-kboss/src/views/operation/menuMangement/index.vue b/f/web-kboss/src/views/operation/menuMangement/index.vue
index 89ae8e6..cba3aa9 100644
--- a/f/web-kboss/src/views/operation/menuMangement/index.vue
+++ b/f/web-kboss/src/views/operation/menuMangement/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div >
         <!-- 调试信息 -->
         <div style="margin-bottom: 20px; padding: 15px; background: #f5f7fa; border-radius: 8px;">
             <el-button size="small" @click="showDebugInfo">查看调试信息</el-button>
@@ -46,13 +46,13 @@
                         <div v-if="formLabelAlign.icon" class="icon-preview">
                             <div class="preview-wrapper">
                                 <!-- SVG图片显示 -->
-                                <img v-if="isSvgImage(formLabelAlign.icon)" 
-                                     :src="formLabelAlign.icon" 
+                                <img v-if="isSvgImage(formLabelAlign.icon)"
+                                     :src="formLabelAlign.icon"
                                      class="preview-image svg-image"
                                      alt="菜单图标">
                                 <!-- 普通图片显示 -->
-                                <img v-else 
-                                     :src="formLabelAlign.icon" 
+                                <img v-else
+                                     :src="formLabelAlign.icon"
                                      class="preview-image"
                                      alt="菜单图标">
                                 <div class="preview-actions">
@@ -60,15 +60,15 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <!-- 上传组件 -->
-                        <el-upload 
+                        <el-upload
                             v-if="!formLabelAlign.icon"
-                            class="icon-uploader" 
-                            action="#" 
+                            class="icon-uploader"
+                            action="#"
                             :http-request="handleIconUpload"
-                            :show-file-list="false" 
-                            :before-upload="beforeIconUpload" 
+                            :show-file-list="false"
+                            :before-upload="beforeIconUpload"
                             accept=".svg,.png,.jpg"
                             drag>
                             <i class="el-icon-plus uploader-icon"></i>
@@ -84,7 +84,7 @@
                 <el-form-item label="菜单排序" style="margin-top: 10px!important;" prop="poriority">
                     <el-input-number :controls="false" v-model="formLabelAlign.poriority" :step="1" :min="0" :max="100" placeholder="请输入排序值"></el-input-number>
                 </el-form-item>
-                
+
                 <el-form-item label="菜单来源" prop="source">
                     <el-input v-model="formLabelAlign.source" placeholder="请输入菜单来源"></el-input>
                 </el-form-item>
@@ -144,7 +144,7 @@ export default {
         handleIconUpload(options) {
             const file = options.file;
             console.log('上传文件:', file);
-            
+
             // 创建本地预览URL
             const reader = new FileReader();
             reader.onload = (e) => {
@@ -152,7 +152,7 @@ export default {
                 this.$message.success('图片上传成功！');
             };
             reader.readAsDataURL(file);
-            
+
             // 保存文件对象到表单数据中，用于后续提交
             this.formLabelAlign.iconFile = file;
         },
@@ -221,13 +221,13 @@ export default {
                 if (valid) {
                     // 创建FormData对象
                     const formData = new FormData();
-                    
+
                     // 添加基本表单数据
                     formData.append('name', this.formLabelAlign.name);
                     formData.append('poriority', this.formLabelAlign.poriority);
                     formData.append('source', this.formLabelAlign.source);
                     formData.append('url_link', window.location.href);
-                    
+
                     // 只有当parentid为null时才传递图片
                     if (!this.formLabelAlign.parentid || this.formLabelAlign.parentid === '' || this.formLabelAlign.parentid === '0') {
                         if (this.formLabelAlign.iconFile) {
@@ -241,17 +241,17 @@ export default {
                     } else {
                         console.log('跳过图片上传，parentid不为null');
                     }
-                    
+
                     // 添加parentid
                     if (this.formLabelAlign.parentid) {
                         formData.append('parentid', this.formLabelAlign.parentid);
                     }
-                    
+
                     // 打印FormData内容（调试用）
                     for (let [key, value] of formData.entries()) {
                         console.log(`${key}:`, value);
                     }
-                    
+
                     // 这里调用API保存数据（根据 isEdit 区分）
                     if (this.isEdit) {
                         this.updateMenuData({
@@ -289,7 +289,7 @@ export default {
             }).catch(error => {
                 this.$message.error('保存失败：' + error.message);
             });
-            
+
             // // 临时模拟成功
             // this.$message.success('保存成功！');
             // this.drawer = false;
@@ -348,8 +348,8 @@ export default {
             // 编辑时清除iconFile，避免重复上传
             this.formLabelAlign.iconFile = null;
             this.isEdit = true;
-     
-       
+
+
         },
         deleteNode(row) {
 
@@ -357,7 +357,7 @@ export default {
                     if(res.status){
                         this.$message.success('删除成功！');
                         this.getCategories();
-                 
+
                     }else{
                         this.$message.error(res.msg);
                     }
@@ -668,9 +668,9 @@ export default {
 }
 
 .svg-image {
-    background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
-                linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
-                linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
+    background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
+                linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
+                linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
                 linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
     background-size: 20px 20px;
     background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
@@ -754,10 +754,10 @@ export default {
         max-width: 80px;
         max-height: 80px;
     }
-    
+
     .icon-uploader .el-upload-dragger {
         height: 100px;
     }
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/f/web-kboss/src/views/operation/publicCostomerManagement/index.vue b/f/web-kboss/src/views/operation/publicCostomerManagement/index.vue
index 27d5fa7..e28d308 100644
--- a/f/web-kboss/src/views/operation/publicCostomerManagement/index.vue
+++ b/f/web-kboss/src/views/operation/publicCostomerManagement/index.vue
@@ -2,41 +2,45 @@
   <div class="container">
     <el-card>
       <el-table v-loading="loading" ref="table" :data="tableData" tooltip-effect="dark" style="width: 100%"
-                @selection-change="handleSelectionChange" height="calc(100vh - 190px)">
+        @selection-change="handleSelectionChange" height="calc(100vh - 190px)">
         <el-table-column type="selection" width="55"></el-table-column>
         <el-table-column prop="orgname" label="客户名称"></el-table-column>
         <el-table-column label="联系方式" prop="contactor_phone"></el-table-column>
         <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
-        1
       </el-table>
-      <div style="margin-top: 20px; display:flex;">
-        <el-button @click="selectSales()" size="small" type="primary">选择销售</el-button>
-        <el-button @click="cancelSelection()" size="small" type="primary">取消选择</el-button>
+      <div class="button-container">
+        <el-button @click="selectSales()" size="small" type="primary" :disabled="!hasSelection" class="action-button">
+          选择销售
+        </el-button>
+        <el-button @click="cancelSelection()" size="small" type="primary" :disabled="!hasSelection"
+          class="action-button">
+          取消选择
+        </el-button>
       </div>
     </el-card>
     <el-dialog class="myDialog" title="选择销售人员" :visible.sync="isShow" width="30%" :before-close="handleClose">
       <el-form ref="form" :model="form" label-width="130px">
         <el-form-item label="请选择销售人员:" style="width: 80%;" prop="sales">
-          <el-radio-group v-model="form.id">
-            <div class="radio">
-              <el-radio :label="item.id" v-for="(item,index) in salesData" :key="index">{{ item.username }}</el-radio>
-            </div>
-          </el-radio-group>
+          <!-- 添加一个容器来应用滚动样式 -->
+          <div class="radio-group-container">
+            <el-radio-group v-model="form.id">
+              <div class="radio" v-for="(item, index) in salesData" :key="index">
+                <el-radio :label="item.id">{{ item.username }}</el-radio>
+              </div>
+            </el-radio-group>
+          </div>
         </el-form-item>
-
       </el-form>
-      <span slot="footer" class="dialog-footer" style=" display:flex;">
+      <span slot="footer" class="dialog-footer">
         <el-button size="small" @click="cancel()">取 消</el-button>
         <el-button size="small" type="primary" @click="salesSubmit()">确 定</el-button>
       </span>
     </el-dialog>
   </div>
-
 </template>
 
-
 <script>
-import {getNoinvitationcodeAPI, getSalesAPI, addUserCustomerAPI} from "@/api/sales/sales"
+import { getNoinvitationcodeAPI, getSalesAPI, addUserCustomerAPI } from "@/api/sales/sales";
 
 export default {
   data() {
@@ -54,111 +58,160 @@ export default {
         children: "children",
         label: "username",
       },
-      // salesId:'',//销售的id
-      customerid: [],//客户的id
-      isSlected: false,
+      customerid: [], // 客户的id
+      hasSelection: false, // 新增：跟踪是否有选中项
       userId: sessionStorage.getItem("userId"),
       orgid: sessionStorage.getItem("orgid"),
-    }
+    };
   },
   created() {
-    this.loading = true
-    this.getNoinvitationcode()
+    this.loading = true;
+    this.getNoinvitationcode();
   },
   methods: {
-    getNoinvitationcode() {//获取全部客户
-      getNoinvitationcodeAPI({orgid: this.orgid}).then(res => {
-
-        this.loading = false
-        this.tableData = res.data.rows
+    getNoinvitationcode() { // 获取全部客户
+      getNoinvitationcodeAPI({ orgid: this.orgid }).then(res => {
+        this.loading = false;
+        this.tableData = res.data.rows;
         // console.log(res);
-      })
+      });
     },
-    getSales() {//展示所有销售人员
-      getSalesAPI({role: "销售", userid: this.userId}).then(res => {
+    getSales() { // 展示所有销售人员
+      getSalesAPI({ role: "销售", userid: this.userId }).then(res => {
         // console.log(res);
         if (res.data.length > 0) {
           this.salesData = res.data.map((item) => {
-            let mySales = {
+            return {
               username: item.username,
               id: item.id,
             };
-            return mySales;
           });
-          this.form.id = this.salesData.id
+          // 注意：这里通常不需要设置默认选中第一个销售，
+          // 因为用户需要主动选择。如果需要默认选中，可以取消注释下一行
+          // this.form.id = this.salesData[0]?.id || '';
         }
-
-      })
+      });
     },
     selectSales() {
-      this.getSales()
-      this.isShow = true
+      this.getSales();
+      this.isShow = true;
     },
     handleSelectionChange(val) {
-      // console.log(val);
-      this.customerid = [];
-      val.forEach(item => {
-        this.customerid.push(item.id)
-      })
-      // console.log(this.customerid)
+      // 更新选中的客户ID数组
+      this.customerid = val.map(item => item.id); // 更简洁的写法
+      // 更新是否有选中项的状态
+      this.hasSelection = this.customerid.length > 0;
+      // console.log(this.customerid);
     },
     cancelSelection() {
       this.$refs.table.clearSelection();
+      // 清除选择后，确保按钮状态更新（虽然通常 clearSelection 会触发 handleSelectionChange）
+      this.hasSelection = false;
+      this.customerid = [];
     },
     handleClose() {
-      this.isShow = false
+      this.isShow = false;
     },
     salesSubmit() {
-      let params = {
-        customerid: this.customerid,//这个是数组
-        salemanid: this.form.id//这个是字符串就行
+      // 确保至少选择了一个客户和一个销售
+      if (this.customerid.length === 0) {
+        this.$message({
+          message: '请至少选择一个客户!',
+          type: 'warning'
+        });
+        return;
       }
+      if (!this.form.id) {
+        this.$message({
+          message: '请选择销售人员!',
+          type: 'warning'
+        });
+        return;
+      }
+
       let formData = new FormData();
+      // API 期望 customerid 是 JSON 字符串化的数组
       formData.append('customerid', JSON.stringify(this.customerid));
       formData.append('salemanid', this.form.id);
-      // const fromdata = this.getFormData(params);
+
       addUserCustomerAPI(formData).then(res => {
         if (res.status == true) {
-          this.isShow = false
-          this.getNoinvitationcode()
+          this.isShow = false;
+          this.getNoinvitationcode(); // 刷新客户列表
+          // 清空选择状态
+          this.$refs.table.clearSelection();
+          this.hasSelection = false;
+          this.customerid = [];
+          this.form.id = ''; // 清空已选销售
           this.$message({
             message: '分配成功!',
             type: 'success'
-          })
+          });
+        } else {
+          this.$message({
+            message: res.message || '分配失败!',
+            type: 'error'
+          });
         }
-      })
+      }).catch(error => {
+        this.$message({
+          message: '分配请求出错: ' + error.message,
+          type: 'error'
+        });
+      });
     },
     cancel() {
-      this.isShow = false
-    },
-    getFormData(object) {//转换参数为formdata格式
-      const formData = new FormData();
-      Object.keys(object).forEach(key => {
-        const value = object[key];
-        if (Array.isArray(value)) {
-          value.forEach((subValue, i) => {
-            formData.append(key + `[${i}]`, subValue)
-          })
-        } else {
-          formData.append(key, object[key])
-        }
-      })
-      return formData;
+      this.isShow = false;
     },
+    // getFormData(object) { // 转换参数为formdata格式 - 当前未使用
+    //   const formData = new FormData();
+    //   Object.keys(object).forEach(key => {
+    //     const value = object[key];
+    //     if (Array.isArray(value)) {
+    //       value.forEach((subValue, i) => {
+    //         formData.append(key + `[${i}]`, subValue)
+    //       })
+    //     } else {
+    //       formData.append(key, object[key])
+    //     }
+    //   })
+    //   return formData;
+    // },
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
 .container {
+  .button-container {
+    margin-top: 20px;
+    display: flex;
+    gap: 10px; // 按钮之间的间距
+  }
+
+  .action-button {
+    padding: 8px 16px; // 增加按钮内边距
+    font-size: 14px; // 调整字体大小
+    border-radius: 4px; // 添加圆角
+  }
+
   .myDialog {
+    .radio-group-container {
+      // 为单选按钮组添加最大高度和滚动条
+      max-height: 200px;
+      overflow-y: auto;
+      border: 1px solid #e4e7ed; // 可选：添加边框
+      border-radius: 4px; // 可选：添加圆角
+      padding: 5px; // 可选：内部填充
+    }
+
     .radio {
-      display: flex;
-      flex-direction: column;
-      height: 200px;
-      width: 200px;
-      overflow: hidden;
-      overflow-y: scroll;
+      // 单选按钮项的样式（如果需要）
+      margin-bottom: 5px; // 项之间的间距
+
+      &:last-child {
+        margin-bottom: 0; // 最后一项移除下边距
+      }
     }
 
     .dialog-footer {
diff --git a/f/web-kboss/src/views/operation/supplierManagement/index.vue b/f/web-kboss/src/views/operation/supplierManagement/index.vue
index 48294cd..a780f8d 100644
--- a/f/web-kboss/src/views/operation/supplierManagement/index.vue
+++ b/f/web-kboss/src/views/operation/supplierManagement/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="box">
+  <div class="box backgroundColor">
     <div class="footer" style="background-color: white">
       <el-button size="small" type="success" @click="addSupp">添加供应商</el-button>
     </div>
@@ -8,43 +8,53 @@
                 :row-key="getRowKeys" border @expand-change="expandChangeHandler" v-loading="loading">
         <el-table-column type="expand">
           <template slot-scope="props">
-            <el-form label-position="left" inline class="demo-table-expand" style="display: flex;flex-wrap: wrap">
-              <el-form-item style="display: flex;justify-content: flex-start" label="供应商名称：">
-                <span>{{ props.row.orgname }}</span>
-              </el-form-item>
-              <el-form-item style="display: flex;justify-content: flex-start" label="起效日期：">
-                <span>{{ props.row.start_date }}</span>
-              </el-form-item>
-              <el-form-item style="display: flex;justify-content: flex-start" label="描述：">
-                <span>{{ props.row.description }}</span>
-              </el-form-item>
-              <el-form-item style="display: flex;justify-content: flex-start" label="失效日期：">
-                <span>{{ props.row.end_date }}</span>
-              </el-form-item>
-              <el-form-item style="display: flex;justify-content: flex-start" label="联系人电话：">
-                <span>{{ props.row.contactor_phone }}</span>
-              </el-form-item>
-              <el-form-item style="display: flex;justify-content: flex-start" label="协议修改：">
-                <el-button type="primary" @click="updateProtocol(props.row)" size="mini">修改协议</el-button>
-              </el-form-item>
-              <el-form-item style="display: flex;justify-content: flex-start" label="邮箱：">
-                <span>{{ props.row.emailaddress }}</span>
-              </el-form-item>
-              <el-form-item style="display: flex;justify-content: flex-start" label="联系地址：">
-                <span>{{ props.row.address }}</span>
-              </el-form-item>
-              <el-form-item style="display: flex;justify-content: flex-start" label="主营业务描述：">
-                <span>{{ props.row.main_business }}</span>
-              </el-form-item>
-              <el-form-item style="display: flex;justify-content: flex-start" label="回佣设置："
-                            v-if="props.row.salemode == 1">
-                <el-button type="primary" @click="rpRebateCtlDialogVisibleTrue(props.row)" size="mini">添加回佣
-                </el-button>
-              </el-form-item>
-              <el-form-item style="display: flex;justify-content: flex-start" label="产品导入:">
-                <el-button type="primary" size="mini" @click="addProductExcel(props.row)">批量导入产品</el-button>
-              </el-form-item>
-            </el-form>
+            <div class="details-container">
+              <div class="details-header">
+                <h3>供应商详细信息</h3>
+              </div>
+              <div class="details-content">
+                <div class="details-row">
+                  <div class="details-item">
+                    <span class="details-label">供应商名称：</span>
+                    <span class="details-value">{{ props.row.orgname }}</span>
+                  </div>
+                  <div class="details-item">
+                    <span class="details-label">起效日期：</span>
+                    <span class="details-value">{{ props.row.start_date }}</span>
+                  </div>
+                  <div class="details-item">
+                    <span class="details-label">描述：</span>
+                    <span class="details-value">{{ props.row.description }}</span>
+                  </div>
+                  <div class="details-item">
+                    <span class="details-label">失效日期：</span>
+                    <span class="details-value">{{ props.row.end_date }}</span>
+                  </div>
+                  <div class="details-item">
+                    <span class="details-label">联系人电话：</span>
+                    <span class="details-value">{{ props.row.contactor_phone }}</span>
+                  </div>
+                  <div class="details-item">
+                    <span class="details-label">邮箱：</span>
+                    <span class="details-value">{{ props.row.emailaddress }}</span>
+                  </div>
+                  <div class="details-item">
+                    <span class="details-label">联系地址：</span>
+                    <span class="details-value">{{ props.row.address }}</span>
+                  </div>
+                  <div class="details-item">
+                    <span class="details-label">主营业务描述：</span>
+                    <span class="details-value">{{ props.row.main_business }}</span>
+                  </div>
+                </div>
+                <div class="details-actions">
+                  <el-button type="primary" @click="updateProtocol(props.row)" size="mini">修改协议</el-button>
+                  <el-button type="primary" @click="addProductExcel(props.row)" size="mini">批量导入产品</el-button>
+                  <el-button v-if="props.row.salemode == 1" type="primary" @click="rpRebateCtlDialogVisibleTrue(props.row)" size="mini">添加回佣</el-button>
+                </div>
+              </div>
+            </div>
+
             <el-tabs type="border-card" @tab-click="handleClick" v-if="props.row.salemode == '1'">
               <el-tab-pane label="周结" name="first" v-if="oldRpRebate[0]">
                 <el-table :data="oldRpRebate[0]" style="width: 100%">
@@ -264,7 +274,8 @@
             <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false"
                        :on-change="handleAvatarSuccess" :on-remove="handleRemove">
               <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
-              <i style="
+              <!-- 修改：仅在没有图片时显示加号 -->
+              <i v-else style="
                   font-size: 60px;
                   border: 1px solid #aaa;
                   padding: 10px;
@@ -1119,6 +1130,8 @@ export default {
     },
 
     handleRemove(file) { //图片展示⬇
+      // 当图片被移除时，清空 imageUrl，这样加号会重新显示
+      this.imageUrl = "";
     },
     handleAvatarSuccess(file, fileList) {
       this.imageUrl = URL.createObjectURL(file.raw);
@@ -1392,4 +1405,73 @@ export default {
   align-items: center;
 }
 
+/* 优化详情布局样式 */
+.details-container {
+  padding: 20px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.details-header {
+  border-bottom: 1px solid #ebeef5;
+  padding-bottom: 15px;
+  margin-bottom: 15px;
+}
+
+.details-header h3 {
+  margin: 0;
+  color: #303133;
+}
+
+.details-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.details-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -10px;
+}
+
+.details-item {
+  flex: 0 0 50%;
+  padding: 0 10px;
+  margin-bottom: 15px;
+  box-sizing: border-box;
+}
+
+.details-label {
+  display: inline-block;
+  width: 120px;
+  color: #909399;
+  font-weight: 400;
+  text-align: right;
+  vertical-align: middle;
+  font-size: 14px;
+  margin-right: 12px;
+}
+
+.details-value {
+  color: #606266;
+  font-size: 14px;
+}
+
+.details-actions {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  padding-top: 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+@media (max-width: 768px) {
+  .details-item {
+    flex: 0 0 100%;
+  }
+}
 </style>
+
+
+
diff --git a/f/web-kboss/src/views/product/mainPage/index.vue b/f/web-kboss/src/views/product/mainPage/index.vue
index 00444e4..d51d350 100644
--- a/f/web-kboss/src/views/product/mainPage/index.vue
+++ b/f/web-kboss/src/views/product/mainPage/index.vue
@@ -1,94 +1,98 @@
 <template>
   <div class="mainBox">
     <div class="leftBox">
-      <div class="bigTitle">快捷导航</div>
-      <ul class="recUl">
+      <div class="section">
+        <div class="bigTitle">快捷导航</div>
+        <ul class="recUl">
+          <li v-for="(item,index) in navList" :key="index" @click="goBaidu(item)">
+            <i :class="item.icon || 'el-icon-link'"></i>
+            {{ item.name }}
+          </li>
+        </ul>
+      </div>
 
-        <li v-for="(item,index) in navList" :key="index" @click="goBaidu(item)">{{ item.name }}</li>
+      <div class="section">
+        <div class="bigTitle">资源概览</div>
+        <ul class="recUl overView">
+          <li v-for="(item, index) in viewList" :key="index">
+            <div class="overview-item">
+              <span class="title">{{ item.name }}</span>
+              <span class="number">{{ item.count }}</span>
+            </div>
+          </li>
+        </ul>
+      </div>
 
-      </ul>
-      <div class="bigTitle">资源概览</div>
-      <ul class="recUl overView">
-        <li v-for="(item, index) in viewList" :key="index">
-          <span class="title">{{ item.name }}</span>
-          <span class="number">{{ item.count }}</span>
-        </li>
-
-
-      </ul>
-      <div class="bigTitle">到期预警</div>
-      <el-table
-        height="250px"
-        border
-        :data="tableData"
-        style="width: 100%">
-        <el-table-column
-          prop="name"
-          label="名称"
-          width="180">
-        </el-table-column>
-        <el-table-column
-          prop="instanceid"
-          label="资源id"
-          width="180">
-        </el-table-column>
-        <el-table-column
-          prop="status"
-          label="状态">
-        </el-table-column>
-        <el-table-column
-          prop="days"
-          label="剩余天数">
-        </el-table-column>
-      </el-table>
+      <div class="section">
+        <div class="bigTitle">到期预警</div>
+        <el-table
+          height="250px"
+          border
+          :data="tableData"
+          style="width: 100%"
+          header-cell-class-name="table-header"
+          cell-class-name="table-cell">
+          <el-table-column prop="name" label="名称" width="180"></el-table-column>
+          <el-table-column prop="instanceid" label="资源id" width="180"></el-table-column>
+          <el-table-column prop="status" label="状态">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.status === '即将到期' ? 'warning' : 'danger'">
+                {{ scope.row.status }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="days" label="剩余天数">
+            <template slot-scope="scope">
+              <span :class="scope.row.days < 3 ? 'critical' : ''">{{ scope.row.days }}天</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
+
     <div class="rightBox">
-      <div class="user">
+      <!-- 用户信息 -->
+      <div class="user card">
         <div class="userImg">
           <div class="imgUser">{{ userInfo.username.charAt(0) }}</div>
-
         </div>
-        <div class="rightBox">
-          <ul class="userUl">
-            <li>
-              <span>用户名：</span>
-              <span class="content">{{ userInfo.username }}</span>
-            </li>
-            <li>
-              <span>ID：</span>
-              <span class="content">{{ userInfo.id }}</span>
-            </li>
-
-            <li>
-              <span>手机号：</span>
-              <span class="content">{{ userInfo.mobile }}</span>
-            </li>
-            <li>
-              <span>邮箱：</span>
-              <span class="content">{{ userInfo.email }}</span>
-            </li>
-          </ul>
+        <div class="userBox">
+          <h3>{{ userInfo.username }}</h3>
+          <div class="user-info">
+            <p><i class="el-icon-user"></i> ID: {{ userInfo.id }}</p>
+            <p><i class="el-icon-phone"></i> 手机号: {{ userInfo.mobile }}</p>
+            <p><i class="el-icon-message"></i> 邮箱: {{ userInfo.email }}</p>
+          </div>
         </div>
       </div>
-      <div v-show="false" class="price">
+
+      <div class="price card">
         <div class="title">账户余额</div>
         <div class="content">
-          <span>￥{{ initMybalance() }}</span>
-          <el-button
-            size="mini"
-            type="primary"
-            @click="$router.push('/kbossCharge')">充值
+          <span class="balance">￥{{ initMybalance() }}</span>
+          <el-button size="mini" type="primary" @click="$router.push('/kbossCharge')">
+            立即充值
           </el-button>
         </div>
       </div>
+
+      <div class="announcements card">
+        <div class="title">系统公告</div>
+        <ul class="announcement-list">
+          <li v-for="i in 3" :key="i">
+            <i class="el-icon-bell"></i>
+            <span>这是第{{ i }}条系统公告内容...</span>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import Vue from 'vue'
-import {mapGetters, mapState} from "vuex";
-import {reqNewHomeResource, reqNewHomeResourceWarning, reqQuickNav} from "@/api/newHome";
+import { mapState } from "vuex";
+import { reqNewHomeResource, reqNewHomeResourceWarning, reqQuickNav } from "@/api/newHome";
 
 export default Vue.extend({
   name: "mainPage",
@@ -110,8 +114,7 @@ export default Vue.extend({
     reqQuickNav().then(res => {
       this.navList = res.data
     })
-    this.userInfo = JSON.parse(JSON.parse(JSON.stringify(localStorage.getItem("user_info")) || "{}"));
-    localStorage.setItem('price', this.mybalance)
+    this.userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
     reqNewHomeResource().then(res => {
       if (res.status) {
         this.viewList = res.data || [];
@@ -129,8 +132,6 @@ export default Vue.extend({
   },
   methods: {
     goBaidu(item) {
-      console.log(item.listUrl)
-      console.log(item.url)
       this.$store.commit('setRedirectUrl', item.url)
       localStorage.setItem('redirectUrl', item.url)
       localStorage.setItem('userRescourseUrl', item.listUrl)
@@ -143,174 +144,231 @@ export default Vue.extend({
       })
     },
     initMybalance() {
-      return sessionStorage.getItem('mybalance')
+      return sessionStorage.getItem('mybalance') || '0.00'
     },
-  }, computed: {
+  },
+  computed: {
     ...mapState({
       mybalance: state => state.user.mybalance,
-
     })
   },
 })
 </script>
 
-<style scoped lang="scss">
+<style lang="less" scoped>
 .mainBox {
-  background: #f6f6f6;
+  background: #f5f7fa;
   width: 100%;
   height: calc(100vh - 80px);
   display: flex;
-  justify-content: space-between;
+  padding: 20px;
+  box-sizing: border-box;
+  gap: 20px;
 }
 
 .leftBox {
-  padding-left: 15px;
-  width: 60%;
-
-  .recUl {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-
-    li {
-      margin-right: 5px;
-      border-radius: 12px;
-      margin-bottom: 10px;
-      width: 24%;
-      padding: 15px 30px;
-      cursor: pointer;
-      transition: all .3s ease-in-out;
-      border: 2px solid #f1ebeb;
-      background: white;
-
-      &:hover {
-        color: #171b4a;
-        background: #d1caca;
-      }
-    }
-  }
-
-  .overView {
-    li {
-      border-radius: 0 !important;
-
-      &:hover {
-        cursor: default;
-        background: white !important;
-      }
-
-      .title {
-        font-size: 14px;
-        color: #333;
-        margin-right: 10px;
-      }
-
-      .number {
-        font-size: 18px;
-        color: #0e0b0b;
-      }
-    }
+  width: 65%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 
+  .section {
+    background: white;
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   }
 }
 
 .rightBox {
-  width: 40%;
-  padding: 0 15px;
-}
-
-.bigTitle {
-  color: #4c5a7e;
-  margin: 15px 0;
-  font-size: 20px;
-  font-weight: bold;
-}
-
-.user {
-  margin-top: 15px;
+  width: 35%;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.card {
   background: white;
-  height: 300px;
-  border-radius: 4px;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
 
-  .rightBox {
+.recUl {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 15px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
 
-    padding: 40px;
-    padding-left: 0;
-    width: calc(100% - 150px);
+  li {
+    padding: 15px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 1px solid #ebeef5;
+    border-radius: 8px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 
-    .userUl {
-      li {
-        margin-bottom: 35px;
-        font-size: 18px;
+    i {
+      font-size: 24px;
+      margin-bottom: 10px;
+      color: #409eff;
+    }
 
-        .content {
-          color: #78787c;
-        }
-      }
+    &:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
+      border-color: #409eff;
+    }
+  }
+}
+
+.overView {
+  grid-template-columns: repeat(2, 1fr);
+
+  li {
+    cursor: default;
+    &:hover {
+      transform: none;
+      box-shadow: none;
+      border-color: #ebeef5;
     }
   }
 
-  .userImg {
-
-    width: 150px;
-    // height: 150px;
+  .overview-item {
     display: flex;
-    justify-content: center;
-    align-items: center;
+    justify-content: space-between;
+    width: 100%;
 
-    img {
+    .title {
+      font-size: 16px;
+      color: #606266;
+    }
+
+    .number {
+      font-size: 20px;
+      font-weight: bold;
+      color: #303133;
+    }
+  }
+}
+
+.bigTitle {
+  color: #303133;
+  margin-bottom: 20px;
+  font-size: 18px;
+  font-weight: bold;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #409eff;
+  display: inline-block;
+}
+
+.user {
+  display: flex;
+  align-items: center;
+
+  .userImg {
+    margin-right: 20px;
+
+    .imgUser {
       width: 80px;
       height: 80px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #409eff, #64b5f6);
+      font-size: 36px;
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+    }
+  }
+
+  .userBox {
+    width: calc(100% - 100px);
+
+    h3 {
+      margin-top: 0;
+      margin-bottom: 15px;
+      color: #303133;
+    }
+
+    .user-info {
+      p {
+        margin: 8px 0;
+        color: #606266;
+
+        i {
+          margin-right: 8px;
+          color: #409eff;
+        }
+      }
     }
   }
 }
 
 .price {
-  margin-top: 15px;
-  width: 100%;
-  height: 150px;
-  padding: 15px;
-  background: white;
-
   .content {
-    margin-top: 15px;
-    font-size: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-  }
-
-  .title {
-    font-size: 18px;
-    font-weight: bold;
-    color: #4c5a7e;
-
 
+    .balance {
+      font-size: 28px;
+      font-weight: bold;
+      color: #e6a23c;
+    }
   }
 }
 
-.chargeStyle {
-  padding: 5px 20px;
-  border-radius: 8px;
-  font-size: 16px;
+.announcements {
+  .announcement-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      padding: 10px 0;
+      border-bottom: 1px solid #eee;
+      display: flex;
+      align-items: center;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      i {
+        color: #e6a23c;
+        margin-right: 10px;
+      }
+
+      span {
+        color: #606266;
+      }
+    }
+  }
+}
+
+.critical {
+  color: #f56c6c;
   font-weight: bold;
-  color: #4c5a7e;
-
 }
 
-.imgUser {
-  text-align: center;
-  line-height: 80px;
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  background: #081020;
-  font-size: 48px;
-  color: white;
+.table-header {
+  background-color: #f5f7fa !important;
+  color: #606266;
+  font-weight: bold;
+}
+
+.table-cell {
+  padding: 8px 0 !important;
 }
 </style>
+
+
+
diff --git a/f/web-kboss/src/views/product/productHome/productIndex/index.vue b/f/web-kboss/src/views/product/productHome/productIndex/index.vue
index 405155c..ca1288c 100644
--- a/f/web-kboss/src/views/product/productHome/productIndex/index.vue
+++ b/f/web-kboss/src/views/product/productHome/productIndex/index.vue
@@ -23,9 +23,10 @@
             <div class="configStyle">
               <span>数据盘：3.84T U.2 NVMe SSD * 1</span>
               <span>GPU：NVIDIA GeForce RTX 4090 * 8</span>
-              <span>光速网卡：Mellanox ConnectX-5 Lx 25G SFP28 2-port</span></div>
+              <span>光速网卡：Mellanox ConnectX-5 Lx 25G SFP28 2-port</span>
+            </div>
             <div class="butBox">
-              <span class="buyBtn" @click="dialogVisibleMy= true">   立即购买</span>
+              <span class="buyBtn" @click="dialogVisibleMy = true"> 立即购买</span>
             </div>
           </div>
 
@@ -35,12 +36,12 @@
     </div>
 
     <el-dialog title="联系我们" :visible.sync="dialogVisibleMy" width="500px" :append-to-body="true"
-               custom-class="contentStyle" :close-on-click-modal="false">
+      custom-class="contentStyle" :close-on-click-modal="false">
       <contactUs></contactUs>
       <span slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="dialogVisibleMy = false"
-                           style="background-color: #0007d4;padding: 5px">我已知晓</el-button>
-            </span>
+        <el-button type="primary" @click="dialogVisibleMy = false"
+          style="background-color: #0007d4;padding: 5px">我已知晓</el-button>
+      </span>
     </el-dialog>
     <!--    公有云-->
     <!--    京东-->
@@ -51,13 +52,13 @@
         <li :class="{ activeTagStyle: currentTag === '2' }" style="width: 250px;" @click="clickTag('2')">
           <a class="hmc1a aniIconBtn">
             <div class="dsPcPad">
-                        <span class="hmc1icon" style="position: relative;height: 150px">
-                            <div class="aniIcon"
-                                 style="background-image: url('https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_2.png'); background-position-y: 0;position: absolute;top: 0;left: -20px"></div>
-                            <div class="hmc3nico"><img height="180"
-                                                       src="https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_2.png"
-                                                       width="180"></div>
-                        </span>
+              <span class="hmc1icon" style="position: relative;height: 150px">
+                <div class="aniIcon"
+                  style="background-image: url('https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_2.png'); background-position-y: 0;position: absolute;top: 0;left: -20px">
+                </div>
+                <div class="hmc3nico"><img height="180"
+                    src="https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_2.png" width="180"></div>
+              </span>
             </div>
             <!--              <div class="dsPhone">-->
             <!--                <span class="mhmc2ico">-->
@@ -70,25 +71,22 @@
             <p style="font-size: 14px;width: 100%;padding: 0 5px">
               高效、易用、丰富的GPU算力AI助力产业升级</p>
             <span class="hmc1_lm">了解详情
-                <i>&gt;</i>
-              </span>
+              <i>&gt;</i>
+            </span>
           </a>
         </li>
-        <li :class="{ activeTagStyle: currentTag === '1' }" style="width: 250px;"
-            @click=" clickTag('1') ">
+        <li :class="{ activeTagStyle: currentTag === '1' }" style="width: 250px;" @click=" clickTag('1')">
           <a class="hmc1a aniIconBtn">
             <div class="dsPcPad">
-                        <span class="hmc1icon"
-                              style="position: relative;height: 150px">
-                            <div class="aniIcon"
-
-                                 style="background-image: url('https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_1.png'); background-position-y: 0;position: absolute;top: 0;left: -20px"></div>
+              <span class="hmc1icon" style="position: relative;height: 150px">
+                <div class="aniIcon"
+                  style="background-image: url('https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_1.png'); background-position-y: 0;position: absolute;top: 0;left: -20px">
+                </div>
 
 
-                            <div class="hmc3nico"><img height="180"
-                                                       src="https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_1.png"
-                                                       width="180"></div>
-                        </span>
+                <div class="hmc3nico"><img height="180"
+                    src="https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_1.png" width="180"></div>
+              </span>
             </div>
             <!--              <div class="dsPhone">-->
             <!--                <span class="mhmc2ico">-->
@@ -101,30 +99,30 @@
             <p style="font-size: 14px;width: 100%;padding: 0 5px">
               整合各大超算中心计算资源让用户像用电一样方便地使用资源</p>
             <span class="hmc1_lm">了解详情
-                <i>&gt;</i>
-              </span>
+              <i>&gt;</i>
+            </span>
           </a>
         </li>
 
         <li :class="{ activeTagStyle: currentTag === '3' }" style="width: 250px;" @click="clickTag('3')">
           <a class="hmc1a aniIconBtn">
             <div class="dsPcPad">
-                        <span class="hmc1icon" style="position: relative;height: 150px">
-                            <div class="aniIcon"
-                                 style="background-image: url('https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_3.png'); background-position-y: 0;position: absolute;top: 0;left: -20px"></div>
+              <span class="hmc1icon" style="position: relative;height: 150px">
+                <div class="aniIcon"
+                  style="background-image: url('https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_3.png'); background-position-y: 0;position: absolute;top: 0;left: -20px">
+                </div>
 
 
-                            <div class="hmc3nico"><img height="180"
-                                                       src="https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_3.png"
-                                                       width="180"></div>
-                        </span>
+                <div class="hmc3nico"><img height="180"
+                    src="https://www.opencomputing.cn/dev/idfile?path=svg_data/n3d_3.png" width="180"></div>
+              </span>
             </div>
             <strong style="margin-top:25px">公有云</strong>
             <p class="mobile-description" style="font-size: 14px;width: 100%;padding: 0 10px">
               提供高质量算力网络出口带宽、传输</p>
             <span class="hmc1_lm">了解详情
-                <i>&gt;</i>
-              </span>
+              <i>&gt;</i>
+            </span>
           </a>
         </li>
       </ul>
@@ -145,9 +143,8 @@
         </div>
         <div class="new-nav">
           <ul class="nav-ul">
-            <li
-              :class="{ navLi: item.name === currentTitle }"
-              @click="mouseOver($event,item)" v-for="(item,index) in menuArr" :key="item.name">
+            <li :class="{ navLi: item.name === currentTitle }" @click="mouseOver($event, item)"
+              v-for="(item, index) in menuArr" :key="item.name">
               <div>
                 {{ item.name }}
               </div>
@@ -168,30 +165,30 @@
           <div class="content-r">
 
 
-            <ul class="bottom-ul" style="display: flex;flex-wrap: wrap;justify-content: center;"
-            >
-              <li @click="goTwo(item)" v-for="(item,index) in currentData" :key="index"
-                  style="width: 300px;margin: 0 15px 10px 15px">
+            <ul class="bottom-ul" style="display: flex;flex-wrap: wrap;justify-content: center;">
+              <li @click="goTwo(item)" v-for="(item, index) in currentData" :key="index"
+                style="width: 300px;margin: 0 15px 10px 15px">
                 <a class="sq6Wd6jr">
-                  <div class="__9uUkOV59"><h3><span class="LLZ9Q8FX">{{ item.product_name }}   </span></h3>
-                    <p class="xQ1YIHP8">{{ item.description }}</p></div>
+                  <div class="__9uUkOV59">
+                    <h3><span class="LLZ9Q8FX">{{ item.product_name }} </span></h3>
+                    <p class="xQ1YIHP8">{{ item.description }}</p>
+                  </div>
                   <div class="PfF8K5ib">
-                    <div v-for="(itemOne,index) in JSON.parse(JSON.stringify(item.tags))" :key="index"
-                         class="_dDwK_qk"><span>{{
+                    <div v-for="(itemOne, index) in JSON.parse(JSON.stringify(item.tags))" :key="index" class="_dDwK_qk">
+                      <span>{{
                         itemOne
                       }}</span>
                     </div>
                   </div>
                   <div v-if="item.discount" class="n2sHMecG"
-                       style="display: flex;justify-content: flex-start;align-items: center">
-                  <span class="__1wQVatn_ vh___DYU PEZeG2zA"
-                        style="display: inline-block;align-self: flex-end">折扣</span>
+                    style="display: flex;justify-content: flex-start;align-items: center">
+                    <span class="__1wQVatn_ vh___DYU PEZeG2zA"
+                      style="display: inline-block;align-self: flex-end">折扣</span>
+                    <span class="__1wQVatn_ cB_ePAPu XeaRmkQC" style="display:inline-block;margin: 0 3px">{{
+                      item.discount
+                    }} </span>
                     <span class="__1wQVatn_ cB_ePAPu XeaRmkQC"
-                          style="display:inline-block;margin: 0 3px">{{
-                        item.discount
-                      }} </span>
-                    <span class="__1wQVatn_ cB_ePAPu XeaRmkQC"
-                          style="align-self:flex-end;display:inline-block;font-size: 14px">折起</span>
+                      style="align-self:flex-end;display:inline-block;font-size: 14px">折起</span>
                   </div>
                 </a>
               </li>
@@ -208,7 +205,7 @@
           <cloud-item :product_data="bd_data" style="width: 700px;"></cloud-item>
         </div>
         <div v-if="false" class="showMore">
-          <el-button style="padding: 5px 10px" v-if="!showMoreFlag" type="primary" @click="showMoreFlag=true">查看更多
+          <el-button style="padding: 5px 10px" v-if="!showMoreFlag" type="primary" @click="showMoreFlag = true">查看更多
           </el-button>
           <div v-else style="display: flex">
             <cloud-item :product_data="cap_data" style="width: 700px;"></cloud-item>
@@ -231,14 +228,14 @@ import SupercomputingItem from "@/views/product/productHome/productIndex/superco
 import Carousel from './carousel/index.vue'
 import HeaderTiao from "@/views/product/productHome/productIndex/headerTiao/index.vue";
 import FooterBox from "@/views/product/productHome/productIndex/FooterBox/index.vue";
-import {reqHotProductList} from "@/api/product/product";
-import {bdProducts, jdProducts} from "@/views/product/productionData";
+import { reqHotProductList } from "@/api/product/product";
+import { bdProducts, jdProducts } from "@/views/product/productionData";
 import contactUs from "@/views/product/productHome/components/contactUs/index.vue";
 import MainPage from "@/views/product/mainPage/index.vue";
 
 export default {
   name: "productIndex",
-  components: {MainPage, contactUs, FooterBox, HeaderTiao, SupercomputingItem, CloudItem, Carousel},
+  components: { MainPage, contactUs, FooterBox, HeaderTiao, SupercomputingItem, CloudItem, Carousel },
   data() {
     return {
       dialogVisibleMy: false,
@@ -247,14 +244,14 @@ export default {
       currentTag: '2',
       //菜单
       menuArr: [
-        {name: '热门产品', tag: '', tag2: ''},
-        {name: '计算', tag: '集群节点一', tag2: '云主机'},
-        {name: '网络', tag: 'DDos', tag2: '负载均衡'},
-        {name: '存储', tag: '云磁盘', tag2: '文件存储'},
-        {name: '安全', tag: '云防火墙', tag2: '风险识别'},
+        { name: '热门产品', tag: '', tag2: '' },
+        { name: '计算', tag: '集群节点一', tag2: '云主机' },
+        { name: '网络', tag: 'DDos', tag2: '负载均衡' },
+        { name: '存储', tag: '云磁盘', tag2: '文件存储' },
+        { name: '安全', tag: '云防火墙', tag2: '风险识别' },
 
-        {name: '数据库', tag: '数据库审计', tag2: '数据库备份DBS'},
-        {name: 'AI能力引擎', tag: '文字识别', tag2: '人脸识别'},
+        { name: '数据库', tag: '数据库审计', tag2: '数据库备份DBS' },
+        { name: 'AI能力引擎', tag: '文字识别', tag2: '人脸识别' },
 
       ],
       currentData: [],
@@ -640,38 +637,38 @@ export default {
       currentTitle: '热门产品',
       //公有云京东推荐产品列表
       jd_data:
-        {
-          title: '京东产品推荐',
-          moreProductDescription:
-            '京东技术最佳实践，助力产业互联！',
-          products:
-            [
-              {
-                product_name: '弹性公网IP   ',
-                description: '可与云主机 CVM、负载均衡 LB、原生容器 NC、弹性网卡 ENI 等灵活绑定与解绑',
-                tags: ['EIP/弹性', 'IP地址'],
-                discount: '7.5'
-              },
-              {
-                product_name: '云主机',
-                description: '云主机(CVM，云虚拟机)是一种管理便捷、安全稳定的弹性计算服务',
-                tags: ['随时扩展', '节约成本'],
-                discount: '7'
-              },
-              {
-                product_name: '负载均衡',
-                description: '管理便捷的流量分发服务。访问流量经由 LB 可自动分发至多台服务器上，提高系统的可用性并扩展服务能力',
-                tags: [],
-                discount: '7.5'
-              },
-              {
-                product_name: '容器镜像仓库',
-                description: '库伯奈特(Kubernetes)集群服务无缝集成，为基于容器的应用提供一站式部署服务',
-                tags: ['容器镜像存储'],
-                discount: '7'
-              }
-            ]
-        }
+      {
+        title: '京东产品推荐',
+        moreProductDescription:
+          '京东技术最佳实践，助力产业互联！',
+        products:
+          [
+            {
+              product_name: '弹性公网IP   ',
+              description: '可与云主机 CVM、负载均衡 LB、原生容器 NC、弹性网卡 ENI 等灵活绑定与解绑',
+              tags: ['EIP/弹性', 'IP地址'],
+              discount: '7.5'
+            },
+            {
+              product_name: '云主机',
+              description: '云主机(CVM，云虚拟机)是一种管理便捷、安全稳定的弹性计算服务',
+              tags: ['随时扩展', '节约成本'],
+              discount: '7'
+            },
+            {
+              product_name: '负载均衡',
+              description: '管理便捷的流量分发服务。访问流量经由 LB 可自动分发至多台服务器上，提高系统的可用性并扩展服务能力',
+              tags: [],
+              discount: '7.5'
+            },
+            {
+              product_name: '容器镜像仓库',
+              description: '库伯奈特(Kubernetes)集群服务无缝集成，为基于容器的应用提供一站式部署服务',
+              tags: ['容器镜像存储'],
+              discount: '7'
+            }
+          ]
+      }
       ,
       //公有云百度推荐产品列表
       bd_data: {
@@ -1054,9 +1051,7 @@ export default {
   background-color: white;
 }
 
-.all-cloud {
-
-}
+.all-cloud {}
 
 .cloud-header {
   display: flex;
@@ -1070,9 +1065,7 @@ export default {
   flex-direction: column;
 }
 
-.jd-box {
-
-}
+.jd-box {}
 
 .all-cloud-item {
   display: flex;
@@ -1163,20 +1156,23 @@ export default {
   .new-nav {
     overflow-x: auto;
   }
-  .main-box {
 
-  }
+  .main-box {}
+
   .cloud-header {
     margin: 0 0 15px 0 !important;
   }
+
   .mobile-banner {
     display: none;
   }
+
   .all-cloud-item {
 
     display: flex;
     flex-direction: column;
   }
+
   .other-product-ul {
 
     li {
@@ -1257,6 +1253,7 @@ export default {
     position: relative;
     font-weight: bold;
     z-index: 1;
+
     //padding: 10px 0 0 10px;
     &:first-child {
       height: 60px;
@@ -1327,7 +1324,8 @@ export default {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   text-overflow: ellipsis;
-  -webkit-line-clamp: 2; /* 控制最大行数 */
+  -webkit-line-clamp: 2;
+  /* 控制最大行数 */
 }
 
 * {
@@ -1444,6 +1442,7 @@ a:hover {
   .myDivider {
     display: none;
   }
+
   .new-nav {
     padding: 0 !important;
     display: flex;
@@ -1467,9 +1466,12 @@ a:hover {
 
         padding: 0 10px;
         display: grid !important;
-        grid-template-columns: 1fr 1fr !important; /* 两列等宽 */
+        grid-template-columns: 1fr 1fr !important;
+        /* 两列等宽 */
         //justify-content: space-around !important;
-        gap: 10px; /* 上下左右间距 */
+        gap: 10px;
+
+        /* 上下左右间距 */
         li {
           margin-right: 0 !important;
           margin-left: 0 !important;

From ef10dfdd697ebeb6ba2d1ed6f2d9e55d48d7154f Mon Sep 17 00:00:00 2001
From: hrx <18603305412@163.com>
Date: Mon, 22 Sep 2025 17:58:53 +0800
Subject: [PATCH 2/2] uptada style

---
 f/web-kboss/src/views/product/mainPage/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/f/web-kboss/src/views/product/mainPage/index.vue b/f/web-kboss/src/views/product/mainPage/index.vue
index d51d350..134d41d 100644
--- a/f/web-kboss/src/views/product/mainPage/index.vue
+++ b/f/web-kboss/src/views/product/mainPage/index.vue
@@ -161,7 +161,7 @@ export default Vue.extend({
   width: 100%;
   height: calc(100vh - 80px);
   display: flex;
-  padding: 20px;
+  padding: 10px;
   box-sizing: border-box;
   gap: 20px;
 }