全站恢复移动端自适应

master
yujialong 11 months ago
parent fcb57d5c91
commit 627ee3045c
  1. 2
      public/index.html
  2. 1
      src/api/index.js
  3. 33
      src/components/breadcrumb/index.vue
  4. 38
      src/layouts/footer/index.vue
  5. 2
      src/layouts/home/index.vue
  6. 119
      src/pages/about/index.vue
  7. 118
      src/pages/aboutNew/index.vue
  8. 604
      src/pages/application/index.vue
  9. 2
      src/pages/article/activity.vue
  10. 47
      src/pages/article/index.vue
  11. 496
      src/pages/careers/index.vue
  12. 144
      src/pages/column/index.vue
  13. 7
      src/pages/contactUs/index.vue
  14. 53
      src/pages/devHistory/index.vue
  15. 58
      src/pages/deviceIntroBeam/index.vue
  16. 75
      src/pages/deviceIntroLayout/index.vue
  17. 73
      src/pages/deviceIntroLinear/index.vue
  18. 501
      src/pages/edu/index.vue
  19. 47
      src/pages/estate/event/index.vue
  20. 128
      src/pages/estate/index/index.vue
  21. 18
      src/pages/estate/location/index.vue
  22. 22
      src/pages/estate/orgSetup/index.vue
  23. 19
      src/pages/estate/survey/index.vue
  24. 326
      src/pages/exp/index.vue
  25. 40
      src/pages/governance/index.vue
  26. 514
      src/pages/home/index.vue
  27. 108
      src/pages/iasf/index.vue
  28. 81
      src/pages/industrial/index.vue
  29. 13
      src/pages/lightSources/index.vue
  30. 41
      src/pages/mission/index.vue
  31. 997
      src/pages/news/index.vue
  32. 395
      src/pages/newsPress/index.vue
  33. 460
      src/pages/newsProcurement/index.vue
  34. 27
      src/pages/org/index.vue
  35. 80
      src/pages/overview/index.vue
  36. 54
      src/pages/overviewDevHistory/index.vue
  37. 32
      src/pages/overviewIntro/index.vue
  38. 8
      src/pages/overviewLocation/index.vue
  39. 20
      src/pages/overviewSetup/index.vue
  40. 10
      src/pages/overviewTrailer/index.vue
  41. 22
      src/pages/publication/index.vue
  42. 17
      src/pages/publication/monograph.vue
  43. 14
      src/pages/publication/patent.vue
  44. 6
      src/pages/publication/single.vue
  45. 17
      src/pages/publication/thesis.vue
  46. 15
      src/pages/publish/show.vue
  47. 804
      src/pages/research/index.vue
  48. 56
      src/pages/researchTeam/index.vue
  49. 262
      src/pages/science/index.vue
  50. 40
      src/pages/scientific/index.vue
  51. 1024
      src/pages/sfel/index.vue
  52. 1328
      src/pages/sfelNew/index.vue
  53. 13
      src/pages/speech/index.vue
  54. 356
      src/pages/talent/index.vue
  55. 307
      src/pages/talentCenter/index.vue
  56. 47
      src/pages/talentCentre/index.vue
  57. 23
      src/pages/team/index.vue
  58. 351
      src/pages/userSharing/index.vue
  59. 27
      src/styles/page/page.scss

@ -7,7 +7,7 @@
<meta name="description" content="粒子研究院" />
<meta name="referrer" content="no-referrer" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="viewport" content="width=device-width, user-scalable=yes, shrink-to-fit=no" />
<!-- <meta name="viewport" content="width=device-width, user-scalable=yes, shrink-to-fit=no" /> -->
<title>粒子研究院</title>
</head>
<body>

@ -18,4 +18,5 @@ export default {
siteSearchArticles: `iasf/sysContent/siteSearchArticles`,
oneLevelChecksThemAll: `iasf/sysColumn/oneLevelChecksThemAll`,
queryArticlesByColumnType: `iasf/sysColumn/queryArticlesByColumnType`,
queryArticleColumnParent: `iasf/sysContent/queryArticleColumnParent`,
}

@ -2,16 +2,17 @@
<!-- 面包屑 -->
<div class="breadcrumb">
<el-breadcrumb separator=">">
<template v-for="(item, i) in data">
<el-breadcrumb-item v-if="i != data.length - 1"
:key="i"
:to="{ path: item.path || '/column', query: item.query }">
{{ item.name | i18nName($i18n)}}
<template v-for="(item, i) in columns">
<el-breadcrumb-item :key="i"
:to="{ path: item.path || '/column', query: {
id: item.id
} }">
{{ item.columnName | i18nName($i18n)}}
</el-breadcrumb-item>
<el-breadcrumb-item v-else
<!-- <el-breadcrumb-item v-else
:key="i">
{{ item.name }}
</el-breadcrumb-item>
</el-breadcrumb-item> -->
</template>
</el-breadcrumb>
</div>
@ -22,11 +23,11 @@ export default {
props: ['data'],
data () {
return {
columns: [],
};
},
methods: {
mounted () {
this.getInfo()
},
filters: {
i18nName (name, type) {
@ -44,7 +45,15 @@ export default {
return name
}
}
}
},
methods: {
//
getInfo () {
this.$route.query.articleId && this.$post(`${this.api.queryArticleColumnParent}?articleId=${this.$route.query.articleId}`).then(({ data }) => {
this.columns = data
}).catch(err => { })
},
},
};
</script>
<style lang="scss" scoped>
@ -58,7 +67,7 @@ export default {
}
&:last-child {
.is-link {
color: #0b1d30;
cursor: pointer;
}
}
}

@ -16,17 +16,30 @@
<img class="icon"
src="@/assets/images/tel.png"
alt="">
0755-21096000
{{ site == 1 ?
'0755-21096026' :
site == 5 || site == 6 ?
'0755-21096067' :
site == 3 || site == 4 ?
'0755-21096052' :
'0755-21096000' }}
</div>
<div class="line">
<img class="icon"
src="@/assets/images/mail.png"
alt="">
gad@mail.iasf.ac.cn
{{ site == 1 ?
'std@mail.iasf.ac.cn' :
site == 5 || site == 6 ?
'srgcb@mail.iasf.ac.cn' :
site == 3 || site == 4 ?
'FEL@mail.iasf.ac.cn' :
'gad@mail.iasf.ac.cn' }}
</div>
</div>
</div>
<div class="qrcodes">
<div v-if="site == 1 || site == 2"
class="qrcodes">
<div class="item">
<img class="qrcode"
src="@/assets/images/qrcode.png"
@ -176,6 +189,7 @@ export default {
<style lang="scss" scoped>
.footer {
z-index: 2;
position: relative;
background-color: #091733;
border-top: 10px solid #2870ff;
.logo {
@ -234,4 +248,22 @@ export default {
background-image: linear-gradient(to bottom, rgb(16, 41, 93), rgb(10, 24, 54) 40%);
}
}
@media (max-width: 1200px) {
.footer {
.info {
flex-direction: column;
width: 90%;
}
.left {
flex-direction: column;
margin-bottom: 20px;
}
.texts {
border-left: 0;
}
.copyright {
padding: 16px;
}
}
}
</style>

@ -66,7 +66,7 @@ export default {
</script>
<style lang="scss" scoped>
.main {
min-width: 1240px;
// min-width: 1240px;
}
.main:not(.channel) {
min-height: calc(100% - 90px);

@ -307,7 +307,7 @@ export default {
.texts {
display: flex;
justify-content: space-between;
padding: 5.125rem 3.5625rem 1.875rem;
padding: 5rem 3.5rem 1.8rem;
margin-top: 20px;
background-color: #fff;
border-radius: 6.25rem 0px 0px 0px;
@ -317,7 +317,7 @@ export default {
}
}
.left {
width: 43.4375rem;
width: 43rem;
}
.line {
width: 8.5rem;
@ -553,4 +553,119 @@ export default {
font-size: 1.08rem;
}
}
@media (max-width: 1200px) {
.history {
h2 {
margin-left: 1rem !important;
}
.texts {
flex-direction: column;
padding: 4.1rem 1.35rem 1.5rem;
.left {
h2 {
margin: 0 !important;
font-size: 1.3rem;
}
.line {
margin: 0.5rem;
}
.des {
font-size: 1rem;
line-height: 1rem;
}
}
.bg {
width: 100%;
height: auto;
}
}
}
.block {
padding: 1.25rem 0;
.inner {
.b-title {
margin-bottom: 1rem;
font-size: 1.2rem;
}
.intro {
margin-bottom: 1rem;
font-size: 0.85rem;
}
.texts {
.bg {
height: auto;
}
}
.card {
flex-direction: row;
li {
padding: 3.5rem 3.344rem;
width: calc((100% - 28px) / 2);
h6 {
font-size: 1.5rem;
}
}
}
.people {
li {
flex-direction: row !important;
.pic {
width: 47% !important;
height: auto;
margin: 0;
}
.texts {
padding: 1rem !important;
}
}
}
.list {
flex-direction: row;
li {
.pic {
height: 13rem;
}
}
}
.staff {
flex-direction: row;
.pic {
width: 53%;
height: auto !important;
}
}
.stat {
flex-direction: row;
li {
width: 30%;
}
}
}
}
.plan {
padding: 1rem 0;
.inner {
.pic {
width: 100%;
height: auto;
}
.texts {
margin-top: 1rem;
}
}
}
.list-block {
.inner {
padding-top: 1rem;
.list {
li {
.pic {
height: auto;
}
}
}
}
}
}
</style>

@ -31,8 +31,6 @@
<div class="des">{{ modules[1].form.des }}</div>
</div>
<img class="bg"
width="562"
height="506"
:src="modules[1].form.pic"
alt="">
</div>
@ -96,7 +94,7 @@
<div class="block">
<div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[15].form.title }}</h2>
<h2 class="b-title wow fadeInUp hide-bd">{{ modules[15].form.title }}</h2>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[15].form.des }}</p>
<ul class="people">
@ -165,7 +163,7 @@
<div class="block">
<div class="inner staff-inner">
<h2 class="b-title wow fadeInUp">{{ modules[21].form.title }}</h2>
<h2 class="b-title wow fadeInUp hide-bd">{{ modules[21].form.title }}</h2>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[21].form.des }}</p>
<div :class="['staff wow fadeInDown', {'cursor-pointer': isLink(modules[22].form.link.linkName)}]"
@ -226,41 +224,6 @@ export default {
font-size: 2.16rem;
}
}
.block {
padding: 3.85rem 0;
.inner {
.wow {
font-size: 1.921rem;
}
.texts {
padding: 4.1rem 2.85rem 1.5rem;
.left {
width: 58%;
margin-right: 2.8rem;
h2 {
font-size: 1.721rem;
}
.line {
margin: 1rem;
}
.des {
font-size: 1.256rem;
}
}
.bg {
width: 38%;
height: 25.3rem;
}
}
.b-title {
margin-bottom: 2.5rem;
font-size: 2.8rem;
}
.intro {
margin-bottom: 4rem;
}
}
}
.history {
h2 {
font-size: 2.14rem;
@ -269,7 +232,7 @@ export default {
.texts {
display: flex;
justify-content: space-between;
padding: 5.125rem 3.5625rem 1.875rem;
padding: 5rem 3.5rem 1.8rem;
margin-top: 20px;
background-color: #fff;
border-radius: 6.25rem 0px 0px 0px;
@ -294,8 +257,11 @@ export default {
-webkit-line-clamp: 6;
}
.bg {
width: 562px;
height: 506px;
margin: -122px 0 0 0;
border-top-right-radius: 40px;
object-fit: cover;
}
}
.card {
@ -342,13 +308,13 @@ export default {
.inner {
display: flex;
justify-content: space-between;
width: 85.7142rem;
}
.pic {
width: 33.2rem;
height: 24.4rem;
margin-bottom: -4.8rem;
transition: 0.3s;
object-fit: cover;
&:hover {
transform: scale(1.05);
}
@ -390,6 +356,7 @@ export default {
.pic {
width: 47%;
height: auto;
object-fit: cover;
}
.texts {
width: 49%;
@ -416,7 +383,6 @@ export default {
}
.list-block {
.inner {
width: 80%;
padding: 5.625rem 0;
background-color: #fff;
}
@ -471,7 +437,7 @@ export default {
}
}
.staff-inner {
width: 98.8125rem;
width: 98rem;
}
.left {
width: 50%;
@ -493,6 +459,7 @@ export default {
.pic {
width: 53%;
height: auto;
object-fit: cover;
}
}
.stat {
@ -516,4 +483,69 @@ export default {
font-size: 1.08rem;
}
}
@media (max-width: 1200px) {
.hide-bd:after {
display: none;
}
.history {
.texts {
flex-direction: column;
padding-left: 30px;
padding-right: 30px;
}
.left {
width: 100%;
margin-right: 0;
}
.bg {
width: 100%;
height: auto;
margin-top: 20px;
}
}
.stat {
li {
width: 35%;
}
}
.plan {
.inner {
flex-direction: column;
}
.pic {
width: 100%;
height: auto;
margin-bottom: 0;
}
.texts {
width: 100%;
}
}
.people {
li {
flex-direction: column !important;
}
.pic,
.texts {
width: 100%;
}
}
.list {
flex-direction: column;
li {
margin-right: 0;
}
}
.staff {
flex-direction: column;
.left {
width: 100%;
margin-bottom: 20px;
}
.pic {
width: 100%;
}
}
}
</style>

@ -373,4 +373,608 @@ export default {
color: #999;
}
}
@media (max-width: 1520px) {
.app-inner {
width: 1558px;
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel {
height: 15rem;
.el-carousel__container {
height: 15rem;
}
img {
height: 15rem;
}
}
}
.banner-item .banner-name {
font-size: 1.5rem;
bottom: 2.25rem;
left: 16.125rem;
}
.block {
padding: 50px 0;
.inner {
width: 95%;
margin: 0 auto;
.texts {
flex-direction: column;
.left {
width: 100%;
}
.bg {
margin: 0;
width: 100%;
height: 20rem !important;
}
}
}
.app {
li {
width: 100%;
}
}
.intro {
margin-bottom: 30px;
}
.group {
flex-direction: column;
li {
width: 100%;
img {
height: 20rem;
}
}
}
.news {
flex-direction: column;
li {
width: 95%;
margin: 0 auto;
flex-direction: column;
img {
width: 100%;
height: 12rem;
}
.texts {
margin-left: 0;
margin-top: 20px;
}
}
}
}
}
@media (max-width: 1200px) {
.block {
padding: 50px 0;
.inner {
width: 95%;
margin: 0 auto;
.texts {
flex-direction: column;
.left {
width: 100%;
}
.bg {
margin: 0;
width: 100%;
height: 450px;
}
}
}
.app {
li {
width: 100%;
}
}
.intro {
margin-bottom: 30px;
}
.group {
flex-direction: column;
li {
width: 100%;
}
}
.news {
flex-direction: column;
li {
width: 95%;
margin: 0 auto;
flex-direction: column;
img {
width: 100%;
height: 200px;
}
.texts {
margin-left: 0;
margin-top: 20px;
}
}
}
}
}
@media (max-width: 320px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
h2 {
margin-left: 1.5rem !important;
}
.b-title {
font-size: 1.5rem;
}
.texts {
padding: 5rem 1.25rem;
h2 {
margin-left: 0 !important;
}
.bg {
height: auto !important;
}
}
.group {
li {
img {
height: auto;
}
}
}
.news {
li {
padding: 1.25rem;
img {
height: auto;
}
.texts {
padding: 1.25rem;
}
}
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
h2 {
margin-left: 1.5rem !important;
}
.b-title {
font-size: 1.5rem;
}
.texts {
padding: 5rem 1.25rem;
h2 {
margin-left: 0 !important;
}
.bg {
height: auto !important;
}
}
.group {
li {
img {
height: auto;
}
}
}
.news {
li {
padding: 1.25rem;
img {
height: auto;
}
.texts {
padding: 1.25rem;
}
}
}
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
h2 {
margin-left: 1.5rem !important;
}
.b-title {
font-size: 1.5rem;
}
.texts {
padding: 5rem 1.25rem;
h2 {
margin-left: 0 !important;
}
.bg {
height: auto !important;
}
}
.group {
li {
img {
height: auto;
}
}
}
.news {
li {
padding: 1.25rem;
img {
height: auto;
}
.texts {
padding: 1.25rem;
}
}
}
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
h2 {
margin-left: 1.5rem !important;
}
.b-title {
font-size: 1.5rem;
}
.texts {
padding: 5rem 1.25rem;
h2 {
margin-left: 0 !important;
}
.bg {
height: auto !important;
}
}
.group {
li {
img {
height: auto;
}
}
}
.news {
li {
padding: 1.25rem;
img {
height: auto;
}
.texts {
padding: 1.25rem;
}
}
}
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
h2 {
margin-left: 1.5rem !important;
}
.b-title {
font-size: 1.5rem;
}
.texts {
padding: 5rem 1.25rem;
h2 {
margin-left: 0 !important;
}
.bg {
height: auto !important;
}
}
.group {
li {
img {
height: auto;
}
}
}
.news {
li {
padding: 1.25rem;
img {
height: auto;
}
.texts {
padding: 1.25rem;
}
}
}
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
h2 {
margin-left: 1.5rem !important;
}
.b-title {
font-size: 1.5rem;
}
.texts {
flex-direction: row;
padding: 3rem 1.25rem;
.left {
width: 50%;
}
h2 {
margin-left: 0 !important;
}
.bg {
width: 50%;
margin: -3rem 0 0 0;
height: auto !important;
}
}
.group {
flex-direction: row;
li {
width: calc((100% - 56px) / 3);
img {
height: auto;
}
.text {
line-height: 1.5rem;
}
}
}
.news {
flex-direction: row;
li {
width: calc((100% - 28px) / 2);
padding: 1.25rem;
img {
height: auto;
}
.texts {
padding: 1.25rem;
}
}
}
.app {
flex-direction: row;
li {
width: 45%;
&:nth-child(2n + 1) {
margin-right: 1rem;
}
}
}
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
h2 {
margin-left: 1.5rem !important;
}
.b-title {
font-size: 1.5rem;
}
.texts {
flex-direction: row;
padding: 3rem 1.25rem;
.left {
width: 50%;
}
h2 {
margin-left: 0 !important;
}
.bg {
width: 50%;
margin: -3rem 0 0 0;
height: auto !important;
}
}
.group {
flex-direction: row;
li {
width: calc((100% - 56px) / 3);
img {
height: auto;
}
.text {
line-height: 1.5rem;
}
}
}
.news {
flex-direction: row;
li {
width: calc((100% - 28px) / 2);
padding: 1.25rem;
img {
height: auto;
}
.texts {
padding: 1.25rem;
}
}
}
.app {
flex-direction: row;
li {
width: 45%;
&:nth-child(2n + 1) {
margin-right: 1rem;
}
}
}
}
}
}
</style>

@ -11,7 +11,7 @@
<div class="article">
<div class="left">
<h2>{{ form.title }}</h2>
<div class="meta">{{$t('column.time')}}{{ form.activityStartTime + ' ~ ' + form.activityEndTime }}</div>
<div class="meta">{{$t('column.time')}}{{ form.activityStartTime }}</div>
<div v-if="form.offlineLocation"
class="meta">{{$t('column.address')}}{{ form.offlineLocation }}</div>
<div v-if="form.onlineLocation"

@ -196,12 +196,14 @@ export default {
}
}
.banner {
display: flex;
align-items: center;
height: 21.6rem;
padding: 150px 0 0 267px;
font-size: 2.16rem;
padding-left: 10%;
font-size: 2rem;
font-weight: 600;
color: #fff;
background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat;
background: url(../../assets/images/intro-bg.png) center center no-repeat;
object-fit: cover;
}
.article {
@ -233,6 +235,7 @@ export default {
}
img {
max-width: 100%;
object-fit: cover;
}
ul {
list-style: disc;
@ -274,4 +277,42 @@ export default {
}
}
}
@media (max-width: 1420px) {
.content {
width: 98%;
}
}
@media (max-width: 1200px) {
.article {
/deep/.des {
img {
max-width: 100%;
height: 15rem;
}
}
}
.banner {
font-size: 1.5rem;
}
.article {
flex-direction: column;
.left {
width: 100%;
h2 {
font-size: 1.5rem;
}
}
}
.article {
.des {
img {
height: 15rem !important;
}
}
}
.right {
width: 100%;
}
}
</style>

@ -374,4 +374,500 @@ export default {
transition: 0.3s;
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel {
height: 15rem;
.el-carousel__container {
height: 15rem;
}
img {
height: 15rem;
}
}
}
.block {
padding: 50px 0;
.inner {
width: 95%;
margin: 0 auto;
.card {
flex-direction: column;
li {
margin-top: 20px;
width: 100%;
height: 27rem;
}
}
.people {
li {
padding: 200px 20px 30px;
.left {
width: 100%;
}
.pic {
top: -60px;
right: 13px;
width: 60%;
height: 12.5rem;
}
}
}
}
}
.shows {
li {
flex-direction: column;
align-items: flex-start;
height: 16rem;
.left {
padding: 10px;
h6 {
font-size: 1.5rem;
}
.sub {
margin: 0.5rem;
font-size: 1rem;
}
.des {
margin-bottom: 1.25rem;
}
.icon {
width: 3.5rem;
height: 3.5rem;
}
}
}
}
}
@media (max-width: 320px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
.card {
li {
flex: none;
height: 25rem;
.pic {
height: 25rem;
}
}
}
.people {
li {
padding: 10rem 1.25rem 1.5rem;
.pic {
top: -40px;
height: auto;
}
}
}
}
}
.shows {
li {
height: auto;
.left {
h6 {
font-size: 1rem;
}
.sub {
font-size: 0.9rem;
}
.des {
font-size: 0.88rem;
margin-bottom: 0.5rem;
}
.icon {
width: 2rem;
height: 2rem;
}
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
.card {
li {
flex: none;
height: 25rem;
.pic {
height: 25rem;
}
}
}
.people {
li {
padding: 10rem 1.25rem 1.5rem;
.pic {
top: -40px;
height: auto;
}
}
}
}
}
.shows {
li {
height: auto;
.left {
h6 {
font-size: 1rem;
}
.sub {
font-size: 0.9rem;
}
.des {
font-size: 0.88rem;
margin-bottom: 0.5rem;
}
.icon {
width: 2rem;
height: 2rem;
}
}
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
.card {
li {
flex: none;
height: 25rem;
.pic {
height: 25rem;
}
}
}
.people {
li {
padding: 10rem 1.25rem 1.5rem;
.pic {
top: -40px;
height: auto;
}
}
}
}
}
.shows {
li {
height: auto;
.left {
h6 {
font-size: 1rem;
}
.sub {
font-size: 0.9rem;
}
.des {
font-size: 0.88rem;
margin-bottom: 0.5rem;
}
.icon {
width: 2rem;
height: 2rem;
}
}
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
.card {
li {
flex: none;
height: 25rem;
.pic {
height: 25rem;
}
}
}
.people {
li {
margin-bottom: 15rem;
padding: 10rem 1.25rem 1.5rem;
.pic {
top: -40%;
height: auto;
}
}
}
}
}
.shows {
li {
height: auto;
.left {
padding: 2rem 2rem;
}
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
.card {
li {
flex: none;
height: 25rem;
.pic {
height: 25rem;
}
}
}
.people {
li {
padding: 10rem 1.25rem 1.5rem;
margin-bottom: 15rem;
.pic {
top: -60%;
height: auto;
}
}
}
}
}
.shows {
li {
height: auto;
.left {
padding: 3rem 2rem;
}
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
.card {
li {
flex: none;
height: 25rem;
.pic {
height: 25rem;
}
}
}
.people {
li {
margin-bottom: 20rem;
padding: 10rem 1.25rem 1.5rem;
.pic {
top: -85%;
height: auto;
}
}
}
}
}
.shows {
li {
height: auto;
.left {
padding: 4rem 2rem;
}
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
.card {
li {
flex: none;
height: 25rem;
.pic {
height: 25rem;
}
}
}
.people {
li {
margin-bottom: 30rem;
padding: 10rem 1.25rem 1.5rem;
.pic {
top: -115%;
height: auto;
}
}
}
}
}
.shows {
li {
height: auto;
.left {
padding: 4rem 2rem;
}
}
}
}
</style>

@ -210,7 +210,7 @@
<img class="icon"
src="@/assets/images/time.png"
alt="" />
{{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
{{ item.activityStartTime }}
</div>
<div v-if="item.offlineLocation"
class="meta m-b-10">
@ -286,7 +286,7 @@
<img class="icon"
src="@/assets/images/time.png"
alt="" />
{{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
{{ item.activityStartTime }}
</div>
<div v-if="item.offlineLocation"
class="meta m-b-10">
@ -390,7 +390,7 @@
<img class="icon"
src="@/assets/images/time.png"
alt="" />
{{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
{{ item.activityStartTime }}
</div>
<div v-if="item.offlineLocation"
class="meta m-b-10">
@ -1177,6 +1177,7 @@ export default {
.pic {
width: 30%;
height: auto;
object-fit: cover;
}
}
.media {
@ -1366,6 +1367,7 @@ export default {
}
img {
max-width: 100%;
object-fit: cover;
}
}
.annex {
@ -1408,4 +1410,140 @@ export default {
color: #333;
}
}
@media (max-width: 1200px) {
.banner {
height: 15rem !important;
img {
height: 15rem !important;
}
.texts {
top: 6rem;
left: 3rem;
}
}
.article {
flex-direction: column;
width: 90%;
.columns {
width: 40%;
}
.left {
width: 100%;
.forms {
flex-direction: column;
justify-content: center;
align-items: center;
.item,
.search {
margin: 20px 0 0 0;
}
.item:first-child {
margin: 0;
}
div {
width: 100%;
}
}
}
.article-wrap {
width: 90%;
margin: 0 auto;
}
.articles {
li:not(.news-notice) {
flex-direction: column;
align-items: flex-start;
padding: 1rem;
margin-top: 1rem;
.pic {
width: 100%;
margin: 10px 0;
}
}
.readDetail {
align-items: flex-start;
.texts {
width: 100%;
padding-left: 0;
}
}
}
.media {
li {
padding: 0;
}
}
.right {
width: 95%;
margin: 20px auto;
}
}
}
@media (max-width: 640px) {
.banner {
height: 12rem !important;
img {
height: 12rem !important;
}
.texts {
left: 2rem;
bottom: 2rem;
.text {
font-size: 1.5rem;
}
}
}
.article {
.contents {
flex-direction: column;
padding: 0 15px;
}
.columns,
.article-wrap {
width: 100%;
margin-right: 0;
}
.articles {
li {
.leftBox {
padding-left: 0;
.titleDes {
line-height: 1.368rem;
}
}
}
}
.media {
margin-left: 0;
li {
width: calc(50% - 20px);
margin-right: 20px;
&:nth-child(2n) {
margin-right: 0;
}
}
}
}
.forms {
.switch {
width: 100%;
flex-direction: column;
margin-right: 0;
li {
width: 90%;
margin: 0 auto;
margin-top: 10px;
}
}
}
}
</style>

@ -197,4 +197,11 @@ export default {
background-color: #1583ff;
}
}
@media (max-width: 1200px) {
.inner {
.contact {
padding: 3rem 1rem;
}
}
}
</style>

@ -92,4 +92,57 @@ export default {
overflow: auto;
}
}
@media (max-width: 1200px) {
.tab-content {
width: 90%;
span {
font-size: 1.35rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
width: 90%;
h2 {
font-size: 1.5rem;
}
p {
font-size: 1rem;
margin: 10px 0 1.25rem;
}
.event {
flex-direction: column;
.time {
width: 100%;
li {
width: 100%;
justify-content: flex-start;
}
}
.right {
margin-top: 1.25rem;
width: 100%;
h6 {
font-size: 2rem;
}
.list {
li {
padding: 1.25rem;
flex-direction: column;
align-items: flex-start;
.texts {
width: 100%;
}
.pic {
width: 100%;
height: auto;
}
}
}
}
}
}
}
}
</style>

@ -228,4 +228,62 @@ $banner-height: 21.6rem;
border-left: 4px solid #1583ff;
}
}
@media (max-width: 1200px) {
.banner {
height: 12rem;
padding: 6rem 0 0 2rem;
}
.beamBox {
.imgText {
bottom: 4rem;
right: 4rem;
}
}
.share {
width: 90%;
padding-left: 0;
margin: 0 auto;
}
.beamBox {
display: flex;
flex-direction: column;
position: relative;
.left {
width: 100%;
}
.des {
-webkit-line-clamp: 100;
}
.pic {
margin-top: 10px;
width: 100%;
height: auto;
}
}
.intro {
width: 90%;
padding: 1rem 0;
height: auto;
.intro-inner {
flex-direction: column;
}
.pic {
width: 80%;
}
.des {
width: 80%;
height: auto;
padding: 2rem 0 0;
-webkit-line-clamp: 100;
}
}
.unit {
width: 95%;
img {
width: 100%;
}
}
}
</style>

@ -193,4 +193,79 @@ $banner-height: 21.6rem;
border-left: 4px solid #1583ff;
}
}
@media (max-width: 1400px) {
.share {
.card {
position: relative;
margin-left: -2.5%;
}
.inner {
max-width: none;
width: 95%;
.texts {
position: static;
display: flex;
flex-direction: column;
align-items: flex-end;
margin-left: 15%;
.des {
width: 100%;
-webkit-line-clamp: 100;
}
}
}
.pic {
width: 50%;
margin-top: 20px;
}
}
.bg {
width: 100%;
}
.intro {
height: 36rem;
margin-top: 0;
.pic {
width: 100%;
left: 0;
top: 6%;
}
}
.unit {
width: 95%;
img {
width: 100%;
}
}
}
@media (max-width: 980px) {
.share {
.pic {
width: 80%;
}
}
}
@media (max-width: 640px) {
.share {
.inner {
.texts {
margin: 0 auto;
}
}
.des {
margin-right: 0;
}
}
.intro {
height: auto;
.bg,
.pic {
position: static;
width: 100%;
height: auto;
}
}
}
</style>

@ -244,4 +244,77 @@ $banner-height: 21.6rem;
height: 85%;
}
}
@media (min-width: 280px) and (max-width: 620px) {
.inner {
flex-direction: column;
.left,
.right {
width: 50%;
margin: 20px auto;
}
}
.history {
.left {
.line {
width: 100%;
}
}
}
.block {
padding: 50px 0;
.inner {
.texts {
.bg {
width: 100%;
height: 200px;
margin: -50px 0px 0 0;
}
}
}
}
}
@media (max-width: 1200px) {
.banner {
height: 12rem;
padding: 6rem 0 0 2rem;
}
.history {
.inner {
width: 95%;
}
.texts {
flex-direction: column;
}
.bg {
margin: 0 auto;
}
}
.inner {
flex-direction: column;
width: 95%;
.left,
.right {
width: 95%;
margin: 20px auto;
}
}
.intro {
img {
height: auto;
}
}
}
@media (max-width: 980px) {
.history {
.bg {
width: 100%;
}
}
}
</style>

@ -199,4 +199,505 @@ export default {
line-height: 32px;
}
}
@media (max-width: 1520px) {
.list {
.pic {
width: 45%;
}
li:nth-child(odd) {
.texts {
width: 50%;
}
}
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel {
height: 18rem;
.el-carousel__container {
height: 18rem;
}
img {
height: 18rem;
}
}
}
.banner-item .banner-name {
font-size: 1.5rem;
bottom: 5.25rem;
left: 14.125rem;
line-height: 2rem;
}
.block {
padding: 50px 0;
.inner {
width: 95%;
margin: 0 auto;
.b-title {
margin-bottom: 30px;
}
.intro {
margin-bottom: 30px;
}
.block-pic {
height: 15rem;
}
}
.list {
li {
margin-top: 20px;
.pic {
width: 100%;
height: 25rem;
}
.texts {
padding: 10px;
width: 70%;
top: 2rem;
height: auto;
left: 24%;
}
}
}
}
}
@media (max-width: 320px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
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: auto;
}
.list {
.wow {
.pic {
height: auto;
}
.texts {
h6 {
font-size: 1rem;
}
.sub {
font-size: 0.85rem;
line-height: 0.85rem;
margin-top: 0.5rem;
}
.des {
font-size: 0.85rem;
line-height: 0.85rem;
margin-top: 0.5rem;
}
}
}
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
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: auto;
}
.list {
.wow {
.pic {
height: auto;
}
.texts {
top: 5rem;
h6 {
font-size: 1.5rem;
}
.sub {
font-size: 1.05rem;
line-height: 1.05rem;
margin-top: 0.5rem;
}
.des {
font-size: 1.05rem;
line-height: 1.05rem;
margin-top: 0.5rem;
}
}
}
}
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
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: auto;
}
.list {
.wow {
.pic {
height: auto;
}
.texts {
top: 5rem;
h6 {
font-size: 1.8rem;
}
.sub {
font-size: 1.25rem;
line-height: 1.25rem;
margin-top: 0.5rem;
}
.des {
font-size: 1.25rem;
line-height: 1.25rem;
margin-top: 0.5rem;
}
}
}
}
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
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: auto;
}
.list {
.wow {
.pic {
height: auto;
}
.texts {
top: 5rem;
padding: 2rem;
h6 {
font-size: 2rem;
}
.sub {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: 0.5rem;
}
.des {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: 0.5rem;
}
}
}
}
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
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: auto;
}
.list {
.wow {
.pic {
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: 0.5rem;
}
.des {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: 0.5rem;
}
}
}
}
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
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: auto;
}
.list {
.wow {
.pic {
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: 0.5rem;
}
.des {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: 0.5rem;
}
}
}
}
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
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: auto;
}
.list {
.wow {
.pic {
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: 0.5rem;
}
.des {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: 0.5rem;
}
}
}
}
}
}
}
</style>

@ -191,4 +191,51 @@ export default {
}
}
}
@media (max-width: 1200px) {
.tab-content {
padding: 20px 0;
.org {
width: 100%;
padding: 15px;
flex-direction: column;
.left {
width: 100%;
}
}
}
.block {
padding: 2rem 0;
.inner {
width: 90%;
.event {
flex-direction: column;
.time {
width: 100%;
li {
width: 100%;
justify-content: flex-start;
}
}
.right {
width: 100%;
.list {
li {
padding: 1.25rem;
flex-direction: column;
.texts {
width: 100%;
}
.pic {
width: 100%;
height: auto;
margin-top: 1rem;
}
}
}
}
}
}
}
}
</style>

@ -1,6 +1,7 @@
<template>
<div class="wrap">
<el-carousel :interval="6000"
<el-carousel v-if="modules[0].list"
:interval="6000"
:arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list">
@ -265,7 +266,7 @@ export default {
console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", json)
//
if (json[2].form.column.length) {
if (json[2].form.column && json[2].form.column.length) {
const { column, articleNum } = json[2].form
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles = Util.removeTag(data.slice(0, articleNum || 7))
@ -273,13 +274,13 @@ export default {
this.carouselInterval()
}).catch(err => { })
}
if (json[6].form.column.length) {
if (json[6].form.column && json[6].form.column.length) {
const { column, articleNum } = json[6].form
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles2 = Util.removeTag(data.slice(0, articleNum || 4))
}).catch(err => { })
}
if (json[8].form.column.length) {
if (json[8].form.column && json[8].form.column.length) {
const { column, articleNum } = json[8].form
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles3 = Util.removeTag(data.slice(0, articleNum || 4))
@ -337,6 +338,7 @@ export default {
.el-carousel__item,
img {
height: 100vh;
object-fit: cover;
}
}
.title {
@ -382,6 +384,7 @@ export default {
cursor: pointer;
.pic {
transition: 0.5s;
object-fit: cover;
&:hover {
transform: scale(1.3);
}
@ -457,6 +460,7 @@ export default {
.pic {
width: 100%;
// height: 259px;
object-fit: cover;
}
.texts {
padding: 40px 30px;
@ -500,6 +504,7 @@ export default {
.pic {
width: 50%;
min-height: 465px;
object-fit: cover;
}
}
}
@ -627,6 +632,7 @@ export default {
width: 100%;
height: 100%;
transition: 0.5s;
object-fit: cover;
}
&:hover {
.pic {
@ -700,4 +706,118 @@ export default {
}
}
}
@media (max-width: 1200px) {
.sfel-banner {
flex-direction: column;
.newBox {
width: 100% !important;
}
.right {
margin-top: 10px;
width: 100%;
height: 410px;
}
}
.card {
flex-direction: column;
li {
width: 100%;
margin-top: 20px;
}
}
.shop-shows {
flex-direction: column;
.left {
width: 100%;
}
.right {
width: 100%;
margin-top: 20px;
}
}
.shows {
flex-direction: column;
.left {
width: 100%;
}
.card-list {
width: 100%;
margin-top: 20px;
li {
flex-direction: column;
.pic {
width: 100% !important;
margin-right: 0;
}
.texts {
margin-top: 20px;
width: 100%;
}
}
}
}
.talent {
.shows {
.left {
width: 100%;
margin-bottom: 20px;
}
.pic {
width: 100%;
min-height: 0;
}
}
}
.media-wrap {
flex-direction: column;
.left {
width: 100%;
}
.right {
width: 100%;
margin-top: 20px;
}
}
.news {
flex-direction: column;
li {
margin-top: 30px;
width: 100%;
}
}
.slide,
.list {
flex-direction: column;
.texts,
.img-wrap {
width: 100%;
}
}
.list {
li {
width: 100% !important;
margin-top: 20px;
}
}
.slides {
div {
flex: 1;
}
}
.program {
.list {
li {
background-size: cover;
}
}
}
#part6 {
.slide {
.texts {
height: 430px;
}
}
}
}
</style>

@ -142,4 +142,22 @@ export default {
-webkit-line-clamp: 8;
}
}
@media (max-width: 1200px) {
.tab-content {
width: 80%;
padding: 1.25rem 0;
.item {
padding: 0.85rem;
flex-direction: column !important;
.texts {
margin-top: 0.5rem;
width: 100%;
padding: 0;
}
}
.img-wrap {
height: auto;
}
}
}
</style>

@ -30,7 +30,8 @@
alt="">
</div>
<div class="lg-bg">
<img :src="modules[2].form.pic"
<img width="100%"
:src="modules[2].form.pic"
alt="">
</div>
</div>
@ -96,5 +97,24 @@ export default {
max-width: 85%;
margin: 0 auto;
text-align: center;
img {
object-fit: cover;
}
}
@media (max-width: 1200px) {
.tab-content {
padding: 20px 0;
.org {
width: 100%;
padding: 15px;
flex-direction: column;
.left {
width: 100%;
}
img {
display: none;
}
}
}
}
</style>

@ -95,4 +95,23 @@ export default {
.lg-bg {
width: 40%;
}
@media (max-width: 1300px) {
.tab-content {
padding: 20px 0;
}
.lg-bg {
width: 100%;
}
.survey {
width: 95%;
padding: 80px 86px 29px 47%;
margin-bottom: 2rem;
}
}
@media (max-width: 768px) {
.survey {
padding: 30px;
background: none;
}
}
</style>

@ -125,6 +125,7 @@ export default {
@import '../../styles/page/page.scss';
$banner-height: 21.6rem;
.wrap {
padding-bottom: 70px;
/deep/ .el-carousel {
height: $banner-height;
.el-carousel__container {
@ -230,4 +231,329 @@ $banner-height: 21.6rem;
width: 28%;
}
}
@media (min-width: 280px) and (max-width: 768px) {
.wrap {
/deep/ .el-carousel {
height: 15rem;
.el-carousel__container {
height: 15rem;
}
img {
height: 15rem;
}
}
}
.station {
.pic {
height: 20rem;
}
}
.list {
li {
height: 20rem;
h6 {
top: 5rem;
}
}
}
}
@media (max-width: 320px) {
.wrap {
/deep/ .el-carousel {
height: 13rem !important;
}
/deep/ .el-carousel__item {
height: 13rem !important;
}
/deep/ .el-carousel__container {
height: 13rem !important;
}
}
.banner-item {
img {
height: 13rem !important;
}
.banner-name {
padding: 7rem 0 0 1rem;
font-size: 1.5rem;
}
}
.block {
padding: 2rem 0;
.inner {
width: 90%;
.text-center {
.pic {
width: 100%;
height: auto;
}
}
}
}
.list {
width: 80%;
margin: 0 auto;
li {
margin-top: 1rem;
width: 100% !important;
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
/deep/ .el-carousel {
height: 13rem !important;
}
/deep/ .el-carousel__item {
height: 13rem !important;
}
/deep/ .el-carousel__container {
height: 13rem !important;
}
}
.banner-item {
img {
height: 13rem !important;
}
.banner-name {
padding: 7rem 0 0 1rem;
font-size: 1.5rem;
}
}
.block {
padding: 2rem 0;
.inner {
width: 90%;
.text-center {
.pic {
width: 100%;
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: 13rem !important;
}
/deep/ .el-carousel__item {
height: 13rem !important;
}
/deep/ .el-carousel__container {
height: 13rem !important;
}
}
.banner-item {
img {
height: 13rem !important;
}
.banner-name {
padding: 7rem 0 0 1rem;
font-size: 1.5rem;
}
}
.block {
padding: 2rem 0;
.inner {
width: 90%;
.text-center {
.pic {
width: 100%;
height: auto;
}
}
}
}
.list {
width: 80%;
margin: 0 auto;
li {
margin-top: 1rem;
width: 100% !important;
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
/deep/ .el-carousel {
height: 13rem !important;
}
/deep/ .el-carousel__item {
height: 13rem !important;
}
/deep/ .el-carousel__container {
height: 13rem !important;
}
}
.banner-item {
img {
height: 13rem !important;
}
.banner-name {
padding: 7rem 0 0 1rem;
font-size: 1.5rem;
}
}
.block {
padding: 2rem 0;
.inner {
width: 90%;
.text-center {
.pic {
width: 100%;
height: auto;
}
}
}
}
.list {
width: 80%;
margin: 0 auto;
li {
margin-top: 1rem;
width: 100% !important;
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.wrap {
/deep/ .el-carousel {
height: 13rem !important;
}
/deep/ .el-carousel__item {
height: 13rem !important;
}
/deep/ .el-carousel__container {
height: 13rem !important;
}
}
.banner-item {
img {
height: 13rem !important;
}
.banner-name {
padding: 7rem 0 0 1rem;
font-size: 1.5rem;
}
}
.block {
padding: 2rem 0;
.inner {
width: 90%;
.text-center {
.pic {
width: 100%;
height: auto;
}
}
}
}
.list {
width: 80%;
margin: 0 auto;
li {
margin-top: 1rem;
width: 100% !important;
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.wrap {
/deep/ .el-carousel {
height: 13rem !important;
}
/deep/ .el-carousel__item {
height: 13rem !important;
}
/deep/ .el-carousel__container {
height: 13rem !important;
}
}
.banner-item {
img {
height: 13rem !important;
}
.banner-name {
padding: 7rem 0 0 1rem;
font-size: 1.5rem;
}
}
.block {
padding: 2rem 0;
.inner {
width: 90%;
.text-center {
.pic {
width: 100%;
height: auto;
}
}
}
}
.list {
display: flex;
width: 100%;
li {
width: 25%;
}
}
.item3 {
width: 50% !important;
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel {
height: 13rem !important;
}
/deep/ .el-carousel__item {
height: 13rem !important;
}
/deep/ .el-carousel__container {
height: 13rem !important;
}
}
.banner-item {
img {
height: 13rem !important;
}
.banner-name {
padding: 7rem 0 0 1rem;
font-size: 1.5rem;
}
}
.block {
padding: 2rem 0;
.inner {
width: 90%;
.text-center {
.pic {
width: 100%;
height: auto;
}
}
}
}
.list {
display: flex;
width: 100%;
li {
width: 25%;
}
}
.item3 {
width: 50% !important;
}
}
</style>

@ -142,6 +142,7 @@ export default {
}
.bg {
margin: -122px 0 0 0;
object-fit: cover;
}
}
.cards {
@ -215,6 +216,45 @@ export default {
.pic {
width: 48%;
height: 300px;
object-fit: cover;
}
}
@media (max-width: 1200px) {
.history {
.texts {
flex-direction: column;
}
.left {
width: 90%;
}
.bg {
width: 100%;
margin-top: 2rem;
}
}
.cards {
ul {
width: 98%;
}
li {
width: 100%;
margin: 0 0 20px 0;
}
}
}
@media (max-width: 640px) {
.committee {
.inner {
flex-direction: column;
}
.left {
width: 100%;
}
.pic {
width: 100%;
margin-top: 2rem;
}
}
}
</style>

@ -35,7 +35,8 @@
<div class="texts">
<h6>{{ modules[2].form.title }}</h6>
<p class="des">{{ modules[2].form.des }}</p>
<img src="@/assets/images/arrow.png"
<img v-if="modules[2].form.link"
src="@/assets/images/arrow.png"
alt=""
:class="{'arrow': isLink(modules[2].form.link.linkName)}"
@click="openLink(modules[2].form)">
@ -118,10 +119,10 @@
</div>
<div class="about"
:class="{'cursor-pointer': isLink(modules[8].form.link.linkName)}"
:class="{'cursor-pointer': modules[8].form.link && isLink(modules[8].form.link.linkName)}"
@click="openLink(modules[8].form)">
<div class="inner">
<img class="wow fadeInUp"
<img class="pic wow fadeInUp"
src="@/assets/images/about.png"
alt="">
<div class="line wow fadeInUp"
@ -251,6 +252,7 @@ export default {
height: 100vh;
img {
height: 100%;
object-fit: cover;
}
/deep/.el-carousel__container {
height: 100vh;
@ -301,6 +303,7 @@ export default {
.pic {
width: 100%;
height: auto;
object-fit: cover;
}
.texts {
padding-left: 1.375rem;
@ -334,7 +337,7 @@ export default {
flex-wrap: wrap;
li {
display: inline-flex;
width: calc((100% - 28px) / 2);
width: calc((100% - 35px) / 2);
padding: 2.125rem;
margin-bottom: 1.75rem;
background-color: #fff;
@ -351,6 +354,7 @@ export default {
img {
width: 12.5rem;
height: 7.81rem;
object-fit: cover;
}
.texts {
width: calc(100% - 220px);
@ -399,6 +403,7 @@ export default {
width: 47%;
height: auto;
transition: 0.3s;
object-fit: cover;
}
.texts {
width: 48%;
@ -454,7 +459,10 @@ export default {
.about {
padding: 3.848rem 0 9.9rem;
background: url(../../assets/images/about-bg.png) no-repeat center center;
background-size: 100% 100%;
// background-size: 100% 100%;
.pic {
object-fit: cover;
}
.line {
display: flex;
align-items: center;
@ -490,4 +498,500 @@ export default {
}
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.carousel {
height: 21.87rem;
img {
height: 100%;
}
/deep/.el-carousel__container {
height: 21.87rem;
}
}
.about {
.des {
font-size: 1rem;
}
}
.el-carousel__item {
height: 21.87rem;
img {
height: 21.87rem;
}
}
.block {
padding: 3.125rem 0;
.inner {
width: 95%;
margin: 0 auto;
.b-title {
font-size: 2rem;
margin-bottom: 1.25rem;
}
.wow {
font-size: 1.5rem;
}
.intro {
margin-bottom: 1.25rem;
}
.card {
flex-direction: column;
li {
margin-top: 1.25rem;
width: 100%;
}
}
.news {
flex-direction: column;
li {
width: 100%;
margin-bottom: 15px;
img {
width: 10rem;
}
.texts {
width: calc(100% - 10rem);
}
}
}
.people {
li {
flex-direction: column;
margin-bottom: 1.25rem;
.pic {
width: 100%;
height: 21.875rem;
}
.texts {
padding-top: 1.25rem;
width: 100%;
}
}
}
}
}
.card .pic {
height: 20rem;
}
.about {
width: 100%;
padding: 1.25rem 0 1.875rem;
.inner {
width: 95%;
margin: 0 auto;
.line {
margin: 1.25rem 0 1.25rem;
}
.des {
margin-top: 1.25rem;
padding: 10px 1.25rem;
}
}
}
.glance {
padding-bottom: 1.25rem;
}
.stat {
flex-direction: column;
li {
width: 100%;
text-align: center;
}
}
}
@media (min-width: 751px) and (max-width: 920px) {
.news {
flex-direction: column;
li {
width: 100%;
margin-bottom: 0.9375rem;
img {
width: 10rem;
}
.texts {
width: calc(100% - 10rem);
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
/deep/ .el-carousel {
height: 15rem;
}
/deep/ .el-carousel__container {
height: 15rem;
}
/deep/ .el-carousel__item {
height: 15rem;
img {
height: 15rem;
}
}
}
.block {
padding: 1rem 0;
.inner {
.intro {
margin-bottom: 1rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
li {
.pic {
height: auto;
}
.texts {
margin-top: 1.2rem;
}
}
}
.news {
li {
padding: 1.2rem;
img {
width: 8rem;
}
}
}
.people {
li {
.pic {
height: auto;
}
}
}
}
}
.about {
.inner {
.des {
line-height: 1.5rem;
}
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
/deep/ .el-carousel {
height: 15rem;
}
/deep/ .el-carousel__container {
height: 15rem;
}
/deep/ .el-carousel__item {
height: 15rem;
img {
height: 15rem;
}
}
}
.block {
padding: 1rem 0;
.inner {
.intro {
margin-bottom: 1rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
li {
.pic {
height: auto;
}
.texts {
margin-top: 1.2rem;
}
}
}
.news {
li {
padding: 1.2rem;
img {
width: 8rem;
}
}
}
.people {
li {
.pic {
height: auto;
}
}
}
}
}
.about {
.inner {
.des {
line-height: 1.5rem;
}
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
/deep/ .el-carousel {
height: 18rem;
}
/deep/ .el-carousel__container {
height: 18rem;
}
/deep/ .el-carousel__item {
height: 18rem;
img {
height: 18rem;
}
}
}
.block {
padding: 1rem 0;
.inner {
.intro {
margin-bottom: 1rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
li {
.pic {
height: auto;
}
.texts {
margin-top: 1.2rem;
}
}
}
.news {
li {
padding: 1.2rem;
img {
width: 8rem;
}
}
}
.people {
li {
.pic {
height: auto;
}
}
}
.about {
.des {
line-height: 1.5rem;
}
}
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.wrap {
/deep/ .el-carousel {
height: 20rem;
}
/deep/ .el-carousel__container {
height: 20rem;
}
/deep/ .el-carousel__item {
height: 20rem;
img {
height: 20rem;
}
}
}
.block {
padding: 1rem 0;
.inner {
.intro {
margin-bottom: 1rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
li {
.pic {
height: auto;
}
.texts {
margin-top: 1.2rem;
}
}
}
.news {
li {
padding: 1.2rem;
img {
width: 8rem;
}
}
}
.people {
li {
.pic {
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: 22rem;
}
/deep/ .el-carousel__container {
height: 22rem;
}
/deep/ .el-carousel__item {
height: 22rem;
img {
height: 22rem;
}
}
}
.block {
padding: 1rem 0;
.inner {
.intro {
margin-bottom: 1rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
flex-direction: row;
li {
width: 47%;
.pic {
height: auto;
}
.texts {
margin-top: 1.2rem;
}
}
}
.news {
li {
padding: 1.2rem;
img {
width: 8rem;
}
}
}
.people {
li {
flex-direction: row;
&:nth-child(2) {
flex-direction: row-reverse !important;
}
.pic {
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: 25rem;
}
/deep/ .el-carousel__container {
height: 25rem;
}
/deep/ .el-carousel__item {
height: 25rem;
img {
height: 25rem;
}
}
}
.block {
padding: 1rem 0;
.inner {
.intro {
margin-bottom: 1rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
flex-direction: row;
li {
width: 47%;
.pic {
height: auto;
}
.texts {
margin-top: 1.2rem;
}
}
}
.news {
li {
padding: 1.2rem;
img {
width: 8rem;
}
}
}
.people {
li {
flex-direction: row;
&:nth-child(2) {
flex-direction: row-reverse !important;
}
.pic {
width: 47%;
height: auto;
}
.texts {
width: 48%;
}
}
}
.about {
.des {
}
}
.stat {
flex-direction: row;
li {
width: 30%;
}
}
}
}
}
</style>

@ -1,5 +1,6 @@
<template>
<div class="wrap">
<!-- :interval="6000" -->
<el-carousel :class="['carousel']"
id="part1"
:interval="6000"
@ -545,7 +546,7 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
$bannerHeight: calc(100vw / 2.03);
$bannerHeight: 100vh;
$bannerMh: 800px;
.carousel {
z-index: 1;
@ -554,14 +555,12 @@ $bannerMh: 800px;
left: 0;
width: 100%;
height: $bannerHeight;
min-height: $bannerMh;
img {
height: $bannerHeight;
min-height: $bannerMh;
object-fit: cover;
}
/deep/.el-carousel__container {
height: $bannerHeight;
min-height: $bannerMh;
}
/deep/.el-carousel__arrow i {
font-size: 30px;
@ -643,6 +642,7 @@ $bannerMh: 800px;
.pic {
width: 100%;
height: 100%;
object-fit: cover;
}
.project {
position: absolute;
@ -726,6 +726,7 @@ $bannerMh: 800px;
}
.pic {
transition: 0.5s;
object-fit: cover;
}
.right {
position: relative;
@ -789,6 +790,7 @@ $bannerMh: 800px;
width: 100%;
height: 100%;
transition: 0.5s;
object-fit: cover;
}
.pic-cover {
display: none;
@ -840,6 +842,7 @@ $bannerMh: 800px;
width: 100%;
height: 100%;
transition: 0.5s;
object-fit: cover;
}
.texts {
position: absolute;
@ -985,6 +988,7 @@ $bannerMh: 800px;
height: 259px;
margin-bottom: 28px;
border-radius: 50%;
object-fit: cover;
}
h6 {
font-size: 1.1rem;
@ -1041,6 +1045,7 @@ $bannerMh: 800px;
}
.pic {
width: 50%;
object-fit: cover;
}
}
.about {
@ -1075,6 +1080,7 @@ $bannerMh: 800px;
right: 0;
width: 632px;
height: 558px;
object-fit: cover;
}
}
@ -1091,6 +1097,7 @@ $bannerMh: 800px;
}
img {
max-width: 100px;
object-fit: cover;
}
.text {
margin-top: 15px;
@ -1160,4 +1167,97 @@ $bannerMh: 800px;
margin-right: 10px;
}
}
@media (max-width: 1470px) {
.inner {
width: 95%;
}
.card {
li {
height: auto;
}
}
.about {
.pic {
width: 700px;
height: auto;
}
}
}
@media (max-width: 1370px) {
.card {
.texts {
padding: 0 1rem;
}
}
.about {
.inner {
height: auto;
text-align: center;
}
.left {
width: 100%;
}
.pic {
position: static;
width: auto;
max-width: 100%;
height: auto;
margin-top: 10px;
}
}
}
@media (max-width: 1200px) {
.carousel .texts {
left: 5%;
right: 5%;
}
.card {
flex-direction: column;
li {
margin-top: 1.25rem;
width: 100%;
}
}
.news {
flex-direction: column;
li {
width: 100%;
}
}
.news-banner {
flex-direction: column;
.pic-wrap,
.right {
width: 100%;
}
}
.news-carousel,
.people {
flex-direction: column;
li {
width: 100%;
margin-bottom: 10px;
}
}
.talent {
flex-direction: column;
.left,
.pic {
width: 100%;
}
.left {
padding-bottom: 50px;
margin-bottom: 10px;
}
}
.entry {
// flex-direction: column;
flex-wrap: wrap;
li {
width: 48% !important;
margin-bottom: 30px;
}
}
}
</style>

@ -45,7 +45,7 @@
<div class="block gray">
<div class="inner">
<h2 class="b-title wow fadeInUp"
<h2 class="b-title wow fadeInUp plan-title"
v-html="modules[3].form.title"></h2>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
@ -222,6 +222,7 @@ export default {
width: 560px;
height: 500px;
margin: -122px -83px 0 0;
object-fit: cover;
}
}
.land {
@ -231,6 +232,7 @@ export default {
.pic {
width: 50%;
height: 450px;
object-fit: cover;
}
.right {
width: 50%;
@ -292,6 +294,7 @@ export default {
height: 423px;
margin: -20px -20px 0 0;
border-radius: 100px 0 0 0;
object-fit: cover;
}
}
}
@ -325,6 +328,7 @@ export default {
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.icon {
position: relative;
@ -354,6 +358,7 @@ export default {
img {
width: 100%;
height: 220px;
object-fit: cover;
}
.texts {
padding: 20px 24px;
@ -371,4 +376,78 @@ export default {
text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21);
}
}
@media (max-width: 1200px) {
.history {
.texts {
flex-direction: column;
}
.left {
width: 100%;
}
.bg {
width: 100%;
height: auto;
margin-top: 1rem;
}
}
.land {
.inner {
flex-direction: column;
}
.pic,
.right {
width: 100%;
}
h6 {
margin-left: 0;
}
.right {
margin-top: 1rem;
}
.text {
height: auto;
}
}
.plan {
li {
flex-direction: column !important;
height: auto;
.left,
.pic {
width: 100%;
}
.pic {
margin: 1rem 0 0 !important;
}
}
}
.app {
li {
width: calc((100% - 10px) / 2);
height: 267px;
&:nth-child(2n) {
margin-right: 0;
}
}
}
.news {
flex-direction: column;
li {
width: 100%;
margin: 0 0 20px 0;
}
}
}
@media (max-width: 780px) {
.app {
li {
width: 100%;
margin-right: 0;
}
}
.plan-title:after {
display: none;
}
}
</style>

@ -17,7 +17,7 @@
data-wow-delay="0.8s">{{ modules[1].form.des }}</p>
<el-image class="block-pic br wow fadeInLeft"
data-wow-delay="0.8s"
style="width: 100%; height: 536px"
style="width: 100%;"
:src="modules[1].form.pic"
:preview-src-list="[modules[1].form.pic]">
</el-image>
@ -184,12 +184,15 @@ export default {
}
}
}
.block-pic {
/deep/.block-pic {
transition: 0.3s;
height: auto;
&.br {
border-radius: 270px;
}
img {
object-fit: cover;
}
&:hover {
transform: scale(1.05);
}
@ -222,4 +225,10 @@ export default {
line-height: 1.6;
color: #8d8d8d;
}
@media (max-width: 1200px) {
.table-wrap {
width: 100%;
overflow: auto;
}
}
</style>

@ -110,9 +110,6 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.inner {
width: 1200px;
}
.item {
position: relative;
margin-bottom: 58px;
@ -188,4 +185,42 @@ export default {
}
}
}
@media (max-width: 1200px) {
.item {
img {
margin-left: 30px;
}
.rightText {
right: 12px !important;
}
.texts {
width: 85%;
box-sizing: border-box;
left: 12px;
}
}
}
@media (max-width: 980px) {
.mind {
.list {
flex-direction: column;
}
li {
width: 100%;
}
}
}
@media (max-width: 480px) {
.mind {
li {
.pic {
width: 150px;
height: 130px;
}
.texts {
width: calc(100% - 150px);
}
}
}
}
</style>

File diff suppressed because it is too large Load Diff

@ -190,4 +190,399 @@ export default {
height: 3.3rem;
}
}
@media (max-width: 1200px) {
.inner {
width: 95%;
.list {
li {
margin-top: 20px;
.pic {
width: 100%;
height: 500px;
}
.texts {
padding: 20px 10px 10px;
top: 30px;
h6 {
font-size: 2rem;
}
.sub {
margin: 10px 0;
}
.des {
margin-bottom: 10px;
}
}
}
}
}
}
@media (max-width: 320px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.inner {
/deep/ .el-breadcrumb__item {
font-size: 1rem;
}
.list {
li {
.pic {
height: auto !important;
}
.texts {
top: 1rem;
h6 {
font-size: 1rem !important;
}
.sub {
font-size: 0.85rem;
}
.des {
font-size: 0.85rem;
line-height: 0.85rem;
}
img {
width: 2rem;
height: 2rem;
}
}
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.inner {
/deep/ .el-breadcrumb__item {
font-size: 1rem;
}
.list {
li {
.pic {
height: auto !important;
}
.texts {
top: 4rem;
h6 {
font-size: 1.5rem !important;
}
.sub {
font-size: 1.2rem;
}
.des {
font-size: 1rem;
line-height: 1rem;
}
img {
width: 2rem;
height: 2rem;
}
}
}
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.inner {
/deep/ .el-breadcrumb__item {
font-size: 1rem;
}
.list {
li {
.pic {
height: auto !important;
}
.texts {
top: 4rem;
h6 {
font-size: 1.5rem !important;
}
.sub {
font-size: 1.2rem;
}
.des {
font-size: 1rem;
line-height: 1rem;
}
img {
width: 2rem;
height: 2rem;
}
}
}
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.inner {
/deep/ .el-breadcrumb__item {
font-size: 1rem;
}
.list {
li {
.pic {
width: 47%;
height: auto !important;
}
.texts {
top: 2rem;
h6 {
font-size: 1.5rem !important;
}
.sub {
font-size: 1.2rem;
}
.des {
font-size: 1rem;
line-height: 1rem;
}
img {
width: 2rem;
height: 2rem;
}
}
}
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.inner {
.list {
li {
.pic {
width: 47%;
height: auto !important;
}
.texts {
top: 4rem;
h6 {
font-size: 2rem !important;
}
.sub {
font-size: 1.5rem;
}
.des {
font-size: 1.3rem;
line-height: 1.3rem;
}
img {
width: 2rem;
height: 2rem;
}
}
}
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.inner {
.list {
li {
.pic {
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;
}
}
}
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.inner {
.list {
li {
.pic {
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;
}
}
}
}
}
}
</style>

@ -190,4 +190,464 @@ export default {
height: 3.3rem;
}
}
@media (max-width: 1520px) {
.list {
li {
&:nth-child(even) {
.texts {
left: 25px;
}
}
}
.texts {
right: 25px;
width: 55%;
}
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel {
height: 18rem;
.el-carousel__container {
height: 18rem;
}
img {
height: 18rem;
}
}
}
.banner-item .banner-name[data-v-1525064c] {
font-size: 1.5rem;
}
.inner {
width: 95%;
.list {
li {
margin-top: 20px;
.pic {
width: 100%;
height: 25rem !important;
}
.texts {
padding: 10px 5px 10px !important;
top: 30px;
height: auto;
h6 {
font-size: 1.5rem !important;
}
p {
font-size: 1rem;
margin: 5px 0 !important;
line-height: 1.5rem;
}
.sub {
margin: 10px 0;
}
.des {
margin-bottom: 10px;
}
}
}
}
}
}
@media (max-width: 1200px) {
.inner {
width: 95%;
.list {
li {
margin-top: 20px;
.pic {
width: 100%;
height: 500px;
}
.texts {
padding: 20px 10px 10px;
top: 30px;
h6 {
font-size: 2rem;
}
.sub {
margin: 10px 0;
}
.des {
margin-bottom: 10px;
}
}
}
}
}
}
@media (max-width: 320px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.inner {
/deep/ .el-breadcrumb__item {
font-size: 1rem;
}
.list {
li {
.pic {
height: auto !important;
}
.texts {
top: 1rem;
h6 {
font-size: 1rem !important;
}
.sub {
font-size: 0.85rem;
}
.des {
font-size: 0.85rem;
line-height: 0.85rem;
}
img {
width: 2rem;
height: 2rem;
}
}
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.inner {
/deep/ .el-breadcrumb__item {
font-size: 1rem;
}
.list {
li {
.pic {
height: auto !important;
}
.texts {
top: 4rem;
h6 {
font-size: 1.5rem !important;
}
.sub {
font-size: 1.2rem;
}
.des {
font-size: 1rem;
line-height: 1rem;
}
img {
width: 2rem;
height: 2rem;
}
}
}
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.inner {
/deep/ .el-breadcrumb__item {
font-size: 1rem;
}
.list {
li {
.pic {
height: auto !important;
}
.texts {
top: 4rem;
h6 {
font-size: 1.5rem !important;
}
.sub {
font-size: 1.2rem;
}
.des {
font-size: 1rem;
line-height: 1rem;
}
img {
width: 2rem;
height: 2rem;
}
}
}
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.inner {
/deep/ .el-breadcrumb__item {
font-size: 1rem;
}
.list {
li {
.pic {
width: 47%;
height: auto !important;
}
.texts {
top: 2rem;
h6 {
font-size: 1.5rem !important;
}
.sub {
font-size: 1.2rem;
}
.des {
font-size: 1rem;
line-height: 1rem;
}
img {
width: 2rem;
height: 2rem;
}
}
}
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.inner {
.list {
li {
.pic {
width: 47%;
height: auto !important;
}
.texts {
top: 4rem;
h6 {
font-size: 2rem !important;
}
.sub {
font-size: 1.5rem;
}
.des {
font-size: 1.3rem;
line-height: 1.3rem;
}
img {
width: 2rem;
height: 2rem;
}
}
}
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.inner {
.list {
li {
.pic {
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;
}
}
}
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.inner {
.list {
li {
.pic {
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;
}
}
}
}
}
}
</style>

@ -104,4 +104,31 @@ export default {
width: 1200px;
margin: 0 auto;
}
@media (max-width: 1300px) {
.org {
width: 100%;
padding: 15px;
.left {
width: 60%;
}
.pic {
width: 30%;
height: auto;
}
}
.lg-bg {
width: 85%;
}
}
@media (max-width: 980px) {
.org {
flex-direction: column;
.pic {
display: none;
}
.left {
width: 100%;
}
}
}
</style>

@ -384,7 +384,85 @@ export default {
}
.pic {
width: 50%;
// height: 700px;
// object-fit: cover;
}
}
@media (min-width: 2000px) {
.scan {
.scan-inner {
justify-content: flex-start;
}
}
}
@media (max-width: 1400px) {
.history {
.texts {
flex-direction: column;
}
.left {
width: 100%;
}
.bg {
width: auto;
max-width: 100%;
height: auto;
margin: 20px 0 0 0;
}
}
.scan {
.scan-inner {
flex-direction: column;
}
.left {
width: 100%;
}
.pic {
width: 100%;
margin-top: 2rem;
}
}
.fac {
.event {
.texts {
position: static;
margin-top: 20px;
}
}
}
}
@media (max-width: 920px) {
.core {
.texts {
top: 20px !important;
left: 20px !important;
right: 20px !important;
width: auto;
}
}
.scan {
padding: 20px;
}
.fac {
.l-card {
flex-direction: column;
li {
width: 100%;
margin-bottom: 1rem;
}
}
}
}
@media (max-width: 750px) {
.core {
.texts {
position: static;
padding: 20px;
color: #333;
}
.line {
background: #333;
}
}
}
</style>

@ -212,4 +212,58 @@ export default {
}
}
}
@media (max-width: 1200px) {
.tab-content {
width: 90%;
span {
font-size: 1.35rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
width: 90%;
h2 {
font-size: 1.5rem;
}
p {
font-size: 1rem;
margin: 10px 0 1.25rem;
}
.event {
flex-direction: column;
.time {
width: 100%;
li {
width: 100%;
justify-content: flex-start;
}
}
.right {
margin-top: 1.25rem;
width: 100%;
h6 {
font-size: 2rem;
}
.list {
li {
padding: 1.25rem;
flex-direction: column;
align-items: flex-start;
.texts {
width: 100%;
}
.pic {
width: 100%;
height: auto;
}
}
}
}
}
}
}
}
</style>

@ -187,4 +187,36 @@ export default {
right: 90%;
}
}
@media (max-width: 1200px) {
.tab-content {
width: 90%;
margin: auto;
padding-top: 1.25rem;
.intro {
flex-direction: column;
.pic {
width: 100%;
}
}
.intro-bg {
padding-top: 3rem;
.texts {
h6 {
font-size: 1.6rem;
}
}
}
.right {
width: 100% !important;
margin-top: 1.25rem;
.text {
margin-top: 1.25rem;
}
}
span {
font-size: 1.35rem;
}
}
}
</style>

@ -76,4 +76,12 @@ export default {
color: #020202;
line-height: 1.6rem;
}
@media (max-width: 1200px) {
.tab-content {
width: 90%;
span {
font-size: 1.35rem;
}
}
}
</style>

@ -98,10 +98,30 @@ export default {
.pic {
width: 320px;
height: 282px;
object-fit: cover;
}
}
.lg-bg {
width: 1200px;
margin: 0 auto;
}
@media (max-width: 1200px) {
.tab-content {
padding: 20px 0;
.org {
width: 95%;
padding: 15px;
flex-direction: column;
.pic {
display: none;
}
.left {
width: 100%;
}
}
}
.lg-bg {
width: 90%;
}
}
</style>

@ -84,4 +84,14 @@ export default {
color: #020202;
line-height: 1.6rem;
}
@media (max-width: 1200px) {
.tab-content {
width: 95%;
margin: 0 auto;
.video {
max-height: 18rem;
}
}
}
</style>

@ -117,6 +117,7 @@ export default {
.banner-img {
width: 100%;
height: 24rem;
object-fit: cover;
}
.texts {
position: absolute;
@ -157,4 +158,25 @@ export default {
padding: 20px 0;
margin: 0 auto;
}
@media (max-width: 1200px) {
.single-banner {
.texts {
top: 10rem;
left: 6rem;
}
}
.tabs {
// flex-direction: column;
width: 100%;
overflow-x: scroll;
li {
padding: 1.25rem 0;
margin: 0 1.25rem;
}
}
.tab-content {
width: 90%;
margin: 0 auto;
}
}
</style>

@ -3,8 +3,7 @@
<div class="forms">
<div class="item">
<span class="label">{{$t('column.Publicationtime')}}</span>
<el-date-picker style="width: 300px"
v-model="form.publicationYear"
<el-date-picker v-model="form.publicationYear"
type="year"
:placeholder="$t('column.pleaseSelectThePublicationTime')"
format="yyyy"
@ -132,4 +131,18 @@ export default {
cursor: pointer;
}
}
@media (max-width: 640px) {
.forms {
flex-direction: column;
align-items: flex-start;
.item {
display: flex;
margin-bottom: 20px;
margin-right: 0;
}
.search {
width: 100%;
}
}
}
</style>

@ -155,4 +155,18 @@ export default {
cursor: pointer;
}
}
@media (max-width: 640px) {
.forms {
flex-direction: column;
align-items: flex-start;
.item {
display: flex;
margin-bottom: 20px;
margin-right: 0;
}
.search {
width: 100%;
}
}
}
</style>

@ -129,4 +129,10 @@ export default {
padding: 20px 0;
margin: 0 auto;
}
@media (max-width: 1200px) {
.tab-content {
width: 90%;
margin: 0 auto;
}
}
</style>

@ -3,8 +3,7 @@
<div class="forms">
<div class="item">
<span class="label">{{$t('column.publicationyear')}}</span>
<el-date-picker style="width: 300px"
v-model="form.publicationYear"
<el-date-picker v-model="form.publicationYear"
type="year"
:placeholder="$t('column.pleaseSelectThePublicationTime')"
format="yyyy"
@ -109,4 +108,18 @@ export default {
line-height: 30px;
}
}
@media (max-width: 640px) {
.forms {
flex-direction: column;
align-items: flex-start;
.item {
display: flex;
margin-bottom: 20px;
margin-right: 0;
}
.search {
width: 100%;
}
}
}
</style>

@ -240,4 +240,19 @@ export default {
}
}
}
@media (max-width: 1084px) {
.content {
width: 95%;
}
.article {
flex-direction: column;
.left,
.right {
width: 100%;
}
.right {
margin: 20px 0 0;
}
}
}
</style>

@ -289,4 +289,808 @@ export default {
line-height: 1.3rem;
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel {
height: 18rem;
.el-carousel__container {
height: 18rem;
}
img {
height: 18rem;
}
}
}
.block {
padding: 50px 0;
.intro {
margin-bottom: 30px;
}
.area {
flex-direction: column;
li {
width: 95%;
margin: 1.25rem auto;
}
}
.group,
.news {
flex-direction: column;
li {
width: 95%;
margin: 20px auto;
}
}
}
.area {
li {
height: auto;
.pic {
height: 20rem;
}
.texts {
height: 10rem;
}
}
}
.group img {
height: 20rem;
}
.news img {
height: 20rem;
}
}
@media (max-width: 320px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
li {
img {
height: auto;
}
.text {
font-size: 1.5rem;
line-height: 1.8rem;
}
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
li {
img {
height: auto;
}
.text {
font-size: 1.5rem;
line-height: 1.8rem;
}
}
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
li {
img {
height: auto;
}
.text {
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: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
li {
img {
height: auto;
}
.text {
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: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
li {
img {
height: auto;
}
.text {
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: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
flex-direction: row;
li {
width: calc((100% - 3rem) / 3);
margin: 0 0.8rem 1.95rem 0;
-webkit-transition: 0.3s;
img {
height: auto;
}
.text {
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: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
flex-direction: row;
li {
width: calc((100% - 3rem) / 3);
margin: 0 0.8rem 1.95rem 0;
-webkit-transition: 0.3s;
img {
height: auto;
}
.text {
font-size: 1.5rem;
line-height: 1.8rem;
}
}
}
.area {
flex-direction: row;
li {
width: 19%;
.pic {
height: auto;
}
}
}
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel {
height: 18rem;
.el-carousel__container {
height: 18rem;
}
img {
height: 18rem;
}
}
}
.block {
padding: 50px 0;
.intro {
margin-bottom: 30px;
}
.area {
flex-direction: column;
li {
width: 95%;
margin: 1.25rem auto;
}
}
.group,
.news {
flex-direction: column;
li {
width: 95%;
margin: 20px auto;
}
}
}
.area {
li {
height: auto;
.pic {
height: 20rem;
}
.texts {
height: 10rem;
}
}
}
.group img {
height: 20rem;
}
.news img {
height: 20rem;
}
}
@media (max-width: 320px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
li {
img {
height: auto;
}
.text {
font-size: 1.5rem;
line-height: 1.8rem;
}
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
li {
img {
height: auto;
}
.text {
font-size: 1.5rem;
line-height: 1.8rem;
}
}
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
li {
img {
height: auto;
}
.text {
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: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
li {
img {
height: auto;
}
.text {
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: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
li {
img {
height: auto;
}
.text {
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: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
flex-direction: row;
li {
width: calc((100% - 3rem) / 3);
margin: 0 0.8rem 1.95rem 0;
-webkit-transition: 0.3s;
img {
height: auto;
}
.text {
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: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
flex-direction: row;
li {
width: calc((100% - 3rem) / 3);
margin: 0 0.8rem 1.95rem 0;
-webkit-transition: 0.3s;
img {
height: auto;
}
.text {
font-size: 1.5rem;
line-height: 1.8rem;
}
}
}
.area {
flex-direction: row;
li {
width: 19%;
.pic {
height: auto;
}
}
}
}
}
</style>

@ -238,4 +238,60 @@ export default {
}
}
}
@media (max-width: 1200px) {
.content {
width: 95%;
}
.article {
flex-direction: column;
.left,
.right {
width: 100%;
}
.left {
margin-bottom: 30px;
}
}
}
@media (max-width: 980px) {
.article {
.team-wrap {
display: flex;
align-items: flex-start;
}
.letter {
flex-direction: column;
margin: 16px 10px 0 0;
.item {
border: 1px solid #dbdbdb;
border-top: 0;
&:first-child {
border-top: 1px solid #dbdbdb;
border-radius: 4px 4px 0 0;
}
&:last-child {
border-radius: 0 0 4px 4px;
}
}
}
.teams {
flex: 1;
}
}
}
@media (max-width: 640px) {
.article {
.left {
.search {
width: 50%;
}
}
.teams {
flex-direction: column;
li {
width: 100%;
}
}
}
}
</style>

@ -162,4 +162,266 @@ export default {
font-size: 0.88rem;
}
}
@media (max-width: 1200px) {
body {
width: 100% !important;
}
.inner {
width: 80%;
}
.item {
img {
}
.rightText {
right: 12px !important;
}
.texts {
width: 85%;
box-sizing: border-box;
left: -1rem;
&:nth-child(2) {
right: -1.5rem !important;
}
.des {
-webkit-line-clamp: inherit;
}
}
}
}
@media (max-width: 320px) {
.wrap {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
top: 5rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
.inner {
img {
height: 18rem;
}
.texts {
padding: 1.25rem;
top: 1.5rem;
h6 {
font-size: 1.2rem;
}
.des {
font-size: 0.75rem;
}
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
top: 5rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
.inner {
img {
height: 18rem;
}
.texts {
padding: 1.25rem;
top: 1.5rem;
h6 {
font-size: 1.4rem;
}
.des {
font-size: 0.75rem;
}
}
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
top: 5rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
.inner {
img {
height: 18rem;
}
.texts {
padding: 1.25rem;
top: 1.5rem;
h6 {
font-size: 1.4rem;
}
.des {
font-size: 0.75rem;
}
}
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
top: 5rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.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: 12rem;
}
.texts {
top: 5rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.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: 12rem;
}
.texts {
top: 5rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.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: 12rem;
}
.texts {
top: 5rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
.inner {
img {
height: 18rem;
}
.texts {
padding: 1.25rem;
top: 1.5rem;
}
}
}
}
</style>

@ -126,6 +126,7 @@ export default {
.pic {
width: 100%;
height: 100%;
object-fit: cover;
}
.texts {
position: absolute;
@ -290,4 +291,43 @@ export default {
line-height: 1.6;
}
}
@media (max-width: 1200px) {
.items {
li {
.texts {
left: 0;
width: 98%;
}
&:nth-child(even) {
.texts {
right: auto;
}
}
}
}
.about {
height: 30rem;
}
}
@media (max-width: 780px) {
.program {
.slide {
flex-direction: column;
}
.texts {
width: 100%;
}
.img-wrap {
width: 100%;
height: 250px;
}
.list {
flex-direction: column;
li {
width: 100%;
margin-bottom: 1rem;
}
}
}
}
</style>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

@ -115,4 +115,17 @@ export default {
}
}
}
@media (max-width: 920px) {
.inner {
flex-direction: column;
justify-content: center;
align-items: center;
.pic {
max-width: 100%;
}
.texts {
margin: 20px 0 0;
}
}
}
</style>

@ -298,4 +298,360 @@ export default {
line-height: 1.5rem;
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.single-banner {
.texts {
left: 200px;
.banner-title {
font-size: 2.2rem;
}
}
}
.block {
padding: 30px 0;
.inner {
.item {
flex-direction: column;
padding: 1.5rem;
}
.texts {
width: 100%;
padding: 1.5rem;
}
}
}
.style {
/deep/ .el-carousel__container {
height: 27rem !important;
}
.wow {
margin-bottom: 2rem;
}
.item {
height: 25rem;
}
}
}
@media (max-width: 320px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
left: 2rem;
top: 3rem;
.banner-title {
font-size: 1.5rem;
}
.banner-des {
font-size: 1rem;
}
}
}
.block {
.inner {
width: 100%;
.item {
.img-wrap {
width: 100%;
height: auto;
}
}
}
}
.style {
width: 100%;
/deep/ .el-carousel {
height: 13rem !important;
}
/deep/ .el-carousel__container {
height: 13rem !important;
}
.item {
height: 13rem;
.text {
line-height: 1.5rem;
font-size: 1rem;
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
left: 2rem;
top: 3rem;
.banner-title {
font-size: 1.5rem;
}
.banner-des {
font-size: 1rem;
}
}
}
.block {
.inner {
width: 100%;
.item {
.img-wrap {
width: 100%;
height: auto;
}
}
}
}
.style {
width: 100%;
/deep/ .el-carousel {
height: 13rem !important;
}
/deep/ .el-carousel__container {
height: 13rem !important;
}
.item {
height: 13rem;
.text {
line-height: 1.5rem;
font-size: 1rem;
}
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
left: 2rem;
top: 3rem;
.banner-title {
font-size: 1.5rem;
}
.banner-des {
font-size: 1rem;
}
}
}
.block {
.inner {
width: 100%;
.item {
.img-wrap {
width: 100%;
height: auto;
}
}
}
}
.style {
width: 100%;
/deep/ .el-carousel {
height: 13rem !important;
}
/deep/ .el-carousel__container {
height: 13rem !important;
}
.item {
height: 13rem;
.text {
line-height: 1.5rem;
font-size: 1rem;
}
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
left: 2rem;
top: 3rem;
.banner-title {
font-size: 1.5rem;
}
.banner-des {
font-size: 1rem;
}
}
}
.block {
.inner {
width: 100%;
.item {
.img-wrap {
width: 100%;
height: auto;
}
}
}
}
.style {
width: 100%;
/deep/ .el-carousel {
height: 13rem !important;
}
/deep/ .el-carousel__container {
height: 13rem !important;
}
.item {
height: 13rem;
.text {
line-height: 1.5rem;
font-size: 1rem;
}
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
left: 2rem;
top: 3rem;
.banner-title {
font-size: 1.5rem;
}
.banner-des {
font-size: 1rem;
}
}
}
.block {
.inner {
width: 100%;
.item {
.img-wrap {
width: 100%;
height: auto;
}
}
}
}
.style {
width: 100%;
/deep/ .el-carousel {
height: 13rem !important;
}
/deep/ .el-carousel__container {
height: 13rem !important;
}
.item {
height: 13rem;
.text {
line-height: 1.5rem;
font-size: 1rem;
}
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
left: 2rem;
top: 3rem;
.banner-title {
font-size: 1.5rem;
}
.banner-des {
font-size: 1rem;
}
}
}
.block {
.inner {
width: 100%;
.item {
width: 100%;
flex-direction: row;
.img-wrap {
width: 60%;
height: auto;
}
.texts {
width: 80%;
margin-left: 1.5rem;
}
}
}
}
.style {
width: 100%;
/deep/ .el-carousel {
height: 18rem !important;
}
/deep/ .el-carousel__container {
height: 18rem !important;
}
.item {
height: 18rem;
.text {
line-height: 1.5rem;
font-size: 1rem;
}
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
left: 2rem;
top: 3rem;
.banner-title {
font-size: 1.5rem;
}
.banner-des {
font-size: 1rem;
}
}
}
.block {
.inner {
width: 100%;
.item {
width: 100%;
flex-direction: row;
.img-wrap {
width: 60%;
height: auto;
}
.texts {
width: 80%;
margin-left: 1.5rem;
}
}
}
}
.style {
width: 100%;
/deep/ .el-carousel {
height: 20rem !important;
}
/deep/ .el-carousel__container {
height: 20rem !important;
}
.item {
height: 20rem;
.text {
line-height: 1.5rem;
font-size: 1rem;
}
}
}
}
</style>

@ -322,4 +322,311 @@ export default {
}
}
}
@media (max-width: 1200px) {
.content {
width: 98%;
}
.article {
flex-direction: column;
.left,
.right {
width: 100%;
}
.left {
margin-bottom: 30px;
}
}
}
@media (min-width: 280px) and (max-width: 750px) {
.article {
.recruit {
li {
flex-direction: column;
}
.pic {
width: 100%;
margin-bottom: 10px;
}
}
.notice {
flex-direction: column;
li {
width: 100%;
}
}
}
}
@media (max-width: 1200px) {
.content {
.article {
flex-direction: column;
.left {
width: 100%;
.recruit {
li {
flex-direction: column;
.pic {
width: 100%;
}
.texts {
margin-top: 0.8rem;
}
}
}
.notice {
flex-direction: column;
li {
width: 100%;
}
}
}
.right {
width: 100%;
.el-tree {
display: none;
}
}
}
}
}
@media (max-width: 320px) {
.wrap {
.single-banner {
.banner-img {
height: 13rem;
}
.texts {
left: 3rem;
top: 7rem;
}
}
}
.content {
.article {
.left {
.recruit {
li {
.pic {
height: 13rem;
}
}
}
.notice {
li {
height: auto;
.pic {
height: 13rem;
}
}
}
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
.single-banner {
.banner-img {
height: 15rem;
}
.texts {
left: 3rem;
top: 7rem;
}
}
}
.content {
.article {
.left {
.recruit {
li {
.pic {
height: 15rem;
}
}
}
.notice {
li {
height: auto;
.pic {
height: 15rem;
}
}
}
}
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
.single-banner {
.banner-img {
height: 18rem;
}
.texts {
left: 3rem;
top: 10rem;
}
}
}
.content {
.article {
.left {
.recruit {
li {
.pic {
height: 18rem;
}
}
}
.notice {
li {
height: auto;
.pic {
height: 18rem;
}
}
}
}
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
.single-banner {
.banner-img {
height: 20rem;
}
.texts {
left: 3rem;
top: 12rem;
}
}
}
.content {
.article {
.left {
.recruit {
li {
.pic {
height: 22rem;
}
}
}
.notice {
li {
height: auto;
.pic {
height: 22rem;
}
}
}
}
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.wrap {
.single-banner {
.banner-img {
height: 22rem;
}
.texts {
left: 3rem;
top: 14rem;
}
}
}
.content {
.article {
.left {
.recruit {
li {
.pic {
height: 26rem;
}
}
}
.notice {
li {
height: auto;
.pic {
height: 26rem;
}
}
}
}
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.wrap {
.single-banner {
.banner-img {
height: 26rem;
}
.texts {
left: 3rem;
top: 16rem;
}
}
}
.content {
.article {
.left {
.recruit {
li {
.pic {
height: 30rem;
}
}
}
.notice {
li {
height: auto;
.pic {
height: 30rem;
}
}
}
}
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
.single-banner {
.banner-img {
height: 30rem;
}
.texts {
left: 3rem;
top: 18rem;
}
}
}
.content {
.article {
.left {
.recruit {
li {
.pic {
height: 35rem;
}
}
}
.notice {
li {
height: auto;
.pic {
height: 35rem;
}
}
}
}
}
}
}
</style>

@ -204,6 +204,7 @@ export default {
.pic {
width: 100%;
height: 100%;
object-fit: cover;
}
.texts {
position: absolute;
@ -269,4 +270,50 @@ export default {
}
}
}
@media (max-width: 1200px) {
.content {
width: 90%;
}
.article {
flex-direction: column;
.left {
width: 100%;
.recruit {
li {
flex-direction: column;
.pic {
width: 100%;
}
.texts {
margin-top: 0.8rem;
}
}
}
.notice {
flex-direction: column;
li {
width: 100%;
}
}
}
.right {
width: 100%;
}
}
}
@media (max-width: 480px) {
.article {
.left {
.people {
li {
.texts {
left: 10px;
right: auto;
}
}
}
}
}
}
</style>

@ -101,6 +101,7 @@ export default {
width: 224px;
height: 268px;
margin-right: 25px;
object-fit: cover;
}
h6 {
font-size: 1.2rem;
@ -120,4 +121,26 @@ export default {
}
}
}
@media (max-width: 1200px) {
.content {
width: 95%;
flex-direction: column;
.left,
.right {
width: 100%;
}
}
}
@media (max-width: 640px) {
.content {
.list {
li {
flex-direction: column;
}
.pic {
margin: 0 0 20px 0;
}
}
}
}
</style>

@ -18,7 +18,8 @@
<p class="en wow fadeInUp"
data-wow-delay="0.5s">USERS SHARE</p>
<div class="des wow fadeInUp"
data-wow-delay="0.8s">{{ modules[1].form.des }}</div>
data-wow-delay="0.8s"
v-html="modules[1].form.des"></div>
</div>
<img class="pic wow bounceInRight"
data-wow-delay="0.8s"
@ -35,7 +36,7 @@
<div class="block gray">
<ul class="group">
<li class="wow bounceInDown"
:class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
:class="{'cursor-pointer': modules[2].form.link && isLink(modules[2].form.link.linkName)}"
@click="openLink(modules[2].form)">
<img src="@/assets/images/userSharing/2.png"
alt="">
@ -44,7 +45,7 @@
</li>
<li class="wow bounceInDown"
data-wow-delay="0.1s"
:class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
:class="{'cursor-pointer': modules[3].form.link && isLink(modules[3].form.link.linkName)}"
@click="openLink(modules[3].form)">
<img src="@/assets/images/userSharing/3.png"
alt="">
@ -53,7 +54,7 @@
</li>
<li class="wow bounceInDown"
data-wow-delay="0.2s"
:class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}"
:class="{'cursor-pointer': modules[4].form.link && isLink(modules[4].form.link.linkName)}"
@click="openLink(modules[4].form)">
<img src="@/assets/images/userSharing/4.png"
alt="">
@ -158,7 +159,7 @@ export default {
bottom: 0;
left: 0;
width: 60%;
padding: 1.5rem 0 1.5rem 18%;
padding: 1.5rem 0 1.5rem 2%;
background: #7bacc4;
border-radius: 0px 100px 0px 0px;
opacity: 0.88;
@ -222,4 +223,344 @@ export default {
line-height: 31px;
}
}
@media (max-width: 1200px) {
body {
width: 100% !important;
}
.share {
width: 100%;
.inner {
width: 100%;
flex-direction: column;
.left {
width: 100%;
}
}
.des {
display: block;
padding: 0 10px;
}
.pic {
width: 100%;
}
.card {
width: 100%;
}
}
.group {
width: 100%;
flex-direction: column;
li {
width: 100%;
margin-top: 20px;
}
}
}
@media (max-width: 320px) {
.wrap {
.single-banner {
.banner-img {
height: 13rem;
}
.texts {
top: 7rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
padding: 2rem 0;
.inner {
.pic {
height: auto;
}
.card {
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: 0.9rem;
}
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
.single-banner {
.banner-img {
height: 13rem;
}
.texts {
top: 7rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
padding: 2rem 0;
.inner {
.pic {
height: auto;
}
.card {
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: 0.9rem;
}
}
}
}
.group {
li {
height: auto;
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
.single-banner {
.banner-img {
height: 13rem;
}
.texts {
top: 7rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
padding: 2rem 0;
.inner {
.pic {
height: auto;
}
.card {
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: 0.9rem;
}
}
}
}
.group {
li {
height: auto;
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
.single-banner {
.banner-img {
height: 13rem;
}
.texts {
top: 7rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
padding: 2rem 0;
.inner {
.pic {
height: auto;
}
.card {
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: 0.9rem;
}
}
}
}
.group {
li {
height: auto;
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.wrap {
.single-banner {
.banner-img {
height: 13rem;
}
.texts {
top: 7rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
padding: 2rem 0;
.inner {
.pic {
height: auto;
}
.card {
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: 0.9rem;
}
}
}
}
.group {
flex-direction: row;
li {
.des {
line-height: 1rem;
}
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.wrap {
.single-banner {
.banner-img {
height: 13rem;
}
.texts {
top: 7rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
padding: 2rem 0;
.inner {
.pic {
height: auto;
}
.card {
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: 0.9rem;
}
}
}
}
.group {
flex-direction: row;
li {
.des {
line-height: 1rem;
}
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
.single-banner {
.banner-img {
height: 13rem;
}
.texts {
top: 7rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
padding: 2rem 0;
.inner {
.pic {
height: auto;
}
.card {
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: 0.9rem;
}
}
}
}
.group {
flex-direction: row;
li {
.des {
line-height: 1rem;
}
}
}
}
</style>

@ -129,3 +129,30 @@
}
}
}
@media (max-width: 1200px) {
.wrap {
.single-banner {
.banner-img {
height: 35rem;
}
.texts {
top: 20rem;
left: 6rem;
}
}
}
.inner {
width: 90%;
}
.tabs {
overflow: hidden;
overflow-x: auto;
white-space: normal;
justify-content: normal;
display: -webkit-box;
li {
white-space: normal;
}
}
}

Loading…
Cancel
Save