更改为H5样式

GST002_H5
JayChou 3 weeks ago
parent 4e2cef1618
commit c2c25f2520
  1. 2
      .env.development
  2. 2
      .env.production
  3. 16
      src/Layout/footer/index.vue
  4. 42
      src/Layout/tabbar/index.vue
  5. 12
      src/main.ts
  6. 2
      src/permissions.ts
  7. 20
      src/router/module/constRouter/index.ts
  8. 14
      src/store/module/user.ts
  9. 5
      src/styles/index.scss
  10. 2
      src/styles/variable.scss
  11. 2
      src/utils/requset.ts
  12. 116
      src/views/home/index.vue
  13. 81
      src/views/login/index.vue
  14. 192
      src/views/login/registered.vue
  15. 20
      src/views/news/index.vue
  16. 28
      src/views/projectName/index.vue
  17. 73
      src/views/raceInfo/index.vue
  18. 72
      src/views/registrationPersonage/index.vue
  19. 2
      src/views/userInfo/components/awardeList.vue
  20. 13
      src/views/userInfo/index.vue
  21. 2
      vite.config.ts

@ -4,3 +4,5 @@ VITE_APP_TITLE = '教学一体化平台'
VITE_APP_BASE_API = http://localhost:18085/jeecg-boot VITE_APP_BASE_API = http://localhost:18085/jeecg-boot
# VITE_APP_BASE_API = 'http://127.0.0.1:8080' # VITE_APP_BASE_API = 'http://127.0.0.1:8080'
VITE_APP_BASE_API_JEECG = '/student' VITE_APP_BASE_API_JEECG = '/student'
VITE_APP_PC_URL = http://localhost:18085/jeecg-boot
VITE_APP_MOBILE_URL = http://localhost:18085/jeecg-boot

@ -3,3 +3,5 @@ NODE_ENV = 'development'
VITE_APP_TITLE = '高赛通单项目' VITE_APP_TITLE = '高赛通单项目'
VITE_APP_BASE_API = http://182.92.169.222:18086/jeecg-boot VITE_APP_BASE_API = http://182.92.169.222:18086/jeecg-boot
# VITE_APP_BASE_API = 'http://127.0.0.1:8080' # VITE_APP_BASE_API = 'http://127.0.0.1:8080'
VITE_APP_PC_URL = http://localhost:18085/jeecg-boot
VITE_APP_MOBILE_URL = http://localhost:18085/jeecg-boot

@ -41,7 +41,7 @@ const toNewsDetail = (id: number) => {
<style lang="scss" scoped> <style lang="scss" scoped>
.footer { .footer {
width: 100%; width: 100%;
height: 300px; height: 100px;
background: url('../../assets//images/footer.png') no-repeat; background: url('../../assets//images/footer.png') no-repeat;
background-size: cover; background-size: cover;
display: flex; display: flex;
@ -50,12 +50,18 @@ const toNewsDetail = (id: number) => {
color: var(--text-color); color: var(--text-color);
position: relative; position: relative;
transition: all 0.3s; transition: all 0.3s;
padding: 0 20px;
margin-top: 20px;
.footer-nav { .footer-nav {
display: flex; display: flex;
margin-top: 120px; width: 100%;
// margin-top: 120px;
justify-content: space-between;
&>{
width: 33%;
}
.item { .item {
width: 180px;
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
@ -71,7 +77,7 @@ const toNewsDetail = (id: number) => {
} }
.copyright { .copyright {
margin-top: 80px; margin-top: 30px;
} }
.report { .report {

@ -2,7 +2,7 @@
<div :class="!flog ? 'tabbar' : 'tabbar-active'"> <div :class="!flog ? 'tabbar' : 'tabbar-active'">
<div class="container"> <div class="container">
<div class="left"> <div class="left">
<div class="logo-box"> <div class="logo-box" @click="$router.push('/')">
<div class="lesson"> <div class="lesson">
<img :src="logoUrl" alt="" v-default-image="logoImage" /> <img :src="logoUrl" alt="" v-default-image="logoImage" />
<!-- <img src="../../assets/images/LOGO.png" alt=""> --> <!-- <img src="../../assets/images/LOGO.png" alt=""> -->
@ -18,15 +18,11 @@
> >
<Item :menu-list="constRouter.children" /> <Item :menu-list="constRouter.children" />
</el-menu> </el-menu>
<!-- <ul>
<li v-for="(item, index) in constRouter.children" :key="index">
{{ item.meta.title }}
</li>
</ul> -->
</div> </div>
</div> </div>
<div class="right" v-if="!useUserStore.token"> <div class="right" v-if="!useUserStore.token">
<div class="theme-switch"> <!-- <div class="theme-switch">
<el-popover <el-popover
v-model:visible="showThemePopover" v-model:visible="showThemePopover"
placement="bottom" placement="bottom"
@ -54,17 +50,17 @@
</div> </div>
</div> </div>
</el-popover> </el-popover>
</div> </div> -->
<div <div
class="registered gradient" class="registered gradient"
@click="$router.push('/login?registered=true')" @click="$router.push('/login')"
> >
注册 登录
</div> </div>
<div class="login" @click="$router.push('/login')">登录</div> <!-- <div class="login" @click="$router.push('/login')">登录</div> -->
</div> </div>
<div class="right" v-else> <div class="right" v-else>
<div class="theme-switch"> <!-- <div class="theme-switch">
<el-popover <el-popover
v-model:visible="showThemePopover" v-model:visible="showThemePopover"
placement="bottom" placement="bottom"
@ -92,7 +88,7 @@
</div> </div>
</div> </div>
</el-popover> </el-popover>
</div> </div> -->
<div class="avater"> <div class="avater">
<img <img
:src="setImageUrl(useUserStore.userInfo.avatar)" :src="setImageUrl(useUserStore.userInfo.avatar)"
@ -100,7 +96,7 @@
v-default-image="defaultUserAvater" v-default-image="defaultUserAvater"
/> />
</div> </div>
<el-dropdown style="width: 0.625rem"> <el-dropdown style="width: 1.8667rem">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
{{ useUserStore.userInfo.realname }} {{ useUserStore.userInfo.realname }}
<el-icon class="el-icon--right"> <el-icon class="el-icon--right">
@ -190,6 +186,7 @@ const showThemePopover = ref(false)
display: flex; display: flex;
align-items: center; align-items: center;
column-gap: 20px; column-gap: 20px;
padding: 0 20px;
.logo { .logo {
width: 50px; width: 50px;
@ -214,7 +211,7 @@ const showThemePopover = ref(false)
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; // width: 100%;
z-index: 999; z-index: 999;
transition: all 0.3s; transition: all 0.3s;
// background-color: var(--background-color); // background-color: var(--background-color);
@ -240,7 +237,7 @@ const showThemePopover = ref(false)
} }
} }
.menu { .menu {
margin-left: 40px; // margin-left: 40px;
:deep(.el-menu) { :deep(.el-menu) {
background-color: transparent; background-color: transparent;
border: none; border: none;
@ -314,7 +311,7 @@ const showThemePopover = ref(false)
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.menu { .menu {
margin-left: 40px; // margin-left: 40px;
:deep(.el-menu) { :deep(.el-menu) {
background-color: transparent; background-color: transparent;
border: none; border: none;
@ -368,10 +365,10 @@ const showThemePopover = ref(false)
.right { .right {
display: flex; display: flex;
div { div {
width: 108px; width: 80px;
height: 40px; height: 35px;
text-align: center; text-align: center;
line-height: 40px; line-height: 35px;
border-radius: 5px; border-radius: 5px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
@ -403,7 +400,7 @@ const showThemePopover = ref(false)
} }
.menu { .menu {
position: relative; position: relative;
padding: 0 20px; // padding: 0 20px;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -556,7 +553,7 @@ const showThemePopover = ref(false)
display: flex; display: flex;
align-items: center; align-items: center;
div { div {
width: 108px; width: 80px;
height: 40px; height: 40px;
text-align: center; text-align: center;
line-height: 40px; line-height: 40px;
@ -569,6 +566,7 @@ const showThemePopover = ref(false)
background: var(--gradient-color); background: var(--gradient-color);
border-radius: 20px; border-radius: 20px;
transition: all 0.3s; transition: all 0.3s;
margin-right: 10px;
&:hover { &:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

@ -50,3 +50,15 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
// 初始化主题 // 初始化主题
const useThemeStore = themeStore() const useThemeStore = themeStore()
useThemeStore.initTheme() useThemeStore.initTheme()
const ua = navigator.userAgent.toLowerCase()
// console.log(ua,'ua');
const isMobile = /iphone|android|ipad|mobile/.test(ua)
if (isMobile) {
console.log('手机端')
} else if (!isMobile) {
console.log('电脑端')
}

@ -13,6 +13,8 @@ const asyncRouter = (path: string) => {
} }
router.beforeEach(async (to, form, next) => { router.beforeEach(async (to, form, next) => {
const useuserStore = userStore() const useuserStore = userStore()
console.log(useuserStore.token,'useuserStore.token');
document.title = to.meta.title ? '高赛通-' + to.meta.title : '高赛通' document.title = to.meta.title ? '高赛通-' + to.meta.title : '高赛通'
if (useuserStore.token) { if (useuserStore.token) {
if (to.path === '/login') { if (to.path === '/login') {

@ -99,16 +99,16 @@ export const constRouter: any = {
hidden: false, hidden: false,
}, },
}, },
{ // {
path: '/hostNews', // path: '/hostNews',
name: 'HostNews', // name: 'HostNews',
component: () => import('@/views/news/hostNews.vue'), // component: () => import('@/views/news/hostNews.vue'),
meta: { // meta: {
icon: '', // icon: '',
title: '综合新闻', // title: '综合新闻',
hidden: false, // hidden: false,
}, // },
}, // },
{ {
path: 'detail/:id', path: 'detail/:id',
name: 'newsDetail', name: 'newsDetail',

@ -3,7 +3,7 @@ import { loginApi, getUserInfoApi, logOut } from '@/api/user'
import { ElNotification } from 'element-plus' import { ElNotification } from 'element-plus'
import { setToken, getToken, removeToken } from '@/utils/token' import { setToken, getToken, removeToken } from '@/utils/token'
const userStore = defineStore('defineStore', { const userStore = defineStore('user', {
state: (): any => ({ state: (): any => ({
token: getToken() || '', token: getToken() || '',
userInfo: {}, userInfo: {},
@ -17,15 +17,15 @@ const userStore = defineStore('defineStore', {
} else if (res.code === 500) { } else if (res.code === 500) {
return 1 return 1
} else { } else {
console.log(res.result.userInfo) console.log(res.result, 'res.result')
this.token = res.result.token this.token = res.result.token
setToken(this.token) setToken(this.token)
this.userInfo = res.result.userInfo this.userInfo = res.result.userInfo
ElNotification({ // ElNotification({
title: '登录成功', // title: '登录成功',
message: '欢迎回来' + this.userInfo.realname, // message: '欢迎回来' + this.userInfo.realname,
type: 'success', // type: 'success',
}) // })
} }
}, },
async getUserInfo() { async getUserInfo() {

@ -9,7 +9,7 @@
--el-color-primary: #0BD7C6; --el-color-primary: #0BD7C6;
} }
.container-1420{ .container-1420{
width: 1420px; width: 375px;
margin: 0 auto; margin: 0 auto;
// background-color: #c2acac; // background-color: #c2acac;
} }
@ -62,3 +62,6 @@ img{
line-height: 30px; line-height: 30px;
} }
} }
.el-drawer__header {
margin-bottom: 0px !important;
}

@ -1 +1 @@
$base-container-width:1620px; $base-container-width:375px;

@ -12,7 +12,7 @@ const server = axios.create({
// 创建请求拦截器 // 创建请求拦截器
server.interceptors.request.use((config) => { server.interceptors.request.use((config) => {
const useuserStore = userStore(pinia) const useuserStore = userStore()
console.log(useuserStore.token,'1212'); console.log(useuserStore.token,'1212');
config.headers.Authorization = useuserStore.token config.headers.Authorization = useuserStore.token

@ -71,74 +71,7 @@
</ul> </ul>
</div> </div>
<!-- 新闻列表 --> <!-- 新闻列表 -->
<div
class="news-list"
:class="{
'light-blue-news': useThemeStore.currentTheme.name === '白蓝主题',
'light-purple-news': useThemeStore.currentTheme.name === '白紫主题',
}"
>
<div class="news-title">
<div class="top">
<div>新闻资讯</div>
<div @click="router.push('/news')">
<el-icon><ArrowRightBold /></el-icon>
</div>
</div>
<!-- <div class="bottom">30+项目登陆后报名</div> -->
</div>
<div class="newa-panel">
<div class="tab">
<div
:class="active === index ? 'item active gradient' : 'item'"
v-for="(item, index) in newList"
:key="index"
@click="toggleTab(item, index)"
>
{{ item.name }}
</div>
<div class="item" @click="router.push('/news')">更多</div>
</div>
<div class="newa-main">
<div
class="left"
v-if="useThemeStore.currentTheme.name === '默认主题' || useThemeStore.currentTheme.name === '暗夜主题'"
>
<img
:src="useThemeStore.isDark ? pkImage : newsImage"
alt=""
style="width: 100%; height: 100%"
/>
</div>
<div
class="right"
:class="{
'full-width': useThemeStore.currentTheme.name === '暗夜绿主题',
}"
>
<div class="title">{{ newInfo.name }}</div>
<div class="description">
<!-- 我是新闻描述,我是新闻描述,我是新闻描述 -->
</div>
<div class="newa-main-list">
<ul>
<li
v-for="item in childrenNewList"
:key="item.id"
@click="toNewsDetail(item.id)"
>
<div class="img" v-if="useThemeStore.currentTheme.name === '白蓝主题' || useThemeStore.currentTheme.name === '白紫主题'"><img src="../../assets/images/orange.png" alt=""></div>
<div class="info">
{{ item.title }}
</div>
<div class="time">{{ item.createTime }}</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 报名板块 --> <!-- 报名板块 -->
</div> </div>
</template> </template>
@ -244,11 +177,12 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 100px; // padding: 0 100px;
background-image: url('../../assets/images/banner1.png'); background-image: url('../../assets/images/banner1.png');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 0 20px;
&:not(.dark-layout):not(.light-blue-layout):not(.light-purple-layout) { &:not(.dark-layout):not(.light-blue-layout):not(.light-purple-layout) {
.banner-left { .banner-left {
@ -257,21 +191,21 @@ export default {
width: 100%; width: 100%;
text-align: center; text-align: center;
.title { .title {
font-size: 50px; font-size: 32px;
font-weight: 600; font-weight: 600;
color: var(--text-color); color: var(--text-color);
margin-bottom: 37px; margin-bottom: 37px;
line-height: 65px; line-height: 40px;
margin-top: 20px; margin-top: 20px;
} }
.description { .description {
width: 1074px; // width: 1074px;
text-align: center; text-align: center;
font-size: 20px; font-size: 14px;
color: var(--text-color); color: var(--text-color);
opacity: 0.65; opacity: 0.65;
line-height: 32px; line-height: 28px;
margin-bottom: 50px; margin-bottom: 50px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -302,12 +236,12 @@ export default {
} }
} }
.application { .application {
width: 272px; width: 160px;
height: 64px; height: 50px;
text-align: center; text-align: center;
line-height: 64px; line-height: 50px;
border-radius: 10px; border-radius: 10px;
font-size: 24px; font-size: 20px;
cursor: pointer; cursor: pointer;
color: #fff; color: #fff;
background: var(--gradient-color); background: var(--gradient-color);
@ -367,17 +301,17 @@ export default {
} }
.application { .application {
width: 272px; width: 160px;
height: 64px; height: 50px;
text-align: center; text-align: center;
line-height: 64px; line-height: 50px;
border-radius: 10px; border-radius: 10px;
font-size: 24px; font-size: 20px;
color: #fff;
cursor: pointer; cursor: pointer;
color: #fff;
background: var(--gradient-color); background: var(--gradient-color);
transition: all 0.3s; transition: all 0.3s;
margin: 0; margin: 0 auto;
&:hover { &:hover {
transform: translateY(-2px); transform: translateY(-2px);
@ -469,17 +403,17 @@ export default {
} }
.application { .application {
width: 272px; width: 160px;
height: 64px; height: 50px;
text-align: center; text-align: center;
line-height: 64px; line-height: 50px;
border-radius: 10px; border-radius: 10px;
font-size: 24px; font-size: 20px;
color: #fff;
cursor: pointer; cursor: pointer;
color: #fff;
background: var(--gradient-color); background: var(--gradient-color);
transition: all 0.3s; transition: all 0.3s;
margin: 0; margin: 0 auto;
&:hover { &:hover {
transform: translateY(-2px); transform: translateY(-2px);
@ -574,7 +508,7 @@ export default {
} }
.application { .application {
width: 272px; width: 160px;
height: 64px; height: 64px;
text-align: center; text-align: center;
line-height: 64px; line-height: 64px;

@ -1,16 +1,20 @@
<template> <template>
<div class="login-content"> <div class="login-content">
<div class="logo">
<img src="../../assets/images/logo.png" alt="" />
</div>
<div class="login-form" v-if="status"> <div class="login-form" v-if="status">
<div class="login-title">登录</div> <!-- <div class="login-title">登录</div> -->
<div class="form"> <div class="form">
<el-form :model="form" label-width="80"> <el-form :model="form" label-width="80">
<el-form-item label="账号"> <el-form-item label="账号">
<el-input v-model="form.account" style="height: 0.2344rem" /> <el-input v-model="form.account" style="height: 1.25rem" />
</el-form-item> </el-form-item>
<el-form-item label="密码"> <el-form-item label="密码">
<el-input <el-input
v-model="form.password" v-model="form.password"
style="height: 0.2344rem" style="height: 1.25rem"
type="password" type="password"
show-password show-password
/> />
@ -19,7 +23,7 @@
<div class="captcha"> <div class="captcha">
<el-input <el-input
v-model="form.captcha" v-model="form.captcha"
style="height: 0.2344rem" style="height: 1.25rem"
maxlength="4" maxlength="4"
/> />
<div class="code" @click="getcodeinfo"> <div class="code" @click="getcodeinfo">
@ -133,20 +137,32 @@ const backLoginEvent = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.login-content { .login-content {
width: 100%; width: 100%;
height: 100vh; min-height: 100vh;
background: url('../../assets/images/bg.png') no-repeat; background: url('../../assets/images/bg.png') no-repeat;
background-size: cover; background-size: cover;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 20px 10px;
.logo{
width: 70px;
height: 70px;
img{
width: 100%;
height: 100%;
}
}
.login-form { .login-form {
width: 640px; width: 300px;
height: 820px; // height: 300px;
margin-top: 20px;
border-radius: 15px; border-radius: 15px;
background-color: #ffffff1a !important; background-color: #ffffff1a !important;
padding: 70px 60px; // padding: 70px 60px;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);
padding-bottom: 20px;
.login-title { .login-title {
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
@ -176,7 +192,7 @@ const backLoginEvent = () => {
} }
} }
.submit { .submit {
width: 399px; width:70px;
height: 50px; height: 50px;
text-align: center; text-align: center;
line-height: 50px; line-height: 50px;
@ -200,30 +216,36 @@ const backLoginEvent = () => {
} }
} }
} }
.btn { .btn {
display: flex; width: 100%;
justify-content: space-between; display: flex;
margin-top: 45px; flex-direction: column;
div { justify-content: space-between;
width: 210px; margin-top: 15px;
height: 42px; padding: 0 10px;
text-align: center; div {
line-height: 42px; width: 100%;
font-size: 14px; height: 35px;
cursor: pointer; text-align: center;
border-radius: 10px; line-height: 35px;
} font-size: 14px;
div:nth-child(1) { cursor: pointer;
border: 1px solid #dbdbdb; border-radius: 10px;
color: #3c3c3c; }
} div:nth-child(1) {
div:nth-child(2) { border: 1px solid #dbdbdb;
color: #fff; color: #3c3c3c;
} }
div:nth-child(2) {
color: #fff;
margin-top: 10px;
}
} }
:deep(.el-form-item) { :deep(.el-form-item) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 10px;
} }
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
box-shadow: none; box-shadow: none;
@ -231,4 +253,5 @@ const backLoginEvent = () => {
:deep(.el-form-item__label) { :deep(.el-form-item__label) {
justify-content: start; justify-content: start;
} }
</style> </style>

@ -1,6 +1,6 @@
<template> <template>
<div class="login-form"> <div class="login-form">
<div class="login-title">注册</div> <!-- <div class="login-title">注册</div> -->
<div class="form"> <div class="form">
<el-form :model="form" ref="ruleFormRef" label-width="0" :rules="rules"> <el-form :model="form" ref="ruleFormRef" label-width="0" :rules="rules">
<!-- <el-form-item> <!-- <el-form-item>
@ -26,6 +26,7 @@
</el-form-item> --> </el-form-item> -->
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
style="width: 100%; height: 1.0938rem"
v-model="form.username" v-model="form.username"
:prefix-icon="User" :prefix-icon="User"
placeholder="账号" placeholder="账号"
@ -33,6 +34,7 @@
</el-form-item> </el-form-item>
<el-form-item prop="realname"> <el-form-item prop="realname">
<el-input <el-input
style="width: 100%; height: 1.0938rem"
v-model="form.realname" v-model="form.realname"
:prefix-icon="User" :prefix-icon="User"
placeholder="姓名" placeholder="姓名"
@ -40,6 +42,7 @@
</el-form-item> </el-form-item>
<el-form-item prop="workno"> <el-form-item prop="workno">
<el-input <el-input
style="width: 100%; height: 1.0938rem"
v-model="form.workno" v-model="form.workno"
placeholder="工号/学号" placeholder="工号/学号"
:prefix-icon="Iphone" :prefix-icon="Iphone"
@ -52,17 +55,48 @@
:options="options" :options="options"
style="width: 100%; height: 0.2344rem" style="width: 100%; height: 0.2344rem"
/> --> /> -->
<el-cascader <!-- <el-cascader
:props="props" :props="props"
style="width: 100%; height: 0.2344rem" style="width: 100%; height: 1.0938rem"
v-model="form.department" v-model="form.department"
:show-all-levels="false" :show-all-levels="false"
@change="handleChange" @change="handleChange"
ref="cascader" ref="cascader"
/> /> -->
<!-- <el-select
v-model="form.department"
placeholder="Select"
size="large"
style="width: 100%; height: 1.0938rem"
>
<el-option>
<el-tree
style="max-width: 600px;height: 300px"
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
/>
</el-option>
</el-select> -->
<div>
<el-input
style="width: 70%; height: 1.0938rem"
placeholder="选择部门"
v-model="form.departentName"
:prefix-icon="Iphone"
></el-input>
<el-button
type="primary"
style="width: 29%; height: 1.0938rem; font-size: 12px"
@click="selectChange"
>
选择部门
</el-button>
</div>
</el-form-item> </el-form-item>
<el-form-item prop="mobile"> <el-form-item prop="mobile">
<el-input <el-input
style="width: 100%; height: 1.0938rem"
placeholder="手机号码" placeholder="手机号码"
v-model="form.mobile" v-model="form.mobile"
:prefix-icon="Iphone" :prefix-icon="Iphone"
@ -70,6 +104,7 @@
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input <el-input
style="width: 100%; height: 1.0938rem"
placeholder="密码" placeholder="密码"
v-model="form.password" v-model="form.password"
:prefix-icon="Lock" :prefix-icon="Lock"
@ -79,6 +114,7 @@
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-input <el-input
style="width: 100%; height: 1.0938rem"
placeholder="确认密码" placeholder="确认密码"
v-model="form.confirmPassword" v-model="form.confirmPassword"
:prefix-icon="Lock" :prefix-icon="Lock"
@ -95,7 +131,7 @@
<div class="captcha"> <div class="captcha">
<el-input <el-input
v-model="form.smscode" v-model="form.smscode"
style="height: 0.2344rem" style="height: 1.25rem"
maxlength="4" maxlength="4"
:prefix-icon="Lock" :prefix-icon="Lock"
/> />
@ -111,6 +147,25 @@
</div> </div>
</div> </div>
</div> </div>
<el-drawer
v-model="drawer"
title="选择部门"
direction="btt"
:before-close="handleClose"
size="50%"
>
<el-tree
style="max-width: 600px; height: 300px"
:props="defaultProps"
@node-click="handleNodeClick"
:load="lazyLoad"
lazy
default-expand-all
:expand-on-click-node="false"
empty-text="暂无"
node-key="value"
/>
</el-drawer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -119,13 +174,28 @@ import { User, Iphone, Lock } from '@element-plus/icons-vue'
import { getFaculties } from '@/api/race' import { getFaculties } from '@/api/race'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { getCode, sturegister } from '@/api/user' import { getCode, sturegister } from '@/api/user'
import { ca } from 'element-plus/es/locales.mjs'
const drawer = ref(false)
const handleNodeClick = (data: any) => {
if (!data.leaf) {
console.log(data)
form.department = data.value
form.departentName = data.label
drawer.value = false
}
}
const defaultProps = {
children: 'children',
label: 'label',
}
const $emits = defineEmits(['backLogin']) const $emits = defineEmits(['backLogin'])
const form = reactive<any>({ const form = reactive<any>({
username: '', username: '',
realname: '', realname: '',
workno: '', workno: '',
department: '', department: '',
departentName:'',
mobile: '', mobile: '',
password: '', password: '',
confirmPassword: '' /*, policy: false*/, confirmPassword: '' /*, policy: false*/,
@ -190,43 +260,37 @@ const getFacultiesList = async (data: any) => {
FacultiesList.value = res.result FacultiesList.value = res.result
} }
// //
const props = {
lazy: true,
checkStrictly: true,
emitPath: false,
isLeaf: 'isLeaf',
async lazyLoad(node: any, resolve: any) { const lazyLoad = async (node: any, resolve: any) => {
// console.log(node, '1212') // console.log(node, '1212')
// console.log(node.data.isLeaf) // console.log(node.data.isLeaf)
// if (node.data.isLeaf) { // if (node.data.isLeaf) {
// console.log(1111) // console.log(1111)
// return resolve([]) // return resolve([])
// } // }
await getFacultiesList({ await getFacultiesList({
primaryKey: 'key', primaryKey: 'key',
pid: node.value, pid: node.data.value,
}) })
if (node.level == 0 || node.level == 1) { if (node.level == 0 || node.level == 1) {
const nodes = FacultiesList.value.map((item: any) => ({ const nodes = FacultiesList.value.map((item: any) => ({
value: item.id, value: item.id,
label: item.title, label: item.title,
disabled: true, disabled: true,
leaf: item.isLeaf, leaf: !item.isLeaf,
})) }))
resolve(nodes) resolve(nodes)
} else { } else {
const nodes = FacultiesList.value.map((item: any) => ({ const nodes = FacultiesList.value.map((item: any) => ({
value: item.id, value: item.id,
label: item.title, label: item.title,
leaf: item.isLeaf, leaf: !item.isLeaf,
})) }))
resolve(nodes) resolve(nodes)
} }
},
} }
const cascader = ref() const cascader = ref()
const handleChange = (e: any) => { const handleChange = (e: any) => {
@ -276,15 +340,13 @@ const ragistered = async () => {
} catch (error: any) { } catch (error: any) {
console.log(error, 'error') console.log(error, 'error')
// //
if(error.hasOwnProperty('data')){ if (error.hasOwnProperty('data')) {
ElMessage.warning(error.data.message) ElMessage.warning(error.data.message)
} else {
}else{ for (const key in error) {
for (const key in error) { ElMessage.warning(`${KeyValue[key]}${error[key][0].message}`)
ElMessage.warning(`${KeyValue[key]}${error[key][0].message}`) }
}
} }
} }
} }
const codeUrl = ref('') const codeUrl = ref('')
@ -296,23 +358,36 @@ const getcodeinfo = async () => {
console.log(codeUrl.value) console.log(codeUrl.value)
} }
getcodeinfo() getcodeinfo()
//
const selectChange = (e: any) => {
getFacultiesList({
primaryKey: 'key',
})
drawer.value = true
}
const handleClose = () => {
drawer.value = false
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.login-form { .login-form {
width: 640px; // width: 640px;
height: 820px; // height: 820px;
border-radius: 15px; border-radius: 15px;
background-color: #ffffff1a !important; background-color: #ffffff1a !important;
padding: 70px 60px; // padding: 70px 60px;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);
margin-top: 20px;
padding-bottom: 20px;
.login-title { .login-title {
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
} }
.form { .form {
margin-top: 45px; // margin-top: 45px;
padding: 0 40px; padding: 0 40px;
.captcha { .captcha {
width: 100%; width: 100%;
@ -325,7 +400,7 @@ getcodeinfo()
top: 0; top: 0;
right: 0; right: 0;
width: 105px; width: 105px;
height: 100%; height: 40px;
// background-color: pink; // background-color: pink;
display: flex; display: flex;
align-items: center; align-items: center;
@ -349,14 +424,17 @@ getcodeinfo()
} }
} }
.btn { .btn {
width: 100%;
display: flex; display: flex;
flex-direction: column;
justify-content: space-between; justify-content: space-between;
margin-top: 45px; margin-top: 15px;
padding: 0 10px;
div { div {
width: 210px; width: 100%;
height: 42px; height: 35px;
text-align: center; text-align: center;
line-height: 42px; line-height: 35px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
border-radius: 10px; border-radius: 10px;
@ -367,6 +445,7 @@ getcodeinfo()
} }
div:nth-child(2) { div:nth-child(2) {
color: #fff; color: #fff;
margin-top: 10px;
} }
} }
} }
@ -382,4 +461,7 @@ getcodeinfo()
height: 100%; height: 100%;
} }
} }
:deep(.el-drawer__header) {
margin-bottom: 0px !important;
}
</style> </style>

@ -10,22 +10,23 @@
<div class="content"> <div class="content">
{{ obj.info }} {{ obj.info }}
</div> </div>
<div class="time"><div>{{ obj.publishTime }}</div> <div style="margin-left: 20px;">发布人{{ obj.createBy }}</div></div> <div class="time"><div>{{ obj.publishTime }}</div></div>
</div> </div>
<div class="right"> <div class="right">
<img :src="setImageUrl(obj.comimg)" alt="" v-default-image/> <img :src="setImageUrl(obj.comimg)" alt="" v-default-image/>
</div> </div>
</div> </div>
<el-empty description="无新闻" v-if="item.cmsArticleList.length === 0" style="height: 200px;"/> <el-empty description="无新闻" :image-size="100" v-if="item.cmsArticleList.length === 0" style="height: 100px;"/>
</div> </div>
</div> </div>
</div> </div>
<!-- 右侧栏目 --> <!-- 右侧栏目 -->
</div> </div>
<div class="right-coulom"> <!-- <div class="right-coulom">
<div :class="active === index ? 'item active' : 'item' " @click="scrollById(index)" v-for="(item,index) in columnList" :key="item">{{ item }}</div> <div :class="active === index ? 'item active' : 'item' " @click="scrollById(index)" v-for="(item,index) in columnList" :key="item">{{ item }}</div>
</div> </div>
<div class="colum-btn"><el-button>切换栏目</el-button></div> -->
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
@ -62,7 +63,7 @@ const setImageUrl = (url: string) => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.container { .container {
width: 1200px; // width: 1200px;
margin: auto; margin: auto;
margin-top: 100px; margin-top: 100px;
.news-list { .news-list {
@ -71,6 +72,7 @@ const setImageUrl = (url: string) => {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
background-color: var(--card-bg-color); background-color: var(--card-bg-color);
border-radius: 5px; border-radius: 5px;
.item { .item {
.news-title { .news-title {
font-size: 24px; font-size: 24px;
@ -90,12 +92,16 @@ const setImageUrl = (url: string) => {
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
.left { .left {
width: 1000px; width: 200px;
.title { .title {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: var(--text-color); color: var(--text-color);
transition: color 0.3s; transition: color 0.3s;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.content { .content {
margin-top: 8px; margin-top: 8px;
@ -140,8 +146,8 @@ const setImageUrl = (url: string) => {
} }
.right-coulom { .right-coulom {
position: fixed; position: fixed;
left: 200px; left: 0px;
top: 100px; top: 80px;
z-index: 999; z-index: 999;
width: 150px; width: 150px;
background-color: var(--card-bg-color); background-color: var(--card-bg-color);

@ -1,9 +1,9 @@
<!-- 比赛项目名称页面 --> <!-- 比赛项目名称页面 -->
<template> <template>
<div class="fill"></div> <div class="fill"></div>
<div class="banner"> <!-- <div class="banner">
<img src="../../assets/images/banner.jpg" alt="" /> <img src="../../assets/images/banner.jpg" alt="" />
</div> </div> -->
<div class="project-name"> <div class="project-name">
<!-- 面包屑 --> <!-- 面包屑 -->
@ -119,17 +119,17 @@ getData()
} }
.project-name { .project-name {
margin: 0 auto; // margin: 0 auto;
width: $base-container-width; width: $base-container-width;
padding: 20px;
.bread-box { .bread-box {
margin: 40px 0; margin: 10px 0;
} }
.content { .content {
.title { .title {
text-align: center; text-align: center;
font-size: 42px; font-size: 32px;
color: #333333; color: #333333;
margin: 20px 0; margin: 20px 0;
} }
@ -138,11 +138,11 @@ getData()
font-size: 18px; font-size: 18px;
color: #666666; color: #666666;
text-indent: 2em; text-indent: 2em;
min-height: 200px; min-height: 100px;
} }
.foot { .foot {
margin: 120px 0 20px; margin: 20px 0 20px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -160,12 +160,12 @@ getData()
--color2: #42d9ac; --color2: #42d9ac;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
width: 270px; width: 100px;
height: 50px; height: 30px;
border-radius: 45px; border-radius: 45px;
border: none; border: none;
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 14px;
color: #ffffff; color: #ffffff;
background: linear-gradient(to right, var(--color1), var(--color2)); background: linear-gradient(to right, var(--color1), var(--color2));
box-shadow: 7px 7px 22px -10px rgba(0, 0, 0, 0.22); box-shadow: 7px 7px 22px -10px rgba(0, 0, 0, 0.22);
@ -181,12 +181,12 @@ getData()
--color2: #c6d4d4; --color2: #c6d4d4;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
width: 270px; width: 100px;
height: 50px; height: 30px;
border-radius: 45px; border-radius: 45px;
border: none; border: none;
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 14px;
color: #ffffff; color: #ffffff;
background: linear-gradient(to right, var(--color1), var(--color2)); background: linear-gradient(to right, var(--color1), var(--color2));
box-shadow: 7px 7px 22px -10px rgba(0, 0, 0, 0.22); box-shadow: 7px 7px 22px -10px rgba(0, 0, 0, 0.22);

@ -6,7 +6,7 @@
<el-card> <el-card>
<template #header> <template #header>
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<el-breadcrumb> <el-breadcrumb style="display: flex;align-items: center;">
<el-breadcrumb-item <el-breadcrumb-item
v-for="item in Route.matched" v-for="item in Route.matched"
:key="item.path" :key="item.path"
@ -28,7 +28,7 @@
<div class="left"> <div class="left">
<el-image <el-image
:src="setImageUrl(raceInfo.compLogo)" :src="setImageUrl(raceInfo.compLogo)"
style="width: 1.5625rem; height: 100%" style="width: 1.5625rem; height: 1.5625rem"
:preview-src-list="[ :preview-src-list="[
setImageUrl(raceInfo.compLogo), setImageUrl(raceInfo.compLogo),
setImageUrl(raceInfo.compImg), setImageUrl(raceInfo.compImg),
@ -41,11 +41,11 @@
<div class="label">比赛名称:</div> <div class="label">比赛名称:</div>
<div class="text">{{ raceInfo.compName }}</div> <div class="text">{{ raceInfo.compName }}</div>
</li> </li>
<li style="width: 40%"> <li>
<div class="label">负责人:</div> <div class="label">负责人:</div>
<div class="text">{{ raceInfo.createBy }}</div> <div class="text">{{ raceInfo.createBy }}</div>
</li> </li>
<li style="width: 60%"> <li >
<div class="label">负责部门:</div> <div class="label">负责部门:</div>
<div class="text">{{ raceInfo.comporderc }}</div> <div class="text">{{ raceInfo.comporderc }}</div>
</li> </li>
@ -94,32 +94,10 @@
</div> </div>
</el-card> </el-card>
</div> </div>
<div class="right-history">
<el-card style="padding: 0">
<div class="title">历史比赛</div>
<div class="description">往年历史赛事</div>
<el-scrollbar height="650px">
<ul>
<li v-for="item in historyRaceList" :key="item.id" >
<div class="year">2024年度</div>
<div class="name">{{ item.name }}</div>
<div class="time">
报名时间:{{ item.starttime }} - {{ item.endtime }}
</div>
<!-- <div class="go-to" @click="goToCompetition(item.id)">
前往查看
</div> -->
<div class="icon">
<img src="../../assets/images/编组.png" alt="" srcset="" />
</div>
</li>
</ul>
</el-scrollbar>
</el-card>
</div>
</div> </div>
<!-- 年度比赛列表 --> <!-- 年度比赛列表 -->
<div style="margin-top: 30px; font-size: 24px; font-weight: 600"> <div style="margin-top: .8rem; font-size: .64rem; font-weight: 600;margin-left: .5333rem;">
年度比赛列表: 年度比赛列表:
</div> </div>
<el-card v-if="reacProjectList.length === 0" style="margin-top: 20px"> <el-card v-if="reacProjectList.length === 0" style="margin-top: 20px">
@ -219,7 +197,7 @@ const reacProjectList = ref<any>([])
}) })
const getRaceProjectListEvent = async () => { const getRaceProjectListEvent = async () => {
loading.value = true loading.value = true
const res: any = await getYearRaceList(page.value) const res: any = await getYearRaceList({...page.value,individual:true})
console.log(res) console.log(res)
reacProjectList.value = res.result.records reacProjectList.value = res.result.records
page.value.total = res.result.total page.value.total = res.result.total
@ -317,8 +295,8 @@ const scrollToPosition = () => {
} }
.race-list { .race-list {
width: 100%; width: 100%;
display: grid; // display: grid;
grid-template-columns: repeat(4, 1fr); // grid-template-columns: repeat(4, 1fr);
.item { .item {
width: 340px; width: 340px;
height: 360px; height: 360px;
@ -387,10 +365,10 @@ const scrollToPosition = () => {
margin-top: 30px; margin-top: 30px;
min-height: 750px; min-height: 750px;
.left-info { .left-info {
flex: 1; width: 100%;
} }
.right-history { .right-history {
width: 300px; // width: 300px;
margin-left: 40px; margin-left: 40px;
.title { .title {
color: var(--text-color); color: var(--text-color);
@ -474,20 +452,26 @@ const scrollToPosition = () => {
.race-info { .race-info {
.top { .top {
display: flex; display: flex;
height: 200px; flex-direction: column;
align-items: center;
// height: 200px;
.right { .right {
margin-left: 25px; display: flex;
flex: 1; felx-direction: column;
margin-top: 20px;
// margin-left: 25px;
// flex: 1;
ul { ul {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; // display: flex;
flex-wrap: wrap; // flex-wrap: wrap;
align-items: center; align-items: center;
padding: 5px; padding: 5px;
li { li {
width: 50%; width: 100%;
display: flex; display: flex;
margin: 10px 0;
.label { .label {
font-size: 16px; font-size: 16px;
color: var(--text-color); color: var(--text-color);
@ -500,16 +484,7 @@ const scrollToPosition = () => {
color: var(--text-color); color: var(--text-color);
} }
} }
li:first-child {
align-items: center;
width: 100%;
.text {
font-size: 26px;
}
}
li:nth-child(3n) {
width: 33%;
}
} }
} }
} }

@ -18,7 +18,7 @@
<div class="registration-layout"> <div class="registration-layout">
<div class="top"> <div class="top">
<!-- 比赛信息 --> <!-- 比赛信息 -->
<el-card class="com"> <el-card class="com" style="width:10rem">
<div class="title">年度比赛信息</div> <div class="title">年度比赛信息</div>
<div class="content"> <div class="content">
<div class="card-annual padding"> <div class="card-annual padding">
@ -47,9 +47,9 @@
</div> </div>
</el-card> </el-card>
</div> </div>
<el-card> <el-card style="width:10rem">
<div> <div>
<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon label-width="auto" <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="auto"
class="demo-ruleForm"> class="demo-ruleForm">
<el-form-item label="年度比赛"> <el-form-item label="年度比赛">
<el-input v-model="ruleForm.objName" type="text" disabled /> <el-input v-model="ruleForm.objName" type="text" disabled />
@ -60,7 +60,7 @@
</el-form> </el-form>
</div> </div>
</el-card> </el-card>
<el-card class="center"> <el-card class="center" style="width:10rem">
<div class="personage-info"> <div class="personage-info">
<div class="head"> <div class="head">
<div class="title">个人信息</div> <div class="title">个人信息</div>
@ -351,18 +351,19 @@ getTopicListApi()*/
width: 100%; width: 100%;
height: 289; height: 289;
background: linear-gradient(90deg, #ffffff 0%, #f0f8ff 100%); background: linear-gradient(90deg, #ffffff 0%, #f0f8ff 100%);
padding: 21px 0 37px 225px; // padding: 21px 0 37px 225px;
padding: 0 20px;
.box { .box {
width: 1515px;
height: 231px; height: 231px;
display: flex; display: flex;
gap: 104px; // gap: 104px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.title-box { .title-box {
width: 1151px; // width: 1151px;
.title { .title {
height: 59px; height: 59px;
@ -370,24 +371,27 @@ getTopicListApi()*/
Open Sans, Open Sans,
Open Sans; Open Sans;
font-weight: bold; font-weight: bold;
font-size: 42px; font-size: 32px;
color: #333333; color: #333333;
line-height: 59px; line-height: 59px;
} }
.text { .text {
width: 100%;
margin-top: 20px; margin-top: 20px;
font-family: // font-family:
Open Sans, // Open Sans,
Open Sans; // Open Sans;
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 12px;
color: #666666; color: #666666;
line-height: 23px; line-height: 23px;
} }
} }
.img-box { .img-box {
// flex: 1;
img { img {
object-fit: cover; object-fit: cover;
} }
@ -414,14 +418,13 @@ getTopicListApi()*/
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 25px 0; margin: 25px 0;
height: 300px; // height: 300px;
.com { .com {
width: 100%; width: 100%;
height: 300px; // height: 300px;
border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px;
padding-top: 22px;
padding-left: 32px;
.title { .title {
height: 28px; height: 28px;
@ -437,8 +440,7 @@ getTopicListApi()*/
.content { .content {
display: flex; // display: flex;
gap: 22px;
.card-annual { .card-annual {
&.padding { &.padding {
@ -464,7 +466,7 @@ getTopicListApi()*/
margin-top: 13px; margin-top: 13px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 28px; // gap: 28px;
.text { .text {
width: 202px; width: 202px;
@ -484,6 +486,14 @@ getTopicListApi()*/
} }
.right { .right {
width: 340px;
// height: 182px;
// background: linear-gradient(90deg, #21aca5 0%, #42d9ac99 100%);
border: 1px solid #d9d9d9;
margin-top: 10px;
border-radius: 8px;
overflow: hidden;
padding: 20px;
.info-box { .info-box {
width: 100%; width: 100%;
@ -579,7 +589,7 @@ getTopicListApi()*/
position: relative; position: relative;
.personage-info { .personage-info {
margin: 30px; margin: 10px;
// width: 780px; // width: 780px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -617,7 +627,7 @@ getTopicListApi()*/
} }
width: 176px; width: 176px;
height: 60px; height: 40px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@ -648,30 +658,32 @@ getTopicListApi()*/
} }
.bottom { .bottom {
margin: 46px 0; width: 10rem;
// margin: 46px 0;
height: 70px; height: 70px;
display: flex; display: flex;
gap: 106px; // flex-direction: column;
// gap: 106px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 20px;
.btn { .btn {
--color1: #fff4ce; --color1: #fff4ce;
--color2: #ff6b6b; --color2: #ff6b6b;
width: 387px; width: 33%;
height: 69px; height: 35px;
border-radius: 69px; border-radius: 69px;
border: none; border: none;
font-family: font-family:
Microsoft YaHei UI, Microsoft YaHei UI,
Microsoft YaHei UI; Microsoft YaHei UI;
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 14px;
color: #ffffff; color: #ffffff;
background: linear-gradient(to right, var(--color1), var(--color2)); background: linear-gradient(to right, var(--color1), var(--color2));
box-shadow: 7px 7px 22px -10px rgba(0, 0, 0, 0.22); box-shadow: 7px 7px 22px -10px rgba(0, 0, 0, 0.22);
transition: all 0.2s; transition: all 0.2s;
// margin-top: 20px;
&:hover { &:hover {
transform: scale(1.1); transform: scale(1.1);
} }

@ -64,7 +64,7 @@
v-model="dialogVisible" v-model="dialogVisible"
v-if="dialogVisible" v-if="dialogVisible"
title="上传证书" title="上传证书"
width="25%" width="90%"
:before-close="handleClose" :before-close="handleClose"
> >
<el-form label-width="80" style="padding-right: 30px"> <el-form label-width="80" style="padding-right: 30px">

@ -3,7 +3,7 @@
<h1 class="title">个人中心</h1> <h1 class="title">个人中心</h1>
<div class="desc">{{ userInfo.realname }}欢迎回来~</div> <div class="desc">{{ userInfo.realname }}欢迎回来~</div>
<div class="icon"> <div class="icon">
<SvgIcon name="荣誉资质" width="300" height="300" /> <SvgIcon name="荣誉资质" width="150" height="150" />
</div> </div>
</div> </div>
<div class="container-1420"> <div class="container-1420">
@ -102,7 +102,7 @@
v-model="dialogVisible" v-model="dialogVisible"
v-if="dialogVisible" v-if="dialogVisible"
title="编辑" title="编辑"
width="35%" width="90%"
:before-close="handleClose" :before-close="handleClose"
> >
<el-form :model="form":rules="rules" ref="ruleFormRef" label-width="80" style="padding-right: 30px"> <el-form :model="form":rules="rules" ref="ruleFormRef" label-width="80" style="padding-right: 30px">
@ -328,7 +328,8 @@ const setImageUrl = (url: string) => {
background-color: #fff; background-color: #fff;
background: linear-gradient(90deg, #ffffff 0%, #f0f8ff 100%); background: linear-gradient(90deg, #ffffff 0%, #f0f8ff 100%);
margin-top: 80px; margin-top: 80px;
padding: 20px 320px; // padding: 20px 320px;
padding-left: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -342,7 +343,7 @@ const setImageUrl = (url: string) => {
} }
.icon { .icon {
position: absolute; position: absolute;
right: 300px; right: .5333rem;
} }
} }
.top { .top {
@ -488,7 +489,7 @@ const setImageUrl = (url: string) => {
} }
.user-info-main { .user-info-main {
width: 100%; width: 100%;
height: 300px; // height: 300px;
display: flex; display: flex;
.left { .left {
flex: 1; flex: 1;
@ -529,7 +530,7 @@ const setImageUrl = (url: string) => {
} }
width: 165px; width: 165px;
height: 80px; height: 50px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;

@ -7,7 +7,7 @@ import postcssPluginPx2rem from 'postcss-plugin-px2rem' //引入插件
//配置参数 //配置参数
const px2remOptions = { const px2remOptions = {
rootValue: 192, //换算基数, 默认100 ,也就是1440px ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多少px了 rootValue: 37.5, //换算基数, 默认100 ,也就是1440px ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多少px了
unitPrecision: 5, //允许REM单位增长到的十进制数字,其实就是精度控制 unitPrecision: 5, //允许REM单位增长到的十进制数字,其实就是精度控制
// propWhiteList: [], // 默认值是一个空数组,这意味着禁用白名单并启用所有属性。 // propWhiteList: [], // 默认值是一个空数组,这意味着禁用白名单并启用所有属性。
// propBlackList: [], // 黑名单 // propBlackList: [], // 黑名单

Loading…
Cancel
Save