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

长页修复

Browse Source
master
yujialong 1 year ago
parent ccc05b7b0d
commit cf8d6f03d5
3 changed files with 515 additions and 281 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. 101
      src/pages/iasf/index.vue
  2. 288
      src/pages/overview/index.vue
  3. 97
      src/pages/talentCentre/index.vue

101
src/pages/iasf/index.vue
Unescape View File

@ -51,8 +51,7 @@
<div class="news-banner wow fadeInDown" <div class="news-banner wow fadeInDown"
data-wow-delay="0.5s" data-wow-delay="0.5s"
@click="toArtice(articles[0], modules[4].form)"> @click="toArtice(articles[0], modules[4].form)">
<div style="width: 50%;height: 20.5rem;overflow: hidden;" <div class="pic-wrap">
class="newBox">
<img class="pic" <img class="pic"
width="100%" width="100%"
height="100%" height="100%"
@ -243,31 +242,36 @@
style="margin-top: 100px"> style="margin-top: 100px">
<div class="inner"> <div class="inner">
<ul class="entry"> <ul class="entry">
<li> <li :class="{'cursor-pointer': isLink(modules[13].form.link.linkName)}"
@click="openLink(modules[13].form)">
<img class="icon" <img class="icon"
:src="modules[13].form.pic" :src="modules[13].form.pic"
alt=""> alt="">
<p class="text">{{ modules[13].form.title }}</p> <p class="text">{{ modules[13].form.title }}</p>
</li> </li>
<li> <li :class="{'cursor-pointer': isLink(modules[14].form.link.linkName)}"
@click="openLink(modules[14].form)">
<img class="icon" <img class="icon"
:src="modules[14].form.pic" :src="modules[14].form.pic"
alt=""> alt="">
<p class="text">{{ modules[14].form.title }}</p> <p class="text">{{ modules[14].form.title }}</p>
</li> </li>
<li> <li :class="{'cursor-pointer': isLink(modules[15].form.link.linkName)}"
@click="openLink(modules[15].form)">
<img class="icon" <img class="icon"
:src="modules[15].form.pic" :src="modules[15].form.pic"
alt=""> alt="">
<p class="text">{{ modules[15].form.title }}</p> <p class="text">{{ modules[15].form.title }}</p>
</li> </li>
<li> <li :class="{'cursor-pointer': isLink(modules[16].form.link.linkName)}"
@click="openLink(modules[16].form)">
<img class="icon" <img class="icon"
:src="modules[16].form.pic" :src="modules[16].form.pic"
alt=""> alt="">
<p class="text">{{ modules[16].form.title }}</p> <p class="text">{{ modules[16].form.title }}</p>
</li> </li>
<li> <li :class="{'cursor-pointer': isLink(modules[17].form.link.linkName)}"
@click="openLink(modules[17].form)">
<img class="icon" <img class="icon"
:src="modules[17].form.pic" :src="modules[17].form.pic"
alt=""> alt="">
@ -276,6 +280,12 @@
</ul> </ul>
</div> </div>
</div> </div>
<ul class="tools">
<li v-for="(item, i) in modules[18].list"
:key="i"
@click="openLink(item)">{{ item.title }}</li>
</ul>
</div> </div>
</template> </template>
@ -299,7 +309,7 @@ export default {
curArticle2: {}, curArticle2: {},
curInd3: 0, curInd3: 0,
curArticle3: {}, curArticle3: {},
timer: null timer: null,
} }
}, },
mounted () { mounted () {
@ -485,6 +495,11 @@ export default {
.news-banner { .news-banner {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
.pic-wrap {
width: 50%;
height: 20.5rem;
overflow: hidden;
}
.pic { .pic {
transition: 0.5s; transition: 0.5s;
&:hover { &:hover {
@ -772,6 +787,31 @@ export default {
color: #fff; color: #fff;
} }
} }
.tools {
position: fixed;
top: 430px;
right: 0;
li {
display: flex;
justify-content: center;
align-items: center;
width: 160px;
margin-bottom: 1px;
font-size: 1rem;
color: #0084ff;
line-height: 56px;
background-color: rgba(57, 59, 59, 0.94);
cursor: pointer;
&.active {
width: 192px;
color: #fff;
background-color: rgba(1, 129, 247, 0.94);
}
}
.icon {
margin-right: 10px;
}
}
@media (max-width: 1200px) { @media (max-width: 1200px) {
.block { .block {
padding: 3.125rem 0; padding: 3.125rem 0;
@ -788,4 +828,49 @@ export default {
} }
} }
} }
@media (max-width: 920px) {
.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%;
}
}
.about {
.inner {
height: auto;
}
.left {
width: 100%;
}
.pic {
position: static;
max-width: 100%;
height: auto;
margin-top: 10px;
}
}
.entry {
flex-direction: column;
li {
width: 100% !important;
margin-right: 0;
}
}
}
</style> </style>

288
src/pages/overview/index.vue
Unescape View File

@ -1,66 +1,107 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" :src="modules[0].form.pic" alt="" /> <img class="banner-img"
:src="modules[0].form.pic"
alt="" />
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="block about gray"> <div class="block history gray">
<div :class="['inner', {'cursor-pointer': isLink(modules[1].form.link.linkName)}]"
@click="openLink(modules[1].form)">
<div class="texts wow fadeInDown"
data-wow-delay="0.5s">
<div class="left">
<h2>{{ modules[1].form.title }}</h2>
<div class="line"></div>
<div class="des">{{ modules[1].form.des }}</div>
</div>
<img class="bg"
width="562"
height="506"
:src="modules[1].form.pic"
alt="">
</div>
</div>
</div>
<div class="block">
<div class="inner"> <div class="inner">
<img :src="modules[1].form.pic" alt="" class="pic" /> <div :class="['core', {'cursor-pointer': isLink(modules[2].form.link.linkName)}]"
@click="openLink(modules[2].form)">
<img :src="modules[2].form.pic"
alt=""
class="pic">
<div class="texts"> <div class="texts">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des" v-html="modules[2].form.des"></div> <div class="line"></div>
<div class="text"
v-html="modules[2].form.des"></div>
</div>
</div>
<div :class="['core', {'cursor-pointer': isLink(modules[3].form.link.linkName)}]"
@click="openLink(modules[3].form)">
<img :src="modules[3].form.pic"
alt=""
class="pic">
<div class="texts">
<h6>{{ modules[3].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
<div class="des" v-html="modules[3].form.des"></div> <div class="line"></div>
<div class="text"
v-html="modules[3].form.des"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="block fac"> <div class="block gray fac">
<div class="inner"> <div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2> <div class="event">
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p> <h6>{{ modules[4].form.title }}</h6>
<ul class="card"> <p class="en">{{ modules[4].form.subTitle }}</p>
<li> <div class="text"
<img :src="modules[5].form.pic" alt="" class="pic" /> v-html="modules[4].form.des"></div>
<img v-if="isLink(modules[4].form.link.linkName)"
class="arrow"
src="@/assets/images/arrow.png"
alt=""
@click="openLink(modules[4].form)">
</div>
<ul class="l-card">
<li :class="{'cursor-pointer': isLink(modules[5].form.link.linkName)}"
@click="openLink(modules[5].form)">
<img :src="modules[5].form.pic"
alt=""
class="pic" />
<div class="texts"> <div class="texts">
<h6>{{ modules[5].form.title }}</h6> <h6>{{ modules[5].form.title }}</h6>
<div class="text" v-html="modules[5].form.des"></div> <div class="text"
<img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(modules[5].form.link.linkName)}" @click="openLink(modules[5].form)"> v-html="modules[5].form.des"></div>
</div> </div>
</li> </li>
<li> <li :class="{'cursor-pointer': isLink(modules[6].form.link.linkName)}"
<img :src="modules[6].form.pic" alt="" class="pic" /> @click="openLink(modules[6].form)">
<img :src="modules[6].form.pic"
alt=""
class="pic" />
<div class="texts"> <div class="texts">
<h6>{{ modules[6].form.title }}</h6> <h6>{{ modules[6].form.title }}</h6>
<div class="text" v-html="modules[6].form.des"></div> <div class="text"
<img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(modules[6].form.link.linkName)}" @click="openLink(modules[6].form)"> v-html="modules[6].form.des"></div>
</div> </div>
</li> </li>
</ul> <li :class="{'cursor-pointer': isLink(modules[7].form.link.linkName)}"
<ul class="l-card"> @click="openLink(modules[7].form)">
<li :class="{'cursor-pointer': isLink(modules[7].form.link.linkName)}" @click="openLink(modules[7].form)"> <img :src="modules[7].form.pic"
<img :src="modules[7].form.pic" alt="" class="pic" /> alt=""
class="pic" />
<div class="texts"> <div class="texts">
<h6>{{ modules[7].form.title }}</h6> <h6>{{ modules[7].form.title }}</h6>
<div class="text" v-html="modules[7].form.des"></div> <div class="text"
</div> v-html="modules[7].form.des"></div>
</li>
<li :class="{'cursor-pointer': isLink(modules[8].form.link.linkName)}" @click="openLink(modules[8].form)">
<img :src="modules[8].form.pic" alt="" class="pic" />
<div class="texts">
<h6>{{ modules[8].form.title }}</h6>
<div class="text" v-html="modules[8].form.des"></div>
</div>
</li>
<li :class="{'cursor-pointer': isLink(modules[9].form.link.linkName)}" @click="openLink(modules[9].form)">
<img :src="modules[9].form.pic" alt="" class="pic" />
<div class="texts">
<h6>{{ modules[9].form.title }}</h6>
<div class="text" v-html="modules[9].form.des"></div>
</div> </div>
</li> </li>
</ul> </ul>
@ -68,29 +109,34 @@
</div> </div>
<div class="block scan gray"> <div class="block scan gray">
<h2 class="b-title wow fadeInUp">{{ modules[10].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[8].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[10].form.des }}</p> <p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
<div class="scan-inner"> <div class="scan-inner">
<div class="left"> <div class="left">
<div class="line" v-for="(item, i) in modules[11].list" :key="i"> <div class="line"
v-for="(item, i) in modules[9].list"
:key="i">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
</div> </div>
<ul class="total"> <ul class="total">
<li> <li>
<p class="num">{{ modules[12].form.title }}</p> <p class="num">{{ modules[10].form.title }}</p>
<p class="text">{{ modules[12].form.des }}</p> <p class="text">{{ modules[10].form.des }}</p>
</li> </li>
<li> <li>
<p class="num">{{ modules[13].form.title }}</p> <p class="num">{{ modules[11].form.title }}</p>
<p class="text">{{ modules[13].form.des }}</p> <p class="text">{{ modules[11].form.des }}</p>
</li> </li>
<li> <li>
<p class="num">{{ modules[14].form.title }}</p> <p class="num">{{ modules[12].form.title }}</p>
<p class="text">{{ modules[14].form.des }}</p> <p class="text">{{ modules[12].form.des }}</p>
</li> </li>
</ul> </ul>
</div> </div>
<img :src="modules[15].form.pic" alt="" class="pic" /> <img :src="modules[13].form.pic"
alt=""
class="pic" />
</div> </div>
</div> </div>
</div> </div>
@ -140,66 +186,101 @@ 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';
.about { .history {
padding-top: 0; h2 {
.inner { font-size: 1rem;
position: relative; color: #333;
}
.texts {
display: flex; display: flex;
padding: 20px; justify-content: space-between;
margin-top: -50px; padding: 5.125rem 3.5625rem 1.875rem;
margin-top: 20px;
background-color: #fff; background-color: #fff;
border-radius: 6.25rem 0px 0px 0px;
transition: 0.3s;
&:hover {
transform: scale(1.05);
} }
.pic {
width: 40%;
height: 330px;
margin-right: 30px;
} }
h6 { .left {
font-size: 1.2rem; width: 43.4375rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #333;
&:before {
content: '';
display: block;
width: 28px;
height: 4px;
margin-bottom: 12px;
background: #0280F1;
} }
.line {
width: 53px;
height: 3px;
margin: 18px 0;
background: #0280f1;
} }
.des { .des {
margin: 20px 0; font-size: 0.9rem;
font-size: 1rem; color: #181818;
color: #666; line-height: 31px;
line-height: 2; -webkit-line-clamp: 6;
} }
.bg {
margin: -122px 0 0 0;
border-top-right-radius: 40px;
} }
.fac { }
.card { .core {
display: flex; position: relative;
li { height: 370px;
width: calc((100% - 20px) / 2); margin-bottom: 40px;
color: #333; &:last-child {
background-color: #FCFBFB; .texts {
&:first-child { left: 40px;
margin-right: 20px; right: auto;
} }
} }
.pic { .pic {
width: 100%; width: 100%;
height: 350px; height: 100%;
} }
.texts { .texts {
padding: 20px; position: absolute;
top: 80px;
right: 40px;
width: 500px;
color: #fff;
} }
h6 { h6 {
margin-bottom: 10px; font-size: 1.4rem;
font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
} }
.line {
width: 136px;
height: 3px;
margin: 20px 0;
background: #ffffff;
opacity: 0.56;
}
.text { .text {
font-size: 1rem; font-size: 1rem;
line-height: 1.6;
}
}
.fac {
.event {
position: relative;
padding: 70px 250px 70px 60px;
background: url(http://10.10.11.7/images/overview/16.png) 0 0/100% 100% no-repeat;
h6 {
font-size: 2.2rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #333;
}
.en {
margin-top: -10px;
font-size: 2rem;
font-family: AppleSystemUIFont;
color: #e4e4e4;
}
.text {
margin: 15px 0;
font-size: 1rem;
color: #333;
} }
} }
.l-card { .l-card {
@ -226,7 +307,7 @@ export default {
height: 100%; height: 100%;
padding: 140px 30px 0; padding: 140px 30px 0;
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, 0.5);
} }
h6 { h6 {
margin-bottom: 15px; margin-bottom: 15px;
@ -297,7 +378,7 @@ export default {
font-size: 2rem; font-size: 2rem;
font-family: ToppanBunkyuMidashiMinchoStdN-ExtraBold, ToppanBunkyuMidashiMinchoStdN; font-family: ToppanBunkyuMidashiMinchoStdN-ExtraBold, ToppanBunkyuMidashiMinchoStdN;
font-weight: 800; font-weight: 800;
color: #1583FF; color: #1583ff;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
@ -309,14 +390,19 @@ export default {
height: 700px; height: 700px;
} }
} }
@media (max-width: 920px) { @media (max-width: 1400px) {
.fac { .history {
.card, .l-card { .texts {
flex-direction: column; flex-direction: column;
li { }
.left {
width: 100%; width: 100%;
margin-bottom: 1rem;
} }
.bg {
width: auto;
max-width: 100%;
height: auto;
margin-top: 20px;
} }
} }
.scan { .scan {
@ -333,6 +419,24 @@ export default {
} }
} }
} }
@media (max-width: 920px) {
.core {
.texts {
top: 20px;
left: 20px;
right: auto;
}
}
.fac {
.l-card {
flex-direction: column;
li {
width: 100%;
margin-bottom: 1rem;
}
}
}
}
@media (max-width: 640px) { @media (max-width: 640px) {
.about { .about {
.inner { .inner {

97
src/pages/talentCentre/index.vue
Unescape View File

@ -51,7 +51,27 @@
</ul> </ul>
</div> </div>
<RightColumns /> <div class="right">
<el-tree class="column"
ref="column"
:data="modules[4].list"
highlight-current
:expand-on-click-node="false"
:props="defaultProps"
node-key="id"
@node-click="columnClick"></el-tree>
<p class="l-title">人才资讯</p>
<ul class="list">
<li v-for="(item, i) in articles"
:key="i"
:title="item.title"
@click="toArtice(item)">
<p class="text">{{ item.title }}</p>
<span class="date">{{ item.releaseTime }}</span>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -63,17 +83,18 @@ import articleMixins from '@/mixins/article';
import Setting from '@/setting' import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
import WOW from 'wow.js' import WOW from 'wow.js'
import RightColumns from '@/components/rightColumns'
export default { export default {
mixins: [mixins, articleMixins], mixins: [mixins, articleMixins],
data () { data () {
return { return {
columnId: '', columnId: '',
form: {}, form: {},
} defaultProps: {
value: 'id',
label: 'title'
}, },
components: { articles: []
RightColumns }
}, },
mounted () { mounted () {
@ -90,9 +111,22 @@ export default {
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing']) data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
this.modules = json this.modules = json
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json) console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
// 获取文章列表
const { column } = json[5].form
if (column.length) {
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles = Util.removeTag(data)
}).catch(err => { })
}
} }
}).catch(err => { }) }).catch(err => { })
}, },
columnClick (row) {
this.openLink(row)
console.log("🚀 ~ file: index.vue:126 ~ columnClick ~ row:", row)
}
} }
}; };
</script> </script>
@ -130,47 +164,46 @@ export default {
.people { .people {
margin-top: 4rem; margin-top: 4rem;
li { li {
display: flex; position: relative;
align-items: center; height: 450px;
margin-bottom: 2rem; margin-bottom: 2rem;
&:nth-child(even) { &:nth-child(even) {
flex-direction: row-reverse;
.texts { .texts {
padding: 75px 83px 75px 40px; left: 50px;
margin: 0 -50px 0 0; right: auto;
background: rgba(255, 255, 255, 0.43);
} }
} }
} }
.pic { .pic {
width: 430px; width: 100%;
height: 430px; height: 100%;
} }
.texts { .texts {
position: relative; position: absolute;
width: 530px; top: 60px;
height: 330px; right: 50px;
padding: 75px 41px 75px 83px; width: 380px;
margin-left: -50px; padding: 50px 25px;
background-color: rgba(247, 247, 247, 0.72); background: rgba(243, 251, 255, 0.82);
} }
h6 { h6 {
font-size: 1.2rem; font-size: 1.2rem;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #333; color: #2a4b65;
} }
.line { .line {
width: 93px; width: 93px;
height: 1px; height: 1px;
margin: 1rem 0; margin: 1rem 0;
background: #d8d8d8; background: #3e6473;
} }
.text { .text {
margin-bottom: 1rem;
font-size: 1rem; font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
color: #666; color: #2a4b65;
line-height: 1.6; line-height: 1.6;
} }
} }
@ -210,8 +243,10 @@ export default {
} }
} }
} }
@media (max-width: 1200px) { @media (max-width: 1400px) {
.content { .content {
width: 90%;
}
.article { .article {
flex-direction: column; flex-direction: column;
.left { .left {
@ -236,8 +271,18 @@ export default {
} }
.right { .right {
width: 100%; width: 100%;
.el-tree { }
display: none; }
}
@media (max-width: 480px) {
.article {
.left {
.people {
li {
.texts {
left: 10px;
right: auto;
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save