From 091638a5e10336f3e575c42fe1b3378e29d3e734 Mon Sep 17 00:00:00 2001
From: pengda <1111@qq.com>
Date: Wed, 6 Aug 2025 13:47:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                         |   4 +-
 src/assets/site/form_copy_white.svg |   1 +
 src/components/Header.vue           |   3 +-
 src/router/index.js                 |  29 +++++-
 src/store/index.js                  |   4 +
 src/utils/loginRefresh.js           |   2 +-
 src/views/agent/agreement.vue       | 104 +++++++++++++++++++++
 src/views/agent/customizeDoc.vue    | 178 ++++++++++++++++++++++++++++++++++++
 8 files changed, 319 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/site/form_copy_white.svg
 create mode 100644 src/views/agent/agreement.vue
 create mode 100644 src/views/agent/customizeDoc.vue

diff --git a/src/App.vue b/src/App.vue
index 148f772..b150345 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
   <div id="app">
     <el-container class="outContainerWrap">
       <el-header style="height: 62px;" v-if="showHeader">
-        <Header></Header>
+        <Header :showRight="showHeaderRight"></Header>
         <video class="top_viedo" width="100%" src="./assets/headerBg1.mp4" autoplay loop muted
         ></video>
         <div class="bg"></div>
@@ -52,7 +52,7 @@ export default {
     Breadcrumb
   },
   computed: {
-    ...mapState(['showSidebar','showSecondSide','secondMenu','showHeader','slidermenu','customize']) // 从Vuex映射showSidebar状态到组件的计算属性中
+    ...mapState(['showSidebar','showSecondSide','secondMenu','showHeader','showHeaderRight','slidermenu','customize']) // 从Vuex映射showSidebar状态到组件的计算属性中
   },
   mounted() {
     window.addEventListener('beforeunload', this.clearStorage);
diff --git a/src/assets/site/form_copy_white.svg b/src/assets/site/form_copy_white.svg
new file mode 100644
index 0000000..76c2e98
--- /dev/null
+++ b/src/assets/site/form_copy_white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_786_021719"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_786_021719)"><g><path d="M13.395833492279053,10.999996626930237L11.838763492279053,10.999996626930237L11.838763492279053,11.001666626930238Q11.773273492279053,11.001666626930238,11.709033492279053,11.014446626930237Q11.644793492279053,11.027216626930237,11.584283492279052,11.052286626930236Q11.523773492279052,11.077346626930236,11.469313492279053,11.113736626930237Q11.414853492279054,11.150126626930236,11.368543492279052,11.196436626930236Q11.322223492279052,11.242756626930237,11.285843492279053,11.297206626930237Q11.249453492279052,11.351666626930237,11.224383492279053,11.412176626930236Q11.199323492279053,11.472696626930237,11.186543492279053,11.536926626930237Q11.173763492279052,11.601166626930237,11.173763492279052,11.666666626930237Q11.173763492279052,11.732166626930237,11.186543492279053,11.796366626930237Q11.199323492279053,11.860666626930238,11.224383492279053,11.921166626930237Q11.249453492279052,11.981666626930236,11.285843492279053,12.036166626930237Q11.322223492279052,12.090566626930237,11.368543492279052,12.136866626930237Q11.414853492279054,12.183166626930237,11.469313492279053,12.219566626930236Q11.523773492279052,12.255966626930237,11.584283492279052,12.281066626930237Q11.644793492279053,12.306066626930237,11.709033492279053,12.318866626930237Q11.773273492279053,12.331666626930236,11.838763492279053,12.331666626930236L11.838763492279053,12.333366626930237L13.395833492279053,12.333366626930237Q14.060303492279052,12.333366626930237,14.530133492279052,11.863466626930236Q15.000033492279053,11.393636626930236,15.000033492279053,10.729166626930237L15.000033492279053,2.604166626930237Q15.000033492279053,1.939699626930237,14.530133492279052,1.4698496269302368Q14.060303492279052,0.9999996269302368,13.395833492279053,0.9999996269302368L5.270833492279053,0.9999996269302368Q4.6063654922790525,0.9999996269302368,4.1365164922790525,1.4698496269302368Q3.666666492279053,1.939699626930237,3.666666492279053,2.604166626930237L3.666666492279053,4.143866626930237L3.6683334922790527,4.143866626930237Q3.6683334922790527,4.209366626930237,3.6811114922790527,4.273596626930237Q3.6938894922790526,4.337836626930237,3.7189534922790526,4.398346626930237Q3.7440184922790527,4.458866626930236,3.780406492279053,4.513316626930237Q3.816794492279053,4.567776626930237,3.863107492279053,4.6140966269302375Q3.909420492279053,4.660406626930237,3.9638794922790526,4.696796626930237Q4.018337492279053,4.733186626930237,4.078849492279053,4.758246626930237Q4.139360492279053,4.783306626930237,4.203598492279053,4.7960866269302365Q4.267836692279053,4.808866626930237,4.333333492279053,4.808866626930237Q4.398830292279053,4.808866626930237,4.463068492279053,4.7960866269302365Q4.5273064922790525,4.783306626930237,4.5878174922790524,4.758246626930237Q4.648329492279053,4.733186626930237,4.702787492279053,4.696796626930237Q4.7572464922790525,4.660406626930237,4.803559492279053,4.6140966269302375Q4.849872492279053,4.567776626930237,4.886260492279053,4.513316626930237Q4.922648492279053,4.458866626930236,4.947713492279052,4.398346626930237Q4.972777492279053,4.337836626930237,4.985555492279053,4.273596626930237Q4.998333492279053,4.209366626930237,4.998333492279053,4.143866626930237L5.000000492279053,4.143866626930237L5.000000492279053,2.604166626930237Q5.000000492279053,2.3333336269302367,5.270833492279053,2.3333336269302367L13.395833492279053,2.3333336269302367Q13.666663492279053,2.3333336269302367,13.666663492279053,2.604166626930237L13.666663492279053,10.729166626930237Q13.666663492279053,10.999996626930237,13.395833492279053,10.999996626930237Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M12.333366626930237,13.395833492279053L12.333366626930237,5.270833492279053Q12.333366626930237,4.606366492279053,11.863466626930236,4.1365164922790525Q11.393636626930236,3.666666492279053,10.729166626930237,3.666666492279053L2.604166626930237,3.666666492279053Q1.939699626930237,3.666666492279053,1.4698496269302368,4.1365164922790525Q0.9999996269302368,4.6063654922790525,0.9999996269302368,5.270833492279053L0.9999996269302368,13.395833492279053Q0.9999996269302368,14.060303492279052,1.4698496269302368,14.530133492279052Q1.939699626930237,15.000033492279053,2.604166626930237,15.000033492279053L10.729166626930237,15.000033492279053Q11.393636626930236,15.000033492279053,11.863466626930236,14.530133492279052Q12.333366626930237,14.060303492279052,12.333366626930237,13.395833492279053ZM10.729166626930237,5.000000492279053Q10.999996626930237,5.000000492279053,10.999996626930237,5.270833492279053L10.999996626930237,13.395833492279053Q10.999996626930237,13.666663492279053,10.729166626930237,13.666663492279053L2.604166626930237,13.666663492279053Q2.3333336269302367,13.666663492279053,2.3333336269302367,13.395833492279053L2.3333336269302367,5.270833492279053Q2.3333336269302367,5.158650492279053,2.412658626930237,5.079325492279053Q2.491983626930237,5.000000492279053,2.604166626930237,5.000000492279053L10.729166626930237,5.000000492279053Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 493aa6e..dd73128 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -3,7 +3,7 @@
         <div class="header-logo">
             <img src="../assets/header-logo.png" alt="">
         </div>
-        <div class="header-right flex">
+        <div class="header-right flex" v-if="showRight">
             <!-- <div class="right-item">权限设置</div>
             <div class="right-item">岗位设置</div> -->
             <el-dropdown trigger="click">
@@ -23,6 +23,7 @@
 <script>
 import { logout } from '@/utils/logout';
 export default {
+    props:['showRight'],
     data() {
         return {
             user: ''
diff --git a/src/router/index.js b/src/router/index.js
index feb7e23..9b2e2d7 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,7 +9,7 @@ const whiteSecondSider = [
   '/agent/siteAddFinally','/agent/siteServiceAdd'
 ];
 const blackSliderList = [
-  '/franchise', '/register', '/agent/siteAdd', '/agent/siteServiceList', '/agent/siteTemplate','/agent/siteAddFinally','/agent/siteServiceAdd', '/agent/supplyList',
+  '/franchise', '/agreement', '/customizeDoc', '/register', '/agent/siteAdd', '/agent/siteServiceList', '/agent/siteTemplate','/agent/siteAddFinally','/agent/siteServiceAdd', '/agent/supplyList',
   '/agent/domainList'
   , '/agent/noticeList'
 ];
@@ -19,8 +19,12 @@ let first_child_router = []
 const blackHeaderList = [
   '/franchise'
 ];
+//头部导航黑名单 不需要添加头部的放置在这里，其余默认显示头部
+const blackHeaderRightList = [
+  '/agreement', '/customizeDoc'
+];
 const blackFooterList = [
-  '/', '/franchise', '/register', '/agent/siteAdd', '/agent/payInfoSetting','/agent/siteServiceEdit','/agent/siteAddFinally','/agent/siteServiceAdd',
+  '/', '/franchise','/agreement', '/customizeDoc', '/register', '/agent/siteAdd', '/agent/payInfoSetting','/agent/siteServiceEdit','/agent/siteAddFinally','/agent/siteServiceAdd',
   '/agent/siteTemplate'
 ];
 // const whiteSlideList = ['/', '/ui', 
@@ -322,6 +326,22 @@ const routes = [{
     }
   },
   {
+    path: '/agreement',
+    name: '网站协议',
+    component: () => import( /* webpackChunkName: "agreement" */ '../views/agent/agreement.vue'),
+    meta: {
+      hideBreadcrumb: true // 一级页面不显示面包屑
+    }
+  },
+  {
+    path: '/customizeDoc',
+    name: '开发文档',
+    component: () => import( /* webpackChunkName: "customizeDoc" */ '../views/agent/customizeDoc.vue'),
+    meta: {
+      hideBreadcrumb: true // 一级页面不显示面包屑
+    }
+  },
+  {
     path: '/configureServicePrices',
     name: '配置服务价格',
     component: () => import( /* webpackChunkName: "configureServicePrices" */ '../views/ConfigureServicePrices.vue')
@@ -611,6 +631,11 @@ router.beforeEach((to, from, next) => {
   } else {
     store.commit('SET_HEADER', true); // 其他页面显示顶部
   }
+  if (blackHeaderRightList.includes(to.path)) {
+    store.commit('SET_HEADER_RIGHT', false); // 不显示顶部信息
+  } else {
+    store.commit('SET_HEADER_RIGHT', true); // 其他页面显示顶部信息
+  }
   store.dispatch('showLoading')
   next();
 });
diff --git a/src/store/index.js b/src/store/index.js
index 6c97b32..0cc8c57 100755
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -9,6 +9,7 @@ export default new Vuex.Store({
     showSidebar: false,
     showFooter: false,
     showHeader: false,
+    showHeaderRight: false,
     menuList: [], //目录菜单
     secondMenu:{},//第三种侧边栏 -- 可折叠、 切换显示
     showBreadcrumb: false, //是否展示面包屑
@@ -591,6 +592,9 @@ export default new Vuex.Store({
     SET_HEADER(state, show) {
       state.showHeader = show;
     },
+    SET_HEADER_RIGHT(state, show) {
+      state.showHeaderRight = show;
+    },
     SHOW_BREAD(state, show) {
       state.showBreadcrumb = show;
     },
diff --git a/src/utils/loginRefresh.js b/src/utils/loginRefresh.js
index b96b0a5..177ab35 100644
--- a/src/utils/loginRefresh.js
+++ b/src/utils/loginRefresh.js
@@ -20,7 +20,7 @@ export async function handleTokenRefresh(originalRequest, instance) {
   if (isRefreshing) {
     return new Promise(resolve => {
       subscribeTokenRefresh(token => {
-        originalRequest.headers.Authorization = `Bearer ${token}`
+        originalRequest.headers.Auth = `${token}`
         resolve(instance(originalRequest))
       })
     })
diff --git a/src/views/agent/agreement.vue b/src/views/agent/agreement.vue
new file mode 100644
index 0000000..17ab158
--- /dev/null
+++ b/src/views/agent/agreement.vue
@@ -0,0 +1,104 @@
+<template>
+    <div class="main-content12 agree-info">
+        <div class="flex-common">
+            <div class="w1000">
+                <div class="agree-title mb20">快乐论文网站协议</div>
+                <div class="flex-between mb20">
+                    <div></div>
+                    <div class="agree-date">更新日期：2025年08月06日</div>
+                </div>
+                <div class="agree-section">
+                    <div class="ti">前言</div>
+                    <div class="tx">
+                        <div class="flex">感谢您使用微盟提供的产品和/或服务。在完成注册程序或以任何方式使用微盟网站服务前，请您务必仔细阅读并透彻理解本微盟软件注册协议条款(以下或简称“本注册条款”)，在确认充分理解后选择接受或不接受本注册条款；一旦您完成注册或开始以其他方式使用微盟服务，即表明您已阅读并同意受本注册条款的约束。如您不同意本注册条款或其中任何条款约定， 您应不再进行下一步或停止注册程序。</div>
+                    </div>
+                </div>
+                <div class="agree-section">
+                    <div class="ti">一、定义及协议范围</div>
+                    <div class="tx">
+                        <div class="flex">1.1.微盟：指研发并提供微盟产品和服务的上海微盟企业发展有限公司及现在或未来设立的相关关联公司的单称或合称。</div>
+                        <div class="flex">1.2.微盟网站：包含域名为www.weimob.com的网站以及微盟客户端，如商户助手App。</div>
+                        <div class="flex">1.3.微盟网站服务（以下或称“本服务”）：是指由微盟开发和服务的微商城、微盟精选、智慧零售、智慧餐厅、客来店、智慧酒店、智慧旅游、智慧美业、微站、销售推、微盟表单、会务等SaaS产品，面向开发者的“微盟云”服务，帮助客户在新零售时代提高运营效率和盈利能力。</div>
+                        <div class="flex">1.4.关联公司：指微盟集团(Weimob Inc.)最新上市公司年报披露的微盟服务提供者的关联公司。</div>
+                        <div class="flex">1.5.您：指注册或使用微盟产品或服务账户或使用微盟商户助手服务等微盟服务的自然人、法人或其他组织。您可以通过微盟系统授权个人用户操作其工作界面。</div>
+                        <div class="flex">1.6.店铺：指您每购买微盟提供的一个SaaS产品系统后可创建的商业操作系统，店铺创建时生成的唯一标识为bosid（WOS体系）/pid（新云体系）</div>
+                        <div class="flex">1.7.组织节点：指店铺及其下属经营结构节点（如门店、商场、商城包等），各组织节点创建时生成的标识为vid（WOS体系）/storeid（新云体系）</div>
+                        <div class="flex">1.8.本注册条款是您与微盟就使用本服务而订立的有效合约。</div>
+                        <div class="flex">1.9.如您使用或购买微盟网站上某一具体产品和/或服务，您可仍需确认具体服务对应的服务条款；请您审慎阅读、充分理解各条款内容，选择接受或不接受该服务条款。</div>
+                    </div>
+                </div>
+                <div class="agree-section">
+                    <div class="ti">一、定义及协议范围</div>
+                    <div class="tx">
+                        <div class="flex">1.1.微盟：指研发并提供微盟产品和服务的上海微盟企业发展有限公司及现在或未来设立的相关关联公司的单称或合称。</div>
+                        <div class="flex">1.2.微盟网站：包含域名为www.weimob.com的网站以及微盟客户端，如商户助手App。</div>
+                        <div class="flex">1.3.微盟网站服务（以下或称“本服务”）：是指由微盟开发和服务的微商城、微盟精选、智慧零售、智慧餐厅、客来店、智慧酒店、智慧旅游、智慧美业、微站、销售推、微盟表单、会务等SaaS产品，面向开发者的“微盟云”服务，帮助客户在新零售时代提高运营效率和盈利能力。</div>
+                        <div class="flex">1.4.关联公司：指微盟集团(Weimob Inc.)最新上市公司年报披露的微盟服务提供者的关联公司。</div>
+                        <div class="flex">1.5.您：指注册或使用微盟产品或服务账户或使用微盟商户助手服务等微盟服务的自然人、法人或其他组织。您可以通过微盟系统授权个人用户操作其工作界面。</div>
+                        <div class="flex">1.6.店铺：指您每购买微盟提供的一个SaaS产品系统后可创建的商业操作系统，店铺创建时生成的唯一标识为bosid（WOS体系）/pid（新云体系）</div>
+                        <div class="flex">1.7.组织节点：指店铺及其下属经营结构节点（如门店、商场、商城包等），各组织节点创建时生成的标识为vid（WOS体系）/storeid（新云体系）</div>
+                        <div class="flex">1.8.本注册条款是您与微盟就使用本服务而订立的有效合约。</div>
+                        <div class="flex">1.9.如您使用或购买微盟网站上某一具体产品和/或服务，您可仍需确认具体服务对应的服务条款；请您审慎阅读、充分理解各条款内容，选择接受或不接受该服务条款。</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+
+export default {
+    name: 'agreement',
+    components: {
+
+    },
+    data() {
+        return {
+
+        }
+    },
+    mounted() {
+    },
+    methods: {
+
+    }
+}
+</script>
+<style scoped lang="scss">
+.mb20{
+  margin-bottom: 20px;
+}
+.w1000{
+  width: 1000px;
+  margin: 0 auto;
+}
+.agree-info{
+  letter-spacing: 0.08em;
+  .agree-title{
+    font-size: 26px;
+    color: #1E2226;
+  }
+  .agree-date{
+    color: #626573;
+    font-size: 14px;
+  }
+  .agree-section{
+    text-align: left;
+    .ti{
+      color: #1E2226;
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 12px;
+    }
+    .tx{
+      font-size: 14px;
+      color: #595961;
+      margin-bottom: 20px;
+      div{
+        margin-bottom: 12px;
+        line-height: 26px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/agent/customizeDoc.vue b/src/views/agent/customizeDoc.vue
new file mode 100644
index 0000000..21b2950
--- /dev/null
+++ b/src/views/agent/customizeDoc.vue
@@ -0,0 +1,178 @@
+<template>
+    <div class="main-content12 agree-info">
+        <div class="flex-common">
+            <div class="w1000">
+                <div class="agree-title mb20">自定义模板开发文档</div>
+                <div class="flex-between mb20">
+                    <div></div>
+                    <div class="agree-date">更新日期：2025年08月06日</div>
+                </div>
+                <div class="agree-section">
+                    <div class="tx">
+                        <div class="flex">自定义首页模板，按下方要求书写自定义网站，并压缩上传后，可生成自定义首页<br>此模板完全由你设定</div>
+                    </div>
+                </div>
+                <div class="agree-section">
+                    <div class="ti">一、目录结构</div>
+                    <div class="ti-sec">文件及目录按以下命名定义</div>
+                    <div class="tx">
+                        <div class="flex">
+                            home.html首页模板<br>
+                            ├─style样式目录，该目录下存放js、css、图片等<br>
+                            ├─html页面目录，该目录下存放html页面，例如关于我们等
+                        </div>
+                    </div>
+                </div>
+                <div class="agree-section">
+                    <div class="ti">二、页面规范</div>
+                    <div class="ti-sec">首页及html目录下的html页面支持标签替换，支持标签：{$priv_conf}、{$priv_style}、{$priv_html}、{$access_stats_code}</div>
+                    <div class="tx">
+                        <div class="flex">
+                            1. 标签使用说明（以万方2.0为例）：<br>
+                            价格标签：{$priv_conf.price.wanfang2}<br>
+                            单位标签：{$priv_conf.unit.wanfang2}<br>
+                            检测链接标签：{$priv_conf.url.wanfang2}<br>
+                            其他检测服务的价格、单位、检测链接，即从下表找到对应的服务标识替换wanfang2<br>
+                        </div>
+                    </div>
+                    <div class="ti-sec">各检测服务标识如下</div>
+                    <div class="flag-area">
+                        <div class="flag-ti flex gap10">
+                            <span class="flag-ti-copy" @click="copyAll">复制全部<img src="@/assets/site/form_copy_white.svg" alt=""></span>
+                            <span>（格式）测服务标识/检测服务名称</span>
+                        </div>
+                        <div class="flag-info">
+                            <div v-for="item in supply_list" :key="item.flag">
+                                <GuipToolTip :content="item.flag + ' / ' + item.name">
+                                    <span>{{item.flag}} / {{item.name}}</span>
+                                </GuipToolTip>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+
+import GuipToolTip from "@/components/GuipToolTip.vue";
+
+export default {
+    name: 'customizeDoc',
+    components: {GuipToolTip},
+    data() {
+        return {
+            supply_list: []
+        }
+    },
+    mounted() {
+        this.getSupplyList()
+    },
+    methods: {
+        getSupplyList(){
+            this.$http('POST', '/agentnew/ajax_get_supply_list', {}).then(response => {
+                if(response.status){
+                    this.$nextTick(function (){
+                       this.supply_list = response.data
+                    })
+                    return true
+                }
+                this.$message.error(response.data.info)
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
+        copyAll(){
+            let copyText = "";
+            this.supply_list.forEach(function (item){
+                copyText += item.flag + " / " + item.name + "\r\n";
+            })
+
+            this.$copy(copyText, {
+                successMsg: '内容已复制到剪贴板',
+                errorMsg: '复制失败，请按Ctrl+C手动复制',
+                vm: this
+            });
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+.mb20{
+  margin-bottom: 20px;
+}
+.w1000{
+  width: 1000px;
+  margin: 0 auto;
+}
+.agree-info{
+  letter-spacing: 0.08em;
+  .agree-title{
+    font-size: 26px;
+    color: #1E2226;
+  }
+  .agree-date{
+    color: #626573;
+    font-size: 14px;
+  }
+  .agree-section{
+    text-align: left;
+    .ti{
+      color: #1E2226;
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 12px;
+    }
+    .ti-sec{
+      color: #1E2226;
+      font-size: 14px;
+      font-weight: bold;
+      margin-bottom: 12px;
+    }
+    .tx{
+      font-size: 14px;
+      color: #595961;
+      margin-bottom: 20px;
+      div{
+        margin-bottom: 12px;
+        line-height: 26px;
+      }
+    }
+    .flag-area{
+      font-size: 12px;
+      background: #F2F3F5;
+      color: #626573;
+      .flag-ti{
+        padding: 12px 24px;
+        color: #1E2226;
+        .flag-ti-copy{
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 6px;
+          color: #FFFFFF;
+          background: #626573;
+          padding: 6px;
+        }
+      }
+
+      .flag-info{
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        padding: 5px 28px;
+        line-height: 26px;
+        gap: 20px;
+        div{
+          width: calc((100% - 60px) / 4);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file