lanzhihui/ufutx_official_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
lanzhihui 2026-03-31 17:01:05 +08:00
parent 39457f90cd
commit b2c97b7c70
9 changed files with 2612 additions and 2394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

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

647
src/components/pc/exam/examGuide.vue
View File

File diff suppressed because it is too large Load Diff

511
src/components/pc/exam/examHeader.vue
View File

@ -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="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"/> <path d="M14.6084 14.1499L17.7895 17.331" stroke="#66676C" stroke-width="1.625" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
<!-- <img src="https://images.health.ufutx.com/202505/14/07ba29b4372524f89bd3b060ad8b129f.png" class="" />-->
<input v-model="searchValue" <input v-model="searchValue"
@keyup.enter="handleSearch" placeholder="搜索" /> @keyup.enter="handleSearch" placeholder="搜索" />
</div> </div>
<div v-if='!loginStatus' class='exam-header-right-login-btn' @click='toLogin'>登录</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-box' @mouseover='showLogout = true' @mouseleave='showLogout = false'>
<div class='ui-user-content' > <div class='ui-user-content' >
<img class='ui-user-box-icon' src='https://images.health.ufutx.com/202504/28/d2b5ca33bd970f64a6301fa75ae2eb22.png' alt='' /> <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 v-if='isAccountLogin'>
<div class="dialog-title">请登录</div> <div class="dialog-title">请登录</div>
<div class="dialog-content"> <div class="dialog-content">
<!-- 新增文字标签 -->
<div class="input-label">手机号</div> <div class="input-label">手机号</div>
<div class="login-input"> <div class="login-input">
<input v-model="mobile" type="tel" placeholder="请输入手机号" maxlength="11"> <input v-model="mobile" type="tel" placeholder="请输入手机号" maxlength="11">
@ -99,7 +97,6 @@
{{ showCountdown ? `${countdown}s` : '获取验证码' }} {{ showCountdown ? `${countdown}s` : '获取验证码' }}
</button> </button>
</div> </div>
<!-- <div class="error-tip" v-if="errorVisible">{{ errorMessage }}</div>-->
</div> </div>
<div class="dialog-btns"> <div class="dialog-btns">
<div class="dialog-btn confirm text-center" @click="handleLogin" :class="{disabled: isEnterStart}"> <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="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"/> <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> </svg>
</div> </div>
</div> </div>
<div class="dialog-mask" v-if="showLogoutModal"> <div class="dialog-mask" v-if="showLogoutModal">
<div class="dialog-success-box text-center"> <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-title">温馨提示</div>
<div class="dialog-success-content"> <div class="dialog-success-content">
是否退出登录 是否退出登录
@ -201,7 +196,7 @@ const searchValue = ref('')
watch(() => props.searchKeyword,(newVal) => { watch(() => props.searchKeyword,(newVal) => {
searchValue.value = newVal searchValue.value = newVal
}) })
const showReport = ref(false) // 是否参加考试 const showReport = ref(false)
const qrcodeDetail = ref({ const qrcodeDetail = ref({
text:'', text:'',
status:'' 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 isEnterStart = ref(false)
const dialogTableVisible = 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 mobile = ref('')
const code = ref('') const code = ref('')
const countdown = ref(0) const countdown = ref(0)
@ -259,7 +254,6 @@ const showCountdown = ref(false)
const toLogin = () => { const toLogin = () => {
dialogTableVisible.value = true dialogTableVisible.value = true
} }
// 获取验证码方法
const getCode = () => { const getCode = () => {
if (!/^1[3-9]\d{9}$/.test(mobile.value)) { if (!/^1[3-9]\d{9}$/.test(mobile.value)) {
ElMessage({ ElMessage({
@ -267,19 +261,15 @@ const getCode = () => {
type: 'warning', type: 'warning',
duration: 3 * 1000 duration: 3 * 1000
}) })
// showToast('请输入有效的手机号','warning')
return return
} }
// 这里添加实际获取验证码逻辑
console.log('发送验证码到:', mobile.value)
let data = { let data = {
mobile: mobile.value, mobile: mobile.value,
area_code:86 area_code:86
} }
request.post(`go/api/h5/v2/user/smscode`,data) request.post(`go/api/h5/v2/user/smscode`,data)
.then(res => { .then(res => {
// 开始倒计时
countdown.value = 60 countdown.value = 60
showCountdown.value = true showCountdown.value = true
timer.value = setInterval(() => { timer.value = setInterval(() => {
@ -294,7 +284,6 @@ const getCode = () => {
} }
// 登录验证方法
const handleLogin = () => { const handleLogin = () => {
if (!mobile.value || !code.value) { if (!mobile.value || !code.value) {
ElMessage({ ElMessage({
@ -302,7 +291,6 @@ const handleLogin = () => {
type: 'warning', type: 'warning',
duration: 3 * 1000 duration: 3 * 1000
}) })
// showToast('请填写完整信息','warning')
return return
} }
let data = { let data = {
@ -313,21 +301,16 @@ const handleLogin = () => {
isEnterStart.value = true isEnterStart.value = true
request.post(`go/api/app/v2/account/code/login`,data) request.post(`go/api/app/v2/account/code/login`,data)
.then(res => { .then(res => {
// 登录成功处理
localStorage.setItem('answerToken',res.data.api_token) localStorage.setItem('answerToken',res.data.api_token)
ElMessage({ ElMessage({
message: '登录成功', message: '登录成功',
type: 'success', type: 'success',
duration: 1200 duration: 1200
}) })
// showToast('登录成功')
// getIsJoin()
getUserDetail() getUserDetail()
setTimeout(() => { setTimeout(() => {
dialogTableVisible.value = false dialogTableVisible.value = false
isEnterStart.value = false isEnterStart.value = false
// router.push({ name: 'onlineTest',query:{id:id.value} })
},800) },800)
}).finally(() => { }).finally(() => {
isEnterStart.value = false isEnterStart.value = false
@ -337,7 +320,7 @@ const isComposing = ref(false)
const answer_user_mobile = ref('') const answer_user_mobile = ref('')
const answer_user_name = ref('') const answer_user_name = ref('')
const showLogout = ref(false) const showLogout = ref(false)
const showLogoutModal = ref(false) // 退出登录弹窗 const showLogoutModal = ref(false)
const isLogoutLoading = ref(false) const isLogoutLoading = ref(false)
const successLogout = () => { const successLogout = () => {
isLogoutLoading.value = true isLogoutLoading.value = true
@ -371,7 +354,6 @@ const getIsJoin = () => {
}else { }else {
showReport.value = true 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_id', res.data.user_id)
localStorage.setItem('answer_user_name', res.data.name) localStorage.setItem('answer_user_name', res.data.name)
loginStatus.value = true loginStatus.value = true
console.log(answer_user_name.value,'23423')
console.log(answer_user_mobile.value,'23423')
}).finally(() => {
}) })
} }
// 切换登录方式
const rightClick = () => { const rightClick = () => {
if (isAccountLogin.value){ if (isAccountLogin.value){
isResetCode.value = false isResetCode.value = false
// 清除现有轮询
if (pollingTimer.value) { if (pollingTimer.value) {
clearInterval(pollingTimer.value) clearInterval(pollingTimer.value)
pollingTimer.value = null pollingTimer.value = null
@ -402,14 +378,12 @@ const rightClick = () => {
getQRCode() getQRCode()
}else { }else {
isAccountLogin.value = !isAccountLogin.value isAccountLogin.value = !isAccountLogin.value
// 切换时清除轮询
if (pollingTimer.value) { if (pollingTimer.value) {
clearInterval(pollingTimer.value) clearInterval(pollingTimer.value)
pollingTimer.value = null pollingTimer.value = null
} }
} }
} }
// 获取二维码
const getQRCode = (reset) => { const getQRCode = (reset) => {
if (qrcodeDetail.value.timeoutTimer) { if (qrcodeDetail.value.timeoutTimer) {
clearTimeout(qrcodeDetail.value.timeoutTimer) clearTimeout(qrcodeDetail.value.timeoutTimer)
@ -419,17 +393,15 @@ const getQRCode = (reset) => {
let result = res.data let result = res.data
qrcodeDetail.value.text = result.data qrcodeDetail.value.text = result.data
qrcodeDetail.value.id = result.id qrcodeDetail.value.id = result.id
// 添加5分钟（300000毫秒）后自动刷新
qrcodeDetail.value.timeoutTimer = setTimeout(() => { qrcodeDetail.value.timeoutTimer = setTimeout(() => {
handleQRCodeTimeout() handleQRCodeTimeout()
}, 3 * 60000) // 60000毫秒 = 1分钟 }, 3 * 60000)
console.log(result,'ggg')
if (reset != 'reset'){ if (reset != 'reset'){
isAccountLogin.value = !isAccountLogin.value isAccountLogin.value = !isAccountLogin.value
} }
pollingTimer.value = setInterval(() => { pollingTimer.value = setInterval(() => {
getQRCodeStatus() getQRCodeStatus()
}, 5000) // 每5秒轮询一次 }, 5000)
}) })
} }
const getQRCodeStatus = () => { const getQRCodeStatus = () => {
@ -451,29 +423,21 @@ const getQRCodeStatus = () => {
}) })
getIsJoin() getIsJoin()
getUserDetail() getUserDetail()
// startTest()
} }
}) })
} }
const handleQRCodeTimeout = () => { const handleQRCodeTimeout = () => {
clearTimeout(qrcodeDetail.value.timeoutTimer) // 清除定时器 clearTimeout(qrcodeDetail.value.timeoutTimer)
clearInterval(pollingTimer.value) clearInterval(pollingTimer.value)
pollingTimer.value = null pollingTimer.value = null
isScanSucess.value = false isScanSucess.value = false
isResetCode.value = true isResetCode.value = true
// ElMessage({
// message: '二维码已过期，请点击刷新',
// type: 'warning',
// duration: 1200
// })
// showToast('二维码已过期，请点击刷新', 'warning')
// getQRCode() // 直接调用获取新二维码
} }
const toResetCode = () => { const toResetCode = () => {
isResetCode.value = false isResetCode.value = false
getQRCode('reset') // 直接调用获取新二维码 getQRCode('reset')
} }
const loginStatus = ref(false) // 登录状态 const loginStatus = ref(false)
onMounted(() => { onMounted(() => {
if (localStorage.getItem('answerToken')){ if (localStorage.getItem('answerToken')){
loginStatus.value = true loginStatus.value = true
@ -496,49 +460,60 @@ const navList = computed(() => {
name:'考生入口', name:'考生入口',
path: 'examGuide', path: 'examGuide',
routerName:'health', routerName:'health',
children: [ children: []
]
}, },
{ {
name:'成绩查询/证书申请', name:'成绩查询/证书申请',
path: 'examHomeReport', path: 'examHomeReport',
routerName:'health', routerName:'health',
children: [ children: []
]
}, },
] ]
}) })
const router = useRouter() const router = useRouter()
</script> </script>
<style scoped> <style scoped>
/* 基础兼容 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.exam-header-box{ .exam-header-box{
position: fixed; position: fixed;
top:0; top:0;
z-index: 110; z-index: 9999;
width: 100%; width: 100%;
background: #ffffff; background: #ffffff;
padding: 28px 100px; padding: 28px 100px;
} }
.exam-header-message{ .exam-header-message{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
} }
.exam-header-message-left{ .exam-header-message-left{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
} }
.exam-header-left-icon{
width: 157px;
height: 29px;
}
.exam-header-left-line{ .exam-header-left-line{
margin: 0 10px; margin: 0 10px;
width: 2px; width: 2px;
@ -547,14 +522,18 @@ const router = useRouter()
.exam-header-left-title{ .exam-header-left-title{
color: #409EFF; color: #409EFF;
font-size: 20px; font-size: 20px;
font-style: normal;
font-weight: 600; font-weight: 600;
line-height: normal;
letter-spacing: 0.4px; letter-spacing: 0.4px;
} }
.exam-menu-box{ .exam-menu-box{
margin-left: 120px; margin-left: 120px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
} }
.exam-menu-item{ .exam-menu-item{
@ -562,10 +541,8 @@ const router = useRouter()
margin-right: 100px; margin-right: 100px;
color: #0E0E0E; color: #0E0E0E;
font-size: 16px; font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
cursor: pointer; cursor: pointer;
white-space: nowrap;
} }
.exam-entrance{ .exam-entrance{
position: absolute; position: absolute;
@ -574,68 +551,63 @@ const router = useRouter()
width: 56px; width: 56px;
height: 22px; height: 22px;
} }
.exam-menu-line{ .exam-menu-line{
display: block; display: block;
position: absolute; position: absolute;
bottom: -10px; bottom: -10px;
left: 50%; left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%); transform: translateX(-50%);
width: 0; width: 0;
height: 4px; height: 4px;
opacity: 0; opacity: 0;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease; transition: all 0.6s ease;
background-color: #409eff; background-color: #409eff;
border-radius: 10px; 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%; width: 100%;
height: 4px;
background-color: #409eff;
opacity: 1; opacity: 1;
border-radius: 10px;
} }
.exam-menu-active div{ .exam-menu-active div{
color: #409EFF; color: #409EFF;
font-weight: 600; font-weight: 600;
} }
.exam-menu-item:hover .exam-menu-line{ .exam-menu-item:hover .exam-menu-line{
opacity: 1; opacity: 1;
width: 100%; width: 100%;
} }
.exam-header-message-right{ .exam-header-message-right{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
position: relative;
z-index: 100;
} }
.exam-header-right-search-box { .exam-header-right-search-box {
margin-right: 280px; margin-right: 220px;
position: relative; position: relative;
width: 248px; width: 320px;
height: 26px; //height: 26px;
padding: 12px 26px; padding: 12px 26px;
background-color: #F5F5F5; background-color: #F5F5F5;
box-sizing: content-box;
border-radius: 120px; border-radius: 120px;
} }
.search-icon { .search-icon {
position: absolute; position: absolute;
left: 20px; left: 20px;
top: 50%; top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); transform: translateY(-50%);
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
.exam-header-right-search-box input { .exam-header-right-search-box input {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -645,20 +617,77 @@ const router = useRouter()
outline: none; outline: none;
} }
.exam-header-right-login-btn{ .exam-header-right-login-btn{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
padding: 12px 26px; padding: 12px 26px;
flex-direction: column; -webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
border-radius: 37px; border-radius: 37px;
background: #409EFF; background: #409EFF;
color: #FFF; color: #FFF;
font-size: 16px; font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
cursor: pointer; 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 { .dialog-mask {
position: fixed; position: fixed;
top: 0; top: 0;
@ -666,55 +695,74 @@ const router = useRouter()
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
z-index: 999; z-index: 9999;
} }
.dialog-box { .dialog-box {
position: relative; position: relative;
width: 475px; width: 475px;
background: #fff; background: #fff;
border-radius: 20px; border-radius: 20px;
padding: 50px; padding: 50px;
z-index: 10000;
} }
.dialog-title { .dialog-title {
font-size: 22px; font-size: 22px;
font-weight: bold; font-weight: bold;
margin-bottom: 30px; margin-bottom: 30px;
text-align: center; text-align: center;
} }
.dialog-content { .dialog-content {
margin-bottom: 50px; margin-bottom: 30px;
font-size: 18px; font-size: 18px;
color:#0E0E0E; color:#0E0E0E;
font-weight: 400;
} }
.dialog-btns { .dialog-btns {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
} }
.dialog-btn { .dialog-btn {
padding: 16px 0; padding: 16px 0;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
width: 172px; width: 172px;
} display: -webkit-box;
.dialog-btn, .ui-btn,.ui-search-btn,.dialog-success-btn{ display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
&.disabled { }
.dialog-btn.disabled {
opacity: 0.7; opacity: 0.7;
pointer-events: none; pointer-events: none;
}
} }
.loading-spinner { .loading-spinner {
width: 16px; width: 16px;
@ -723,30 +771,18 @@ const router = useRouter()
border: 2px solid #fff; border: 2px solid #fff;
border-top-color: transparent; border-top-color: transparent;
border-radius: 50%; border-radius: 50%;
-webkit-animation: spin 0.8s linear infinite;
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 { .cancel {
border: 1px solid #409EFF; border: 1px solid #409EFF;
color: #409EFF; color: #409EFF;
background: #fff; background: #fff;
font-size: 18px; font-size: 18px;
} }
.confirm { .confirm {
background: #409eff; background: #409eff;
color: #fff; color: #fff;
@ -754,107 +790,95 @@ const router = useRouter()
font-size: 18px; font-size: 18px;
} }
.input-label { .input-label {
font-size: 14px;
font-size: 14px; color: #0e0e0e;
color: #0e0e0e; margin-bottom: 8px;
margin-bottom: 8px;
} }
.login-input { .login-input {
margin: 0 0 15px; margin: 0 0 15px;
input { }
.login-input input {
width: 100%; width: 100%;
height: 56px; height: 56px;
padding: 0 15px; padding: 0 15px;
border: 1px solid #B2B3B5; /* 默认黑色边框 */ border: 1px solid #B2B3B5;
border-radius: 10px; border-radius: 10px;
font-size: 14px; font-size: 14px;
/* 去除输入框默认样式 */
-webkit-appearance: none;
outline: none; outline: none;
/* 隐藏数字输入框箭头 */ }
&[type="number"] { .login-input input:focus {
-moz-appearance: textfield; border-color: #79BBFF;
&::-webkit-outer-spin-button, }
&::-webkit-inner-spin-button { .code-input {
-webkit-appearance: none;
margin: 0;
}
}
&:focus {
border-color: #79BBFF; /* 输入时边框颜色 */
}
}
&.code-input {
position: relative; position: relative;
}
.get-code-btn { .get-code-btn {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 50%; top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); transform: translateY(-50%);
background: none; background: none;
border: none; border: none;
color: #79BBFF; /* 按钮文字颜色 */ color: #79BBFF;
padding: 0; 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; color: #0E0E0E;
font-size: 22px; font-size: 22px;
font-weight: 600; font-weight: 600;
} text-align: center;
.ui-qrcode-subtitle{ }
margin: 10px 0 10px; .ui-qrcode-card .ui-qrcode-subtitle{
margin: 10px 0;
color: #66676C; color: #66676C;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
font-style: normal; }
font-weight: 400; .ui-qrcode-box{
line-height: normal;
}
.ui-qrcode-box{
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
width: 280px; width: 280px;
height: 280px; height: 280px;
.ui-qrcode-mask{ }
.ui-qrcode-mask{
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0,0,0,0.5); background: rgba(0,0,0,0.5);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
z-index: 1001;
cursor: pointer; cursor: pointer;
.ui-qrcode-mask-icon{ z-index: 1001;
}
.ui-qrcode-mask-icon{
width: 40px; width: 40px;
height: 38px; height: 38px;
} }
.ui-qrcode-mask-title{ .ui-qrcode-mask-title{
margin-top: 10px; margin-top: 10px;
color: #FFF; color: #FFF;
text-align: center;
font-size: 16px; font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
}
}
} }
.dialog-right-top{ .dialog-right-top{
position: absolute; position: absolute;
@ -867,153 +891,120 @@ margin-bottom: 8px;
height: 70px; height: 70px;
border-radius: 0 20px 0 0; border-radius: 0 20px 0 0;
cursor: pointer; cursor: pointer;
img{ }
.dialog-right-top-box img{
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 0 20px 0 0; border-radius: 0 20px 0 0;
} }
.ui-dialog-right-tip{ .ui-dialog-right-tip{
position: absolute; position: absolute;
top: 20px; top: 20px;
left: -72px; left: -72px;
display: flex;
padding: 10px; padding: 10px;
justify-content: center;
align-items: center;
font-size: 16px; font-size: 16px;
color: #fff; color: #fff;
border-radius: 10px; border-radius: 10px;
background: #409EFF; background: #409EFF;
z-index: 1000; z-index: 1000;
&::after { }
.ui-dialog-right-tip::after {
content: ''; content: '';
position: absolute; position: absolute;
right: -14px; right: -14px;
top: 50%; top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); transform: translateY(-50%);
border-width: 8px; border-width: 8px;
border-style: solid; border-style: solid;
border-color: transparent transparent transparent #409EFF; border-color: transparent transparent transparent #409EFF;
}
}
} }
.dialog-scan-success{ .dialog-scan-success{
margin: 34px 0 0; margin: 34px 0 0;
text-align: center;
.dialog-scan-success-title{ }
.dialog-scan-success-title{
margin-bottom: 10px; margin-bottom: 10px;
color: #0E0E0E; color: #0E0E0E;
text-align: center;
font-size: 22px; font-size: 22px;
font-style: normal;
font-weight: 600; font-weight: 600;
line-height: normal; }
} .dialog-scan-success-subtitle{
.dialog-scan-success-subtitle{
color: #66676C; color: #66676C;
text-align: center;
font-size: 14px; font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
} }
.ui-dialog-contact-cancel{ .ui-dialog-contact-cancel{
position: absolute; position: absolute;
bottom:-64px; bottom:-64px;
left: 50%; left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%); transform: translateX(-50%);
width:34px; width:34px;
height: 34px; height: 34px;
cursor: pointer; cursor: pointer;
} }
/* 成功弹窗 */
.dialog-success-box{ .dialog-success-box{
display: flex;
width: 574px; width: 574px;
padding: 50px; padding: 50px;
flex-direction: column;
align-items: center;
border-radius: 20px; border-radius: 20px;
background: #FFF; background: #FFF;
.dialog-success-img{ text-align: center;
}
.dialog-success-img{
width: 130px; width: 130px;
height: 116px; height: 116px;
} }
.dialog-success-title{ .dialog-success-title{
margin: 50px auto 30px; margin: 50px auto 30px;
color: #0E0E0E; color: #0E0E0E;
font-size: 22px; font-size: 22px;
font-weight: 600; font-weight: 600;
} }
.dialog-success-content{ .dialog-success-content{
margin-bottom: 50px; margin-bottom: 50px;
color:#0E0E0E; color:#0E0E0E;
font-size: 18px; font-size: 18px;
} }
.dialog-success-btns{ .dialog-success-btns{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
} }
.dialog-success-btns-V1{ .dialog-success-btns-V1{
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
width: 400px; width: 400px;
} margin: 0 auto;
}
.dialog-success-btn{ .dialog-success-btn{
padding: 16px 0; padding: 16px 0;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
width: 172px; width: 172px;
} display: -webkit-box;
} display: -webkit-flex;
display: -ms-flexbox;
.ui-user-box{ display: flex;
position: absolute; -webkit-box-align: center;
top:38px; -webkit-align-items: center;
right:100px; -ms-flex-align: center;
height: 70px;
.ui-user-content{
display:flex;
align-items: 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; 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> </style>

289
src/components/pc/exam/examHome.vue
View File

@ -12,166 +12,141 @@ import 'swiper/css/scrollbar'
import 'swiper/css/lazy' import 'swiper/css/lazy'
import 'swiper/css/autoplay' import 'swiper/css/autoplay'
const router = useRouter() 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 typeIndex = ref(0)
const typeList = ref([ const typeList = ref([
{ { id:'all', name:'全部课程' },
id:'all',
name:'全部课程'
},
]) ])
const examList = ref([ const examList = ref([])
])
// 展示联系二维码
const flag = ref(false) const flag = ref(false)
const searchKeyword = ref('')
const changeType =(item,index) => { const changeType = (item, index) => {
typeIndex.value = index typeIndex.value = index
getList() getList()
} }
const goToBannerPath = (path,index) => {
console.log(path,'ppp') const goToBannerPath = (path, index) => {
if (path){ if (path) location.href = path
location.href = path
}
} }
const goToPath = (path,row) => {
localStorage.setItem('examType',typeIndex.value) const goToPath = (path, row) => {
router.push({ localStorage.setItem('examType', typeIndex.value)
name: path, router.push({ name: path, query:{id:row.id} })
query:{id:row.id}
})
} }
const getTypeList = () => { const getTypeList = () => {
request.get(`/go/api/app/v2/exam/home`) request.get(`/go/api/app/v2/exam/home`)
.then(res => { .then(res => {
let result = res.data let 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]
if (localStorage.getItem('searchHome')){ if (localStorage.getItem('searchHome')) {
searchKeyword.value = localStorage.getItem('searchHome') searchKeyword.value = localStorage.getItem('searchHome')
console.log(searchKeyword.value,'searchKeyword')
localStorage.removeItem('searchHome') localStorage.removeItem('searchHome')
} }
if (localStorage.getItem('examType')){ if (localStorage.getItem('examType')) {
typeIndex.value = localStorage.getItem('examType') * 1 typeIndex.value = Number(localStorage.getItem('examType'))
console.log(searchKeyword.value,'searchKeyword')
localStorage.removeItem('examType') localStorage.removeItem('examType')
}else { } else {
typeIndex.value = 0 typeIndex.value = 0
} }
getList() getList()
}) })
} }
const searchKeyword = ref('')
const changeSearch = (e) => { const changeSearch = (e) => {
searchKeyword.value = e searchKeyword.value = e
getList() getList()
} }
const 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 => { .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]
}) })
} }
// 新增时间格式化函数
// 优化后的时间格式化函数
const formatExamTime = (start, end) => { const formatExamTime = (start, end) => {
if (!start || !end) return null; if (!start || !end) return null;
const startDate = new Date(start); const startDate = new Date(start);
const endDate = new Date(end); const endDate = new Date(end);
// 日期格式化为两位数
const format = n => n.toString().padStart(2, '0'); const format = n => n.toString().padStart(2, '0');
// 分解日期组件
const s = { const s = {
y: startDate.getFullYear(), y: startDate.getFullYear(),
m: format(startDate.getMonth() + 1), m: format(startDate.getMonth() + 1),
d: format(startDate.getDate()), d: format(startDate.getDate()),
t: startDate.toTimeString().substr(0,5) t: startDate.toTimeString().slice(0,5)
}; };
const e = { const e = {
y: endDate.getFullYear(), y: endDate.getFullYear(),
m: format(endDate.getMonth() + 1), m: format(endDate.getMonth() + 1),
d: format(endDate.getDate()), d: format(endDate.getDate()),
t: endDate.toTimeString().substr(0,5) t: endDate.toTimeString().slice(0,5)
}; };
// 构建日期部分
let datePart = ''; let datePart = '';
if (s.y !== e.y) { if (s.y !== e.y) {
datePart = `${s.y}-${s.m}-${s.d} ${s.t} 至 ${e.y}-${e.m}-${e.d} ${e.t}`; 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}`; datePart = `${s.y}-${s.m}-${s.d} ${s.t} 至 ${e.m}-${e.d} ${e.t}`;
} else { } else {
datePart = `${s.y}-${s.m}-${s.d} ${s.t}-${e.t}`; datePart = `${s.y}-${s.m}-${s.d} ${s.t}-${e.t}`;
} }
return datePart;
return `${datePart}`;
} }
onMounted(() => { onMounted(() => {
window.addEventListener("scroll", () => { 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); }, true);
typeIndex.value = -1 typeIndex.value = 0
getTypeList() getTypeList()
}) })
</script> </script>
<template> <template>
<div class='exam-home'> <div class='exam-home'>
<exam-header @search='changeSearch' :searchKeyword='searchKeyword'></exam-header> <exam-header @search='changeSearch' :searchKeyword='searchKeyword'></exam-header>
<div> <div>
<swiper <swiper
id="swiper" id="banner-swiper"
:modules="modules" :modules="modules"
:slides-per-view="1" :slides-per-view="1"
:space-between="0" :space-between="0"
lazy lazy
loop 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-slide>
</swiper> </swiper>
<div class='exam-home-type-box'> <div class='exam-home-type-box'>
<div class='exam-home-type-list'> <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>
</div>
<div class='exam-home-list-box'> <div class='exam-home-list-box'>
<div v-if='examList && examList.length > 0' class='exam-home-list-style'> <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)'> <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 class='exam-empty-title'>敬请期待</div>
</div> </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>
</div> </div>
</div>
</template> </template>
<style scoped> <style scoped>
/* 基础兼容，不影响任何外部样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.exam-home{ .exam-home{
background: #f5f5f5; background: #f5f5f5;
height: 100vh; height: 100vh;
overflow-y: auto; 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 {
#swiper { display: none;
}
/* 轮播 */
#banner-swiper {
padding-top: 100px; padding-top: 100px;
width: 100%; width: 100%;
height: 708px; height: 708px;
position: relative;
z-index: 10;
} }
.banner-swiper {
#swiper .banner-swiper {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative;
z-index: 1200;
} }
.banner-swiper img {
#swiper .banner-swiper img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
display: block;
} }
/* 分类导航 */
.exam-home-type-box{ .exam-home-type-box{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
padding: 20px 0 20px 360px ; padding: 20px 0 20px 360px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
background: #FFF; background: #FFF;
//backdrop-filter: blur(15px); position: relative;
flex-shrink: 0; /* 防止容器收缩 */ z-index: 1;
} }
.exam-home-type-list{ .exam-home-type-list{
padding-bottom: 10px; padding-bottom: 10px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
flex-wrap: nowrap; flex-wrap: nowrap;
width: 100%; width: 100%;
overflow-x: auto; overflow-x: auto;
} }
.exam-home-type-item{ .exam-home-type-item{
margin-right: 20px; margin-right: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
padding: 12px 20px; -webkit-box-align: center;
justify-content: center; -webkit-align-items: center;
-ms-flex-align: center;
align-items: 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-radius: 100px;
border: 1px solid #DDD; border: 1px solid #DDD;
color: #0E0E0E; color: #0E0E0E;
font-size: 16px; font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
cursor: pointer; cursor: pointer;
flex-shrink: 0; /* 防止单个项被压缩 */ white-space: nowrap;
} }
.exam-home-type-item-active{ .exam-home-type-item-active{
background: #409EFF; background: #409EFF;
color: #FFF; color: #FFF;
border: 1px solid #409EFF; border-color: #409EFF;
} }
/* 课程列表 */
.exam-home-list-box{ .exam-home-list-box{
padding: 20px 360px 120px; padding: 20px 360px 120px;
width: 100%; width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
background: #F5F5F5; background: #F5F5F5;
position: relative;
z-index: 1;
} }
.exam-home-list-style{ .exam-home-list-style{
display:flex; display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
} }
.exam-home-list-item{ .exam-home-list-item{
margin-right: 20px; margin-right: 20px;
border-radius: 10px;
margin-bottom: 20px; margin-bottom: 20px;
border-radius: 10px;
cursor: pointer; cursor: pointer;
width: 386px;
overflow: hidden;
} }
.exam-home-list-item:nth-child(3n){ .exam-home-list-item:nth-child(3n){
margin-right: 0; margin-right: 0;
@ -291,69 +307,78 @@ onMounted(() => {
height: 240px; height: 240px;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
object-fit: cover; object-fit: cover;
display: block;
} }
/* 空状态 */
.exam-empty-box{ .exam-empty-box{
margin: 60px auto; margin: 60px auto;
.exam-empty-icon{ text-align: center;
}
.exam-empty-icon{
margin-bottom: 20px; margin-bottom: 20px;
width: 147px; width: 147px;
height: 121px; height: 121px;
} display: block;
.exam-empty-title{ margin: 0 auto 20px;
color: #0E0E0E;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
} }
.exam-empty-title{
color: #0E0E0E;
font-size: 20px;
}
/* 卡片内容 */
.exam-home-list-message-box{ .exam-home-list-message-box{
background: #ffffff; background: #fff;
border-radius: 10px; border-radius: 0 0 10px 10px;
} }
.exam-home-list-message{ .exam-home-list-message{
padding: 20px; padding: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; flex-direction: column;
justify-content: center; gap: 10px;
align-items: flex-start;
margin-top: -20px; margin-top: -20px;
border-radius: 10px; 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); backdrop-filter: blur(12.5px);
overflow: hidden; position: relative;
z-index: 2;
} }
.exam-home-list-message-title{ .exam-home-list-message-title{
height: 18px;
color: #0E0E0E; color: #0E0E0E;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
line-height: 18px;
max-width: 340px; max-width: 340px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.exam-home-list-message-exam-time{ .exam-home-list-message-exam-time{
margin-top: 10px;
color: #66676C; color: #66676C;
font-size: 16px; font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 16px;
} }
/* ====================== 只在这里加最小限度的权重保证显示 ====================== */
.exam-home-wechat-icon{ .exam-home-wechat-icon{
position: fixed; position: fixed;
right: 20px; right: 20px;
bottom: 120px; bottom: 120px;
width: 190px; width: 190px;
height: 220px; height: 220px;
z-index: 101; z-index: 999;
img{ }
.exam-home-wechat-icon img{
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} display: block;
} }
</style> </style>

464
src/components/pc/exam/examHomeReport.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { onMounted, ref } from 'vue' import { onMounted, ref, onUnmounted } from 'vue'
import ExamHeader from '@/components/pc/exam/examHeader.vue' import ExamHeader from '@/components/pc/exam/examHeader.vue'
import request from '@/utils/request.js' import request from '@/utils/request.js'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
@ -12,157 +12,150 @@ import 'swiper/css/scrollbar'
import 'swiper/css/lazy' import 'swiper/css/lazy'
import 'swiper/css/autoplay' import 'swiper/css/autoplay'
const router = useRouter() const router = useRouter()
// id 固定为 1，不修改
const id = ref('1') const id = ref('1')
const detail = ref( const detail = ref({
{ id: '',
id:'', title: '',
title:'', score_time_str: '',
score_time_str:'' // 考试出成绩时间 start_time_str: '',
} end_time_str: ''
) })
const modules = [Navigation, Pagination, Scrollbar, A11y, Lazy, Autoplay] 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 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) const flag = ref(false)
const changeType =(item,index) => { 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 typeIndex.value = index
getList() 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 = () => { const getTypeList = () => {
request.get(`/go/api/app/v2/exam/home`) request.get('/go/api/app/v2/exam/home')
.then(res => { .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() getList()
}) })
.catch(err => console.error('首页数据请求失败', err))
} }
const searchKeyword = ref('')
const changeSearch = (e) => {
searchKeyword.value = e
getList()
}
const 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 => { .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) => { 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 showReport.value = true
return return
} }
request.get(`go/api/app/v2/exam/paper/${id}/answer`)
request.get(`/go/api/app/v2/exam/paper/${id.value}/answer`)
.then(res => { .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 {
}else { reportStatus.value = data.id === 0
if (res.data.id == 0){
reportStatus.value = true
}else {
reportStatus.value = false
}
showReport.value = true showReport.value = true
} }
console.log(res,'r===') })
.catch(err => {
console.error('成绩查询失败', err)
}) })
} }
const getDetail = () => { const getDetail = () => {
request.get(`/go/api/app/v2/exam/paper/${id.value}/detail`) request.get(`/go/api/app/v2/exam/paper/${id.value}/detail`)
.then(res => { .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(() => { 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() getTypeList()
getDetail() getDetail()
})
onUnmounted(() => {
if (scrollListener) {
window.removeEventListener('scroll', scrollListener, true)
}
}) })
</script> </script>
<template> <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 <swiper
id="swiper" id="swiper"
:modules="modules" :modules="modules"
@ -170,71 +163,144 @@ onMounted(() => {
:space-between="0" :space-between="0"
lazy lazy
loop loop
:autoplay="true" :autoplay="{ delay: 3000, disableOnInteraction: false }"
@swiper="onSwiper" @swiper="onSwiper"
:pagination="{ :pagination="{ clickable: true }"
clickable: true
}"
> >
<swiper-slide <swiper-slide
class="banner-swiper" class="banner-swiper"
v-for="(item, index) in swiperList" v-for="(item, index) in swiperList"
:key="index" :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-slide>
</swiper> </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> <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> </svg>
</div> </div>
</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"> <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> <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" />
<stop stop-color="#409EFF"/> </clipPath>
<stop offset="1" stop-color="#409EFF" stop-opacity="0.3"/> <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>
<linearGradient id="paint1_linear_571_2865" x1="40.0072" y1="11.7614" x2="40.0072" y2="20.0224" gradientUnits="userSpaceOnUse"> <linearGradient
<stop stop-color="#409EFF"/> id="paint1_linear_571_2865"
<stop offset="1" stop-color="#409EFF" stop-opacity="0.3"/> 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> </linearGradient>
</defs> </defs>
</svg> </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-title">温馨提示</div>
<div class="dialog-success-content"> <div class="dialog-success-content">
{{ reportStatus ? '未参加考试' : '距离出成绩时间还有' + showTime +'天，请耐心等待' }} {{ reportStatus ? '未参加考试' : `距离出成绩时间还有 ${showTime} 天，请耐心等待` }}
</div> </div>
<div class="dialog-success-btns"> <div class="dialog-success-btns">
<div class="dialog-success-btn confirm" @click="showReport = false" > <div class="dialog-success-btn confirm" @click="showReport = false">
确定 确定
</div> </div>
</div> </div>
@ -244,70 +310,72 @@ onMounted(() => {
</template> </template>
<style scoped> <style scoped>
.exam-home{ .exam-home {
background: #ffffff; background: #ffffff;
height: 100vh; min-height: 100vh;
} }
/* 顶部轮播图 */
#swiper { #swiper {
padding-top: 100px; padding-top: 100px;
width: 100%; width: 100%;
height: 708px; height: 708px;
} }
#swiper .banner-swiper { .banner-swiper {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
z-index: 1200;
} }
#swiper .banner-swiper img { .banner-swiper img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover;
} }
.check-box{
margin : 90px auto; .check-box {
margin: 90px auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.check-title{ }
color: #0E0E0E;
.check-title {
color: #0e0e0e;
font-size: 28px; font-size: 28px;
font-style: normal;
font-weight: 600; font-weight: 600;
line-height: normal; }
}
.check-subtitle{ .check-subtitle {
margin: 26px 0; margin: 26px 0;
color: #66676C; color: #66676c;
font-size: 18px; font-size: 18px;
font-style: normal; }
font-weight: 400;
line-height: normal; .check-btn {
}
.check-btn{
margin-bottom: 150px; margin-bottom: 150px;
display: flex; display: flex;
padding: 16px 32px;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 16px 32px;
border-radius: 10px; border-radius: 10px;
background: #409EFF; background: #409eff;
color: #FFF; color: #fff;
font-size: 18px; font-size: 18px;
font-style: normal;
font-weight: 500; font-weight: 500;
line-height: normal;
cursor: pointer; cursor: pointer;
.check-btn-icon{ transition: opacity 0.3s;
margin-left: 6px; }
.check-btn:hover {
opacity: 0.9;
}
.check-btn-icon {
width: 24px; width: 24px;
height: 23px; height: 23px;
}
}
} }
.dialog-mask { .dialog-mask {
position: fixed; position: fixed;
top: 0; top: 0;
@ -320,46 +388,48 @@ onMounted(() => {
justify-content: center; justify-content: center;
z-index: 999; z-index: 999;
} }
.dialog-success-box{
display: flex; .dialog-success-box {
width: 574px; width: 574px;
padding: 50px; padding: 50px;
display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border-radius: 20px; border-radius: 20px;
background: #FFF; background: #fff;
.dialog-success-img{ }
.dialog-success-img {
width: 130px; width: 130px;
height: 116px; height: 116px;
} }
.dialog-success-title{
margin: 50px auto 30px; .dialog-success-title {
color: #0E0E0E; margin: 50px 0 30px;
color: #0e0e0e;
font-size: 22px; font-size: 22px;
font-weight: 600; font-weight: 600;
} }
.dialog-success-content{
.dialog-success-content {
margin-bottom: 50px; margin-bottom: 50px;
color:#0E0E0E; color: #0e0e0e;
font-size: 18px; font-size: 18px;
} text-align: center;
.dialog-success-btns{ }
display: flex;
justify-content: center; .dialog-success-btn {
align-items: center;
}
.dialog-success-btn{
padding: 16px 0; padding: 16px 0;
border-radius: 10px; border-radius: 10px;
cursor: pointer;
width: 172px; width: 172px;
} cursor: pointer;
text-align: center;
font-size: 18px;
} }
.confirm { .confirm {
background: #409eff; background: #409eff;
color: #fff; color: #fff;
border: 1px solid #409eff; border: 1px solid #409eff;
font-size: 18px;
} }
</style> </style>

623
src/components/pc/exam/onlineTest.vue
View File

@ -527,52 +527,90 @@ onBeforeUnmount(() => {
</template> </template>
<style scoped> <style scoped>
.onlineTest{ /* 全局重置与基础设置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.onlineTest {
background: #F5F5F5; background: #F5F5F5;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
font-weight: 400; font-weight: 400;
line-height: normal; line-height: normal;
.ui-joinUs-bg{ 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; display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 20px 30px; padding: 20px 30px;
margin-bottom: 96px; margin-bottom: 96px;
background: #ffffff; background: #ffffff;
.ui-JoinUs-left-title{ border-bottom: 1px solid #eee; /* 增加视觉边界 */
}
.ui-JoinUs-left-title {
color: #0E0E0E; color: #0E0E0E;
font-size: 18px; font-size: 18px;
font-style: normal;
font-weight: 600; font-weight: 600;
line-height: normal; }
} .ui-right-user {
.ui-right-user{ display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
justify-content: space-between; -webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
width: 262px; width: 262px;
color: #0E0E0E; color: #0E0E0E;
.user{ gap: 10px;
}
.user {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
max-width: 100px; max-width: 100px;
} overflow: hidden;
.test-out{ text-overflow: ellipsis;
}
.test-out {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
padding: 8px 16px; padding: 8px 16px;
justify-content: center; -webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 6px; border-radius: 6px;
border: 0.5px solid #B2B3B5; border: 0.5px solid #B2B3B5;
background: #FFF; background: #FFF;
font-weight: 400; font-weight: 400;
cursor: pointer; cursor: pointer;
} font-size: 14px;
} }
}
.answer-card{ /* 答题卡面板 */
.answer-card {
position: fixed; position: fixed;
left: 336px; left: 336px;
top: 85px; top: 85px;
@ -580,47 +618,71 @@ onBeforeUnmount(() => {
height: 840px; height: 840px;
padding: 12px; padding: 12px;
background: #ffffff; background: #ffffff;
.a-c-title{ border: 1px solid #eee;
padding: 10px 10px; }
.a-c-title {
padding: 10px;
background: #f5f5f5; background: #f5f5f5;
} font-weight: bold;
.a-c-default{ font-size: 14px;
}
.a-c-default {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
justify-content: space-between; -webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
padding: 0 10px 10px; padding: 0 10px 10px;
background: #f5f5f5; background: #f5f5f5;
margin-bottom: 20px; margin-bottom: 20px;
.default-box{ font-size: 12px;
gap:10px;
}
.default-box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
align-items: center; align-items: center;
.default-box-border{ //margin-right: 10px;
}
.default-box-border {
margin-right: 6px; margin-right: 6px;
width: 14px; width: 14px;
height: 14px; height: 14px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #DDD; border: 1px solid #DDD;
} }
.default-box-title{ .default-box-title {
font-size: 12px; font-size: 12px;
color: #0E0E0E; color: #0E0E0E;
} }
.default-box-border-v2{ .default-box-border-v2 {
border-radius: 4px; 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{ .a-c-list-title {
color: #0E0E0E; color: #0E0E0E;
} font-size: 14px;
.a-c-list-box{
margin-top: 10px; margin-top: 10px;
}
.a-c-list-box {
margin-top: 10px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
.a-c-list-box-item{
}
.a-c-list-box-item {
margin-right: 10px; margin-right: 10px;
margin-bottom: 10px; margin-bottom: 10px;
width: 23px; width: 23px;
@ -628,24 +690,32 @@ onBeforeUnmount(() => {
border-radius: 3px; border-radius: 3px;
border: 0.5px solid #B2B3B5; border: 0.5px solid #B2B3B5;
color: #B2B3B5; color: #B2B3B5;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
&:nth-child(5n){ font-size: 12px;
}
.a-c-list-box-item:nth-child(5n){
margin-right: 0; margin-right: 0;
} }
} .a-c-list-box-select {
border: 0.5px solid #409EFF; /* 修复：去掉了var */
color: #409EFF; /* 修复：去掉了var */
background: #ECF5FF; /* 修复：去掉了var */
}
.a-c-list-box-select{ /* 时间卡片面板 */
border: 0.5px solid #409EFF; .time-card {
color: #409EFF;
background: #ECF5FF;
}
}
}
.time-card{
position: fixed; position: fixed;
left: 1432px; left: 1432px;
top: 85px; top: 85px;
@ -654,101 +724,132 @@ onBeforeUnmount(() => {
padding: 12px; padding: 12px;
background: #ffffff; background: #ffffff;
text-align: center; text-align: center;
.time-card-sub-title{ border: 1px solid #eee;
}
.time-card-sub-title {
margin: 8px 0; margin: 8px 0;
color: #66676C; color: #66676C;
} font-size: 12px;
.time-card-time { }
.time-card-time {
margin-top: 8px; margin-top: 8px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end; align-items: flex-end;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
gap: 2px; gap: 2px;
}
.number { .number {
font-size: 24px; font-size: 24px;
color: #FF2946; color: #FF2946;
line-height: 1; line-height: 1;
} }
.unit { .unit {
font-size: 12px; font-size: 12px;
color: #0E0E0E; color: #0E0E0E;
position: relative; position: relative;
top: -2px; top: -2px;
} }
} .time-card-time-all {
.time-card-time-all{
margin-top: 8px; margin-top: 8px;
color: #66676C; color: #66676C;
font-size: 14px; font-size: 14px;
font-style: normal; }
font-weight: 400; .time-card-line {
line-height: normal;
}
.time-card-line{
margin: 30px 0; margin: 30px 0;
width: 156px; width: 156px;
height: 1px; height: 1px;
background: rgba(221, 221, 221,.5); background: rgba(221, 221, 221, 0.5);
}
} .time-card-process {
.time-card-process{ width: 156px;
width:156px;
height: 4px; height: 4px;
border-radius: 10px; border-radius: 10px;
background: #EBEBEB; background: #EBEBEB;
} overflow: hidden;
.time-card-process-v2{ }
width:156px; .time-card-process-v2 {
width: 0; /* 默认0，由JS控制 */
height: 4px; height: 4px;
border-radius: 10px; border-radius: 10px;
background: #409EFF; background: #409EFF; /* 修复：去掉了var */
} transition: width 0.3s;
.time-btn{ }
.time-btn {
margin: 30px auto; margin: 30px auto;
padding: 16px 30px; padding: 16px 30px;
width: fit-content; width: fit-content;
color:#fff; color: #fff;
font-size: 18px; font-size: 18px;
border-radius: 6px; border-radius: 6px;
border: 0.5px solid #409EFF; border: 0.5px solid #409EFF; /* 修复：去掉了var */
background: #409EFF; background: #409EFF; /* 修复：去掉了var */
cursor: pointer; cursor: pointer;
} }
.font-size-selector{ .font-size-selector {
margin-bottom: 60px; margin: 20px auto;
.font-size-line-box{ width: 150px;
}
.font-size-line-box {
margin-top: 26px; margin-top: 26px;
position: relative; position: relative;
.font-size-line{ width: 100%;
text-align: center;
}
.font-size-line {
width: 150px; width: 150px;
height: 2px; height: 2px;
background: #EBEBEB; background: #EBEBEB;
} margin: 0 auto;
.font-size-box{ }
.font-size-box {
position: absolute; position: absolute;
top: -5px; top: -5px;
left: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
}
.font-size-item{ .font-size-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
.font-size-item-icon{ }
.font-size-item-icon {
margin-bottom: 6px; margin-bottom: 6px;
width: 12px; width: 12px;
height: 12px; height: 12px;
background: #ffffff; background: #ffffff;
} border: 1px solid #ddd;
} }
}
} /* 答题区 */
} .answer-box {
}
.answer-box{
position: fixed; position: fixed;
left: 529px; left: 529px;
top: 85px; top: 85px;
@ -756,168 +857,159 @@ onBeforeUnmount(() => {
height: 840px; height: 840px;
padding: 12px; padding: 12px;
background: #ffffff; background: #ffffff;
.answer-scroll{ border: 1px solid #eee;
}
.answer-box-title {
padding: 6px 10px;
background: #f5f5f5;
font-weight: bold;
}
.answer-scroll {
height: 790px; height: 790px;
padding-bottom: 30px; padding-bottom: 30px;
overflow-y: auto; overflow-y: auto;
scrollbar-width: none; /* Firefox 64+ */ scrollbar-width: none;
-ms-overflow-style: none; /* IE 和 Edge */ -ms-overflow-style: none;
font-size: 14px; font-size: 14px;
} border: 1px solid #eee;
.answer-scroll::-webkit-scrollbar { border-radius: 8px;
background: #fff;
}
.answer-scroll::-webkit-scrollbar {
display: none; display: none;
} }
.answer-box-title{
padding: 6px 10px;
background: #f5f5f5;
}
}
.ui-title{
margin-top: 30px;
} /* 题目样式 */
.ui-answer-list{ .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; border-radius: 10px;
.ui-answer-list-box{ }
margin-top: 10px ; .ui-answer-list-box {
margin-top: 10px;
cursor: pointer; cursor: pointer;
.ui-answer-item{ }
.ui-answer-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
padding: 8px 0;
.ui-check-box{ border-bottom: 1px dashed #eee;
}
.ui-check-box {
margin-right: 10px; margin-right: 10px;
width: 16px; width: 16px;
height: 16px; height: 16px;
vertical-align: center; vertical-align: center;
} }
div{
display: flex;
align-items: center;
justify-content: center;
}
}
} /* 弹窗样式 (修复了原代码中的语法错误) */
.ui-answer-list-box:last-child{ .dialog-mask {
border-bottom:none;
}
}
.font12{
font-size: 12px;
}
.font14{
font-size: 14px;
}
.dialog-mask {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
z-index: 999; z-index: 9999;
} }
.dialog-box {
.dialog-box {
width: 500px; width: 500px;
background: #fff; background: #fff;
border-radius: 20px; border-radius: 20px;
padding: 50px; 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 { }
.dialog-title {
font-size: 22px; font-size: 22px;
font-weight: bold; font-weight: bold;
margin-bottom: 30px; margin-bottom: 30px;
} color: #333;
}
.dialog-content { .dialog-content {
margin-bottom: 50px; margin-bottom: 50px;
font-size: 18px; font-size: 18px;
color:#0E0E0E; color: #0E0E0E;
} line-height: 1.6;
}
.dialog-btns { .dialog-btns {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
} }
.dialog-btn {
.dialog-btn {
padding: 16px 50px; padding: 16px 50px;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
} border: none;
font-size: 18px;
.cancel { font-weight: 500;
transition: all 0.2s;
}
.cancel {
border: 1px solid #409EFF; border: 1px solid #409EFF;
color: #409EFF; color: #409EFF;
background: #fff; background: #fff;
font-size: 18px; }
} .confirm {
background: #409EFF; /* 修复：去掉了var */
.confirm {
background: #409eff;
color: #fff; color: #fff;
border: 1px solid #409eff; border: 1px solid #409EFF; /* 修复：去掉了var */
font-size: 18px; }
} .confirm:hover {
.dialog-success-box{ background: #337ecc;
display: flex; border-color: #337ecc;
width: 574px; }
padding: 50px;
flex-direction: column; /* Toast 提示 */
align-items: center; .toast-mask {
border-radius: 20px;
background: #FFF;
.dialog-success-img{
width: 130px;
height: 116px;
}
.dialog-success-title{
margin: 50px auto 30px;
color: #0E0E0E;
font-size: 22px;
font-weight: 600;
}
.dialog-success-content{
margin-bottom: 50px;
color:#0E0E0E;
font-size: 18px;
}
.dialog-success-btns{
display: flex;
justify-content: center;
align-items: center;
}
.dialog-success-btn{
padding: 16px 0;
border-radius: 10px;
cursor: pointer;
width: 172px;
}
}
.toast-mask {
position: fixed; position: fixed;
top: 100px; top: 100px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 1000; z-index: 10000;
}
.toast-box { .toast-box {
padding: 12px 24px; padding: 12px 24px;
background: rgba(231, 245, 224, 0.7); background: rgba(231, 245,224, 0.9);
color: #6bc340; color: #6bc340;
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;
border: 1px solid #6bc340; border: 1px solid #6bc340;
animation: fadeInOut 2s; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
} }
}
.time-warning { /* 时间警告 */
.time-warning {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -928,53 +1020,96 @@ onBeforeUnmount(() => {
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
z-index: 1000; z-index: 10000;
animation: blink 1s infinite alternate; 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 { @keyframes blink {
from { opacity: 1; } from { opacity: 1; }
to { opacity: 0.8; } to { opacity: 0.8; }
} }
@keyframes spin {
@keyframes fadeInOut { to { transform: rotate(360deg); }
0%,100% { opacity: 0; }
20%,80% { opacity: 1; }
} }
/* 修复：将 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;
}
.dialog-success-title {
margin: 50px auto 30px;
color: #0E0E0E;
font-size: 22px;
font-weight: 600;
}
.dialog-success-content {
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;
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;
}
</style> </style>

687
src/components/pc/exam/reportCard.vue
View File

File diff suppressed because it is too large Load Diff

2
src/components/upload/imageUpload.vue
View File

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

2
src/utils/request.js
View File

@ -16,7 +16,7 @@ const openFullScreen2 = () => {
} }
const service = axios.create({ 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, timeout: 8000,
withCredentials: false, withCredentials: false,
headers: { headers: {