适配其他浏览器，样式问题
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
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/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'>
|
||||
<exam-header @search='changeSearch' :searchKeyword='searchKeyword'></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"
|
||||
<div class='exam-home'>
|
||||
<exam-header @search='changeSearch' :searchKeyword='searchKeyword'></exam-header>
|
||||
<div>
|
||||
<swiper
|
||||
id="banner-swiper"
|
||||
:modules="modules"
|
||||
:slides-per-view="1"
|
||||
:space-between="0"
|
||||
lazy
|
||||
loop
|
||||
:autoplay="{ delay: 3000, disableOnInteraction: false }"
|
||||
:pagination="{ clickable: true }"
|
||||
>
|
||||
<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>
|
||||
</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)'>
|
||||
<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>
|
||||
<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>
|
||||
</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 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)'>
|
||||
<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 class='exam-home-wechat-icon' >
|
||||
<img src='https://images.health.ufutx.com/202505/14/5b720a7d07e87354b96c2094d948bb9a.png' alt=''>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 基础兼容，不影响任何外部样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.exam-home{
|
||||
background: #f5f5f5;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-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: 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{
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
|
||||
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: flex;
|
||||
padding: 12px 20px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
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; /* 防止单个项被压缩 */
|
||||
margin-right: 20px;
|
||||
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;
|
||||
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{
|
||||
background: #409EFF;
|
||||
color: #FFF;
|
||||
border: 1px solid #409EFF;
|
||||
background: #409EFF;
|
||||
color: #FFF;
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
/* 课程列表 */
|
||||
.exam-home-list-box{
|
||||
padding: 20px 360px 120px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: #F5F5F5;
|
||||
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;
|
||||
cursor: pointer;
|
||||
}
|
||||
.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);
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
width: 386px;
|
||||
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{
|
||||
height: 18px;
|
||||
color: #0E0E0E;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
color: #0E0E0E;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
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;
|
||||
color: #66676C;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* ====================== 只在这里加最小限度的权重保证显示 ====================== */
|
||||
.exam-home-wechat-icon{
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 120px;
|
||||
width: 190px;
|
||||
height: 220px;
|
||||
z-index: 101;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 120px;
|
||||
width: 190px;
|
||||
height: 220px;
|
||||
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,229 +12,295 @@ 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 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 searchKeyword = ref('')
|
||||
const changeSearch = (e) => {
|
||||
searchKeyword.value = e
|
||||
const changeSearch = (val) => {
|
||||
searchKeyword.value = val
|
||||
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 => {
|
||||
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 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) => {
|
||||
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>
|
||||
<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 class="exam-home">
|
||||
<exam-header :menu-index="'2'" @search="changeSearch"></exam-header>
|
||||
|
||||
<!-- </div>-->
|
||||
<!-- <div class='ui-swiper-line'></div>-->
|
||||
<!-- <div class='ui-swiper-bottom-mask'></div>-->
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div class='check-box'>
|
||||
<div class='check-title'>{{detail.title}}</div>
|
||||
<div class='check-subtitle'>考试时间：{{ formatExamTime(detail.start_time_str,detail.end_time_str) || '--' }}</div>
|
||||
<div class='check-btn' @click='getIsJoin(1)'>
|
||||
<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>
|
||||
<swiper
|
||||
id="swiper"
|
||||
:modules="modules"
|
||||
:slides-per-view="1"
|
||||
:space-between="0"
|
||||
lazy
|
||||
loop
|
||||
:autoplay="{ delay: 3000, disableOnInteraction: false }"
|
||||
@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)"
|
||||
/>
|
||||
</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 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"/>
|
||||
</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"/>
|
||||
<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>
|
||||
</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;
|
||||
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 {
|
||||
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{
|
||||
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;
|
||||
}
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.dialog-success-img {
|
||||
width: 130px;
|
||||
height: 116px;
|
||||
}
|
||||
|
||||
.dialog-success-title {
|
||||
margin: 50px 0 30px;
|
||||
color: #0e0e0e;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dialog-success-content {
|
||||
margin-bottom: 50px;
|
||||
color: #0e0e0e;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dialog-success-btn {
|
||||
padding: 16px 0;
|
||||
border-radius: 10px;
|
||||
width: 172px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.confirm {
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
border: 1px solid #409eff;
|
||||
font-size: 18px;
|
||||
}
|
||||
</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 {
|
||||
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