From 7ed3f40b4e8feaac97e90008649fcf047eabe1f9 Mon Sep 17 00:00:00 2001
From: liufan9527 <937359084@qq.com>
Date: 星期五, 22 十一月 2024 17:11:43 +0800
Subject: [PATCH] 门户框架搭建
---
se-index/src/router/index.js | 47 ++++-
se-index/src/assets/img/home/home.png | 0
se-index/src/components/door.vue | 123 +++++++++++++++
se-index/src/assets/img/home/tab_height.png | 0
se-index/src/assets/img/home/door_item.png | 0
se-index/src/assets/img/home/return.png | 0
se-index/src/components/home.vue | 122 +++++++++++++++
se-index/src/components/login.vue | 2
se-index/src/assets/img/home/door_icon.png | 0
se-index/src/store/modules/user.js | 117 ++++++++------
se-index/src/assets/img/home/door_bg.png | 0
se-index/src/assets/img/home/header_bg.png | 0
se-index/src/components/interactive.vue | 11 +
se-index/src/assets/img/home/tab.png | 0
14 files changed, 354 insertions(+), 68 deletions(-)
diff --git a/se-index/src/assets/img/home/door_bg.png b/se-index/src/assets/img/home/door_bg.png
new file mode 100644
index 0000000..cb557aa
--- /dev/null
+++ b/se-index/src/assets/img/home/door_bg.png
Binary files differ
diff --git a/se-index/src/assets/img/home/door_icon.png b/se-index/src/assets/img/home/door_icon.png
new file mode 100644
index 0000000..c07c5f2
--- /dev/null
+++ b/se-index/src/assets/img/home/door_icon.png
Binary files differ
diff --git a/se-index/src/assets/img/home/door_item.png b/se-index/src/assets/img/home/door_item.png
new file mode 100644
index 0000000..fcf25b0
--- /dev/null
+++ b/se-index/src/assets/img/home/door_item.png
Binary files differ
diff --git a/se-index/src/assets/img/home/header_bg.png b/se-index/src/assets/img/home/header_bg.png
new file mode 100644
index 0000000..8b50b69
--- /dev/null
+++ b/se-index/src/assets/img/home/header_bg.png
Binary files differ
diff --git a/se-index/src/assets/img/home/home.png b/se-index/src/assets/img/home/home.png
new file mode 100644
index 0000000..edeffd7
--- /dev/null
+++ b/se-index/src/assets/img/home/home.png
Binary files differ
diff --git a/se-index/src/assets/img/home/return.png b/se-index/src/assets/img/home/return.png
new file mode 100644
index 0000000..8585356
--- /dev/null
+++ b/se-index/src/assets/img/home/return.png
Binary files differ
diff --git a/se-index/src/assets/img/home/tab.png b/se-index/src/assets/img/home/tab.png
new file mode 100644
index 0000000..6b67e8f
--- /dev/null
+++ b/se-index/src/assets/img/home/tab.png
Binary files differ
diff --git a/se-index/src/assets/img/home/tab_height.png b/se-index/src/assets/img/home/tab_height.png
new file mode 100644
index 0000000..2a0f7f6
--- /dev/null
+++ b/se-index/src/assets/img/home/tab_height.png
Binary files differ
diff --git a/se-index/src/components/door.vue b/se-index/src/components/door.vue
new file mode 100644
index 0000000..7ea1bea
--- /dev/null
+++ b/se-index/src/components/door.vue
@@ -0,0 +1,123 @@
+<template>
+ <div class="door">
+ <div class="item" v-for="(item, index) in doorList" :key="index">
+ <div class="title">
+ <span>
+ <img src="../assets/img/home/door_icon.png" alt="" />
+ </span>
+ <span>{{ item.name }}</span>
+ </div>
+ <div
+ class="ele"
+ v-for="(ele, i) in item.child"
+ :key="i"
+ @click="routerJump(item.child, ele)"
+ >
+ {{ ele.name }}
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ doorList: [
+ {
+ name: "鍒嗙郴缁熻繍琛屾帶鍒�",
+ child: [
+ {
+ name: "鍒嗙郴缁熻蒋浠舵帶鍒�",
+ url: ""
+ },
+ {
+ name: "鎺ㄦ紨浠诲姟鎺у埗",
+ url: ""
+ },
+ {
+ name: "鍒嗙郴缁熺姸鎬佺洃鎺�",
+ url: ""
+ }
+ ]
+ },
+ {
+ name: "绯荤粺浜や簰绠＄悊",
+ child: [
+ {
+ name: "鍒嗙郴缁熶氦浜掔鐞�",
+ url: "/home/interactive"
+ },
+ {
+ name: "澶栭儴绯荤粺鎺ュ叆",
+ url: ""
+ },
+ {
+ name: "绯荤粺鎺ュ彛绠＄悊",
+ url: ""
+ }
+ ]
+ },
+ {
+ name: "绯荤粺璧勬簮閰嶇疆",
+ child: [
+ {
+ name: "纭欢璧勬簮绠＄悊",
+ url: ""
+ },
+ {
+ name: "杞欢璧勬簮绠＄悊",
+ url: ""
+ }
+ ]
+ }
+ ]
+ };
+ },
+ methods: {
+ routerJump(arr, e) {
+ if (e.url) {
+ this.$router.push(e.url);
+ this.$store.dispatch("Tab", arr);
+ }
+ }
+ }
+};
+</script>
+
+<style lang="less" scoped>
+.door {
+ padding: 0 60px;
+ display: flex;
+ justify-content: space-between;
+ .item {
+ width: 554px;
+ height: 830px;
+ background: url("../assets/img/home/door_bg.png");
+ .title {
+ position: relative;
+ font-family: Source Han Sans SC;
+ font-weight: 400;
+ font-size: 36px;
+ color: #4b96dd;
+ :nth-child(2) {
+ position: absolute;
+ top: 4px;
+ left: 50px;
+ }
+ }
+ .ele {
+ margin: 100px auto;
+ width: 456px;
+ height: 75px;
+ text-align: center;
+ line-height: 75px;
+ background: url("../assets/img/home/door_item.png");
+ font-family: Source Han Sans CN;
+ font-weight: bold;
+ font-size: 28px;
+ color: #ffffff;
+ }
+ }
+}
+</style>
diff --git a/se-index/src/components/home.vue b/se-index/src/components/home.vue
new file mode 100644
index 0000000..5ec2ac0
--- /dev/null
+++ b/se-index/src/components/home.vue
@@ -0,0 +1,122 @@
+<template>
+ <div class="home">
+ <div class="header">浣滄垬瀹為獙鏉′欢寤鸿</div>
+ <div class="tab" v-if="name != '闂ㄦ埛'">
+ <div
+ :class="name == item.name ? 'item-height' : 'item'"
+ v-for="(item, index) in tab"
+ :key="index"
+ @click="tabChange(item)"
+ >
+ {{ item.name }}
+ </div>
+ </div>
+ <div class="btn">
+ <img src="../assets/img/home/home.png" alt="" />
+ <img
+ src="../assets/img/home/return.png"
+ alt=""
+ v-show="name != '闂ㄦ埛'"
+ @click="toDoor"
+ />
+ </div>
+ <div class="content">
+ <router-view :key="key" />
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+ computed: {
+ tab() {
+ return this.$store.state.user.tab;
+ },
+
+ key() {
+ return this.$route.path;
+ }
+ },
+ mounted() {
+ this.$watch("$route", (to, from) => {
+ this.name = to.name;
+ });
+ },
+ data() {
+ return {
+ name: "闂ㄦ埛"
+ };
+ },
+ methods: {
+ tabChange(e) {
+ this.$router.push(e.url);
+ },
+ toDoor() {
+ this.$router.push("/home/door");
+ }
+ }
+};
+</script>
+
+<style lang="less" scoped>
+.home {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ background: #091631;
+ .header {
+ width: 100%;
+ height: 87px;
+ line-height: 87px;
+ background: url("../assets/img/home/header_bg.png");
+ font-family: Source Han Sans CN;
+ font-weight: bold;
+ font-size: 48px;
+ color: #00e7fb;
+ text-align: center;
+ }
+ .btn {
+ position: absolute;
+ top: 60px;
+ right: 60px;
+ img {
+ margin-left: 10px;
+ }
+ }
+ .tab {
+ position: absolute;
+ top: 60px;
+ left: 200px;
+ display: flex;
+ :nth-child(3) {
+ margin-left: 480px;
+ }
+ .item {
+ width: 256px;
+ height: 75px;
+ line-height: 75px;
+ text-align: center;
+ background: url("../assets/img/home/tab.png");
+ font-family: Source Han Sans CN;
+ font-weight: bold;
+ font-size: 28px;
+ color: #ffffff;
+ }
+ .item-height {
+ width: 256px;
+ height: 75px;
+ line-height: 75px;
+ text-align: center;
+ background: url("../assets/img/home/tab_height.png");
+ font-family: Source Han Sans CN;
+ font-weight: bold;
+ font-size: 28px;
+ color: #ffffff;
+ }
+ }
+ .content {
+ margin-top: 60px;
+ }
+}
+</style>
diff --git a/se-index/src/components/interactive.vue b/se-index/src/components/interactive.vue
new file mode 100644
index 0000000..b56d03a
--- /dev/null
+++ b/se-index/src/components/interactive.vue
@@ -0,0 +1,11 @@
+<template>
+ <div class="interactive">
+ <h1>1111111111</h1>
+ </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scope></style>
diff --git a/se-index/src/components/login.vue b/se-index/src/components/login.vue
index 9a4064d..f03583d 100644
--- a/se-index/src/components/login.vue
+++ b/se-index/src/components/login.vue
@@ -124,7 +124,7 @@
},
// 璐﹀彿瀵嗙爜鐧诲綍
submitForm(formName) {
- this.$router.push("/index");
+ this.$router.push("/home/door");
// this.$refs[formName].validate(valid => {
// if (valid) {
diff --git a/se-index/src/router/index.js b/se-index/src/router/index.js
index 6a5e8c2..2cfc4c3 100644
--- a/se-index/src/router/index.js
+++ b/se-index/src/router/index.js
@@ -1,34 +1,51 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import index from '@/components/index'
-import login from '@/components/login'
+import Vue from "vue";
+import Router from "vue-router";
+import index from "@/components/index";
+import login from "@/components/login";
import URLconfig from "../../static/URLconfig";
+import home from "@/components/home";
-Vue.use(Router)
+Vue.use(Router);
const routes = [
{
- path: '/',
- redirect: "login",
+ path: "/",
+ redirect: "login"
},
{
- path: '/login',
- name: 'login',
- component: login,
+ path: "/login",
+ name: "login",
+ component: login
},
{
- path: '/index',
- name: 'index',
+ path: "/index",
+ name: "index",
component: index
},
+ {
+ path: "/home",
+ component: home,
+ redirect: "home",
+ hidden: true,
+ children: [
+ {
+ path: "door",
+ name:'闂ㄦ埛',
+ component: () => import("@/components/door.vue")
+ },
+ {
+ path: "interactive",
+ name:'鍒嗙郴缁熶氦浜掔鐞�',
+ component: () => import("@/components/interactive.vue")
+ }
+ ]
+ }
];
const router = new Router({
mode: "history",
// base: URLconfig.routerBase,
- routes,
+ routes
});
// router.beforeEach((to, from, next) => {
// next();
// })
export default router;
-
-
diff --git a/se-index/src/store/modules/user.js b/se-index/src/store/modules/user.js
index 516421e..c9fd707 100644
--- a/se-index/src/store/modules/user.js
+++ b/se-index/src/store/modules/user.js
@@ -1,62 +1,71 @@
-import { login, logout, getInfo, refreshToken } from '@/api/login'
-import { getToken, setToken, setExpiresIn, removeToken } from '@/utils/auth'
+import { login, logout, getInfo, refreshToken } from "@/api/login";
+import { getToken, setToken, setExpiresIn, removeToken } from "@/utils/auth";
import { encr } from "@/utils/jsencrypt";
const user = {
state: {
token: getToken(),
- id: '',
- name: '',
- avatar: '',
+ id: "",
+ name: "",
+ avatar: "",
roles: [],
- permissions: []
+ permissions: [],
+ tab: []
},
mutations: {
SET_TOKEN: (state, token) => {
- state.token = token
+ state.token = token;
},
SET_EXPIRES_IN: (state, time) => {
- state.expires_in = time
+ state.expires_in = time;
},
SET_ID: (state, id) => {
- state.id = id
+ state.id = id;
},
SET_NAME: (state, name) => {
- state.name = name
+ state.name = name;
},
SET_AVATAR: (state, avatar) => {
- state.avatar = avatar
+ state.avatar = avatar;
},
SET_ROLES: (state, roles) => {
- state.roles = roles
+ state.roles = roles;
},
SET_PERMISSIONS: (state, permissions) => {
- state.permissions = permissions
- }
+ state.permissions = permissions;
+ },
+ SET_TAB: (state, tab) => {
+ state.tab = tab;
+ },
},
actions: {
+ Tab({ commit }, state) {
+ commit("SET_TAB", state);
+ },
// 鐧诲綍
Login({ commit }, userInfo) {
- const username = userInfo.username.trim()
+ const username = userInfo.username.trim();
let pwd = encr(userInfo.password);
const password = pwd;
// const password = userInfo.password
- const code = userInfo.code
- const uuid = userInfo.uuid
+ const code = userInfo.code;
+ const uuid = userInfo.uuid;
return new Promise((resolve, reject) => {
- login(username, password).then(res => {
- let data = res.data
- setToken(data.access_token)
- commit('SET_TOKEN', data.access_token)
- setExpiresIn(data.expires_in)
- commit('SET_EXPIRES_IN', data.expires_in)
- resolve()
- }).catch(error => {
- reject(error)
- })
- })
+ login(username, password)
+ .then(res => {
+ let data = res.data;
+ setToken(data.access_token);
+ commit("SET_TOKEN", data.access_token);
+ setExpiresIn(data.expires_in);
+ commit("SET_EXPIRES_IN", data.expires_in);
+ resolve();
+ })
+ .catch(error => {
+ reject(error);
+ });
+ });
},
// // 鑾峰彇鐢ㄦ埛淇℃伅
@@ -84,40 +93,44 @@
// 鍒锋柊token
RefreshToken({ commit, state }) {
return new Promise((resolve, reject) => {
- refreshToken(state.token).then(res => {
- setExpiresIn(res.data)
- commit('SET_EXPIRES_IN', res.data)
- resolve()
- }).catch(error => {
- reject(error)
- })
- })
+ refreshToken(state.token)
+ .then(res => {
+ setExpiresIn(res.data);
+ commit("SET_EXPIRES_IN", res.data);
+ resolve();
+ })
+ .catch(error => {
+ reject(error);
+ });
+ });
},
// 閫�鍑虹郴缁�
LogOut({ commit, state }) {
return new Promise((resolve, reject) => {
- logout(state.token).then(() => {
- commit('SET_TOKEN', '')
- commit('SET_ROLES', [])
- commit('SET_PERMISSIONS', [])
- removeToken()
- resolve()
- }).catch(error => {
- reject(error)
- })
- })
+ logout(state.token)
+ .then(() => {
+ commit("SET_TOKEN", "");
+ commit("SET_ROLES", []);
+ commit("SET_PERMISSIONS", []);
+ removeToken();
+ resolve();
+ })
+ .catch(error => {
+ reject(error);
+ });
+ });
},
// 鍓嶇 鐧诲嚭
FedLogOut({ commit }) {
return new Promise(resolve => {
- commit('SET_TOKEN', '')
- removeToken()
- resolve()
- })
+ commit("SET_TOKEN", "");
+ removeToken();
+ resolve();
+ });
}
}
-}
+};
-export default user
+export default user;
--
Gitblit v1.9.3