odjbin/sist_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

11

Browse Source
This commit is contained in:
clay
2021-12-28 14:04:36 +08:00
parent a14b0e7dc1
commit 43b9044f89
22 changed files with 1597 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.env.staging
View File

@@ -1,9 +1,7 @@
NODE_ENV = production NODE_ENV = staging
# 测试环境配置 # 测试环境配置
ENV = 'staging' ENV = 'staging'
# EBTS/测试环境 # EBTS/测试环境
#VUE_APP_BASE_API = '/dev-api' VUE_APP_BASE_API = 'http://sistapi.hchyun.cn/dev-api'
#VUE_APP_BASE_API = 'https://api.ebts.top/dev-api'
VUE_APP_BASE_API = 'http://tapi.ebts.top/dev-api'

2
README.md
View File

@@ -1,4 +1,4 @@
# lab_web # sist_web
## Project setup ## Project setup
``` ```

1616
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@@ -1,5 +1,5 @@
{ {
"name": "lab_web", "name": "sist_web",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
@@ -16,6 +16,7 @@
"dependencies": { "dependencies": {
"core-js": "^3.6.5", "core-js": "^3.6.5",
"element-ui": "^2.15.6", "element-ui": "^2.15.6",
"less-loader": "^5.0.0",
"script-ext-html-webpack-plugin": "^2.1.5", "script-ext-html-webpack-plugin": "^2.1.5",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-i18n": "^8.26.7", "vue-i18n": "^8.26.7",
@@ -31,6 +32,8 @@
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2", "eslint-plugin-vue": "^6.2.2",
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"node-sass": "^4.14.1",
"sass-loader": "8.0.2",
"vue-template-compiler": "^2.6.11", "vue-template-compiler": "^2.6.11",
"vuex": "^3.6.2" "vuex": "^3.6.2"
}, },

18
public/index.html
View File

@@ -6,6 +6,24 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<script>
fnResize();
window.onresize = function() {
fnResize();
}
function fnResize() {
var deviceWidth = document.documentElement.clientWidth || window.innerWidth;
if (deviceWidth >= 750) {
deviceWidth = 750;
}
if (deviceWidth <= 320) {
deviceWidth = 320;
}
document.documentElement.style.fontSize = (deviceWidth / 75) + 'px';
}
</script>
</head> </head>
<body> <body>
<noscript> <noscript>

96
src/App.vue
View File

@@ -1,33 +1,81 @@
<template> <template>
<div id="app"> <div id="app">
<div id="nav"> <div v-show="iftop" class="totop flexCenter" @click="backTop">
<router-link to="/">Home</router-link> | <i class="el-icon-top" style="color: #409eff"></i>
<router-link to="/about">About</router-link>
</div> </div>
<div> {{$t('message.hello')}} </div> <div class="headers">
<router-view/> <headers/>
</div>
<el-row>
<el-col></el-col>
<el-col style="height: 500rem;width: 100%; background-color:red;">
<router-view/>
</el-col>
<el-col></el-col>
</el-row>
<footers/>
</div> </div>
</template> </template>
<script>
import headers from './views/header/index'
import footers from './views/footer/index'
export default {
name:'App',
components:{
headers,
footers
},
data(){
return {
iftop: false
}
},
mounted() { //监听scroll方法
window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() { //及时释放
window.removeEventListener('scroll', this.handleScroll)
},
methods: {
handleScroll() {
this.iftop = window.pageYOffset > 400
},
backTop() {
window.scrollTo({top: 0, behavior: 'smooth',})
}
}
}
</script>
<style> <style>
#app { *{
font-family: Avenir, Helvetica, Arial, sans-serif; margin: 0;
-webkit-font-smoothing: antialiased; padding: 0;
-moz-osx-font-smoothing: grayscale; }
</style>
<style scoped>
.headers{
width: 100%;
z-index: 9999;
position: fixed;
top: 0;
left: 0;
}
.totop {
text-align: center; text-align: center;
color: #2c3e50; position: fixed;
} bottom: 100px;
right: 40px;
#nav { width: 40px;
padding: 30px; height: 40px;
} font-size: 24px;
line-height: 40px;
#nav a { font-weight: 600;
font-weight: bold; color: #1989fa;
color: #2c3e50; background-color: #fff;
} border-radius: 50%;
box-shadow: 0 0 6px rgba(0, 0, 0, .12);
#nav a.router-link-exact-active { cursor: pointer;
color: #42b983; z-index: 5;
} }
</style> </style>

BIN
src/assets/header/sy_logo1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
src/assets/header/sy_logo1@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/assets/header/sy_logo2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
src/assets/header/sy_logo2@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

18
src/components/HelloWorld.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<div class="hello"> <div class="hello">
<p>{{label}}</p> <div> {{$t('message.hello')}} </div>
<button @click="switchLang">切换</button> <button @click="switchLang">{{$t('message.switch')}}</button>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from 'vuex' import {test} from '@/api/test'
export default { export default {
name: 'HelloWorld', name: 'HelloWorld',
components: { components: {
@@ -15,24 +15,24 @@ export default {
} }
}, },
computed: { computed: {
...mapState(['lang']),
label () {
return this.$t('message.hello')
}
}, },
methods: { methods: {
switchLang () { switchLang () {
test().then(res =>{
console.log(res)
})
let lang = '' let lang = ''
if (this.lang === 'en') { if (this.$i18n.locale === 'en') {
lang = 'cn' lang = 'cn'
} else { } else {
lang = 'en' lang = 'en'
} }
this.$store.commit('switchLang', lang) this.$i18n.locale = lang;
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
h1, h1,
h2 { h2 {

7
src/i18n/langs/cn.js
View File

@@ -5,7 +5,12 @@ const cn = {
message: { message: {
'hello': '你好，世界', 'hello': '你好，世界',
'switch': 'English', 'switch': 'English',
'test':'测试' 'test':'测试',
'student':'学生',
'staff':'教职工',
'alumni':'校友',
'examine':'考生',
'Services portal':'服务门户',
}, },
...zhLocale ...zhLocale
} }

7
src/i18n/langs/en.js
View File

@@ -5,7 +5,12 @@ const en = {
message: { message: {
'hello': 'hello, world', 'hello': 'hello, world',
'switch': '简体中文', 'switch': '简体中文',
'test':'test' 'test':'test',
'student':'student',
'staff':'staff',
'alumni':'alumni',
'examine':'examine',
'Services portal':'Services portal',
}, },
...enLocale ...enLocale
} }

27
src/router/index.js
View File

@@ -1,26 +1,33 @@
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter) Vue.use(VueRouter)
const routes = [ const routes = [
{ {
path: '/', path: '/',
name: 'Home', name: 'index',
component: Home component: () => import(/* webpackChunkName: "about" */ '../views/index/index')
}, },
{ {
path: '/about', path: '/sp',
name: 'About', name: 'SchoolProfile',
// route level code-splitting component: () => import(/* webpackChunkName: "about" */ '../views/school_profile/index')
// this generates a separate chunk (about.[hash].js) for this route },
// which is lazy-loaded when the route is visited. {
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') path: '/ts',
} name: 'TeachingStaff',
component: () => import(/* webpackChunkName: "about" */ '../views/teaching_staff/index')
},
{
path: '/et',
name: 'EduTeach',
component: () => import(/* webpackChunkName: "about" */ '../views/edu_teach/index')
},
] ]
const router = new VueRouter({ const router = new VueRouter({
mode: 'history',
routes routes
}) })

5
src/views/About.vue
View File

@@ -1,5 +0,0 @@
<template>
<div class="about">
{{$t("message.test")}}
</div>
</template>

59
src/views/Home.vue
View File

@@ -1,59 +0,0 @@
<template>
<div class="hello">
<p>{{$t('message.hello')}}</p>
<button @click="switchLang">{{$t('message.switch')}}</button>
<div>
<About/>
</div>
</div>
</template>
<script>
import {test} from '@/api/test'
import About from './About'
export default {
name: 'HelloWorld',
components: {
About
},
data () {
return {
}
},
computed: {
label () {
return this.$t('message.hello')
}
},
methods: {
switchLang () {
test().then(res =>{
console.log(res)
})
let lang = ''
if (this.$i18n.locale === 'en') {
lang = 'cn'
} else {
lang = 'en'
}
this.$i18n.locale = lang;
}
}
}
</script>
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

13
src/views/edu_teach/index.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>

18
src/views/footer/index.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div class="footer">
</div>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
.footer{
height: 26.7rem;
background-color: rgb(107 109 108);
}
</style>

155
src/views/header/index.vue Normal file
View File

@@ -0,0 +1,155 @@
<template>
<el-row>
<el-col :offset="3" :span="18">
<div class="header">
<!--头部部分-->
<div class="top">
<el-row>
<el-col :span="2">
<div class="link">
{{ $t('message.student') }}
</div>
</el-col>
<el-col :span="2">
<div class="link">
{{ $t('message.staff') }}
</div>
</el-col>
<el-col :span="2">
<div class="link">
{{ $t('message.alumni') }}
</div>
</el-col>
<el-col :span="2">
<div class="link">
{{ $t('message.examine') }}
</div>
</el-col>
<el-col :span="2">
<div class="link">
{{ $t('message.Services portal') }}
</div>
</el-col>
<el-col :offset="12" :span="2">
<div class="switchLang" @click="switchLang">{{ $t('message.switch') }}</div>
</el-col>
</el-row>
</div>
<!--导航部分-->
<div class="bottom">
<el-row>
<el-col :span="4">
<div class="icon">
<div class="icont"><img src="@/assets/header/sy_logo1@2x.png" alt=""></div>
<div class="iconb"><img src="@/assets/header/sy_logo2@2x.png" alt=""></div>
</div>
</el-col>
<el-col :offset="1" :span="19">
<div class="banner">
<div>学院首页</div>
<div>学院概况</div>
<div>党群工作</div>
<div>师资队伍</div>
<div>教育教学</div>
<div>科学研究</div>
<div>学科建设</div>
<div>学生工作</div>
<div>校友工作</div>
<div>国际化</div>
<div>资料下载</div>
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
<el-col :span="3">
</el-col>
</el-row>
</template>
<script>
export default {
name: "index",
methods: {
switchLang() {
let lang = ''
if (this.$i18n.locale === 'en') {
lang = 'cn'
} else {
lang = 'en'
}
this.$i18n.locale = lang;
}
}
}
</script>
<style scoped lang="scss">
.header {
.top {
font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 3rem;
width: 100%;
height: 3rem;
background: #1956BC;
.switchLang {
cursor: pointer;
font-size: 1.6rem;
}
.link:hover{
background: rgba(255, 255, 255, 0.7);
}
}
.bottom {
height: 8rem;
background: rgba(25, 86, 188, 0.6);
border-radius: 0rem 0rem 2rem 2rem;
.icon{
margin-left: 20%;
div{
margin-top: 1rem;
}
.icont{
img{
width: 18.3rem;
}
}
.iconb{
img{
width: 8.9rem;
}
}
}
.banner{
width: 100%;
height: 8rem;
clear: left;
div{
width: 9%;
height: 100%;
line-height: 8rem;
text-align: center;
float: left;
font-size: 1.4rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
cursor:pointer;
}
div:hover{
background: rgba(255, 255, 255, 0.7);
}
}
}
}
</style>

13
src/views/index/index.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>

13
src/views/school_profile/index.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>

13
src/views/teaching_staff/index.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>