linquan
1 month ago
21 changed files with 1224 additions and 538 deletions
@ -1,283 +1,291 @@ |
|||||||
<template> |
<template> |
||||||
<div class="game-maintenance-container"> |
<div class="game-maintenance-container"> |
||||||
<el-card shadow="hover" header="登录公告"> |
<el-card shadow="hover" header="登录公告"> |
||||||
<div class="mb15"> |
<div class="mb15"> |
||||||
<el-form class="flex-warp" label-position="right" :model="formLabelAlign"> |
<el-form class="flex-warp" label-position="right" :model="formLabelAlign"> |
||||||
<el-form-item label="关键词：" prop="content"> |
<el-form-item label="关键词：" prop="content"> |
||||||
<el-input type="text" v-model="tableData.param.content" placeholder="请输入内容" |
<el-input type="text" v-model="tableData.param.content" placeholder="请输入内容" style="width: 200px"></el-input> |
||||||
style="width: 200px"></el-input> |
</el-form-item> |
||||||
</el-form-item> |
<el-form-item prop="now" label="公告类型："> |
||||||
<el-form-item prop="now" label="公告类型："> |
<el-select v-model="tableData.param.noticeType"> |
||||||
<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-option v-for="item in noticeTypes" |
</el-select> |
||||||
:key="item.Id" |
</el-form-item> |
||||||
:label="item.Name" |
<el-form-item label="发送时间："> |
||||||
:value="item.Id"></el-option> |
<el-date-picker |
||||||
</el-select> |
v-model="tableData.param.times" |
||||||
</el-form-item> |
type="datetimerange" |
||||||
<el-form-item label="发送时间："> |
range-separator="至" |
||||||
<el-date-picker v-model="tableData.param.times" type="datetimerange" range-separator="至" |
start-placeholder="开始日期" |
||||||
start-placeholder="开始日期" end-placeholder="结束日期"/> |
end-placeholder="结束日期" |
||||||
</el-form-item> |
/> |
||||||
<el-form-item> |
</el-form-item> |
||||||
<el-button type="primary" @click="getNotice">查找</el-button> |
<el-form-item> |
||||||
</el-form-item> |
<el-button type="primary" @click="getNotice">查找</el-button> |
||||||
<el-table :data="tableData.datas" style="width: 100%" stripe |
</el-form-item> |
||||||
:row-class-name="onTableRowClassName" border> |
<el-table :data="tableData.datas" style="width: 100%" stripe :row-class-name="onTableRowClassName" border> |
||||||
<el-table-column width="150" label="公告类型"> |
<el-table-column width="150" label="公告类型"> |
||||||
<template #default="scope"> |
<template #default="scope"> |
||||||
<span>{{ noticeTypes.find(r => r.Id == scope.row.noticeType).Name }}</span> |
<span>{{ noticeTypes.find((r) => r.Id == scope.row.noticeType).Name }}</span> |
||||||
</template> |
</template> |
||||||
</el-table-column> |
</el-table-column> |
||||||
<el-table-column prop="content" label="公告内容" show-overflow-tooltip> |
<el-table-column prop="content" label="公告内容" show-overflow-tooltip> |
||||||
<template #default="scope"> |
<template #default="scope"> |
||||||
<span type="text" @click="alertContent(scope.row.content)">{{ scope.row.content }}</span> |
<span type="text" @click="alertContent(scope.row.content)">{{ scope.row.content }}</span> |
||||||
</template> |
</template> |
||||||
</el-table-column> |
</el-table-column> |
||||||
<el-table-column prop="cDate" label="发送时间"> |
<el-table-column prop="cDate" label="发送时间"> |
||||||
<template #default="scope"> |
<template #default="scope"> |
||||||
{{ scope.row.cDate }} |
{{ scope.row.cDate }} |
||||||
</template> |
</template> |
||||||
</el-table-column> |
</el-table-column> |
||||||
<el-table-column prop="times" label="发送状态"> |
<el-table-column prop="times" label="发送状态"> |
||||||
<template #default="scope"> |
<template #default="scope"> |
||||||
{{ scope.row.sendTime < new Date().getTime() ? "已发送" : "未发送" }} |
{{ scope.row.sendTime < new Date().getTime() ? '已发送' : '未发送' }} |
||||||
</template> |
</template> |
||||||
</el-table-column> |
</el-table-column> |
||||||
<el-table-column prop="times" label="渠道"> |
<el-table-column prop="times" label="渠道"> |
||||||
<template #default="scope"> |
<template #default="scope"> |
||||||
{{ channels.find(r => r.value == scope.row.channel) ? channels.find(r => r.value == scope.row.channel).label : scope.row.channel }} |
{{ |
||||||
</template> |
channels.find((r) => r.value == scope.row.channel) ? channels.find((r) => r.value == scope.row.channel).label : scope.row.channel |
||||||
</el-table-column> |
}} |
||||||
<el-table-column prop="times" label="区服"> |
</template> |
||||||
<template #default="scope"> |
</el-table-column> |
||||||
{{ servers.find(r => r.value == scope.row.serverId) ? servers.find(r => r.value == scope.row.serverId).name : scope.row.serverId }} |
<el-table-column prop="times" label="区服"> |
||||||
</template> |
<template #default="scope"> |
||||||
</el-table-column> |
<div v-if="!scope.row.serverId">所有区服</div> |
||||||
<el-table-column prop="uids" label="指定发送用户" show-overflow-tooltip> |
<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 #default="scope"> |
</template> |
||||||
<span type="text" @click="alertContent(scope.row.uids)">{{ scope.row.uids }}</span> |
</el-table-column> |
||||||
</template> |
<el-table-column prop="uids" label="指定发送用户" show-overflow-tooltip> |
||||||
</el-table-column> |
<template #default="scope"> |
||||||
<el-table-column> |
<span type="text" @click="alertContent(scope.row.uids)">{{ scope.row.uids }}</span> |
||||||
<template #default="scope"> |
</template> |
||||||
<el-button size="small" type="danger" @click="noticeDel(scope.row.id)">删除</el-button> |
</el-table-column> |
||||||
</template> |
<el-table-column> |
||||||
</el-table-column> |
<template #default="scope"> |
||||||
</el-table> |
<el-button size="small" type="danger" @click="noticeDel(scope.row.id)">删除</el-button> |
||||||
</el-form> |
</template> |
||||||
<el-row justify="space-evenly"> |
</el-table-column> |
||||||
<el-pagination :hide-on-single-page="true" :page-size="tableData.param.pageSize" |
</el-table> |
||||||
:pager-count="5" @current-change="handleCurrentChange" |
</el-form> |
||||||
layout="total, prev, pager, next, jumper" |
<el-row justify="space-evenly"> |
||||||
:total="tableData.total"/> |
<el-pagination |
||||||
</el-row> |
:hide-on-single-page="true" |
||||||
</div> |
:page-size="tableData.param.pageSize" |
||||||
</el-card> |
: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> |
<el-dialog v-model="contentVisible" :close-on-click-modal="false" center> |
||||||
<p v-html="tableData.content"></p> |
<p v-html="tableData.content"></p> |
||||||
<template #footer> |
<template #footer> |
||||||
<div class="dialog-footer"> |
<div class="dialog-footer"> |
||||||
<el-button type="primary" @click="copyContent"> |
<el-button type="primary" @click="copyContent"> 复制</el-button> |
||||||
复制 |
</div> |
||||||
</el-button> |
</template> |
||||||
</div> |
</el-dialog> |
||||||
</template> |
</div> |
||||||
</el-dialog> |
|
||||||
</div> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang="ts"> |
<script lang="ts"> |
||||||
import {toRefs, reactive, onMounted, defineComponent} from 'vue'; |
import { toRefs, reactive, onMounted, defineComponent } from 'vue'; |
||||||
import {gameNoticeLog, gameNoticeDel} from "/@/api/game"; |
import { gameNoticeLog, gameNoticeDel } from '/@/api/game'; |
||||||
import {ElMessage} from "element-plus/es"; |
import { ElMessage } from 'element-plus/es'; |
||||||
import {allChannelList, serverList} from "/@/utils/game"; |
import { allChannelList, serverList } from '/@/utils/game'; |
||||||
import {contentReplace} from "/@/utils/utils"; |
import { contentReplace } from '/@/utils/utils'; |
||||||
import {Notice_Type} from "/@/api/common/consts"; |
import { Notice_Type } from '/@/api/common/consts'; |
||||||
|
|
||||||
interface TableDataState{ |
interface TableDataState { |
||||||
tableData: { |
tableData: { |
||||||
copyContent: string |
copyContent: string; |
||||||
content: string |
content: string; |
||||||
datas: object[] |
datas: object[]; |
||||||
param: { |
param: { |
||||||
channel: string, |
channel: string; |
||||||
content: string |
content: string; |
||||||
noticeType: number |
noticeType: number; |
||||||
id: number, |
id: number; |
||||||
noticeId: number, |
noticeId: number; |
||||||
pageNum: number, |
pageNum: number; |
||||||
pageSize: number, |
pageSize: number; |
||||||
times: object[], |
times: object[]; |
||||||
beginTime: number, |
beginTime: number; |
||||||
endTime: number, |
endTime: number; |
||||||
}; |
}; |
||||||
total: number |
total: number; |
||||||
}; |
}; |
||||||
noticeTypes: object[] |
noticeTypes: object[]; |
||||||
channels: object |
channels: object; |
||||||
servers: object[] |
servers: object[]; |
||||||
contentVisible: boolean |
contentVisible: boolean; |
||||||
} |
} |
||||||
|
|
||||||
export default defineComponent({ |
export default defineComponent({ |
||||||
name: 'apiV1GameNoticeLog', |
name: 'apiV1GameNoticeLog', |
||||||
setup(){ |
setup() { |
||||||
// const {proxy} = getCurrentInstance() as any; |
// const {proxy} = getCurrentInstance() as any; |
||||||
const state = reactive<TableDataState>({ |
const state = reactive<TableDataState>({ |
||||||
tableData: { |
tableData: { |
||||||
copyContent: "", |
copyContent: '', |
||||||
content: "", |
content: '', |
||||||
datas: [], |
datas: [], |
||||||
param: { |
param: { |
||||||
content: "", |
content: '', |
||||||
noticeType: 0, |
noticeType: 0, |
||||||
channel: "0", |
channel: '0', |
||||||
id: 0, |
id: 0, |
||||||
noticeId: 0, |
noticeId: 0, |
||||||
pageNum: 1, |
pageNum: 1, |
||||||
pageSize: 10, |
pageSize: 10, |
||||||
times: [], |
times: [], |
||||||
beginTime: 0, |
beginTime: 0, |
||||||
endTime: 0, |
endTime: 0, |
||||||
}, |
}, |
||||||
total: 0 |
total: 0, |
||||||
}, |
}, |
||||||
channels: [], |
channels: [], |
||||||
servers: [], |
servers: [], |
||||||
contentVisible: false, |
contentVisible: false, |
||||||
noticeTypes: Notice_Type |
noticeTypes: Notice_Type, |
||||||
}); |
}); |
||||||
const noticeDel = (id: number) => { |
const noticeDel = (id: number) => { |
||||||
gameNoticeDel({id: id}).then(() => { |
gameNoticeDel({ id: id }) |
||||||
ElMessage.success('删除成功'); |
.then(() => { |
||||||
getNotice(); |
ElMessage.success('删除成功'); |
||||||
}).finally(() => { |
getNotice(); |
||||||
// state.loading = false; |
}) |
||||||
}) |
.finally(() => { |
||||||
}; |
// state.loading = false; |
||||||
const noticeCopy = (value: string) => { |
}); |
||||||
// 创建输入框元素 |
}; |
||||||
let oInput = document.createElement("input"); |
const noticeCopy = (value: string) => { |
||||||
// 将想要复制的值 |
// 创建输入框元素 |
||||||
oInput.value = value; |
let oInput = document.createElement('input'); |
||||||
// 页面底部追加输入框 |
// 将想要复制的值 |
||||||
document.body.appendChild(oInput); |
oInput.value = value; |
||||||
// 选中输入框 |
// 页面底部追加输入框 |
||||||
oInput.select(); |
document.body.appendChild(oInput); |
||||||
// 执行浏览器复制命令 |
// 选中输入框 |
||||||
document.execCommand("Copy"); |
oInput.select(); |
||||||
// 弹出复制成功信息 |
// 执行浏览器复制命令 |
||||||
ElMessage.success('复制成功'); |
document.execCommand('Copy'); |
||||||
// 复制后移除输入框 |
// 弹出复制成功信息 |
||||||
oInput.remove(); |
ElMessage.success('复制成功'); |
||||||
}; |
// 复制后移除输入框 |
||||||
const getNotice = () => { |
oInput.remove(); |
||||||
console.log(state.tableData.param); |
}; |
||||||
|
const getNotice = () => { |
||||||
|
console.log(state.tableData.param); |
||||||
|
|
||||||
if(state.tableData.param.times[0]){ |
if (state.tableData.param.times[0]) { |
||||||
state.tableData.param.beginTime = state.tableData.param.times[0].getTime(); |
state.tableData.param.beginTime = state.tableData.param.times[0].getTime(); |
||||||
state.tableData.param.endTime = state.tableData.param.times[1].getTime(); |
state.tableData.param.endTime = state.tableData.param.times[1].getTime(); |
||||||
} |
} |
||||||
|
|
||||||
// console.log("Notice: ", state.tableData.param); |
// console.log("Notice: ", state.tableData.param); |
||||||
gameNoticeLog(state.tableData.param).then((res: any) => { |
gameNoticeLog(state.tableData.param).then((res: any) => { |
||||||
console.log(res); |
console.log(res); |
||||||
state.tableData.datas = res.data.noticeLog; |
state.tableData.datas = res.data.noticeLog; |
||||||
state.tableData.total = res.data.total; |
state.tableData.total = res.data.total; |
||||||
}); |
}); |
||||||
}; |
}; |
||||||
// 页面加载时 |
// 页面加载时 |
||||||
onMounted(() => { |
onMounted(() => { |
||||||
serverList().then().then(res => { |
serverList() |
||||||
state.servers = res; |
.then() |
||||||
}) |
.then((res) => { |
||||||
allChannelList().then(res => { |
state.servers = res; |
||||||
state.channels = res; |
}); |
||||||
}); |
allChannelList().then((res) => { |
||||||
getNotice() |
state.channels = res; |
||||||
|
}); |
||||||
|
getNotice(); |
||||||
|
}); |
||||||
|
|
||||||
}); |
const handleClose = (done: () => void) => { |
||||||
|
// ElMessageBox.confirm('确定退出编辑模板页面？').then(() => { |
||||||
const handleClose = (done: () => void) => { |
done(); |
||||||
// ElMessageBox.confirm('确定退出编辑模板页面？').then(() => { |
// }).catch(() => { |
||||||
done() |
// catch error |
||||||
// }).catch(() => { |
// }) |
||||||
// catch error |
}; |
||||||
// }) |
const onTableRowClassName = ({ row, rowIndex }: any) => { |
||||||
}; |
console.log('onTableRowClassName', row, rowIndex); |
||||||
const onTableRowClassName = ({row, rowIndex}: any) => { |
if (row.Day % 2 == 0 || row.day % 2 == 0) { |
||||||
console.log("onTableRowClassName", row, rowIndex); |
return 'warning-row'; |
||||||
if(row.Day % 2 == 0 || row.day % 2 == 0){ |
} else { |
||||||
return 'warning-row'; |
return ''; |
||||||
}else{ |
} |
||||||
return ''; |
}; |
||||||
} |
const handleCurrentChange = (val: number) => { |
||||||
}; |
console.log(`current page: ${val}`); |
||||||
const handleCurrentChange = (val: number) => { |
state.tableData.param.pageNum = val; |
||||||
console.log(`current page: ${val}`); |
// listStall(state.modelType); |
||||||
state.tableData.param.pageNum = val; |
getNotice(); |
||||||
// listStall(state.modelType); |
}; |
||||||
getNotice(); |
const alertContent = (val: string) => { |
||||||
}; |
state.contentVisible = true; |
||||||
const alertContent = (val: string) => { |
state.tableData.copyContent = val; |
||||||
state.contentVisible = true; |
state.tableData.content = contentReplace(val); |
||||||
state.tableData.copyContent = val; |
// console.log(`current page: ${val}`); |
||||||
state.tableData.content = contentReplace(val); |
}; |
||||||
// console.log(`current page: ${val}`); |
const copyContent = () => { |
||||||
}; |
noticeCopy(state.tableData.copyContent); |
||||||
const copyContent = () => { |
console.log(`current page: ${state.tableData.copyContent}`); |
||||||
noticeCopy(state.tableData.copyContent); |
}; |
||||||
console.log(`current page: ${state.tableData.copyContent}`); |
return { |
||||||
}; |
copyContent, |
||||||
return { |
getNotice, |
||||||
copyContent, |
noticeDel, |
||||||
getNotice, |
handleClose, |
||||||
noticeDel, |
onTableRowClassName, |
||||||
handleClose, |
handleCurrentChange, |
||||||
onTableRowClassName, |
alertContent, |
||||||
handleCurrentChange, |
...toRefs(state), |
||||||
alertContent, |
}; |
||||||
...toRefs(state), |
}, |
||||||
}; |
|
||||||
}, |
|
||||||
}); |
}); |
||||||
</script> |
</script> |
||||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||||
.my-header { |
.my-header { |
||||||
display: flex; |
display: flex; |
||||||
flex-direction: row; |
flex-direction: row; |
||||||
justify-content: space-between; |
justify-content: space-between; |
||||||
gap: 16px; |
gap: 16px; |
||||||
} |
} |
||||||
|
|
||||||
.tree-border { |
.tree-border { |
||||||
margin-top: 5px; |
margin-top: 5px; |
||||||
border: 1px solid #e5e6e7 !important; |
border: 1px solid #e5e6e7 !important; |
||||||
background: #fff none !important; |
background: #fff none !important; |
||||||
border-radius: 4px; |
border-radius: 4px; |
||||||
} |
} |
||||||
|
|
||||||
.system-edit-post-container { |
.system-edit-post-container { |
||||||
.menu-data-tree { |
.menu-data-tree { |
||||||
border: var(--el-input-border, var(--el-border-base)); |
border: var(--el-input-border, var(--el-border-base)); |
||||||
border-radius: var(--el-input-border-radius, var(--el-border-radius-base)); |
border-radius: var(--el-input-border-radius, var(--el-border-radius-base)); |
||||||
padding: 5px; |
padding: 5px; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.el-form-item { |
.el-form-item { |
||||||
display: -moz-flex; |
display: -moz-flex; |
||||||
vertical-align: middle; |
vertical-align: middle; |
||||||
margin-right: 32px; |
margin-right: 32px; |
||||||
} |
} |
||||||
|
|
||||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td { |
::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 { |
::v-deep .el-table .el-table--enable-row-hover .el-table__body tr:hover > td { |
||||||
background: inherit; |
background: inherit; |
||||||
} |
} |
||||||
</style> |
</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> |
<template> |
||||||
<div class="login-container"> |
<div class="login-container"> |
||||||
<div class="login-content-out"> |
<div class="login-content-out"> |
||||||
<div class="login-content"> |
<div class="login-content"> |
||||||
<div class="login-content-main"> |
<div class="login-content-main"> |
||||||
<div class="login-icon-group"> |
<div class="login-icon-group"> |
||||||
<div class="login-icon-group-title"> |
<div class="login-icon-group-title"> |
||||||
<img :src="logoMini"/> |
<img :src="logoMini" /> |
||||||
<div class="login-icon-group-title-text font25">{{ getThemeConfig.globalViceTitle }} |
<div class="login-icon-group-title-text font25"> |
||||||
<div class="font15">{{ getThemeConfig.globalSubheading }}</div> |
{{ getThemeConfig.globalViceTitle }} |
||||||
</div> |
<div class="font15">{{ getThemeConfig.globalSubheading }}</div> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div v-if="!isScan"> |
<div v-if="!isScan"> |
||||||
<el-tabs v-model="tabsActiveName"> |
<el-tabs v-model="tabsActiveName"> |
||||||
<el-tab-pane :label="$t('message.label.one1')" name="account"> |
<el-tab-pane :label="$t('message.label.one1')" name="account"> |
||||||
<Account/> |
<Account /> |
||||||
</el-tab-pane> |
</el-tab-pane> |
||||||
<el-tab-pane :label="$t('message.label.two2')" name="mobile"> |
<el-tab-pane :label="$t('message.label.two2')" name="mobile"> |
||||||
<Mobile/> |
<Mobile /> |
||||||
</el-tab-pane> |
</el-tab-pane> |
||||||
</el-tabs> |
<el-tab-pane :label="$t('message.label.three3')" name="email"> |
||||||
</div> |
<Email /> |
||||||
<!-- <Scan v-if="isScan" />--> |
</el-tab-pane> |
||||||
<!-- <div class="login-content-main-sacn" @click="isScan = !isScan">--> |
</el-tabs> |
||||||
<!-- <i class="iconfont" :class="isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>--> |
</div> |
||||||
<!-- <div class="login-content-main-sacn-delta"></div>--> |
<!-- <Scan v-if="isScan" />--> |
||||||
<!-- </div>--> |
<!-- <div class="login-content-main-sacn" @click="isScan = !isScan">--> |
||||||
</div> |
<!-- <i class="iconfont" :class="isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>--> |
||||||
</div> |
<!-- <div class="login-content-main-sacn-delta"></div>--> |
||||||
</div> |
<!-- </div>--> |
||||||
<div class="login-footer"> |
</div> |
||||||
<div class="login-footer-content mt15"> |
</div> |
||||||
<div class="login-footer-content-warp"> |
</div> |
||||||
<div>Copyright © 2021-2023 g-fast.cn All Rights Reserved.</div> |
<div class="login-footer"> |
||||||
<div class="mt5">厦门二维塔科技有限公司版权所有</div> |
<div class="login-footer-content mt15"> |
||||||
</div> |
<div class="login-footer-content-warp"> |
||||||
</div> |
<div>Copyright © 2021-2023 g-fast.cn All Rights Reserved.</div> |
||||||
</div> |
<div class="mt5">厦门二维塔科技有限公司版权所有</div> |
||||||
</div> |
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- <Iocnfonts />--> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang="ts"> |
<script lang="ts"> |
||||||
import {toRefs, reactive, computed, defineComponent} from 'vue'; |
import { toRefs, reactive, computed, defineComponent } from 'vue'; |
||||||
import Account from '/@/views/login/component/account.vue'; |
import Account from '/@/views/login/component/account.vue'; |
||||||
import Mobile from '/@/views/login/component/mobile.vue'; |
import Mobile from '/@/views/login/component/mobile.vue'; |
||||||
import {useStore} from '/@/store/index'; |
import Email from '/@/views/login/component/email.vue'; |
||||||
import logoMini from '/@/assets/ico.webp'; |
// 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; |
interface LoginState { |
||||||
} |
tabsActiveName: string; |
||||||
|
isScan: boolean; |
||||||
export default defineComponent({ |
} |
||||||
name: 'loginIndex', |
|
||||||
components: {Account, Mobile}, |
export default defineComponent({ |
||||||
setup(){ |
name: 'loginIndex', |
||||||
const store = useStore(); |
components: { Account, Mobile, Email }, |
||||||
const state = reactive<LoginState>({ |
setup() { |
||||||
tabsActiveName: 'account', |
const store = useStore(); |
||||||
isScan: false, |
const state = reactive<LoginState>({ |
||||||
}); |
tabsActiveName: 'account', |
||||||
// 获取布局配置信息 |
isScan: false, |
||||||
const getThemeConfig = computed(() => { |
}); |
||||||
return store.state.themeConfig.themeConfig; |
// 获取布局配置信息 |
||||||
}); |
const getThemeConfig = computed(() => { |
||||||
return { |
return store.state.themeConfig.themeConfig; |
||||||
logoMini, |
}); |
||||||
getThemeConfig, |
|
||||||
...toRefs(state), |
return { |
||||||
}; |
logoMini, |
||||||
}, |
getThemeConfig, |
||||||
}); |
...toRefs(state), |
||||||
|
}; |
||||||
|
}, |
||||||
|
}); |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||||
.login-container { |
.login-container { |
||||||
width: 100%; |
width: 100%; |
||||||
height: 100%; |
height: 100%; |
||||||
position: relative; |
position: relative; |
||||||
background-image: url("/@/assets/bg.jpg"); |
background-image: url('/@/assets/bg.jpg'); |
||||||
background-size: cover; |
background-size: cover; |
||||||
|
|
||||||
.login-icon-group { |
.login-icon-group { |
||||||
width: 100%; |
width: 100%; |
||||||
height: 100%; |
height: 100%; |
||||||
position: relative; |
position: relative; |
||||||
|
|
||||||
.login-icon-group-title { |
.login-icon-group-title { |
||||||
display: flex; |
display: flex; |
||||||
align-items: center; |
align-items: center; |
||||||
|
|
||||||
img { |
img { |
||||||
width: 80px; |
width: 80px; |
||||||
height: 70px; |
height: 70px; |
||||||
} |
} |
||||||
|
|
||||||
&-text { |
&-text { |
||||||
padding-left: 5px; |
padding-left: 5px; |
||||||
color: var(--el-color-primary); |
color: var(--el-color-primary); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
&-icon { |
&-icon { |
||||||
width: 60%; |
width: 60%; |
||||||
height: 70%; |
height: 70%; |
||||||
position: absolute; |
position: absolute; |
||||||
left: 0; |
left: 0; |
||||||
bottom: 0; |
bottom: 0; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.login-content-out { |
.login-content-out { |
||||||
width: 100%; |
width: 100%; |
||||||
height: 100%; |
height: 100%; |
||||||
padding-top: 150px; |
padding-top: 150px; |
||||||
} |
} |
||||||
|
|
||||||
.login-content { |
.login-content { |
||||||
width: 500px; |
width: 500px; |
||||||
padding: 20px; |
padding: 20px; |
||||||
margin: auto; |
margin: auto; |
||||||
background-color: var(--el-color-white); |
background-color: var(--el-color-white); |
||||||
border: 5px solid var(--el-color-primary-light-8); |
border: 5px solid var(--el-color-primary-light-8); |
||||||
border-radius: 5px; |
border-radius: 5px; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
z-index: 1; |
z-index: 1; |
||||||
position: relative; |
position: relative; |
||||||
|
|
||||||
.login-content-main { |
.login-content-main { |
||||||
margin: 0 auto; |
margin: 0 auto; |
||||||
width: 80%; |
width: 80%; |
||||||
|
|
||||||
.login-content-title { |
.login-content-title { |
||||||
color: var(--el-text-color-primary); |
color: var(--el-text-color-primary); |
||||||
font-weight: 500; |
font-weight: 500; |
||||||
font-size: 22px; |
font-size: 22px; |
||||||
text-align: center; |
text-align: center; |
||||||
letter-spacing: 4px; |
letter-spacing: 4px; |
||||||
margin: 15px 0 30px; |
margin: 15px 0 30px; |
||||||
white-space: nowrap; |
white-space: nowrap; |
||||||
z-index: 5; |
z-index: 5; |
||||||
position: relative; |
position: relative; |
||||||
transition: all 0.3s ease; |
transition: all 0.3s ease; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.login-content-main-sacn { |
.login-content-main-sacn { |
||||||
position: absolute; |
position: absolute; |
||||||
top: 0; |
top: 0; |
||||||
right: 0; |
right: 0; |
||||||
width: 50px; |
width: 50px; |
||||||
height: 50px; |
height: 50px; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
transition: all ease 0.3s; |
transition: all ease 0.3s; |
||||||
color: var(--el-text-color-primary); |
color: var(--el-text-color-primary); |
||||||
|
|
||||||
&-delta { |
&-delta { |
||||||
position: absolute; |
position: absolute; |
||||||
width: 35px; |
width: 35px; |
||||||
height: 70px; |
height: 70px; |
||||||
z-index: 2; |
z-index: 2; |
||||||
top: 2px; |
top: 2px; |
||||||
right: 21px; |
right: 21px; |
||||||
background: var(--el-color-white); |
background: var(--el-color-white); |
||||||
transform: rotate(-45deg); |
transform: rotate(-45deg); |
||||||
} |
} |
||||||
|
|
||||||
&:hover { |
&:hover { |
||||||
opacity: 1; |
opacity: 1; |
||||||
transition: all ease 0.3s; |
transition: all ease 0.3s; |
||||||
color: var(--el-color-primary) !important; |
color: var(--el-color-primary) !important; |
||||||
} |
} |
||||||
|
|
||||||
i { |
i { |
||||||
width: 47px; |
width: 47px; |
||||||
height: 50px; |
height: 50px; |
||||||
display: inline-block; |
display: inline-block; |
||||||
font-size: 48px; |
font-size: 48px; |
||||||
position: absolute; |
position: absolute; |
||||||
right: 2px; |
right: 2px; |
||||||
top: -1px; |
top: -1px; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.login-footer { |
.login-footer { |
||||||
position: absolute; |
position: absolute; |
||||||
bottom: 5px; |
bottom: 5px; |
||||||
width: 100%; |
width: 100%; |
||||||
|
|
||||||
&-content { |
&-content { |
||||||
width: 100%; |
width: 100%; |
||||||
display: flex; |
display: flex; |
||||||
|
|
||||||
&-warp { |
&-warp { |
||||||
margin: auto; |
margin: auto; |
||||||
color: #e0e3e9; |
color: #e0e3e9; |
||||||
text-align: center; |
text-align: center; |
||||||
animation: error-num 1s ease-in-out; |
animation: error-num 1s ease-in-out; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
</style> |
</style> |
||||||
|
|||||||
Loading…
Reference in new issue