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
Split 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>

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

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

Write Preview
Loading…
Cancel
Save