mobile
yujialong 2 years ago
parent 398e4a1319
commit a90119c0e9
  1. BIN
      src/assets/images/about/1.png
  2. BIN
      src/assets/images/about/10.png
  3. BIN
      src/assets/images/about/11.png
  4. BIN
      src/assets/images/about/12.png
  5. BIN
      src/assets/images/about/2.png
  6. BIN
      src/assets/images/about/3.png
  7. BIN
      src/assets/images/about/4.png
  8. BIN
      src/assets/images/about/5.png
  9. BIN
      src/assets/images/about/6.png
  10. BIN
      src/assets/images/about/7.png
  11. BIN
      src/assets/images/about/8.png
  12. BIN
      src/assets/images/about/9.png
  13. BIN
      src/assets/images/address.png
  14. BIN
      src/assets/images/arrow-white.png
  15. BIN
      src/assets/images/careers/1.png
  16. BIN
      src/assets/images/careers/10.png
  17. BIN
      src/assets/images/careers/11.png
  18. BIN
      src/assets/images/careers/2.png
  19. BIN
      src/assets/images/careers/3.png
  20. BIN
      src/assets/images/careers/4.png
  21. BIN
      src/assets/images/careers/5.png
  22. BIN
      src/assets/images/careers/6.png
  23. BIN
      src/assets/images/careers/7.png
  24. BIN
      src/assets/images/careers/8.png
  25. BIN
      src/assets/images/careers/9.png
  26. BIN
      src/assets/images/comma.png
  27. BIN
      src/assets/images/logo-black.png
  28. BIN
      src/assets/images/mail.png
  29. BIN
      src/assets/images/map-bg.png
  30. BIN
      src/assets/images/phone.png
  31. 356
      src/pages/about/index.vue
  32. 135
      src/pages/careers/index.vue
  33. 235
      src/pages/channel/index.vue
  34. 14
      src/router/modules/about.js
  35. 14
      src/router/modules/careers.js
  36. 32
      src/styles/page/page.scss

Binary file not shown.

After

Width:  |  Height:  |  Size: 673 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 182 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 304 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 551 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 495 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 318 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 187 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 211 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 305 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 245 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 397 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 883 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 828 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 221 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 315 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 288 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 560 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 616 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 318 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 419 B

@ -0,0 +1,356 @@
<template>
<div class="wrap">
<img width="100%" height="480" src="@/assets/images/about/1.png" alt="">
<div class="block history">
<div class="inner">
<h2 style="margin-left: 57px">Our History</h2>
<div class="texts">
<div class="left">
<h2>Throughout the world, most of the top science and technology innovation centers are distributed</h2>
<div class="line"></div>
<div class="des">
Greater Bay area is the most economically developed China. Therefore, in 2019, the Chinese central government proposed to build this region an international science ion cente.
As one of the core cities in the bay area, with the convenient transportation infrastructure.
</div>
</div>
<img class="bg" width="562" height="506" src="@/assets/images/about/2.png" alt="">
</div>
</div>
</div>
<div class="block">
<div class="inner">
<h2 class="b-title">Our Values</h2>
<p class="intro">What makes a light chaser</p>
<ul class="card">
<li class="item1">
<h6>Integrity</h6>
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen</p>
</li>
<li class="item2">
<h6>Adventure </h6>
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen</p>
</li>
<li class="item3">
<h6>Serve </h6>
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen</p>
</li>
<li class="item4">
<h6>Focus on Future </h6>
<p class="des">We are open and creative, pursuing scientific management and decision-making</p>
</li>
</ul>
</div>
</div>
<div class="block" style="padding-bottom: 0">
<div class="inner">
<h2 class="b-title">Facts</h2>
<p class="intro">Strength in numbers</p>
<ul class="stat">
<li>
<p class="num">2020</p>
<p class="text">The year IASF was founded</p>
</li>
<li>
<p class="num">2</p>
<p class="text">Facility projects</p>
</li>
<li>
<p class="num">240</p>
<p class="text">Employees</p>
</li>
<li>
<p class="num">10</p>
<p class="text">Academicians</p>
</li>
<li>
<p class="num">45%</p>
<p class="text">Hold doctorates or the highest degree in their field</p>
</li>
<li>
<p class="num">$32B+</p>
<p class="text">Facility construction need-based grant aid provided </p>
</li>
</ul>
</div>
</div>
<div class="block">
<div class="inner">
<h2 class="b-title">Govening Board & Leadership</h2>
<p class="intro">What makes a ligh chinese bay chaser</p>
<ul class="people">
<li>
<img class="pic" src="@/assets/images/about/6.png" alt="">
<div class="texts">
<p class="sub">Founder and 1st PRESIDENT OF THE INSTITUTE OF ADVANCED SCIENCE FACILITIES, SHENZHEN</p>
<h6>Sun Dongbai</h6>
<p class="des">Dr. Sun was the executive vice president of Sun Yat- and vice president of the University of Science and Technology Beijing (2008-2017). One of the most widely well-known material scientists aation</p>
<img class="arrow" src="@/assets/images/arrow.png" alt="">
</div>
</li>
<li>
<div class="texts">
<p class="sub">Vice President of the Institute of Advanced Scienc, Shenzhen</p>
<h6>Yang Xueming</h6>
<p class="des">Dr. Yang is a world-recognized physical chemistry scientist, an Academician of the Chinese Academy of Science, an awardee of the National Science Fund for Distinguished Young Scholars</p>
<img class="arrow" src="@/assets/images/arrow.png" alt="">
</div>
<img class="pic" src="@/assets/images/about/7.png" alt="">
</li>
<li>
<img class="pic" src="@/assets/images/about/8.png" alt="">
<div class="texts">
<p class="sub">The Chairman of Science and Technology Advisory Committee</p>
<h6>Ulf KALSSON</h6>
<p class="des">Dr. Ulf Karlsson is a joint professor of Linköping University and KTH Royal Institute of Technology. He established the laboratory of material science and was the director of the materials science platform</p>
<img class="arrow" src="@/assets/images/arrow.png" alt="">
</div>
</li>
</ul>
</div>
</div>
<div class="block list-block">
<div class="inner">
<h2 class="b-title">Committees</h2>
<p class="intro">What makes a ligh chinese bay chaser</p>
<ul class="list">
<li>
<img class="pic" src="@/assets/images/about/9.png" alt="">
<h6>Science and Technology</h6>
<p class="des">installation and nanostructuring</p>
</li>
<li>
<img class="pic" src="@/assets/images/about/10.png" alt="">
<h6>User Committee</h6>
<p class="des"> installation and nanostructuring</p>
</li>
<li>
<img class="pic" src="@/assets/images/about/11.png" alt="">
<h6>Industry Advancement Committee</h6>
<p class="des">installation and nanostructuring</p>
</li>
</ul>
</div>
</div>
<div class="block">
<div class="inner">
<h2 class="b-title">Staff & Organization Chart</h2>
<p class="intro">Meet the light chaser</p>
<div class="staff">
<div class="left">
<h6>Throughout the world, most of the top science and technology innovation centers are distributed</h6>
<div class="des">The IASF has over 300 employees, of which 50% hold a Ph.D. degree, and more than 25% of core positions had abroad research and management experience.</div>
</div>
<img class="pic" src="@/assets/images/about/12.png" alt="">
</div>
</div>
</div>
</div>
</template>
<script>
import Setting from '@/setting'
import Util from '@/libs/util'
export default {
data() {
return {
id: this.$route.query.id,
columnId: '',
form: {},
}
},
watch: {
'$route'() {
this.id = this.$route.query.id
// this.getInfo()
}
},
mounted() {
},
methods: {
//
getInfo() {
this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
this.form = data
this.columnId = data.columnId
}).catch(err => {})
},
}
};
</script>
<style lang="scss" scoped>
@import "../../styles/page/page.scss";
.history {
background: #F2F6F8;
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;
}
.line {
width: 136px;
height: 2px;
margin: 20px 0;
background: #D7D7D7;
}
.des {
font-size: 22px;
color: #181818;
line-height: 31px;
}
.bg {
margin: -122px 0 0 0;
}
}
.card {
display: flex;
flex-wrap: wrap;
li {
width: 686px;
height: 277px;
padding: 70px 67px 20px;
margin-bottom: 28px;
color: #fff;
&:nth-child(odd) {
margin-right: 28px;
}
}
.item1 {
background: url(../../assets/images/about/3.png) 0 0/100% 100% no-repeat;
}
.item2 {
background-color: #4984B6;
}
.item3 {
background-color: #567180;
}
.item4 {
background: url(../../assets/images/about/4.png) 0 0/100% 100% no-repeat;
}
h6 {
margin-bottom: 10px;
font-size: 40px;
}
.des {
font-size: 18px;
}
}
.people {
li {
display: flex;
justify-content: space-between;
margin-bottom: 126px;
}
.pic {
width: 660px;
height: 465px;
}
.texts {
width: 680px;
padding-top: 90px;
}
h6 {
margin: 20px 0;
font-size: 40px;
}
.sub {
font-size: 20px;
color: #020202;
}
.des {
font-size: 18px;
color: #020202;
line-height: 30px;
}
}
.list-block {
background: #F2F6F8;
.inner {
width: 80%;
padding: 90px 0;
background-color: #fff;
}
}
.list {
display: flex;
justify-content: center;
li {
padding-bottom: 30px;
margin-right: 28px;
text-align: center;
background-color: #F5F5F5;
&:last-child {
margin-right: 0;
}
}
h6 {
margin: 35px 0 5px;
font-size: 24px;
color: #272727;
}
.des {
font-size: 16px;
color: #757575;
}
}
.staff {
display: flex;
justify-content: space-between;
background: #F8F8F8;
.left {
width: 658px;
margin: 50px 0 0 46px;
}
h6 {
margin-bottom: 30px;
font-size: 30px;
color: #333;
}
.des {
font-size: 20px;
color: #333;
line-height: 34px;
}
.pic {
width: 650px;
}
}
.stat {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 60px;
li {
width: 30%;
margin-bottom: 50px;
}
.num {
margin-bottom: 10px;
font-size: 60px;
font-weight: 800;
color: #035CE1;
line-height: 49px;
}
.text {
font-size: 24px;
}
}
</style>

@ -0,0 +1,135 @@
<template>
<div class="wrap">
<img width="100%" height="480" src="@/assets/images/careers/1.png" alt="">
<div class="wrap">
<div class="inner">
<ul class="card">
<li>
</li>
</ul>
</div>
</div>
<div class="block people-block">
<div class="inner">
<h2 class="b-title">Profiles</h2>
<p class="intro">What makes a light chaser</p>
<ul class="people">
<li>
<img class="comma" src="@/assets/images/comma.png" alt="">
<div class="left">
<h6>IASF started its journey to chase light,
push the boundaries forward, and discover the unknown.</h6>
<div class="des">Throughout the world, most of the top science and technology innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan.</div>
</div>
<img class="pic" src="@/assets/images/careers/6.png" alt="">
</li>
<li>
<img class="comma" src="@/assets/images/comma.png" alt="">
<div class="left">
<h6>IASF started its journey to chase light,
push the boundaries forward, and discover the unknown.</h6>
<div class="des">Throughout the world, most of the top science and technology innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan.</div>
</div>
<img class="pic" src="@/assets/images/careers/7.png" alt="">
</li>
<li>
<img class="comma" src="@/assets/images/comma.png" alt="">
<div class="left">
<h6>IASF started its journey to chase light,
push the boundaries forward, and discover the unknown.</h6>
<div class="des">Throughout the world, most of the top science and technology innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan.</div>
</div>
<img class="pic" src="@/assets/images/careers/8.png" alt="">
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import Setting from '@/setting'
import Util from '@/libs/util'
export default {
data() {
return {
id: this.$route.query.id,
columnId: '',
form: {},
}
},
watch: {
'$route'() {
this.id = this.$route.query.id
// this.getInfo()
}
},
mounted() {
},
methods: {
//
getInfo() {
this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
this.form = data
this.columnId = data.columnId
}).catch(err => {})
},
}
};
</script>
<style lang="scss" scoped>
@import "../../styles/page/page.scss";
.people-block {
background: #F2F6F8;
}
.people {
li {
position: relative;
min-height: 450px;
padding: 100px 70px 30px 57px;
margin-bottom: 100px;
background-color: #fff;
&:nth-child(even) {
display: flex;
justify-content: flex-end;
.comma {
left: 660px;
}
.pic {
left: 0;
right: auto;
}
}
}
.comma {
position: absolute;
top: -22px;
left: 57px;
}
.left {
width: 670px;
}
h6 {
font-size: 24px;
color: #333;
}
.des {
margin-top: 20px;
font-size: 20px;
color: #666;
line-height: 32px;
}
.pic {
position: absolute;
top: -60px;
right: 43px;
width: 600px;
height: 450px;
}
}
</style>

@ -171,151 +171,120 @@ export default {
</script>
<style lang="scss" scoped>
.block {
padding: 118px 0;
.b-title {
position: relative;
margin-bottom: 50px;
font-size: 50px;
line-height: 59px;
text-align: center;
color: #1F1F1F;
&:after {
content: '';
position: absolute;
top: 70px;
left: 50%;
width: 136px;
height: 4px;
transform: translateX(-50%);
background: #1583FF;
}
@import "../../styles/page/page.scss";
.card {
display: flex;
justify-content: space-between;
li {
width: 660px;
}
.intro {
margin-bottom: 80px;
font-size: 30px;
text-align: center;
color: #5B5B5E;
line-height: 40px;
.texts {
padding-left: 22px;
margin-top: 60px;
border-left: 2px solid #DFE4E9;
}
.card {
display: flex;
justify-content: space-between;
li {
width: 660px;
}
.texts {
padding-left: 22px;
margin-top: 60px;
border-left: 2px solid #DFE4E9;
}
h6 {
margin-bottom: 25px;
font-size: 24px;
color: #333;
}
.des {
font-size: 18px;
color: #222;
line-height: 30px;
}
.arrow {
cursor: pointer;
}
h6 {
margin-bottom: 25px;
font-size: 24px;
color: #333;
}
&.news-block {
background: url(../../assets/images/info-bg.png) 0 0/100% 100% no-repeat;
.des {
font-size: 18px;
color: #222;
line-height: 30px;
}
.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;
}
.arrow {
cursor: pointer;
}
}
.people {
li {
display: flex;
justify-content: space-between;
margin-bottom: 126px;
}
.pic {
width: 660px;
height: 465px;
}
.texts {
width: 680px;
padding-top: 150px;
}
h6 {
font-size: 40px;
}
.des {
font-size: 18px;
color: #020202;
line-height: 30px;
.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;
}
}
.glance {
padding-bottom: 50px;
font-size: 45px;
border-bottom: 1px solid #DEDEDE;
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;
}
.stat {
}
.people {
li {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 60px;
li {
width: 30%;
margin-bottom: 50px;
}
.num {
margin-bottom: 10px;
font-size: 60px;
font-weight: 800;
color: #035CE1;
line-height: 49px;
}
.text {
font-size: 24px;
}
justify-content: space-between;
margin-bottom: 126px;
}
.pic {
width: 660px;
height: 465px;
}
.texts {
width: 680px;
padding-top: 150px;
}
h6 {
font-size: 40px;
}
.des {
font-size: 18px;
color: #020202;
line-height: 30px;
}
}
.inner {
width: 1400px;
margin: 0 auto;
.glance {
padding-bottom: 50px;
font-size: 45px;
border-bottom: 1px solid #DEDEDE;
}
.stat {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 60px;
li {
width: 30%;
margin-bottom: 50px;
}
.num {
margin-bottom: 10px;
font-size: 60px;
font-weight: 800;
color: #035CE1;
line-height: 49px;
}
.text {
font-size: 24px;
}
}
.about {
padding: 77px 0 198px;

@ -0,0 +1,14 @@
import BasicLayout from '@/layouts/home'
const name = 'about'
export default {
path: `/${name}`,
component: BasicLayout,
children: [
{
name,
path: `/${name}`,
component: () => import(`@/pages/${name}`),
meta: { title: '' }
}
]
};

@ -0,0 +1,14 @@
import BasicLayout from '@/layouts/home'
const name = 'careers'
export default {
path: `/${name}`,
component: BasicLayout,
children: [
{
name,
path: `/${name}`,
component: () => import(`@/pages/${name}`),
meta: { title: '' }
}
]
};

@ -0,0 +1,32 @@
.block {
padding: 118px 0;
.b-title {
position: relative;
margin-bottom: 50px;
font-size: 50px;
line-height: 59px;
text-align: center;
color: #1F1F1F;
&:after {
content: '';
position: absolute;
top: 70px;
left: 50%;
width: 136px;
height: 4px;
transform: translateX(-50%);
background: #1583FF;
}
}
.intro {
margin-bottom: 80px;
font-size: 30px;
text-align: center;
color: #5B5B5E;
line-height: 40px;
}
}
.inner {
width: 1400px;
margin: 0 auto;
}
Loading…
Cancel
Save