admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改

Browse Source
This commit is contained in:
X_Rian 2024-05-29 10:51:30 +08:00
parent c1738a8b33
commit 08134f2f82
4 changed files with 257 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/routers/modules/staticRouter.ts
View File

@ -24,8 +24,8 @@ export const staticRouter: RouteRecordRaw[] = [
{ {
path: "/large", path: "/large",
name: "大屏", name: "大屏",
component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版 // component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏 component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页) // component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
children: [ children: [
{ {

122
src/views/commandScreen/dialogCompnnents/ai-alarm.vue
View File

@ -4,19 +4,27 @@
<!-- v-show="topDangerList.length > 0" --> <!-- v-show="topDangerList.length > 0" -->
<div class="top-statistics" v-show="topDangerList.length > 0"> <div class="top-statistics" v-show="topDangerList.length > 0">
<el-scrollbar class="statistics-listBox" ref="refAlarmScrollbar"> <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"> <div
<span class="title">{{item.alarmTypeName}}</span> 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.alarmNumToday }}</span>
<span class="statistics-item-content">本月报警次数：{{ item.alarmNumMonth }}</span> <span class="statistics-item-content">本月报警次数：{{ item.alarmNumMonth }}</span>
<span class="statistics-item-content">历史报警次数：{{ item.alarmNum }}</span> <span class="statistics-item-content">历史报警次数：{{ item.alarmNum }}</span>
</div> </div>
</el-scrollbar> </el-scrollbar>
</div> </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"> <div class="notoDta">
<img src="@/assets/images/noData.png" alt="" /> <img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p> <p>暂无数据</p>
</div> </div>
</div> </div>
<div class="table-one"> <div class="table-one">
@ -30,7 +38,7 @@
</div> </div>
<el-scrollbar class="listBox" ref="refScrollbar"> <el-scrollbar class="listBox" ref="refScrollbar">
<div v-for="(item, index) in partyMemberList" class="listStyle" :key="item.id"> <div v-for="(item, index) in partyMemberList" class="listStyle" :key="item.id">
<div>{{index + 1}}</div> <div>{{ index + 1 }}</div>
<div class="list-img"> <div class="list-img">
<el-image <el-image
fit="contain" fit="contain"
@ -38,17 +46,17 @@
:src="BASEURL + '/image/' + item.imageUrl" :src="BASEURL + '/image/' + item.imageUrl"
:preview-src-list="[BASEURL + '/image/' + item.imageUrl]" :preview-src-list="[BASEURL + '/image/' + item.imageUrl]"
> >
<template #error> <template #error>
<el-image :src="noDataImage" :preview-src-list="[noDataImage]" fit="contain" class="el-no-img" alt="" /> <el-image :src="noDataImage" :preview-src-list="[noDataImage]" fit="contain" class="el-no-img" alt="" />
</template> </template>
</el-image> </el-image>
<!-- <img :src="item.fieldAcquisitionUrl" alt="" srcset=""> --> <!-- <img :src="item.fieldAcquisitionUrl" alt="" srcset=""> -->
</div> </div>
<div>{{item.hardwareName}}</div> <div>{{ item.hardwareName }}</div>
<div>{{ item.alarmTypeName }}</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.alarmType == 1?'烟感报警':item.alarmType == 2?'明火报警':item.alarmType == 3?'人员到底报警':item.alarmType == 4?'未带安全帽报警':item.alarmType == 5?'区域入侵报警':item.alarmType == 6?'越界入侵报警':'人员聚集报警'}}</div> -->
<div>{{item.createTime}}</div> <div>{{ item.createTime }}</div>
<div style="color: #1FADC5;" @click="openDetailDialog(item)">查看详情</div> <div style="color: #1fadc5" @click="openDetailDialog(item)">查看详情</div>
</div> </div>
<div class="notoDta" v-if="partyMemberList.length == 0"> <div class="notoDta" v-if="partyMemberList.length == 0">
<img src="@/assets/images/noData.png" alt="" /> <img src="@/assets/images/noData.png" alt="" />
@ -65,7 +73,9 @@
<div class="detail-text"> <div class="detail-text">
<div class="text-box"> <div class="text-box">
<div class="type">告警类型</div> <div class="type">告警类型</div>
<div class="text">{{ detailData.alarmType ? getWarnName(detailData.alarmType) : "" }}</div> <div class="text">
{{ detailData.alarmType ? getWarnName(detailData.alarmType) : "" }}
</div>
</div> </div>
<div class="text-box" style="margin-top: 5%"> <div class="text-box" style="margin-top: 5%">
<div class="type">设备名称</div> <div class="type">设备名称</div>
@ -89,10 +99,10 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, computed } from "vue"; import { ref, onMounted } from "vue";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";
import { getCompanyDataList, getMemberInfoList } from "@/api/modules/labor"; import { getCompanyDataList } from "@/api/modules/labor";
import type { TabsPaneContext } from 'element-plus' // import type { TabsPaneContext } from "element-plus";
import { getAlarmTypeOption } from "@/api/modules/aIEarlyWarn"; import { getAlarmTypeOption } from "@/api/modules/aIEarlyWarn";
import noDataImage from "@/assets/images/vehicleManagement/car.png"; import noDataImage from "@/assets/images/vehicleManagement/car.png";
import { getAlarmRecordApi, getAlarmTypeCountPageApi } from "@/api/modules/agjtCommandApi"; 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 bgImg6 from "@/assets/images/commandScreen/bg6.png";
import bgImg7 from "@/assets/images/commandScreen/bg7.png"; import bgImg7 from "@/assets/images/commandScreen/bg7.png";
import bgImg8 from "@/assets/images/commandScreen/bg8.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(); const store = GlobalStore();
// eslint-disable-next-line vue/require-prop-types, @typescript-eslint/no-unused-vars
const props = defineProps(["tip"]); const props = defineProps(["tip"]);
const BASEURL = import.meta.env.VITE_API_URL; const BASEURL = import.meta.env.VITE_API_URL;
let showDialog = ref(false as any); let showDialog = ref(false as any);
const enterpriseListData = ref([] as any); const enterpriseListData = ref([] as any);
const topDangerList = ref([] as any) const topDangerList = ref([] as any);
let pageNo = ref(1 as any); let pageNo = ref(1 as any);
const alarmPageInfo = ref({ const alarmPageInfo = ref({
pageNo: 1 pageNo: 1
}) });
let moreAlarmScroll = ref(true as any); let moreAlarmScroll = ref(true as any);
const refAlarmScrollbar = ref(null as any); // 绑定到滚动的盒子上 const refAlarmScrollbar = ref(null as any); // 绑定到滚动的盒子上
let moreScroll = ref(true as any); let moreScroll = ref(true as any);
const refScrollbar = ref(null as any); // 绑定到滚动的盒子上 const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
const detailData = ref({} as any); const detailData = ref({} as any);
const partyMemberList = ref({} as any); const partyMemberList = ref({} as any);
let aiAlarmTypeEnum = ref([] as any); let aiAlarmTypeEnum = ref([] as any);
// 背景图设置 // 背景图设置
const bgImgSet = (index:any) => { const bgImgSet = (index: any) => {
return bgImgList.value[index % bgImgList.value.length] return bgImgList.value[index % bgImgList.value.length];
} };
// 获取顶部数据 // 获取顶部数据
const getQualityStatisticsNumDataFn = async (tip: any) => { const getQualityStatisticsNumDataFn = async (tip: any) => {
let requestData:any = { let requestData: any = {
sn: store.sn, sn: store.sn,
type: 1, type: 1,
pageNo: tip == 'search'?1:alarmPageInfo.value.pageNo, pageNo: tip == "search" ? 1 : alarmPageInfo.value.pageNo,
pageSize: 100, pageSize: 100
} };
const res: any = await getAlarmTypeCountPageApi(requestData); const res: any = await getAlarmTypeCountPageApi(requestData);
console.log("获取人员信息列表", res); console.log("获取人员信息列表", res);
if(tip == 'more'){ if (tip == "more") {
topDangerList.value = topDangerList.value.concat(res.result.alarmPage.records); topDangerList.value = topDangerList.value.concat(res.result.alarmPage.records);
} else { } else {
topDangerList.value = res.result.alarmPage.records; topDangerList.value = res.result.alarmPage.records;
@ -149,7 +160,7 @@ const getQualityStatisticsNumDataFn = async (tip: any) => {
}; };
//获取告警类型枚举 //获取告警类型枚举
const getWarnTypeOption = async () => { const getWarnTypeOption = async () => {
const res: any = await getAlarmTypeOption({ projectSn: store.sn, }); const res: any = await getAlarmTypeOption({ projectSn: store.sn });
// console.log("获取告警类型", res.result); // console.log("获取告警类型", res.result);
let warnType = res.result.map((item: any) => { let warnType = res.result.map((item: any) => {
return { return {
@ -195,16 +206,16 @@ const getCompanyList = async () => {
} }
}; };
//获取数据 //获取数据
const getMemberCountList = async (tip:any) => { const getMemberCountList = async (tip: any) => {
let requestData:any = { let requestData: any = {
projectSn: store.sn, projectSn: store.sn,
pageNo: tip == 'search'?1:pageNo.value, pageNo: tip == "search" ? 1 : pageNo.value,
pageSize: 100, pageSize: 100,
isPushed: 1, isPushed: 1
} };
const res: any = await getAlarmRecordApi(requestData); const res: any = await getAlarmRecordApi(requestData);
console.log("获取人员信息列表", res); console.log("获取人员信息列表", res);
if(tip == 'more'){ if (tip == "more") {
partyMemberList.value = partyMemberList.value.concat(res.result.records); partyMemberList.value = partyMemberList.value.concat(res.result.records);
} else { } else {
partyMemberList.value = res.result.records; partyMemberList.value = res.result.records;
@ -222,8 +233,8 @@ const getMemberCountList = async (tip:any) => {
onMounted(async () => { onMounted(async () => {
await getCompanyList(); await getCompanyList();
await getMemberCountList('search'); await getMemberCountList("search");
await getQualityStatisticsNumDataFn('search'); await getQualityStatisticsNumDataFn("search");
getWarnTypeOption(); getWarnTypeOption();
refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => { refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
// console.log("滚动容器", e); // console.log("滚动容器", e);
@ -372,48 +383,51 @@ onMounted(async () => {
// background: url("@/assets/images/cardImg.png") no-repeat; // background: url("@/assets/images/cardImg.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 20px 15px; padding: 20px 15px;
.top-statistics{ .top-statistics {
width: 90%; width: 90%;
height: 35%; height: 35%;
color: white; color: white;
margin: 0 auto; margin: 0 auto;
.statistics-listBox{ .statistics-listBox {
height: 100%; height: 100%;
:deep(){ :deep() {
.el-scrollbar__view{ .el-scrollbar__view {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
grid-gap: 20px; grid-gap: 20px;
} }
} }
} }
.statistics-item{ .statistics-item {
width: 200px; width: 200px;
// height: 95px; // height: 95px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
background-size: 100% 100%; background-size: 100% 100%;
.title{ .title {
position: absolute; position: absolute;
top: 4%; top: 4%;
left: 4%; left: 4%;
} }
&-content{ &-content {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: auto; height: auto;
text-indent: 1.5em; text-indent: 1.5em;
} }
&-content:nth-child(2){ &-content:nth-child(2) {
margin-top: 15%; margin-top: 15%;
} }
&-content:nth-child(3){ &-content:nth-child(3) {
margin-top: 2%; margin-top: 2%;
} }
&-content:nth-child(4){ &-content:nth-child(4) {
margin-top: 2%; margin-top: 2%;
} }
&-content:last-child {
margin-bottom: 4%;
}
// &-content:nth-child(3){ // &-content:nth-child(3){
// margin-top: 8%; // margin-top: 8%;
// } // }
@ -465,7 +479,7 @@ onMounted(async () => {
} }
} }
} }
.table-one{ .table-one {
height: 50%; height: 50%;
.tabList { .tabList {
display: flex; display: flex;
@ -506,10 +520,10 @@ onMounted(async () => {
height: 100%; height: 100%;
} }
} }
.el-no-img{ .el-no-img {
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
} }
div { div {
width: 17%; width: 17%;
@ -523,12 +537,12 @@ onMounted(async () => {
} }
} }
} }
:deep(){ :deep() {
.el-tabs__item{ .el-tabs__item {
color: white; color: white;
} }
.el-tabs__item.is-active{ .el-tabs__item.is-active {
color: var(--el-color-primary) color: var(--el-color-primary);
} }
} }
} }

2
src/views/commandScreen/indexCommand.vue
View File

@ -67,7 +67,7 @@ let agjtCommandList = ref([
{ {
moduleName: "指挥部大屏", moduleName: "指挥部大屏",
modulePath: "/commandScreen" modulePath: "/commandScreen"
}, }
]); ]);
const itemList = ref([]); const itemList = ref([]);

366
src/views/login/index.vue
View File

@ -1,47 +1,53 @@
<template> <template>
<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false"> <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false">
<div class="loginBigImg">
<div class="loginBigImg"> <div class="loginTitle">
<div class="loginTitle"> <div>数字化项目监管平台</div>
<div>数字化项目监管平台</div> <div class="titltText">SHUZIHUAXIANGMUJIANGUANPINGTAI</div>
<div class="titltText">SHUZIHUAXIANGMUJIANGUANPINGTAI</div> </div>
</div> <div class="loginFrom">
<div class="loginFrom"> <div class="inutFrom">
<div class="inutFrom"> <el-form
<el-form ref="loginFormRef" class="form" :model="loginForm" :rules="loginRules" size="large"> ref="loginFormRef"
<el-form-item prop="account" style="margin-bottom: 10%"> class="form"
<el-input v-model="loginForm.account" placeholder="请输入账号"> :model="loginForm"
<template #prefix> :rules="loginRules"
<img src="@/assets/images/login/accountImg1.png" alt="" /> size="large"
</template> >
</el-input> <el-form-item prop="account" style="margin-bottom: 10%">
</el-form-item> <el-input v-model="loginForm.account" placeholder="请输入账号">
<el-form-item prop="password"> <template #prefix>
<el-input <img src="@/assets/images/login/accountImg1.png" alt="" />
type="password" </template>
v-model="loginForm.password" </el-input>
placeholder="请输入密码" </el-form-item>
show-password <el-form-item prop="password">
autocomplete="new-password" <el-input
> type="password"
<template #prefix> v-model="loginForm.password"
<img src="@/assets/images/login/passwordImg1.png" alt="" /> placeholder="请输入密码"
</template> show-password
</el-input> autocomplete="new-password"
</el-form-item> >
<!-- <div class="passwordBox"> <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><el-checkbox style="color: #fff" v-model="checked">记住密码</el-checkbox></span>
<span style="float: right; margin-top: 2.5%">忘记密码？</span> <span style="float: right; margin-top: 2.5%">忘记密码？</span>
</div> --> </div> -->
</el-form> </el-form>
<div style="height: 45%"> <div style="height: 45%">
<el-button class="loginBtn" @click="login(loginFormRef)" :loading="loading">登录</el-button> <el-button class="loginBtn" @click="login(loginFormRef)" :loading="loading"
</div> >登录</el-button
</div> >
</div> </div>
</div> </div>
</ScaleBox> </div>
</div>
</ScaleBox>
</template> </template>
<script setup lang="ts" name="logonPage"> <script setup lang="ts" name="logonPage">
@ -72,203 +78,201 @@ const globalStore = GlobalStore();
type FormInstance = InstanceType<typeof ElForm>; type FormInstance = InstanceType<typeof ElForm>;
const loginFormRef = ref<FormInstance>(); const loginFormRef = ref<FormInstance>();
const loginRules = reactive({ const loginRules = reactive({
account: [{ required: true, message: "请输入账号", trigger: "blur" }], account: [{ required: true, message: "请输入账号", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }] password: [{ required: true, message: "请输入密码", trigger: "blur" }],
}); });
const loading = ref(false); const loading = ref(false);
const loginForm = reactive<Login.ReqLoginForm>({ account: "", password: "" }); const loginForm = reactive<Login.ReqLoginForm>({ account: "", password: "" });
const login = (formEl: FormInstance | undefined) => { const login = (formEl: FormInstance | undefined) => {
if (!formEl) return; if (!formEl) return;
formEl.validate(async (valid, params) => { formEl.validate(async (valid, params) => {
if (!valid) return; if (!valid) return;
loading.value = true; loading.value = true;
try { try {
const arr = ref(["/government", "/home", "/home", "/home"]); const arr = ref(["/government", "/home", "/home", "/home"]);
// 1.执行登录接口 // 1.执行登录接口
const { result } = await loginApi({ ...loginForm, password: loginForm.password }); const { result } = await loginApi({ ...loginForm, password: loginForm.password });
console.log("执行登录接口 ：结果：=========", result); console.log("执行登录接口 ：结果：=========", result);
globalStore.setSN(result.sn); globalStore.setSN(result.sn);
globalStore.setToken(result.token); globalStore.setToken(result.token);
globalStore.setAccount(result.account); globalStore.setAccount(result.account);
globalStore.setAccountType(result.accountType); globalStore.setAccountType(result.accountType);
globalStore.setProjectDateAuth(result.menuAuthority); globalStore.setProjectDateAuth(result.menuAuthority);
globalStore.setIsManager(result.isManager); //我已知晓 globalStore.setIsManager(result.isManager); //我已知晓
// 2.添加动态路由 // 2.添加动态路由
// await initDynamicRouter(); // await initDynamicRouter();
// router.push(arr[result.accountType - 1]); // router.push(arr[result.accountType - 1]);
// 3.清空 tabs、keepAlive 保留的数据 // 3.清空 tabs、keepAlive 保留的数据
tabsStore.closeMultipleTab(); tabsStore.closeMultipleTab();
keepAlive.setKeepAliveName(); keepAlive.setKeepAliveName();
if (COMPANY === "agjtCommand") { if (COMPANY === "agjtCommand") {
// menuList.value = AGJTCommandMenu; // menuList.value = AGJTCommandMenu;
if(![5,10].includes(result.accountType)){ if (![5, 10].includes(result.accountType)) {
ElMessage({ ElMessage({
message: "账号类型不匹配", message: "账号类型不匹配",
type: "warning" type: "warning",
}); });
return; return;
} }
router.push("/commandScreen"); router.push("/commandScreen");
} else { } else {
router.push("/projectOverview"); router.push("/projectOverview");
} }
// router.push(arr.value[result.accountType - 1]); // router.push(arr.value[result.accountType - 1]);
// 4.跳转到首页 // 4.跳转到首页
// ElNotification({ // ElNotification({
// title: getTimeState(), // title: getTimeState(),
// message: "欢迎登录", // message: "欢迎登录",
// type: "success", // type: "success",
// duration: 3000 // duration: 3000
// }); // });
// return router.go(0); // return router.go(0);
} finally { } finally {
loading.value = false; loading.value = false;
} }
}); });
}; };
// resetForm // resetForm
const resetForm = (formEl: FormInstance | undefined) => { const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return; if (!formEl) return;
formEl.resetFields(); formEl.resetFields();
}; };
onMounted(async () => { onMounted(async () => {
// 监听enter事件（调用登录）
document.onkeydown = (e: any) => {
// 监听enter事件（调用登录） e = window.event || e;
document.onkeydown = (e: any) => { if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
e = window.event || e; if (loading.value) return;
if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") { login(loginFormRef.value);
if (loading.value) return; }
login(loginFormRef.value); };
}
};
}); });
// login页面销毁时，需要去掉enter监听 // login页面销毁时，需要去掉enter监听
onBeforeUnmount(() => { onBeforeUnmount(() => {
document.onkeydown = null; document.onkeydown = null;
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.loginBigImg { .loginBigImg {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url("@/assets/images/login/loginImg.gif") no-repeat; background: url("@/assets/images/login/loginImg.gif") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.loginTitle { .loginTitle {
width: 20%; width: 20%;
top: 30%; top: 30%;
position: relative; position: relative;
left: 70%; left: 70%;
font-size: 40px; font-size: 40px;
color: #65c4f9; color: #65c4f9;
font-family: "pmzd"; font-family: "pmzd";
background-image: linear-gradient(to right, #65c4f9, #82fbea); background-image: linear-gradient(to right, #65c4f9, #82fbea);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
.titltText { .titltText {
margin-top: 2%; margin-top: 2%;
font-size: 17px; font-size: 17px;
font-family: "normal"; font-family: "normal";
} }
} }
.loginFrom { .loginFrom {
width: 22%; width: 22%;
height: 35%; height: 35%;
position: relative; position: relative;
top: 33%; top: 33%;
left: 68%; left: 68%;
background: url("@/assets/images/login/loginFormImg.png") no-repeat; background: url("@/assets/images/login/loginFormImg.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.inutFrom { .inutFrom {
width: 80%; width: 80%;
height: 68%; height: 68%;
position: absolute; position: absolute;
top: 18%; top: 18%;
left: 10%; left: 10%;
color: #fff; color: #fff;
.passwordBox { .passwordBox {
font-family: SourceHanSansCN-Regular; font-family: SourceHanSansCN-Regular;
color: #fff; color: #fff;
font-size:14px; font-size: 14px;
margin-top: -4%; margin-top: -4%;
} }
} }
.loginBtn { .loginBtn {
width: 100%; width: 100%;
height: 45%; height: 45%;
color: #eeeeee; color: #eeeeee;
font-family: SourceHanSansCN-Regular; font-family: SourceHanSansCN-Regular;
font-size: 20px; font-size: 20px;
border: none !important; border: none !important;
border-radius: 0 !important; border-radius: 0 !important;
background: linear-gradient(to right, #2758c0 0.5%, #65d7f9 99%); background: linear-gradient(to right, #2758c0 0.5%, #65d7f9 99%);
margin-top: 2%; margin-top: 2%;
} }
} }
} }
::v-deep .el-input__wrapper { ::v-deep .el-input__wrapper {
background: #2758c0; background: #2758c0;
background: rgba(39, 88, 192, 0.4); background: rgba(39, 88, 192, 0.4);
box-shadow: none; box-shadow: none;
border: 1px solid #2758c0; border: 1px solid #2758c0;
border-radius: 0 !important; border-radius: 0 !important;
} }
::v-deep .el-input__inner { ::v-deep .el-input__inner {
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
font-family: SourceHanSansCN-Regular; font-family: SourceHanSansCN-Regular;
} }
::v-deep .el-input { ::v-deep .el-input {
height: 110%; height: 110%;
} }
::v-deep .el-input__prefix { ::v-deep .el-input__prefix {
width: 10%; width: 10%;
border-right: 1px solid #2758c0; border-right: 1px solid #2758c0;
margin-right: 5%; margin-right: 5%;
} }
::v-deep .el-input .el-input__icon { ::v-deep .el-input .el-input__icon {
color: #3676ff; color: #3676ff;
} }
::v-deep .el-input .el-input__icon:hover { ::v-deep .el-input .el-input__icon:hover {
color: #3676ff; color: #3676ff;
} }
::v-deep .el-checkbox__inner { ::v-deep .el-checkbox__inner {
border-color: #2758c0; border-color: #2758c0;
background: #2758c0; background: #2758c0;
background: rgba(39, 88, 192, 0.4); background: rgba(39, 88, 192, 0.4);
} }
::v-deep .el-input__inner:-webkit-autofill { ::v-deep .el-input__inner:-webkit-autofill {
transition: background-color 50000s ease-in-out 0s; transition: background-color 50000s ease-in-out 0s;
-webkit-text-fill-color: #fff; //记住密码的颜色 -webkit-text-fill-color: #fff; //记住密码的颜色
caret-color: #fff; //改变输入框光标颜色,同时又不改变输入框里面的内容的颜色 caret-color: #fff; //改变输入框光标颜色,同时又不改变输入框里面的内容的颜色
} }
//鼠标聚焦修改图标颜色 //鼠标聚焦修改图标颜色
::v-deep .el-input__inner:focus { ::v-deep .el-input__inner:focus {
.el-input__prefix-inner { .el-input__prefix-inner {
img { img {
} }
} }
} }
</style> </style>