长页修复

master
yujialong 1 year ago
parent ccc05b7b0d
commit cf8d6f03d5
  1. 101
      src/pages/iasf/index.vue
  2. 560
      src/pages/overview/index.vue
  3. 135
      src/pages/talentCentre/index.vue

@ -51,8 +51,7 @@
<div class="news-banner wow fadeInDown"
data-wow-delay="0.5s"
@click="toArtice(articles[0], modules[4].form)">
<div style="width: 50%;height: 20.5rem;overflow: hidden;"
class="newBox">
<div class="pic-wrap">
<img class="pic"
width="100%"
height="100%"
@ -243,31 +242,36 @@
style="margin-top: 100px">
<div class="inner">
<ul class="entry">
<li>
<li :class="{'cursor-pointer': isLink(modules[13].form.link.linkName)}"
@click="openLink(modules[13].form)">
<img class="icon"
:src="modules[13].form.pic"
alt="">
<p class="text">{{ modules[13].form.title }}</p>
</li>
<li>
<li :class="{'cursor-pointer': isLink(modules[14].form.link.linkName)}"
@click="openLink(modules[14].form)">
<img class="icon"
:src="modules[14].form.pic"
alt="">
<p class="text">{{ modules[14].form.title }}</p>
</li>
<li>
<li :class="{'cursor-pointer': isLink(modules[15].form.link.linkName)}"
@click="openLink(modules[15].form)">
<img class="icon"
:src="modules[15].form.pic"
alt="">
<p class="text">{{ modules[15].form.title }}</p>
</li>
<li>
<li :class="{'cursor-pointer': isLink(modules[16].form.link.linkName)}"
@click="openLink(modules[16].form)">
<img class="icon"
:src="modules[16].form.pic"
alt="">
<p class="text">{{ modules[16].form.title }}</p>
</li>
<li>
<li :class="{'cursor-pointer': isLink(modules[17].form.link.linkName)}"
@click="openLink(modules[17].form)">
<img class="icon"
:src="modules[17].form.pic"
alt="">
@ -276,6 +280,12 @@
</ul>
</div>
</div>
<ul class="tools">
<li v-for="(item, i) in modules[18].list"
:key="i"
@click="openLink(item)">{{ item.title }}</li>
</ul>
</div>
</template>
@ -299,7 +309,7 @@ export default {
curArticle2: {},
curInd3: 0,
curArticle3: {},
timer: null
timer: null,
}
},
mounted () {
@ -485,6 +495,11 @@ export default {
.news-banner {
display: flex;
cursor: pointer;
.pic-wrap {
width: 50%;
height: 20.5rem;
overflow: hidden;
}
.pic {
transition: 0.5s;
&:hover {
@ -772,6 +787,31 @@ export default {
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) {
.block {
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>

@ -1,66 +1,107 @@
<template>
<div class="wrap">
<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">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</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">
<img :src="modules[1].form.pic" alt="" class="pic" />
<div class="texts">
<h6>{{ modules[2].form.title }}</h6>
<div class="des" v-html="modules[2].form.des"></div>
<h6>{{ modules[3].form.title }}</h6>
<div class="des" v-html="modules[3].form.des"></div>
<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">
<h6>{{ modules[2].form.title }}</h6>
<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>
<div class="line"></div>
<div class="text"
v-html="modules[3].form.des"></div>
</div>
</div>
</div>
</div>
<div class="block fac">
<div class="block gray fac">
<div class="inner">
<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>
<ul class="card">
<li>
<img :src="modules[5].form.pic" alt="" class="pic" />
<div class="event">
<h6>{{ modules[4].form.title }}</h6>
<p class="en">{{ modules[4].form.subTitle }}</p>
<div class="text"
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">
<h6>{{ modules[5].form.title }}</h6>
<div class="text" v-html="modules[5].form.des"></div>
<img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(modules[5].form.link.linkName)}" @click="openLink(modules[5].form)">
<div class="text"
v-html="modules[5].form.des"></div>
</div>
</li>
<li>
<img :src="modules[6].form.pic" alt="" class="pic" />
<li :class="{'cursor-pointer': isLink(modules[6].form.link.linkName)}"
@click="openLink(modules[6].form)">
<img :src="modules[6].form.pic"
alt=""
class="pic" />
<div class="texts">
<h6>{{ modules[6].form.title }}</h6>
<div class="text" v-html="modules[6].form.des"></div>
<img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(modules[6].form.link.linkName)}" @click="openLink(modules[6].form)">
<div class="text"
v-html="modules[6].form.des"></div>
</div>
</li>
</ul>
<ul class="l-card">
<li :class="{'cursor-pointer': isLink(modules[7].form.link.linkName)}" @click="openLink(modules[7].form)">
<img :src="modules[7].form.pic" alt="" class="pic" />
<li :class="{'cursor-pointer': isLink(modules[7].form.link.linkName)}"
@click="openLink(modules[7].form)">
<img :src="modules[7].form.pic"
alt=""
class="pic" />
<div class="texts">
<h6>{{ modules[7].form.title }}</h6>
<div class="text" v-html="modules[7].form.des"></div>
</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 class="text"
v-html="modules[7].form.des"></div>
</div>
</li>
</ul>
@ -68,29 +109,34 @@
</div>
<div class="block scan gray">
<h2 class="b-title wow fadeInUp">{{ modules[10].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[10].form.des }}</p>
<h2 class="b-title wow fadeInUp">{{ modules[8].form.title }}</h2>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
<div class="scan-inner">
<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>
</div>
<ul class="total">
<li>
<p class="num">{{ modules[12].form.title }}</p>
<p class="text">{{ modules[12].form.des }}</p>
<p class="num">{{ modules[10].form.title }}</p>
<p class="text">{{ modules[10].form.des }}</p>
</li>
<li>
<p class="num">{{ modules[13].form.title }}</p>
<p class="text">{{ modules[13].form.des }}</p>
<p class="num">{{ modules[11].form.title }}</p>
<p class="text">{{ modules[11].form.des }}</p>
</li>
<li>
<p class="num">{{ modules[14].form.title }}</p>
<p class="text">{{ modules[14].form.des }}</p>
<p class="num">{{ modules[12].form.title }}</p>
<p class="text">{{ modules[12].form.des }}</p>
</li>
</ul>
</div>
<img :src="modules[15].form.pic" alt="" class="pic" />
<img :src="modules[13].form.pic"
alt=""
class="pic" />
</div>
</div>
</div>
@ -103,17 +149,17 @@ import Util from "@/libs/util";
import WOW from "wow.js";
export default {
mixins: [mixins],
data() {
data () {
return {
};
},
mounted() {
mounted () {
new WOW().init();
},
methods: {
//
getInfo() {
getInfo () {
// /
this.$post(
`${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
@ -125,14 +171,14 @@ export default {
this.preview
? data
: data[data.length - 1][
data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
]
data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
]
);
this.modules = json;
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
}
})
.catch((err) => {});
.catch((err) => { });
},
},
};
@ -140,208 +186,266 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
.about {
padding-top: 0;
.inner {
position: relative;
display: flex;
padding: 20px;
margin-top: -50px;
background-color: #fff;
}
.pic {
width: 40%;
height: 330px;
margin-right: 30px;
}
h6 {
font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #333;
&:before {
content: '';
display: block;
width: 28px;
height: 4px;
margin-bottom: 12px;
background: #0280F1;
@import '../../styles/page/page.scss';
.history {
h2 {
font-size: 1rem;
color: #333;
}
}
.des {
margin: 20px 0;
font-size: 1rem;
color: #666;
line-height: 2;
}
}
.fac {
.card {
display: flex;
li {
width: calc((100% - 20px) / 2);
color: #333;
background-color: #FCFBFB;
&:first-child {
margin-right: 20px;
}
.texts {
display: flex;
justify-content: space-between;
padding: 5.125rem 3.5625rem 1.875rem;
margin-top: 20px;
background-color: #fff;
border-radius: 6.25rem 0px 0px 0px;
transition: 0.3s;
&:hover {
transform: scale(1.05);
}
}
.pic {
width: 100%;
height: 350px;
.left {
width: 43.4375rem;
}
.texts {
padding: 20px;
.line {
width: 53px;
height: 3px;
margin: 18px 0;
background: #0280f1;
}
h6 {
margin-bottom: 10px;
font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC;
.des {
font-size: 0.9rem;
color: #181818;
line-height: 31px;
-webkit-line-clamp: 6;
}
.text {
font-size: 1rem;
.bg {
margin: -122px 0 0 0;
border-top-right-radius: 40px;
}
}
.l-card {
display: flex;
margin-top: 20px;
li {
position: relative;
width: calc((100% - 40px) / 3);
height: 380px;
margin-right: 20px;
&:last-child {
margin-right: 0;
}
}
.core {
position: relative;
height: 370px;
margin-bottom: 40px;
&:last-child {
.texts {
left: 40px;
right: auto;
}
}
.pic {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
.texts {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 140px 30px 0;
color: #fff;
background-color: rgba(0, 0, 0, .5);
position: absolute;
top: 80px;
right: 40px;
width: 500px;
color: #fff;
}
h6 {
margin-bottom: 15px;
font-size: 1.6rem;
font-family: PingFangSC-Medium, PingFang SC;
font-size: 1.4rem;
font-family: PingFangSC-Medium, PingFang SC;
}
.line {
width: 136px;
height: 3px;
margin: 20px 0;
background: #ffffff;
opacity: 0.56;
}
.text {
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
line-height: 2;
@include mul-ellipsis(4);
font-size: 1rem;
line-height: 1.6;
}
}
}
.scan {
.scan-inner {
display: flex;
padding-left: 20%;
}
.left {
width: 30%;
margin-right: 80px;
}
.line {
display: flex;
align-items: center;
margin-bottom: 30px;
&:before {
content: '';
min-width: 50px;
width: 50px;
height: 50px;
margin-right: 20px;
background: url(http://10.10.11.7/images/overview/7.png) 0 0/100% 100% no-repeat;
}
&:nth-child(2):before {
background-image: url(http://10.10.11.7/images/overview/8.png);
.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;
}
}
&:nth-child(3):before {
background-image: url(http://10.10.11.7/images/overview/9.png);
.l-card {
display: flex;
margin-top: 20px;
li {
position: relative;
width: calc((100% - 40px) / 3);
height: 380px;
margin-right: 20px;
&:last-child {
margin-right: 0;
}
}
.pic {
width: 100%;
height: 100%;
}
.texts {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 140px 30px 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
}
h6 {
margin-bottom: 15px;
font-size: 1.6rem;
font-family: PingFangSC-Medium, PingFang SC;
}
.text {
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
line-height: 2;
@include mul-ellipsis(4);
}
}
&:nth-child(4):before {
background-image: url(http://10.10.11.7/images/overview/10.png);
}
.scan {
.scan-inner {
display: flex;
padding-left: 20%;
}
&:nth-child(5):before {
background-image: url(http://10.10.11.7/images/overview/11.png);
.left {
width: 30%;
margin-right: 80px;
}
&:nth-child(6):before {
background-image: url(http://10.10.11.7/images/overview/12.png);
.line {
display: flex;
align-items: center;
margin-bottom: 30px;
&:before {
content: '';
min-width: 50px;
width: 50px;
height: 50px;
margin-right: 20px;
background: url(http://10.10.11.7/images/overview/7.png) 0 0/100% 100% no-repeat;
}
&:nth-child(2):before {
background-image: url(http://10.10.11.7/images/overview/8.png);
}
&:nth-child(3):before {
background-image: url(http://10.10.11.7/images/overview/9.png);
}
&:nth-child(4):before {
background-image: url(http://10.10.11.7/images/overview/10.png);
}
&:nth-child(5):before {
background-image: url(http://10.10.11.7/images/overview/11.png);
}
&:nth-child(6):before {
background-image: url(http://10.10.11.7/images/overview/12.png);
}
&:nth-child(7):before {
background-image: url(http://10.10.11.7/images/overview/13.png);
}
.text {
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #333;
line-height: 1.6;
@include mul-ellipsis(2);
}
}
&:nth-child(7):before {
background-image: url(http://10.10.11.7/images/overview/13.png);
.total {
display: flex;
justify-content: space-between;
margin-top: 50px;
.num {
margin-bottom: 10px;
font-size: 2rem;
font-family: ToppanBunkyuMidashiMinchoStdN-ExtraBold, ToppanBunkyuMidashiMinchoStdN;
font-weight: 800;
color: #1583ff;
}
.text {
font-size: 1rem;
color: #333;
}
}
.text {
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #333;
line-height: 1.6;
@include mul-ellipsis(2);
.pic {
width: 70%;
height: 700px;
}
}
.total {
display: flex;
justify-content: space-between;
margin-top: 50px;
.num {
margin-bottom: 10px;
font-size: 2rem;
font-family: ToppanBunkyuMidashiMinchoStdN-ExtraBold, ToppanBunkyuMidashiMinchoStdN;
font-weight: 800;
color: #1583FF;
}
@media (max-width: 1400px) {
.history {
.texts {
flex-direction: column;
}
.left {
width: 100%;
}
.bg {
width: auto;
max-width: 100%;
height: auto;
margin-top: 20px;
}
}
.text {
font-size: 1rem;
color: #333;
.scan {
.scan-inner {
flex-direction: column;
padding: 0 10%;
}
.left {
width: 100%;
}
.pic {
width: 100%;
margin-top: 2rem;
}
}
}
.pic {
width: 70%;
height: 700px;
}
}
@media (max-width: 920px) {
.fac {
.card, .l-card {
flex-direction: column;
li {
width: 100%;
margin-bottom: 1rem;
}
.core {
.texts {
top: 20px;
left: 20px;
right: auto;
}
}
}
.scan {
.scan-inner {
flex-direction: column;
padding: 0 10%;
}
.left {
width: 100%;
.fac {
.l-card {
flex-direction: column;
li {
width: 100%;
margin-bottom: 1rem;
}
}
}
.pic {
width: 100%;
margin-top: 2rem;
}
}
}
@media (max-width: 640px) {
.about {
.inner {
flex-direction: column;
}
.pic {
width: 100%;
margin-bottom: 2rem;
.about {
.inner {
flex-direction: column;
}
.pic {
width: 100%;
margin-bottom: 2rem;
}
}
}
}
</style>

@ -51,7 +51,27 @@
</ul>
</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>
@ -63,18 +83,19 @@ import articleMixins from '@/mixins/article';
import Setting from '@/setting'
import Util from '@/libs/util'
import WOW from 'wow.js'
import RightColumns from '@/components/rightColumns'
export default {
mixins: [mixins, articleMixins],
data () {
return {
columnId: '',
form: {},
defaultProps: {
value: 'id',
label: 'title'
},
articles: []
}
},
components: {
RightColumns
},
mounted () {
},
@ -90,9 +111,22 @@ export default {
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
this.modules = 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 => { })
},
columnClick (row) {
this.openLink(row)
console.log("🚀 ~ file: index.vue:126 ~ columnClick ~ row:", row)
}
}
};
</script>
@ -130,47 +164,46 @@ export default {
.people {
margin-top: 4rem;
li {
display: flex;
align-items: center;
position: relative;
height: 450px;
margin-bottom: 2rem;
&:nth-child(even) {
flex-direction: row-reverse;
.texts {
padding: 75px 83px 75px 40px;
margin: 0 -50px 0 0;
left: 50px;
right: auto;
background: rgba(255, 255, 255, 0.43);
}
}
}
.pic {
width: 430px;
height: 430px;
width: 100%;
height: 100%;
}
.texts {
position: relative;
width: 530px;
height: 330px;
padding: 75px 41px 75px 83px;
margin-left: -50px;
background-color: rgba(247, 247, 247, 0.72);
position: absolute;
top: 60px;
right: 50px;
width: 380px;
padding: 50px 25px;
background: rgba(243, 251, 255, 0.82);
}
h6 {
font-size: 1.2rem;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333;
color: #2a4b65;
}
.line {
width: 93px;
height: 1px;
margin: 1rem 0;
background: #d8d8d8;
background: #3e6473;
}
.text {
margin-bottom: 1rem;
font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC;
color: #666;
color: #2a4b65;
line-height: 1.6;
}
}
@ -210,34 +243,46 @@ export default {
}
}
}
@media (max-width: 1200px) {
@media (max-width: 1400px) {
.content {
.article {
flex-direction: column;
.left {
width: 100%;
.recruit {
li {
flex-direction: column;
.pic {
width: 100%;
}
.texts {
margin-top: 0.8rem;
}
}
}
.notice {
width: 90%;
}
.article {
flex-direction: column;
.left {
width: 100%;
.recruit {
li {
flex-direction: column;
li {
.pic {
width: 100%;
}
.texts {
margin-top: 0.8rem;
}
}
}
.notice {
flex-direction: column;
li {
width: 100%;
}
}
.right {
width: 100%;
.el-tree {
display: none;
}
.right {
width: 100%;
}
}
}
@media (max-width: 480px) {
.article {
.left {
.people {
li {
.texts {
left: 10px;
right: auto;
}
}
}
}

Loading…
Cancel
Save