From 241d2299369df6398e9e2c15c9c0296e852c0eac Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Thu, 11 Sep 2025 14:09:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=BE=AE=E4=BF=A1=E6=94=B6?=
 =?UTF-8?q?=E6=AC=BE=E7=BB=91=E5=AE=9A=E6=96=B9=E5=BC=8F=E3=80=81=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=85=8D=E6=8C=82=E5=8F=B7=E8=B4=B9=E8=A7=84=E5=88=99?=
 =?UTF-8?q?=E5=BC=B9=E5=87=BA=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/site/uploadIcon.svg       |   1 +
 src/assets/site/uploadIcon_light.svg |   1 +
 src/components/addPay.vue            |  30 ++-
 src/router/index.js                  |  12 ++
 src/views/HosInformation.vue         |  91 ++++++++--
 src/views/weChatPayment.vue          | 342 +++++++++++++++++++++++++++++++++++
 6 files changed, 455 insertions(+), 22 deletions(-)
 create mode 100644 src/assets/site/uploadIcon.svg
 create mode 100644 src/assets/site/uploadIcon_light.svg
 create mode 100644 src/views/weChatPayment.vue

diff --git a/src/assets/site/uploadIcon.svg b/src/assets/site/uploadIcon.svg
new file mode 100644
index 0000000..eb1fb8e
--- /dev/null
+++ b/src/assets/site/uploadIcon.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="20" height="16" viewBox="0 0 20 16"><defs><clipPath id="master_svg0_166_43602"><rect x="0" y="0" width="20" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_166_43602)"><g transform="matrix(1,0,0,-1,0,30.6875)"><g><path d="M4.5,15.34375Q2.59375,15.40625,1.3125,16.65625Q0.0625,17.9375,0,19.84375Q0.03125,21.34375,0.84375,22.46875Q1.65625,23.59375,3,24.09375Q3,24.21875,3,24.34375Q3.0625,26.46875,4.46875,27.87495Q5.875,29.28125,8,29.34375Q9.40625,29.31255,10.5312,28.65625Q11.6562,27.96875,12.3438,26.84375Q13.0625,27.34375,14,27.34375Q15.2812,27.31255,16.125,26.46875Q16.9688,25.62495,17,24.34375Q17,23.78125,16.8125,23.25Q18.1875,22.96875,19.0938,21.875Q19.9688,20.8125,20,19.34375Q19.9688,17.65625,18.8438,16.5Q17.6875,15.375,16,15.34375L4.5,15.34375ZM6.96875,22.125Q6.53125,21.59375,6.96875,21.0625Q7.5,20.625,8.03125,21.0625L9.25,22.28125L9.25,18.09375Q9.3125,17.40625,10,17.34375Q10.6875,17.40625,10.75,18.09375L10.75,22.28125L11.9688,21.0625Q12.5,20.625,13.0312,21.0625Q13.4688,21.59375,13.0312,22.125L10.5312,24.625Q10,25.0625,9.46875,24.625L6.96875,22.125Z" fill="#626573" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/site/uploadIcon_light.svg b/src/assets/site/uploadIcon_light.svg
new file mode 100644
index 0000000..bc6c369
--- /dev/null
+++ b/src/assets/site/uploadIcon_light.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="20" height="16" viewBox="0 0 20 16"><defs><clipPath id="master_svg0_401_004793/89_47570"><rect x="0" y="0" width="20" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_401_004793/89_47570)"><g transform="matrix(1,0,0,-1,0,30.6875)"><g><path d="M4.5,15.34375Q2.59375,15.40625,1.3125,16.65625Q0.0625,17.9375,0,19.84375Q0.03125,21.34375,0.84375,22.46875Q1.65625,23.59375,3,24.09375Q3,24.21875,3,24.34375Q3.0625,26.46875,4.46875,27.87495Q5.875,29.28125,8,29.34375Q9.40625,29.31255,10.5312,28.65625Q11.6562,27.96875,12.3438,26.84375Q13.0625,27.34375,14,27.34375Q15.2812,27.31255,16.125,26.46875Q16.9688,25.62495,17,24.34375Q17,23.78125,16.8125,23.25Q18.1875,22.96875,19.0938,21.875Q19.9688,20.8125,20,19.34375Q19.9688,17.65625,18.8438,16.5Q17.6875,15.375,16,15.34375L4.5,15.34375ZM6.96875,22.125Q6.53125,21.59375,6.96875,21.0625Q7.5,20.625,8.03125,21.0625L9.25,22.28125L9.25,18.09375Q9.3125,17.40625,10,17.34375Q10.6875,17.40625,10.75,18.09375L10.75,22.28125L11.9688,21.0625Q12.5,20.625,13.0312,21.0625Q13.4688,21.59375,13.0312,22.125L10.5312,24.625Q10,25.0625,9.46875,24.625L6.96875,22.125Z" fill="#006AFF" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/components/addPay.vue b/src/components/addPay.vue
index fce9bdc..c65c028 100644
--- a/src/components/addPay.vue
+++ b/src/components/addPay.vue
@@ -3,7 +3,7 @@
         <el-form>
             <GuipDialog :dialogVisible="addPayDialogVisible" :title="addPayTitle" :show-close-button="false"
             :show-cancel-button="showCancelButton" @confirm="addPayment" @cancel="handleCancel"
-            @close="handleClose" @dialogVisibleChange="dialogVisibleChange" :confirmText="addPayconfirmText" width="700px">
+            @close="handleClose" @dialogVisibleChange="dialogVisibleChange" :confirmText="addPayconfirmText" width="599px">
             <!-- 自定义内容 -->
                 <div>
                     <!-- 淘宝 -->
@@ -65,11 +65,29 @@
                                     <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="company_short_name" prop="company_short_name" placeholder="6字以内"></GuipInput>
                                 </GuipFormItem>
                                 <GuipFormItem column="column" class="mb24" label="2. 公司支付宝账号">
-                                    <span class="desc" slot="formRight">仅支持已签约 “当面付” 功能的公司支付宝</span>
+                                    <span class="desc flex gap12" slot="formRight">仅支持已签约 “当面付” 功能的公司支付宝 <a href='https://pay.weixin.qq.com/' class="guide"
+                                        target='_blank'><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a></span>
                                     <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="alipay_account" prop="mch_id" placeholder="请输入公司支付宝账号"></GuipInput>
                                 </GuipFormItem>
                             </el-form>
                             <!-- </el-tab-pane> -->
+                            <!-- <el-tab-pane label="我无公司，申请平台代收款" name="1" v-if="isExistSelfSupplys===false">
+                            <div class="beforeNotice">
+                                <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 须知</h4>
+                                <p class="mt12">使用平台“支付宝支付”，平台收取5%的服务费</p>
+                                <p class="mt12 flex">使用平台“支付宝支付”，真实姓名必须和支付宝账号实名认证姓名统一</p>
+                            </div>
+                            <el-form>
+                                <GuipFormItem column="column" class="mb24" label="1. 收款人姓名">
+                                    <span class="desc" slot="formRight">请输入支付宝绑定的银行卡的持卡人姓名</span>
+                                    <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="receive_payment_name" prop="company_short_name" placeholder="6字以内"></GuipInput>
+                                </GuipFormItem>
+                                <GuipFormItem column="column" class="mb24" label="2. 收款支付宝账号">
+                                    <span class="desc" slot="formRight">请输入有效账号</span>
+                                    <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="receive_payment_account" prop="mch_id" placeholder="请输入有效收款支付宝账号"></GuipInput>
+                                </GuipFormItem>
+                            </el-form>
+                            </el-tab-pane> -->
                         </el-tabs>
                     </div>
                     <!-- 拼多多 -->
@@ -424,7 +442,13 @@ export default {
         }
     }
 }
-
+.guide{
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: #8A9099 !important;
+    font-size: 12px;
+}
 a {
     color: #006AFF;
     text-decoration: none;
diff --git a/src/router/index.js b/src/router/index.js
index 8616cef..e6161f5 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -47,6 +47,18 @@ const routes = [
       // hideInBreadcrumb: true // 可选：隐藏当前项
     }
   },
+  {
+    path: '/weChatPayment',
+    name: '微信收款',
+    component: () => import('../views/weChatPayment.vue'),
+    meta: {
+      title: '微信收款',
+      breadcrumbParent: '编辑医院' // 手动指定父级
+// r如果想隐藏中间层级
+      // breadcrumbParent: '首页', // 跳过医生信息
+      // hideInBreadcrumb: true // 可选：隐藏当前项
+    }
+  },
 
   {
     path: '/addNewTreatment',
diff --git a/src/views/HosInformation.vue b/src/views/HosInformation.vue
index d2b9173..9ca4a4d 100644
--- a/src/views/HosInformation.vue
+++ b/src/views/HosInformation.vue
@@ -170,7 +170,6 @@
                             <CustomDropdown slot="formDom" width="100%" :options="wxpayList" ref="wxPayRef"
                                 :options_null="!wxpayList.length" displayKey="name" valueKey="payid"
                                 @change="changeSelectWeixin">
-                                <!-- 选择后显示数据 -->
                                 <template #trigger>
                                     <span v-if="selectWxpay && (selectWxpay.short_name || selectWxpay.account)">{{
                                         selectWxpay.short_name }} {{ selectWxpay.account }}</span>
@@ -186,12 +185,11 @@
                                             <p>需在微信商户平台-产品中心开通Native支付</p>
                                         </div>
                                         <div class="right">
-                                            <GuipButton type="primary" size="medium" @click="goBindPay(payTypeWeixin)">
+                                            <GuipButton type="primary" size="medium" @click="goToWxPay">
                                                 前往绑定</GuipButton>
                                         </div>
                                     </div>
                                 </template>
-                                <!-- 自定义下拉选项 -->
                                 <template #item="{ item }">
                                     <div class="flex-between">
                                         <div class="left">
@@ -462,10 +460,30 @@
             </el-form>
         </div>
 
-        <GuipDialog :dialogVisible="registrationVisible" title="设置挂号费金额" :show-close-button="false" width="599"
-            :show-cancel-button="true" @confirm="handleRegisterConfirm" @cancel="handleregisterCancel" >
-            <GuipInput v-model="registerMoney" type="number"
-            placeholder="请输入" unit="元/人"></GuipInput>
+        <GuipDialog :dialogVisible="registrationVisible" title="设置挂号费金额" :show-close-button="false" width="599px"
+            :show-cancel-button="true" @confirm="handleRegisterConfirm('registerMoney')" @cancel="handleregisterCancel" >
+            <el-form>
+                <GuipInput v-model="registerMoney" type="number"
+                placeholder="请输入" unit="元/人"></GuipInput>
+            </el-form>
+        </GuipDialog>
+        <GuipDialog :dialogVisible="freeRegVisible" title="免挂号费规则" :show-close-button="false" width="599px"
+            :show-cancel-button="true" @confirm="handleRegisterConfirm('freeRegVisible')" @cancel="handleregisterCancel" >
+            <p class="freeDesc">若勾选多个规则，满足其一即免挂号费</p>
+            <el-form class="freeWrap">
+                <div class="flex gap8 mb24 mt24">
+                    <el-checkbox v-model="checked1"></el-checkbox>
+                    患者
+                    <GuipInput v-model="registerDays" type="number" width="92px"
+                    placeholder="请输入"></GuipInput>天内再次就诊，免挂号费
+                </div>
+                <p class="flex gap8">
+                    <el-checkbox v-model="checked2"></el-checkbox>
+                    患者有剩余治疗项目，免挂号费
+                </p>
+            </el-form>
+
+
         </GuipDialog>
         <GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="true" width="762"
             :show-cancel-button="true" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose"
@@ -531,6 +549,8 @@ export default {
     },
     data() {
         return {
+            checked1:false,
+            checked2:false,
             doctorId: '',
             depart_id: false,
             doctor_id: false,
@@ -695,7 +715,10 @@ export default {
             isExistSelfSupplys: false,
             payinfo: [],
             registerMoney:'',//挂号费金额
+            registerDays:5,
+            freeRegVisible:true,
             registrationVisible:false,
+
         }
     },
     created() {
@@ -741,12 +764,14 @@ export default {
         ...mapState(['hosMenuData']) // 从Vuex映射showSidebar状态到组件的计算属性中
     },
     methods: {
-        // registrationVisible
+        goToWxPay(){
+            this.$router.push(`/weChatPayment?`);
+        },
         showDialog(type) {
             if (type == 'register') {
                 this.registrationVisible = true;
             } else if (type == 'registerRule') {
-                this.dialogVisibleApiv3 = true;
+                this.freeRegVisible = true;
             } 
         },
         onLineChange() {
@@ -830,19 +855,40 @@ export default {
         },
         handleregisterCancel(){
             console.log('取消');
+            this.freeRegVisible = false;
+            this.registrationVisible = false;
         },
-        handleRegisterConfirm(){
-            this.$http('POST', '/agentnew/ajax_get_pay_list', {
+        handleRegisterConfirm(type){
+            // freeRegVisible
+            const params = {
                 uid: this.$route.query.uid,
-                registerMoney:this.registerMoney.trim()
-            }).then(response => {
-                this.$nextTick(() => {
-                   console.log(response);
-                   this.registrationVisible = false;
+            }
+            if(type == 'freeRegVisible'){
+                params.registerMoney = this.registerMoney.trim()
+                this.$http('POST', '/agentnew/ajax_get_pay_list', {
+                   ...params
+                }).then(response => {
+                    this.$nextTick(() => {
+                       console.log(response);
+                       this.registrationVisible = false;
+                    })
+                }).catch(error => {
+                    console.error(error, 'error')
                 })
-            }).catch(error => {
-                console.error(error, 'error')
-            })
+            }else{
+                // params.checked1 = 1;
+                // params.checked1 = 1;
+                this.$http('POST', '/agentnew/ajax_get_pay_list', {
+                   ...params
+                }).then(response => {
+                    this.$nextTick(() => {
+                       console.log(response);
+                       this.registrationVisible = false;
+                    })
+                }).catch(error => {
+                    console.error(error, 'error')
+                })
+            }
         },
         handleEvent(data) {
             this.isShowAddPay = data
@@ -1430,6 +1476,13 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.freeWrap{
+    letter-spacing: 0.08em;
+    color: #626573;
+}
+.freeDesc{
+    color: #8A9099;
+}
 .el-form-item {
     margin-bottom: 0;
 }
diff --git a/src/views/weChatPayment.vue b/src/views/weChatPayment.vue
new file mode 100644
index 0000000..0ef1804
--- /dev/null
+++ b/src/views/weChatPayment.vue
@@ -0,0 +1,342 @@
+<template>
+    <div class="site-setting-wrap pagePadding">
+
+        <div class="siteMessage flex-common" id="siteMessage1">
+            <p class="littleTitle mb32">微信收款</p>
+            <div class="weixinpay">
+                <div class="beforeNotice">
+                    <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
+                    <div class="flex-between">
+                        <p class="mt12 flex">1.申请公司微信支付。<a class="guide" href="https://zhic.yuque.com/staff-chwecz/xhk8nt/ggkqm3"
+                                target="_blank"><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a> </p>
+
+                        <span class=" flex">
+                           <a href="https://pay.weixin.qq.com/" class="flex" target="_blank">
+                                <img src="@/assets/site/form_linkActive.svg" alt="">微信商户平台</a>
+                        </span>
+                    </div>
+                    <p class="mt12">2.登录微信商户平台，在产品中心开通Native支付，如需使用微信版，开通JSAPI支付。</p>
+                </div>
+                <el-form>
+                    <div class="flex-wrap">
+                        <div class="flex-left">
+                            <GuipFormItem column="column" class="mb24" label="公司简称" :required="true">
+                                <span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
+                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="company_short_name"
+                                    prop="company_short_name" placeholder="请输入">
+                                </GuipInput>
+                            </GuipFormItem>
+                            <GuipFormItem column="column" class="mb24" label="微信支付商户号" :required="true">
+                                <span class="desc" slot="formRight">
+                                    <a href='https://pay.weixin.qq.com/' class="guide"
+                                        target='_blank'><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a>
+                                    </span>
+                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="mch_id" prop="mch_id"
+                                    placeholder="请输入">
+                                </GuipInput>
+                            </GuipFormItem>
+                        </div>
+                        <div class="flex-line"></div>
+                        <div class="flex-right">
+                            <GuipFormItem column="column" class="mb24" label="微信支付秘钥" :required="true">
+                                <span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' class="guide"
+                                        target='_blank'><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a>
+                                </span>
+                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="apiv2" prop="apiv2"
+                                    placeholder="不能设为纯数字">
+                                </GuipInput>
+                            </GuipFormItem>
+                            <GuipFormItem column="column" class="mb24" label="公众号APPID" :required="true">
+                                <span class="desc" slot="formRight"><a href='https://mp.weixin.qq.com/' class="guide"
+                                        target='_blank'><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a></span>
+                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="appid" prop="appid"
+                                    placeholder="不能设为纯数字">
+                                </GuipInput>
+                            </GuipFormItem>
+                        </div>
+                    </div>
+                </el-form>
+            </div>
+        </div>
+        <div class="siteMessage flex-common mt12" id="siteMessage2">
+            <h3 class="mb12">管理证书</h3>
+            <div class="beforeNotice">
+                <span class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt="" style="margin-right: 5px;">
+                    API证书获取：
+                    <a href="https://pay.weixin.qq.com/" class="flex" target="_blank"><img style="margin-right: 5px;"
+                            src="@/assets/site/form_linkActive.svg" alt="">微信商户平台</a>＞账户中心＞账户设置＞API安全
+                </span>
+            </div>
+            <el-form>
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <div class="uploadwrap">
+                            <label class="flex upload-title gap8">上传 apiclient_cert.pem 证书<img class="ml-4"
+                                    src="@/assets/require.svg" /></label>
+                            <el-upload class="upload-demo" :on-change="handleAvatarChange" action="#" :multiple="false"
+                                :limit="Number(1)" ref="avatorUpload" :auto-upload="false">
+                                <GuipButton class="upload-button" slot="trigger" type="ignore"
+                                    :btnstyle="{ width: '118px' }">
+                                    <i class="bgImg"></i>选择文件
+                                </GuipButton>
+                            </el-upload>
+                            <p class="uploaded" v-if="payinfo.cert_uploaded">已上传</p>
+                            <p class="normalUpload notuploaded" v-else>未上传任何文件</p>
+                        </div>
+                    </div>
+                    <div class="flex-line"></div>
+                    <div class="flex-right">
+                        <div class="uploadwrap">
+                            <label class="flex upload-title gap8">上传 apiclient_key.pem 证书<img class="ml-4"
+                                    src="@/assets/require.svg" /></label>
+                            <el-upload class="upload-demo" :on-change="handleAvatarChange1" action="#" :multiple="false"
+                                :limit="Number(1)" ref="avatorUpload" :auto-upload="false">
+                                <GuipButton class="upload-button" slot="trigger" type="ignore"
+                                    :btnstyle="{ width: '118px' }">
+                                    <i class="bgImg"></i>选择文件
+                                </GuipButton>
+
+                            </el-upload>
+                            <p class="uploaded" v-if="payinfo.key_uploaded">已上传</p>
+                            <p class="normalUpload" v-else>未上传任何文件</p>
+                        </div>
+                    </div>
+                </div>
+            </el-form>
+        </div>
+
+        <div class="save-button">
+            <GuipButton type="primary" ref="saveRef" :btnstyle="saveBtnStyleObj" @click="saveConfirm">保存</GuipButton>
+        </div>
+    </div>
+
+</template>
+
+<script>
+import GuipInput from '@/components/GuipInput.vue';
+import GuipButton from '@/components/GuipButton.vue';
+import GuipFormItem from '@/components/GuipFormItem.vue';
+export default {
+    // 站点设置
+    name: 'addPay',
+    props: {},
+    components: {
+        GuipInput,
+        GuipButton,
+        GuipFormItem,
+    },
+    data() {
+        return {
+            // 公司简称
+            company_short_name: '',
+            // 商户号
+            mch_id: '',
+            // 微信支付秘钥
+            apiv2: '',
+            // 公众号APPID
+            appid: '',
+            payinfo: [],
+            saveBtnStyleObj: {
+                width: '144px',
+                height: '46px',
+                borderRadius: '4px',
+                background: '#006AFF',
+            },
+        }
+    },
+    created() {
+        // 初始化反显
+        // this.getPayment()
+    },
+    methods: {
+        getPayment() {
+            this.$http('POST', '/agentnew/ajax_get_payinfo', {
+                payid: this.$route.query.payid,
+            }).then(response => {
+                this.$nextTick(() => {
+                    this.payinfo = response.data
+                })
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
+        handleAvatarChange(file, fileList) {
+            console.log(file, fileList)
+            let fileObj = file.raw
+            this.formData.set('apiclient_cert', fileObj)
+        },
+        handleAvatarChange1(file, fileList) {
+            console.log(file, fileList)
+            let fileObj = file.raw
+            this.formData.set('apiclient_key', fileObj)
+        },
+        saveConfirm() {
+            // 
+            // this.$positionMessage({
+            //     type: 'error',
+            //     message: '请先上传证书',
+            //     target: this.$refs['saveRef'], // 可以是DOM元素或选择器
+            //     position: 'top'
+            // })
+            //   let obj = {}
+            //   obj.uid = this.serviceInfo.uid
+            //   obj.type = this.serviceInfo.type
+            //   obj.info = ""
+            //   const that = this
+            //   this.$http('POST', '/agentnew/ajax_payment_switch', obj).then(response => {
+            //       if(response.status){
+            //           that.$message.success('保存成功');
+            //           that.payList = response.data.paylist
+            //           that.$emit('saveEvent', that.payList)
+            //           return true;
+            //       }
+            //       that.$message.error(response.info);
+            //   }).catch(error => {
+            //       console.error(error, 'error')
+            //   })
+        },
+    }
+
+}
+</script>
+
+<style scoped lang="scss">
+.guide{
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: #8A9099 !important;
+    font-size: 12px;
+}
+.site-setting-wrap{
+    height: calc(100% - 80px);
+    overflow-y: auto;
+}
+.notuploaded,.uploaded,.normalUpload{
+    margin-top: 8px;
+    font-size: 12px;
+    color: #606266;
+}
+.normalUpload{
+    color:#606266;
+}
+.notuploaded{
+    color: #FD3B3B;
+}
+.save-button {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background: #fff;
+    box-shadow: 0 4px 16px 0 rgba(17, 55, 143, 0.12);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px 0;
+    z-index: 9;
+}
+
+.uploadwrap {
+    text-align: left;
+}
+
+.upload-title {
+    font-size: 14px;
+    font-weight: normal;
+    line-height: normal;
+    letter-spacing: 0.08em;
+    color: #23242B;
+}
+
+.upload-button {
+    border-radius: 4px;
+    background: #F2F3F5;
+    box-sizing: border-box;
+    border: 1px solid #BABDC2;
+
+    .bgImg {
+        width: 20px;
+        height: 16px;
+        margin-right: 6px;
+        background-image: url(@/assets/site/uploadIcon.svg);
+    }
+
+    &:hover {
+        .bgImg {
+            background-image: url(@/assets/site/uploadIcon_light.svg);
+        }
+    }
+}
+
+.upload-demo {
+    margin-top: 12px;
+}
+
+.beforeNotice {
+
+    h4 {
+        margin: 0;
+        gap: 8px;
+    }
+
+    margin-bottom: 18px;
+    text-align: left;
+    box-sizing: border-box;
+    padding: 20px 14px;
+    border-radius: 4px;
+    /* middle/middle_blue_1 */
+    background: #F2F7FF;
+    /* middle/middle_blue_3 */
+    border: 1px solid #BFDAFF;
+
+    div {
+        // margin-top: 2px;
+        // padding-left: 23px;
+
+        p {
+            // color: #8A9099;
+        }
+
+    }
+
+    p {
+        color: #1E2226;
+
+        i {
+            font-style: normal;
+        }
+
+        &:last-child {
+            display: flex;
+            align-items: stretch;
+
+            b {
+                font-weight: normal;
+                color: #8A9099;
+                display: inline-flex;
+
+                img {
+                    margin-left: 4px;
+                }
+            }
+        }
+    }
+
+    a {
+        text-decoration: none;
+        color: #006AFF;
+        margin-right: 10px;
+
+        img {
+            margin-left: 5px;
+            margin-right: 5px;
+        }
+    }
+}
+
+a {
+    color: #006AFF;
+    text-decoration: none;
+}
+</style>
\ No newline at end of file