Skip to content

F
founder_vue
Commit 4eddd7b7 by 张超军
Options

Merge branch 'dev_zwpt' of http://47.92.108.28/changchao/founder_vue into dev_zwpt

parents c7d74e6d c97040bf
Showing with 1113 additions and 938 deletions
src/App.vue
...@@ -41,12 +41,22 @@ export default { ...@@ -41,12 +41,22 @@ export default {
@font-face { @font-face {
font-family: "HarmonyOS_Sans_SC-Bold"; font-family: "HarmonyOS_Sans_SC-Bold";
src: url("../src/assets/font/MSYHBD.ttf") format("truetype"); src: url("../src/assets/font/HarmonyOS_Sans_SC_Bold.ttf") format("truetype");
} }
@font-face { @font-face {
font-family: "HarmonyOS_Sans_SC"; font-family: "HarmonyOS_Sans_SC";
src: url("../src/assets/font/MSYH.ttf") format("truetype"); src: url("../src/assets/font/HarmonyOS_Sans_SC_Regular.ttf") format("truetype");
}
@font-face {
font-family: "HarmonyOS_Sans_SC_Light";
src: url("../src/assets/font/HarmonyOS_Sans_SC_Light.ttf") format("truetype");
}
@font-face {
font-family: "HarmonyOS_Sans_SC_Medium";
src: url("../src/assets/font/HarmonyOS_Sans_SC_Medium.ttf") format("truetype");
} }
.boxShadow { .boxShadow {
......
src/views/Home.vue
<template> <template>
<div id="home-div"> <div id="home-div">
<div id="home" :class="{ zhanshi: isCropper || loading_sd }"> <div
id="home"
:class="{ zhanshi: isCropper || loading_sd }"
>
<el-container class="layout-container"> <el-container class="layout-container">
<transition name="slide"> <transition name="slide">
<el-aside :width="isCollapse ? '4rem' : '17.5rem'" class="aside"> <el-aside
<div class="logo" :class="{ minLogo: isCollapse }" @click="$router.push('/index')"> :width="isCollapse ? '4rem' : '17.5rem'"
<img class="jh" src="../assets/img/Home/jh.png" alt="" /> class="aside"
<img v-show="!isCollapse" class="title" src="../assets/img/Home/title.png" alt="" /> >
<div
class="logo"
:class="{ minLogo: isCollapse }"
@click="$router.push('/index')"
v-if="this.$store.state.tm.tmType==false"
>
<img
class="jh"
src="../assets/img/Home/jh.png"
alt=""
/>
<img
v-show="!isCollapse"
class="title"
src="../assets/img/Home/title.png"
alt=""
/>
</div>
<div
class="logo"
:class="{ minLogo: isCollapse }"
@click="$router.push('/index')"
v-if="this.$store.state.tm.tmType==true"
>
<img
v-show="isCollapse"
class="jh"
src="../assets/img/Home/tmLogoMini.svg"
alt=""
/>
<img
v-show="!isCollapse"
class="title"
src="../assets/img/Home/tmLogo.svg"
alt=""
/>
</div> </div>
<!-- <div class="search"> <!-- <div class="search">
<el-input v-if="!isCollapse" @keyup.enter.native="goSearch()" class="searchTxt" prefix-icon="el-icon-search" v-model="searchTxt" placeholder="搜索"></el-input> <el-input v-if="!isCollapse" @keyup.enter.native="goSearch()" class="searchTxt" prefix-icon="el-icon-search" v-model="searchTxt" placeholder="搜索"></el-input>
<i class="search-icon el-icon-search" v-else></i> <i class="search-icon el-icon-search" v-else></i>
</div> --> </div> -->
<el-menu :collapse-transition="false" ref="menu" :default-active="menuActive" text-color="#CCCCCC" <el-menu
active-text-color="#ffffff" background-color="#1F2D45" class="el-menu-vertical-demo" @open="handleOpen" :collapse-transition="false"
@close="handleClose" :collapse="isCollapse" @select="selectPath" :unique-opened="true"> ref="menu"
<div v-for="(menu, i) in routes" :key="i"> :default-active="menuActive"
<el-submenu :index="menu.name" v-if="menu.children && !menu.hidden"> text-color="#CCCCCC"
active-text-color="#ffffff"
background-color="#1F2D45"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:collapse="isCollapse"
@select="selectPath"
:unique-opened="true"
>
<div
v-for="(menu, i) in routes"
:key="i"
>
<el-submenu
:index="menu.name"
v-if="menu.children && !menu.hidden"
>
<template slot="title"> <template slot="title">
<img v-if="$route.path != menu.path" :src="menu.icon_d" alt="" /> <img
<img v-else :src="menu.icon_a" alt="" /> v-if="$route.path != menu.path"
:src="menu.icon_d"
alt=""
/>
<img
v-else
:src="menu.icon_a"
alt=""
/>
<span v-show="!isCollapse">{{ menu.meta.title }}</span> <span v-show="!isCollapse">{{ menu.meta.title }}</span>
</template> </template>
<div v-for="(item, index) in menu.children" :key="index"> <div
<el-menu-item v-if="!item.hidden" :index="item.name">{{ v-for="(item, index) in menu.children"
:key="index"
>
<el-menu-item
v-if="!item.hidden"
:index="item.name"
>{{
item.meta.title item.meta.title
}} }}
</el-menu-item> </el-menu-item>
</div> </div>
</el-submenu> </el-submenu>
<el-menu-item :index="menu.name" v-else-if="!menu.children && !menu.hidden"> <el-menu-item
<img v-if="$route.path != menu.path" :src="menu.icon_d" alt="" /> :index="menu.name"
<img v-else :src="menu.icon_a" alt="" /> v-else-if="!menu.children && !menu.hidden"
>
<img
v-if="$route.path != menu.path"
:src="menu.icon_d"
alt=""
/>
<img
v-else
:src="menu.icon_a"
alt=""
/>
<span slot="title">{{ menu.meta.title }}</span> <span slot="title">{{ menu.meta.title }}</span>
</el-menu-item> </el-menu-item>
</div> </div>
</el-menu> </el-menu>
<div class="fz"> <div class="fz">
<img v-if="!isCollapse" src="../assets/img/Home/logo.png" alt="" /> <img
<img v-else src="../assets/img/Home/fang.png" alt="" /> v-if="!isCollapse"
src="../assets/img/Home/logo.png"
alt=""
/>
<img
v-else
src="../assets/img/Home/fang.png"
alt=""
/>
</div> </div>
</el-aside> </el-aside>
</transition> </transition>
<el-container class="container-dom"> <el-container class="container-dom">
<el-header class="header"> <el-header class="header">
<div class="collapse" @click="switchCollapse"> <div
<img v-if="isCollapse" :src="rightImg" alt="" /> class="collapse"
<img v-else :src="leftImg" alt="" /> @click="switchCollapse"
>
<img
v-if="isCollapse"
:src="rightImg"
alt=""
/>
<img
v-else
:src="leftImg"
alt=""
/>
</div> </div>
<div class="options"> <div class="options">
<!-- <div class="sendFind">发查询</div> --> <!-- <div class="sendFind">发查询</div> -->
...@@ -55,19 +155,43 @@ ...@@ -55,19 +155,43 @@
<div class="message"> <div class="message">
<div class="circle"></div> <div class="circle"></div>
</div> </div>
<div class="quit" @click="$router.push('/index')"></div> <div
<div class="logout" @click="logout"> class="quit"
<svg-icon v-show="!isHoverLogout" icon-class="logout_d" class="icon" @mouseover="isHoverLogout = true" @click="$router.push('/index')"
@mouseleave="isHoverLogout = false" /> ></div>
<svg-icon v-show="isHoverLogout" icon-class="logout_a" class="icon" /> <div
class="logout"
@click="logout"
>
<svg-icon
v-show="!isHoverLogout"
icon-class="logout_d"
class="icon"
@mouseover="isHoverLogout = true"
@mouseleave="isHoverLogout = false"
/>
<svg-icon
v-show="isHoverLogout"
icon-class="logout_a"
class="icon"
/>
</div> </div>
</div> </div>
</el-header> </el-header>
<el-main class="main"> <el-main class="main">
<div class="contain"> <div class="contain">
<el-tabs :closable="paths.length > 1" v-model="routePath" @tab-click="handleClick" <el-tabs
@tab-remove="tabRemove"> :closable="paths.length > 1"
<el-tab-pane :label="item.name" :name="item.routeName" v-for="item in paths" :key="item.routeName"> v-model="routePath"
@tab-click="handleClick"
@tab-remove="tabRemove"
>
<el-tab-pane
:label="item.name"
:name="item.routeName"
v-for="item in paths"
:key="item.routeName"
>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<div class="breadcrumb"></div> <div class="breadcrumb"></div>
...@@ -87,260 +211,341 @@ ...@@ -87,260 +211,341 @@
<button @click="toAllPersonnelBase">全部人员库</button> --> <button @click="toAllPersonnelBase">全部人员库</button> -->
</div> </div>
<el-dialog class="jump-route" append-to-body :modal="false" @close="cancelJumpRoute" <el-dialog
:visible.sync="jumpRouteDialogVisible" width="27.625rem" :before-close="handleClose"> class="jump-route"
append-to-body
:modal="false"
@close="cancelJumpRoute"
:visible.sync="jumpRouteDialogVisible"
width="27.625rem"
:before-close="handleClose"
>
<span>当前页面有未保存的指位特征，是否退出？</span> <span>当前页面有未保存的指位特征，是否退出？</span>
<div class="dialog-footer"> <div class="dialog-footer">
<button class="confirm-btn" @click="confirmJumpRoute">是</button> <button
<button class="cancel-btn" @click="cancelJumpRoute">否</button> class="confirm-btn"
@click="confirmJumpRoute"
>是</button>
<button
class="cancel-btn"
@click="cancelJumpRoute"
>否</button>
</div> </div>
</el-dialog> </el-dialog>
<div class="shadow" v-show="isCropper"></div> <div
<div class="loading" v-show="loading_sd"> class="shadow"
v-show="isCropper"
></div>
<div
class="loading"
v-show="loading_sd"
>
<div class="loading-finger"> <div class="loading-finger">
<img src="../assets/img/loadingfinger.gif" alt="" /> <img
src="../assets/img/loadingfinger.gif"
alt=""
/>
</div> </div>
<div class="loading-name"> <div class="loading-name">
<img src="../assets/img/loadingtxt.gif" alt="" /> <img
src="../assets/img/loadingtxt.gif"
alt=""
/>
</div> </div>
</div> </div>
<div class="smallLoading" v-show="smallLoading"> <div
class="smallLoading"
v-show="smallLoading"
>
<div class="loading-finger"> <div class="loading-finger">
<img src="../assets/img/loadingfinger.gif" alt="" /> <img
src="../assets/img/loadingfinger.gif"
alt=""
/>
</div> </div>
<div class="loading-name"> <div class="loading-name">
<img src="../assets/img/loadingtxt.gif" alt="" /> <img
src="../assets/img/loadingtxt.gif"
alt=""
/>
</div> </div>
</div> </div>
<!-- 人像 --> <!-- 人像 -->
<transition name="el-fade-in-linear"> <transition name="el-fade-in-linear">
<div class="face-big" v-show="enLargeFace"> <div
class="face-big"
v-show="enLargeFace"
>
<div class="face-name">{{ rxInfoEnlarge.name }}</div> <div class="face-name">{{ rxInfoEnlarge.name }}</div>
<img class="face-img" :src="'data:image/jpeg;base64,' + rxInfoEnlarge.image" alt="" /> <img
class="face-img"
:src="'data:image/jpeg;base64,' + rxInfoEnlarge.image"
alt=""
/>
</div> </div>
</transition> </transition>
</div> </div>
</template> </template>
<script> <script>
import html2canvas from 'html2canvas' import html2canvas from 'html2canvas'
import '@/icons/logout_d.svg' import '@/icons/logout_d.svg'
import '@/icons/logout_a.svg' import '@/icons/logout_a.svg'
import indexRoutes from '@/router/modules/index' import indexRoutes from '@/router/modules/index'
import { mapGetters, mapState } from 'vuex' import { mapGetters, mapState } from 'vuex'
import utils from '@/utils/util.js' import utils from '@/utils/util.js'
export default { export default {
name: 'Home', name: 'Home',
data() { data () {
return { return {
searchTxt: '', searchTxt: '',
routes: this.$store.getters['layout/leftMenuData'], routes: this.$store.getters['layout/leftMenuData'],
isCollapse: false, isCollapse: false,
leftImg: require('../assets/img/Home/left.png'), leftImg: require('../assets/img/Home/left.png'),
rightImg: require('../assets/img/Home/right.png'), rightImg: require('../assets/img/Home/right.png'),
paths: [], paths: [],
menuActive: '', menuActive: '',
isHoverLogout: false, isHoverLogout: false,
routePath: '', routePath: '',
// 截屏出来的img url // 截屏出来的img url
cropperImage: '', cropperImage: '',
// 是否展示毛玻璃 // 是否展示毛玻璃
isCropper: false, isCropper: false,
// 是否跳转路由 // 是否跳转路由
jumpRouteDialogVisible: false, jumpRouteDialogVisible: false,
// 路由跳转的方式----- 1.面包屑切换。2.面包屑删除当前。3.左侧菜单跳转 // 路由跳转的方式----- 1.面包屑切换。2.面包屑删除当前。3.左侧菜单跳转
routeChangeType: 'change', routeChangeType: 'change',
// 人像信息 // 人像信息
rxInfoEnlarge: {}, rxInfoEnlarge: {},
// isStRole: false, // isStRole: false,
}
},
mounted () {
console.log(this.loading_sd)
this.$store.commit('loading/setLoadingSd', false)
let self = this
this.menuActive = this.$route.name
// 是否模糊
this.$bus.on('isBlur', (isBlur) => {
if (isBlur) {
self.isCropper = true
self.$store.commit('loading/setGlass', true)
} else {
self.isCropper = false
self.$store.commit('loading/setGlass', false)
} }
})
// 初始化人像是否放大
self.$store.commit('ryzwbj/setEnlargeFace', false)
document.querySelector('.shadow').addEventListener('click', function (e) {
// 如果图像是处于放大状态
if (self.enLargeFace) {
self.isCropper = false
self.$store.commit('ryzwbj/setEnlargeFace', false)
}
})
// 获取放大的人像信息
this.$bus.on('setRxInfoEnlarge', (rxInfoEnlarge) => {
console.log(11111111111)
self.rxInfoEnlarge = rxInfoEnlarge
})
// this.isStRole = user.isStRole()
},
updated () {
this.menuActive = this.$route.name
},
computed: {
...mapGetters(['defaultGoodsImage', 'userAuth']),
...mapState({
loading: (state) => state.loading.loading,
preRoute: (state) => state.loading.preRoute,
willRoute: (state) => state.loading.willRoute,
jumproute: (state) => state.loading.jumproute,
smallLoading: (state) => state.loading.smallLoading,
enLargeFace: (state) => state.ryzwbj.enLargeFace,
loading_sd: (state) => state.loading.loading_sd,
}),
cachePageName () {
return this.$store.state.layout.cachePageName
},
},
methods: {
// getMetaTitle(meta) { //用于选择标题
// let _that = this
// if (_that.isStRole && meta.sTtitle) {
// return meta.sTtitle
// } else {
// return meta.title
// }
// },
/**
* @description: 退出登录
* @param {*}
* @return {*}
*/
logout () {
this.$axios
.get('/security/logout')
.then((res) => {
if (res.data.code == 200) {
localStorage.removeItem('token') //删除名称为“token”的信息。
localStorage.removeItem('userInfo') //删除名称为“userInfor”的信息。
this.$router.replace('/Login')
this.$message.info('退出成功！')
}
})
.catch((err) => {
})
}, },
mounted() { /**
console.log(this.loading_sd) * @description: 开始搜索
this.$store.commit('loading/setLoadingSd', false) * @param {*}
let self = this * @return {*}
this.menuActive = this.$route.name */
// 是否模糊
this.$bus.on('isBlur', (isBlur) => { goSearch () {
if (isBlur) { this.searchTxt = ''
self.isCropper = true //console.log(this.searchTxt);
self.$store.commit('loading/setGlass', true) },
handleClick ({ name }) {
/*
if (
(this.$route.name === 'ryzwbj' || this.$route.name === 'ajzwbj') && !this.jumproute
) {
this.jumpRouteDialogVisible = true
this.isCropper = true
this.$store.commit('loading/setWillRoute', name)
this.routePath = name
this.routeChangeType = 'change'
} else {
if (name == '/Home/htzwcj') {
this.$router.push(name)
this.menuActive = ''
} else { } else {
self.isCropper = false let routerObj = this.paths.find((i) => i.routeName == name)
self.$store.commit('loading/setGlass', false) this.$router.push(routerObj.path)
} this.menuActive = routerObj.routeName
})
// 初始化人像是否放大
self.$store.commit('ryzwbj/setEnlargeFace', false)
document.querySelector('.shadow').addEventListener('click', function (e) {
// 如果图像是处于放大状态
if (self.enLargeFace) {
self.isCropper = false
self.$store.commit('ryzwbj/setEnlargeFace', false)
} }
}) }
*/
// 获取放大的人像信息 if (name == "/Home/htzwcj") {
this.$bus.on('setRxInfoEnlarge', (rxInfoEnlarge) => { this.$router.push(name);
console.log(11111111111) this.menuActive = "";
self.rxInfoEnlarge = rxInfoEnlarge } else {
}) let routerObj = this.paths.find((i) => i.routeName == name);
this.$router.push(routerObj.path);
// this.isStRole = user.isStRole() this.menuActive = routerObj.routeName;
}
}, },
updated() { /**
this.menuActive = this.$route.name * 确认需要跳转路由
*/
confirmJumpRoute () {
// 清除sessionStorage值
sessionStorage.clear()
this.isCropper = false
this.jumpRouteDialogVisible = false
if (this.routeChangeType === 'change') {
if (this.willRoute == '/Home/htzwcj') {
this.$router.push(this.willRoute)
this.menuActive = ''
} else {
let routerObj = this.paths.find((i) => i.routeName == this.willRoute)
this.$router.push(routerObj.path)
this.menuActive = routerObj.routeName
}
} else if (this.routeChangeType === 'del') {
let routerObj = this.paths.find((i) => i.routeName == this.$route.name)
if (routerObj) {
let pathName = routerObj.name
let res = this.paths.filter((item) => {
return item.name != pathName
})
if (pathName == this.$route.meta.title) {
if (this.paths.length > 0) {
// debugger;
let routerIndex = this.paths.findIndex(
(i) => i.routeName == this.$route.name
)
if (routerIndex == 0) {
this.$router.push(this.paths[1].path)
this.routePath = this.paths[1].routeName
} else {
this.$router.push(this.paths[routerIndex - 1].path)
this.routePath = this.paths[routerIndex - 1].routeName
}
}
}
this.paths = res
}
sessionStorage.setItem(
'crumbs',
utils.Encrypt(JSON.stringify(this.paths))
)
this.setKeepAlive()
} else {
this.$router.push({ name: this.willRoute })
}
}, },
computed: { /**
...mapGetters(['defaultGoodsImage', 'userAuth']), * 取消跳转路由
...mapState({ */
loading: (state) => state.loading.loading, cancelJumpRoute () {
preRoute: (state) => state.loading.preRoute, this.jumpRouteDialogVisible = false
willRoute: (state) => state.loading.willRoute, this.isCropper = false
jumproute: (state) => state.loading.jumproute, this.routePath = this.$route.name
smallLoading: (state) => state.loading.smallLoading, this.menuActive = ''
enLargeFace: (state) => state.ryzwbj.enLargeFace,
loading_sd: (state) => state.loading.loading_sd,
}),
cachePageName() {
return this.$store.state.layout.cachePageName
},
}, },
methods: { tabRemove (name) {
// getMetaTitle(meta) { //用于选择标题 if (name != 'ryzwbj' && name != 'ajzwbj') {
// let _that = this let routerObj = this.paths.find((i) => i.routeName == name)
// if (_that.isStRole && meta.sTtitle) { if (routerObj) {
// return meta.sTtitle let pathName = routerObj.name
// } else { let res = this.paths.filter((item) => {
// return meta.title return item.name != pathName
// }
// },
/**
* @description: 退出登录
* @param {*}
* @return {*}
*/
logout() {
this.$axios
.get('/security/logout')
.then((res) => {
if (res.data.code == 200) {
localStorage.removeItem('token') //删除名称为“token”的信息。
localStorage.removeItem('userInfo') //删除名称为“userInfor”的信息。
this.$router.replace('/Login')
this.$message.info('退出成功！')
}
}) })
.catch((err) => { if (pathName == this.$route.meta.title) {
}) if (this.paths.length > 0) {
}, // debugger;
/** let routerIndex = this.paths.findIndex(
* @description: 开始搜索 (i) => i.routeName == name
* @param {*} )
* @return {*} if (routerIndex == 0) {
*/ this.$router.push(this.paths[1].path)
this.routePath = this.paths[1].routeName
goSearch() { } else {
this.searchTxt = '' this.$router.push(this.paths[routerIndex - 1].path)
//console.log(this.searchTxt); this.routePath = this.paths[routerIndex - 1].routeName
}, }
handleClick({ name }) { }
/* }
this.paths = res
}
sessionStorage.setItem(
'crumbs',
utils.Encrypt(JSON.stringify(this.paths))
)
this.setKeepAlive()
return
} else {
if ( if (
(this.$route.name === 'ryzwbj' || this.$route.name === 'ajzwbj') && !this.jumproute (this.$route.name === 'ryzwbj' || this.$route.name === 'ajzwbj') &&
!this.jumproute
) { ) {
this.jumpRouteDialogVisible = true this.jumpRouteDialogVisible = true
this.isCropper = true this.isCropper = true
this.$store.commit('loading/setWillRoute', name) this.$store.commit('loading/setWillRoute', name)
this.routePath = name this.routePath = name
this.routeChangeType = 'change' this.routeChangeType = 'del'
} else { } else {
if (name == '/Home/htzwcj') {
this.$router.push(name)
this.menuActive = ''
} else {
let routerObj = this.paths.find((i) => i.routeName == name)
this.$router.push(routerObj.path)
this.menuActive = routerObj.routeName
}
}
*/
if (name == "/Home/htzwcj") {
this.$router.push(name);
this.menuActive = "";
} else {
let routerObj = this.paths.find((i) => i.routeName == name);
this.$router.push(routerObj.path);
this.menuActive = routerObj.routeName;
}
},
/**
* 确认需要跳转路由
*/
confirmJumpRoute() {
// 清除sessionStorage值
sessionStorage.clear()
this.isCropper = false
this.jumpRouteDialogVisible = false
if (this.routeChangeType === 'change') {
if (this.willRoute == '/Home/htzwcj') {
this.$router.push(this.willRoute)
this.menuActive = ''
} else {
let routerObj = this.paths.find((i) => i.routeName == this.willRoute)
this.$router.push(routerObj.path)
this.menuActive = routerObj.routeName
}
} else if (this.routeChangeType === 'del') {
let routerObj = this.paths.find((i) => i.routeName == this.$route.name)
if (routerObj) {
let pathName = routerObj.name
let res = this.paths.filter((item) => {
return item.name != pathName
})
if (pathName == this.$route.meta.title) {
if (this.paths.length > 0) {
// debugger;
let routerIndex = this.paths.findIndex(
(i) => i.routeName == this.$route.name
)
if (routerIndex == 0) {
this.$router.push(this.paths[1].path)
this.routePath = this.paths[1].routeName
} else {
this.$router.push(this.paths[routerIndex - 1].path)
this.routePath = this.paths[routerIndex - 1].routeName
}
}
}
this.paths = res
}
sessionStorage.setItem(
'crumbs',
utils.Encrypt(JSON.stringify(this.paths))
)
this.setKeepAlive()
} else {
this.$router.push({ name: this.willRoute })
}
},
/**
* 取消跳转路由
*/
cancelJumpRoute() {
this.jumpRouteDialogVisible = false
this.isCropper = false
this.routePath = this.$route.name
this.menuActive = ''
},
tabRemove(name) {
if (name != 'ryzwbj' && name != 'ajzwbj') {
let routerObj = this.paths.find((i) => i.routeName == name) let routerObj = this.paths.find((i) => i.routeName == name)
if (routerObj) { if (routerObj) {
let pathName = routerObj.name let pathName = routerObj.name
...@@ -369,840 +574,799 @@ ...@@ -369,840 +574,799 @@
utils.Encrypt(JSON.stringify(this.paths)) utils.Encrypt(JSON.stringify(this.paths))
) )
this.setKeepAlive() this.setKeepAlive()
return
} else {
if (
(this.$route.name === 'ryzwbj' || this.$route.name === 'ajzwbj') &&
!this.jumproute
) {
this.jumpRouteDialogVisible = true
this.isCropper = true
this.$store.commit('loading/setWillRoute', name)
this.routePath = name
this.routeChangeType = 'del'
} else {
let routerObj = this.paths.find((i) => i.routeName == name)
if (routerObj) {
let pathName = routerObj.name
let res = this.paths.filter((item) => {
return item.name != pathName
})
if (pathName == this.$route.meta.title) {
if (this.paths.length > 0) {
// debugger;
let routerIndex = this.paths.findIndex(
(i) => i.routeName == name
)
if (routerIndex == 0) {
this.$router.push(this.paths[1].path)
this.routePath = this.paths[1].routeName
} else {
this.$router.push(this.paths[routerIndex - 1].path)
this.routePath = this.paths[routerIndex - 1].routeName
}
}
}
this.paths = res
}
sessionStorage.setItem(
'crumbs',
utils.Encrypt(JSON.stringify(this.paths))
)
this.setKeepAlive()
}
} }
}, }
setKeepAlive() { },
let cachePageName setKeepAlive () {
if ( let cachePageName
JSON.parse(utils.Decrypt(sessionStorage.getItem('crumbs'))).length > 0 if (
JSON.parse(utils.Decrypt(sessionStorage.getItem('crumbs'))).length > 0
) {
cachePageName = JSON.parse(
utils.Decrypt(sessionStorage.getItem('crumbs'))
)
.map((i) => i.routeName)
.join()
} else {
cachePageName = ''
}
this.$store.commit('layout/resetcachePageName', cachePageName)
// TODO
// this.$store.commit('layout/delcachePageName', 'ryzwbj')
// this.$store.commit('layout/delcachePageName', 'ajzwbj')
//console.log(1111222222211111, this.$store.state.layout.cachePageName);
},
/**
* @description: 调回任务管理
* @param {*}
* @return {*}
*/
goManager () {
this.$router.push('/Home/htzwcj')
this.menuActive = ''
},
/**
* @description: 菜单跳转路由
* @param {*} index
* @param {*} path
* @return {*}
*/
selectPath (index, path) {
console.log(index)
console.log(path)
if (path == 'zzwcj') {
this.$router.pushToTab({
path: "/AllPersonnelBaseIndex",
query: {
xzry: true,
},
});
return;
}
this.$router.push({ name: index })
/*
if (
(this.$route.name === 'ryzwbj' || this.$route.name === 'ajzwbj') && !this.jumproute
) { ) {
cachePageName = JSON.parse( this.jumpRouteDialogVisible = true
utils.Decrypt(sessionStorage.getItem('crumbs')) this.isCropper = true
) this.$store.commit('loading/setWillRoute', index)
.map((i) => i.routeName) this.routeChangeType = 'leftMenu'
.join() } else {
} else { this.$router.push({name: index})
cachePageName = '' }
} */
this.$store.commit('layout/resetcachePageName', cachePageName) },
// TODO /**
// this.$store.commit('layout/delcachePageName', 'ryzwbj') * @description: 关闭标签
// this.$store.commit('layout/delcachePageName', 'ajzwbj') * @param {*}
//console.log(1111222222211111, this.$store.state.layout.cachePageName); * @return {*}
}, */
/** closePaths (pathName) {
* @description: 调回任务管理 let res = this.paths.filter((item) => {
* @param {*} return item.name != pathName
* @return {*} })
*/ this.paths = res
goManager() { //console.log(pathName == this.$route.meta.title);
if (pathName == this.$route.meta.title) {
this.$router.push('/Home/htzwcj') this.$router.push('/Home/htzwcj')
this.menuActive = '' this.$refs.menu.activeIndex = ''
}, }
/**
* @description: 菜单跳转路由
* @param {*} index
* @param {*} path
* @return {*}
*/
selectPath(index, path) {
console.log(index)
console.log(path)
if (path == 'zzwcj') {
this.$router.pushToTab({
path: "/AllPersonnelBaseIndex",
query: {
xzry: true,
},
});
return;
}
this.$router.push({ name: index })
/*
if (
(this.$route.name === 'ryzwbj' || this.$route.name === 'ajzwbj') && !this.jumproute
) {
this.jumpRouteDialogVisible = true
this.isCropper = true
this.$store.commit('loading/setWillRoute', index)
this.routeChangeType = 'leftMenu'
} else {
this.$router.push({name: index})
}
*/
},
/**
* @description: 关闭标签
* @param {*}
* @return {*}
*/
closePaths(pathName) {
let res = this.paths.filter((item) => {
return item.name != pathName
})
this.paths = res
//console.log(pathName == this.$route.meta.title);
if (pathName == this.$route.meta.title) {
this.$router.push('/Home/htzwcj')
this.$refs.menu.activeIndex = ''
}
},
/**
* @description: 跳转路由
* @param {*}
* @return {*}
*/
changeRouter(route) {
this.$router.push(route.path)
this.menuActive = route.routeName
},
/**
* @description: 展开收缩
* @param {*}
* @return {*}
*/
switchCollapse() {
this.isCollapse = !this.isCollapse
},
handleOpen(key, keyPath) {
//console.log(key, keyPath);
},
handleClose(key, keyPath) {
//console.log(key, keyPath);
},
}, },
beforeDestroy() { /**
//组件销毁前需要解绑事件。否则会出现重复触发事件的问题 * @description: 跳转路由
* @param {*}
* @return {*}
*/
changeRouter (route) {
this.$router.push(route.path)
this.menuActive = route.routeName
}, },
watch: { /**
enLargeFace(newValue, oldValue) { * @description: 展开收缩
}, * @param {*}
menuActive(newValue, oldValue) { * @return {*}
}, */
loading(newValue, oldValue) { switchCollapse () {
}, this.isCollapse = !this.isCollapse
$route: { },
handler(newValue, oldValue) { handleOpen (key, keyPath) {
// console.log(oldValue); //console.log(key, keyPath);
// 如果是人员指纹编辑界面或者是案件指纹编辑界面，进行判断是否跳转 },
// if(oldValue.name === 'ryzwbj' || oldValue.name === 'ajzwbj') { handleClose (key, keyPath) {
// return; //console.log(key, keyPath);
// } },
//console.log(this.routePath, 11111111111); },
//console.log(newValue, 11111111111); beforeDestroy () {
this.routePath = newValue.name //组件销毁前需要解绑事件。否则会出现重复触发事件的问题
setTimeout(() => { },
//console.log(1); watch: {
if (newValue.path != '/Home/htzwcj') { enLargeFace (newValue, oldValue) {
if (this.paths.length == 0) { },
this.paths.push({ menuActive (newValue, oldValue) {
name: newValue.meta.title, },
path: newValue.path, loading (newValue, oldValue) {
routeName: newValue.name, },
}) $route: {
} else { handler (newValue, oldValue) {
let obj = { // console.log(oldValue);
name: newValue.meta.title, // 如果是人员指纹编辑界面或者是案件指纹编辑界面，进行判断是否跳转
path: newValue.path, // if(oldValue.name === 'ryzwbj' || oldValue.name === 'ajzwbj') {
routeName: newValue.name, // return;
} // }
if ( //console.log(this.routePath, 11111111111);
this.paths.findIndex((i) => i.routeName == newValue.name) === -1 //console.log(newValue, 11111111111);
) { this.routePath = newValue.name
this.paths.push(obj) setTimeout(() => {
} //console.log(1);
if (newValue.path != '/Home/htzwcj') {
if (this.paths.length == 0) {
this.paths.push({
name: newValue.meta.title,
path: newValue.path,
routeName: newValue.name,
})
} else {
let obj = {
name: newValue.meta.title,
path: newValue.path,
routeName: newValue.name,
}
if (
this.paths.findIndex((i) => i.routeName == newValue.name) === -1
) {
this.paths.push(obj)
} }
} }
sessionStorage.setItem( }
'crumbs', sessionStorage.setItem(
utils.Encrypt(JSON.stringify(this.paths)) 'crumbs',
) utils.Encrypt(JSON.stringify(this.paths))
this.setKeepAlive() )
}, 0) this.setKeepAlive()
}, }, 0)
immediate: true,
}, },
immediate: true,
}, },
created() { },
this.paths = sessionStorage.getItem('crumbs') created () {
? JSON.parse(utils.Decrypt(sessionStorage.getItem('crumbs'))) this.paths = sessionStorage.getItem('crumbs')
: [] ? JSON.parse(utils.Decrypt(sessionStorage.getItem('crumbs')))
}, : []
} },
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 人像 // 人像
.face-big { .face-big {
z-index: 999; z-index: 999;
position: fixed; position: fixed;
top: calc(50% - 361px); top: calc(50% - 361px);
left: calc(50% - 271.5px); left: calc(50% - 271.5px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.face-name { .face-name {
font-size: 16px; font-size: 16px;
font-family:HarmonyOS_Sans_SC-Bold,HarmonyOS_Sans_SC; font-family: HarmonyOS_Sans_SC-Bold, HarmonyOS_Sans_SC;
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
margin-bottom: 6px; margin-bottom: 6px;
}
.face-img {
width: 543px;
height: 722px;
box-shadow: 0px 14px 30px 2px rgba(0, 21, 51, 0.16);
border-radius: 8px;
border: 1px solid #cccccc;
background: #ffffff;
}
} }
/deep/ .dialog-footer { .face-img {
margin-top: 26px; width: 543px;
width: 100%; height: 722px;
display: flex; box-shadow: 0px 14px 30px 2px rgba(0, 21, 51, 0.16);
align-items: center; border-radius: 8px;
justify-content: center; border: 1px solid #cccccc;
background: #ffffff;
button {
margin-right: 24px;
}
} }
}
/deep/ .el-dialog__body { /deep/ .dialog-footer {
display: flex; margin-top: 26px;
justify-content: center; width: 100%;
flex-direction: column; display: flex;
align-items: center; align-items: center;
justify-content: center;
span { button {
width: 370px; margin-right: 24px;
height: 22px;
font-size: 16px;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #333333;
line-height: 24px;
}
} }
}
.el-dialog {
height: 169px; /deep/ .el-dialog__body {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
span {
width: 370px;
height: 22px;
font-size: 16px;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #333333;
line-height: 24px;
}
}
.el-dialog {
height: 169px;
background: #ffffff;
box-shadow: 0px 18px 28px 10px rgba(0, 21, 51, 0.08) !important;
border-radius: 6px;
.confirm-btn {
cursor: pointer;
outline: none;
width: 72px;
height: 40px;
background: #ffffff; background: #ffffff;
box-shadow: 0px 18px 28px 10px rgba(0, 21, 51, 0.08) !important; border-radius: 4px;
border-radius: 6px; border: 1px solid #aeb5c2;
font-size: 14px;
.confirm-btn { font-family: HarmonyOS_Sans_SC;
cursor: pointer; color: #2e3846;
outline: none;
width: 72px; &:hover {
height: 40px; border: 1px solid #377fec;
background: #ffffff; color: #377fec;
border-radius: 4px;
border: 1px solid #aeb5c2;
font-size: 14px;
font-family:HarmonyOS_Sans_SC;
color: #2e3846;
&:hover {
border: 1px solid #377fec;
color: #377fec;
}
&:active {
border: 1px solid #044cb9;
color: #044cb9;
}
} }
.cancel-btn { &:active {
cursor: pointer; border: 1px solid #044cb9;
outline: none; color: #044cb9;
width: 72px;
height: 40px;
background: #055fe7;
border: 1px solid #055fe7;
border-radius: 4px;
font-size: 14px;
font-family:HarmonyOS_Sans_SC;
color: #ffffff;
&:hover {
background: #377fec;
border: 1px solid #377fec;
}
&:active {
background: #044cb9;
border: 1px solid #044cb9;
}
} }
} }
.v-modal { .cancel-btn {
background: none; cursor: pointer;
} outline: none;
width: 72px;
// 模糊的背景 height: 40px;
.cropper { background: #055fe7;
position: fixed; border: 1px solid #055fe7;
left: 0; border-radius: 4px;
top: 0; font-size: 14px;
width: 100%; font-family: HarmonyOS_Sans_SC;
height: 100%; color: #ffffff;
img { &:hover {
width: 100%; background: #377fec;
height: 100%; border: 1px solid #377fec;
filter: blur(1.5px);
} }
}
.shadow { &:active {
z-index: 999; background: #044cb9;
position: fixed; border: 1px solid #044cb9;
left: 0; }
top: 0;
width: 100%;
height: 100%;
background: rgba($color: #fff, $alpha: 0.65);
} }
}
#home { .v-modal {
height: 100vh; background: none;
//height: 100%; }
// filter: blur(5px);
}
.zhanshi { // 模糊的背景
filter: blur(2px); .cropper {
//display: none; position: fixed;
} left: 0;
top: 0;
width: 100%;
height: 100%;
.layout-container { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; filter: blur(1.5px);
display: flex; }
}
.shadow {
z-index: 999;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba($color: #fff, $alpha: 0.65);
}
#home {
height: 100vh;
//height: 100%;
// filter: blur(5px);
}
.zhanshi {
filter: blur(2px);
//display: none;
}
.layout-container {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
}
.container-dom {
background: #f5f5f5;
height: 100%;
}
/deep/ .el-menu.el-menu--inline {
.el-menu-item {
padding-left: 50px !important;
font-family: HarmonyOS_Sans_SC;
} }
.container-dom { .el-menu-item.is-active {
background: #f5f5f5; padding-left: 46px !important;
height: 100%;
} }
}
/deep/ .el-menu.el-menu--inline { .el-menu-vertical-demo:not(.el-menu--collapse) {
.el-menu-item { .el-submenu,
padding-left: 50px !important; .el-menu-item {
font-family:HarmonyOS_Sans_SC; img {
// width: 16px;
height: 16px;
} }
.el-menu-item.is-active { span {
padding-left: 46px !important; margin-left: 16px;
font-family: HarmonyOS_Sans_SC;
} }
} }
}
.el-menu-vertical-demo:not(.el-menu--collapse) { .el-menu-item:hover {
background-color: #15243c !important;
}
.el-submenu, .el-menu--collapse {
.el-menu-item { .el-submenu,
img { .el-menu-item {
// width: 16px; img {
height: 16px; // width: 16px;
} height: 16px;
span {
margin-left: 16px;
font-family:HarmonyOS_Sans_SC;
}
} }
} }
.el-menu-item:hover { /deep/ .el-submenu__title {
background-color: #15243c !important; display: flex;
justify-content: center;
align-items: center;
} }
.el-menu--collapse { /deep/ .el-tooltip {
text-align: center;
.el-submenu,
.el-menu-item {
img {
// width: 16px;
height: 16px;
}
}
/deep/ .el-submenu__title {
display: flex;
justify-content: center;
align-items: center;
}
/deep/ .el-tooltip {
text-align: center;
}
.el-submenu {
/deep/ .el-submenu__icon-arrow.el-icon-arrow-right {
display: none;
}
}
} }
.aside { .el-submenu {
background-color: #1f2d45; /deep/ .el-submenu__icon-arrow.el-icon-arrow-right {
display: none;
}
} }
}
.aside {
background-color: #1f2d45;
}
.aside .el-menu {
border-right: none;
}
.aside .logo {
background: #001e33;
width: 100%;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
}
.aside .logo .jh {
width: 30px;
height: 31px;
}
.aside {
/deep/ .el-menu-item.is-active {
box-sizing: border-box;
background-color: #15243c !important;
border-left: 4px solid #148be0;
.aside .el-menu { img {
border-right: none; margin-left: -4px;
}
} }
.aside .logo { .search {
background: #001e33;
width: 100%; width: 100%;
height: 64px; height: 104px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
}
.aside .logo .jh { .searchTxt {
width: 30px; width: 232px;
height: 31px; height: 40px;
} border-radius: 4px;
.aside {
/deep/ .el-menu-item.is-active {
box-sizing: border-box;
background-color: #15243c !important;
border-left: 4px solid #148be0;
img {
margin-left: -4px;
}
} }
.search { /deep/ .el-input__inner {
width: 100%; background: #1f2d45;
height: 104px; border: 1px solid #cccccc;
display: flex; color: #cccccc;
align-items: center; }
justify-content: center;
.searchTxt { .search-icon {
width: 232px; width: 14px;
height: 40px; height: 14px;
border-radius: 4px; color: #cccccc;
} cursor: pointer;
}
}
}
.aside .logo .title {
width: 191px;
height: 24px;
margin-left: 11px;
}
.fz {
position: fixed;
bottom: 32px;
left: 26px;
width: 137px;
height: 17px;
display: flex;
}
.fz img {
object-fit: contain;
}
.aside .minLogo {
background-size: 36px auto;
}
.el-tabs /deep/ {
font-family: HarmonyOS_Sans_SC;
.el-tabs__header {
margin: 0;
margin-top: 8px;
}
/deep/ .el-input__inner { .el-tabs__nav-prev {
background: #1f2d45; font-size: 20px !important;
border: 1px solid #cccccc; cursor: pointer;
color: #cccccc;
}
.search-icon { &:hover {
width: 14px; color: #055fe7;
height: 14px;
color: #cccccc;
cursor: pointer;
}
} }
} }
.aside .logo .title { .el-tabs__nav-next {
width: 191px; font-size: 20px !important;
height: 24px; cursor: pointer;
margin-left: 11px;
&:hover {
color: #055fe7;
}
} }
.fz { .is-active {
position: fixed; color: #0077ff;
bottom: 32px; border-bottom: 2px solid #006aff;
left: 26px;
width: 137px;
height: 17px;
display: flex;
} }
.fz img { .el-tabs__active-bar {
object-fit: contain; background-color: #006aff;
display: none;
} }
.aside .minLogo { .el-tabs__nav-wrap::after {
background-size: 36px auto; height: 1px !important;
} }
.el-tabs /deep/ { .el-tabs__item {
.el-tabs__header { position: relative;
margin: 0; padding-right: 35px !important;
margin-top: 8px; padding-left: 35px !important;
}
.el-tabs__nav-prev { &:hover {
font-size: 20px !important; .el-icon-close {
cursor: pointer; display: inline-block;
&:hover {
color: #055fe7;
} }
} }
.el-tabs__nav-next { .el-icon-close {
font-size: 20px !important; &::before {
cursor: pointer; transform: scale(1.1);
&:hover {
color: #055fe7;
} }
}
.is-active {
color: #0077ff;
border-bottom: 2px solid #006aff;
}
.el-tabs__active-bar {
background-color: #006aff;
display: none; display: none;
position: absolute;
top: 0;
right: 0;
} }
.el-tabs__nav-wrap::after { &:hover {
height: 1px !important; color: #0077ff;
} }
}
}
.header {
height: 64px;
background: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 25px;
.collapse {
width: 13.14px;
height: 12.99px;
cursor: pointer;
display: flex;
.el-tabs__item { img {
position: relative; cursor: pointer;
padding-right: 35px !important; object-fit: contain;
padding-left: 35px !important;
&:hover {
.el-icon-close {
display: inline-block;
}
}
.el-icon-close {
&::before {
transform: scale(1.1);
}
display: none;
position: absolute;
top: 0;
right: 0;
}
&:hover {
color: #0077ff;
}
} }
} }
.header { .options {
height: 64px;
background: #ffffff;
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
padding: 0 25px;
.collapse { .sendFind {
width: 13.14px;
height: 12.99px;
cursor: pointer; cursor: pointer;
display: flex; width: 96px;
height: 32px;
background: #ddebff;
border-radius: 4px;
font-size: 14px;
font-family: HarmonyOS_Sans_SC;
color: #055fe7;
line-height: 32px;
text-align: center;
}
img { .set,
cursor: pointer; .role {
object-fit: contain; font-size: 14px;
} font-family: HarmonyOS_Sans_SC;
color: #333333;
} }
.options { .set {
display: flex; margin-left: 56px;
align-items: center; }
.sendFind { .role {
cursor: pointer; margin-left: 24px;
width: 96px; }
height: 32px;
background: #ddebff;
border-radius: 4px;
font-size: 14px;
font-family:HarmonyOS_Sans_SC;
color: #055fe7;
line-height: 32px;
text-align: center;
}
.set, .message {
.role { cursor: pointer;
font-size: 14px; width: 16px;
font-family:HarmonyOS_Sans_SC; height: 16px;
color: #333333; display: flex;
} position: relative;
margin-left: 40px;
background-image: url("../assets/img/Home/info_d.png");
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
.set { &:hover {
margin-left: 56px; background-image: url("../assets/img/Home/info_a.png");
} }
.role { .circle {
margin-left: 24px; position: absolute;
right: -1px;
top: -2px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fa6400;
border: 1px solid #ffffff;
} }
}
.message { .back {
cursor: pointer; cursor: pointer;
width: 16px; width: 14px;
height: 16px; height: 12px;
display: flex; display: flex;
position: relative; background-image: url("../assets/img/Home/back_d.png");
margin-left: 40px; background-size: 14px 12px;
background-image: url("../assets/img/Home/info_d.png"); background-position: center;
background-size: 16px 16px; background-repeat: no-repeat;
background-position: center;
background-repeat: no-repeat;
&:hover {
background-image: url("../assets/img/Home/info_a.png");
}
.circle { &:hover {
position: absolute; background-image: url("../assets/img/Home/back_a.png");
right: -1px;
top: -2px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fa6400;
border: 1px solid #ffffff;
}
} }
.back { margin-left: 25px;
cursor: pointer; }
width: 14px;
height: 12px;
display: flex;
background-image: url("../assets/img/Home/back_d.png");
background-size: 14px 12px;
background-position: center;
background-repeat: no-repeat;
&:hover { .quit {
background-image: url("../assets/img/Home/back_a.png"); cursor: pointer;
} width: 14px;
height: 12px;
display: flex;
background-image: url("../assets/img/Home/back_d.png");
background-size: 14px 12px;
background-position: center;
background-repeat: no-repeat;
margin-left: 25px; &:hover {
background-image: url("../assets/img/Home/back_a.png");
} }
.quit { margin-left: 25px;
cursor: pointer; }
width: 14px;
height: 12px;
display: flex;
background-image: url("../assets/img/Home/back_d.png");
background-size: 14px 12px;
background-position: center;
background-repeat: no-repeat;
&:hover {
background-image: url("../assets/img/Home/back_a.png");
}
margin-left: 25px; .logout {
} cursor: pointer;
width: 14px;
height: 12px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 25px;
.logout { .icon {
cursor: pointer; cursor: pointer;
width: 14px; width: 100%;
height: 12px; height: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-left: 25px;
.icon {
cursor: pointer;
width: 100%;
height: 100%;
}
} }
} }
} }
}
.main {
padding: 24px;
width: 100%;
height: calc(100% - 60px);
.main { .contain {
padding: 24px; position: relative;
width: 100%; width: 100%;
height: calc(100% - 60px); height: 100%;
background: #ffffff;
border-radius: 8px;
overflow: hidden;
.contain { .scrollbar {
position: relative;
width: 100%; width: 100%;
height: 100%; position: relative;
background: #ffffff; height: 47px;
border-radius: 8px;
overflow: hidden; overflow: hidden;
}
.scrollbar { .breadcrumb {
width: 100%; position: absolute;
position: relative; left: 0;
height: 47px; top: 0;
overflow: hidden; display: flex;
} height: 47px;
border-bottom: 1px solid #eeeeee;
.breadcrumb { .path {
position: absolute; position: relative;
left: 0; cursor: pointer;
top: 0; box-sizing: border-box;
display: flex;
height: 47px; height: 47px;
border-bottom: 1px solid #eeeeee; padding: 11px 24px;
font-size: 14px;
.path { font-family: HarmonyOS_Sans_SC;
position: relative; flex-shrink: 0;
cursor: pointer; color: #666666;
box-sizing: border-box;
height: 47px;
padding: 11px 24px;
font-size: 14px;
font-family:HarmonyOS_Sans_SC;
flex-shrink: 0;
color: #666666;
&:hover {
.closeIcon {
display: block;
}
}
&:hover {
.closeIcon { .closeIcon {
position: absolute; display: block;
top: 0;
right: 0;
display: none;
} }
} }
.active { .closeIcon {
border-bottom: 2px solid #006aff; position: absolute;
color: #0077ff; top: 0;
right: 0;
display: none;
} }
} }
}
}
.loading { .active {
z-index: 999998; border-bottom: 2px solid #006aff;
position: fixed; color: #0077ff;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba($color: #fff, $alpha: 0.65);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.loading-finger {
width: 100px;
height: 100px;
img {
width: 100%;
height: 100%;
} }
} }
}
}
.loading {
z-index: 999998;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba($color: #fff, $alpha: 0.65);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.loading-finger {
width: 100px;
height: 100px;
.loading-name { img {
width: 100px; width: 100%;
height: auto; height: 100%;
margin-top: 20px;
img {
width: 100%;
height: 100%;
}
} }
} }
.smallLoading { .loading-name {
z-index: 999999; width: 100px;
position: fixed; height: auto;
right: 24px; margin-top: 20px;
bottom: 24px;
width: 1592px;
height: 828px;
background: rgba($color: #fff, $alpha: 0.65);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.loading-finger { img {
width: 100px; width: 100%;
height: 100px; height: 100%;
}
}
}
.smallLoading {
z-index: 999999;
position: fixed;
right: 24px;
bottom: 24px;
width: 1592px;
height: 828px;
background: rgba($color: #fff, $alpha: 0.65);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.loading-finger {
width: 100px;
height: 100px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
} }
}
.loading-name { .loading-name {
width: 100px; width: 100px;
height: auto; height: auto;
margin-top: 20px; margin-top: 20px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
} }
} }
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment