适配其他浏览器，样式问题
This commit is contained in:
parent
39457f90cd
commit
b2c97b7c70
@ -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"
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -12,348 +12,373 @@ 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
|
|
||||||
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">
|
||||||
</swiper-slide>
|
<img class="swiper-lazy" :src="item.pic" alt="轮播图" @click.stop="goToBannerPath(item.path,index)" />
|
||||||
</swiper>
|
</swiper-slide>
|
||||||
<div class='exam-home-type-box'>
|
</swiper>
|
||||||
<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-box'>
|
||||||
</div>
|
<div class='exam-home-type-list'>
|
||||||
</div>
|
<div
|
||||||
<div class='exam-home-list-box'>
|
class='exam-home-type-item'
|
||||||
<div v-if='examList && examList.length > 0' class='exam-home-list-style'>
|
@click.stop='changeType(item,index)'
|
||||||
<div class='exam-home-list-item' v-for='(item,index) in examList' :key='index' @click='goToPath("examDetail",item)'>
|
:class='typeIndex === index ? "exam-home-type-item-active" : ""'
|
||||||
<img :src='item.pic' alt='' class='exam-home-list-item-pic'>
|
v-for='(item,index) in typeList'
|
||||||
<div class='exam-home-list-message-box'>
|
:key='index'
|
||||||
<div class='exam-home-list-message'>
|
>
|
||||||
<div class='exam-home-list-message-title'>{{item.title || ''}}</div>
|
{{item.name}}
|
||||||
<div class='exam-home-list-message-exam-time'>考试时间：{{formatExamTime(item.start_time_str, item.end_time_str) || '--'}}</div>
|
|
||||||
<div class='exam-home-list-message-exam-time'>补考时间：{{formatExamTime(item.resit_start_time_str, item.resit_end_time_str) || '--'}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class='exam-empty-box'>
|
|
||||||
<img src='https://images.health.ufutx.com/202505/19/5c1dbfea480f286b0208395f90a2cac3.png' alt='' class='exam-empty-icon'>
|
<div class='exam-home-list-box'>
|
||||||
<div class='exam-empty-title'>敬请期待</div>
|
<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)'>
|
||||||
|
<img :src='item.pic' alt='' class='exam-home-list-item-pic'>
|
||||||
|
<div class='exam-home-list-message-box'>
|
||||||
|
<div class='exam-home-list-message'>
|
||||||
|
<div class='exam-home-list-message-title'>{{item.title || ''}}</div>
|
||||||
|
<div class='exam-home-list-message-exam-time'>考试时间：{{formatExamTime(item.start_time_str, item.end_time_str) || '--'}}</div>
|
||||||
|
<div class='exam-home-list-message-exam-time'>补考时间：{{formatExamTime(item.resit_start_time_str, item.resit_end_time_str) || '--'}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class='exam-empty-box'>
|
||||||
|
<img src='https://images.health.ufutx.com/202505/19/5c1dbfea480f286b0208395f90a2cac3.png' alt='' class='exam-empty-icon'>
|
||||||
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class='exam-home-wechat-icon' >
|
|
||||||
<img src='https://images.health.ufutx.com/202505/14/5b720a7d07e87354b96c2094d948bb9a.png' alt=''>
|
|
||||||
</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{
|
|
||||||
display: flex;
|
|
||||||
padding: 20px 0 20px 360px ;
|
|
||||||
align-items: center;
|
|
||||||
background: #FFF;
|
|
||||||
//backdrop-filter: blur(15px);
|
|
||||||
flex-shrink: 0; /* 防止容器收缩 */
|
|
||||||
|
|
||||||
|
/* 分类导航 */
|
||||||
|
.exam-home-type-box{
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
padding: 20px 0 20px 360px;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
background: #FFF;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
.exam-home-type-list{
|
.exam-home-type-list{
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
display: flex;
|
display: -webkit-box;
|
||||||
align-items: center;
|
display: -webkit-flex;
|
||||||
flex-wrap: nowrap;
|
display: -ms-flexbox;
|
||||||
width: 100%;
|
display: flex;
|
||||||
overflow-x: auto;
|
-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{
|
.exam-home-type-item{
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
display: flex;
|
display: -webkit-box;
|
||||||
padding: 12px 20px;
|
display: -webkit-flex;
|
||||||
justify-content: center;
|
display: -ms-flexbox;
|
||||||
align-items: center;
|
display: flex;
|
||||||
border-radius: 100px;
|
-webkit-box-align: center;
|
||||||
border: 1px solid #DDD;
|
-webkit-align-items: center;
|
||||||
color: #0E0E0E;
|
-ms-flex-align: center;
|
||||||
font-size: 16px;
|
align-items: center;
|
||||||
font-style: normal;
|
-webkit-box-pack: center;
|
||||||
font-weight: 400;
|
-webkit-justify-content: center;
|
||||||
line-height: normal;
|
-ms-flex-pack: center;
|
||||||
cursor: pointer;
|
justify-content: center;
|
||||||
flex-shrink: 0; /* 防止单个项被压缩 */
|
padding: 12px 20px;
|
||||||
|
border-radius: 100px;
|
||||||
|
border: 1px solid #DDD;
|
||||||
|
color: #0E0E0E;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
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: flex;
|
display: -webkit-box;
|
||||||
flex-wrap: wrap;
|
display: -webkit-flex;
|
||||||
background: #F5F5F5;
|
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{
|
.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;
|
||||||
.exam-home-list-item:nth-child(3n){
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
.exam-home-list-item-pic{
|
|
||||||
width: 386px;
|
|
||||||
height: 240px;
|
|
||||||
border-radius: 10px 10px 0 0;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
.exam-empty-box{
|
|
||||||
margin: 60px auto;
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.exam-home-list-message-box{
|
|
||||||
background: #ffffff;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
.exam-home-list-message{
|
|
||||||
padding: 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-start;
|
|
||||||
margin-top: -20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: rgba(255, 255, 255, 0.30);
|
|
||||||
backdrop-filter: blur(12.5px);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
.exam-home-list-item:nth-child(3n){
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.exam-home-list-item-pic{
|
||||||
|
width: 386px;
|
||||||
|
height: 240px;
|
||||||
|
border-radius: 10px 10px 0 0;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 空状态 */
|
||||||
|
.exam-empty-box{
|
||||||
|
margin: 60px auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.exam-empty-icon{
|
||||||
|
margin-bottom: 20px;
|
||||||
|
width: 147px;
|
||||||
|
height: 121px;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto 20px;
|
||||||
|
}
|
||||||
|
.exam-empty-title{
|
||||||
|
color: #0E0E0E;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片内容 */
|
||||||
|
.exam-home-list-message-box{
|
||||||
|
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;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: -20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
-webkit-backdrop-filter: blur(12.5px);
|
||||||
|
backdrop-filter: blur(12.5px);
|
||||||
|
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{
|
}
|
||||||
width: 100%;
|
.exam-home-wechat-icon img{
|
||||||
height: 100%;
|
width: 100%;
|
||||||
object-fit: cover;
|
height: 100%;
|
||||||
}
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -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,229 +12,295 @@ 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')
|
|
||||||
location.href = path
|
|
||||||
}
|
|
||||||
const goToPath = (path,row) => {
|
|
||||||
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]
|
|
||||||
getList()
|
|
||||||
|
|
||||||
})
|
const changeSearch = (val) => {
|
||||||
}
|
searchKeyword.value = val
|
||||||
const searchKeyword = ref('')
|
|
||||||
const changeSearch = (e) => {
|
|
||||||
searchKeyword.value = e
|
|
||||||
getList()
|
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 getTypeList = () => {
|
||||||
|
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()
|
||||||
})
|
})
|
||||||
|
.catch(err => console.error('首页数据请求失败', err))
|
||||||
}
|
}
|
||||||
// 新增时间格式化函数
|
|
||||||
|
const getList = () => {
|
||||||
|
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 => {
|
||||||
|
examList.value = res.data || []
|
||||||
|
})
|
||||||
|
.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
|
|
||||||
id="swiper"
|
|
||||||
:modules="modules"
|
|
||||||
:slides-per-view="1"
|
|
||||||
:space-between="0"
|
|
||||||
lazy
|
|
||||||
loop
|
|
||||||
:autoplay="true"
|
|
||||||
@swiper="onSwiper"
|
|
||||||
: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>-->
|
<swiper
|
||||||
<!-- <div class='ui-swiper-line'></div>-->
|
id="swiper"
|
||||||
<!-- <div class='ui-swiper-bottom-mask'></div>-->
|
:modules="modules"
|
||||||
</swiper-slide>
|
:slides-per-view="1"
|
||||||
</swiper>
|
:space-between="0"
|
||||||
<div class='check-box'>
|
lazy
|
||||||
<div class='check-title'>{{detail.title}}</div>
|
loop
|
||||||
<div class='check-subtitle'>考试时间：{{ formatExamTime(detail.start_time_str,detail.end_time_str) || '--' }}</div>
|
:autoplay="{ delay: 3000, disableOnInteraction: false }"
|
||||||
<div class='check-btn' @click='getIsJoin(1)'>
|
@swiper="onSwiper"
|
||||||
<div>查询成绩</div>
|
:pagination="{ clickable: true }"
|
||||||
<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"/>
|
<swiper-slide
|
||||||
</svg>
|
class="banner-swiper"
|
||||||
</div>
|
v-for="(item, index) in swiperList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<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">
|
||||||
|
<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>
|
||||||
</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
|
||||||
</linearGradient>
|
id="paint0_linear_571_2865"
|
||||||
<linearGradient id="paint1_linear_571_2865" x1="40.0072" y1="11.7614" x2="40.0072" y2="20.0224" gradientUnits="userSpaceOnUse">
|
x1="39.989"
|
||||||
<stop stop-color="#409EFF"/>
|
y1="34.0049"
|
||||||
<stop offset="1" stop-color="#409EFF" stop-opacity="0.3"/>
|
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>
|
</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;
|
|
||||||
font-size: 28px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
.check-subtitle{
|
|
||||||
margin: 26px 0;
|
|
||||||
color: #66676C;
|
|
||||||
font-size: 18px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
.check-btn{
|
|
||||||
margin-bottom: 150px;
|
|
||||||
display: flex;
|
|
||||||
padding: 16px 32px;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: #409EFF;
|
|
||||||
color: #FFF;
|
|
||||||
font-size: 18px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: normal;
|
|
||||||
cursor: pointer;
|
|
||||||
.check-btn-icon{
|
|
||||||
margin-left: 6px;
|
|
||||||
width: 24px;
|
|
||||||
height: 23px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.check-title {
|
||||||
|
color: #0e0e0e;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-subtitle {
|
||||||
|
margin: 26px 0;
|
||||||
|
color: #66676c;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-btn {
|
||||||
|
margin-bottom: 150px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 16px 32px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #409eff;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-btn:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-btn-icon {
|
||||||
|
width: 24px;
|
||||||
|
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{
|
}
|
||||||
width: 130px;
|
|
||||||
height: 116px;
|
.dialog-success-img {
|
||||||
}
|
width: 130px;
|
||||||
.dialog-success-title{
|
height: 116px;
|
||||||
margin: 50px auto 30px;
|
}
|
||||||
color: #0E0E0E;
|
|
||||||
font-size: 22px;
|
.dialog-success-title {
|
||||||
font-weight: 600;
|
margin: 50px 0 30px;
|
||||||
}
|
color: #0e0e0e;
|
||||||
.dialog-success-content{
|
font-size: 22px;
|
||||||
margin-bottom: 50px;
|
font-weight: 600;
|
||||||
color:#0E0E0E;
|
}
|
||||||
font-size: 18px;
|
|
||||||
}
|
.dialog-success-content {
|
||||||
.dialog-success-btns{
|
margin-bottom: 50px;
|
||||||
display: flex;
|
color: #0e0e0e;
|
||||||
justify-content: center;
|
font-size: 18px;
|
||||||
align-items: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.dialog-success-btn{
|
|
||||||
padding: 16px 0;
|
.dialog-success-btn {
|
||||||
border-radius: 10px;
|
padding: 16px 0;
|
||||||
cursor: pointer;
|
border-radius: 10px;
|
||||||
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>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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: {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user