Skip to content

F
founder_vue
Commit 2ef1544d by liyuhang19990520
Options

home

parent 3010a7a9
Showing with 140 additions and 190 deletions
src/views/Home/Home.vue
......@@ -4,46 +4,28 @@
<div class="header">
<!-- 头部左侧 -->
<div class="left">
<div><img
src="../../assets/img/Home/jh.png"
alt=""
/></div>
<div><img src="../../assets/img/Home/jh.png" alt="" /></div>
<span><img
src="../../assets/img/Home/title.png"
alt=""
/></span>
<span><img src="../../assets/img/Home/title.png" alt="" /></span>
</div>
<!-- 头部右侧 -->
<div class="right">
<div>
<img
src="../../assets/img/Home/setting.svg"
alt=""
/> 系统管理
<div @click="$router.push('/UserManage')" style="cursor: pointer">
<img src="../../assets/img/Home/setting.svg" alt="" /> 系统管理
</div>
<div class="role">
<img
src="../../assets/img/Home/role.svg"
alt=""
/>用户角色
<img src="../../assets/img/Home/role.svg" alt="" />用户信息
<div class="rolelist">
<ul>
<li>姓名：李某某</li>
<li>单位：侦察大队</li>
<li>角色：系统管理员</li>
<li>用户名：{{ userInfo.id }}</li>
<li>姓&nbsp;&nbsp;&nbsp;名：{{ userInfo.name }}</li>
<li>单&nbsp;&nbsp;&nbsp;位：{{ userInfo.unitName }}</li>
</ul>
</div>
</div>
<div
style="cursor: pointer"
@click="logout"
>
<img
src="../../assets/img/Home/exit.svg"
alt=""
/>安全退出
<div style="cursor: pointer" @click="logout">
<img src="../../assets/img/Home/exit.svg" alt="" />安全退出
</div>
</div>
<!-- 主体 -->
......@@ -54,10 +36,7 @@
<div class="todoview">
<div class="todo">
<div>
<img
src="../../assets/img/Home/todoview.svg"
alt=""
/>
<img src="../../assets/img/Home/todoview.svg" alt="" />
</div>
<p>待办工作</p>
</div>
......@@ -88,54 +67,27 @@
<div class="todolist">
<!-- 第一列 -->
<div class="list l1">
<div
class="import_images"
@click="goQBAJK"
>
<img
src="../../assets/img/Home/import_images.svg"
alt=""
/>
<div class="import_images" @click="goQBAJK">
<img src="../../assets/img/Home/import_images.svg" alt="" />
<div>案件图片导入</div>
</div>
<div
@click="godrFPTX"
class="import_FTP"
>
<img
src="../../assets/img/Home/import_FTP.svg"
alt=""
/>
<div @click="godrFPTX" class="import_FTP">
<img src="../../assets/img/Home/import_FTP.svg" alt="" />
<div>FPTX导入</div>
</div>
</div>
<!-- 第二列 -->
<div
class="list l2"
@click="gosjzygl"
>
<img
src="../../assets/img/Home/query.svg"
alt=""
/>
<div class="list l2" @click="gosjzygl">
<img src="../../assets/img/Home/query.svg" alt="" />
<p>发查询</p>
</div>
<!-- 第三列 -->
<div
@click="gobdrd"
class="list l2 l3"
>
<img
src="../../assets/img/Home/comparison.svg"
alt=""
/>
<div @click="gobdrd" class="list l2 l3">
<img src="../../assets/img/Home/comparison.svg" alt="" />
<p>比对认定</p>
</div>
<!-- 第四列 -->
<div
@click="gozzwcj"
class="list l1 l4"
>
<div @click="gozzwcj" class="list l1 l4">
<div class="import_images collect">
<img
src="../../assets/img/Home/collect_new.svg"
......@@ -144,14 +96,8 @@
/>
<div>活体采集</div>
</div>
<div
@click="gosjzygl"
class="import_FTP management"
>
<img
src="../../assets/img/Home/management.svg"
alt=""
/>
<div @click="gosjzygl" class="import_FTP management">
<img src="../../assets/img/Home/management.svg" alt="" />
<div>数据资源管理</div>
</div>
</div>
......@@ -163,16 +109,16 @@
<script>
import qs from "qs";
import jwtDecode from "jwt-decode";
export default {
name: "Home",
data () {
data() {
return {
userInfo: { userName: "admin", passWord: "123456" },
userInfo: {},
};
},
methods: {
goQBAJK () {
goQBAJK() {
this.$router.push({
path: "/qbalk",
query: {
......@@ -180,19 +126,19 @@ export default {
},
});
},
godrFPTX () {
godrFPTX() {
this.$router.push("/drFPTX");
},
gobdrd () {
gobdrd() {
this.$router.push("/cxyrd");
},
gosjzygl () {
gosjzygl() {
this.$router.push("/AllPersonnelBaseIndex/");
},
gozzwcj () {
gozzwcj() {
// this.$router.push("/AllPersonnelBaseIndex");
},
logout () {
logout() {
this.$axios
.get("/login/login/logout")
.then((res) => {
......@@ -203,18 +149,23 @@ export default {
this.$message.info("退出成功！");
}
})
.catch((err) => {
});
.catch((err) => {});
},
},
created () {
mounted() {
// const decode = jwtDecode('Security-ceyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiIxIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2Mzg5MzYwMTAsImF1dGhvcml0aWVzIjoiXCJST0xFX0EsUk9MRV9CLFJPTEVfQyxST0xFX0QsUk9MRV9FLFJPTEVfRixST0xFX0csUk9MRV9ILFJPTEVfSSxST0xFX0EtMSxST0xFX0EtMixST0xFX0ItMSxST0xFX0ItMixST0xFX0ItMyxST0xFX0ItNCxST0xFX0ItNSxST0xFX0MtMSxST0xFX0MtMixST0xFX0QtMSxST0xFX0QtMixST0xFX0QtMyxST0xFX0QtNCxST0xFX0QtNSxST0xFX0QtNixST0xFX0QtNyxST0xFX0QtOCxST0xFX0QtOSxST0xFX0QtMTAsUk9MRV9ELTExLFJPTEVfRC0xMixST0xFX0QtMTMsUk9MRV9ELTE0LFJPTEVfRC0xNSxST0xFX0QtMTYsUk9MRV9ELTE3LFJPTEVfRC0xOCxST0xFX0UtMSxST0xFX0UtMixST0xFX0UtMyxST0xFX0UtNCxST0xFX0UtNSxST0xFX0YtMSxST0xFX0YtMixST0xFX0YtMyxST0xFX0ctMSxST0xFX0ctMixST0xFX0ctMyxST0xFX0gtMSxST0xFX0gtMixST0xFX0gtMyxST0xFX0gtNCxST0xFX0gtNSxST0xFX0gtNixST0xFX0gtNyxST0xFX0gtOCxST0xFX0gtOSxST0xFX0gtMTAsUk9MRV9ILTExLFJPTEVfSS0xLFJPTEVfSS0yLFJPTEVfSS0zLFJPTEVfSS00LFJPTEVfSS01LFJPTEVfSS02LFJPTEVfSS03LFJPTEVfSS04LFJPTEVfSS05LFJPTEVfSS0xMCxST0xFX0ktMTEsUk9MRV9JLTEyLFJPTEVfSS0xMyxST0xFX0ktMTQsUk9MRV9JLTE1XCIiLCJpc3MiOiJ6Y2ciLCJleHAiOjE2Mzg5Mzk2MTB9.GsTfUvF1V54ow09aQPz9W0Uyu2INrwod2lqqVlL9S3cf8-cbXENa-LFyqUcfma5UFckPtj2ZrV6ZyPP-HhDvhg');
// console.log(decode);
},
created() {
sessionStorage.setItem("crumbs", []);
this.userInfo = JSON.parse(localStorage.getItem("userInfo")).user;
console.log(this.userInfo);
},
};
</script>
<style scoped>
.page {
.page {
width: 100%;
height: 100%;
background-image: url(../../assets/img/Home/background_dark.png);
......@@ -222,90 +173,89 @@ export default {
background-position: center;
position: fixed;
background-size: 100% 100%;
}
/* 头部 */
.header {
}
/* 头部 */
.header {
width: 100%;
height: 64px;
padding: 0 24px;
background-color: #001e33;
box-sizing: border-box;
}
/* 头部左侧 */
.header .left {
}
/* 头部左侧 */
.header .left {
height: 100%;
float: left;
display: flex;
padding-top: 15px;
box-sizing: border-box;
}
.header .left div {
}
.header .left div {
width: 30px;
height: 31px;
}
.header .left div img {
}
.header .left div img {
width: 100%;
height: 100%;
}
.header .left span {
}
.header .left span {
display: inline-block;
width: 168px;
height: 32px;
margin-left: 16px;
margin-top: 4px;
}
/* 头部右侧 */
.header .right {
}
/* 头部右侧 */
.header .right {
height: 100%;
float: right;
display: flex;
align-items: center;
}
.header .right div {
}
.header .right div {
position: relative;
margin-left: 34px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #d8d8d8;
vertical-align: center;
}
.header .right .role:hover .rolelist {
}
.header .right .role:hover .rolelist {
display: block;
}
}
.header .right div .rolelist {
.header .right div .rolelist {
position: absolute;
top: 170%;
left: -80%;
width: 160px;
width: 180px;
background-color: transparent;
color: #000;
display: none;
}
}
.header .right div .rolelist ul{
width: 160px;
.header .right div .rolelist ul {
width: 180px;
height: 144px;
background: #ffffff;
box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.2);
border-radius: 0px 0px 6px 6px;
}
}
.header .right div .rolelist li{
width: 160px;
.header .right div .rolelist li {
width: 180px;
height: 48px;
background: transparent;
padding: 12px 16px;
font-size: 14px;
font-family: MicrosoftYaHei;
}
}
.header .right div img {
.header .right div img {
margin-right: 7px;
}
/* 主体 */
.main {
}
/* 主体 */
.main {
width: 100%;
height: 100%;
display: flex;
......@@ -313,37 +263,37 @@ export default {
align-items: center;
padding-top: 70px;
box-sizing: border-box;
}
.main .title {
}
.main .title {
font-size: 18px;
color: #999999;
line-height: 24px;
}
.main .title1 {
}
.main .title1 {
font-size: 36px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
line-height: 47px;
margin: 10px 0 32px 0;
}
/* 待办功能区 */
.main .todoview {
}
/* 待办功能区 */
.main .todoview {
display: flex;
height: 107px;
width: 640px;
background-color: #fff;
border-radius: 0px 0px 14px 14px;
border-top: 4px solid #148be0;
}
.main .todoview .todo {
}
.main .todoview .todo {
position: relative;
align-items: center;
display: flex;
padding: 24px 0 24px 43px;
box-sizing: border-box;
}
.main .todoview .todo div {
}
.main .todoview .todo div {
position: relative;
width: 60px;
height: 60px;
......@@ -351,16 +301,16 @@ export default {
border: 3px solid #ffffff;
border-radius: 50%;
z-index: 1;
}
.main .todoview .todo div img {
}
.main .todoview .todo div img {
position: absolute;
top: 5px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.main .todoview .todo p {
}
.main .todoview .todo p {
position: relative;
left: -44px;
display: inline-block;
......@@ -375,58 +325,58 @@ export default {
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #ff6f00;
}
.main .todoview .todopublic {
}
.main .todoview .todopublic {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 12px;
}
}
.main .todoview .todopublic div {
.main .todoview .todopublic div {
width: 4px;
height: 100%;
margin: 41px 0 40px 0;
background: #eeeeee;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
}
}
.main .todoview .todopublic p:nth-child(odd) {
.main .todoview .todopublic p:nth-child(odd) {
font-size: 16px;
color: #999999;
line-height: 21px;
}
.main .todoview .todopublic p:nth-child(even) {
}
.main .todoview .todopublic p:nth-child(even) {
font-size: 24px;
font-weight: 500;
color: #333333;
line-height: 29px;
margin-top: 6px;
}
.main .todoview .todopublic:hover p {
}
.main .todoview .todopublic:hover p {
color: rgba(20, 139, 224, 1);
}
/* 功能区域 */
.main .todolist {
}
/* 功能区域 */
.main .todolist {
width: 65%;
height: 400px;
margin-top: 63px;
display: flex;
}
.main .todolist .list {
}
.main .todolist .list {
flex: 1;
height: 50%;
margin: 0 12px;
box-sizing: border-box;
}
/* 第一列 */
.mian .todolist .l1 div {
}
/* 第一列 */
.mian .todolist .l1 div {
display: flex;
flex-direction: column;
}
.main .todolist .l1 .import_images {
}
.main .todolist .l1 .import_images {
width: 100%;
height: 188px;
border-radius: 12px;
......@@ -442,14 +392,14 @@ export default {
font-weight: bold;
color: #ffffff;
transition: transform 0.15s;
}
.main .todolist .l1 .import_images:hover {
}
.main .todolist .l1 .import_images:hover {
background: url(../../assets/img/Home/import_images_bg.png) no-repeat right
bottom/90px 90px,
linear-gradient(134deg, #fac137 0%, #f6a51a 100%);
transform: scale(102%);
}
.main .todolist .l1 .import_FTP {
}
.main .todolist .l1 .import_FTP {
width: 100%;
height: 188px;
border-radius: 12px;
......@@ -464,15 +414,15 @@ export default {
font-weight: bold;
color: #ffffff;
transition: transform 0.15s;
}
.main .todolist .l1 .import_FTP:hover {
}
.main .todolist .l1 .import_FTP:hover {
background: url(../../assets/img/Home/import_FTP_bg.svg) no-repeat right
bottom/90px 90px,
linear-gradient(134deg, #62bbfc 0%, #1177e8 100%);
transform: scale(102%);
}
/* 第二列 */
.main .todolist .l2 {
}
/* 第二列 */
.main .todolist .l2 {
width: 100%;
height: 100%;
background: url(../../assets/img/Home/query_bg.png) no-repeat left top/ cover,
......@@ -488,53 +438,53 @@ export default {
font-weight: bold;
color: #ffffff;
transition: transform 0.15s;
}
.main .todolist .l2 img {
}
.main .todolist .l2 img {
margin-bottom: 12px;
}
.main .todolist .l2:hover {
}
.main .todolist .l2:hover {
background: url(../../assets/img/Home/query_bg_hover.png) no-repeat left top/
cover,
linear-gradient(136deg, rgba(3, 149, 197, 0.99) 0%, #010731 100%);
transform: scale(102%);
}
/* 第三列 */
.main .todolist .l3 {
}
/* 第三列 */
.main .todolist .l3 {
background: url(../../assets/img/Home/comparison_bg.png) no-repeat left top/
cover,
linear-gradient(136deg, rgba(3, 108, 177, 0.99) 0%, #08023d 100%);
}
.main .todolist .l3:hover {
}
.main .todolist .l3:hover {
background: url(../../assets/img/Home/comparison_bg_hover.png) no-repeat left
top/ cover,
linear-gradient(136deg, rgba(3, 108, 177, 0.99) 0%, #08023d 100%);
}
/* 第四列 */
.main .todolist .l4 {
}
/* 第四列 */
.main .todolist .l4 {
width: 100%;
height: 100%;
}
.main .todolist .l4 div img {
}
.main .todolist .l4 div img {
margin: 40px 0 10px 0;
}
.main .todolist .l4 .collect {
}
.main .todolist .l4 .collect {
background: url(../../assets/img/Home/collect_bg.svg) no-repeat right
bottom/75px 75px,
linear-gradient(133deg, #34b6f0 0%, #0390d3 100%);
}
.main .todolist .l4 .collect:hover {
}
.main .todolist .l4 .collect:hover {
background: url(../../assets/img/Home/collect_bg.svg) no-repeat right
bottom/75px 75px,
linear-gradient(133deg, #42bbf2 0%, #12a1e5 100%);
}
.main .todolist .l4 .management {
}
.main .todolist .l4 .management {
background: url(../../assets/img/Home/management_bg.svg) no-repeat right
bottom/70px 87px,
linear-gradient(133deg, #34b6f0 0%, #0390d3 100%);
}
.main .todolist .l4 .management:hover {
}
.main .todolist .l4 .management:hover {
background: url(../../assets/img/Home/management_bg.svg) no-repeat right
bottom/70px 87px,
linear-gradient(133deg, #42bbf2 0%, #12a1e5 100%);
}
}
</style>
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