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 b6b0fdc88f
commit 3a61048753
3 changed files with 1436 additions and 1300 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. 249
      src/pages/estate/index/index.vue
  2. 291
      src/pages/home/index.vue

249
src/pages/estate/index/index.vue
Unescape View File

@ -1,53 +1,37 @@
<template>
<div class="wrap">
<el-carousel v-if="modules[0].list"
: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">
<el-carousel-item v-if="item.pic && item.isEnable"
:key="i">
<img :class="[{'cursor-pointer': isLink(item.link.linkName)}]"
width="100%"
:src="item.pic"
alt=""
<el-carousel-item v-if="item.pic && item.isEnable" :key="i">
<img :class="[{ 'cursor-pointer': isLink(item.link.linkName) }]" width="100%" :src="item.pic" alt=""
@click="openLink(item)">
</el-carousel-item>
</template>
</el-carousel>
<div class="block banner-block"
id="part1">
<div class="block banner-block" id="part1">
<div class="inner">
<div class="title wow fadeInUp">
<h5>
{{ modules[1].form.title }}
<span class="sub">{{ modules[1].form.subTitle }}</span>
</h5>
<span class="more"
@click="toAll(modules[2].form)">MORE</span>
<span class="more" @click="toAll(modules[2].form)">MORE</span>
</div>
<template v-if="articles.length">
<div class="sfel-banner wow fadeInDown"
data-wow-delay="0.5s"
@click="toArtice(curArticle, modules[2].form)">
<div style="width: 50%;overflow: hidden;"
class="newBox">
<img class="pic"
width="100%"
height="100%"
:src="curArticle.titleImg"
alt="">
<div class="sfel-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[2].form)">
<div style="width: 50%;overflow: hidden;" class="newBox">
<img class="pic" width="100%" height="100%" :src="curArticle.titleImg" alt="">
</div>
<div class="right">
<h6>{{ curArticle.title }}</h6>
<div class="des"
v-html="curArticle.mainBody"></div>
<p class="meta">{{ curArticle.releaseTime }} {{ curArticle.classificationName && ' | ' + curArticle.classificationName }}</p>
<div class="des" v-html="curArticle.mainBody"></div>
<p class="meta">{{ curArticle.releaseTime }} {{ curArticle.classificationName && ' | ' +
curArticle.classificationName }}</p>
<ul class="inds">
<li v-for="i in articles.length > 3 ? 4 : articles.length"
:key="i"
:class="{active: curInd == i - 1}"
<li v-for="i in articles.length > 3 ? 4 : articles.length" :key="i" :class="{ active: curInd == i - 1 }"
@click.stop="switchCarousel(i - 1)"></li>
</ul>
</div>
@ -55,20 +39,13 @@
<ul class="card">
<template v-for="(item, i) in articles">
<li v-if="i > 3 && i < 7"
: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 > 3 && i < 7" :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.classificationName && ' | ' + item.classificationName }}</p>
<p class="meta">{{ item.releaseTime }} {{ item.classificationName && ' | ' + item.classificationName
}}</p>
<div class="des">{{ item.title }}</div>
<img class="arrow"
src="@/assets/images/arrow.png"
alt=""
@click="toArtice(item, modules[2].form)">
<img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[2].form)">
</div>
</li>
</template>
@ -77,8 +54,7 @@
</div>
</div>
<div class="block talent"
id="part2">
<div class="block talent" id="part2">
<div class="inner">
<div class="title wow fadeInUp">
<h5>
@ -88,84 +64,52 @@
<!-- <span class="more" @click="toAll(modules[4].form)">MORE</span> -->
</div>
<div class="shows">
<div class="left wow fadeInLeft"
data-wow-delay="0.5s">
<div class="left wow fadeInLeft" data-wow-delay="0.5s">
<h6>{{ modules[4].form.title }}</h6>
<div class="text"
v-html="modules[4].form.des"></div>
<el-button v-if="isLink(modules[4].form.link.linkName)"
type="primary"
round
@click="openLink(modules[4].form)">这里跳转</el-button>
<div class="text" v-html="modules[4].form.des"></div>
<el-button v-if="isLink(modules[4].form.link.linkName)" type="primary" round
@click="openLink(modules[4].form)">{{ $t('column.more') }}</el-button>
</div>
<img :src="modules[4].form.pic"
alt=""
class="pic">
<img :src="modules[4].form.pic" alt="" class="pic">
</div>
</div>
</div>
<div class="block conference"
id="part3">
<div class="block conference" id="part3">
<div class="inner">
<div class="title wow fadeInUp">
<h5>
{{ modules[5].form.title }}
<span class="sub">{{ modules[5].form.subTitle }}</span>
</h5>
<span class="more"
@click="toAll(modules[6].form)">MORE</span>
<span class="more" @click="toAll(modules[6].form)">MORE</span>
</div>
<div class="shows"
v-if="articles2.length">
<div class="left wow fadeInLeft"
data-wow-delay="0.5s"
@click="toArtice(articles2[0], modules[6].form)">
<img class="pic"
width="100%"
height="100%"
:src="articles2[0].titleImg"
alt="">
<div class="shows" v-if="articles2.length">
<div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles2[0], modules[6].form)">
<img class="pic" width="100%" height="100%" :src="articles2[0].titleImg" alt="">
<div class="text">{{ articles2[0].title }}</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 articles2">
<li v-if="i && i < 4"
:key="i"
@click="toArtice(item, modules[6].form)">
<img class="pic"
:src="item.titleImg"
alt="">
<li v-if="i && i < 4" :key="i" @click="toArtice(item, modules[6].form)">
<img class="pic" :src="item.titleImg" alt="">
<div class="texts">
<h6>{{ item.title }}</h6>
<p class="sum">{{ item.mainBody }}</p>
<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="">
{{ item.keynoteSpeaker }}
</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="">
会议时间: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
</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="">
{{ item.onlineLocation }}
</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="">
{{ item.offlineLocation }}
</p>
</div>
@ -176,37 +120,29 @@
</div>
</div>
<div class="block program"
id="part4">
<div class="block program" id="part4">
<div class="inner">
<div class="title wow fadeInUp">
<h5>
{{ modules[7].form.title }}
<span class="sub">{{ modules[7].form.subTitle }}</span>
</h5>
<span class="more"
@click="toAll(modules[8].form)">MORE</span>
<span class="more" @click="toAll(modules[8].form)">MORE</span>
</div>
<template v-if="articles3.length">
<div class="slide"
@click="toArtice(articles3[0], modules[8].form)">
<div class="slide" @click="toArtice(articles3[0], modules[8].form)">
<div class="texts">
<h6>{{ articles3[0].title }}</h6>
<div class="des">{{ articles3[0].mainBody }}</div>
<div class="meta">发表日期：{{ articles3[0].releaseTime }} &emsp;浏览量：{{ articles3[0].totalBrowsing }}</div>
</div>
<div class="img-wrap">
<img class="pic"
:src="articles3[0].titleImg"
alt="">
<img class="pic" :src="articles3[0].titleImg" alt="">
</div>
</div>
<ul class="list">
<template v-for="(item, i) in articles3">
<li v-if="i && i < 4"
:key="i"
class="wow fadeInDown"
:data-wow-delay="(0.1 * i).toFixed(1) + 's'"
<li v-if="i && i < 4" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'"
@click="toArtice(item, modules[8].form)">
<div class="des">{{ item.title }}</div>
<p class="date">{{ item.releaseTime }}</p>
@ -332,8 +268,10 @@ export default {
<style lang="scss" scoped>
@import url(../../../plugins/wow/animate.css);
@import '../../../styles/page/page.scss';
/deep/ .el-carousel {
height: 100vh;
.el-carousel__container,
.el-carousel__item,
img {
@ -341,6 +279,7 @@ export default {
object-fit: cover;
}
}
.title {
display: flex;
justify-content: space-between;
@ -348,6 +287,7 @@ export default {
padding-bottom: 25px;
margin-bottom: 30px;
border-bottom: 1px solid #ddd;
h5 {
padding-left: 16px;
font-size: 1.6rem;
@ -357,46 +297,57 @@ export default {
line-height: 1;
border-left: 6px solid #2b96ef;
}
.sub {
font-size: 1.1rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #afb7bf;
}
.more {
font-size: 0.8rem;
color: #666;
cursor: pointer;
}
}
/deep/.articles {
width: 50%;
.el-carousel__indicators--horizontal {
bottom: 20px;
left: 804px;
}
}
.banner-block {
background: url(../../../assets/images/sfel/2.png) 0 0 / cover no-repeat;
}
.sfel-banner {
display: flex;
cursor: pointer;
.pic {
transition: 0.5s;
object-fit: cover;
&:hover {
transform: scale(1.3);
}
}
.right {
position: relative;
width: 50%;
padding: 50px 50px 30px;
background: #1583ff;
color: #fff;
&:hover {
background: #465f85;
h6,
.des,
.meta {
@ -405,11 +356,13 @@ export default {
}
}
}
.inds {
position: absolute;
bottom: 40px;
left: 60px;
display: flex;
li {
width: 10px;
height: 10px;
@ -417,6 +370,7 @@ export default {
background: #ffffff;
border-radius: 50%;
transition: 0.2s;
&.active {
width: 30px;
background: rgba(255, 255, 255, 0.3);
@ -424,25 +378,30 @@ export default {
}
}
}
h6 {
font-size: 1.3rem;
transition: 0.3s;
}
.des {
margin: 30px 0;
font-size: 0.9rem;
line-height: 24px;
transition: 0.3s;
}
.meta {
font-size: 0.8rem;
transition: 0.3s;
}
}
.card {
display: flex;
flex-wrap: wrap;
margin-top: 40px;
li {
width: calc((100% - 56px) / 3);
margin-right: 28px;
@ -450,25 +409,31 @@ export default {
border-radius: 6px;
transition: 0.3s;
background-color: #fff;
&:hover {
transform: scale(1.05);
}
&:last-child {
margin-right: 0;
}
}
.pic {
width: 100%;
// height: 259px;
object-fit: cover;
}
.texts {
padding: 40px 30px;
}
.meta {
font-size: 0.9rem;
color: #666;
}
.des {
height: 60px;
margin: 10px 0;
@ -479,28 +444,34 @@ export default {
line-height: 28px;
-webkit-line-clamp: 2;
}
.arrow {
width: 36px;
}
}
.talent {
.shows {
display: flex;
color: #fff;
background: #1a2844;
border-radius: 0px 100px 0px 100px;
.left {
width: 50%;
padding: 120px 0 0 5%;
}
h6 {
font-size: 1.6rem;
}
.text {
margin: 20px 0;
font-size: 1rem;
line-height: 2;
}
.pic {
width: 50%;
min-height: 465px;
@ -508,11 +479,14 @@ export default {
}
}
}
.conference {
background: url(../../../assets/images/sfel/4.png) 0 0 / cover no-repeat;
.shows {
display: flex;
}
.left {
position: relative;
width: 550px;
@ -521,6 +495,7 @@ export default {
margin-right: 20px;
cursor: pointer;
overflow: hidden;
.text {
position: absolute;
bottom: 0;
@ -534,18 +509,22 @@ export default {
color: #ffffff;
background-color: rgba(0, 0, 0, 0.57);
}
.pic {
transition: 0.5s;
object-fit: cover;
}
&:hover {
.pic {
transform: scale(1.3);
}
}
}
.card-list {
width: 600px;
li {
display: flex;
align-items: center;
@ -554,34 +533,41 @@ export default {
background-color: #fff;
cursor: pointer;
transition: 0.3s;
&:last-child {
margin-bottom: 0;
}
&:hover {
transform: translateX(20px);
}
}
.pic {
width: 167px;
height: 167px;
margin-right: 36px;
object-fit: cover;
}
.texts {
width: calc(100% - 210px);
}
h6 {
margin-bottom: 10px;
font-size: 1.2rem;
color: #333;
@include ellipsis;
}
.sum {
margin-bottom: 6px;
font-size: 1rem;
color: #666;
@include ellipsis;
}
.text {
display: flex;
align-items: center;
@ -589,6 +575,7 @@ export default {
font-size: 0.9rem;
@include ellipsis;
}
.icon {
margin-right: 5px;
}
@ -597,50 +584,60 @@ export default {
.program {
background: #fff;
.slide {
display: flex;
margin-bottom: 14px;
cursor: pointer;
}
.texts {
width: 51%;
padding: 56px;
background: #fbfbfb;
h6 {
font-size: 1.3rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.des {
margin: 35px 0 25px;
font-size: 1rem;
color: #666;
line-height: 32px;
}
.meta {
font-size: 0.9rem;
color: #666;
}
}
.img-wrap {
width: 49%;
min-height: 334px;
overflow: hidden;
}
.pic {
width: 100%;
height: 100%;
transition: 0.5s;
object-fit: cover;
}
&:hover {
.pic {
transform: scale(1.3);
}
}
.list {
display: flex;
li {
width: calc((100% - 28px) / 3);
height: 204px;
@ -649,17 +646,21 @@ export default {
background: url(../../../assets/images/sfel/7.png) no-repeat center;
transition: 0.5s;
cursor: pointer;
&:nth-child(2) {
background-image: url(../../../assets/images/sfel/8.png);
}
&:nth-child(3) {
margin-right: 0;
background-image: url(../../../assets/images/sfel/9.png);
}
&:hover {
transform: translateY(20px);
}
}
.des {
height: 90px;
margin-bottom: 30px;
@ -669,6 +670,7 @@ export default {
color: #ffffff;
line-height: 30px;
}
.date {
font-size: 0.9rem;
font-family: LaoSangamMN;
@ -676,6 +678,7 @@ export default {
}
}
}
.tools {
z-index: 9;
position: fixed;
@ -683,11 +686,13 @@ export default {
left: 0;
width: 180px;
text-align: center;
.logo {
padding: 15px 0;
background: #0c60be;
box-shadow: 0px 0px 20px 0px rgba(184, 191, 200, 0.3);
}
.nav {
li {
padding: 0 10px;
@ -697,9 +702,11 @@ export default {
background-color: #1d1d1d;
cursor: pointer;
@include ellipsis;
&.active {
background-color: #1583ff;
}
&:hover {
background-color: #1583ff;
}
@ -710,46 +717,59 @@ 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%;
@ -757,54 +777,66 @@ export default {
}
}
}
.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 {
@ -812,6 +844,7 @@ export default {
}
}
}
#part6 {
.slide {
.texts {

291
src/pages/home/index.vue
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save