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

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

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: {
backSignIn: '返回',
signInFormTitle: '登录',
// signInFormTitle: '登录',
signInFormTitle: '江苏自贸区连云港片区大宗贸易风险联控平台',
ssoFormTitle: '三方授权',
mobileSignInFormTitle: '手机登录',
qrSignInFormTitle: '二维码登录',

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

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

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

@ -58,39 +58,39 @@
<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-card shadow="never">
<template #header>
<div class="h-3 flex justify-between">
<span>{{ t('workplace.project') }}</span>
<el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>
</div>
</template>
<el-skeleton :loading="loading" animated>
<el-row>
<el-col
v-for="(item, index) in projects"
:key="`card-${index}`"
:xl="8"
:lg="8"
:md="8"
:sm="24"
:xs="24"
>
<el-card shadow="hover">
<div class="flex items-center">
<Icon :icon="item.icon" :size="25" class="mr-8px" />
<span class="text-16px">{{ item.name }}</span>
</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">
<span>{{ item.personal }}</span>
<span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
</div>
</el-card>
</el-col>
</el-row>
</el-skeleton>
</el-card>
<!-- <el-card shadow="never">-->
<!-- <template #header>-->
<!-- <div class="h-3 flex justify-between">-->
<!-- <span>{{ t('workplace.project') }}</span>-->
<!-- <el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>-->
<!-- </div>-->
<!-- </template>-->
<!-- <el-skeleton :loading="loading" animated>-->
<!-- <el-row>-->
<!-- <el-col-->
<!-- v-for="(item, index) in projects"-->
<!-- :key="`card-${index}`"-->
<!-- :xl="8"-->
<!-- :lg="8"-->
<!-- :md="8"-->
<!-- :sm="24"-->
<!-- :xs="24"-->
<!-- >-->
<!-- <el-card shadow="hover">-->
<!-- <div class="flex items-center">-->
<!-- <Icon :icon="item.icon" :size="25" class="mr-8px" />-->
<!-- <span class="text-16px">{{ item.name }}</span>-->
<!-- </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">-->
<!-- <span>{{ item.personal }}</span>-->
<!-- <span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>-->
<!-- </div>-->
<!-- </el-card>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </el-skeleton>-->
<!-- </el-card>-->
<el-card shadow="never" class="mt-8px">
<el-skeleton :loading="loading" animated>
@ -114,25 +114,25 @@
</el-card>
</el-col>
<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
<el-card shadow="never">
<template #header>
<div class="h-3 flex justify-between">
<span>{{ t('workplace.shortcutOperation') }}</span>
</div>
</template>
<el-skeleton :loading="loading" animated>
<el-row>
<el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-8px">
<div class="flex items-center">
<Icon :icon="item.icon" class="mr-8px" />
<el-link type="default" :underline="false" @click="setWatermark(item.name)">
{{ item.name }}
</el-link>
</div>
</el-col>
</el-row>
</el-skeleton>
</el-card>
<!-- <el-card shadow="never">-->
<!-- <template #header>-->
<!-- <div class="h-3 flex justify-between">-->
<!-- <span>{{ t('workplace.shortcutOperation') }}</span>-->
<!-- </div>-->
<!-- </template>-->
<!-- <el-skeleton :loading="loading" animated>-->
<!-- <el-row>-->
<!-- <el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-8px">-->
<!-- <div class="flex items-center">-->
<!-- <Icon :icon="item.icon" class="mr-8px" />-->
<!-- <el-link type="default" :underline="false" @click="setWatermark(item.name)">-->
<!-- {{ item.name }}-->
<!-- </el-link>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </el-skeleton>-->
<!-- </el-card>-->
<el-card shadow="never" class="mt-8px">
<template #header>
<div class="h-3 flex justify-between">
@ -271,12 +271,7 @@ const getNotice = async () => {
keys: ['通知', '升级'],
date: new Date()
},
{
title: '系统凌晨维护',
type: '公告',
keys: ['公告', '维护'],
date: new Date()
}
]
notice = Object.assign(notice, data)
}
@ -382,3 +377,9 @@ const getAllApi = async () => {
getAllApi()
</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>
<div
: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="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
>
<!-- 左上角的 logo + 系统标题 -->
<div class="relative flex items-center text-white">
<img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
</div>
<!-- 左边的背景图 + 欢迎语 -->
<div class="h-[calc(100%-60px)] flex items-center justify-center">
<TransitionGroup
appear
enter-active-class="animate__animated animate__bounceInLeft"
tag="div"
>
<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="3" class="mt-5 text-14px font-normal text-white">
{{ t('login.message') }}
</div>
</TransitionGroup>
</div>
</div>
<div class="relative mx-auto h-full flex bg">
<!-- <div-->
<!-- :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"-->
<!-- >-->
<!-- &lt;!&ndash; 左上角的 logo + 系统标题 &ndash;&gt;-->
<!-- <div class="relative flex items-center text-white">-->
<!-- <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />-->
<!-- <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>-->
<!-- </div>-->
<!-- &lt;!&ndash; 左边的背景图 + 欢迎语 &ndash;&gt;-->
<!-- <div class="h-[calc(100%-60px)] flex items-center justify-center">-->
<!-- <TransitionGroup-->
<!-- appear-->
<!-- enter-active-class="animate__animated animate__bounceInLeft"-->
<!-- tag="div"-->
<!-- >-->
<!-- <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="3" class="mt-5 text-14px font-normal text-white">-->
<!-- {{ t('login.message') }}-->
<!-- </div>-->
<!-- </TransitionGroup>-->
<!-- </div>-->
<!-- </div>-->
<div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px">
<!-- 右上角的主题、语言选择 -->
<div
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">
<img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
</div>
<div class="flex items-center justify-end space-x-10px">
<ThemeSwitch />
<LocaleDropdown class="dark:text-white lt-xl:text-white" />
</div>
<!-- <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" />-->
<!-- <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>-->
<!-- </div>-->
<!-- <div class="flex items-center justify-end space-x-10px">-->
<!-- <ThemeSwitch />-->
<!-- <LocaleDropdown class="dark:text-white lt-xl:text-white" />-->
<!-- </div>-->
</div>
<!-- 右边的登录界面 -->
<Transition appear enter-active-class="animate__animated animate__bounceInRight">
<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)" />
<!-- 二维码登录 -->
@ -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>

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

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

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

@ -287,3 +287,8 @@ onMounted(() => {
getInfo()
})
</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()
})
</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>
<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-skeleton :loading="loading" animated>
<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-skeleton :loading="loading" animated>
<Echart :options="enterpriseData" :height="280" />
@ -14,7 +14,7 @@
</el-card>
</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-skeleton :loading="loading" animated>
<Echart :options="auditStatusData" :height="280" />
@ -22,7 +22,7 @@
</el-card>
</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-skeleton :loading="loading" animated>
<Echart :options="monthlData" :height="280" />
@ -30,7 +30,7 @@
</el-card>
</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-skeleton :loading="loading" animated>
<Echart :options="quarterData" :height="280" />
@ -41,7 +41,7 @@
</el-skeleton>
<!-- 年度度企业统计（自己一行）-->
<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-skeleton :loading="loading" animated>
<Echart :options="yearData" :height="280" />