整体布局更新(背景颜色更换为白色,取消外边框)

This commit is contained in:
ktianc 2023-06-20 13:50:34 +08:00
parent de7a34f64f
commit ae28bc0701
28 changed files with 210 additions and 198 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 829 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 190 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 843 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 184 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

View File

@ -202,7 +202,7 @@ const clear = () => {
<template>
<div
:class="prefixCls"
class="fixed top-[45%] right-0 w-40px h-40px text-center leading-40px bg-[var(--el-color-primary)] cursor-pointer"
class="fixed top-[45%] right-0 w-40px h-40px text-center leading-40px bg-[var(--el-color-primary)] cursor-pointer z-3"
@click="drawer = true"
>
<Icon icon="ant-design:setting-outlined" color="#fff" />

View File

@ -20,9 +20,9 @@ const getCaches = computed((): string[] => {
</script>
<template>
<section
<div
:class="[
'p-[var(--app-content-padding)] w-[100%] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
'w-[100%] bg-[var(--app-content-bg-color-new)] dark:bg-[var(--el-bg-color)] flex flex-col',
{
'!min-h-[calc(100%-var(--app-footer-height))]':
((fixedHeader && (layout === 'classic' || layout === 'topLeft')) || layout === 'top') &&
@ -41,13 +41,13 @@ const getCaches = computed((): string[] => {
}
]"
>
<router-view>
<RouterView>
<template #default="{ Component, route }">
<keep-alive :include="getCaches">
<KeepAlive :include="getCaches">
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</KeepAlive>
</template>
</router-view>
</section>
</RouterView>
</div>
<Footer v-if="footer" />
</template>

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ElCarousel, ElCarouselItem, ElImage, ElCard } from 'element-plus'
import { ElCarousel, ElCarouselItem, ElImage } from 'element-plus'
import Charts from './components/Charts.vue'
import { getBannersApi } from '@/api/dashboard/analysis'
import { ref } from 'vue'
@ -21,15 +21,13 @@ getBanners()
</script>
<template>
<div class="mb-20px" style="display: flex; justify-content: center; min-width: 1680px">
<ElCard shadow="never" class="w-1680px">
<!-- 添加 v-if 解决显示动态数据时默认会显示一个空白元素 -->
<ElCarousel v-loading="loading" v-if="banners.length > 0" height="500px" :interval="5000">
<ElCarouselItem v-for="item in banners" :key="item.id">
<ElImage :src="item.image" />
</ElCarouselItem>
</ElCarousel>
</ElCard>
<div class="mb-20px">
<!-- 添加 v-if 解决显示动态数据时默认会显示一个空白元素 -->
<ElCarousel height="500px" :interval="5000">
<ElCarouselItem v-for="item in banners" :key="item.id">
<ElImage :src="item.image" class="min-w-[1920px]" />
</ElCarouselItem>
</ElCarousel>
</div>
<Charts />
</template>

View File

@ -78,7 +78,7 @@ const setValues = async () => {
})
}
//
circleMarker.value.on('mouseover', function (e) {
circleMarker.value.on('mouseover', () => {
infoWindow.setContent(
`<div class="description">
<div class="name-box">
@ -91,7 +91,7 @@ const setValues = async () => {
infoWindow.open(map.value, center)
})
//
circleMarker.value.on('mouseout', function (e) {
circleMarker.value.on('mouseout', () => {
infoWindow.close(map.value, center)
})
return circleMarker.value

View File

@ -78,149 +78,153 @@ const user = computed(() => authStore.getUser)
</script>
<template>
<div>
<ElCard shadow="never">
<ElSkeleton :loading="loading" animated>
<ElRow :gutter="20" justify="space-between">
<ElCol :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
<div class="flex items-center">
<img
:src="user.avatar ? user.avatar : avatar"
alt=""
class="w-70px h-70px rounded-[50%] mr-20px"
/>
<div class="truncate">
<div class="text-20px text-700 truncate">
{{ getGreeting() }}{{ user.name }}{{ t('workplace.happyDay') }}
</div>
<div class="mt-10px text-14px text-gray-500">
{{ getCurrentDate() }}{{ getDayOfWeek() }}
</div>
</div>
</div>
</ElCol>
<ElCol :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
<div class="flex h-70px items-center justify-end <sm:mt-20px">
<div class="px-8px text-right">
<div class="text-14px text-gray-400 mb-20px">最近登录时间</div>
<span class="text-20px">{{ user.last_login?.split(' ')[0] }}</span>
</div>
</div>
</ElCol>
</ElRow>
</ElSkeleton>
</ElCard>
</div>
<ElRow class="mt-20px" :gutter="20" justify="space-between">
<ElCol :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-20px">
<div class="bg-[var(--app-content-bg-color)] flex-grow">
<div>
<ElCard shadow="never">
<template #header>
<div class="flex justify-between">
<span>{{ t('workplace.project') }}</span>
<ElLink type="primary" :underline="false">{{ t('workplace.more') }}</ElLink>
</div>
</template>
<ElSkeleton :loading="loading" animated>
<ElRow>
<ElCol
v-for="(item, index) in projects"
:key="`card-${index}`"
:xl="8"
:lg="8"
:md="12"
:sm="24"
:xs="24"
>
<ElCard shadow="hover">
<div class="cursor-pointer" @click="toLink(item.link)">
<div class="flex items-center">
<Icon :icon="item.icon" :size="25" class="mr-10px" />
<span class="text-16px">{{ item.name }}</span>
<ElRow :gutter="20" justify="space-between">
<ElCol :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
<div class="flex items-center">
<img
:src="user.avatar ? user.avatar : avatar"
alt=""
class="w-70px h-70px rounded-[50%] mr-20px"
/>
<div class="truncate">
<div class="text-20px text-700 truncate">
{{ getGreeting() }}{{ user.name }}{{ t('workplace.happyDay') }}
</div>
<div class="mt-15px text-14px text-gray-400">{{ t(item.message) }}</div>
<div class="mt-20px text-12px text-gray-400 flex justify-between">
<span>{{ item.personal }}</span>
<span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
<div class="mt-10px text-14px text-gray-500">
{{ getCurrentDate() }}{{ getDayOfWeek() }}
</div>
</div>
</ElCard>
</div>
</ElCol>
<ElCol :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
<div class="flex h-70px items-center justify-end <sm:mt-20px">
<div class="px-8px text-right">
<div class="text-14px text-gray-400 mb-20px">最近登录时间</div>
<span class="text-20px">{{ user.last_login?.split(' ')[0] }}</span>
</div>
</div>
</ElCol>
</ElRow>
</ElSkeleton>
</ElCard>
</div>
<ElCard shadow="never" class="mt-20px">
<template #header>
<div class="flex justify-between">
<span>{{ t('workplace.dynamic') }}</span>
<ElLink type="primary" :underline="false">{{ t('workplace.more') }}</ElLink>
</div>
</template>
<ElSkeleton :loading="loading" animated>
<div v-for="(item, index) in dynamics" :key="`dynamics-${index}`">
<div class="flex items-center">
<img
src="@/assets/imgs/avatar.jpg"
alt=""
class="w-35px h-35px rounded-[50%] mr-20px"
/>
<div>
<div class="text-14px">
<Highlight :keys="item.keys.map((v) => t(v))">
{{ t('workplace.pushCode') }}
</Highlight>
</div>
<div class="mt-15px text-12px text-gray-400">
{{ useTimeAgo(item.time) }}
</div>
<div class="mx-20px mt-20px">
<ElRow :gutter="20" justify="space-between">
<ElCol :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-20px">
<ElCard shadow="never">
<template #header>
<div class="flex justify-between">
<span>{{ t('workplace.project') }}</span>
<ElLink type="primary" :underline="false">{{ t('workplace.more') }}</ElLink>
</div>
</div>
<ElDivider />
</div>
</ElSkeleton>
</ElCard>
</ElCol>
<ElCol :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-20px">
<ElCard shadow="never">
<template #header>
<span>{{ t('workplace.shortcutOperation') }}</span>
</template>
<ElSkeleton :loading="loading" animated>
<ElCol
v-for="(item, index) in shortcuts"
:key="`card-${index}`"
:xl="12"
:lg="12"
:md="12"
:sm="12"
:xs="12"
class="mb-10px"
>
<ElLink type="primary" :href="item.link" target="_blank" :underline="false">
{{ item.name }}
</ElLink>
</ElCol>
</ElSkeleton>
</ElCard>
</template>
<ElSkeleton :loading="loading" animated>
<ElRow>
<ElCol
v-for="(item, index) in projects"
:key="`card-${index}`"
:xl="8"
:lg="8"
:md="12"
:sm="24"
:xs="24"
>
<ElCard shadow="hover">
<div class="cursor-pointer" @click="toLink(item.link)">
<div class="flex items-center">
<Icon :icon="item.icon" :size="25" class="mr-10px" />
<span class="text-16px">{{ item.name }}</span>
</div>
<div class="mt-15px text-14px text-gray-400">{{ t(item.message) }}</div>
<div class="mt-20px text-12px text-gray-400 flex justify-between">
<span>{{ item.personal }}</span>
<span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
</div>
</div>
</ElCard>
</ElCol>
</ElRow>
</ElSkeleton>
</ElCard>
<ElCard shadow="never" class="mt-20px">
<template #header>
<span>{{ t('workplace.team') }}</span>
</template>
<ElSkeleton :loading="loading" animated>
<ElRow>
<ElCol v-for="item in team" :key="`team-${item.name}`" :span="12" class="mb-20px">
<div class="flex items-center">
<Icon :icon="item.icon" class="mr-10px" />
<ElLink type="default" :underline="false">
<ElCard shadow="never" class="mt-20px">
<template #header>
<div class="flex justify-between">
<span>{{ t('workplace.dynamic') }}</span>
<ElLink type="primary" :underline="false">{{ t('workplace.more') }}</ElLink>
</div>
</template>
<ElSkeleton :loading="loading" animated>
<div v-for="(item, index) in dynamics" :key="`dynamics-${index}`">
<div class="flex items-center">
<img
src="@/assets/imgs/avatar.jpg"
alt=""
class="w-35px h-35px rounded-[50%] mr-20px"
/>
<div>
<div class="text-14px">
<Highlight :keys="item.keys.map((v) => t(v))">
{{ t('workplace.pushCode') }}
</Highlight>
</div>
<div class="mt-15px text-12px text-gray-400">
{{ useTimeAgo(item.time) }}
</div>
</div>
</div>
<ElDivider />
</div>
</ElSkeleton>
</ElCard>
</ElCol>
<ElCol :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-20px">
<ElCard shadow="never">
<template #header>
<span>{{ t('workplace.shortcutOperation') }}</span>
</template>
<ElSkeleton :loading="loading" animated>
<ElCol
v-for="(item, index) in shortcuts"
:key="`card-${index}`"
:xl="12"
:lg="12"
:md="12"
:sm="12"
:xs="12"
class="mb-10px"
>
<ElLink type="primary" :href="item.link" target="_blank" :underline="false">
{{ item.name }}
</ElLink>
</div>
</ElCol>
</ElRow>
</ElSkeleton>
</ElCard>
</ElCol>
</ElRow>
</ElCol>
</ElSkeleton>
</ElCard>
<ElCard shadow="never" class="mt-20px">
<template #header>
<span>{{ t('workplace.team') }}</span>
</template>
<ElSkeleton :loading="loading" animated>
<ElRow>
<ElCol v-for="item in team" :key="`team-${item.name}`" :span="12" class="mb-20px">
<div class="flex items-center">
<Icon :icon="item.icon" class="mr-10px" />
<ElLink type="default" :underline="false">
{{ item.name }}
</ElLink>
</div>
</ElCol>
</ElRow>
</ElSkeleton>
</ElCard>
</ElCol>
</ElRow>
</div>
</div>
</template>

View File

@ -26,52 +26,56 @@ const user = authStore.getUser
</script>
<template>
<ElRow :gutter="20">
<ElCol :xs="24" :sm="12" :md="8">
<ElCard shadow="hover" class="pb-30px">
<div class="text-center">
<ElAvatar :size="80" :src="user.avatar ? user.avatar : avatar" />
<p style="font-size: 24px">{{ user.name }}</p>
</div>
<div class="pl-20px pt-30px">
<div class="leading-relaxed">
<span class="pl-10px w-80px inline-block">姓名:</span>
<span class="pl-10px">{{ user.name }}</span>
<div class="m-20px">
<ElRow :gutter="20">
<ElCol :xs="24" :sm="12" :md="8">
<ElCard shadow="hover" class="pb-30px">
<div class="text-center">
<ElAvatar :size="80" :src="user.avatar ? user.avatar : avatar" />
<p style="font-size: 24px">{{ user.name }}</p>
</div>
<div class="leading-relaxed">
<span class="pl-10px w-80px inline-block">昵称:</span>
<span class="pl-10px">{{ user.nickname }}</span>
<div class="pl-20px pt-30px">
<div class="leading-relaxed">
<span class="pl-10px w-80px inline-block">姓名:</span>
<span class="pl-10px">{{ user.name }}</span>
</div>
<div class="leading-relaxed">
<span class="pl-10px w-80px inline-block">昵称:</span>
<span class="pl-10px">{{ user.nickname }}</span>
</div>
<div class="leading-relaxed">
<span class="pl-10px w-80px inline-block">手机号:</span>
<span class="pl-10px">{{ user.telephone }}</span>
</div>
<div class="leading-relaxed">
<span class="pl-10px w-80px inline-block">性别:</span>
<span class="pl-10px">{{
selectDictLabel(genderOptions, user.gender as string)
}}</span>
</div>
<div class="leading-relaxed">
<span class="pl-10px w-80px inline-block">角色:</span>
<span class="pl-10px">{{ user.roles?.map((item) => item.name).join(',') }}</span>
</div>
<div class="leading-relaxed">
<span class="pl-10px w-80px inline-block">创建时间:</span>
<span class="pl-10px">{{ user.create_datetime }}</span>
</div>
</div>
<div class="leading-relaxed">
<span class="pl-10px w-80px inline-block">手机号:</span>
<span class="pl-10px">{{ user.telephone }}</span>
</div>
<div class="leading-relaxed">
<span class="pl-10px w-80px inline-block">性别:</span>
<span class="pl-10px">{{ selectDictLabel(genderOptions, user.gender as string) }}</span>
</div>
<div class="leading-relaxed">
<span class="pl-10px w-80px inline-block">角色:</span>
<span class="pl-10px">{{ user.roles?.map((item) => item.name).join(',') }}</span>
</div>
<div class="leading-relaxed">
<span class="pl-10px w-80px inline-block">创建时间:</span>
<span class="pl-10px">{{ user.create_datetime }}</span>
</div>
</div>
</ElCard>
</ElCol>
<ElCol :xs="24" :sm="12" :md="16">
<ElCard shadow="hover">
<ElTabs v-model="activeName">
<ElTabPane label="基本信息" name="info">
<InfoWrite />
</ElTabPane>
<ElTabPane label="修改密码" name="password">
<PasswordWrite />
</ElTabPane>
</ElTabs>
</ElCard>
</ElCol>
</ElRow>
</ElCard>
</ElCol>
<ElCol :xs="24" :sm="12" :md="16">
<ElCard shadow="hover">
<ElTabs v-model="activeName">
<ElTabPane label="基本信息" name="info">
<InfoWrite />
</ElTabPane>
<ElTabPane label="修改密码" name="password">
<PasswordWrite />
</ElTabPane>
</ElTabs>
</ElCard>
</ElCol>
</ElRow>
</div>
</template>

View File

@ -226,6 +226,9 @@ export const searchSchema = reactive<FormSchema[]>([
style: {
width: '214px'
}
},
formItemProps: {
labelWidth: '47px'
}
},
{

View File

@ -117,6 +117,9 @@ export const searchSchema = reactive<FormSchema[]>([
style: {
width: '214px'
}
},
formItemProps: {
labelWidth: '47px'
}
},
{

View File

@ -11,7 +11,7 @@ from fastapi.security import OAuth2PasswordBearer
"""
系统版本
"""
VERSION = "1.8.2"
VERSION = "1.8.3"
"""安全警告: 不要在生产中打开调试运行!"""
DEBUG = True