修改
This commit is contained in:
parent
c1738a8b33
commit
08134f2f82
@ -24,8 +24,8 @@ export const staticRouter: RouteRecordRaw[] = [
|
||||
{
|
||||
path: "/large",
|
||||
name: "大屏",
|
||||
component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
|
||||
// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
|
||||
// component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
|
||||
component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
|
||||
// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
|
||||
children: [
|
||||
{
|
||||
|
||||
@ -4,21 +4,29 @@
|
||||
<!-- v-show="topDangerList.length > 0" -->
|
||||
<div class="top-statistics" v-show="topDangerList.length > 0">
|
||||
<el-scrollbar class="statistics-listBox" ref="refAlarmScrollbar">
|
||||
<div class="statistics-item" :style="{background: `url(${bgImgSet(index)}) no-repeat`,backgroundSize: '100% 100%'}" v-for="(item,index) in topDangerList" :key="index">
|
||||
<span class="title">{{item.alarmTypeName}}</span>
|
||||
<div
|
||||
class="statistics-item"
|
||||
:style="{
|
||||
background: `url(${bgImgSet(index)}) no-repeat`,
|
||||
backgroundSize: '100% 100%'
|
||||
}"
|
||||
v-for="(item, index) in topDangerList"
|
||||
:key="index"
|
||||
>
|
||||
<span class="title">{{ item.alarmTypeName }}</span>
|
||||
<span class="statistics-item-content">今日报警次数：{{ item.alarmNumToday }}</span>
|
||||
<span class="statistics-item-content">本月报警次数：{{ item.alarmNumMonth }}</span>
|
||||
<span class="statistics-item-content">历史报警次数：{{ item.alarmNum }}</span>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div style="position: relative; height: 180px;" v-if="topDangerList.length == 0">
|
||||
<div style="position: relative; height: 180px" v-if="topDangerList.length == 0">
|
||||
<div class="notoDta">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="table-one">
|
||||
<div class="tabList">
|
||||
<div>序号</div>
|
||||
@ -30,7 +38,7 @@
|
||||
</div>
|
||||
<el-scrollbar class="listBox" ref="refScrollbar">
|
||||
<div v-for="(item, index) in partyMemberList" class="listStyle" :key="item.id">
|
||||
<div>{{index + 1}}</div>
|
||||
<div>{{ index + 1 }}</div>
|
||||
<div class="list-img">
|
||||
<el-image
|
||||
fit="contain"
|
||||
@ -38,17 +46,17 @@
|
||||
:src="BASEURL + '/image/' + item.imageUrl"
|
||||
:preview-src-list="[BASEURL + '/image/' + item.imageUrl]"
|
||||
>
|
||||
<template #error>
|
||||
<el-image :src="noDataImage" :preview-src-list="[noDataImage]" fit="contain" class="el-no-img" alt="" />
|
||||
<template #error>
|
||||
<el-image :src="noDataImage" :preview-src-list="[noDataImage]" fit="contain" class="el-no-img" alt="" />
|
||||
</template>
|
||||
</el-image>
|
||||
<!-- <img :src="item.fieldAcquisitionUrl" alt="" srcset=""> -->
|
||||
</div>
|
||||
<div>{{item.hardwareName}}</div>
|
||||
<div>{{ item.hardwareName }}</div>
|
||||
<div>{{ item.alarmTypeName }}</div>
|
||||
<!-- <div>{{item.alarmType == 1?'烟感报警':item.alarmType == 2?'明火报警':item.alarmType == 3?'人员到底报警':item.alarmType == 4?'未带安全帽报警':item.alarmType == 5?'区域入侵报警':item.alarmType == 6?'越界入侵报警':'人员聚集报警'}}</div> -->
|
||||
<div>{{item.createTime}}</div>
|
||||
<div style="color: #1FADC5;" @click="openDetailDialog(item)">查看详情</div>
|
||||
<div>{{ item.createTime }}</div>
|
||||
<div style="color: #1fadc5" @click="openDetailDialog(item)">查看详情</div>
|
||||
</div>
|
||||
<div class="notoDta" v-if="partyMemberList.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
@ -65,7 +73,9 @@
|
||||
<div class="detail-text">
|
||||
<div class="text-box">
|
||||
<div class="type">告警类型</div>
|
||||
<div class="text">{{ detailData.alarmType ? getWarnName(detailData.alarmType) : "" }}</div>
|
||||
<div class="text">
|
||||
{{ detailData.alarmType ? getWarnName(detailData.alarmType) : "" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-box" style="margin-top: 5%">
|
||||
<div class="type">设备名称</div>
|
||||
@ -89,10 +99,10 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { getCompanyDataList, getMemberInfoList } from "@/api/modules/labor";
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
import { getCompanyDataList } from "@/api/modules/labor";
|
||||
// import type { TabsPaneContext } from "element-plus";
|
||||
import { getAlarmTypeOption } from "@/api/modules/aIEarlyWarn";
|
||||
import noDataImage from "@/assets/images/vehicleManagement/car.png";
|
||||
import { getAlarmRecordApi, getAlarmTypeCountPageApi } from "@/api/modules/agjtCommandApi";
|
||||
@ -104,39 +114,40 @@ import bgImg5 from "@/assets/images/commandScreen/bg5.png";
|
||||
import bgImg6 from "@/assets/images/commandScreen/bg6.png";
|
||||
import bgImg7 from "@/assets/images/commandScreen/bg7.png";
|
||||
import bgImg8 from "@/assets/images/commandScreen/bg8.png";
|
||||
const bgImgList = ref([bgImg1,bgImg2,bgImg3,bgImg4,bgImg5,bgImg6,bgImg7,bgImg8])
|
||||
const bgImgList = ref([bgImg1, bgImg2, bgImg3, bgImg4, bgImg5, bgImg6, bgImg7, bgImg8]);
|
||||
const store = GlobalStore();
|
||||
// eslint-disable-next-line vue/require-prop-types, @typescript-eslint/no-unused-vars
|
||||
const props = defineProps(["tip"]);
|
||||
const BASEURL = import.meta.env.VITE_API_URL;
|
||||
let showDialog = ref(false as any);
|
||||
const enterpriseListData = ref([] as any);
|
||||
const topDangerList = ref([] as any)
|
||||
const topDangerList = ref([] as any);
|
||||
let pageNo = ref(1 as any);
|
||||
const alarmPageInfo = ref({
|
||||
pageNo: 1
|
||||
})
|
||||
});
|
||||
let moreAlarmScroll = ref(true as any);
|
||||
const refAlarmScrollbar = ref(null as any); // 绑定到滚动的盒子上
|
||||
let moreScroll = ref(true as any);
|
||||
const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
|
||||
const detailData = ref({} as any);
|
||||
const detailData = ref({} as any);
|
||||
const partyMemberList = ref({} as any);
|
||||
let aiAlarmTypeEnum = ref([] as any);
|
||||
// 背景图设置
|
||||
const bgImgSet = (index:any) => {
|
||||
return bgImgList.value[index % bgImgList.value.length]
|
||||
}
|
||||
const bgImgSet = (index: any) => {
|
||||
return bgImgList.value[index % bgImgList.value.length];
|
||||
};
|
||||
// 获取顶部数据
|
||||
const getQualityStatisticsNumDataFn = async (tip: any) => {
|
||||
let requestData:any = {
|
||||
let requestData: any = {
|
||||
sn: store.sn,
|
||||
type: 1,
|
||||
pageNo: tip == 'search'?1:alarmPageInfo.value.pageNo,
|
||||
pageSize: 100,
|
||||
}
|
||||
pageNo: tip == "search" ? 1 : alarmPageInfo.value.pageNo,
|
||||
pageSize: 100
|
||||
};
|
||||
const res: any = await getAlarmTypeCountPageApi(requestData);
|
||||
console.log("获取人员信息列表", res);
|
||||
if(tip == 'more'){
|
||||
if (tip == "more") {
|
||||
topDangerList.value = topDangerList.value.concat(res.result.alarmPage.records);
|
||||
} else {
|
||||
topDangerList.value = res.result.alarmPage.records;
|
||||
@ -149,7 +160,7 @@ const getQualityStatisticsNumDataFn = async (tip: any) => {
|
||||
};
|
||||
//获取告警类型枚举
|
||||
const getWarnTypeOption = async () => {
|
||||
const res: any = await getAlarmTypeOption({ projectSn: store.sn, });
|
||||
const res: any = await getAlarmTypeOption({ projectSn: store.sn });
|
||||
// console.log("获取告警类型", res.result);
|
||||
let warnType = res.result.map((item: any) => {
|
||||
return {
|
||||
@ -195,16 +206,16 @@ const getCompanyList = async () => {
|
||||
}
|
||||
};
|
||||
//获取数据
|
||||
const getMemberCountList = async (tip:any) => {
|
||||
let requestData:any = {
|
||||
const getMemberCountList = async (tip: any) => {
|
||||
let requestData: any = {
|
||||
projectSn: store.sn,
|
||||
pageNo: tip == 'search'?1:pageNo.value,
|
||||
pageNo: tip == "search" ? 1 : pageNo.value,
|
||||
pageSize: 100,
|
||||
isPushed: 1,
|
||||
}
|
||||
isPushed: 1
|
||||
};
|
||||
const res: any = await getAlarmRecordApi(requestData);
|
||||
console.log("获取人员信息列表", res);
|
||||
if(tip == 'more'){
|
||||
if (tip == "more") {
|
||||
partyMemberList.value = partyMemberList.value.concat(res.result.records);
|
||||
} else {
|
||||
partyMemberList.value = res.result.records;
|
||||
@ -222,8 +233,8 @@ const getMemberCountList = async (tip:any) => {
|
||||
|
||||
onMounted(async () => {
|
||||
await getCompanyList();
|
||||
await getMemberCountList('search');
|
||||
await getQualityStatisticsNumDataFn('search');
|
||||
await getMemberCountList("search");
|
||||
await getQualityStatisticsNumDataFn("search");
|
||||
getWarnTypeOption();
|
||||
refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
|
||||
// console.log("滚动容器", e);
|
||||
@ -372,48 +383,51 @@ onMounted(async () => {
|
||||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 20px 15px;
|
||||
.top-statistics{
|
||||
.top-statistics {
|
||||
width: 90%;
|
||||
height: 35%;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
.statistics-listBox{
|
||||
.statistics-listBox {
|
||||
height: 100%;
|
||||
:deep(){
|
||||
.el-scrollbar__view{
|
||||
:deep() {
|
||||
.el-scrollbar__view {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.statistics-item{
|
||||
.statistics-item {
|
||||
width: 200px;
|
||||
// height: 95px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
background-size: 100% 100%;
|
||||
.title{
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 4%;
|
||||
left: 4%;
|
||||
}
|
||||
&-content{
|
||||
&-content {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
text-indent: 1.5em;
|
||||
}
|
||||
&-content:nth-child(2){
|
||||
&-content:nth-child(2) {
|
||||
margin-top: 15%;
|
||||
}
|
||||
&-content:nth-child(3){
|
||||
&-content:nth-child(3) {
|
||||
margin-top: 2%;
|
||||
}
|
||||
&-content:nth-child(4){
|
||||
&-content:nth-child(4) {
|
||||
margin-top: 2%;
|
||||
}
|
||||
&-content:last-child {
|
||||
margin-bottom: 4%;
|
||||
}
|
||||
// &-content:nth-child(3){
|
||||
// margin-top: 8%;
|
||||
// }
|
||||
@ -465,7 +479,7 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-one{
|
||||
.table-one {
|
||||
height: 50%;
|
||||
.tabList {
|
||||
display: flex;
|
||||
@ -506,10 +520,10 @@ onMounted(async () => {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.el-no-img{
|
||||
.el-no-img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
width: 17%;
|
||||
@ -523,12 +537,12 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(){
|
||||
.el-tabs__item{
|
||||
:deep() {
|
||||
.el-tabs__item {
|
||||
color: white;
|
||||
}
|
||||
.el-tabs__item.is-active{
|
||||
color: var(--el-color-primary)
|
||||
.el-tabs__item.is-active {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,7 +67,7 @@ let agjtCommandList = ref([
|
||||
{
|
||||
moduleName: "指挥部大屏",
|
||||
modulePath: "/commandScreen"
|
||||
},
|
||||
}
|
||||
]);
|
||||
|
||||
const itemList = ref([]);
|
||||
|
||||
@ -1,47 +1,53 @@
|
||||
<template>
|
||||
<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false">
|
||||
|
||||
<div class="loginBigImg">
|
||||
<div class="loginTitle">
|
||||
<div>数字化项目监管平台</div>
|
||||
<div class="titltText">SHUZIHUAXIANGMUJIANGUANPINGTAI</div>
|
||||
</div>
|
||||
<div class="loginFrom">
|
||||
<div class="inutFrom">
|
||||
<el-form ref="loginFormRef" class="form" :model="loginForm" :rules="loginRules" size="large">
|
||||
<el-form-item prop="account" style="margin-bottom: 10%">
|
||||
<el-input v-model="loginForm.account" placeholder="请输入账号">
|
||||
<template #prefix>
|
||||
<img src="@/assets/images/login/accountImg1.png" alt="" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
type="password"
|
||||
v-model="loginForm.password"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<template #prefix>
|
||||
<img src="@/assets/images/login/passwordImg1.png" alt="" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<!-- <div class="passwordBox">
|
||||
<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false">
|
||||
<div class="loginBigImg">
|
||||
<div class="loginTitle">
|
||||
<div>数字化项目监管平台</div>
|
||||
<div class="titltText">SHUZIHUAXIANGMUJIANGUANPINGTAI</div>
|
||||
</div>
|
||||
<div class="loginFrom">
|
||||
<div class="inutFrom">
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
class="form"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
size="large"
|
||||
>
|
||||
<el-form-item prop="account" style="margin-bottom: 10%">
|
||||
<el-input v-model="loginForm.account" placeholder="请输入账号">
|
||||
<template #prefix>
|
||||
<img src="@/assets/images/login/accountImg1.png" alt="" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
type="password"
|
||||
v-model="loginForm.password"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<template #prefix>
|
||||
<img src="@/assets/images/login/passwordImg1.png" alt="" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<!-- <div class="passwordBox">
|
||||
<span><el-checkbox style="color: #fff" v-model="checked">记住密码</el-checkbox></span>
|
||||
<span style="float: right; margin-top: 2.5%">忘记密码？</span>
|
||||
</div> -->
|
||||
</el-form>
|
||||
<div style="height: 45%">
|
||||
<el-button class="loginBtn" @click="login(loginFormRef)" :loading="loading">登录</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScaleBox>
|
||||
|
||||
</el-form>
|
||||
<div style="height: 45%">
|
||||
<el-button class="loginBtn" @click="login(loginFormRef)" :loading="loading"
|
||||
>登录</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScaleBox>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="logonPage">
|
||||
@ -72,203 +78,201 @@ const globalStore = GlobalStore();
|
||||
type FormInstance = InstanceType<typeof ElForm>;
|
||||
const loginFormRef = ref<FormInstance>();
|
||||
const loginRules = reactive({
|
||||
account: [{ required: true, message: "请输入账号", trigger: "blur" }],
|
||||
password: [{ required: true, message: "请输入密码", trigger: "blur" }]
|
||||
account: [{ required: true, message: "请输入账号", trigger: "blur" }],
|
||||
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
const loginForm = reactive<Login.ReqLoginForm>({ account: "", password: "" });
|
||||
const login = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.validate(async (valid, params) => {
|
||||
if (!valid) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const arr = ref(["/government", "/home", "/home", "/home"]);
|
||||
// 1.执行登录接口
|
||||
const { result } = await loginApi({ ...loginForm, password: loginForm.password });
|
||||
console.log("执行登录接口 ：结果：=========", result);
|
||||
globalStore.setSN(result.sn);
|
||||
globalStore.setToken(result.token);
|
||||
globalStore.setAccount(result.account);
|
||||
globalStore.setAccountType(result.accountType);
|
||||
globalStore.setProjectDateAuth(result.menuAuthority);
|
||||
globalStore.setIsManager(result.isManager); //我已知晓
|
||||
if (!formEl) return;
|
||||
formEl.validate(async (valid, params) => {
|
||||
if (!valid) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const arr = ref(["/government", "/home", "/home", "/home"]);
|
||||
// 1.执行登录接口
|
||||
const { result } = await loginApi({ ...loginForm, password: loginForm.password });
|
||||
console.log("执行登录接口 ：结果：=========", result);
|
||||
globalStore.setSN(result.sn);
|
||||
globalStore.setToken(result.token);
|
||||
globalStore.setAccount(result.account);
|
||||
globalStore.setAccountType(result.accountType);
|
||||
globalStore.setProjectDateAuth(result.menuAuthority);
|
||||
globalStore.setIsManager(result.isManager); //我已知晓
|
||||
|
||||
// 2.添加动态路由
|
||||
// await initDynamicRouter();
|
||||
// router.push(arr[result.accountType - 1]);
|
||||
// 3.清空 tabs、keepAlive 保留的数据
|
||||
tabsStore.closeMultipleTab();
|
||||
keepAlive.setKeepAliveName();
|
||||
// 2.添加动态路由
|
||||
// await initDynamicRouter();
|
||||
// router.push(arr[result.accountType - 1]);
|
||||
// 3.清空 tabs、keepAlive 保留的数据
|
||||
tabsStore.closeMultipleTab();
|
||||
keepAlive.setKeepAliveName();
|
||||
|
||||
if (COMPANY === "agjtCommand") {
|
||||
// menuList.value = AGJTCommandMenu;
|
||||
if(![5,10].includes(result.accountType)){
|
||||
ElMessage({
|
||||
message: "账号类型不匹配",
|
||||
type: "warning"
|
||||
});
|
||||
return;
|
||||
}
|
||||
router.push("/commandScreen");
|
||||
} else {
|
||||
router.push("/projectOverview");
|
||||
}
|
||||
// router.push(arr.value[result.accountType - 1]);
|
||||
// 4.跳转到首页
|
||||
if (COMPANY === "agjtCommand") {
|
||||
// menuList.value = AGJTCommandMenu;
|
||||
if (![5, 10].includes(result.accountType)) {
|
||||
ElMessage({
|
||||
message: "账号类型不匹配",
|
||||
type: "warning",
|
||||
});
|
||||
return;
|
||||
}
|
||||
router.push("/commandScreen");
|
||||
} else {
|
||||
router.push("/projectOverview");
|
||||
}
|
||||
// router.push(arr.value[result.accountType - 1]);
|
||||
// 4.跳转到首页
|
||||
|
||||
// ElNotification({
|
||||
// title: getTimeState(),
|
||||
// message: "欢迎登录",
|
||||
// type: "success",
|
||||
// duration: 3000
|
||||
// });
|
||||
// return router.go(0);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
// ElNotification({
|
||||
// title: getTimeState(),
|
||||
// message: "欢迎登录",
|
||||
// type: "success",
|
||||
// duration: 3000
|
||||
// });
|
||||
// return router.go(0);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// resetForm
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
|
||||
|
||||
// 监听enter事件（调用登录）
|
||||
document.onkeydown = (e: any) => {
|
||||
e = window.event || e;
|
||||
if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
|
||||
if (loading.value) return;
|
||||
login(loginFormRef.value);
|
||||
}
|
||||
};
|
||||
// 监听enter事件（调用登录）
|
||||
document.onkeydown = (e: any) => {
|
||||
e = window.event || e;
|
||||
if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
|
||||
if (loading.value) return;
|
||||
login(loginFormRef.value);
|
||||
}
|
||||
};
|
||||
});
|
||||
// login页面销毁时，需要去掉enter监听
|
||||
onBeforeUnmount(() => {
|
||||
document.onkeydown = null;
|
||||
document.onkeydown = null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.loginBigImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("@/assets/images/login/loginImg.gif") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("@/assets/images/login/loginImg.gif") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.loginTitle {
|
||||
width: 20%;
|
||||
top: 30%;
|
||||
position: relative;
|
||||
left: 70%;
|
||||
font-size: 40px;
|
||||
color: #65c4f9;
|
||||
font-family: "pmzd";
|
||||
background-image: linear-gradient(to right, #65c4f9, #82fbea);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
.loginTitle {
|
||||
width: 20%;
|
||||
top: 30%;
|
||||
position: relative;
|
||||
left: 70%;
|
||||
font-size: 40px;
|
||||
color: #65c4f9;
|
||||
font-family: "pmzd";
|
||||
background-image: linear-gradient(to right, #65c4f9, #82fbea);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
.titltText {
|
||||
margin-top: 2%;
|
||||
font-size: 17px;
|
||||
font-family: "normal";
|
||||
}
|
||||
}
|
||||
.titltText {
|
||||
margin-top: 2%;
|
||||
font-size: 17px;
|
||||
font-family: "normal";
|
||||
}
|
||||
}
|
||||
|
||||
.loginFrom {
|
||||
width: 22%;
|
||||
height: 35%;
|
||||
position: relative;
|
||||
top: 33%;
|
||||
left: 68%;
|
||||
background: url("@/assets/images/login/loginFormImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.loginFrom {
|
||||
width: 22%;
|
||||
height: 35%;
|
||||
position: relative;
|
||||
top: 33%;
|
||||
left: 68%;
|
||||
background: url("@/assets/images/login/loginFormImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.inutFrom {
|
||||
width: 80%;
|
||||
height: 68%;
|
||||
position: absolute;
|
||||
top: 18%;
|
||||
left: 10%;
|
||||
color: #fff;
|
||||
.inutFrom {
|
||||
width: 80%;
|
||||
height: 68%;
|
||||
position: absolute;
|
||||
top: 18%;
|
||||
left: 10%;
|
||||
color: #fff;
|
||||
|
||||
.passwordBox {
|
||||
font-family: SourceHanSansCN-Regular;
|
||||
color: #fff;
|
||||
font-size:14px;
|
||||
margin-top: -4%;
|
||||
}
|
||||
}
|
||||
.passwordBox {
|
||||
font-family: SourceHanSansCN-Regular;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin-top: -4%;
|
||||
}
|
||||
}
|
||||
|
||||
.loginBtn {
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
color: #eeeeee;
|
||||
font-family: SourceHanSansCN-Regular;
|
||||
font-size: 20px;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
background: linear-gradient(to right, #2758c0 0.5%, #65d7f9 99%);
|
||||
margin-top: 2%;
|
||||
}
|
||||
}
|
||||
.loginBtn {
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
color: #eeeeee;
|
||||
font-family: SourceHanSansCN-Regular;
|
||||
font-size: 20px;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
background: linear-gradient(to right, #2758c0 0.5%, #65d7f9 99%);
|
||||
margin-top: 2%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__wrapper {
|
||||
background: #2758c0;
|
||||
background: rgba(39, 88, 192, 0.4);
|
||||
box-shadow: none;
|
||||
border: 1px solid #2758c0;
|
||||
border-radius: 0 !important;
|
||||
background: #2758c0;
|
||||
background: rgba(39, 88, 192, 0.4);
|
||||
box-shadow: none;
|
||||
border: 1px solid #2758c0;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-family: SourceHanSansCN-Regular;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-family: SourceHanSansCN-Regular;
|
||||
}
|
||||
|
||||
::v-deep .el-input {
|
||||
height: 110%;
|
||||
height: 110%;
|
||||
}
|
||||
|
||||
::v-deep .el-input__prefix {
|
||||
width: 10%;
|
||||
border-right: 1px solid #2758c0;
|
||||
margin-right: 5%;
|
||||
width: 10%;
|
||||
border-right: 1px solid #2758c0;
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
::v-deep .el-input .el-input__icon {
|
||||
color: #3676ff;
|
||||
color: #3676ff;
|
||||
}
|
||||
|
||||
::v-deep .el-input .el-input__icon:hover {
|
||||
color: #3676ff;
|
||||
color: #3676ff;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__inner {
|
||||
border-color: #2758c0;
|
||||
background: #2758c0;
|
||||
background: rgba(39, 88, 192, 0.4);
|
||||
border-color: #2758c0;
|
||||
background: #2758c0;
|
||||
background: rgba(39, 88, 192, 0.4);
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner:-webkit-autofill {
|
||||
transition: background-color 50000s ease-in-out 0s;
|
||||
-webkit-text-fill-color: #fff; //记住密码的颜色
|
||||
caret-color: #fff; //改变输入框光标颜色,同时又不改变输入框里面的内容的颜色
|
||||
transition: background-color 50000s ease-in-out 0s;
|
||||
-webkit-text-fill-color: #fff; //记住密码的颜色
|
||||
caret-color: #fff; //改变输入框光标颜色,同时又不改变输入框里面的内容的颜色
|
||||
}
|
||||
|
||||
//鼠标聚焦修改图标颜色
|
||||
::v-deep .el-input__inner:focus {
|
||||
.el-input__prefix-inner {
|
||||
img {
|
||||
}
|
||||
}
|
||||
.el-input__prefix-inner {
|
||||
img {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user