diff --git a/src/App.vue b/src/App.vue index 83f5991..c5ebdfb 100644 --- a/src/App.vue +++ b/src/App.vue @@ -10,6 +10,7 @@ import util from '@/libs/util'; export default { name: 'App', created() { + console.log('i18n=>',this.$i18n.locale) //在页面加载时读取localStorage里的状态信息 if (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(); this.$store.commit('updateModelType', flagZt) - window.onresize = () => { + window.onresize = this.throttle(() => { if(document.body.clientWidth <= 1200) { 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 { + 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.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(); + } + } } - } + }, }; diff --git a/src/components/menuTree/index.vue b/src/components/menuTree/index.vue index 026976d..6699c1d 100644 --- a/src/components/menuTree/index.vue +++ b/src/components/menuTree/index.vue @@ -7,9 +7,13 @@ - - {{item.columnName}} - + diff --git a/src/i18n/index.js b/src/i18n/index.js index 7adbe1f..46c5d26 100644 --- a/src/i18n/index.js +++ b/src/i18n/index.js @@ -23,7 +23,8 @@ export const messages = { series: '演讲系列', all: '全部', readDetail: '阅读详情', - offline:'线下' + offline:'线下', + more: '更多' } }, 'en': { @@ -50,7 +51,8 @@ export const messages = { series: 'Series', all: 'All', readDetail: 'Read Detail', - offline: 'Offline' + offline: 'Offline', + more: 'More' } } }; \ No newline at end of file diff --git a/src/layouts/header/index.vue b/src/layouts/header/index.vue index ff2dbbc..cacc52c 100644 --- a/src/layouts/header/index.vue +++ b/src/layouts/header/index.vue @@ -11,7 +11,7 @@ diff --git a/src/pages/deviceIntroBeam/index.vue b/src/pages/deviceIntroBeam/index.vue index 8e1afc9..eb81101 100644 --- a/src/pages/deviceIntroBeam/index.vue +++ b/src/pages/deviceIntroBeam/index.vue @@ -57,6 +57,25 @@ export default { .banner { background: url(../../assets/images/device/13.png) 0 0/100% 100% no-repeat; 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 { position: relative; @@ -83,15 +102,16 @@ export default { .share { position: relative; .inner { - width: 1323px; + width: 1200px; } .left { - width: 547px; - margin-right: 66px; + // width: 34.1875rem; + flex-grow: 1; + margin-right: 4.125rem; } h6 { position: relative; - font-size: 2.4rem; + font-size: 1.92rem; font-family: PingFangSC-Medium, PingFang SC; font-weight: bold; color: #333333; @@ -112,15 +132,16 @@ export default { line-height: 44px; } .des { - margin-top: 25px; - font-size: 1rem; + margin-top: 1.25rem; + font-size: .88rem; color: #333; - line-height: 37px; + line-height: 1.85rem; + -webkit-line-clamp: inherit; overflow: visible; } .pic { - width: 610px; - height: 409px; + width: 30.5rem; + height: auto; margin-top: 10px; border-top-left-radius: 20px; } @@ -128,21 +149,21 @@ export default { .intro { display: flex; align-items: center; - max-width: 1490px; - width: 90%; - height: 393px; + width: 77.5%; + height: 19.65rem; margin-bottom: 67px; .pic { width: 60%; height: 100%; } .des { - height: 100%; - padding: 57px 60px 20px 60px; - font-size: 1.2rem; + height: 19.65rem; + padding: 2.85rem 3rem 1rem 3rem; + font-size: .96rem; color: #fff; - line-height: 40px; + line-height: 2rem; background: #2E4984; + -webkit-line-clamp: 7; //设定一共3行,超出的部分隐藏,并用省略号来表示 } } .unit { @@ -150,9 +171,9 @@ export default { padding-bottom: 60px; margin: 0 auto; h6 { - padding-left: 15px; - margin-bottom: 15px; - font-size: 1.1rem; + padding-left: .93rem; + margin-bottom: .93rem; + font-size: .88rem; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #2A2A2A; @@ -206,44 +227,128 @@ export default { } @media (max-width: 320px) { .banner{ - height: 13rem; - padding: 6rem 0 0 8rem; + height: 12rem; + 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{ - height: 13rem; - padding: 8rem 0 0 10rem; + height: 12rem; + padding: 6rem 0 0 2rem; + } + .beamBox { + .imgText { + bottom: 1rem; + right: 1rem; + } } - } - @media (min-width: 375px) and (max-width: 480px) { + .intro { + width: 100%; + .des { + height: auto; + } + } +} + @media (min-width: 375px) and (max-width: 480px) { .banner{ - height: 15rem; - padding: 10rem 0 0 14rem; + height: 12rem; + 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{ - height: 17rem; - padding: 12rem 0 0 22rem; + height: 12rem; + 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{ - height: 19rem; - padding: 12rem 0 0 22rem; + height: 12rem; + 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{ - height: 19rem; - padding: 12rem 0 0 22rem; + height: 12rem; + 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{ - height: 25rem; - padding: 12rem 0 0 22rem; + height: 12rem; + padding: 6rem 0 0 2rem; + } + .beamBox { + .imgText { + bottom: 4rem; + right: 4rem; + } + } + .intro { + width: 100%; + .des { + height: auto; + } } } \ No newline at end of file diff --git a/src/pages/deviceIntroLayout/index.vue b/src/pages/deviceIntroLayout/index.vue index 7a45137..0b10e58 100644 --- a/src/pages/deviceIntroLayout/index.vue +++ b/src/pages/deviceIntroLayout/index.vue @@ -57,6 +57,21 @@ export default { background: url(../../assets/images/device/14.png) no-repeat center; background-size: 100% 100%; 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 { position: relative; @@ -64,7 +79,11 @@ export default { width: 90%; max-width: 1323px; .textBox{ - margin-top: 290px; + margin-top: 12.125rem; + position: absolute; + width: 85%; + right: 0; + top: 16.125rem; .left { flex-grow: 1; } @@ -74,12 +93,12 @@ export default { } } .left { - width: 547px; - margin-right: 66px; + width: 34.187rem; + margin-right: 4.125rem; } h6 { position: relative; - font-size: 2.2rem; + font-size: 1.76rem; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #333333; @@ -95,43 +114,49 @@ export default { position: absolute; left: 0; max-width: 1671px; - width: 80%; - padding: 32px 52px 25px 16%; - font-size: 1.2rem; + width: 85%; + padding: 1.6rem 2.9rem 1.6rem 16%; + font-size: 1.06rem; font-family: PingFangSC-Medium, PingFang SC; border-radius: 0 6rem 0 0; font-weight: 500; color: #FFFFFF; - line-height: 38px; + line-height: 2.375rem; background: url(../../assets/images/device/5.png) 0 0/cover no-repeat; } .des { margin-top: 25px; - font-size: 1rem; + font-size: .98rem; + -webkit-line-clamp: inherit; color: #333; line-height: 37px; overflow: visible; } .pic { - width: 710px; - height: 509px; + width: 44.375rem; + height: auto; border-top-left-radius: 20px; } } .intro { position: relative; - height: 794px; - margin-bottom: 37px; + height: 42.625rem; + margin-bottom: 2.3rem; + margin-top: 50rem; + width: 85%; .bg { position: absolute; top: 0; left: 0; + width: 65%; + height: 35.73rem; } .pic { position: absolute; - top: 67px; - left: 15%; - width: 74%; + top: 3.015rem; + left: 30%; + width: 71%; + height: 29.74rem; } } .unit { @@ -139,9 +164,9 @@ export default { padding-bottom: 60px; margin: 0 auto; h6 { - padding-left: 15px; - margin-bottom: 15px; - font-size: 1.1rem; + padding-left: .93rem; + margin-bottom: .93rem; + font-size: .88rem; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #2A2A2A; @@ -315,44 +340,191 @@ export default { @media (max-width: 320px) { .banner{ - height: 13rem; - padding: 6rem 0 0 8rem; + height: 12rem; + 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) { .banner{ - height: 15rem; - padding: 8rem 0 0 10rem; + height: 12rem; + padding: 6rem 0 0 2rem; + } + .share { + .card { + font-size: .9rem; + line-height: 1.1rem; + } + .textBox { + top:23.125rem !important; + .des { + line-height: 1.1rem; + } + } } - } - @media (min-width: 375px) and (max-width: 480px) { + .intro { + margin-top: 41rem; + .bg { + height: 13rem; + } + .pic { + height: auto; + } + } +} + @media (min-width: 375px) and (max-width: 480px) { .banner{ - height: 17rem; - padding: 10rem 0 0 14rem; + height: 12rem; + 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) { .banner{ - height: 19rem; - padding: 12rem 0 0 22rem; + height: 12rem; + 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{ - height: 19rem; - padding: 12rem 0 0 22rem; + height: 12rem; + 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{ - height: 19rem; - padding: 12rem 0 0 22rem; + height: 12rem; + 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) { .banner{ - height: 19rem; - padding: 12rem 0 0 22rem; + height: 12rem; + 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; + } } } \ No newline at end of file diff --git a/src/pages/deviceIntroLinear/index.vue b/src/pages/deviceIntroLinear/index.vue index 8685487..5231ed8 100644 --- a/src/pages/deviceIntroLinear/index.vue +++ b/src/pages/deviceIntroLinear/index.vue @@ -72,17 +72,31 @@ export default { .banner { background: url(../../assets/images/device/15.png) 0 0/100% 100% no-repeat; 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 { .inner { - width: 90%; + width: 1200px; max-width: 1504px; } h2 { position: relative; - font-size: 2.2rem; + font-size: 1.76rem; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #1c1c1c; @@ -99,7 +113,7 @@ export default { .texts { display: flex; justify-content: space-between; - padding: 82px 0 30px 38px; + padding: 5.125rem 0 1.875rem 2.375rem; margin-top: 20px; background: #1583ff; border-radius: 65px 100px 0px 0px; @@ -157,7 +171,7 @@ export default { .bg { width: 50%; - margin: -142px -50px 0 0; + margin: -8.875rem -3.125rem 0 0; border-top-left-radius: 30px; } } @@ -177,17 +191,17 @@ export default { } h5 { - margin-bottom: 15px; - font-size: 1rem; + margin-bottom: .93rem; + font-size: .88rem; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #2a2a2a; } h6 { - padding-left: 15px; - margin-bottom: 15px; - font-size: 1rem; + padding-left: .93rem; + margin-bottom: .93rem; + font-size: .88rem; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #2a2a2a; @@ -257,44 +271,79 @@ export default { } @media (max-width: 320px) { .banner{ - height: 13rem; - padding: 6rem 0 0 8rem; + height: 12rem; + padding: 6rem 0 0 2rem; + } + .block { + .inner { + width: 100%; + } } } @media (min-width: 320px) and (max-width: 375px) { .banner{ - height: 13rem; - padding: 8rem 0 0 10rem; + height: 12rem; + padding: 6rem 0 0 2rem; + } + .block { + .inner { + width: 100%; + } } - } +} @media (min-width: 375px) and (max-width: 480px) { .banner{ - height: 15rem; - padding: 10rem 0 0 14rem; + height: 12rem; + padding: 6rem 0 0 2rem; + } + .block { + .inner { + width: 100%; + } } } @media (min-width: 480px) and (max-width: 640px) { .banner{ - height: 17rem; - padding: 12rem 0 0 22rem; + height: 12rem; + padding: 6rem 0 0 2rem; + } + .block { + .inner { + width: 100%; + } } } @media (min-width: 640px) and (max-width: 768px) { .banner{ - height: 19rem; - padding: 12rem 0 0 22rem; + height: 12rem; + padding: 6rem 0 0 2rem; + } + .block { + .inner { + width: 100%; + } } } @media (min-width: 768px) and (max-width: 980px) { .banner{ - height: 19rem; - padding: 12rem 0 0 22rem; + height: 12rem; + padding: 6rem 0 0 2rem; + } + .block { + .inner { + width: 100%; + } } } @media (min-width: 980px) and (max-width: 1200px) { .banner{ - height: 25rem; - padding: 12rem 0 0 22rem; + height: 12rem; + padding: 6rem 0 0 2rem; + } + .block { + .inner { + width: 100%; + } } } diff --git a/src/pages/edu/index.vue b/src/pages/edu/index.vue index 43ca4ab..e020776 100644 --- a/src/pages/edu/index.vue +++ b/src/pages/edu/index.vue @@ -88,17 +88,37 @@ export default { .wrap{ /deep/ .el-carousel { - height: 30rem; + height: 21.6rem; .el-carousel__container{ - height: 30rem; + height: 21.6rem; } 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 { transition: .3s; + height: auto; &.br { border-radius: 270px; } @@ -118,16 +138,15 @@ export default { } } .pic { - width: 662px; - height: 753px; + width: 45%; + height: auto; } .texts { position: absolute; - top: 120px; - left: 44%; + top: 7.59rem; + left: 40%; width: 60%; - height: 455px; - padding: 60px 30px 30px 100px; + padding: 2.7rem 1.35rem ; background-color: #fff; overflow: hidden; transition: .3s; @@ -136,15 +155,17 @@ export default { } } h6 { - font-size: 2.4rem; + font-size: 1.8rem; color: #3C3C3C; } .sub { - font-size: 1.2rem; + margin-top: 1.48rem; + font-size: 1.08rem; color: #1C1C1C; line-height: 33px; } .des { + margin-top: 1.2rem; font-size: 1rem; color: #3C3C3C; line-height: 32px; @@ -215,38 +236,42 @@ export default { @media (max-width: 320px) { .wrap { /deep/ .el-carousel{ - height: 13rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 13rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 13rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 13rem !important; + height: 12rem !important; } .banner-name { font-size: 1rem; line-height: 1.5rem; - left: 3rem; + left: 2rem; + bottom: 2rem; } } .block { padding: 1.25rem 0; .inner { + .intro { + margin-bottom: 1rem; + } .b-title { font-size: 1.5rem; } .block-pic { - height: 13rem; + height: auto; } .list { .wow { .pic { - height: 13rem; + height: auto; } .texts { h6 { @@ -272,52 +297,57 @@ export default { @media (min-width: 320px) and (max-width: 375px) { .wrap { /deep/ .el-carousel{ - height: 15rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 15rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 15rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 15rem !important; + height: 12rem !important; } .banner-name { font-size: 1rem; line-height: 1.5rem; - left: 3rem; + left: 2rem; + bottom: 2rem; } } .block { padding: 1.25rem 0; .inner { + .intro { + margin-bottom: 1rem; + } .b-title { font-size: 1.5rem; } .block-pic { - height: 15rem; + height: auto; } .list { .wow { .pic { - height: 15rem; + height: auto; } .texts { + top: 5rem; h6 { font-size: 1.5rem; } .sub { - font-size: 1.2rem; - line-height: 1.2rem; - margin-top: .8rem; + font-size: 1.05rem; + line-height: 1.05rem; + margin-top: .5rem; } .des { - font-size: 1.2rem; - line-height: 1.2rem; - margin-top: .8rem; + font-size: 1.05rem; + line-height: 1.05rem; + margin-top: .5rem; } } @@ -329,38 +359,59 @@ export default { @media (min-width: 375px) and (max-width: 480px) { .wrap { /deep/ .el-carousel{ - height: 20rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 20rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 20rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 20rem !important; + height: 12rem !important; } .banner-name { - font-size: 1.5rem; + font-size: 1rem; line-height: 1.5rem; - left: 3rem; + left: 2rem; + bottom: 2rem; } } .block { padding: 1.25rem 0; .inner { + .intro { + margin-bottom: 1rem; + } .b-title { font-size: 1.5rem; } .block-pic { - height: 18rem; + height: auto; } .list { .wow { .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,79 +421,125 @@ export default { @media (min-width: 480px) and (max-width: 640px) { .wrap { /deep/ .el-carousel{ - height: 25rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 25rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 25rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 25rem !important; + height: 12rem !important; } .banner-name { - font-size: 2.5rem; - line-height: 2.5rem; - left: 3rem; + font-size: 1rem; + line-height: 1.5rem; + left: 2rem; + bottom: 2rem; } } .block { padding: 1.25rem 0; .inner { + .intro { + margin-bottom: 1rem; + } .b-title { font-size: 1.5rem; } .block-pic { - height: 22rem; + height: auto; } .list { .wow { .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; + + } } } } } } } -@media (min-width: 640px) and (max-width: 768px) { +@media (min-width: 640px) and (max-width: 768px) { .wrap { /deep/ .el-carousel{ - height: 28rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 28rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 28rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 28rem !important; + height: 12rem !important; } .banner-name { - font-size: 2.5rem; + font-size: 1rem; line-height: 1.5rem; - left: 3rem; + left: 2rem; + bottom: 2rem; } } .block { padding: 1.25rem 0; .inner { + .intro { + margin-bottom: 1rem; + } .b-title { font-size: 1.5rem; } .block-pic { - height: 25rem; + height: auto; } .list { .wow { .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,79 +549,127 @@ export default { @media (min-width: 768px) and (max-width: 980px) { .wrap { /deep/ .el-carousel{ - height: 32rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 32rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 32rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 32rem !important; + height: 12rem !important; } .banner-name { - font-size: 2.5rem; + font-size: 1rem; line-height: 1.5rem; - left: 3rem; + left: 2rem; + bottom: 2rem; } } .block { padding: 1.25rem 0; .inner { + .intro { + margin-bottom: 1rem; + } .b-title { font-size: 1.5rem; } .block-pic { - height: 28rem; + height: auto; } .list { .wow { .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; + + } } } } } } } -@media (min-width: 980px) and (max-width: 1200px) { +@media (min-width: 980px) and (max-width: 1200px) { .wrap { /deep/ .el-carousel{ - height: 35rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 35rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 35rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 35rem !important; + height: 12rem !important; } .banner-name { - font-size: 2.5rem; + font-size: 1rem; line-height: 1.5rem; - left: 3rem; + left: 2rem; + bottom: 2rem; } } .block { padding: 1.25rem 0; .inner { + .intro { + margin-bottom: 1rem; + } .b-title { font-size: 1.5rem; } .block-pic { - height: 32rem; + height: auto; } .list { .wow { .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; + + } } } } diff --git a/src/pages/exp/index.vue b/src/pages/exp/index.vue index b078f1d..79984fc 100644 --- a/src/pages/exp/index.vue +++ b/src/pages/exp/index.vue @@ -95,12 +95,31 @@ export default { @import "../../styles/page/page.scss"; .wrap{ /deep/ .el-carousel { - height: 30rem; + height: 12.6rem; .el-carousel__container{ - height: 30rem; + height: 12.6rem; } 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; } .pic { - width: 80%; - height: 500px; + width: 64%; + height: auto; margin: 0 auto; } .des { - margin-top: 55px; - font-size: 1rem; + margin-top: 2.75rem; + font-size: .98rem; color: #333; - line-height: 34px; - overflow: visible; + line-height: 1.7rem; } } .list { display: flex; flex-wrap: wrap; - margin-top: 30px; + margin-top: 1.5rem; + width: 1200px; + margin: auto; li { position: relative; - height: 542px; + height: 20.1rem; overflow: hidden; &:hover { img { @@ -156,7 +176,7 @@ export default { position: absolute; top: 192px; left: 60px; - font-size: 1.4rem; + font-size: 1.12rem; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #fff; @@ -177,27 +197,8 @@ export default { width: 28%; } } -@media (max-width: 1200px) { - body{ - 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) { + +@media (min-width: 280px) and (max-width: 768px) { .wrap{ /deep/ .el-carousel { height: 15rem; @@ -240,8 +241,7 @@ export default { height: 13rem !important; } .banner-name { - left: 11rem; - top: 8rem; + padding: 7rem 0 0 1rem; font-size: 1.5rem; } } @@ -252,14 +252,17 @@ export default { .text-center { .pic { width: 100%; - height: 13rem; + height: auto; } } } } .list { + width: 80%; + margin: 0 auto; li { + margin-top: 1rem; width: 100% !important; } } @@ -267,22 +270,21 @@ export default { @media (min-width: 320px) and (max-width: 375px) { .wrap { /deep/ .el-carousel { - height: 15rem !important; + height: 13rem !important; } /deep/ .el-carousel__item { - height: 15rem !important; + height: 13rem !important; } /deep/ .el-carousel__container { - height: 15rem !important; + height: 13rem !important; } } .banner-item{ img { - height: 15rem !important; + height: 13rem !important; } .banner-name { - left: 10rem; - top: 10rem; + padding: 7rem 0 0 1rem; font-size: 1.5rem; } } @@ -293,37 +295,39 @@ export default { .text-center { .pic { width: 100%; - height: 13rem; + height: auto; } } } } .list { + width: 80%; + margin: 0 auto; li { + margin-top: 1rem; width: 100% !important; } } - } +} @media (min-width: 375px) and (max-width: 480px) { .wrap { /deep/ .el-carousel { - height: 20rem !important; + height: 13rem !important; } /deep/ .el-carousel__item { - height: 20rem !important; + height: 13rem !important; } /deep/ .el-carousel__container { - height: 20rem !important; + height: 13rem !important; } } .banner-item{ img { - height: 20rem !important; + height: 13rem !important; } .banner-name { - left: 15rem; - top: 13rem; + padding: 7rem 0 0 1rem; font-size: 1.5rem; } } @@ -334,14 +338,17 @@ export default { .text-center { .pic { width: 100%; - height: 18rem; + height: auto; } } } } .list { + width: 80%; + margin: 0 auto; li { + margin-top: 1rem; width: 100% !important; } } @@ -349,22 +356,21 @@ export default { @media (min-width: 480px) and (max-width: 640px) { .wrap { /deep/ .el-carousel { - height: 25rem !important; + height: 13rem !important; } /deep/ .el-carousel__item { - height: 25rem !important; + height: 13rem !important; } /deep/ .el-carousel__container { - height: 25rem !important; + height: 13rem !important; } } .banner-item{ img { - height: 25rem !important; + height: 13rem !important; } .banner-name { - left: 22rem; - top: 15rem; + padding: 7rem 0 0 1rem; font-size: 1.5rem; } } @@ -375,14 +381,17 @@ export default { .text-center { .pic { width: 100%; - height: 22rem; + height: auto; } } } } .list { + width: 80%; + margin: 0 auto; li { + margin-top: 1rem; width: 100% !important; } } @@ -390,22 +399,21 @@ export default { @media (min-width: 640px) and (max-width: 768px) { .wrap { /deep/ .el-carousel { - height: 25rem !important; + height: 13rem !important; } /deep/ .el-carousel__item { - height: 25rem !important; + height: 13rem !important; } /deep/ .el-carousel__container { - height: 25rem !important; + height: 13rem !important; } } .banner-item{ img { - height: 25rem !important; + height: 13rem !important; } .banner-name { - left: 22rem; - top: 15rem; + padding: 7rem 0 0 1rem; font-size: 1.5rem; } } @@ -416,14 +424,17 @@ export default { .text-center { .pic { width: 100%; - height: 22rem; + height: auto; } } } } .list { + width: 80%; + margin: 0 auto; li { + margin-top: 1rem; width: 100% !important; } } @@ -431,23 +442,22 @@ export default { @media (min-width: 768px) and (max-width: 980px) { .wrap { /deep/ .el-carousel { - height: 28rem !important; + height: 13rem !important; } /deep/ .el-carousel__item { - height: 28rem !important; + height: 13rem !important; } /deep/ .el-carousel__container { - height: 28rem !important; + height: 13rem !important; } } .banner-item{ img { - height: 28rem !important; + height: 13rem !important; } .banner-name { - left: 34rem; - top: 22rem; - font-size: 2.5rem; + padding: 7rem 0 0 1rem; + font-size: 1.5rem; } } .block { @@ -457,38 +467,42 @@ export default { .text-center { .pic { width: 100%; - height: 25rem; + height: auto; } } } } .list { + display: flex; + width: 100%; li { - width: 100% !important; + width: 25% ; } } + .item3 { + width: 50% !important; + } } @media (min-width: 980px) and (max-width: 1200px) { .wrap { /deep/ .el-carousel { - height: 32rem !important; + height: 13rem !important; } /deep/ .el-carousel__item { - height: 32rem !important; + height: 13rem !important; } /deep/ .el-carousel__container { - height: 32rem !important; + height: 13rem !important; } } .banner-item{ img { - height: 32rem !important; + height: 13rem !important; } .banner-name { - left: 39rem; - top: 22rem; - font-size: 2.5rem; + padding: 7rem 0 0 1rem; + font-size: 1.5rem; } } .block { @@ -498,11 +512,21 @@ export default { .text-center { .pic { width: 100%; - height: 32rem; + height: auto; } } } } + .list { + display: flex; + width: 100%; + li { + width: 25% ; + } + } + .item3 { + width: 50% !important; + } } \ No newline at end of file diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue index 1ea460e..e9b2a82 100644 --- a/src/pages/home/index.vue +++ b/src/pages/home/index.vue @@ -177,15 +177,24 @@ export default { @import url(../../plugins/wow/animate.css); @import "../../styles/page/page.scss"; .carousel{ - height: 59.93rem; + height: 76.93rem; img{ height: 100%; } /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 { display: flex; justify-content: space-between; @@ -198,20 +207,20 @@ export default { } .pic { width: 100%; - height: 25rem; + height: auto; } .texts { padding-left: 1.375rem; - margin-top: 3.75rem; + margin-top: 3rem; border-left: 2px solid #DFE4E9; } h6 { margin-bottom: 1.56rem; - font-size: 1.71rem; + font-size: 1.368rem; color: #333; } .des { - font-size: 1.28rem; + font-size: 1.024rem; color: #222; line-height: 30px; } @@ -288,20 +297,20 @@ export default { } .pic { width: 47%; - height: 29.06rem; + height: auto; transition: .3s; } .texts { width: 48%; - padding-top: 9.375rem; + padding-top: 8.5rem; transition: .3s; } h6 { - font-size: 2.75rem; + font-size: 1.8rem; } .des { margin: 20px 0 10px; - font-size: 1.28rem; + font-size: 1.2rem; color: #020202; line-height: 30px; } @@ -331,17 +340,18 @@ export default { .num { margin-bottom: 10px; font-family: toppan; - font-size: 4.28rem; + font-size: 2.7rem; font-weight: 800; color: #035CE1; line-height: 49px; } .text { - font-size: 1.71rem; + font-size: 1.08rem; + margin-top: 1rem; } } .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-size: 100% 100%; .line { @@ -358,14 +368,14 @@ export default { } } .text { - font-size: 2.14rem; + font-size: 1.35rem; color: #fff; } .des { display: block; padding: 2.375rem 3.75rem; - margin-top: 5.25rem; - font-size: 2rem; + margin-top: 3.78rem; + font-size: 1.35rem; color: #fff; line-height: 42px; text-align: center; @@ -519,15 +529,31 @@ export default { } } .block { + padding: 1rem 0; .inner { + .b-title { + font-size: 1.3rem; + } + .intro { + margin-bottom: 1rem; + font-size: .95rem; + line-height: 1rem; + } .card { li { .pic { - height: 13rem; + height: auto; } .texts { 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 { li { .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) { .wrap { /deep/ .el-carousel{ - height: 18rem; + height: 15rem; } /deep/ .el-carousel__container{ - height: 18rem; + height: 15rem; } /deep/ .el-carousel__item { - height: 18rem; + height: 15rem; img{ - height: 18rem; + height: 15rem; } } } .block { + padding: 1rem 0; .inner { + .intro { + margin-bottom: 1rem; + font-size: .95rem; + line-height: 1rem; + } .card { li { .pic { - height: 13rem; + height: auto; } .texts { margin-top: 1.2rem; @@ -590,36 +634,48 @@ export default { .people { li { .pic { - height: 15rem; + height: auto; } } } } } - + .about { + .inner { + .des { + line-height: 1.5rem; + } + } + } } @media (min-width: 375px) and (max-width: 480px) { .wrap { /deep/ .el-carousel{ - height: 20rem; + height: 15rem; } /deep/ .el-carousel__container{ - height: 20rem; + height: 15rem; } /deep/ .el-carousel__item { - height: 20rem; + height: 15rem; img{ - height: 20rem; + height: 15rem; } } } .block { + padding: 1rem 0; .inner { + .intro { + margin-bottom: 1rem; + font-size: .95rem; + line-height: 1rem; + } .card { li { .pic { - height: 13rem; + height: auto; } .texts { margin-top: 1.2rem; @@ -638,36 +694,48 @@ export default { .people { li { .pic { - height: 15rem; + height: auto; } } } } } - + .about { + .inner { + .des { + line-height: 1.5rem; + } + } + } } @media (min-width: 480px) and (max-width: 640px) { .wrap { /deep/ .el-carousel{ - height: 20rem; + height: 18rem; } /deep/ .el-carousel__container{ - height: 20rem; + height: 18rem; } /deep/ .el-carousel__item { - height: 20rem; + height: 18rem; img{ - height: 20rem; + height: 18rem; } } } .block { + padding: 1rem 0; .inner { + .intro { + margin-bottom: 1rem; + font-size: .95rem; + line-height: 1rem; + } .card { li { .pic { - height: 18rem; + height: auto; } .texts { margin-top: 1.2rem; @@ -679,43 +747,53 @@ export default { li { padding: 1.2rem; img{ - width: 10rem; + width: 8rem; } } } .people { li { .pic { - height: 20rem; + height: auto; } } } + .about { + .des { + line-height: 1.5rem; + } + } } } - } @media (min-width: 640px) and (max-width: 768px) { .wrap { /deep/ .el-carousel{ - height: 25rem; + height: 20rem; } /deep/ .el-carousel__container{ - height: 25rem; + height: 20rem; } /deep/ .el-carousel__item { - height: 25rem; + height: 20rem; img{ - height: 25rem; + height: 20rem; } } } .block { + padding: 1rem 0; .inner { + .intro { + margin-bottom: 1rem; + font-size: .95rem; + line-height: 1rem; + } .card { li { .pic { - height: 22rem; + height: auto; } .texts { margin-top: 1.2rem; @@ -727,43 +805,62 @@ export default { li { padding: 1.2rem; img{ - width: 10rem; + width: 8rem; } } } .people { li { .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) { .wrap { /deep/ .el-carousel{ - height: 27rem; + height: 22rem; } /deep/ .el-carousel__container{ - height: 27rem; + height: 22rem; } /deep/ .el-carousel__item { - height: 27rem; + height: 22rem; img{ - height: 27rem; + height: 22rem; } } } .block { + padding: 1rem 0; .inner { + .intro { + margin-bottom: 1rem; + font-size: .95rem; + line-height: 1rem; + } .card { + flex-direction: row; li { + + width: 47%; .pic { - height: 22rem; + height: auto; } .texts { margin-top: 1.2rem; @@ -775,42 +872,70 @@ export default { li { padding: 1.2rem; img{ - width: 10rem; + width: 8rem; } } } .people { li { + flex-direction: row; + &:nth-child(2) { + flex-direction: row-reverse !important; + } .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) { .wrap { /deep/ .el-carousel{ - height: 30rem; + height: 25rem; } /deep/ .el-carousel__container{ - height: 30rem; + height: 25rem; } /deep/ .el-carousel__item { - height: 30rem; + height: 25rem; img{ - height: 30rem; + height: 25rem; } } } .block { + padding: 1rem 0; .inner { + .intro { + margin-bottom: 1rem; + font-size: .95rem; + line-height: 1rem; + } .card { + flex-direction: row; li { + + width: 47%; .pic { - height: 28rem; + height: auto; } .texts { margin-top: 1.2rem; @@ -822,15 +947,33 @@ export default { li { padding: 1.2rem; img{ - width: 10rem; + width: 8rem; } } } .people { li { + flex-direction: row; + &:nth-child(2) { + flex-direction: row-reverse !important; + } .pic { - height: 35rem; + width: 47%; + height: auto; } + .texts { + width: 48%; + } + } + } + .about { + .des { + } + } + .stat { + flex-direction: row; + li { + width: 30%; } } } diff --git a/src/pages/news/index.vue b/src/pages/news/index.vue index d46b42a..47b7495 100644 --- a/src/pages/news/index.vue +++ b/src/pages/news/index.vue @@ -11,16 +11,18 @@ - +
+ +
- +
{{ curArticle.title }}
@@ -298,23 +300,37 @@ export default { @import "../../styles/page/page.scss"; .wrap{ /deep/ .el-carousel { - height: 30rem; + height: 24rem; .el-carousel__container{ - height: 30rem; + height: 24rem; } img{ - height: 30rem; + height: 24rem; } } } +.banner-item { + .banner-name { + font-size: 1.6rem; + } +} +.block { + padding: 3.85rem 0; +} .tabs { - display: flex; - justify-content: center; box-shadow: 0px 2px 14px 0px rgba(167,167,167,0.26); + .scollBox { + width: 85.714rem; + margin: auto; + display: flex; + justify-content: center; + } li { - padding: 1.5625rem 1.1875rem; + flex: 1; + text-align: center; + padding: 1.25rem .95rem; margin: 0 10px; - font-size: 1.375rem; + font-size: 1.1rem; color: #333; border-bottom: 4px solid transparent; text-shadow: 0px 2px 14px rgba(167,167,167,0.26); @@ -326,7 +342,7 @@ export default { } } .lg { - width: 94.0625rem; + width: 85.714rem; } /deep/.articles { width: 50%; @@ -335,9 +351,17 @@ export default { left: 50.25rem; } } +.lg { + .intro { + margin-bottom: 4.57rem; + } +} .news-banner { display: flex; cursor: pointer; + .titileImg { + height: auto; + } .pic { width: 43.75rem; height: 23.75rem; @@ -345,7 +369,7 @@ export default { .right { position: relative; width: 50%; - padding: 3.125rem 3.125rem 1.875rem; + padding: 2.5rem 2.5rem 1.5rem; background: #1583FF; color: #fff; &:hover { @@ -376,29 +400,29 @@ export default { } } h6 { - font-size: 1.5rem; + font-size: 1.2rem; transition: .3s; } .des { - margin: 1.875rem 0; - font-size: 1rem; - line-height: 24px; + margin: 1.5rem 0; + font-size: .88rem; + line-height: 1.3714rem; transition: .3s; } .meta { - font-size: 1rem; + font-size: .88rem; transition: .3s; } } .card { display: flex; flex-wrap: wrap; - margin-top: 2.5rem; + margin-top: 2rem; width: 100%; li { - width: calc((100% - 3.5rem) / 3); - margin-right: 1rem; + flex: 1; + margin-right: .88rem; box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21); border-radius: 6px; transition: .3s; @@ -411,13 +435,13 @@ export default { } .pic { width: 100%; - height: 15rem; + height: auto; } .texts { - padding: 2.5rem 1.875rem; + padding: 2rem 1.5rem; } .meta { - font-size: 1rem; + font-size: .88rem; color: #666; } .des { @@ -427,7 +451,7 @@ export default { font-family: SFProDisplay; font-weight: 500; color: #333; - line-height: 28px; + line-height: 1.7rem; -webkit-line-clamp: 2; } .arrow { @@ -455,26 +479,27 @@ export default { overflow: hidden; .pic { transition: .3s; + height: auto; &:hover { transform: scale(1.05); } } .texts { - padding: 2.5rem 1.875rem; + padding: 2rem 1.5rem; } h6 { - font-size: 1.5rem; + font-size: 1.2rem; color: #272727; } .des { margin-top: 10px; - font-size: 1rem; + font-size: .88rem; color: #666; - line-height: 30px; + line-height: 1.714rem; } } .right { - width: 51.5rem; + width: 60%; overflow: hidden; } .show-card { @@ -482,9 +507,10 @@ export default { margin-bottom: 1.25rem; li { position: relative; - height: 197px; + height: auto; overflow: hidden; cursor: pointer; + &:first-child { margin-right: 1.375rem; } @@ -502,7 +528,7 @@ export default { bottom: 0; left: 0; width: 100%; - font-size: 1rem; + font-size: .88rem; color: #fff; line-height: 48px; text-align: center; @@ -512,12 +538,12 @@ export default { } } .card-list { - padding: 2.125rem 1.625rem; + padding: 1.7rem 1.3rem; background-color: #fff; li { display: inline-flex; align-items: center; - margin-bottom: 2.375rem; + margin-bottom: 1.9rem; transition: .3s; &:hover { transform: scale(1.05); @@ -527,23 +553,23 @@ export default { } } .pic { - width: 7.25rem; - height: 5.3125rem; + width: 11.25rem; + height: auto; margin-right: 1.75rem; } .texts { - width: 31.5rem; + width: 24.5rem; margin-right: 3.75rem; } h6 { margin-bottom: 10px; - font-size: 1.25rem; + font-size: 1rem; color: #272727; } .des { - font-size: .875rem; + font-size: .7rem; color: #666; - line-height: 24px; + line-height: 1.3714rem; text-shadow: 0px 0px 30px rgba(48,48,48,0.08); -webkit-line-clamp: 2; } @@ -568,49 +594,50 @@ export default { cursor: pointer; .pic { transition: .3s; + height: auto; &:hover { transform: scale(1.05); } } .texts { display: flex; - padding: 2.5rem 1.875rem; + padding: 2rem 1.5rem; } .meta { - padding: 10px 23px 10px 0; - margin-right: 32px; + padding: .5714rem 1.314rem .5714rem 0; + margin-right: 1.828rem; text-align: center; border-right: 1px solid #ddd; } .date { - font-size: 45px; + font-size: 2.5714rem; font-family: DINAlternate-Bold, DINAlternate; font-weight: bold; color: #1F1F1F; - line-height: 52px; + line-height: 2.9714rem; } .year { - font-size: 16px; + font-size: 0.9142rem; white-space: nowrap; color: #666; } h6 { - font-size: 20px; + font-size: 1.1428rem; color: #272727; } .des { margin-top: 10px; - font-size: 14px; + font-size: .8rem; color: #666; - line-height: 24px; + line-height: 1.3714rem; } } .card-list { - width: 754px; + width: 50%; li { display: flex; - padding: 15px; - margin-bottom: 13px; + padding: 0.8571rem; + margin-bottom: 0.7428rem; background-color: #fff; cursor: pointer; transition: .3s; @@ -622,13 +649,13 @@ export default { } } .pic { - width: 188px; - height: 147px; - margin-right: 28px; + width: 10.7428rem; + height: auto; + margin-right: 1.6rem; } h6 { - margin-bottom: 10px; - font-size: 20px; + margin-bottom: 0.5714rem; + font-size: 1.1428rem; color: #333; } .text { @@ -644,11 +671,7 @@ export default { } } } -@media (max-width: 1520px) { - .lg { - width: 98%; - } -} + @media (max-width: 1200px) { @@ -844,30 +867,40 @@ export default { @media (max-width: 320px) { .wrap { /deep/ .el-carousel{ - height: 13rem; + height: 12rem; } /deep/ .el-carousel__container{ - height: 13rem; + height: 12rem; } /deep/ .el-carousel__item { - height: 13rem; + height: 12rem; } } .banner-item{ img { - height: 13rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; + } + } + .tabs { + .scollBox { + width: auto; + li { + padding: 1rem; + white-space: nowrap; + } } } .block { .inner { .news-banner { img { - height: 16rem; + height: auto; } .right { padding: 1.25rem 1.25rem 5rem; @@ -876,14 +909,14 @@ export default { .card { li { .pic { - height: 13rem; + height: auto; } } } .shop-shows { .left { .pic { - height: 13rem; + height: auto; } .texts { padding: 1.25rem; @@ -894,7 +927,7 @@ export default { li { margin-top: 1.25rem; .pic { - height: 13rem; + height: auto; } .text { font-size: 1rem; @@ -913,7 +946,7 @@ export default { .shows { .left{ .pic { - height: 13rem; + height: auto; } .texts { padding: 1.25rem; @@ -922,34 +955,58 @@ export default { } } } + .conference { + .inner { + .shows { + .card-list { + li { + .pic { + height: auto !important; + } + } + + } + } + } + } } @media (min-width: 320px) and (max-width: 375px) { .wrap { /deep/ .el-carousel{ - height: 15rem; + height: 12rem; } /deep/ .el-carousel__container{ - height: 15rem; + height: 12rem; } /deep/ .el-carousel__item { - height: 15rem; + height: 12rem; } } .banner-item{ img { - height: 15rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; + } + } + .tabs { + .scollBox { + width: auto; + li { + padding: 1rem; + white-space: nowrap; + } } } .block { .inner { .news-banner { img { - height: 16rem; + height: auto; } .right { padding: 1.25rem 1.25rem 5rem; @@ -958,14 +1015,14 @@ export default { .card { li { .pic { - height: 15rem; + height: auto; } } } .shop-shows { .left { .pic { - height: 15rem; + height: auto; } .texts { padding: 1.25rem; @@ -976,7 +1033,7 @@ export default { li { margin-top: 1.25rem; .pic { - height: 13rem; + height: auto; } .text { font-size: 1rem; @@ -995,7 +1052,7 @@ export default { .shows { .left{ .pic { - height: 15rem; + height: auto; } .texts { padding: 1.25rem; @@ -1004,34 +1061,58 @@ export default { } } } + .conference { + .inner { + .shows { + .card-list { + li { + .pic { + height: auto !important; + } + } + + } + } + } + } } @media (min-width: 375px) and (max-width: 480px) { .wrap { /deep/ .el-carousel{ - height: 18rem; + height: 12rem; } /deep/ .el-carousel__container{ - height: 18rem; + height: 12rem; } /deep/ .el-carousel__item { - height: 18rem; + height: 12rem; } } .banner-item{ img { - height: 18rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; + } + } + .tabs { + .scollBox { + width: auto; + li { + padding: 1rem; + white-space: nowrap; + } } } .block { .inner { .news-banner { img { - height: 18rem; + height: auto; } .right { padding: 1.25rem 1.25rem 5rem; @@ -1040,14 +1121,14 @@ export default { .card { li { .pic { - height: 17rem; + height: auto; } } } .shop-shows { .left { .pic { - height: 18rem; + height: auto; } .texts { padding: 1.25rem; @@ -1058,7 +1139,7 @@ export default { li { margin-top: 1.25rem; .pic { - height: 15rem; + height: auto; } .text { font-size: 1rem; @@ -1068,7 +1149,7 @@ export default { .card-list { li { .pic { - // width: 6rem; + width: 30%; } } } @@ -1077,19 +1158,27 @@ export default { .shows { .left{ .pic { - height: 18rem; + height: auto; } .texts { padding: 1.25rem; } } + } + } + } + .conference { + .inner { + .shows { .card-list { - li { - .pic { - width: 8rem; + li { + .pic { + width: 35%; + height: auto !important; + } } + } - } } } } @@ -1097,30 +1186,40 @@ export default { @media (min-width: 480px) and (max-width: 640px) { .wrap { /deep/ .el-carousel{ - height: 22rem; + height: 12rem; } /deep/ .el-carousel__container{ - height: 22rem; + height: 12rem; } /deep/ .el-carousel__item { - height: 22rem; + height: 12rem; } } .banner-item{ img { - height: 22rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; + } + } + .tabs { + .scollBox { + width: auto; + li { + padding: 1rem; + white-space: nowrap; + } } } .block { .inner { .news-banner { img { - height: 20rem; + height: auto; } .right { padding: 1.25rem 1.25rem 5rem; @@ -1129,14 +1228,14 @@ export default { .card { li { .pic { - height: 22rem; + height: auto; } } } .shop-shows { .left { .pic { - height: 22rem; + height: auto; } .texts { padding: 1.25rem; @@ -1144,12 +1243,10 @@ export default { } .right { .show-card { - li { margin-top: 1.25rem; - height: 20rem; .pic { - height: 20rem; + height: auto; } .text { font-size: 1rem; @@ -1159,7 +1256,7 @@ export default { .card-list { li { .pic { - // width: 6rem; + width: 30%; } } } @@ -1168,19 +1265,27 @@ export default { .shows { .left{ .pic { - height: 20rem; + height: auto; } .texts { padding: 1.25rem; } } + } + } + } + .conference { + .inner { + .shows { .card-list { - li { - .pic { - width: 10rem; + li { + .pic { + width: 35%; + height: auto !important; + } } + } - } } } } @@ -1188,99 +1293,126 @@ export default { @media (min-width: 640px) and (max-width: 768px) { .wrap { /deep/ .el-carousel{ - height: 25rem; + height: 12rem; } /deep/ .el-carousel__container{ - height: 25rem; + height: 12rem; } /deep/ .el-carousel__item { - height: 25rem; + height: 12rem; } } .banner-item{ img { - height: 25rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; + } + } + .tabs { + .scollBox { + width: auto; + li { + padding: 1rem; + white-space: nowrap; + } } } .block { .inner { .news-banner { + flex-direction: row; img { - height: 25rem; + width: 50%; + height: auto; } .right { + margin-top: 0; padding: 1.25rem 1.25rem 5rem; } } .card { + flex-direction: row; li { + width: 30% !important; + margin-right: .5rem; + margin: 0 .5rem 0 0 !important; .pic { - height: 25rem; + height: auto; + } + &:last-child() { + margin-right: 0 !important; } } + } .shop-shows { + flex-direction: row; .left { + margin-right: .5rem; .pic { - height: 25rem; + height: auto; } .texts { padding: 1.25rem; } } .right { + margin-top: 0; .show-card { - li { - margin-top: 1.25rem; - height: 22rem; .pic { - height: 22rem; + height: auto; } .text { font-size: 1rem; } + &:nth-child(2) { + margin-top: .5rem; + } } } .card-list { li { .pic { - // width: 6rem; + width: 30%; } } } } } - - .shop-shows { - .card-list { - .pic { - width: 9.25rem; - height: 7.3125rem; - } - } - } .shows { + flex-direction: row; .left{ .pic { - height: 25rem; + height: auto; } .texts { padding: 1.25rem; } } .card-list { - li { - .pic { - width: 10rem; + padding: 0; + } + } + } + } + .conference { + .inner { + .shows { + .card-list { + li { + .pic { + width: 35%; + height: auto !important; + } } + } - } } } } @@ -1288,201 +1420,258 @@ export default { @media (min-width: 768px) and (max-width: 980px) { .wrap { /deep/ .el-carousel{ - height: 30rem; + height: 12rem; } /deep/ .el-carousel__container{ - height: 30rem; + height: 12rem; } /deep/ .el-carousel__item { - height: 30rem; + height: 12rem; } } .banner-item{ img { - height: 30rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; + } + } + .tabs { + .scollBox { + width: auto; + li { + padding: 1rem; + white-space: nowrap; + } } } .block { .inner { .news-banner { + flex-direction: row; img { - height: 30rem; + width: 50%; + height: auto; } .right { + margin-top: 0; padding: 1.25rem 1.25rem 5rem; } } .card { + flex-direction: row; li { + width: 30% !important; + margin-right: .5rem; + margin: 0 .5rem 0 0 !important; .pic { - height: 30rem; + height: auto; + } + &:last-child() { + margin-right: 0 !important; } } + } .shop-shows { + flex-direction: row; .left { + margin-right: .5rem; .pic { - height: 30rem; + height: auto; } .texts { padding: 1.25rem; } } .right { + margin-top: 0; .show-card { - li { - margin-top: 1.25rem; - height: 25rem; .pic { - height: 25rem; + height: auto; } .text { font-size: 1rem; } + &:nth-child(2) { + margin-top: .5rem; + } } } .card-list { li { .pic { - // width: 6rem; + width: 30%; } } } } } - - .shop-shows { - .card-list { - .pic { - width: 9.25rem; - height: 7.3125rem; - } - } - } .shows { + flex-direction: row; .left{ .pic { - height: 30rem; + height: auto; } .texts { padding: 1.25rem; } } .card-list { - li { - .pic { - width: 10rem; + padding: 0; + } + } + } + } + .conference { + .inner { + .shows { + .card-list { + li { + .pic { + width: 35%; + height: auto !important; + } } + } - } } } } + } @media (min-width: 980px) and (max-width: 1200px) { .wrap { /deep/ .el-carousel{ - height: 35rem; + height: 21.6rem; } /deep/ .el-carousel__container{ - height: 35rem; + height: 21.6rem; } /deep/ .el-carousel__item { - height: 35rem; + height: 21.6rem; } } .banner-item{ img { - height: 35rem !important; + height: 21.6rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; + } + } + .tabs { + .scollBox { + width: auto; + li { + padding: 1rem; + white-space: nowrap; + } } } .block { .inner { .news-banner { + flex-direction: row; img { - height: 35rem; + width: 50%; + height: auto; } .right { + margin-top: 0; padding: 1.25rem 1.25rem 5rem; } } .card { + flex-direction: row; li { + width: 30% !important; + margin-right: .5rem; + margin: 0 .5rem 0 0 !important; .pic { - height: 35rem; + height: auto; + } + &:last-child() { + margin-right: 0 !important; } } + } .shop-shows { + flex-direction: row; .left { + margin-right: .5rem; .pic { - height: 35rem; + height: auto; } .texts { padding: 1.25rem; } } .right { + margin-top: 0; .show-card { - + flex-direction: row; li { - margin-top: 1.25rem; - height: 30rem; .pic { - height: 30rem; + height: auto; } .text { font-size: 1rem; } + &:nth-child(2) { + margin-top: 0; + } } } .card-list { li { .pic { - // width: 6rem; + width: 30%; } } } } } - - .shop-shows { - .card-list { - .pic { - width: 9.25rem; - height: 7.3125rem; - } - } - } .shows { + flex-direction: row; .left{ .pic { - height: 35rem; + height: auto; } .texts { padding: 1.25rem; } } .card-list { - li { - .pic { - width: 10rem; + padding: 0; + } + } + } + } + .conference { + .inner { + .shows { + .card-list { + li { + .pic { + width: 35%; + height: auto !important; + } } + } - } } } } + } \ No newline at end of file diff --git a/src/pages/newsPress/index.vue b/src/pages/newsPress/index.vue index f530f03..885d390 100644 --- a/src/pages/newsPress/index.vue +++ b/src/pages/newsPress/index.vue @@ -102,67 +102,78 @@ export default { @import "../../styles/page/page.scss"; .wrap{ /deep/ .el-carousel { - height: 30rem; + height: 24rem; .el-carousel__container{ - height: 30rem; + height: 24rem; } img{ - height: 30rem; + height: 24rem; } } } +.banner-item { + .banner-name { + font-size: 1.6rem; + } +} +.block { + padding: 3.85rem 0; +} .inner { + /deep/ .el-breadcrumb__item { + font-size: 1.5rem; + } padding-top: 35px; } .list { - margin: 40px 0; + margin: 2rem 0; li { position: relative; &:nth-child(even) { text-align: right; .texts { left: 0; - padding: 60px 120px 30px 30px; + padding: 3rem 6rem 1.5rem 1.5rem; text-align: left; } } } .pic { width: 47%; - height: 730px; + height: auto; } .texts { position: absolute; - top: 120px; - right: -40px; + top: 6rem; + right: -2rem; width: 61%; - height: 440px; - padding: 60px 30px 30px 100px; + // height: 440px; + padding: 3rem 1.5rem 1.5rem 5rem; background: rgba(247, 247, 247, .72); - transition: .3s; - &:hover { - transform: scale(1.05); - } } h6 { - font-size: 40px; + font-size: 2rem; font-family: SFProDisplay-Bold, SFProDisplay; font-weight: bold; color: #3C3C3C; } .sub { - margin: 20px 0; - font-size: 24px; + margin: 1rem 0; + font-size: 1.2rem; font-weight: 600; font-family: PingFangSC-Semibold, PingFang SC; color: #1C1C1C; line-height: 33px; } .des { - margin-bottom: 20px; - font-size: 20px; + margin-bottom: 1rem; + font-size: 1rem; color: #3C3C3C; - line-height: 32px; + line-height: 1.6rem; + } + img { + width: 3.3rem; + height: 3.3rem; } } @media (max-width: 1520px) { @@ -259,30 +270,35 @@ export default { @media (max-width: 320px) { .wrap { /deep/ .el-carousel{ - height: 13rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 13rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 13rem !important; + height: 12rem !important; } } + .banner-item{ img { - height: 13rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; } } .inner { + /deep/ .el-breadcrumb__item { + font-size: 1rem; + } .list { li { .pic { - height: 15rem !important; + height: auto !important; } .texts { top: 1rem; @@ -307,42 +323,46 @@ export default { @media (min-width: 320px) and (max-width: 375px) { .wrap { /deep/ .el-carousel{ - height: 15rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 15rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 15rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 15rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; } } .inner { + /deep/ .el-breadcrumb__item { + font-size: 1rem; + } .list { li { .pic { - height: 15rem !important; + height: auto !important; } .texts { - top: 1rem; + top: 4rem; h6 { - font-size: 1rem !important; + font-size: 1.5rem !important; } .sub{ - font-size: .85rem; + font-size: 1.2rem; } .des { - font-size: .85rem; - line-height: .85rem; + font-size: 1rem; + line-height: 1rem; } img { width: 2rem;height: 2rem; @@ -355,42 +375,46 @@ export default { @media (min-width: 375px) and (max-width: 480px) { .wrap { /deep/ .el-carousel{ - height: 18rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 18rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 18rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 18rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; } } .inner { + /deep/ .el-breadcrumb__item { + font-size: 1rem; + } .list { li { .pic { - height: 18rem !important; + height: auto !important; } .texts { - top: 2.5rem; + top: 4rem; h6 { - font-size: 1rem !important; + font-size: 1.5rem !important; } .sub{ - font-size: .85rem; + font-size: 1.2rem; } .des { - font-size: .85rem; - line-height: .85rem; + font-size: 1rem; + line-height: 1rem; } img { width: 2rem;height: 2rem; @@ -403,45 +427,50 @@ export default { @media (min-width: 480px) and (max-width: 640px) { .wrap { /deep/ .el-carousel{ - height: 22rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 22rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 22rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 22rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; } } .inner { + /deep/ .el-breadcrumb__item { + font-size: 1rem; + } .list { li { .pic { - height: 22rem !important; + width: 47%; + height: auto !important; } .texts { - top: 2.5rem; + top: 2rem; h6 { - font-size: 1.8rem !important; + font-size: 1.5rem !important; } .sub{ - font-size: 1.3rem; + font-size: 1.2rem; } .des { - font-size: 1.3rem; - line-height: 1.3rem; + font-size: 1rem; + line-height: 1rem; } img { - width: 4rem;height: 4rem; + width: 2rem;height: 2rem; } } } @@ -451,45 +480,47 @@ export default { @media (min-width: 640px) and (max-width: 768px) { .wrap { /deep/ .el-carousel{ - height: 28rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 28rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 28rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 28rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; } } .inner { .list { li { .pic { - height: 28rem !important; + width: 47%; + height: auto !important; } .texts { - top: 3rem; + top: 4rem; h6 { font-size: 2rem !important; } .sub{ - font-size: 1.3rem; + font-size: 1.5rem; } .des { - font-size: 1.8rem; - line-height: 1.8rem; + font-size: 1.3rem; + line-height: 1.3rem; } img { - width: 5rem;height: 5rem; + width: 2rem;height: 2rem; } } } @@ -499,32 +530,48 @@ export default { @media (min-width: 768px) and (max-width: 980px) { .wrap { /deep/ .el-carousel{ - height: 32rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 32rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 32rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 32rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; } } .inner { .list { li { .pic { - height: 32rem !important; + width: 47%; + height: auto !important; } .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) { .wrap { /deep/ .el-carousel{ - height: 35rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 35rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 35rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 35rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; } } .inner { .list { li { .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; + } } } } diff --git a/src/pages/newsProcurement/index.vue b/src/pages/newsProcurement/index.vue index d422fda..f3c88f6 100644 --- a/src/pages/newsProcurement/index.vue +++ b/src/pages/newsProcurement/index.vue @@ -102,63 +102,78 @@ export default { @import "../../styles/page/page.scss"; .wrap{ /deep/ .el-carousel { - height: 30rem; + height: 24rem; .el-carousel__container{ - height: 30rem; + height: 24rem; } img{ - height: 30rem; + height: 24rem; } } } +.banner-item { + .banner-name { + font-size: 1.6rem; + } +} +.block { + padding: 3.85rem 0; +} .inner { padding-top: 35px; + /deep/ .el-breadcrumb__item { + font-size: 1.5rem; + } } .list { - margin: 40px 0; + margin: 2rem 0; li { position: relative; &:nth-child(even) { text-align: right; .texts { left: 0; - padding: 60px 120px 30px 30px; + padding: 3rem 6rem 1.5rem 1.5rem; text-align: left; } } } .pic { width: 47%; - height: 730px; + height: auto; } .texts { position: absolute; - top: 120px; - right: -40px; + top: 6rem; + right: -2rem; width: 61%; - height: 440px; - padding: 60px 30px 30px 100px; + // height: 440px; + padding: 3rem 1.5rem 1.5rem 5rem; background: rgba(247, 247, 247, .72); } h6 { - font-size: 40px; + font-size: 2rem; font-family: SFProDisplay-Bold, SFProDisplay; font-weight: bold; color: #3C3C3C; } .sub { - margin: 20px 0; - font-size: 24px; + margin: 1rem 0; + font-size: 1.2rem; font-weight: 600; font-family: PingFangSC-Semibold, PingFang SC; color: #1C1C1C; line-height: 33px; } .des { - margin-bottom: 20px; - font-size: 20px; + margin-bottom: 1rem; + font-size: 1rem; color: #3C3C3C; - line-height: 32px; + line-height: 1.6rem; + } + img { + width: 3.3rem; + height: 3.3rem; } } @media (max-width: 1520px) { @@ -256,30 +271,35 @@ export default { @media (max-width: 320px) { .wrap { /deep/ .el-carousel{ - height: 13rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 13rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 13rem !important; + height: 12rem !important; } } + .banner-item{ img { - height: 13rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; } } .inner { + /deep/ .el-breadcrumb__item { + font-size: 1rem; + } .list { li { .pic { - height: 15rem !important; + height: auto !important; } .texts { top: 1rem; @@ -304,42 +324,46 @@ export default { @media (min-width: 320px) and (max-width: 375px) { .wrap { /deep/ .el-carousel{ - height: 15rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 15rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 15rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 15rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; } } .inner { + /deep/ .el-breadcrumb__item { + font-size: 1rem; + } .list { li { .pic { - height: 15rem !important; + height: auto !important; } .texts { - top: 1rem; + top: 4rem; h6 { - font-size: 1rem !important; + font-size: 1.5rem !important; } .sub{ - font-size: .85rem; + font-size: 1.2rem; } .des { - font-size: .85rem; - line-height: .85rem; + font-size: 1rem; + line-height: 1rem; } img { width: 2rem;height: 2rem; @@ -352,42 +376,46 @@ export default { @media (min-width: 375px) and (max-width: 480px) { .wrap { /deep/ .el-carousel{ - height: 18rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 18rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 18rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 18rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; } } .inner { + /deep/ .el-breadcrumb__item { + font-size: 1rem; + } .list { li { .pic { - height: 18rem !important; + height: auto !important; } .texts { - top: 2.5rem; + top: 4rem; h6 { - font-size: 1rem !important; + font-size: 1.5rem !important; } .sub{ - font-size: .85rem; + font-size: 1.2rem; } .des { - font-size: .85rem; - line-height: .85rem; + font-size: 1rem; + line-height: 1rem; } img { width: 2rem;height: 2rem; @@ -400,45 +428,50 @@ export default { @media (min-width: 480px) and (max-width: 640px) { .wrap { /deep/ .el-carousel{ - height: 22rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 22rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 22rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 22rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; } } .inner { + /deep/ .el-breadcrumb__item { + font-size: 1rem; + } .list { li { .pic { - height: 22rem !important; + width: 47%; + height: auto !important; } .texts { - top: 2.5rem; + top: 2rem; h6 { - font-size: 1.8rem !important; + font-size: 1.5rem !important; } .sub{ - font-size: 1.3rem; + font-size: 1.2rem; } .des { - font-size: 1.3rem; - line-height: 1.3rem; + font-size: 1rem; + line-height: 1rem; } img { - width: 4rem;height: 4rem; + width: 2rem;height: 2rem; } } } @@ -448,45 +481,47 @@ export default { @media (min-width: 640px) and (max-width: 768px) { .wrap { /deep/ .el-carousel{ - height: 28rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 28rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 28rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 28rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; } } .inner { .list { li { .pic { - height: 28rem !important; + width: 47%; + height: auto !important; } .texts { - top: 3rem; + top: 4rem; h6 { font-size: 2rem !important; } .sub{ - font-size: 1.3rem; + font-size: 1.5rem; } .des { - font-size: 1.8rem; - line-height: 1.8rem; + font-size: 1.3rem; + line-height: 1.3rem; } img { - width: 5rem;height: 5rem; + width: 2rem;height: 2rem; } } } @@ -496,32 +531,48 @@ export default { @media (min-width: 768px) and (max-width: 980px) { .wrap { /deep/ .el-carousel{ - height: 32rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 32rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 32rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 32rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; } } .inner { .list { li { .pic { - height: 32rem !important; + width: 47%; + height: auto !important; } .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) { .wrap { /deep/ .el-carousel{ - height: 35rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 35rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 35rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 35rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; } } .inner { .list { li { .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; + } } } } diff --git a/src/pages/overviewDevHistory/index.vue b/src/pages/overviewDevHistory/index.vue index ef16598..735f710 100644 --- a/src/pages/overviewDevHistory/index.vue +++ b/src/pages/overviewDevHistory/index.vue @@ -75,14 +75,26 @@ export default { 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; } +.single-banner { + .banner-img { + height: 24rem; + } + .texts { + top: auto !important; + bottom: 2rem; + h6 { + font-size: 2.16rem + } + } +} .tabs { display: flex; justify-content: center; box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28); li { - padding: 25px 19px; - margin: 0 10px; - font-size: 1.1rem; + padding: 1.25rem .95rem; + margin: 0 .5rem; + font-size: 1.05rem; color: #333; border-bottom: 4px solid transparent; text-shadow: 0px 2px 14px rgba(167,167,167,0.26); @@ -94,16 +106,17 @@ export default { } } .history { + padding: 3.85rem 0; h2 { position: relative; - font-size: 2.2rem; + font-size: 1.75rem; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #1C1C1C; } .en { - margin: -15px 0 40px; - font-size: 2.2rem; + margin: 0 0 2rem; + font-size: 1.75rem; font-family: PingFangSC-Light, PingFang SC; font-weight: 300; color: #E3E3E3; @@ -113,18 +126,18 @@ export default { display: flex; justify-content: center; .time { - width: 200px; - padding-right: 10px; - margin-right: 20px; + width: 12.5rem; + padding-right: .625rem; + margin-right: 1.25rem; + flex-shrink: 1; border-right: 1px solid #ddd; li { display: flex; - justify-content: flex-end; + justify-content: center; align-items: center; - width: 190px; - padding-right: 45px; - line-height: 60px; - font-size: 1.4rem; + padding-right: 2.25rem; + line-height: 3rem; + font-size: 1.32rem; font-weight: 600; font-family: SFProDisplay-Semibold, SFProDisplay; color: #666; @@ -145,11 +158,12 @@ export default { } } .right { - width: 1000px; + // width: 1000px; + flex-grow: 1; } .year { - margin: 0 0 20px 20px; - font-size: 3.8rem; + margin: 0 0 1rem 1rem; + font-size: 2.35rem; font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN; font-weight: 800; color: #1A81F4; @@ -160,21 +174,21 @@ export default { display: flex; justify-content: space-between; align-items: center; - padding: 30px; + padding: 1.5rem; border-bottom: 1px solid #ddd; } .texts { - width: 500px; + width: 31.25rem; } .date { - margin-bottom: 15px; - font-size: 1.2rem; + margin-bottom: .75rem; + font-size: 1.26rem; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #333; } .text { - font-size: 1.1rem; + font-size: 1.08rem; color: #333; @include mul-ellipsis(3); &:before { @@ -188,8 +202,8 @@ export default { } } .pic { - width: 350px; - height: 195px; + width: 17.5rem; + height: 9.75rem; } } } @@ -264,18 +278,24 @@ export default { @media (max-width: 320px) { .wrap { .banner-img { - height: 15rem; + height: 12rem; } .single-banner { .texts { - top: 11rem !important; - left: 8rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { font-size: 1.5rem; } } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } .block { .inner { .event { @@ -284,7 +304,7 @@ export default { li { .pic { width: 100%; - height: 13rem; + height: 9.75rem; } } } @@ -296,18 +316,24 @@ export default { @media (min-width: 320px) and (max-width: 375px) { .wrap { .banner-img { - height: 15rem; + height: 12rem; } .single-banner { .texts { - top: 11rem !important; - left: 10rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { font-size: 1.5rem; } } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } .block { .inner { .event { @@ -316,7 +342,7 @@ export default { li { .pic { width: 100%; - height: 15rem; + height: 9.75rem; } } } @@ -324,24 +350,29 @@ export default { } } } - } @media (min-width: 375px) and (max-width: 480px) { .wrap { - .single-banner { - .banner-img { - height: 18rem; + .banner-img { + height: 12rem; } + .single-banner { .texts { - top: 14rem !important; - left: 14rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { font-size: 1.5rem; } } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } .block { .inner { .event { @@ -350,7 +381,7 @@ export default { li { .pic { width: 100%; - height: 18rem; + height: 9.75rem; } } } @@ -358,23 +389,28 @@ export default { } } } - } @media (min-width: 480px) and (max-width: 640px) { .wrap { - .single-banner { - .banner-img { - height: 18rem; + .banner-img { + height: 12rem; } + .single-banner { .texts { - top: 13rem !important; - left: 20rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { font-size: 1.5rem; } } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } .block { .inner { .event { @@ -383,7 +419,7 @@ export default { li { .pic { width: 100%; - height: 22rem; + height: 9.75rem; } } } @@ -391,23 +427,28 @@ export default { } } } - } @media (min-width: 640px) and (max-width: 768px) { .wrap { - .single-banner { - .banner-img { - height: 28rem; + .banner-img { + height: 12rem; } + .single-banner { .texts { - top: 20rem !important; - left: 30rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { - font-size: 1.8rem; + font-size: 1.5rem; } } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } .block { .inner { .event { @@ -416,7 +457,7 @@ export default { li { .pic { width: 100%; - height: 25rem; + height: 11.75rem; } } } @@ -424,23 +465,28 @@ export default { } } } - } @media (min-width: 768px) and (max-width: 980px) { .wrap { - .single-banner { - .banner-img { - height: 36rem; + .banner-img { + height: 12rem; } + .single-banner { .texts { - top: 25rem !important; - left: 38rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { - font-size: 2rem; + font-size: 1.5rem; } } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } .block { .inner { .event { @@ -449,7 +495,7 @@ export default { li { .pic { width: 100%; - height: 28rem; + height: auto } } } @@ -457,23 +503,28 @@ export default { } } } - } @media (min-width: 980px) and (max-width: 1200px) { .wrap { - .single-banner { - .banner-img { - height: 40rem; + .banner-img { + height: 12rem; } + .single-banner { .texts { - top: 25rem !important; - left: 50rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { - font-size: 1.8rem; + font-size: 1.5rem; } } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } .block { .inner { .event { @@ -482,7 +533,7 @@ export default { li { .pic { width: 100%; - height: 31rem; + height: auto } } } @@ -490,6 +541,5 @@ export default { } } } - } \ No newline at end of file diff --git a/src/pages/overviewIntro/index.vue b/src/pages/overviewIntro/index.vue index e13a302..05486d7 100644 --- a/src/pages/overviewIntro/index.vue +++ b/src/pages/overviewIntro/index.vue @@ -61,14 +61,26 @@ export default { .wrap { 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 { display: flex; justify-content: center; box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28); li { - padding: 25px 19px; - margin: 0 10px; - font-size: 1.1rem; + padding: 1.25rem .95rem; + margin: 0 .5rem; + font-size: 1.05rem; color: #333; border-bottom: 4px solid transparent; text-shadow: 0px 2px 14px rgba(167,167,167,0.26); @@ -80,38 +92,39 @@ export default { } } .tab-content { - padding-top: 150px; + padding-top: 3.85rem; .intro { display: flex; - margin-bottom: 110px; + margin-bottom: 5.5rem; .pic { width: 40%; - margin-right: 50px; + margin-right: 2.5rem; } .right { width: 40%; } h6 { position: relative; - font-size: 1.2rem; + font-size: 1.36rem; color: #333; } .title-bg { position: absolute; - top: -40px; - left: -20px; + top: -2rem; + left: -1rem; } .text { - margin-top: 40px; - font-size: 1rem; + margin-top: 2rem; + font-size: .99rem; color: #020202; line-height: 2; } } .intro-bg { position: relative; - height: 275px; - padding-top: 90px; + height: auto; + padding-top: 4.5rem; + padding-bottom: 2rem; color: #fff; text-align: center; 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; } h6 { - margin-bottom: 30px; - font-size: 2rem; + margin-bottom: 1.5rem; + font-size: 1.6rem; font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN; font-weight: 800; } .des { - font-size: 1.5rem; + font-size: 1.2rem; } } } @@ -184,100 +197,142 @@ export default { @media (max-width: 320px) { .single-banner { .banner-img { - height: 13rem; + height: 12rem; } .texts { - top: 9rem !important; - left: 8rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { font-size: 1.5rem; } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } } @media (min-width: 320px) and (max-width: 375px) { .single-banner { .banner-img { - height: 15rem; + height: 12rem; } .texts { - top: 11rem !important; - left: 10rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { font-size: 1.5rem; } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } } @media (min-width: 375px) and (max-width: 480px) { .single-banner { .banner-img { - height: 18rem; + height: 12rem; } .texts { - top: 14rem !important; - left: 13rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { font-size: 1.5rem; } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } } @media (min-width: 480px) and (max-width: 640px) { .single-banner { .banner-img { - height: 22rem; + height: 12rem; } .texts { - top: 18rem !important; - left: 20rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { font-size: 1.5rem; } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } } @media (min-width: 640px) and (max-width: 768px) { .single-banner { .banner-img { - height: 25rem; + height: 12rem; } .texts { - top: 21rem !important; - left: 30rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { font-size: 1.5rem; } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } } @media (min-width: 768px) and (max-width: 980px) { .single-banner { .banner-img { - height: 28rem; + height: 12rem; } .texts { - top: 21rem !important; - left: 37rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { font-size: 1.5rem; } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } } @media (min-width: 980px) and (max-width: 1200px) { .single-banner { .banner-img { - height: 32rem; + height: 12rem; } .texts { - top: 21rem !important; - left: 37rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { font-size: 1.5rem; } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } } \ No newline at end of file diff --git a/src/pages/overviewLocation/index.vue b/src/pages/overviewLocation/index.vue index 720811d..e3cef93 100644 --- a/src/pages/overviewLocation/index.vue +++ b/src/pages/overviewLocation/index.vue @@ -46,14 +46,26 @@ export default { background: url(../../assets/images/survey1.png) (0 559px)/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 { display: flex; justify-content: center; box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28); li { - padding: 25px 19px; - margin: 0 10px; - font-size: 1.1rem; + padding: 1.25rem .95rem; + margin: 0 .5rem; + font-size: 1.05rem; color: #333; border-bottom: 4px solid transparent; text-shadow: 0px 2px 14px rgba(167,167,167,0.26); @@ -65,8 +77,8 @@ export default { } } .tab-content { - width: 1000px; - padding: 77px 0; + width: 50rem; + padding: 3.85rem 0; margin: 0 auto; span { font-size: 1.35rem; @@ -77,12 +89,12 @@ export default { } .video { width: 100%; - margin-bottom: 55px; + margin-bottom: 2.75rem; } .text { - font-size: 18px; + font-size: .9rem; color: #020202; - line-height: 32px; + line-height: 1.6rem; } @media (max-width: 1200px) { .tabs { @@ -118,120 +130,156 @@ export default { @media (max-width: 320px) { .wrap { .banner-img { - height: 15rem; + height: 12rem; } .single-banner { .texts { - top: 11rem !important; - left: 8rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { 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 { .banner-img { - height: 15rem; + height: 12rem; } .single-banner { .texts { - top: 11rem !important; - left: 10rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { 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 { - .single-banner { - .banner-img { - height: 18rem; + .banner-img { + height: 12rem; } + .single-banner { .texts { - top: 14rem !important; - left: 13rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { 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 { - .single-banner { - .banner-img { - height: 18rem; + .banner-img { + height: 12rem; } + .single-banner { .texts { - top: 12rem !important; - left: 20rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { 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 { - .single-banner { - .banner-img { - height: 28rem; + .banner-img { + height: 12rem; } + .single-banner { .texts { - top: 20rem !important; - left: 30rem !important; + bottom: 2rem !important; + left: 2rem !important; .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 { - .single-banner { - .banner-img { - height: 36rem; + .banner-img { + height: 12rem; } + .single-banner { .texts { - top: 25rem !important; - left: 38rem !important; + bottom: 2rem !important; + left: 2rem !important; .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 { - .single-banner { - .banner-img { - height: 40rem; + .banner-img { + height: 12rem; } + .single-banner { .texts { - top: 25rem !important; - left: 50rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { - font-size: 1.8rem; + font-size: 1.5rem; } } } } - + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } } \ No newline at end of file diff --git a/src/pages/overviewTrailer/index.vue b/src/pages/overviewTrailer/index.vue index e15eff7..c01fdf4 100644 --- a/src/pages/overviewTrailer/index.vue +++ b/src/pages/overviewTrailer/index.vue @@ -52,14 +52,27 @@ export default { background: url(../../assets/images/survey1.png) (0 559px)/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 { display: flex; justify-content: center; box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28); li { - padding: 25px 19px; - margin: 0 10px; - font-size: 1.1rem; + padding: 1.25rem .95rem; + margin: 0 .5rem; + font-size: 1.05rem; color: #333; border-bottom: 4px solid transparent; text-shadow: 0px 2px 14px rgba(167,167,167,0.26); @@ -71,21 +84,21 @@ export default { } } .tab-content { - width: 1000px; - padding: 77px 0; + width: 50rem; + padding: 3.85rem 0; margin: 0 auto; span { - font-size: 1.35rem; + font-size: 1.08rem; } } .video { width: 100%; - margin-bottom: 55px; + margin-bottom: 2.75rem; } .text { - font-size: 18px; + font-size: .9rem; color: #020202; - line-height: 32px; + line-height: 1.6rem; } @media (max-width: 1200px) { .tabs { @@ -119,18 +132,24 @@ export default { @media (max-width: 320px) { .wrap { .banner-img { - height: 15rem; + height: 12rem; } .single-banner { .texts { - top: 11rem !important; - left: 10rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { font-size: 1.5rem; } } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } .tab-content { .video { height: 18rem; @@ -140,18 +159,24 @@ export default { @media (min-width: 320px) and (max-width: 375px) { .wrap { .banner-img { - height: 15rem; + height: 12rem; } .single-banner { .texts { - top: 11rem !important; - left: 12rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { font-size: 1.5rem; } } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } .tab-content { .video { height: 18rem; @@ -161,19 +186,25 @@ export default { @media (min-width: 375px) and (max-width: 480px) { .wrap { - .single-banner { - .banner-img { - height: 18rem; + .banner-img { + height: 12rem; } + .single-banner { .texts { - top: 14rem !important; - left: 15rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { font-size: 1.5rem; } } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } .tab-content { .video { height: 18rem; @@ -182,85 +213,109 @@ export default { } @media (min-width: 480px) and (max-width: 640px) { .wrap { - .single-banner { - .banner-img { - height: 22rem; + .banner-img { + height: 12rem; } + .single-banner { .texts { - top: 18rem !important; - left: 20rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { font-size: 1.5rem; } } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } .tab-content { .video { - height: 23rem; + height: 18rem; } } } @media (min-width: 640px) and (max-width: 768px) { .wrap { - .single-banner { - .banner-img { - height: 28rem; + .banner-img { + height: 12rem; } + .single-banner { .texts { - top: 20rem !important; - left: 28rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { - font-size: 1.8rem; + font-size: 1.5rem; } } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } .tab-content { .video { - height: 23rem; + height: 18rem; } } } @media (min-width: 768px) and (max-width: 980px) { .wrap { - .single-banner { - .banner-img { - height: 36rem; + .banner-img { + height: 12rem; } + .single-banner { .texts { - top: 25rem !important; - left: 38rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { - font-size: 2rem; + font-size: 1.5rem; } } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } .tab-content { .video { - height: auto; + height: 18rem; } } } @media (min-width: 980px) and (max-width: 1200px) { .wrap { - .single-banner { - .banner-img { - height: 40rem; + .banner-img { + height: 12rem; } + .single-banner { .texts { - top: 25rem !important; - left: 50rem !important; + bottom: 2rem !important; + left: 2rem !important; .banner-title { - font-size: 1.8rem; + font-size: 1.5rem; } } } } + .tabs { + li { + padding: 1rem .5rem; + font-size: .85rem; + } + } .tab-content { .video { - height: auto; + height: 18rem; } } } diff --git a/src/pages/research/index.vue b/src/pages/research/index.vue index d4d0b87..6c736ea 100644 --- a/src/pages/research/index.vue +++ b/src/pages/research/index.vue @@ -96,21 +96,31 @@ export default { @import "../../styles/page/page.scss"; .wrap{ /deep/ .el-carousel { - height: 30rem; + height: 24rem; .el-carousel__container{ - height: 30rem; + height: 24rem; } img{ - height: 30rem; + height: 24rem; } } } +.banner-item { + .banner-name { + font-size: 1.6rem; + } +} +.block { + padding: 3.85rem 0; + .intro { + margin-bottom: 4rem; + } +} .area { display: flex; li { position: relative; width: 19%; - height: 653px; color: #fff; background: url(../../assets/images/research/res1.png) 0 0/100% 100% no-repeat; transition: .3s; @@ -147,24 +157,23 @@ export default { } .pic { width: 100%; - height: 443px; + height: 32.65rem; } .icon { transition: .3s; } .texts { width: 100%; - height: 210px; - padding: 20px 40px; + padding: 1rem 2rem; background: #08577B; overflow: hidden; } h6 { - font-size: 1.5rem; + font-size: 1.2rem; white-space: nowrap; } .des { - font-size: 1.2rem; + font-size: .96rem; color: rgba(255,255,255,0.55); } } @@ -174,7 +183,7 @@ export default { li { position: relative; width: calc((100% - 56px) / 3); - margin: 0 28px 39px 0; + margin: 0 1.4rem 1.95rem 0; transition: .3s; &:hover { transform: scale(1.05); @@ -189,18 +198,18 @@ export default { } img { width: 100%; - height: 353px; + height: auto; } .text { display: flex; justify-content: center; align-items: center; - height: 143px; - padding: 0 30px; - font-size: 1.8rem; + height: 7.15rem; + padding: 0 1.5rem; + font-size: 1.44rem; font-family: SFProDisplay-Bold, SFProDisplay; font-weight: bold; - line-height: 40px; + line-height: 2rem; text-align: center; color: #272727; background-color: #fff; @@ -215,10 +224,10 @@ export default { position: relative; width: calc((100% - 56px) / 3); padding: 11px; - margin-right: 28px; + margin-right: 1.4rem; color: #333; 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; transition: .3s; &:hover { @@ -234,19 +243,19 @@ export default { } img { width: 100%; - height: 481px; + height: auto; } .texts { - padding: 0 18px 50px; + padding: 0 .9rem 2.5rem; } h6 { - margin: 35px 0 12px; - font-size: 1.3rem; - line-height: 33px; + margin: 1.75rem 0 .6rem; + font-size: 1.04rem; + line-height: 1.65rem; } .des { - font-size: 1.1rem; - line-height: 26px; + font-size: .88rem; + line-height: 1.3rem; } } @@ -302,37 +311,39 @@ export default { @media (max-width: 320px) { .wrap { /deep/ .el-carousel{ - height: 13rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 13rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 13rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 13rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; } } .block { padding: 1.25rem 0 ; .b-title { - font-size: 2rem; + font-size: 1.5rem; + margin-bottom: 1rem; } .group ,.news{ li { img { - height: 13rem; + height: auto; } .text { - font-size: 2rem; + font-size: 1.5rem; line-height: 1.8rem; } } @@ -342,37 +353,39 @@ export default { @media (min-width: 320px) and (max-width: 375px) { .wrap { /deep/ .el-carousel{ - height: 15rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 15rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 15rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 15rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; + left: 2rem; + bottom: 2rem; } } .block { padding: 1.25rem 0 ; .b-title { - font-size: 2rem; + font-size: 1.5rem; + margin-bottom: 1rem; } .group ,.news{ li { img { - height: 13rem; + height: auto; } .text { - font-size: 2rem; + font-size: 1.5rem; line-height: 1.8rem; } } @@ -382,236 +395,260 @@ export default { @media (min-width: 375px) and (max-width: 480px) { .wrap { /deep/ .el-carousel{ - height: 20rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 20rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 20rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 20rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; - } - } - .area { - li { - .pic { - height: 25rem; - } + left: 2rem; + bottom: 2rem; } } .block { padding: 1.25rem 0 ; .b-title { - font-size: 2rem; + font-size: 1.5rem; + margin-bottom: 1rem; } .group ,.news{ li { img { - height: 15rem; + height: auto; } .text { - font-size: 2rem; + font-size: 1.5rem; line-height: 1.8rem; } } } + .area { + li { + .pic { + height: 22rem; + } + } + } } } @media (min-width: 480px) and (max-width: 640px) { .wrap { /deep/ .el-carousel{ - height: 25rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 25rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 25rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 25rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; - } - } - .area { - li { - .pic { - height: 25rem; - } + left: 2rem; + bottom: 2rem; } } .block { padding: 1.25rem 0 ; .b-title { - font-size: 2rem; + font-size: 1.5rem; + margin-bottom: 1rem; } .group ,.news{ li { img { - height: 20rem; + height: auto; } .text { - font-size: 2rem; + font-size: 1.5rem; line-height: 1.8rem; } } } + .area { + li { + .pic { + height: auto; + } + } + } } } @media (min-width: 640px) and (max-width: 768px) { .wrap { /deep/ .el-carousel{ - height: 25rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 25rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 25rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 25rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; - } - } - .area { - li { - .pic { - height: 30rem; - } + left: 2rem; + bottom: 2rem; } } .block { padding: 1.25rem 0 ; .b-title { - font-size: 2rem; + font-size: 1.5rem; + margin-bottom: 1rem; } .group ,.news{ li { img { - height: 20rem; + height: auto; } .text { - font-size: 2rem; + font-size: 1.5rem; line-height: 1.8rem; } } } + .area { + flex-direction: row;; + li { + width: 19%; + .pic { + height: auto; + } + } + } } } @media (min-width: 768px) and (max-width: 980px) { .wrap { /deep/ .el-carousel{ - height: 30rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 30rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 30rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 30rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; - } - } - .area { - li { - .pic { - height: 35rem; - } + left: 2rem; + bottom: 2rem; } } .block { padding: 1.25rem 0 ; .b-title { - font-size: 2rem; + font-size: 1.5rem; + margin-bottom: 1rem; } .group ,.news{ + flex-direction: row; li { + width: calc((100% - 3rem) / 3); + margin: 0 .8rem 1.95rem 0; + -webkit-transition: .3s; img { - height: 25rem; + height: auto; } .text { - font-size: 2rem; + font-size: 1.5rem; line-height: 1.8rem; } } } + .area { + flex-direction: row;; + li { + width: 19%; + .pic { + height: auto; + } + } + } } } @media (min-width: 980px) and (max-width: 1200px) { .wrap { /deep/ .el-carousel{ - height: 35rem !important; + height: 12rem !important; } /deep/ .el-carousel__container{ - height: 35rem !important; + height: 12rem !important; } /deep/ .el-carousel__item { - height: 35rem !important; + height: 12rem !important; } } .banner-item{ img { - height: 35rem !important; + height: 12rem !important; } .banner-name { font-size: 1.5rem; line-height: 1rem; - left: 5rem; - } - } - .area { - li { - .pic { - height: 40rem; - } + left: 2rem; + bottom: 2rem; } } .block { padding: 1.25rem 0 ; .b-title { - font-size: 2rem; + font-size: 1.5rem; + margin-bottom: 1rem; } .group ,.news{ + flex-direction: row; li { + width: calc((100% - 3rem) / 3); + margin: 0 .8rem 1.95rem 0; + -webkit-transition: .3s; img { - height: 25rem; + height: auto; } .text { - font-size: 2rem; + font-size: 1.5rem; line-height: 1.8rem; } } } + .area { + flex-direction: row;; + li { + width: 19%; + .pic { + height: auto; + } + } + } } } \ No newline at end of file diff --git a/src/pages/science/index.vue b/src/pages/science/index.vue index 06a4df7..6434904 100644 --- a/src/pages/science/index.vue +++ b/src/pages/science/index.vue @@ -97,11 +97,29 @@ export default { @import url(../../plugins/wow/animate.css); @import "../../styles/page/page.scss"; .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 { position: relative; - margin-bottom: 58px; + margin-bottom: 2.9rem; + width: 100%; &:hover { .texts { color: #fff; @@ -110,8 +128,8 @@ export default { } } img { - width: 90%; - height: 400px; + width: 100%; + height: 22rem; } &:nth-child(2) .texts { color: #fff; @@ -123,26 +141,26 @@ export default { } &:nth-child(even) .texts { left: auto; - right: 0; + right: -1.6rem; } .texts { position: absolute; - top: 79px; - left: -28px; - width: 532px; - padding: 70px 38px; + top: 3.9rem; + left: -1.4rem; + width: 26.6rem; + padding: 3.5rem 1.9rem; color: #333; background: #fff6e9; transition: 0.5s; } h6 { - margin-bottom: 14px; - font-size: 2rem; + margin-bottom: .875rem; + font-size: 1.6rem; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; } .des { - font-size: 1rem; + font-size: .88rem; } } @media (max-width: 1200px) { @@ -150,11 +168,10 @@ export default { width: 100% !important; } .inner { - width: 100%; + width: 80%; } .item { img { - margin-left: 30px; } .rightText { right: 12px !important; @@ -162,7 +179,10 @@ export default { .texts { width: 85%; box-sizing: border-box; - left: 12px; + left: -1rem; + &:nth-child(2) { + right: -1.5rem !important; + } .des{ -webkit-line-clamp: inherit } @@ -173,11 +193,11 @@ export default { .wrap { .single-banner { .banner-img { - height: 13rem; + height: 12rem; } .texts { - top: 6rem; - left: 12rem; + top: 5rem; + left: 2rem; .banner-title{ font-size: 1.5rem; margin-bottom: .5rem; @@ -196,6 +216,12 @@ export default { .texts { padding: 1.25rem; top: 1.5rem; + h6 { + font-size: 1.2rem; + } + .des { + font-size: .75rem; + } } } } @@ -204,11 +230,11 @@ export default { .wrap { .single-banner { .banner-img { - height: 13rem; + height: 12rem; } .texts { - top: 6rem; - left: 12rem; + top: 5rem; + left: 2rem; .banner-title{ font-size: 1.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) { .wrap { .single-banner { .banner-img { - height: 20rem; + height: 12rem; } .texts { - top: 10rem; - left: 12rem; + top: 5rem; + left: 2rem; .banner-title{ font-size: 1.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) { .wrap { .single-banner { .banner-img { - height: 25rem; + height: 12rem; } .texts { - top: 10rem; - left: 12rem; + top: 5rem; + left: 2rem; .banner-title{ - font-size: 2rem; + font-size: 1.5rem; margin-bottom: .5rem; } .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) { .wrap { .single-banner { .banner-img { - height: 35rem; + height: 12rem; } .texts { - top: 20rem; - left: 12rem; + top: 5rem; + left: 2rem; .banner-title{ - font-size: 2rem; + font-size: 1.5rem; margin-bottom: .5rem; } .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) { .wrap { .single-banner { .banner-img { - height: 35rem; + height: 12rem; } .texts { - top: 20rem; - left: 12rem; + top: 5rem; + left: 2rem; .banner-title{ - font-size: 2rem; + font-size: 1.5rem; margin-bottom: .5rem; } .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) { .wrap { .single-banner { .banner-img { - height: 40rem; + height: 12rem; } .texts { - top: 20rem; - left: 12rem; + top: 5rem; + left: 2rem; .banner-title{ - font-size: 2rem; + font-size: 1.5rem; margin-bottom: .5rem; } .banner-des{ @@ -319,5 +412,16 @@ export default { } } } + .block { + .inner { + img { + height: 18rem; + } + .texts { + padding: 1.25rem; + top: 1.5rem; + } + } + } } diff --git a/src/pages/sfel/index.vue b/src/pages/sfel/index.vue index 2f40c26..c8d12ad 100644 --- a/src/pages/sfel/index.vue +++ b/src/pages/sfel/index.vue @@ -1,9 +1,9 @@