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