wangchangjiu/xys-FTA-Ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

系统登录页及模块详情页调整

Browse Source
This commit is contained in:
lc 2024-06-24 17:41:53 +08:00
parent f03421d38b
commit dece66b5bf
9 changed files with 139 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/imgs/login-bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 KiB

3
src/locales/zh-CN.ts
View File

@ -401,7 +401,8 @@ export default {
}, },
login: { login: {
backSignIn: '返回', backSignIn: '返回',
signInFormTitle: '登录', // signInFormTitle: '登录',
signInFormTitle: '江苏自贸区连云港片区大宗贸易风险联控平台',
ssoFormTitle: '三方授权', ssoFormTitle: '三方授权',
mobileSignInFormTitle: '手机登录', mobileSignInFormTitle: '手机登录',
qrSignInFormTitle: '二维码登录', qrSignInFormTitle: '二维码登录',

2
src/router/modules/remaining.ts
View File

@ -583,7 +583,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
children: [ children: [
{ {
path: 'enterprise/create', path: 'enterpriseinformation/create',
component: () => import('@/views/fta/enterpriseinformation/create.vue'), component: () => import('@/views/fta/enterpriseinformation/create.vue'),
name: 'FtaEnterpriseCreate', name: 'FtaEnterpriseCreate',
meta: { meta: {

117
src/views/Home/Index.vue
View File

@ -58,39 +58,39 @@
<el-row class="mt-8px" :gutter="8" justify="space-between"> <el-row class="mt-8px" :gutter="8" justify="space-between">
<el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-8px"> <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-8px">
<el-card shadow="never"> <!-- <el-card shadow="never">-->
<template #header> <!-- <template #header>-->
<div class="h-3 flex justify-between"> <!-- <div class="h-3 flex justify-between">-->
<span>{{ t('workplace.project') }}</span> <!-- <span>{{ t('workplace.project') }}</span>-->
<el-link type="primary" :underline="false">{{ t('action.more') }}</el-link> <!-- <el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>-->
</div> <!-- </div>-->
</template> <!-- </template>-->
<el-skeleton :loading="loading" animated> <!-- <el-skeleton :loading="loading" animated>-->
<el-row> <!-- <el-row>-->
<el-col <!-- <el-col-->
v-for="(item, index) in projects" <!-- v-for="(item, index) in projects"-->
:key="`card-${index}`" <!-- :key="`card-${index}`"-->
:xl="8" <!-- :xl="8"-->
:lg="8" <!-- :lg="8"-->
:md="8" <!-- :md="8"-->
:sm="24" <!-- :sm="24"-->
:xs="24" <!-- :xs="24"-->
> <!-- >-->
<el-card shadow="hover"> <!-- <el-card shadow="hover">-->
<div class="flex items-center"> <!-- <div class="flex items-center">-->
<Icon :icon="item.icon" :size="25" class="mr-8px" /> <!-- <Icon :icon="item.icon" :size="25" class="mr-8px" />-->
<span class="text-16px">{{ item.name }}</span> <!-- <span class="text-16px">{{ item.name }}</span>-->
</div> <!-- </div>-->
<div class="mt-16px text-14px text-gray-400">{{ t(item.message) }}</div> <!-- <div class="mt-16px text-14px text-gray-400">{{ t(item.message) }}</div>-->
<div class="mt-16px flex justify-between text-12px text-gray-400"> <!-- <div class="mt-16px flex justify-between text-12px text-gray-400">-->
<span>{{ item.personal }}</span> <!-- <span>{{ item.personal }}</span>-->
<span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span> <!-- <span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>-->
</div> <!-- </div>-->
</el-card> <!-- </el-card>-->
</el-col> <!-- </el-col>-->
</el-row> <!-- </el-row>-->
</el-skeleton> <!-- </el-skeleton>-->
</el-card> <!-- </el-card>-->
<el-card shadow="never" class="mt-8px"> <el-card shadow="never" class="mt-8px">
<el-skeleton :loading="loading" animated> <el-skeleton :loading="loading" animated>
@ -114,25 +114,25 @@
</el-card> </el-card>
</el-col> </el-col>
<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px"> <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
<el-card shadow="never"> <!-- <el-card shadow="never">-->
<template #header> <!-- <template #header>-->
<div class="h-3 flex justify-between"> <!-- <div class="h-3 flex justify-between">-->
<span>{{ t('workplace.shortcutOperation') }}</span> <!-- <span>{{ t('workplace.shortcutOperation') }}</span>-->
</div> <!-- </div>-->
</template> <!-- </template>-->
<el-skeleton :loading="loading" animated> <!-- <el-skeleton :loading="loading" animated>-->
<el-row> <!-- <el-row>-->
<el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-8px"> <!-- <el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-8px">-->
<div class="flex items-center"> <!-- <div class="flex items-center">-->
<Icon :icon="item.icon" class="mr-8px" /> <!-- <Icon :icon="item.icon" class="mr-8px" />-->
<el-link type="default" :underline="false" @click="setWatermark(item.name)"> <!-- <el-link type="default" :underline="false" @click="setWatermark(item.name)">-->
{{ item.name }} <!-- {{ item.name }}-->
</el-link> <!-- </el-link>-->
</div> <!-- </div>-->
</el-col> <!-- </el-col>-->
</el-row> <!-- </el-row>-->
</el-skeleton> <!-- </el-skeleton>-->
</el-card> <!-- </el-card>-->
<el-card shadow="never" class="mt-8px"> <el-card shadow="never" class="mt-8px">
<template #header> <template #header>
<div class="h-3 flex justify-between"> <div class="h-3 flex justify-between">
@ -271,12 +271,7 @@ const getNotice = async () => {
keys: ['通知', '升级'], keys: ['通知', '升级'],
date: new Date() date: new Date()
}, },
{
title: '系统凌晨维护',
type: '公告',
keys: ['公告', '维护'],
date: new Date()
}
] ]
notice = Object.assign(notice, data) notice = Object.assign(notice, data)
} }
@ -382,3 +377,9 @@ const getAllApi = async () => {
getAllApi() getAllApi()
</script> </script>
<style lang="scss" scoped>
::v-deep .el-divider{
margin: 20.4px 0;
}
</style>

85
src/views/Login/Login.vue
View File

@ -1,53 +1,53 @@
<template> <template>
<div <div
:class="prefixCls" :class="prefixCls"
class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px" class="relative h-[100%] "
> >
<div class="relative mx-auto h-full flex"> <div class="relative mx-auto h-full flex bg">
<div <!-- <div-->
:class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`" <!-- :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"-->
> <!-- >-->
<!-- 左上角的 logo + 系统标题 --> <!-- &lt;!&ndash; 左上角的 logo + 系统标题 &ndash;&gt;-->
<div class="relative flex items-center text-white"> <!-- <div class="relative flex items-center text-white">-->
<img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" /> <!-- <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />-->
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span> <!-- <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>-->
</div> <!-- </div>-->
<!-- 左边的背景图 + 欢迎语 --> <!-- &lt;!&ndash; 左边的背景图 + 欢迎语 &ndash;&gt;-->
<div class="h-[calc(100%-60px)] flex items-center justify-center"> <!-- <div class="h-[calc(100%-60px)] flex items-center justify-center">-->
<TransitionGroup <!-- <TransitionGroup-->
appear <!-- appear-->
enter-active-class="animate__animated animate__bounceInLeft" <!-- enter-active-class="animate__animated animate__bounceInLeft"-->
tag="div" <!-- tag="div"-->
> <!-- >-->
<img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" /> <!-- <img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" />-->
<div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div> <!-- <div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>-->
<div key="3" class="mt-5 text-14px font-normal text-white"> <!-- <div key="3" class="mt-5 text-14px font-normal text-white">-->
{{ t('login.message') }} <!-- {{ t('login.message') }}-->
</div> <!-- </div>-->
</TransitionGroup> <!-- </TransitionGroup>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px"> <div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px">
<!-- 右上角的主题、语言选择 --> <!-- 右上角的主题、语言选择 -->
<div <div
class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end" class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end"
> >
<div class="flex items-center at-2xl:hidden at-xl:hidden"> <!-- <div class="flex items-center at-2xl:hidden at-xl:hidden">-->
<img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" /> <!-- <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />-->
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span> <!-- <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>-->
</div> <!-- </div>-->
<div class="flex items-center justify-end space-x-10px"> <!-- <div class="flex items-center justify-end space-x-10px">-->
<ThemeSwitch /> <!-- <ThemeSwitch />-->
<LocaleDropdown class="dark:text-white lt-xl:text-white" /> <!-- <LocaleDropdown class="dark:text-white lt-xl:text-white" />-->
</div> <!-- </div>-->
</div> </div>
<!-- 右边的登录界面 --> <!-- 右边的登录界面 -->
<Transition appear enter-active-class="animate__animated animate__bounceInRight"> <Transition appear enter-active-class="animate__animated animate__bounceInRight">
<div <div
class="m-auto h-full w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px" class="m-auto h-full w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px no-medium"
> >
<!-- 账号登录 --> <!-- 账号登录 -->
<LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> <LoginForm class="pc-login m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
<!-- 手机登录 --> <!-- 手机登录 -->
<MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> <MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
<!-- 二维码登录 --> <!-- 二维码登录 -->
@ -101,4 +101,19 @@ $prefix-cls: #{$namespace}-login;
} }
} }
} }
.no-medium{
width: 660px;
max-width: 700px;
}
.pc-login{
}
.bg{
width: 100vw;
height: 100vh;
background: url('@/assets/imgs/login-bg.jpg');
background-size: 100% 100%;
overflow: hidden;
}
</style> </style>

19
src/views/Login/components/LoginForm.vue
View File

@ -4,7 +4,7 @@
ref="formLogin" ref="formLogin"
:model="loginData.loginForm" :model="loginData.loginForm"
:rules="LoginRules" :rules="LoginRules"
class="login-form" class="login-form height-auto"
label-position="top" label-position="top"
label-width="120px" label-width="120px"
size="large" size="large"
@ -12,10 +12,10 @@
<el-row style="margin-right: -10px; margin-left: -10px"> <el-row style="margin-right: -10px; margin-left: -10px">
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item> <el-form-item>
<LoginFormTitle style="width: 100%" /> <LoginFormTitle style="width: 100%; margin-bottom: 70px" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="20" style="padding-right: 10px; padding-left: 10px">
<el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName"> <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
<el-input <el-input
v-model="loginData.loginForm.tenantName" v-model="loginData.loginForm.tenantName"
@ -26,7 +26,7 @@
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="18" style="margin:0 auto">
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
v-model="loginData.loginForm.username" v-model="loginData.loginForm.username"
@ -35,7 +35,7 @@
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="18" style="margin:0 auto">
<el-form-item prop="password"> <el-form-item prop="password">
<el-input <el-input
v-model="loginData.loginForm.password" v-model="loginData.loginForm.password"
@ -48,8 +48,8 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col <el-col
:span="24" :span="18"
style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px" style="margin: 0 auto; margin-top: -20px; margin-bottom: -20px"
> >
<el-form-item> <el-form-item>
<el-row justify="space-between" style="width: 100%"> <el-row justify="space-between" style="width: 100%">
@ -61,7 +61,7 @@
</el-row> </el-row>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="18" style="margin:0 auto">
<el-form-item> <el-form-item>
<XButton <XButton
:loading="loginLoading" :loading="loginLoading"
@ -246,4 +246,7 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
} }
} }
.height-auto{
height: 60%;
}
</style> </style>

5
src/views/fta/enterprisechange/detail.vue
View File

@ -287,3 +287,8 @@ onMounted(() => {
getInfo() getInfo()
}) })
</script> </script>
<style lang="scss" scoped>
::v-deep .el-descriptions__label{
width: 200px;
}
</style>

5
src/views/fta/enterpriseinformation/detail.vue
View File

@ -157,3 +157,8 @@ onMounted(() => {
getInfo() getInfo()
}) })
</script> </script>
<style lang="scss" scoped>
::v-deep .el-descriptions__label{
width: 200px;
}
</style>

12
src/views/fta/enterprisestatistics/index.vue
View File

@ -1,12 +1,12 @@
<!--企业信息饼状图分析--> <!--企业信息饼状图分析-->
<template> <template>
<el-row class="mt-8px" :gutter="8" justify="space-between"> <el-row class="mt-8px" :gutter="8" justify="space-between">
<el-col :xl="16" :lg="32" :md="32" :sm="24" :xs="24" class="mb-8px"> <el-col :span="24" class="mb-8px">
<el-card shadow="never" class="mt-8px"> <el-card shadow="never" class="mt-8px">
<el-skeleton :loading="loading" animated> <el-skeleton :loading="loading" animated>
<el-row :gutter="20" justify="space-between"> <el-row :gutter="20" justify="space-between">
<!-- 第一个饼图--> <!-- 第一个饼图-->
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12"> <el-col :span="12">
<el-card shadow="hover" class="mb-8px"> <el-card shadow="hover" class="mb-8px">
<el-skeleton :loading="loading" animated> <el-skeleton :loading="loading" animated>
<Echart :options="enterpriseData" :height="280" /> <Echart :options="enterpriseData" :height="280" />
@ -14,7 +14,7 @@
</el-card> </el-card>
</el-col> </el-col>
<!-- 第二个饼图--> <!-- 第二个饼图-->
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12"> <el-col :span="12">
<el-card shadow="hover" class="mb-8px"> <el-card shadow="hover" class="mb-8px">
<el-skeleton :loading="loading" animated> <el-skeleton :loading="loading" animated>
<Echart :options="auditStatusData" :height="280" /> <Echart :options="auditStatusData" :height="280" />
@ -22,7 +22,7 @@
</el-card> </el-card>
</el-col> </el-col>
<!-- 月度企业统计 --> <!-- 月度企业统计 -->
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12"> <el-col :span="12">
<el-card shadow="hover" class="mb-8px"> <el-card shadow="hover" class="mb-8px">
<el-skeleton :loading="loading" animated> <el-skeleton :loading="loading" animated>
<Echart :options="monthlData" :height="280" /> <Echart :options="monthlData" :height="280" />
@ -30,7 +30,7 @@
</el-card> </el-card>
</el-col> </el-col>
<!-- 季度企业统计 --> <!-- 季度企业统计 -->
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12"> <el-col :span="12">
<el-card shadow="hover" class="mb-8px"> <el-card shadow="hover" class="mb-8px">
<el-skeleton :loading="loading" animated> <el-skeleton :loading="loading" animated>
<Echart :options="quarterData" :height="280" /> <Echart :options="quarterData" :height="280" />
@ -41,7 +41,7 @@
</el-skeleton> </el-skeleton>
<!-- 年度度企业统计（自己一行）--> <!-- 年度度企业统计（自己一行）-->
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24"> <el-col :span="24">
<el-card shadow="hover" class="mb-8px"> <el-card shadow="hover" class="mb-8px">
<el-skeleton :loading="loading" animated> <el-skeleton :loading="loading" animated>
<Echart :options="yearData" :height="280" /> <Echart :options="yearData" :height="280" />