jialong.yu
/
FE_IASF_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

英文版适配80%

Browse Source
mobile
wangchenguang 2 years ago
parent 36e6c6a385
commit 24c64a4874
15 changed files with 1137 additions and 345 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/App.vue
  2. 36
      src/components/menuTree/tree.vue
  3. 32
      src/layouts/footer/index.vue
  4. 73
      src/layouts/header/index.vue
  5. 126
      src/pages/about/index.vue
  6. 104
      src/pages/application/index.vue
  7. 47
      src/pages/careers/index.vue
  8. 601
      src/pages/column/index.vue
  9. 32
      src/pages/edu/index.vue
  10. 132
      src/pages/home/index.vue
  11. 188
      src/pages/news/index.vue
  12. 27
      src/pages/newsPress/index.vue
  13. 56
      src/pages/newsProcurement/index.vue
  14. 3
      src/pages/overviewLocation/index.vue
  15. 24
      src/pages/research/index.vue

1
src/App.vue
Unescape View File

@ -33,7 +33,6 @@ export default {
return flagPc;
}
var flagZt = IsPC();
console.log(flagZt)
this.$store.commit('updateModelType', flagZt)
}
};

36
src/components/menuTree/tree.vue
Unescape View File

@ -1,36 +0,0 @@
<template>
<div class="menu-child">
<template v-for="item in this.menuList">
<el-submenu :popper-class="$route.path === '/home' || $route.path === '/sfel' ? 'home-menu-popup' : ''" :class="{active: $route.query.id == item.id}" :key="item.id" :index="String(item.id)" :id="item.id" v-if="item.children && item.children.length">
<template slot="title">
<span slot="title" :id="item.id">{{item.columnName}}</span>
</template>
<!-- <menuTree :menuList="item.children"></menuTree> -->
</el-submenu>
<el-menu-item :key="item.id" :id="item.id" :index="String(item.id)" :class="{active: $route.query.id == item.id}" v-else>
<span slot="title" :id="item.id">{{item.columnName}}</span>
</el-menu-item>
</template>
</div>
</template>
<script>
export default {
name: 'menuTree',
props: {
menuList: {
type: Array,
default: []
}
},
data () {
return {}
},
mounted () {},
methods: {}
}
</script>
<style lang="scss" scoped>
</style>

32
src/layouts/footer/index.vue
Unescape View File

@ -2,7 +2,7 @@
<div>
<div v-if="showDefaultPath.includes($route.path)" class="footer">
<div class="info">
<div style="margin-right: 100px">
<div class="leftBox">
<img class="m-b-20" src="@/assets/images/iasf.png" alt="">
<p class="meta">Copyright ©2002- 2021</p>
<p class="meta">Institute of Advanced Science Facilities, ShenzhenIASF</p>
@ -92,6 +92,9 @@ export default {
};
</script>
<style lang="scss" scoped>
.leftBox{
margin-right: 100px;
}
.footer{
padding: 64px 10% 25px;
color: #fff;
@ -199,7 +202,7 @@ export default {
}
}
}
@media (max-width: 992px) {
@media (max-width: 1200px) {
body{
width: 100% !important;
}
@ -217,6 +220,29 @@ export default {
margin-top: 90px;
}
}
}
@media (min-width: 280px) and (max-width: 750px) {
.footer {
.info{
flex-direction: column;
.column{
margin-top: 20px;
margin-left: 0;
}
}
}
}
@media (min-width: 751px) and (max-width: 1200px) {
.footer {
.info{
flex-direction: column;
.column{
margin-top: 20px;
margin-left: 0;
}
}
}
}
</style>

73
src/layouts/header/index.vue
Unescape View File

@ -3,50 +3,16 @@
<a class="logo" @click="toIndex">
<img :src="require('@/assets/images/' + (isSfel ? 'logo2' : isHome ? 'logo' : 'logo-black') + '.png')" alt="">
</a>
<!-- <template v-if="$store.getters.getModelType"> -->
<navbar ref="nav" :isHome.sync="isHome"></navbar>
<div class="tools">
<img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleSearch">
<img :src="require('@/assets/images/cn' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleLang">
<div v-if="showSearch" class="search-wrap" @click.stop="stop">
<input ref="search" type="text" :placeholder="$t('column.titlePlaceholder')" v-model="title">
<img class="search-icon" src="@/assets/images/search.png" alt="" @click="handleSearch">
<i class="el-icon-close close-icon" @click="showSearch = false"></i>
</div>
<navbar ref="nav" :isHome.sync="isHome"></navbar>
<div class="tools">
<img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleSearch">
<img :src="require('@/assets/images/cn' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleLang">
<div v-if="showSearch" class="search-wrap" @click.stop="stop">
<input ref="search" type="text" :placeholder="$t('column.titlePlaceholder')" v-model="title">
<img class="search-icon" src="@/assets/images/search.png" alt="" @click="handleSearch">
<i class="el-icon-close close-icon" @click="showSearch = false"></i>
</div>
<!-- </template> -->
<!-- <template v-else>
<i class="el-icon-s-fold rightNavBox"></i>
</template>
<div class="btnsBox">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title">
<span>导航一</span>
</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3">
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</div> -->
</div>
</div>
</template>
<script>
@ -134,6 +100,7 @@ $height: 90px;
top: 0;
left: 0;
width: 100%;
min-width: $min-width;
height: $height;
box-sizing: content-box;
&:not(.channel) {
@ -164,13 +131,6 @@ $height: 90px;
margin-right: 43px;
}
}
.rightNavBox{
font-size: 50px;
position: absolute;
right: 20px;
top: 20px;
}
.search-wrap {
position: absolute;
top: 67px;
@ -215,17 +175,4 @@ $height: 90px;
}
}
}
.btnsBox{
width: 100%;
height: 300px;
overflow: hidden;
overflow-y: scroll;
position: absolute;
top: 90px;
left: 0;
background-color: white;
z-index: 99;;
}
</style>

126
src/pages/about/index.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<div class="wrap">
<div class="wrap" v-if="modules.length>=1">
<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">
@ -446,4 +446,128 @@ export default {
width: 98%;
}
}
@media (max-width: 1200px) {
.texts {
flex-direction: column;
.left{
width: 100%;
h2{
font-size: 20px;
}
}
.bg{
margin: 0;
width: 100%;
height: 450px;
}
}
.block{
padding: 50px 0;
.intro{
margin-bottom: 50px;
}
.inner {
.card{
flex-direction: column;
li {
width: 100%;
}
}
}
}
.gray {
.inner{
.stat{
flex-direction: column;
li{
width: 100%;
text-align: center;
}
}
}
}
.plan{
.inner{
flex-direction: column;
.pic{
width: 95%;margin: 0 auto;
}
.texts {
width: 100%;
text-align: center;
}
}
}
.block {
.inner {
.b-title {
font-size: 1.5rem;
}
.people{
.wow {
flex-direction: column;
.pic {
width: 95%;
margin: 0 auto;
}
.texts{
padding-top: 50px;
width: 100%;
}
}
}
.list{
flex-direction: column;
.wow {
width: 100%;
}
}
.staff {
flex-direction: column;
.left{
width: 100%;
h6 {
font-size: 20px;
}
.des{
font-size: 15px;
}
}
.pic {
width: 95%;margin: 0 auto;
height: 400px;
}
}
}
}
}
@media (min-width: 280px) and (max-width: 750px) {
.inner{
.texts {
.bg {
height: 350px;
}
}
.card {
li {
h6 {
font-size: 2rem;
}
}
}
.people{
li {
margin-bottom: 30px;
.pic {
height: 350px;
}
}
}
}
}
</style>

104
src/pages/application/index.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<div class="wrap">
<div class="wrap" v-if="modules.length>=1">
<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">
@ -288,4 +288,106 @@ export default {
width: 1558px;
}
}
@media (min-width: 280px) and (max-width: 750px) {
.block{
padding: 50px 0;
.inner{
width: 95%;
margin: 0 auto;
.texts{
flex-direction: column;
.left {
width: 100%;
}
.bg{
margin: 0;
width: 100%;
height: 450px;
}
}
}
.app{
li {
width: 100%;
}
}
.intro {
margin-bottom: 30px;
}
.group{
flex-direction: column;
li {
width: 100%;
}
}
.news{
flex-direction: column;
li {
width: 95%;
margin: 0 auto;
flex-direction: column;
img{
width: 100%;
height: 200px;
}
.texts{
margin-left: 0;
margin-top: 20px;
}
}
}
}
}
@media (max-width: 1200px) {
.block{
padding: 50px 0;
.inner{
width: 95%;
margin: 0 auto;
.texts{
flex-direction: column;
.left {
width: 100%;
}
.bg{
margin: 0;
width: 100%;
height: 450px;
}
}
}
.app{
li {
width: 100%;
}
}
.intro {
margin-bottom: 30px;
}
.group{
flex-direction: column;
li {
width: 100%;
}
}
.news{
flex-direction: column;
li {
width: 95%;
margin: 0 auto;
flex-direction: column;
img{
width: 100%;
height: 200px;
}
.texts{
margin-left: 0;
margin-top: 20px;
}
}
}
}
}
</style>

47
src/pages/careers/index.vue
Unescape View File

@ -195,7 +195,7 @@ export default {
display: flex;
justify-content: flex-end;
.comma {
left: 660px;
left: 70%;
}
.pic {
left: 0;
@ -292,4 +292,49 @@ export default {
transition: .3s;
}
}
@media (min-width: 280px) and (max-width: 750px) {
.block{
padding: 50px 0;
.inner {
width: 95%;margin: 0 auto;
.card{
flex-direction: column;
li{
margin-top: 20px;
width: 100%;
height: 450px;
}
}
.people{
li {
padding: 200px 20px 30px;
.left {
width: 100%;
}
.pic{
top: -60px;
right: 13px;
width: 55%;
height: 230px;
}
}
}
}
}
.shows{
li {
flex-direction: column;
align-items:flex-start;
height: 450px;
.left {
padding: 10px ;
h6{
font-size: 2rem;
overflow: hidden;
}
}
}
}
}
</style>

601
src/pages/column/index.vue
View File

File diff suppressed because it is too large Load Diff

32
src/pages/edu/index.vue
Unescape View File

@ -150,4 +150,36 @@ export default {
}
}
}
@media (min-width: 280px) and (max-width: 750px) {
.block{
padding: 50px 0;
.inner {
width: 95%;margin: 0 auto;
.b-title{
margin-bottom: 30px;
}
.intro {
margin-bottom: 30px;
}
.block-pic{
height: 450px;
}
}
.list{
li {
margin-top: 20px;
.pic{
width: 100%;height: 450px;
}
.texts{
padding: 10px;
width: 70%;
top: 80px;
height: auto;
left: 24%;
}
}
}
}
}
</style>

132
src/pages/home/index.vue
Unescape View File

@ -1,9 +1,9 @@
<template>
<div class="wrap">
<el-carousel height="959px" :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'">
<div class="wrap" v-if="modules.length>=1">
<el-carousel class="carousel" :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">
<img :class="[{'cursor-pointer': isLink(item.link.linkName)}]" width="100%" height="959" :src="item.pic" alt="" @click="openLink(item)">
<img :class="[{'cursor-pointer': isLink(item.link.linkName)}]" width="100%" :src="item.pic" alt="" @click="openLink(item)">
</el-carousel-item>
</template>
</el-carousel>
@ -146,7 +146,7 @@ export default {
const json = JSON.parse(this.preview ?
data :
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
this.modules = json
this.modules = json
console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules)
// 获取文章列表
@ -176,6 +176,16 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
.carousel{
height: 959px;
img{
height: 100%;
}
/deep/.el-carousel__container{
height: 959px ;
}
}
.card {
display: flex;
justify-content: space-between;
@ -363,4 +373,118 @@ export default {
}
}
}
@media (min-width: 280px) and (max-width: 750px) {
.carousel{
height: 350px;
img{
height: 100%;
}
/deep/.el-carousel__container{
height: 350px ;
}
}
.el-carousel__item{
height: 350px;
img {
height: 350px;
}
}
.block{
padding: 50px 0;
.inner{
width: 95%;
margin: 0 auto;
.b-title{
font-size: 2rem;
margin-bottom: 20px;
}
.wow {
font-size: 1.5rem;
}
.intro {
margin-bottom: 20px;
}
.card {
flex-direction: column;
li{
margin-top: 20px;
width: 100%;
}
}
.news {
flex-direction: column;
li {
width: 100%;
margin-bottom: 15px;
img{
width: 10rem;
}
.texts {
width: calc(100% - 10rem);
}
}
}
.people{
li{
flex-direction: column;
margin-bottom: 20px;
.pic {
width: 100%;
height: 350px;
}
.texts{
padding-top: 20px;
width: 100%;
}
}
}
}
}
.about {
width: 100%;
padding: 20px 0 30px;
.inner {
width: 95%;
margin: 0 auto;
.line{
margin: 20px 0 20px;
}
.des {
margin-top: 20px;
padding: 10px 20px;
}
}
}
.glance {
padding-bottom: 20px;
}
.stat{
flex-direction: column;
li {
width: 100%;
text-align: center;
}
}
}
@media (min-width: 751px) and (max-width: 920px) {
.news {
flex-direction: column;
li {
width: 100%;
margin-bottom: 15px;
img{
width: 10rem;
}
.texts {
width: calc(100% - 10rem);
}
}
}
}
</style>

188
src/pages/news/index.vue
Unescape View File

@ -11,9 +11,9 @@
</template>
</el-carousel>
<ul class="tabs wow fadeInLeft">
<ul class="tabs wow fadeInLeft" ref="tabs">
<template v-for="(item, i) in modules[1].list">
<li v-if="item.columnName" :class="{active: i == curColumn}" :key="i" @click="tabChange(i)">{{ item.columnName }}</li>
<li v-if="item.columnName" :class="{active: i == curColumn}" :key="i" @click="tabChange($event,i)">{{ item.columnName }}</li>
</template>
</ul>
@ -208,6 +208,7 @@ export default {
}
this.modules = json
console.log(this.modules)
this.carouselInterval()
}
}).catch(err => {})
@ -229,7 +230,10 @@ export default {
}
},
// tab回调
tabChange(i) {
tabChange(e,i) {
const tabs = this.$refs.tabs
tabs.scrollLeft = e.target.offsetLeft
// e.target.offsetLeft
const { column } = this.modules[1].list[i]
if (column && column.length) {
const id = column[column.length - 1]
@ -626,4 +630,182 @@ export default {
width: 98%;
}
}
@media (max-width: 1200px) {
.tabs {
overflow-x: scroll;
display: -webkit-box;
}
.block {
padding: 50px 0 ;
.inner{
.more {
width: 100%;
margin: 20px auto 0;
}
.news-banner{
flex-direction: column;
img{
width: 100%;
}
.right {
margin-top: 10px;
width: 100%;
.inds{
left: 50%;
margin-left: -43px;
}
}
}
.card{
flex-direction: column;
.wow {
width: 95%;
margin: 20px auto;
}
}
.b-title{
font-size: 20px;
}
.intro {
font-size: 15px;
margin-bottom: 50px;
}
.shop-shows{
flex-direction: column;
.left {
width: 95%;margin: 0 auto;
}
.right {
width: 93%;
margin: 20px auto;
.show-card{
flex-direction: column;
li {
width: 100%;
.pic{
width: 100%;
}
}
}
.card-list{
li {
.texts{
margin-right: 30px;
}
}
}
}
}
}
}
}
@media (min-width: 280px) and (max-width: 750px) {
.tabs {
li {
padding: 15px 10px;
font-size: 15px;
margin: 0;
}
}
.block{
padding: 20px 0;
.inner {
width: 90%;
.news-banner{
img{
height: 350px;
}
}
.b-title{
margin-bottom: 20px;
}
.intro {
margin-bottom: 20px;
}
.shop-shows{
.left {
img{
height: 350px;
}
}
}
.show-card{
.text{
font-size: 13px;
line-height: 20px;
white-space: inherit
}
}
.card-list{
padding: 20px 10px ;
li {
width: 100%;
img{
margin-right: 10px;
}
.texts{
margin-right: 10px;
h6{
font-size: 15px;
font-weight: bold;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
overflow: hidden;
margin-bottom: 5px;
}
}
.des {
line-height: 15px;
}
.arrow{
margin-right: 0;
}
}
}
.shows{
flex-direction: column;
.left {
width: 100%;
.pic {
height: 450px;
}
}
.card-list{
width: 100%;
padding: 20px 0;
li {
.pic {
width: 100px;
height: 120px;
}
.texts{
h6{
font-size: 15px;font-weight: bold;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-overflow: ellipsis;
overflow: hidden;
}
.text{
margin: 2px 0;
font-size: 12px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
}
}
}
}
}
</style>

27
src/pages/newsPress/index.vue
Unescape View File

@ -169,4 +169,31 @@ export default {
}
}
}
@media (min-width: 280px) and (max-width: 750px) {
.inner{
width: 95%;
.list{
li {
margin-top: 20px;
.pic {
width: 100%;
height: 500px;
}
.texts {
padding: 20px 10px 10px ;
top: 30px;
h6{
font-size: 2rem;
}
.sub{
margin: 10px 0;
}
.des{
margin-bottom: 10px;
}
}
}
}
}
}
</style>

56
src/pages/newsProcurement/index.vue
Unescape View File

@ -165,4 +165,60 @@ export default {
}
}
}
@media (min-width: 280px) and (max-width: 750px) {
.inner{
width: 95%;
.list{
li {
margin-top: 20px;
.pic {
width: 100%;
height: 500px;
}
.texts {
padding: 20px 10px 10px ;
top: 30px;
h6{
font-size: 2rem;
}
.sub{
margin: 10px 0;
}
.des{
margin-bottom: 10px;
}
}
}
}
}
}
@media (max-width: 1200px) {
.inner{
width: 95%;
.list{
li {
margin-top: 20px;
.pic {
width: 100%;
height: 500px;
}
.texts {
padding: 20px 10px 10px ;
top: 30px;
h6{
font-size: 2rem;
}
.sub{
margin: 10px 0;
}
.des{
margin-bottom: 10px;
}
}
}
}
}
}
</style>

3
src/pages/overviewLocation/index.vue
Unescape View File

@ -107,6 +107,9 @@ export default {
white-space: normal;
}
}
.tab-content{
width: 90%;
}
}
</style>

24
src/pages/research/index.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<div class="wrap">
<div class="wrap" v-if="modules.length>=1">
<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">
@ -238,4 +238,26 @@ export default {
line-height: 26px;
}
}
@media (min-width: 280px) and (max-width: 750px) {
.block{
padding: 50px 0;
.intro {
margin-bottom: 30px;
}
.area{
flex-direction: column;
li{
width: 95%;margin: 0 auto;
}
}
.group,.news{
flex-direction: column;
li {
width: 95%;
margin: 20px auto;
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save