linquan
1 month ago
21 changed files with 1224 additions and 538 deletions
@ -1,283 +1,291 @@
|
||||
<template> |
||||
<div class="game-maintenance-container"> |
||||
<el-card shadow="hover" header="登录公告"> |
||||
<div class="mb15"> |
||||
<el-form class="flex-warp" label-position="right" :model="formLabelAlign"> |
||||
<el-form-item label="关键词：" prop="content"> |
||||
<el-input type="text" v-model="tableData.param.content" placeholder="请输入内容" |
||||
style="width: 200px"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="now" label="公告类型："> |
||||
<el-select v-model="tableData.param.noticeType"> |
||||
<el-option v-for="item in noticeTypes" |
||||
:key="item.Id" |
||||
:label="item.Name" |
||||
:value="item.Id"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="发送时间："> |
||||
<el-date-picker v-model="tableData.param.times" type="datetimerange" range-separator="至" |
||||
start-placeholder="开始日期" end-placeholder="结束日期"/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="getNotice">查找</el-button> |
||||
</el-form-item> |
||||
<el-table :data="tableData.datas" style="width: 100%" stripe |
||||
:row-class-name="onTableRowClassName" border> |
||||
<el-table-column width="150" label="公告类型"> |
||||
<template #default="scope"> |
||||
<span>{{ noticeTypes.find(r => r.Id == scope.row.noticeType).Name }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="content" label="公告内容" show-overflow-tooltip> |
||||
<template #default="scope"> |
||||
<span type="text" @click="alertContent(scope.row.content)">{{ scope.row.content }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="cDate" label="发送时间"> |
||||
<template #default="scope"> |
||||
{{ scope.row.cDate }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="times" label="发送状态"> |
||||
<template #default="scope"> |
||||
{{ scope.row.sendTime < new Date().getTime() ? "已发送" : "未发送" }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="times" label="渠道"> |
||||
<template #default="scope"> |
||||
{{ channels.find(r => r.value == scope.row.channel) ? channels.find(r => r.value == scope.row.channel).label : scope.row.channel }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="times" label="区服"> |
||||
<template #default="scope"> |
||||
{{ servers.find(r => r.value == scope.row.serverId) ? servers.find(r => r.value == scope.row.serverId).name : scope.row.serverId }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="uids" label="指定发送用户" show-overflow-tooltip> |
||||
<template #default="scope"> |
||||
<span type="text" @click="alertContent(scope.row.uids)">{{ scope.row.uids }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #default="scope"> |
||||
<el-button size="small" type="danger" @click="noticeDel(scope.row.id)">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-form> |
||||
<el-row justify="space-evenly"> |
||||
<el-pagination :hide-on-single-page="true" :page-size="tableData.param.pageSize" |
||||
:pager-count="5" @current-change="handleCurrentChange" |
||||
layout="total, prev, pager, next, jumper" |
||||
:total="tableData.total"/> |
||||
</el-row> |
||||
</div> |
||||
</el-card> |
||||
<div class="game-maintenance-container"> |
||||
<el-card shadow="hover" header="登录公告"> |
||||
<div class="mb15"> |
||||
<el-form class="flex-warp" label-position="right" :model="formLabelAlign"> |
||||
<el-form-item label="关键词：" prop="content"> |
||||
<el-input type="text" v-model="tableData.param.content" placeholder="请输入内容" style="width: 200px"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="now" label="公告类型："> |
||||
<el-select v-model="tableData.param.noticeType"> |
||||
<el-option v-for="item in noticeTypes" :key="item.Id" :label="item.Name" :value="item.Id"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="发送时间："> |
||||
<el-date-picker |
||||
v-model="tableData.param.times" |
||||
type="datetimerange" |
||||
range-separator="至" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="getNotice">查找</el-button> |
||||
</el-form-item> |
||||
<el-table :data="tableData.datas" style="width: 100%" stripe :row-class-name="onTableRowClassName" border> |
||||
<el-table-column width="150" label="公告类型"> |
||||
<template #default="scope"> |
||||
<span>{{ noticeTypes.find((r) => r.Id == scope.row.noticeType).Name }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="content" label="公告内容" show-overflow-tooltip> |
||||
<template #default="scope"> |
||||
<span type="text" @click="alertContent(scope.row.content)">{{ scope.row.content }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="cDate" label="发送时间"> |
||||
<template #default="scope"> |
||||
{{ scope.row.cDate }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="times" label="发送状态"> |
||||
<template #default="scope"> |
||||
{{ scope.row.sendTime < new Date().getTime() ? '已发送' : '未发送' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="times" label="渠道"> |
||||
<template #default="scope"> |
||||
{{ |
||||
channels.find((r) => r.value == scope.row.channel) ? channels.find((r) => r.value == scope.row.channel).label : scope.row.channel |
||||
}} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="times" label="区服"> |
||||
<template #default="scope"> |
||||
<div v-if="!scope.row.serverId">所有区服</div> |
||||
<div v-else>{{ servers.find((r) => r.id == scope.row.serverId) ? servers.find((r) => r.id == scope.row.serverId).name : scope.row.serverId }}</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="uids" label="指定发送用户" show-overflow-tooltip> |
||||
<template #default="scope"> |
||||
<span type="text" @click="alertContent(scope.row.uids)">{{ scope.row.uids }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column> |
||||
<template #default="scope"> |
||||
<el-button size="small" type="danger" @click="noticeDel(scope.row.id)">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-form> |
||||
<el-row justify="space-evenly"> |
||||
<el-pagination |
||||
:hide-on-single-page="true" |
||||
:page-size="tableData.param.pageSize" |
||||
:pager-count="5" |
||||
@current-change="handleCurrentChange" |
||||
layout="total, prev, pager, next, jumper" |
||||
:total="tableData.total" |
||||
/> |
||||
</el-row> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<el-dialog v-model="contentVisible" :close-on-click-modal="false" center> |
||||
<p v-html="tableData.content"></p> |
||||
<template #footer> |
||||
<div class="dialog-footer"> |
||||
<el-button type="primary" @click="copyContent"> |
||||
复制 |
||||
</el-button> |
||||
</div> |
||||
</template> |
||||
</el-dialog> |
||||
</div> |
||||
<el-dialog v-model="contentVisible" :close-on-click-modal="false" center> |
||||
<p v-html="tableData.content"></p> |
||||
<template #footer> |
||||
<div class="dialog-footer"> |
||||
<el-button type="primary" @click="copyContent"> 复制</el-button> |
||||
</div> |
||||
</template> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts"> |
||||
import {toRefs, reactive, onMounted, defineComponent} from 'vue'; |
||||
import {gameNoticeLog, gameNoticeDel} from "/@/api/game"; |
||||
import {ElMessage} from "element-plus/es"; |
||||
import {allChannelList, serverList} from "/@/utils/game"; |
||||
import {contentReplace} from "/@/utils/utils"; |
||||
import {Notice_Type} from "/@/api/common/consts"; |
||||
import { toRefs, reactive, onMounted, defineComponent } from 'vue'; |
||||
import { gameNoticeLog, gameNoticeDel } from '/@/api/game'; |
||||
import { ElMessage } from 'element-plus/es'; |
||||
import { allChannelList, serverList } from '/@/utils/game'; |
||||
import { contentReplace } from '/@/utils/utils'; |
||||
import { Notice_Type } from '/@/api/common/consts'; |
||||
|
||||
interface TableDataState{ |
||||
tableData: { |
||||
copyContent: string |
||||
content: string |
||||
datas: object[] |
||||
param: { |
||||
channel: string, |
||||
content: string |
||||
noticeType: number |
||||
id: number, |
||||
noticeId: number, |
||||
pageNum: number, |
||||
pageSize: number, |
||||
times: object[], |
||||
beginTime: number, |
||||
endTime: number, |
||||
}; |
||||
total: number |
||||
}; |
||||
noticeTypes: object[] |
||||
channels: object |
||||
servers: object[] |
||||
contentVisible: boolean |
||||
interface TableDataState { |
||||
tableData: { |
||||
copyContent: string; |
||||
content: string; |
||||
datas: object[]; |
||||
param: { |
||||
channel: string; |
||||
content: string; |
||||
noticeType: number; |
||||
id: number; |
||||
noticeId: number; |
||||
pageNum: number; |
||||
pageSize: number; |
||||
times: object[]; |
||||
beginTime: number; |
||||
endTime: number; |
||||
}; |
||||
total: number; |
||||
}; |
||||
noticeTypes: object[]; |
||||
channels: object; |
||||
servers: object[]; |
||||
contentVisible: boolean; |
||||
} |
||||
|
||||
export default defineComponent({ |
||||
name: 'apiV1GameNoticeLog', |
||||
setup(){ |
||||
// const {proxy} = getCurrentInstance() as any; |
||||
const state = reactive<TableDataState>({ |
||||
tableData: { |
||||
copyContent: "", |
||||
content: "", |
||||
datas: [], |
||||
param: { |
||||
content: "", |
||||
noticeType: 0, |
||||
channel: "0", |
||||
id: 0, |
||||
noticeId: 0, |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
times: [], |
||||
beginTime: 0, |
||||
endTime: 0, |
||||
}, |
||||
total: 0 |
||||
}, |
||||
channels: [], |
||||
servers: [], |
||||
contentVisible: false, |
||||
noticeTypes: Notice_Type |
||||
}); |
||||
const noticeDel = (id: number) => { |
||||
gameNoticeDel({id: id}).then(() => { |
||||
ElMessage.success('删除成功'); |
||||
getNotice(); |
||||
}).finally(() => { |
||||
// state.loading = false; |
||||
}) |
||||
}; |
||||
const noticeCopy = (value: string) => { |
||||
// 创建输入框元素 |
||||
let oInput = document.createElement("input"); |
||||
// 将想要复制的值 |
||||
oInput.value = value; |
||||
// 页面底部追加输入框 |
||||
document.body.appendChild(oInput); |
||||
// 选中输入框 |
||||
oInput.select(); |
||||
// 执行浏览器复制命令 |
||||
document.execCommand("Copy"); |
||||
// 弹出复制成功信息 |
||||
ElMessage.success('复制成功'); |
||||
// 复制后移除输入框 |
||||
oInput.remove(); |
||||
}; |
||||
const getNotice = () => { |
||||
console.log(state.tableData.param); |
||||
name: 'apiV1GameNoticeLog', |
||||
setup() { |
||||
// const {proxy} = getCurrentInstance() as any; |
||||
const state = reactive<TableDataState>({ |
||||
tableData: { |
||||
copyContent: '', |
||||
content: '', |
||||
datas: [], |
||||
param: { |
||||
content: '', |
||||
noticeType: 0, |
||||
channel: '0', |
||||
id: 0, |
||||
noticeId: 0, |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
times: [], |
||||
beginTime: 0, |
||||
endTime: 0, |
||||
}, |
||||
total: 0, |
||||
}, |
||||
channels: [], |
||||
servers: [], |
||||
contentVisible: false, |
||||
noticeTypes: Notice_Type, |
||||
}); |
||||
const noticeDel = (id: number) => { |
||||
gameNoticeDel({ id: id }) |
||||
.then(() => { |
||||
ElMessage.success('删除成功'); |
||||
getNotice(); |
||||
}) |
||||
.finally(() => { |
||||
// state.loading = false; |
||||
}); |
||||
}; |
||||
const noticeCopy = (value: string) => { |
||||
// 创建输入框元素 |
||||
let oInput = document.createElement('input'); |
||||
// 将想要复制的值 |
||||
oInput.value = value; |
||||
// 页面底部追加输入框 |
||||
document.body.appendChild(oInput); |
||||
// 选中输入框 |
||||
oInput.select(); |
||||
// 执行浏览器复制命令 |
||||
document.execCommand('Copy'); |
||||
// 弹出复制成功信息 |
||||
ElMessage.success('复制成功'); |
||||
// 复制后移除输入框 |
||||
oInput.remove(); |
||||
}; |
||||
const getNotice = () => { |
||||
console.log(state.tableData.param); |
||||
|
||||
if(state.tableData.param.times[0]){ |
||||
state.tableData.param.beginTime = state.tableData.param.times[0].getTime(); |
||||
state.tableData.param.endTime = state.tableData.param.times[1].getTime(); |
||||
} |
||||
if (state.tableData.param.times[0]) { |
||||
state.tableData.param.beginTime = state.tableData.param.times[0].getTime(); |
||||
state.tableData.param.endTime = state.tableData.param.times[1].getTime(); |
||||
} |
||||
|
||||
// console.log("Notice: ", state.tableData.param); |
||||
gameNoticeLog(state.tableData.param).then((res: any) => { |
||||
console.log(res); |
||||
state.tableData.datas = res.data.noticeLog; |
||||
state.tableData.total = res.data.total; |
||||
}); |
||||
}; |
||||
// 页面加载时 |
||||
onMounted(() => { |
||||
serverList().then().then(res => { |
||||
state.servers = res; |
||||
}) |
||||
allChannelList().then(res => { |
||||
state.channels = res; |
||||
}); |
||||
getNotice() |
||||
// console.log("Notice: ", state.tableData.param); |
||||
gameNoticeLog(state.tableData.param).then((res: any) => { |
||||
console.log(res); |
||||
state.tableData.datas = res.data.noticeLog; |
||||
state.tableData.total = res.data.total; |
||||
}); |
||||
}; |
||||
// 页面加载时 |
||||
onMounted(() => { |
||||
serverList() |
||||
.then() |
||||
.then((res) => { |
||||
state.servers = res; |
||||
}); |
||||
allChannelList().then((res) => { |
||||
state.channels = res; |
||||
}); |
||||
getNotice(); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
const handleClose = (done: () => void) => { |
||||
// ElMessageBox.confirm('确定退出编辑模板页面？').then(() => { |
||||
done() |
||||
// }).catch(() => { |
||||
// catch error |
||||
// }) |
||||
}; |
||||
const onTableRowClassName = ({row, rowIndex}: any) => { |
||||
console.log("onTableRowClassName", row, rowIndex); |
||||
if(row.Day % 2 == 0 || row.day % 2 == 0){ |
||||
return 'warning-row'; |
||||
}else{ |
||||
return ''; |
||||
} |
||||
}; |
||||
const handleCurrentChange = (val: number) => { |
||||
console.log(`current page: ${val}`); |
||||
state.tableData.param.pageNum = val; |
||||
// listStall(state.modelType); |
||||
getNotice(); |
||||
}; |
||||
const alertContent = (val: string) => { |
||||
state.contentVisible = true; |
||||
state.tableData.copyContent = val; |
||||
state.tableData.content = contentReplace(val); |
||||
// console.log(`current page: ${val}`); |
||||
}; |
||||
const copyContent = () => { |
||||
noticeCopy(state.tableData.copyContent); |
||||
console.log(`current page: ${state.tableData.copyContent}`); |
||||
}; |
||||
return { |
||||
copyContent, |
||||
getNotice, |
||||
noticeDel, |
||||
handleClose, |
||||
onTableRowClassName, |
||||
handleCurrentChange, |
||||
alertContent, |
||||
...toRefs(state), |
||||
}; |
||||
}, |
||||
const handleClose = (done: () => void) => { |
||||
// ElMessageBox.confirm('确定退出编辑模板页面？').then(() => { |
||||
done(); |
||||
// }).catch(() => { |
||||
// catch error |
||||
// }) |
||||
}; |
||||
const onTableRowClassName = ({ row, rowIndex }: any) => { |
||||
console.log('onTableRowClassName', row, rowIndex); |
||||
if (row.Day % 2 == 0 || row.day % 2 == 0) { |
||||
return 'warning-row'; |
||||
} else { |
||||
return ''; |
||||
} |
||||
}; |
||||
const handleCurrentChange = (val: number) => { |
||||
console.log(`current page: ${val}`); |
||||
state.tableData.param.pageNum = val; |
||||
// listStall(state.modelType); |
||||
getNotice(); |
||||
}; |
||||
const alertContent = (val: string) => { |
||||
state.contentVisible = true; |
||||
state.tableData.copyContent = val; |
||||
state.tableData.content = contentReplace(val); |
||||
// console.log(`current page: ${val}`); |
||||
}; |
||||
const copyContent = () => { |
||||
noticeCopy(state.tableData.copyContent); |
||||
console.log(`current page: ${state.tableData.copyContent}`); |
||||
}; |
||||
return { |
||||
copyContent, |
||||
getNotice, |
||||
noticeDel, |
||||
handleClose, |
||||
onTableRowClassName, |
||||
handleCurrentChange, |
||||
alertContent, |
||||
...toRefs(state), |
||||
}; |
||||
}, |
||||
}); |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
.my-header { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
gap: 16px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
gap: 16px; |
||||
} |
||||
|
||||
.tree-border { |
||||
margin-top: 5px; |
||||
border: 1px solid #e5e6e7 !important; |
||||
background: #fff none !important; |
||||
border-radius: 4px; |
||||
margin-top: 5px; |
||||
border: 1px solid #e5e6e7 !important; |
||||
background: #fff none !important; |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
.system-edit-post-container { |
||||
.menu-data-tree { |
||||
border: var(--el-input-border, var(--el-border-base)); |
||||
border-radius: var(--el-input-border-radius, var(--el-border-radius-base)); |
||||
padding: 5px; |
||||
} |
||||
.menu-data-tree { |
||||
border: var(--el-input-border, var(--el-border-base)); |
||||
border-radius: var(--el-input-border-radius, var(--el-border-radius-base)); |
||||
padding: 5px; |
||||
} |
||||
} |
||||
|
||||
.el-form-item { |
||||
display: -moz-flex; |
||||
vertical-align: middle; |
||||
margin-right: 32px; |
||||
display: -moz-flex; |
||||
vertical-align: middle; |
||||
margin-right: 32px; |
||||
} |
||||
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td { |
||||
background: #ffffd5; |
||||
background: #ffffd5; |
||||
} |
||||
|
||||
::v-deep .el-table .el-table--enable-row-hover .el-table__body tr:hover > td { |
||||
background: inherit; |
||||
background: inherit; |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,296 @@
|
||||
<template> |
||||
<div class="game-maintenance-container"> |
||||
<el-form shadow="hover" label-width="90px"> |
||||
<el-card header="排行榜"> |
||||
<el-form :inline="true"> |
||||
<el-form-item label="选择服务器" prop="serverId"> |
||||
<el-select v-model="serverSwitch" class="m-2" placeholder="选择服务器" size="large" style="width: 80px"> |
||||
<el-option v-for="item in serverCategorize" :key="item.value" :label="item.label" :value="item.value" /> |
||||
</el-select> |
||||
<el-select v-model="queryParams.serverId" class="m-2" placeholder="选择服务器" size="large" filterable> |
||||
<el-option v-for="item in switchServer()" :key="item.id + ''" :label="item.name" :value="item.id + ''" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="累充" prop="rechargeTotal"> |
||||
<el-input v-model="queryParams.rechargeTotal" placeholder="请填写累充" class="w-50 m-2" clearable> |
||||
<template #prepend> |
||||
<el-select v-model="queryParams.compareType" class="m-2" placeholder="" size="default" style="width: 80px"> |
||||
<el-option v-for="item in tableData.compareType" :key="item.value" :label="item.label" :value="item.value" /> |
||||
</el-select> |
||||
</template> |
||||
</el-input> |
||||
</el-form-item> |
||||
<el-form-item label="uid" prop="uid"> |
||||
<el-input v-model="queryParams.uid" placeholder="请填写uid" class="w-50 m-2" clearable></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="桃花石" prop="stoneAmount"> |
||||
<el-input v-model="queryParams.stoneAmount" placeholder="请填写桃花石" class="w-50 m-2" clearable></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="代金券" prop="vouchersNum"> |
||||
<el-input v-model="queryParams.vouchersNum" placeholder="请填写代金券" class="w-50 m-2" clearable></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="状态" prop="state"> |
||||
<el-select v-model="queryParams.state" class="m-2" placeholder="选择状态" size="large"> |
||||
<el-option label="登录" :value="1" /> |
||||
<el-option label="登出" :value="2" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="起始日期" prop="startTime"> |
||||
<el-date-picker type="datetime" size="large" v-model="queryParams.cDate" format="YYYY-MM-DD HH:mm:ss" value-format="x" /> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button size="default" type="primary" class="ml10" @click="onList"> |
||||
<el-icon> |
||||
<ele-Search /> |
||||
</el-icon> |
||||
查询 |
||||
</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
<el-table :data="tableData.loginOutData" style="width: 100%" stripe border> |
||||
<el-table-column type="index" label="序号" width="80" /> |
||||
<el-table-column prop="uid" label="uid"></el-table-column> |
||||
<el-table-column prop="baseFood" label="基础食物" show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="copper" label="铜币" show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="goldIngot" label="金币" show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="prosperity" label="繁荣度" show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="scale" label="规模" show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="vouchersNum" label="代金券" show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="stoneAmount" label="桃花石" show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="rechargeTotal" label="累充" show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="state" label="状态" width="80"> |
||||
<template #default="scope"> |
||||
<el-tag type="success" v-if="scope.row.state === 1">登录</el-tag> |
||||
<el-tag type="info" v-else>登出</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="Name" label="游戏时间" width="150"> |
||||
<template #default="scope"> {{ scope.row.day }} 天 {{ scope.row.gameTime }} 时间</template> |
||||
</el-table-column> |
||||
<el-table-column prop="server" label="区服" width="120"> |
||||
<template #default="scope"> |
||||
<span>{{ servers.find((r) => r.id == scope.row.server)?.name }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="cDate" label="记录时间" width="165"></el-table-column> |
||||
</el-table> |
||||
<el-row justify="space-evenly"> |
||||
<el-pagination |
||||
:hide-on-single-page="true" |
||||
v-model:page-size="queryParams.pageSize" |
||||
v-model:current-page="queryParams.pageNum" |
||||
:pager-count="5" |
||||
layout="total, prev, pager, next" |
||||
:total="queryParams.total" |
||||
@current-change="onList" |
||||
/> |
||||
</el-row> |
||||
</el-card> |
||||
</el-form> |
||||
</div> |
||||
</template> |
||||
<script lang="ts"> |
||||
import { reactive, toRefs, defineComponent, onMounted } from 'vue'; |
||||
import { gameLoginOutGm } from '/@/api/game'; |
||||
import { ElLoading } from 'element-plus'; |
||||
import { serverList, ServerCategorize, CompareType } from '/@/utils/game'; |
||||
import { gSwitchServer } from '/@/utils/utils'; |
||||
|
||||
interface TableDataState { |
||||
queryParams: { |
||||
uid: number; |
||||
id: number; |
||||
serverId: number; |
||||
pageSize: number; |
||||
pageNum: number; |
||||
total: number; |
||||
name: string; |
||||
account: string; |
||||
state: number; |
||||
compareType: number; |
||||
rechargeTotal: number; |
||||
stoneAmount: number; |
||||
vouchersNum: number; |
||||
cDate: string; |
||||
}; |
||||
tableData: { |
||||
loginOutData: object[]; |
||||
compareType: object; |
||||
}; |
||||
servers: object[]; |
||||
serverSwitch: number; |
||||
serverCategorize: object[]; |
||||
} |
||||
|
||||
export default defineComponent({ |
||||
name: 'apiV1GameRoleLogInfoGm', |
||||
setup: function () { |
||||
const state = reactive<TableDataState>({ |
||||
queryParams: { |
||||
uid: '', |
||||
id: '', |
||||
account: '', |
||||
serverId: '', |
||||
name: '', |
||||
pageSize: 10, |
||||
pageNum: 0, |
||||
total: 0, |
||||
state: '', |
||||
compareType: 5, |
||||
rechargeTotal: '', |
||||
stoneAmount: '', |
||||
vouchersNum: '', |
||||
cDate: '', |
||||
}, |
||||
tableData: { |
||||
loginOutData: [], |
||||
compareType: CompareType, |
||||
}, |
||||
serverSwitch: 0, |
||||
servers: [], |
||||
serverCategorize: ServerCategorize, |
||||
}); |
||||
|
||||
const onList = () => { |
||||
const loading = ElLoading.service({ |
||||
lock: true, |
||||
text: 'Loading', |
||||
background: 'rgba(0, 0, 0, 0.7)', |
||||
}); |
||||
state.tableData.loginOutData = []; |
||||
gameLoginOutGm(state.queryParams) |
||||
.then((res) => { |
||||
if (!res.data.logs || res.data.logs.length == 0) { |
||||
// ElMessage.error('未查询到登录登出信息！'); |
||||
|
||||
return; |
||||
} |
||||
console.log('loginOut: ', res.dat2); |
||||
state.queryParams.total = res.data.total; |
||||
state.queryParams.total = res.data.total; |
||||
state.tableData.loginOutData = res.data.logs; |
||||
}) |
||||
.finally((res) => { |
||||
loading.close(); |
||||
}); |
||||
}; |
||||
// 页面加载时 |
||||
onMounted(() => { |
||||
serverList().then((res) => { |
||||
state.servers = res; |
||||
}); |
||||
}); |
||||
|
||||
const switchServer = () => { |
||||
return gSwitchServer(state.serverSwitch, state.servers); |
||||
}; |
||||
return { |
||||
switchServer, |
||||
onList, |
||||
...toRefs(state), |
||||
}; |
||||
}, |
||||
}); |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.el-table { |
||||
--el-table-border-color: var(--el-border-color-lighter); |
||||
--el-table-border: 0px solid var(--el-table-border-color); |
||||
} |
||||
|
||||
::v-deep .table-style { |
||||
margin-top: -15px; |
||||
padding-top: -20px; |
||||
} |
||||
|
||||
::v-deep .el-table .el-table__cell { |
||||
padding: 0; |
||||
margin-left: -20px; |
||||
min-width: 0; |
||||
box-sizing: border-box; |
||||
text-overflow: ellipsis; |
||||
vertical-align: middle; |
||||
position: relative; |
||||
text-align: left; |
||||
z-index: 1; |
||||
} |
||||
|
||||
.tree-border { |
||||
margin-top: 5px; |
||||
border: 1px solid #e5e6e7 !important; |
||||
background: #fff none !important; |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
.system-edit-post-container { |
||||
.menu-data-tree { |
||||
border: var(--el-input-border, var(--el-border-base)); |
||||
border-radius: var(--el-input-border-radius, var(--el-border-radius-base)); |
||||
padding: 5px; |
||||
} |
||||
} |
||||
|
||||
.editable-cell__input { |
||||
display: inline; |
||||
width: 10%; |
||||
|
||||
.el-input__inner { |
||||
padding: 0 8px; |
||||
font-size: 12px; |
||||
} |
||||
} |
||||
|
||||
/*.table-left-block {*/ |
||||
/* margin-left: 0px;*/ |
||||
/*}*/ |
||||
|
||||
.left-block { |
||||
margin-left: -20px; |
||||
} |
||||
|
||||
.table-num-left { |
||||
margin-left: -85px; |
||||
} |
||||
|
||||
.num-left { |
||||
margin-left: -30px; |
||||
} |
||||
|
||||
.table-item { |
||||
margin-top: 10px; |
||||
margin-bottom: -10px; |
||||
} |
||||
|
||||
.title-label-block { |
||||
margin-left: -20px; |
||||
} |
||||
|
||||
.label-block { |
||||
padding-left: 10px; |
||||
} |
||||
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td { |
||||
background: #ffffd5; |
||||
} |
||||
|
||||
.warning-row { |
||||
background: #ffffd5; |
||||
} |
||||
|
||||
::v-deep .warning-row .el-table__body tr { |
||||
background-color: #ffffd5; |
||||
} |
||||
|
||||
::v-deep .warning-row .el-table--enable-row-hover .el-table__body tr:hover > td { |
||||
background-color: inherit; |
||||
} |
||||
|
||||
::v-deep .warning-row .el-table__cell { |
||||
background-color: #ffffd5; |
||||
} |
||||
|
||||
::v-deep .tableCell { |
||||
margin-left: -15px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,183 @@
|
||||
<template> |
||||
<el-form ref="loginForm" size="large" class="login-content-form" :model="ruleForm"> |
||||
<el-form-item class="login-animation1"> |
||||
<el-input type="text" :placeholder="$t('message.email.placeholder1')" v-model="ruleForm.userName" clearable autocomplete="off"> |
||||
<template #prefix> |
||||
<el-icon class="el-input__icon"> |
||||
<ele-Message /> |
||||
</el-icon> |
||||
</template> |
||||
</el-input> |
||||
</el-form-item> |
||||
<el-form-item class="login-animation2"> |
||||
<el-col :span="15"> |
||||
<el-input type="text" maxlength="6" :placeholder="$t('message.email.placeholder2')" v-model="ruleForm.code" clearable autocomplete="off"> |
||||
<template #prefix> |
||||
<el-icon class="el-input__icon"> |
||||
<ele-Position /> |
||||
</el-icon> |
||||
</template> |
||||
</el-input> |
||||
</el-col> |
||||
<el-col :span="1"></el-col> |
||||
<el-col :span="8"> |
||||
<el-button class="login-content-code" @click="smsCode">{{ $t('message.email.codeText') }}</el-button> |
||||
</el-col> |
||||
</el-form-item> |
||||
<el-form-item class="login-animation3"> |
||||
<el-button round type="primary" class="login-content-submit" @click="sendSms"> |
||||
<span>{{ $t('message.email.btnText') }}</span> |
||||
</el-button> |
||||
</el-form-item> |
||||
<!-- <div class="font12 mt30 login-animation4 login-msg">{{ $t('message.email.msgText') }}</div>--> |
||||
</el-form> |
||||
</template> |
||||
|
||||
<script lang="ts"> |
||||
import { toRefs, reactive, defineComponent, getCurrentInstance, computed, onMounted } from 'vue'; |
||||
import { emailCode, loginEmail } from '/@/api/login'; |
||||
import { Session } from '/@/utils/storage'; |
||||
import { initFrontEndControlRoutes } from '/@/router/frontEnd'; |
||||
import { initBackEndControlRoutes } from '/@/router/backEnd'; |
||||
import { useI18n } from 'vue-i18n'; |
||||
import { useStore } from '/@/store'; |
||||
import { useRoute, useRouter } from 'vue-router'; |
||||
import { ElMessage } from 'element-plus'; |
||||
import { formatAxis } from '/@/utils/formatTime'; |
||||
import initIconfont from '/@/utils/getStyleSheets'; |
||||
|
||||
export default defineComponent({ |
||||
name: 'loginMobile', |
||||
setup() { |
||||
const { t } = useI18n(); |
||||
const store = useStore(); |
||||
const route = useRoute(); |
||||
const router = useRouter(); |
||||
const { proxy } = <any>getCurrentInstance(); |
||||
const state = reactive({ |
||||
ruleForm: { |
||||
userName: '', |
||||
code: '', |
||||
}, |
||||
loading: { |
||||
signIn: false, |
||||
}, |
||||
}); |
||||
// 时间获取 |
||||
const currentTime = computed(() => { |
||||
return formatAxis(new Date()); |
||||
}); |
||||
const sendSms = () => { |
||||
proxy.$refs.loginForm |
||||
.validate((valid: boolean) => { |
||||
if (valid) { |
||||
loginEmail(state.ruleForm) |
||||
.then(async (res) => { |
||||
console.log(res); |
||||
const userInfos = res.data.userInfo; |
||||
userInfos.avatar = proxy.getUpFileUrl(userInfos.avatar); |
||||
// 存储 token 到浏览器缓存 |
||||
Session.set('token', res.data.token); |
||||
// 存储用户信息到浏览器缓存 |
||||
Session.set('userInfo', userInfos); |
||||
// 设置用户菜单 |
||||
Session.set('userMenu', res.data.menuList); |
||||
// 设置按钮权限 |
||||
Session.set('permissions', res.data.permissions); |
||||
// 1、请注意执行顺序(存储用户信息到vuex) |
||||
await store.dispatch('userInfos/setUserInfos', userInfos); |
||||
await store.dispatch('userInfos/setPermissions', res.data.permissions); |
||||
if (!store.state.themeConfig.themeConfig.isRequestRoutes) { |
||||
// 前端控制路由，2、请注意执行顺序 |
||||
await initFrontEndControlRoutes(); |
||||
signInSuccess(); |
||||
} else { |
||||
// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由 |
||||
// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/" |
||||
await initBackEndControlRoutes(); |
||||
// 执行完 initBackEndControlRoutes，再执行 signInSuccess |
||||
signInSuccess(); |
||||
} |
||||
}) |
||||
.catch(() => { |
||||
state.loading.signIn = false; |
||||
}); |
||||
} |
||||
}) |
||||
.catch(() => {}); |
||||
}; |
||||
// 登录成功后的跳转 |
||||
const signInSuccess = () => { |
||||
// 初始化登录成功时间问候语 |
||||
let currentTimeInfo = currentTime.value; |
||||
// 登录成功，跳到转首页 |
||||
// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/" |
||||
// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中 |
||||
if (route.query?.redirect) { |
||||
router.push({ |
||||
path: <string>route.query?.redirect, |
||||
query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '', |
||||
}); |
||||
} else { |
||||
router.push('/'); |
||||
} |
||||
// 登录成功提示 |
||||
// 关闭 loading |
||||
state.loading.signIn = false; |
||||
const signInText = t('message.signInText'); |
||||
ElMessage.success(`${currentTimeInfo}，${signInText}`); |
||||
}; |
||||
const smsCode = () => { |
||||
console.log(state.ruleForm); |
||||
emailCode(state.ruleForm).then((res) => { |
||||
console.log(res); |
||||
}); |
||||
}; |
||||
onMounted(() => { |
||||
initGetStyleSheets(); |
||||
}); |
||||
const initGetStyleSheets = () => { |
||||
initIconfont.ali().then((res: any) => { |
||||
// state.sheetsIconList = res; |
||||
console.log(res); |
||||
}); |
||||
}; |
||||
return { |
||||
sendSms, |
||||
smsCode, |
||||
...toRefs(state), |
||||
}; |
||||
}, |
||||
}); |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.login-content-form { |
||||
margin-top: 20px; |
||||
@for $i from 1 through 4 { |
||||
.login-animation#{$i} { |
||||
opacity: 0; |
||||
animation-name: error-num; |
||||
animation-duration: 0.5s; |
||||
animation-fill-mode: forwards; |
||||
animation-delay: calc($i/10) + s; |
||||
} |
||||
} |
||||
|
||||
.login-content-code { |
||||
width: 100%; |
||||
padding: 0; |
||||
} |
||||
|
||||
.login-content-submit { |
||||
width: 100%; |
||||
letter-spacing: 2px; |
||||
font-weight: 300; |
||||
margin-top: 15px; |
||||
} |
||||
|
||||
.login-msg { |
||||
color: var(--el-text-color-placeholder); |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,209 +1,216 @@
|
||||
<template> |
||||
<div class="login-container"> |
||||
<div class="login-content-out"> |
||||
<div class="login-content"> |
||||
<div class="login-content-main"> |
||||
<div class="login-icon-group"> |
||||
<div class="login-icon-group-title"> |
||||
<img :src="logoMini"/> |
||||
<div class="login-icon-group-title-text font25">{{ getThemeConfig.globalViceTitle }} |
||||
<div class="font15">{{ getThemeConfig.globalSubheading }}</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
<div v-if="!isScan"> |
||||
<el-tabs v-model="tabsActiveName"> |
||||
<el-tab-pane :label="$t('message.label.one1')" name="account"> |
||||
<Account/> |
||||
</el-tab-pane> |
||||
<el-tab-pane :label="$t('message.label.two2')" name="mobile"> |
||||
<Mobile/> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
<!-- <Scan v-if="isScan" />--> |
||||
<!-- <div class="login-content-main-sacn" @click="isScan = !isScan">--> |
||||
<!-- <i class="iconfont" :class="isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>--> |
||||
<!-- <div class="login-content-main-sacn-delta"></div>--> |
||||
<!-- </div>--> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="login-footer"> |
||||
<div class="login-footer-content mt15"> |
||||
<div class="login-footer-content-warp"> |
||||
<div>Copyright © 2021-2023 g-fast.cn All Rights Reserved.</div> |
||||
<div class="mt5">厦门二维塔科技有限公司版权所有</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="login-container"> |
||||
<div class="login-content-out"> |
||||
<div class="login-content"> |
||||
<div class="login-content-main"> |
||||
<div class="login-icon-group"> |
||||
<div class="login-icon-group-title"> |
||||
<img :src="logoMini" /> |
||||
<div class="login-icon-group-title-text font25"> |
||||
{{ getThemeConfig.globalViceTitle }} |
||||
<div class="font15">{{ getThemeConfig.globalSubheading }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div v-if="!isScan"> |
||||
<el-tabs v-model="tabsActiveName"> |
||||
<el-tab-pane :label="$t('message.label.one1')" name="account"> |
||||
<Account /> |
||||
</el-tab-pane> |
||||
<el-tab-pane :label="$t('message.label.two2')" name="mobile"> |
||||
<Mobile /> |
||||
</el-tab-pane> |
||||
<el-tab-pane :label="$t('message.label.three3')" name="email"> |
||||
<Email /> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
<!-- <Scan v-if="isScan" />--> |
||||
<!-- <div class="login-content-main-sacn" @click="isScan = !isScan">--> |
||||
<!-- <i class="iconfont" :class="isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>--> |
||||
<!-- <div class="login-content-main-sacn-delta"></div>--> |
||||
<!-- </div>--> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="login-footer"> |
||||
<div class="login-footer-content mt15"> |
||||
<div class="login-footer-content-warp"> |
||||
<div>Copyright © 2021-2023 g-fast.cn All Rights Reserved.</div> |
||||
<div class="mt5">厦门二维塔科技有限公司版权所有</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- <Iocnfonts />--> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts"> |
||||
import {toRefs, reactive, computed, defineComponent} from 'vue'; |
||||
import Account from '/@/views/login/component/account.vue'; |
||||
import Mobile from '/@/views/login/component/mobile.vue'; |
||||
import {useStore} from '/@/store/index'; |
||||
import logoMini from '/@/assets/ico.webp'; |
||||
|
||||
// 定义接口来定义对象的类型 |
||||
interface LoginState{ |
||||
tabsActiveName: string; |
||||
isScan: boolean; |
||||
} |
||||
|
||||
export default defineComponent({ |
||||
name: 'loginIndex', |
||||
components: {Account, Mobile}, |
||||
setup(){ |
||||
const store = useStore(); |
||||
const state = reactive<LoginState>({ |
||||
tabsActiveName: 'account', |
||||
isScan: false, |
||||
}); |
||||
// 获取布局配置信息 |
||||
const getThemeConfig = computed(() => { |
||||
return store.state.themeConfig.themeConfig; |
||||
}); |
||||
return { |
||||
logoMini, |
||||
getThemeConfig, |
||||
...toRefs(state), |
||||
}; |
||||
}, |
||||
}); |
||||
import { toRefs, reactive, computed, defineComponent } from 'vue'; |
||||
import Account from '/@/views/login/component/account.vue'; |
||||
import Mobile from '/@/views/login/component/mobile.vue'; |
||||
import Email from '/@/views/login/component/email.vue'; |
||||
// import Iocnfonts from '/@/views/pages/iocnfont/index.vue'; |
||||
import { useStore } from '/@/store/index'; |
||||
import logoMini from '/@/assets/ico.webp'; |
||||
|
||||
// 定义接口来定义对象的类型 |
||||
interface LoginState { |
||||
tabsActiveName: string; |
||||
isScan: boolean; |
||||
} |
||||
|
||||
export default defineComponent({ |
||||
name: 'loginIndex', |
||||
components: { Account, Mobile, Email }, |
||||
setup() { |
||||
const store = useStore(); |
||||
const state = reactive<LoginState>({ |
||||
tabsActiveName: 'account', |
||||
isScan: false, |
||||
}); |
||||
// 获取布局配置信息 |
||||
const getThemeConfig = computed(() => { |
||||
return store.state.themeConfig.themeConfig; |
||||
}); |
||||
|
||||
return { |
||||
logoMini, |
||||
getThemeConfig, |
||||
...toRefs(state), |
||||
}; |
||||
}, |
||||
}); |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.login-container { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: relative; |
||||
background-image: url("/@/assets/bg.jpg"); |
||||
background-size: cover; |
||||
|
||||
.login-icon-group { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: relative; |
||||
|
||||
.login-icon-group-title { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
img { |
||||
width: 80px; |
||||
height: 70px; |
||||
} |
||||
|
||||
&-text { |
||||
padding-left: 5px; |
||||
color: var(--el-color-primary); |
||||
} |
||||
} |
||||
|
||||
&-icon { |
||||
width: 60%; |
||||
height: 70%; |
||||
position: absolute; |
||||
left: 0; |
||||
bottom: 0; |
||||
} |
||||
} |
||||
|
||||
.login-content-out { |
||||
width: 100%; |
||||
height: 100%; |
||||
padding-top: 150px; |
||||
} |
||||
|
||||
.login-content { |
||||
width: 500px; |
||||
padding: 20px; |
||||
margin: auto; |
||||
background-color: var(--el-color-white); |
||||
border: 5px solid var(--el-color-primary-light-8); |
||||
border-radius: 5px; |
||||
overflow: hidden; |
||||
z-index: 1; |
||||
position: relative; |
||||
|
||||
.login-content-main { |
||||
margin: 0 auto; |
||||
width: 80%; |
||||
|
||||
.login-content-title { |
||||
color: var(--el-text-color-primary); |
||||
font-weight: 500; |
||||
font-size: 22px; |
||||
text-align: center; |
||||
letter-spacing: 4px; |
||||
margin: 15px 0 30px; |
||||
white-space: nowrap; |
||||
z-index: 5; |
||||
position: relative; |
||||
transition: all 0.3s ease; |
||||
} |
||||
} |
||||
|
||||
.login-content-main-sacn { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
width: 50px; |
||||
height: 50px; |
||||
overflow: hidden; |
||||
cursor: pointer; |
||||
transition: all ease 0.3s; |
||||
color: var(--el-text-color-primary); |
||||
|
||||
&-delta { |
||||
position: absolute; |
||||
width: 35px; |
||||
height: 70px; |
||||
z-index: 2; |
||||
top: 2px; |
||||
right: 21px; |
||||
background: var(--el-color-white); |
||||
transform: rotate(-45deg); |
||||
} |
||||
|
||||
&:hover { |
||||
opacity: 1; |
||||
transition: all ease 0.3s; |
||||
color: var(--el-color-primary) !important; |
||||
} |
||||
|
||||
i { |
||||
width: 47px; |
||||
height: 50px; |
||||
display: inline-block; |
||||
font-size: 48px; |
||||
position: absolute; |
||||
right: 2px; |
||||
top: -1px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.login-footer { |
||||
position: absolute; |
||||
bottom: 5px; |
||||
width: 100%; |
||||
|
||||
&-content { |
||||
width: 100%; |
||||
display: flex; |
||||
|
||||
&-warp { |
||||
margin: auto; |
||||
color: #e0e3e9; |
||||
text-align: center; |
||||
animation: error-num 1s ease-in-out; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.login-container { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: relative; |
||||
background-image: url('/@/assets/bg.jpg'); |
||||
background-size: cover; |
||||
|
||||
.login-icon-group { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: relative; |
||||
|
||||
.login-icon-group-title { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
img { |
||||
width: 80px; |
||||
height: 70px; |
||||
} |
||||
|
||||
&-text { |
||||
padding-left: 5px; |
||||
color: var(--el-color-primary); |
||||
} |
||||
} |
||||
|
||||
&-icon { |
||||
width: 60%; |
||||
height: 70%; |
||||
position: absolute; |
||||
left: 0; |
||||
bottom: 0; |
||||
} |
||||
} |
||||
|
||||
.login-content-out { |
||||
width: 100%; |
||||
height: 100%; |
||||
padding-top: 150px; |
||||
} |
||||
|
||||
.login-content { |
||||
width: 500px; |
||||
padding: 20px; |
||||
margin: auto; |
||||
background-color: var(--el-color-white); |
||||
border: 5px solid var(--el-color-primary-light-8); |
||||
border-radius: 5px; |
||||
overflow: hidden; |
||||
z-index: 1; |
||||
position: relative; |
||||
|
||||
.login-content-main { |
||||
margin: 0 auto; |
||||
width: 80%; |
||||
|
||||
.login-content-title { |
||||
color: var(--el-text-color-primary); |
||||
font-weight: 500; |
||||
font-size: 22px; |
||||
text-align: center; |
||||
letter-spacing: 4px; |
||||
margin: 15px 0 30px; |
||||
white-space: nowrap; |
||||
z-index: 5; |
||||
position: relative; |
||||
transition: all 0.3s ease; |
||||
} |
||||
} |
||||
|
||||
.login-content-main-sacn { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
width: 50px; |
||||
height: 50px; |
||||
overflow: hidden; |
||||
cursor: pointer; |
||||
transition: all ease 0.3s; |
||||
color: var(--el-text-color-primary); |
||||
|
||||
&-delta { |
||||
position: absolute; |
||||
width: 35px; |
||||
height: 70px; |
||||
z-index: 2; |
||||
top: 2px; |
||||
right: 21px; |
||||
background: var(--el-color-white); |
||||
transform: rotate(-45deg); |
||||
} |
||||
|
||||
&:hover { |
||||
opacity: 1; |
||||
transition: all ease 0.3s; |
||||
color: var(--el-color-primary) !important; |
||||
} |
||||
|
||||
i { |
||||
width: 47px; |
||||
height: 50px; |
||||
display: inline-block; |
||||
font-size: 48px; |
||||
position: absolute; |
||||
right: 2px; |
||||
top: -1px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.login-footer { |
||||
position: absolute; |
||||
bottom: 5px; |
||||
width: 100%; |
||||
|
||||
&-content { |
||||
width: 100%; |
||||
display: flex; |
||||
|
||||
&-warp { |
||||
margin: auto; |
||||
color: #e0e3e9; |
||||
text-align: center; |
||||
animation: error-num 1s ease-in-out; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue