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

fix

Browse Source
master
yujialong 3 months ago
parent 4225e738f8
commit 695323c134
3 changed files with 605 additions and 566 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/components/menuTree/index.vue
  2. 5
      src/pages/column/index.vue
  3. 286
      src/pages/news/index.vue

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

@ -84,4 +84,14 @@ export default {
} }
} }
} }
@media (max-width: 640px) {
.nav {
&>.menu-child {
&>.el-menu-item {
font-size: 1rem;
}
}
}
}
</style> </style>

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

@ -1522,5 +1522,10 @@ export default {
} }
} }
} }
.detail {
max-width: 100%;
margin-top: 20px;
}
} }
</style> </style>

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

@ -4,12 +4,9 @@
:arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :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'"> :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
:key="i"> <div :class="['banner-item', { 'cursor-pointer': isLink(item.link.linkName) }]" @click="openLink(item)">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" <img :src="item.pic" alt="">
@click="openLink(item)">
<img :src="item.pic"
alt="">
<p class="banner-name">{{ item.title }}</p> <p class="banner-name">{{ item.title }}</p>
</div> </div>
</el-carousel-item> </el-carousel-item>
@ -17,136 +14,89 @@
</el-carousel> </el-carousel>
<div class="newsTab"> <div class="newsTab">
<ul class="scollBox wow fadeInLeft" <ul class="scollBox wow fadeInLeft" ref="newsTab">
ref="newsTab">
<template v-for="(item, i) in modules[1].list"> <template v-for="(item, i) in modules[1].list">
<li v-if="item.columnName" <li v-if="item.columnName" :class="{ active: i == curColumn }" :key="i" @click="tabChange($event, i)">{{
:class="{active: i == curColumn}" item.columnName }}</li>
:key="i"
@click="tabChange($event,i)">{{ item.columnName }}</li>
</template> </template>
</ul> </ul>
</div> </div>
<div class="block"> <div class="block">
<div class="inner" <div class="inner" v-if="modules[1].list[curColumn].articles && modules[1].list[curColumn].articles.length">
v-if="modules[1].list[curColumn].articles && modules[1].list[curColumn].articles.length"> <div class="news-banner wow fadeInDown" data-wow-delay="0.5s"
<div class="news-banner wow fadeInDown"
data-wow-delay="0.5s"
@click="toArtice(curArticle, modules[1].list[curColumn])"> @click="toArtice(curArticle, modules[1].list[curColumn])">
<img width="50%" <img width="50%" height="410" class="titileImg" :src="curArticle.titleImg" alt=""
height="410"
class="titileImg"
:src="curArticle.titleImg"
alt=""
onerror="javascript:this.src='./images/3.png';"> onerror="javascript:this.src='./images/3.png';">
<div class="right"> <div class="right">
<h6>{{ curArticle.title }}</h6> <h6>{{ curArticle.title }}</h6>
<div class="des" <div class="des" v-html="curArticle.mainBody"></div>
v-html="curArticle.mainBody"></div>
<p class="meta">{{ curArticle.releaseTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p> <p class="meta">{{ curArticle.releaseTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p>
<ul class="inds"> <ul class="inds">
<li v-for="i in modules[1].list[curColumn].articles.length > 2 ? 3 : modules[1].list[curColumn].articles.length" <li
:key="i" v-for="i in modules[1].list[curColumn].articles.length > 2 ? 3 : modules[1].list[curColumn].articles.length"
:class="{active: curInd == i - 1}" :key="i" :class="{ active: curInd == i - 1 }" @click.stop="switchCarousel(i - 1)"></li>
@click.stop="switchCarousel(i - 1)"></li>
</ul> </ul>
</div> </div>
</div> </div>
<ul class="card"> <ul class="card">
<template v-for="(item, i) in modules[1].list[curColumn].articles"> <template v-for="(item, i) in modules[1].list[curColumn].articles">
<li v-if="i > 2" <li v-if="i > 2" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
:key="i" <img class="pic" :src="item.titleImg" alt="">
class="wow fadeInDown"
:data-wow-delay="(0.1 * i).toFixed(1) + 's'">
<img class="pic"
:src="item.titleImg"
alt="">
<div class="texts"> <div class="texts">
<p class="meta">{{ item.releaseTime }} {{ item.author && ' | ' + item.author }}</p> <p class="meta">{{ item.releaseTime }} {{ item.author && ' | ' + item.author }}</p>
<div class="des">{{ item.title }}</div> <div class="des">{{ item.title }}</div>
<img class="arrow" <img class="arrow" src="@/assets/images/arrow.png" alt=""
src="@/assets/images/arrow.png"
alt=""
@click="toArtice(item, modules[1].list[curColumn])"> @click="toArtice(item, modules[1].list[curColumn])">
</div> </div>
</li> </li>
</template> </template>
</ul> </ul>
<div class="more wow fadeInDown" <div class="more wow fadeInDown" data-wow-delay="0.5s" @click="toMore">more ></div>
data-wow-delay="0.5s"
@click="toMore">more ></div>
</div> </div>
</div> </div>
<div class="block gray"> <div class="block gray">
<div class="inner lg"> <div class="inner lg">
<h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
<p class="intro wow fadeInUp" <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
data-wow-delay="0.5s">{{ modules[2].form.des }}</p> <div class="shop-shows" v-if="articles.length">
<div class="shop-shows" <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles[0], modules[3].form)">
v-if="articles.length"> <img class="pic" width="100%" height="400" :src="articles[0].titleImg" alt=""
<div class="left wow fadeInLeft"
data-wow-delay="0.5s"
@click="toArtice(articles[0], modules[3].form)">
<img class="pic"
width="100%"
height="400"
:src="articles[0].titleImg"
alt=""
onerror="javascript:this.src='./images/2.png';"> onerror="javascript:this.src='./images/2.png';">
<div class="texts"> <div class="texts">
<h6>{{ articles[0].title }}</h6> <h6>{{ articles[0].title }}</h6>
<div class="des" <div class="des" v-html="articles[0].mainBody"></div>
v-html="articles[0].mainBody"></div>
</div> </div>
</div> </div>
<div v-if="articles.length > 1" <div v-if="articles.length > 1" class="right wow fadeInRight" data-wow-delay="0.5s">
class="right wow fadeInRight"
data-wow-delay="0.5s">
<ul class="show-card"> <ul class="show-card">
<li v-if="articles[1]" <li v-if="articles[1]" @click="toArtice(articles[1], modules[3].form)">
@click="toArtice(articles[1], modules[3].form)"> <img class="pic" :src="articles[1].titleImg" alt="">
<img class="pic"
:src="articles[1].titleImg"
alt="">
<div class="text">{{ articles[1].title }}</div> <div class="text">{{ articles[1].title }}</div>
</li> </li>
<li v-if="articles[2]" <li v-if="articles[2]" @click="toArtice(articles[2], modules[3].form)">
@click="toArtice(articles[2], modules[3].form)"> <img class="pic" :src="articles[2].titleImg" alt="">
<img class="pic"
:src="articles[2].titleImg"
alt="">
<div class="text">{{ articles[2].title }}</div> <div class="text">{{ articles[2].title }}</div>
</li> </li>
</ul> </ul>
<ul class="card-list"> <ul class="card-list">
<template v-for="(item, i) in articles"> <template v-for="(item, i) in articles">
<li v-if="i > 2" <li v-if="i > 2" :key="i">
:key="i"> <img class="pic" :src="item.titleImg" alt="">
<img class="pic"
:src="item.titleImg"
alt="">
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<div class="des" <div class="des" v-html="item.mainBody"></div>
v-html="item.mainBody"></div>
</div> </div>
<img class="arrow" <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[3].form)">
src="@/assets/images/arrow.png"
alt=""
@click="toArtice(item, modules[3].form)">
</li> </li>
</template> </template>
</ul> </ul>
</div> </div>
</div> </div>
<div class="all-link m-t-10" <div class="all-link m-t-10" @click="toAll(modules[3].form)">
@click="toAll(modules[3].form)"> <span>{{ $t('column.all') }} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
<span>{{$t('column.all')}} <img class="icon"
src="@/assets/images/arrow.png"
alt=""></span>
</div> </div>
</div> </div>
</div> </div>
@ -154,18 +104,10 @@
<div class="block conference"> <div class="block conference">
<div class="inner lg"> <div class="inner lg">
<h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
<p class="intro wow fadeInUp" <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
data-wow-delay="0.5s">{{ modules[4].form.des }}</p> <div class="shows" v-if="articles1.length">
<div class="shows" <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles1[0], modules[5].form)">
v-if="articles1.length"> <img class="pic" width="100%" height="558" :src="articles1[0].titleImg" alt=""
<div class="left wow fadeInLeft"
data-wow-delay="0.5s"
@click="toArtice(articles1[0], modules[5].form)">
<img class="pic"
width="100%"
height="558"
:src="articles1[0].titleImg"
alt=""
onerror="javascript:this.src='./images/1.png';"> onerror="javascript:this.src='./images/1.png';">
<div class="texts"> <div class="texts">
<div class="meta"> <div class="meta">
@ -174,48 +116,30 @@
</div> </div>
<div> <div>
<h6>{{ articles1[0].title }}</h6> <h6>{{ articles1[0].title }}</h6>
<div class="des" <div class="des" v-html="articles1[0].mainBody"></div>
v-html="articles1[0].mainBody"></div>
</div> </div>
</div> </div>
</div> </div>
<ul class="card-list wow fadeInRight" <ul class="card-list wow fadeInRight" data-wow-delay="0.5s">
data-wow-delay="0.5s">
<template v-for="(item, i) in articles1"> <template v-for="(item, i) in articles1">
<li v-if="i" <li v-if="i" :key="i" @click="toArtice(item, modules[5].form)">
:key="i" <img class="pic" :src="item.titleImg" alt="">
@click="toArtice(item, modules[5].form)">
<img class="pic"
:src="item.titleImg"
alt="">
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<p v-if="item.keynoteSpeaker" <p v-if="item.keynoteSpeaker" class="text">
class="text"> <img class="icon" src="@/assets/images/mine.png" alt="">
<img class="icon"
src="@/assets/images/mine.png"
alt="">
<span>{{ item.keynoteSpeaker }}</span> <span>{{ item.keynoteSpeaker }}</span>
</p> </p>
<p v-if="item.activityStartTime" <p v-if="item.activityStartTime" class="text">
class="text"> <img class="icon" src="@/assets/images/time.png" alt="">
<img class="icon"
src="@/assets/images/time.png"
alt="">
<span>Time: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}</span> <span>Time: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}</span>
</p> </p>
<p v-if="item.onlineLocation" <p v-if="item.onlineLocation" class="text">
class="text"> <img class="icon" src="@/assets/images/online.png" alt="">
<img class="icon"
src="@/assets/images/online.png"
alt="">
<span>Onlone: {{ item.onlineLocation }}</span> <span>Onlone: {{ item.onlineLocation }}</span>
</p> </p>
<p v-if="item.offlineLocation" <p v-if="item.offlineLocation" class="text">
class="text"> <img class="icon" src="@/assets/images/location.png" alt="">
<img class="icon"
src="@/assets/images/location.png"
alt="">
<span>Address: {{ item.offlineLocation }}</span> <span>Address: {{ item.offlineLocation }}</span>
</p> </p>
</div> </div>
@ -223,10 +147,8 @@
</template> </template>
</ul> </ul>
</div> </div>
<div class="all-link m-t-10" <div class="all-link m-t-10" @click="toAll(modules[5].form)">
@click="toAll(modules[5].form)"> <span style="color: #fff">{{ $t('column.all') }} <img class="icon" src="@/assets/images/arrow.png"
<span style="color: #fff">{{$t('column.all')}} <img class="icon"
src="@/assets/images/arrow.png"
alt=""></span> alt=""></span>
</div> </div>
</div> </div>
@ -385,8 +307,8 @@ export default {
}, },
// 跳转more // 跳转more
toMore () { toMore () {
const { column } = this.modules[1].list[this.curColumn] const { column, site } = this.modules[1].list[this.curColumn]
column.length && this.$router.push(`/column?id=${column[column.length - 1]}`) column.length && this.$router.push(`/column?id=${column[column.length - 1]}&siteId=${site}`)
} }
} }
}; };
@ -395,33 +317,41 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss'; @import '../../styles/page/page.scss';
.wrap { .wrap {
/deep/ .el-carousel { /deep/ .el-carousel {
height: 24rem; height: 24rem;
.el-carousel__container { .el-carousel__container {
height: 24rem; height: 24rem;
} }
img { img {
height: 24rem; height: 24rem;
} }
} }
} }
.banner-item { .banner-item {
.banner-name { .banner-name {
font-size: 2.16rem; font-size: 2.16rem;
} }
} }
.block { .block {
padding: 3.85rem 0; padding: 3.85rem 0;
} }
.newsTab { .newsTab {
box-shadow: 0px 2px 14px 0px rgba(167, 167, 167, 0.26); box-shadow: 0px 2px 14px 0px rgba(167, 167, 167, 0.26);
.scollBox { .scollBox {
width: 85.714rem; width: 85.714rem;
margin: auto; margin: auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
li { li {
flex: 1; flex: 1;
text-align: center; text-align: center;
@ -432,42 +362,52 @@ export default {
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26); text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer; cursor: pointer;
&.active { &.active {
color: #1583ff; color: #1583ff;
border-bottom-color: #1583ff; border-bottom-color: #1583ff;
} }
} }
} }
/deep/.articles { /deep/.articles {
width: 50%; width: 50%;
.el-carousel__indicators--horizontal { .el-carousel__indicators--horizontal {
bottom: 1.25rem; bottom: 1.25rem;
left: 50.25rem; left: 50.25rem;
} }
} }
.lg { .lg {
.intro { .intro {
margin-bottom: 4rem; margin-bottom: 4rem;
} }
} }
.news-banner { .news-banner {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
.titileImg { .titileImg {
height: auto; height: auto;
} }
.pic { .pic {
width: 43.75rem; width: 43.75rem;
height: 23.75rem; height: 23.75rem;
} }
.right { .right {
position: relative; position: relative;
width: 50%; width: 50%;
padding: 2.5rem 2.5rem 1.5rem; padding: 2.5rem 2.5rem 1.5rem;
background: #1583ff; background: #1583ff;
color: #fff; color: #fff;
&:hover { &:hover {
background: #465f85; background: #465f85;
h6, h6,
.des, .des,
.meta { .meta {
@ -476,11 +416,13 @@ export default {
} }
} }
} }
.inds { .inds {
position: absolute; position: absolute;
bottom: 2.5rem; bottom: 2.5rem;
left: 3.75rem; left: 3.75rem;
display: flex; display: flex;
li { li {
width: 0.625rem; width: 0.625rem;
height: 0.625rem; height: 0.625rem;
@ -488,6 +430,7 @@ export default {
background: #ffffff; background: #ffffff;
border-radius: 50%; border-radius: 50%;
transition: 0.2s; transition: 0.2s;
&.active { &.active {
width: 1.875rem; width: 1.875rem;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
@ -495,21 +438,25 @@ export default {
} }
} }
} }
h6 { h6 {
font-size: 1.2rem; font-size: 1.2rem;
transition: 0.3s; transition: 0.3s;
} }
.des { .des {
margin: 1.5rem 0; margin: 1.5rem 0;
font-size: 0.88rem; font-size: 0.88rem;
line-height: 1.3714rem; line-height: 1.3714rem;
transition: 0.3s; transition: 0.3s;
} }
.meta { .meta {
font-size: 0.88rem; font-size: 0.88rem;
transition: 0.3s; transition: 0.3s;
} }
} }
.card { .card {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -522,25 +469,31 @@ export default {
box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21); box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
border-radius: 6px; border-radius: 6px;
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
.pic { .pic {
width: 100%; width: 100%;
height: auto; height: auto;
object-fit: cover; object-fit: cover;
} }
.texts { .texts {
padding: 2rem 1.5rem; padding: 2rem 1.5rem;
} }
.meta { .meta {
font-size: 0.88rem; font-size: 0.88rem;
color: #666; color: #666;
} }
.des { .des {
height: 3.7rem; height: 3.7rem;
margin: 10px 0; margin: 10px 0;
@ -551,10 +504,12 @@ export default {
line-height: 1.7rem; line-height: 1.7rem;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
.arrow { .arrow {
width: 2.25rem; width: 2.25rem;
} }
} }
.more { .more {
width: 23.375rem; width: 23.375rem;
margin: 3.625rem auto 0; margin: 3.625rem auto 0;
@ -566,29 +521,36 @@ export default {
border: 2px solid #2b6cef; border: 2px solid #2b6cef;
cursor: pointer; cursor: pointer;
} }
.shop-shows { .shop-shows {
display: flex; display: flex;
.left { .left {
width: 41.25rem; width: 41.25rem;
margin-right: 1.25rem; margin-right: 1.25rem;
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
.pic { .pic {
transition: 0.3s; transition: 0.3s;
height: auto; height: auto;
object-fit: cover; object-fit: cover;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
} }
.texts { .texts {
padding: 2rem 1.5rem; padding: 2rem 1.5rem;
} }
h6 { h6 {
font-size: 1.2rem; font-size: 1.2rem;
color: #272727; color: #272727;
} }
.des { .des {
margin-top: 10px; margin-top: 10px;
font-size: 0.88rem; font-size: 0.88rem;
@ -596,13 +558,16 @@ export default {
line-height: 1.714rem; line-height: 1.714rem;
} }
} }
.right { .right {
width: 60%; width: 60%;
overflow: hidden; overflow: hidden;
} }
.show-card { .show-card {
display: flex; display: flex;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
li { li {
position: relative; position: relative;
height: auto; height: auto;
@ -613,15 +578,18 @@ export default {
margin-right: 1.375rem; margin-right: 1.375rem;
} }
} }
.pic { .pic {
width: 25rem; width: 25rem;
height: 12.3125rem; height: 12.3125rem;
transition: 0.3s; transition: 0.3s;
object-fit: cover; object-fit: cover;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
} }
.text { .text {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -637,31 +605,38 @@ export default {
box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08); box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
} }
} }
.card-list { .card-list {
padding: 1.5rem 1.3rem; padding: 1.5rem 1.3rem;
background-color: #fff; background-color: #fff;
li { li {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
margin-bottom: 0.9rem; margin-bottom: 0.9rem;
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.pic { .pic {
width: 8rem; width: 8rem;
height: auto; height: auto;
margin-right: 1.5rem; margin-right: 1.5rem;
object-fit: cover; object-fit: cover;
} }
.texts { .texts {
width: calc(100% - 15rem); width: calc(100% - 15rem);
margin-right: 3.5rem; margin-right: 3.5rem;
} }
h6 { h6 {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 1rem; font-size: 1rem;
@ -672,6 +647,7 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.des { .des {
font-size: 0.7rem; font-size: 0.7rem;
color: #666; color: #666;
@ -679,44 +655,54 @@ export default {
text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08); text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
.arrow { .arrow {
width: 2rem; width: 2rem;
} }
} }
} }
.conference { .conference {
background: #072947; background: #072947;
.b-title, .b-title,
.intro { .intro {
color: #fff; color: #fff;
} }
.shows { .shows {
display: flex; display: flex;
} }
.left { .left {
width: 44.875rem; width: 44.875rem;
margin-right: 20px; margin-right: 20px;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
.pic { .pic {
transition: 0.3s; transition: 0.3s;
height: auto; height: auto;
object-fit: cover; object-fit: cover;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
} }
.texts { .texts {
display: flex; display: flex;
padding: 3.78rem 1.5rem; padding: 3.78rem 1.5rem;
background-color: #fff; background-color: #fff;
} }
.meta { .meta {
padding: 0.5714rem 1.314rem 0.5714rem 0; padding: 0.5714rem 1.314rem 0.5714rem 0;
margin-right: 1.828rem; margin-right: 1.828rem;
text-align: center; text-align: center;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
} }
.date { .date {
font-size: 2.5714rem; font-size: 2.5714rem;
font-family: DINAlternate-Bold, DINAlternate; font-family: DINAlternate-Bold, DINAlternate;
@ -724,15 +710,18 @@ export default {
color: #1f1f1f; color: #1f1f1f;
line-height: 2.9714rem; line-height: 2.9714rem;
} }
.year { .year {
font-size: 0.9142rem; font-size: 0.9142rem;
white-space: nowrap; white-space: nowrap;
color: #666; color: #666;
} }
h6 { h6 {
font-size: 1.1428rem; font-size: 1.1428rem;
color: #272727; color: #272727;
} }
.des { .des {
margin-top: 10px; margin-top: 10px;
font-size: 0.8rem; font-size: 0.8rem;
@ -740,8 +729,10 @@ export default {
line-height: 1.3714rem; line-height: 1.3714rem;
} }
} }
.card-list { .card-list {
width: 50%; width: 50%;
li { li {
display: flex; display: flex;
padding: 0.8rem; padding: 0.8rem;
@ -751,38 +742,47 @@ export default {
align-items: center; align-items: center;
transition: 0.3s; transition: 0.3s;
height: 9rem; height: 9rem;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
&:hover { &:hover {
transform: translateX(20px); transform: translateX(20px);
} }
} }
.pic { .pic {
width: 10rem; width: 10rem;
height: auto; height: auto;
margin-right: 1.5rem; margin-right: 1.5rem;
object-fit: cover; object-fit: cover;
} }
.texts { .texts {
width: calc(100% - 11.5rem); width: calc(100% - 11.5rem);
} }
h6 { h6 {
margin-bottom: 5px; margin-bottom: 5px;
font-size: 1rem; font-size: 1rem;
color: #333; color: #333;
@include ellipsis(); @include ellipsis();
} }
.text { .text {
display: flex; display: flex;
align-items: center; align-items: center;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
span { span {
@include ellipsis(); @include ellipsis();
} }
} }
.icon { .icon {
margin-right: 5px; margin-right: 5px;
} }
@ -794,17 +794,21 @@ export default {
overflow-x: scroll; overflow-x: scroll;
display: -webkit-box; display: -webkit-box;
} }
.shop-shows { .shop-shows {
.left { .left {
width: 50%; width: 50%;
} }
.right { .right {
width: 48%; width: 48%;
} }
.card-list { .card-list {
.pic { .pic {
margin-right: 1rem; margin-right: 1rem;
} }
.texts { .texts {
width: calc(100% - 11rem); width: calc(100% - 11rem);
margin-right: 1rem; margin-right: 1rem;
@ -812,56 +816,72 @@ export default {
} }
} }
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.block { .block {
padding: 50px 0; padding: 50px 0;
.inner { .inner {
.more { .more {
width: 100%; width: 100%;
margin: 20px auto 0; margin: 20px auto 0;
} }
.news-banner { .news-banner {
flex-direction: column; flex-direction: column;
img { img {
width: 100%; width: 100%;
} }
.right { .right {
margin-top: 10px; margin-top: 10px;
width: 100%; width: 100%;
.inds { .inds {
left: 50%; left: 50%;
margin-left: -43px; margin-left: -43px;
} }
} }
} }
.card { .card {
flex-direction: column; flex-direction: column;
.wow { .wow {
width: 95%; width: 95%;
margin: 20px auto; margin: 20px auto;
} }
} }
.b-title { .b-title {
font-size: 20px; font-size: 20px;
} }
.intro { .intro {
font-size: 15px; font-size: 15px;
margin-bottom: 50px; margin-bottom: 50px;
} }
} }
} }
.shop-shows { .shop-shows {
flex-direction: column; flex-direction: column;
.left { .left {
width: 100%; width: 100%;
} }
.right { .right {
width: 100%; width: 100%;
margin: 20px auto; margin: 20px auto;
.show-card { .show-card {
flex-direction: column; flex-direction: column;
li { li {
width: 100%; width: 100%;
.pic { .pic {
width: 100%; width: 100%;
} }
@ -869,17 +889,21 @@ export default {
} }
} }
} }
.conference { .conference {
.shows { .shows {
flex-direction: column; flex-direction: column;
} }
.left { .left {
width: 100%; width: 100%;
margin-right: 0; margin-right: 0;
} }
.card-list { .card-list {
width: 100%; width: 100%;
margin-top: 20px; margin-top: 20px;
.text { .text {
margin-bottom: 4px; margin-bottom: 4px;
} }

Write Preview
Loading…
Cancel
Save