@ -1,25 +1,24 @@ |
||||
<template> |
||||
<div id="app"> |
||||
<router-view></router-view> |
||||
</div> |
||||
<div id="app"> |
||||
<router-view></router-view> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from "@/setting"; |
||||
import util from "@/libs/util"; |
||||
|
||||
export default { |
||||
name: "App", |
||||
created() { |
||||
//在页面加载时读取localStorage里的状态信息 |
||||
if (util.local.get(Setting.storeKey)) { |
||||
this.$store.replaceState(Object.assign({}, this.$store.state, util.local.get(Setting.storeKey))); |
||||
} |
||||
|
||||
//在页面刷新时将vuex里的信息保存到localStorage里 |
||||
window.addEventListener("beforeunload", () => { |
||||
util.local.get(Setting.tokenKey) && util.local.set(Setting.storeKey, this.$store.state); |
||||
}); |
||||
name: "App", |
||||
created() { |
||||
//在页面加载时读取localStorage里的状态信息 |
||||
if (util.local.get(Setting.storeKey)) { |
||||
this.$store.replaceState(Object.assign({}, this.$store.state, util.local.get(Setting.storeKey))); |
||||
} |
||||
|
||||
//在页面刷新时将vuex里的信息保存到localStorage里 |
||||
window.addEventListener("beforeunload", () => { |
||||
util.local.set(Setting.storeKey, this.$store.state); |
||||
}); |
||||
} |
||||
}; |
||||
</script> |
||||
|
After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 683 B After Width: | Height: | Size: 683 B |
|
Before Width: | Height: | Size: 230 KiB After Width: | Height: | Size: 230 KiB |
|
Before Width: | Height: | Size: 683 B After Width: | Height: | Size: 683 B |
|
Before Width: | Height: | Size: 136 KiB After Width: | Height: | Size: 136 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 103 KiB After Width: | Height: | Size: 103 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 103 KiB After Width: | Height: | Size: 103 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 639 B After Width: | Height: | Size: 639 B |
|
Before Width: | Height: | Size: 126 KiB After Width: | Height: | Size: 126 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 127 KiB After Width: | Height: | Size: 127 KiB |
|
After Width: | Height: | Size: 201 KiB |
|
After Width: | Height: | Size: 198 KiB |
|
After Width: | Height: | Size: 304 KiB |
@ -0,0 +1,63 @@ |
||||
/** |
||||
* 栏目配置 |
||||
* */ |
||||
|
||||
export default { |
||||
// 栏目类型
|
||||
types: [ |
||||
{ |
||||
id: 1, |
||||
name: '常规栏目' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '跳转链接' |
||||
}, |
||||
{ |
||||
id: 3, |
||||
name: '长页栏目' |
||||
}, |
||||
{ |
||||
id: 4, |
||||
name: '子级优先栏目' |
||||
} |
||||
], |
||||
// 长页样式
|
||||
pageStyle: [ |
||||
{ |
||||
id: 1, |
||||
path: 'home', |
||||
name: 'HOME' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
path: 'about', |
||||
name: 'ABOUT' |
||||
}, |
||||
{ |
||||
id: 3, |
||||
path: 'careers', |
||||
name: 'CAREERS' |
||||
}, |
||||
{ |
||||
id: 4, |
||||
path: 'edu', |
||||
name: 'EDUCATION & COLLABORATION' |
||||
}, |
||||
{ |
||||
id: 5, |
||||
path: 'news', |
||||
name: 'NEWS&EVENTS' |
||||
}, |
||||
{ |
||||
id: 6, |
||||
path: 'newsPress', |
||||
name: 'NEWS&EVENTS-PRESS ROOM' |
||||
}, |
||||
{ |
||||
id: 7, |
||||
path: 'newsProcurement', |
||||
name: 'NEWS&EVENTS-PROCUREMENT' |
||||
} |
||||
], |
||||
} |
||||
@ -0,0 +1,249 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> |
||||
<template v-for="(item, i) in modules[0].list"> |
||||
<el-carousel-item v-if="item.pic && item.isEnable" :key="i"> |
||||
<div class="banner-item" @click="openLink(item)"> |
||||
<img :src="item.pic" alt=""> |
||||
<p class="banner-name">APPLICATION</p> |
||||
</div> |
||||
</el-carousel-item> |
||||
</template> |
||||
</el-carousel> |
||||
|
||||
<div class="block history gray"> |
||||
<div class="inner"> |
||||
<h2 style="margin-left: 57px">{{ modules[1].form.title }}</h2> |
||||
<div class="texts"> |
||||
<div class="left"> |
||||
<h2>{{ modules[1].form.subTitle }}</h2> |
||||
<div class="line"></div> |
||||
<div class="des">{{ modules[1].form.des }}</div> |
||||
<img src="@/assets/images/arrow.png" alt=""> |
||||
</div> |
||||
<img class="bg" width="562" height="506" :src="modules[1].form.pic" alt=""> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block"> |
||||
<div class="inner" style="width: 1558px"> |
||||
<h2 class="b-title">{{ modules[2].form.title }}</h2> |
||||
<p class="intro">{{ modules[2].form.des }}</p> |
||||
<ul class="app"> |
||||
<li v-for="(item, i) in modules[3].list" :key="i"> |
||||
<img class="bg" :src="require('@/assets/images/application/app' + (i + 1) + '.png')" alt=""> |
||||
<img class="icon" :src="require('@/assets/images/application/app' + (i + 1) + '-1.png')" alt=""> |
||||
<p class="text">{{ item.title }}</p> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block gray"> |
||||
<div class="inner"> |
||||
<h2 class="b-title">{{ modules[4].form.title }}</h2> |
||||
<p class="intro">{{ modules[4].form.des }}</p> |
||||
<ul class="group"> |
||||
<li v-for="(item, i) in modules[5].list" :key="i"> |
||||
<img :src="item.pic" alt=""> |
||||
<p class="text">{{ item.title }}</p> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block news-block"> |
||||
<div class="inner"> |
||||
<h2 class="b-title">{{ modules[6].form.title }}</h2> |
||||
<p class="intro">{{ modules[6].form.des }}</p> |
||||
<ul class="news"> |
||||
<li v-for="(item, i) in articles" :key="i"> |
||||
<img src="@/assets/images/channel1.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ item.columnName }}</h6> |
||||
<div class="des" v-html="item.mainBody"></div> |
||||
<span class="meta">{{ item.createTime }}</span> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Setting from '@/setting' |
||||
import Util from '@/libs/util' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
articles: [] |
||||
} |
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
methods: { |
||||
// 获取文章详情 |
||||
getInfo() { |
||||
// 预览/详情 |
||||
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => { |
||||
if (data.length) { |
||||
// state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing |
||||
const json = JSON.parse(this.preview ? |
||||
data : |
||||
data[0][data[0].state ? 'theEditedJson' : 'jsonBeforeEditing']) |
||||
this.modules = json |
||||
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json) |
||||
|
||||
// 获取文章列表 |
||||
const { column, site, articleNum } = json[7].form |
||||
if (column.length) { |
||||
this.$post(this.api.queryArticle, { |
||||
siteId: site, |
||||
columnIds: [column[column.length - 1]], |
||||
pageNum: 1, |
||||
pageSize: articleNum || 6 |
||||
}).then(({ data }) => { |
||||
this.articles = data.records |
||||
}).catch(err => {}) |
||||
} |
||||
} |
||||
}).catch(err => {}) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../styles/page/page.scss"; |
||||
.history { |
||||
h2 { |
||||
font-size: 30px; |
||||
color: #333; |
||||
} |
||||
.texts { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 82px 57px 30px; |
||||
margin-top: 20px; |
||||
background-color: #fff; |
||||
border-radius: 100px 0px 0px 0px; |
||||
} |
||||
.left { |
||||
width: 695px; |
||||
} |
||||
.des { |
||||
margin: 20px 0; |
||||
font-size: 22px; |
||||
color: #181818; |
||||
line-height: 31px; |
||||
} |
||||
.bg { |
||||
margin: -122px 0 0 0; |
||||
} |
||||
} |
||||
.app { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
li { |
||||
position: relative; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 368px; |
||||
height: 252px; |
||||
margin: 0 14px 14px 0; |
||||
&:first-child { |
||||
width: 750px; |
||||
} |
||||
&:nth-child(3), &:nth-child(7), &:nth-child(10) { |
||||
margin-right: 0; |
||||
} |
||||
&:nth-child(9) { |
||||
width: 563px; |
||||
} |
||||
&:nth-child(10) { |
||||
width: 555px; |
||||
} |
||||
} |
||||
.bg { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.icon { |
||||
position: relative; |
||||
} |
||||
.text { |
||||
position: relative; |
||||
margin-top: 20px; |
||||
font-size: 32px; |
||||
color: #fff; |
||||
} |
||||
} |
||||
.group { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
li { |
||||
width: 448px; |
||||
margin: 0 28px 39px 0; |
||||
&:nth-child(3n) { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
.text { |
||||
font-size: 30px; |
||||
font-family: SFProDisplay-Bold, SFProDisplay; |
||||
font-weight: bold; |
||||
line-height: 143px; |
||||
color: #272727; |
||||
text-align: center; |
||||
background-color: #F5F5F5; |
||||
} |
||||
} |
||||
.news-block { |
||||
background: url(../../assets/images/info-bg.png) 0 0/100% 100% no-repeat; |
||||
} |
||||
.news { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
li { |
||||
display: inline-flex; |
||||
width: 686px; |
||||
padding: 34px; |
||||
margin-bottom: 28px; |
||||
background-color: #fff; |
||||
&:nth-child(odd) { |
||||
margin-right: 28px; |
||||
} |
||||
} |
||||
img { |
||||
width: 237px; |
||||
height: 167px; |
||||
} |
||||
.texts { |
||||
margin-left: 34px; |
||||
} |
||||
h6 { |
||||
font-size: 18px; |
||||
color: #0648A8; |
||||
} |
||||
.des { |
||||
margin: 14px 0; |
||||
font-size: 16px; |
||||
color: #333; |
||||
line-height: 22px; |
||||
} |
||||
.meta { |
||||
font-size: 16px; |
||||
color: #999; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,14 @@ |
||||
import BasicLayout from '@/layouts/home' |
||||
const name = 'application' |
||||
export default { |
||||
path: `/${name}`, |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
name, |
||||
path: `/${name}`, |
||||
component: () => import(`@/pages/${name}`), |
||||
meta: { title: '' } |
||||
} |
||||
] |
||||
}; |
||||
@ -0,0 +1,24 @@ |
||||
/** |
||||
* 内容管理 |
||||
* */ |
||||
|
||||
import Router from '@/router' |
||||
export default { |
||||
namespaced: true, |
||||
state: { |
||||
site: 1, |
||||
}, |
||||
getters: { |
||||
site: state => { |
||||
return Router.app.query.site || state.site |
||||
} |
||||
}, |
||||
mutations: { |
||||
setSite: (state, site) => { |
||||
state.site = +site |
||||
}, |
||||
}, |
||||
actions: { |
||||
|
||||
} |
||||
}; |
||||
@ -1,107 +0,0 @@ |
||||
import Setting from "@/setting"; |
||||
import util from "@/libs/util"; |
||||
import { post, get, del, put } from "@/plugins/requests/index.js"; |
||||
import api from "@/api"; |
||||
/** |
||||
* 用户信息 |
||||
* */ |
||||
export default { |
||||
namespaced: true, |
||||
state: { |
||||
activeTab: "/station/list", // 当前激活菜单
|
||||
title: '', |
||||
logoUrl: '', |
||||
avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", |
||||
userId: '', |
||||
studentId: '', |
||||
userName: '', |
||||
customerName: '', |
||||
schoolId: '', |
||||
roleId: '', |
||||
dataTime: '', |
||||
logView: false // 是否查询过日志状态，如果有，则不再调接口
|
||||
}, |
||||
mutations: { |
||||
SET_INFO: (state, info) => { |
||||
if (info.avatar) state.avatar = info.avatar; |
||||
state.userId = info.userId; |
||||
state.studentId = info.studentId; |
||||
state.schoolId = info.schoolId; |
||||
state.userName = info.userName; |
||||
state.roleId = info.roleId; |
||||
state.dataTime = info.dataTime; |
||||
}, |
||||
SET_TITLE: (state, title) => { |
||||
state.title = title; |
||||
}, |
||||
SET_LOGO_URL: (state, logoUrl) => { |
||||
state.logoUrl = logoUrl; |
||||
}, |
||||
SET_AVATAR: (state, avatar) => { |
||||
state.avatar = avatar; |
||||
}, |
||||
SET_USERNAME: (state, userName) => { |
||||
state.userName = userName; |
||||
}, |
||||
SET_CUSTOMERNAME: (state, customerName) => { |
||||
state.customerName = customerName; |
||||
}, |
||||
SET_ACTIVE_TAB: (state, activeTab) => { |
||||
state.activeTab = activeTab; |
||||
}, |
||||
SET_LOG: (state) => { |
||||
state.logView = true |
||||
}, |
||||
}, |
||||
actions: { |
||||
login({ state, commit }, userInfo) { |
||||
return new Promise((resolve, reject) => { |
||||
post(api.logins, userInfo).then(res => { |
||||
if (res.status == 200) { |
||||
let { data } = res; |
||||
// 生成路由权限
|
||||
// 每个系统都是用这套角色权限代码的,后端也是基本一样,除了个别字段可能会不一样
|
||||
// 总体来说就两个步骤: 1是生成能够访问的路由的数组集合,2是生成能看到的按钮的数组集合
|
||||
//res.message.listValue && Setting.dynamicRoute && addRoutes(res.message.listValue)
|
||||
util.local.set(Setting.tokenKey, data.token, Setting.tokenExpires); |
||||
util.successMsg("登录成功"); |
||||
// console.log(data, "登录保存的数据");
|
||||
commit("SET_INFO", data); |
||||
resolve(); |
||||
} else { |
||||
util.errorMsg(res.message); |
||||
reject(res); |
||||
} |
||||
}).catch(error => { |
||||
reject(error); |
||||
}); |
||||
}); |
||||
}, |
||||
logout({ commit, state, dispatch }) { |
||||
return new Promise((resolve, reject) => { |
||||
util.local.remove(Setting.storeKey); |
||||
util.local.remove(Setting.tokenKey); |
||||
location.reload(); |
||||
resolve(); |
||||
}); |
||||
}, |
||||
setInfo({ state, commit }, info) { |
||||
commit("SET_INFO", info); |
||||
}, |
||||
setTitle({ state, commit }, title) { |
||||
commit("SET_TITLE", title); |
||||
}, |
||||
setLogoUrl({ state, commit }, logoUrl) { |
||||
commit("SET_LOGO_URL", logoUrl); |
||||
}, |
||||
setAvatar({ state, commit }, avatar) { |
||||
commit("SET_AVATAR", avatar); |
||||
}, |
||||
setUserName({ state, commit }, userName) { |
||||
commit("SET_USERNAME", userName); |
||||
}, |
||||
setActiveTab({ state, commit }, activeTab) { |
||||
commit("SET_ACTIVE_TAB", activeTab); |
||||
} |
||||
} |
||||
}; |
||||