index.ftl 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927
  1. <!-- 主页 -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>${app.appName}</title>
  6. <#include '/include/head-file.ftl'/>
  7. <script src="${base}/static/plugins/sockjs/1.4.0/sockjs.min.js"></script>
  8. <script src="${base}/static/plugins/stomp/2.3.3/stomp.min.js"></script>
  9. <!-- 此部分是铭飞平台MStroe的客户端(MStore不在铭飞开源产品范围),如果不需要使用MStore可以删除掉 -->
  10. <script src="https://cdn.mingsoft.net/platform/ms-store.umd.min.js"></script>
  11. <style>
  12. .to-ele {
  13. font-size: 18px;
  14. margin: -2px 9px 0px 3px
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <#include "/reset-password.ftl"/>
  20. <#include "/exit-system.ftl"/>
  21. <div id="app" class="index" :class="theme">
  22. <el-container>
  23. <!--左侧菜单-->
  24. <el-aside class="ms-admin-menu-aside" v-cloak>
  25. <el-scrollbar style="height:100%">
  26. <el-menu :default-active="asideMenuActive" class="el-menu-vertical-demo"
  27. text-color="rgba(255,255,255,1)" active-text-color="rgba(255,255,255,1)"
  28. :collapse="collapseMenu" :unique-opened='true' ref='menu' @open="asideMenuOpen">
  29. <div class="ms-admin-logo" :style="{display: 'flex','padding-left': (collapseMenu?'5px':'22px')}">
  30. <img :src="ms.base+'/static/images/logo.png'"/>
  31. <div class="class-1" v-show="!collapseMenu">
  32. <div class="class-2">v</div>
  33. 5.2.0
  34. </div>
  35. </div>
  36. <el-submenu :popper-class="['ms-admin-menu-aside-submenu',theme]" :index="menu.id+''"
  37. :data-index="menu.id+''" v-for="(menu,i) in asideMenuList" :key='i'>
  38. <template slot="title">
  39. <i class='ms-admin-icon iconfont' :class="menu.modelIcon"></i>
  40. <span>{{menu.modelTitle}}</span>
  41. </template>
  42. <!-- 子菜单 -->
  43. <el-menu-item :index="sub.id+''" :data-index="sub.id"
  44. v-for="(sub,index) in getSubMenu(menu.id)"
  45. :key='sub.modelId' v-text="sub.modelTitle"
  46. @click.self='open(sub)'></el-menu-item>
  47. </el-submenu>
  48. <!-- 收缩按钮 -->
  49. </el-menu>
  50. </el-scrollbar>
  51. </el-aside>
  52. <#--右侧内容-->
  53. <el-container class="ms-admin-container" v-cloak>
  54. <!--头部-->
  55. <el-header class="ms-admin-header" v-cloak>
  56. <#--展示合并菜单-->
  57. <div class="ms-admin-header-menu-shrink" @click="collapseMenu = !collapseMenu">
  58. <i class="iconfont"
  59. :class="collapseMenu?'icon-liebiaoxiangyou':'icon-shousuo'"></i>
  60. </div>
  61. <!--头部menu-->
  62. <el-menu menu-trigger="hover" class="ms-admin-header-menu" :default-active="headMenuActive"
  63. mode="horizontal">
  64. <el-submenu style="height: 100%;">
  65. <template slot="title">
  66. <i class="iconfont icon-gezi" style="font-size: 17px;margin-right:8PX"></i>
  67. <span>功能大全</span>
  68. </template>
  69. <div class="ms-admin-header-menu-all">
  70. <li class="ms-admin-header-menu-all-item" v-for="(item,index) of parentMenuList"
  71. :key='index' @click='openMenu(item,index)'>
  72. <i class="iconfont" :class="item.modelIcon" style="padding-right: 4px"></i>
  73. <div style="width:80px">{{item.modelTitle}}</div>
  74. <div style="float: right;width: 18px;">
  75. <template>
  76. <i v-if="markList.find(function(x) {
  77. return x.title == item.modelTitle
  78. })!=undefined" @click="cancelMarkMenu(item.modelTitle)"
  79. class='el-icon-star-on'></i>
  80. <i v-else class='el-icon-star-off '
  81. @click="markMenu(item.modelTitle,item.modelIcon)"></i>
  82. </template>
  83. </div>
  84. </li>
  85. </div>
  86. </el-submenu>
  87. </el-menu>
  88. <!--头部右侧-->
  89. <div class="ms-admin-header-right">
  90. <el-menu menu-trigger="hover" class="ms-admin-header-menu"
  91. mode="horizontal">
  92. <el-submenu style="height: 100%;" popper-class="ms-admin-header-menu-item">
  93. <template slot="title">
  94. <i class="iconfont icon-pifu" style="font-size: 18px"></i>
  95. </template>
  96. <el-menu-item @click="handleCommand('ms-theme-light')"
  97. style="display: flex;align-items: center">
  98. <div style="height: 18px;width: 18px;background-color: rgba(64,158,255,1);margin-right: 7px;border-radius: 2px;"></div>
  99. <span>浅色系</span>
  100. </el-menu-item>
  101. <el-menu-item @click="handleCommand('ms-theme-dark')"
  102. style="display: flex;align-items: center">
  103. <div style="height: 18px;width: 18px;background-color: rgba(56,58,63,1);margin-right: 7px;border-radius: 2px;"></div>
  104. <span>深色系</span>
  105. </el-menu-item>
  106. </el-submenu>
  107. </el-menu>
  108. <#-- 语言切换-->
  109. <#-- <el-dropdown @command="handleLanguageClick">-->
  110. <#-- <span class="el-dropdown-link" >-->
  111. <#-- {{locale.text}}<i class="el-icon-arrow-down el-icon--right"></i>-->
  112. <#-- </span>-->
  113. <#-- <el-dropdown-menu slot="dropdown">-->
  114. <#-- <el-dropdown-item v-for="(item,index) in localeCommands" :command="item">{{item.text}}</el-dropdown-item>-->
  115. <#-- </el-dropdown-menu>-->
  116. <#-- </el-dropdown>-->
  117. <el-menu menu-trigger="hover" class="ms-admin-header-menu " mode="horizontal">
  118. <el-submenu popper-class="ms-admin-header-menu-item">
  119. <template slot="title">
  120. <span class="ms-admin-people-head"
  121. v-text="peopleInfo.managerName && peopleInfo.managerName.substr(0, 2)"></span>
  122. <span v-text='peopleInfo.managerName'></span>
  123. </template>
  124. <el-menu-item @click="handleCommand('ms-theme-light')"
  125. style="display: flex;align-items: center" @click.native='openModal'>
  126. <i class="el-icon-key"></i>
  127. <span slot="title">修改密码</span>
  128. </el-menu-item>
  129. <el-menu-item @click="handleCommand('ms-theme-dark')"
  130. style="display: flex;align-items: center" @click.native='openModal'>
  131. <i class="el-icon-switch-button"></i>
  132. <span slot="title">退出</span>
  133. </el-menu-item>
  134. </el-submenu>
  135. </el-menu>
  136. <!--mstore按钮-->
  137. <ms-store client="${client}"></ms-store>
  138. </div>
  139. </el-header>
  140. <!--内容-->
  141. <el-main class="ms-admin-main">
  142. <!--选项卡-->
  143. <el-tabs class="ms-admin-tabs" v-model="currentTab" type="card" closable @tab-remove="closeTab"
  144. @tab-click='tabClick'>
  145. <el-tab-pane v-for="(item, index) in editableTabs" :key="index" :label="item.modelTitle"
  146. :name="item.modelTitle"
  147. :data-id='item.id' :data-modelId='item.modelId'>
  148. <keep-alive>
  149. <iframe :src='item.isStore?item.modelUrl:ms.manager+"/"+item.modelUrl+(item.modelUrl.indexOf("?")==-1?"?":"&")+"id="+item.id+"&modelCode="+item.modelCode+"&modelTitle="+encodeURI(item.modelTitle)'
  150. :ref="item.modelTitle"></iframe>
  151. </keep-alive>
  152. </el-tab-pane>
  153. </el-tabs>
  154. </el-main>
  155. </el-container>
  156. </el-container>
  157. </div>
  158. </body>
  159. </html>
  160. <script>
  161. var indexVue = new Vue({
  162. el: "#app",
  163. data: {
  164. code: '',
  165. locale: {
  166. text: '中文',
  167. language: 'ch',
  168. },
  169. localeCommands: [
  170. {
  171. text: '中文',
  172. language: 'ch',
  173. },
  174. {
  175. text: 'English',
  176. language: 'en',
  177. }
  178. ],
  179. menuList: [], //菜单接口数据
  180. asideMenuList: [], //侧边菜单
  181. parentMenuList: [], //一级菜单
  182. subMenuList: [], //二级菜单 所有
  183. unreadTotal: 0,//未读消息数量
  184. messageList: [],//消息列表
  185. mainParentMenuList: [], //头部菜单显示主要的选项
  186. loginDown: false, //登录下拉
  187. asideMenuActive: "", //左侧选中菜单
  188. headMenuActive: '', //头部菜单激活
  189. editableTabsValue: '',
  190. messageTypeList: [],
  191. editableTabs: [{"modelTitle": "工作台", "modelUrl": "main.do"}], //当前打开的tab页面
  192. shortcutMenu: false, //快捷菜单显示状态
  193. collapseMenu: false, //菜单折叠,false不折叠
  194. currentTab: '工作台', //当前激活tab的name
  195. tabIndex: 1,
  196. markList: [
  197. {title: "权限管理", icon: "icon-wode", hide: true},
  198. {title: "系统设置", icon: "icon-xitongguanli", hide: true},
  199. {title: "内容管理", icon: "icon-neirongguanli", hide: true},
  200. {title: "会员中心", icon: "icon-huiyuanzhongxin", hide: true},
  201. {title: "自定义管理", icon: "icon-zidingyiguanli", hide: true},
  202. ],
  203. //登录用户信息
  204. peopleInfo: {
  205. managerName: '', //账号
  206. managerNickName: '',
  207. },
  208. mstore: {},
  209. theme: 'ms-theme-light',
  210. callbackFun: {},
  211. },
  212. computed: {
  213. messageType: function (type) {
  214. var that = this
  215. return function (type) {
  216. var dict = that.messageTypeList.find(function (x) {
  217. return x.dictValue == type;
  218. });
  219. if (dict) {
  220. return dict.dictLabel;
  221. }
  222. return '';
  223. }
  224. }
  225. },
  226. watch: {
  227. menuList: function (n, o) {
  228. var that = this;
  229. n && n.forEach(function (item, index) {
  230. item.modelId ? that.subMenuList.push(item) : that.parentMenuList.push(item)
  231. })
  232. },
  233. parentMenuList: function (n, o) {
  234. var that = this
  235. this.mainParentMenuList = n.slice(0, 5);
  236. this.asideMenuList = n.filter(function (f) {
  237. return that.markList.find(
  238. function (x) {
  239. return x.title == f['modelTitle']
  240. }) != undefined
  241. })
  242. },
  243. editableTabs: {
  244. handler: function (n, o) {
  245. if (n.length) {
  246. var that = this;
  247. if (!document.querySelector('.el-icon-refresh')) {
  248. var i = document.createElement('i');
  249. i.className = "el-icon-refresh ms-admin-refresh"
  250. i.title = "点击刷新当前页"
  251. i.addEventListener('click', function () {
  252. var index = null
  253. Object.keys(that.$refs).forEach(function (item, i) {
  254. item.indexOf(that.currentTab) > -1 ? index = i : ''
  255. }, that)
  256. that.$refs[Object.keys(that.$refs)[index]][0].contentDocument.location.reload(true)
  257. })
  258. document.querySelector('.el-tabs__header').insertBefore(i, document.querySelector('.el-tabs__nav-wrap'))
  259. }
  260. } else {
  261. if (document.querySelector('.ms-admin-refresh')) {
  262. document.querySelector('.el-tabs__header').removeChild(document.querySelector('.ms-admin-refresh'))
  263. }
  264. }
  265. },
  266. deep: true
  267. }
  268. },
  269. methods: {
  270. handleLanguageClick: function (val) {
  271. this.locale.text = val.text
  272. this.locale.language = val.language
  273. //语言切换
  274. console.log(val)
  275. },
  276. getAuthorization: function () {
  277. },
  278. markMenu: function (title, icon) {
  279. var menu = {
  280. title: title,
  281. icon: icon,
  282. }
  283. this.markList.push(menu);
  284. localStorage.setItem("markList", JSON.stringify(this.markList))
  285. this.callbackFun();
  286. },
  287. cancelMarkMenu: function (title) {
  288. var index = this.markList.findIndex(function (x) {
  289. return x.title == title
  290. });
  291. this.markList.splice(index, 1);
  292. localStorage.setItem("markList", JSON.stringify(this.markList))
  293. },
  294. handleMessage: function () {
  295. this.openMenuInTitle('收到消息')
  296. },
  297. handleCommand: function (theme) {
  298. this.theme = theme;
  299. localStorage.setItem("theme", theme);
  300. },
  301. // 菜单列表
  302. list: function () {
  303. var that = this;
  304. ms.http.get(ms.manager + "/model/list.do")
  305. .then(function (data) {
  306. that.menuList = data.data.rows
  307. }, function (err) {
  308. that.$message.error(err);
  309. })
  310. },
  311. asideMenuOpen: function (index, indexPath) {
  312. },
  313. // 菜单打开页面
  314. open: function (sub) {
  315. var that = this
  316. var result = '';
  317. result = this.editableTabs.some(function (item, index) {
  318. return item.modelTitle == sub.modelTitle
  319. })
  320. if (sub.syncStoreUrl) {
  321. //sub.modelUrl = "http://store.web.i.mingsoft.net/#/?client=localhost:8080//ms";
  322. sub.modelUrl = sub.syncStoreUrl;
  323. sub.modelTitle = 'mstore';
  324. sub.isStore = true;
  325. !result ? this.editableTabs.push(sub) : ""
  326. } else {
  327. !result ? this.editableTabs.push(sub) : ""
  328. }
  329. this.currentTab = sub.modelTitle;
  330. this.headMenuActive = sub.modelId
  331. this.$nextTick(function () {
  332. that.asideMenuActive = sub.id;
  333. })
  334. // 处理其他逻辑
  335. setTimeout(function () {
  336. if (document.querySelector('.el-tabs__nav-prev')) {
  337. document.querySelector('.el-tabs__nav-wrap').style.padding = '0 40px'
  338. } else {
  339. document.querySelector('.el-tabs__nav-wrap').style.padding = '0'
  340. }
  341. }, 16)
  342. },
  343. tabClick: function (tab) {
  344. this.asideMenuActive = tab.$el.dataset.id
  345. this.headMenuActive = tab.$el.dataset.modelId
  346. console.log(this.editableTabs)
  347. },
  348. // 获取当前菜单的子菜单
  349. getSubMenu: function (id) {
  350. var result = [];
  351. var that = this;
  352. that.subMenuList && that.subMenuList.forEach(function (item) {
  353. item.modelId == id ? result.push(item) : ''
  354. })
  355. return result;
  356. },
  357. //关闭tab标签页
  358. closeTab: function (targetName) {
  359. var that = this;
  360. // 关闭的面板是当前激活面板
  361. if (that.currentTab == targetName) {
  362. var modelId = null
  363. that.editableTabs.forEach(function (tab, index, arr) {
  364. if (tab.modelTitle == targetName) {
  365. modelId = arr[index].modelId
  366. var nextTab = arr[index + 1] || arr[index - 1];
  367. if (nextTab) {
  368. that.currentTab = nextTab.modelTitle
  369. that.asideMenuActive = nextTab.id
  370. that.headMenuActive = nextTab.modelId
  371. }
  372. }
  373. })
  374. }
  375. // 去掉关闭的tab
  376. that.editableTabs = that.editableTabs.filter(function (tab) {
  377. return tab.modelTitle !== targetName
  378. })
  379. // 关闭左侧父菜单
  380. if (that.editableTabs.length) {
  381. var result = that.editableTabs.every(function (item) {
  382. return item.modelId !== modelId
  383. })
  384. if (result) {
  385. that.asideMenuList.forEach(function (menu, index, arr) {
  386. if (menu.id == modelId) {
  387. var flag = false;
  388. that.markList.forEach(function (item, index, array) {
  389. if (item.title == menu.modelTitle) {
  390. flag = true;
  391. }
  392. })
  393. if (!flag) {
  394. arr.splice(index, 1);
  395. }
  396. }
  397. })
  398. }
  399. } else {
  400. that.asideMenuList = []
  401. }
  402. // 判断是否出现左右箭头
  403. setTimeout(function () {
  404. if (document.querySelector('.el-tabs__nav-prev')) {
  405. document.querySelector('.el-tabs__nav-wrap').style.padding = '0 40px'
  406. } else {
  407. document.querySelector('.el-tabs__nav-wrap').style.padding = '0'
  408. }
  409. }, 16)
  410. },
  411. openParentMenuInTitle: function (title) {
  412. var data = this.parentMenuList.find(function (menu) {
  413. return menu.modelTitle == title
  414. })
  415. data && this.openMenu(data)
  416. },
  417. // 头部导航打开菜单
  418. openMenu: function (menu, index) {
  419. this.asideMenuList.some(function (item, index) {
  420. return item.id == menu.id
  421. }) || this.asideMenuList.push(menu)
  422. // this.getSubMenu(menu.id)[0] && this.$refs.menu.open(this.getSubMenu(menu.id)[0].modelTitle);
  423. var children = [];
  424. this.menuList.forEach(function (tab) {
  425. if (tab.modelId == menu.id) {
  426. children.push(tab)
  427. }
  428. })
  429. this.currentTab = children[0] && children[0].modelTitle;
  430. this.open(children[0]);
  431. var that = this;
  432. setTimeout(function () {
  433. that.shortcutMenu = false
  434. }, 50)
  435. that.$nextTick(function () {
  436. that.$refs.menu.open(String(menu.id))
  437. })
  438. },
  439. managerGet: function () {
  440. var that = this;
  441. ms.http.get(ms.manager + "/basic/manager/get.do")
  442. .then(function (data) {
  443. that.peopleInfo = data.data
  444. resetPasswordVue.resetPasswordForm.managerName = that.peopleInfo.managerName
  445. }, function (err) {
  446. that.$message.error(err);
  447. })
  448. },
  449. exitSystem: function () {
  450. this.$confirm('是否确认退出账号?', '退出系统', {
  451. confirmButtonText: '确定',
  452. cancelButtonText: '取消',
  453. cancelButtonClass: 'el-button--mini',
  454. confirmButtonClass: 'el-button--mini',
  455. type: 'warning'
  456. }).then(function () {
  457. ms.http.get(ms.manager + "/loginOut.do")
  458. .then(function (data) {
  459. isShow = false;
  460. location.href = ms.manager + "/login.do";
  461. }, function (err) {
  462. that.$message.error(err.msg);
  463. })
  464. })
  465. },
  466. // 打开修改密码,退出的模态框
  467. openModal: function () {
  468. event.target.innerText.indexOf('修改密码') > -1 ?
  469. resetPasswordVue.isShow = true : this.exitSystem();
  470. },
  471. // 显示图标
  472. formmateIcon: function (icon) {
  473. return "<i class='ms-admin-icon iconfont'></i>"
  474. },
  475. //打开指定标题
  476. openMenuInTitle: function (title) {
  477. this.open(this.menuList.find(function (x) {
  478. return x.modelTitle == title
  479. }))
  480. },
  481. //消息显示
  482. getMessage: function () {
  483. var that = this
  484. ms.http.post(ms.manager + "/message/myMessage/list.do", {pageSize: 9999, mlStatus: 'unread'})
  485. .then(function (res) {
  486. if (res.result) {
  487. that.messageList = res.data.rows.splice(0, 5);
  488. that.unreadTotal = res.data.total;
  489. }
  490. }, function (err) {
  491. that.$message.error(err);
  492. })
  493. },
  494. dictList: function () {
  495. var that = this;
  496. ms.http.get(ms.base + '/mdiy/dict/list.do', {dictType: '消息类型', pageSize: 99999}).then(function (res) {
  497. if(res.result){
  498. res = res.data;
  499. that.messageTypeList = res.rows;
  500. }
  501. }).catch(function (err) {
  502. console.log(err);
  503. });
  504. },
  505. addCallBackFun: function (fun) {
  506. this.callbackFun = fun;
  507. }
  508. },
  509. created: function () {
  510. this.getAuthorization();
  511. var markList = localStorage.getItem("markList");
  512. if (markList) {
  513. this.markList = JSON.parse(markList)
  514. }
  515. localStorage.setItem("markList", JSON.stringify(this.markList))
  516. },
  517. mounted: function () {
  518. // this.getMessage();
  519. this.dictList();
  520. if (localStorage.getItem("theme")) {
  521. this.theme = localStorage.getItem("theme");
  522. }
  523. //setInterval(this.getMessage,3000)
  524. // 菜单列表
  525. this.list();
  526. //获取登录用户信息
  527. this.managerGet();
  528. },
  529. })
  530. </script>
  531. <style>
  532. .ms-admin-logo {
  533. display: flex;
  534. align-items: center;
  535. overflow: hidden;
  536. }
  537. .ms-admin-logo img {
  538. padding: 14px 0;
  539. width: 50px;
  540. }
  541. .ms-admin-logo > div {
  542. display: flex;
  543. align-items: center;
  544. }
  545. .ms-admin-logo > div span {
  546. margin-top: -6px;
  547. position: absolute;
  548. margin-left: 10px;
  549. font-size: 12px;
  550. }
  551. .ms-admin-logo .iconfont {
  552. color: #fff;
  553. margin-left: auto;
  554. margin-right: 20px;
  555. cursor: pointer;
  556. }
  557. .ms-admin-header-right {
  558. margin-left: auto;
  559. min-width: 200px;
  560. display: flex;
  561. align-items: center;
  562. justify-content: flex-end;
  563. padding: 0;
  564. line-height: 1;
  565. }
  566. .ms-admin-header-right .ms-admin-people-head {
  567. width: 30px !important;
  568. height: 30px !important;
  569. margin-right: 10px;
  570. border-radius: 50%;
  571. display: flex;
  572. align-items: center;
  573. justify-content: center;
  574. background: #0099ff;
  575. color: #fff;
  576. }
  577. .ms-admin-header-menu-shrink {
  578. width: 64px;
  579. display: flex;
  580. justify-content: center;
  581. align-items: center;
  582. line-height: 50px;
  583. border-right: 1px solid rgba(238, 238, 238, 1);
  584. cursor: pointer;
  585. }
  586. .ms-admin-header-menu-shrink:hover {
  587. background: rgba(250, 250, 250, 0.2);
  588. }
  589. .el-menu-vertical-demo:not(.el-menu--collapse) {
  590. width: 180px;
  591. height: 100vh;
  592. }
  593. .el-menu--collapse {
  594. height: 100vh;
  595. }
  596. .ms-admin-menu-aside {
  597. width: auto !important;
  598. height: 100%;
  599. position: relative;
  600. overflow: visible;
  601. }
  602. .ms-admin-menu-aside .ms-admin-menu .el-menu--inline .is-active {
  603. border-left: 2px solid #0099ff;
  604. }
  605. .ms-admin-menu-aside .ms-menu-expand i {
  606. font-weight: bolder;
  607. font-size: 14px;
  608. color: #333;
  609. position: absolute;
  610. transform: rotate(90deg);
  611. right: 40%;
  612. }
  613. .ms-admin-menu-aside .ms-menu-expand::before {
  614. border-color: transparent transparent #eee;
  615. border-style: none solid solid;
  616. border-width: 0 30px 22px;
  617. content: "";
  618. display: block;
  619. height: 0;
  620. left: -10px;
  621. width: 30px;
  622. }
  623. .ms-admin-menu-aside .el-submenu__title,
  624. .ms-admin-menu-aside .el-menu-item {
  625. color: rgba(255, 255, 255, 1);
  626. height: 40px;
  627. line-height: 40px;
  628. }
  629. .ms-admin-menu-aside .el-submenu__title i {
  630. color: inherit;
  631. }
  632. .ms-admin-menu-aside .el-submenu__title .iconfont {
  633. font-size: 19px !important;
  634. }
  635. .ms-admin-menu-aside .el-submenu.is-active .el-submenu__title {
  636. color: rgba(255, 255, 255, 1) !important;
  637. }
  638. .ms-admin-header {
  639. display: flex;
  640. padding: 0;
  641. background-color: rgba(255, 255, 255, 1);
  642. height: 50px !important;
  643. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  644. z-index: 1;
  645. }
  646. .ms-admin-header .ms-admin-header-menu {
  647. border-bottom: none;
  648. position: relative;
  649. }
  650. .ms-admin-header .ms-admin-header-menu > .ms-admin-menu-item > * {
  651. height: 50px !important;
  652. line-height: 50px !important;
  653. border-bottom: none !important;
  654. font-size: 1em;
  655. }
  656. .ms-admin-header .ms-admin-header-menu .ms-admin-shortcut-menu > li {
  657. margin: 0;
  658. padding: 0 20px;
  659. text-align: left;
  660. display: -webkit-inline-box;
  661. display: inline-block;
  662. height: 50px;
  663. line-height: 50px;
  664. font-weight: normal;
  665. font-size: 14px;
  666. color: #333;
  667. }
  668. .ms-admin-header .ms-admin-header-menu .ms-admin-shortcut-menu > li:hover {
  669. cursor: pointer;
  670. color: #0099ff;
  671. }
  672. .ms-admin-header-menu .el-submenu__title {
  673. height: 50px !important;
  674. line-height: 50px !important;
  675. display: flex;
  676. align-items: center;
  677. }
  678. .ms-admin-header-menu .el-submenu__title:hover {
  679. background-color: #F2F6FC !important;
  680. color: #409EFF !important;
  681. }
  682. .ms-admin-header-menu .el-submenu__title:hover i {
  683. color: #409EFF !important;
  684. }
  685. .ms-admin-header-menu .el-submenu__icon-arrow {
  686. margin-top: 4px !important;
  687. }
  688. .ms-admin-header-menu-item .el-menu-item:hover {
  689. background-color: #F2F6FC !important;
  690. color: #409EFF !important;
  691. }
  692. .ms-admin-header-menu-item .el-menu-item:hover i {
  693. color: #409EFF !important;
  694. }
  695. .ms-admin-header-menu-all {
  696. width: 560px;
  697. height: auto;
  698. background: rgba(255, 255, 255, 1);
  699. border-radius: 2px;
  700. display: flex;
  701. flex-direction: row;
  702. flex-wrap: wrap;
  703. line-height: 40px;
  704. }
  705. .ms-admin-header-menu-all .iconfont {
  706. font-size: 17px;
  707. }
  708. .ms-admin-header-menu-all .ms-admin-header-menu-all-item {
  709. display: flex;
  710. width: 25%;
  711. justify-content: center;
  712. align-items: center;
  713. cursor: pointer;
  714. }
  715. .ms-admin-header-menu-all .ms-admin-header-menu-all-item .el-icon-star-on {
  716. color: #ccc;
  717. font-size: 17px;
  718. margin-left: -1px;
  719. margin-top: 1px;
  720. }
  721. .ms-admin-header-menu-all .ms-admin-header-menu-all-item .el-icon-star-on:hover {
  722. color: rgba(64, 158, 255, 1);
  723. }
  724. .ms-admin-header-menu-all .ms-admin-header-menu-all-item .el-icon-star-off {
  725. color: #ccc;
  726. }
  727. .ms-admin-header-menu-all .ms-admin-header-menu-all-item .el-icon-star-off:hover {
  728. color: rgba(64, 158, 255, 1);
  729. }
  730. .ms-admin-header-menu-all .ms-admin-header-menu-all-item:hover {
  731. color: rgba(64, 158, 255, 1);
  732. }
  733. .ms-admin-menu-aside-submenu .el-menu-item {
  734. line-height: 40px;
  735. height: 40px;
  736. }
  737. .el-submenu__title * {
  738. vertical-align: top;
  739. }
  740. .ms-admin-login-theme .el-dropdown-menu__item {
  741. display: flex;
  742. flex-direction: row;
  743. justify-content: center;
  744. align-items: center;
  745. }
  746. .el-tabs__nav .el-tabs__item:nth-child(1) span {
  747. display: none;
  748. }
  749. .el-tabs__item.is-active {
  750. background-color: rgba(255, 255, 255, 1);
  751. }
  752. .el-menu {
  753. border-right: 0px;
  754. }
  755. .ms-admin-logo .class-1 {
  756. color: white;
  757. padding-top: 8px;
  758. color: #FFFFFF;
  759. word-wrap: break-word;
  760. font-family: MicrosoftYaHei-Bold;
  761. font-weight: bold;
  762. font-style: italic;
  763. }
  764. .ms-admin-logo .class-2 {
  765. font-size: 12px;
  766. font-weight: normal;
  767. }
  768. .top-operate-select .el-menu--popup {
  769. width: 162px;
  770. min-width: 162px;
  771. }
  772. .ms-admin-container {
  773. height: auto;
  774. }
  775. .ms-admin-container > .ms-admin-main {
  776. padding: 0;
  777. background-color: #fff;
  778. z-index: 0;
  779. }
  780. .ms-admin-container > .ms-admin-main .ms-admin-tabs {
  781. height: calc(100vh - 50px);
  782. display: flex;
  783. flex-direction: column;
  784. }
  785. .ms-admin-container > .ms-admin-main .ms-admin-tabs .el-tabs__content {
  786. height: 100%;
  787. }
  788. .ms-admin-container > .ms-admin-main .ms-admin-tabs .el-tabs__content .el-tab-pane {
  789. height: 100%;
  790. }
  791. .ms-admin-container > .ms-admin-main .ms-admin-tabs .el-tabs__header {
  792. background: #fafafa;
  793. margin-bottom: 0;
  794. }
  795. .ms-admin-container > .ms-admin-main .ms-admin-tabs .el-tabs__header .el-tabs__nav-scroll .el-tabs__nav {
  796. border-left: none;
  797. border-radius: 0;
  798. }
  799. .ms-admin-container > .ms-admin-main .ms-admin-tabs .ms-admin-refresh {
  800. float: right;
  801. width: 40px;
  802. height: 40px;
  803. text-align: center;
  804. border-left: 1px solid #e6e6e6;
  805. cursor: pointer;
  806. position: relative;
  807. }
  808. .ms-admin-container > .ms-admin-main .ms-admin-tabs .ms-admin-refresh::before {
  809. position: absolute;
  810. left: 34%;
  811. top: 50%;
  812. transform: translateY(-50%);
  813. color: #999;
  814. }
  815. .ms-admin-container > .ms-admin-main .ms-admin-tabs .el-tabs__nav-next,
  816. .ms-admin-container > .ms-admin-main .ms-admin-tabs .el-tabs__nav-prev {
  817. width: 40px;
  818. height: 40px;
  819. display: flex;
  820. justify-content: center;
  821. align-items: center;
  822. }
  823. .ms-admin-container > .ms-admin-main .ms-admin-tabs .el-tabs__nav-next {
  824. border-left: 1px solid #e6e6e6;
  825. }
  826. .ms-admin-container > .ms-admin-main .ms-admin-tabs .el-tabs__nav-prev {
  827. border-right: 1px solid #e6e6e6;
  828. }
  829. .ms-admin-container > .ms-admin-main iframe {
  830. width: 100%;
  831. height: 100%;
  832. border: none !important;
  833. }
  834. </style>