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 e657bccaf0
commit b1537376f0
6 changed files with 515 additions and 331 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. 45
      src/components/menuTree/index.vue
  2. 2
      src/i18n/index.js
  3. 193
      src/layouts/footer/index.vue
  4. 8
      src/layouts/navbar/index.vue
  5. 4
      src/pages/column/index.vue
  6. 534
      src/pages/iasf/index.vue

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

@ -1,16 +1,26 @@
<template> <template>
<div class="menu-child"> <div class="menu-child">
<template v-for="item in this.menuList"> <template v-for="item in this.menuList">
<el-submenu :popper-class="isHome ? 'home-menu-popup' : ''" :class="{active: $route.query.id == item.id}" :key="item.id" :index="String(item.id)" :id="item.id" v-if="item.children && item.children.length && item.children.find(i=>i.menuVisible !==1)"> <el-submenu :popper-class="isHome ? 'home-menu-popup' : ''"
:class="{active: $route.query.id == item.id}"
:key="item.id"
:index="String(item.id)"
:id="item.id"
v-if="item.children && item.children.length && item.children.find(i=>i.menuVisible !==1)">
<template slot="title"> <template slot="title">
<span slot="title" :id="item.id">{{item.columnName}}</span> <span slot="title"
:id="item.id">{{item.columnName}}</span>
</template> </template>
<menuTree :menuList="item.children"></menuTree> <menuTree :menuList="item.children"></menuTree>
</el-submenu> </el-submenu>
<template v-else> <template v-else>
<template v-if="item.menuVisible!==1" > <template v-if="item.menuVisible!==1">
<el-menu-item :key="item.id" :id="item.id" :index="String(item.id)" :class="{active: $route.query.id == item.id}" > <el-menu-item :key="item.id"
<span slot="title" :id="item.id">{{item.columnName}}</span> :id="item.id"
:index="String(item.id)"
:class="{active: $route.query.id == item.id}">
<span slot="title"
:id="item.id">{{item.columnName}}</span>
</el-menu-item> </el-menu-item>
</template> </template>
</template> </template>
@ -29,20 +39,19 @@ export default {
} }
}, },
computed: { computed: {
isHome() { isHome () {
return Util.isIndex() return Util.isIndex()
}, },
}, },
data () { data () {
return {} return {}
}, },
mounted () {}, mounted () { },
methods: {} methods: {}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.menu-child {
.menu-child{
/deep/ .el-menu-item { /deep/ .el-menu-item {
background-color: transparent !important; background-color: transparent !important;
} }
@ -50,11 +59,14 @@ export default {
&:hover { &:hover {
background-color: transparent !important; background-color: transparent !important;
} }
} }
@media (min-width: 280px) and (max-width: 1200px) { @media (max-width: 1200px) {
.menu-child{ .menu-child {
/deep/ .el-menu-item { /deep/ .el-menu-item {
height: 40px;line-height: 40px;color: black !important;background-color: transparent !important; height: 40px;
line-height: 40px;
color: black !important;
background-color: transparent !important;
} }
&:hover { &:hover {
@ -62,8 +74,11 @@ export default {
} }
} }
.el-submenu{ .el-submenu {
/deep/ .el-submenu__title{ &:focus-visible {
outline: none;
}
/deep/ .el-submenu__title {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
font-size: 1rem; font-size: 1rem;

2
src/i18n/index.js
Unescape View File

@ -5,7 +5,6 @@ export const messages = {
label: '主题', label: '主题',
titlePlaceholder: '请输入搜索内容', titlePlaceholder: '请输入搜索内容',
selectPlaceholder: '请选择', selectPlaceholder: '请选择',
all: '不限',
hot: '热点内容', hot: '热点内容',
latestNews: '最新资讯', latestNews: '最新资讯',
views: '浏览', views: '浏览',
@ -77,7 +76,6 @@ export const messages = {
label: 'Topic', label: 'Topic',
titlePlaceholder: 'Please enter the search content', titlePlaceholder: 'Please enter the search content',
selectPlaceholder: 'Please Select', selectPlaceholder: 'Please Select',
all: 'All',
hot: 'Most View', hot: 'Most View',
latestNews: 'Latest News', latestNews: 'Latest News',
views: 'Views', views: 'Views',

193
src/layouts/footer/index.vue
Unescape View File

@ -1,7 +1,46 @@
<template> <template>
<div> <div>
<div v-if="showDefaultPath.includes($route.path)" <div v-if="showDefaultPath.includes($route.path)"
class="footer"> :class="['footer', {iasf: isIasf}]">
<ul v-if="isIasf"
class="entry">
<li :class="{'cursor-pointer': isLink(modules[13].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 :class="{'cursor-pointer': isLink(modules[14].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 :class="{'cursor-pointer': isLink(modules[15].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 :class="{'cursor-pointer': isLink(modules[16].form.link.linkName)}"
@click="openLink(modules[17].form)">
<img class="icon"
:src="modules[17].form.pic"
alt="">
<p class="text">{{ modules[17].form.title }}</p>
</li>
<li :class="{'cursor-pointer': isLink(modules[17].form.link.linkName)}"
@click="openLink(modules[18].form)">
<img class="icon"
:src="modules[18].form.pic"
alt="">
<p class="text">{{ modules[18].form.title }}</p>
</li>
</ul>
<div class="info"> <div class="info">
<div class="leftBox"> <div class="leftBox">
<img class="m-b-20" <img class="m-b-20"
@ -79,9 +118,11 @@ export default {
mixins: [mixins], mixins: [mixins],
data () { data () {
return { return {
isIasf: false,
showDefaultPath: ['/home', '/iasf'], // 展示默认页脚的页面 showDefaultPath: ['/home', '/iasf'], // 展示默认页脚的页面
showContactPath: ['/news', '/sfel', '/talent', '/about', '/careers', '/edu', '/news'], // 展示联系我们页脚的页面 showContactPath: ['/news', '/sfel', '/talent', '/about', '/careers', '/edu', '/news'], // 展示联系我们页脚的页面
columns: [], columns: [],
modules: []
}; };
}, },
computed: { computed: {
@ -91,6 +132,18 @@ export default {
return id == 3 return id == 3
} }
}, },
watch: {
'$route': {
handler () {
if (this.$route.path === '/iasf') {
this.isIasf = true
this.getInfo()
}
},
deep: true,
immediate: true
},
},
mounted () { mounted () {
this.getColumn() this.getColumn()
}, },
@ -104,9 +157,87 @@ export default {
typeId: '', typeId: '',
isSort: 1 isSort: 1
}).then(({ data }) => { }).then(({ data }) => {
this.columns = data.slice(0, 6) this.columns = data.slice(0, 5)
}).catch(err => { })
},
// 获取iasf中文首页应用模块数据
getInfo () {
// 预览/详情
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.$route.query.id}`).then(({ data }) => {
if (data.length) {
// state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
const json = JSON.parse(this.preview ?
data :
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
this.modules = json
console.log("🚀 ~ file: index.vue:177 ~ this.$post ~ json:", json)
}
}).catch(err => { }) }).catch(err => { })
}, },
// 判断是否有添加链接
isLink (linkName) {
return linkName !== '无' && linkName !== ''
},
// 打开链接
async openLink (item) {
const { link } = item
if (link.linkName === '无' || link.linkName === '') return false
let href = link.linkAddress
const type = link.connectionType
if (type === 1) { // 站内链接
if (link.articleId) { // 文章
// 查询文章详情。禁用的文章要提示
const data = await this.$post(`${this.api.findArticle}?id=${link.articleId}`)
if (data.data.isDisable) {
return Util.errorMsg('该文章已禁用！')
} else {
href = '/article?articleId=' + link.articleId
}
} else { // 栏目
href = '/column?id=' + link.columnId[link.columnId.length - 1]
}
href += '&siteId=' + (this.site)
if (!link.articleId) href = this.$router.resolve(href).href
} else if (type === 3) { // 站外链接
if (link.otherArticleId) { // 文章
// 查询文章详情。禁用的文章要提示
const data = await this.$post(`${this.api.findArticle}?id=${link.otherArticleId}`)
if (data.data.isDisable) {
return Util.errorMsg('该文章已禁用！')
} else {
href = '/article?articleId=' + link.otherArticleId
}
} else { // 栏目
href = '/column?id=' + link.otherColumnId[link.otherColumnId.length - 1]
}
href += '&siteId=' + link.site
if (!link.otherArticleId) href = this.$router.resolve(href).href
}
// 如果是站内/站外链接，并且选择的是文章，则要获取当前长页名称传到文章详情里，面包屑点返回的时候需要返回到当前长页
if ((type === 1 && link.articleId) || (type === 3 && link.otherArticleId)) {
this.$post(`${this.api.findColumn}?id=${this.id}`).then(({ data }) => {
href = this.$router.resolve(href + '&id=' + this.id + '&columnName=' + data.columnName + '&path=' + this.$route.path.replace('/', '')).href
this.toHref(link.isOpen, href)
}).catch(res => { })
} else {
this.toHref(link.isOpen, href)
}
},
// 跳转地址
toHref (isOpen, href) {
if (isOpen) {
var userAgent = navigator.userAgent;
var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
if (isSafari) {
window.location.href = href
} else {
window.open(href)
}
} else {
window.location.href = href
}
},
}, },
}; };
</script> </script>
@ -115,10 +246,13 @@ export default {
margin-right: 100px; margin-right: 100px;
} }
.footer { .footer {
padding: 64px 10% 25px; padding: 64px 20% 25px;
color: #fff; color: #fff;
background-color: #091733; background-color: #091733;
overflow: hidden; overflow: hidden;
&.iasf {
padding-top: 50px;
}
.info { .info {
display: flex; display: flex;
} }
@ -149,6 +283,27 @@ export default {
color: #6d7384; color: #6d7384;
} }
} }
.entry {
display: flex;
justify-content: space-between;
margin-bottom: 100px;
li {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
img {
max-width: 100px;
}
.text {
margin-top: 15px;
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #fff;
}
}
.contact { .contact {
position: relative; position: relative;
padding: 0 0 73px 0; padding: 0 0 73px 0;
@ -224,6 +379,8 @@ export default {
body { body {
width: 100% !important; width: 100% !important;
} }
}
@media (max-width: 750px) {
.inner { .inner {
width: 100% !important; width: 100% !important;
.title { .title {
@ -238,8 +395,6 @@ export default {
margin-top: 90px; margin-top: 90px;
} }
} }
}
@media (min-width: 280px) and (max-width: 750px) {
.footer { .footer {
.info { .info {
flex-direction: column; flex-direction: column;
@ -249,32 +404,10 @@ export default {
} }
} }
} }
} .entry {
@media (min-width: 751px) and (max-width: 1200px) {
.footer {
.info {
flex-direction: column; flex-direction: column;
.column { li {
margin-top: 20px; margin-bottom: 30px;
margin-left: 0;
}
}
}
}
@media (max-width: 320px) {
.contact {
.inner {
.title {
h6 {
font-size: 1.5rem;
}
.text {
font-size: 2rem;
margin-top: -1.25rem;
}
}
} }
} }
} }

8
src/layouts/navbar/index.vue
Unescape View File

@ -235,13 +235,7 @@ $height: 90px;
} }
} }
} }
@media (max-width: 1500px) { @media (max-width: 1200px) {
/deep/.nav {
.el-menu-item {
}
}
}
@media (min-width: 280px) and (max-width: 1200px) {
/deep/.nav { /deep/.nav {
.el-menu-item { .el-menu-item {
padding: 0 8px; padding: 0 8px;

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

@ -692,10 +692,10 @@ export default {
} }
} else if (typeId === 3) { } else if (typeId === 3) {
// 长页栏目直接获取path // 长页栏目直接获取path
this.$router.push(`/${to.path}?id=${to.id}`).catch((err) => { }); this.$router.push(`/${to.path}?id=${to.id}&siteId=${this.site}`).catch((err) => { });
} else if (left && (typeId === 1 || (typeId === 4 && !to.children.length))) { } else if (left && (typeId === 1 || (typeId === 4 && !to.children.length))) {
// 常规栏目，或者没有子级的子级优先栏目，跳转到column页 // 常规栏目，或者没有子级的子级优先栏目，跳转到column页
this.$router.push(`/column?id=${to.id + (to.level !== 1 || !this.sameStyle ? '&column=1' : '')}`).catch((err) => { }); this.$router.push(`/column?id=${to.id + (to.level !== 1 || !this.sameStyle ? '&column=1' : '')}&siteId=${this.site}`).catch((err) => { });
} else if (left && typeId === 4 && to.children.length) { } else if (left && typeId === 4 && to.children.length) {
// 子级优先栏目，并且有子级 // 子级优先栏目，并且有子级
const el = this.$refs.leftColumn; const el = this.$refs.leftColumn;

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

@ -21,35 +21,38 @@
</el-carousel> </el-carousel>
<div class="block" <div class="block"
style="padding-top: 110px"> style="padding-top: 80px">
<div class="inner"> <div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
<ul class="card"> <ul class="card">
<li class="wow fadeInDown" <li class="wow fadeInDown"
data-wow-delay="0.2s"> data-wow-delay="0.2s"
:class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
@click="openLink(modules[2].form)">
<img class="pic" <img class="pic"
:src="modules[1].form.pic" :src="modules[2].form.pic"
alt=""> alt="">
<div class="project">SILF</div>
<div class="texts"> <div class="texts">
<h6>{{ modules[1].form.title }}</h6> <div class="name">SILF</div>
<p class="des">{{ modules[1].form.des }}</p> <h6>{{ modules[2].form.title }}</h6>
<img src="@/assets/images/arrow.png" <p class="des">{{ modules[2].form.des }}</p>
alt=""
:class="{'arrow': isLink(modules[1].form.link.linkName)}"
@click="openLink(modules[1].form)">
</div> </div>
</li> </li>
<li class="wow fadeInDown" <li class="wow fadeInDown"
data-wow-delay="0.6s"> data-wow-delay="0.6s"
:class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
@click="openLink(modules[3].form)">
<img class="pic" <img class="pic"
:src="modules[2].form.pic" :src="modules[3].form.pic"
alt=""> alt="">
<div class="project">S³FEL</div>
<div class="texts"> <div class="texts">
<h6>{{ modules[2].form.title }}</h6> <div class="name">S³FEL</div>
<p class="des">{{ modules[2].form.des }}</p> <h6>{{ modules[3].form.title }}</h6>
<img src="@/assets/images/arrow.png" <p class="des">{{ modules[3].form.des }}</p>
alt=""
:class="{'arrow': isLink(modules[2].form.link.linkName)}"
@click="openLink(modules[2].form)">
</div> </div>
</li> </li>
</ul> </ul>
@ -58,11 +61,19 @@
<div class="block news-wrap"> <div class="block news-wrap">
<div class="inner"> <div class="inner">
<h2 class="b-title wow fadeInUp news-title">{{ modules[3].form.title }}</h2> <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="all-link"
@click="toAll(modules[5].form)">
<span>{{$t('column.seeMore')}} <img class="icon"
src="@/assets/images/arrow.png"
alt=""></span>
</div>
<template v-if="articles.length"> <template v-if="articles.length">
<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[5].form)">
<div class="pic-wrap"> <div class="pic-wrap">
<img class="pic" <img class="pic"
width="100%" width="100%"
@ -84,10 +95,12 @@
:key="i" :key="i"
class="wow fadeInDown" class="wow fadeInDown"
:data-wow-delay="(0.1 * i).toFixed(1) + 's'" :data-wow-delay="(0.1 * i).toFixed(1) + 's'"
@click="toArtice(item, modules[4].form)"> @click="toArtice(item, modules[5].form)">
<div class="pic-wrap">
<img class="pic" <img class="pic"
:src="item.titleImg" :src="item.titleImg"
alt=""> alt="">
</div>
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<div class="des" <div class="des"
@ -104,10 +117,12 @@
src="http://10.10.11.7/images/iasf/8.png" src="http://10.10.11.7/images/iasf/8.png"
alt=""> alt="">
<div class="texts"> <div class="texts">
<h6 @click="toAll(modules[5].form)">{{ getColumnTitle(modules[5].form) }}</h6> <h6 @click="toAll(modules[6].form)">{{ getColumnTitle(modules[6].form) }} <i class="el-icon-arrow-right"></i></h6>
<div class="des-wrap">
<p class="meta">{{ curArticle1.source }}</p> <p class="meta">{{ curArticle1.source }}</p>
<div class="des" <div class="des"
@click="toArtice(curArticle1, modules[5].form)">{{ curArticle1.title }}</div> @click="toArtice(curArticle1, modules[6].form)">{{ curArticle1.title }}</div>
</div>
<p class="date">{{ curArticle1.releaseTime }}</p> <p class="date">{{ curArticle1.releaseTime }}</p>
</div> </div>
<div class="action"> <div class="action">
@ -128,10 +143,12 @@
src="http://10.10.11.7/images/iasf/9.png" src="http://10.10.11.7/images/iasf/9.png"
alt=""> alt="">
<div class="texts"> <div class="texts">
<h6 @click="toAll(modules[6].form)">{{ getColumnTitle(modules[6].form) }}</h6> <h6 @click="toAll(modules[7].form)">{{ getColumnTitle(modules[7].form) }} <i class="el-icon-arrow-right"></i></h6>
<div class="des-wrap">
<p class="meta">{{ curArticle2.classificationName }}</p> <p class="meta">{{ curArticle2.classificationName }}</p>
<div class="des" <div class="des"
@click="toArtice(curArticle2, modules[6].form)">{{ curArticle2.title }}</div> @click="toArtice(curArticle2, modules[7].form)">{{ curArticle2.title }}</div>
</div>
<p class="date">{{ curArticle2.releaseTime }}</p> <p class="date">{{ curArticle2.releaseTime }}</p>
</div> </div>
<div class="action"> <div class="action">
@ -152,9 +169,12 @@
src="http://10.10.11.7/images/iasf/10.png" src="http://10.10.11.7/images/iasf/10.png"
alt=""> alt="">
<div class="texts"> <div class="texts">
<h6 @click="toAll(modules[7].form)">{{ getColumnTitle(modules[7].form) }}</h6> <h6 @click="toAll(modules[8].form)">{{ getColumnTitle(modules[8].form) }} <i class="el-icon-arrow-right"></i></h6>
<div class="des m-t-8" <div class="des-wrap"
@click="toArtice(curArticle3, modules[7].form)">{{ curArticle3.title }}</div> style="margin-top: 16px">
<div class="des"
@click="toArtice(curArticle3, modules[8].form)">{{ curArticle3.title }}</div>
</div>
<p class="date">{{ curArticle3.releaseTime }}</p> <p class="date">{{ curArticle3.releaseTime }}</p>
</div> </div>
<div class="action"> <div class="action">
@ -176,14 +196,14 @@
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[8].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[9].form.title }}</h2>
<p class="intro wow fadeInUp" <p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[8 ].form.des }}</p> data-wow-delay="0.5s">{{ modules[9].form.des }}</p>
<ul v-if="articles4.length" <ul v-if="articles4.length"
class="people"> class="people">
<li v-for="(item, i) in articles4" <li v-for="(item, i) in articles4"
:key="i" :key="i"
@click="toArtice(item, modules[9].form)" @click="toArtice(item, modules[10].form)"
class="wow fadeInDown"> class="wow fadeInDown">
<img class="pic" <img class="pic"
:src="item.titleImg" :src="item.titleImg"
@ -191,14 +211,14 @@
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<p class="job">岗位：{{ item.post }}</p> <p class="job">岗位：{{ item.post }}</p>
<p class="hobby">爱好：{{ item.post }}</p> <p class="hobby">爱好：{{ item.hobby }}</p>
<div class="text" <div class="text"
v-html="item.mainBody"></div> v-html="item.mainBody"></div>
</div> </div>
</li> </li>
</ul> </ul>
<div class="all-link" <div class="all-link"
@click="toAll(modules[9].form)"> @click="toAll(modules[10].form)">
<span>{{$t('column.all')}} <img class="icon" <span>{{$t('column.all')}} <img class="icon"
src="@/assets/images/arrow.png" src="@/assets/images/arrow.png"
alt=""></span> alt=""></span>
@ -206,98 +226,57 @@
</div> </div>
</div> </div>
<div class="block"> <div class="block talent-block">
<div class="inner"> <div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[10].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[11].form.title }}</h2>
<p class="intro wow fadeInUp" <p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[10].form.des }}</p> data-wow-delay="0.5s">{{ modules[11].form.des }}</p>
<div class="talent"> <div class="talent">
<div class="left wow fadeInLeft" <div class="left wow fadeInLeft"
data-wow-delay="0.5s"> data-wow-delay="0.5s">
<h6>{{ modules[11].form.title }}</h6> <h6>{{ modules[12].form.title }}</h6>
<p class="sub-title">{{ modules[11].form.subTitle }}</p> <p class="sub-title">{{ modules[12].form.subTitle }}</p>
<div class="text" <div class="text"
v-html="modules[11].form.des"></div> v-html="modules[12].form.des"></div>
<el-button v-if="isLink(modules[11].form.link.linkName)" <el-button v-if="isLink(modules[12].form.link.linkName)"
style="background-color: #026BE1;"
type="primary" type="primary"
round round
@click="openLink(modules[11].form)">这里跳转 ></el-button> @click="openLink(modules[12].form)">诚邀海内外人才加入我们 ></el-button>
</div> </div>
<img :src="modules[11].form.pic" <img :src="modules[12].form.pic"
alt="" alt=""
class="pic"> class="pic">
</div> </div>
</div> </div>
</div> </div>
<div class="about" <div class="about">
style="margin-top: 100px"> <div class="about-bg">
<div class="inner"> <div class="inner">
<div class="left"> <div class="left">
<h6>{{ modules[12].form.title }}</h6> <h6>{{ modules[13].form.title }}</h6>
<div class="text" <div class="text"
v-html="modules[12].form.des"></div> v-html="modules[13].form.des"></div>
<img src="@/assets/images/arrow-white.png" <img src="@/assets/images/arrow-white.png"
alt="" alt=""
:class="{'arrow': isLink(modules[12].form.link.linkName)}" :class="{'arrow': isLink(modules[13].form.link.linkName)}"
@click="openLink(modules[12].form)"> @click="openLink(modules[13].form)">
</div> </div>
<img class="pic" <img class="pic"
:src="modules[12].form.pic"
alt="">
</div>
</div>
<div class="block"
style="margin-top: 100px">
<div class="inner">
<ul class="entry">
<li :class="{'cursor-pointer': isLink(modules[13].form.link.linkName)}"
@click="openLink(modules[13].form)">
<img class="icon"
:src="modules[13].form.pic" :src="modules[13].form.pic"
alt=""> alt="">
<p class="text">{{ modules[13].form.title }}</p> </div>
</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 :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 :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 :class="{'cursor-pointer': isLink(modules[17].form.link.linkName)}"
@click="openLink(modules[17].form)">
<img class="icon"
:src="modules[17].form.pic"
alt="">
<p class="text">{{ modules[17].form.title }}</p>
</li>
</ul>
</div> </div>
</div> </div>
<ul class="tools"> <ul class="tools">
<li v-for="(item, i) in modules[18].list" <li v-for="(item, i) in modules[19].list"
:key="i" :key="i"
@click="openLink(item)"> @click="toLink(item, i)">
<img :src="'http://10.10.11.7/images/iasf/icon' + (i < 4 ? i + 1 : 1) + '.png'" <!-- <img :src="'http://10.10.11.7/images/iasf/icon' + (i < 4 ? i + 1 : 1) + '.png'"
alt="" alt=""
class="icon"> class="icon"> -->
{{ item.title }} {{ item.title }}
</li> </li>
</ul> </ul>
@ -341,41 +320,40 @@ export default {
data : data :
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing']) data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
console.log('JSON=>', json)
this.modules = json this.modules = json
console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules) console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules)
// 获取文章列表 // 获取文章列表
if (json[4].form.column.length) { if (json[5].form.column.length) {
const { column, articleNum } = json[4].form const { column, articleNum } = json[5].form
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => { this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles = Util.removeTag(data.slice(0, articleNum || 4)) this.articles = Util.removeTag(data.slice(0, articleNum || 4))
}).catch(err => { }) }).catch(err => { })
} }
if (json[5].form.column.length) { if (json[6].form.column.length) {
const { column, articleNum } = json[5].form const { column, articleNum } = json[6].form
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => { this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles1 = Util.removeTag(data.slice(0, articleNum || 4)) this.articles1 = Util.removeTag(data.slice(0, articleNum || 4))
if (this.articles1.length) this.curArticle1 = this.articles1[0] if (this.articles1.length) this.curArticle1 = this.articles1[0]
}).catch(err => { }) }).catch(err => { })
} }
if (json[6].form.column.length) { if (json[7].form.column.length) {
const { column, articleNum } = json[6].form const { column, articleNum } = json[7].form
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => { this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles2 = Util.removeTag(data.slice(0, articleNum || 4)) this.articles2 = Util.removeTag(data.slice(0, articleNum || 4))
if (this.articles2.length) this.curArticle2 = this.articles2[0] if (this.articles2.length) this.curArticle2 = this.articles2[0]
}).catch(err => { }) }).catch(err => { })
} }
if (json[7].form.column.length) { if (json[8].form.column.length) {
const { column, articleNum } = json[7].form const { column, articleNum } = json[8].form
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => { this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles3 = Util.removeTag(data.slice(0, articleNum || 4)) this.articles3 = Util.removeTag(data.slice(0, articleNum || 4))
if (this.articles3.length) this.curArticle3 = this.articles3[0] if (this.articles3.length) this.curArticle3 = this.articles3[0]
}).catch(err => { }) }).catch(err => { })
} }
if (json[9].form.column.length) { if (json[10].form.column.length) {
const { column, articleNum } = json[9].form const { column, articleNum } = json[10].form
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => { this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles4 = Util.removeTag(data.slice(0, articleNum || 3)) this.articles4 = Util.removeTag(data.slice(0, articleNum || 3))
}).catch(err => { }) }).catch(err => { })
@ -420,6 +398,10 @@ export default {
if (this['curInd' + k] > this['articles' + k].length - 1) this['curInd' + k] = 0 if (this['curInd' + k] > this['articles' + k].length - 1) this['curInd' + k] = 0
this['curArticle' + k] = this['articles' + k][this['curInd' + k]] || {} this['curArticle' + k] = this['articles' + k][this['curInd' + k]] || {}
}, },
// 右侧工具栏点击回调
toLink (item, i) {
i ? this.openLink(item) : window.scrollTo(0, document.documentElement.scrollHeight)
}
} }
}; };
</script> </script>
@ -459,46 +441,86 @@ export default {
.block { .block {
padding-top: 3.15rem; padding-top: 3.15rem;
.b-title { .b-title {
font-size: 2.25rem; font-size: 35px;
font-family: PingFangSC-Semibold, PingFang SC;
color: #333;
} }
.intro { .intro {
font-size: 1.35rem;
margin-bottom: 3.6rem; margin-bottom: 3.6rem;
font-size: 30px;
font-family: FZLTXHK--GBK1-0, FZLTXHK--GBK1;
color: #5b5b5e;
} }
} }
.inner { .inner {
width: 1370px; width: 1444px;
min-width: 70%; min-width: 70%;
} }
.card { .card {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
li { li {
position: relative;
width: 47%; width: 47%;
height: 366px;
transition: 0.3s; transition: 0.3s;
overflow: hidden;
&:hover { &:hover {
margin-top: -0.9375rem; .project {
top: -100%;
}
.texts {
top: 0;
}
} }
} }
.pic { .pic {
width: 100%; width: 100%;
height: auto; height: 100%;
}
.project {
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 2.4rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
transition: 0.3s;
} }
.texts { .texts {
padding-left: 1.375rem; position: absolute;
margin-top: 3rem; top: 100%;
border-left: 2px solid #dfe4e9; left: 0;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
padding: 0 1rem;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
transition: 0.3s;
}
.name {
font-size: 2rem;
font-family: PingFangSC-Medium, PingFang SC;
} }
h6 { h6 {
margin-bottom: 1.56rem; margin: 1rem 0;
line-height: 2rem; line-height: 2rem;
font-size: 1.368rem; font-size: 1.6rem;
color: #333; font-family: PingFangSC-Medium, PingFang SC;
@include mul-ellipsis(2); @include mul-ellipsis(2);
} }
.des { .des {
font-size: 1.024rem; font-size: 1.2rem;
color: #222;
line-height: 30px; line-height: 30px;
} }
} }
@ -510,100 +532,93 @@ export default {
} }
.news-banner { .news-banner {
display: flex; display: flex;
margin-top: 20px;
cursor: pointer; cursor: pointer;
.pic-wrap { .pic-wrap {
width: 50%; width: 50%;
height: 20.5rem; height: 24.5rem;
overflow: hidden; overflow: hidden;
} }
.pic { .pic {
transition: 0.5s; transition: 0.5s;
&:hover {
transform: scale(1.3);
}
} }
.right { .right {
position: relative; position: relative;
width: 50%; width: 50%;
padding: 50px 50px 30px; padding: 42px 71px 90px 58px;
background: #1583ff; background: #026be1;
color: #fff; color: #fff;
h6 { h6 {
font-size: 1.34rem; font-size: 24px;
font-family: PingFangSC-Semibold, PingFang SC;
line-height: 43px;
@include mul-ellipsis(2);
} }
.des { .des {
font-size: 1.02rem; margin: 28px 0 25px;
font-size: 18px;
line-height: 32px;
} }
.meta { .meta {
font-size: 1.04rem; font-size: 16px;
}
&:hover {
background: #465f85;
h6,
.des,
.meta {
color: #fff;
transform: translateY(15px);
}
}
}
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;
} }
} }
.news { .news {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 10px 0; margin: 20px 0;
li { li {
width: calc((100% - 18px) / 3); width: calc((100% - 40px) / 3);
margin-right: 9px; margin-right: 20px;
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
} }
.pic { .pic-wrap {
width: 100%; width: 100%;
height: 220px; height: 220px;
overflow: hidden;
}
.pic {
width: 100%;
height: 100%;
transition: 0.5s;
} }
.texts { .texts {
padding: 20px 24px 50px; padding: 24px 28px;
background-color: #fff; background-color: #fff;
box-shadow: 2px 2px 2px rgba(241, 241, 241, 0.8);
} }
.meta { .meta {
font-size: 0.9rem; font-size: 16px;
color: #666; color: #666;
} }
h6 { h6 {
font-size: 1.1rem; font-size: 20px;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
color: #333; color: #333;
@include mul-ellipsis(2); @include ellipsis;
} }
.des { .des {
margin: 15px 0; height: 84px;
margin: 14px 0 16px;
font-size: 16px;
line-height: 28px;
color: #333;
text-indent: 2em;
} }
} }
.news-carousel { .news-carousel {
display: flex; display: flex;
li { li {
position: relative; position: relative;
width: calc((100% - 18px) / 3); width: calc((100% - 40px) / 3);
height: 284px; height: 284px;
margin-right: 9px; margin-right: 20px;
overflow: hidden;
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
@ -611,6 +626,7 @@ export default {
.pic { .pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: 0.5s;
} }
.texts { .texts {
position: absolute; position: absolute;
@ -623,23 +639,28 @@ export default {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
h6 { h6 {
font-size: 1.2rem; font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
cursor: pointer; cursor: pointer;
} }
.des-wrap {
height: 101px;
margin: 11px 0 25px;
}
.meta { .meta {
margin: 14px 0; margin-bottom: 16px;
font-size: 0.9rem; font-size: 18px;
color: rgba(255, 255, 255, 0.86); color: rgba(255, 255, 255, 0.86);
} }
.des { .des {
margin-bottom: 14px; font-size: 20px;
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
-webkit-line-clamp: 2;
line-height: 30px;
cursor: pointer; cursor: pointer;
} }
.date { .date {
font-size: 0.8rem; font-size: 16px;
} }
.action { .action {
position: absolute; position: absolute;
@ -689,9 +710,9 @@ export default {
} }
} }
.pic { .pic {
width: 260px; width: 293px;
height: 260px; height: 293px;
margin-bottom: 10px; margin-bottom: 28px;
border-radius: 50%; border-radius: 50%;
} }
h6 { h6 {
@ -700,8 +721,9 @@ export default {
color: #333; color: #333;
} }
.job { .job {
margin: 10px 0; margin: 18px 0 12px;
font-size: 1rem; font-size: 1rem;
font-weight: 600;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
color: #333; color: #333;
} }
@ -716,17 +738,22 @@ export default {
color: #333; color: #333;
} }
} }
.talent-block {
background: url(http://10.10.11.7/images/iasf/11.png) 0 0/100% 100% no-repeat;
}
.talent { .talent {
display: flex; display: flex;
color: #fff; color: #fff;
background: #1583ff;
border-radius: 0px 100px 0px 100px; border-radius: 0px 100px 0px 100px;
overflow: hidden;
.left { .left {
width: 50%; width: 50%;
padding: 120px 0 0 5%; padding: 120px 80px 0 5%;
background: #111c43;
} }
h6 { h6 {
font-size: 1.6rem; font-size: 30px;
font-family: PingFangSC-Medium, PingFang SC;
} }
.sub-title { .sub-title {
margin: 8px 0 20px; margin: 8px 0 20px;
@ -737,78 +764,47 @@ export default {
font-size: 1rem; font-size: 1rem;
line-height: 2; line-height: 2;
} }
.el-button {
font-size: 20px;
border: 0;
}
.pic { .pic {
width: 50%; width: 50%;
min-height: 465px; min-height: 465px;
} }
} }
.about { .about {
background: #0a7fec; padding: 100px 0 229px;
background: url(http://10.10.11.7/images/iasf/12.png) 0 450px no-repeat;
.about-bg {
background-color: #0a7fec;
}
.inner { .inner {
position: relative; position: relative;
height: 350px; height: 465px;
padding: 50px; padding: 73px 50px 58px;
} }
.left { .left {
width: 48%; width: 44%;
} }
h6 { h6 {
font-size: 1.8rem; font-size: 36px;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
color: #fff; color: #fff;
} }
.text { .text {
margin: 20px 0; margin: 24px 0 37px;
font-size: 1rem; font-size: 20px;
line-height: 35px;
color: #fff; color: #fff;
@include mul-ellipsis(4);
} }
.pic { .pic {
position: absolute; position: absolute;
top: -60px; top: -60px;
right: 0; right: 0;
max-width: 48%; width: 744px;
height: 460px; height: 657px;
}
}
.entry {
display: flex;
flex-wrap: wrap;
li {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 220px;
margin: 0 20px 20px 0;
text-align: center;
&:first-child {
width: calc((100% - 20px) / 2);
background-color: rgba(201, 102, 2, 0.83);
}
&:nth-child(2) {
width: calc((100% - 20px) / 2);
margin-right: 0;
background: #4fbc72;
}
&:nth-child(3) {
width: calc((100% - 40px) / 3);
background-color: rgba(237, 196, 95, 0.93);
}
&:nth-child(4) {
width: calc((100% - 40px) / 3);
background-color: rgba(8, 156, 218, 0.73);
}
&:nth-child(5) {
width: calc((100% - 40px) / 3);
margin-right: 0;
background: #2172e3;
}
}
.text {
margin-top: 15px;
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #fff;
} }
} }
.tools { .tools {
@ -816,33 +812,96 @@ export default {
position: fixed; position: fixed;
top: 60vh; top: 60vh;
right: 0; right: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
li { li {
position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 160px; // width: 160px;
padding: 0 1.2rem;
margin-bottom: 1px; margin-bottom: 1px;
font-size: 1rem; font-size: 1rem;
color: #0084ff; color: #0084ff;
line-height: 56px; line-height: 56px;
background-color: rgba(57, 59, 59, 0.94); background-color: rgba(19, 18, 19, 0.94);
cursor: pointer; cursor: pointer;
&.active { transition: 0.3s;
width: 192px; &:before {
content: '';
width: 28px;
height: 28px;
margin-right: 5px;
background: url(http://10.10.11.7/images/iasf/icon1.png) no-repeat;
}
&:nth-child(2):before {
background-image: url(http://10.10.11.7/images/iasf/icon2.png);
}
&:nth-child(2):hover:before {
background-image: url(http://10.10.11.7/images/iasf/icon2-1.png);
}
&:nth-child(3):before {
background-image: url(http://10.10.11.7/images/iasf/icon3.png);
}
&:nth-child(3):hover:before {
background-image: url(http://10.10.11.7/images/iasf/icon3-1.png);
}
&:nth-child(4):before {
background-image: url(http://10.10.11.7/images/iasf/icon4.png);
}
&:nth-child(4):hover:before {
background-image: url(http://10.10.11.7/images/iasf/icon4-1.png);
}
&:hover {
justify-content: flex-start;
// width: 192px;
padding-right: 4rem;
color: #fff; color: #fff;
background-color: rgba(1, 129, 247, 0.94); background-color: rgba(1, 129, 247, 0.94);
&:before {
background-image: url(http://10.10.11.7/images/iasf/icon1-1.png);
}
} }
} }
.icon { .icon {
margin-right: 10px; margin-right: 10px;
} }
} }
@media (max-width: 1450px) { @media (max-width: 1470px) {
.inner { .inner {
width: 95%; width: 95%;
} }
.about {
.pic {
width: 700px;
height: auto;
}
}
}
@media (max-width: 1370px) {
.about {
.inner {
height: auto;
}
.left {
width: 100%;
}
.pic {
position: static;
width: auto;
max-width: 100%;
height: auto;
margin-top: 10px;
}
}
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.carousel .texts {
left: 5%;
right: 5%;
}
.card { .card {
flex-direction: column; flex-direction: column;
li { li {
@ -878,23 +937,10 @@ export default {
width: 100%; width: 100%;
} }
.left { .left {
padding-bottom: 50px;
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.about {
.inner {
height: auto;
}
.left {
width: 100%;
}
.pic {
position: static;
max-width: 100%;
height: auto;
margin-top: 10px;
}
}
.entry { .entry {
flex-direction: column; flex-direction: column;
li { li {
@ -903,6 +949,4 @@ export default {
} }
} }
} }
@media (max-width: 1200px) {
}
</style> </style>
Write Preview
Loading…
Cancel
Save