Header.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  1. <template>
  2. <div id="layoutHeader">
  3. <el-row>
  4. <el-col :span="8" v-if="$store.state.windowsSize.width >= 1300" class="logoBox">
  5. <div class="logo"></div>
  6. <div class="title">浦东新区资源环境智慧审计平台</div>
  7. </el-col>
  8. <el-col :span="2" v-if="$store.state.windowsSize.width < 1300" class="logoBox">
  9. <div class="logo"></div>
  10. </el-col>
  11. <el-col :span="$store.state.windowsSize.width < 1300 ? 18 : 13">
  12. <el-menu
  13. :default-active="ActiveIndex"
  14. class="el-menu-demo"
  15. mode="horizontal"
  16. active-text-color="#74FFFF"
  17. @select="select"
  18. >
  19. <el-menu-item index="1">首页</el-menu-item>
  20. <el-submenu index="2">
  21. <template slot="title" class="submenu">疑点筛查</template>
  22. <el-menu-item index="2-1">土地资源</el-menu-item>
  23. <el-menu-item index="2-2">水资源</el-menu-item>
  24. <el-menu-item index="2-3">林资源</el-menu-item>
  25. <el-menu-item index="2-4">生态资源</el-menu-item>
  26. <el-menu-item index="2-5">镇域专题</el-menu-item>
  27. </el-submenu>
  28. <el-menu-item index="3">综合分析</el-menu-item>
  29. <el-menu-item index="4">全流程管理</el-menu-item>
  30. <el-submenu index="5">
  31. <template slot="title">智能辅助</template>
  32. <el-menu-item index="5-1">法律法规</el-menu-item>
  33. <el-menu-item index="5-2">频发问题</el-menu-item>
  34. <el-menu-item index="5-3">指标体系</el-menu-item>
  35. </el-submenu>
  36. </el-menu>
  37. </el-col>
  38. <el-col :span="3">
  39. <div class="user">
  40. <!-- 我的任务快捷菜单 -->
  41. <div class="manage-icon" @click="goToMyMission()"></div>
  42. <div class="alert-icon">
  43. <div class="alert-info">12</div>
  44. </div>
  45. <div class="inner-user">
  46. <el-dropdown @command="handleCommand">
  47. <span class="el-dropdown-link">
  48. <el-avatar
  49. size="medium"
  50. :src="$store.state.userInfo && $store.state.userInfo.photo ? $store.state.userInfo.photo : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
  51. ></el-avatar>
  52. <!-- <div class="inner-user-icon"></div> -->
  53. <div class="inner-user-text">{{ $store.state.userInfo && $store.state.userInfo.username ? $store.state.userInfo.username : '未登录'}}</div>
  54. </span>
  55. <el-dropdown-menu slot="dropdown">
  56. <el-dropdown-item command="loginOut">注销登录</el-dropdown-item>
  57. </el-dropdown-menu>
  58. </el-dropdown>
  59. </div>
  60. </div>
  61. </el-col>
  62. </el-row>
  63. </div>
  64. </template>
  65. <script>
  66. export default {
  67. name: "Header",
  68. data() {
  69. return {
  70. ActiveIndex: "0",
  71. navData: {
  72. 1: "首页",
  73. 2: "疑点筛查",
  74. "2-1": "土地资源",
  75. "2-2": "生态资源",
  76. "2-3": "林资源",
  77. "2-4": "水资源",
  78. "2-5": "镇域专题",
  79. 3: "综合分析",
  80. 4: "全流程管理",
  81. "5-1": "法律法规",
  82. "5-2": "频发问题",
  83. "5-3": "指标体系"
  84. }
  85. };
  86. },
  87. mounted() {
  88. this.getActiveIndex(true);
  89. },
  90. methods: {
  91. // 菜单选择记忆(由于不使用路由,为了防止用户刷新页面后页面丢失,故保存并重新赋值当前页)
  92. getActiveIndex(status) {
  93. let _ActiveIndex = "";
  94. if (this.$store.state.navSelect) {
  95. if (this.$store.state.navSelect.subIndex) {
  96. _ActiveIndex = this.$store.state.navSelect.index + "-" + this.$store.state.navSelect.subIndex;
  97. } else {
  98. _ActiveIndex = this.$store.state.navSelect.index;
  99. }
  100. } else {
  101. _ActiveIndex = "1";
  102. }
  103. if (this.ActiveIndex != _ActiveIndex) {
  104. this.ActiveIndex = _ActiveIndex;
  105. if (status) {
  106. this.select(this.ActiveIndex);
  107. }
  108. }
  109. },
  110. // 快捷进入我的任务页面
  111. goToMyMission() {
  112. this.ActiveIndex = "3";
  113. this.select(this.ActiveIndex);
  114. setTimeout(() => {
  115. this.$bus.$emit("wdrw");
  116. });
  117. },
  118. // 切换菜单事件
  119. select: function (index) {
  120. var that = this;
  121. var name = that.navData[index];
  122. index = index.split("-");
  123. that.$emit("navSelect", {
  124. index: index[0],
  125. subIndex: index[1],
  126. name: name
  127. });
  128. },
  129. // 用户菜单
  130. handleCommand(command) {
  131. console.log(command);
  132. switch (command) {
  133. case "loginOut":
  134. this.loginOut();
  135. }
  136. },
  137. // 用户退出操作
  138. loginOut() {
  139. this.$store.commit("changeUserInfo", {});
  140. localStorage.removeItem("TOKEN");
  141. localStorage.removeItem("USER_ID");
  142. this.$router.push("/login");
  143. const h = this.$createElement;
  144. this.$notify({
  145. title: "登出成功",
  146. message: h("i", { style: "color: teal" }, "用户退出!感谢使用!")
  147. });
  148. }
  149. },
  150. watch: {
  151. "$store.state.navSelect": {
  152. handler() {
  153. this.getActiveIndex(false);
  154. },
  155. deep: true
  156. }
  157. }
  158. };
  159. </script>
  160. <style lang="less" scoped>
  161. #layoutHeader {
  162. position: absolute;
  163. z-index: 2;
  164. width: 100%;
  165. height: 60px;
  166. left: 0px;
  167. top: 0px;
  168. // background: url("../../assets/home/header_background.png") no-repeat center;
  169. background: linear-gradient(180deg, #4279d2 0%, #0942c0 100%);
  170. background-size: 100% 100%;
  171. color: #ffffff;
  172. -moz-user-select: none;
  173. -webkit-user-select: none;
  174. -ms-user-select: none;
  175. -khtml-user-select: none;
  176. user-select: none;
  177. .logoBox {
  178. display: flex;
  179. transform: skew(-45deg);
  180. position: relative;
  181. left: -40px;
  182. height: 60px;
  183. background: linear-gradient(0deg, #4279d2 0%, #0942c0 100%);
  184. overflow: hidden;
  185. flex-wrap: nowrap;
  186. align-content: center;
  187. }
  188. .logo {
  189. position: relative;
  190. transform: skew(45deg);
  191. left: calc(1rem + 40px);
  192. top: 15px;
  193. width: 30px;
  194. height: 30px;
  195. background: url("../../assets/home/header_title_icon.png") no-repeat center;
  196. }
  197. .title {
  198. width: 30vw;
  199. padding-left: 1.5rem;
  200. transform: skew(45deg);
  201. line-height: 60px;
  202. font-size: 32px;
  203. text-indent: 50px;
  204. font-weight: 400;
  205. font-family: YouSheBiaoTiHei;
  206. letter-spacing: 0.25rem;
  207. overflow: hidden;
  208. text-overflow: ellipsis;
  209. display: -webkit-box;
  210. -webkit-box-orient: vertical;
  211. -webkit-line-clamp: 1;
  212. }
  213. }
  214. .el-menu-demo /deep/ .el-menu-item,
  215. .el-submenu {
  216. padding: 0 30px;
  217. font-size: 24px;
  218. font-family: pingfangSC;
  219. font-weight: bold;
  220. color: #74ffff;
  221. line-height: 60px;
  222. border: none !important;
  223. }
  224. .el-menu-demo > .is-active {
  225. position: relative;
  226. &::before {
  227. position: absolute;
  228. content: "";
  229. box-sizing: border-box;
  230. left: 0;
  231. width: 100%;
  232. height: 100%;
  233. background: linear-gradient(0deg, #4279d2 0%, #0942c0 100%);
  234. border-bottom: 4px solid rgb(116, 255, 255);
  235. transform: skew(-45deg);
  236. z-index: -1;
  237. }
  238. }
  239. .el-menu-demo /deep/ .el-menu-item:hover,
  240. .el-menu-demo /deep/ .el-menu-item:focus {
  241. background: none !important;
  242. }
  243. #layoutHeader /deep/ .el-submenu__title {
  244. color: #ffffff !important;
  245. font-size: 24px !important;
  246. }
  247. #layoutHeader /deep/ .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  248. background: none;
  249. }
  250. #layoutHeader /deep/ .el-submenu__title i {
  251. color: #fff;
  252. }
  253. #layoutHeader /deep/ .el-menu {
  254. background: transparent;
  255. border-bottom: 0px;
  256. }
  257. #layoutHeader /deep/ .el-menu-item {
  258. color: #ffffff;
  259. }
  260. #layoutHeader .user {
  261. float: right;
  262. margin-right: 30px;
  263. cursor: pointer;
  264. width: 95%;
  265. height: 100%;
  266. position: relative;
  267. .manage-icon {
  268. width: 28px;
  269. height: 28px;
  270. position: absolute;
  271. left: 20px;
  272. top: 14px;
  273. background: url("../../assets/home/header_manage.png") no-repeat center;
  274. }
  275. .alert-icon {
  276. width: 26px;
  277. height: 30px;
  278. position: absolute;
  279. left: 80px;
  280. top: 14px;
  281. background: url("../../assets/home/header_alert.png") no-repeat center;
  282. .alert-info {
  283. width: 25px;
  284. height: 20px;
  285. position: absolute;
  286. background: red;
  287. border-radius: 10px;
  288. right: -20px;
  289. top: -10px;
  290. color: #fff;
  291. display: flex;
  292. align-items: center;
  293. justify-content: center;
  294. }
  295. }
  296. .admin-icon {
  297. width: 41px;
  298. height: 41px;
  299. background: #74ffff;
  300. border: 1px solid #ffffff;
  301. border-radius: 50%;
  302. position: absolute;
  303. left: 80px;
  304. top: 8px;
  305. }
  306. .inner-user {
  307. width: 46px;
  308. height: 46px;
  309. position: absolute;
  310. right: 15px;
  311. top: 4px;
  312. color: #fff;
  313. &-icon {
  314. margin: 0 auto;
  315. width: 35px;
  316. height: 35px;
  317. background: #74ffff;
  318. border: 1px solid #ffffff;
  319. border-radius: 50%;
  320. }
  321. &-text {
  322. margin: 0 auto;
  323. width: 39px;
  324. height: 15px;
  325. color: #fff;
  326. display: flex;
  327. align-items: center;
  328. justify-content: center;
  329. font-size: 13px;
  330. }
  331. }
  332. }
  333. </style>