适配其他浏览器，样式问题

index.html

@@ -11,6 +11,7 @@
     <title><%= VITE_APP_TITLE %></title>
     <meta name="keywords" content="友福同享,智能健康服务,定制化健康管理方案,睡眠检测,ai健康,DMA人体驾照,人体驾照,健康监测,健康管理app,健康管理,智能手环,心率检测,血压检测,运动手环,健康检测,ai婚恋,婚恋配对,婚恋平台推荐,ai相亲,婚恋平台,相亲平台" />
     <meta name="description" content="友福同享（深圳）智能科技有限公司是一家以人工智能为核心的高科技公司，致力于提升人类生命质量，成为健康生活方式的引领者。拥有多项自主知识产與發明專利，公司持续推出其围绕AI核心服务的健康饮食及智能系列产品。" />
+    <meta name="renderer" content="webkit">
     <script type="text/javascript">window.HOST_TYPE='2'</script>
     <script
       type="text/javascript"

src/components/pc/exam/examHeader.vue

@@ -44,12 +44,11 @@
             <path d="M9.24647 16.3758C13.4372 16.3758 16.8345 12.9785 16.8345 8.78773C16.8345 4.59698 13.4372 1.19971 9.24647 1.19971C5.05572 1.19971 1.65845 4.59698 1.65845 8.78773C1.65845 12.9785 5.05572 16.3758 9.24647 16.3758Z" stroke="#66676C" stroke-width="1.625" stroke-linecap="round" stroke-linejoin="round"/>
             <path d="M14.6084 14.1499L17.7895 17.331" stroke="#66676C" stroke-width="1.625" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
-<!--          <img src="https://images.health.ufutx.com/202505/14/07ba29b4372524f89bd3b060ad8b129f.png" class="" />-->
           <input  v-model="searchValue"
                   @keyup.enter="handleSearch" placeholder="搜索" />
         </div>
         <div v-if='!loginStatus' class='exam-header-right-login-btn' @click='toLogin'>登录</div>
-        <div v-else class=''>
+        <div v-else class='exam-user-wrapper'>
           <div class='ui-user-box'  @mouseover='showLogout = true' @mouseleave='showLogout = false'>
             <div class='ui-user-content' >
               <img class='ui-user-box-icon' src='https://images.health.ufutx.com/202504/28/d2b5ca33bd970f64a6301fa75ae2eb22.png' alt='' />
@@ -65,7 +64,6 @@
         <div v-if='isAccountLogin'>
           <div class="dialog-title">请登录</div>
           <div class="dialog-content">
-            <!-- 新增文字标签 -->
             <div class="input-label">手机号</div>
             <div class="login-input">
               <input v-model="mobile" type="tel" placeholder="请输入手机号" maxlength="11">
@@ -99,7 +97,6 @@
                 {{ showCountdown ? `${countdown}s` : '获取验证码' }}
               </button>
             </div>
-            <!--        <div class="error-tip" v-if="errorVisible">{{ errorMessage }}</div>-->
           </div>
           <div class="dialog-btns">
             <div class="dialog-btn confirm text-center" @click="handleLogin" :class="{disabled: isEnterStart}">
@@ -137,12 +134,10 @@
           <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0006 9.95806C10.2271 9.74375 10.5827 9.74741 10.8048 9.96633L24.1111 23.0836C24.3235 23.2929 24.3259 23.6348 24.1166 23.8471C24.1122 23.8515 24.1077 23.8559 24.1032 23.8603C23.8766 24.0746 23.521 24.0709 23.299 23.852L9.99262 10.7347C9.7803 10.5254 9.77785 10.1836 9.98716 9.97123C9.99157 9.96676 9.99605 9.96237 10.0006 9.95806Z" fill="white" stroke="white" stroke-width="0.85"/>
           <path fill-rule="evenodd" clip-rule="evenodd" d="M24.0015 9.95806C23.7749 9.74375 23.4194 9.74741 23.1973 9.96633L9.89093 23.0836C9.67861 23.2929 9.67616 23.6348 9.88547 23.8471C9.88987 23.8515 9.89436 23.8559 9.89892 23.8603C10.1254 24.0746 10.481 24.0709 10.7031 23.852L24.0095 10.7347C24.2218 10.5254 24.2242 10.1836 24.0149 9.97123C24.0105 9.96676 24.006 9.96237 24.0015 9.95806Z" fill="white" stroke="white" stroke-width="0.85"/>
         </svg>
-
       </div>
     </div>
     <div class="dialog-mask" v-if="showLogoutModal">
       <div class="dialog-success-box text-center">
-<!--        <img src="https://images.health.ufutx.com/202504/17/2ee13769aa745d646d4951179ade3419.png" alt="" class="dialog-success-img" />-->
         <div class="dialog-success-title">温馨提示</div>
         <div class="dialog-success-content">
           是否退出登录
@@ -201,7 +196,7 @@ const searchValue = ref('')
 watch(() => props.searchKeyword,(newVal) => {
   searchValue.value = newVal
 })
-const showReport = ref(false) // 是否参加考试
+const showReport = ref(false)
 const qrcodeDetail = ref({
   text:'',
   status:''
@@ -239,17 +234,17 @@ const toDetail = (path,index) => {
   }
 
 }
-const isResetCode = ref(false) // 刷新二维码
+const isResetCode = ref(false)
 
-const isJoin = ref(false) // 是否参与了考试
+const isJoin = ref(false)
 const isEnterStart = ref(false)
 
 
 const dialogTableVisible = ref(false)
-const isAccountLogin = ref(true) // 验证码登录
+const isAccountLogin = ref(true)
-const showAccountTip = ref(false) // 图标提示
+const showAccountTip = ref(false)
-const isScanSucess = ref(false) // 图标提示
+const isScanSucess = ref(false)
-const pollingTimer = ref(null) // 新增轮询定时器
+const pollingTimer = ref(null)
 const mobile = ref('')
 const code = ref('')
 const countdown = ref(0)
@@ -259,7 +254,6 @@ const showCountdown = ref(false)
 const toLogin = () => {
   dialogTableVisible.value = true
 }
-// 获取验证码方法
 const getCode = () => {
   if (!/^1[3-9]\d{9}$/.test(mobile.value)) {
     ElMessage({
@@ -267,19 +261,15 @@ const getCode = () => {
       type: 'warning',
       duration: 3 * 1000
     })
-    // showToast('请输入有效的手机号','warning')
     return
   }
 
-  // 这里添加实际获取验证码逻辑
-  console.log('发送验证码到:', mobile.value)
   let data = {
     mobile: mobile.value,
     area_code:86
   }
   request.post(`go/api/h5/v2/user/smscode`,data)
     .then(res => {
-      // 开始倒计时
       countdown.value = 60
       showCountdown.value = true
       timer.value = setInterval(() => {
@@ -294,7 +284,6 @@ const getCode = () => {
 
 }
 
-// 登录验证方法
 const handleLogin = () => {
   if (!mobile.value || !code.value) {
     ElMessage({
@@ -302,7 +291,6 @@ const handleLogin = () => {
       type: 'warning',
       duration: 3 * 1000
     })
-    // showToast('请填写完整信息','warning')
     return
   }
   let data = {
@@ -313,21 +301,16 @@ const handleLogin = () => {
   isEnterStart.value = true
   request.post(`go/api/app/v2/account/code/login`,data)
     .then(res => {
-      // 登录成功处理
       localStorage.setItem('answerToken',res.data.api_token)
       ElMessage({
         message:  '登录成功',
         type: 'success',
         duration: 1200
       })
-      // showToast('登录成功')
-      // getIsJoin()
       getUserDetail()
       setTimeout(() => {
         dialogTableVisible.value = false
         isEnterStart.value = false
-
-        // router.push({ name: 'onlineTest',query:{id:id.value} })
       },800)
     }).finally(() => {
     isEnterStart.value =  false
@@ -337,7 +320,7 @@ const isComposing = ref(false)
 const answer_user_mobile = ref('')
 const answer_user_name = ref('')
 const showLogout = ref(false)
-const showLogoutModal = ref(false) // 退出登录弹窗
+const showLogoutModal = ref(false)
 const isLogoutLoading = ref(false)
 const successLogout = () => {
   isLogoutLoading.value = true
@@ -371,7 +354,6 @@ const getIsJoin = () => {
       }else {
         showReport.value = true
       }
-      console.log(res,'r===')
     })
 }
 
@@ -384,17 +366,11 @@ const getUserDetail = () => {
       localStorage.setItem('answer_user_id', res.data.user_id)
       localStorage.setItem('answer_user_name', res.data.name)
       loginStatus.value = true
-      console.log(answer_user_name.value,'23423')
-      console.log(answer_user_mobile.value,'23423')
-    }).finally(() => {
-
     })
 }
-// 切换登录方式
 const rightClick = () => {
   if (isAccountLogin.value){
     isResetCode.value = false
-    // 清除现有轮询
     if (pollingTimer.value) {
       clearInterval(pollingTimer.value)
       pollingTimer.value = null
@@ -402,14 +378,12 @@ const rightClick = () => {
     getQRCode()
   }else {
     isAccountLogin.value = !isAccountLogin.value
-    // 切换时清除轮询
     if (pollingTimer.value) {
       clearInterval(pollingTimer.value)
       pollingTimer.value = null
     }
   }
 }
-// 获取二维码
 const getQRCode = (reset) => {
   if (qrcodeDetail.value.timeoutTimer) {
     clearTimeout(qrcodeDetail.value.timeoutTimer)
@@ -419,17 +393,15 @@ const getQRCode = (reset) => {
       let result = res.data
       qrcodeDetail.value.text = result.data
       qrcodeDetail.value.id = result.id
-      // 添加5分钟（300000毫秒）后自动刷新
       qrcodeDetail.value.timeoutTimer = setTimeout(() => {
         handleQRCodeTimeout()
-      }, 3 * 60000) // 60000毫秒 = 1分钟
+      }, 3 * 60000)
-      console.log(result,'ggg')
       if (reset != 'reset'){
         isAccountLogin.value = !isAccountLogin.value
       }
       pollingTimer.value = setInterval(() => {
         getQRCodeStatus()
-      }, 5000) // 每5秒轮询一次
+      }, 5000)
     })
 }
 const getQRCodeStatus = () => {
@@ -451,29 +423,21 @@ const getQRCodeStatus = () => {
       })
       getIsJoin()
       getUserDetail()
-      // startTest()
     }
   })
 }
 const handleQRCodeTimeout = () => {
-  clearTimeout(qrcodeDetail.value.timeoutTimer) // 清除定时器
+  clearTimeout(qrcodeDetail.value.timeoutTimer)
   clearInterval(pollingTimer.value)
   pollingTimer.value = null
   isScanSucess.value = false
   isResetCode.value = true
-  // ElMessage({
-  //   message:  '二维码已过期，请点击刷新',
-  //   type: 'warning',
-  //   duration: 1200
-  // })
-  // showToast('二维码已过期，请点击刷新', 'warning')
-  // getQRCode() // 直接调用获取新二维码
 }
 const toResetCode = () => {
   isResetCode.value = false
-  getQRCode('reset') // 直接调用获取新二维码
+  getQRCode('reset')
 }
-const loginStatus = ref(false) // 登录状态
+const loginStatus = ref(false)
 onMounted(() => {
   if (localStorage.getItem('answerToken')){
     loginStatus.value = true
@@ -496,49 +460,60 @@ const navList = computed(() => {
       name:'考生入口',
       path: 'examGuide',
       routerName:'health',
-      children: [
+      children: []
-
-      ]
     },
     {
       name:'成绩查询/证书申请',
       path: 'examHomeReport',
       routerName:'health',
-      children: [
+      children: []
-
-      ]
     },
   ]
 })
 
-
 const router = useRouter()
 
 </script>
 
 <style scoped>
+/* 基础兼容 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 .exam-header-box{
   position: fixed;
   top:0;
-  z-index: 110;
+  z-index: 9999;
   width: 100%;
   background: #ffffff;
   padding: 28px 100px;
-
 }
 .exam-header-message{
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
   justify-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
 }
 .exam-header-message-left{
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
 }
-.exam-header-left-icon{
-  width: 157px;
-  height: 29px;
-}
 .exam-header-left-line{
   margin: 0 10px;
   width: 2px;
@@ -547,14 +522,18 @@ const router = useRouter()
 .exam-header-left-title{
   color: #409EFF;
   font-size: 20px;
-  font-style: normal;
   font-weight: 600;
-  line-height: normal;
   letter-spacing: 0.4px;
 }
 .exam-menu-box{
   margin-left: 120px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
 }
 .exam-menu-item{
@@ -562,10 +541,8 @@ const router = useRouter()
   margin-right: 100px;
   color: #0E0E0E;
   font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
   cursor: pointer;
+  white-space: nowrap;
 }
 .exam-entrance{
   position: absolute;
@@ -574,68 +551,63 @@ const router = useRouter()
   width: 56px;
   height: 22px;
 }
-
-
 .exam-menu-line{
   display: block;
   position: absolute;
   bottom: -10px;
   left: 50%;
+  -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   width: 0;
   height: 4px;
   opacity: 0;
+  -webkit-transition: all 0.6s ease;
   transition: all 0.6s ease;
   background-color: #409eff;
   border-radius: 10px;
-
 }
-.exam-menu-active i{
+.exam-menu-active .exam-menu-line{
-  display: block;
-  position: absolute;
-  bottom: -10px;
-  left: 50%;
-  transform: translateX(-50%);
   width: 100%;
-  height: 4px;
-  background-color: #409eff;
   opacity: 1;
-  border-radius: 10px;
-
 }
 .exam-menu-active div{
   color: #409EFF;
   font-weight: 600;
 }
-
 .exam-menu-item:hover .exam-menu-line{
   opacity: 1;
   width: 100%;
 }
 .exam-header-message-right{
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
+  position: relative;
+  z-index: 100;
 }
 .exam-header-right-search-box {
-  margin-right: 280px;
+  margin-right: 220px;
   position: relative;
-  width: 248px;
+  width: 320px;
-  height: 26px;
+  //height: 26px;
   padding: 12px 26px;
   background-color: #F5F5F5;
-  box-sizing: content-box;
   border-radius: 120px;
 }
-
 .search-icon {
   position: absolute;
   left: 20px;
   top: 50%;
+  -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   width: 16px;
   height: 16px;
 }
-
 .exam-header-right-search-box input {
   width: 100%;
   height: 100%;
@@ -645,20 +617,77 @@ const router = useRouter()
   outline: none;
 }
 .exam-header-right-login-btn{
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   padding: 12px 26px;
-  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
   justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
   border-radius: 37px;
   background: #409EFF;
   color: #FFF;
   font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
   cursor: pointer;
+  white-space: nowrap;
 }
+
+/* 登录用户下拉菜单 —— 核心修复 */
+.exam-user-wrapper {
+  position: relative;
+  z-index: 9999;
+}
+.ui-user-box{
+  position: relative;
+  z-index: 9999;
+}
+.ui-user-content{
+  display:-webkit-box;
+  display:-webkit-flex;
+  display:-ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  z-index: 9999;
+}
+.ui-user-box-icon{
+  width: 46px;
+  height: 46px;
+  margin-right: 10px;
+  border-radius:50%;
+  object-fit: cover;
+}
+.ui-user-box-title{
+  color: #0E0E0E;
+  font-size: 18px;
+  line-height: 1;
+}
+.ui-user-logout{
+  position: absolute;
+  top: 55px;
+  left: 0;
+  white-space: nowrap;
+  padding: 14px 30px;
+  color: #0E0E0E;
+  font-size: 16px;
+  border-radius: 6px;
+  background: #FFF;
+  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
+  cursor: pointer;
+  z-index: 99999;
+}
+
+/* 弹框 */
 .dialog-mask {
   position: fixed;
   top: 0;
@@ -666,56 +695,75 @@ const router = useRouter()
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
   justify-content: center;
-  z-index: 999;
+  z-index: 9999;
 }
-
 .dialog-box {
   position: relative;
   width: 475px;
   background: #fff;
   border-radius: 20px;
   padding: 50px;
+  z-index: 10000;
 }
-
 .dialog-title {
   font-size: 22px;
   font-weight: bold;
   margin-bottom: 30px;
   text-align: center;
 }
-
 .dialog-content {
-  margin-bottom: 50px;
+  margin-bottom: 30px;
   font-size: 18px;
   color:#0E0E0E;
-  font-weight: 400;
 }
-
 .dialog-btns {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
   justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
-
 }
-
 .dialog-btn {
   padding: 16px 0;
   border-radius: 10px;
   cursor: pointer;
   width: 172px;
-}
+  display: -webkit-box;
-.dialog-btn, .ui-btn,.ui-search-btn,.dialog-success-btn{
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
   justify-content: center;
-  &.disabled {
+}
+.dialog-btn.disabled {
   opacity: 0.7;
   pointer-events: none;
 }
-}
 .loading-spinner {
   width: 16px;
   height: 16px;
@@ -723,30 +771,18 @@ const router = useRouter()
   border: 2px solid #fff;
   border-top-color: transparent;
   border-radius: 50%;
+  -webkit-animation: spin 0.8s linear infinite;
   animation: spin 0.8s linear infinite;
 }
+@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } }
+@keyframes spin { to { transform: rotate(360deg); } }
 
-.loading-spinner-v2{
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  border: 2px solid #409EFF;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
 .cancel {
   border: 1px solid #409EFF;
   color: #409EFF;
   background: #fff;
   font-size: 18px;
 }
-
 .confirm {
   background: #409eff;
   color: #fff;
@@ -754,79 +790,60 @@ const router = useRouter()
   font-size: 18px;
 }
 .input-label {
-
   font-size: 14px;
   color: #0e0e0e;
   margin-bottom: 8px;
 }
 .login-input {
   margin: 0 0 15px;
-  input {
+}
+.login-input input {
   width: 100%;
   height: 56px;
   padding: 0 15px;
-    border: 1px solid #B2B3B5; /* 默认黑色边框 */
+  border: 1px solid #B2B3B5;
   border-radius: 10px;
   font-size: 14px;
-    /* 去除输入框默认样式 */
-    -webkit-appearance: none;
   outline: none;
-    /* 隐藏数字输入框箭头 */
-    &[type="number"] {
-      -moz-appearance: textfield;
-      &::-webkit-outer-spin-button,
-      &::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
 }
+.login-input input:focus {
+  border-color: #79BBFF;
 }
-    &:focus {
+.code-input {
-      border-color: #79BBFF; /* 输入时边框颜色 */
-    }
-  }
-
-  &.code-input {
   position: relative;
-
+}
 .get-code-btn {
   position: absolute;
   right: 10px;
   top: 50%;
+  -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   background: none;
   border: none;
-      color: #79BBFF; /* 按钮文字颜色 */
+  color: #79BBFF;
   padding: 0;
-
+  cursor: pointer;
-    }
-  }
 }
 
-.dialog-content {
+/* 二维码登录 */
-  margin-bottom: 30px;
+.ui-qrcode-card .ui-qrcode-title{
-  font-size: 14px;
-}
-.ui-qrcode-card{
-
-  .ui-qrcode-title{
   color: #0E0E0E;
   font-size: 22px;
   font-weight: 600;
+  text-align: center;
 }
-  .ui-qrcode-subtitle{
+.ui-qrcode-card .ui-qrcode-subtitle{
-    margin: 10px 0 10px;
+  margin: 10px 0;
   color: #66676C;
   text-align: center;
   font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
 }
 .ui-qrcode-box{
   position: relative;
   margin: 0 auto;
   width: 280px;
   height: 280px;
+}
 .ui-qrcode-mask{
   position: absolute;
   top: 0;
@@ -834,12 +851,26 @@ margin-bottom: 8px;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.5);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
   flex-direction: column;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
   justify-content: center;
-      z-index: 1001;
   cursor: pointer;
+  z-index: 1001;
+}
 .ui-qrcode-mask-icon{
   width: 40px;
   height: 38px;
@@ -847,14 +878,7 @@ margin-bottom: 8px;
 .ui-qrcode-mask-title{
   margin-top: 10px;
   color: #FFF;
-        text-align: center;
   font-size: 16px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-      }
-    }
-  }
 }
 .dialog-right-top{
   position: absolute;
@@ -867,7 +891,8 @@ margin-bottom: 8px;
   height: 70px;
   border-radius: 0 20px 0 0;
   cursor: pointer;
-  img{
+}
+.dialog-right-top-box img{
   width: 100%;
   height: 100%;
   border-radius: 0 20px 0 0;
@@ -876,65 +901,57 @@ margin-bottom: 8px;
   position: absolute;
   top: 20px;
   left: -72px;
-    display: flex;
   padding: 10px;
-    justify-content: center;
-    align-items: center;
   font-size: 16px;
   color: #fff;
   border-radius: 10px;
   background: #409EFF;
   z-index: 1000;
-    &::after {
+}
+.ui-dialog-right-tip::after {
   content: '';
   position: absolute;
   right: -14px;
   top: 50%;
+  -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   border-width: 8px;
   border-style: solid;
   border-color: transparent transparent transparent #409EFF;
 }
-  }
-}
 .dialog-scan-success{
   margin: 34px 0 0;
-
+  text-align: center;
+}
 .dialog-scan-success-title{
   margin-bottom: 10px;
   color: #0E0E0E;
-    text-align: center;
   font-size: 22px;
-    font-style: normal;
   font-weight: 600;
-    line-height: normal;
 }
 .dialog-scan-success-subtitle{
   color: #66676C;
-    text-align: center;
   font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-  }
 }
 .ui-dialog-contact-cancel{
   position: absolute;
   bottom:-64px;
   left: 50%;
+  -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   width:34px;
   height: 34px;
   cursor: pointer;
 }
+
+/* 成功弹窗 */
 .dialog-success-box{
-    display: flex;
   width: 574px;
   padding: 50px;
-    flex-direction: column;
-    align-items: center;
   border-radius: 20px;
   background: #FFF;
+  text-align: center;
+}
 .dialog-success-img{
   width: 130px;
   height: 116px;
@@ -951,69 +968,43 @@ margin-bottom: 8px;
   font-size: 18px;
 }
 .dialog-success-btns{
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
   justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
 }
 .dialog-success-btns-V1{
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
   justify-content: space-between;
   width: 400px;
+  margin: 0 auto;
 }
-
 .dialog-success-btn{
   padding: 16px 0;
   border-radius: 10px;
   cursor: pointer;
   width: 172px;
-    }
+  display: -webkit-box;
-}
+  display: -webkit-flex;
-
+  display: -ms-flexbox;
-.ui-user-box{
-    position: absolute;
-    top:38px;
-    right:100px;
-    height: 70px;
-    .ui-user-content{
   display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
-        position: relative;
+  -webkit-box-pack: center;
-        cursor: pointer;
+  -webkit-justify-content: center;
-    }
+  -ms-flex-pack: center;
-    .ui-user-box-icon{
-        width: 46px;
-        height: 46px;
-        margin-right: 10px;
-        border-radius:50%;
-        object-fit: cover;
-    }
-    .ui-user-box-title{
-        color: #0E0E0E;
-        font-size: 18px;
-        font-style: normal;
-        line-height: normal;
-    }
-    .ui-user-logout{
-        position: absolute;
-        top: 55px;
-        left: -20px;
-        display: inline-flex;
-        white-space: nowrap;
-        padding: 14px 30px;
-        flex-direction: column;
   justify-content: center;
-        align-items: center;
-        color: #0E0E0E;
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-        border-radius: 6px;
-        background:  #FFF;
-        box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);
-        cursor: pointer;
 }
-
-}
-
-
 </style>

src/components/pc/exam/examHome.vue

@@ -12,132 +12,104 @@ import 'swiper/css/scrollbar'
 import 'swiper/css/lazy'
 import 'swiper/css/autoplay'
 
-
 const router = useRouter()
 
-const modules = [Navigation, Pagination, Scrollbar, A11y, Lazy, Autoplay]
+const modules = [Navigation, Pagination, Scrollbar, A11y, Autoplay, Lazy]
-const onSwiper = (swiper) => {
+const onSwiper = (swiper) => {};
-};
 
-const swiperList = ref( [
+const swiperList = ref([])
-
-  ])
-//类型
 const typeIndex = ref(0)
 const typeList = ref([
-  {
+  { id:'all', name:'全部课程' },
-    id:'all',
-    name:'全部课程'
-  },
 ])
-const examList = ref([
+const examList = ref([])
-])
-// 展示联系二维码
 const flag = ref(false)
+const searchKeyword = ref('')
 
 const changeType = (item, index) => {
   typeIndex.value = index
   getList()
 }
+
 const goToBannerPath = (path, index) => {
-  console.log(path,'ppp')
+  if (path) location.href = path
-  if (path){
-    location.href = path
-  }
 }
+
 const goToPath = (path, row) => {
   localStorage.setItem('examType', typeIndex.value)
-    router.push({
+  router.push({ name: path, query:{id:row.id} })
-      name: path,
-      query:{id:row.id}
-    })
 }
+
 const getTypeList = () => {
   request.get(`/go/api/app/v2/exam/home`)
     .then(res => {
       let result = res.data
-      // examList.value = res.data
       swiperList.value = result.carousel_list
       typeList.value = [...typeList.value, ...result.paper_cate_list]
+
       if (localStorage.getItem('searchHome')) {
         searchKeyword.value = localStorage.getItem('searchHome')
-        console.log(searchKeyword.value,'searchKeyword')
         localStorage.removeItem('searchHome')
       }
       if (localStorage.getItem('examType')) {
-        typeIndex.value = localStorage.getItem('examType') * 1
+        typeIndex.value = Number(localStorage.getItem('examType'))
-        console.log(searchKeyword.value,'searchKeyword')
         localStorage.removeItem('examType')
       } else {
         typeIndex.value = 0
       }
       getList()
-
     })
 }
-const searchKeyword = ref('')
+
 const changeSearch = (e) => {
   searchKeyword.value = e
   getList()
 }
+
 const getList = () => {
-  request.get(`/go/api/app/v2/exam/paper/list?category_id=${typeIndex.value == 0 ? '' : typeList.value[typeIndex.value].id}&keyword=${searchKeyword.value}`)
+  let cid = typeIndex.value === 0 ? '' : typeList.value[typeIndex.value].id
+  request.get(`/go/api/app/v2/exam/paper/list?category_id=${cid}&keyword=${searchKeyword.value}`)
     .then(res => {
-      let result = res.data
       examList.value = res.data
-      // swiperList.value =result.carousel_list
-      // typeList.value = [...typeList.value,...result.paper_cate_list]
     })
 }
-// 新增时间格式化函数
+
-// 优化后的时间格式化函数
 const formatExamTime = (start, end) => {
   if (!start || !end) return null;
-
   const startDate = new Date(start);
   const endDate = new Date(end);
-
-  // 日期格式化为两位数
   const format = n => n.toString().padStart(2, '0');
 
-  // 分解日期组件
   const s = {
     y: startDate.getFullYear(),
     m: format(startDate.getMonth() + 1),
     d: format(startDate.getDate()),
-    t: startDate.toTimeString().substr(0,5)
+    t: startDate.toTimeString().slice(0,5)
   };
-
   const e = {
     y: endDate.getFullYear(),
     m: format(endDate.getMonth() + 1),
     d: format(endDate.getDate()),
-    t: endDate.toTimeString().substr(0,5)
+    t: endDate.toTimeString().slice(0,5)
   };
 
-  // 构建日期部分
   let datePart = '';
   if (s.y !== e.y) {
     datePart = `${s.y}-${s.m}-${s.d} ${s.t} 至 ${e.y}-${e.m}-${e.d} ${e.t}`;
-  } else if (s.m !== e.m) {
+  } else if (s.m !== e.m || s.d !== e.d) {
-    datePart = `${s.y}-${s.m}-${s.d} ${s.t} 至 ${e.m}-${e.d} ${e.t}`;
-  } else if (s.d !== e.d) {
     datePart = `${s.y}-${s.m}-${s.d} ${s.t} 至 ${e.m}-${e.d} ${e.t}`;
   } else {
     datePart = `${s.y}-${s.m}-${s.d}  ${s.t}-${e.t}`;
   }
-
+  return datePart;
-  return `${datePart}`;
 }
+
 onMounted(() => {
   window.addEventListener("scroll", () => {
-    // 获取滚动元素的滚动距离
+    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
-    let scrollTop =
+    flag.value = scrollTop > 300;
-      window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop;
-    // 判断回到顶部按钮的显示条件,如果滚动距离大于1000就显示
-    scrollTop > 300 ? (flag.value= true) : (flag.value = false);
   }, true);
-  typeIndex.value = -1
+  typeIndex.value = 0
   getTypeList()
 })
 </script>
@@ -147,31 +119,34 @@ onMounted(() => {
     <exam-header @search='changeSearch' :searchKeyword='searchKeyword'></exam-header>
     <div>
       <swiper
-      id="swiper"
+        id="banner-swiper"
         :modules="modules"
         :slides-per-view="1"
         :space-between="0"
         lazy
         loop
-      :autoplay="true"
+        :autoplay="{ delay: 3000, disableOnInteraction: false }"
-      @swiper="onSwiper"
+        :pagination="{ clickable: true }"
-      :pagination="{
-        clickable: true
-      }"
       >
-      <swiper-slide
+        <swiper-slide class="banner-swiper" v-for="(item, index) in swiperList" :key="index">
-        class="banner-swiper"
+          <img class="swiper-lazy" :src="item.pic" alt="轮播图" @click.stop="goToBannerPath(item.path,index)" />
-        v-for="(item, index) in swiperList"
-        :key="index"
-      >
-        <img class="swiper-lazy" :src="item.pic"  alt="轮播图"  @click.stop='goToBannerPath(item.path,index)' />
         </swiper-slide>
       </swiper>
+
       <div class='exam-home-type-box'>
         <div class='exam-home-type-list'>
-        <div class='exam-home-type-item' @click.stop='changeType(item,index)' :class='typeIndex == index ?"exam-home-type-item-active" : ""' v-for='(item,index) in typeList' :key='index'>{{item.name}}</div>
+          <div
+            class='exam-home-type-item'
+            @click.stop='changeType(item,index)'
+            :class='typeIndex === index ? "exam-home-type-item-active" : ""'
+            v-for='(item,index) in typeList'
+            :key='index'
+          >
+            {{item.name}}
           </div>
         </div>
+      </div>
+
       <div class='exam-home-list-box'>
         <div v-if='examList && examList.length > 0' class='exam-home-list-style'>
           <div class='exam-home-list-item' v-for='(item,index) in examList' :key='index' @click='goToPath("examDetail",item)'>
@@ -190,98 +165,139 @@ onMounted(() => {
           <div class='exam-empty-title'>敬请期待</div>
         </div>
       </div>
-    <div class='exam-home-wechat-icon' >
+
-      <img src='https://images.health.ufutx.com/202505/14/5b720a7d07e87354b96c2094d948bb9a.png' alt=''>
+      <div class="exam-home-wechat-icon" >
+        <img src="https://images.health.ufutx.com/202505/14/5b720a7d07e87354b96c2094d948bb9a.png" alt="客服二维码">
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
+/* 基础兼容，不影响任何外部样式 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 .exam-home{
   background: #f5f5f5;
   height: 100vh;
   overflow-y: auto;
-  scrollbar-width: none; /* Firefox */
+  scrollbar-width: none;
-  -ms-overflow-style: none; /* IE/Edge */
+  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none; /* Chrome/Safari/Opera */
 }
+.exam-home::-webkit-scrollbar {
+  display: none;
 }
-/* 顶部轮播图 */
+
-#swiper {
+/* 轮播 */
+#banner-swiper {
   padding-top: 100px;
   width: 100%;
   height: 708px;
+  position: relative;
+  z-index: 10;
 }
-
+.banner-swiper {
-#swiper .banner-swiper {
   width: 100%;
   height: 100%;
-  position: relative;
-  z-index: 1200;
 }
-
+.banner-swiper img {
-#swiper .banner-swiper img {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  display: block;
 }
+
+/* 分类导航 */
 .exam-home-type-box{
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   padding: 20px 0 20px 360px;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
   background: #FFF;
-    //backdrop-filter: blur(15px);
+  position: relative;
-    flex-shrink: 0;  /* 防止容器收缩 */
+  z-index: 1;
-
 }
 .exam-home-type-list{
   padding-bottom: 10px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
   flex-wrap: nowrap;
   width: 100%;
   overflow-x: auto;
-
 }
 .exam-home-type-item{
   margin-right: 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
-    padding: 12px 20px;
+  -webkit-box-align: center;
-    justify-content: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 12px 20px;
   border-radius: 100px;
   border: 1px solid #DDD;
   color: #0E0E0E;
   font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
   cursor: pointer;
-    flex-shrink: 0;  /* 防止单个项被压缩 */
+  white-space: nowrap;
 }
 .exam-home-type-item-active{
   background: #409EFF;
   color: #FFF;
-    border: 1px solid  #409EFF;
+  border-color: #409EFF;
 }
+
+/* 课程列表 */
 .exam-home-list-box{
   padding: 20px 360px 120px;
   width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   background: #F5F5F5;
+  position: relative;
+  z-index: 1;
 }
 .exam-home-list-style{
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
   flex-wrap: wrap;
 }
 .exam-home-list-item{
   margin-right: 20px;
-    border-radius: 10px;
   margin-bottom: 20px;
+  border-radius: 10px;
   cursor: pointer;
+  width: 386px;
+  overflow: hidden;
 }
 .exam-home-list-item:nth-child(3n){
   margin-right: 0;
@@ -291,69 +307,78 @@ onMounted(() => {
   height: 240px;
   border-radius: 10px 10px 0 0;
   object-fit: cover;
+  display: block;
 }
+
+/* 空状态 */
 .exam-empty-box{
   margin: 60px auto;
+  text-align: center;
+}
 .exam-empty-icon{
   margin-bottom: 20px;
   width: 147px;
   height: 121px;
+  display: block;
+  margin: 0 auto 20px;
 }
 .exam-empty-title{
   color: #0E0E0E;
-    text-align: center;
   font-size: 20px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-  }
 }
+
+/* 卡片内容 */
 .exam-home-list-message-box{
-    background: #ffffff;
+  background: #fff;
-    border-radius: 10px;
+  border-radius: 0 0 10px 10px;
 }
 .exam-home-list-message{
   padding: 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
   flex-direction: column;
-    justify-content: center;
+  gap: 10px;
-    align-items: flex-start;
   margin-top: -20px;
   border-radius: 10px;
-    background: rgba(255, 255, 255, 0.30);
+  background: rgba(255, 255, 255, 0.3);
+  -webkit-backdrop-filter: blur(12.5px);
   backdrop-filter: blur(12.5px);
-  overflow: hidden;
+  position: relative;
+  z-index: 2;
 }
 .exam-home-list-message-title{
-    height: 18px;
   color: #0E0E0E;
   font-size: 18px;
   font-weight: 600;
-    line-height: 18px;
   max-width: 340px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .exam-home-list-message-exam-time{
-    margin-top: 10px;
   color: #66676C;
   font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 16px;
 }
+
+/* ====================== 只在这里加最小限度的权重保证显示 ====================== */
 .exam-home-wechat-icon{
   position: fixed;
   right: 20px;
   bottom: 120px;
   width: 190px;
   height: 220px;
-    z-index: 101;
+  z-index: 999;
-    img{
+}
+.exam-home-wechat-icon img{
   width: 100%;
   height: 100%;
   object-fit: cover;
-    }
+  display: block;
 }
 </style>

src/components/pc/exam/examHomeReport.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, onUnmounted } from 'vue'
 import ExamHeader from '@/components/pc/exam/examHeader.vue'
 import request from '@/utils/request.js'
 import { useRouter } from 'vue-router'
@@ -12,157 +12,150 @@ import 'swiper/css/scrollbar'
 import 'swiper/css/lazy'
 import 'swiper/css/autoplay'
 
-
 const router = useRouter()
 
+// id 固定为 1，不修改
 const id = ref('1')
-const detail = ref(
+const detail = ref({
-  {
   id: '',
   title: '',
-    score_time_str:'' // 考试出成绩时间
+  score_time_str: '',
-  }
+  start_time_str: '',
-)
+  end_time_str: ''
-
+})
 
 const modules = [Navigation, Pagination, Scrollbar, A11y, Lazy, Autoplay]
-const onSwiper = (swiper) => {
+const swiperList = ref([])
-};
+const onSwiper = (swiper) => {}
 
-const swiperList = ref( [
-
-])
-const showReport = ref(false) // 是否参加考试
-
-//类型
 const typeIndex = ref(0)
-const typeList = ref([
+const typeList = ref([{ id: 'all', name: '全部课程' }])
-  {
+const examList = ref([])
-    id:'all',
+const searchKeyword = ref('')
-    name:'全部课程'
+
-  },
+const showReport = ref(false)
-])
+const reportStatus = ref(false)
-const examList = ref([
+const showTime = ref(0)
-])
-// 展示联系二维码
 const flag = ref(false)
 
+let scrollListener = null
+
+const goToBannerPath = (path) => {
+  location.href = path
+}
+
+const goToPath = (path, row) => {
+  router.push({ name: path, query: { id: row.id } })
+}
+
 const changeType = (item, index) => {
   typeIndex.value = index
   getList()
 }
-const goToBannerPath = (path,index) => {
+
-  console.log(path,'ppp')
+const changeSearch = (val) => {
-  location.href = path
+  searchKeyword.value = val
-}
+  getList()
-const goToPath = (path,row) => {
-  router.push({
-    name: path,
-    query:{id:row.id}
-  })
 }
+
 const getTypeList = () => {
-  request.get(`/go/api/app/v2/exam/home`)
+  request.get('/go/api/app/v2/exam/home')
     .then(res => {
-      let result = res.data
+      const result = res.data || {}
-      // examList.value = res.data
+      swiperList.value = result.carousel_list || []
-      swiperList.value =result.carousel_list
+      typeList.value = [...typeList.value, ...(result.paper_cate_list || [])]
-      typeList.value = [...typeList.value,...result.paper_cate_list]
       getList()
-
     })
+    .catch(err => console.error('首页数据请求失败', err))
 }
-const searchKeyword = ref('')
+
-const changeSearch = (e) => {
-  searchKeyword.value = e
-  getList()
-}
 const getList = () => {
-  request.get(`/go/api/app/v2/exam/paper/list?category_id=${typeIndex.value == 0 ? '' : typeList.value[typeIndex.value].id}&keyword=${searchKeyword.value}`)
+  const categoryId = typeIndex.value === 0 ? '' : typeList.value[typeIndex.value].id
+  request.get(`/go/api/app/v2/exam/paper/list?category_id=${categoryId}&keyword=${searchKeyword.value}`)
     .then(res => {
-      let result = res.data
+      examList.value = res.data || []
-      examList.value = res.data
-      // swiperList.value =result.carousel_list
-      // typeList.value = [...typeList.value,...result.paper_cate_list]
     })
+    .catch(err => console.error('试卷列表请求失败', err))
 }
-// 新增时间格式化函数
+
 const formatExamTime = (start, end) => {
-  if (!start || !end) return null;
+  if (!start || !end) return '--'
+  const startDate = new Date(start)
+  const endDate = new Date(end)
+  if (isNaN(startDate) || isNaN(endDate)) return '--'
 
-  const startDate = new Date(start);
+  const year = startDate.getFullYear()
-  const endDate = new Date(end);
+  const month = String(startDate.getMonth() + 1).padStart(2, '0')
+  const day = String(startDate.getDate()).padStart(2, '0')
+  const startTime = startDate.toTimeString().substring(0, 5)
+  const endTime = endDate.toTimeString().substring(0, 5)
 
-  const year = startDate.getFullYear();
+  return `${year}年${month}月${day}日 ${startTime}-${endTime}`
-  const month = startDate.getMonth() + 1;
-  const day = startDate.getDate();
-
-  const startTime = startDate.toTimeString().substring(0, 5);
-  const endTime = endDate.toTimeString().substring(0, 5);
-
-  return `${year}年${month}月${day}日 ${startTime}-${endTime}`;
 }
-const reportStatus = ref(false) // 是否参加了考试
+
-const showTime = ref() // 距离出成绩时间
+const safeDateParse = (dateString) => {
-const safeDateParse = (dateString) => { //日期校验
+  const date = new Date(dateString)
-  console.log(dateString,'dateString==')
+  return isNaN(date) ? null : date
-  const date = new Date(dateString);
+}
-  return isNaN(date) ? null : date;
+
-};
+// 查询成绩，固定使用 id.value = '1'
-const getIsJoin = (id) => {
+const getIsJoin = () => {
-  const scoreDate = safeDateParse(detail.value.score_time_str);
+  const scoreDate = safeDateParse(detail.value.score_time_str)
-  console.log(scoreDate,scoreDate > new Date(),'33')
+  const now = new Date()
-  if (!scoreDate || scoreDate > new Date()){
+
-    const timeDiff = Math.ceil((scoreDate - new Date()) / (1000 * 60 * 60 * 24));
+  if (!scoreDate || scoreDate > now) {
-    showTime.value = timeDiff > 0 ? timeDiff : 0;
+    const timeDiff = Math.ceil((scoreDate - now) / (1000 * 60 * 60 * 24))
+    showTime.value = Math.max(timeDiff, 0)
+    reportStatus.value = false
     showReport.value = true
     return
   }
-  request.get(`go/api/app/v2/exam/paper/${id}/answer`)
+
+  request.get(`/go/api/app/v2/exam/paper/${id.value}/answer`)
     .then(res => {
-      if (res.data.id != 0 && res.data.score && res.data.score.length >1){
+      const data = res.data || {}
-        router.push({
+      if (data.id !== 0 && data.score && data.score.toString().length > 1) {
-          name:'reportCard'
+        router.push({ name: 'reportCard' })
-        })
       } else {
-        if (res.data.id == 0){
+        reportStatus.value = data.id === 0
-          reportStatus.value = true
-        }else {
-          reportStatus.value = false
-        }
         showReport.value = true
       }
-      console.log(res,'r===')
+    })
+    .catch(err => {
+      console.error('成绩查询失败', err)
     })
 }
+
 const getDetail = () => {
   request.get(`/go/api/app/v2/exam/paper/${id.value}/detail`)
     .then(res => {
-      let result = res.data
+      detail.value = res.data || {}
-      detail.value = res.data
-      // detail.value.score_time_str = '2025-05-31 09:00:00'
-      console.log(detail.value,'rrr')
     })
+    .catch(err => console.error('试卷详情请求失败', err))
 }
 
 onMounted(() => {
-  window.addEventListener("scroll", () => {
+  scrollListener = () => {
-    // 获取滚动元素的滚动距离
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
-    let scrollTop =
+    flag.value = scrollTop > 300
-      window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop;
+  }
-    // 判断回到顶部按钮的显示条件,如果滚动距离大于1000就显示
+  window.addEventListener('scroll', scrollListener, true)
-    scrollTop > 300 ? (flag.value= true) : (flag.value = false);
+
-  }, true);
   getTypeList()
   getDetail()
+})
 
+onUnmounted(() => {
+  if (scrollListener) {
+    window.removeEventListener('scroll', scrollListener, true)
+  }
 })
 </script>
 
 <template>
-  <div class='exam-home'>
+  <div class="exam-home">
-    <exam-header :menu-index="'2'" @search='changeSearch'></exam-header>
+    <exam-header :menu-index="'2'" @search="changeSearch"></exam-header>
-    <div>
+
     <swiper
       id="swiper"
       :modules="modules"
@@ -170,68 +163,141 @@ onMounted(() => {
       :space-between="0"
       lazy
       loop
-        :autoplay="true"
+      :autoplay="{ delay: 3000, disableOnInteraction: false }"
       @swiper="onSwiper"
-        :pagination="{
+      :pagination="{ clickable: true }"
-        clickable: true
-      }"
     >
       <swiper-slide
         class="banner-swiper"
         v-for="(item, index) in swiperList"
         :key="index"
       >
-          <img class="swiper-lazy" :src="item.pic"  alt="轮播图"  @click.stop='goToBannerPath(item.path,index)' />
+        <img
-          <!--        <div class="swiper-lazy-preloader"></div>-->
+          class="swiper-lazy"
-          <!--        <div class="swiper-slide-title">-->
+          :src="item.pic"
-          <!--          <h1>{{ item.title }}</h1>-->
+          alt="轮播图"
-          <!--          <div class='swiper-slide-more' v-if='index != 0'>-->
+          @click.stop="goToBannerPath(item.path)"
-          <!--            <p >{{ item.content }}</p>-->
+        />
-          <!--            <img src='https://image.fulllinkai.com/202406/26/2518a5c6cc6f91cd901ee273dbd07429.png' alt=''>-->
-          <!--          </div>-->
-
-          <!--        </div>-->
-          <!--        <div class='ui-swiper-line'></div>-->
-          <!--        <div class='ui-swiper-bottom-mask'></div>-->
       </swiper-slide>
     </swiper>
-      <div class='check-box'>
+
-        <div class='check-title'>{{detail.title}}</div>
+    <div class="check-box">
-        <div class='check-subtitle'>考试时间：{{ formatExamTime(detail.start_time_str,detail.end_time_str) || '--' }}</div>
+      <div class="check-title">{{ detail.title || '暂无考试名称' }}</div>
-        <div class='check-btn' @click='getIsJoin(1)'>
+      <div class="check-subtitle">
+        考试时间：{{ formatExamTime(detail.start_time_str, detail.end_time_str) }}
+      </div>
+      <div class="check-btn" @click="getIsJoin">
         <div>查询成绩</div>
-          <svg class='check-btn-icon' xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 24 23" fill="none">
+        <svg
-            <path d="M13.131 4.71216L19.9192 11.5004M19.9192 11.5004L13.131 18.2886M19.9192 11.5004H4.34277" stroke="white" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
+          class="check-btn-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="23"
+          viewBox="0 0 24 23"
+          fill="none"
+        >
+          <path
+            d="M13.131 4.71216L19.9192 11.5004M19.9192 11.5004L13.131 18.2886M19.9192 11.5004H4.34277"
+            stroke="white"
+            stroke-width="0.8"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
         </svg>
       </div>
     </div>
-    </div>
+
-    <div class="dialog-mask" v-if="showReport">
+    <div class="dialog-mask" v-if="showReport" @click.self="showReport = false">
       <div class="dialog-success-box text-center">
-        <svg xmlns="http://www.w3.org/2000/svg" width="90" height="100" viewBox="0 0 90 100" fill="none" class="dialog-success-img">
+        <svg
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M0 29.9959C0 24.4841 4.46197 20.0221 9.97381 20.0221H69.9667C75.4785 20.0221 79.978 24.4841 79.978 29.9959V89.9888C79.978 95.5006 75.4785 100 69.9667 100H9.97381C4.46197 100 0 95.5006 0 89.9888V29.9959Z" fill="url(#paint0_linear_571_2865)"/>
+          xmlns="http://www.w3.org/2000/svg"
-          <path d="M13.7358 64.0142H30.7358" stroke="white" stroke-width="8" stroke-linecap="round"/>
+          width="90"
-          <path d="M13.7358 80.0142H38.7358" stroke="white" stroke-width="8" stroke-linecap="round"/>
+          height="100"
-          <path d="M10.0107 20.0224H70.0036C70.0036 14.4731 65.5042 10.0111 59.9923 10.0111H20.0221C14.4727 10.0111 10.0107 14.4731 10.0107 20.0224Z" fill="url(#paint1_linear_571_2865)"/>
+          viewBox="0 0 90 100"
-          <foreignObject x="14.883" y="-29.3386" width="104.706" height="104.706"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(15.29px);clip-path:url(#bgblur_0_571_2865_clip_path);height:100%;width:100%"></div></foreignObject><circle data-figma-bg-blur-radius="30.5882" cx="67.2358" cy="23.0143" r="20" fill="#FF2946" stroke="white" stroke-width="3.52941"/>
+          fill="none"
-          <path d="M66.9977 34.8117C65.6137 34.8117 64.4917 33.6898 64.4917 32.3058C64.4917 30.9217 65.6137 29.7998 66.9977 29.7998C68.3817 29.7998 69.5036 30.9217 69.5036 32.3058C69.5036 33.6898 68.3817 34.8117 66.9977 34.8117Z" fill="white"/>
+          class="dialog-success-img"
-          <path d="M66.9974 27.5441C65.8094 27.5441 64.8464 26.581 64.8464 25.393V15.3692C64.8464 14.1812 65.8094 13.2181 66.9974 13.2181C68.1854 13.2181 69.1485 14.1812 69.1485 15.3692V25.393C69.1485 26.581 68.1854 27.5441 66.9974 27.5441Z" fill="white"/>
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M0 29.9959C0 24.4841 4.46197 20.0221 9.97381 20.0221H69.9667C75.4785 20.0221 79.978 24.4841 79.978 29.9959V89.9888C79.978 95.5006 75.4785 100 69.9667 100H9.97381C4.46197 100 0 95.5006 0 89.9888V29.9959Z"
+            fill="url(#paint0_linear_571_2865)"
+          />
+          <path
+            d="M13.7358 64.0142H30.7358"
+            stroke="white"
+            stroke-width="8"
+            stroke-linecap="round"
+          />
+          <path
+            d="M13.7358 80.0142H38.7358"
+            stroke="white"
+            stroke-width="8"
+            stroke-linecap="round"
+          />
+          <path
+            d="M10.0107 20.0224H70.0036C70.0036 14.4731 65.5042 10.0111 59.9923 10.0111H20.0221C14.4727 10.0111 10.0107 14.4731 10.0107 20.0224Z"
+            fill="url(#paint1_linear_571_2865)"
+          />
+          <foreignObject
+            x="14.883"
+            y="-29.3386"
+            width="104.706"
+            height="104.706"
+          >
+            <div
+              xmlns="http://www.w3.org/1999/xhtml"
+              style="backdrop-filter:blur(15.29px);clip-path:url(#bgblur_0_571_2865_clip_path);height:100%;width:100%"
+            ></div>
+          </foreignObject>
+          <circle
+            data-figma-bg-blur-radius="30.5882"
+            cx="67.2358"
+            cy="23.0143"
+            r="20"
+            fill="#FF2946"
+            stroke="white"
+            stroke-width="3.52941"
+          />
+          <path
+            d="M66.9977 34.8117C65.6137 34.8117 64.4917 33.6898 64.4917 32.3058C64.4917 30.9217 65.6137 29.7998 66.9977 29.7998C68.3817 29.7998 69.5036 30.9217 69.5036 32.3058C69.5036 33.6898 68.3817 34.8117 66.9977 34.8117Z"
+            fill="white"
+          />
+          <path
+            d="M66.9974 27.5441C65.8094 27.5441 64.8464 26.581 64.8464 25.393V15.3692C64.8464 14.1812 65.8094 13.2181 66.9974 13.2181C68.1854 13.2181 69.1485 14.1812 69.1485 15.3692V25.393C69.1485 26.581 68.1854 27.5441 66.9974 27.5441Z"
+            fill="white"
+          />
           <defs>
-            <clipPath id="bgblur_0_571_2865_clip_path" transform="translate(-14.883 29.3386)"><circle cx="67.2358" cy="23.0143" r="20"/>
+            <clipPath id="bgblur_0_571_2865_clip_path" transform="translate(-14.883 29.3386)">
-            </clipPath><linearGradient id="paint0_linear_571_2865" x1="39.989" y1="34.0049" x2="39.989" y2="100" gradientUnits="userSpaceOnUse">
+              <circle cx="67.2358" cy="23.0143" r="20" />
+            </clipPath>
+            <linearGradient
+              id="paint0_linear_571_2865"
+              x1="39.989"
+              y1="34.0049"
+              x2="39.989"
+              y2="100"
+              gradientUnits="userSpaceOnUse"
+            >
               <stop stop-color="#409EFF" />
               <stop offset="1" stop-color="#409EFF" stop-opacity="0.3" />
             </linearGradient>
-            <linearGradient id="paint1_linear_571_2865" x1="40.0072" y1="11.7614" x2="40.0072" y2="20.0224" gradientUnits="userSpaceOnUse">
+            <linearGradient
+              id="paint1_linear_571_2865"
+              x1="40.0072"
+              y1="11.7614"
+              x2="40.0072"
+              y2="20.0224"
+              gradientUnits="userSpaceOnUse"
+            >
               <stop stop-color="#409EFF" />
               <stop offset="1" stop-color="#409EFF" stop-opacity="0.3" />
             </linearGradient>
           </defs>
         </svg>
-<!--        <img src="https://images.health.ufutx.com/202504/17/2ee13769aa745d646d4951179ade3419.png" alt="" class="dialog-success-img" />-->
         <div class="dialog-success-title">温馨提示</div>
         <div class="dialog-success-content">
-          {{ reportStatus ? '未参加考试' : '距离出成绩时间还有' + showTime +'天，请耐心等待' }}
+          {{ reportStatus ? '未参加考试' : `距离出成绩时间还有 ${showTime} 天，请耐心等待` }}
         </div>
         <div class="dialog-success-btns">
           <div class="dialog-success-btn confirm" @click="showReport = false">
@@ -246,68 +312,70 @@ onMounted(() => {
 <style scoped>
 .exam-home {
   background: #ffffff;
-  height: 100vh;
+  min-height: 100vh;
-
 }
-/* 顶部轮播图 */
+
 #swiper {
   padding-top: 100px;
   width: 100%;
   height: 708px;
 }
 
-#swiper .banner-swiper {
+.banner-swiper {
   width: 100%;
   height: 100%;
   position: relative;
-  z-index: 1200;
 }
 
-#swiper .banner-swiper img {
+.banner-swiper img {
   width: 100%;
   height: 100%;
+  object-fit: cover;
 }
+
 .check-box {
   margin: 90px auto;
   display: flex;
   flex-direction: column;
   align-items: center;
-  .check-title{
-    color: #0E0E0E;
-    font-size: 28px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: normal;
 }
+
+.check-title {
+  color: #0e0e0e;
+  font-size: 28px;
+  font-weight: 600;
+}
+
 .check-subtitle {
   margin: 26px 0;
-    color: #66676C;
+  color: #66676c;
   font-size: 18px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
 }
+
 .check-btn {
   margin-bottom: 150px;
   display: flex;
-    padding: 16px 32px;
   align-items: center;
   gap: 6px;
+  padding: 16px 32px;
   border-radius: 10px;
-    background:  #409EFF;
+  background: #409eff;
-    color: #FFF;
+  color: #fff;
   font-size: 18px;
-    font-style: normal;
   font-weight: 500;
-    line-height: normal;
   cursor: pointer;
+  transition: opacity 0.3s;
+}
+
+.check-btn:hover {
+  opacity: 0.9;
+}
+
 .check-btn-icon {
-      margin-left: 6px;
   width: 24px;
   height: 23px;
 }
-  }
+
-}
 .dialog-mask {
   position: fixed;
   top: 0;
@@ -320,46 +388,48 @@ onMounted(() => {
   justify-content: center;
   z-index: 999;
 }
+
 .dialog-success-box {
-  display: flex;
   width: 574px;
   padding: 50px;
+  display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 20px;
-  background: #FFF;
+  background: #fff;
+}
+
 .dialog-success-img {
   width: 130px;
   height: 116px;
 }
+
 .dialog-success-title {
-    margin: 50px auto 30px;
+  margin: 50px 0 30px;
-    color: #0E0E0E;
+  color: #0e0e0e;
   font-size: 22px;
   font-weight: 600;
 }
+
 .dialog-success-content {
   margin-bottom: 50px;
-    color:#0E0E0E;
+  color: #0e0e0e;
   font-size: 18px;
+  text-align: center;
 }
-  .dialog-success-btns{
+
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
 .dialog-success-btn {
   padding: 16px 0;
   border-radius: 10px;
-    cursor: pointer;
   width: 172px;
-  }
+  cursor: pointer;
+  text-align: center;
+  font-size: 18px;
 }
 
 .confirm {
   background: #409eff;
   color: #fff;
   border: 1px solid #409eff;
-  font-size: 18px;
 }
 </style>

src/components/pc/exam/onlineTest.vue

@@ -527,51 +527,89 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+/* 全局重置与基础设置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 .onlineTest {
   background: #F5F5F5;
   width: 100vw;
   height: 100vh;
   font-weight: 400;
   line-height: normal;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+/* 头部样式 */
 .ui-joinUs-bg {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
   justify-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
   width: 100%;
   padding: 20px 30px;
   margin-bottom: 96px;
   background: #ffffff;
+  border-bottom: 1px solid #eee; /* 增加视觉边界 */
+}
 .ui-JoinUs-left-title {
   color: #0E0E0E;
   font-size: 18px;
-      font-style: normal;
   font-weight: 600;
-      line-height: normal;
 }
 .ui-right-user {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
-      justify-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
   width: 262px;
   color: #0E0E0E;
+  gap: 10px;
+}
 .user {
   font-size: 14px;
   font-weight: 600;
   max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .test-out {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   padding: 8px 16px;
-        justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   border-radius: 6px;
   border: 0.5px solid #B2B3B5;
   background: #FFF;
   font-weight: 400;
   cursor: pointer;
+  font-size: 14px;
 }
-    }
+
-  }
+/* 答题卡面板 */
 .answer-card {
   position: fixed;
   left: 336px;
@@ -580,20 +618,37 @@ onBeforeUnmount(() => {
   height: 840px;
   padding: 12px;
   background: #ffffff;
+  border: 1px solid #eee;
+}
 .a-c-title {
-      padding: 10px 10px;
+  padding: 10px;
   background: #f5f5f5;
+  font-weight: bold;
+  font-size: 14px;
 }
 .a-c-default {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
-      justify-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
   padding: 0 10px 10px;
   background: #f5f5f5;
   margin-bottom: 20px;
+  font-size: 12px;
+  gap:10px;
+}
 .default-box {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   align-items: center;
+  //margin-right: 10px;
+}
 .default-box-border {
   margin-right: 6px;
   width: 14px;
@@ -607,19 +662,26 @@ onBeforeUnmount(() => {
 }
 .default-box-border-v2 {
   border-radius: 4px;
-          border: 1px solid var(--3578-f-2, #409EFF);
+  border: 1px solid #409EFF; /* 修复：去掉了var */
-          background: var(--color-primary-light-9, #ECF5FF);
+  background: #ECF5FF; /* 修复：去掉了var */
-        }
-      }
 }
+
+/* 题目列表 */
 .a-c-list-title {
   color: #0E0E0E;
+  font-size: 14px;
+  margin-top: 10px;
 }
 .a-c-list-box {
   margin-top: 10px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+
+}
 .a-c-list-box-item {
   margin-right: 10px;
   margin-bottom: 10px;
@@ -628,23 +690,31 @@ onBeforeUnmount(() => {
   border-radius: 3px;
   border: 0.5px solid #B2B3B5;
   color: #B2B3B5;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
   justify-content: center;
   cursor: pointer;
-        &:nth-child(5n){
+  font-size: 12px;
+}
+.a-c-list-box-item:nth-child(5n){
   margin-right: 0;
 }
-      }
-
 .a-c-list-box-select {
-        border: 0.5px solid #409EFF;
+  border: 0.5px solid #409EFF; /* 修复：去掉了var */
-        color: #409EFF;
+  color: #409EFF; /* 修复：去掉了var */
-        background: #ECF5FF;
+  background: #ECF5FF; /* 修复：去掉了var */
-      }
 }
 
-  }
+/* 时间卡片面板 */
 .time-card {
   position: fixed;
   left: 1432px;
@@ -654,17 +724,29 @@ onBeforeUnmount(() => {
   padding: 12px;
   background: #ffffff;
   text-align: center;
+  border: 1px solid #eee;
+}
 .time-card-sub-title {
   margin: 8px 0;
   color: #66676C;
+  font-size: 12px;
 }
 .time-card-time {
   margin-top: 8px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: end;
+  -webkit-align-items: flex-end;
+  -ms-flex-align: end;
   align-items: flex-end;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
   justify-content: center;
   gap: 2px;
-
+}
 .number {
   font-size: 24px;
   color: #FF2946;
@@ -676,33 +758,30 @@ onBeforeUnmount(() => {
   position: relative;
   top: -2px;
 }
-    }
 .time-card-time-all {
   margin-top: 8px;
   color: #66676C;
   font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: normal;
 }
 .time-card-line {
   margin: 30px 0;
   width: 156px;
   height: 1px;
-      background: rgba(221, 221, 221,.5);
+  background: rgba(221, 221, 221, 0.5);
-
 }
 .time-card-process {
   width: 156px;
   height: 4px;
   border-radius: 10px;
   background: #EBEBEB;
+  overflow: hidden;
 }
 .time-card-process-v2 {
-      width:156px;
+  width: 0; /* 默认0，由JS控制 */
   height: 4px;
   border-radius: 10px;
-      background: #409EFF;
+  background: #409EFF; /* 修复：去掉了var */
+  transition: width 0.3s;
 }
 .time-btn {
   margin: 30px auto;
@@ -711,43 +790,65 @@ onBeforeUnmount(() => {
   color: #fff;
   font-size: 18px;
   border-radius: 6px;
-      border: 0.5px solid #409EFF;
+  border: 0.5px solid #409EFF; /* 修复：去掉了var */
-      background:  #409EFF;
+  background: #409EFF; /* 修复：去掉了var */
   cursor: pointer;
 }
 .font-size-selector {
-      margin-bottom: 60px;
+  margin: 20px auto;
+  width: 150px;
+}
 .font-size-line-box {
   margin-top: 26px;
   position: relative;
+  width: 100%;
+  text-align: center;
+}
 .font-size-line {
   width: 150px;
   height: 2px;
   background: #EBEBEB;
+  margin: 0 auto;
 }
 .font-size-box {
   position: absolute;
   top: -5px;
+  left: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
   justify-content: space-between;
   width: 100%;
-
+}
 .font-size-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
   flex-direction: column;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
   cursor: pointer;
+}
 .font-size-item-icon {
   margin-bottom: 6px;
   width: 12px;
   height: 12px;
   background: #ffffff;
+  border: 1px solid #ddd;
 }
-          }
+
-        }
+/* 答题区 */
-      }
-    }
-  }
 .answer-box {
   position: fixed;
   left: 529px;
@@ -756,59 +857,64 @@ onBeforeUnmount(() => {
   height: 840px;
   padding: 12px;
   background: #ffffff;
-    .answer-scroll{
+  border: 1px solid #eee;
-      height: 790px;
-      padding-bottom: 30px;
-      overflow-y: auto;
-      scrollbar-width: none; /* Firefox 64+ */
-      -ms-overflow-style: none; /* IE 和 Edge */
-      font-size: 14px;
-    }
-    .answer-scroll::-webkit-scrollbar {
-      display: none;
 }
 .answer-box-title {
   padding: 6px 10px;
   background: #f5f5f5;
+  font-weight: bold;
 }
+.answer-scroll {
+  height: 790px;
+  padding-bottom: 30px;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  font-size: 14px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  background: #fff;
+}
+.answer-scroll::-webkit-scrollbar {
+  display: none;
 }
-  .ui-title{
-    margin-top: 30px;
 
+/* 题目样式 */
+.ui-title {
+  margin: 30px 10px 10px;
+  padding: 0 10px;
+  font-size: 16px;
+  color: #333;
+  line-height: 1.5;
 }
 .ui-answer-list {
+  margin: 0 10px;
   border-radius: 10px;
+}
 .ui-answer-list-box {
   margin-top: 10px;
   cursor: pointer;
+}
 .ui-answer-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
-
+  padding: 8px 0;
+  border-bottom: 1px dashed #eee;
+}
 .ui-check-box {
   margin-right: 10px;
   width: 16px;
   height: 16px;
   vertical-align: center;
 }
-        div{
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-      }
 
-    }
+/* 弹窗样式 (修复了原代码中的语法错误) */
-    .ui-answer-list-box:last-child{
-      border-bottom:none;
-    }
-  }
-  .font12{
-    font-size: 12px;
-  }
-  .font14{
-    font-size: 14px;
-  }
 .dialog-mask {
   position: fixed;
   top: 0;
@@ -816,63 +922,155 @@ onBeforeUnmount(() => {
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
   justify-content: center;
-    z-index: 999;
+  z-index: 9999;
 }
-
 .dialog-box {
   width: 500px;
   background: #fff;
   border-radius: 20px;
   padding: 50px;
+  -webkit-box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
 }
-
 .dialog-title {
   font-size: 22px;
   font-weight: bold;
   margin-bottom: 30px;
+  color: #333;
 }
-
 .dialog-content {
   margin-bottom: 50px;
   font-size: 18px;
   color: #0E0E0E;
+  line-height: 1.6;
 }
-
 .dialog-btns {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
   justify-content: space-between;
 }
-
 .dialog-btn {
   padding: 16px 50px;
   border-radius: 10px;
   cursor: pointer;
+  border: none;
+  font-size: 18px;
+  font-weight: 500;
+  transition: all 0.2s;
 }
-
 .cancel {
   border: 1px solid #409EFF;
   color: #409EFF;
   background: #fff;
-    font-size: 18px;
+}
+.confirm {
+  background: #409EFF; /* 修复：去掉了var */
+  color: #fff;
+  border: 1px solid #409EFF; /* 修复：去掉了var */
+}
+.confirm:hover {
+  background: #337ecc;
+  border-color: #337ecc;
 }
 
-  .confirm {
+/* Toast 提示 */
-    background: #409eff;
+.toast-mask {
-    color: #fff;
+  position: fixed;
-    border: 1px solid #409eff;
+  top: 100px;
-    font-size: 18px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10000;
 }
+.toast-box {
+  padding: 12px 24px;
+  background: rgba(231, 245,224, 0.9);
+  color: #6bc340;
+  border-radius: 4px;
+  font-size: 14px;
+  border: 1px solid #6bc340;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+/* 时间警告 */
+.time-warning {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 12px;
+  background: #FF2946;
+  color: white;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+  z-index: 10000;
+  animation: blink 1s infinite alternate;
+}
+
+/* 加载动画 (保留关键帧) */
+@keyframes blink {
+  from { opacity: 1; }
+  to { opacity: 0.8; }
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* 修复：将 user-select 单独提取，避免语法错误 */
+.unselectable {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* 按钮禁用状态 */
+.dialog-btn.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* 提交成功弹窗样式 */
 .dialog-success-box {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   width: 574px;
   padding: 50px;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
   flex-direction: column;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
   border-radius: 20px;
   background: #FFF;
+  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
 .dialog-success-img {
   width: 130px;
   height: 116px;
@@ -887,94 +1085,31 @@ onBeforeUnmount(() => {
   margin-bottom: 50px;
   color: #0E0E0E;
   font-size: 18px;
+  line-height: 1.5;
 }
 .dialog-success-btns {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
   justify-content: center;
-      align-items: center;
+  width: 100%;
 }
 .dialog-success-btn {
   padding: 16px 0;
   border-radius: 10px;
   cursor: pointer;
   width: 172px;
+  font-size: 18px;
+  border: none;
+  background: #409EFF;
+  color: #fff;
+  font-weight: 500;
 }
+.dialog-success-btn:hover {
+  background: #337ecc;
 }
-  .toast-mask {
-    position: fixed;
-    top: 100px;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 1000;
-
-    .toast-box {
-      padding: 12px 24px;
-      background: rgba(231, 245, 224, 0.7);
-      color: #6bc340;
-      border-radius: 4px;
-      font-size: 14px;
-      border: 1px solid #6bc340;
-      animation: fadeInOut 2s;
-    }
-  }
-  .time-warning {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding: 12px;
-    background: #FF2946;
-    color: white;
-    text-align: center;
-    font-size: 16px;
-    font-weight: bold;
-    z-index: 1000;
-    animation: blink 1s infinite alternate;
-  }
-  .loading-spinner {
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
-    border: 2px solid #fff;
-    border-top-color: transparent;
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-  }
-
-  .dialog-btn, .dialog-success-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &.disabled {
-      opacity: 0.7;
-      pointer-events: none;
-    }
-  }
-
-  .unselectable {
-    -moz-user-select: -moz-none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-  }
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-@keyframes blink {
-  from { opacity: 1; }
-  to { opacity: 0.8; }
-}
-
-@keyframes fadeInOut {
-  0%,100% { opacity: 0; }
-  20%,80% { opacity: 1; }
-}
-
-
 </style>

src/components/pc/exam/reportCard.vue

@@ -1,5 +1,4 @@
 <script setup>
-
 import { onMounted, ref } from 'vue'
 import CustomSelect from '../../CustomSelect.vue'
 import ImageUploader from '../../upload/imageUpload.vue'
@@ -7,10 +6,13 @@ import ImageCropperUpload from '../../upload/ImageCropperUpload.vue'
 import { useRouter } from 'vue-router'
 import request from '@/utils/request.js'
 import { ElMessage } from 'element-plus'
+
 const router = useRouter()
 
-const id = ref('')
+// 强制固定 ID = 1，不修改
+const id = ref('1')
 const loadingStatus = ref(false)
+
 // 用户信息
 const userDetail = ref({
   user: {}
@@ -18,9 +20,10 @@ const userDetail = ref({
 const applyDetail = ref({
   certificatePhoto: ''
 })
-const showApply = ref(false) // 提交弹窗
+const showApply = ref(false)
 const showErrorMessage = ref('')
 const applyLoading = ref(false)
+
 const cardType = ref([
   { value: '1', label: '居民身份证' },
   { value: '2', label: '台湾居民来往内地通行证' },
@@ -29,10 +32,11 @@ const cardType = ref([
 
 // 联系客服
 const showContact = ref(false)
-const contactLoading = ref(false)
 // 提交成功弹窗
 const successModal = ref(false)
 const isSuccessSubmitting = ref(false)
+// 查看证书
+const showCertificate = ref(false)
 
 const successSubmit = () => {
   isSuccessSubmitting.value = true
@@ -46,134 +50,137 @@ const toShowApply = () => {
   showErrorMessage.value = ''
   getUserPhone()
 }
-const getUserPhone = () => {
-  request.get(`go/api/app/user/info/exam/card/photo`)
-    .then(res => {
-      let result = res.data
 
+// 获取证件信息
+const getUserPhone = () => {
+  request.get(`/go/api/app/user/info/exam/card/photo`)
+    .then(res => {
+      const result = res.data || {}
       applyDetail.value = {
         id: result.id,
-        name: result.name,
+        name: result.name || '',
         idType: '1',
-        idPhoto: result.face,
+        idPhoto: result.face || '',
-        badgePhoto: result.emblem,
+        badgePhoto: result.emblem || '',
         certificatePhoto: result.cert_photo || '',
       }
-      console.log(applyDetail.value,'applyDetail.value')
       showApply.value = true
     })
-}
+    .catch(() => {
-const handApply = () => {
+      ElMessage.warning('获取信息失败')
-
-  if (!applyDetail.value.name) {
-    ElMessage({
-      message:  '请输入姓名',
-      type: 'warning',
-      duration: 3 * 1000
     })
-    return;
+}
+
+// 提交申请
+const handApply = () => {
+  if (!applyDetail.value.name) {
+    ElMessage.warning('请输入姓名')
+    return
   }
   if (!applyDetail.value.idType) {
-    ElMessage({
+    ElMessage.warning('请选择证件类型')
-      message:  '请选择证件类型',
+    return
-      type: 'warning',
-      duration: 3 * 1000
-    })
-    return;
   }
   if (!applyDetail.value.idPhoto) {
-    ElMessage({
+    ElMessage.warning('请上传人像照片')
-      message:  '请上传人像照片',
+    return
-      type: 'warning',
-      duration: 3 * 1000
-    })
-    return;
   }
   if (!applyDetail.value.badgePhoto) {
-    ElMessage({
+    ElMessage.warning('请上传徽章面照片')
-      message:  '请上传徽章面照片',
+    return
-      type: 'warning',
-      duration: 3 * 1000
-    })
-    return;
   }
   if (!applyDetail.value.certificatePhoto) {
-    ElMessage({
+    ElMessage.warning('请上传证书照片')
-      message:  '请上传证书照片',
+    return
-      type: 'warning',
-      duration: 3 * 1000
-    })
-    return;
   }
-  applyLoading.value = true
 
-  let data = {
+  applyLoading.value = true
-    paper_id: id.value - 0,
+  const data = {
-    answer_id: userDetail.value.id - 0,
+    paper_id: 1,
+    answer_id: userDetail.value.id || 0,
     face: applyDetail.value.idPhoto,
     emblem: applyDetail.value.badgePhoto,
-    card_type:applyDetail.value.idType - 0,
+    card_type: Number(applyDetail.value.idType),
     nickname: applyDetail.value.name,
     cert_photo: applyDetail.value.certificatePhoto,
   }
-  request.post(`go/api/app/user/info/upload/exam/card/photo`,data)
+
+  request.post(`/go/api/app/user/info/upload/exam/card/photo`, data)
     .then(res => {
-      if (res.code == 0){
+      if (res.code === 0) {
-        console.log('222')
         showApply.value = false
         successModal.value = true
+      } else {
+        ElMessage.warning(res.message || '提交失败')
       }
-    }).catch((res) => {
+    })
-    showErrorMessage.value = res.message
+    .catch(res => {
-  }).finally(() => {
+      showErrorMessage.value = res.message || '提交失败，请重试'
+    })
+    .finally(() => {
       applyLoading.value = false
     })
 }
 
-const showCertificate = ref(false)
 const toShowCertificate = () => {
   showCertificate.value = true
 }
+
+// 下载证书（修复跨域）
 const toUpload = (pic) => {
-  let image = new Image()
+  if (!pic) return
-  console.log(image,'image---')
+  const image = new Image()
-  // 解决跨域 Canvas 污染问题
+  image.crossOrigin = 'anonymous'
-  image.setAttribute('crossOrigin', 'anonymous')
+  image.src = pic + '?time=' + new Date().getTime()
-  image.src = pic + '?time=' + new Date().valueOf() //解决跨域
+
-  console.log('--1--')
   image.onload = function () {
-    let canvas = document.createElement('canvas')
+    const canvas = document.createElement('canvas')
     canvas.width = image.width
     canvas.height = image.height
-    let context = canvas.getContext('2d')
+    const ctx = canvas.getContext('2d')
-    context.drawImage(image, 0, 0, image.width, image.height)
+    ctx.drawImage(image, 0, 0)
-    let url = canvas.toDataURL('image/png') //得到图片的base64编码数据
+    const url = canvas.toDataURL('image/png')
-    let a = document.createElement('a') // 生成一个a元素
+
-    let event = new MouseEvent('click') // 创建一个单击事件
+    const a = document.createElement('a')
-    a.download = name || '岗位能力培训证书' // 设置图片名称
+    a.download = '岗位能力培训证书.png'
-    a.href = url // 将生成的URL设置为a.href属性
+    a.href = url
-    a.dispatchEvent(event) // 触发a的单击事件
+    a.click()
   }
 }
+
+// 获取成绩详情
 const getDetail = () => {
-  //
+  request.get(`/go/api/app/v2/exam/paper/${id.value}/answer`)
-  request.get(`go/api/app/v2/exam/paper/${id.value}/answer`)
     .then(res => {
-      let result = res.data
+      const result = res.data || {}
       userDetail.value = result
-      userDetail.value.scoreNum = JSON.parse(result.score).reduce((sum, value) => sum + Number(value), 0);
+
-      userDetail.value.questionNum = JSON.parse(result.question_id).length;
+      // 安全解析分数
-      userDetail.value.rightNum = JSON.parse(result.score).filter(item => {
+      try {
-        return item > 0
+        const scoreArr = result.score ? JSON.parse(result.score) : []
-      }).length ;
+        userDetail.value.scoreNum = scoreArr.reduce((sum, n) => sum + Number(n || 0), 0)
+
+        const questionArr = result.question_id ? JSON.parse(result.question_id) : []
+        userDetail.value.questionNum = questionArr.length
+        userDetail.value.rightNum = scoreArr.filter(i => i > 0).length
+      } catch (e) {
+        userDetail.value.scoreNum = 0
+        userDetail.value.questionNum = 0
+        userDetail.value.rightNum = 0
+      }
+
+      loadingStatus.value = true
+    })
+    .catch(() => {
+      ElMessage.warning('获取成绩失败')
       loadingStatus.value = true
-      console.log(userDetail.value.rightNum,'userDetail.value.rightNum ')
     })
 }
+
 onMounted(() => {
-  id.value = router.currentRoute.value.query.id || '1'
   if (!localStorage.getItem('answerToken')) {
     router.replace({ name: 'examGuide' })
+    return
   }
   getDetail()
 })
@@ -182,39 +189,65 @@ onMounted(() => {
 <template>
   <div class='ui-report-card' v-if='loadingStatus'>
     <div class='ui-report-card-box'>
-    <img class='ui-report-card-icon' :src='"https://images.health.ufutx.com/202504/22/449c3253ca2bbed9314d39977a486d0e.png"' alt=''/>
+      <img class='ui-report-card-icon' src="https://images.health.ufutx.com/202504/22/449c3253ca2bbed9314d39977a486d0e.png" alt=""/>
-    <div class='ui-report-card-name'>{{ userDetail.user.name }}</div>
+      <div class='ui-report-card-name'>{{ userDetail.user?.name || '考生' }}</div>
       <div class='ui-report-card-subTitle'>完成考试《友福身心健康管理师》</div>
+
       <div class='ui-report-card-score-box'>
-      <div class='ui-report-card-score'>{{ userDetail.scoreNum }}</div>
+        <div class='ui-report-card-score'>{{ userDetail.scoreNum || 0 }}</div>
         <div class='ui-report-card-score-sub'>分</div>
       </div>
       <div class='ui-report-card-tip'>总得分</div>
-    <div class='ui-report-card-tag' :class='{"ui-report-card-error-tag":userDetail.scoreNum < 60 }'>{{userDetail.scoreNum < 60 ? '考试未通过' : '考试已通过'}}</div>
+
+      <div class='ui-report-card-tag' :class='{"ui-report-card-error-tag": userDetail.scoreNum < 60 }'>
+        {{ userDetail.scoreNum < 60 ? '考试未通过' : '考试已通过' }}
+      </div>
+
       <div class='ui-report-card-list'>
         <div class='ui-report-card-list-box'>
-        <div class='ui-report-card-list-title'>{{ userDetail.questionNum }}</div>
+          <div class='ui-report-card-list-title'>{{ userDetail.questionNum || 0 }}</div>
           <div class='ui-report-card-list-sub'>考试总题量</div>
         </div>
         <div class='ui-report-card-list-line'></div>
         <div class='ui-report-card-list-box'>
-        <div class='ui-report-card-list-title'>{{ userDetail.rightNum }}</div>
+          <div class='ui-report-card-list-title'>{{ userDetail.rightNum || 0 }}</div>
           <div class='ui-report-card-list-sub'>答对题数</div>
         </div>
         <div class='ui-report-card-list-line'></div>
         <div class='ui-report-card-list-box'>
-        <div class='ui-report-card-list-title'>{{ userDetail.during }}</div>
+          <div class='ui-report-card-list-title'>{{ userDetail.during || 0 }}</div>
           <div class='ui-report-card-list-sub'>用时（分钟）</div>
         </div>
       </div>
+
       <div class='ui-report-card-btn-box'>
-      <div class='ui-report-card-btn ui-report-card-btn-v1' v-if='userDetail.scoreNum >= 60 && !userDetail.cert_pic ' @click='toShowApply' >申请证书</div>
+        <div
-      <div class='ui-report-card-btn ui-report-card-btn-v1' v-else-if='userDetail.scoreNum >= 60 ' @click='toShowCertificate' >查看证书</div>
+          class='ui-report-card-btn ui-report-card-btn-v1'
-      <div class='ui-report-card-btn ui-report-card-btn-v2' v-else @click='showContact = true' >重新补考</div>
+          v-if='userDetail.scoreNum >= 60 && !userDetail.cert_pic'
+          @click='toShowApply'
+        >
+          申请证书
+        </div>
+        <div
+          class='ui-report-card-btn ui-report-card-btn-v1'
+          v-else-if='userDetail.scoreNum >= 60'
+          @click='toShowCertificate'
+        >
+          查看证书
+        </div>
+        <div
+          class='ui-report-card-btn ui-report-card-btn-v2'
+          v-else
+          @click='showContact = true'
+        >
+          重新补考
         </div>
       </div>
+    </div>
+
+    <!-- 申请证书弹窗 -->
     <div class="dialog-mask" v-if="showApply">
-    <div class="dialog-box-apply dialog-box text-center">
+      <div class="dialog-box dialog-box-apply text-center">
         <div class='ui-dialog-title'>申请证书</div>
         <div class='ui-dialog-form'>
           <div class='ui-dialog-item'>
@@ -226,20 +259,23 @@ onMounted(() => {
           <div class='ui-dialog-item'>
             <div class='ui-dialog-item-title'>证件类型</div>
             <div class='ui-dialog-input'>
-            <CustomSelect
+              <CustomSelect v-model="applyDetail.idType" :options="cardType"/>
-              v-model="applyDetail.idType"
-              :options="cardType"
-            />
             </div>
           </div>
           <div class='ui-dialog-item'>
             <div class='ui-dialog-item-title'>上传证件照</div>
-          <ImageUploader v-model="applyDetail.idPhoto"  background-image="https://images.health.ufutx.com/202504/23/5baaefcd47d0023d2fedf72ce0d33703.png" />
+            <ImageUploader
+              v-model="applyDetail.idPhoto"
+              background-image="https://images.health.ufutx.com/202504/23/5baaefcd47d0023d2fedf72ce0d33703.png"
+            />
             <div class='ui-dialog-upload-tip'>上传人像照</div>
           </div>
           <div class='ui-dialog-item'>
             <div class='ui-dialog-item-title'></div>
-          <ImageUploader v-model="applyDetail.badgePhoto"  background-image="https://images.health.ufutx.com/202504/23/e4294660d559b4e6db6466946df4dcd0.png" />
+            <ImageUploader
+              v-model="applyDetail.badgePhoto"
+              background-image="https://images.health.ufutx.com/202504/23/e4294660d559b4e6db6466946df4dcd0.png"
+            />
             <div class='ui-dialog-upload-tip'>上传徽章面</div>
           </div>
           <div class='ui-dialog-item'>
@@ -248,10 +284,11 @@ onMounted(() => {
               v-model="applyDetail.certificatePhoto"
               :dimension="{ width: '230px', height: '144px' }"
             />
-          <div class='ui-dialog-upload-tip'>二寸蓝底或是白底，用于证书制作</div>
+            <div class='ui-dialog-upload-tip'>二寸蓝底或白底，用于证书制作</div>
           </div>
         </div>
-<!--      <div class='ui-error-message' v-if='showErrorMessage'>{{showErrorMessage}}</div>-->
+
+        <div class='ui-error-message' v-if='showErrorMessage'>{{ showErrorMessage }}</div>
         <div class="dialog-btns">
           <div class="dialog-btn cancel" @click="showApply = false">取消</div>
           <div class="dialog-btn confirm" @click="handApply" :class="{disabled: applyLoading}">
@@ -261,30 +298,31 @@ onMounted(() => {
         </div>
       </div>
     </div>
+
+    <!-- 联系客服 -->
     <div class="dialog-mask" v-if="showContact">
-    <div class="dialog-box-contact dialog-box text-center">
+      <div class="dialog-box dialog-box-contact text-center">
         <div class='ui-dialog-contact-title'>重新补考</div>
-      <div class='ui-dialog--subtitle'>请联系客户 咨询重新补考</div>
+        <div class='ui-dialog--subtitle'>请联系客服咨询重新补考</div>
         <div class='ui-dialog-contact-box'>
           <img class='ui-dialog-contact-icon' src='https://images.health.ufutx.com/202504/23/d2da9ca501b8e0fdcd68113bc5dec2f8.png' alt=''/>
-        <div class='ui-dialog-contact-sub'>微信扫码&nbsp;添加客服</div>
+          <div class='ui-dialog-contact-sub'>微信扫码 添加客服</div>
         </div>
         <svg @click='showContact = false' class='ui-dialog-contact-cancel' xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34" fill="none">
           <path opacity="0.3" d="M17 34C26.3888 34 34 26.3888 34 17C34 7.61116 26.3888 0 17 0C7.61116 0 0 7.61116 0 17C0 26.3888 7.61116 34 17 34Z" fill="black"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0006 9.95806C10.2271 9.74375 10.5827 9.74741 10.8048 9.96633L24.1111 23.0836C24.3235 23.2929 24.3259 23.6348 24.1166 23.8471C24.1122 23.8515 24.1077 23.8559 24.1032 23.8603C23.8766 24.0746 23.521 24.0709 23.299 23.852L9.99262 10.7347C9.7803 10.5254 9.77785 10.1836 9.98716 9.97123C9.99157 9.96676 9.99605 9.96237 10.0006 9.95806Z" fill="white" stroke="white" stroke-width="0.85"/>
+          <path d="M10.0006 9.95806C10.2271 9.74375 10.5827 9.74741 10.8048 9.96633L24.1111 23.0836C24.3235 23.2929 24.3259 23.6348 24.1166 23.8471C24.1122 23.8515 24.1077 23.8559 24.1032 23.8603C23.8766 24.0746 23.521 24.0709 23.299 23.852L9.99262 10.7347C9.7803 10.5254 9.77785 10.1836 9.98716 9.97123C9.99157 9.96676 9.99605 9.96237 10.0006 9.95806Z" fill="white" stroke-width="0.85"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M24.0016 9.95806C23.7751 9.74375 23.4195 9.74741 23.1974 9.96633L9.89105 23.0836C9.67873 23.2929 9.67628 23.6348 9.88559 23.8471C9.89 23.8515 9.89448 23.8559 9.89904 23.8603C10.1256 24.0746 10.4811 24.0709 10.7032 23.852L24.0096 10.7347C24.2219 10.5254 24.2243 10.1836 24.015 9.97123C24.0106 9.96676 24.0061 9.96237 24.0016 9.95806Z" fill="white" stroke="white" stroke-width="0.85"/>
+          <path d="M24.0016 9.95806C23.7751 9.74375 23.4195 9.74741 23.1974 9.96633L9.89105 23.0836C9.67873 23.2929 9.67628 23.6348 9.88559 23.8471C9.89 23.8515 9.89448 23.8559 9.89904 23.8603C10.1256 24.0746 10.4811 24.0709 10.7032 23.852L24.0096 10.7347C24.2219 10.5254 24.2243 10.1836 24.015 9.97123C24.0106 9.96676 24.0061 9.96237 24.0016 9.95806Z" fill="white" stroke-width="0.85"/>
         </svg>
       </div>
     </div>
+
+    <!-- 提交成功 -->
     <div class="dialog-mask" v-if="successModal">
       <div class="dialog-success-box text-center">
         <img src="https://images.health.ufutx.com/202504/17/2ee13769aa745d646d4951179ade3419.png" alt="" class="dialog-success-img"/>
         <div class="dialog-success-title">温馨提示</div>
-      <div class="dialog-success-content">
+        <div class="dialog-success-content">证书申请已提交，预计等待20个工作日</div>
-        证书申请已提交，预计等待20个工作日
-      </div>
         <div class="dialog-success-btns">
-        <!--          <div class="dialog-btn cancel" @click="dialogTableVisible = false">继续答题</div>-->
           <div class="dialog-success-btn confirm" @click="successSubmit" :class="{disabled: isSuccessSubmitting}">
             <div class="loading-spinner" v-if="isSuccessSubmitting"></div>
             {{ isSuccessSubmitting ? '正在退出...' : '好的' }}
@@ -292,17 +330,16 @@ onMounted(() => {
         </div>
       </div>
     </div>
-  <div class='dialog-mask' v-if='showCertificate' @click='showCertificate=false'>
+
+    <!-- 查看证书 -->
+    <div class='dialog-mask' v-if='showCertificate' @click.self='showCertificate=false'>
       <div class='dialog-img-box'>
-      <img class='img-style' :src='userDetail.cert_pic' alt=''>
+        <img class='img-style' :src='userDetail.cert_pic' alt="证书">
-<!--      <svg xmlns="http://www.w3.org/2000/svg" width="140" height="42" viewBox="0 0 140 42" fill="none" class='img-upload'>-->
+        <img @click.stop='toUpload(userDetail.cert_pic)' src='https://images.health.ufutx.com/202505/27/6121f956eb6b839f12a2be7586506da2.png' class='img-upload' alt="下载"/>
-<!--        <path d="M10.714 12.7152C13.292 5.66848 19.9709 0.960233 27.4742 0.900207L140 0V42H0L10.714 12.7152Z" fill="black" fill-opacity="0.8"/>-->
-<!--      </svg>-->
-      <img @click.stop='toUpload(userDetail.cert_pic)' src='https://images.health.ufutx.com/202505/27/6121f956eb6b839f12a2be7586506da2.png' class='img-upload' alt='' />
         <svg @click='showCertificate = false' class='ui-dialog-contact-cancel' xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34" fill="none">
           <path opacity="0.3" d="M17 34C26.3888 34 34 26.3888 34 17C34 7.61116 26.3888 0 17 0C7.61116 0 0 7.61116 0 17C0 26.3888 7.61116 34 17 34Z" fill="black"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0006 9.95806C10.2271 9.74375 10.5827 9.74741 10.8048 9.96633L24.1111 23.0836C24.3235 23.2929 24.3259 23.6348 24.1166 23.8471C24.1122 23.8515 24.1077 23.8559 24.1032 23.8603C23.8766 24.0746 23.521 24.0709 23.299 23.852L9.99262 10.7347C9.7803 10.5254 9.77785 10.1836 9.98716 9.97123C9.99157 9.96676 9.99605 9.96237 10.0006 9.95806Z" fill="white" stroke="white" stroke-width="0.85"/>
+          <path d="M10.0006 9.95806C10.2271 9.74375 10.5827 9.74741 10.8048 9.96633L24.1111 23.0836C24.3235 23.2929 24.3259 23.6348 24.1166 23.8471C24.1122 23.8515 24.1077 23.8559 24.1032 23.8603C23.8766 24.0746 23.521 24.0709 23.299 23.852L9.99262 10.7347C9.7803 10.5254 9.77785 10.1836 9.98716 9.97123C9.99157 9.96676 9.99605 9.96237 10.0006 9.95806Z" fill="white" stroke-width="0.85"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M24.0015 9.95806C23.7749 9.74375 23.4194 9.74741 23.1973 9.96633L9.89093 23.0836C9.67861 23.2929 9.67616 23.6348 9.88547 23.8471C9.88987 23.8515 9.89436 23.8559 9.89892 23.8603C10.1254 24.0746 10.481 24.0709 10.7031 23.852L24.0095 10.7347C24.2218 10.5254 24.2242 10.1836 24.0149 9.97123C24.0105 9.96676 24.006 9.96237 24.0015 9.95806Z" fill="white" stroke="white" stroke-width="0.85"/>
+          <path d="M24.0015 9.95806C23.7749 9.74375 23.4194 9.74741 23.1973 9.96633L9.89093 23.0836C9.67861 23.2929 9.67616 23.6348 9.88547 23.8471C9.88987 23.8515 9.89436 23.8559 9.89892 23.8603C10.1254 24.0746 10.481 24.0709 10.7031 23.852L24.0095 10.7347C24.2218 10.5254 24.2242 10.1836 24.0149 9.97123C24.0105 9.96676 24.006 9.96237 24.0015 9.95806Z" fill="white" stroke-width="0.85"/>
         </svg>
       </div>
     </div>
@@ -318,13 +355,13 @@ onMounted(() => {
   justify-content: center;
   font-weight: 400;
   line-height: normal;
-
+}
 .ui-report-card-box{
   width: 852px;
   display: flex;
   flex-direction: column;
   align-items: center;
-    justify-content: center;
+}
 .ui-report-card-icon{
   width: 100px;
   height: 100px;
@@ -347,11 +384,11 @@ onMounted(() => {
   font-size: 30px;
   font-weight: 600;
   color:#0E0E0E;
+}
 .ui-report-card-score{
   font-size: 80px;
   line-height: 80px;
 }
-    }
 .ui-report-card-tip{
   margin: 10px 0;
   color:#66676C;
@@ -360,17 +397,17 @@ onMounted(() => {
 .ui-report-card-tag{
   display: flex;
   width: 343px;
-      padding: 10px 0px;
+  padding: 10px 0;
   justify-content: center;
   align-items: center;
   font-size: 16px;
   font-weight: 500;
   color: #18CA6E;
-      background: linear-gradient(90deg, rgba(24, 202, 110, 0.00) 0%, rgba(24, 202, 110, 0.10) 50%, rgba(24, 202, 110, 0.00) 100%);
+  background: linear-gradient(90deg, rgba(24,202,110,0) 0%, rgba(24,202,110,0.1) 50%, rgba(24,202,110,0) 100%);
 }
 .ui-report-card-error-tag{
   color: #FF2946;
-      background: linear-gradient(90deg, rgba(255, 41, 70, 0.00) 0%, rgba(255, 41, 70, 0.10) 50%, rgba(255, 41, 70, 0.00) 100%);;
+  background: linear-gradient(90deg, rgba(255,41,70,0) 0%, rgba(255,41,70,0.1) 50%, rgba(255,41,70,0) 100%);
 }
 .ui-report-card-list{
   margin: 60px;
@@ -380,28 +417,24 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   background: #FAFAFA;
-
+}
 .ui-report-card-list-box{
   display: flex;
   flex-direction: column;
-        justify-content: center;
   align-items: center;
   color:#66676C;
   font-size: 16px;
+}
 .ui-report-card-list-title{
   color: #0E0E0E;
   font-size: 40px;
-          font-style: normal;
   font-weight: 600;
-          line-height: normal;
-        }
 }
 .ui-report-card-list-line{
   width: 1px;
   height: 28.5px;
   background: #DDD;
 }
-    }
 .ui-report-card-btn-box{
   margin-bottom: 100px;
 }
@@ -417,15 +450,13 @@ onMounted(() => {
   cursor: pointer;
 }
 .ui-report-card-btn-v1{
-      letter-spacing: 1px;
   background: #409EFF;
-      color: #ffffff
+  color: #fff;
 }
 .ui-report-card-btn-v2{
   color: #409EFF;
   border: 0.5px solid #409EFF;
 }
-  }
 .dialog-mask {
   position: fixed;
   top: 0;
@@ -438,90 +469,80 @@ onMounted(() => {
   justify-content: center;
   z-index: 999;
 }
-
 .dialog-box {
-    width: 500px;
+  position: relative; /* 确保内部绝对定位基于此 */
   background: #fff;
   border-radius: 20px;
-    padding: 50px 70px;
+  padding: 50px; /* 统一内边距，不要用70px */
-    box-sizing: content-box;
+  box-sizing: border-box; /* 关键：防止padding撑开宽度 */
 }
 .dialog-box-apply{
-    width: 480px;
+  width: 720px;
 }
 .dialog-box-contact {
-    position: relative;
+  //width: 288px; /* 固定宽度 */
-    width: 288px;
+  padding: 50px 50px; /* 左右留白更美观 */
-    padding: 50px 80px;
+  text-align: center;
+}
 .ui-dialog-contact-title {
   color: #0E0E0E;
-      text-align: center;
   font-size: 22px;
-      font-style: normal;
   font-weight: 600;
-      line-height: normal;
+  margin-bottom: 10px;
 }
+
 .ui-dialog--subtitle {
-      margin: 10px  0 20px;
   color: #66676C;
-      text-align: center;
   font-size: 14px;
-      font-style: normal;
+  margin-bottom: 20px;
-      line-height: normal;
 }
+
 .ui-dialog-contact-box {
-      display: flex;
+  display: inline-block; /* 改为行内块，让宽度自适应内容 */
-      padding: 20px;
+  padding: 20px 50px;
-      flex-direction: column;
-      align-items: center;
   border-radius: 20px;
   background: #F5F5F5;
+}
+
 .ui-dialog-contact-icon {
   width: 236px;
   height: 236px;
-        flex-shrink: 0;
+  display: block; /* 去除默认空隙 */
-        aspect-ratio: 1/1;
 }
+
 .ui-dialog-contact-sub {
   margin-top: 20px;
   color: #0E0E0E;
-        text-align: center;
   font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-      }
 }
 .ui-dialog-contact-cancel{
   position: absolute;
-      bottom:-64px;
+  bottom: -48px; /* 调整到合理位置 */
   left: 50%;
   transform: translateX(-50%);
   width: 34px;
   height: 34px;
   cursor: pointer;
-    }
+  background: rgba(0, 0, 0, 0.3); /* 增加背景方便点击 */
+  border-radius: 50%;
+  padding: 5px;
 }
 .ui-dialog-title{
   margin-bottom: 50px;
+  font-size: 22px;
+  font-weight: 600;
   color: #0E0E0E;
   text-align: center;
-    font-size: 22px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: normal;
-    height:22px;
 }
 .ui-dialog-form{
   display: flex;
   flex-wrap: wrap;
+}
 .ui-dialog-item{
   margin-right: 20px;
   margin-bottom: 30px;
-      display: flex;
+}
-      flex-direction: column;
+.ui-dialog-item:nth-child(2n){
-      align-items: flex-start;
-      &:nth-child(2n){
   margin-right: 0;
 }
 .ui-dialog-item-title{
@@ -530,98 +551,58 @@ onMounted(() => {
   font-weight: bold;
   color: #0e0e0e;
   height: 14px;
+  text-align: left;
 }
 .ui-dialog-input{
-      //margin-top: 6px;
   width: 230px;
-
+}
-        input {
+.ui-dialog-input input{
   width: 100%;
   height: 56px;
   padding: 0 15px;
-          border: 1px solid #B2B3B5; /* 默认黑色边框 */
+  border: 1px solid #B2B3B5;
   border-radius: 10px;
   font-size: 14px;
-          /* 去除输入框默认样式 */
-          -webkit-appearance: none;
   outline: none;
-          /* 隐藏数字输入框箭头 */
-          &[type="number"] {
-            -moz-appearance: textfield;
-            &::-webkit-outer-spin-button,
-            &::-webkit-inner-spin-button {
-              -webkit-appearance: none;
-              margin: 0;
-            }
-          }
-          &:focus {
-            border-color: #79BBFF; /* 输入时边框颜色 */
-          }
 }
+.ui-dialog-input input:focus{
+  border-color: #79BBFF;
 }
 .ui-dialog-upload-tip{
   margin-top: 6px;
   font-size: 14px;
   color: #66676C;
-      }
+  text-align: left;
-      /* 新增聚焦状态 */
-      .ui-dialog-input select:focus {
-        border-color: #79BBFF;
-        outline: none;
-      }
-
-      /* 新增选项样式 */
-      .ui-dialog-input option {
-        padding: 20px;
-        font-size: 14px;
-      }
-    }
-
 }
 .ui-error-message{
   margin-bottom: 6px;
   font-size: 14px;
-    font-weight: bold;
   color: #FF2946;
-    height: 14px;
+  text-align: center;
 }
 .dialog-btns {
   display: flex;
   justify-content: center;
 }
-
 .dialog-btn {
   padding: 16px 50px;
   border-radius: 10px;
   cursor: pointer;
-    min-width: 72px;
-    box-sizing: content-box;
 }
-
 .cancel {
   margin-right: 30px;
   border: 1px solid #409EFF;
   color: #409EFF;
   background: #fff;
-    font-size: 18px;
 }
-
 .confirm {
   background: #409eff;
   color: #fff;
-    border: 1px solid #409eff;
-    font-size: 18px;
 }
-  .dialog-btn, .dialog-success-btn {
+.dialog-btn.disabled {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &.disabled {
   opacity: 0.7;
   pointer-events: none;
 }
-  }
 .loading-spinner {
   width: 16px;
   height: 16px;
@@ -632,76 +613,58 @@ onMounted(() => {
   animation: spin 0.8s linear infinite;
 }
 .dialog-success-box{
-    display: flex;
   width: 574px;
   padding: 50px;
-    flex-direction: column;
+  background: #fff;
-    align-items: center;
   border-radius: 20px;
-    background: #FFF;
+  text-align: center;
+}
 .dialog-success-img{
   width: 130px;
   height: 116px;
 }
 .dialog-success-title{
-      margin: 50px auto 30px;
+  margin: 50px 0 30px;
-      color: #0E0E0E;
   font-size: 22px;
   font-weight: 600;
+  color: #0E0E0E;
 }
 .dialog-success-content{
   margin-bottom: 50px;
-      color:#0E0E0E;
   font-size: 18px;
-    }
+  color: #0E0E0E;
-    .dialog-success-btns{
-      display: flex;
-      justify-content: center;
-      align-items: center;
 }
 .dialog-success-btn{
   padding: 16px 0;
   border-radius: 10px;
-      cursor: pointer;
   width: 172px;
-    }
+  cursor: pointer;
+  background: #409eff;
+  color: #fff;
 }
 .dialog-img-box{
   position: relative;
-    width: fit-content;
+}
-
 .img-style{
-      width: 100%;
   height: 860px;
   object-fit: cover;
-      //border-radius: 16px;
 }
 .img-upload{
   position: absolute;
-      right: 0px;
+  right: 0;
   bottom: 0;
   width: 140px;
   height: 42px;
-      flex-shrink: 0;
   cursor: pointer;
-      //border-radius: 0 0 16px 0;
 }
-  }
+.dialog-img-box .ui-dialog-contact-cancel{
-  .ui-dialog-contact-cancel{
-    position: absolute;
   top: 0;
   right: -64px;
-    width:34px;
+  bottom: auto;
-    height: 34px;
+  left: auto;
-    cursor: pointer;
+  transform: none;
 }
-
 @keyframes spin {
-    to {
+  to { transform: rotate(360deg) }
-      transform: rotate(360deg);
 }
-  }
-}
-
-
 </style>

src/components/upload/imageUpload.vue

@@ -149,7 +149,7 @@ const triggerUpload = () => {
 .upload-btn {
   position: relative;
   width: 230px;
-  height: 144px;
+  height: 154px;
   background-size: contain;  /* 新增背景图适配 */
   background-repeat: no-repeat;
 }

src/utils/request.js

@@ -16,7 +16,7 @@ const openFullScreen2 = () => {
 }
 
 const service = axios.create({
-  baseURL: window.location.href.includes('//www.ufutx.com') ? 'https://health.ufutx.com/' :'http://health.ufutx.net/',
+  baseURL: window.location.href.includes('//www.ufutx.com') ? 'https://health.ufutx.com/' :'https://health.ufutx.com/',
   timeout: 8000,
   withCredentials: false,
   headers: {