Merge branch 'main' of http://182.92.169.222:3000/dlsx/ContestPortal
fwb
8 months ago
commit
4f83f4f883
38 changed files with 5554 additions and 3488 deletions
@ -1,5 +1,5 @@ |
||||
# 变量必须以 VITE_ 为前缀才能暴露给外部读取 |
||||
NODE_ENV = 'development' |
||||
VITE_APP_TITLE = '教学一体化平台' |
||||
VITE_APP_BASE_API = 'http://39.106.16.162:8080' |
||||
VITE_APP_BASE_API = http://localhost:18085/jeecg-boot |
||||
# VITE_APP_BASE_API = 'http://127.0.0.1:8080' |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,67 @@ |
||||
<template> |
||||
<!-- 根据路由动态生成菜单 --> |
||||
<template v-for="item in menuList" :key="item.path"> |
||||
<!-- 没有子路由 --> |
||||
<template v-if="!item.children"> |
||||
<el-menu-item |
||||
v-if="!item.meta.hidden" |
||||
:index="item.path" |
||||
@click="goToRoute" |
||||
> |
||||
<!-- <el-icon> |
||||
<component :is="item.meta.icon"></component> |
||||
</el-icon> --> |
||||
<template #title> |
||||
<!-- <el-icon> |
||||
<component :is="item.meta.icon"></component> |
||||
</el-icon> --> |
||||
<span>{{ item.meta.title }}</span> |
||||
</template> |
||||
</el-menu-item> |
||||
</template> |
||||
<!-- 有子路由但是只有一个子路由 --> |
||||
<template v-if="item.children && item.children.length === 1"> |
||||
<el-menu-item |
||||
v-if="!item.children[0].meta.hidden" |
||||
:index="item.children[0].path" |
||||
@click="goToRoute" |
||||
> |
||||
<el-icon> |
||||
<component :is="item.children[0].meta.icon"></component> |
||||
</el-icon> |
||||
<template #title> |
||||
<span>{{ item.children[0].meta.title }}</span> |
||||
</template> |
||||
</el-menu-item> |
||||
</template> |
||||
<!-- 有子路由且有多个 --> |
||||
<el-sub-menu |
||||
:index="item.path" |
||||
v-if="item.children && item.children.length > 1" |
||||
> |
||||
<template #title> |
||||
<el-icon> |
||||
<component :is="item.meta.icon"></component> |
||||
</el-icon> |
||||
<span>{{ item.meta.title }}</span> |
||||
</template> |
||||
<Item :menuList="item.children" /> |
||||
</el-sub-menu> |
||||
</template> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
import { useRouter } from 'vue-router' |
||||
// import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
// 获取父组件传递的全部的路由的数据 |
||||
defineProps(['menuList']) |
||||
const $router = useRouter() |
||||
const goToRoute = (vc: any) => { |
||||
$router.push(vc.index) |
||||
} |
||||
</script> |
||||
<script lang="ts"> |
||||
export default { |
||||
name: 'app-Menu', |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,21 @@ |
||||
import request from '@/utils/requset' |
||||
|
||||
request.interceptors.response.use(response => { |
||||
// @ts-ignore
|
||||
if (response.code >= 200 && response.code < 300) return response; |
||||
else return Promise.reject(response); |
||||
}) |
||||
|
||||
enum api { |
||||
liststu = '/abilityEvaluation/personalAbilityEvaluationCollect/liststu', // 个人能力评价列表
|
||||
integral = '/annualScore/personalCompTotalScore/liststu', // 个人积分列表
|
||||
PAGE_XSFXBG = '/annualcompetitionprojectregistration/annualCompetitionProjectRegistration/xsfxbg', |
||||
} |
||||
export const getlEvaluateApi = (params: Record<'pageNo' | 'pageSize', number>) => request.get(api.liststu, { params }); |
||||
export const getlIntegralApi = (params: Record<'pageNo' | 'pageSize', number>) => request.get(api.integral, { params }); |
||||
|
||||
export const getXsfxbgApi = (params = {}) => { |
||||
const par = { recreateFlag: false, annualid: '' }; |
||||
Object.assign(par, params); |
||||
return request.get(api.PAGE_XSFXBG, { params: par }); |
||||
}; |
||||
@ -0,0 +1,16 @@ |
||||
import request from '@/utils/requset' |
||||
|
||||
// 获取年度比赛项目列表
|
||||
export const getRaceProjectList = (params:any) => { |
||||
return request({ |
||||
url:'/AnnualCompPoint/annualCompPoint/listStudent', |
||||
params |
||||
}) |
||||
} |
||||
// 获取年度比赛列表
|
||||
export const getRaceList = (params:any) => { |
||||
return request({ |
||||
url:'/annualcomp/annualComp/schoollist', |
||||
params |
||||
}) |
||||
} |
||||
@ -0,0 +1,25 @@ |
||||
import request from '@/utils/requset' |
||||
|
||||
export const getCode = (time:any) => { |
||||
return request({ |
||||
url:'/sys/randomImage/' + time, |
||||
}) |
||||
} |
||||
export const loginApi = (data:any) => { |
||||
return request({ |
||||
url:'/sys/login', |
||||
method:"POST", |
||||
data |
||||
}) |
||||
} |
||||
export const getUserInfoApi = () => { |
||||
return request({ |
||||
url:'/sys/user/getUserInfo' |
||||
}) |
||||
} |
||||
|
||||
export const logOut = () => { |
||||
return request({ |
||||
url:'/sys/logout' |
||||
}) |
||||
} |
||||
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 2.2 MiB |
|
After Width: | Height: | Size: 484 KiB |
|
After Width: | Height: | Size: 821 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 121 B |
|
After Width: | Height: | Size: 194 B |
|
After Width: | Height: | Size: 247 KiB |
@ -0,0 +1,23 @@ |
||||
import router from '@/router/index' |
||||
import userStore from './store/module/user' |
||||
|
||||
router.beforeEach(async (to, form, next) => { |
||||
const useuserStore = userStore() |
||||
|
||||
if (useuserStore.token) { |
||||
if (to.path === '/login') { |
||||
next({ path: '/' }) |
||||
} else { |
||||
if (!Object.keys(useuserStore.userInfo).length) { |
||||
useuserStore.getUserInfo() |
||||
next() |
||||
|
||||
}else{ |
||||
next() |
||||
} |
||||
} |
||||
}else{ |
||||
next() |
||||
} |
||||
}) |
||||
export default router |
||||
@ -0,0 +1,11 @@ |
||||
|
||||
const defineRouter = [ |
||||
{ |
||||
path:'/login', |
||||
component: () => import('@/views/login/index.vue'), |
||||
meta:{ |
||||
title:'登录' |
||||
} |
||||
} |
||||
] |
||||
export default defineRouter |
||||
@ -0,0 +1,45 @@ |
||||
import { defineStore } from 'pinia' |
||||
import { loginApi,getUserInfoApi ,logOut} from '@/api/user' |
||||
import { ElNotification } from 'element-plus' |
||||
import { setToken, getToken ,removeToken} from '@/utils/token' |
||||
|
||||
const userStore = defineStore('defineStore', { |
||||
state: (): any => ({ |
||||
token: getToken() || '', |
||||
userInfo: {}, |
||||
}), |
||||
actions: { |
||||
async login(parmas: any) { |
||||
const res: any = await loginApi(parmas) |
||||
|
||||
if (res.code === 412) { |
||||
return 0 |
||||
} else if (res.code === 500) { |
||||
return 1 |
||||
} else { |
||||
console.log(res.result.userInfo) |
||||
this.token = res.result.token |
||||
setToken(this.token) |
||||
this.userInfo = res.result.userInfo |
||||
ElNotification({ |
||||
title: '登录成功', |
||||
message: '欢迎回来' + this.userInfo.username, |
||||
type: 'success', |
||||
})
|
||||
} |
||||
}, |
||||
async getUserInfo(){ |
||||
const res:any = await getUserInfoApi() |
||||
this.userInfo = res.result.userInfo |
||||
console.log(res); |
||||
|
||||
}, |
||||
async layOut(){ |
||||
await logOut() |
||||
removeToken() |
||||
this.token = '' |
||||
this.userInfo = {} |
||||
} |
||||
}, |
||||
}) |
||||
export default userStore |
||||
@ -0,0 +1,51 @@ |
||||
import * as echarts from 'echarts/core'; |
||||
|
||||
import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart, RadarChart } from 'echarts/charts'; |
||||
|
||||
import { |
||||
TitleComponent, |
||||
TooltipComponent, |
||||
GridComponent, |
||||
PolarComponent, |
||||
AriaComponent, |
||||
ParallelComponent, |
||||
LegendComponent, |
||||
RadarComponent, |
||||
ToolboxComponent, |
||||
DataZoomComponent, |
||||
VisualMapComponent, |
||||
TimelineComponent, |
||||
CalendarComponent, |
||||
GraphicComponent, |
||||
} from 'echarts/components'; |
||||
|
||||
// TODO 如果想换成SVG渲染，就导出SVGRenderer，
|
||||
// 并且放到 echarts.use 里，注释掉 CanvasRenderer
|
||||
import { /*SVGRenderer*/ CanvasRenderer } from 'echarts/renderers'; |
||||
|
||||
echarts.use([ |
||||
LegendComponent, |
||||
TitleComponent, |
||||
TooltipComponent, |
||||
GridComponent, |
||||
PolarComponent, |
||||
AriaComponent, |
||||
ParallelComponent, |
||||
BarChart, |
||||
LineChart, |
||||
PieChart, |
||||
MapChart, |
||||
RadarChart, |
||||
// TODO 因为要兼容Online图表自适应打印，所以改成 CanvasRenderer，可能会模糊
|
||||
CanvasRenderer, |
||||
PictorialBarChart, |
||||
RadarComponent, |
||||
ToolboxComponent, |
||||
DataZoomComponent, |
||||
VisualMapComponent, |
||||
TimelineComponent, |
||||
CalendarComponent, |
||||
GraphicComponent, |
||||
]); |
||||
|
||||
export default echarts; |
||||
@ -0,0 +1,9 @@ |
||||
export const setToken = (token: string) => { |
||||
localStorage.setItem('token', token) |
||||
} |
||||
export const removeToken = () => { |
||||
localStorage.removeItem('token') |
||||
} |
||||
export const getToken = () => { |
||||
return localStorage.getItem('token') |
||||
} |
||||
@ -0,0 +1,146 @@ |
||||
<template> |
||||
<div class="login-content"> |
||||
<div class="login-form"> |
||||
<div class="login-title">登录</div> |
||||
<div class="form"> |
||||
<el-form :model="form" label-width="80"> |
||||
<el-form-item label="账号"> |
||||
<el-input v-model="form.account" style="height: .2344rem" /> |
||||
</el-form-item> |
||||
<el-form-item label="密码"> |
||||
<el-input v-model="form.password" style="height: .2344rem" /> |
||||
</el-form-item> |
||||
<el-form-item label="验证码"> |
||||
<div class="captcha"> |
||||
<el-input |
||||
v-model="form.captcha" |
||||
style="height: .2344rem" |
||||
maxlength="4" |
||||
/> |
||||
<div class="code" @click="getcodeinfo"> |
||||
<img :src="codeUrl" alt="" srcset="" /> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="submit gradient" @click.enter="submit">登录</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
import { getCode } from '@/api/user' |
||||
import userStore from '@/store/module/user' |
||||
import { ElMessage } from 'element-plus' |
||||
import { useRouter } from 'vue-router' |
||||
|
||||
const useUserStore = userStore() |
||||
const form = ref({ |
||||
account: '', |
||||
password: '', |
||||
captcha: '', |
||||
}) |
||||
const codeUrl = ref('') |
||||
const getcodeinfo = async () => { |
||||
const res: any = await getCode(1629428467008) |
||||
codeUrl.value = res.result |
||||
console.log(codeUrl.value) |
||||
} |
||||
getcodeinfo() |
||||
const Router = useRouter() |
||||
const submit = async () => { |
||||
console.log(111, useUserStore) |
||||
|
||||
let data = { |
||||
captcha: form.value.captcha, |
||||
checkKey: 1629428467008, |
||||
password: form.value.password, |
||||
username: form.value.account, |
||||
} |
||||
const res = await useUserStore.login(data) |
||||
console.log(res) |
||||
if (res === 0) { |
||||
ElMessage('验证码错误') |
||||
getcodeinfo() |
||||
} else if (res === 1) { |
||||
ElMessage('账号或密码错误') |
||||
getcodeinfo() |
||||
}else{ |
||||
Router.push('/') |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.login-content { |
||||
width: 100%; |
||||
height: 100vh; |
||||
background: url('../../assets/images/bg.png') no-repeat; |
||||
background-size: cover; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
.login-form { |
||||
width: 640px; |
||||
height: 820px; |
||||
border-radius: 15px; |
||||
background-color: #ffffff1a !important; |
||||
padding: 70px 60px; |
||||
backdrop-filter: blur(10px); |
||||
box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2); |
||||
.login-title { |
||||
font-size: 32px; |
||||
font-weight: 700; |
||||
} |
||||
.form { |
||||
margin-top: 35px; |
||||
padding: 0 40px; |
||||
.captcha { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: relative; |
||||
.code { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
width: 105px; |
||||
height: 100%; |
||||
// background-color: pink; |
||||
display: flex; |
||||
align-items: center; |
||||
img{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
} |
||||
.submit { |
||||
width: 399px; |
||||
height: 50px; |
||||
text-align: center; |
||||
line-height: 50px; |
||||
font-size: 20px; |
||||
font-weight: 600; |
||||
cursor: pointer; |
||||
color: #fff; |
||||
border-radius: 10px; |
||||
margin-top: 35px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
:deep(.el-form-item) { |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
:deep(.el-input__wrapper) { |
||||
box-shadow: none; |
||||
} |
||||
:deep(.el-form-item__label) { |
||||
justify-content: start; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,188 @@ |
||||
<template> |
||||
<div class="fill"></div> |
||||
<div class="banner"> |
||||
<div class="box"> |
||||
<div class="title-box"> |
||||
<div class="title">报名信息确认</div> |
||||
<div class="text"> |
||||
请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。 |
||||
请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。 |
||||
请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。 |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="img-box"> |
||||
<img src="../../assets/images/applyImg.png" alt=""> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="personalAbilityEvaluationCollectList"> |
||||
<el-card body-class="table-list"> |
||||
<div class="table-box"> |
||||
<el-table v-loading="isLoading" ref="multipleTableRef" border :data="tableData" class="table" |
||||
:class="{ height: tableData.length > 8 }"> |
||||
<el-table-column type="selection" width="55" /> |
||||
<el-table-column prop="depet_dictText" label="院系" /> |
||||
<el-table-column prop="name" label="姓名" /> |
||||
<el-table-column prop="workOn" label="学号" /> |
||||
<el-table-column prop="score" label="总积分" /> |
||||
<el-table-column label="操作" width="120"> |
||||
<template #default="scope"></template> |
||||
</el-table-column> |
||||
<template #empty> |
||||
<el-empty description="暂无数据" /> |
||||
</template> |
||||
</el-table> |
||||
<div class="pagin-box"> |
||||
<el-pagination class="pagination" style="width: 100%;" v-model:current-page="pagInfo.currentPage" |
||||
v-model:page-size="pagInfo.pageSize" :page-sizes="[10, 50, 80, 100]" |
||||
layout="slo, total,slot, sizes, prev, pager, next, jumper" :total="pagInfo.total" |
||||
@change="getTableList" /> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { reactive, ref } from 'vue'; |
||||
import { getlIntegralApi } from '@/api/person'; |
||||
import { ElMessage } from 'element-plus' |
||||
|
||||
// loading |
||||
const isLoading = ref(true) |
||||
|
||||
// 分页 |
||||
const pagInfo = reactive({ |
||||
currentPage: 1, |
||||
pageSize: 10, |
||||
total: 0 |
||||
}) |
||||
|
||||
// 获取表格信息 |
||||
const tableData = reactive<any[]>([]); |
||||
const setTableData = (arr: any[]) => { |
||||
tableData.length = 0; |
||||
tableData.push(...arr); |
||||
} |
||||
async function getTableList() { |
||||
try { |
||||
isLoading.value = true; |
||||
const res: any = await getlIntegralApi({ pageNo: pagInfo.currentPage, pageSize: pagInfo.pageSize }) |
||||
pagInfo.total = res.result.total; |
||||
setTableData(res.result.records); |
||||
} catch (error) { |
||||
ElMessage.error('请求失败'); |
||||
} finally { |
||||
isLoading.value = false; |
||||
} |
||||
} |
||||
|
||||
|
||||
getTableList(); |
||||
</script> |
||||
|
||||
|
||||
|
||||
<style lang="scss" scoped> |
||||
.fill { |
||||
padding-top: 80px; |
||||
} |
||||
|
||||
.banner { |
||||
width: 100%; |
||||
height: 289; |
||||
background: linear-gradient(90deg, #FFFFFF 0%, #F0F8FF 100%); |
||||
padding: 21px 0 37px 225px; |
||||
|
||||
.box { |
||||
width: 1515px; |
||||
height: 231px; |
||||
display: flex; |
||||
gap: 104px; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.title-box { |
||||
width: 1151px; |
||||
|
||||
.title { |
||||
height: 59px; |
||||
font-family: Open Sans, Open Sans; |
||||
font-weight: bold; |
||||
font-size: 42px; |
||||
color: #333333; |
||||
line-height: 59px; |
||||
} |
||||
|
||||
.text { |
||||
margin-top: 20px; |
||||
font-family: Open Sans, Open Sans; |
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
color: #666666; |
||||
line-height: 23px; |
||||
} |
||||
} |
||||
|
||||
.img-box { |
||||
img { |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
} |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
|
||||
.personalAbilityEvaluationCollectList { |
||||
|
||||
.table-list { |
||||
.table-box { |
||||
.table { |
||||
--el-table-header-bg-color: #fafafa; |
||||
width: 100%; |
||||
|
||||
&.height { |
||||
height: 375px; |
||||
} |
||||
} |
||||
|
||||
.pagin-box { |
||||
width: 100%; |
||||
height: 64px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.pagination { |
||||
padding: 0 24px; |
||||
|
||||
:deep() { |
||||
.el-pagination__total { |
||||
margin-right: auto; |
||||
} |
||||
|
||||
li.number.is-active { |
||||
background-color: #42D9AC; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
} |
||||
|
||||
span.el-pagination__jump { |
||||
background-color: #F3F3F3; |
||||
padding: 2px 8px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,192 @@ |
||||
<template> |
||||
<div class="fill"></div> |
||||
<div class="banner"> |
||||
<div class="box"> |
||||
<div class="title-box"> |
||||
<div class="title">报名信息确认</div> |
||||
<div class="text"> |
||||
请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。 |
||||
请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。 |
||||
请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。 |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="img-box"> |
||||
<img src="../../assets/images/applyImg.png" alt=""> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="personalAbilityEvaluationCollectList"> |
||||
<el-card body-class="table-list"> |
||||
|
||||
<div class="table-box"> |
||||
<el-table v-loading="isLoading" ref="multipleTableRef" border :data="tableData" class="table" |
||||
:class="{ height: tableData.length > 8 }"> |
||||
<el-table-column type="selection" width="55" /> |
||||
<el-table-column prop="depetId_dictText" label="所属部门" /> |
||||
<el-table-column prop="workOn" label="学号" /> |
||||
<el-table-column prop="name" label="姓名" /> |
||||
<el-table-column prop="capacityName" label="能力名称" /> |
||||
<el-table-column prop="value" label="能力值" /> |
||||
<el-table-column label="操作" width="120"> |
||||
<template #default="scope"></template> |
||||
</el-table-column> |
||||
<template #empty> |
||||
<el-empty description="暂无数据" /> |
||||
</template> |
||||
</el-table> |
||||
<div class="pagin-box"> |
||||
<el-pagination class="pagination" style="width: 100%;" v-model:current-page="pagInfo.currentPage" |
||||
v-model:page-size="pagInfo.pageSize" :page-sizes="[10, 50, 80, 100]" |
||||
layout="slo, total,slot, sizes, prev, pager, next, jumper" :total="pagInfo.total" |
||||
@change="getTableList" /> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { reactive, ref } from 'vue'; |
||||
import { getlEvaluateApi } from '@/api/person'; |
||||
import { ElMessage } from 'element-plus' |
||||
|
||||
// loading |
||||
const isLoading = ref(true) |
||||
|
||||
// 分页 |
||||
const pagInfo = reactive({ |
||||
currentPage: 1, |
||||
pageSize: 10, |
||||
total: 0 |
||||
}) |
||||
|
||||
|
||||
// 获取表格信息 |
||||
const tableData = reactive<any[]>([]); |
||||
const setTableData = (arr: any[]) => { |
||||
tableData.length = 0; |
||||
tableData.push(...arr); |
||||
} |
||||
async function getTableList() { |
||||
try { |
||||
isLoading.value = true; |
||||
const res: any = await getlEvaluateApi({ pageNo: pagInfo.currentPage, pageSize: pagInfo.pageSize }) |
||||
pagInfo.total = res.result.total; |
||||
setTableData(res.result.records); |
||||
} catch (error) { |
||||
ElMessage.error('请求失败'); |
||||
} finally { |
||||
isLoading.value = false; |
||||
} |
||||
} |
||||
|
||||
|
||||
getTableList(); |
||||
</script> |
||||
|
||||
|
||||
|
||||
<style lang="scss" scoped> |
||||
.fill { |
||||
padding-top: 80px; |
||||
} |
||||
|
||||
.banner { |
||||
width: 100%; |
||||
height: 289; |
||||
background: linear-gradient(90deg, #FFFFFF 0%, #F0F8FF 100%); |
||||
padding: 21px 0 37px 225px; |
||||
|
||||
.box { |
||||
width: 1515px; |
||||
height: 231px; |
||||
display: flex; |
||||
gap: 104px; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.title-box { |
||||
width: 1151px; |
||||
|
||||
.title { |
||||
height: 59px; |
||||
font-family: Open Sans, Open Sans; |
||||
font-weight: bold; |
||||
font-size: 42px; |
||||
color: #333333; |
||||
line-height: 59px; |
||||
} |
||||
|
||||
.text { |
||||
margin-top: 20px; |
||||
font-family: Open Sans, Open Sans; |
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
color: #666666; |
||||
line-height: 23px; |
||||
} |
||||
} |
||||
|
||||
.img-box { |
||||
img { |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
} |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
|
||||
.personalAbilityEvaluationCollectList { |
||||
|
||||
.table-list { |
||||
.table-box { |
||||
position: relative; |
||||
.table { |
||||
--el-table-header-bg-color: #fafafa; |
||||
width: 100%; |
||||
|
||||
&.height { |
||||
height: 375px; |
||||
} |
||||
} |
||||
|
||||
.pagin-box { |
||||
width: 100%; |
||||
height: 64px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.pagination { |
||||
padding: 0 24px; |
||||
|
||||
:deep() { |
||||
.el-pagination__total { |
||||
margin-right: auto; |
||||
} |
||||
|
||||
li.number.is-active { |
||||
background-color: #42D9AC; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
} |
||||
|
||||
span.el-pagination__jump { |
||||
background-color: #F3F3F3; |
||||
padding: 2px 8px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,211 @@ |
||||
<template> |
||||
<div id="rander-chart"> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import echarts from '@/utils/echarts'; |
||||
|
||||
import { onMounted,nextTick } from 'vue' |
||||
const props = defineProps({ |
||||
data: { |
||||
type: Array, |
||||
default: [ |
||||
{ |
||||
text: '前言探索', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '奠定基础', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '知识分析', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '社会责任', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '独立思考', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '拓宽视野', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '激发兴趣', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '沟通协调', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '设计开发', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '研判分析', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '创新能力', |
||||
value: 0, |
||||
}, |
||||
{ |
||||
capacityName: '团队协作', |
||||
value: 0, |
||||
}, |
||||
], |
||||
}, |
||||
}); |
||||
|
||||
const throttle = (fn: any) => { |
||||
let timer: any; |
||||
return function () { |
||||
if (timer) { |
||||
return; |
||||
} |
||||
timer = setTimeout(() => { |
||||
fn(); |
||||
clearTimeout(timer); |
||||
timer = null; |
||||
}, 1000); |
||||
}; |
||||
}; |
||||
let Data = props.data |
||||
console.log(Data, props.data); |
||||
|
||||
nextTick(() => { |
||||
// @ts-ignore |
||||
const myChart = echarts.init(document.getElementById("rander-chart")); |
||||
console.log(Data,1111); |
||||
|
||||
// var legendData = ['车辆数']; //图例 |
||||
var indicator =Data.map(item => { |
||||
return {name:item.capacityName,max:100} |
||||
}); |
||||
var dataArr = [ |
||||
{ |
||||
value:Data.map(item => item.value), |
||||
name: '年度维度分析', |
||||
itemStyle: { |
||||
normal: { |
||||
lineStyle: { |
||||
color: "#55d7f2", |
||||
}, |
||||
shadowColor: '#4A99FF', |
||||
shadowBlur: 10, |
||||
}, |
||||
}, |
||||
areaStyle: { |
||||
normal: { |
||||
// 单项区域填充样式 |
||||
color: { |
||||
type: "linear", |
||||
x: 1, //右 |
||||
y: 0, //下 |
||||
x2: 1, //左 |
||||
y2: 1, //上 |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "#1890ff", |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: "#1890ff", |
||||
}, |
||||
], |
||||
globalCoord: false, |
||||
}, |
||||
opacity: 1, // 区域透明度 |
||||
}, |
||||
}, |
||||
}, |
||||
]; |
||||
var colorArr = ["#fff", "#fff"]; //颜色 |
||||
const option :any= { |
||||
backgroundColor: "transparent", |
||||
color: colorArr, |
||||
// legend: { |
||||
// orient: "vertical", |
||||
// // icon: 'circle', //图例形状 |
||||
// // data: legendData, |
||||
// top: 0, |
||||
// left: 20, |
||||
// itemWidth: 8, // 图例标记的图形宽度。[ default: 25 ] |
||||
// itemHeight: 8, // 图例标记的图形高度。[ default: 14 ] |
||||
// itemGap: 22, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。 |
||||
// textStyle: { |
||||
// fontSize: 12, |
||||
// fontWeight: "bold", |
||||
// color: "#00E4FF", |
||||
// }, |
||||
// }, |
||||
tooltip: { |
||||
trigger: 'item' |
||||
}, |
||||
radar: { |
||||
radius: "60%", |
||||
// shape: 'circle', |
||||
name: { |
||||
textStyle: { |
||||
color: "#9ca4a6", |
||||
fontSize: 12, |
||||
}, |
||||
}, |
||||
indicator: indicator, |
||||
splitArea: { |
||||
// 坐标轴在 grid 区域中的分隔区域，默认不显示。 |
||||
show: true, |
||||
areaStyle: { |
||||
// 分隔区域的样式设置。 |
||||
color: ["rgba(255,255,255,0)", "rgba(255,255,255,0)"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 |
||||
}, |
||||
}, |
||||
axisLine: { |
||||
//指向外圈文本的分隔线样式 |
||||
lineStyle: { |
||||
color: "#2a5f61", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#2a5f61", // 分隔线颜色 |
||||
width: 1, // 分隔线线宽 |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "radar", |
||||
symbolSize: 6, |
||||
symbol: "circle", |
||||
data: dataArr, |
||||
|
||||
}, |
||||
], |
||||
}; |
||||
myChart.setOption(option); |
||||
let resize = throttle(() => { |
||||
myChart.resize(); |
||||
}); |
||||
window.addEventListener("resize", resize); |
||||
}) |
||||
onMounted(() => { |
||||
|
||||
|
||||
}); |
||||
</script> |
||||
|
||||
<style lang='less' scoped> |
||||
#rander-chart{ |
||||
width: 100%; |
||||
height:450px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,382 @@ |
||||
<template> |
||||
<div class="fill"></div> |
||||
<div style="padding: 30px 18.6vw 0; width: 100%;margin: auto;"> |
||||
<!-- 年度：<j-dict-select-tag placeholder="请选择年度" v-model:value="annualid" dictCode="annual,annual_name,id" /> --> |
||||
</div> |
||||
<div class="personage"> |
||||
<h1 class="title">机电学院比赛个人报告</h1> |
||||
<div class="rebuild"> |
||||
<div @click="Rebuild">重新生成报告</div> |
||||
</div> |
||||
<p class="paragraph"> |
||||
我是比赛综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。 |
||||
</p> |
||||
<el-row class="card-box" :gutter="16" type="flex" justify="space-between"> |
||||
<el-col :span="12"> |
||||
<el-card class="card1"> |
||||
<div class="title"> |
||||
<div class="left">参加比赛项目数量</div> |
||||
<div class="right"> |
||||
<SvgIcon size="20" name="content" /> |
||||
</div> |
||||
</div> |
||||
<div class="name">{{ data.cjbsxmsl }}</div> |
||||
<div class="total" style="margin-top: 10px"> |
||||
<div class="two">国家级：{{ data.gjj }}</div> |
||||
<div class="three">省级：{{ data.shengj }}</div> |
||||
<div class="three">市级：{{ data.shij }}</div> |
||||
<div class="three">校级：{{ data.xj }}</div> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
|
||||
<el-col :span="12"> |
||||
<el-card class="card1"> |
||||
<div class="title"> |
||||
<div class="left">获奖数</div> |
||||
<div class="right"> |
||||
<SvgIcon size="20" name="content" /> |
||||
</div> |
||||
</div> |
||||
<div class="name">{{ data.hjNumber }}</div> |
||||
<div class="total" style="grid-template-columns: repeat(5, 1fr)"> |
||||
<div class="one">一等：{{ data.ydjNumber }}</div> |
||||
<div class="two">二等：{{ data.edjNumber }}</div> |
||||
<div class="three">三等：{{ data.sdjNumber }}</div> |
||||
<div class="two">四等：{{ data.sidjNumber }}</div> |
||||
<div class="three">五等：{{ data.wdjNumber }}</div> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
|
||||
</el-row> |
||||
<p class="paragraph"> |
||||
个人综合素质综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。 |
||||
</p> |
||||
<img src="../../assets/images/card.png" alt=""> |
||||
|
||||
<el-row class="card-box" :gutter="[50, 50]" type="flex"> |
||||
<el-col :xs="24" :xl="12"> |
||||
<p class="paragraph"> |
||||
个人综合素质综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。 |
||||
</p> |
||||
</el-col> |
||||
<el-col :xs="24" :xl="12"> |
||||
<div class="ec-box"> |
||||
<div class="title-box"> |
||||
<div class="tit">年度维度分析</div> |
||||
</div> |
||||
<randerChart></randerChart> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<img src="../../assets/images/card.png" alt=""> |
||||
<p class="paragraph"> |
||||
我是比赛参赛情况综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。 |
||||
</p> |
||||
<div class="table-box" style="min-height: 500px;"> |
||||
<h1 class="title-pons">个人比赛获奖情况</h1> |
||||
<el-table :data="data.allApList" class="table" :class="{ height: data.allApList.length > 8 }"> |
||||
<el-table-column prop="jxname" label="奖项名称" /> |
||||
<el-table-column prop="ndbs" label="年度比赛" /> |
||||
<el-table-column prop="ndbsxm" label="年度比赛项目" /> |
||||
<el-table-column prop="dwname" label="所在队伍名称" /> |
||||
<el-table-column prop="jf" label="积分" /> |
||||
<template #empty> |
||||
<el-empty description="暂无数据" /> |
||||
</template> |
||||
</el-table> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
// import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue'; |
||||
import randerChart from './components/randerChart.vue'; |
||||
import { ElLoading } from 'element-plus' |
||||
import { getXsfxbgApi } from '@/api/person'; |
||||
import { ref, watch } from 'vue'; |
||||
|
||||
type allApList = { |
||||
jxname: string |
||||
ndbs: string |
||||
ndbsxm: string |
||||
dwname: string |
||||
jf: string |
||||
}[] | [] |
||||
|
||||
const data = ref<any>({ |
||||
cjbsxmsl: 0, |
||||
gjj: 0, |
||||
shengj: 0, |
||||
shij: 0, |
||||
xj: 0, |
||||
hjNumber: 0, |
||||
ydjNumber: 0, |
||||
edjNumber: 0, |
||||
sdjNumber: 0, |
||||
sidjNumber: 0, |
||||
wdjNumber: 0, |
||||
allApList: [] as allApList |
||||
}) |
||||
|
||||
let loading: any; |
||||
const setLoading = () => { |
||||
const col = ElLoading.service({ |
||||
lock: true, |
||||
text: 'Loading', |
||||
background: 'rgba(0, 0, 0, 0.7)', |
||||
}) |
||||
loading = col; |
||||
setTimeout(() => { col.close() }, 3000); // 最大终止时间3秒，若超过3秒还没有被终止，则终止 |
||||
} // 设置loading |
||||
const cloLoading = () => { if (loading) loading.close(); } //终止loading |
||||
getXsfxbgApi().then((res: any) => { |
||||
data.value = res.result |
||||
setLoading(); |
||||
}).finally(cloLoading); |
||||
const Rebuild = async () => { |
||||
setLoading(); |
||||
const res: any = await getXsfxbgApi({ recreateFlag: true, annualid: annualid.value }) |
||||
data.value = res.result |
||||
cloLoading(); |
||||
} |
||||
|
||||
const annualid = ref('') |
||||
watch(() => annualid.value, () => { |
||||
Rebuild() |
||||
}) |
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); |
||||
|
||||
* { |
||||
font-family: "Roboto", sans-serif; |
||||
font-weight: 300; |
||||
font-style: normal; |
||||
line-height: 3; |
||||
} |
||||
|
||||
.title-pons { |
||||
font-size: 30px; |
||||
text-align: center; |
||||
padding-bottom: 30px; |
||||
line-height: initial; |
||||
} |
||||
|
||||
.table{ |
||||
font-size: 16px; |
||||
} |
||||
.fill { |
||||
padding-top: 80px; |
||||
} |
||||
|
||||
.loading { |
||||
width: 100%; |
||||
height: 100vh; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.rebuild { |
||||
display: flex; |
||||
justify-content: center; |
||||
|
||||
div { |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.personage { |
||||
padding: 0 18.6vw 60px; |
||||
width: 100%; |
||||
margin: auto; |
||||
|
||||
&>* { |
||||
margin: 50px 0; |
||||
} |
||||
|
||||
&>img { |
||||
margin: -50px 0; |
||||
} |
||||
|
||||
&>.title { |
||||
text-align: center; |
||||
font-size: 35px; |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
.paragraph { |
||||
font-size: 16px; |
||||
text-indent: 2em; |
||||
} |
||||
|
||||
.card { |
||||
width: 100%; |
||||
|
||||
.inner { |
||||
height: 0; |
||||
padding-top: 40%; |
||||
position: relative; |
||||
|
||||
.container { |
||||
position: absolute; |
||||
inset: 0; |
||||
border-radius: 5px; |
||||
border: 1px solid; |
||||
line-height: 1; |
||||
display: flex; |
||||
|
||||
.fl-box { |
||||
height: 80%; |
||||
margin: auto; |
||||
margin-left: 25px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
|
||||
.tit { |
||||
color: #a0a0a0; |
||||
} |
||||
|
||||
.center { |
||||
font-size: 30px; |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
.info { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.ec-box { |
||||
width: 100%; |
||||
border-radius: 2px 2px 2px 2px; |
||||
border: 1px solid #000; |
||||
|
||||
.title-box { |
||||
height: 58px; |
||||
border-radius: 2px 2px 0px 0px; |
||||
box-shadow: 0px 1px 2px 0px #707070; |
||||
display: flex; |
||||
|
||||
.tit { |
||||
margin-left: 4%; |
||||
height: 58px; |
||||
line-height: 58px; |
||||
font-size: 16px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.table-box { |
||||
border: 1px solid; |
||||
padding: 40px 20px; |
||||
|
||||
table { |
||||
width: 100%; |
||||
|
||||
caption { |
||||
caption-side: top; |
||||
padding-bottom: 20px; |
||||
text-align: center; |
||||
color: #000; |
||||
font-size: 26px; |
||||
} |
||||
|
||||
thead { |
||||
text-align: left; |
||||
color: rgb(160 160 160); |
||||
} |
||||
|
||||
tr { |
||||
text-align: left; |
||||
border-bottom: 1px solid rgb(219, 216, 216); |
||||
|
||||
th, |
||||
td { |
||||
padding: 10px 0; |
||||
} |
||||
|
||||
th:first-child { |
||||
text-align: center; |
||||
} |
||||
|
||||
td:last-child { |
||||
color: rgb(64, 51, 253); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
/** */ |
||||
.card1 { |
||||
--el-card-padding: 0; |
||||
|
||||
&, |
||||
* { |
||||
line-height: initial; |
||||
} |
||||
|
||||
:deep() { |
||||
.el-card__body { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
} |
||||
} |
||||
|
||||
width: 100%; |
||||
height: 182px; |
||||
// background-color: #ffffff00; |
||||
border: 1px solid #ccc; |
||||
padding: 20px; |
||||
|
||||
.title { |
||||
display: flex; |
||||
width: 100%; |
||||
|
||||
justify-content: space-between; |
||||
|
||||
.left { |
||||
font-size: 14px; |
||||
color: #fff; |
||||
color: rgba(0, 0, 0, 0.45); |
||||
} |
||||
} |
||||
|
||||
.name { |
||||
font-size: 42px; |
||||
font-weight: 500; |
||||
color: #000; |
||||
margin: 10px 0; |
||||
} |
||||
|
||||
.total { |
||||
font-size: 16px; |
||||
color: #000; |
||||
// display: flex; |
||||
width: 100%; |
||||
display: grid; |
||||
grid-template-columns: repeat(4, 1fr); |
||||
/* 创建两列，每列宽度相等 */ |
||||
grid-template-rows: repeat(2, 10px); |
||||
/* 创建四行，每行高度固定为100px */ |
||||
gap: 10px; |
||||
|
||||
div { |
||||
// width: 25%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,626 @@ |
||||
<template> |
||||
<!-- 报名信息确认页面 团队 --> |
||||
<div class="fill"></div> |
||||
<div class="banner"> |
||||
<div class="box"> |
||||
<div class="title-box"> |
||||
<div class="title">报名信息确认</div> |
||||
<div class="text"> |
||||
请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。 |
||||
请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。 |
||||
请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。 |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="img-box"> |
||||
<img src="../../assets/images/applyImg.png" alt=""> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="registration-layout"> |
||||
<div class="top"> |
||||
<!-- 比赛信息 --> |
||||
<el-card class="com"> |
||||
<div class="title">比赛信息</div> |
||||
<div class="content"> |
||||
<div class="card-annual"> |
||||
<div class="annual">2023年度</div> |
||||
<div class="title-box"> |
||||
<div class="text">河南省大学生创新创业大赛</div> |
||||
<img src="../../assets/images/编组.png" alt=""> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="info-box"> |
||||
<div class="name">比赛年度</div> |
||||
<div class="title">2024年度</div> |
||||
<div class="name">比赛名称</div> |
||||
<div class="title">河南省大学生创新创业大赛</div> |
||||
<div class="date-box"> |
||||
<div class="label">开始报名时间：</div> |
||||
<div class="date">2323.6.1 18:00</div> |
||||
</div> |
||||
<div class="date-box"> |
||||
<div class="label">开始截至时间：</div> |
||||
<div class="date">2323.6.1 18:00</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
<!-- 项目信息 --> |
||||
<el-card class="com"> |
||||
<div class="title">项目信息</div> |
||||
<div class="content track"> |
||||
<div class="card-annual"> |
||||
<p>红色之旅赛道</p> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="info-box"> |
||||
<div class="name">项目名称</div> |
||||
<div class="title">红色之旅赛道</div> |
||||
<div class="name">要求人数</div> |
||||
<div class="title">1人</div> |
||||
<div class="date-box"> |
||||
<div class="label">开始报名时间：</div> |
||||
<div class="date">2323.6.1 18:00</div> |
||||
</div> |
||||
<div class="date-box"> |
||||
<div class="label">开始截至时间：</div> |
||||
<div class="date">2323.6.1 18:00</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
<el-card class="center"> |
||||
<div class="personage-info"> |
||||
<div class="head"> |
||||
<div class="title">个人信息</div> |
||||
<div class="icon"> |
||||
<img src="../../assets/images/ellipsis.png" alt=""> |
||||
</div> |
||||
</div> |
||||
<div class="info-box"> |
||||
<div class="label">姓名</div> |
||||
<div class="text">王不留行</div> |
||||
</div> |
||||
|
||||
<div class="info-box"> |
||||
<div class="label">姓别</div> |
||||
<div class="text">男</div> |
||||
</div> |
||||
|
||||
<div class="info-box"> |
||||
<div class="label">学号</div> |
||||
<div class="text">2023010236</div> |
||||
</div> |
||||
|
||||
<div class="info-box"> |
||||
<div class="label">手机号</div> |
||||
<div class="text">17725633652</div> |
||||
</div> |
||||
|
||||
<div class="info-box"> |
||||
<div class="label">院系</div> |
||||
<div class="text">国际教育学院</div> |
||||
</div> |
||||
|
||||
<div class="info-box"> |
||||
<div class="label">专业</div> |
||||
<div class="text">软件工程</div> |
||||
</div> |
||||
|
||||
<div class="info-box"> |
||||
<div class="label">指导老师</div> |
||||
<div class="text">令狐冲</div> |
||||
</div> |
||||
|
||||
<div class="info-box"> |
||||
<div class="label">所属团队</div> |
||||
<div class="text">王不留行的团队</div> |
||||
</div> |
||||
|
||||
<div class="info-box remark"> |
||||
<div class="label">其它备注</div> |
||||
<div class="text">无</div> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
<el-card class="list" :body-style="{ padding: 0 }"> |
||||
<div class="head"> |
||||
<div class="left"> |
||||
<el-button class="btn" type="primary">添加队员</el-button> |
||||
<div class="text">已选2位</div> |
||||
</div> |
||||
|
||||
<div class="right"> |
||||
<el-input v-model="input" style="width: 280px" placeholder="请输入学号进行搜索" suffix-icon="Search" /> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="table-box"> |
||||
<el-table ref="multipleTableRef" border :data="tableData" class="table"> |
||||
<el-table-column type="selection" width="55" /> |
||||
<el-table-column property="stuNum" label="学号" sortable /> |
||||
<el-table-column property="name" label="姓名" sortable /> |
||||
<el-table-column property="department" label="院系" sortable /> |
||||
<el-table-column property="phone" label="手机号" sortable /> |
||||
</el-table> |
||||
<div class="pagin-box"> |
||||
<el-pagination class="pagination" style="width: 100%;" v-model:current-page="pagInfo.currentPage" |
||||
v-model:page-size="pagInfo.pageSize" :page-sizes="[10, 20, 30, 40]" |
||||
layout="slo, total,slot, sizes, prev, pager, next, jumper" :total="pagInfo.total" |
||||
@change="handleChange" /> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
<div class="bottom"> |
||||
<el-button class="btn">取消报名</el-button> |
||||
<el-button class="btn cyan">确认报名</el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { reactive, ref } from 'vue'; |
||||
|
||||
const input = ref(''); |
||||
interface User { |
||||
id: number // id |
||||
stuNum: string // 学号 |
||||
name: string // 姓名 |
||||
department: string // 院系 |
||||
phone: string // 手机号 |
||||
} |
||||
const tableData: User[] = [ |
||||
{ |
||||
id: 1, |
||||
stuNum: '20230101', |
||||
name: '张三', |
||||
department: '软件工程', |
||||
phone: '13598664456', |
||||
}, |
||||
{ |
||||
id: 2, |
||||
stuNum: '20230101', |
||||
name: '张三', |
||||
department: '软件工程', |
||||
phone: '13598664456', |
||||
}, |
||||
{ |
||||
id: 3, |
||||
stuNum: '20230101', |
||||
name: '张三', |
||||
department: '软件工程', |
||||
phone: '13598664456', |
||||
}, |
||||
{ |
||||
id: 4, |
||||
stuNum: '20230101', |
||||
name: '张三', |
||||
department: '软件工程', |
||||
phone: '13598664456', |
||||
}, |
||||
{ |
||||
id: 4, |
||||
stuNum: '20230101', |
||||
name: '张三', |
||||
department: '软件工程', |
||||
phone: '13598664456', |
||||
}, |
||||
{ |
||||
id: 4, |
||||
stuNum: '20230101', |
||||
name: '张三', |
||||
department: '软件工程', |
||||
phone: '13598664456', |
||||
}, |
||||
{ |
||||
id: 4, |
||||
stuNum: '20230101', |
||||
name: '张三', |
||||
department: '软件工程', |
||||
phone: '13598664456', |
||||
}, |
||||
{ |
||||
id: 4, |
||||
stuNum: '20230101', |
||||
name: '张三', |
||||
department: '软件工程', |
||||
phone: '13598664456', |
||||
}, |
||||
{ |
||||
id: 4, |
||||
stuNum: '20230101', |
||||
name: '张三', |
||||
department: '软件工程', |
||||
phone: '13598664456', |
||||
}, |
||||
] |
||||
|
||||
// 分页 |
||||
const pagInfo = reactive({ |
||||
currentPage: 1, |
||||
pageSize: 10, |
||||
total: 400 |
||||
}) |
||||
function handleChange(currentPage: number, pageSize: number) { |
||||
console.log(currentPage, pageSize); |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.fill { |
||||
padding-top: 80px; |
||||
} |
||||
|
||||
.banner { |
||||
width: 100%; |
||||
height: 289; |
||||
background: linear-gradient(90deg, #FFFFFF 0%, #F0F8FF 100%); |
||||
padding: 21px 0 37px 225px; |
||||
|
||||
.box { |
||||
width: 1515px; |
||||
height: 231px; |
||||
display: flex; |
||||
gap: 104px; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.title-box { |
||||
width: 1151px; |
||||
|
||||
.title { |
||||
height: 59px; |
||||
font-family: Open Sans, Open Sans; |
||||
font-weight: bold; |
||||
font-size: 42px; |
||||
color: #333333; |
||||
line-height: 59px; |
||||
} |
||||
|
||||
.text { |
||||
margin-top: 20px; |
||||
font-family: Open Sans, Open Sans; |
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
color: #666666; |
||||
line-height: 23px; |
||||
} |
||||
} |
||||
|
||||
.img-box { |
||||
img { |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
} |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
|
||||
.registration-layout { |
||||
margin-top: 20px; |
||||
margin: 0 auto; |
||||
width: 1397px; |
||||
|
||||
&>* { |
||||
background: #FFFFFF; |
||||
} |
||||
|
||||
.top { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin: 25px 0; |
||||
height: 300px; |
||||
|
||||
.com { |
||||
width: 685px; |
||||
height: 300px; |
||||
border-radius: 6px 6px 6px 6px; |
||||
padding-top: 22px; |
||||
padding-left: 32px; |
||||
|
||||
.title { |
||||
height: 28px; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: bold; |
||||
font-size: 20px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
line-height: 28px; |
||||
margin-bottom: 18px; |
||||
} |
||||
|
||||
margin-right: 22px; |
||||
|
||||
.content { |
||||
display: flex; |
||||
gap: 22px; |
||||
|
||||
.card-annual { |
||||
padding: 28px 0 0 28px; |
||||
width: 340px; |
||||
height: 182px; |
||||
background: linear-gradient(90deg, #21ACA5 0%, #42D9AC99 100%); |
||||
border-radius: 8px; |
||||
overflow: hidden; |
||||
|
||||
.annual { |
||||
height: 19px; |
||||
font-family: Inter, Inter; |
||||
font-weight: bold; |
||||
font-size: 16px; |
||||
color: rgba(255, 255, 255, 0.8); |
||||
line-height: 19px; |
||||
} |
||||
|
||||
.title-box { |
||||
margin-top: 13px; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 28px; |
||||
|
||||
.text { |
||||
width: 202px; |
||||
font-family: Inter, Inter; |
||||
font-weight: normal; |
||||
font-size: 32px; |
||||
color: #FFFFFF; |
||||
line-height: 39px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.right { |
||||
.info-box { |
||||
.name { |
||||
height: 20px; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
color: #ACACAC; |
||||
line-height: 20px; |
||||
margin-bottom: 8px; |
||||
} |
||||
|
||||
.title { |
||||
height: 20px; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: bold; |
||||
font-size: 20px; |
||||
color: #333333; |
||||
line-height: 20px; |
||||
margin-bottom: 12px; |
||||
} |
||||
|
||||
.date-box { |
||||
margin-bottom: 12px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.label { |
||||
height: 20px; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
color: #ACACAC; |
||||
line-height: 20px; |
||||
} |
||||
|
||||
.date { |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: bold; |
||||
font-size: 18px; |
||||
color: #333333; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.track { |
||||
.card-annual { |
||||
background: url(../../assets/images/item.png) no-repeat; |
||||
background-size: cover; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
padding: 0; |
||||
|
||||
p { |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: bold; |
||||
font-size: 40px; |
||||
color: #76DAE5; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.center { |
||||
height: 388px; |
||||
border-radius: 6px 6px 6px 6px; |
||||
margin-bottom: 25px; |
||||
|
||||
.personage-info { |
||||
margin: 30px 0 0 32px; |
||||
width: 780px; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
row-gap: 32px; |
||||
|
||||
.head { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.title { |
||||
height: 28px; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: bold; |
||||
font-size: 20px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
line-height: 28px; |
||||
} |
||||
|
||||
.icon { |
||||
padding: 5px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.info-box { |
||||
&.remark { |
||||
width: 377.333px; |
||||
} |
||||
|
||||
width: 176px; |
||||
height: 60px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
|
||||
.label { |
||||
height: 22px; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.4); |
||||
line-height: 22px; |
||||
} |
||||
|
||||
.text { |
||||
height: 22px; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
line-height: 22px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.list { |
||||
.head { |
||||
padding: 32px; |
||||
height: 96px; |
||||
background: #FFFFFF; |
||||
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1); |
||||
border-radius: 6px 6px 0px 0px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
&>* { |
||||
height: 32px; |
||||
} |
||||
|
||||
.left { |
||||
display: flex; |
||||
gap: 12px; |
||||
align-items: center; |
||||
|
||||
.btn { |
||||
height: 32px; |
||||
width: 88px; |
||||
background: #42D9AC; |
||||
border-radius: 3px 3px 3px 3px; |
||||
border: none; |
||||
} |
||||
|
||||
.text { |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.4); |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.table-box { |
||||
.table { |
||||
width: 100%; |
||||
height: 276px; |
||||
} |
||||
|
||||
.pagin-box { |
||||
width: 100%; |
||||
height: 64px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.pagination { |
||||
padding: 0 24px; |
||||
|
||||
:deep() { |
||||
.el-pagination__total { |
||||
margin-right: auto; |
||||
} |
||||
|
||||
li.number.is-active { |
||||
background-color: #42D9AC; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
} |
||||
|
||||
span.el-pagination__jump { |
||||
background-color: #F3F3F3; |
||||
padding: 2px 8px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
.bottom { |
||||
margin: 46px 0; |
||||
height: 70px; |
||||
display: flex; |
||||
gap: 106px; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
.btn { |
||||
--color1: #FFF4CE; |
||||
--color2: #FF6B6B; |
||||
width: 387px; |
||||
height: 69px; |
||||
border-radius: 69px; |
||||
border: none; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: bold; |
||||
font-size: 24px; |
||||
color: #FFFFFF; |
||||
background: linear-gradient(to right, var(--color1), var(--color2)); |
||||
box-shadow: 7px 7px 22px -10px rgba(0, 0, 0, 0.22); |
||||
transition: all 0.2s; |
||||
|
||||
&:hover { |
||||
transform: scale(1.1); |
||||
} |
||||
|
||||
&.cyan { |
||||
--color1: #00D0D0; |
||||
--color2: #42D9AC; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,441 @@ |
||||
<template> |
||||
<!-- 报名信息确认页面 个人 --> |
||||
<div class="fill"></div> |
||||
<div class="banner"> |
||||
<div class="box"> |
||||
<div class="title-box"> |
||||
<div class="title">报名信息确认</div> |
||||
<div class="text"> |
||||
请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。 |
||||
请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。 |
||||
请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。 |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="img-box"> |
||||
<img src="../../assets/images/applyImg.png" alt=""> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="registration-layout"> |
||||
<div class="top"> |
||||
<!-- 比赛信息 --> |
||||
<el-card class="com"> |
||||
<div class="title">比赛信息</div> |
||||
<div class="content"> |
||||
<div class="card-annual"> |
||||
<div class="annual">2023年度</div> |
||||
<div class="title-box"> |
||||
<div class="text">河南省大学生创新创业大赛</div> |
||||
<img src="../../assets/images/编组.png" alt=""> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="info-box"> |
||||
<div class="name">比赛年度</div> |
||||
<div class="title">2024年度</div> |
||||
<div class="name">比赛名称</div> |
||||
<div class="title">河南省大学生创新创业大赛</div> |
||||
<div class="date-box"> |
||||
<div class="label">开始报名时间：</div> |
||||
<div class="date">2323.6.1 18:00</div> |
||||
</div> |
||||
<div class="date-box"> |
||||
<div class="label">开始截至时间：</div> |
||||
<div class="date">2323.6.1 18:00</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
<!-- 项目信息 --> |
||||
<el-card class="com"> |
||||
<div class="title">项目信息</div> |
||||
<div class="content track"> |
||||
<div class="card-annual"> |
||||
<p>红色之旅赛道</p> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="info-box"> |
||||
<div class="name">项目名称</div> |
||||
<div class="title">红色之旅赛道</div> |
||||
<div class="name">要求人数</div> |
||||
<div class="title">1人</div> |
||||
<div class="date-box"> |
||||
<div class="label">开始报名时间：</div> |
||||
<div class="date">2323.6.1 18:00</div> |
||||
</div> |
||||
<div class="date-box"> |
||||
<div class="label">开始截至时间：</div> |
||||
<div class="date">2323.6.1 18:00</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
<el-card class="center"> |
||||
<div class="personage-info"> |
||||
<div class="head"> |
||||
<div class="title">个人信息</div> |
||||
<div class="icon"> |
||||
<img src="../../assets/images/ellipsis.png" alt=""> |
||||
</div> |
||||
</div> |
||||
<div class="info-box"> |
||||
<div class="label">姓名</div> |
||||
<div class="text">王不留行</div> |
||||
</div> |
||||
|
||||
<div class="info-box"> |
||||
<div class="label">姓别</div> |
||||
<div class="text">男</div> |
||||
</div> |
||||
|
||||
<div class="info-box"> |
||||
<div class="label">学号</div> |
||||
<div class="text">2023010236</div> |
||||
</div> |
||||
|
||||
<div class="info-box"> |
||||
<div class="label">手机号</div> |
||||
<div class="text">17725633652</div> |
||||
</div> |
||||
|
||||
<div class="info-box"> |
||||
<div class="label">院系</div> |
||||
<div class="text">国际教育学院</div> |
||||
</div> |
||||
|
||||
<div class="info-box"> |
||||
<div class="label">专业</div> |
||||
<div class="text">软件工程</div> |
||||
</div> |
||||
|
||||
<div class="info-box"> |
||||
<div class="label">指导老师</div> |
||||
<div class="text">令狐冲</div> |
||||
</div> |
||||
|
||||
<div class="info-box"> |
||||
<div class="label">所属团队</div> |
||||
<div class="text">王不留行的团队</div> |
||||
</div> |
||||
|
||||
<div class="info-box remark"> |
||||
<div class="label">其它备注</div> |
||||
<div class="text">无</div> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<div class="bottom"> |
||||
<el-button class="btn">取消报名</el-button> |
||||
<el-button class="btn cyan">确认报名</el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.fill { |
||||
padding-top: 80px; |
||||
} |
||||
|
||||
.banner { |
||||
width: 100%; |
||||
height: 289; |
||||
background: linear-gradient(90deg, #FFFFFF 0%, #F0F8FF 100%); |
||||
padding: 21px 0 37px 225px; |
||||
|
||||
.box { |
||||
width: 1515px; |
||||
height: 231px; |
||||
display: flex; |
||||
gap: 104px; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.title-box { |
||||
width: 1151px; |
||||
|
||||
.title { |
||||
height: 59px; |
||||
font-family: Open Sans, Open Sans; |
||||
font-weight: bold; |
||||
font-size: 42px; |
||||
color: #333333; |
||||
line-height: 59px; |
||||
} |
||||
|
||||
.text { |
||||
margin-top: 20px; |
||||
font-family: Open Sans, Open Sans; |
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
color: #666666; |
||||
line-height: 23px; |
||||
} |
||||
} |
||||
|
||||
.img-box { |
||||
img { |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
} |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
|
||||
.registration-layout { |
||||
margin-top: 20px; |
||||
margin: 0 auto; |
||||
width: 1397px; |
||||
|
||||
&>* { |
||||
background: #FFFFFF; |
||||
} |
||||
|
||||
.top { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin: 25px 0; |
||||
height: 300px; |
||||
|
||||
.com { |
||||
width: 685px; |
||||
height: 300px; |
||||
border-radius: 6px 6px 6px 6px; |
||||
padding-top: 22px; |
||||
padding-left: 32px; |
||||
|
||||
.title { |
||||
height: 28px; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: bold; |
||||
font-size: 20px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
line-height: 28px; |
||||
margin-bottom: 18px; |
||||
} |
||||
|
||||
margin-right: 22px; |
||||
|
||||
.content { |
||||
display: flex; |
||||
gap: 22px; |
||||
|
||||
.card-annual { |
||||
padding: 28px 0 0 28px; |
||||
width: 340px; |
||||
height: 182px; |
||||
background: linear-gradient(90deg, #21ACA5 0%, #42D9AC99 100%); |
||||
border-radius: 8px; |
||||
overflow: hidden; |
||||
|
||||
.annual { |
||||
height: 19px; |
||||
font-family: Inter, Inter; |
||||
font-weight: bold; |
||||
font-size: 16px; |
||||
color: rgba(255, 255, 255, 0.8); |
||||
line-height: 19px; |
||||
} |
||||
|
||||
.title-box { |
||||
margin-top: 13px; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 28px; |
||||
|
||||
.text { |
||||
width: 202px; |
||||
font-family: Inter, Inter; |
||||
font-weight: normal; |
||||
font-size: 32px; |
||||
color: #FFFFFF; |
||||
line-height: 39px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.right { |
||||
.info-box { |
||||
.name { |
||||
height: 20px; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
color: #ACACAC; |
||||
line-height: 20px; |
||||
margin-bottom: 8px; |
||||
} |
||||
|
||||
.title { |
||||
height: 20px; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: bold; |
||||
font-size: 20px; |
||||
color: #333333; |
||||
line-height: 20px; |
||||
margin-bottom: 12px; |
||||
} |
||||
|
||||
.date-box { |
||||
margin-bottom: 12px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.label { |
||||
height: 20px; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
color: #ACACAC; |
||||
line-height: 20px; |
||||
} |
||||
|
||||
.date { |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: bold; |
||||
font-size: 18px; |
||||
color: #333333; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.track { |
||||
.card-annual { |
||||
background: url(../../assets/images/item.png) no-repeat; |
||||
background-size: cover; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
padding: 0; |
||||
|
||||
p { |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: bold; |
||||
font-size: 40px; |
||||
color: #76DAE5; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.center { |
||||
height: 388px; |
||||
border-radius: 6px 6px 6px 6px; |
||||
margin-bottom: 25px; |
||||
position: relative; |
||||
|
||||
.personage-info { |
||||
margin: 30px 0 0 32px; |
||||
width: 780px; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
row-gap: 32px; |
||||
|
||||
.head { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.title { |
||||
height: 28px; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: bold; |
||||
font-size: 20px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
line-height: 28px; |
||||
} |
||||
|
||||
.icon { |
||||
padding: 5px; |
||||
cursor: pointer; |
||||
position: absolute; |
||||
right: 30px; |
||||
} |
||||
} |
||||
|
||||
.info-box { |
||||
&.remark { |
||||
width: 377.333px; |
||||
} |
||||
|
||||
width: 176px; |
||||
height: 60px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
|
||||
.label { |
||||
height: 22px; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.4); |
||||
line-height: 22px; |
||||
} |
||||
|
||||
.text { |
||||
height: 22px; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
line-height: 22px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.bottom { |
||||
margin: 46px 0; |
||||
height: 70px; |
||||
display: flex; |
||||
gap: 106px; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
.btn { |
||||
--color1: #FFF4CE; |
||||
--color2: #FF6B6B; |
||||
width: 387px; |
||||
height: 69px; |
||||
border-radius: 69px; |
||||
border: none; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: bold; |
||||
font-size: 24px; |
||||
color: #FFFFFF; |
||||
background: linear-gradient(to right, var(--color1), var(--color2)); |
||||
box-shadow: 7px 7px 22px -10px rgba(0, 0, 0, 0.22); |
||||
transition: all 0.2s; |
||||
|
||||
&:hover { |
||||
transform: scale(1.1); |
||||
} |
||||
|
||||
&.cyan { |
||||
--color1: #00D0D0; |
||||
--color2: #42D9AC; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,12 @@ |
||||
<template> |
||||
<div class="container-1420">1</div> |
||||
</template> |
||||
|
||||
<script lang='ts' setup> |
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
|
||||
</script> |
||||
|
||||
<style lang='scss' scoped> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue