图形化建表蒙层点击无效
parent
b2922a46e2
commit
7e3a046d1e
|
|
@ -86,7 +86,7 @@ export const SchemeRoute: AppRouteRecordRaw = {
|
|||
export const SubjectRoute: AppRouteRecordRaw = {
|
||||
path: '/subject',
|
||||
name: 'subject',
|
||||
component: () => import('@/views/subject/index.vue'),
|
||||
component: () => import('@/views/subject/subject/index.vue'),
|
||||
meta: {
|
||||
title: '主题',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -39,9 +39,10 @@
|
|||
<PermissionBtn @btnEvent="buttonClick"></PermissionBtn>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'enabledMark'">
|
||||
<a-tag v-if="record.enabledMark" color="success">正常</a-tag>
|
||||
<a-tag v-else color="error">停用</a-tag>
|
||||
<template v-if="column.key == 'overlayList'">
|
||||
<div v-for="tag in record.overlayList" :key="tag">
|
||||
<a-tag>{{ tag }}</a-tag>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
|
|
|
|||
|
|
@ -2,61 +2,51 @@ export const columns = [
|
|||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
resizable: true,
|
||||
ifShow: false,
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '图层',
|
||||
dataIndex: 'layer',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '数据表',
|
||||
dataIndex: 'tableName',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '叠加图层',
|
||||
dataIndex: 'overlayList',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '是否分类',
|
||||
dataIndex: 'isClass',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '分类字段',
|
||||
dataIndex: 'classField',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '分类名称',
|
||||
dataIndex: 'className',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '选择面积计算字段',
|
||||
dataIndex: 'areaField',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '是否合计',
|
||||
dataIndex: 'isSum',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
||||
<div>
|
||||
<BasicTable
|
||||
class="w-4/4 xl:w-5/5"
|
||||
@register="registerTable"
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
</template>
|
||||
</BasicTable>
|
||||
<Modal @register="registerModal" @submit="submit" />
|
||||
</PageWrapper>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
:title="getTitle"
|
||||
:useWrapper="true"
|
||||
:width="900"
|
||||
:maskClosable="false"
|
||||
@ok="handleOk"
|
||||
>
|
||||
<div class="box-container">
|
||||
|
|
@ -103,6 +104,7 @@
|
|||
// 是否是标准化
|
||||
const isBasic = ref(false);
|
||||
const tableName: any = ref('');
|
||||
const getTitle: any = ref('');
|
||||
const tableColumns: any = ref([]);
|
||||
const codesTypeArr: any = ref([
|
||||
{ label: 'varchar', value: 'varchar' },
|
||||
|
|
@ -118,12 +120,14 @@
|
|||
|
||||
// 新增
|
||||
if (!data.record) {
|
||||
getTitle.value = '新增';
|
||||
tableName.value = null;
|
||||
setTableData([]);
|
||||
handleAdd();
|
||||
reload();
|
||||
} else {
|
||||
// 编辑、详情
|
||||
getTitle.value = '详情';
|
||||
tableName.value = data.record.tableName;
|
||||
const lines = data.record.columnJson.split(':');
|
||||
let arr: any = [];
|
||||
|
|
@ -223,13 +227,13 @@
|
|||
}
|
||||
// 提交
|
||||
async function handleOk() {
|
||||
// 删除两端空格、制表符和换行符
|
||||
tableName.value = tableName.value.trim();
|
||||
// 检测：表名
|
||||
if (!tableName.value) {
|
||||
createMessage.warn('表名是必填项!');
|
||||
return;
|
||||
}
|
||||
// 删除两端空格、制表符和换行符
|
||||
tableName.value = tableName.value.trim();
|
||||
// 检测：数据库表名的命名规则
|
||||
if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(tableName.value)) {
|
||||
createMessage.warn('表名不符合数据库表名的命名规则!');
|
||||
|
|
@ -361,6 +365,7 @@
|
|||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getCodesTypeArr();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,725 @@
|
|||
<template>
|
||||
<div class="subject">
|
||||
<div class="subject_header">
|
||||
<img
|
||||
class="subject_header_img"
|
||||
src="/subject/subject_header.png"
|
||||
:style="{
|
||||
width: '100%',
|
||||
height: `${82 * bi}px`,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="subject_header_title"
|
||||
:style="{
|
||||
position: 'relative',
|
||||
top: `${-85 * bi}px`,
|
||||
}"
|
||||
>
|
||||
<span
|
||||
:style="{
|
||||
fontSize: `${42 * bi}px`,
|
||||
height: `${82 * bi}px`,
|
||||
}"
|
||||
>
|
||||
<img
|
||||
src="/subject/subject_logo.png"
|
||||
:style="{
|
||||
position: 'relative',
|
||||
top: `${4 * bi}px`,
|
||||
width: `${78 * bi}px`,
|
||||
height: `${70 * bi}px`,
|
||||
marginRight: `${5 * bi}px`,
|
||||
}"
|
||||
/>
|
||||
{{ t('sys.subject.header_title') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="subject_header_currentTime">
|
||||
<span class="subject_header_currentTime_date">
|
||||
{{ currentTime_date }}
|
||||
</span>
|
||||
<div class="subject_header_currentTime_div">
|
||||
<div> {{ currentTime_week }} </div>
|
||||
<div> {{ currentTime_year }} </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subject_header_adminAndLogout">
|
||||
<img src="/subject/subject_header_admin.png" />
|
||||
<span> {{ loginUser }} {{ t('sys.subject.header_admin') }}</span>
|
||||
|
||||
<img src="/subject/subject_header_logout.png" @click="handleLoginOut()" />
|
||||
<span @click="handleLoginOut()">{{ t('sys.subject.header_logout') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subject_box">
|
||||
<div
|
||||
class="subject_box_btn"
|
||||
ref="contentArea"
|
||||
:style="{
|
||||
position: 'relative',
|
||||
top: `${getBoxBtnAttribute()[0]}px`,
|
||||
left: `${getBoxBtnAttribute()[1] * bi}px`,
|
||||
height: `${getBoxBtnAttribute()[2] * bi}px`,
|
||||
width: `${getBoxBtnAttribute()[3] * bi}px`,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in list"
|
||||
:key="item.id"
|
||||
:id="item.id"
|
||||
class="subject_box_btn_div"
|
||||
@click="getHome(item)"
|
||||
:style="{
|
||||
marginRight: `${getBoxBtnAttribute()[4] * bi}px`,
|
||||
marginLeft: `${getBoxBtnAttribute()[4] * bi}px`,
|
||||
marginBottom: `${20 * bi}px`,
|
||||
height: `${325 * bi}px`,
|
||||
width: `${225 * bi}px`,
|
||||
'background-image': `url(${index % 2 == 0 ? '/subject/subject_btn_1.png' : '/subject/subject_btn_2.png'})`,
|
||||
'background-size': `${100}%`,
|
||||
'background-repeat': 'no-repeat',
|
||||
}"
|
||||
>
|
||||
<img
|
||||
class="subject_box_btn_div_url"
|
||||
:src="getImageUrl(item.imgUrl)"
|
||||
:style="{
|
||||
left: `${21 * bi}px`,
|
||||
width: `${191 * bi}px`,
|
||||
height: `${191 * bi}px`,
|
||||
}"
|
||||
/>
|
||||
<span
|
||||
class="subject_box_btn_div_span"
|
||||
v-html="renderedTitle(item.title)"
|
||||
:style="{
|
||||
fontSize: `${fotSize * bi}px`,
|
||||
left: `${22 * bi}px`,
|
||||
width: `${190 * bi}px`,
|
||||
height: `${(fotSize * spanWrap + 7) * bi}px`,
|
||||
}"
|
||||
/>
|
||||
<img
|
||||
class="subject_box_btn_div_line"
|
||||
src="/subject/subject_line.png"
|
||||
:style="{
|
||||
top: `${((fotSize / 2) * getWrap(item.title) - (fotSize / 2) * (spanWrap - 1) - 7) * bi}px`,
|
||||
left: `${52 * bi}px`,
|
||||
width: `${128 * bi}px`,
|
||||
height: `${7 * bi}px`,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="circle arc1"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
top: `${92 * bi}px`,
|
||||
left: `${117 * bi}px`,
|
||||
width: `${126 * bi}px`,
|
||||
height: `${126 * bi}px`,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="circle arc2"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
top: `${92 * bi}px`,
|
||||
left: `${117 * bi}px`,
|
||||
width: `${126 * bi}px`,
|
||||
height: `${126 * bi}px`,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="circle arc3"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
top: `${92 * bi}px`,
|
||||
left: `${117 * bi}px`,
|
||||
width: `${126 * bi}px`,
|
||||
height: `${126 * bi}px`,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="circle arc4"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
top: `${92 * bi}px`,
|
||||
left: `${117 * bi}px`,
|
||||
width: `${126 * bi}px`,
|
||||
height: `${126 * bi}px`,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="subject_box_overflow">
|
||||
<Icon
|
||||
style="font-size: 31px"
|
||||
class="subject_box_overflow_icon1"
|
||||
icon="ant-design:up-outlined"
|
||||
@click="scrollToElement('top')"
|
||||
/>
|
||||
<Icon
|
||||
style="font-size: 31px"
|
||||
class="subject_box_overflow_icon2"
|
||||
icon="ant-design:down-outlined"
|
||||
@click="scrollToElement('bottom')"
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="subject_bottom">
|
||||
<!-- <span>
|
||||
{{ t('sys.subject.bottom_copyright') }}
|
||||
|
|
||||
{{ t('sys.subject.bottom_support') }}
|
||||
|
|
||||
{{ t('sys.subject.bottom_version') }}
|
||||
</span> -->
|
||||
<span>
|
||||
{{
|
||||
VITE_GLOB_APP_MANAGEMENT_UNIT
|
||||
? VITE_GLOB_APP_MANAGEMENT_UNIT
|
||||
: t('sys.subject.bottom_copyright')
|
||||
}}
|
||||
|
|
||||
{{
|
||||
VITE_GLOB_APP_TECHINICAL_SUPPORT
|
||||
? VITE_GLOB_APP_TECHINICAL_SUPPORT
|
||||
: t('sys.subject.bottom_support')
|
||||
}}
|
||||
|
|
||||
{{ VITE_GLOB_APP_VERSIONS ? VITE_GLOB_APP_VERSIONS : t('sys.subject.bottom_version') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { getSpecialData } from '@/api/demo/system';
|
||||
import { onMounted, onUnmounted, ref, nextTick, computed, watchEffect } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
import { useI18n } from '@/hooks/web/useI18n';
|
||||
import { PageEnum } from '@/enums/pageEnum';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const {
|
||||
VITE_GLOB_API_URL,
|
||||
VITE_GLOB_APP_MANAGEMENT_UNIT,
|
||||
VITE_GLOB_APP_TECHINICAL_SUPPORT,
|
||||
VITE_GLOB_APP_VERSIONS,
|
||||
} = getAppEnvConfig();
|
||||
const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');
|
||||
const { t } = useI18n();
|
||||
|
||||
const loginUser: any = ref('');
|
||||
const contentArea = ref<HTMLElement | null>(null);
|
||||
const list: any = ref([]);
|
||||
const userStore = useUserStore();
|
||||
const spanWrap = ref(1);
|
||||
|
||||
async function getData() {
|
||||
const res: any = await getSpecialData();
|
||||
// 最大标题文字行数
|
||||
res?.forEach((item) => {
|
||||
if (Math.ceil(item.title.length / 6) > spanWrap.value) {
|
||||
spanWrap.value = Math.ceil(item.title.length / 6);
|
||||
}
|
||||
});
|
||||
list.value = res;
|
||||
loginUser.value = localStorage.getItem('fireUserLoginName');
|
||||
// cardRotationLoop();
|
||||
}
|
||||
// 旋转动画
|
||||
async function cardRotationLoop() {
|
||||
nextTick(() => {
|
||||
list.value.forEach((item, index) => {
|
||||
setTimeout(() => {
|
||||
const element: any = document.getElementById(item.id);
|
||||
element.classList.remove('cardRotationState');
|
||||
element.classList.add('cardRotation');
|
||||
setTimeout(() => {
|
||||
element.classList.add('cardRotationState');
|
||||
}, 5000);
|
||||
if (index == list.value.length - 1) {
|
||||
setTimeout(() => {
|
||||
cardRotationLoop();
|
||||
}, 8000);
|
||||
}
|
||||
}, index * 8000);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 按键控制滚动条
|
||||
const scrollToElement = async (type) => {
|
||||
if (contentArea.value) {
|
||||
if (type == 'top' && contentArea.value.scrollTop != 0) {
|
||||
contentArea.value.scrollTop = contentArea.value.scrollTop - 344;
|
||||
}
|
||||
if (type == 'bottom' && contentArea.value.scrollTop != contentArea.value.scrollHeight) {
|
||||
contentArea.value.scrollTop = contentArea.value.scrollTop + 344;
|
||||
}
|
||||
}
|
||||
};
|
||||
// 跳转
|
||||
async function getHome(item) {
|
||||
console.log(window.innerWidth);
|
||||
if (!item.isDevelop) {
|
||||
message.warn(item.title + '系统暂未开放！');
|
||||
return;
|
||||
}
|
||||
if (item.isExternal) {
|
||||
if (item.linkOrApi) {
|
||||
window.location.href = item.linkOrApi;
|
||||
} else {
|
||||
message.warn('系统外部链接未配置！');
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (!item.linkOrApi) {
|
||||
item.linkOrApi = PageEnum.WELCOME_HOME;
|
||||
}
|
||||
userStore.setSubject(item.id, item.title, item.logoTitle, item.linkOrApi);
|
||||
}
|
||||
}
|
||||
// 获取图片地址
|
||||
function getImageUrl(imgUrl) {
|
||||
if (imgUrl) {
|
||||
return VITE_GLOB_API_URL_VAR.value + imgUrl;
|
||||
} else {
|
||||
return '/subject/subject_default.png';
|
||||
}
|
||||
}
|
||||
// 标题换行
|
||||
function renderedTitle(name) {
|
||||
return `${name.replace(/\s/g, '<br />')}`;
|
||||
}
|
||||
// 标题的行数
|
||||
function getWrap(name) {
|
||||
return Math.ceil(name.length / 6);
|
||||
}
|
||||
// 退出系统
|
||||
function handleLoginOut() {
|
||||
userStore.confirmLoginOut();
|
||||
}
|
||||
// 分辨率
|
||||
const viewportWidth = ref(window.innerWidth);
|
||||
const viewportHeight = ref(window.innerHeight);
|
||||
const referenceWidth = 1920;
|
||||
const referenceHeight = 1080;
|
||||
const fotSize = ref(28);
|
||||
|
||||
// 计算不同数量的选项卡的布局属性
|
||||
function getBoxBtnAttribute() {
|
||||
let box: any = [];
|
||||
box[0] = 80;
|
||||
box[1] = 85;
|
||||
box[2] = 700;
|
||||
box[3] = 1750;
|
||||
box[4] = 12;
|
||||
// if (list.value.length <= 7) {
|
||||
// box[0] = 80;
|
||||
// box[1] = 85;
|
||||
// box[2] = 700;
|
||||
// box[3] = 1750;
|
||||
// box[4] = 12;
|
||||
// }
|
||||
// if (list.value.length == 8) {
|
||||
// box[0] = 80;
|
||||
// box[1] = 185;
|
||||
// box[2] = 700;
|
||||
// box[3] = 1550;
|
||||
// box[4] = 50;
|
||||
// }
|
||||
// if (list.value.length == 9 || list.value.length == 10) {
|
||||
// box[0] = 80;
|
||||
// box[1] = 135;
|
||||
// box[2] = 700;
|
||||
// box[3] = 1650;
|
||||
// box[4] = 50;
|
||||
// }
|
||||
// if (list.value.length == 11 || list.value.length == 12) {
|
||||
// box[0] = 80;
|
||||
// box[1] = 85;
|
||||
// box[2] = 700;
|
||||
// box[3] = 1750;
|
||||
// box[4] = 30;
|
||||
// }
|
||||
// if (list.value.length == 13 || list.value.length == 14) {
|
||||
// box[0] = 80;
|
||||
// box[1] = 85;
|
||||
// box[2] = 700;
|
||||
// box[3] = 1750;
|
||||
// box[4] = 12;
|
||||
// }
|
||||
return box;
|
||||
}
|
||||
|
||||
const updateWindowSize = () => {
|
||||
viewportWidth.value = window.innerWidth;
|
||||
viewportHeight.value = window.innerHeight;
|
||||
};
|
||||
|
||||
const bi = computed(() => {
|
||||
return viewportWidth.value / referenceWidth;
|
||||
});
|
||||
|
||||
// 时间和天气
|
||||
const currentTime_year = ref(dayjs().locale('zh-cn').format('YYYY年M月D日'));
|
||||
const currentTime_week = ref(dayjs().locale('zh-cn').format('dddd'));
|
||||
const currentTime_date = ref(dayjs().locale('zh-cn').format('HH:mm:ss'));
|
||||
|
||||
function updateTime() {
|
||||
currentTime_year.value = dayjs().locale('zh-cn').format('YYYY年M月D日');
|
||||
currentTime_week.value = dayjs().locale('zh-cn').format('dddd');
|
||||
currentTime_date.value = dayjs().locale('zh-cn').format('HH:mm:ss');
|
||||
}
|
||||
|
||||
// 监听每一秒更新时间
|
||||
watchEffect(() => {
|
||||
const intervalId = setInterval(updateTime, 1000);
|
||||
// 清除定时器
|
||||
onUnmounted(() => clearInterval(intervalId));
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
window.addEventListener('resize', updateWindowSize);
|
||||
updateWindowSize(); // 初始化视口尺寸
|
||||
updateTime();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', updateWindowSize);
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.subject {
|
||||
background-image: url('/subject/subject_bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
// 页面不能被选中
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE/Edge */
|
||||
user-select: none;
|
||||
|
||||
&_header {
|
||||
&_title {
|
||||
span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
font-family: 068-SSZhengYaTi;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
font-weight: 900 !important;
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
}
|
||||
|
||||
&_currentTime {
|
||||
position: absolute;
|
||||
left: 87px;
|
||||
top: 0px;
|
||||
height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
&_date {
|
||||
font-family: DIN;
|
||||
font-weight: bold;
|
||||
font-size: 26px;
|
||||
color: #ffffff;
|
||||
line-height: 26px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&_div {
|
||||
position: relative;
|
||||
top: -7px;
|
||||
width: 100px;
|
||||
height: 12px;
|
||||
font-family: DIN;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
line-height: 12px;
|
||||
display: block;
|
||||
|
||||
div {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_adminAndLogout {
|
||||
position: absolute;
|
||||
right: 87px;
|
||||
top: 0px;
|
||||
height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
}
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
height: 14px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #006cff;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_box {
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: -82px;
|
||||
|
||||
&_btn {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
// 隐藏滚动条
|
||||
-ms-overflow-style: none; /* IE 和 Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari, Opera */
|
||||
}
|
||||
|
||||
&_div {
|
||||
// 弹性子元素（flex item）的弹性行为
|
||||
flex: 0 0 auto;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
// 定义旋转
|
||||
// 设置透视距离
|
||||
perspective: 1000px;
|
||||
// 添加过渡效果
|
||||
transition: transform 1s;
|
||||
// 定义旋转动画
|
||||
// animation: cardRotation 5s linear infinite;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(150%);
|
||||
cursor: pointer;
|
||||
box-shadow: 20px 10px 10px rgba(0, 0, 0, 0.5);
|
||||
|
||||
// 定义旋转
|
||||
// 暂停动画
|
||||
animation-play-state: paused;
|
||||
// 过渡效果
|
||||
transition: transform 1s ease;
|
||||
// 立即回到正面
|
||||
transform: rotateY(0deg) !important;
|
||||
}
|
||||
|
||||
&_bg {
|
||||
height: 324px;
|
||||
}
|
||||
|
||||
&_url {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 11px;
|
||||
width: 191px;
|
||||
height: 191px;
|
||||
}
|
||||
|
||||
&_span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
// top: -300px;
|
||||
left: 12px;
|
||||
width: 190px;
|
||||
// 字体样式
|
||||
font-size: 28px;
|
||||
|
||||
font-family: 'Microsoft YaHei';
|
||||
color: #ffffff;
|
||||
background: linear-gradient(0deg, #6da7ff 0%, #e2ebff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 900 !important;
|
||||
}
|
||||
|
||||
&_line {
|
||||
position: relative;
|
||||
left: 42px;
|
||||
width: 128px;
|
||||
height: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// &_overflow {
|
||||
// position: absolute;
|
||||
// top: 220px;
|
||||
// right: -110px;
|
||||
// height: 300px;
|
||||
// width: 110px;
|
||||
|
||||
// &_icon1 {
|
||||
// color: #006cff;
|
||||
// cursor: pointer;
|
||||
// position: relative;
|
||||
// top: 100px;
|
||||
// right: 85px;
|
||||
// }
|
||||
|
||||
// &_icon2 {
|
||||
// color: #006cff;
|
||||
// cursor: pointer;
|
||||
// position: relative;
|
||||
// top: 200px;
|
||||
// right: 115px;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
&_bottom {
|
||||
span {
|
||||
width: 902px;
|
||||
height: 18px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #5eb2ff;
|
||||
}
|
||||
position: absolute;
|
||||
top: 95%;
|
||||
left: calc(50% - 902px / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// 四条旋转的弧线
|
||||
.circle {
|
||||
transform-origin: 50% 50%;
|
||||
width: 126px;
|
||||
height: 126px;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
border: 3px solid #276fff;
|
||||
}
|
||||
|
||||
.arc1 {
|
||||
position: relative;
|
||||
// top: -142px;
|
||||
left: 108px;
|
||||
clip-path: inset(0 55% 55% 0);
|
||||
animation: rotateArc1 8s linear infinite;
|
||||
}
|
||||
|
||||
.arc2 {
|
||||
position: relative;
|
||||
top: -268px;
|
||||
left: 108px;
|
||||
clip-path: inset(55% 0 0 55%);
|
||||
transform: rotate(90deg);
|
||||
animation: rotateArc2 8s linear infinite;
|
||||
}
|
||||
|
||||
.arc3 {
|
||||
position: relative;
|
||||
top: -394px;
|
||||
left: 108px;
|
||||
clip-path: inset(0 55% 55% 0);
|
||||
transform: rotate(180deg);
|
||||
animation: rotateArc3 8s linear infinite;
|
||||
}
|
||||
|
||||
.arc4 {
|
||||
position: relative;
|
||||
top: -520px;
|
||||
left: 108px;
|
||||
clip-path: inset(55% 0 0 55%);
|
||||
transform: rotate(270deg);
|
||||
animation: rotateArc4 8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotateArc1 {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateArc2 {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(90deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(450deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateArc3 {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(180deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(540deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateArc4 {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(270deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(630deg);
|
||||
}
|
||||
}
|
||||
// 开启旋转动画
|
||||
.cardRotation {
|
||||
animation: cardRotation 5s linear infinite;
|
||||
}
|
||||
// 关闭旋转动画
|
||||
.cardRotationState {
|
||||
animation-play-state: paused;
|
||||
transition: transform 3s ease;
|
||||
transform: rotateY(0deg) !important;
|
||||
}
|
||||
// 定义旋转动画
|
||||
@keyframes cardRotation {
|
||||
0% {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateY(-360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 21px;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<LoginFormTitle class="login_title" />
|
||||
<Form
|
||||
<a-form
|
||||
class="p-4 enter-x"
|
||||
:model="formData"
|
||||
:rules="getFormRules"
|
||||
|
|
@ -35,7 +35,11 @@
|
|||
|
||||
<ARow>
|
||||
<ACol :span="12">
|
||||
<FormItem>
|
||||
<FormItem
|
||||
:style="{
|
||||
'text-align': 'left',
|
||||
}"
|
||||
>
|
||||
<Checkbox v-model:checked="rememberMe" size="small">
|
||||
{{ t('sys.login.rememberMe') }}
|
||||
</Checkbox>
|
||||
|
|
@ -54,12 +58,12 @@
|
|||
</ACol>
|
||||
</ARow>
|
||||
|
||||
<FormItem>
|
||||
<Button size="large" block @click="handleLogin" :loading="loading" class="logon">
|
||||
<a-form-item>
|
||||
<a-button size="large" block @click="handleLogin" :loading="loading" class="logon">
|
||||
立即登录
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div class="bottom" v-if="getShow">
|
||||
<Button type="link" block size="small" @click="setLoginState(LoginStateEnum.REGISTER)">
|
||||
<template #icon>
|
||||
|
|
@ -181,7 +185,7 @@
|
|||
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 21px;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@
|
|||
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 21px;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue