适配其他浏览器，样式问题
This commit is contained in:
parent
39457f90cd
commit
b2c97b7c70
@ -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"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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 showAccountTip = ref(false) // 图标提示
|
||||
const isScanSucess = ref(false) // 图标提示
|
||||
const pollingTimer = ref(null) // 新增轮询定时器
|
||||
const isAccountLogin = ref(true)
|
||||
const showAccountTip = ref(false)
|
||||
const isScanSucess = ref(false)
|
||||
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分钟
|
||||
console.log(result,'ggg')
|
||||
}, 3 * 60000)
|
||||
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{
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
.exam-menu-active .exam-menu-line{
|
||||
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;
|
||||
height: 26px;
|
||||
width: 320px;
|
||||
//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,55 +695,74 @@ 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;
|
||||
}
|
||||
.dialog-btn, .ui-btn,.ui-search-btn,.dialog-success-btn{
|
||||
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;
|
||||
&.disabled {
|
||||
}
|
||||
.dialog-btn.disabled {
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.loading-spinner {
|
||||
width: 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,107 +790,95 @@ const router = useRouter()
|
||||
font-size: 18px;
|
||||
}
|
||||
.input-label {
|
||||
|
||||
font-size: 14px;
|
||||
color: #0e0e0e;
|
||||
margin-bottom: 8px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
border-color: #79BBFF; /* 输入时边框颜色 */
|
||||
}
|
||||
}
|
||||
|
||||
&.code-input {
|
||||
}
|
||||
.login-input input:focus {
|
||||
border-color: #79BBFF;
|
||||
}
|
||||
.code-input {
|
||||
position: relative;
|
||||
|
||||
.get-code-btn {
|
||||
}
|
||||
.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;
|
||||
font-size: 14px;
|
||||
}
|
||||
.ui-qrcode-card{
|
||||
|
||||
.ui-qrcode-title{
|
||||
/* 二维码登录 */
|
||||
.ui-qrcode-card .ui-qrcode-title{
|
||||
color: #0E0E0E;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.ui-qrcode-subtitle{
|
||||
margin: 10px 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.ui-qrcode-card .ui-qrcode-subtitle{
|
||||
margin: 10px 0;
|
||||
color: #66676C;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
.ui-qrcode-box{
|
||||
}
|
||||
.ui-qrcode-box{
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
.ui-qrcode-mask{
|
||||
}
|
||||
.ui-qrcode-mask{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
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;
|
||||
.ui-qrcode-mask-icon{
|
||||
z-index: 1001;
|
||||
}
|
||||
.ui-qrcode-mask-icon{
|
||||
width: 40px;
|
||||
height: 38px;
|
||||
}
|
||||
.ui-qrcode-mask-title{
|
||||
}
|
||||
.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,153 +891,120 @@ 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;
|
||||
}
|
||||
.ui-dialog-right-tip{
|
||||
}
|
||||
.ui-dialog-right-tip{
|
||||
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;
|
||||
|
||||
.dialog-scan-success-title{
|
||||
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{
|
||||
}
|
||||
.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;
|
||||
.dialog-success-img{
|
||||
text-align: center;
|
||||
}
|
||||
.dialog-success-img{
|
||||
width: 130px;
|
||||
height: 116px;
|
||||
}
|
||||
.dialog-success-title{
|
||||
}
|
||||
.dialog-success-title{
|
||||
margin: 50px auto 30px;
|
||||
color: #0E0E0E;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.dialog-success-content{
|
||||
}
|
||||
.dialog-success-content{
|
||||
margin-bottom: 50px;
|
||||
color:#0E0E0E;
|
||||
font-size: 18px;
|
||||
}
|
||||
.dialog-success-btns{
|
||||
}
|
||||
.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{
|
||||
}
|
||||
.dialog-success-btns-V1{
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.dialog-success-btn{
|
||||
margin: 0 auto;
|
||||
}
|
||||
.dialog-success-btn{
|
||||
padding: 16px 0;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
width: 172px;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-user-box{
|
||||
position: absolute;
|
||||
top:38px;
|
||||
right:100px;
|
||||
height: 70px;
|
||||
.ui-user-content{
|
||||
display:flex;
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: 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>
|
||||
|
||||
@ -12,166 +12,141 @@ import 'swiper/css/scrollbar'
|
||||
import 'swiper/css/lazy'
|
||||
import 'swiper/css/autoplay'
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const modules = [Navigation, Pagination, Scrollbar, A11y, Lazy, Autoplay]
|
||||
const onSwiper = (swiper) => {
|
||||
};
|
||||
const modules = [Navigation, Pagination, Scrollbar, A11y, Autoplay, Lazy]
|
||||
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) => {
|
||||
const changeType = (item, index) => {
|
||||
typeIndex.value = index
|
||||
getList()
|
||||
}
|
||||
const goToBannerPath = (path,index) => {
|
||||
console.log(path,'ppp')
|
||||
if (path){
|
||||
location.href = path
|
||||
}
|
||||
|
||||
const goToBannerPath = (path, index) => {
|
||||
if (path) location.href = path
|
||||
}
|
||||
const goToPath = (path,row) => {
|
||||
localStorage.setItem('examType',typeIndex.value)
|
||||
router.push({
|
||||
name: path,
|
||||
query:{id:row.id}
|
||||
})
|
||||
|
||||
const goToPath = (path, row) => {
|
||||
localStorage.setItem('examType', typeIndex.value)
|
||||
router.push({ 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')){
|
||||
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
|
||||
console.log(searchKeyword.value,'searchKeyword')
|
||||
if (localStorage.getItem('examType')) {
|
||||
typeIndex.value = Number(localStorage.getItem('examType'))
|
||||
localStorage.removeItem('examType')
|
||||
}else {
|
||||
} 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) {
|
||||
datePart = `${s.y}-${s.m}-${s.d} ${s.t} 至 ${e.m}-${e.d} ${e.t}`;
|
||||
} else if (s.d !== e.d) {
|
||||
} 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 {
|
||||
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;
|
||||
// 判断回到顶部按钮的显示条件,如果滚动距离大于1000就显示
|
||||
scrollTop > 300 ? (flag.value= true) : (flag.value = false);
|
||||
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
||||
flag.value = scrollTop > 300;
|
||||
}, true);
|
||||
typeIndex.value = -1
|
||||
typeIndex.value = 0
|
||||
getTypeList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class='exam-home'>
|
||||
<div class='exam-home'>
|
||||
<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"
|
||||
@swiper="onSwiper"
|
||||
:pagination="{
|
||||
clickable: true
|
||||
}"
|
||||
:autoplay="{ delay: 3000, disableOnInteraction: false }"
|
||||
:pagination="{ 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)' />
|
||||
<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)" />
|
||||
</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>
|
||||
</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 */
|
||||
-ms-overflow-style: none; /* IE/Edge */
|
||||
&::-webkit-scrollbar {
|
||||
display: none; /* Chrome/Safari/Opera */
|
||||
}
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
/* 顶部轮播图 */
|
||||
#swiper {
|
||||
.exam-home::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 轮播 */
|
||||
#banner-swiper {
|
||||
padding-top: 100px;
|
||||
width: 100%;
|
||||
height: 708px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#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;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 分类导航 */
|
||||
.exam-home-type-box{
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
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;
|
||||
background: #FFF;
|
||||
//backdrop-filter: blur(15px);
|
||||
flex-shrink: 0; /* 防止容器收缩 */
|
||||
|
||||
position: relative;
|
||||
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;
|
||||
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;
|
||||
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:flex;
|
||||
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;
|
||||
.exam-empty-icon{
|
||||
text-align: center;
|
||||
}
|
||||
.exam-empty-icon{
|
||||
margin-bottom: 20px;
|
||||
width: 147px;
|
||||
height: 121px;
|
||||
}
|
||||
.exam-empty-title{
|
||||
color: #0E0E0E;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
display: block;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
.exam-empty-title{
|
||||
color: #0E0E0E;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 卡片内容 */
|
||||
.exam-home-list-message-box{
|
||||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
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;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
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;
|
||||
img{
|
||||
z-index: 999;
|
||||
}
|
||||
.exam-home-wechat-icon img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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(
|
||||
{
|
||||
id:'',
|
||||
title:'',
|
||||
score_time_str:'' // 考试出成绩时间
|
||||
}
|
||||
)
|
||||
|
||||
const detail = ref({
|
||||
id: '',
|
||||
title: '',
|
||||
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([
|
||||
{
|
||||
id:'all',
|
||||
name:'全部课程'
|
||||
},
|
||||
])
|
||||
const examList = ref([
|
||||
])
|
||||
// 展示联系二维码
|
||||
const typeList = ref([{ id: 'all', name: '全部课程' }])
|
||||
const examList = ref([])
|
||||
const searchKeyword = ref('')
|
||||
|
||||
const showReport = ref(false)
|
||||
const reportStatus = ref(false)
|
||||
const showTime = ref(0)
|
||||
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
|
||||
getList()
|
||||
}
|
||||
const goToBannerPath = (path,index) => {
|
||||
console.log(path,'ppp')
|
||||
location.href = path
|
||||
}
|
||||
const goToPath = (path,row) => {
|
||||
router.push({
|
||||
name: path,
|
||||
query:{id:row.id}
|
||||
})
|
||||
|
||||
const changeSearch = (val) => {
|
||||
searchKeyword.value = val
|
||||
getList()
|
||||
}
|
||||
|
||||
const getTypeList = () => {
|
||||
request.get(`/go/api/app/v2/exam/home`)
|
||||
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]
|
||||
const result = res.data || {}
|
||||
swiperList.value = result.carousel_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
|
||||
// swiperList.value =result.carousel_list
|
||||
// typeList.value = [...typeList.value,...result.paper_cate_list]
|
||||
examList.value = res.data || []
|
||||
})
|
||||
.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 endDate = new Date(end);
|
||||
const year = startDate.getFullYear()
|
||||
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();
|
||||
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}`;
|
||||
return `${year}年${month}月${day}日 ${startTime}-${endTime}`
|
||||
}
|
||||
const reportStatus = ref(false) // 是否参加了考试
|
||||
const showTime = ref() // 距离出成绩时间
|
||||
const safeDateParse = (dateString) => { //日期校验
|
||||
console.log(dateString,'dateString==')
|
||||
const date = new Date(dateString);
|
||||
return isNaN(date) ? null : date;
|
||||
};
|
||||
const getIsJoin = (id) => {
|
||||
const scoreDate = safeDateParse(detail.value.score_time_str);
|
||||
console.log(scoreDate,scoreDate > new Date(),'33')
|
||||
if (!scoreDate || scoreDate > new Date()){
|
||||
const timeDiff = Math.ceil((scoreDate - new Date()) / (1000 * 60 * 60 * 24));
|
||||
showTime.value = timeDiff > 0 ? timeDiff : 0;
|
||||
|
||||
const safeDateParse = (dateString) => {
|
||||
const date = new Date(dateString)
|
||||
return isNaN(date) ? null : date
|
||||
}
|
||||
|
||||
// 查询成绩，固定使用 id.value = '1'
|
||||
const getIsJoin = () => {
|
||||
const scoreDate = safeDateParse(detail.value.score_time_str)
|
||||
const now = new Date()
|
||||
|
||||
if (!scoreDate || scoreDate > now) {
|
||||
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){
|
||||
router.push({
|
||||
name:'reportCard'
|
||||
})
|
||||
}else {
|
||||
if (res.data.id == 0){
|
||||
reportStatus.value = true
|
||||
}else {
|
||||
reportStatus.value = false
|
||||
}
|
||||
const data = res.data || {}
|
||||
if (data.id !== 0 && data.score && data.score.toString().length > 1) {
|
||||
router.push({ name: 'reportCard' })
|
||||
} else {
|
||||
reportStatus.value = data.id === 0
|
||||
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.score_time_str = '2025-05-31 09:00:00'
|
||||
console.log(detail.value,'rrr')
|
||||
detail.value = res.data || {}
|
||||
})
|
||||
.catch(err => console.error('试卷详情请求失败', err))
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("scroll", () => {
|
||||
// 获取滚动元素的滚动距离
|
||||
let scrollTop =
|
||||
window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop;
|
||||
// 判断回到顶部按钮的显示条件,如果滚动距离大于1000就显示
|
||||
scrollTop > 300 ? (flag.value= true) : (flag.value = false);
|
||||
}, true);
|
||||
scrollListener = () => {
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
|
||||
flag.value = scrollTop > 300
|
||||
}
|
||||
window.addEventListener('scroll', scrollListener, true)
|
||||
|
||||
getTypeList()
|
||||
getDetail()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (scrollListener) {
|
||||
window.removeEventListener('scroll', scrollListener, true)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class='exam-home'>
|
||||
<exam-header :menu-index="'2'" @search='changeSearch'></exam-header>
|
||||
<div>
|
||||
<div class="exam-home">
|
||||
<exam-header :menu-index="'2'" @search="changeSearch"></exam-header>
|
||||
|
||||
<swiper
|
||||
id="swiper"
|
||||
:modules="modules"
|
||||
@ -170,71 +163,144 @@ onMounted(() => {
|
||||
:space-between="0"
|
||||
lazy
|
||||
loop
|
||||
:autoplay="true"
|
||||
:autoplay="{ delay: 3000, disableOnInteraction: false }"
|
||||
@swiper="onSwiper"
|
||||
:pagination="{
|
||||
clickable: true
|
||||
}"
|
||||
:pagination="{ 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)' />
|
||||
<!-- <div class="swiper-lazy-preloader"></div>-->
|
||||
<!-- <div class="swiper-slide-title">-->
|
||||
<!-- <h1>{{ item.title }}</h1>-->
|
||||
<!-- <div class='swiper-slide-more' v-if='index != 0'>-->
|
||||
<!-- <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>-->
|
||||
<img
|
||||
class="swiper-lazy"
|
||||
:src="item.pic"
|
||||
alt="轮播图"
|
||||
@click.stop="goToBannerPath(item.path)"
|
||||
/>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div class='check-box'>
|
||||
<div class='check-title'>{{detail.title}}</div>
|
||||
<div class='check-subtitle'>考试时间：{{ formatExamTime(detail.start_time_str,detail.end_time_str) || '--' }}</div>
|
||||
<div class='check-btn' @click='getIsJoin(1)'>
|
||||
|
||||
<div class="check-box">
|
||||
<div class="check-title">{{ detail.title || '暂无考试名称' }}</div>
|
||||
<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">
|
||||
<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
|
||||
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">
|
||||
<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"/>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="90"
|
||||
height="100"
|
||||
viewBox="0 0 90 100"
|
||||
fill="none"
|
||||
class="dialog-success-img"
|
||||
>
|
||||
<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><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"/>
|
||||
<clipPath id="bgblur_0_571_2865_clip_path" transform="translate(-14.883 29.3386)">
|
||||
<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">
|
||||
<stop stop-color="#409EFF"/>
|
||||
<stop offset="1" stop-color="#409EFF" stop-opacity="0.3"/>
|
||||
<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" >
|
||||
<div class="dialog-success-btn confirm" @click="showReport = false">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
@ -244,70 +310,72 @@ onMounted(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.exam-home{
|
||||
.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;
|
||||
|
||||
.check-box {
|
||||
margin: 90px auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.check-title{
|
||||
color: #0E0E0E;
|
||||
}
|
||||
|
||||
.check-title {
|
||||
color: #0e0e0e;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
}
|
||||
.check-subtitle{
|
||||
}
|
||||
|
||||
.check-subtitle {
|
||||
margin: 26px 0;
|
||||
color: #66676C;
|
||||
color: #66676c;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
.check-btn{
|
||||
}
|
||||
|
||||
.check-btn {
|
||||
margin-bottom: 150px;
|
||||
display: flex;
|
||||
padding: 16px 32px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 16px 32px;
|
||||
border-radius: 10px;
|
||||
background: #409EFF;
|
||||
color: #FFF;
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
cursor: pointer;
|
||||
.check-btn-icon{
|
||||
margin-left: 6px;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.check-btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.check-btn-icon {
|
||||
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;
|
||||
|
||||
.dialog-success-box {
|
||||
width: 574px;
|
||||
padding: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 20px;
|
||||
background: #FFF;
|
||||
.dialog-success-img{
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.dialog-success-img {
|
||||
width: 130px;
|
||||
height: 116px;
|
||||
}
|
||||
.dialog-success-title{
|
||||
margin: 50px auto 30px;
|
||||
color: #0E0E0E;
|
||||
}
|
||||
|
||||
.dialog-success-title {
|
||||
margin: 50px 0 30px;
|
||||
color: #0e0e0e;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.dialog-success-content{
|
||||
}
|
||||
|
||||
.dialog-success-content {
|
||||
margin-bottom: 50px;
|
||||
color:#0E0E0E;
|
||||
color: #0e0e0e;
|
||||
font-size: 18px;
|
||||
}
|
||||
.dialog-success-btns{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.dialog-success-btn{
|
||||
text-align: 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>
|
||||
|
||||
@ -527,52 +527,90 @@ onBeforeUnmount(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.onlineTest{
|
||||
/* 全局重置与基础设置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.onlineTest {
|
||||
background: #F5F5F5;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
font-weight: 400;
|
||||
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;
|
||||
-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;
|
||||
.ui-JoinUs-left-title{
|
||||
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{
|
||||
}
|
||||
.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;
|
||||
.user{
|
||||
gap: 10px;
|
||||
}
|
||||
.user {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
max-width: 100px;
|
||||
}
|
||||
.test-out{
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.answer-card{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 答题卡面板 */
|
||||
.answer-card {
|
||||
position: fixed;
|
||||
left: 336px;
|
||||
top: 85px;
|
||||
@ -580,47 +618,71 @@ onBeforeUnmount(() => {
|
||||
height: 840px;
|
||||
padding: 12px;
|
||||
background: #ffffff;
|
||||
.a-c-title{
|
||||
padding: 10px 10px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
.a-c-title {
|
||||
padding: 10px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.a-c-default{
|
||||
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;
|
||||
.default-box{
|
||||
font-size: 12px;
|
||||
gap:10px;
|
||||
}
|
||||
.default-box {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.default-box-border{
|
||||
//margin-right: 10px;
|
||||
}
|
||||
.default-box-border {
|
||||
margin-right: 6px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #DDD;
|
||||
}
|
||||
.default-box-title{
|
||||
}
|
||||
.default-box-title {
|
||||
font-size: 12px;
|
||||
color: #0E0E0E;
|
||||
}
|
||||
.default-box-border-v2{
|
||||
}
|
||||
.default-box-border-v2 {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--3578-f-2, #409EFF);
|
||||
background: var(--color-primary-light-9, #ECF5FF);
|
||||
}
|
||||
}
|
||||
}
|
||||
.a-c-list-title{
|
||||
border: 1px solid #409EFF; /* 修复：去掉了var */
|
||||
background: #ECF5FF; /* 修复：去掉了var */
|
||||
}
|
||||
|
||||
/* 题目列表 */
|
||||
.a-c-list-title {
|
||||
color: #0E0E0E;
|
||||
}
|
||||
.a-c-list-box{
|
||||
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{
|
||||
|
||||
}
|
||||
.a-c-list-box-item {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
width: 23px;
|
||||
@ -628,24 +690,32 @@ 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; /* 修复：去掉了var */
|
||||
color: #409EFF; /* 修复：去掉了var */
|
||||
background: #ECF5FF; /* 修复：去掉了var */
|
||||
}
|
||||
|
||||
.a-c-list-box-select{
|
||||
border: 0.5px solid #409EFF;
|
||||
color: #409EFF;
|
||||
background: #ECF5FF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.time-card{
|
||||
/* 时间卡片面板 */
|
||||
.time-card {
|
||||
position: fixed;
|
||||
left: 1432px;
|
||||
top: 85px;
|
||||
@ -654,101 +724,132 @@ onBeforeUnmount(() => {
|
||||
padding: 12px;
|
||||
background: #ffffff;
|
||||
text-align: center;
|
||||
.time-card-sub-title{
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
.time-card-sub-title {
|
||||
margin: 8px 0;
|
||||
color: #66676C;
|
||||
}
|
||||
.time-card-time {
|
||||
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 {
|
||||
}
|
||||
.number {
|
||||
font-size: 24px;
|
||||
color: #FF2946;
|
||||
line-height: 1;
|
||||
}
|
||||
.unit {
|
||||
}
|
||||
.unit {
|
||||
font-size: 12px;
|
||||
color: #0E0E0E;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
.time-card-time-all{
|
||||
}
|
||||
.time-card-time-all {
|
||||
margin-top: 8px;
|
||||
color: #66676C;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
.time-card-line{
|
||||
}
|
||||
.time-card-line {
|
||||
margin: 30px 0;
|
||||
width: 156px;
|
||||
height: 1px;
|
||||
background: rgba(221, 221, 221,.5);
|
||||
|
||||
}
|
||||
.time-card-process{
|
||||
width:156px;
|
||||
background: rgba(221, 221, 221, 0.5);
|
||||
}
|
||||
.time-card-process {
|
||||
width: 156px;
|
||||
height: 4px;
|
||||
border-radius: 10px;
|
||||
background: #EBEBEB;
|
||||
}
|
||||
.time-card-process-v2{
|
||||
width:156px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.time-card-process-v2 {
|
||||
width: 0; /* 默认0，由JS控制 */
|
||||
height: 4px;
|
||||
border-radius: 10px;
|
||||
background: #409EFF;
|
||||
}
|
||||
.time-btn{
|
||||
background: #409EFF; /* 修复：去掉了var */
|
||||
transition: width 0.3s;
|
||||
}
|
||||
.time-btn {
|
||||
margin: 30px auto;
|
||||
padding: 16px 30px;
|
||||
width: fit-content;
|
||||
color:#fff;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
border-radius: 6px;
|
||||
border: 0.5px solid #409EFF;
|
||||
background: #409EFF;
|
||||
border: 0.5px solid #409EFF; /* 修复：去掉了var */
|
||||
background: #409EFF; /* 修复：去掉了var */
|
||||
cursor: pointer;
|
||||
}
|
||||
.font-size-selector{
|
||||
margin-bottom: 60px;
|
||||
.font-size-line-box{
|
||||
}
|
||||
.font-size-selector {
|
||||
margin: 20px auto;
|
||||
width: 150px;
|
||||
}
|
||||
.font-size-line-box {
|
||||
margin-top: 26px;
|
||||
position: relative;
|
||||
.font-size-line{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.font-size-line {
|
||||
width: 150px;
|
||||
height: 2px;
|
||||
background: #EBEBEB;
|
||||
}
|
||||
.font-size-box{
|
||||
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{
|
||||
}
|
||||
.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{
|
||||
}
|
||||
.font-size-item-icon {
|
||||
margin-bottom: 6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.answer-box{
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
/* 答题区 */
|
||||
.answer-box {
|
||||
position: fixed;
|
||||
left: 529px;
|
||||
top: 85px;
|
||||
@ -756,168 +857,159 @@ onBeforeUnmount(() => {
|
||||
height: 840px;
|
||||
padding: 12px;
|
||||
background: #ffffff;
|
||||
.answer-scroll{
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
.answer-box-title {
|
||||
padding: 6px 10px;
|
||||
background: #f5f5f5;
|
||||
font-weight: bold;
|
||||
}
|
||||
.answer-scroll {
|
||||
height: 790px;
|
||||
padding-bottom: 30px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none; /* Firefox 64+ */
|
||||
-ms-overflow-style: none; /* IE 和 Edge */
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
.answer-scroll::-webkit-scrollbar {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
.answer-scroll::-webkit-scrollbar {
|
||||
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;
|
||||
.ui-answer-list-box{
|
||||
margin-top: 10px ;
|
||||
}
|
||||
.ui-answer-list-box {
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
.ui-answer-item{
|
||||
}
|
||||
.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;
|
||||
|
||||
.ui-check-box{
|
||||
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 {
|
||||
/* 弹窗样式 (修复了原代码中的语法错误) */
|
||||
.dialog-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
.dialog-box {
|
||||
z-index: 9999;
|
||||
}
|
||||
.dialog-box {
|
||||
width: 500px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
-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;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
color: #333;
|
||||
}
|
||||
.dialog-content {
|
||||
margin-bottom: 50px;
|
||||
font-size: 18px;
|
||||
color:#0E0E0E;
|
||||
}
|
||||
|
||||
.dialog-btns {
|
||||
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 {
|
||||
}
|
||||
.dialog-btn {
|
||||
padding: 16px 50px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
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;
|
||||
}
|
||||
.confirm {
|
||||
background: #409EFF; /* 修复：去掉了var */
|
||||
color: #fff;
|
||||
border: 1px solid #409eff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.dialog-success-box{
|
||||
display: flex;
|
||||
width: 574px;
|
||||
padding: 50px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
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 {
|
||||
border: 1px solid #409EFF; /* 修复：去掉了var */
|
||||
}
|
||||
.confirm:hover {
|
||||
background: #337ecc;
|
||||
border-color: #337ecc;
|
||||
}
|
||||
|
||||
/* Toast 提示 */
|
||||
.toast-mask {
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1000;
|
||||
|
||||
.toast-box {
|
||||
z-index: 10000;
|
||||
}
|
||||
.toast-box {
|
||||
padding: 12px 24px;
|
||||
background: rgba(231, 245, 224, 0.7);
|
||||
background: rgba(231, 245,224, 0.9);
|
||||
color: #6bc340;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #6bc340;
|
||||
animation: fadeInOut 2s;
|
||||
}
|
||||
}
|
||||
.time-warning {
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* 时间警告 */
|
||||
.time-warning {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -928,53 +1020,96 @@ onBeforeUnmount(() => {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
z-index: 1000;
|
||||
z-index: 10000;
|
||||
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; }
|
||||
@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;
|
||||
}
|
||||
.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>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -149,7 +149,7 @@ const triggerUpload = () => {
|
||||
.upload-btn {
|
||||
position: relative;
|
||||
width: 230px;
|
||||
height: 144px;
|
||||
height: 154px;
|
||||
background-size: contain; /* 新增背景图适配 */
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@ -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: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user