App.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336
  1. <template>
  2. <div id="app" :class="{}">
  3. <div
  4. class="app_head"
  5. >
  6. <div class="logo" @click="goTo('/course')"></div>
  7. <span
  8. style="margin-left: 10px; color: #fff; font-weight: 600"
  9. @click="goTo('/course')"
  10. >广东省案例征集</span
  11. >
  12. <div class="user_head" v-if="this.$store.state.isLogin">
  13. <!-- <div class="noticeBox">
  14. <i class="noticeI" @click="goTo('/works')"></i>
  15. <span v-if="this.$store.state.nCount != 0">{{
  16. this.$store.state.nCount > 99 ? "99+" : this.$store.state.nCount
  17. }}</span>
  18. </div> -->
  19. <span class="user_name">{{
  20. this.$store.state.userInfo ? this.$store.state.userInfo.name : "用户"
  21. }}</span>
  22. <div @click="exit">
  23. <i class="exitI"></i>
  24. <el-button type="text" style="color: white">退出</el-button>
  25. </div>
  26. </div>
  27. </div>
  28. <div
  29. style="width: 100%; height: 100%"
  30. :class="{
  31. ggheight: true,
  32. }"
  33. >
  34. <!-- main 内容 -->
  35. <keep-alive v-if="$route.meta.keepAlive">
  36. <!-- 这里是会被缓存的视图组件 -->
  37. <router-view
  38. v-if="$route.meta.keepAlive"
  39. :class="{ pb_body: isShowNav }"
  40. />
  41. </keep-alive>
  42. <!-- 这里是不被缓存的视图组件 -->
  43. <router-view
  44. v-if="!$route.meta.keepAlive"
  45. :class="{ pb_body: isShowNav }"
  46. />
  47. <!-- 底部导航 -->
  48. <!-- <footer-nav
  49. v-if="isShowNav"
  50. :luyou="this.$store.state.luyou"
  51. ></footer-nav>-->
  52. </div>
  53. </div>
  54. </template>
  55. <script>
  56. // import leftBar from "./components/tools/leftBar";
  57. import { Message } from "element-ui";
  58. export default {
  59. name: "App",
  60. data() {
  61. return {
  62. isShowNav: true, // 是否显示导航 Tab
  63. navTabs: [], // 导航
  64. };
  65. },
  66. // components: {
  67. // "footer-nav": leftBar,
  68. // },
  69. created: function () {
  70. this.routerP();
  71. // this.getnCount();
  72. },
  73. methods: {
  74. isLogin() {
  75. const loading = this.$loading.service({
  76. background: "rgba(255, 255, 255)",
  77. target: document.querySelector("body"),
  78. });
  79. var _isLogin = this.$cookies.get("tlogin");
  80. var userInfo = this.$cookies.get("teacherInfo");
  81. if (_isLogin == "1" && userInfo) {
  82. loading.close();
  83. this.$store.commit("update", ["isLogin", true]);
  84. // var info = JSON.parse(window.sessionStorage.getItem("userInfo"));
  85. this.$store.commit("update", ["userInfo", userInfo]);
  86. } else {
  87. this.$store.commit("update", ["isLogin", false]);
  88. Message({
  89. message: "未登录,请登录",
  90. type: "warning",
  91. });
  92. setTimeout(() => {
  93. loading.close();
  94. this.$router.push("/login");
  95. }, 2000);
  96. }
  97. },
  98. routerP() {
  99. const { navTabs } = this.$data;
  100. let router_path = this.$route.path;
  101. console.log(router_path);
  102. if (router_path != "/login") {
  103. this.isLogin();
  104. }
  105. var a = 0;
  106. for (var i = 0; i < navTabs.length; i++) {
  107. if (router_path == navTabs[i]) {
  108. this.isShowNav = true;
  109. a = 1;
  110. break;
  111. }
  112. }
  113. if (a == 0) {
  114. this.isShowNav = false;
  115. }
  116. },
  117. exit() {
  118. sessionStorage.clear();
  119. this.$cookies.remove("tlogin");
  120. this.$cookies.remove("teacherInfo");
  121. this.$store.commit("update", ["isLogin", false]);
  122. this.$store.commit("update", ["userInfo", {}]);
  123. Message({
  124. message: "退出成功",
  125. type: "success",
  126. });
  127. this.$router.push("/login");
  128. },
  129. goTo(path) {
  130. this.$router.push(path);
  131. },
  132. },
  133. watch: {
  134. $route(to, from) {
  135. const { navTabs } = this.$data;
  136. const toPath = to.path;
  137. const fromName = from.name;
  138. var a = 0;
  139. for (var i = 0; i < navTabs.length; i++) {
  140. if (toPath == navTabs[i]) {
  141. this.isShowNav = true;
  142. a = 1;
  143. break;
  144. }
  145. }
  146. if (a == 0) {
  147. this.isShowNav = false;
  148. }
  149. },
  150. },
  151. };
  152. </script>
  153. <style>
  154. * {
  155. margin: 0;
  156. padding: 0;
  157. }
  158. body {
  159. font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
  160. "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  161. }
  162. #app {
  163. height: 100%;
  164. width: 100%;
  165. background: #e6eaf0;
  166. /* min-width: 1380px; */
  167. /* min-width: 1250px; */
  168. }
  169. .appNoWidth {
  170. min-width: unset !important;
  171. display: inline-block !important;
  172. min-width: 550px;
  173. }
  174. .appNoHeight {
  175. min-height: 750px;
  176. }
  177. .app_head {
  178. height: 67.5px;
  179. width: 100%;
  180. background-color: rgb(43 68 118);
  181. display: flex;
  182. align-items: center;
  183. min-width: 1000px;
  184. }
  185. .logo {
  186. height: 60px;
  187. width: 60px;
  188. background: url("./assets/logo.png");
  189. background-size: 100% 100%;
  190. margin-left: 20px;
  191. }
  192. .pb_body {
  193. /* padding: 20px; */
  194. /* width: 98%; */
  195. /* min-width: 745px;*/
  196. /* display: inline-block; */
  197. /* height: 95%; */
  198. /* min-height: 750px; */
  199. background: #fff;
  200. border-radius: 5px;
  201. /* position: absolute; */
  202. }
  203. .ggheight {
  204. height: calc(100% - 67.5px) !important;
  205. }
  206. .pb_head {
  207. font-size: 26px;
  208. /* font-weight: 600; */
  209. width: 95%;
  210. margin: 10px auto;
  211. padding: 10px 5px;
  212. border-bottom: 1px solid #eee;
  213. }
  214. .pb_content {
  215. /* height: 100%; */
  216. }
  217. .pb_content_body {
  218. width: 94%;
  219. margin: 10px auto;
  220. /* overflow: auto;
  221. height: calc(100% - 120px); */
  222. }
  223. .user_head {
  224. display: flex;
  225. align-items: center;
  226. margin-left: auto;
  227. margin-right: 20px;
  228. font-size: 18px;
  229. font-weight: 600;
  230. }
  231. .user_head .user_name {
  232. color: #fff;
  233. margin-right: 10px;
  234. }
  235. .user_head div {
  236. display: flex;
  237. align-items: center;
  238. cursor: pointer;
  239. }
  240. .user_head .exitI {
  241. background-image: url("./assets/exit.png");
  242. width: 25px;
  243. height: 25px;
  244. background-size: 100% 100%;
  245. margin-top: 1px;
  246. line-height: 25px;
  247. vertical-align: text-top;
  248. background-repeat: no-repeat;
  249. }
  250. .noticeBox {
  251. position: relative;
  252. margin-right: 10px;
  253. }
  254. .user_head .noticeI {
  255. background-image: url("./assets/icon/noticeA.png");
  256. width: 25px;
  257. height: 25px;
  258. background-size: 100% 100%;
  259. margin-top: 1px;
  260. line-height: 25px;
  261. vertical-align: text-top;
  262. background-repeat: no-repeat;
  263. cursor: pointer;
  264. }
  265. .noticeBox span {
  266. position: absolute;
  267. background: red;
  268. width: 15px;
  269. height: 15px;
  270. border-radius: 30px;
  271. color: #fff;
  272. text-align: center;
  273. font-size: 12px;
  274. display: flex;
  275. align-items: center;
  276. justify-content: center;
  277. top: -3px;
  278. right: -3px;
  279. }
  280. .stuWidth {
  281. min-width: 1180px;
  282. }
  283. .gHeight {
  284. height: 100%;
  285. }
  286. html::-webkit-scrollbar {
  287. /*滚动条整体样式*/
  288. width: 6px;
  289. /*高宽分别对应横竖滚动条的尺寸*/
  290. height: 6px;
  291. }
  292. /*定义滚动条轨道 内阴影+圆角*/
  293. html::-webkit-scrollbar {
  294. border-radius: 10px;
  295. background-color: #eee;
  296. }
  297. /*定义滑块 内阴影+圆角*/
  298. html::-webkit-scrollbar-thumb {
  299. border-radius: 10px;
  300. -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  301. background-color: rgba(0, 0, 0, 0.1);
  302. }
  303. .btnClassGM {
  304. background: #8681b7 !important;
  305. border-color: #8681b7 !important;
  306. }
  307. .btnClassGM:focus,
  308. .btnClassGM:hover {
  309. background: #8681b7 !important;
  310. border-color: #8681b7 !important;
  311. }
  312. .GMBg {
  313. background: rgb(184, 181, 202) !important;
  314. }
  315. .cancelbtnGM:focus,
  316. .cancelbtnGM:hover {
  317. color: rgb(92, 84, 159) !important;
  318. border-color: #5c549f !important;
  319. background-color: #dbd7ff !important;
  320. }
  321. </style>