ak/zn-admin-vue3-wcs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

登录页面样式修改

Browse Source
This commit is contained in:
yyy 2025-02-25 11:40:52 +08:00
parent 956e25ef01
commit faa5c97def
10 changed files with 235 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.local
View File

@ -4,7 +4,7 @@ NODE_ENV=development
VITE_DEV=true
# 请求路径
VITE_BASE_URL='http://192.168.0.172:48080'
VITE_BASE_URL='http://192.168.0.74:48080'
# VITE_BASE_URL='http://192.168.0.189:48080'
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务

BIN
src/assets/location-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

BIN
src/assets/warehouse-map.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 29 KiB

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

@ -1,19 +1,19 @@
<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%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px login-page"
>
<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 overflow-x-hidden overflow-y-auto`"
:class="`${prefixCls}__left flex-1 bg-opacity-20 relative p-30px lt-xl:hidden overflow-x-hidden overflow-y-auto`"
>
<!-- 左上角的 logo + 系统标题 -->
<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" />
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
</div>
</div> -->
<!-- 左边的背景图 + 欢迎语 -->
<div class="h-[calc(100%-60px)] flex items-center justify-center">
<!-- <div class="h-[calc(100%-60px)] flex items-center justify-center">
<TransitionGroup
appear
enter-active-class="animate__animated animate__bounceInLeft"
@ -25,15 +25,15 @@
{{ t('login.message') }}
</div>
</TransitionGroup>
</div>
</div> -->
</div>
<div
class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px overflow-x-hidden overflow-y-auto"
>
<!-- 右上角的主题、语言选择 -->
<div
<!-- <div
class="flex items-center justify-between at-2xl:justify-end at-xl:justify-end"
style="color: var(--el-text-color-primary);"
style="color: var(--el-text-color-primary)"
>
<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" />
@ -43,7 +43,7 @@
<ThemeSwitch />
<LocaleDropdown />
</div>
</div>
</div> -->
<!-- 右边的登录界面 -->
<Transition appear enter-active-class="animate__animated animate__bounceInRight">
<div
@ -106,7 +106,7 @@ $prefix-cls: #{$namespace}-login;
}
</style>
<style lang="scss">
<style lang="scss" scoped>
.dark .login-form {
.el-divider__text {
background-color: var(--login-bg-color);
@ -116,4 +116,16 @@ $prefix-cls: #{$namespace}-login;
background-color: var(--login-bg-color);
}
}
.login-page {
background-image: url('@/assets/login-bg.png');
/* 让背景图片覆盖整个元素 */
background-size: cover;
/* 让背景图片居中显示 */
background-position: center;
/* 禁止背景图片重复 */
background-repeat: no-repeat;
/* 设置元素的宽度和高度为视口的宽度和高度 */
width: 100vw;
height: 100vh;
}
</style>

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

@ -4,18 +4,19 @@
ref="formLogin"
:model="loginData.loginForm"
:rules="LoginRules"
class="login-form"
label-position="top"
label-width="120px"
size="large"
>
<el-row style="margin-right: -10px; margin-left: -10px">
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-row>
<el-col :span="24">
<el-form-item>
<LoginFormTitle style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<div class="login-form">
<div class="login-tip">欢迎登录</div>
<el-col :span="24">
<el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
<el-input
v-model="loginData.loginForm.tenantName"
@ -26,7 +27,7 @@
/>
</el-form-item>
</el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-col :span="24">
<el-form-item prop="username">
<el-input
v-model="loginData.loginForm.username"
@ -35,7 +36,7 @@
/>
</el-form-item>
</el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-col :span="24">
<el-form-item prop="password">
<el-input
v-model="loginData.loginForm.password"
@ -47,10 +48,7 @@
/>
</el-form-item>
</el-col>
<el-col
:span="24"
style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px"
>
<el-col :span="24" style="margin-top: -10px; margin-bottom: 20px">
<el-form-item>
<el-row justify="space-between" style="width: 100%">
<el-col :span="6">
@ -58,13 +56,17 @@
{{ t('login.remember') }}
</el-checkbox>
</el-col>
<!--
忘记密码
<el-col :offset="6" :span="12">
<el-link style="float: right" type="primary">{{ t('login.forgetPassword') }}</el-link>
</el-col>
<el-link style="float: right" type="primary">{{
t('login.forgetPassword')
}}</el-link>
</el-col> -->
</el-row>
</el-form-item>
</el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-col :span="24">
<el-form-item>
<XButton
:loading="loginLoading"
@ -82,7 +84,9 @@
mode="pop"
@success="handleLogin"
/>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
</div>
<!--
<el-col :span="24" >
<el-form-item>
<el-row :gutter="5" justify="space-between" style="width: 100%">
<el-col :span="8">
@ -110,7 +114,7 @@
</el-form-item>
</el-col>
<el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-col :span="24" >
<el-form-item>
<div class="w-[100%] flex justify-between">
<Icon
@ -126,7 +130,7 @@
</el-form-item>
</el-col>
<el-divider content-position="center">萌新必读</el-divider>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-col :span="24" >
<el-form-item>
<div class="w-[100%] flex justify-between">
<el-link href="https://doc.iocoder.cn/" target="_blank">📚开发指南</el-link>
@ -139,7 +143,7 @@
</el-link>
</div>
</el-form-item>
</el-col>
</el-col> -->
</el-row>
</el-form>
</template>
@ -352,4 +356,26 @@ onMounted(() => {
cursor: pointer;
}
}
.login-form {
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
width: 100%;
background-color: #ffffff;
padding: 40px 42px 32px 42px;
margin-top: 20px;
.login-tip {
margin-bottom: 28px;
margin-left: 10px;
font-family:
PingFangSC,
PingFang SC;
font-weight: 600;
font-size: 18px;
color: #0d162a;
line-height: 22px;
text-align: left;
font-style: normal;
}
}
</style>

13
src/views/Login/components/LoginFormTitle.vue
View File

@ -1,6 +1,7 @@
<template>
<h2 class="enter-x mb-3 text-center text-2xl font-bold xl:text-center xl:text-3xl">
{{ getFormTitle }}
<h2 class="form-title">
<!-- {{ getFormTitle }} -->
RCS智能设备调度系统
</h2>
</template>
<script lang="ts" setup>
@ -24,3 +25,11 @@ const getFormTitle = computed(() => {
return titleObj[unref(getLoginState)]
})
</script>
<style scoped lang="scss">
.form-title {
color: #34335b;
font-size: 44px;
line-height: 62px;
text-align: center;
}
</style>

71
src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue
View File

@ -180,7 +180,6 @@ const submit = async (formEl) => {
form.value.dataJson = ''
} else if (form.value.type === 2) {
//库位点 类型为数组
let list = []
for (let index = 0; index < form.value.layersNumber; index++) {
let item = {
@ -240,7 +239,7 @@ const submit = async (formEl) => {
const equipmentList = ref([]) //用过的设备列表
const open = (item, list) => {
form.value = item
form.value.layersNumber = item.dataList.length || ''
form.value.layersNumber = item.dataList?.length || ''
form.value.deviceId = item?.deviceId || item?.dataObj?.id || ''
form.value.positionMapId = props.positionMapId
equipmentList.value = list
@ -254,30 +253,52 @@ const open = (item, list) => {
}
//类型改变
const typeChange = () => {
if (form.value.type === 1 || form.value.type === 5 || form.value.type === 6) {
form.value.layersNumber = undefined
form.value.dataJson = ''
}
if (form.value.type !== 2 && form.value.type !== 4) {
form.value.direction = undefined
form.value.inDirection = undefined
form.value.outDirection = undefined
}
if (form.value.type === 1) {
form.value.locationDeep = 10
form.value.locationWide = 10
}
if (form.value.type === 5 || form.value.type === 6) {
form.value.locationDeep = 30
form.value.locationWide = 30
}
if (form.value.type !== 2) {
const typeChange = (type) => {
form.value.dataJson = null
form.value.dataObj = {}
form.value.dataList = []
if (type === 1) {
form.value.layersNumber = null
form.value.direction = null
form.value.inDirection = null
form.value.outDirection = null
form.value.locationNumber = null
form.value.locationDeep = 50
form.value.locationWide = 50
form.value.locationDeepPx = 10
form.value.locationWidePx = 10
} else if (type === 2) {
form.value.locationNumber = 1
} else if (type === 3) {
form.value.direction = null
form.value.inDirection = null
form.value.outDirection = null
form.value.locationNumber = null
} else if (type === 4) {
form.value.direction = null
form.value.inDirection = null
form.value.outDirection = null
form.value.locationNumber = null
} else if (type === 5) {
form.value.layersNumber = null
form.value.direction = null
form.value.inDirection = null
form.value.outDirection = null
form.value.locationNumber = null
form.value.locationDeep = 150
form.value.locationWide = 150
form.value.locationDeepPx = 30
form.value.locationWidePx = 30
} else if (type === 6) {
form.value.layersNumber = null
form.value.direction = null
form.value.inDirection = null
form.value.outDirection = null
form.value.locationNumber = null
form.value.locationDeep = 150
form.value.locationWide = 150
form.value.locationDeepPx = 30
form.value.locationWidePx = 30
}
}
//设备切换

1
src/views/mapPage/realTimeMap/components-tool/textFormToolDialog.vue
View File

@ -82,5 +82,6 @@ const emit = defineEmits(['textFormSuccess'])
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
padding: 18px 20px 0 20px;
border-radius: 6px;
z-index: 999;
}
</style>

59
src/views/mapPage/realTimeMap/editMap.vue
View File

@ -331,9 +331,15 @@
border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
}"
/>
</el-tooltip>
</div>
<div
class="node-text"
v-if="item.type === 7 && item.layerSelectionShow"
:style="{
position: 'absolute',
left: item.locationX + 'px',
top: item.locationY + 'px',
color: item.fontColor,
fontSize: item.fontSize + 'px',
fontFamily: item.fontFamily,
@ -342,8 +348,6 @@
>
{{ item.text }}
</div>
</el-tooltip>
</div>
</VueDragResizeRotate>
<div v-if="imgBgObj.width && imgBgObj.height">
@ -604,13 +608,15 @@ const resizeEnd = (locationX, locationY, w, h, item, index) => {
nextTick(() => {
let x = Number(locationX) + Number(item.locationWidePx) / 2
let y = Number(locationY) + Number(item.locationDeepPx) / 2
let actualPoint = disposeEventPoint(x, y)
state.allMapPointInfo[index].locationX = x
state.allMapPointInfo[index].locationY = y
state.allMapPointInfo[index].locationWidePx = w
state.allMapPointInfo[index].locationDeepPx = h
addEditHistory()
state.allMapPointInfo[index].actualLocationX = actualPoint.actualLocationX
state.allMapPointInfo[index].actualLocationY = actualPoint.actualLocationY
//更改路线里的
state.mapRouteList.forEach((route) => {
if (item.id === route.startingPointId) {
route.startPointX = x
@ -629,6 +635,7 @@ const resizeEnd = (locationX, locationY, w, h, item, index) => {
route.actualEndPointY = actualPoint.actualLocationY
}
})
addEditHistory()
})
}
@ -641,9 +648,8 @@ const dragEnd = (locationX, locationY, item, index) => {
let actualPoint = disposeEventPoint(x, y)
state.allMapPointInfo[index].locationX = x
state.allMapPointInfo[index].locationY = y
state.allMapPointInfo[index].actualStartPointX = actualPoint.actualLocationX
state.allMapPointInfo[index].actualStartPointY = actualPoint.actualLocationY
addEditHistory()
state.allMapPointInfo[index].actualLocationX = actualPoint.actualLocationX
state.allMapPointInfo[index].actualLocationY = actualPoint.actualLocationY
//更改路线里的
state.mapRouteList.forEach((route) => {
if (item.id === route.startingPointId) {
@ -663,6 +669,7 @@ const dragEnd = (locationX, locationY, item, index) => {
route.actualEndPointY = actualPoint.actualLocationY
}
})
addEditHistory()
}
// 旋转
const rotateEnd = (angle, item, index) => {
@ -684,11 +691,9 @@ const activatedHandle = (item, index) => {
}
//节点编辑
if (toolbarSwitchType.value === 'editNode') {
if (toolbarSwitchType.value === 'editNode' && item.type !== 7) {
let list = state.allMapPointInfo.filter((item) => item.type === 3)
editNodePropertiesRef.value.open(JSON.parse(JSON.stringify(item)), list)
//取消监听键盘事件
window.removeEventListener('keydown', handleKeyDown)
}
}
//非选中
@ -810,7 +815,7 @@ const handleInputEnd = () => {
angle: 0, //旋转角度
draggable: true, //是否可以拖动
resizable: false, //是否可以调整大小
rotatable: false, //是否可以旋转
rotatable: true, //是否可以旋转
lockAspectRatio: true, //是否锁定比例
mapImageUrl: '', //图片
text: state.inputBoxValue, //文字内容
@ -850,8 +855,6 @@ const submitNodeSuccess = (form) => {
}
})
addEditHistory()
//重新监听键盘事件
window.addEventListener('keydown', handleKeyDown)
}
//工具栏点击
@ -1170,6 +1173,8 @@ const toolbarClick = async (item) => {
break
case 'move':
//移动
moveForm.locationX = state.allMapPointInfo[state.currentItemIndex].locationX
moveForm.locationY = state.allMapPointInfo[state.currentItemIndex].locationY
break
case 'revolve':
break
@ -1310,10 +1315,29 @@ const toolbarClick = async (item) => {
//复制
const replicationNode = () => {
let copyMapItem = state.allMapPointInfo[state.currentItemIndex]
if (copyMapItem.type === 3) {
message.warning('设备不能复制！')
return
}
let locationX = Number(copyMapItem.locationX) + 20
let locationY = Number(copyMapItem.locationY) + 20
let actualPoint = disposeEventPoint(locationX, locationY)
if (copyMapItem.dataList.length > 0) {
copyMapItem.dataList.forEach((item) => {
delete item.id
delete item.locationNo
delete item.mapItemId
})
copyMapItem.dataJson = JSON.stringify(copyMapItem.dataList)
}
if (copyMapItem.dataObj && JSON.stringify(copyMapItem.dataObj) !== '{}') {
delete copyMapItem.dataObj.id
delete copyMapItem.dataObj.positionMapItemId
copyMapItem.dataJson = JSON.stringify(copyMapItem.dataObj)
}
state.copyMapItem = {
positionMapId: copyMapItem.positionMapId,
locationX: locationX,
@ -1774,8 +1798,6 @@ const handleEditRoute = (item, index) => {
state.currentDragTarget.index = index
state.selectedCurve = item
editMapRouteDialogRef.value.open(JSON.parse(JSON.stringify(item)))
//取消监听键盘事件
window.removeEventListener('keydown', handleKeyDown)
}
//单击 选中
const handleChooseRoute = (item, index) => {
@ -1826,7 +1848,6 @@ const editMapRouteDialogSubmit = (form) => {
})
//增加一条历史记录
addEditHistory() //重新监听键盘事件
window.addEventListener('keydown', handleKeyDown)
}
//测距相关
// 计算两点之间的距离
@ -2049,6 +2070,7 @@ const saveNodeList = async () => {
item.dataObj.fontColor = item.fontColor
item.dataObj.fontType = item.fontType
item.dataObj.fontFamily = item.fontFamily
item.dataObj.fontSize = item.fontSize
item.dataObj.rotatable = item.rotatable
item.dataObj.angle = item.angle
//dataJson数据
@ -2063,7 +2085,6 @@ const saveMapRoute = async () => {
}
//筛选图层
const layerSelectionSuccess = (typeList) => {
console.log(typeList)
state.allMapPointInfo.forEach((item) => {
// 如果 type 存在于第一个数组中，则将 layerSelectionShow 设置为 false
if (typeList.includes(item.type)) {
@ -2326,6 +2347,10 @@ onUnmounted(() => {
.right-tool-active {
background: #ebf1ff !important;
}
.node-text {
white-space: nowrap; /* 防止文字自动换行 */
}
}
.drop-down-menu {