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

适配问题

Browse Source
master
wangchenguang 2 years ago
parent d57e9f25a9
commit 90805b7f4e
30 changed files with 4659 additions and 1905 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 78
      src/App.vue
  2. 8
      src/components/menuTree/index.vue
  3. 6
      src/i18n/index.js
  4. 11
      src/layouts/header/index.vue
  5. 50
      src/layouts/navbar/index.vue
  6. 754
      src/pages/about/index.vue
  7. 267
      src/pages/application/index.vue
  8. 30
      src/pages/article/index.vue
  9. 315
      src/pages/careers/index.vue
  10. 372
      src/pages/column/index.vue
  11. 171
      src/pages/deviceIntroBeam/index.vue
  12. 238
      src/pages/deviceIntroLayout/index.vue
  13. 97
      src/pages/deviceIntroLinear/index.vue
  14. 289
      src/pages/edu/index.vue
  15. 188
      src/pages/exp/index.vue
  16. 271
      src/pages/home/index.vue
  17. 543
      src/pages/news/index.vue
  18. 231
      src/pages/newsPress/index.vue
  19. 227
      src/pages/newsProcurement/index.vue
  20. 182
      src/pages/overviewDevHistory/index.vue
  21. 129
      src/pages/overviewIntro/index.vue
  22. 134
      src/pages/overviewLocation/index.vue
  23. 139
      src/pages/overviewTrailer/index.vue
  24. 267
      src/pages/research/index.vue
  25. 184
      src/pages/science/index.vue
  26. 796
      src/pages/sfel/index.vue
  27. 198
      src/pages/talent/index.vue
  28. 209
      src/pages/userSharing/index.vue
  29. 3
      src/store/getters.js
  30. 13
      src/store/index.js

78
src/App.vue
Unescape View File

@ -10,6 +10,7 @@ import util from '@/libs/util';
export default { export default {
name: 'App', name: 'App',
created() { created() {
console.log('i18n=>',this.$i18n.locale)
//在页面加载时读取localStorage里的状态信息 //在页面加载时读取localStorage里的状态信息
if (util.local.get(Setting.storeKey)) { if (util.local.get(Setting.storeKey)) {
this.$store.replaceState(Object.assign({}, this.$store.state, util.local.get(Setting.storeKey))); this.$store.replaceState(Object.assign({}, this.$store.state, util.local.get(Setting.storeKey)));
@ -34,13 +35,88 @@ export default {
} }
var flagZt = IsPCModel(); var flagZt = IsPCModel();
this.$store.commit('updateModelType', flagZt) this.$store.commit('updateModelType', flagZt)
window.onresize = () => { window.onresize = this.throttle(() => {
if(document.body.clientWidth <= 1200) { if(document.body.clientWidth <= 1200) {
this.$store.commit('updateModelType', false) this.$store.commit('updateModelType', false)
}else if(document.body.clientWidth > 1700 ) {
this.$store.commit('updateModelType', true)
this.$store.dispatch('updateNavSumA', 10)
sessionStorage.setItem('navPageSize', 10)
}else if(document.body.clientWidth > 1600 && document.body.clientWidth <= 1700 ) {
this.$store.commit('updateModelType', true)
if (this.$i18n.locale == 'en') {
this.$store.dispatch('updateNavSumA', 9)
sessionStorage.setItem('navPageSize', 9)
}else { }else {
this.$store.dispatch('updateNavSumA', 10)
sessionStorage.setItem('navPageSize', 10)
}
}else if(document.body.clientWidth > 1500 && document.body.clientWidth <= 1600) {
this.$store.commit('updateModelType', true) this.$store.commit('updateModelType', true)
this.$store.dispatch('updateNavSumA', 9)
sessionStorage.setItem('navPageSize', 9)
}else if(document.body.clientWidth > 1400 && document.body.clientWidth <= 1500) {
this.$store.commit('updateModelType', true)
if (this.$i18n.locale == 'en') {
this.$store.dispatch('updateNavSumA', 7)
sessionStorage.setItem('navPageSize', 7)
}else {
this.$store.dispatch('updateNavSumA', 8)
sessionStorage.setItem('navPageSize', 8)
}
}else if(document.body.clientWidth > 1300 && document.body.clientWidth <= 1400) {
this.$store.commit('updateModelType', true)
if (this.$i18n.locale == 'en') {
this.$store.dispatch('updateNavSumA', 6)
sessionStorage.setItem('navPageSize', 6)
}else {
this.$store.dispatch('updateNavSumA', 7)
sessionStorage.setItem('navPageSize', 7)
}
}else if(document.body.clientWidth > 1200 && document.body.clientWidth <= 1300) {
this.$store.commit('updateModelType', true)
if (this.$i18n.locale == 'en') {
this.$store.dispatch('updateNavSumA', 6)
sessionStorage.setItem('navPageSize', 6)
}else {
this.$store.dispatch('updateNavSumA', 6)
sessionStorage.setItem('navPageSize', 6)
}
}else {
this.$store.commit('updateModelType', true)
}
},500)
},
mounted() {
window.onbeforeunload = function(){
sessionStorage.removeItem('navPageSize')
}
console.log('document.body.clientWidth=>', document.body.clientWidth)
if(document.body.clientWidth > 1600 ) {
sessionStorage.setItem('navPageSize', 10)
}else if(document.body.clientWidth > 1500 && document.body.clientWidth <= 1600) {
sessionStorage.setItem('navPageSize', 9)
}else if(document.body.clientWidth > 1400 && document.body.clientWidth <= 1500) {
sessionStorage.setItem('navPageSize', 8)
}else if(document.body.clientWidth > 1300 && document.body.clientWidth <= 1400) {
sessionStorage.setItem('navPageSize', 7)
}else if(document.body.clientWidth > 1200 && document.body.clientWidth <= 1300) {
sessionStorage.setItem('navPageSize', 6)
}
},
methods: {
throttle(func, delay) {
var prev = Date.now()
return function () {
var context = this;
var args = arguments;
var now = Date.now();
if (now - prev >= delay) {
func.apply(context, args);
prev = Date.now();
} }
} }
} }
},
}; };
</script> </script>

8
src/components/menuTree/index.vue
Unescape View File

@ -7,10 +7,14 @@
</template> </template>
<menuTree :menuList="item.children"></menuTree> <menuTree :menuList="item.children"></menuTree>
</el-submenu> </el-submenu>
<el-menu-item :key="item.id" :id="item.id" :index="String(item.id)" :class="{active: $route.query.id == item.id}" v-else> <template v-else>
<span v-if="item.menuVisible!==1" slot="title" :id="item.id">{{item.columnName}}</span> <template v-if="item.menuVisible!==1" >
<el-menu-item :key="item.id" :id="item.id" :index="String(item.id)" :class="{active: $route.query.id == item.id}" >
<span slot="title" :id="item.id">{{item.columnName}}</span>
</el-menu-item> </el-menu-item>
</template> </template>
</template>
</template>
</div> </div>
</template> </template>

6
src/i18n/index.js
Unescape View File

@ -23,7 +23,8 @@ export const messages = {
series: '演讲系列', series: '演讲系列',
all: '全部', all: '全部',
readDetail: '阅读详情', readDetail: '阅读详情',
offline:'线下' offline:'线下',
more: '更多'
} }
}, },
'en': { 'en': {
@ -50,7 +51,8 @@ export const messages = {
series: 'Series', series: 'Series',
all: 'All', all: 'All',
readDetail: 'Read Detail', readDetail: 'Read Detail',
offline: 'Offline' offline: 'Offline',
more: 'More'
} }
} }
}; };

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

@ -11,7 +11,7 @@
</a> </a>
<!-- pc端 --> <!-- pc端 -->
<template v-if="$store.getters.getModelType"> <template v-if="$store.getters.getModelType">
<navbar ref="nav" :isHome.sync="isHome" :isEstate.sync="isEstate"></navbar> <navbar ref="nav" :isHome.sync="isHome" :isEstate.sync="isEstate" @showMoreBtns="updateBtnsType"></navbar>
<div class="tools"> <div class="tools">
<img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleSearch"> <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"> <img :src="require('@/assets/images/cn' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleLang">
@ -53,7 +53,7 @@ export default {
showSearch: false, showSearch: false,
title: '', title: '',
searchTimer: null, searchTimer: null,
modelType: false modelType: false,
}; };
}, },
components: { components: {
@ -90,6 +90,13 @@ export default {
}, },
stop() { stop() {
},
/**
* pc端下,当导航栏条目大于10的情况下,显示更多按钮
* type : true显示,false隐藏
*/
updateBtnsType(type) {
this.showMoreBtns = type
}, },
// 获取页面滚动距离(home长页专用) // 获取页面滚动距离(home长页专用)
handleScroll () { handleScroll () {

50
src/layouts/navbar/index.vue
Unescape View File

@ -2,14 +2,19 @@
<div> <div>
<el-menu :class="['nav', {home: isHome, estate: isEstate}]" ref="elMenu" :key="menuRefresh" :mode="$store.getters.getModelType ? 'horizontal' : 'vertical' " :background-color="bgColor" :text-color="textColor" :active-text-color="activeTextColor" @open="jump" @select="jump" :default-active="String(active)"> <el-menu :class="['nav', {home: isHome, estate: isEstate}]" ref="elMenu" :key="menuRefresh" :mode="$store.getters.getModelType ? 'horizontal' : 'vertical' " :background-color="bgColor" :text-color="textColor" :active-text-color="activeTextColor" @open="jump" @select="jump" :default-active="String(active)">
<menuTree :menuList="menus"/> <menuTree :menuList="menus"/>
<el-submenu :popper-class="isHome ? 'home-menu-popup' : ''" v-show="showMoreBtns" index="522222" >
<template slot="title"><div class="moreBtns">{{ $t('column.more') }}</div></template>
<menuTree :menuList="otherMenus"/>
</el-submenu>
</el-menu> </el-menu>
</div> </div>
</template> </template>
<script> <script>
import menuTree from '@/components/menuTree' import menuTree from '@/components/menuTree'
import mixins from '@/mixins/article' import mixins from '@/mixins/article'
import { mapState, mapMutations } from 'vuex' import { mapState, mapMutations,mapGetters } from 'vuex'
export default { export default {
props: ['isHome', 'isEstate', 'updateModelType'], props: ['isHome', 'isEstate', 'updateModelType'],
mixins: [mixins], mixins: [mixins],
@ -22,12 +27,21 @@ export default {
activeTextColor: '#1583FF', activeTextColor: '#1583FF',
menuRefresh: 1, menuRefresh: 1,
toItem: {}, toItem: {},
parentId: 0 parentId: 0,
otherMenus: [],
// 当导航栏条目大于10条,则在pc端显示更多的按钮
showMoreBtns: false
}; };
}, },
components: { components: {
menuTree menuTree
}, },
computed: {
...mapGetters(["getNavSum"]),
mapboxMap1() {
return this.navSum;
}
},
watch: { watch: {
'$route'() { '$route'() {
const { siteId } = this.$route.query const { siteId } = this.$route.query
@ -40,11 +54,15 @@ export default {
}, },
isHome() { isHome() {
this.handleColor() this.handleColor()
},
getNavSum() {
this.getColumn()
} }
}, },
mounted() { mounted() {
this.handleColor() this.handleColor()
this.getColumn() this.getColumn()
console.log('this.$store.state.navSum=>' ,this.$store.state.navSum)
}, },
methods: { methods: {
...mapMutations('content', [ ...mapMutations('content', [
@ -59,7 +77,20 @@ export default {
typeId : '', typeId : '',
isSort: 1 isSort: 1
}).then(({ data }) => { }).then(({ data }) => {
this.menus = data // 去掉被禁用的栏目
const menuVisibleData = data.filter(item=> item.menuVisible ==0)
if (this.$store.getters.getModelType) {
this.menus = menuVisibleData.slice(0, sessionStorage.getItem('navPageSize'))
this.otherMenus = menuVisibleData.slice(sessionStorage.getItem('navPageSize'), data.length)
if (this.otherMenus.length >=1) {
this.showMoreBtns = true
}else {
this.showMoreBtns = false
}
}else {
this.showMoreBtns = false
this.menus = menuVisibleData
}
if (data.length) { if (data.length) {
if (!this.$route.query.id && !this.$route.query.articleId && this.$route.path !== '/column/result') this.$router.replace(`/column?id=${data[0].id}&siteId=${data[0].siteId}`) if (!this.$route.query.id && !this.$route.query.articleId && this.$route.path !== '/column/result') this.$router.replace(`/column?id=${data[0].id}&siteId=${data[0].siteId}`)
if (!this.active) this.active = data[0].id if (!this.active) this.active = data[0].id
@ -102,11 +133,11 @@ export default {
// 跳转 // 跳转
jump(id) { jump(id) {
console.log('id=>',id) console.log('id=>',id)
this.getPath(this.otherMenus ,id || this.otherMenus[0].id)
this.getPath(this.menus ,id || this.menus[0].id) this.getPath(this.menus ,id || this.menus[0].id)
this.columnTo(this.toItem) this.columnTo(this.toItem)
// if(!this.$store.getters.getModelType) {
// this.updateModelType(false)
// }
this.$parent.showSearch = false this.$parent.showSearch = false
} }
} }
@ -115,7 +146,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
$height: 90px; $height: 90px;
.moreBtns{
font-size: 1rem;
font-weight: bold;
padding-top: 0.2rem;
}
/deep/.nav.el-menu--horizontal { /deep/.nav.el-menu--horizontal {
display: flex;
position: absolute; position: absolute;
top: 0; top: 0;
left: 50%; left: 50%;
@ -175,7 +212,6 @@ $height: 90px;
@media (max-width: 1500px) { @media (max-width: 1500px) {
/deep/.nav { /deep/.nav {
.el-menu-item { .el-menu-item {
padding: 0 8px;
} }
} }
} }

754
src/pages/about/index.vue
View File

File diff suppressed because it is too large Load Diff

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

@ -123,24 +123,41 @@ export default {
.wrap{ .wrap{
/deep/ .el-carousel { /deep/ .el-carousel {
height: 30rem; height: 21.6rem;
.el-carousel__container{ .el-carousel__container{
height: 30rem; height: 21.6rem;
} }
img{ img{
height: 30rem; height: 21.6rem;
}
}
}
.banner-item {
.banner-name {
font-size: 2.16rem;
}
}
.block {
padding: 3.15rem 0;
.inner {
.b-title {
font-size: 2.25rem;
margin-bottom: 2.25rem;
}
.intro {
margin-bottom: 2.25rem;
} }
} }
} }
.history { .history {
h2 { h2 {
font-size: 1.8rem; font-size: 1.35rem;
color: #333; color: #333;
} }
.texts { .texts {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 82px 57px 30px; padding: 2.7rem 2.56rem 1.35rem;
margin-top: 20px; margin-top: 20px;
background-color: #fff; background-color: #fff;
border-radius: 100px 0px 0px 0px; border-radius: 100px 0px 0px 0px;
@ -150,7 +167,7 @@ export default {
} }
} }
.left { .left {
width: 695px; width: 50%;
} }
.des { .des {
margin: 20px 0; margin: 20px 0;
@ -160,6 +177,8 @@ export default {
} }
.bg { .bg {
margin: -122px 0 0 0; margin: -122px 0 0 0;
width: 50%;
height: auto;
} }
} }
.app-inner { .app-inner {
@ -236,17 +255,17 @@ export default {
} }
img { img {
width: 100%; width: 100%;
height: 353px; height: auto;
} }
.text { .text {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 143px; height: 6.43rem;
font-size: 1.8rem; font-size: 1.44rem;
font-family: SFProDisplay-Bold, SFProDisplay; font-family: SFProDisplay-Bold, SFProDisplay;
font-weight: bold; font-weight: bold;
line-height: 40px; line-height: 6.43rem;
text-align: center; text-align: center;
color: #272727; color: #272727;
background-color: #F5F5F5; background-color: #F5F5F5;
@ -264,8 +283,8 @@ export default {
li { li {
display: inline-flex; display: inline-flex;
width: calc((100% - 28px) / 2); width: calc((100% - 28px) / 2);
padding: 34px; padding: 1.53rem;
margin-bottom: 28px; margin-bottom: 1.26rem;
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
transition: .3s; transition: .3s;
@ -274,8 +293,8 @@ export default {
} }
} }
img { img {
width: 237px; width: 10.66rem;
height: 167px; height: auto;
} }
.texts { .texts {
margin-left: 34px; margin-left: 34px;
@ -286,12 +305,12 @@ export default {
} }
.des { .des {
margin: 14px 0; margin: 14px 0;
font-size: 1rem; font-size: .9rem;
color: #333; color: #333;
line-height: 22px; line-height: 22px;
} }
.meta { .meta {
font-size: 1rem; font-size: .8rem;
color: #999; color: #999;
} }
} }
@ -424,41 +443,48 @@ export default {
@media (max-width: 320px) { @media (max-width: 320px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 13rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 13rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 13rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 13rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
padding: 1.25rem 0 ; padding: 1.25rem 0 ;
.inner { .inner {
h2 {
margin-left: 1.5rem !important;
}
.b-title { .b-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.texts { .texts {
padding: 5rem 1.25rem; padding: 5rem 1.25rem;
h2{
margin-left: 0 !important;
}
.bg { .bg {
height: 15rem !important; height: auto !important;
} }
} }
.group{ .group{
li { li {
img { img {
height: 15rem; height: auto;
} }
} }
} }
@ -466,7 +492,7 @@ export default {
li { li {
padding: 1.25rem; padding: 1.25rem;
img{ img{
height: 13rem; height: auto;
} }
.texts { .texts {
padding: 1.25rem; padding: 1.25rem;
@ -479,41 +505,48 @@ export default {
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 15rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 15rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 15rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 15rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
padding: 1.25rem 0 ; padding: 1.25rem 0 ;
.inner { .inner {
h2 {
margin-left: 1.5rem !important;
}
.b-title { .b-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.texts { .texts {
padding: 5rem 1.25rem; padding: 5rem 1.25rem;
h2{
margin-left: 0 !important;
}
.bg { .bg {
height: 15rem !important; height: auto !important;
} }
} }
.group{ .group{
li { li {
img { img {
height: 15rem; height: auto;
} }
} }
} }
@ -521,7 +554,7 @@ export default {
li { li {
padding: 1.25rem; padding: 1.25rem;
img{ img{
height: 13rem; height: auto;
} }
.texts { .texts {
padding: 1.25rem; padding: 1.25rem;
@ -534,41 +567,48 @@ export default {
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 18rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 18rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 18rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 18rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
padding: 1.25rem 0 ; padding: 1.25rem 0 ;
.inner { .inner {
h2 {
margin-left: 1.5rem !important;
}
.b-title { .b-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.texts { .texts {
padding: 5rem 1.25rem; padding: 5rem 1.25rem;
h2{
margin-left: 0 !important;
}
.bg { .bg {
height: 18rem !important; height: auto !important;
} }
} }
.group{ .group{
li { li {
img { img {
height: 18rem; height: auto;
} }
} }
} }
@ -576,7 +616,7 @@ export default {
li { li {
padding: 1.25rem; padding: 1.25rem;
img{ img{
height: 18rem; height: auto;
} }
.texts { .texts {
padding: 1.25rem; padding: 1.25rem;
@ -589,41 +629,48 @@ export default {
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 22rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 22rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 22rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 22rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
padding: 1.25rem 0 ; padding: 1.25rem 0 ;
.inner { .inner {
h2 {
margin-left: 1.5rem !important;
}
.b-title { .b-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.texts { .texts {
padding: 5rem 1.25rem; padding: 5rem 1.25rem;
h2{
margin-left: 0 !important;
}
.bg { .bg {
height: 22rem !important; height: auto !important;
} }
} }
.group{ .group{
li { li {
img { img {
height: 22rem; height: auto;
} }
} }
} }
@ -631,7 +678,7 @@ export default {
li { li {
padding: 1.25rem; padding: 1.25rem;
img{ img{
height: 22rem; height: auto;
} }
.texts { .texts {
padding: 1.25rem; padding: 1.25rem;
@ -644,41 +691,48 @@ export default {
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 25rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 25rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 25rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 25rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 2.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
padding: 1.25rem 0 ; padding: 1.25rem 0 ;
.inner { .inner {
h2 {
margin-left: 1.5rem !important;
}
.b-title { .b-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.texts { .texts {
padding: 5rem 1.25rem; padding: 5rem 1.25rem;
h2{
margin-left: 0 !important;
}
.bg { .bg {
height: 25rem !important; height: auto !important;
} }
} }
.group{ .group{
li { li {
img { img {
height: 25rem; height: auto;
} }
} }
} }
@ -686,7 +740,7 @@ export default {
li { li {
padding: 1.25rem; padding: 1.25rem;
img{ img{
height: 25rem; height: auto;
} }
.texts { .texts {
padding: 1.25rem; padding: 1.25rem;
@ -699,109 +753,168 @@ export default {
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 30rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 30rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 30rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 30rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 2.3rem !important; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
padding: 1.25rem 0 ; padding: 1.25rem 0 ;
.inner { .inner {
h2 {
margin-left: 1.5rem !important;
}
.b-title { .b-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.texts { .texts {
padding: 5rem 1.25rem; flex-direction: row;
padding: 3rem 1.25rem;
.left {
width: 50%;
}
h2{
margin-left: 0 !important;
}
.bg { .bg {
height: 30rem !important; width: 50%;
margin: -3rem 0 0 0;
height: auto !important;
} }
} }
.group{ .group{
flex-direction: row;
li { li {
width: calc((100% - 56px) / 3);
img { img {
height: 30rem; height: auto;
}
.text {
line-height: 1.5rem;
} }
} }
} }
.news { .news {
flex-direction: row;
li { li {
width: calc((100% - 28px) / 2);
padding: 1.25rem; padding: 1.25rem;
img{ img{
height: 30rem; height: auto;
} }
.texts { .texts {
padding: 1.25rem; padding: 1.25rem;
} }
} }
} }
.app {
flex-direction: row;
li {
width: 45%;
&:nth-child(2n+1) {
margin-right: 1rem;
}
}
}
} }
} }
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 35rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 35rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 35rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 35rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 2.5rem !important; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
padding: 1.25rem 0 ;
.inner { .inner {
h2 {
margin-left: 1.5rem !important;
}
.b-title { .b-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.texts { .texts {
padding: 5rem 1.25rem; flex-direction: row;
padding: 3rem 1.25rem;
.left {
width: 50%;
}
h2{
margin-left: 0 !important;
}
.bg { .bg {
height: 35rem !important; width: 50%;
margin: -3rem 0 0 0;
height: auto !important;
} }
} }
.group{ .group{
flex-direction: row;
li { li {
width: calc((100% - 56px) / 3);
img { img {
height: 35rem; height: auto;
}
.text {
line-height: 1.5rem;
} }
} }
} }
.news { .news {
flex-direction: row;
li { li {
width: calc((100% - 28px) / 2);
padding: 1.25rem; padding: 1.25rem;
img{ img{
height: 35rem; height: auto;
} }
.texts { .texts {
padding: 1.25rem; padding: 1.25rem;
} }
} }
} }
.app {
flex-direction: row;
li {
width: 45%;
&:nth-child(2n+1) {
margin-right: 1rem;
}
}
}
} }
} }
} }

30
src/pages/article/index.vue
Unescape View File

@ -175,15 +175,15 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./editor.css"; @import "./editor.css";
.content { .content {
width: 1400px; width: 1200px;
/deep/ .el-breadcrumb { /deep/ .el-breadcrumb {
font-size: 1rem; font-size: .98rem;
} }
} }
.banner { .banner {
height: 280px; height: 14.4rem;
padding: 123px 0 0 243px; padding: 7.68rem 0 0 22.1875rem;
font-size: 48px; font-size: 2.16rem;
font-weight: 600; font-weight: 600;
color: #fff; color: #fff;
background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat; background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat;
@ -192,21 +192,21 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left { .left {
width: 66%; width: 70%;
} }
h2 { h2 {
font-size: 2.57rem; font-size: 1.9rem;
color: #1C1C1C; color: #1C1C1C;
} }
.meta { .meta {
margin: 20px 0; margin: 1rem 0;
font-size: 1rem; font-size: .88rem;
color: #9B9B9B; color: #9B9B9B;
} }
.brief { .brief {
padding-bottom: 30px; padding-bottom: 1.5rem;
margin-bottom: 30px; margin-bottom: 1rem;
font-size: 24px; font-size: 1.2rem;
line-height: 1.33; line-height: 1.33;
color: #606060; color: #606060;
border-bottom: 1px solid #D8D8D8; border-bottom: 1px solid #D8D8D8;
@ -245,15 +245,15 @@ export default {
.right { .right {
width: 20%; width: 20%;
/deep/ .el-tree-node__label{ /deep/ .el-tree-node__label{
font-size: 1rem; font-size: .88rem;
} }
} }
.column { .column {
width: 100%; width: 100%;
margin-bottom: 25px; margin-bottom: 1.56rem;
} }
/deep/.el-tree-node__content { /deep/.el-tree-node__content {
height: 44px; height: 2.75rem;
background-color: #E5EDF8; background-color: #E5EDF8;
border-bottom: 2px solid #fff; border-bottom: 2px solid #fff;
} }

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

@ -132,15 +132,34 @@ export default {
@import "../../styles/page/page.scss"; @import "../../styles/page/page.scss";
.wrap{ .wrap{
/deep/ .el-carousel { /deep/ .el-carousel {
height: 30rem; height: 21.6rem;
.el-carousel__container{ .el-carousel__container{
height: 30rem; height: 21.6rem;
} }
img{ img{
height: 30rem; height: 21.6rem;
} }
} }
} }
.banner-item {
.banner-name {
font-size: 2.16rem;
}
}
.block {
padding: 3.15rem 0;
.inner {
.b-title {
font-size: 2.25rem;
margin-bottom: 2.25rem;
}
.intro {
margin-bottom: 6.9rem;
}
}
}
.card { .card {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -150,8 +169,8 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
width: 368px; flex: 1;
height: 526px; height: 23.67rem;
margin-right: 14px; margin-right: 14px;
color: #fff; color: #fff;
&:hover { &:hover {
@ -171,22 +190,25 @@ export default {
} }
h6 { h6 {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 2rem; font-size: 1.57rem;
} }
.text { .text {
font-size: 1.3rem; font-size: 1.08rem;
text-align: center;
} }
.arrow { .arrow {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 177px; height: 7.9rem;
padding-top: 62px;
text-align: center; text-align: center;
background: #36404A; background: #36404A;
opacity: 0; opacity: 0;
transition: .3s; transition: .3s;
cursor: default; cursor: default;
display: flex;
align-items: center;
justify-content: center;
} }
} }
} }
@ -194,8 +216,8 @@ export default {
position: relative; position: relative;
li { li {
position: relative; position: relative;
min-height: 450px; height: 20.25rem;
padding: 100px 70px 30px 57px; padding: 4.5rem 3.15rem 1.35rem 2.565rem;
margin-bottom: 100px; margin-bottom: 100px;
background-color: #fff; background-color: #fff;
transition: .3s; transition: .3s;
@ -220,7 +242,7 @@ export default {
left: 57px; left: 57px;
} }
.left { .left {
width: 51%; width: 50%;
} }
h6 { h6 {
font-size: 1.4rem; font-size: 1.4rem;
@ -236,8 +258,8 @@ export default {
position: absolute; position: absolute;
top: -60px; top: -60px;
right: 43px; right: 43px;
width: 45%; width: 40%;
height: 450px; height: auto;
} }
} }
.shows { .shows {
@ -247,7 +269,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 654px; height: 29.43rem;
margin-bottom: 40px; margin-bottom: 40px;
color: #fff; color: #fff;
&:hover .left { &:hover .left {
@ -286,17 +308,17 @@ export default {
height: 100%; height: 100%;
} }
h6 { h6 {
font-size: 2.6rem; font-size: 2.07rem;
transition: .3s; transition: .3s;
} }
.sub { .sub {
margin: 20px; margin: 20px 0 20px 0;
font-size: 2rem; font-size: 1.35rem;
transition: .3s; transition: .3s;
} }
.des { .des {
margin-bottom: 40px; margin-bottom: 40px;
font-size: 1.2rem; font-size: 1.08rem;
transition: .3s; transition: .3s;
} }
.icon { .icon {
@ -372,23 +394,24 @@ export default {
@media (max-width: 320px) { @media (max-width: 320px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 15rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 15rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 15rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 15rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
@ -396,9 +419,10 @@ export default {
.inner { .inner {
.card { .card {
li { li {
height: 15rem; flex: none;
height: 25rem;
.pic { .pic {
height: 15rem; height: 25rem;
} }
} }
} }
@ -406,8 +430,30 @@ export default {
li { li {
padding: 10rem 1.25rem 1.5rem; padding: 10rem 1.25rem 1.5rem;
.pic { .pic {
height: 10rem; top: -40px;
height: auto;
}
}
}
}
}
.shows {
li {
height: auto;
.left {
h6 {
font-size: 1rem;
}
.sub {
font-size: .9rem;
} }
.des {
font-size: .88rem;
margin-bottom: .5rem;
}
.icon {
width: 2rem;height: 2rem;
} }
} }
} }
@ -416,23 +462,24 @@ export default {
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 15rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 15rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 15rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 15rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
@ -440,42 +487,67 @@ export default {
.inner { .inner {
.card { .card {
li { li {
height: 15rem; flex: none;
height: 25rem;
.pic { .pic {
height: 15rem; height: 25rem;
} }
} }
} }
.people { .people {
li { li {
padding: 10rem 1.25rem 1.5rem; padding: 10rem 1.25rem 1.5rem;
.pic {
top: -40px;
height: auto;
}
}
}
} }
} }
.shows {
li {
height: auto;
.left {
h6 {
font-size: 1rem;
}
.sub {
font-size: .9rem;
}
.des {
font-size: .88rem;
margin-bottom: .5rem;
}
.icon {
width: 2rem;height: 2rem;
}
}
} }
} }
} }
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 18rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 18rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 18rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 18rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
@ -483,24 +555,42 @@ export default {
.inner { .inner {
.card { .card {
li { li {
height: 18rem; flex: none;
height: 25rem;
.pic { .pic {
height: 18rem; height: 25rem;
} }
} }
} }
.people { .people {
li { li {
padding: 10rem 1.25rem 1.5rem; padding: 10rem 1.25rem 1.5rem;
.pic {
top: -40px;
height: auto;
} }
} }
} }
}
} }
.shows { .shows {
li { li {
height: 18rem; height: auto;
.pic { .left {
height: 18rem; h6 {
font-size: 1rem;
}
.sub {
font-size: .9rem;
}
.des {
font-size: .88rem;
margin-bottom: .5rem;
}
.icon {
width: 2rem;height: 2rem;
}
} }
} }
} }
@ -508,23 +598,24 @@ export default {
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 20rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 20rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 20rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 20rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
@ -532,31 +623,31 @@ export default {
.inner { .inner {
.card { .card {
li { li {
height: 20rem; flex: none;
height: 25rem;
.pic { .pic {
height: 20rem; height: 25rem;
} }
} }
} }
.people { .people {
li { li {
margin-bottom: 15rem;
padding: 10rem 1.25rem 1.5rem; padding: 10rem 1.25rem 1.5rem;
.pic {
top: -40%;
height: auto;
} }
} }
} }
}
.people {
li {
.pic {
height: 16rem !important;
}
} }
} }
.shows { .shows {
li { li {
height: 20rem; height: auto;
.pic { .left {
height: 20rem; padding: 2rem 2rem;
} }
} }
} }
@ -564,23 +655,24 @@ export default {
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 22rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 22rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 22rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 22rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
@ -588,31 +680,31 @@ export default {
.inner { .inner {
.card { .card {
li { li {
height: 22rem; flex: none;
height: 25rem;
.pic { .pic {
height: 22rem; height: 25rem;
} }
} }
} }
.people { .people {
li { li {
padding: 10rem 1.25rem 1.5rem; padding: 10rem 1.25rem 1.5rem;
margin-bottom: 15rem;
.pic {
top: -60%;
height: auto;
} }
} }
} }
}
.people {
li {
.pic {
height: 18rem !important;
}
} }
} }
.shows { .shows {
li { li {
height: 22rem; height: auto;
.pic { .left {
height: 22rem; padding: 3rem 2rem;
} }
} }
} }
@ -620,23 +712,24 @@ export default {
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 26rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 26rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 26rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 26rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
@ -644,32 +737,32 @@ export default {
.inner { .inner {
.card { .card {
li { li {
height: 26rem; flex: none;
height: 25rem;
.pic { .pic {
height: 26rem; height: 25rem;
} }
} }
} }
.people { .people {
li { li {
margin-bottom: 20rem;
padding: 10rem 1.25rem 1.5rem; padding: 10rem 1.25rem 1.5rem;
.pic {
top: -85%;
height: auto;
} }
} }
} }
}
.people {
li {
.pic {
width: 50% !important;
height: 18rem !important;
}
} }
} }
.shows { .shows {
li { li {
height: 26rem; height: auto;
.pic { .left {
height: 26rem; padding: 4rem 2rem;
} }
} }
} }
@ -677,23 +770,24 @@ export default {
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 30rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 30rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 30rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 30rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
@ -701,32 +795,31 @@ export default {
.inner { .inner {
.card { .card {
li { li {
height: 30rem; flex: none;
height: 25rem;
.pic { .pic {
height: 30rem; height: 25rem;
} }
} }
} }
.people { .people {
li { li {
margin-bottom: 30rem;
padding: 10rem 1.25rem 1.5rem; padding: 10rem 1.25rem 1.5rem;
.pic {
top: -115%;
height: auto;
} }
} }
} }
}
.people {
li {
.pic {
width: 50% !important;
height: 18rem !important;
}
} }
} }
.shows { .shows {
li { li {
height: 30rem; height: auto;
.pic { .left {
height: 30rem; padding: 4rem 2rem;
} }
} }
} }

372
src/pages/column/index.vue
Unescape View File

@ -649,40 +649,48 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap {
.banner {
img {
height: 14rem;
}
}
}
.el-tree-node__content{ .el-tree-node__content{
padding-left: 10px !important; padding-left: 10px !important;
} }
.l-title { .l-title {
font-weight: 600; font-weight: 600;
font-size: 1.28rem; font-size: 1.024rem;
} }
.banner { .banner {
position: relative; position: relative;
height: 280px; height: 14rem;
color: #fff; color: #fff;
.texts { .texts {
position: absolute; position: absolute;
top: 123px; top: 6.15rem;
left: 243px; left: 12.15rem;
} }
.text { .text {
font-size: 3rem; font-size: 2.16rem;
font-weight: 600; font-weight: 600;
@include ellipsis; @include ellipsis;
} }
.sub { .sub {
margin-top: 10px; margin-top: .5rem;
font-size: 2rem; font-size: 1.6rem;
} }
} }
.column-wrap { .column-wrap {
padding: 40px 0; padding: 2rem 0;
background: url(../../assets/images/column-bg.png) 0 0 / auto no-repeat, background: url(../../assets/images/column-bg.png) 0 0 / auto no-repeat,
url(../../assets/images/column-bg2.png) bottom right/auto auto no-repeat; url(../../assets/images/column-bg2.png) bottom right/auto auto no-repeat;
background-color: #f9fafa; background-color: #f9fafa;
@ -696,7 +704,7 @@ export default {
.left { .left {
width: 66%; width: 66%;
margin-right: 28px; margin-right: 1.4rem;
} }
.article-wrap { .article-wrap {
@ -706,12 +714,12 @@ export default {
.switch { .switch {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
margin-right: 50px; margin-right: 2.5rem;
li { li {
padding: 0 15px; padding: 0 .75rem;
margin-right: 10px; margin-right: .5rem;
line-height: 36px; line-height: 1.8rem;
font-size: 1rem; font-size: 1rem;
color: #333; color: #333;
background: #f7f7f7; background: #f7f7f7;
@ -727,26 +735,26 @@ export default {
.forms { .forms {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 30px; padding: 1.5rem;
margin-bottom: 20px; margin-bottom: 1rem;
background-color: #fff; background-color: #fff;
.item { .item {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
margin-right: 30px; margin-right: 1.5rem;
} }
.label { .label {
font-size: 1.14rem; font-size: .912rem;
color: #333; color: #333;
white-space: nowrap; white-space: nowrap;
} }
/deep/.el-input__inner { /deep/.el-input__inner {
width: 100%; width: 100%;
height: 48px; height: 2.4rem;
line-height: 48px; line-height: 2.4rem;
border: 0; border: 0;
background: #f7f7f7; background: #f7f7f7;
} }
@ -754,11 +762,12 @@ export default {
.search { .search {
display: inline-flex; display: inline-flex;
width: 34%; width: 34%;
margin-top: .1rem;
input { input {
width: 100%; width: 100%;
height: 48px; height: 2.4rem;
padding: 0 15px; padding: 0 .75rem;
font-size: 1rem; font-size: 1rem;
color: #333; color: #333;
background: #f7f7f7; background: #f7f7f7;
@ -776,8 +785,8 @@ export default {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 62px; width: 3.1rem;
height: 48px; height: 2.4rem;
background: #1583ff; background: #1583ff;
border-radius: 0px 6px 6px 0px; border-radius: 0px 6px 6px 0px;
cursor: pointer; cursor: pointer;
@ -790,7 +799,7 @@ export default {
/deep/.columns { /deep/.columns {
width: 22%; width: 22%;
margin-right: 12px; margin-right: .6rem;
overflow: auto; overflow: auto;
span{ span{
white-space: nowrap; white-space: nowrap;
@ -810,10 +819,10 @@ export default {
.el-tree-node__content { .el-tree-node__content {
position: relative; position: relative;
height: 48px; height: 2.4rem;
padding-left: 40px; padding-left: 2rem;
margin-bottom: 1px; margin-bottom: 1px;
font-size: 1.28rem; font-size: 1.04rem;
color: #666; color: #666;
background-color: #fff; background-color: #fff;
border-top: 1px solid #f8f9f9; border-top: 1px solid #f8f9f9;
@ -883,10 +892,12 @@ export default {
} }
.texts { .texts {
.titleDes { .titleDes {
margin-bottom: 1.56rem; margin-bottom: 1.248rem;
font-size: 1.2rem;
margin-top: .6rem;
} }
.des { .des {
margin-top: 1.7rem; margin-top: 1rem;
} }
} }
.titleDes { .titleDes {
@ -895,10 +906,10 @@ export default {
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
margin-top: 1rem; margin-top: .8rem;
} }
.readDetailBtn { .readDetailBtn {
margin-top: 2rem; margin-top: 1rem;
} }
.texts { .texts {
flex-grow: 1; flex-grow: 1;
@ -914,19 +925,19 @@ export default {
} }
.texts { .texts {
width: 52%; width: 60%;
padding-left: 30px; padding-left: 30px;
} }
.type { .type {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 1.28rem; font-size: 1.024rem;
color: #333; color: #333;
} }
h6 { h6 {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 1.71rem; font-size: 1.368rem;
color: #000; color: #000;
line-height: 38px; line-height: 38px;
@include mul-ellipsis(2); @include mul-ellipsis(2);
@ -935,7 +946,7 @@ export default {
.meta { .meta {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 1rem; font-size: .88rem;
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
color: #333; color: #333;
} }
@ -950,8 +961,8 @@ export default {
} }
.pic { .pic {
width: 35%; width: 30%;
height: 244px; height: auto;
} }
} }
.news-notice { .news-notice {
@ -984,13 +995,13 @@ export default {
} }
.right { .right {
width: 14%; width: 14%;
min-width: 240px; min-width: 15rem;
overflow: hidden; overflow: hidden;
} }
.column { .column {
width: 100%; width: 100%;
margin-bottom: 25px; margin-bottom: 1.25rem;
/deep/.el-tree-node__content { /deep/.el-tree-node__content {
height: 44px; height: 44px;
@ -1005,16 +1016,16 @@ export default {
} }
.list { .list {
margin-bottom: 20px; margin-bottom: 1rem;
li { li {
padding: 16px 0; padding: .8rem 0;
border-bottom: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8;
} }
.text { .text {
margin-bottom: 5px; margin-bottom: 5px;
font-size: 1rem; font-size: .98rem;
cursor: pointer; cursor: pointer;
@include ellipsis; @include ellipsis;
@ -1024,7 +1035,7 @@ export default {
} }
.date { .date {
font-size: .85rem; font-size: .78rem;
color: #999; color: #999;
} }
} }
@ -1220,11 +1231,13 @@ export default {
@media (max-width: 320px) { @media (max-width: 320px) {
.banner { .banner {
height: 13rem; height: 12rem !important;
img { img {
height: 13rem !important; height: 12rem !important;
} }
.texts { .texts {
left: 2rem;
bottom: 2rem;
.text { .text {
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -1234,7 +1247,106 @@ export default {
.article-wrap { .article-wrap {
.articles { .articles {
.pic { .pic {
height: 10rem !important; height: auto !important;
}
.otherData {
margin-top: 1rem;
.leftBox {
padding-left: 0;
.titleDes {
line-height: 1.368rem;
}
}
}
}
}
}
.forms {
.switch {
width: 100%;
flex-direction: column;
margin-right: 0;
li {
width: 90%;
margin: 0 auto;
margin-top: 10px;
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.banner {
height: 12rem !important;
img {
height: 12rem !important;
}
.texts {
left: 2rem;
bottom: 2rem;
.text {
font-size: 1.5rem;
}
}
}
.contents {
.article-wrap {
.articles {
.pic {
height: auto !important;
}
.otherData {
margin-top: 1rem;
.leftBox {
padding-left: 0;
.titleDes {
line-height: 1.368rem;
}
}
}
}
}
}
.forms {
.switch {
width: 100%;
flex-direction: column;
margin-right: 0;
li {
width: 90%;
margin: 0 auto;
margin-top: 10px;
}
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.banner {
height: 12rem !important;
img {
height: 12rem !important;
}
.texts {
left: 2rem;
bottom: 2rem;
.text {
font-size: 1.5rem;
}
}
}
.contents {
.article-wrap {
.articles {
.pic {
height: auto !important;
}
.otherData {
margin-top: 1rem;
.leftBox {
padding-left: 0;
.titleDes {
line-height: 1.368rem;
}
}
} }
} }
} }
@ -1253,59 +1365,211 @@ export default {
} }
} }
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.banner {
height: 12rem !important;
img {
height: 12rem !important;
}
.texts {
left: 2rem;
bottom: 2rem;
.text {
font-size: 1.5rem;
}
}
}
.contents { .contents {
.article-wrap { .article-wrap {
.articles { .articles {
.pic { .pic {
height: 15rem !important; height: auto !important;
}
.otherData {
margin-top: 1rem;
.leftBox {
padding-left: 0;
.titleDes {
line-height: 1.368rem;
} }
} }
} }
} }
}
}
.forms {
.switch {
width: 100%;
flex-direction: column;
margin-right: 0;
li {
width: 90%;
margin: 0 auto;
margin-top: 10px;
}
}
}
} }
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.banner {
height: 12rem !important;
img {
height: 12rem !important;
}
.texts {
left: 2rem;
bottom: 2rem;
.text {
font-size: 1.5rem;
}
}
}
.contents { .contents {
.article-wrap { .article-wrap {
.articles { .articles {
.pic { .pic {
height: 20rem !important; height: auto !important;
}
.otherData {
margin-top: 1rem;
.leftBox {
padding-left: 0;
.titleDes {
line-height: 1.368rem;
}
} }
} }
} }
} }
}
.forms {
.switch {
width: 100%;
flex-direction: column;
margin-right: 0;
li {
width: 90%;
margin: 0 auto;
margin-top: 10px;
}
}
}
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.banner { .banner {
height: 16rem; height: 12rem !important;
img { img {
height: 16rem !important; height: 12rem !important;
}
.texts {
left: 2rem;
bottom: 2rem;
.text {
font-size: 1.5rem;
}
} }
} }
.contents { .contents {
.article-wrap { .article-wrap {
.articles { .articles {
.pic { .pic {
height: 25rem !important; height: auto !important;
}
.otherData {
margin-top: 1rem;
.leftBox {
padding-left: 0;
.titleDes {
line-height: 1.368rem;
}
}
}
}
}
} }
.forms {
.switch {
width: 100%;
flex-direction: column;
margin-right: 0;
li {
width: 90%;
margin: 0 auto;
margin-top: 10px;
} }
} }
} }
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.article {
.articles {
.pic {
width: 40%;
height: auto;
}
}
}
.banner { .banner {
height: 18rem !important; height: 14rem !important;
img { img {
height: 18rem !important; height: 14rem !important;
}
.texts {
left: 2rem;
bottom: 2rem;
.text {
font-size: 1.5rem;
}
} }
} }
.contents { .contents {
.article-wrap { .article-wrap {
.articles { .articles {
.pic { .pic {
height: 30rem !important; height: auto !important;
}
.otherData {
margin-top: 1rem;
.leftBox {
padding-left: 0;
.titleDes {
line-height: 1.368rem;
}
}
}
} }
} }
} }
.forms {
.switch {
width: 100%;
flex-direction: column;
margin-right: 0;
li {
width: 90%;
margin: 0 auto;
margin-top: 10px;
}
}
}
}
@media (min-width: 1200px) and (max-width: 1300px) {
.article {
.articles {
.pic {
width: 40%;
height: auto;
}
}
}
}
@media (min-width: 1300px) {
.article {
.articles {
.pic {
width: 40%;
height: auto;
}
}
} }
} }
</style> </style>

171
src/pages/deviceIntroBeam/index.vue
Unescape View File

@ -57,6 +57,25 @@ export default {
.banner { .banner {
background: url(../../assets/images/device/13.png) 0 0/100% 100% no-repeat; background: url(../../assets/images/device/13.png) 0 0/100% 100% no-repeat;
font-weight: bold; font-weight: bold;
height: 17.5rem;
padding: 10.68rem 0 0 16.15rem;
font-size: 2.16rem;
}
.block {
padding: 3.85rem 0;
.inner {
h6 {
font-size: 1.76rem;
}
.en {
font-size: 1.76rem;
margin: 0px 0 2rem;
}
.sum {
margin-top: 3rem;
font-size: .96rem;
}
}
} }
.beamBox { .beamBox {
position: relative; position: relative;
@ -83,15 +102,16 @@ export default {
.share { .share {
position: relative; position: relative;
.inner { .inner {
width: 1323px; width: 1200px;
} }
.left { .left {
width: 547px; // width: 34.1875rem;
margin-right: 66px; flex-grow: 1;
margin-right: 4.125rem;
} }
h6 { h6 {
position: relative; position: relative;
font-size: 2.4rem; font-size: 1.92rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
@ -112,15 +132,16 @@ export default {
line-height: 44px; line-height: 44px;
} }
.des { .des {
margin-top: 25px; margin-top: 1.25rem;
font-size: 1rem; font-size: .88rem;
color: #333; color: #333;
line-height: 37px; line-height: 1.85rem;
-webkit-line-clamp: inherit;
overflow: visible; overflow: visible;
} }
.pic { .pic {
width: 610px; width: 30.5rem;
height: 409px; height: auto;
margin-top: 10px; margin-top: 10px;
border-top-left-radius: 20px; border-top-left-radius: 20px;
} }
@ -128,21 +149,21 @@ export default {
.intro { .intro {
display: flex; display: flex;
align-items: center; align-items: center;
max-width: 1490px; width: 77.5%;
width: 90%; height: 19.65rem;
height: 393px;
margin-bottom: 67px; margin-bottom: 67px;
.pic { .pic {
width: 60%; width: 60%;
height: 100%; height: 100%;
} }
.des { .des {
height: 100%; height: 19.65rem;
padding: 57px 60px 20px 60px; padding: 2.85rem 3rem 1rem 3rem;
font-size: 1.2rem; font-size: .96rem;
color: #fff; color: #fff;
line-height: 40px; line-height: 2rem;
background: #2E4984; background: #2E4984;
-webkit-line-clamp: 7; //设定一共3行，超出的部分隐藏，并用省略号来表示
} }
} }
.unit { .unit {
@ -150,9 +171,9 @@ export default {
padding-bottom: 60px; padding-bottom: 60px;
margin: 0 auto; margin: 0 auto;
h6 { h6 {
padding-left: 15px; padding-left: .93rem;
margin-bottom: 15px; margin-bottom: .93rem;
font-size: 1.1rem; font-size: .88rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #2A2A2A; color: #2A2A2A;
@ -206,44 +227,128 @@ export default {
} }
@media (max-width: 320px) { @media (max-width: 320px) {
.banner{ .banner{
height: 13rem; height: 12rem;
padding: 6rem 0 0 8rem; padding: 6rem 0 0 2rem;
}
.beamBox {
.imgText {
bottom: 1rem;
right: 1rem;
}
}
.intro {
width: 100%;
.des {
height: auto;
}
} }
} }
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.banner{ .banner{
height: 13rem; height: 12rem;
padding: 8rem 0 0 10rem; padding: 6rem 0 0 2rem;
}
.beamBox {
.imgText {
bottom: 1rem;
right: 1rem;
}
}
.intro {
width: 100%;
.des {
height: auto;
} }
} }
}
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.banner{ .banner{
height: 15rem; height: 12rem;
padding: 10rem 0 0 14rem; padding: 6rem 0 0 2rem;
}
.beamBox {
.imgText {
bottom: 2rem;
right: 2rem;
}
}
.intro {
width: 100%;
.des {
height: auto;
}
} }
} }
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.banner{ .banner{
height: 17rem; height: 12rem;
padding: 12rem 0 0 22rem; padding: 6rem 0 0 2rem;
}
.beamBox {
.imgText {
bottom: 3rem;
right: 3rem;
}
}
.intro {
width: 100%;
.des {
height: auto;
}
} }
} }
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.banner{ .banner{
height: 19rem; height: 12rem;
padding: 12rem 0 0 22rem; padding: 6rem 0 0 2rem;
}
.beamBox {
.imgText {
bottom: 3rem;
right: 3rem;
}
}
.intro {
width: 100%;
.des {
height: auto;
}
} }
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.banner{ .banner{
height: 19rem; height: 12rem;
padding: 12rem 0 0 22rem; padding: 6rem 0 0 2rem;
}
.beamBox {
.imgText {
bottom: 3rem;
right: 3rem;
}
}
.intro {
width: 100%;
.des {
height: auto;
}
} }
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.banner{ .banner{
height: 25rem; height: 12rem;
padding: 12rem 0 0 22rem; padding: 6rem 0 0 2rem;
}
.beamBox {
.imgText {
bottom: 4rem;
right: 4rem;
}
}
.intro {
width: 100%;
.des {
height: auto;
}
} }
} }
</style> </style>

238
src/pages/deviceIntroLayout/index.vue
Unescape View File

@ -57,6 +57,21 @@ export default {
background: url(../../assets/images/device/14.png) no-repeat center; background: url(../../assets/images/device/14.png) no-repeat center;
background-size: 100% 100%; background-size: 100% 100%;
font-weight: bold; font-weight: bold;
height: 17.5rem;
padding: 10.68rem 0 0 16.15rem;
font-size: 2.16rem;
}
.block {
padding: 3.85rem 0;
.inner {
h6 {
font-size: 2.16rem;
}
.en {
font-size: 1.76rem;
margin: 0px 0 2rem;
}
}
} }
.share { .share {
position: relative; position: relative;
@ -64,7 +79,11 @@ export default {
width: 90%; width: 90%;
max-width: 1323px; max-width: 1323px;
.textBox{ .textBox{
margin-top: 290px; margin-top: 12.125rem;
position: absolute;
width: 85%;
right: 0;
top: 16.125rem;
.left { .left {
flex-grow: 1; flex-grow: 1;
} }
@ -74,12 +93,12 @@ export default {
} }
} }
.left { .left {
width: 547px; width: 34.187rem;
margin-right: 66px; margin-right: 4.125rem;
} }
h6 { h6 {
position: relative; position: relative;
font-size: 2.2rem; font-size: 1.76rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
@ -95,43 +114,49 @@ export default {
position: absolute; position: absolute;
left: 0; left: 0;
max-width: 1671px; max-width: 1671px;
width: 80%; width: 85%;
padding: 32px 52px 25px 16%; padding: 1.6rem 2.9rem 1.6rem 16%;
font-size: 1.2rem; font-size: 1.06rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
border-radius: 0 6rem 0 0; border-radius: 0 6rem 0 0;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #FFFFFF;
line-height: 38px; line-height: 2.375rem;
background: url(../../assets/images/device/5.png) 0 0/cover no-repeat; background: url(../../assets/images/device/5.png) 0 0/cover no-repeat;
} }
.des { .des {
margin-top: 25px; margin-top: 25px;
font-size: 1rem; font-size: .98rem;
-webkit-line-clamp: inherit;
color: #333; color: #333;
line-height: 37px; line-height: 37px;
overflow: visible; overflow: visible;
} }
.pic { .pic {
width: 710px; width: 44.375rem;
height: 509px; height: auto;
border-top-left-radius: 20px; border-top-left-radius: 20px;
} }
} }
.intro { .intro {
position: relative; position: relative;
height: 794px; height: 42.625rem;
margin-bottom: 37px; margin-bottom: 2.3rem;
margin-top: 50rem;
width: 85%;
.bg { .bg {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 65%;
height: 35.73rem;
} }
.pic { .pic {
position: absolute; position: absolute;
top: 67px; top: 3.015rem;
left: 15%; left: 30%;
width: 74%; width: 71%;
height: 29.74rem;
} }
} }
.unit { .unit {
@ -139,9 +164,9 @@ export default {
padding-bottom: 60px; padding-bottom: 60px;
margin: 0 auto; margin: 0 auto;
h6 { h6 {
padding-left: 15px; padding-left: .93rem;
margin-bottom: 15px; margin-bottom: .93rem;
font-size: 1.1rem; font-size: .88rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #2A2A2A; color: #2A2A2A;
@ -315,44 +340,191 @@ export default {
@media (max-width: 320px) { @media (max-width: 320px) {
.banner{ .banner{
height: 13rem; height: 12rem;
padding: 6rem 0 0 8rem; padding: 6rem 0 0 2rem;
}
.share {
.card {
font-size: .9rem;
line-height: 1.1rem;
}
.textBox {
top:23.125rem !important;
.des {
line-height: 1.1rem;
}
}
}
.intro {
margin-top: 41rem;
.bg {
height: 10rem;
}
.pic {
height: auto;
}
} }
} }
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.banner{ .banner{
height: 15rem; height: 12rem;
padding: 8rem 0 0 10rem; padding: 6rem 0 0 2rem;
}
.share {
.card {
font-size: .9rem;
line-height: 1.1rem;
}
.textBox {
top:23.125rem !important;
.des {
line-height: 1.1rem;
}
} }
} }
.intro {
margin-top: 41rem;
.bg {
height: 13rem;
}
.pic {
height: auto;
}
}
}
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.banner{ .banner{
height: 17rem; height: 12rem;
padding: 10rem 0 0 14rem; padding: 6rem 0 0 2rem;
}
.share {
.card {
font-size: .9rem;
line-height: 1.1rem;
}
.textBox {
top:23.125rem !important;
.des {
line-height: 1.1rem;
}
}
}
.intro {
margin-top: 43rem;
.bg {
height: 16rem;
}
.pic {
height: auto;
}
} }
} }
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.banner{ .banner{
height: 19rem; height: 12rem;
padding: 12rem 0 0 22rem; padding: 6rem 0 0 2rem;
}
.share {
.card {
font-size: .9rem;
line-height: 1.1rem;
}
.textBox {
top:23.125rem !important;
.des {
line-height: 1.1rem;
}
}
}
.intro {
margin-top: 53rem;
.bg {
height: 22rem;
}
.pic {
height: auto;
}
} }
} }
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.banner{ .banner{
height: 19rem; height: 12rem;
padding: 12rem 0 0 22rem; padding: 6rem 0 0 2rem;
}
.share {
.card {
font-size: .9rem;
line-height: 1.1rem;
}
.textBox {
top:23.125rem !important;
.des {
line-height: 1.1rem;
}
}
}
.intro {
margin-top: 53rem;
.bg {
height: 26rem;
}
.pic {
height: auto;
}
} }
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.banner{ .banner{
height: 19rem; height: 12rem;
padding: 12rem 0 0 22rem; padding: 6rem 0 0 2rem;
}
.share {
.card {
font-size: .9rem;
line-height: 1.1rem;
}
.textBox {
top:23.125rem !important;
.des {
line-height: 1.1rem;
}
}
}
.intro {
margin-top: 63rem;
.bg {
height: 30rem;
}
.pic {
height: auto;
}
} }
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.banner{ .banner{
height: 19rem; height: 12rem;
padding: 12rem 0 0 22rem; padding: 6rem 0 0 2rem;
}
.share {
.card {
font-size: .9rem;
line-height: 1.1rem;
}
.textBox {
top:23.125rem !important;
.des {
line-height: 1.1rem;
}
}
}
.intro {
margin-top: 73rem;
.bg {
height: 35rem;
}
.pic {
height: auto;
}
} }
} }
</style> </style>

97
src/pages/deviceIntroLinear/index.vue
Unescape View File

@ -72,17 +72,31 @@ export default {
.banner { .banner {
background: url(../../assets/images/device/15.png) 0 0/100% 100% no-repeat; background: url(../../assets/images/device/15.png) 0 0/100% 100% no-repeat;
font-weight: bold; font-weight: bold;
height: 17.5rem;
padding: 10.68rem 0 0 16.15rem;
font-size: 2.16rem;
}
.block {
padding: 3.85rem 0;
.inner {
h2 {
font-size: 1.76rem;
}
.en {
font-size: 1.76rem;
margin: 0px 0 2rem;
}
}
} }
.history { .history {
.inner { .inner {
width: 90%; width: 1200px;
max-width: 1504px; max-width: 1504px;
} }
h2 { h2 {
position: relative; position: relative;
font-size: 2.2rem; font-size: 1.76rem;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #1c1c1c; color: #1c1c1c;
@ -99,7 +113,7 @@ export default {
.texts { .texts {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 82px 0 30px 38px; padding: 5.125rem 0 1.875rem 2.375rem;
margin-top: 20px; margin-top: 20px;
background: #1583ff; background: #1583ff;
border-radius: 65px 100px 0px 0px; border-radius: 65px 100px 0px 0px;
@ -157,7 +171,7 @@ export default {
.bg { .bg {
width: 50%; width: 50%;
margin: -142px -50px 0 0; margin: -8.875rem -3.125rem 0 0;
border-top-left-radius: 30px; border-top-left-radius: 30px;
} }
} }
@ -177,17 +191,17 @@ export default {
} }
h5 { h5 {
margin-bottom: 15px; margin-bottom: .93rem;
font-size: 1rem; font-size: .88rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #2a2a2a; color: #2a2a2a;
} }
h6 { h6 {
padding-left: 15px; padding-left: .93rem;
margin-bottom: 15px; margin-bottom: .93rem;
font-size: 1rem; font-size: .88rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #2a2a2a; color: #2a2a2a;
@ -257,44 +271,79 @@ export default {
} }
@media (max-width: 320px) { @media (max-width: 320px) {
.banner{ .banner{
height: 13rem; height: 12rem;
padding: 6rem 0 0 8rem; padding: 6rem 0 0 2rem;
}
.block {
.inner {
width: 100%;
}
} }
} }
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.banner{ .banner{
height: 13rem; height: 12rem;
padding: 8rem 0 0 10rem; padding: 6rem 0 0 2rem;
} }
.block {
.inner {
width: 100%;
} }
}
}
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.banner{ .banner{
height: 15rem; height: 12rem;
padding: 10rem 0 0 14rem; padding: 6rem 0 0 2rem;
}
.block {
.inner {
width: 100%;
}
} }
} }
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.banner{ .banner{
height: 17rem; height: 12rem;
padding: 12rem 0 0 22rem; padding: 6rem 0 0 2rem;
}
.block {
.inner {
width: 100%;
}
} }
} }
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.banner{ .banner{
height: 19rem; height: 12rem;
padding: 12rem 0 0 22rem; padding: 6rem 0 0 2rem;
}
.block {
.inner {
width: 100%;
}
} }
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.banner{ .banner{
height: 19rem; height: 12rem;
padding: 12rem 0 0 22rem; padding: 6rem 0 0 2rem;
}
.block {
.inner {
width: 100%;
}
} }
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.banner{ .banner{
height: 25rem; height: 12rem;
padding: 12rem 0 0 22rem; padding: 6rem 0 0 2rem;
}
.block {
.inner {
width: 100%;
}
} }
} }
</style> </style>

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

@ -88,17 +88,37 @@ export default {
.wrap{ .wrap{
/deep/ .el-carousel { /deep/ .el-carousel {
height: 30rem; height: 21.6rem;
.el-carousel__container{ .el-carousel__container{
height: 30rem; height: 21.6rem;
} }
img{ img{
height: 30rem; height: 21.6rem;
} }
} }
} }
.banner-item {
.banner-name {
font-size: 2.16rem;
}
}
.block {
padding: 3.15rem 0;
.inner {
.b-title {
font-size: 2.25rem;
margin-bottom: 2.25rem;
}
.intro {
margin-bottom: 2.25rem;
}
}
}
.block-pic { .block-pic {
transition: .3s; transition: .3s;
height: auto;
&.br { &.br {
border-radius: 270px; border-radius: 270px;
} }
@ -118,16 +138,15 @@ export default {
} }
} }
.pic { .pic {
width: 662px; width: 45%;
height: 753px; height: auto;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 120px; top: 7.59rem;
left: 44%; left: 40%;
width: 60%; width: 60%;
height: 455px; padding: 2.7rem 1.35rem ;
padding: 60px 30px 30px 100px;
background-color: #fff; background-color: #fff;
overflow: hidden; overflow: hidden;
transition: .3s; transition: .3s;
@ -136,15 +155,17 @@ export default {
} }
} }
h6 { h6 {
font-size: 2.4rem; font-size: 1.8rem;
color: #3C3C3C; color: #3C3C3C;
} }
.sub { .sub {
font-size: 1.2rem; margin-top: 1.48rem;
font-size: 1.08rem;
color: #1C1C1C; color: #1C1C1C;
line-height: 33px; line-height: 33px;
} }
.des { .des {
margin-top: 1.2rem;
font-size: 1rem; font-size: 1rem;
color: #3C3C3C; color: #3C3C3C;
line-height: 32px; line-height: 32px;
@ -215,38 +236,42 @@ export default {
@media (max-width: 320px) { @media (max-width: 320px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 13rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 13rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 13rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 13rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1rem; font-size: 1rem;
line-height: 1.5rem; line-height: 1.5rem;
left: 3rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
padding: 1.25rem 0; padding: 1.25rem 0;
.inner { .inner {
.intro {
margin-bottom: 1rem;
}
.b-title { .b-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.block-pic { .block-pic {
height: 13rem; height: auto;
} }
.list { .list {
.wow { .wow {
.pic { .pic {
height: 13rem; height: auto;
} }
.texts { .texts {
h6 { h6 {
@ -272,52 +297,57 @@ export default {
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 15rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 15rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 15rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 15rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1rem; font-size: 1rem;
line-height: 1.5rem; line-height: 1.5rem;
left: 3rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
padding: 1.25rem 0; padding: 1.25rem 0;
.inner { .inner {
.intro {
margin-bottom: 1rem;
}
.b-title { .b-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.block-pic { .block-pic {
height: 15rem; height: auto;
} }
.list { .list {
.wow { .wow {
.pic { .pic {
height: 15rem; height: auto;
} }
.texts { .texts {
top: 5rem;
h6 { h6 {
font-size: 1.5rem; font-size: 1.5rem;
} }
.sub { .sub {
font-size: 1.2rem; font-size: 1.05rem;
line-height: 1.2rem; line-height: 1.05rem;
margin-top: .8rem; margin-top: .5rem;
} }
.des { .des {
font-size: 1.2rem; font-size: 1.05rem;
line-height: 1.2rem; line-height: 1.05rem;
margin-top: .8rem; margin-top: .5rem;
} }
} }
@ -329,38 +359,59 @@ export default {
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 20rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 20rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 20rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 20rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1rem;
line-height: 1.5rem; line-height: 1.5rem;
left: 3rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
padding: 1.25rem 0; padding: 1.25rem 0;
.inner { .inner {
.intro {
margin-bottom: 1rem;
}
.b-title { .b-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.block-pic { .block-pic {
height: 18rem; height: auto;
} }
.list { .list {
.wow { .wow {
.pic { .pic {
height: 20rem; height: auto;
}
.texts {
top: 5rem;
h6 {
font-size: 1.8rem;
}
.sub {
font-size: 1.25rem;
line-height: 1.25rem;
margin-top: .5rem;
}
.des {
font-size: 1.25rem;
line-height: 1.25rem;
margin-top: .5rem;
}
} }
} }
} }
@ -370,38 +421,60 @@ export default {
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 25rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 25rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 25rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 25rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 2.5rem; font-size: 1rem;
line-height: 2.5rem; line-height: 1.5rem;
left: 3rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
padding: 1.25rem 0; padding: 1.25rem 0;
.inner { .inner {
.intro {
margin-bottom: 1rem;
}
.b-title { .b-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.block-pic { .block-pic {
height: 22rem; height: auto;
} }
.list { .list {
.wow { .wow {
.pic { .pic {
height: 22rem; height: auto;
}
.texts {
top: 5rem;
padding: 2rem;
h6 {
font-size: 2rem;
}
.sub {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: .5rem;
}
.des {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: .5rem;
}
} }
} }
} }
@ -411,38 +484,62 @@ export default {
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 28rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 28rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 28rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 28rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 2.5rem; font-size: 1rem;
line-height: 1.5rem; line-height: 1.5rem;
left: 3rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
padding: 1.25rem 0; padding: 1.25rem 0;
.inner { .inner {
.intro {
margin-bottom: 1rem;
}
.b-title { .b-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.block-pic { .block-pic {
height: 25rem; height: auto;
} }
.list { .list {
.wow { .wow {
.pic { .pic {
height: 22rem; width: 50%;
height: auto;
}
.texts {
top: 2rem;
left: 30%;
padding: 1.5rem;
h6 {
font-size: 2rem;
}
.sub {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: .5rem;
}
.des {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: .5rem;
}
} }
} }
} }
@ -452,38 +549,62 @@ export default {
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 32rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 32rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 32rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 32rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 2.5rem; font-size: 1rem;
line-height: 1.5rem; line-height: 1.5rem;
left: 3rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
padding: 1.25rem 0; padding: 1.25rem 0;
.inner { .inner {
.intro {
margin-bottom: 1rem;
}
.b-title { .b-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.block-pic { .block-pic {
height: 28rem; height: auto;
} }
.list { .list {
.wow { .wow {
.pic { .pic {
height: 22rem; width: 50%;
height: auto;
}
.texts {
top: 5rem;
left: 30%;
padding: 1.5rem;
h6 {
font-size: 2rem;
}
.sub {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: .5rem;
}
.des {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: .5rem;
}
} }
} }
} }
@ -493,38 +614,62 @@ export default {
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 35rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 35rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 35rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 35rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 2.5rem; font-size: 1rem;
line-height: 1.5rem; line-height: 1.5rem;
left: 3rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
padding: 1.25rem 0; padding: 1.25rem 0;
.inner { .inner {
.intro {
margin-bottom: 1rem;
}
.b-title { .b-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.block-pic { .block-pic {
height: 32rem; height: auto;
} }
.list { .list {
.wow { .wow {
.pic { .pic {
height: 28rem; width: 50%;
height: auto;
}
.texts {
top: 5rem;
left: 30%;
padding: 1.5rem;
h6 {
font-size: 2rem;
}
.sub {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: .5rem;
}
.des {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: .5rem;
}
} }
} }
} }

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

@ -95,12 +95,31 @@ export default {
@import "../../styles/page/page.scss"; @import "../../styles/page/page.scss";
.wrap{ .wrap{
/deep/ .el-carousel { /deep/ .el-carousel {
height: 30rem; height: 12.6rem;
.el-carousel__container{ .el-carousel__container{
height: 30rem; height: 12.6rem;
} }
img{ img{
height: 30rem; height: 12.6rem;
}
}
}
.banner-item {
.banner-name {
font-size: 2.16rem;
left: 17%;
bottom: 20%;
}
}
.block {
padding: 3.85rem 0;
.inner {
h6 {
font-size: 1.76rem;
}
.en {
font-size: 1.76rem;
margin: 0px 0 2rem;
} }
} }
} }
@ -121,25 +140,26 @@ export default {
line-height: 1; line-height: 1;
} }
.pic { .pic {
width: 80%; width: 64%;
height: 500px; height: auto;
margin: 0 auto; margin: 0 auto;
} }
.des { .des {
margin-top: 55px; margin-top: 2.75rem;
font-size: 1rem; font-size: .98rem;
color: #333; color: #333;
line-height: 34px; line-height: 1.7rem;
overflow: visible;
} }
} }
.list { .list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 30px; margin-top: 1.5rem;
width: 1200px;
margin: auto;
li { li {
position: relative; position: relative;
height: 542px; height: 20.1rem;
overflow: hidden; overflow: hidden;
&:hover { &:hover {
img { img {
@ -156,7 +176,7 @@ export default {
position: absolute; position: absolute;
top: 192px; top: 192px;
left: 60px; left: 60px;
font-size: 1.4rem; font-size: 1.12rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
@ -177,27 +197,8 @@ export default {
width: 28%; width: 28%;
} }
} }
@media (max-width: 1200px) {
body{ @media (min-width: 280px) and (max-width: 768px) {
width: 100% !important;
}
.block {
.inner{
.des{
-webkit-line-clamp: inherit
}
}
}
.list {
display: block;
li {
width: 80% !important;
height: 400px;
margin: 10px auto;
}
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.wrap{ .wrap{
/deep/ .el-carousel { /deep/ .el-carousel {
height: 15rem; height: 15rem;
@ -240,8 +241,7 @@ export default {
height: 13rem !important; height: 13rem !important;
} }
.banner-name { .banner-name {
left: 11rem; padding: 7rem 0 0 1rem;
top: 8rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
@ -252,14 +252,17 @@ export default {
.text-center { .text-center {
.pic { .pic {
width: 100%; width: 100%;
height: 13rem; height: auto;
} }
} }
} }
} }
.list { .list {
width: 80%;
margin: 0 auto;
li { li {
margin-top: 1rem;
width: 100% !important; width: 100% !important;
} }
} }
@ -267,22 +270,21 @@ export default {
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.wrap { .wrap {
/deep/ .el-carousel { /deep/ .el-carousel {
height: 15rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 15rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 15rem !important; height: 13rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 15rem !important; height: 13rem !important;
} }
.banner-name { .banner-name {
left: 10rem; padding: 7rem 0 0 1rem;
top: 10rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
@ -293,37 +295,39 @@ export default {
.text-center { .text-center {
.pic { .pic {
width: 100%; width: 100%;
height: 13rem; height: auto;
} }
} }
} }
} }
.list { .list {
width: 80%;
margin: 0 auto;
li { li {
margin-top: 1rem;
width: 100% !important; width: 100% !important;
} }
} }
} }
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.wrap { .wrap {
/deep/ .el-carousel { /deep/ .el-carousel {
height: 20rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 20rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 20rem !important; height: 13rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 20rem !important; height: 13rem !important;
} }
.banner-name { .banner-name {
left: 15rem; padding: 7rem 0 0 1rem;
top: 13rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
@ -334,14 +338,17 @@ export default {
.text-center { .text-center {
.pic { .pic {
width: 100%; width: 100%;
height: 18rem; height: auto;
} }
} }
} }
} }
.list { .list {
width: 80%;
margin: 0 auto;
li { li {
margin-top: 1rem;
width: 100% !important; width: 100% !important;
} }
} }
@ -349,22 +356,21 @@ export default {
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.wrap { .wrap {
/deep/ .el-carousel { /deep/ .el-carousel {
height: 25rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 25rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 25rem !important; height: 13rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 25rem !important; height: 13rem !important;
} }
.banner-name { .banner-name {
left: 22rem; padding: 7rem 0 0 1rem;
top: 15rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
@ -375,14 +381,17 @@ export default {
.text-center { .text-center {
.pic { .pic {
width: 100%; width: 100%;
height: 22rem; height: auto;
} }
} }
} }
} }
.list { .list {
width: 80%;
margin: 0 auto;
li { li {
margin-top: 1rem;
width: 100% !important; width: 100% !important;
} }
} }
@ -390,22 +399,21 @@ export default {
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.wrap { .wrap {
/deep/ .el-carousel { /deep/ .el-carousel {
height: 25rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 25rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 25rem !important; height: 13rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 25rem !important; height: 13rem !important;
} }
.banner-name { .banner-name {
left: 22rem; padding: 7rem 0 0 1rem;
top: 15rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
@ -416,14 +424,17 @@ export default {
.text-center { .text-center {
.pic { .pic {
width: 100%; width: 100%;
height: 22rem; height: auto;
} }
} }
} }
} }
.list { .list {
width: 80%;
margin: 0 auto;
li { li {
margin-top: 1rem;
width: 100% !important; width: 100% !important;
} }
} }
@ -431,23 +442,22 @@ export default {
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.wrap { .wrap {
/deep/ .el-carousel { /deep/ .el-carousel {
height: 28rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 28rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 28rem !important; height: 13rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 28rem !important; height: 13rem !important;
} }
.banner-name { .banner-name {
left: 34rem; padding: 7rem 0 0 1rem;
top: 22rem; font-size: 1.5rem;
font-size: 2.5rem;
} }
} }
.block { .block {
@ -457,38 +467,42 @@ export default {
.text-center { .text-center {
.pic { .pic {
width: 100%; width: 100%;
height: 25rem; height: auto;
} }
} }
} }
} }
.list { .list {
display: flex;
width: 100%;
li { li {
width: 100% !important; width: 25% ;
} }
} }
.item3 {
width: 50% !important;
}
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.wrap { .wrap {
/deep/ .el-carousel { /deep/ .el-carousel {
height: 32rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 32rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 32rem !important; height: 13rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 32rem !important; height: 13rem !important;
} }
.banner-name { .banner-name {
left: 39rem; padding: 7rem 0 0 1rem;
top: 22rem; font-size: 1.5rem;
font-size: 2.5rem;
} }
} }
.block { .block {
@ -498,11 +512,21 @@ export default {
.text-center { .text-center {
.pic { .pic {
width: 100%; width: 100%;
height: 32rem; height: auto;
} }
} }
} }
} }
.list {
display: flex;
width: 100%;
li {
width: 25% ;
}
}
.item3 {
width: 50% !important;
}
} }
</style> </style>

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

@ -177,15 +177,24 @@ export default {
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss"; @import "../../styles/page/page.scss";
.carousel{ .carousel{
height: 59.93rem; height: 76.93rem;
img{ img{
height: 100%; height: 100%;
} }
/deep/.el-carousel__container{ /deep/.el-carousel__container{
height: 59.93rem ; height: 76.93rem;
}
}
.block {
padding-top: 3.15rem;
.b-title {
font-size: 2.25rem;
}
.intro {
font-size: 1.35rem;
margin-bottom: 3.6rem;
} }
} }
.card { .card {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -198,20 +207,20 @@ export default {
} }
.pic { .pic {
width: 100%; width: 100%;
height: 25rem; height: auto;
} }
.texts { .texts {
padding-left: 1.375rem; padding-left: 1.375rem;
margin-top: 3.75rem; margin-top: 3rem;
border-left: 2px solid #DFE4E9; border-left: 2px solid #DFE4E9;
} }
h6 { h6 {
margin-bottom: 1.56rem; margin-bottom: 1.56rem;
font-size: 1.71rem; font-size: 1.368rem;
color: #333; color: #333;
} }
.des { .des {
font-size: 1.28rem; font-size: 1.024rem;
color: #222; color: #222;
line-height: 30px; line-height: 30px;
} }
@ -288,20 +297,20 @@ export default {
} }
.pic { .pic {
width: 47%; width: 47%;
height: 29.06rem; height: auto;
transition: .3s; transition: .3s;
} }
.texts { .texts {
width: 48%; width: 48%;
padding-top: 9.375rem; padding-top: 8.5rem;
transition: .3s; transition: .3s;
} }
h6 { h6 {
font-size: 2.75rem; font-size: 1.8rem;
} }
.des { .des {
margin: 20px 0 10px; margin: 20px 0 10px;
font-size: 1.28rem; font-size: 1.2rem;
color: #020202; color: #020202;
line-height: 30px; line-height: 30px;
} }
@ -331,17 +340,18 @@ export default {
.num { .num {
margin-bottom: 10px; margin-bottom: 10px;
font-family: toppan; font-family: toppan;
font-size: 4.28rem; font-size: 2.7rem;
font-weight: 800; font-weight: 800;
color: #035CE1; color: #035CE1;
line-height: 49px; line-height: 49px;
} }
.text { .text {
font-size: 1.71rem; font-size: 1.08rem;
margin-top: 1rem;
} }
} }
.about { .about {
padding: 4.81rem 0 12.375rem; padding: 3.848rem 0 9.9rem;
background: url(../../assets/images/about-bg.png) no-repeat center center; background: url(../../assets/images/about-bg.png) no-repeat center center;
background-size: 100% 100%; background-size: 100% 100%;
.line { .line {
@ -358,14 +368,14 @@ export default {
} }
} }
.text { .text {
font-size: 2.14rem; font-size: 1.35rem;
color: #fff; color: #fff;
} }
.des { .des {
display: block; display: block;
padding: 2.375rem 3.75rem; padding: 2.375rem 3.75rem;
margin-top: 5.25rem; margin-top: 3.78rem;
font-size: 2rem; font-size: 1.35rem;
color: #fff; color: #fff;
line-height: 42px; line-height: 42px;
text-align: center; text-align: center;
@ -519,15 +529,31 @@ export default {
} }
} }
.block { .block {
padding: 1rem 0;
.inner { .inner {
.b-title {
font-size: 1.3rem;
}
.intro {
margin-bottom: 1rem;
font-size: .95rem;
line-height: 1rem;
}
.card { .card {
li { li {
.pic { .pic {
height: 13rem; height: auto;
} }
.texts { .texts {
margin-top: 1.2rem; margin-top: 1.2rem;
h6{
font-size: 1.2rem;
margin-bottom: 1rem;
}
img {
width: 3.77rem;
height: 3.77rem;
}
} }
} }
} }
@ -542,36 +568,54 @@ export default {
.people { .people {
li { li {
.pic { .pic {
height: 13rem; height: auto;
} }
.texts {
h6 {
font-size: 1.5rem;
} }
} }
} }
} }
}
}
.about {
.inner {
.des {
line-height: 1.2rem;
}
}
}
} }
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 18rem; height: 15rem;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 18rem; height: 15rem;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 18rem; height: 15rem;
img{ img{
height: 18rem; height: 15rem;
} }
} }
} }
.block { .block {
padding: 1rem 0;
.inner { .inner {
.intro {
margin-bottom: 1rem;
font-size: .95rem;
line-height: 1rem;
}
.card { .card {
li { li {
.pic { .pic {
height: 13rem; height: auto;
} }
.texts { .texts {
margin-top: 1.2rem; margin-top: 1.2rem;
@ -590,36 +634,48 @@ export default {
.people { .people {
li { li {
.pic { .pic {
height: 15rem; height: auto;
} }
} }
} }
} }
} }
.about {
.inner {
.des {
line-height: 1.5rem;
}
}
}
} }
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 20rem; height: 15rem;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 20rem; height: 15rem;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 20rem; height: 15rem;
img{ img{
height: 20rem; height: 15rem;
} }
} }
} }
.block { .block {
padding: 1rem 0;
.inner { .inner {
.intro {
margin-bottom: 1rem;
font-size: .95rem;
line-height: 1rem;
}
.card { .card {
li { li {
.pic { .pic {
height: 13rem; height: auto;
} }
.texts { .texts {
margin-top: 1.2rem; margin-top: 1.2rem;
@ -638,36 +694,48 @@ export default {
.people { .people {
li { li {
.pic { .pic {
height: 15rem; height: auto;
} }
} }
} }
} }
} }
.about {
.inner {
.des {
line-height: 1.5rem;
}
}
}
} }
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 20rem; height: 18rem;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 20rem; height: 18rem;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 20rem; height: 18rem;
img{ img{
height: 20rem; height: 18rem;
} }
} }
} }
.block { .block {
padding: 1rem 0;
.inner { .inner {
.intro {
margin-bottom: 1rem;
font-size: .95rem;
line-height: 1rem;
}
.card { .card {
li { li {
.pic { .pic {
height: 18rem; height: auto;
} }
.texts { .texts {
margin-top: 1.2rem; margin-top: 1.2rem;
@ -679,43 +747,53 @@ export default {
li { li {
padding: 1.2rem; padding: 1.2rem;
img{ img{
width: 10rem; width: 8rem;
} }
} }
} }
.people { .people {
li { li {
.pic { .pic {
height: 20rem; height: auto;
} }
} }
} }
.about {
.des {
line-height: 1.5rem;
}
}
} }
} }
} }
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 25rem; height: 20rem;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 25rem; height: 20rem;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 25rem; height: 20rem;
img{ img{
height: 25rem; height: 20rem;
} }
} }
} }
.block { .block {
padding: 1rem 0;
.inner { .inner {
.intro {
margin-bottom: 1rem;
font-size: .95rem;
line-height: 1rem;
}
.card { .card {
li { li {
.pic { .pic {
height: 22rem; height: auto;
} }
.texts { .texts {
margin-top: 1.2rem; margin-top: 1.2rem;
@ -727,43 +805,62 @@ export default {
li { li {
padding: 1.2rem; padding: 1.2rem;
img{ img{
width: 10rem; width: 8rem;
} }
} }
} }
.people { .people {
li { li {
.pic { .pic {
height: 25rem; height: auto;
} }
} }
} }
.about {
.des {
line-height: 1.2rem;
}
}
.stat {
flex-direction: row;
li {
width: 30%;
}
}
} }
} }
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 27rem; height: 22rem;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 27rem; height: 22rem;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 27rem; height: 22rem;
img{ img{
height: 27rem; height: 22rem;
} }
} }
} }
.block { .block {
padding: 1rem 0;
.inner { .inner {
.intro {
margin-bottom: 1rem;
font-size: .95rem;
line-height: 1rem;
}
.card { .card {
flex-direction: row;
li { li {
width: 47%;
.pic { .pic {
height: 22rem; height: auto;
} }
.texts { .texts {
margin-top: 1.2rem; margin-top: 1.2rem;
@ -775,42 +872,70 @@ export default {
li { li {
padding: 1.2rem; padding: 1.2rem;
img{ img{
width: 10rem; width: 8rem;
} }
} }
} }
.people { .people {
li { li {
flex-direction: row;
&:nth-child(2) {
flex-direction: row-reverse !important;
}
.pic { .pic {
height: 30rem; width: 47%;
height: auto;
}
.texts {
width: 48%;
} }
} }
} }
.about {
.des {
line-height: 1.2rem;
}
}
.stat {
flex-direction: row;
li {
width: 30%;
}
}
} }
} }
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 30rem; height: 25rem;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 30rem; height: 25rem;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 30rem; height: 25rem;
img{ img{
height: 30rem; height: 25rem;
} }
} }
} }
.block { .block {
padding: 1rem 0;
.inner { .inner {
.intro {
margin-bottom: 1rem;
font-size: .95rem;
line-height: 1rem;
}
.card { .card {
flex-direction: row;
li { li {
width: 47%;
.pic { .pic {
height: 28rem; height: auto;
} }
.texts { .texts {
margin-top: 1.2rem; margin-top: 1.2rem;
@ -822,15 +947,33 @@ export default {
li { li {
padding: 1.2rem; padding: 1.2rem;
img{ img{
width: 10rem; width: 8rem;
} }
} }
} }
.people { .people {
li { li {
flex-direction: row;
&:nth-child(2) {
flex-direction: row-reverse !important;
}
.pic { .pic {
height: 35rem; width: 47%;
height: auto;
} }
.texts {
width: 48%;
}
}
}
.about {
.des {
}
}
.stat {
flex-direction: row;
li {
width: 30%;
} }
} }
} }

543
src/pages/news/index.vue
View File

File diff suppressed because it is too large Load Diff

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

@ -102,67 +102,78 @@ export default {
@import "../../styles/page/page.scss"; @import "../../styles/page/page.scss";
.wrap{ .wrap{
/deep/ .el-carousel { /deep/ .el-carousel {
height: 30rem; height: 24rem;
.el-carousel__container{ .el-carousel__container{
height: 30rem; height: 24rem;
} }
img{ img{
height: 30rem; height: 24rem;
} }
} }
} }
.banner-item {
.banner-name {
font-size: 1.6rem;
}
}
.block {
padding: 3.85rem 0;
}
.inner { .inner {
/deep/ .el-breadcrumb__item {
font-size: 1.5rem;
}
padding-top: 35px; padding-top: 35px;
} }
.list { .list {
margin: 40px 0; margin: 2rem 0;
li { li {
position: relative; position: relative;
&:nth-child(even) { &:nth-child(even) {
text-align: right; text-align: right;
.texts { .texts {
left: 0; left: 0;
padding: 60px 120px 30px 30px; padding: 3rem 6rem 1.5rem 1.5rem;
text-align: left; text-align: left;
} }
} }
} }
.pic { .pic {
width: 47%; width: 47%;
height: 730px; height: auto;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 120px; top: 6rem;
right: -40px; right: -2rem;
width: 61%; width: 61%;
height: 440px; // height: 440px;
padding: 60px 30px 30px 100px; padding: 3rem 1.5rem 1.5rem 5rem;
background: rgba(247, 247, 247, .72); background: rgba(247, 247, 247, .72);
transition: .3s;
&:hover {
transform: scale(1.05);
}
} }
h6 { h6 {
font-size: 40px; font-size: 2rem;
font-family: SFProDisplay-Bold, SFProDisplay; font-family: SFProDisplay-Bold, SFProDisplay;
font-weight: bold; font-weight: bold;
color: #3C3C3C; color: #3C3C3C;
} }
.sub { .sub {
margin: 20px 0; margin: 1rem 0;
font-size: 24px; font-size: 1.2rem;
font-weight: 600; font-weight: 600;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
color: #1C1C1C; color: #1C1C1C;
line-height: 33px; line-height: 33px;
} }
.des { .des {
margin-bottom: 20px; margin-bottom: 1rem;
font-size: 20px; font-size: 1rem;
color: #3C3C3C; color: #3C3C3C;
line-height: 32px; line-height: 1.6rem;
}
img {
width: 3.3rem;
height: 3.3rem;
} }
} }
@media (max-width: 1520px) { @media (max-width: 1520px) {
@ -259,30 +270,35 @@ export default {
@media (max-width: 320px) { @media (max-width: 320px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 13rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 13rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 13rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 13rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.inner { .inner {
/deep/ .el-breadcrumb__item {
font-size: 1rem;
}
.list { .list {
li { li {
.pic { .pic {
height: 15rem !important; height: auto !important;
} }
.texts { .texts {
top: 1rem; top: 1rem;
@ -307,42 +323,46 @@ export default {
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 15rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 15rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 15rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 15rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.inner { .inner {
/deep/ .el-breadcrumb__item {
font-size: 1rem;
}
.list { .list {
li { li {
.pic { .pic {
height: 15rem !important; height: auto !important;
} }
.texts { .texts {
top: 1rem; top: 4rem;
h6 { h6 {
font-size: 1rem !important; font-size: 1.5rem !important;
} }
.sub{ .sub{
font-size: .85rem; font-size: 1.2rem;
} }
.des { .des {
font-size: .85rem; font-size: 1rem;
line-height: .85rem; line-height: 1rem;
} }
img { img {
width: 2rem;height: 2rem; width: 2rem;height: 2rem;
@ -355,42 +375,46 @@ export default {
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 18rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 18rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 18rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 18rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.inner { .inner {
/deep/ .el-breadcrumb__item {
font-size: 1rem;
}
.list { .list {
li { li {
.pic { .pic {
height: 18rem !important; height: auto !important;
} }
.texts { .texts {
top: 2.5rem; top: 4rem;
h6 { h6 {
font-size: 1rem !important; font-size: 1.5rem !important;
} }
.sub{ .sub{
font-size: .85rem; font-size: 1.2rem;
} }
.des { .des {
font-size: .85rem; font-size: 1rem;
line-height: .85rem; line-height: 1rem;
} }
img { img {
width: 2rem;height: 2rem; width: 2rem;height: 2rem;
@ -403,45 +427,50 @@ export default {
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 22rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 22rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 22rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 22rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.inner { .inner {
/deep/ .el-breadcrumb__item {
font-size: 1rem;
}
.list { .list {
li { li {
.pic { .pic {
height: 22rem !important; width: 47%;
height: auto !important;
} }
.texts { .texts {
top: 2.5rem; top: 2rem;
h6 { h6 {
font-size: 1.8rem !important; font-size: 1.5rem !important;
} }
.sub{ .sub{
font-size: 1.3rem; font-size: 1.2rem;
} }
.des { .des {
font-size: 1.3rem; font-size: 1rem;
line-height: 1.3rem; line-height: 1rem;
} }
img { img {
width: 4rem;height: 4rem; width: 2rem;height: 2rem;
} }
} }
} }
@ -451,45 +480,47 @@ export default {
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 28rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 28rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 28rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 28rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.inner { .inner {
.list { .list {
li { li {
.pic { .pic {
height: 28rem !important; width: 47%;
height: auto !important;
} }
.texts { .texts {
top: 3rem; top: 4rem;
h6 { h6 {
font-size: 2rem !important; font-size: 2rem !important;
} }
.sub{ .sub{
font-size: 1.3rem; font-size: 1.5rem;
} }
.des { .des {
font-size: 1.8rem; font-size: 1.3rem;
line-height: 1.8rem; line-height: 1.3rem;
} }
img { img {
width: 5rem;height: 5rem; width: 2rem;height: 2rem;
} }
} }
} }
@ -499,32 +530,48 @@ export default {
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 32rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 32rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 32rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 32rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.inner { .inner {
.list { .list {
li { li {
.pic { .pic {
height: 32rem !important; width: 47%;
height: auto !important;
} }
.texts { .texts {
top: 6rem;
h6 {
font-size: 2rem !important;
}
.sub{
font-size: 1.5rem;
}
.des {
font-size: 1.3rem;
line-height: 1.3rem;
}
img {
width: 2rem;height: 2rem;
}
} }
} }
} }
@ -533,30 +580,48 @@ export default {
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 35rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 35rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 35rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 35rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.inner { .inner {
.list { .list {
li { li {
.pic { .pic {
height: 35rem !important; width: 47%;
height: auto !important;
}
.texts {
top: 8rem;
h6 {
font-size: 2rem !important;
}
.sub{
font-size: 1.5rem;
}
.des {
font-size: 1.3rem;
line-height: 1.3rem;
}
img {
width: 2rem;height: 2rem;
}
} }
} }
} }

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

@ -102,63 +102,78 @@ export default {
@import "../../styles/page/page.scss"; @import "../../styles/page/page.scss";
.wrap{ .wrap{
/deep/ .el-carousel { /deep/ .el-carousel {
height: 30rem; height: 24rem;
.el-carousel__container{ .el-carousel__container{
height: 30rem; height: 24rem;
} }
img{ img{
height: 30rem; height: 24rem;
} }
} }
} }
.banner-item {
.banner-name {
font-size: 1.6rem;
}
}
.block {
padding: 3.85rem 0;
}
.inner { .inner {
padding-top: 35px; padding-top: 35px;
/deep/ .el-breadcrumb__item {
font-size: 1.5rem;
}
} }
.list { .list {
margin: 40px 0; margin: 2rem 0;
li { li {
position: relative; position: relative;
&:nth-child(even) { &:nth-child(even) {
text-align: right; text-align: right;
.texts { .texts {
left: 0; left: 0;
padding: 60px 120px 30px 30px; padding: 3rem 6rem 1.5rem 1.5rem;
text-align: left; text-align: left;
} }
} }
} }
.pic { .pic {
width: 47%; width: 47%;
height: 730px; height: auto;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 120px; top: 6rem;
right: -40px; right: -2rem;
width: 61%; width: 61%;
height: 440px; // height: 440px;
padding: 60px 30px 30px 100px; padding: 3rem 1.5rem 1.5rem 5rem;
background: rgba(247, 247, 247, .72); background: rgba(247, 247, 247, .72);
} }
h6 { h6 {
font-size: 40px; font-size: 2rem;
font-family: SFProDisplay-Bold, SFProDisplay; font-family: SFProDisplay-Bold, SFProDisplay;
font-weight: bold; font-weight: bold;
color: #3C3C3C; color: #3C3C3C;
} }
.sub { .sub {
margin: 20px 0; margin: 1rem 0;
font-size: 24px; font-size: 1.2rem;
font-weight: 600; font-weight: 600;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
color: #1C1C1C; color: #1C1C1C;
line-height: 33px; line-height: 33px;
} }
.des { .des {
margin-bottom: 20px; margin-bottom: 1rem;
font-size: 20px; font-size: 1rem;
color: #3C3C3C; color: #3C3C3C;
line-height: 32px; line-height: 1.6rem;
}
img {
width: 3.3rem;
height: 3.3rem;
} }
} }
@media (max-width: 1520px) { @media (max-width: 1520px) {
@ -256,30 +271,35 @@ export default {
@media (max-width: 320px) { @media (max-width: 320px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 13rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 13rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 13rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 13rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.inner { .inner {
/deep/ .el-breadcrumb__item {
font-size: 1rem;
}
.list { .list {
li { li {
.pic { .pic {
height: 15rem !important; height: auto !important;
} }
.texts { .texts {
top: 1rem; top: 1rem;
@ -304,42 +324,46 @@ export default {
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 15rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 15rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 15rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 15rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.inner { .inner {
/deep/ .el-breadcrumb__item {
font-size: 1rem;
}
.list { .list {
li { li {
.pic { .pic {
height: 15rem !important; height: auto !important;
} }
.texts { .texts {
top: 1rem; top: 4rem;
h6 { h6 {
font-size: 1rem !important; font-size: 1.5rem !important;
} }
.sub{ .sub{
font-size: .85rem; font-size: 1.2rem;
} }
.des { .des {
font-size: .85rem; font-size: 1rem;
line-height: .85rem; line-height: 1rem;
} }
img { img {
width: 2rem;height: 2rem; width: 2rem;height: 2rem;
@ -352,42 +376,46 @@ export default {
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 18rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 18rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 18rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 18rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.inner { .inner {
/deep/ .el-breadcrumb__item {
font-size: 1rem;
}
.list { .list {
li { li {
.pic { .pic {
height: 18rem !important; height: auto !important;
} }
.texts { .texts {
top: 2.5rem; top: 4rem;
h6 { h6 {
font-size: 1rem !important; font-size: 1.5rem !important;
} }
.sub{ .sub{
font-size: .85rem; font-size: 1.2rem;
} }
.des { .des {
font-size: .85rem; font-size: 1rem;
line-height: .85rem; line-height: 1rem;
} }
img { img {
width: 2rem;height: 2rem; width: 2rem;height: 2rem;
@ -400,45 +428,50 @@ export default {
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 22rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 22rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 22rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 22rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.inner { .inner {
/deep/ .el-breadcrumb__item {
font-size: 1rem;
}
.list { .list {
li { li {
.pic { .pic {
height: 22rem !important; width: 47%;
height: auto !important;
} }
.texts { .texts {
top: 2.5rem; top: 2rem;
h6 { h6 {
font-size: 1.8rem !important; font-size: 1.5rem !important;
} }
.sub{ .sub{
font-size: 1.3rem; font-size: 1.2rem;
} }
.des { .des {
font-size: 1.3rem; font-size: 1rem;
line-height: 1.3rem; line-height: 1rem;
} }
img { img {
width: 4rem;height: 4rem; width: 2rem;height: 2rem;
} }
} }
} }
@ -448,45 +481,47 @@ export default {
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 28rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 28rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 28rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 28rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.inner { .inner {
.list { .list {
li { li {
.pic { .pic {
height: 28rem !important; width: 47%;
height: auto !important;
} }
.texts { .texts {
top: 3rem; top: 4rem;
h6 { h6 {
font-size: 2rem !important; font-size: 2rem !important;
} }
.sub{ .sub{
font-size: 1.3rem; font-size: 1.5rem;
} }
.des { .des {
font-size: 1.8rem; font-size: 1.3rem;
line-height: 1.8rem; line-height: 1.3rem;
} }
img { img {
width: 5rem;height: 5rem; width: 2rem;height: 2rem;
} }
} }
} }
@ -496,32 +531,48 @@ export default {
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 32rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 32rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 32rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 32rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.inner { .inner {
.list { .list {
li { li {
.pic { .pic {
height: 32rem !important; width: 47%;
height: auto !important;
} }
.texts { .texts {
top: 6rem;
h6 {
font-size: 2rem !important;
}
.sub{
font-size: 1.5rem;
}
.des {
font-size: 1.3rem;
line-height: 1.3rem;
}
img {
width: 2rem;height: 2rem;
}
} }
} }
} }
@ -530,30 +581,48 @@ export default {
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 35rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 35rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 35rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 35rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.inner { .inner {
.list { .list {
li { li {
.pic { .pic {
height: 35rem !important; width: 47%;
height: auto !important;
}
.texts {
top: 8rem;
h6 {
font-size: 2rem !important;
}
.sub{
font-size: 1.5rem;
}
.des {
font-size: 1.3rem;
line-height: 1.3rem;
}
img {
width: 2rem;height: 2rem;
}
} }
} }
} }

182
src/pages/overviewDevHistory/index.vue
Unescape View File

@ -75,14 +75,26 @@ export default {
background: url(http://10.10.11.7/images/overviewDevHistory/1.png) (right 505px)/auto no-repeat, background: url(http://10.10.11.7/images/overviewDevHistory/1.png) (right 505px)/auto no-repeat,
url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom)/auto no-repeat; url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom)/auto no-repeat;
} }
.single-banner {
.banner-img {
height: 24rem;
}
.texts {
top: auto !important;
bottom: 2rem;
h6 {
font-size: 2.16rem
}
}
}
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28); box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
li { li {
padding: 25px 19px; padding: 1.25rem .95rem;
margin: 0 10px; margin: 0 .5rem;
font-size: 1.1rem; font-size: 1.05rem;
color: #333; color: #333;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167,167,167,0.26); text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
@ -94,16 +106,17 @@ export default {
} }
} }
.history { .history {
padding: 3.85rem 0;
h2 { h2 {
position: relative; position: relative;
font-size: 2.2rem; font-size: 1.75rem;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #1C1C1C; color: #1C1C1C;
} }
.en { .en {
margin: -15px 0 40px; margin: 0 0 2rem;
font-size: 2.2rem; font-size: 1.75rem;
font-family: PingFangSC-Light, PingFang SC; font-family: PingFangSC-Light, PingFang SC;
font-weight: 300; font-weight: 300;
color: #E3E3E3; color: #E3E3E3;
@ -113,18 +126,18 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
.time { .time {
width: 200px; width: 12.5rem;
padding-right: 10px; padding-right: .625rem;
margin-right: 20px; margin-right: 1.25rem;
flex-shrink: 1;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
li { li {
display: flex; display: flex;
justify-content: flex-end; justify-content: center;
align-items: center; align-items: center;
width: 190px; padding-right: 2.25rem;
padding-right: 45px; line-height: 3rem;
line-height: 60px; font-size: 1.32rem;
font-size: 1.4rem;
font-weight: 600; font-weight: 600;
font-family: SFProDisplay-Semibold, SFProDisplay; font-family: SFProDisplay-Semibold, SFProDisplay;
color: #666; color: #666;
@ -145,11 +158,12 @@ export default {
} }
} }
.right { .right {
width: 1000px; // width: 1000px;
flex-grow: 1;
} }
.year { .year {
margin: 0 0 20px 20px; margin: 0 0 1rem 1rem;
font-size: 3.8rem; font-size: 2.35rem;
font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN; font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
font-weight: 800; font-weight: 800;
color: #1A81F4; color: #1A81F4;
@ -160,21 +174,21 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 30px; padding: 1.5rem;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.texts { .texts {
width: 500px; width: 31.25rem;
} }
.date { .date {
margin-bottom: 15px; margin-bottom: .75rem;
font-size: 1.2rem; font-size: 1.26rem;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
} }
.text { .text {
font-size: 1.1rem; font-size: 1.08rem;
color: #333; color: #333;
@include mul-ellipsis(3); @include mul-ellipsis(3);
&:before { &:before {
@ -188,8 +202,8 @@ export default {
} }
} }
.pic { .pic {
width: 350px; width: 17.5rem;
height: 195px; height: 9.75rem;
} }
} }
} }
@ -264,18 +278,24 @@ export default {
@media (max-width: 320px) { @media (max-width: 320px) {
.wrap { .wrap {
.banner-img { .banner-img {
height: 15rem; height: 12rem;
} }
.single-banner { .single-banner {
.texts { .texts {
top: 11rem !important; bottom: 2rem !important;
left: 8rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
.block { .block {
.inner { .inner {
.event { .event {
@ -284,7 +304,7 @@ export default {
li { li {
.pic { .pic {
width: 100%; width: 100%;
height: 13rem; height: 9.75rem;
} }
} }
} }
@ -296,18 +316,24 @@ export default {
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.wrap { .wrap {
.banner-img { .banner-img {
height: 15rem; height: 12rem;
} }
.single-banner { .single-banner {
.texts { .texts {
top: 11rem !important; bottom: 2rem !important;
left: 10rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
.block { .block {
.inner { .inner {
.event { .event {
@ -316,7 +342,7 @@ export default {
li { li {
.pic { .pic {
width: 100%; width: 100%;
height: 15rem; height: 9.75rem;
} }
} }
} }
@ -324,24 +350,29 @@ export default {
} }
} }
} }
} }
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.wrap { .wrap {
.single-banner {
.banner-img { .banner-img {
height: 18rem; height: 12rem;
} }
.single-banner {
.texts { .texts {
top: 14rem !important; bottom: 2rem !important;
left: 14rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
.block { .block {
.inner { .inner {
.event { .event {
@ -350,7 +381,7 @@ export default {
li { li {
.pic { .pic {
width: 100%; width: 100%;
height: 18rem; height: 9.75rem;
} }
} }
} }
@ -358,23 +389,28 @@ export default {
} }
} }
} }
} }
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.wrap { .wrap {
.single-banner {
.banner-img { .banner-img {
height: 18rem; height: 12rem;
} }
.single-banner {
.texts { .texts {
top: 13rem !important; bottom: 2rem !important;
left: 20rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
.block { .block {
.inner { .inner {
.event { .event {
@ -383,7 +419,7 @@ export default {
li { li {
.pic { .pic {
width: 100%; width: 100%;
height: 22rem; height: 9.75rem;
} }
} }
} }
@ -391,23 +427,28 @@ export default {
} }
} }
} }
} }
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.wrap { .wrap {
.single-banner {
.banner-img { .banner-img {
height: 28rem; height: 12rem;
} }
.single-banner {
.texts { .texts {
top: 20rem !important; bottom: 2rem !important;
left: 30rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.8rem; font-size: 1.5rem;
} }
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
.block { .block {
.inner { .inner {
.event { .event {
@ -416,7 +457,7 @@ export default {
li { li {
.pic { .pic {
width: 100%; width: 100%;
height: 25rem; height: 11.75rem;
} }
} }
} }
@ -424,21 +465,26 @@ export default {
} }
} }
} }
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.wrap { .wrap {
.single-banner {
.banner-img { .banner-img {
height: 36rem; height: 12rem;
} }
.single-banner {
.texts { .texts {
top: 25rem !important; bottom: 2rem !important;
left: 38rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 2rem; font-size: 1.5rem;
}
}
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
} }
} }
.block { .block {
@ -449,7 +495,7 @@ export default {
li { li {
.pic { .pic {
width: 100%; width: 100%;
height: 28rem; height: auto
} }
} }
} }
@ -457,23 +503,28 @@ export default {
} }
} }
} }
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.wrap { .wrap {
.single-banner {
.banner-img { .banner-img {
height: 40rem; height: 12rem;
} }
.single-banner {
.texts { .texts {
top: 25rem !important; bottom: 2rem !important;
left: 50rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.8rem; font-size: 1.5rem;
} }
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
.block { .block {
.inner { .inner {
.event { .event {
@ -482,7 +533,7 @@ export default {
li { li {
.pic { .pic {
width: 100%; width: 100%;
height: 31rem; height: auto
} }
} }
} }
@ -490,6 +541,5 @@ export default {
} }
} }
} }
} }
</style> </style>

129
src/pages/overviewIntro/index.vue
Unescape View File

@ -61,14 +61,26 @@ export default {
.wrap { .wrap {
background: url(../../assets/images/survey2.png) (bottom right)/auto no-repeat; background: url(../../assets/images/survey2.png) (bottom right)/auto no-repeat;
} }
.single-banner {
.banner-img {
height: 24rem;
}
.texts {
top: auto !important;
bottom: 2rem;
h6 {
font-size: 2.16rem
}
}
}
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28); box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
li { li {
padding: 25px 19px; padding: 1.25rem .95rem;
margin: 0 10px; margin: 0 .5rem;
font-size: 1.1rem; font-size: 1.05rem;
color: #333; color: #333;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167,167,167,0.26); text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
@ -80,38 +92,39 @@ export default {
} }
} }
.tab-content { .tab-content {
padding-top: 150px; padding-top: 3.85rem;
.intro { .intro {
display: flex; display: flex;
margin-bottom: 110px; margin-bottom: 5.5rem;
.pic { .pic {
width: 40%; width: 40%;
margin-right: 50px; margin-right: 2.5rem;
} }
.right { .right {
width: 40%; width: 40%;
} }
h6 { h6 {
position: relative; position: relative;
font-size: 1.2rem; font-size: 1.36rem;
color: #333; color: #333;
} }
.title-bg { .title-bg {
position: absolute; position: absolute;
top: -40px; top: -2rem;
left: -20px; left: -1rem;
} }
.text { .text {
margin-top: 40px; margin-top: 2rem;
font-size: 1rem; font-size: .99rem;
color: #020202; color: #020202;
line-height: 2; line-height: 2;
} }
} }
.intro-bg { .intro-bg {
position: relative; position: relative;
height: 275px; height: auto;
padding-top: 90px; padding-top: 4.5rem;
padding-bottom: 2rem;
color: #fff; color: #fff;
text-align: center; text-align: center;
background: url(http://10.10.11.7/images/overviewIntro/3.png) 0 0/100% 100% no-repeat; background: url(http://10.10.11.7/images/overviewIntro/3.png) 0 0/100% 100% no-repeat;
@ -128,13 +141,13 @@ export default {
position: relative; position: relative;
} }
h6 { h6 {
margin-bottom: 30px; margin-bottom: 1.5rem;
font-size: 2rem; font-size: 1.6rem;
font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN; font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
font-weight: 800; font-weight: 800;
} }
.des { .des {
font-size: 1.5rem; font-size: 1.2rem;
} }
} }
} }
@ -184,100 +197,142 @@ export default {
@media (max-width: 320px) { @media (max-width: 320px) {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 13rem; height: 12rem;
} }
.texts { .texts {
top: 9rem !important; bottom: 2rem !important;
left: 8rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
} }
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 15rem; height: 12rem;
} }
.texts { .texts {
top: 11rem !important; bottom: 2rem !important;
left: 10rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
} }
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 18rem; height: 12rem;
} }
.texts { .texts {
top: 14rem !important; bottom: 2rem !important;
left: 13rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
} }
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 22rem; height: 12rem;
} }
.texts { .texts {
top: 18rem !important; bottom: 2rem !important;
left: 20rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
} }
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 25rem; height: 12rem;
} }
.texts { .texts {
top: 21rem !important; bottom: 2rem !important;
left: 30rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 28rem; height: 12rem;
} }
.texts { .texts {
top: 21rem !important; bottom: 2rem !important;
left: 37rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 32rem; height: 12rem;
} }
.texts { .texts {
top: 21rem !important; bottom: 2rem !important;
left: 37rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
} }
</style> </style>

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

@ -46,14 +46,26 @@ export default {
background: url(../../assets/images/survey1.png) (0 559px)/auto no-repeat, background: url(../../assets/images/survey1.png) (0 559px)/auto no-repeat,
url(../../assets/images/survey2.png) (bottom right)/auto no-repeat; url(../../assets/images/survey2.png) (bottom right)/auto no-repeat;
} }
.single-banner {
.banner-img {
height: 24rem;
}
.texts {
top: auto !important;
bottom: 2rem;
h6 {
font-size: 2.16rem
}
}
}
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28); box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
li { li {
padding: 25px 19px; padding: 1.25rem .95rem;
margin: 0 10px; margin: 0 .5rem;
font-size: 1.1rem; font-size: 1.05rem;
color: #333; color: #333;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167,167,167,0.26); text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
@ -65,8 +77,8 @@ export default {
} }
} }
.tab-content { .tab-content {
width: 1000px; width: 50rem;
padding: 77px 0; padding: 3.85rem 0;
margin: 0 auto; margin: 0 auto;
span { span {
font-size: 1.35rem; font-size: 1.35rem;
@ -77,12 +89,12 @@ export default {
} }
.video { .video {
width: 100%; width: 100%;
margin-bottom: 55px; margin-bottom: 2.75rem;
} }
.text { .text {
font-size: 18px; font-size: .9rem;
color: #020202; color: #020202;
line-height: 32px; line-height: 1.6rem;
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.tabs { .tabs {
@ -118,120 +130,156 @@ export default {
@media (max-width: 320px) { @media (max-width: 320px) {
.wrap { .wrap {
.banner-img { .banner-img {
height: 15rem; height: 12rem;
} }
.single-banner { .single-banner {
.texts { .texts {
top: 11rem !important; bottom: 2rem !important;
left: 8rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
} }
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.wrap { .wrap {
.banner-img { .banner-img {
height: 15rem; height: 12rem;
} }
.single-banner { .single-banner {
.texts { .texts {
top: 11rem !important; bottom: 2rem !important;
left: 10rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
} }
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.wrap { .wrap {
.single-banner {
.banner-img { .banner-img {
height: 18rem; height: 12rem;
} }
.single-banner {
.texts { .texts {
top: 14rem !important; bottom: 2rem !important;
left: 13rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
} }
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.wrap { .wrap {
.single-banner {
.banner-img { .banner-img {
height: 18rem; height: 12rem;
} }
.single-banner {
.texts { .texts {
top: 12rem !important; bottom: 2rem !important;
left: 20rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
} }
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.wrap { .wrap {
.single-banner {
.banner-img { .banner-img {
height: 28rem; height: 12rem;
} }
.single-banner {
.texts { .texts {
top: 20rem !important; bottom: 2rem !important;
left: 30rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.8rem; font-size: 1.5rem;
} }
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.wrap { .wrap {
.single-banner {
.banner-img { .banner-img {
height: 36rem; height: 12rem;
} }
.single-banner {
.texts { .texts {
top: 25rem !important; bottom: 2rem !important;
left: 38rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 2rem; font-size: 1.5rem;
} }
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.wrap { .wrap {
.single-banner {
.banner-img { .banner-img {
height: 40rem; height: 12rem;
} }
.single-banner {
.texts { .texts {
top: 25rem !important; bottom: 2rem !important;
left: 50rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.8rem; font-size: 1.5rem;
} }
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
} }
</style> </style>

139
src/pages/overviewTrailer/index.vue
Unescape View File

@ -52,14 +52,27 @@ export default {
background: url(../../assets/images/survey1.png) (0 559px)/auto no-repeat, background: url(../../assets/images/survey1.png) (0 559px)/auto no-repeat,
url(../../assets/images/survey2.png) (bottom right)/auto no-repeat; url(../../assets/images/survey2.png) (bottom right)/auto no-repeat;
} }
.single-banner {
.banner-img {
height: 24rem;
}
.texts {
top: auto !important;
bottom: 2rem;
h6 {
font-size: 2.16rem
}
}
}
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28); box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
li { li {
padding: 25px 19px; padding: 1.25rem .95rem;
margin: 0 10px; margin: 0 .5rem;
font-size: 1.1rem; font-size: 1.05rem;
color: #333; color: #333;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167,167,167,0.26); text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
@ -71,21 +84,21 @@ export default {
} }
} }
.tab-content { .tab-content {
width: 1000px; width: 50rem;
padding: 77px 0; padding: 3.85rem 0;
margin: 0 auto; margin: 0 auto;
span { span {
font-size: 1.35rem; font-size: 1.08rem;
} }
} }
.video { .video {
width: 100%; width: 100%;
margin-bottom: 55px; margin-bottom: 2.75rem;
} }
.text { .text {
font-size: 18px; font-size: .9rem;
color: #020202; color: #020202;
line-height: 32px; line-height: 1.6rem;
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.tabs { .tabs {
@ -119,18 +132,24 @@ export default {
@media (max-width: 320px) { @media (max-width: 320px) {
.wrap { .wrap {
.banner-img { .banner-img {
height: 15rem; height: 12rem;
} }
.single-banner { .single-banner {
.texts { .texts {
top: 11rem !important; bottom: 2rem !important;
left: 10rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
.tab-content { .tab-content {
.video { .video {
height: 18rem; height: 18rem;
@ -140,18 +159,24 @@ export default {
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.wrap { .wrap {
.banner-img { .banner-img {
height: 15rem; height: 12rem;
} }
.single-banner { .single-banner {
.texts { .texts {
top: 11rem !important; bottom: 2rem !important;
left: 12rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
.tab-content { .tab-content {
.video { .video {
height: 18rem; height: 18rem;
@ -161,19 +186,25 @@ export default {
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.wrap { .wrap {
.single-banner {
.banner-img { .banner-img {
height: 18rem; height: 12rem;
} }
.single-banner {
.texts { .texts {
top: 14rem !important; bottom: 2rem !important;
left: 15rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
.tab-content { .tab-content {
.video { .video {
height: 18rem; height: 18rem;
@ -182,85 +213,109 @@ export default {
} }
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.wrap { .wrap {
.single-banner {
.banner-img { .banner-img {
height: 22rem; height: 12rem;
} }
.single-banner {
.texts { .texts {
top: 18rem !important; bottom: 2rem !important;
left: 20rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
.tab-content { .tab-content {
.video { .video {
height: 23rem; height: 18rem;
} }
} }
} }
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.wrap { .wrap {
.single-banner {
.banner-img { .banner-img {
height: 28rem; height: 12rem;
} }
.single-banner {
.texts { .texts {
top: 20rem !important; bottom: 2rem !important;
left: 28rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.8rem; font-size: 1.5rem;
}
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
} }
.tab-content { .tab-content {
.video { .video {
height: 23rem; height: 18rem;
} }
} }
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.wrap { .wrap {
.single-banner {
.banner-img { .banner-img {
height: 36rem; height: 12rem;
} }
.single-banner {
.texts { .texts {
top: 25rem !important; bottom: 2rem !important;
left: 38rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 2rem; font-size: 1.5rem;
} }
} }
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
}
}
.tab-content { .tab-content {
.video { .video {
height: auto; height: 18rem;
} }
} }
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.wrap { .wrap {
.single-banner {
.banner-img { .banner-img {
height: 40rem; height: 12rem;
} }
.single-banner {
.texts { .texts {
top: 25rem !important; bottom: 2rem !important;
left: 50rem !important; left: 2rem !important;
.banner-title { .banner-title {
font-size: 1.8rem; font-size: 1.5rem;
}
}
} }
} }
.tabs {
li {
padding: 1rem .5rem;
font-size: .85rem;
} }
} }
.tab-content { .tab-content {
.video { .video {
height: auto; height: 18rem;
} }
} }
} }

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

@ -96,21 +96,31 @@ export default {
@import "../../styles/page/page.scss"; @import "../../styles/page/page.scss";
.wrap{ .wrap{
/deep/ .el-carousel { /deep/ .el-carousel {
height: 30rem; height: 24rem;
.el-carousel__container{ .el-carousel__container{
height: 30rem; height: 24rem;
} }
img{ img{
height: 30rem; height: 24rem;
} }
} }
} }
.banner-item {
.banner-name {
font-size: 1.6rem;
}
}
.block {
padding: 3.85rem 0;
.intro {
margin-bottom: 4rem;
}
}
.area { .area {
display: flex; display: flex;
li { li {
position: relative; position: relative;
width: 19%; width: 19%;
height: 653px;
color: #fff; color: #fff;
background: url(../../assets/images/research/res1.png) 0 0/100% 100% no-repeat; background: url(../../assets/images/research/res1.png) 0 0/100% 100% no-repeat;
transition: .3s; transition: .3s;
@ -147,24 +157,23 @@ export default {
} }
.pic { .pic {
width: 100%; width: 100%;
height: 443px; height: 32.65rem;
} }
.icon { .icon {
transition: .3s; transition: .3s;
} }
.texts { .texts {
width: 100%; width: 100%;
height: 210px; padding: 1rem 2rem;
padding: 20px 40px;
background: #08577B; background: #08577B;
overflow: hidden; overflow: hidden;
} }
h6 { h6 {
font-size: 1.5rem; font-size: 1.2rem;
white-space: nowrap; white-space: nowrap;
} }
.des { .des {
font-size: 1.2rem; font-size: .96rem;
color: rgba(255,255,255,0.55); color: rgba(255,255,255,0.55);
} }
} }
@ -174,7 +183,7 @@ export default {
li { li {
position: relative; position: relative;
width: calc((100% - 56px) / 3); width: calc((100% - 56px) / 3);
margin: 0 28px 39px 0; margin: 0 1.4rem 1.95rem 0;
transition: .3s; transition: .3s;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
@ -189,18 +198,18 @@ export default {
} }
img { img {
width: 100%; width: 100%;
height: 353px; height: auto;
} }
.text { .text {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 143px; height: 7.15rem;
padding: 0 30px; padding: 0 1.5rem;
font-size: 1.8rem; font-size: 1.44rem;
font-family: SFProDisplay-Bold, SFProDisplay; font-family: SFProDisplay-Bold, SFProDisplay;
font-weight: bold; font-weight: bold;
line-height: 40px; line-height: 2rem;
text-align: center; text-align: center;
color: #272727; color: #272727;
background-color: #fff; background-color: #fff;
@ -215,10 +224,10 @@ export default {
position: relative; position: relative;
width: calc((100% - 56px) / 3); width: calc((100% - 56px) / 3);
padding: 11px; padding: 11px;
margin-right: 28px; margin-right: 1.4rem;
color: #333; color: #333;
background-color: #fff; background-color: #fff;
box-shadow: 0px 5px 20px 0px rgba(98,117,163,0.08); box-shadow: 0px 5px 1rem 0px rgba(98,117,163,0.08);
border-radius: 10px; border-radius: 10px;
transition: .3s; transition: .3s;
&:hover { &:hover {
@ -234,19 +243,19 @@ export default {
} }
img { img {
width: 100%; width: 100%;
height: 481px; height: auto;
} }
.texts { .texts {
padding: 0 18px 50px; padding: 0 .9rem 2.5rem;
} }
h6 { h6 {
margin: 35px 0 12px; margin: 1.75rem 0 .6rem;
font-size: 1.3rem; font-size: 1.04rem;
line-height: 33px; line-height: 1.65rem;
} }
.des { .des {
font-size: 1.1rem; font-size: .88rem;
line-height: 26px; line-height: 1.3rem;
} }
} }
@ -302,37 +311,39 @@ export default {
@media (max-width: 320px) { @media (max-width: 320px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 13rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 13rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 13rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 13rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
padding: 1.25rem 0 ; padding: 1.25rem 0 ;
.b-title { .b-title {
font-size: 2rem; font-size: 1.5rem;
margin-bottom: 1rem;
} }
.group ,.news{ .group ,.news{
li { li {
img { img {
height: 13rem; height: auto;
} }
.text { .text {
font-size: 2rem; font-size: 1.5rem;
line-height: 1.8rem; line-height: 1.8rem;
} }
} }
@ -342,37 +353,39 @@ export default {
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 15rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 15rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 15rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 15rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
bottom: 2rem;
} }
} }
.block { .block {
padding: 1.25rem 0 ; padding: 1.25rem 0 ;
.b-title { .b-title {
font-size: 2rem; font-size: 1.5rem;
margin-bottom: 1rem;
} }
.group ,.news{ .group ,.news{
li { li {
img { img {
height: 13rem; height: auto;
} }
.text { .text {
font-size: 2rem; font-size: 1.5rem;
line-height: 1.8rem; line-height: 1.8rem;
} }
} }
@ -382,236 +395,260 @@ export default {
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 20rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 20rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 20rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 20rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
} bottom: 2rem;
}
.area {
li {
.pic {
height: 25rem;
}
} }
} }
.block { .block {
padding: 1.25rem 0 ; padding: 1.25rem 0 ;
.b-title { .b-title {
font-size: 2rem; font-size: 1.5rem;
margin-bottom: 1rem;
} }
.group ,.news{ .group ,.news{
li { li {
img { img {
height: 15rem; height: auto;
} }
.text { .text {
font-size: 2rem; font-size: 1.5rem;
line-height: 1.8rem; line-height: 1.8rem;
} }
} }
} }
.area {
li {
.pic {
height: 22rem;
}
}
}
} }
} }
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 25rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 25rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 25rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 25rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
} bottom: 2rem;
}
.area {
li {
.pic {
height: 25rem;
}
} }
} }
.block { .block {
padding: 1.25rem 0 ; padding: 1.25rem 0 ;
.b-title { .b-title {
font-size: 2rem; font-size: 1.5rem;
margin-bottom: 1rem;
} }
.group ,.news{ .group ,.news{
li { li {
img { img {
height: 20rem; height: auto;
} }
.text { .text {
font-size: 2rem; font-size: 1.5rem;
line-height: 1.8rem; line-height: 1.8rem;
} }
} }
} }
.area {
li {
.pic {
height: auto;
}
}
}
} }
} }
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 25rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 25rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 25rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 25rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
} bottom: 2rem;
}
.area {
li {
.pic {
height: 30rem;
}
} }
} }
.block { .block {
padding: 1.25rem 0 ; padding: 1.25rem 0 ;
.b-title { .b-title {
font-size: 2rem; font-size: 1.5rem;
margin-bottom: 1rem;
} }
.group ,.news{ .group ,.news{
li { li {
img { img {
height: 20rem; height: auto;
} }
.text { .text {
font-size: 2rem; font-size: 1.5rem;
line-height: 1.8rem; line-height: 1.8rem;
} }
} }
} }
.area {
flex-direction: row;;
li {
width: 19%;
.pic {
height: auto;
}
}
}
} }
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 30rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 30rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 30rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 30rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
} bottom: 2rem;
}
.area {
li {
.pic {
height: 35rem;
}
} }
} }
.block { .block {
padding: 1.25rem 0 ; padding: 1.25rem 0 ;
.b-title { .b-title {
font-size: 2rem; font-size: 1.5rem;
margin-bottom: 1rem;
} }
.group ,.news{ .group ,.news{
flex-direction: row;
li { li {
width: calc((100% - 3rem) / 3);
margin: 0 .8rem 1.95rem 0;
-webkit-transition: .3s;
img { img {
height: 25rem; height: auto;
} }
.text { .text {
font-size: 2rem; font-size: 1.5rem;
line-height: 1.8rem; line-height: 1.8rem;
} }
} }
} }
.area {
flex-direction: row;;
li {
width: 19%;
.pic {
height: auto;
}
}
}
} }
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel{
height: 35rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container{
height: 35rem !important; height: 12rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 35rem !important; height: 12rem !important;
} }
} }
.banner-item{ .banner-item{
img { img {
height: 35rem !important; height: 12rem !important;
} }
.banner-name { .banner-name {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1rem; line-height: 1rem;
left: 5rem; left: 2rem;
} bottom: 2rem;
}
.area {
li {
.pic {
height: 40rem;
}
} }
} }
.block { .block {
padding: 1.25rem 0 ; padding: 1.25rem 0 ;
.b-title { .b-title {
font-size: 2rem; font-size: 1.5rem;
margin-bottom: 1rem;
} }
.group ,.news{ .group ,.news{
flex-direction: row;
li { li {
width: calc((100% - 3rem) / 3);
margin: 0 .8rem 1.95rem 0;
-webkit-transition: .3s;
img { img {
height: 25rem; height: auto;
} }
.text { .text {
font-size: 2rem; font-size: 1.5rem;
line-height: 1.8rem; line-height: 1.8rem;
} }
} }
} }
.area {
flex-direction: row;;
li {
width: 19%;
.pic {
height: auto;
}
}
}
} }
} }
</style> </style>

184
src/pages/science/index.vue
Unescape View File

@ -97,11 +97,29 @@ export default {
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss"; @import "../../styles/page/page.scss";
.inner { .inner {
width: 1200px; width: 960px;
}
.single-banner {
.banner-img {
height: 21.6rem;
}
.texts {
h6 {
font-size: 2.16rem;
margin-bottom: .95rem;
}
.banner-des {
font-size: .96rem;
}
}
}
.block {
padding: 3.85rem 0;
} }
.item { .item {
position: relative; position: relative;
margin-bottom: 58px; margin-bottom: 2.9rem;
width: 100%;
&:hover { &:hover {
.texts { .texts {
color: #fff; color: #fff;
@ -110,8 +128,8 @@ export default {
} }
} }
img { img {
width: 90%; width: 100%;
height: 400px; height: 22rem;
} }
&:nth-child(2) .texts { &:nth-child(2) .texts {
color: #fff; color: #fff;
@ -123,26 +141,26 @@ export default {
} }
&:nth-child(even) .texts { &:nth-child(even) .texts {
left: auto; left: auto;
right: 0; right: -1.6rem;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 79px; top: 3.9rem;
left: -28px; left: -1.4rem;
width: 532px; width: 26.6rem;
padding: 70px 38px; padding: 3.5rem 1.9rem;
color: #333; color: #333;
background: #fff6e9; background: #fff6e9;
transition: 0.5s; transition: 0.5s;
} }
h6 { h6 {
margin-bottom: 14px; margin-bottom: .875rem;
font-size: 2rem; font-size: 1.6rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
} }
.des { .des {
font-size: 1rem; font-size: .88rem;
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
@ -150,11 +168,10 @@ export default {
width: 100% !important; width: 100% !important;
} }
.inner { .inner {
width: 100%; width: 80%;
} }
.item { .item {
img { img {
margin-left: 30px;
} }
.rightText { .rightText {
right: 12px !important; right: 12px !important;
@ -162,7 +179,10 @@ export default {
.texts { .texts {
width: 85%; width: 85%;
box-sizing: border-box; box-sizing: border-box;
left: 12px; left: -1rem;
&:nth-child(2) {
right: -1.5rem !important;
}
.des{ .des{
-webkit-line-clamp: inherit -webkit-line-clamp: inherit
} }
@ -173,11 +193,11 @@ export default {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 13rem; height: 12rem;
} }
.texts { .texts {
top: 6rem; top: 5rem;
left: 12rem; left: 2rem;
.banner-title{ .banner-title{
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
@ -196,6 +216,12 @@ export default {
.texts { .texts {
padding: 1.25rem; padding: 1.25rem;
top: 1.5rem; top: 1.5rem;
h6 {
font-size: 1.2rem;
}
.des {
font-size: .75rem;
}
} }
} }
} }
@ -204,11 +230,11 @@ export default {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 13rem; height: 12rem;
} }
.texts { .texts {
top: 6rem; top: 5rem;
left: 12rem; left: 2rem;
.banner-title{ .banner-title{
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
@ -219,16 +245,33 @@ export default {
} }
} }
} }
.block {
.inner {
img {
height: 18rem;
}
.texts {
padding: 1.25rem;
top: 1.5rem;
h6 {
font-size: 1.4rem;
}
.des {
font-size: .75rem;
}
}
}
}
} }
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 20rem; height: 12rem;
} }
.texts { .texts {
top: 10rem; top: 5rem;
left: 12rem; left: 2rem;
.banner-title{ .banner-title{
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
@ -239,18 +282,35 @@ export default {
} }
} }
} }
.block {
.inner {
img {
height: 18rem;
}
.texts {
padding: 1.25rem;
top: 1.5rem;
h6 {
font-size: 1.4rem;
}
.des {
font-size: .75rem;
}
}
}
}
} }
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 25rem; height: 12rem;
} }
.texts { .texts {
top: 10rem; top: 5rem;
left: 12rem; left: 2rem;
.banner-title{ .banner-title{
font-size: 2rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.banner-des{ .banner-des{
@ -259,18 +319,29 @@ export default {
} }
} }
} }
.block {
.inner {
img {
height: 18rem;
}
.texts {
padding: 1.25rem;
top: 1.5rem;
}
}
}
} }
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 35rem; height: 12rem;
} }
.texts { .texts {
top: 20rem; top: 5rem;
left: 12rem; left: 2rem;
.banner-title{ .banner-title{
font-size: 2rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.banner-des{ .banner-des{
@ -279,18 +350,29 @@ export default {
} }
} }
} }
.block {
.inner {
img {
height: 18rem;
}
.texts {
padding: 1.25rem;
top: 1.5rem;
}
}
}
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 35rem; height: 12rem;
} }
.texts { .texts {
top: 20rem; top: 5rem;
left: 12rem; left: 2rem;
.banner-title{ .banner-title{
font-size: 2rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.banner-des{ .banner-des{
@ -299,18 +381,29 @@ export default {
} }
} }
} }
.block {
.inner {
img {
height: 18rem;
}
.texts {
padding: 1.25rem;
top: 1.5rem;
}
}
}
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 40rem; height: 12rem;
} }
.texts { .texts {
top: 20rem; top: 5rem;
left: 12rem; left: 2rem;
.banner-title{ .banner-title{
font-size: 2rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.banner-des{ .banner-des{
@ -319,5 +412,16 @@ export default {
} }
} }
} }
.block {
.inner {
img {
height: 18rem;
}
.texts {
padding: 1.25rem;
top: 1.5rem;
}
}
}
} }
</style> </style>

796
src/pages/sfel/index.vue
View File

File diff suppressed because it is too large Load Diff

198
src/pages/talent/index.vue
Unescape View File

@ -33,7 +33,7 @@
<div class="style"> <div class="style">
<h6 class="wow fadeInUp">{{ modules[3].form.title }}</h6> <h6 class="wow fadeInUp">{{ modules[3].form.title }}</h6>
<el-carousel :interval="4000" type="card" height="36rem"> <el-carousel :interval="4000" type="card" height="30rem">
<template v-for="(item, i) in modules[4].list"> <template v-for="(item, i) in modules[4].list">
<el-carousel-item v-if="item.isEnable" :key="i"> <el-carousel-item v-if="item.isEnable" :key="i">
<div class="item" @click="openLink(item)"> <div class="item" @click="openLink(item)">
@ -118,15 +118,32 @@ export default {
.wrap { .wrap {
background: #F8F9FB; background: #F8F9FB;
} }
.single-banner {
.banner-img {
height: 21.6rem;
}
.texts {
h6 {
font-size: 2.16rem;
margin-bottom: .95rem;
}
.banner-des {
font-size: 1.08rem;
}
}
}
.block {
padding: 3.85rem 0;
}
.talent { .talent {
.inner { .inner {
width: 100%; width: 1200px;
max-width: 1504px; max-width: 1504px;
} }
.item { .item {
display: flex; display: flex;
padding: 42px; padding: 2.1rem;
margin-bottom: 36px; margin-bottom: 1.8rem;
color: #333; color: #333;
background: #fff; background: #fff;
transition: .5s; transition: .5s;
@ -146,7 +163,7 @@ export default {
} }
} }
.img-wrap { .img-wrap {
height: 465px; width: 32rem;
overflow: hidden; overflow: hidden;
} }
.pic { .pic {
@ -155,27 +172,27 @@ export default {
transition: .5s; transition: .5s;
} }
.texts { .texts {
width: 707px; width: 44.375rem;
padding: 98px 72px 30px 80px; padding: 3.9rem 3.6rem 1.5rem 4rem;
} }
h6 { h6 {
margin-bottom: 24px; margin-bottom: 1.2rem;
font-size: 2.4rem; font-size: 1.92rem;
font-family: PingFangSC-Light, PingFang SC; font-family: PingFangSC-Light, PingFang SC;
font-weight: 300; font-weight: 300;
} }
.des { .des {
font-size: 1rem; font-size: .88rem;
line-height: 33px; line-height: 1.65rem;
-webkit-line-clamp: 8; -webkit-line-clamp: 6;
} }
} }
.style { .style {
width: 90%; width: 1200px;
margin: 0 auto; margin: 0 auto;
h6 { h6 {
margin-bottom: 59px; margin-bottom: 2.95rem;
font-size: 2.4rem; font-size: 1.92rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
@ -184,7 +201,7 @@ export default {
.item { .item {
position: relative; position: relative;
width: 100%; width: 100%;
height: 510px; height: 25.5rem;
} }
img { img {
width: 100%; width: 100%;
@ -195,16 +212,16 @@ export default {
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
padding: 0 30px; padding: 0 1.5rem;
line-height: 3.4rem; line-height: 2.72rem;
font-size: 1.2rem; font-size: .96rem;
color: #fff; color: #fff;
background: rgba(0,0,0,0.38); background: rgba(0,0,0,0.38);
} }
} }
.intro { .intro {
.inner { .inner {
width: 100%; width: 1200px;
max-width: 1504px; max-width: 1504px;
} }
.item { .item {
@ -236,21 +253,21 @@ export default {
} }
.texts { .texts {
width: 45%; width: 45%;
padding: 0 58px; padding: 0 2.9rem;
} }
.type { .type {
font-size: 1rem; font-size: .88rem;
} }
h6 { h6 {
margin: 20px 0; margin: 1rem 0;
font-size: 1.6rem; font-size: 1.28rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
} }
.des { .des {
margin-bottom: 30px; margin-bottom: 1.5rem;
font-size: 0.9rem; font-size: 0.9rem;
line-height: 30px; line-height: 1.5rem;
} }
} }
@media (min-width: 280px) and (max-width: 1200px) { @media (min-width: 280px) and (max-width: 1200px) {
@ -293,10 +310,10 @@ export default {
@media (max-width: 320px) { @media (max-width: 320px) {
.single-banner{ .single-banner{
.banner-img { .banner-img {
height: 13rem; height: 12rem;
} }
.texts { .texts {
left: 5rem; left: 2rem;
top:3rem; top:3rem;
.banner-title{ .banner-title{
font-size: 1.5rem; font-size: 1.5rem;
@ -308,22 +325,25 @@ export default {
} }
.block { .block {
.inner { .inner {
width: 100%;
.item { .item {
.img-wrap { .img-wrap {
height: 15rem; width: 100%;
height: auto;
} }
} }
} }
} }
.style { .style {
width: 100%;
/deep/ .el-carousel { /deep/ .el-carousel {
height: 25rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 18rem !important; height: 13rem !important;
} }
.item { .item {
height: 15rem; height: 13rem;
.text { .text {
line-height: 1.5rem; line-height: 1.5rem;
font-size: 1rem; font-size: 1rem;
@ -334,11 +354,11 @@ export default {
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.single-banner{ .single-banner{
.banner-img { .banner-img {
height: 18rem; height: 12rem;
} }
.texts { .texts {
left: 5rem; left: 2rem;
top:8rem; top:3rem;
.banner-title{ .banner-title{
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -349,22 +369,25 @@ export default {
} }
.block { .block {
.inner { .inner {
width: 100%;
.item { .item {
.img-wrap { .img-wrap {
height: 18rem; width: 100%;
height: auto;
} }
} }
} }
} }
.style { .style {
width: 100%;
/deep/ .el-carousel { /deep/ .el-carousel {
height: 25rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 18rem !important; height: 13rem !important;
} }
.item { .item {
height: 15rem; height: 13rem;
.text { .text {
line-height: 1.5rem; line-height: 1.5rem;
font-size: 1rem; font-size: 1rem;
@ -375,11 +398,11 @@ export default {
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.single-banner{ .single-banner{
.banner-img { .banner-img {
height: 18rem; height: 12rem;
} }
.texts { .texts {
left: 5rem; left: 2rem;
top:8rem; top:3rem;
.banner-title{ .banner-title{
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -390,22 +413,25 @@ export default {
} }
.block { .block {
.inner { .inner {
width: 100%;
.item { .item {
.img-wrap { .img-wrap {
height: 18rem; width: 100%;
height: auto;
} }
} }
} }
} }
.style { .style {
width: 100%;
/deep/ .el-carousel { /deep/ .el-carousel {
height: 25rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 18rem !important; height: 13rem !important;
} }
.item { .item {
height: 15rem; height: 13rem;
.text { .text {
line-height: 1.5rem; line-height: 1.5rem;
font-size: 1rem; font-size: 1rem;
@ -416,11 +442,11 @@ export default {
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.single-banner{ .single-banner{
.banner-img { .banner-img {
height: 20rem; height: 12rem;
} }
.texts { .texts {
left: 5rem; left: 2rem;
top:8rem; top:3rem;
.banner-title{ .banner-title{
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -431,22 +457,25 @@ export default {
} }
.block { .block {
.inner { .inner {
width: 100%;
.item { .item {
.img-wrap { .img-wrap {
height: 20rem; width: 100%;
height: auto;
} }
} }
} }
} }
.style { .style {
width: 100%;
/deep/ .el-carousel { /deep/ .el-carousel {
height: 25rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 18rem !important; height: 13rem !important;
} }
.item { .item {
height: 18rem; height: 13rem;
.text { .text {
line-height: 1.5rem; line-height: 1.5rem;
font-size: 1rem; font-size: 1rem;
@ -457,11 +486,11 @@ export default {
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.single-banner{ .single-banner{
.banner-img { .banner-img {
height: 28rem; height: 12rem;
} }
.texts { .texts {
left: 5rem; left: 2rem;
top:17rem; top:3rem;
.banner-title{ .banner-title{
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -472,22 +501,25 @@ export default {
} }
.block { .block {
.inner { .inner {
width: 100%;
.item { .item {
.img-wrap { .img-wrap {
height: 25rem; width: 100%;
height: auto;
} }
} }
} }
} }
.style { .style {
width: 100%;
/deep/ .el-carousel { /deep/ .el-carousel {
height: 30rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 25rem !important; height: 13rem !important;
} }
.item { .item {
height: 22rem; height: 13rem;
.text { .text {
line-height: 1.5rem; line-height: 1.5rem;
font-size: 1rem; font-size: 1rem;
@ -498,11 +530,11 @@ export default {
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.single-banner{ .single-banner{
.banner-img { .banner-img {
height: 32rem; height: 12rem;
} }
.texts { .texts {
left: 5rem; left: 2rem;
top:17rem; top:3rem;
.banner-title{ .banner-title{
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -513,22 +545,31 @@ export default {
} }
.block { .block {
.inner { .inner {
width: 100%;
.item { .item {
width: 100%;
flex-direction: row;
.img-wrap { .img-wrap {
height: 30rem; width: 60%;
height: auto;
}
.texts {
width: 80%;
margin-left: 1.5rem;
} }
} }
} }
} }
.style { .style {
width: 100%;
/deep/ .el-carousel { /deep/ .el-carousel {
height: 30rem !important; height: 18rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 25rem !important; height: 18rem !important;
} }
.item { .item {
height: 22rem; height: 18rem;
.text { .text {
line-height: 1.5rem; line-height: 1.5rem;
font-size: 1rem; font-size: 1rem;
@ -539,11 +580,11 @@ export default {
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.single-banner{ .single-banner{
.banner-img { .banner-img {
height: 32rem; height: 12rem;
} }
.texts { .texts {
left: 5rem; left: 2rem;
top:17rem; top:3rem;
.banner-title{ .banner-title{
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -554,22 +595,31 @@ export default {
} }
.block { .block {
.inner { .inner {
width: 100%;
.item { .item {
width: 100%;
flex-direction: row;
.img-wrap { .img-wrap {
height: 35rem; width: 60%;
height: auto;
}
.texts {
width: 80%;
margin-left: 1.5rem;
} }
} }
} }
} }
.style { .style {
width: 100%;
/deep/ .el-carousel { /deep/ .el-carousel {
height: 30rem !important; height: 20rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 25rem !important; height: 20rem !important;
} }
.item { .item {
height: 22rem; height: 20rem;
.text { .text {
line-height: 1.5rem; line-height: 1.5rem;
font-size: 1rem; font-size: 1rem;

209
src/pages/userSharing/index.vue
Unescape View File

@ -82,59 +82,76 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss"; @import "../../styles/page/page.scss";
.single-banner {
.banner-img {
height: 21.6rem;
}
.texts {
h6 {
font-size: 2.16rem;
margin-bottom: .95rem;
}
.banner-des {
font-size: .96rem;
}
}
}
.block {
padding: 3.85rem 0;
}
.share { .share {
position: relative; position: relative;
.inner { .inner {
display: flex; display: flex;
} }
.left { .left {
width: 40%; width: 40%;
} }
h6 { h6 {
position: relative; position: relative;
font-size: 2.2rem; font-size: 1.76rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
} }
.en { .en {
margin-top: -25px; margin-top: 0;
font-size: 2rem; font-size: 1.28rem;
font-family: AppleSystemUIFont; font-family: AppleSystemUIFont;
color: #E4E4E4; color: #E4E4E4;
} }
.des { .des {
margin-top: 25px; margin-top: 25px;
font-size: 1rem; font-size: .81rem;
color: #333; color: #333;
line-height: 37px; line-height: 1.75rem;
overflow: visible; -webkit-line-clamp:5;
} }
.pic { .pic {
width: 60%; width: 60%;
height: 568px; height: auto;
border-top-left-radius: 20px; border-top-left-radius: 20px;
} }
.card { .card {
position: absolute; position: absolute;
bottom: 145px; bottom: 5.2rem;
left: 0; left: 0;
width: 1068px; width: 66.75rem;
height: 145px; padding: 1.875rem 0 1.875rem 21.5%;
padding: 30px 0 0 11%;
background: #7BACC4; background: #7BACC4;
border-radius: 0px 100px 0px 0px; border-radius: 0px 100px 0px 0px;
opacity: 0.88; opacity: 0.88;
} }
.title { .title {
margin-bottom: 10px; margin-bottom: .625rem;
font-size: 1.8rem; font-size: 1.44rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
} }
.en-text { .en-text {
font-size: 1.3rem; font-size: 1.04rem;
font-family: AppleSystemUIFont; font-family: AppleSystemUIFont;
color: #fff; color: #fff;
letter-spacing: 2px; letter-spacing: 2px;
@ -143,14 +160,14 @@ export default {
.group { .group {
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 1000px; width: 1200px;
margin: 0 auto; margin: 0 auto;
li { li {
position: relative; position: relative;
width: calc((100% - 40px) / 3); flex: 1;
height: 300px; height: 15rem;
padding: 110px 20px 0 32px; padding: 5.5rem 1rem 0 1.6rem;
margin-right: 20px; margin-right: 1rem;
color: #fff; color: #fff;
overflow: hidden; overflow: hidden;
&:last-child { &:last-child {
@ -172,14 +189,14 @@ export default {
} }
h6 { h6 {
position: relative; position: relative;
font-size: 1.5rem; font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
} }
.des { .des {
position: relative; position: relative;
margin-top: 16px; margin-top: 1rem;
font-size: 0.9rem; font-size: 0.72rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
line-height: 31px; line-height: 31px;
@ -226,8 +243,8 @@ export default {
height: 13rem; height: 13rem;
} }
.texts { .texts {
top: 6rem; top: 7rem;
left: 12rem; left: 2rem;
.banner-title{ .banner-title{
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
@ -242,10 +259,17 @@ export default {
padding: 2rem 0; padding: 2rem 0;
.inner { .inner {
.pic { .pic {
height: 20rem; height: auto;
} }
.card{ .card{
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0; bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: .9rem;
}
} }
} }
} }
@ -257,8 +281,8 @@ export default {
height: 13rem; height: 13rem;
} }
.texts { .texts {
top: 6rem; top: 7rem;
left: 12rem; left: 2rem;
.banner-title{ .banner-title{
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
@ -273,23 +297,35 @@ export default {
padding: 2rem 0; padding: 2rem 0;
.inner { .inner {
.pic { .pic {
height: 20rem; height: auto;
} }
.card{ .card{
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0; bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: .9rem;
} }
} }
} }
}
.group {
li {
height: auto;
}
}
} }
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 20rem; height: 13rem;
} }
.texts { .texts {
top: 10rem; top: 7rem;
left: 12rem; left: 2rem;
.banner-title{ .banner-title{
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
@ -304,25 +340,37 @@ export default {
padding: 2rem 0; padding: 2rem 0;
.inner { .inner {
.pic { .pic {
height: 25rem; height: auto;
} }
.card{ .card{
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0; bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: .9rem;
}
} }
} }
} }
.group {
li {
height: auto;
}
}
} }
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 25rem; height: 13rem;
} }
.texts { .texts {
top: 10rem; top: 7rem;
left: 12rem; left: 2rem;
.banner-title{ .banner-title{
font-size: 2rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.banner-des{ .banner-des{
@ -335,25 +383,37 @@ export default {
padding: 2rem 0; padding: 2rem 0;
.inner { .inner {
.pic { .pic {
height: 30rem; height: auto;
} }
.card{ .card{
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0; bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: .9rem;
}
}
} }
} }
.group {
li {
height: auto;
}
} }
} }
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 35rem; height: 13rem;
} }
.texts { .texts {
top: 20rem; top: 7rem;
left: 12rem; left: 2rem;
.banner-title{ .banner-title{
font-size: 2rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.banner-des{ .banner-des{
@ -366,10 +426,25 @@ export default {
padding: 2rem 0; padding: 2rem 0;
.inner { .inner {
.pic { .pic {
height: 35rem; height: auto;
} }
.card{ .card{
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0; bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: .9rem;
}
}
}
}
.group {
flex-direction: row;
li {
.des {
line-height: 1rem;
} }
} }
} }
@ -378,13 +453,13 @@ export default {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 40rem; height: 13rem;
} }
.texts { .texts {
top: 20rem; top: 7rem;
left: 12rem; left: 2rem;
.banner-title{ .banner-title{
font-size: 2rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.banner-des{ .banner-des{
@ -397,10 +472,25 @@ export default {
padding: 2rem 0; padding: 2rem 0;
.inner { .inner {
.pic { .pic {
height: 40rem; height: auto;
} }
.card{ .card{
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0; bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: .9rem;
}
}
}
}
.group {
flex-direction: row;
li {
.des {
line-height: 1rem;
} }
} }
} }
@ -409,13 +499,13 @@ export default {
.wrap { .wrap {
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 40rem; height: 13rem;
} }
.texts { .texts {
top: 20rem; top: 7rem;
left: 12rem; left: 2rem;
.banner-title{ .banner-title{
font-size: 2rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.banner-des{ .banner-des{
@ -428,10 +518,25 @@ export default {
padding: 2rem 0; padding: 2rem 0;
.inner { .inner {
.pic { .pic {
height: 50rem; height: auto;
} }
.card{ .card{
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0; bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: .9rem;
}
}
}
}
.group {
flex-direction: row;
li {
.des {
line-height: 1rem;
} }
} }
} }

3
src/store/getters.js
Unescape View File

@ -1,4 +1,5 @@
const getters = { const getters = {
getModelType:(state) => state.modelType getModelType:(state) => state.modelType,
getNavSum:(state) => state.navSum
}; };
export default getters; export default getters;

13
src/store/index.js
Unescape View File

@ -19,12 +19,23 @@ const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const store = new Vuex.Store({ const store = new Vuex.Store({
state: { state: {
modelType: false //true为PC端，false为手机端 modelType: false, //true为PC端，false为手机端
navSum: sessionStorage.getItem('navPageSize') || 10, // 导航栏显示的条目数量
}, },
mutations: { mutations: {
// 根据屏幕尺寸分别移动或者pc
updateModelType(state, type) { updateModelType(state, type) {
console.log(state) console.log(state)
state.modelType = type; state.modelType = type;
},
// 根据屏幕尺寸显示的导航栏条数
updateNavSum(state,num) {
state.navSum = num
}
},
actions: {
updateNavSumA({ commit },data) {
commit('updateNavSum',data)
} }
}, },
modules, modules,

Write Preview
Loading…
Cancel
Save