diff --git a/f/web-kboss/src/views/customer/customerInformation/index.vue b/f/web-kboss/src/views/customer/customerInformation/index.vue
index 23cf4e4..96f09ae 100644
--- a/f/web-kboss/src/views/customer/customerInformation/index.vue
+++ b/f/web-kboss/src/views/customer/customerInformation/index.vue
@@ -1,293 +1,330 @@
 <template>
   <div id="box">
+    <!-- PC端布局 -->
     <div class="pcAgent" v-if="!isMobile">
-      <div class="myInformation top-header">
-        <div class="after-icon"></div>
-        <span class="title-word">个人信息</span>
-        <div class="right-header">
-          <div class="item-style">
-            <span class="price-word">账户余额:</span>
-            <span class="balance-style" @click="$router.push('/customer/rechargeRecord')"> ¥{{ balance }}</span>
+      <!-- 顶部信息栏 -->
+      <div class="top-header">
+        <div class="header-content">
+          <div class="title-section">
+            <div class="after-icon"></div>
+            <span class="title-word">个人信息</span>
           </div>
-          <div class="item-style" v-if="false">
-            <span class="price-word">支付宝充值: </span>
-            <img @click="onffline" src="../../../assets/kyy/编组.svg" style="cursor: pointer" alt="">
-          </div>
-          <div class="item-style" v-if="false">
-            <span class="price-word">对公账户充值: </span>
-            <el-button type="warning" size="mini" @click="getRechargeCode">充值</el-button>
+          <div class="right-header">
+            <div class="balance-item">
+              <span class="price-word">账户余额:</span>
+              <span class="balance-style" @click="$router.push('/customer/rechargeRecord')"> ¥{{ balance }}</span>
+            </div>
+            <div class="recharge-item" v-if="false">
+              <span class="price-word">支付宝充值: </span>
+              <img @click="onffline" src="../../../assets/kyy/编组.svg" class="recharge-icon" alt="">
+            </div>
+            <div class="recharge-item" v-if="false">
+              <span class="price-word">对公账户充值: </span>
+              <el-button type="warning" size="mini" @click="getRechargeCode">充值</el-button>
+            </div>
           </div>
         </div>
       </div>
-      <div class="essentialInformation">
-        <p class="one">基本信息</p>
-        <div class="disp_top">
-          <div>
+
+      <!-- 基本信息区域 -->
+      <div class="info-section essentialInformation">
+        <div class="section-header">
+          <p class="section-title">基本信息</p>
+        </div>
+        <div class="section-content">
+          <div class="user-avatar">
             <div class="userImg">{{ nameText }}</div>
           </div>
-          <div class="disp userID">
-            <div>
-              <p>账号昵称</p>
-              <p>账号ID</p>
-              <p>所属机构</p>
-              <p>销售经理名称</p>
-            </div>
-            <div>
-              <div>
-                <p>{{ form.fullName }}</p>
+          <div class="user-info">
+            <div class="info-group">
+              <div class="info-item">
+                <span class="info-label">账号昵称</span>
+                <span class="info-value">{{ form.fullName }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">账号ID</span>
+                <span class="info-value">{{ userId }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">所属机构</span>
+                <span class="info-value">{{ form.parentname }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">销售经理名称</span>
+                <span class="info-value">{{ form.saleMgrName }}</span>
               </div>
-              <p>{{ userId }}</p>
-              <p>{{ form.parentname }}</p>
-              <p>{{ form.saleMgrName }}</p>
             </div>
-          </div>
-          <div class="disp userStatus">
-            <div>
-              <p>联系电话</p>
-              <p>联系邮箱</p>
-              <p>地址</p>
-            </div>
-            <div>
-              <div>
-                <p>
+            <div class="info-group">
+              <div class="info-item">
+                <span class="info-label">联系电话</span>
+                <div class="info-value editable-field">
                   <span v-if="form_tel">
                     {{ form.tel }}
-                    <i class="el-icon-edit" @click="form_tel = false"></i>
+                    <i class="el-icon-edit edit-icon" @click="form_tel = false"></i>
                   </span>
-                  <span v-else>
-                    <input type="text" v-model="form.tel"/>
-                    <button @click="addZJuser(form.tel)" class="yesBtn">保存</button>
-                    <button @click="form_tel = true" class="cancelBtn">取消</button>
+                  <span v-else class="edit-mode">
+                    <el-input v-model="form.tel" size="small" placeholder="请输入联系电话"></el-input>
+                    <div class="edit-actions">
+                      <el-button type="primary" size="mini" @click="saveField('tel')">保存</el-button>
+                      <el-button size="mini" @click="form_tel = true">取消</el-button>
+                    </div>
                   </span>
-                </p>
+                </div>
               </div>
-              <div>
-                <p>
+              <div class="info-item">
+                <span class="info-label">联系邮箱</span>
+                <div class="info-value editable-field">
                   <span v-if="form_email">
                     {{ form.email }}
-                    <i class="el-icon-edit" @click="form_email = false"></i>
+                    <i class="el-icon-edit edit-icon" @click="form_email = false"></i>
                   </span>
-                  <span v-else>
-                    <input type="text" v-model="form.email"/>
-                    <button @click="addZJuser(form.email)" class="yesBtn">保存</button>
-                    <button @click="form_email = true" class="cancelBtn">取消</button>
+                  <span v-else class="edit-mode">
+                    <el-input v-model="form.email" size="small" placeholder="请输入联系邮箱"></el-input>
+                    <div class="edit-actions">
+                      <el-button type="primary" size="mini" @click="saveField('email')">保存</el-button>
+                      <el-button size="mini" @click="form_email = true">取消</el-button>
+                    </div>
                   </span>
-                </p>
+                </div>
               </div>
-              <div>
-                <p>
+              <div class="info-item">
+                <span class="info-label">地址</span>
+                <div class="info-value editable-field">
                   <span v-if="form_address">
                     {{ form.address }}
-                    <i class="el-icon-edit" @click="form_address = false"></i>
+                    <i class="el-icon-edit edit-icon" @click="form_address = false"></i>
                   </span>
-                  <span v-else>
-                    <input type="text" v-model="form.address"/>
-                    <button @click="addZJuser(form.address)" class="yesBtn">保存</button>
-                    <button @click="form_address = true" class="cancelBtn">取消</button>
+                  <span v-else class="edit-mode">
+                    <el-input v-model="form.address" size="small" placeholder="请输入地址"></el-input>
+                    <div class="edit-actions">
+                      <el-button type="primary" size="mini" @click="saveField('address')">保存</el-button>
+                      <el-button size="mini" @click="form_address = true">取消</el-button>
+                    </div>
                   </span>
-                </p>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="kong"></div>
-      <div class="particular">
-        <p>详细信息</p>
-        <p>用户业务信息和个人信息配置</p>
-        <div>
-          <div style="margin-right: 100px">
-            <p>财务信息</p>
-            <div class="particular_disp">
-              <div>
-                <p>开户行</p>
-                <p>银行账号</p>
-                <p>发票抬头</p>
-                <p>发票地址</p>
-                <p>发票联系电话</p>
-                <p>纳税人识别号</p>
-                <p>统一社会信用代码</p>
+
+      <!-- 详细信息区域 -->
+      <div class="info-section particular">
+        <div class="section-header">
+          <p class="section-title">详细信息</p>
+          <p class="section-subtitle">用户业务信息和个人信息配置</p>
+        </div>
+        <div class="section-content">
+          <div class="info-column">
+            <div class="column-title">财务信息</div>
+            <div class="info-group">
+              <div class="info-item">
+                <span class="info-label">开户行</span>
+                <div class="info-value editable-field">
+                  <span v-if="form_bankName">
+                    {{ form.bankName }}
+                    <i class="el-icon-edit edit-icon" @click="form_bankName = false"></i>
+                  </span>
+                  <span v-else class="edit-mode">
+                    <el-input v-model="form.bankName" size="small" placeholder="请输入开户行"></el-input>
+                    <div class="edit-actions">
+                      <el-button type="primary" size="mini" @click="saveField('bankName')">保存</el-button>
+                      <el-button size="mini" @click="form_bankName = true">取消</el-button>
+                    </div>
+                  </span>
+                </div>
               </div>
-              <div>
-                <div>
-                  <p>
-                    <span v-if="form_bankName">
-                      {{ form.bankName }}
-                      <i class="el-icon-edit" @click="form_bankName = false"></i>
-                    </span>
-                    <span v-else>
-                      <input type="text" v-model="form.bankName"/>
-                      <button @click="addZJuser(form.bankName)" class="yesBtn">保存</button>
-                      <button @click="form_bankName = true" class="cancelBtn">取消</button>
-                    </span>
-                  </p>
+              <div class="info-item">
+                <span class="info-label">银行账号</span>
+                <div class="info-value editable-field">
+                  <span v-if="form_bankAcc">
+                    {{ form.bankAcc }}
+                    <i class="el-icon-edit edit-icon" @click="form_bankAcc = false"></i>
+                  </span>
+                  <span v-else class="edit-mode">
+                    <el-input v-model="form.bankAcc" size="small" placeholder="请输入银行账号"></el-input>
+                    <div class="edit-actions">
+                      <el-button type="primary" size="mini" @click="saveField('bankAcc')">保存</el-button>
+                      <el-button size="mini" @click="form_bankAcc = true">取消</el-button>
+                    </div>
+                  </span>
                 </div>
-                <div>
-                  <p>
-                    <span v-if="form_bankAcc">
-                      {{ form.bankAcc }}
-                      <i class="el-icon-edit" @click="form_bankAcc = false"></i>
-                    </span>
-                    <span v-else>
-                      <input type="text" v-model="form.bankAcc"/>
-                      <button @click="addZJuser(form.bankAcc)" class="yesBtn">保存</button>
-                      <button @click="form_bankAcc = true" class="cancelBtn">取消</button>
-                    </span>
-                  </p>
+              </div>
+              <div class="info-item">
+                <span class="info-label">发票抬头</span>
+                <div class="info-value editable-field">
+                  <span v-if="form_identityName">
+                    {{ form.identityName }}
+                    <i class="el-icon-edit edit-icon" @click="form_identityName = false"></i>
+                  </span>
+                  <span v-else class="edit-mode">
+                    <el-input v-model="form.identityName" size="small" placeholder="请输入发票抬头"></el-input>
+                    <div class="edit-actions">
+                      <el-button type="primary" size="mini" @click="saveField('identityName')">保存</el-button>
+                      <el-button size="mini" @click="form_identityName = true">取消</el-button>
+                    </div>
+                  </span>
                 </div>
-                <div>
-                  <p>
-                    <span v-if="form_identityName">
-                      {{ form.identityName }}
-                      <i class="el-icon-edit" @click="form_identityName = false"></i>
-                    </span>
-                    <span v-else>
-                      <input type="text" v-model="form.identityName"/>
-                      <button @click="addZJuser(form.identityName)" class="yesBtn">保存</button>
-                      <button @click="form_identityName = true" class="cancelBtn">取消</button>
-                    </span>
-                  </p>
+              </div>
+              <div class="info-item">
+                <span class="info-label">发票地址</span>
+                <div class="info-value editable-field">
+                  <span v-if="form_taxAddress">
+                    {{ form.taxAddress }}
+                    <i class="el-icon-edit edit-icon" @click="form_taxAddress = false"></i>
+                  </span>
+                  <span v-else class="edit-mode">
+                    <el-input v-model="form.taxAddress" size="small" placeholder="请输入发票地址"></el-input>
+                    <div class="edit-actions">
+                      <el-button type="primary" size="mini" @click="saveField('taxAddress')">保存</el-button>
+                      <el-button size="mini" @click="form_taxAddress = true">取消</el-button>
+                    </div>
+                  </span>
                 </div>
-                <div>
-                  <p>
-                    <span v-if="form_taxAddress">
-                      {{ form.taxAddress }}
-                      <i class="el-icon-edit" @click="form_taxAddress = false"></i>
-                    </span>
-                    <span v-else>
-                      <input type="text" v-model="form.taxAddress"/>
-                      <button @click="addZJuser(form.taxAddress)" class="yesBtn">保存</button>
-                      <button @click="form_taxAddress = true" class="cancelBtn">取消</button>
-                    </span>
-                  </p>
+              </div>
+              <div class="info-item">
+                <span class="info-label">发票联系电话</span>
+                <div class="info-value editable-field">
+                  <span v-if="form_taxTel">
+                    {{ form.taxTel }}
+                    <i class="el-icon-edit edit-icon" @click="form_taxTel = false"></i>
+                  </span>
+                  <span v-else class="edit-mode">
+                    <el-input v-model="form.taxTel" size="small" placeholder="请输入发票联系电话"></el-input>
+                    <div class="edit-actions">
+                      <el-button type="primary" size="mini" @click="saveField('taxTel')">保存</el-button>
+                      <el-button size="mini" @click="form_taxTel = true">取消</el-button>
+                    </div>
+                  </span>
                 </div>
-                <div>
-                  <p>
-                    <span v-if="form_taxTel">
-                      {{ form.taxTel }}
-                      <i class="el-icon-edit" @click="form_taxTel = false"></i>
-                    </span>
-                    <span v-else>
-                      <input type="text" v-model="form.taxTel"/>
-                      <button @click="addZJuser(form.taxTel)" class="yesBtn">保存</button>
-                      <button @click="form_taxTel = true" class="cancelBtn">取消</button>
-                    </span>
-                  </p>
+              </div>
+              <div class="info-item">
+                <span class="info-label">纳税人识别号</span>
+                <div class="info-value editable-field">
+                  <span v-if="form_taxpayerIdentity">
+                    {{ form.taxpayerIdentity }}
+                    <i class="el-icon-edit edit-icon" @click="form_taxpayerIdentity = false"></i>
+                  </span>
+                  <span v-else class="edit-mode">
+                    <el-input v-model="form.taxpayerIdentity" size="small" placeholder="请输入纳税人识别号"></el-input>
+                    <div class="edit-actions">
+                      <el-button type="primary" size="mini" @click="saveField('taxpayerIdentity')">保存</el-button>
+                      <el-button size="mini" @click="form_taxpayerIdentity = true">取消</el-button>
+                    </div>
+                  </span>
                 </div>
-                <div>
-                  <p>
-                    <span v-if="form_taxpayerIdentity">
-                      {{ form.taxpayerIdentity }}
-                      <i class="el-icon-edit" @click="form_taxpayerIdentity = false"></i>
-                    </span>
-                    <span v-else>
-                      <input type="text" v-model="form.taxpayerIdentity"/>
-                      <button @click="addZJuser(form.taxpayerIdentity)" class="yesBtn">保存</button>
-                      <button @click="form_taxpayerIdentity = true" class="cancelBtn">取消</button>
-                    </span>
-                  </p>
-                </div>
-                <div>
-                  <p>
-                    <span v-if="form_orgcode">
-                      {{ form.orgcode }}
-                      <i class="el-icon-edit" @click="form_orgcode = false"></i>
-                    </span>
-                    <span v-else>
-                      <input type="text" v-model="form.orgcode"/>
-                      <button @click="addZJuser(form.orgcode)" class="yesBtn">保存</button>
-                      <button @click="form_orgcode = true" class="cancelBtn">取消</button>
-                    </span>
-                  </p>
+              </div>
+              <div class="info-item">
+                <span class="info-label">统一社会信用代码</span>
+                <div class="info-value editable-field">
+                  <span v-if="form_orgcode">
+                    {{ form.orgcode }}
+                    <i class="el-icon-edit edit-icon" @click="form_orgcode = false"></i>
+                  </span>
+                  <span v-else class="edit-mode">
+                    <el-input v-model="form.orgcode" size="small" placeholder="请输入统一社会信用代码"></el-input>
+                    <div class="edit-actions">
+                      <el-button type="primary" size="mini" @click="saveField('orgcode')">保存</el-button>
+                      <el-button size="mini" @click="form_orgcode = true">取消</el-button>
+                    </div>
+                  </span>
                 </div>
               </div>
             </div>
           </div>
-          <div>
-            <el-button @click="showTX = !showTX" type="primary" size="small" v-if="false">腾讯相关业务信息</el-button>
-            <div v-if="showTX">
-              <p>
-                腾讯客户信息<span class="hint">提示!:有腾讯相关业务时填写</span>
-              </p>
-              <div class="particular_disp">
-                <div>
-                  <p>ak</p>
-                  <p>sk</p>
-                  <p>腾讯id</p>
-                  <p>腾讯appId</p>
-                  <p>备注</p>
-                  <p>渠道商Id</p>
+
+          <div class="info-column" v-if="false">
+            <el-button @click="showTX = !showTX" type="primary" size="small">腾讯相关业务信息</el-button>
+            <div v-if="showTX" class="tencent-info">
+              <div class="column-title">
+                腾讯客户信息
+                <span class="hint">提示!:有腾讯相关业务时填写</span>
+              </div>
+              <div class="info-group">
+                <div class="info-item">
+                  <span class="info-label">ak</span>
+                  <div class="info-value editable-field">
+                    <span v-if="form_ak">
+                      {{ form.ak }}
+                      <i class="el-icon-edit edit-icon" @click="form_ak = false"></i>
+                    </span>
+                    <span v-else class="edit-mode">
+                      <el-input v-model="form.ak" size="small" placeholder="请输入ak"></el-input>
+                      <div class="edit-actions">
+                        <el-button type="primary" size="mini" @click="saveField('ak')">保存</el-button>
+                        <el-button size="mini" @click="form_ak = true">取消</el-button>
+                      </div>
+                    </span>
+                  </div>
                 </div>
-                <div>
-                  <div>
-                    <p>
-                      <span v-if="form_ak">
-                        {{ form.ak }}
-                        <i class="el-icon-edit" @click="form_ak = false"></i>
-                      </span>
-                      <span v-else>
-                        <input type="text" v-model="form.ak"/>
-                        <button @click="addZJuser(form.ak)" class="yesBtn">保存</button>
-                        <button @click="form_ak = true" class="cancelBtn">取消</button>
-                      </span>
-                    </p>
+                <div class="info-item">
+                  <span class="info-label">sk</span>
+                  <div class="info-value editable-field">
+                    <span v-if="form_sk">
+                      {{ form.sk }}
+                      <i class="el-icon-edit edit-icon" @click="form_sk = false"></i>
+                    </span>
+                    <span v-else class="edit-mode">
+                      <el-input v-model="form.sk" size="small" placeholder="请输入sk"></el-input>
+                      <div class="edit-actions">
+                        <el-button type="primary" size="mini" @click="saveField('sk')">保存</el-button>
+                        <el-button size="mini" @click="form_sk = true">取消</el-button>
+                      </div>
+                    </span>
                   </div>
-                  <div>
-                    <p>
-                      <span v-if="form_sk">
-                        {{ form.sk }}
-                        <i class="el-icon-edit" @click="form_sk = false"></i>
-                      </span>
-                      <span v-else>
-                        <input type="text" v-model="form.sk"/>
-                        <button @click="addZJuser(form.sk)" class="yesBtn">保存</button>
-                        <button @click="form_sk = true" class="cancelBtn">取消</button>
-                      </span>
-                    </p>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">腾讯id</span>
+                  <div class="info-value editable-field">
+                    <span v-if="form_thirdId">
+                      {{ form.thirdId }}
+                      <i class="el-icon-edit edit-icon" @click="form_thirdId = false"></i>
+                    </span>
+                    <span v-else class="edit-mode">
+                      <el-input v-model="form.thirdId" size="small" placeholder="请输入腾讯id"></el-input>
+                      <div class="edit-actions">
+                        <el-button type="primary" size="mini" @click="saveField('thirdId')">保存</el-button>
+                        <el-button size="mini" @click="form_thirdId = true">取消</el-button>
+                      </div>
+                    </span>
                   </div>
-                  <div>
-                    <p>
-                      <span v-if="form_thirdId">
-                        {{ form.thirdId }}
-                        <i class="el-icon-edit" @click="form_thirdId = false"></i>
-                      </span>
-                      <span v-else>
-                        <input type="text" v-model="form.thirdId"/>
-                        <button @click="addZJuser(form.thirdId)" class="yesBtn">保存</button>
-                        <button @click="form_thirdId = true" class="cancelBtn">取消</button>
-                      </span>
-                    </p>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">腾讯appId</span>
+                  <div class="info-value editable-field">
+                    <span v-if="form_appId">
+                      {{ form.appId }}
+                      <i class="el-icon-edit edit-icon" @click="form_appId = false"></i>
+                    </span>
+                    <span v-else class="edit-mode">
+                      <el-input v-model="form.appId" size="small" placeholder="请输入腾讯appId"></el-input>
+                      <div class="edit-actions">
+                        <el-button type="primary" size="mini" @click="saveField('appId')">保存</el-button>
+                        <el-button size="mini" @click="form_appId = true">取消</el-button>
+                      </div>
+                    </span>
                   </div>
-                  <div>
-                    <p>
-                      <span v-if="form_appId">
-                        {{ form.appId }}
-                        <i class="el-icon-edit" @click="form_appId = false"></i>
-                      </span>
-                      <span v-else>
-                        <input type="text" v-model="form.appId"/>
-                        <button @click="addZJuser(form.appId)" class="yesBtn">保存</button>
-                        <button @click="form_appId = true" class="cancelBtn">取消</button>
-                      </span>
-                    </p>
-                  </div>
-                  <div>
-                    <p>
-                      <span v-if="form_remark">
-                        {{ form.remark }}
-                        <i class="el-icon-edit" @click="form_remark = false"></i>
-                      </span>
-                      <span v-else>
-                        <input type="text" v-model="form.remark"/>
-                        <button @click="addZJuser(form.remark)" class="yesBtn">保存</button>
-                        <button @click="form_remark = true" class="cancelBtn">取消</button>
-                      </span>
-                    </p>
-                  </div>
-                  <div>
-                    <p>{{ "渠道商id" }}</p>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">备注</span>
+                  <div class="info-value editable-field">
+                    <span v-if="form_remark">
+                      {{ form.remark }}
+                      <i class="el-icon-edit edit-icon" @click="form_remark = false"></i>
+                    </span>
+                    <span v-else class="edit-mode">
+                      <el-input v-model="form.remark" size="small" placeholder="请输入备注"></el-input>
+                      <div class="edit-actions">
+                        <el-button type="primary" size="mini" @click="saveField('remark')">保存</el-button>
+                        <el-button size="mini" @click="form_remark = true">取消</el-button>
+                      </div>
+                    </span>
                   </div>
                 </div>
+                <div class="info-item">
+                  <span class="info-label">渠道商Id</span>
+                  <div class="info-value">{{ "渠道商id" }}</div>
+                </div>
               </div>
             </div>
           </div>
@@ -295,245 +332,303 @@
       </div>
     </div>
 
+    <!-- 移动端布局 -->
     <div class="mobileAgent" v-else>
-      <el-row class="title" type="flex" justify="center" align="middle">余额信息</el-row>
-      <div class="user_account">
-        <el-row :gutter="20">
-          <el-col class="item_info" :span="12">
-            <span class="key">账户余额: </span>
-            <span class="val" @click="$router.push('/customer/rechargeRecord')">¥{{ balance }}</span>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20" v-if="false">
-          <el-col class="item_info" :span="12">
-            <span class="key">支付宝充值: </span>
-            <span class="val">
+      <!-- 余额信息 -->
+      <div class="mobile-section">
+        <div class="section-title">余额信息</div>
+        <div class="section-content">
+          <div class="mobile-item">
+            <span class="item-label">账户余额: </span>
+            <span class="item-value balance-value" @click="$router.push('/customer/rechargeRecord')">¥{{ balance }}</span>
+          </div>
+          <div class="mobile-item" v-if="false">
+            <span class="item-label">支付宝充值: </span>
+            <span class="item-value">
               <el-button type="success" size="mini" @click="onffline">充值</el-button>
             </span>
-          </el-col>
-          <el-col class="item_info" :span="12">
-            <span class="key">对公账户充值: </span>
-            <span class="val">
+          </div>
+          <div class="mobile-item" v-if="false">
+            <span class="item-label">对公账户充值: </span>
+            <span class="item-value">
               <el-button type="warning" size="mini" @click="getRechargeCode">充值</el-button>
             </span>
-          </el-col>
-        </el-row>
+          </div>
+        </div>
       </div>
-      <el-row class="title" type="flex" justify="center" align="middle">个人信息</el-row>
-      <div class="user_info">
-        <el-row :gutter="20">
-          <el-col class="item_info" :span="12">
-            <span class="key">账号昵称: </span>
-            <span class="val">{{ form.fullName }}</span>
-          </el-col>
-          <el-col class="item_info" :span="12">
-            <span class="key">所属机构: </span>
-            <span class="val">{{ form.parentname }}</span>
-          </el-col>
-          <el-col class="item_info" :span="12">
-            <span class="key">销售经理名称: </span>
-            <span class="val">{{ form.saleMgrName }}</span>
-          </el-col>
-          <el-col class="item_info" :span="24">
-            <span class="key">账号ID: </span>
-            <span class="val">{{ userId }}</span>
-          </el-col>
-          <el-col class="item_info" :span="24">
-            <span class="key">联系电话: </span>
-            <span v-if="form_tel">
-              {{ form.tel }}
-              <i class="el-icon-edit" @click="form_tel = false"></i>
-            </span>
-            <span v-else>
-              <input type="text" v-model="form.tel"/>
-              <button @click="addZJuser(form.tel)" class="yesBtn">保存</button>
-              <button @click="form_tel = true" class="cancelBtn">取消</button>
-            </span>
-          </el-col>
-          <el-col class="item_info" :span="24">
-            <span class="key">联系邮箱: </span>
-            <span v-if="form_email">
-              {{ form.email }}
-              <i class="el-icon-edit" @click="form_email = false"></i>
-            </span>
-            <span v-else>
-              <input type="text" v-model="form.email"/>
-              <button @click="addZJuser(form.email)" class="yesBtn">保存</button>
-              <button @click="form_email = true" class="cancelBtn">取消</button>
-            </span>
-          </el-col>
-          <el-col class="item_info" :span="24">
-            <span class="key">地址: </span>
-            <span v-if="form_address">
-              {{ form.address }}
-              <i class="el-icon-edit" @click="form_address = false"></i>
-            </span>
-            <span v-else>
-              <input type="text" v-model="form.address"/>
-              <button @click="addZJuser(form.address)" class="yesBtn">保存</button>
-              <button @click="form_address = true" class="cancelBtn">取消</button>
-            </span>
-          </el-col>
-        </el-row>
-        <el-row class="title" type="flex" justify="center" align="middle">财务信息</el-row>
-        <el-row class="info" type="flex" justify="center" align="middle">用户业务信息和个人信息配置</el-row>
-        <el-row class="title" type="flex" justify="center" align="middle" v-if="false">
+
+      <!-- 个人信息 -->
+      <div class="mobile-section">
+        <div class="section-title">个人信息</div>
+        <div class="section-content">
+          <div class="mobile-item">
+            <span class="item-label">账号昵称: </span>
+            <span class="item-value">{{ form.fullName }}</span>
+          </div>
+          <div class="mobile-item">
+            <span class="item-label">所属机构: </span>
+            <span class="item-value">{{ form.parentname }}</span>
+          </div>
+          <div class="mobile-item">
+            <span class="item-label">销售经理名称: </span>
+            <span class="item-value">{{ form.saleMgrName }}</span>
+          </div>
+          <div class="mobile-item">
+            <span class="item-label">账号ID: </span>
+            <span class="item-value">{{ userId }}</span>
+          </div>
+          <div class="mobile-item editable">
+            <span class="item-label">联系电话: </span>
+            <div class="item-value">
+              <span v-if="form_tel">
+                {{ form.tel }}
+                <i class="el-icon-edit edit-icon" @click="form_tel = false"></i>
+              </span>
+              <span v-else class="edit-mode">
+                <el-input v-model="form.tel" size="small" placeholder="请输入联系电话"></el-input>
+                <div class="edit-actions">
+                  <el-button type="primary" size="mini" @click="saveField('tel')">保存</el-button>
+                  <el-button size="mini" @click="form_tel = true">取消</el-button>
+                </div>
+              </span>
+            </div>
+          </div>
+          <div class="mobile-item editable">
+            <span class="item-label">联系邮箱: </span>
+            <div class="item-value">
+              <span v-if="form_email">
+                {{ form.email }}
+                <i class="el-icon-edit edit-icon" @click="form_email = false"></i>
+              </span>
+              <span v-else class="edit-mode">
+                <el-input v-model="form.email" size="small" placeholder="请输入联系邮箱"></el-input>
+                <div class="edit-actions">
+                  <el-button type="primary" size="mini" @click="saveField('email')">保存</el-button>
+                  <el-button size="mini" @click="form_email = true">取消</el-button>
+                </div>
+              </span>
+            </div>
+          </div>
+          <div class="mobile-item editable">
+            <span class="item-label">地址: </span>
+            <div class="item-value">
+              <span v-if="form_address">
+                {{ form.address }}
+                <i class="el-icon-edit edit-icon" @click="form_address = false"></i>
+              </span>
+              <span v-else class="edit-mode">
+                <el-input v-model="form.address" size="small" placeholder="请输入地址"></el-input>
+                <div class="edit-actions">
+                  <el-button type="primary" size="mini" @click="saveField('address')">保存</el-button>
+                  <el-button size="mini" @click="form_address = true">取消</el-button>
+                </div>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 财务信息 -->
+      <div class="mobile-section">
+        <div class="section-title">财务信息</div>
+        <div class="section-subtitle">用户业务信息和个人信息配置</div>
+        <div class="section-content">
+          <div class="mobile-item editable">
+            <span class="item-label">开户行: </span>
+            <div class="item-value">
+              <span v-if="form_bankName">
+                {{ form.bankName }}
+                <i class="el-icon-edit edit-icon" @click="form_bankName = false"></i>
+              </span>
+              <span v-else class="edit-mode">
+                <el-input v-model="form.bankName" size="small" placeholder="请输入开户行"></el-input>
+                <div class="edit-actions">
+                  <el-button type="primary" size="mini" @click="saveField('bankName')">保存</el-button>
+                  <el-button size="mini" @click="form_bankName = true">取消</el-button>
+                </div>
+              </span>
+            </div>
+          </div>
+          <div class="mobile-item editable">
+            <span class="item-label">银行账号: </span>
+            <div class="item-value">
+              <span v-if="form_bankAcc">
+                {{ form.bankAcc }}
+                <i class="el-icon-edit edit-icon" @click="form_bankAcc = false"></i>
+              </span>
+              <span v-else class="edit-mode">
+                <el-input v-model="form.bankAcc" size="small" placeholder="请输入银行账号"></el-input>
+                <div class="edit-actions">
+                  <el-button type="primary" size="mini" @click="saveField('bankAcc')">保存</el-button>
+                  <el-button size="mini" @click="form_bankAcc = true">取消</el-button>
+                </div>
+              </span>
+            </div>
+          </div>
+          <div class="mobile-item editable">
+            <span class="item-label">发票抬头: </span>
+            <div class="item-value">
+              <span v-if="form_identityName">
+                {{ form.identityName }}
+                <i class="el-icon-edit edit-icon" @click="form_identityName = false"></i>
+              </span>
+              <span v-else class="edit-mode">
+                <el-input v-model="form.identityName" size="small" placeholder="请输入发票抬头"></el-input>
+                <div class="edit-actions">
+                  <el-button type="primary" size="mini" @click="saveField('identityName')">保存</el-button>
+                  <el-button size="mini" @click="form_identityName = true">取消</el-button>
+                </div>
+              </span>
+            </div>
+          </div>
+          <div class="mobile-item editable">
+            <span class="item-label">发票联系电话: </span>
+            <div class="item-value">
+              <span v-if="form_taxAddress">
+                {{ form.taxAddress }}
+                <i class="el-icon-edit edit-icon" @click="form_taxAddress = false"></i>
+              </span>
+              <span v-else class="edit-mode">
+                <el-input v-model="form.taxAddress" size="small" placeholder="请输入发票联系电话"></el-input>
+                <div class="edit-actions">
+                  <el-button type="primary" size="mini" @click="saveField('taxAddress')">保存</el-button>
+                  <el-button size="mini" @click="form_taxAddress = true">取消</el-button>
+                </div>
+              </span>
+            </div>
+          </div>
+          <div class="mobile-item editable">
+            <span class="item-label">纳税人识别号: </span>
+            <div class="item-value">
+              <span v-if="form_taxTel">
+                {{ form.taxTel }}
+                <i class="el-icon-edit edit-icon" @click="form_taxTel = false"></i>
+              </span>
+              <span v-else class="edit-mode">
+                <el-input v-model="form.taxTel" size="small" placeholder="请输入纳税人识别号"></el-input>
+                <div class="edit-actions">
+                  <el-button type="primary" size="mini" @click="saveField('taxTel')">保存</el-button>
+                  <el-button size="mini" @click="form_taxTel = true">取消</el-button>
+                </div>
+              </span>
+            </div>
+          </div>
+          <div class="mobile-item editable">
+            <span class="item-label">统一社会信用代码: </span>
+            <div class="item-value">
+              <span v-if="form_taxpayerIdentity">
+                {{ form.taxpayerIdentity }}
+                <i class="el-icon-edit edit-icon" @click="form_taxpayerIdentity = false"></i>
+              </span>
+              <span v-else class="edit-mode">
+                <el-input v-model="form.taxpayerIdentity" size="small" placeholder="请输入统一社会信用代码"></el-input>
+                <div class="edit-actions">
+                  <el-button type="primary" size="mini" @click="saveField('taxpayerIdentity')">保存</el-button>
+                  <el-button size="mini" @click="form_taxpayerIdentity = true">取消</el-button>
+                </div>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 腾讯业务信息 -->
+      <div class="mobile-section" v-if="false">
+        <div class="section-title">
           <el-button @click="showTX = !showTX" type="primary" size="small">腾讯相关业务信息</el-button>
-        </el-row>
-      </div>
-      <div class="tenct" v-if="showTX">
-        <el-row>
-          <p>
-            腾讯客户信息<span class="hint">提示!:有腾讯相关业务时填写</span>
-          </p>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col class="item_info" :span="24">
-            <span class="key">ak: </span>
-            <span v-if="form_ak">
-              {{ form.ak }}
-              <i class="el-icon-edit" @click="form_ak = false"></i>
-            </span>
-            <span v-else>
-              <input type="text" v-model="form.ak"/>
-              <button @click="addZJuser(form.ak)" class="yesBtn">保存</button>
-              <button @click="form_ak = true" class="cancelBtn">取消</button>
-            </span>
-          </el-col>
-          <el-col class="item_info" :span="24">
-            <span class="key">sk: </span>
-            <span v-if="form_sk">
-              {{ form.sk }}
-              <i class="el-icon-edit" @click="form_sk = false"></i>
-            </span>
-            <span v-else>
-              <input type="text" v-model="form.sk"/>
-              <button @click="addZJuser(form.sk)" class="yesBtn">保存</button>
-              <button @click="form_sk = true" class="cancelBtn">取消</button>
-            </span>
-          </el-col>
-          <el-col class="item_info" :span="24">
-            <span class="key">腾讯id: </span>
-            <span v-if="form_thirdId">
-              {{ form.thirdId }}
-              <i class="el-icon-edit" @click="form_thirdId = false"></i>
-            </span>
-            <span v-else>
-              <input type="text" v-model="form.thirdId"/>
-              <button @click="addZJuser(form.thirdId)" class="yesBtn">保存</button>
-              <button @click="form_thirdId = true" class="cancelBtn">取消</button>
-            </span>
-          </el-col>
-          <el-col class="item_info" :span="24">
-            <span class="key">腾讯appId: </span>
-            <span v-if="form_appId">
-              {{ form.appId }}
-              <i class="el-icon-edit" @click="form_appId = false"></i>
-            </span>
-            <span v-else>
-              <input type="text" v-model="form.appId"/>
-              <button @click="addZJuser(form.appId)" class="yesBtn">保存</button>
-              <button @click="form_appId = true" class="cancelBtn">取消</button>
-            </span>
-          </el-col>
-          <el-col class="item_info" :span="24">
-            <span class="key">备注: </span>
-            <span v-if="form_remark">
-              {{ form.remark }}
-              <i class="el-icon-edit" @click="form_remark = false"></i>
-            </span>
-            <span v-else>
-              <input type="text" v-model="form.remark"/>
-              <button @click="addZJuser(form.remark)" class="yesBtn">保存</button>
-              <button @click="form_remark = true" class="cancelBtn">取消</button>
-            </span>
-          </el-col>
-          <el-col class="item_info" :span="24">
-            <span class="key">{{ "渠道商id" }}</span>
-          </el-col>
-        </el-row>
-      </div>
-      <div class="detailedInformation">
-        <el-row :gutter="20">
-          <el-col class="item_info" :span="24">
-            <span class="key">开户行: </span>
-            <span v-if="form_bankName">
-              {{ form.bankName }}
-              <i class="el-icon-edit" @click="form_bankName = false"></i>
-            </span>
-            <span v-else>
-              <input type="text" v-model="form.bankName"/>
-              <button @click="addZJuser(form.bankName)" class="yesBtn">保存</button>
-              <button @click="form_bankName = true" class="cancelBtn">取消</button>
-            </span>
-          </el-col>
-          <el-col class="item_info" :span="24">
-            <span class="key">银行账号: </span>
-            <span v-if="form_bankAcc">
-              {{ form.bankAcc }}
-              <i class="el-icon-edit" @click="form_bankAcc = false"></i>
-            </span>
-            <span v-else>
-              <input type="text" v-model="form.bankAcc"/>
-              <button @click="addZJuser(form.bankAcc)" class="yesBtn">保存</button>
-              <button @click="form_bankAcc = true" class="cancelBtn">取消</button>
-            </span>
-          </el-col>
-          <el-col class="item_info" :span="24">
-            <span class="key">发票抬头: </span>
-            <span v-if="form_identityName">
-              {{ form.identityName }}
-              <i class="el-icon-edit" @click="form_identityName = false"></i>
-            </span>
-            <span v-else>
-              <input type="text" v-model="form.identityName"/>
-              <button @click="addZJuser(form.identityName)" class="yesBtn">保存</button>
-              <button @click="form_identityName = true" class="cancelBtn">取消</button>
-            </span>
-          </el-col>
-          <el-col class="item_info" :span="24">
-            <span class="key">发票联系电话: </span>
-            <span v-if="form_taxAddress">
-              {{ form.taxAddress }}
-              <i class="el-icon-edit" @click="form_taxAddress = false"></i>
-            </span>
-            <span v-else>
-              <input type="text" v-model="form.taxAddress"/>
-              <button @click="addZJuser(form.taxAddress)" class="yesBtn">保存</button>
-              <button @click="form_taxAddress = true" class="cancelBtn">取消</button>
-            </span>
-          </el-col>
-          <el-col class="item_info" :span="24">
-            <span class="key">纳税人识别号: </span>
-            <span v-if="form_taxTel">
-              {{ form.taxTel }}
-              <i class="el-icon-edit" @click="form_taxTel = false"></i>
-            </span>
-            <span v-else>
-              <input type="text" v-model="form.taxTel"/>
-              <button @click="addZJuser(form.taxTel)" class="yesBtn">保存</button>
-              <button @click="form_taxTel = true" class="cancelBtn">取消</button>
-            </span>
-          </el-col>
-          <el-col class="item_info" :span="24">
-            <span class="key">统一社会信用代码: </span>
-            <span v-if="form_taxpayerIdentity">
-              {{ form.taxpayerIdentity }}
-              <i class="el-icon-edit" @click="form_taxpayerIdentity = false"></i>
-            </span>
-            <span v-else>
-              <input type="text" v-model="form.taxpayerIdentity"/>
-              <button @click="addZJuser(form.taxpayerIdentity)" class="yesBtn">保存</button>
-              <button @click="form_taxpayerIdentity = true" class="cancelBtn">取消</button>
-            </span>
-          </el-col>
-        </el-row>
+        </div>
+        <div class="section-content" v-if="showTX">
+          <div class="mobile-item editable">
+            <span class="item-label">ak: </span>
+            <div class="item-value">
+              <span v-if="form_ak">
+                {{ form.ak }}
+                <i class="el-icon-edit edit-icon" @click="form_ak = false"></i>
+              </span>
+              <span v-else class="edit-mode">
+                <el-input v-model="form.ak" size="small" placeholder="请输入ak"></el-input>
+                <div class="edit-actions">
+                  <el-button type="primary" size="mini" @click="saveField('ak')">保存</el-button>
+                  <el-button size="mini" @click="form_ak = true">取消</el-button>
+                </div>
+              </span>
+            </div>
+          </div>
+          <div class="mobile-item editable">
+            <span class="item-label">sk: </span>
+            <div class="item-value">
+              <span v-if="form_sk">
+                {{ form.sk }}
+                <i class="el-icon-edit edit-icon" @click="form_sk = false"></i>
+              </span>
+              <span v-else class="edit-mode">
+                <el-input v-model="form.sk" size="small" placeholder="请输入sk"></el-input>
+                <div class="edit-actions">
+                  <el-button type="primary" size="mini" @click="saveField('sk')">保存</el-button>
+                  <el-button size="mini" @click="form_sk = true">取消</el-button>
+                </div>
+              </span>
+            </div>
+          </div>
+          <div class="mobile-item editable">
+            <span class="item-label">腾讯id: </span>
+            <div class="item-value">
+              <span v-if="form_thirdId">
+                {{ form.thirdId }}
+                <i class="el-icon-edit edit-icon" @click="form_thirdId = false"></i>
+              </span>
+              <span v-else class="edit-mode">
+                <el-input v-model="form.thirdId" size="small" placeholder="请输入腾讯id"></el-input>
+                <div class="edit-actions">
+                  <el-button type="primary" size="mini" @click="saveField('thirdId')">保存</el-button>
+                  <el-button size="mini" @click="form_thirdId = true">取消</el-button>
+                </div>
+              </span>
+            </div>
+          </div>
+          <div class="mobile-item editable">
+            <span class="item-label">腾讯appId: </span>
+            <div class="item-value">
+              <span v-if="form_appId">
+                {{ form.appId }}
+                <i class="el-icon-edit edit-icon" @click="form_appId = false"></i>
+              </span>
+              <span v-else class="edit-mode">
+                <el-input v-model="form.appId" size="small" placeholder="请输入腾讯appId"></el-input>
+                <div class="edit-actions">
+                  <el-button type="primary" size="mini" @click="saveField('appId')">保存</el-button>
+                  <el-button size="mini" @click="form_appId = true">取消</el-button>
+                </div>
+              </span>
+            </div>
+          </div>
+          <div class="mobile-item editable">
+            <span class="item-label">备注: </span>
+            <div class="item-value">
+              <span v-if="form_remark">
+                {{ form.remark }}
+                <i class="el-icon-edit edit-icon" @click="form_remark = false"></i>
+              </span>
+              <span v-else class="edit-mode">
+                <el-input v-model="form.remark" size="small" placeholder="请输入备注"></el-input>
+                <div class="edit-actions">
+                  <el-button type="primary" size="mini" @click="saveField('remark')">保存</el-button>
+                  <el-button size="mini" @click="form_remark = true">取消</el-button>
+                </div>
+              </span>
+            </div>
+          </div>
+          <div class="mobile-item">
+            <span class="item-label">渠道商id: </span>
+            <span class="item-value">{{ "渠道商id" }}</span>
+          </div>
+        </div>
       </div>
     </div>
 
-    <el-dialog title="请充值" :visible.sync="onfflineVisible" width="70%" :before-close="handleClose"
-               :append-to-body="true">
-      <el-form label-width="100px" :model="onfflineForm" ref="onfflineForm">
+    <!-- 充值对话框 -->
+    <el-dialog title="请充值" :visible.sync="onfflineVisible" width="500px" :before-close="handleClose" :append-to-body="true">
+      <el-form label-width="100px" :model="onfflineForm" ref="onfflineForm" :rules="rules">
         <el-form-item label="充值金额:" prop="amount">
           <el-input v-model="onfflineForm.amount" placeholder="充值金额需¥1元以上哦"></el-input>
         </el-form-item>
@@ -544,8 +639,8 @@
       </span>
     </el-dialog>
 
-    <el-dialog :visible.sync="dialogVisible" title="充值信息" width="500px" custom-class="get-charge-dialog"
-               class="myDialog" :append-to-body="true">
+    <!-- 充值信息对话框 -->
+    <el-dialog :visible.sync="dialogVisible" title="充值信息" width="500px" custom-class="get-charge-dialog" class="myDialog" :append-to-body="true">
       <div class="warning">注意：请在打款时备注摘里输入正确的充值码！</div>
       <div class="fontSize common-charge-style">
         <span class="font">账户名称： </span>
@@ -561,38 +656,27 @@
       </div>
       <div class="common-charge-style">
         <span class="font">充值码： </span>
-        <span><span
-          style="font-weight: bold;margin-right: 5px">{{ mailCode }}</span>(充值码请在当天内使用，过期无效)</span>
+        <span><span style="font-weight: bold;margin-right: 5px">{{ mailCode }}</span>(充值码请在当天内使用，过期无效)</span>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import {getZJUserInfoAPI, getZJsaveUserAPI} from "@/api/sales/zj_userinfo";
-import {myBalanceAPI} from "@/api/finance/customerRechargeManagement";
-import {alipayAPI} from '@/api/finance/customerRechargeManagement'
-import {editPasswordAPI} from "@/api/login";
-import {addCustomerMailcodeAPI, getCustomerMailcodeAPI} from '@/api/customer/rechargeRecord'
+import { getZJUserInfoAPI, getZJsaveUserAPI } from "@/api/sales/zj_userinfo";
+import { myBalanceAPI } from "@/api/finance/customerRechargeManagement";
+import { alipayAPI } from '@/api/finance/customerRechargeManagement'
+import { editPasswordAPI } from "@/api/login";
+import { addCustomerMailcodeAPI, getCustomerMailcodeAPI } from '@/api/customer/rechargeRecord'
 
 export default {
+  name: 'UserProfile',
   data() {
     return {
       userAgent: window.navigator.userAgent,
       isMobile: false,
       dialogVisible: false,
       mailCode: '',
-      updatePasswordRule: {
-        password: [
-          {required: true, message: "请输入旧密码", trigger: "blur"},
-        ],
-        newpassword: [
-          {required: true, message: "请输入新密码", trigger: "blur"},
-        ],
-        configPassword: [
-          {required: true, message: "请确认新密码", trigger: "blur"},
-        ],
-      },
       passwordForm: {
         password: "",
         newpassword: "",
@@ -604,13 +688,14 @@ export default {
         amount: ''
       },
       rules: {
-        amount: [{required: true, trigger: "blur", message: '请输入充值金额'}, {
-          pattern: /^[+]?(0|([1-9]\d*))?$/,
-          message: '请输入数字'
-        }],
+        amount: [
+          { required: true, trigger: "blur", message: '请输入充值金额' },
+          { pattern: /^[+]?(0|([1-9]\d*))?$/, message: '请输入数字' }
+        ],
       },
       balance: null,
       showTX: false,
+      // 编辑状态控制
       form_name: true,
       form_remark: true,
       form_tel: true,
@@ -645,7 +730,7 @@ export default {
       this.$router.push('/customer/customerInformation')
     },
     getRechargeCode() {
-      addCustomerMailcodeAPI({user_id: this.userId}).then(res => {
+      addCustomerMailcodeAPI({ user_id: this.userId }).then(res => {
         if (res.status) {
           this.dialogVisible = true
           this.$message({
@@ -662,7 +747,7 @@ export default {
       })
     },
     getCustomerMailcode() {
-      getCustomerMailcodeAPI({user_id: this.userId}).then(res => {
+      getCustomerMailcodeAPI({ user_id: this.userId }).then(res => {
         if (res.status) {
           this.mailCode = res.data
         } else {
@@ -673,41 +758,6 @@ export default {
         }
       })
     },
-    updatePassword() {
-      this.$refs.passwordForm.validate((valid) => {
-        if (valid) {
-          if (
-            this.passwordForm.newpassword == this.passwordForm.configPassword
-          ) {
-            let params = {
-              id: this.userId,
-              password: this.passwordForm.password,
-              newpassword: this.passwordForm.newpassword,
-            };
-            editPasswordAPI(params).then((res) => {
-              if (res.status == true) {
-                this.$message({
-                  message: "密码修改成功",
-                  type: "success",
-                });
-                this.passwordDialog = false;
-                this.$router.push({name: "Login"});
-              } else {
-                this.$message({
-                  message: res.msg,
-                  type: "error",
-                });
-              }
-            });
-          } else {
-            this.$message({
-              message: "新旧密码不一致",
-              type: "error",
-            });
-          }
-        }
-      });
-    },
     onffline() {
       this.onfflineVisible = true
     },
@@ -763,7 +813,7 @@ export default {
       };
       getZJUserInfoAPI(userid).then((res) => {
         this.form = res.data;
-        this.nameText = this.form.name[0];
+        this.nameText = this.form.name ? this.form.name[0] : '';
         Object.keys(this.form).map((key, item) => {
           if (this.form[key] == "") {
             this.form[key] = "未填写";
@@ -780,12 +830,41 @@ export default {
         }
       });
     },
-    addZJuser(index) {
-      if (index == "" || index == "未填写") {
+    // 保存字段
+    saveField(field) {
+      if (this.form[field] == "" || this.form[field] == "未填写") {
         this.getZJUserInfo();
-        this.open4();
+        this.$message.error("请您填写正确的信息");
         return;
       }
+
+      // 重置所有编辑状态
+      this.resetEditStates();
+
+      this.form.userid = this.userId;
+      Object.keys(this.form).map((key, item) => {
+        if (this.form[key] == "未填写") {
+          this.form[key] = "";
+        }
+      });
+
+      this.form.supId = 99;
+      getZJsaveUserAPI(this.form).then((res) => {
+        if (res.status == true) {
+          this.$message({
+            showClose: true,
+            message: "保存成功",
+            type: "success",
+          });
+          this.getZJUserInfo();
+          return;
+        }
+        this.getZJUserInfo();
+        this.$message.error("保存失败");
+      });
+    },
+    // 重置所有编辑状态
+    resetEditStates() {
       this.form_bankName = true;
       this.form_name = true;
       this.form_tel = true;
@@ -802,115 +881,316 @@ export default {
       this.form_taxpayerIdentity = true;
       this.form_remark = true;
       this.form_orgcode = true;
-      this.form.userid = this.userId;
-
-      Object.keys(this.form).map((key, item) => {
-        if (this.form[key] == "未填写") {
-          this.form[key] = "";
-        }
-      });
-      this.form.supId = 99;
-      getZJsaveUserAPI(this.form).then((res) => {
-        if (res.status == true) {
-          this.open2();
-          this.getZJUserInfo();
-          return;
-        }
-        this.getZJUserInfo();
-        this.notFindUsers();
-      });
-    },
-    open4() {
-      this.$message.error("请您填写正确的信息");
-    },
-    notFindUsers() {
-      this.$message.error("添加失败");
-    },
-    open2() {
-      this.$message({
-        showClose: true,
-        message: "添加成功",
-        type: "success",
-      });
-    },
+    }
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
-
-.aaa {
-  background-color: #ff0;
-  overflow: scroll !important;
-}
+// 通用样式变量
+$primary-color: #409eff;
+$success-color: #67c23a;
+$warning-color: #e6a23c;
+$danger-color: #f56c6c;
+$info-color: #909399;
+$text-primary: #303133;
+$text-regular: #606266;
+$text-secondary: #909399;
+$text-placeholder: #c0c4cc;
+$border-color: #dcdfe6;
+$background-color: #f5f7fa;
+$white: #ffffff;
 
+// 通用样式
 #box {
   padding: 0;
-  background-color: #f5f5f5;
+  background-color: $background-color;
   height: 100%;
   margin: 0;
   overflow-x: hidden;
 }
 
-i {
-  margin-left: 12px;
-  color: #409eff;
+// 编辑图标样式
+.edit-icon {
+  margin-left: 8px;
+  color: $primary-color;
   cursor: pointer;
+  font-size: 14px;
 
   &:hover {
-    color: #66b1ff;
+    color: lighten($primary-color, 10%);
   }
 }
 
-// 通用按钮样式
-.yesBtn {
-  margin-left: 10px;
-  border: 1px solid #409eff;
-  color: #409eff;
-  background-color: transparent;
-  padding: 4px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.3s;
+// 编辑模式样式
+.edit-mode {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 
-  &:hover {
-    background-color: #ecf5ff;
+  .edit-actions {
+    display: flex;
+    gap: 5px;
   }
 }
 
-.cancelBtn {
-  margin-left: 5px;
-  border: 1px solid #909399;
-  color: #909399;
-  background-color: transparent;
-  padding: 4px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.3s;
-
-  &:hover {
-    background-color: #f4f4f5;
-  }
+// 信息卡片通用样式
+.info-section {
+  background-color: $white;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  margin: 20px auto;
+  padding: 20px;
+  width: 90%;
+  max-width: 1200px;
 }
 
-//个人信息
-.myInformation {
-  background-color: #ffffff;
-  min-width: 1100px;
-  height: 60px;
-  line-height: 60px;
-  padding: 0 30px;
-  font-size: 20px;
+.section-header {
+  margin-bottom: 20px;
+  border-bottom: 1px solid #ebeef5;
+  padding-bottom: 10px;
+}
+
+.section-title {
+  margin: 0;
   font-weight: 600;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  position: relative;
+  font-size: 18px;
+  color: $text-primary;
+  line-height: 1.5;
 }
 
+.section-subtitle {
+  margin: 5px 0 0 0;
+  font-size: 14px;
+  color: $text-secondary;
+}
+
+// PC端样式
+.pcAgent {
+  .top-header {
+    background-color: $white;
+    height: 60px;
+    line-height: 60px;
+    padding: 0 30px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+
+    .header-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .title-section {
+      display: flex;
+      align-items: center;
+
+      .after-icon {
+        width: 4px;
+        height: 18px;
+        border-radius: 2px;
+        background: $primary-color;
+      }
+
+      .title-word {
+        color: $text-primary;
+        font-weight: 600;
+        font-size: 18px;
+        margin-left: 15px;
+      }
+    }
+
+    .right-header {
+      display: flex;
+      gap: 20px;
+
+      .balance-item, .recharge-item {
+        display: flex;
+        align-items: center;
+
+        .price-word {
+          color: $text-regular;
+          font-size: 14px;
+          margin-right: 8px;
+        }
+
+        .balance-style {
+          color: $primary-color;
+          font-weight: 600;
+          font-size: 18px;
+          cursor: pointer;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+
+        .recharge-icon {
+          cursor: pointer;
+          height: 24px;
+        }
+      }
+    }
+  }
+
+  .section-content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px;
+  }
+
+  .user-avatar {
+    flex-shrink: 0;
+
+    .userImg {
+      width: 80px;
+      height: 80px;
+      line-height: 80px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, $primary-color, lighten($primary-color, 15%));
+      color: $white;
+      font-size: 24px;
+      text-align: center;
+      box-shadow: 0 2px 8px rgba($primary-color, 0.3);
+    }
+  }
+
+  .user-info {
+    display: flex;
+    flex: 1;
+    gap: 50px;
+  }
+
+  .info-group {
+    flex: 1;
+  }
+
+  .info-item {
+    display: flex;
+    margin-bottom: 15px;
+    align-items: flex-start;
+
+    .info-label {
+      flex: 0 0 120px;
+      color: $text-secondary;
+      font-size: 14px;
+      line-height: 32px;
+    }
+
+    .info-value {
+      flex: 1;
+      color: $text-primary;
+      font-size: 14px;
+      line-height: 32px;
+
+      &.editable-field {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  .info-column {
+    flex: 1;
+    min-width: 300px;
+
+    .column-title {
+      font-weight: 600;
+      font-size: 16px;
+      color: $text-primary;
+      margin-bottom: 15px;
+      display: flex;
+      align-items: center;
+
+      .hint {
+        font-size: 12px;
+        margin-left: 10px;
+        color: $warning-color;
+      }
+    }
+  }
+
+  .tencent-info {
+    margin-top: 15px;
+  }
+}
+
+// 移动端样式
+.mobileAgent {
+  padding: 15px;
+
+  .mobile-section {
+    background: $white;
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 15px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+
+    .section-title {
+      font-weight: 600;
+      font-size: 18px;
+      color: $text-primary;
+      text-align: center;
+      margin-bottom: 15px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #eee;
+    }
+
+    .section-subtitle {
+      margin: 0 0 15px 0;
+      font-size: 14px;
+      color: $text-secondary;
+      text-align: center;
+    }
+
+    .section-content {
+      .mobile-item {
+        padding: 12px 0;
+        border-bottom: 1px solid #eee;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        &.editable {
+          .item-value {
+            display: flex;
+            align-items: center;
+          }
+        }
+
+        .item-label {
+          display: block;
+          font-size: 14px;
+          font-weight: 500;
+          color: $text-secondary;
+          margin-bottom: 5px;
+        }
+
+        .item-value {
+          font-size: 15px;
+          color: $text-primary;
+          word-break: break-all;
+
+          &.balance-value {
+            color: $primary-color;
+            font-weight: 600;
+            cursor: pointer;
+
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 对话框样式
 .myDialog {
   .warning {
     margin-bottom: 15px;
-    color: #e6a23c;
+    color: $warning-color;
     font-weight: 600;
     font-size: 14px;
   }
@@ -926,204 +1206,6 @@ i {
   }
 }
 
-// 基本信息
-.essentialInformation {
-  width: 90%;
-  max-width: 1200px;
-  background-color: #fff;
-  margin: 20px auto;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  padding: 20px;
-
-  .one {
-    margin: 0 0 20px 0;
-    height: 40px;
-    line-height: 40px;
-    font-weight: 600;
-    font-size: 18px;
-    color: #303133;
-    border-bottom: 1px solid #ebeef5;
-  }
-
-  p {
-    line-height: 30px;
-    margin: 10px 0;
-    font-size: 14px;
-    color: #606266;
-  }
-
-  //用户图片
-  .userImg {
-    width: 80px;
-    height: 80px;
-    line-height: 80px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, #409eff, #66b1ff);
-    color: white;
-    font-size: 24px;
-    text-align: center;
-    margin: 0 60px 0 10px;
-    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
-  }
-
-  .disp_top {
-    display: flex;
-    padding: 15px 0;
-    align-items: center;
-    flex-wrap: nowrap;
-  }
-
-  .userID {
-    width: 400px;
-    margin-right: 50px;
-
-    p {
-      font-weight: 500;
-    }
-  }
-
-  .userStatus {
-    width: 400px;
-
-    p {
-      font-weight: 500;
-    }
-  }
-
-  .disp {
-    display: flex;
-
-    > div:first-child {
-      flex: 0 0 120px;
-      color: #909399;
-    }
-
-    > div:last-child {
-      flex: 1;
-
-      p {
-        color: #303133;
-      }
-    }
-  }
-}
-
-//详细信息
-.particular {
-  width: 90%;
-  max-width: 1200px;
-  font-size: 14px;
-  margin: 20px auto;
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  padding: 20px;
-
-  > div {
-    display: flex;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-  }
-
-  > p:nth-child(1) {
-    margin: 0 0 10px 0;
-    height: 40px;
-    line-height: 40px;
-    font-weight: 600;
-    font-size: 18px;
-    color: #303133;
-    border-bottom: 1px solid #ebeef5;
-  }
-
-  > p:nth-child(2) {
-    margin: 0 0 20px 0;
-    font-size: 14px;
-    color: #909399;
-  }
-
-  .particular_disp {
-    display: flex;
-    width: 500px;
-    margin-top: 15px;
-
-    > div:nth-child(1) {
-      flex: 0 0 120px;
-      color: #909399;
-    }
-
-    > div:nth-child(2) {
-      flex: 1;
-
-      p {
-        color: #303133;
-        margin-bottom: 15px;
-      }
-    }
-  }
-}
-
-.hint {
-  font-size: 12px;
-  margin-left: 10px;
-  color: #e6a23c;
-}
-
-.balance-style {
-  color: #409eff;
-  font-weight: 600;
-  font-size: 18px;
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.title-word {
-  color: #303133;
-  font-weight: 600;
-  font-size: 18px;
-  margin-left: 15px;
-}
-
-.after-icon {
-  width: 4px;
-  height: 18px;
-  border-radius: 2px;
-  background: #409eff;
-}
-
-.top-header {
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.right-header {
-  position: absolute;
-  top: 50%;
-  right: 30px;
-  transform: translateY(-50%);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.price-word {
-  color: #606266;
-  font-size: 14px;
-  padding-right: 10px;
-  width: 120px;
-}
-
-.kong {
-  height: 20px;
-  width: 100%;
-  background-color: #f5f5f5;
-}
-
 .common-charge-style {
   display: flex;
   justify-content: flex-start;
@@ -1135,119 +1217,7 @@ i {
   }
 }
 
-.item-style {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-// 移动端优化
-.mobileAgent {
-  width: 100% !important;
-  padding: 15px;
-  background-color: #f5f5f5;
-
-  .title {
-    font-weight: 600;
-    font-size: 20px;
-    height: 50px;
-    line-height: 50px;
-    margin: 10px 0;
-    color: #303133;
-    text-align: center;
-  }
-
-  .info {
-    margin: 0 0 15px 0;
-    font-size: 14px;
-    color: #909399;
-    text-align: center;
-  }
-
-  .userpic {
-    height: 70px;
-    display: flex;
-    justify-content: center;
-    margin-bottom: 20px;
-
-    .userImg {
-      width: 70px;
-      height: 70px;
-      line-height: 70px;
-      border-radius: 50%;
-      background: linear-gradient(135deg, #409eff, #66b1ff);
-      color: white;
-      font-size: 20px;
-      text-align: center;
-      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
-    }
-  }
-
-  .user_account,
-  .user_info,
-  .detailedInformation,
-  .tenct {
-    background: #fff;
-    border-radius: 8px;
-    padding: 15px;
-    margin-bottom: 15px;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
-
-    .hint {
-      font-size: 12px;
-      margin-left: 10px;
-      color: #e6a23c;
-    }
-
-    .item_info {
-      height: auto;
-      line-height: 1.5;
-      margin-bottom: 15px;
-      padding: 10px 0;
-      border-bottom: 1px solid #eee;
-
-      &:last-child {
-        border-bottom: none;
-      }
-
-      .key {
-        font-size: 14px;
-        font-weight: 500;
-        color: #909399;
-        margin-bottom: 5px;
-      }
-
-      .val {
-        font-size: 15px;
-        color: #303133;
-        word-break: break-all;
-      }
-
-      input {
-        width: 100%;
-        margin: 5px 0;
-        padding: 8px 10px;
-        border: 1px solid #dcdfe6;
-        border-radius: 4px;
-        font-size: 14px;
-      }
-
-      .zfb {
-        vertical-align: middle;
-      }
-    }
-  }
-
-  .user_info, .detailedInformation {
-    .item_info {
-      .key, .val {
-        display: block;
-        width: 100%;
-      }
-    }
-  }
-}
-
+// 响应式处理
 @media screen and (max-width: 768px) {
   .pcAgent {
     display: none;
@@ -1270,6 +1240,3 @@ i {
   padding-bottom: 15px;
 }
 </style>
-
-
-
diff --git a/f/web-kboss/src/views/customer/userResource/index.vue b/f/web-kboss/src/views/customer/userResource/index.vue
index 59f3a73..efc6e09 100644
--- a/f/web-kboss/src/views/customer/userResource/index.vue
+++ b/f/web-kboss/src/views/customer/userResource/index.vue
@@ -6,102 +6,106 @@
       <ul class="search-box">
         <li>
           <el-input-group class="search-input">
-            <el-input size="mini"  placeholder="请输入关键词" clearable></el-input>
-            <el-button slot="append" icon="el-icon-search"  size="mini"></el-button>
+            <el-input size="mini" placeholder="请输入关键词" clearable></el-input>
+            <el-button slot="append" icon="el-icon-search" size="mini"></el-button>
           </el-input-group>
         </li>
         <li>
           <span class="search-label">创建日期:</span>
-          <el-date-picker size="mini" style="width: 220px;"  type="datetimerange" align="right"
-            start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" format="yyyy-MM-dd"
-            value-format="yyyy-MM-dd" ></el-date-picker>
+          <el-date-picker size="mini" style="width: 220px;" type="datetimerange" align="right" start-placeholder="开始日期"
+            end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"></el-date-picker>
         </li>
         <li>
-          <el-button size="mini" >重置</el-button>
-          <el-button type="primary"  size="mini">查询</el-button>
+          <el-button size="mini">重置</el-button>
+          <el-button type="primary" size="mini">查询</el-button>
         </li>
       </ul>
     </div>
-    <el-table :data="tableData" style="width: 100%;font-size: 12px" height="calc(100vh - 130px)" border>
-      <el-table-column min-width="90px" align="center" prop="productname" label="产品名称"></el-table-column>
-      <el-table-column min-width="150px" align="center" prop="productdesc" label="产品描述" :show-overflow-tooltip="true">
-        <template slot-scope="{row}">
-          {{ row.productdesc ? row.productdesc : '-' }}
-        </template>
-      </el-table-column>
-      <el-table-column min-width="150px" align="center" prop="orderid" label="订单号"
-        :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column min-width="60px" align="center" prop="start_date" label="购买日期"></el-table-column>
-      <el-table-column prop="expire_date" label="到期日期">
-        <template slot-scope="scope">
-          {{ scope.row.expire_date == null ? '-' : scope.row.expire_date }}
-        </template>
-      </el-table-column>
-      <!--
+    <el-card class="tableCard">
+      <el-table :data="tableData" style="width: 100%;font-size: 12px" height="calc(100vh - 130px)" border>
+        <el-table-column min-width="90px" align="center" prop="productname" label="产品名称"></el-table-column>
+        <el-table-column min-width="150px" align="center" prop="productdesc" label="产品描述" :show-overflow-tooltip="true">
+          <template slot-scope="{row}">
+            {{ row.productdesc ? row.productdesc : '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column min-width="150px" align="center" prop="orderid" label="订单号"
+          :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column min-width="60px" align="center" prop="start_date" label="购买日期"></el-table-column>
+        <el-table-column prop="expire_date" label="到期日期">
+          <template slot-scope="scope">
+            {{ scope.row.expire_date == null ? '-' : scope.row.expire_date }}
+          </template>
+        </el-table-column>
+        <!--
  <el-table-column prop="total_quantity" label="总量">
  <el-table-column prop="used_quantity" label="已用量">
  </el-table-column>
  <el-table-column prop="rest_quantity" label="剩余量">
  </el-table-column> -->
-      <el-table-column prop="" label="操作" align="center" width="120px">
-        <template slot-scope="scope">
-          <el-button type="primary" size="mini" @click="goJiNanChaoSuan()" v-if="scope.row.providername === '济南超算'">
-            <div style="display: flex;justify-content: center;align-items: center">
-              <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">超算产品
-            </div>
-          </el-button>
-          <el-button type="primary" size="mini" @click="goBaiDu(scope.row.product_url)"
-            v-else-if="(scope.row.providername === '百度智能云')">
-            <div style="display: flex;justify-content: center;align-items: center">
-              <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">实例使用
-            </div>
-          </el-button>
-          <el-button type="primary" size="mini" @click="goJd" v-else-if="(scope.row.providername === '京东云')">
-            <!--            <i class="el-icon-edit-outline"></i> -->
-            <div style="display: flex;justify-content: center;align-items: center">
-              <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">京东产品
-            </div>
-          </el-button>
-          <el-button type="primary" size="mini" @click="goUcloud(scope.row.region)"
-            v-else-if="(scope.row.providername === '优刻得科技股份有限公司')">
-            <!--            <i class="el-icon-edit-outline"></i> -->
-            <div style="display: flex;justify-content: center;align-items: center">
-              <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">集群二
-            </div>
-          </el-button>
-          <el-button size="mini" @click="nodeThree(scope.row)" v-else-if="(scope.row.classify === 'E')">
-            详情
-          </el-button>
-          <div v-else-if="scope.row.classify === 'CPCC'">
-            <el-button size="mini" type="primary" @click="openCpccDetail(scope.row)">
-              容器化详情
+        <el-table-column prop="" label="操作" align="center" width="120px">
+          <template slot-scope="scope">
+            <el-button type="primary" size="mini" @click="goJiNanChaoSuan()" v-if="scope.row.providername === '济南超算'">
+              <div style="display: flex;justify-content: center;align-items: center">
+                <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">超算产品
+              </div>
             </el-button>
-            <el-button size="mini" type="primary" @click="$router.push('/customer/SshTerminal')">
-              登录
+            <el-button type="primary" size="mini" @click="goBaiDu(scope.row.product_url)"
+              v-else-if="(scope.row.providername === '百度智能云')">
+              <div style="display: flex;justify-content: center;align-items: center">
+                <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">实例使用
+              </div>
             </el-button>
-          </div>
-          <!--          <el-dropdown @command="handleCommand(scope.row, $event)" v-else-if="(scope.row.classify === 'E')"-->
-          <!--                       trigger="click">-->
-          <!--  <span style="cursor: pointer" class="el-dropdown-link">-->
-          <!--    集群三<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
-          <!--  </span>-->
-          <!--            <el-dropdown-menu slot="dropdown">-->
-          <!--              <el-dropdown-item command="detail" icon="el-icon-warning-outline">详情</el-dropdown-item>-->
-          <!--              <el-dropdown-item command="shutDown" icon="el-icon-switch-button">关机</el-dropdown-item>-->
-          <!--            </el-dropdown-menu>-->
-          <!--          </el-dropdown>-->
+            <el-button type="primary" size="mini" @click="goJd" v-else-if="(scope.row.providername === '京东云')">
+              <!--            <i class="el-icon-edit-outline"></i> -->
+              <div style="display: flex;justify-content: center;align-items: center">
+                <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">京东产品
+              </div>
+            </el-button>
+            <el-button type="primary" size="mini" @click="goUcloud(scope.row.region)"
+              v-else-if="(scope.row.providername === '优刻得科技股份有限公司')">
+              <!--            <i class="el-icon-edit-outline"></i> -->
+              <div style="display: flex;justify-content: center;align-items: center">
+                <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">集群二
+              </div>
+            </el-button>
+            <el-button size="mini" @click="nodeThree(scope.row)" v-else-if="(scope.row.classify === 'E')">
+              详情
+            </el-button>
+            <div v-else-if="scope.row.classify === 'CPCC'">
+              <el-button size="mini" type="primary" @click="openCpccDetail(scope.row)">
+                容器化详情
+              </el-button>
+              <el-button size="mini" type="primary" @click="$router.push('/customer/SshTerminal')">
+                登录
+              </el-button>
+            </div>
+            <!--          <el-dropdown @command="handleCommand(scope.row, $event)" v-else-if="(scope.row.classify === 'E')"-->
+            <!--                       trigger="click">-->
+            <!--  <span style="cursor: pointer" class="el-dropdown-link">-->
+            <!--    集群三<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
+            <!--  </span>-->
+            <!--            <el-dropdown-menu slot="dropdown">-->
+            <!--              <el-dropdown-item command="detail" icon="el-icon-warning-outline">详情</el-dropdown-item>-->
+            <!--              <el-dropdown-item command="shutDown" icon="el-icon-switch-button">关机</el-dropdown-item>-->
+            <!--            </el-dropdown-menu>-->
+            <!--          </el-dropdown>-->
+
+            <el-button type="primary" size="mini" @click="goCaption()"
+              v-else-if="(scope.row.providername === '北京首都在线科技股份有限公司')">
+              <!--            <i class="el-icon-edit-outline"></i> -->
+              <div style="display: flex;justify-content: center;align-items: center">
+                <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">集群一
+              </div>
+            </el-button>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
 
-          <el-button type="primary" size="mini" @click="goCaption()"
-            v-else-if="(scope.row.providername === '北京首都在线科技股份有限公司')">
-            <!--            <i class="el-icon-edit-outline"></i> -->
-            <div style="display: flex;justify-content: center;align-items: center">
-              <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">集群一
-            </div>
-          </el-button>
-          <span v-else>-</span>
-        </template>
-      </el-table-column>
-    </el-table>
     <el-dialog title="详情" :visible.sync="dialogTableVisible">
       <el-table :data="datailList">
         <el-table-column min-width="200px" property="date" label="实例编号/名称">
@@ -213,7 +217,7 @@
         <el-descriptions-item label="系统盘">{{ cpccDetail.disk_sys_limit }}</el-descriptions-item>
         <el-descriptions-item v-if="cpccDetail.source_gpu !== '0'" label="卡数">{{
           cpccDetail.source_gpu
-        }}
+          }}
         </el-descriptions-item>
 
       </el-descriptions>
@@ -399,8 +403,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-.customerGood {}
+<style lang="less" scoped >
 
 .tip {
   color: #ff9120;
@@ -473,23 +476,29 @@ export default {
   justify-content: flex-start;
   align-items: center;
 }
-.search-input{
+
+.search-input {
   display: flex;
 }
+
 .search-box {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    background-color: white;
-    padding: 10px;
-    margin-bottom: 10px;
-    border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: white;
+  padding: 10px;
+  margin-bottom: 10px;
+  border-radius: 8px;
 }
 
 .search-box li {
-    margin-right: 15px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
+  margin-right: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.tableCard{
+  margin-top: 20px;
+  height: calc(100vh - 180px);
 }
 </style>
diff --git a/f/web-kboss/src/views/product/productHome/baiduProductShow/index.vue b/f/web-kboss/src/views/product/productHome/baiduProductShow/index.vue
index 627a6cb..38bec86 100644
--- a/f/web-kboss/src/views/product/productHome/baiduProductShow/index.vue
+++ b/f/web-kboss/src/views/product/productHome/baiduProductShow/index.vue
@@ -27,7 +27,7 @@
       </div>
 
       <!-- 收起状态：简化按钮 -->
-      <div v-show="!isShowWindow" class="notification-minimized" @click="zhanBtn">
+      <div v-show="!isShowWindow" class="notification-minimized" @click="zhanBtn">''
         <div class="minimized-content">
           <i class="minimized-icon el-icon-warning"></i>
           <span>实名认证</span>