同步代码

master
yujialong 9 months ago
parent 27590b0988
commit d1b480c097
  1. BIN
      src/assets/images/tel1.png
  2. 4
      src/libs/util.js
  3. 1216
      src/pages/about/index.vue
  4. 118
      src/pages/application/index.vue
  5. 36
      src/pages/article/activity.vue
  6. 12
      src/pages/article/editor.css
  7. 106
      src/pages/article/index.vue
  8. 166
      src/pages/careers/index.vue
  9. 291
      src/pages/column/index.vue
  10. 63
      src/pages/column/result.vue
  11. 32
      src/pages/contactUs/index.vue
  12. 60
      src/pages/devHistory/index.vue
  13. 25
      src/pages/deviceIntroBeam/index.vue
  14. 84
      src/pages/deviceIntroLayout/index.vue
  15. 71
      src/pages/deviceIntroLinear/index.vue
  16. 116
      src/pages/edu/index.vue
  17. 14
      src/pages/estate/event/index.vue
  18. 32
      src/pages/estate/index/index.vue
  19. 12
      src/pages/estate/location/index.vue
  20. 21
      src/pages/estate/orgSetup/index.vue
  21. 12
      src/pages/estate/survey/index.vue
  22. 8
      src/pages/exp/index.vue
  23. 31
      src/pages/governance/index.vue
  24. 134
      src/pages/home/index.vue
  25. 327
      src/pages/iasf/index.vue
  26. 31
      src/pages/industrial/index.vue
  27. 16
      src/pages/lightSources/index.vue
  28. 16
      src/pages/mission/index.vue
  29. 1024
      src/pages/news/index.vue
  30. 132
      src/pages/newsPress/index.vue
  31. 70
      src/pages/newsProcurement/index.vue
  32. 19
      src/pages/org/index.vue
  33. 96
      src/pages/overview/index.vue
  34. 24
      src/pages/overviewDevHistory/index.vue
  35. 18
      src/pages/overviewIntro/index.vue
  36. 1
      src/pages/overviewLocation/index.vue
  37. 18
      src/pages/overviewSetup/index.vue
  38. 1
      src/pages/overviewTrailer/index.vue
  39. 51
      src/pages/publication/index.vue
  40. 17
      src/pages/publication/monograph.vue
  41. 21
      src/pages/publication/patent.vue
  42. 32
      src/pages/publication/single.vue
  43. 31
      src/pages/publication/thesis.vue
  44. 21
      src/pages/publish/show.vue
  45. 534
      src/pages/research/index.vue
  46. 8
      src/pages/researchTeam/index.vue
  47. 83
      src/pages/science/index.vue
  48. 42
      src/pages/scientific/index.vue
  49. 534
      src/pages/sfel/index.vue
  50. 12
      src/pages/speech/index.vue
  51. 1
      src/pages/talent/index.vue
  52. 1
      src/pages/talentCenter/index.vue
  53. 27
      src/pages/talentCentre/index.vue
  54. 15
      src/pages/team/index.vue
  55. 25
      src/pages/userSharing/index.vue

Binary file not shown.

After

Width:  |  Height:  |  Size: 534 B

@ -146,6 +146,10 @@ const util = {
isEn(id) {
return Setting.enIds.includes(+id)
},
// rsa加密(这里无需加密,但是全部页面的请求都有调这个方法,因此直接返回即可)
rsa(data) {
return data
},
};
export default util;

File diff suppressed because it is too large Load Diff

@ -1,10 +1,16 @@
<template>
<div class="wrap" v-if="modules.length>=1">
<el-carousel :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'">
<div class="wrap"
v-if="modules.length>=1">
<el-carousel :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">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
<img :src="item.pic" alt="">
<el-carousel-item v-if="item.pic && item.isEnable"
:key="i">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
@click="openLink(item)">
<img :src="item.pic"
alt="">
<p class="banner-name">{{ item.title }}</p>
</div>
</el-carousel-item>
@ -13,15 +19,24 @@
<div class="block history gray">
<div class="inner">
<h2 class="wow fadeInLeft" style="margin-left: 57px">{{ modules[1].form.title }}</h2>
<div class="texts wow fadeInDown" data-wow-delay="0.5s">
<h2 class="wow fadeInLeft"
style="margin-left: 57px">{{ modules[1].form.title }}</h2>
<div class="texts wow fadeInDown"
data-wow-delay="0.5s">
<div class="left">
<h2>{{ modules[1].form.subTitle }}</h2>
<!-- <div class="line"></div> -->
<div class="des">{{ modules[1].form.des }}</div>
<img :class="{'arrow': isLink(modules[1].form.link.linkName)}" src="@/assets/images/arrow.png" alt="" @click="openLink(modules[1].form)">
<img :class="{'arrow': isLink(modules[1].form.link.linkName)}"
src="@/assets/images/arrow.png"
alt=""
@click="openLink(modules[1].form)">
</div>
<img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
<img class="bg"
width="562"
height="506"
:src="modules[1].form.pic"
alt="">
</div>
</div>
</div>
@ -29,11 +44,21 @@
<div class="block">
<div class="inner app-inner">
<h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
<ul class="app">
<li v-for="(item, i) in modules[3].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
<img class="bg" :src="require('@/assets/images/application/app' + (i + 1) + '.png')" alt="">
<img class="icon" :src="require('@/assets/images/application/app' + (i + 1) + '-1.png')" alt="">
<li v-for="(item, i) in modules[3].list"
:key="i"
class="wow fadeInDown"
:data-wow-delay="(0.2 * i).toFixed(1) + 's'"
:class="{'cursor-pointer': isLink(item.link.linkName)}"
@click="openLink(item)">
<img class="bg"
:src="require('@/assets/images/application/app' + (i + 1) + '.png')"
alt="">
<img class="icon"
:src="require('@/assets/images/application/app' + (i + 1) + '-1.png')"
alt="">
<p class="text">{{ item.title }}</p>
</li>
</ul>
@ -43,10 +68,17 @@
<div class="block gray">
<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>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
<ul class="group">
<li v-for="(item, i) in modules[5].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
<img :src="item.pic" alt="">
<li v-for="(item, i) in modules[5].list"
:key="i"
class="wow fadeInDown"
:data-wow-delay="(0.2 * i).toFixed(1) + 's'"
:class="{'cursor-pointer': isLink(item.link.linkName)}"
@click="openLink(item)">
<img :src="item.pic"
alt="">
<p class="text">{{ item.title }}</p>
</li>
</ul>
@ -56,19 +88,29 @@
<div class="block news-block">
<div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[6].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
<ul class="news">
<li v-for="(item, i) in articles" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" @click="toArtice(item, modules[7].form)">
<img :src="item.titleImg" alt="">
<li v-for="(item, i) in articles"
:key="i"
class="wow fadeInDown"
:data-wow-delay="(0.2 * i).toFixed(1) + 's'"
@click="toArtice(item, modules[7].form)">
<img :src="item.titleImg"
alt="">
<div class="texts">
<h6>{{ item.title }}</h6>
<div class="des" v-html="item.mainBody"></div>
<div class="des"
v-html="item.mainBody"></div>
<span class="meta">{{ item.releaseTime }}</span>
</div>
</li>
</ul>
<div class="all-link" @click="toAll(modules[7].form)">
<span>{{$t('column.all')}} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
<div class="all-link"
@click="toAll(modules[7].form)">
<span>{{$t('column.all')}} <img class="icon"
src="@/assets/images/arrow.png"
alt=""></span>
</div>
</div>
</div>
@ -119,7 +161,7 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
@import '../../styles/page/page.scss';
.wrap {
/deep/ .el-carousel {
@ -161,7 +203,7 @@ export default {
margin-top: 20px;
background-color: #fff;
border-radius: 100px 0px 0px 0px;
transition: .3s;
transition: 0.3s;
position: relative;
&:hover {
transform: scale(1.05);
@ -205,7 +247,7 @@ export default {
width: 368px;
height: 252px;
margin: 0 14px 14px 0;
transition: .3s;
transition: 0.3s;
&:hover {
transform: scale(1.05);
.icon {
@ -215,7 +257,9 @@ export default {
&:first-child {
width: 750px;
}
&:nth-child(3), &:nth-child(7), &:nth-child(10) {
&:nth-child(3),
&:nth-child(7),
&:nth-child(10) {
margin-right: 0;
}
&:nth-child(9) {
@ -234,7 +278,7 @@ export default {
}
.icon {
position: relative;
transition: .3s;
transition: 0.3s;
}
.text {
position: relative;
@ -250,7 +294,7 @@ export default {
position: relative;
width: calc((100% - 56px) / 3);
margin: 0 28px 39px 0;
transition: .3s;
transition: 0.3s;
&:hover {
transform: scale(1.05);
.text {
@ -277,8 +321,8 @@ export default {
line-height: 6.43rem;
text-align: center;
color: #272727;
background-color: #F5F5F5;
transition: .3s;
background-color: #f5f5f5;
transition: 0.3s;
}
}
.news-block {
@ -296,7 +340,7 @@ export default {
margin-bottom: 1.26rem;
background-color: #fff;
cursor: pointer;
transition: .3s;
transition: 0.3s;
&:hover {
transform: scale(1.05);
}
@ -310,7 +354,7 @@ export default {
}
h6 {
font-size: 1.1rem;
color: #0648A8;
color: #0648a8;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
@ -319,23 +363,23 @@ export default {
}
.des {
margin: 2px 0;
font-size: .9rem;
font-size: 0.9rem;
color: #333;
line-height: 22px;
-webkit-line-clamp: 2;
}
.meta {
font-size: .8rem;
font-size: 0.8rem;
color: #999;
}
}
@media (max-width: 1520px) {
.app-inner {
width: 1558px;
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel {
@ -351,7 +395,7 @@ export default {
.banner-item .banner-name {
font-size: 1.5rem;
bottom: 2.25rem;
left: 16.125rem
left: 16.125rem;
}
.block {
padding: 50px 0;
@ -933,6 +977,4 @@ export default {
}
}
}
</style>

@ -1,12 +1,17 @@
<template>
<div class="wrap">
<div v-if="form.bannerImg"
class="banner"
:style="{backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : ''}">
{{ form.columnName }}
</div>
<div class="content">
<Breadcrumb ref="breadcrumb"
:data.sync="routes" />
<div class="article">
<div class="left">
<h2>{{ form.title }}</h2>
<div class="meta">{{$t('column.time')}}{{ form.activityStartTime + ' ~ ' + form.activityEndTime }}</div>
<div class="meta">{{$t('column.time')}}{{ form.activityStartTime }}</div>
<div v-if="form.offlineLocation"
class="meta">{{$t('column.address')}}{{ form.offlineLocation }}</div>
<div v-if="form.onlineLocation"
@ -102,7 +107,7 @@ export default {
}).catch(err => { })
// +1
this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => { }).catch(err => { })
this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(res => { }).catch(err => { })
},
// banner
getBanner (data) {
@ -148,6 +153,7 @@ export default {
font-size: 48px;
color: #fff;
background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat;
object-fit: cover;
}
.article {
display: flex;
@ -167,6 +173,10 @@ export default {
color: #333;
}
/deep/.des {
a {
color: rgb(0, 0, 238);
word-wrap: break-word;
}
img {
max-width: 100%;
}
@ -202,16 +212,24 @@ export default {
font-size: 18px;
}
}
@media (max-width: 1420px) {
.content {
width: 98%;
}
}
@media (max-width: 1200px) {
.banner {
.article {
/deep/.des {
img {
max-width: 100%;
height: 15rem;
}
}
}
.banner {
font-size: 1.5rem;
}
.article {
flex-direction: column;
.left {
@ -221,5 +239,15 @@ export default {
}
}
}
.article {
.des {
img {
height: 15rem !important;
}
}
}
.right {
width: 100%;
}
}
</style>

@ -84,7 +84,9 @@
}
.tiny-wrap .people .pic {
max-width: 400px;
margin-right: 50px;
}
.tiny-wrap .people .texts {
margin-left: 50px;
}
.tiny-wrap .people h6 {
font-size: 24px;
@ -114,3 +116,11 @@
background: #1583ff;
border-radius: 4px;
}
@media (max-width: 640px) {
.tiny-wrap .people {
flex-direction: column;
}
.tiny-wrap .people .texts {
margin-left: 0;
}
}

@ -1,7 +1,8 @@
<template>
<div v-show="loaded"
class="wrap">
<div v-if="form.articleTemplate !== 23"
<!-- 人物详情不展示banner -->
<div v-if="form.articleTemplate !== 23 && !isPeople"
class="banner"
:style="{backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : ''}">
{{ form.columnName }}
@ -19,6 +20,7 @@
<p v-if="form.summary"
class="brief">{{ form.summary }}</p>
<div class="des"
id="mainBody"
v-html="form.mainBody"></div>
<div v-if="form.fileList && form.fileList.length"
class="annex">
@ -96,7 +98,6 @@ export default {
if (temId == 72) this.isPeople = 1 // articleTemplate=72
if (cache.releaseTime) cache.releaseTime = cache.releaseTime.split(' ')[0]
this.loaded = true
console.log("🚀 ~ file: index.vue:90 ~ getInfo ~ cache:", this.form, cache)
} else {
this.$post(`${this.api.findArticle}?id=${this.id}`).then(async ({ data }) => {
//
@ -110,15 +111,15 @@ export default {
}
},
{
name: data.title
name: data.columnName
}
]
//
if (data.isDisable) {
if (data.isDisable || !data.isRelease) {
this.$router.back()
} else {
const temId = data.articleTemplate
let path = `?articleId=${this.id}&id=${id}&columnName=${columnName || ''}&path=${path || ''}`
let path = `?articleId=${this.id}&id=${id}&columnName=${columnName || ''}&siteId=${data.siteId}&path=${path || ''}`
if (temId === 25 || temId === 26) { // /
this.$router.replace((temId === 25 ? '/article/activity' : '/publish/show') + path)
} else {
@ -126,22 +127,32 @@ export default {
if (temId == 72) this.isPeople = 1 // articleTemplate=72
data.releaseTime = data.releaseTime.split(' ')[0]
this.form = data
// tinymcebugpptext-indentfont-size2em
this.$nextTick(() => {
document.querySelectorAll('#mainBody p').forEach(e => {
try {
if (e.children.length && e.style.textIndent) {
e.style.fontSize = e.children[0].style.fontSize
}
} catch (e) { }
})
})
this.columnId = data.columnId
// banner
if (!data.bannerImg) {
const columns = await this.$post(this.api.listWithTree, {
const columns = await this.$post(this.api.listWithTree, Util.rsa({
siteId: this.site,
columnName: '',
templateId: '',
typeId: '',
isSort: 1
})
}))
this.getBanner(columns.data)
this.form.bannerImg = this.gotBanner ? this.columnBanner || require('@/assets/images/article-banner.png') : ''
}
// +1
this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => { }).catch(err => { })
this.$post(this.api.articlePreview, Util.rsa(this.id)).then(res => { }).catch(err => { })
this.loaded = true
}
}
@ -185,12 +196,15 @@ export default {
}
}
.banner {
display: flex;
align-items: center;
height: 21.6rem;
padding: 14.68rem 0 0 22.1875rem;
font-size: 2.16rem;
padding-left: 10%;
font-size: 2rem;
font-weight: 600;
color: #fff;
background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat;
background: url(../../assets/images/intro-bg.png) center center no-repeat;
object-fit: cover;
}
.article {
display: flex;
@ -209,15 +223,36 @@ export default {
}
.brief {
padding-bottom: 1.5rem;
margin-bottom: 1rem;
margin: 1rem 0;
font-size: 1.2rem;
line-height: 1.33;
line-height: 1.6;
color: #606060;
border-bottom: 1px solid #d8d8d8;
}
/deep/.des {
// width: 100%;
// overflow: auto;
a {
color: rgb(0, 0, 238);
word-wrap: break-word;
}
img {
max-width: 100%;
object-fit: cover;
}
ul {
// padding-left: 40px;
list-style: disc;
li {
list-style: inherit;
}
}
ol {
// padding-left: 40px;
list-style: decimal;
li {
list-style: inherit;
}
}
}
.annex {
@ -247,6 +282,7 @@ export default {
}
}
}
@media (max-width: 1420px) {
.content {
width: 98%;
@ -257,7 +293,7 @@ export default {
/deep/.des {
img {
max-width: 100%;
height: 15rem;
max-height: 15rem;
}
}
}
@ -280,46 +316,8 @@ export default {
}
}
}
}
@media (max-width: 480px) {
.wrap {
.banner {
padding: 8rem 0 0 10rem;
height: 17rem;
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
.banner {
padding: 12rem 0 0 10rem;
height: 20rem;
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.wrap {
.banner {
padding: 14rem 0 0 10rem;
height: 22rem;
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.wrap {
.banner {
padding: 16rem 0 0 10rem;
height: 26rem;
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
.banner {
padding: 18rem 0 0 10rem;
height: 30rem;
}
.right {
width: 100%;
}
}
</style>

@ -1,10 +1,15 @@
<template>
<div class="wrap">
<el-carousel :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'">
<el-carousel :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">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
<img :src="item.pic" alt="">
<el-carousel-item v-if="item.pic && item.isEnable"
:key="i">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
@click="openLink(item)">
<img :src="item.pic"
alt="">
<p class="banner-name">{{ item.title }}</p>
</div>
</el-carousel-item>
@ -14,44 +19,68 @@
<div class="block">
<div class="inner">
<ul class="card">
<li class="wow fadeInDown" data-wow-delay="0.1s">
<img class="pic" :src="modules[1].form.pic" alt="">
<!-- <li class="wow fadeInDown"
data-wow-delay="0.1s">
<img class="pic"
:src="modules[1].form.pic"
alt="">
<div class="texts">
<h6>{{ modules[1].form.title }}</h6>
<p class="text">{{ modules[1].form.des }}</p>
</div>
<div class="arrow">
<img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)">
<img src="@/assets/images/arrow-white.png"
alt=""
:class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
@click="openLink(modules[1].form)">
</div>
</li>
<li class="wow fadeInDown" data-wow-delay="0.3s">
<img class="pic" :src="modules[2].form.pic" alt="">
</li> -->
<li class="wow fadeInDown"
data-wow-delay="0.3s">
<img class="pic"
:src="modules[2].form.pic"
alt="">
<div class="texts">
<h6>{{ modules[2].form.title }}</h6>
<p class="text">{{ modules[2].form.des }}</p>
</div>
<div class="arrow">
<img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)">
<img src="@/assets/images/arrow-white.png"
alt=""
:class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
@click="openLink(modules[2].form)">
</div>
</li>
<li class="wow fadeInDown" data-wow-delay="0.5s">
<img class="pic" :src="modules[3].form.pic" alt="">
<li class="wow fadeInDown"
data-wow-delay="0.5s">
<img class="pic"
:src="modules[3].form.pic"
alt="">
<div class="texts">
<h6>{{ modules[3].form.title }}</h6>
<p class="text">{{ modules[3].form.des }}</p>
</div>
<div class="arrow">
<img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" @click="openLink(modules[3].form)">
<img src="@/assets/images/arrow-white.png"
alt=""
:class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
@click="openLink(modules[3].form)">
</div>
</li>
<li class="wow fadeInDown" data-wow-delay="0.7s">
<img class="pic" :src="modules[4].form.pic" alt="">
<li class="wow fadeInDown"
data-wow-delay="0.7s">
<img class="pic"
:src="modules[4].form.pic"
alt="">
<div class="texts">
<h6>{{ modules[4].form.title }}</h6>
<p class="text">{{ modules[4].form.des }}</p>
</div>
<div class="arrow">
<img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}" @click="openLink(modules[4].form)">
<img src="@/assets/images/arrow-white.png"
alt=""
:class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}"
@click="openLink(modules[4].form)">
</div>
</li>
</ul>
@ -61,16 +90,26 @@
<div class="block gray">
<div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[5].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
<ul class="people">
<template v-for="(item, i) in modules[6].list">
<li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
<img class="comma" src="@/assets/images/comma.png" alt="">
<li v-if="item.isEnable"
:key="i"
class="wow fadeInDown"
data-wow-delay="0.5s"
:class="{'cursor-pointer': isLink(item.link.linkName)}"
@click="openLink(item)">
<img class="comma"
src="@/assets/images/comma.png"
alt="">
<div class="left">
<h6>{{ item.title }}</h6>
<div class="des">{{ item.des }}</div>
</div>
<img class="pic" :src="item.pic" alt="">
<img class="pic"
:src="item.pic"
alt="">
</li>
</template>
</ul>
@ -79,14 +118,23 @@
<ul class="shows">
<template v-for="(item, i) in modules[7].list">
<li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.3s">
<li v-if="item.isEnable"
:key="i"
class="wow fadeInDown"
data-wow-delay="0.3s">
<div class="left">
<h6>{{ item.title }}</h6>
<div class="sub">{{ item.subTitle }}</div>
<div class="des">{{ item.des }}</div>
<img src="@/assets/images/arrow-white.png" alt="" class="icon" :class="{'arrow': isLink(item.link.linkName)}" @click="openLink(item)">
<img src="@/assets/images/arrow-white.png"
alt=""
class="icon"
:class="{'arrow': isLink(item.link.linkName)}"
@click="openLink(item)">
</div>
<img class="pic" :src="item.pic" alt="">
<img class="pic"
:src="item.pic"
alt="">
</li>
</template>
</ul>
@ -129,7 +177,7 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
@import '../../styles/page/page.scss';
.wrap {
/deep/ .el-carousel {
height: 21.6rem;
@ -157,7 +205,6 @@ export default {
.intro {
margin-bottom: 6.9rem;
}
}
}
.card {
@ -201,9 +248,9 @@ export default {
width: 100%;
height: 7.9rem;
text-align: center;
background: #36404A;
background: #36404a;
opacity: 0;
transition: .3s;
transition: 0.3s;
cursor: default;
display: flex;
align-items: center;
@ -218,7 +265,7 @@ export default {
padding: 4.5rem 3.15rem 4.5rem 2.565rem;
margin-bottom: 100px;
background-color: #fff;
transition: .3s;
transition: 0.3s;
&:hover {
transform: scale(1.05);
}
@ -271,7 +318,10 @@ export default {
margin-bottom: 40px;
color: #fff;
&:hover .left {
h6, .sub, .des, .icon {
h6,
.sub,
.des,
.icon {
transform: translateY(20px);
}
}
@ -280,13 +330,13 @@ export default {
}
&:nth-child(2) {
.left {
background-color: rgba(47, 79, 23, .65);
background-color: rgba(47, 79, 23, 0.65);
}
}
&:nth-child(3) {
.left {
width: 43%;
background-color: rgba(91, 58, 35, .65);
background-color: rgba(91, 58, 35, 0.65);
}
}
}
@ -296,7 +346,7 @@ export default {
width: 43.333%;
height: 100%;
padding: 138px 30px 130px 103px;
background-color: rgba(54, 54, 54, .65);
background-color: rgba(54, 54, 54, 0.65);
}
.pic {
position: absolute;
@ -304,25 +354,27 @@ export default {
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
h6 {
font-size: 2.07rem;
transition: .3s;
transition: 0.3s;
}
.sub {
margin: 20px 0 20px 0;
font-size: 1.35rem;
transition: .3s;
transition: 0.3s;
}
.des {
margin-bottom: 40px;
font-size: 1.08rem;
transition: .3s;
transition: 0.3s;
}
.icon {
transition: .3s;
transition: 0.3s;
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel {
@ -338,7 +390,8 @@ export default {
.block {
padding: 50px 0;
.inner {
width: 95%;margin: 0 auto;
width: 95%;
margin: 0 auto;
.card {
flex-direction: column;
li {
@ -361,7 +414,6 @@ export default {
}
}
}
}
}
.shows {
@ -375,7 +427,7 @@ export default {
font-size: 1.5rem;
}
.sub {
margin: .5rem;
margin: 0.5rem;
font-size: 1rem;
}
.des {
@ -433,7 +485,6 @@ export default {
}
}
}
}
}
.shows {
@ -444,14 +495,15 @@ export default {
font-size: 1rem;
}
.sub {
font-size: .9rem;
font-size: 0.9rem;
}
.des {
font-size: .88rem;
margin-bottom: .5rem;
font-size: 0.88rem;
margin-bottom: 0.5rem;
}
.icon {
width: 2rem;height: 2rem;
width: 2rem;
height: 2rem;
}
}
}
@ -501,7 +553,6 @@ export default {
}
}
}
}
}
.shows {
@ -512,14 +563,15 @@ export default {
font-size: 1rem;
}
.sub {
font-size: .9rem;
font-size: 0.9rem;
}
.des {
font-size: .88rem;
margin-bottom: .5rem;
font-size: 0.88rem;
margin-bottom: 0.5rem;
}
.icon {
width: 2rem;height: 2rem;
width: 2rem;
height: 2rem;
}
}
}
@ -569,7 +621,6 @@ export default {
}
}
}
}
}
.shows {
@ -580,14 +631,15 @@ export default {
font-size: 1rem;
}
.sub {
font-size: .9rem;
font-size: 0.9rem;
}
.des {
font-size: .88rem;
margin-bottom: .5rem;
font-size: 0.88rem;
margin-bottom: 0.5rem;
}
.icon {
width: 2rem;height: 2rem;
width: 2rem;
height: 2rem;
}
}
}
@ -638,7 +690,6 @@ export default {
}
}
}
}
}
.shows {
@ -695,7 +746,6 @@ export default {
}
}
}
}
}
.shows {
@ -753,7 +803,6 @@ export default {
}
}
}
}
}
.shows {
@ -810,7 +859,6 @@ export default {
}
}
}
}
}
.shows {

@ -126,7 +126,8 @@
:props="defaultProps"
node-key="id"
icon-class="el-icon-arrow-down"
@node-click="(item) => columnClick(item, 1)">
@node-click="(item) => columnClick(item, 1)"
@current-change="(item) => columnClick(item, 1)">
<span class="custom-tree-node"
slot-scope="{ node, data }"
style="padding-left: 10px;">
@ -134,7 +135,35 @@
</span>
</el-tree>
<template v-if="articles.length">
<template v-if="articles.length && !loading">
<!-- 列表样式选的是列表详情则直接显示最新一篇文章的详情 -->
<div v-if="info.listStyleId === 73"
class="detail">
<template v-if="article.articleTemplate != 72">
<h2>{{ article.title }}</h2>
<!-- <div class="meta">{{ article.source && article.source + ' | ' }} {{ article.author && article.author + ' | ' }} {{ article.releaseTime }}</div>
<div class="meta">{{ article.edit && $t('column.edit') + ':' + article.edit }} {{ article.audit && ' | ' + $t('column.auditor') + ':' + article.audit }} {{ article.label && ' | ' + $t('column.label') + ':' + article.label }}</div> -->
</template>
<p v-if="article.summary"
class="brief">{{ article.summary }}</p>
<div class="des"
v-html="article.mainBody"></div>
<div v-if="article.fileList && article.fileList.length"
class="annex">
<h6>{{$t('column.attachmentDownload')}}</h6>
<ul class="files">
<li v-for="(file, i) in article.fileList"
:key="i">
<span class="name">{{ file.fileName }}</span>
<span class="download"
@click="download(file)">{{$t('column.download')}}</span>
</li>
</ul>
</div>
</div>
<template v-else>
<template v-if="info.listStyleId === 12">
<div class="article-wrap">
<ul class="articles">
@ -154,7 +183,7 @@
<img class="pic"
:src="item.titleImg"
alt=""
onerror="javascript:this.src='./images/1.png';" />
onerror="javascript:this.src='./images/1.png?id=1';" />
<div class="texts">
<p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
class="type">
@ -181,7 +210,7 @@
<img class="icon"
src="@/assets/images/time.png"
alt="" />
{{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
{{ item.activityStartTime }}
</div>
<div v-if="item.offlineLocation"
class="meta m-b-10">
@ -208,6 +237,7 @@
<el-pagination background
@current-change="currentChange"
:current-page="page"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total"></el-pagination>
</div>
@ -256,7 +286,7 @@
<img class="icon"
src="@/assets/images/time.png"
alt="" />
{{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
{{ item.activityStartTime }}
</div>
<div v-if="item.offlineLocation"
class="meta m-b-10">
@ -275,7 +305,7 @@
<img class="pic"
:src="item.titleImg"
alt=""
onerror="javascript:this.src='./images/1.png';" />
onerror="javascript:this.src='./images/1.png?id=1';" />
</template>
</li>
</ul>
@ -284,6 +314,7 @@
<el-pagination background
@current-change="currentChange"
:current-page="page"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total"></el-pagination>
</div>
@ -291,7 +322,7 @@
</template>
<template v-else>
<div class="article-wrap">
<ul class="articles">
<ul :class="['articles', {media: info.listStyleId === 74}]">
<li v-for="(item, i) in articles"
:key="i"
:class="{'news-notice': info.listStyleId === 55, 'org': info.listStyleId === 68}"
@ -305,16 +336,43 @@
<div class="news-title">{{ item.title }}</div>
</template>
<template v-else>
<img class="pic"
<img v-if="info.listStyleId !== 74"
class="pic"
:src="item.titleImg"
alt=""
onerror="javascript:this.src='./images/1.png';" />
onerror="javascript:this.src='./images/1.png?id=1';" />
<template v-else-if="item.fileList">
<!-- <el-image class="media-pic"
:style="{backgroundImage: 'url(https://huorantech.com/iasf/sysFiles/preview/1706961813193707521)'}"
src="https://huorantech.com/iasf/sysFiles/preview/1706961813193707521"
:preview-src-list="['https://huorantech.com/iasf/sysFiles/preview/1706961813193707521']">
</el-image> -->
<video v-if="Util.isVideo(item.fileList[0].fileName.substring(item.fileList[0].fileName.lastIndexOf('.') + 1))"
class="media-video"
controls
x5-playsinline
x5-video-player-type="h5"
:poster="isIphone ? 'https://huorantech.com/images/about/12.png' : ''"
preload>
<source :src="item.fileList[0].filePath"
type="video/mp4">
您的浏览器不支持 video 标签
</video>
<el-image v-else
class="media-pic"
:src="item.fileList[0].filePath"
:preview-src-list="[item.fileList[0].filePath]">
</el-image>
</template>
<div class="texts">
<p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
class="type">
{{ item.classificationName }}
</p>
<h6 class="titleDes">{{ item.title }}</h6>
<h6 class="titleDes"
:title="item.title">{{ item.title }}</h6>
<template v-if="item.listStyleId === 11 || item.listStyleId == 12 || item.listStyleId == 68">
<span class="meta">{{ item.releaseTime }}</span>
<div class="des"
@ -335,7 +393,7 @@
<img class="icon"
src="@/assets/images/time.png"
alt="" />
{{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
{{ item.activityStartTime }}
</div>
<div v-if="item.offlineLocation"
class="meta m-b-10">
@ -353,31 +411,34 @@
<el-button v-if="item.listStyleId === 15 || item.listStyleId == 68"
type="primary"
class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
</div>
</template>
</li>
</ul>
<div v-if="articles.length"
<div v-if="total > articles.length"
class="pagination">
<el-pagination background
@current-change="currentChange"
:current-page="page"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total"></el-pagination>
</div>
</div>
</template>
</template>
</template>
<div v-else
class="none">
<img src="@/assets/images/none.png"
alt="">
<p class="text">暂无更多信息敬请期待</p>
<p class="text">{{ $t('column.comming') }}</p>
</div>
</div>
</div>
<!-- <template v-if="info.listStyleId !== 73 && info.listStyleId !== 74"> -->
<template v-if="info.listStyleId !== 73 && info.listStyleId !== 74">
<!-- 选择了列表样式不用显示右侧部分 -->
<div class="right">
<p class="l-title">{{ $t('column.hot') }}</p>
<ul class="list">
@ -401,6 +462,9 @@
</li>
</ul>
</div>
</template>
<div v-else
class="right"></div>
</div>
</div>
</div>
@ -415,8 +479,10 @@ export default {
mixins: [mixins],
data () {
return {
Util,
loaded: false,
fromColumn: this.$route.query.column,
isIphone: false,
columnId: '',
info: {},
columnBanner: '',
@ -435,7 +501,7 @@ export default {
sameStyle: 1,
allColumnId: [],
showNav: false,
showNavIds: [10, 11, 12, 16, 55, 68], // id
showNavIds: [10, 11, 12, 16, 55, 68, 73, 74], // id
isFilter: false,
page: 1,
pageSize: 10,
@ -448,7 +514,9 @@ export default {
news: [],
hots: [],
deepestId: '',
getAllId: null
getAllId: null,
article: {},
loading: false
};
},
components: {
@ -468,6 +536,8 @@ export default {
}
},
mounted () {
const u = navigator.userAgent;
this.isIphone = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios
this.convokeTypes = [
{
id: null,
@ -483,6 +553,7 @@ export default {
}
];
this.init();
},
methods: {
init () {
@ -493,16 +564,21 @@ export default {
},
//
getInfo () {
this.loading = true
this.loaded = false
this.id &&
this.$post(`${this.api.findColumn}?id=${this.id}`)
.then(({ data }) => {
this.columnClick(data);
if (data.typeId !== 3) this.loaded = true; //
this.info = data;
this.showNav = this.showNavIds.includes(data.listStyleId);
this.handlePublication();
this.getLeftColumn();
this.getClassification();
if (data.typeId !== 3 && !data.menuVisible) {
this.loaded = true; //
}
this.info = data
this.pageSize = data.pageSize || 10
this.showNav = this.showNavIds.includes(data.listStyleId)
this.handlePublication()
this.getLeftColumn()
this.getClassification()
})
.catch((res) => { });
},
@ -592,8 +668,8 @@ export default {
},
//
getLeftColumn () {
this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`)
.then(({ data }) => {
this.getAllId = []
this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`).then(({ data }) => {
const fromColumn = this.$route.query.column; // column
const { typeId } = this.info;
this.sameStyle = 1;
@ -658,6 +734,7 @@ export default {
},
//
columnClick (to, left) {
this.page = 1
const { typeId } = to;
// /
if (left && to.level === 1 && (typeId === 2 || typeId === 3)) return false;
@ -724,7 +801,7 @@ export default {
siteId: this.site,
columnIds,
pageNum: this.page,
pageSize: this.info.pageSize || 10,
pageSize: this.pageSize,
labelName,
...this.form
})
@ -740,8 +817,13 @@ export default {
})
this.articles = articles
this.total = +data.total;
//
this.loading = false
// this.total == 1 && this.info.showWithDetails && this.$router.push(`/article?articleId=${this.articles[0].id}&id=${this.articles[0].columnId}`)
if (this.total) {
this.$post(`${this.api.findArticle}?id=${articles[0].id}`).then(async ({ data }) => {
this.article = data
}).catch(err => { })
}
})
.catch((res) => { });
},
@ -771,10 +853,14 @@ export default {
if (this.isFilter) {
this.getIds(this.columns, id);
} else if (this.columns.length) {
id = [this.$refs.leftColumn.getCurrentKey()];
id = this.getAllId.length ? this.getAllId : [this.$refs.leftColumn.getCurrentKey()];
}
this.getArticle(id);
}
},
//
download (e) {
Util.downloadFile(e.fileName, e.filePath)
},
}
};
</script>
@ -786,11 +872,12 @@ export default {
color: #fff;
img {
height: 24rem;
object-fit: cover;
}
.texts {
position: absolute;
top: 180px;
left: 213px;
top: 160px;
left: 267px;
}
.text {
@ -820,12 +907,12 @@ export default {
.article {
display: flex;
justify-content: center;
justify-content: space-between;
width: 1200px;
margin: 0 auto;
.left {
width: 66%;
margin-right: 1.4rem;
width: 83%;
}
.article-wrap {
@ -918,6 +1005,9 @@ export default {
}
/deep/.columns {
& + .detail {
padding-left: 10px;
}
width: 22%;
margin-right: 0.6rem;
overflow: auto;
@ -1071,6 +1161,43 @@ export default {
.pic {
width: 30%;
height: auto;
object-fit: cover;
}
}
.media {
display: flex;
flex-wrap: wrap;
margin-left: 10px;
li {
flex-direction: column;
width: calc(33% - 30px);
margin-right: 30px;
background-color: transparent;
&:nth-child(3n) {
margin-right: 0;
}
}
.media-video {
width: 100%;
height: 155px;
}
/deep/.media-pic {
width: 100%;
height: 155px;
img {
object-fit: cover;
}
}
.texts {
width: 100% !important;
padding-left: 0;
}
h6 {
margin-top: 10px;
margin-bottom: 0;
font-size: 1rem;
text-align: center;
-webkit-line-clamp: 1;
}
}
.news-notice {
@ -1105,8 +1232,8 @@ export default {
padding: 15px;
}
.right {
width: 14%;
min-width: 15rem;
width: 17%;
padding-left: 20px;
overflow: hidden;
}
@ -1122,7 +1249,6 @@ export default {
margin-bottom: 5px;
font-size: 0.98rem;
cursor: pointer;
@include ellipsis;
&:hover {
color: $main-color;
@ -1147,13 +1273,6 @@ export default {
}
.article {
justify-content: center;
.left {
width: 1136px;
margin-right: 36px;
}
.forms {
padding: 30px 0;
}
@ -1203,6 +1322,65 @@ export default {
background-color: $partyTheme !important;
}
}
.detail {
flex: 1;
padding: 10px 15px;
background-color: #fff;
h2 {
margin-bottom: 1rem;
font-size: 1.9rem;
color: #1c1c1c;
}
.meta {
margin: 1rem 0;
font-size: 0.88rem;
color: #9b9b9b;
}
.brief {
padding-bottom: 1.5rem;
margin-bottom: 1rem;
font-size: 1.2rem;
line-height: 1.33;
color: #606060;
border-bottom: 1px solid #d8d8d8;
}
/deep/.des {
a {
color: rgb(0, 0, 238);
word-wrap: break-word;
}
img {
max-width: 100%;
object-fit: cover;
}
}
.annex {
margin-top: 30px;
h6 {
padding-left: 8px;
margin-bottom: 20px;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 1;
color: #333;
border-left: 4px solid #1583ff;
}
li {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.name {
margin-right: 8px;
font-size: 14px;
}
.download {
color: #1583ff;
cursor: pointer;
}
}
}
.none {
display: inline-flex;
flex-direction: column;
@ -1216,6 +1394,7 @@ export default {
color: #333;
}
}
@media (max-width: 1200px) {
.banner {
height: 15rem !important;
@ -1229,7 +1408,7 @@ export default {
}
.article {
flex-direction: column;
width: 90%;
.columns {
width: 40%;
}
@ -1262,7 +1441,7 @@ export default {
}
.articles {
li {
li:not(.news-notice) {
flex-direction: column;
align-items: flex-start;
padding: 1rem;
@ -1273,11 +1452,18 @@ export default {
}
}
.readDetail {
align-items: flex-start;
.texts {
width: 100%;
padding-left: 0;
}
}
}
.media {
li {
padding: 0;
}
}
.right {
width: 95%;
@ -1320,6 +1506,19 @@ export default {
}
}
}
.media {
margin-left: 0;
li {
width: calc(50% - 20px);
margin-right: 20px;
&:nth-child(2n) {
margin-right: 0;
}
&:nth-child(3n) {
margin-right: 20px;
}
}
}
}
.forms {
.switch {

@ -3,22 +3,30 @@
<div class="articles">
<div class="top">
<div class="search">
<input ref="search" type="text" :placeholder="$t('column.titlePlaceholder')" v-model="title">
<input ref="search"
type="text"
:placeholder="$t('column.titlePlaceholder')"
v-model="title">
<i class="el-icon-search icon"></i>
</div>
<p class="result">包含 {{ title }} 的搜索结果</p>
<p class="result">{{ $i18n.locale === 'en' ? `Search results containing "${ title }"` : `包含 “${ title }” 的搜索结果` }} </p>
</div>
<ul v-if="articles.length" class="list">
<li v-for="(item, i) in articles" :key="i">
<ul v-if="articles.length"
class="list">
<li v-for="(item, i) in articles"
:key="i">
<h6 @click="toArtice(item)">{{ item.title }}</h6>
<div class="des" v-html="item.mainBody"></div>
<div class="des"
v-html="item.mainBody"></div>
<Breadcrumb :data.sync="item.routes" />
</li>
</ul>
<div v-else class="none">
<img src="@/assets/images/none.png" alt="">
<p class="text">没有找到您搜索的内容您可尝试搜索其他关键词</p>
<div v-else
class="none">
<img src="@/assets/images/none.png"
alt="">
<p class="text">{{ $t('column.nothing') }}</p>
</div>
</div>
</div>
@ -42,7 +50,15 @@ export default {
components: {
Breadcrumb
},
computed: {
...mapState('content', [
'keyword'
]),
},
watch: {
keyword () {
this.title = this.keyword
},
title () {
clearTimeout(this.searchTimer)
this.searchTimer = setTimeout(() => {
@ -59,7 +75,6 @@ export default {
]),
//
getArticle () {
this.setKeyword('')
this.$post(this.api.newlyPublishedArticles, {
siteId: this.site,
pageNum: 1,
@ -90,12 +105,11 @@ export default {
<style lang="scss" scoped>
.wrap {
background: url(../../assets/images/result-bg1.png) no-repeat,
url(../../assets/images/result-bg2.png) bottom right/auto no-repeat;
background: url(../../assets/images/result-bg1.png) no-repeat, url(../../assets/images/result-bg2.png) bottom right/auto no-repeat;
background-color: #fff;
}
.articles {
width: 100%;
width: 70%;
padding-top: 47px;
margin: 0 auto;
}
@ -121,7 +135,7 @@ export default {
color: #333;
border: 0;
outline: none;
background: #F7F7F7;
background: #f7f7f7;
}
.icon {
position: absolute;
@ -140,7 +154,7 @@ export default {
h6 {
margin-bottom: 10px;
font-size: 22px;
color: #1583FF;
color: #1583ff;
line-height: 30px;
cursor: pointer;
}
@ -163,21 +177,20 @@ export default {
color: #333;
}
}
@media (min-width: 280px) and (max-width: 750px) {
@media (max-width: 640px) {
.articles {
width: 100%;
width: 90%;
}
.top {
flex-direction: column;
.search{
width: 95%;
margin: 0 auto;
}
}
.none{
margin-top: 50px;
.text{
font-size: .5rem;
padding: 0 10px;
}
.search {
width: 100%;
margin-right: 0;
margin-bottom: 20px;
input {
width: 100%;
}
}
}

@ -36,21 +36,22 @@
align="center"
min-width="100"></el-table-column>
<el-table-column prop="phone"
label="电话"
align="center"
min-width="150"></el-table-column>
min-width="150">
<template slot="header"
slot-scope="scope">
<img src="@/assets/images/tel1.png"
alt=""> 电话
</template>
</el-table-column>
<el-table-column prop="email"
label="邮箱"
align="center"
min-width="150">
<template slot-scope="scope">
<div class="flex j-center a-center">
<img class="m-r-5"
src="@/assets/images/mall1.png"
alt="">
{{ scope.row.email }}
</div>
<template slot="header"
slot-scope="scope">
<img style="width: 20px"
src="@/assets/images/email-white.png"
alt=""> 邮箱
</template>
</el-table-column>
</el-table>
@ -85,10 +86,7 @@ export default {
//
getInfo () {
// /
this.$post(
`${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
)
.then(({ data }) => {
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
// state1theEditedJson稿0jsonBeforeEditing
const json = JSON.parse(
@ -156,8 +154,8 @@ export default {
}
.block {
padding: 2rem 0;
background: url(http://10.10.11.7/images/contactUs/3.png) 0 130px no-repeat,
url(http://10.10.11.7/images/contactUs/4.png) bottom right no-repeat;
background: url(https://huorantech.com/images/contactUs/3.png) 0 130px no-repeat,
url(https://huorantech.com/images/contactUs/4.png) bottom right no-repeat;
background-color: #f7f8fa;
}
.inner {

@ -28,6 +28,7 @@
<script>
import mixins from "@/mixins/page";
import WOW from "wow.js";
import Util from '@/libs/util'
export default {
mixins: [mixins],
data () {
@ -42,10 +43,7 @@ export default {
//
getInfo () {
// /
this.$post(
`${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
)
.then(({ data }) => {
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
// state1theEditedJson稿0jsonBeforeEditing
const json = JSON.parse(
@ -90,12 +88,62 @@ export default {
max-width: 1200px;
margin: 30px 0;
overflow: auto;
/deep/ img {
width: 100% !important;
height: auto;
}
}
@media (max-width: 1000px) {
.history {
}
@media (max-width: 1200px) {
.tab-content {
width: 90%;
span {
font-size: 1.35rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
width: 90%;
h2 {
font-size: 1.5rem;
}
p {
font-size: 1rem;
margin: 10px 0 1.25rem;
}
.event {
flex-direction: column;
.time {
width: 100%;
li {
width: 100%;
justify-content: flex-start;
}
}
.right {
margin-top: 1.25rem;
width: 100%;
h6 {
font-size: 2rem;
}
.list {
li {
padding: 1.25rem;
flex-direction: column;
align-items: flex-start;
.texts {
width: 100%;
}
.pic {
width: 100%;
height: auto;
}
}
}
}
}
}
}
}

@ -17,6 +17,7 @@
</el-carousel>
<div class="block share">
<div class="inner">
<h6 v-html="modules[1].form.title"></h6>
<p class="en"
v-html="modules[1].form.des"></p>
@ -31,9 +32,10 @@
alt="">
</div>
</div>
</div>
<div class="intro">
<div class="intro-inner">
<div class="inner intro-inner">
<img class="pic"
:src="modules[3].form.pic"
alt="">
@ -43,7 +45,8 @@
</div>
<div class="unit">
<h6>{{ modules[4].form.title }}</h6>
<div class="title"
v-html="modules[4].form.title"></div>
<img class="pic"
:src="modules[4].form.pic"
alt="">
@ -54,6 +57,7 @@
<script>
import mixins from '@/mixins/page'
import WOW from 'wow.js'
import Util from '@/libs/util'
export default {
mixins: [mixins],
data () {
@ -88,15 +92,16 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
$banner-height: 21.6rem;
.wrap {
background: url(http://10.10.11.7/images/device/4.png) bottom right/auto no-repeat;
background: url(https://huorantech.com/images/device/4.png) bottom right/auto no-repeat;
/deep/ .el-carousel {
height: 12.6rem;
height: $banner-height;
.el-carousel__container {
height: 12.6rem;
height: $banner-height;
}
img {
height: 12.6rem;
height: $banner-height;
}
}
}
@ -144,8 +149,6 @@ export default {
}
.share {
position: relative;
width: 80%;
padding-left: 14%;
.beamBox {
align-items: center;
}
@ -190,15 +193,13 @@ export default {
}
}
.intro {
width: 80%;
height: 19.65rem;
padding-left: 14%;
margin-bottom: 67px;
background-color: #2e4984;
.intro-inner {
display: flex;
align-items: center;
height: 100%;
background-color: #2e4984;
}
.pic {
width: 50%;
@ -218,7 +219,7 @@ export default {
width: 986px;
padding-bottom: 60px;
margin: 0 auto;
h6 {
.title {
padding-left: 0.93rem;
margin-bottom: 0.93rem;
font-size: 0.88rem;

@ -22,11 +22,9 @@
<p class="en">{{ modules[1].form.subTitle }}</p>
<div class="card"
v-html="modules[1].form.des"></div>
<div class="flex textBox">
<div class="left">
<div class="texts">
<div class="des"
v-html="modules[2].form.des"></div>
</div>
<img class="pic"
:src="modules[2].form.pic"
alt="">
@ -34,9 +32,9 @@
</div>
</div>
<div class="intro">
<div class="inner intro">
<img class="bg"
src="http://10.10.11.7/images/device/7.png"
src="https://huorantech.com/images/device/7.png"
alt="">
<img class="pic"
:src="modules[3].form.pic"
@ -44,7 +42,8 @@
</div>
<div class="unit">
<h6>{{ modules[4].form.title }}</h6>
<div class="title"
v-html="modules[4].form.title"></div>
<img class="pic"
:src="modules[4].form.pic"
alt="">
@ -55,6 +54,7 @@
<script>
import mixins from '@/mixins/page'
import WOW from 'wow.js'
import Util from '@/libs/util'
export default {
mixins: [mixins],
data () {
@ -89,15 +89,16 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
$banner-height: 21.6rem;
.wrap {
background: url(http://10.10.11.7/images/device/4.png) bottom right/auto no-repeat;
background: url(https://huorantech.com/images/device/4.png) bottom right/auto no-repeat;
/deep/ .el-carousel {
height: 12.6rem;
height: $banner-height;
.el-carousel__container {
height: 12.6rem;
height: $banner-height;
}
img {
height: 12.6rem;
height: $banner-height;
}
}
}
@ -122,31 +123,14 @@ export default {
}
.share {
position: relative;
.inner {
width: 100%;
max-width: 1323px;
.textBox {
position: absolute;
width: 85%;
right: 0;
top: 26rem;
.left {
flex-grow: 1;
}
}
h6 {
font-weight: bold;
}
}
.left {
width: 34.187rem;
margin-right: 4.125rem;
.texts {
display: flex;
}
h6 {
position: relative;
font-size: 1.76rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
font-weight: bold;
color: #333333;
}
.en {
@ -157,25 +141,23 @@ export default {
color: #e3e3e3;
}
.card {
position: absolute;
left: 0;
max-width: 1671px;
width: 85%;
padding: 1.6rem 2.9rem 1.6rem 14%;
font-size: 1.06rem;
padding: 1.5rem;
margin-bottom: 20px;
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
border-radius: 0 6rem 0 0;
font-weight: 500;
color: #ffffff;
line-height: 2.375rem;
background: url(http://10.10.11.7/images/device/5.png) 0 0 /100% 100% no-repeat;
background: url(https://huorantech.com/images/device/5.png) center center no-repeat;
}
.des {
margin-top: 25px;
font-size: 0.98rem;
flex-grow: 1;
margin: 25px 4rem 0 0;
font-size: 1rem;
-webkit-line-clamp: inherit;
color: #333;
line-height: 37px;
line-height: 2;
overflow: visible;
}
.pic {
@ -186,15 +168,8 @@ export default {
}
.intro {
position: relative;
height: 42.625rem;
margin-bottom: 2.3rem;
margin-top: 50rem;
width: 85%;
margin: 60px auto;
.bg {
position: absolute;
top: 0;
left: 0;
width: 65%;
height: 35.73rem;
}
.pic {
@ -209,7 +184,7 @@ export default {
width: 986px;
padding-bottom: 60px;
margin: 0 auto;
h6 {
.title {
padding-left: 0.93rem;
margin-bottom: 0.93rem;
font-size: 0.88rem;
@ -219,6 +194,7 @@ export default {
border-left: 4px solid #1583ff;
}
}
@media (max-width: 1400px) {
.share {
.card {
@ -228,20 +204,18 @@ export default {
.inner {
max-width: none;
width: 95%;
.textBox {
.texts {
position: static;
display: flex;
flex-direction: column;
align-items: flex-end;
margin-left: 15%;
.left {
width: 100%;
.des {
width: 100%;
-webkit-line-clamp: 100;
}
}
}
}
.pic {
width: 50%;
margin-top: 20px;
@ -277,11 +251,11 @@ export default {
@media (max-width: 640px) {
.share {
.inner {
.textBox {
.texts {
margin: 0 auto;
}
}
.left {
.des {
margin-right: 0;
}
}

@ -31,7 +31,7 @@
v-html="modules[2].form.des"></div>
</div>
<img class="bg"
src="http://10.10.11.7/images/device/10.png"
src="https://huorantech.com/images/device/10.png"
alt="" />
</div>
</div>
@ -40,12 +40,14 @@
<div class="block intro">
<div class="inner">
<div class="left">
<h5>{{ modules[3].form.title }}</h5>
<div class="title1"
v-html="modules[3].form.title"></div>
<img :src="modules[3].form.pic"
alt="" />
</div>
<div class="right">
<h6>{{ modules[4].form.title }}</h6>
<div class="title2"
v-html="modules[4].form.title"></div>
<img :src="modules[4].form.pic"
alt="" />
</div>
@ -57,6 +59,7 @@
<script>
import mixins from '@/mixins/page';
import WOW from 'wow.js';
import Util from '@/libs/util'
export default {
mixins: [mixins],
data () {
@ -89,14 +92,15 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
$banner-height: 21.6rem;
.wrap {
/deep/ .el-carousel {
height: 12.6rem;
height: $banner-height;
.el-carousel__container {
height: 12.6rem;
height: $banner-height;
}
img {
height: 12.6rem;
height: $banner-height;
}
}
}
@ -218,7 +222,7 @@ export default {
width: 68%;
margin-left: 2%;
}
h5 {
.title1 {
margin-bottom: 0.93rem;
font-size: 0.88rem;
font-family: PingFangSC-Medium, PingFang SC;
@ -226,7 +230,7 @@ export default {
color: #2a2a2a;
}
h6 {
.title2 {
padding-left: 0.93rem;
margin-bottom: 0.93rem;
font-size: 0.88rem;
@ -238,7 +242,7 @@ export default {
img {
width: 100%;
height: 85%;
object-fit: cover;
}
}
@ -267,7 +271,7 @@ export default {
.bg {
width: 100%;
height: 200px;
margin: -50px 0px 0 0;
margin: 0;
}
}
}
@ -275,8 +279,9 @@ export default {
}
@media (max-width: 1200px) {
body {
width: 100% !important;
.banner {
height: 12rem;
padding: 6rem 0 0 2rem;
}
.history {
@ -313,46 +318,4 @@ export default {
}
}
}
@media (max-width: 320px) {
.banner {
height: 12rem;
padding: 6rem 0 0 2rem;
}
}
@media (min-width: 320px) and (max-width: 375px) {
.banner {
height: 12rem;
padding: 6rem 0 0 2rem;
}
}
@media (min-width: 375px) and (max-width: 480px) {
.banner {
height: 12rem;
padding: 6rem 0 0 2rem;
}
}
@media (min-width: 480px) and (max-width: 640px) {
.banner {
height: 12rem;
padding: 6rem 0 0 2rem;
}
}
@media (min-width: 640px) and (max-width: 768px) {
.banner {
height: 12rem;
padding: 6rem 0 0 2rem;
}
}
@media (min-width: 768px) and (max-width: 980px) {
.banner {
height: 12rem;
padding: 6rem 0 0 2rem;
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.banner {
height: 12rem;
padding: 6rem 0 0 2rem;
}
}
</style>

@ -1,10 +1,15 @@
<template>
<div class="wrap">
<el-carousel :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'">
<el-carousel :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">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
<img :src="item.pic" alt="">
<el-carousel-item v-if="item.pic && item.isEnable"
:key="i">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
@click="openLink(item)">
<img :src="item.pic"
alt="">
<p class="banner-name">{{ item.title }}</p>
</div>
</el-carousel-item>
@ -14,27 +19,51 @@
<div class="block gray">
<div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.8s">{{ modules[1].form.des }}</p>
<img class="block-pic br wow fadeInLeft" data-wow-delay="0.8s" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" width="100%" height="536" :src="modules[1].form.pic" alt="" @click="openLink(modules[1].form)">
<p class="intro wow fadeInUp"
data-wow-delay="0.8s">{{ modules[1].form.des }}</p>
<img class="block-pic br wow fadeInLeft"
data-wow-delay="0.8s"
:class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
width="100%"
height="536"
:src="modules[1].form.pic"
alt=""
@click="openLink(modules[1].form)">
</div>
</div>
<div class="block">
<div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.8s">{{ modules[2].form.des }}</p>
<img class="block-pic wow fadeInRight" data-wow-delay="0.8s" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" width="100%" height="536" :src="modules[2].form.pic" alt="" @click="openLink(modules[2].form)">
<p class="intro wow fadeInUp"
data-wow-delay="0.8s">{{ modules[2].form.des }}</p>
<img class="block-pic wow fadeInRight"
data-wow-delay="0.8s"
:class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
width="100%"
height="536"
:src="modules[2].form.pic"
alt=""
@click="openLink(modules[2].form)">
</div>
</div>
<div class="block gray">
<div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[3].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
<ul class="list">
<template v-for="(item, i) in modules[4].list">
<li v-if="item.isEnable" :key="i" class="wow fadeInUp" data-wow-delay="0.5s">
<img class="pic" :src="item.pic" alt="" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
<li v-if="item.isEnable"
:key="i"
class="wow fadeInUp"
data-wow-delay="0.5s">
<img class="pic"
:src="item.pic"
alt=""
:class="{'cursor-pointer': isLink(item.link.linkName)}"
@click="openLink(item)">
<div class="texts">
<h6>{{ item.title }}</h6>
<p class="sub">{{ item.subTitle }}</p>
@ -84,7 +113,7 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
@import '../../styles/page/page.scss';
.wrap {
/deep/ .el-carousel {
@ -113,11 +142,10 @@ export default {
.intro {
margin-bottom: 2.25rem;
}
}
}
.block-pic {
transition: .3s;
transition: 0.3s;
height: auto;
&.br {
border-radius: 270px;
@ -149,28 +177,29 @@ export default {
padding: 2.7rem 1.35rem;
background-color: #fff;
overflow: hidden;
transition: .3s;
transition: 0.3s;
&:hover {
transform: scale(1.05);
}
}
h6 {
font-size: 1.8rem;
color: #3C3C3C;
color: #3c3c3c;
}
.sub {
margin-top: 1.48rem;
font-size: 1.08rem;
color: #1C1C1C;
color: #1c1c1c;
line-height: 33px;
}
.des {
margin-top: 1.2rem;
font-size: 1rem;
color: #3C3C3C;
color: #3c3c3c;
line-height: 32px;
}
}
@media (max-width: 1520px) {
.list {
.pic {
@ -199,12 +228,13 @@ export default {
font-size: 1.5rem;
bottom: 5.25rem;
left: 14.125rem;
line-height: 2rem
line-height: 2rem;
}
.block {
padding: 50px 0;
.inner {
width: 95%;margin: 0 auto;
width: 95%;
margin: 0 auto;
.b-title {
margin-bottom: 30px;
}
@ -219,7 +249,8 @@ export default {
li {
margin-top: 20px;
.pic {
width: 100%;height: 25rem;
width: 100%;
height: 25rem;
}
.texts {
padding: 10px;
@ -278,15 +309,14 @@ export default {
font-size: 1rem;
}
.sub {
font-size: .85rem;
line-height: .85rem;
margin-top: .5rem;
font-size: 0.85rem;
line-height: 0.85rem;
margin-top: 0.5rem;
}
.des {
font-size: .85rem;
line-height: .85rem;
margin-top: .5rem;
font-size: 0.85rem;
line-height: 0.85rem;
margin-top: 0.5rem;
}
}
}
@ -342,13 +372,12 @@ export default {
.sub {
font-size: 1.05rem;
line-height: 1.05rem;
margin-top: .5rem;
margin-top: 0.5rem;
}
.des {
font-size: 1.05rem;
line-height: 1.05rem;
margin-top: .5rem;
margin-top: 0.5rem;
}
}
}
@ -404,13 +433,12 @@ export default {
.sub {
font-size: 1.25rem;
line-height: 1.25rem;
margin-top: .5rem;
margin-top: 0.5rem;
}
.des {
font-size: 1.25rem;
line-height: 1.25rem;
margin-top: .5rem;
margin-top: 0.5rem;
}
}
}
@ -467,13 +495,12 @@ export default {
.sub {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: .5rem;
margin-top: 0.5rem;
}
.des {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: .5rem;
margin-top: 0.5rem;
}
}
}
@ -532,13 +559,12 @@ export default {
.sub {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: .5rem;
margin-top: 0.5rem;
}
.des {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: .5rem;
margin-top: 0.5rem;
}
}
}
@ -597,13 +623,12 @@ export default {
.sub {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: .5rem;
margin-top: 0.5rem;
}
.des {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: .5rem;
margin-top: 0.5rem;
}
}
}
@ -662,13 +687,12 @@ export default {
.sub {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: .5rem;
margin-top: 0.5rem;
}
.des {
font-size: 1.55rem;
line-height: 1.55rem;
margin-top: .5rem;
margin-top: 0.5rem;
}
}
}

@ -45,10 +45,11 @@
<p class="date">{{ e.title }}</p>
<p class="text">{{ e.des }}</p>
</div>
<img v-if="e.pic"
<el-image v-if="e.pic"
class="pic"
:src="e.pic"
alt=""
class="pic">
:preview-src-list="[e.pic]">
</el-image>
</li>
</template>
</ul>
@ -86,8 +87,8 @@ export default {
@import url(../../../plugins/wow/animate.css);
@import '../../../styles/page/page.scss';
.wrap {
background: url(http://10.10.11.7/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
background: url(https://huorantech.com/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
url(https://huorantech.com/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
}
.history {
@ -135,7 +136,7 @@ export default {
content: '';
width: 18px;
height: 18px;
background: url(http://10.10.11.7/images/overviewDevHistory/3.png) no-repeat;
background: url(https://huorantech.com/images/overviewDevHistory/3.png) no-repeat;
margin-right: 20px;
}
}
@ -190,6 +191,7 @@ export default {
}
}
}
@media (max-width: 1200px) {
.tab-content {
padding: 20px 0;

@ -1,6 +1,7 @@
<template>
<div class="wrap">
<el-carousel :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">
@ -216,7 +217,7 @@
</div>
</div>
<div class="tools">
<!-- <div class="tools">
<div class="logo">
<img src="@/assets/images/logo.png"
alt="">
@ -227,7 +228,7 @@
class="column"
@click="toAnchor(item)">{{ item.name }}</li>
</ul>
</div>
</div> -->
</div>
</template>
@ -265,7 +266,7 @@ export default {
console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", json)
//
if (json[2].form.column.length) {
if (json[2].form.column && json[2].form.column.length) {
const { column, articleNum } = json[2].form
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles = Util.removeTag(data.slice(0, articleNum || 7))
@ -273,13 +274,13 @@ export default {
this.carouselInterval()
}).catch(err => { })
}
if (json[6].form.column.length) {
if (json[6].form.column && json[6].form.column.length) {
const { column, articleNum } = json[6].form
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles2 = Util.removeTag(data.slice(0, articleNum || 4))
}).catch(err => { })
}
if (json[8].form.column.length) {
if (json[8].form.column && json[8].form.column.length) {
const { column, articleNum } = json[8].form
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles3 = Util.removeTag(data.slice(0, articleNum || 4))
@ -332,11 +333,12 @@ export default {
@import url(../../../plugins/wow/animate.css);
@import '../../../styles/page/page.scss';
/deep/ .el-carousel {
height: 991px;
height: 100vh;
.el-carousel__container,
.el-carousel__item,
img {
height: 100%;
height: 100vh;
object-fit: cover;
}
}
.title {
@ -382,6 +384,7 @@ export default {
cursor: pointer;
.pic {
transition: 0.5s;
object-fit: cover;
&:hover {
transform: scale(1.3);
}
@ -457,6 +460,7 @@ export default {
.pic {
width: 100%;
// height: 259px;
object-fit: cover;
}
.texts {
padding: 40px 30px;
@ -500,6 +504,7 @@ export default {
.pic {
width: 50%;
min-height: 465px;
object-fit: cover;
}
}
}
@ -531,6 +536,7 @@ export default {
}
.pic {
transition: 0.5s;
object-fit: cover;
}
&:hover {
.pic {
@ -559,6 +565,7 @@ export default {
width: 167px;
height: 167px;
margin-right: 36px;
object-fit: cover;
}
.texts {
width: calc(100% - 210px);
@ -625,6 +632,7 @@ export default {
width: 100%;
height: 100%;
transition: 0.5s;
object-fit: cover;
}
&:hover {
.pic {
@ -698,8 +706,7 @@ export default {
}
}
}
@media (max-width: 1520px) {
}
@media (max-width: 1200px) {
.sfel-banner {
flex-direction: column;
@ -813,9 +820,4 @@ export default {
}
}
}
@media (max-width: 980px) {
/deep/ .el-carousel {
height: 600px;
}
}
</style>

@ -30,7 +30,8 @@
</div>
<div class="texts">
<h6>{{ modules[1].form.title }}</h6>
<div class="des">{{ modules[1].form.des }}</div>
<div class="des"
v-html="modules[1].form.des"></div>
</div>
</div>
<div class="item wow bounceInRight"
@ -44,7 +45,8 @@
</div>
<div class="texts">
<h6>{{ modules[2].form.title }}</h6>
<div class="des">{{ modules[2].form.des }}</div>
<div class="des"
v-html="modules[2].form.des"></div>
</div>
</div>
<div class="item wow bounceInLeft"
@ -58,7 +60,8 @@
</div>
<div class="texts">
<h6>{{ modules[3].form.title }}</h6>
<div class="des">{{ modules[3].form.des }}</div>
<div class="des"
v-html="modules[3].form.des"></div>
</div>
</div>
</div>
@ -69,6 +72,7 @@
import mixins from '@/mixins/page'
import overview from '@/mixins/estate'
import WOW from 'wow.js'
import Util from '@/libs/util'
export default {
mixins: [mixins, overview],
data () {
@ -98,7 +102,7 @@ export default {
padding: 42px;
margin-bottom: 36px;
color: #333;
background: #f5f5f5 url(http://10.10.11.7/images/overviewSetup/1.png) right bottom/auto no-repeat;
background: #f5f5f5 url(https://huorantech.com/images/overviewSetup/1.png) right bottom/auto no-repeat;
transition: 0.5s;
&:nth-child(even) {
justify-content: space-between;

@ -22,15 +22,16 @@
<div class="org">
<div class="left">
<h6>{{ modules[1].form.title }}</h6>
<p class="text"
v-html="modules[1].form.des"></p>
<div class="text"
v-html="modules[1].form.des"></div>
</div>
<img class="pic"
src="http://10.10.11.7/images/overviewSetup/1.png"
src="https://huorantech.com/images/overviewSetup/1.png"
alt="">
</div>
<div class="lg-bg">
<img :src="modules[2].form.pic"
<img width="100%"
:src="modules[2].form.pic"
alt="">
</div>
</div>
@ -41,6 +42,7 @@
import mixins from '@/mixins/page'
import overview from '@/mixins/estate'
import WOW from 'wow.js'
import Util from '@/libs/util'
export default {
mixins: [mixins, overview],
data () {
@ -93,9 +95,12 @@ export default {
}
}
.lg-bg {
max-width: 85%;
width: 1200px;
margin: 0 auto;
text-align: center;
img {
object-fit: cover;
}
}
@media (max-width: 1200px) {
.tab-content {
@ -108,10 +113,12 @@ export default {
width: 100%;
}
img {
width: 100%;
height: auto;
display: none;
}
}
}
.lg-bg {
width: 90%;
}
}
</style>

@ -23,15 +23,15 @@
<h6>
{{ modules[1].form.title }}
<img class="title-bg"
src="http://10.10.11.7/images/overviewIntro/2.png"
src="https://huorantech.com/images/overviewIntro/2.png"
alt="">
</h6>
<p class="text"
v-html="modules[1].form.des"></p>
<div class="text"
v-html="modules[1].form.des"></div>
</div>
<div class="lg-bg">
<img width="100%"
src="http://10.10.11.7/images/estate/3.png"
src="https://huorantech.com/images/estate/3.png"
alt="">
</div>
</div>
@ -42,6 +42,7 @@
import mixins from '@/mixins/page'
import overview from '@/mixins/estate'
import WOW from 'wow.js'
import Util from '@/libs/util'
export default {
mixins: [mixins, overview],
data () {
@ -69,7 +70,7 @@ export default {
min-height: 500px;
padding: 80px 86px 29px 597px;
margin: 0 auto 200px;
background: url(http://10.10.11.7/images/estate/2.png) 0 0/100% 100% no-repeat;
background: url(https://huorantech.com/images/estate/2.png) 0 0/100% 100% no-repeat;
border-radius: 160px;
h6 {
position: relative;
@ -89,6 +90,7 @@ export default {
font-size: 1rem;
color: #020202;
line-height: 2rem;
// @include mul-ellipsis(10);
}
}
.lg-bg {

@ -123,14 +123,16 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
$banner-height: 21.6rem;
.wrap {
padding-bottom: 70px;
/deep/ .el-carousel {
height: 12.6rem;
height: $banner-height;
.el-carousel__container {
height: 12.6rem;
height: $banner-height;
}
img {
height: 12.6rem;
height: $banner-height;
}
}
}

@ -9,7 +9,8 @@
</div>
</div>
<div class="block history gray">
<div class="block history gray"
style="padding-bottom: 70px">
<div class="inner">
<div class="texts wow fadeInDown"
data-wow-delay="0.5s">
@ -38,7 +39,8 @@
</ul>
</div>
<div class="block committee gray">
<div class="block committee gray"
style="padding-top: 80px">
<div v-if="modules[2].list[curYear].list[0]"
class="inner">
<div class="left">
@ -57,6 +59,7 @@
<script>
import mixins from "@/mixins/page";
import WOW from "wow.js";
import Util from '@/libs/util'
export default {
mixins: [mixins],
data () {
@ -71,10 +74,7 @@ export default {
//
getInfo () {
// /
this.$post(
`${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
)
.then(({ data }) => {
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
// state1theEditedJson稿0jsonBeforeEditing
const json = JSON.parse(
@ -140,10 +140,11 @@ export default {
}
.bg {
margin: -122px 0 0 0;
object-fit: cover;
}
}
.cards {
padding: 60px 0;
padding-top: 50px;
ul {
display: flex;
justify-content: center;
@ -159,25 +160,25 @@ export default {
color: #333;
text-align: center;
@include ellipsis();
background: url(http://10.10.11.7/images/governance/3.png) 0 0 / cover no-repeat;
background: url(https://huorantech.com/images/governance/3.png) 0 0 / cover no-repeat;
cursor: pointer;
&:nth-child(2) {
background-image: url(http://10.10.11.7/images/governance/4.png);
background-image: url(https://huorantech.com/images/governance/4.png);
}
&:nth-child(3) {
background-image: url(http://10.10.11.7/images/governance/5.png);
background-image: url(https://huorantech.com/images/governance/5.png);
}
&:nth-child(4) {
background-image: url(http://10.10.11.7/images/governance/4.png);
background-image: url(https://huorantech.com/images/governance/4.png);
}
&:nth-child(5) {
background-image: url(http://10.10.11.7/images/governance/7.png);
background-image: url(https://huorantech.com/images/governance/7.png);
}
&:nth-child(6) {
background-image: url(http://10.10.11.7/images/governance/6.png);
background-image: url(https://huorantech.com/images/governance/6.png);
}
&:nth-child(8) {
background-image: url(http://10.10.11.7/images/governance/6.png);
background-image: url(https://huorantech.com/images/governance/6.png);
}
&:nth-child(3n) {
margin-right: 0;
@ -213,8 +214,10 @@ export default {
.pic {
width: 48%;
height: 300px;
object-fit: cover;
}
}
@media (max-width: 1200px) {
.history {
.texts {

@ -13,6 +13,10 @@
:src="item.pic"
alt=""
@click="openLink(item)">
<!-- <div class="texts">
<h6>{{ item.title }}</h6>
<p class="text">{{ item.des }}</p>
</div> -->
</el-carousel-item>
</template>
</el-carousel>
@ -31,7 +35,8 @@
<div class="texts">
<h6>{{ modules[2].form.title }}</h6>
<p class="des">{{ modules[2].form.des }}</p>
<img src="@/assets/images/arrow.png"
<img v-if="modules[2].form.link"
src="@/assets/images/arrow.png"
alt=""
:class="{'arrow': isLink(modules[2].form.link.linkName)}"
@click="openLink(modules[2].form)">
@ -114,10 +119,10 @@
</div>
<div class="about"
:class="{'cursor-pointer': isLink(modules[8].form.link.linkName)}"
:class="{'cursor-pointer': modules[8].form.link && isLink(modules[8].form.link.linkName)}"
@click="openLink(modules[8].form)">
<div class="inner">
<img class="wow fadeInUp"
<img class="pic wow fadeInUp"
src="@/assets/images/about.png"
alt="">
<div class="line wow fadeInUp"
@ -135,8 +140,7 @@
<div class="inner">
<h2 class="glance wow fadeInUp">{{ modules[9].form.title }}</h2>
<ul class="stat">
<li class="wow fadeInRight"
data-wow-delay="0.2s">
<li>
<!-- <p class="num">{{ modules[10].form.title }}</p> -->
<animate-number class="num"
ref="num1"
@ -145,8 +149,7 @@
duration="3000" />
<p class="text">{{ modules[10].form.des }}</p>
</li>
<li class="wow fadeInRight"
data-wow-delay="0.4s">
<li>
<animate-number class="num"
ref="num2"
from="0"
@ -154,8 +157,7 @@
duration="3000" />
<p class="text">{{ modules[11].form.des }}</p>
</li>
<li class="wow fadeInRight"
data-wow-delay="0.6s">
<li>
<animate-number class="num"
ref="num3"
from="0"
@ -165,11 +167,7 @@
</li>
<li class="wow fadeInRight"
data-wow-delay="0.9s">
<animate-number class="num"
ref="num4"
from="0"
:to="modules[13].form.title"
duration="3500" />
<p class="num">{{ modules[13].form.title }}</p>
<p class="text">{{ modules[13].form.des }}</p>
</li>
<li class="wow fadeInRight"
@ -219,7 +217,6 @@ export default {
data :
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
console.log('JSON=>', json)
this.modules = json
console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules)
@ -254,10 +251,33 @@ export default {
height: 100vh;
img {
height: 100%;
object-fit: cover;
}
/deep/.el-carousel__container {
height: 100vh;
}
.texts {
position: absolute;
bottom: 20%;
left: 120px;
display: flex;
flex-direction: column;
align-items: flex-start;
h6,
.text {
padding: 20px 15px;
color: #fff;
}
h6 {
margin-bottom: 30px;
font-size: 68px;
font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
}
.text {
font-size: 24px;
font-family: AppleSystemUIFont;
}
}
}
.block {
padding-top: 3.15rem;
@ -282,6 +302,7 @@ export default {
.pic {
width: 100%;
height: auto;
object-fit: cover;
}
.texts {
padding-left: 1.375rem;
@ -315,7 +336,7 @@ export default {
flex-wrap: wrap;
li {
display: inline-flex;
width: calc((100% - 28px) / 2);
width: calc((100% - 35px) / 2);
padding: 2.125rem;
margin-bottom: 1.75rem;
background-color: #fff;
@ -332,6 +353,7 @@ export default {
img {
width: 12.5rem;
height: 7.81rem;
object-fit: cover;
}
.texts {
width: calc(100% - 220px);
@ -380,6 +402,7 @@ export default {
width: 47%;
height: auto;
transition: 0.3s;
object-fit: cover;
}
.texts {
width: 48%;
@ -435,7 +458,10 @@ export default {
.about {
padding: 3.848rem 0 9.9rem;
background: url(../../assets/images/about-bg.png) no-repeat center center;
background-size: 100% 100%;
// background-size: 100% 100%;
.pic {
object-fit: cover;
}
.line {
display: flex;
align-items: center;
@ -590,80 +616,6 @@ export default {
}
}
@media (max-width: 320px) {
.wrap {
/deep/ .el-carousel {
height: 15rem;
}
/deep/ .el-carousel__container {
height: 15rem;
}
/deep/ .el-carousel__item {
height: 15rem;
img {
height: 15rem;
}
}
}
.block {
padding: 1rem 0;
.inner {
.b-title {
font-size: 1.3rem;
}
.intro {
margin-bottom: 1rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
li {
.pic {
height: auto;
}
.texts {
margin-top: 1.2rem;
h6 {
font-size: 1.2rem;
margin-bottom: 1rem;
}
img {
width: 3.77rem;
height: 3.77rem;
}
}
}
}
.news {
li {
padding: 1.2rem;
img {
width: 8rem;
}
}
}
.people {
li {
.pic {
height: auto;
}
.texts {
h6 {
font-size: 1.5rem;
}
}
}
}
}
}
.about {
.inner {
.des {
line-height: 1.2rem;
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
/deep/ .el-carousel {

@ -1,7 +1,8 @@
<template>
<div class="wrap">
<el-carousel class="carousel"
:style="{height}"
<!-- :interval="6000" -->
<el-carousel :class="['carousel']"
id="part1"
: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'">
@ -20,17 +21,15 @@
</el-carousel-item>
</template>
</el-carousel>
<div class="block"
style="padding-top: 80px">
<div :class="['block-wrap',{active: hide}]"
id="part2">
<div class="block card-block">
<div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
<p class="intro wow fadeInUp"
<h2 class="b-title">{{ modules[1].form.title }}</h2>
<p class="intro"
data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
<ul class="card">
<li class="wow fadeInDown"
data-wow-delay="0.2s"
:class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
<li :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
@click="openLink(modules[2].form)">
<img class="pic"
:src="modules[2].form.pic"
@ -42,9 +41,7 @@
<p class="des">{{ modules[2].form.des }}</p>
</div>
</li>
<li class="wow fadeInDown"
data-wow-delay="0.6s"
:class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
<li :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
@click="openLink(modules[3].form)">
<img class="pic"
:src="modules[3].form.pic"
@ -63,7 +60,8 @@
<div class="block news-wrap">
<div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
<p class="intro wow fadeInUp"
<p v-if="modules[4].form.des"
class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
<div class="all-link"
@click="toAll(modules[5].form)">
@ -117,7 +115,7 @@
<ul class="news-carousel">
<li v-if="articles1.length">
<img class="pic"
src="http://10.10.11.7/images/iasf/8.png"
src="https://huorantech.com/images/iasf/8.png"
alt="">
<div class="texts">
<h6 @click="toAll(modules[6].form)">{{ getColumnTitle(modules[6].form) }} <i class="el-icon-arrow-right"></i></h6>
@ -143,7 +141,7 @@
</li>
<li v-if="articles2.length">
<img class="pic"
src="http://10.10.11.7/images/iasf/9.png"
src="https://huorantech.com/images/iasf/9.png"
alt="">
<div class="texts">
<h6 @click="toAll(modules[7].form)">{{ getColumnTitle(modules[7].form) }} <i class="el-icon-arrow-right"></i></h6>
@ -169,7 +167,7 @@
</li>
<li v-if="articles3.length">
<img class="pic"
src="http://10.10.11.7/images/iasf/10.png"
src="https://huorantech.com/images/iasf/10.png"
alt="">
<div class="texts">
<h6 @click="toAll(modules[8].form)">{{ getColumnTitle(modules[8].form) }} <i class="el-icon-arrow-right"></i></h6>
@ -219,8 +217,8 @@
alt="">
<div class="texts">
<h6>{{ item.title }}</h6>
<p class="job">岗位{{ item.post }}</p>
<p class="hobby">爱好{{ item.hobby }}</p>
<p class="job">{{ item.post }}</p>
<p class="hobby">{{ item.hobby }}</p>
<div class="text"
v-html="item.mainBody"></div>
</div>
@ -237,12 +235,11 @@
<div class="block talent-block">
<div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[11].form.title }}</h2>
<p class="intro wow fadeInUp"
<h2 class="b-title">{{ modules[11].form.title }}</h2>
<p class="intro"
data-wow-delay="0.5s">{{ modules[11].form.des }}</p>
<div class="talent">
<div class="left wow fadeInLeft"
data-wow-delay="0.5s">
<div class="left">
<h6>{{ modules[12].form.title }}</h6>
<p class="sub-title">{{ modules[12].form.subTitle }}</p>
<div class="text"
@ -255,8 +252,7 @@
</div>
<img :src="modules[12].form.pic"
alt=""
class="pic wow fadeInRight"
data-wow-delay="0.5s">
class="pic">
</div>
</div>
</div>
@ -280,6 +276,50 @@
</div>
</div>
<div class="block"
style="margin-top: 100px">
<div class="inner">
<ul class="entry">
<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>
<li :class="{'cursor-pointer': isLink(modules[18].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>
</div>
</div>
<ul class="tools">
<template v-for="(item, i) in modules[19].list">
<li v-if="item.isEnable"
@ -295,6 +335,7 @@ import mixins from '@/mixins/page'
import Setting from '@/setting'
import Util from '@/libs/util'
import WOW from 'wow.js'
import $ from 'jquery'
export default {
mixins: [mixins],
data () {
@ -312,11 +353,18 @@ export default {
curInd3: 0,
curArticle3: {},
timer: null,
hide: false,
lastScrollTop: 0
}
},
mounted () {
this.height = window.innerHeight + 'px'
new WOW().init()
this.$store.getters.getModelType && new WOW().init()
document.onscroll = this.throttle(this.scroll, 200)
},
beforeDestroy () {
document.onscroll = null
},
methods: {
//
@ -342,7 +390,7 @@ export default {
if (json[6].form.column.length) {
const { column, articleNum } = json[6].form
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.$post(this.api.queryArticlesByColumnType, Util.rsa(column[column.length - 1])).then(({ data }) => {
this.articles1 = Util.removeTag(data.slice(0, articleNum || 4))
if (this.articles1.length) this.curArticle1 = this.articles1[0]
}).catch(err => { })
@ -367,7 +415,7 @@ export default {
this.articles4 = Util.removeTag(data.slice(0, articleNum || 3))
}).catch(err => { })
}
this.carouselInterval()
// this.carouselInterval()
}
}).catch(err => { })
},
@ -410,6 +458,89 @@ export default {
//
toLink (item, i) {
i ? this.openLink(item) : window.scrollTo(0, document.documentElement.scrollHeight)
},
scroll () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
if (this.lastScrollTop < scrollTop && !this.hide) {
// this.hide = true
// document.querySelector(`#part2`).scrollIntoView({
// behavior: 'smooth'
// })
this.hide = true
setTimeout(() => {
$(window).scrollTop(100)
// window.scrollTo({
// top: window.innerWidth / 2.03,
// behavior: 'smooth' //
// });
// this.scrollTop(window.innerWidth / 2.03, 200)
}, 300)
} else if (this.lastScrollTop > scrollTop && scrollTop == 0 && this.hide) {
// this.hide = false
// document.querySelector(`#part1`).scrollIntoView({
// behavior: 'smooth'
// })
// window.scrollTo({
// top: 0,
// behavior: 'smooth' //
// });
this.hide = false
setTimeout(() => {
$(window).scrollTop(0)
// window.scrollTo({
// top: 0,
// behavior: 'smooth' //
// });
// this.scrollTop(0, 200)
}, 300)
}
this.lastScrollTop = scrollTop
},
scrollTop (number = 0, time) {
if (!time) {
document.body.scrollTop = document.documentElement.scrollTop = number;
return number;
}
const spacingTime = 20; //
let spacingInex = time / spacingTime; //
let nowTop = document.body.scrollTop + document.documentElement.scrollTop; //
let everTop = (number - nowTop) / spacingInex; //
let scrollTimer = setInterval(() => {
if (spacingInex > 0) {
spacingInex--;
this.scrollTop(nowTop += everTop);
} else {
clearInterval(scrollTimer); //
}
}, spacingTime);
},
//
throttle (fn, time) {
//
let pre = 0
let timeout = null
return function (...args) {
const now = Date.now()
//
if (now - pre > time) {
pre = now
fn.apply(this, args)
} else {
// ,
if (timeout) {
clearTimeout(timeout)
timeout = null
}
//
timeout = setTimeout(() => {
pre = now
fn.apply(this, args)
}, time);
}
}
}
}
};
@ -418,18 +549,32 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
$bannerHeight: 100vh;
$bannerMh: 800px;
.carousel {
height: 100vh;
z-index: 1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: $bannerHeight;
img {
height: 100%;
height: $bannerHeight;
object-fit: cover;
}
/deep/.el-carousel__container {
height: 100%;
height: $bannerHeight;
}
/deep/.el-carousel__arrow i {
font-size: 30px;
}
.texts {
position: absolute;
bottom: 20%;
left: 120px;
display: flex;
flex-direction: column;
align-items: flex-start;
h6,
.text {
padding: 20px 15px;
@ -447,6 +592,17 @@ export default {
}
}
}
.block-wrap {
z-index: 2;
position: relative;
top: $bannerHeight;
padding: 6rem 0 30px;
background-color: #fff;
transition: all 0.7s cubic-bezier(0.5, 0, 0.2, 1) 0s;
&.active {
top: 0;
}
}
.block {
padding-top: 3.15rem;
.b-title {
@ -456,14 +612,16 @@ export default {
}
.intro {
margin-bottom: 3.6rem;
font-size: 30px;
font-size: 26px;
font-family: FZLTXHK--GBK1-0, FZLTXHK--GBK1;
color: #5b5b5e;
}
}
.inner {
width: 1444px;
// min-width: 70%;
width: 1200px;
}
.card-block {
background: url(https://huorantech.com/images/iasf/14.jpg) 0 0 / cover no-repeat;
}
.card {
display: flex;
@ -472,7 +630,7 @@ export default {
li {
position: relative;
width: calc((100% - 64px) / 2);
height: 488px;
height: 402px;
transition: 0.3s;
overflow: hidden;
&:hover {
@ -487,6 +645,7 @@ export default {
.pic {
width: 100%;
height: 100%;
object-fit: cover;
}
.project {
position: absolute;
@ -513,7 +672,7 @@ export default {
align-items: center;
width: 100%;
height: 100%;
padding: 0 128px;
padding: 0 60px;
text-align: center;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
@ -536,7 +695,7 @@ export default {
}
}
.news-wrap {
background: url(http://10.10.11.7/images/iasf/1.png) 0 0/100% 100% no-repeat;
background: url(https://huorantech.com/images/iasf/1.png) 0 0 / cover no-repeat;
}
.news-title:after {
display: none;
@ -570,11 +729,15 @@ export default {
}
.pic {
transition: 0.5s;
object-fit: cover;
}
.right {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 50%;
padding: 42px 71px 90px 58px;
padding: 42px 71px 42px 58px;
background: #026be1;
color: #fff;
transition: 0.3s;
@ -630,6 +793,7 @@ export default {
width: 100%;
height: 100%;
transition: 0.5s;
object-fit: cover;
}
.pic-cover {
display: none;
@ -662,7 +826,6 @@ export default {
font-size: 16px;
line-height: 28px;
color: #333;
text-indent: 2em;
}
}
.news-carousel {
@ -682,6 +845,7 @@ export default {
width: 100%;
height: 100%;
transition: 0.5s;
object-fit: cover;
}
.texts {
position: absolute;
@ -798,30 +962,36 @@ export default {
}
}
.people-block {
background: url(../../assets/images/FEL.png) 0 0/100% 100% no-repeat;
background: url(../../assets/images/FEL.png) 0 0 / cover no-repeat;
}
.people {
display: flex;
li {
width: 33.33%;
padding: 20px 73px 40px;
padding: 20px 70px 40px;
text-align: center;
border-right: 1px solid #ddd;
cursor: pointer;
&:first-child {
padding-left: 0;
// width: calc(33.33% - 70px);
// padding-left: 0;
}
&:nth-child(2) {
// width: calc(33.33% + 70px);
}
&:last-child {
padding-right: 0;
// width: calc(33.33% - 70px);
// padding-right: 0;
border-right: 0;
}
}
.pic {
width: 293px;
height: 293px;
width: 259px;
height: 259px;
margin-bottom: 28px;
border-radius: 50%;
object-fit: cover;
}
h6 {
font-size: 1.1rem;
@ -831,7 +1001,6 @@ export default {
.job {
margin: 18px 0 12px;
font-size: 1rem;
font-weight: 600;
font-family: PingFangSC-Medium, PingFang SC;
color: #333;
}
@ -842,12 +1011,13 @@ export default {
}
.text {
font-size: 1rem;
text-align: justify;
line-height: 1.6;
color: #333;
}
}
.talent-block {
background: url(http://10.10.11.7/images/iasf/11.png) 0 0/100% 100% no-repeat;
background: url(https://huorantech.com/images/iasf/11.png) 0 0 / cover no-repeat;
}
.talent {
display: flex;
@ -856,7 +1026,7 @@ export default {
overflow: hidden;
.left {
width: 50%;
padding: 120px 80px 0 5%;
padding: 50px 80px 0 5%;
background: #111c43;
}
h6 {
@ -873,17 +1043,17 @@ export default {
line-height: 2;
}
.el-button {
font-size: 20px;
font-size: 16px;
border: 0;
}
.pic {
width: 50%;
min-height: 465px;
object-fit: cover;
}
}
.about {
padding: 100px 0 229px;
background: url(http://10.10.11.7/images/iasf/12.png) 0 450px no-repeat;
padding: 100px 0 0;
background: url(https://huorantech.com/images/iasf/12.png) 0 450px no-repeat;
.about-bg {
background-color: #0a7fec;
}
@ -911,8 +1081,32 @@ export default {
position: absolute;
top: -60px;
right: 0;
width: 744px;
height: 657px;
width: 632px;
height: 558px;
object-fit: cover;
}
}
.entry {
position: relative;
display: flex;
justify-content: space-between;
li {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
img {
max-width: 100px;
object-fit: cover;
}
.text {
margin-top: 15px;
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #48525e;
}
}
.tools {
@ -941,25 +1135,25 @@ export default {
width: 28px;
height: 28px;
margin-right: 7px;
background: url(http://10.10.11.7/images/iasf/icon1.png) no-repeat;
background: url(https://huorantech.com/images/iasf/icon1.png) no-repeat;
}
&:nth-child(2):before {
background-image: url(http://10.10.11.7/images/iasf/icon2.png);
background-image: url(https://huorantech.com/images/iasf/icon2.png);
}
&:nth-child(2):hover:before {
background-image: url(http://10.10.11.7/images/iasf/icon2-1.png);
background-image: url(https://huorantech.com/images/iasf/icon2-1.png);
}
&:nth-child(3):before {
background-image: url(http://10.10.11.7/images/iasf/icon3.png);
background-image: url(https://huorantech.com/images/iasf/icon3.png);
}
&:nth-child(3):hover:before {
background-image: url(http://10.10.11.7/images/iasf/icon3-1.png);
background-image: url(https://huorantech.com/images/iasf/icon3-1.png);
}
&:nth-child(4):before {
background-image: url(http://10.10.11.7/images/iasf/icon4.png);
background-image: url(https://huorantech.com/images/iasf/icon4.png);
}
&:nth-child(4):hover:before {
background-image: url(http://10.10.11.7/images/iasf/icon4-1.png);
background-image: url(https://huorantech.com/images/iasf/icon4-1.png);
}
&:hover {
justify-content: flex-start;
@ -968,7 +1162,7 @@ export default {
color: #fff;
background-color: rgba(1, 129, 247, 0.94);
&:before {
background-image: url(http://10.10.11.7/images/iasf/icon1-1.png);
background-image: url(https://huorantech.com/images/iasf/icon1-1.png);
}
}
}
@ -976,6 +1170,7 @@ export default {
margin-right: 10px;
}
}
@media (max-width: 1470px) {
.inner {
width: 95%;
@ -1001,6 +1196,7 @@ export default {
.about {
.inner {
height: auto;
text-align: center;
}
.left {
width: 100%;
@ -1059,10 +1255,11 @@ export default {
}
}
.entry {
flex-direction: column;
// flex-direction: column;
flex-wrap: wrap;
li {
width: 100% !important;
margin-right: 0;
width: 48% !important;
margin-bottom: 30px;
}
}
}

@ -32,10 +32,10 @@
<div class="block land">
<div class="inner">
<img class="pic"
<img class="pic wow fadeInLeft"
:src="modules[2].form.pic"
alt="">
<div class="right">
<div class="right wow fadeInDown">
<h6 v-html="modules[2].form.title"></h6>
<div class="text"
v-html="modules[2].form.des"></div>
@ -45,7 +45,7 @@
<div class="block gray">
<div class="inner">
<h2 class="b-title wow fadeInUp"
<h2 class="b-title wow fadeInUp plan-title"
v-html="modules[3].form.title"></h2>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
@ -82,16 +82,16 @@
<div class="block">
<div class="inner">
<h2 class="b-title wow fadeInUp"
<h2 class="b-title"
:class="{'wow fadeInUp': $store.getters.getModelType}"
v-html="modules[6].form.title"></h2>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
<ul class="app">
<li v-for="(item, i) in modules[7].list"
:key="i"
class="wow fadeInDown"
:data-wow-delay="(0.2 * i).toFixed(1) + 's'"
:class="{'cursor-pointer': isLink(item.link.linkName)}"
:class="{'cursor-pointer': isLink(item.link.linkName),'wow fadeInDown': $store.getters.getModelType}"
@click="openLink(item)">
<img class="bg"
:src="require('@/assets/images/industrial/app' + (i + 1) + '.png')"
@ -107,12 +107,13 @@
<div class="block news-block">
<div class="inner">
<h2 class="b-title wow fadeInUp"
<h2 class="b-title"
:class="{'wow fadeInUp': $store.getters.getModelType}"
v-html="modules[8].form.title"></h2>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
<ul class="news">
<li class="wow fadeInDown"
<li :class="{'wow fadeInDown': $store.getters.getModelType}"
:data-wow-delay="(0.2 * i).toFixed(1) + 's'"
v-for="(item, i) in articles"
:key="i"
@ -155,10 +156,7 @@ export default {
//
getInfo () {
// /
this.$post(
`${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
)
.then(({ data }) => {
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
// state1theEditedJson稿0jsonBeforeEditing
const json = JSON.parse(
@ -221,6 +219,7 @@ export default {
width: 560px;
height: 500px;
margin: -122px -83px 0 0;
// object-fit: cover;
}
}
.land {
@ -230,6 +229,7 @@ export default {
.pic {
width: 50%;
height: 450px;
object-fit: cover;
}
.right {
width: 50%;
@ -291,6 +291,7 @@ export default {
height: 423px;
margin: -20px -20px 0 0;
border-radius: 100px 0 0 0;
object-fit: cover;
}
}
}
@ -324,6 +325,7 @@ export default {
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.icon {
position: relative;
@ -353,6 +355,7 @@ export default {
img {
width: 100%;
height: 220px;
object-fit: cover;
}
.texts {
padding: 20px 24px;
@ -370,6 +373,7 @@ export default {
text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21);
}
}
@media (max-width: 1200px) {
.history {
.texts {
@ -439,5 +443,8 @@ export default {
margin-right: 0;
}
}
.plan-title:after {
display: none;
}
}
</style>

@ -17,7 +17,7 @@
data-wow-delay="0.8s">{{ modules[1].form.des }}</p>
<el-image class="block-pic br wow fadeInLeft"
data-wow-delay="0.8s"
style="width: 100%; height: 536px"
style="width: 100%;"
:src="modules[1].form.pic"
:preview-src-list="[modules[1].form.pic]">
</el-image>
@ -42,7 +42,7 @@
<th>地点</th>
<th>能量GeV</th>
<th>储存环周长(m)</th>
<th>光束线/</th>
<th>光束线</th>
<th>代际</th>
<th>发射度(nm.rad)</th>
<th>状态</th>
@ -81,10 +81,10 @@
<th>地点</th>
<th>加速器技术</th>
<th>能量/GeV</th>
<th>波长范围/nm</th>
<th>光子能量</th>
<th>重复频率/Hz</th>
<th>设施长度/m</th>
<th>实验站/</th>
<th>实验站</th>
<th>状态</th>
<th>建成时间</th>
</tr>
@ -113,7 +113,8 @@
colspan="20">暂无数据</td>
</tr>
</table>
<div class="copyright">全球先进光源页面所刊载内容包括图片文字数据源自相关设施官方网站宣传手册以及国际原子能机构IAEA网站公开数据由深圳综合粒子设施研究院及中国科学学与科技政策研究会科技基础设施专业委员会共同汇总整理而来相关内容供访问者学习研究如需转载或引用须声明内容来源</div>
<div class="copyright"
v-html="modules[4].form.des"></div>
</div>
</div>
</div>
@ -183,12 +184,15 @@ export default {
}
}
}
.block-pic {
/deep/.block-pic {
transition: 0.3s;
height: auto;
&.br {
border-radius: 270px;
}
img {
object-fit: cover;
}
&:hover {
transform: scale(1.05);
}

@ -68,8 +68,8 @@
<script>
import mixins from "@/mixins/page";
import Setting from "@/setting";
import Util from "@/libs/util";
import WOW from "wow.js";
import Util from '@/libs/util'
export default {
mixins: [mixins],
data () {
@ -84,10 +84,7 @@ export default {
//
getInfo () {
// /
this.$post(
`${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
)
.then(({ data }) => {
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
// state1theEditedJson稿0jsonBeforeEditing
const json = JSON.parse(
@ -110,9 +107,6 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.inner {
width: 1200px;
}
.item {
position: relative;
margin-bottom: 58px;
@ -122,13 +116,14 @@ export default {
}
.texts {
position: absolute;
top: 79px;
top: 50%;
left: -34px;
width: 532px;
padding: 70px 38px 70px 55px;
color: #333;
background: rgba(255, 241, 231, 0.84);
transition: 0.5s;
transform: translateY(-50%);
}
&:nth-child(2) .texts {
left: auto;
@ -189,9 +184,6 @@ export default {
}
}
@media (max-width: 1200px) {
.inner {
width: 98%;
}
.item {
img {
margin-left: 30px;

File diff suppressed because it is too large Load Diff

@ -1,10 +1,15 @@
<template>
<div class="wrap">
<el-carousel :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'">
<el-carousel :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">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
<img :src="item.pic" alt="">
<el-carousel-item v-if="item.pic && item.isEnable"
:key="i">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
@click="openLink(item)">
<img :src="item.pic"
alt="">
<p class="banner-name">{{ item.title }}</p>
</div>
</el-carousel-item>
@ -12,16 +17,25 @@
</el-carousel>
<div class="inner">
<Breadcrumb ref="breadcrumb" :data.sync="routes"/>
<Breadcrumb ref="breadcrumb"
:data.sync="routes" />
<ul class="list">
<template v-for="(item, i) in modules[1].list">
<li v-if="item.isEnable" :key="i">
<img class="pic wow fadeInLeft" data-wow-delay="0.1s" :src="item.pic" alt="">
<div class="texts wow fadeInRight" data-wow-delay="0.1s">
<li v-if="item.isEnable"
:key="i">
<img class="pic wow fadeInLeft"
data-wow-delay="0.1s"
:src="item.pic"
alt="">
<div class="texts wow fadeInRight"
data-wow-delay="0.1s">
<h6>{{ item.title }}</h6>
<p class="sub">{{ item.subTitle }}</p>
<div class="des">{{ item.des }}</div>
<img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(item.link.linkName)}" @click="openLink(item)">
<img src="@/assets/images/arrow.png"
alt=""
:class="{'arrow': isLink(item.link.linkName)}"
@click="openLink(item)">
</div>
</li>
</template>
@ -99,7 +113,7 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
@import '../../styles/page/page.scss';
.wrap {
/deep/ .el-carousel {
height: 24rem;
@ -149,26 +163,26 @@ export default {
width: 61%;
// height: 440px;
padding: 3rem 1.5rem 1.5rem 5rem;
background: rgba(247, 247, 247, .72);
background: rgba(247, 247, 247, 0.72);
}
h6 {
font-size: 2rem;
font-family: SFProDisplay-Bold, SFProDisplay;
font-weight: bold;
color: #3C3C3C;
color: #3c3c3c;
}
.sub {
margin: 1rem 0;
font-size: 1.2rem;
font-weight: 600;
font-family: PingFangSC-Semibold, PingFang SC;
color: #1C1C1C;
color: #1c1c1c;
line-height: 33px;
}
.des {
margin-bottom: 1rem;
font-size: 1rem;
color: #3C3C3C;
color: #3c3c3c;
line-height: 1.6rem;
}
img {
@ -176,69 +190,6 @@ export default {
height: 3.3rem;
}
}
@media (max-width: 1520px) {
.list {
li {
&:nth-child(even) {
.texts {
left: 25px;
}
}
}
.texts {
right: 25px;
width: 55%;
}
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.wrap{
/deep/ .el-carousel {
height: 18rem;
.el-carousel__container{
height: 18rem;
}
img{
height: 18rem;
}
}
}
.banner-item .banner-name[data-v-1525064c] {
font-size: 1.5rem;
}
.inner{
width: 95%;
.list{
li {
margin-top: 20px;
.pic {
width: 100%;
height: 25rem !important;
}
.texts {
padding: 10px 5px 10px !important;
top: 30px;
height: auto;
h6{
font-size: 1.5rem !important;
}
p {
font-size: 1rem;
margin: 5px 0 !important;
line-height: 1.5rem;
}
.sub{
margin: 10px 0;
}
.des{
margin-bottom: 10px;
}
}
}
}
}
}
@media (max-width: 1200px) {
.inner {
@ -306,14 +257,15 @@ export default {
font-size: 1rem !important;
}
.sub {
font-size: .85rem;
font-size: 0.85rem;
}
.des {
font-size: .85rem;
line-height: .85rem;
font-size: 0.85rem;
line-height: 0.85rem;
}
img {
width: 2rem;height: 2rem;
width: 2rem;
height: 2rem;
}
}
}
@ -365,7 +317,8 @@ export default {
line-height: 1rem;
}
img {
width: 2rem;height: 2rem;
width: 2rem;
height: 2rem;
}
}
}
@ -417,7 +370,8 @@ export default {
line-height: 1rem;
}
img {
width: 2rem;height: 2rem;
width: 2rem;
height: 2rem;
}
}
}
@ -470,7 +424,8 @@ export default {
line-height: 1rem;
}
img {
width: 2rem;height: 2rem;
width: 2rem;
height: 2rem;
}
}
}
@ -520,7 +475,8 @@ export default {
line-height: 1.3rem;
}
img {
width: 2rem;height: 2rem;
width: 2rem;
height: 2rem;
}
}
}
@ -570,7 +526,8 @@ export default {
line-height: 1.3rem;
}
img {
width: 2rem;height: 2rem;
width: 2rem;
height: 2rem;
}
}
}
@ -620,7 +577,8 @@ export default {
line-height: 1.3rem;
}
img {
width: 2rem;height: 2rem;
width: 2rem;
height: 2rem;
}
}
}

@ -1,10 +1,15 @@
<template>
<div class="wrap">
<el-carousel :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'">
<el-carousel :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">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
<img :src="item.pic" alt="">
<el-carousel-item v-if="item.pic && item.isEnable"
:key="i">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
@click="openLink(item)">
<img :src="item.pic"
alt="">
<p class="banner-name">{{ item.title }}</p>
</div>
</el-carousel-item>
@ -12,16 +17,25 @@
</el-carousel>
<div class="inner">
<Breadcrumb ref="breadcrumb" :data.sync="routes"/>
<Breadcrumb ref="breadcrumb"
:data.sync="routes" />
<ul class="list">
<template v-for="(item, i) in modules[1].list">
<li v-if="item.isEnable" :key="i">
<img class="pic wow fadeInLeft" data-wow-delay="0.1s" :src="item.pic" alt="">
<div class="texts wow fadeInRight" data-wow-delay="0.1s">
<li v-if="item.isEnable"
:key="i">
<img class="pic wow fadeInLeft"
data-wow-delay="0.1s"
:src="item.pic"
alt="">
<div class="texts wow fadeInRight"
data-wow-delay="0.1s">
<h6>{{ item.title }}</h6>
<p class="sub">{{ item.subTitle }}</p>
<div class="des">{{ item.des }}</div>
<img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(item.link.linkName)}" @click="openLink(item)">
<img src="@/assets/images/arrow.png"
alt=""
:class="{'arrow': isLink(item.link.linkName)}"
@click="openLink(item)">
</div>
</li>
</template>
@ -99,7 +113,7 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
@import '../../styles/page/page.scss';
.wrap {
/deep/ .el-carousel {
height: 24rem;
@ -149,26 +163,26 @@ export default {
width: 61%;
// height: 440px;
padding: 3rem 1.5rem 1.5rem 5rem;
background: rgba(247, 247, 247, .72);
background: rgba(247, 247, 247, 0.72);
}
h6 {
font-size: 2rem;
font-family: SFProDisplay-Bold, SFProDisplay;
font-weight: bold;
color: #3C3C3C;
color: #3c3c3c;
}
.sub {
margin: 1rem 0;
font-size: 1.2rem;
font-weight: 600;
font-family: PingFangSC-Semibold, PingFang SC;
color: #1C1C1C;
color: #1c1c1c;
line-height: 33px;
}
.des {
margin-bottom: 1rem;
font-size: 1rem;
color: #3C3C3C;
color: #3c3c3c;
line-height: 1.6rem;
}
img {
@ -176,6 +190,7 @@ export default {
height: 3.3rem;
}
}
@media (max-width: 1520px) {
.list {
li {
@ -307,14 +322,15 @@ export default {
font-size: 1rem !important;
}
.sub {
font-size: .85rem;
font-size: 0.85rem;
}
.des {
font-size: .85rem;
line-height: .85rem;
font-size: 0.85rem;
line-height: 0.85rem;
}
img {
width: 2rem;height: 2rem;
width: 2rem;
height: 2rem;
}
}
}
@ -366,7 +382,8 @@ export default {
line-height: 1rem;
}
img {
width: 2rem;height: 2rem;
width: 2rem;
height: 2rem;
}
}
}
@ -418,7 +435,8 @@ export default {
line-height: 1rem;
}
img {
width: 2rem;height: 2rem;
width: 2rem;
height: 2rem;
}
}
}
@ -471,7 +489,8 @@ export default {
line-height: 1rem;
}
img {
width: 2rem;height: 2rem;
width: 2rem;
height: 2rem;
}
}
}
@ -521,7 +540,8 @@ export default {
line-height: 1.3rem;
}
img {
width: 2rem;height: 2rem;
width: 2rem;
height: 2rem;
}
}
}
@ -571,7 +591,8 @@ export default {
line-height: 1.3rem;
}
img {
width: 2rem;height: 2rem;
width: 2rem;
height: 2rem;
}
}
}
@ -621,7 +642,8 @@ export default {
line-height: 1.3rem;
}
img {
width: 2rem;height: 2rem;
width: 2rem;
height: 2rem;
}
}
}

@ -16,13 +16,14 @@
v-html="modules[1].form.des"></p>
</div>
<img class="pic"
src="http://10.10.11.7/images/overviewSetup/1.png"
src="https://huorantech.com/images/overviewSetup/1.png"
alt="">
</div>
<div class="lg-bg">
<img width="100%"
<el-image style="width: 100%;"
:src="modules[2].form.pic"
alt="">
:preview-src-list="[modules[2].form.pic]">
</el-image>
</div>
</div>
</template>
@ -30,6 +31,7 @@
<script>
import mixins from '@/mixins/page'
import WOW from 'wow.js'
import Util from '@/libs/util'
export default {
mixins: [mixins],
data () {
@ -44,10 +46,7 @@ export default {
//
getInfo () {
// /
this.$post(
`${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
)
.then(({ data }) => {
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
// state1theEditedJson稿0jsonBeforeEditing
const json = JSON.parse(
@ -74,7 +73,7 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
width: 1294px;
width: 1200px;
padding: 9px 86px 29px 116px;
margin: 0 auto 50px;
background: #fcfcfc;
@ -100,7 +99,7 @@ export default {
}
}
.lg-bg {
width: 65%;
width: 1200px;
margin: 0 auto;
}
@media (max-width: 1300px) {
@ -123,7 +122,7 @@ export default {
.org {
flex-direction: column;
.pic {
width: 100%;
display: none;
}
.left {
width: 100%;

@ -61,7 +61,7 @@
<div class="block gray fac">
<div class="inner">
<div class="event">
<img src="http://10.10.11.7/images/overview/16.png"
<img src="https://huorantech.com/images/overview/16.png"
alt=""
class="pic">
<div class="texts">
@ -115,11 +115,11 @@
</div>
<div class="block scan gray">
<h2 class="b-title wow fadeInUp"
<h2 class="b-title wow fadeInUp hide-bd"
v-html="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="inner scan-inner">
<div class="left">
<template v-for="(item, i) in modules[9].list">
<div v-if="item.isEnable"
@ -174,10 +174,7 @@ export default {
//
getInfo () {
// /
this.$post(
`${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
)
.then(({ data }) => {
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
// state1theEditedJson稿0jsonBeforeEditing
const json = JSON.parse(
@ -345,8 +342,6 @@ export default {
.scan {
.scan-inner {
display: flex;
justify-content: flex-end;
padding-left: 19%;
}
.left {
width: 45%;
@ -386,81 +381,17 @@ export default {
}
.pic {
width: 50%;
// height: 700px;
// object-fit: cover;
}
}
@media (min-width: 2000px) {
.scan {
.scan-inner {
justify-content: flex-start;
padding-left: 22%;
}
.left {
width: 37%;
}
.pic {
width: 800px;
}
}
}
@media (min-width: 2400px) {
.scan {
.scan-inner {
padding-left: 24%;
}
}
}
@media (min-width: 2500px) {
.scan {
.scan-inner {
padding-left: 26%;
}
}
}
@media (min-width: 2800px) {
.scan {
.scan-inner {
padding-left: 29%;
}
}
}
@media (min-width: 3500px) {
.scan {
.scan-inner {
padding-left: 35%;
}
.left {
width: 32%;
}
}
}
@media (min-width: 5000px) {
.scan {
.scan-inner {
padding-left: 39.5%;
}
.left {
width: 20%;
}
}
}
@media (min-width: 6000px) {
.scan {
.scan-inner {
padding-left: 42%;
}
}
}
@media (max-width: 1800px) {
.scan .scan-inner {
padding-left: 14%;
}
}
@media (max-width: 1500px) {
.scan .scan-inner {
padding-left: 10%;
}
}
@media (max-width: 1400px) {
.history {
.texts {
@ -479,14 +410,12 @@ export default {
.scan {
.scan-inner {
flex-direction: column;
padding: 0 10%;
}
.left {
width: 100%;
}
.pic {
width: 100%;
height: auto;
margin-top: 2rem;
}
}
@ -522,6 +451,12 @@ export default {
}
}
@media (max-width: 750px) {
.hide-bd:after {
display: none;
}
.block {
padding: 50px 0;
}
.core {
.texts {
position: static;
@ -532,5 +467,12 @@ export default {
background: #333;
}
}
.fac {
.event {
.pic {
display: none;
}
}
}
}
</style>

@ -45,10 +45,13 @@
<p class="date">{{ e.title }}</p>
<p class="text">{{ e.des }}</p>
</div>
<img v-if="e.pic"
<div class="pic-wrap">
<el-image v-if="e.pic"
class="pic"
:src="e.pic"
alt=""
class="pic">
:preview-src-list="[e.pic]">
</el-image>
</div>
</li>
</template>
</ul>
@ -63,6 +66,7 @@
import mixins from '@/mixins/page'
import overview from '@/mixins/overview'
import WOW from 'wow.js'
import Util from '@/libs/util'
export default {
mixins: [mixins, overview],
data () {
@ -86,8 +90,8 @@ export default {
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.wrap {
background: url(http://10.10.11.7/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
background: url(https://huorantech.com/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
url(https://huorantech.com/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
}
.single-banner {
.texts {
@ -141,7 +145,7 @@ export default {
content: '';
width: 18px;
height: 18px;
background: url(http://10.10.11.7/images/overviewDevHistory/3.png) no-repeat;
background: url(https://huorantech.com/images/overviewDevHistory/3.png) no-repeat;
margin-right: 20px;
}
}
@ -198,12 +202,18 @@ export default {
transform: rotate(45deg);
}
}
.pic {
.pic-wrap {
width: 17.5rem;
height: 9.75rem;
text-align: center;
}
.pic {
// width: 17.5rem;
height: 100%;
}
}
}
@media (max-width: 1200px) {
.tab-content {
width: 90%;

@ -19,15 +19,15 @@
</ul>
<div class="tab-content">
<div class="intro">
<div class="inner intro">
<img class="pic"
src="http://10.10.11.7/images/overviewIntro/1.png"
:src="modules[1].form.pic"
alt="">
<div class="right">
<div class="relative">
<h6 v-html="modules[1].form.title"></h6>
<img class="title-bg"
src="http://10.10.11.7/images/overviewIntro/2.png"
src="https://huorantech.com/images/overviewIntro/2.png"
alt="">
</div>
<div class="text"
@ -92,13 +92,14 @@ export default {
padding-top: 3.85rem;
.intro {
display: flex;
align-items: center;
margin-bottom: 5.5rem;
.pic {
width: 40%;
margin-right: 2.5rem;
width: 49%;
margin-right: 2%;
}
.right {
width: 40%;
width: 49%;
}
h6 {
position: relative;
@ -112,7 +113,7 @@ export default {
}
.text {
margin-top: 2rem;
font-size: 0.99rem;
font-size: 1rem;
color: #020202;
line-height: 2;
}
@ -124,7 +125,7 @@ export default {
padding-bottom: 2rem;
color: #fff;
text-align: center;
background: url(http://10.10.11.7/images/overviewIntro/3.png) 0 0/100% 100% no-repeat;
background: url(https://huorantech.com/images/overviewIntro/3.png) 0 0/100% 100% no-repeat;
.mask {
position: absolute;
top: 0;
@ -186,6 +187,7 @@ export default {
right: 90%;
}
}
@media (max-width: 1200px) {
.tab-content {
width: 90%;

@ -65,6 +65,7 @@ export default {
}
/deep/ img {
width: 100% !important;
height: auto;
}
}
.video {

@ -25,13 +25,14 @@
v-html="modules[1].form.des"></p>
</div>
<img class="pic"
src="http://10.10.11.7/images/overviewSetup/1.png"
src="https://huorantech.com/images/overviewSetup/1.png"
alt="">
</div>
<div class="lg-bg">
<img width="100%"
<el-image style="width: 100%;"
:src="modules[2].form.pic"
alt="">
:preview-src-list="[modules[2].form.pic]">
</el-image>
</div>
</div>
@ -74,7 +75,7 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
width: 1294px;
width: 1200px;
padding: 9px 86px 29px 116px;
margin: 0 auto 50px;
background: #fcfcfc;
@ -97,10 +98,11 @@ export default {
.pic {
width: 320px;
height: 282px;
object-fit: cover;
}
}
.lg-bg {
width: 85%;
width: 1200px;
margin: 0 auto;
}
@media (max-width: 1200px) {
@ -111,13 +113,15 @@ export default {
padding: 15px;
flex-direction: column;
.pic {
width: 100%;
height: auto;
display: none;
}
.left {
width: 100%;
}
}
}
.lg-bg {
width: 90%;
}
}
</style>

@ -84,6 +84,7 @@ export default {
color: #020202;
line-height: 1.6rem;
}
@media (max-width: 1200px) {
.tab-content {
width: 95%;

@ -1,12 +1,11 @@
<template>
<div class="wrap">
<div class="banner">
<img width="100%"
height="280"
<div class="single-banner">
<img class="banner-img"
:src="info.columnBanner"
alt="" />
<div class="texts">
<p class="text">{{ info.columnName }}</p>
<h6 class="banner-title">{{ info.columnName }}</h6>
</div>
</div>
@ -38,6 +37,7 @@ import mixins from '@/mixins/article'
import Thesis from './thesis'
import Patent from './patent'
import Monograph from './monograph'
import Util from '@/libs/util'
export default {
mixins: [mixins],
data () {
@ -112,25 +112,27 @@ export default {
.wrap {
background-color: #f9f9f9;
}
.banner {
.single-banner {
position: relative;
height: 280px;
color: #fff;
.banner-img {
width: 100%;
height: 24rem;
object-fit: cover;
}
.texts {
position: absolute;
top: 123px;
left: 243px;
top: 160px;
left: 267px;
}
.text {
font-size: 3.42rem;
font-weight: 600;
@include ellipsis;
.banner-title {
margin-bottom: 19px;
font-size: 2.2rem;
font-family: PingFangSC-Medium, PingFang SC;
}
.sub {
margin-top: 10px;
font-size: 2rem;
.banner-des {
font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC;
}
}
.tabs {
@ -158,11 +160,10 @@ export default {
margin: 0 auto;
}
@media (max-width: 1200px) {
.banner {
.single-banner {
.texts {
.text {
font-size: 1.5rem;
}
top: 10rem;
left: 6rem;
}
}
.tabs {
@ -179,12 +180,4 @@ export default {
margin: 0 auto;
}
}
@media (max-width: 320px) {
.banner {
.texts {
left: 6rem;
top: 6rem;
}
}
}
</style>

@ -3,8 +3,7 @@
<div class="forms">
<div class="item">
<span class="label">{{$t('column.Publicationtime')}}</span>
<el-date-picker style="width: 300px"
v-model="form.publicationYear"
<el-date-picker v-model="form.publicationYear"
type="year"
:placeholder="$t('column.pleaseSelectThePublicationTime')"
format="yyyy"
@ -132,4 +131,18 @@ export default {
cursor: pointer;
}
}
@media (max-width: 640px) {
.forms {
flex-direction: column;
align-items: flex-start;
.item {
display: flex;
margin-bottom: 20px;
margin-right: 0;
}
.search {
width: 100%;
}
}
}
</style>

@ -25,15 +25,10 @@
</el-date-picker>
</div>
<div class="search">
<el-tooltip class="item"
effect="dark"
:content="$t('column.pleaseEnterPatentOfficer')"
placement="top-start">
<input type="text"
:placeholder="$t('column.pleaseEnterPatentOfficer')"
v-model="form.patentQueryKeyWord"
clearable>
</el-tooltip>
</div>
</div>
@ -59,7 +54,7 @@
align="center"
min-width="150"></el-table-column>
<el-table-column prop="applicationDate"
:label="$t('column.ApplicationDate')"
:label="$t('column.applicationDate')"
align="center"
min-width="150"></el-table-column>
<el-table-column prop="dateOfAuthorization"
@ -160,4 +155,18 @@ export default {
cursor: pointer;
}
}
@media (max-width: 640px) {
.forms {
flex-direction: column;
align-items: flex-start;
.item {
display: flex;
margin-bottom: 20px;
margin-right: 0;
}
.search {
width: 100%;
}
}
}
</style>

@ -1,7 +1,10 @@
<template>
<div class="wrap">
<div class="banner">
<img width="100%" height="280" src="@/assets/images/publication-bg.png" alt="" />
<img width="100%"
height="280"
src="@/assets/images/publication-bg.png"
alt="" />
<div class="texts">
<p class="text">{{ info.columnName }}</p>
</div>
@ -11,11 +14,14 @@
<!-- <Breadcrumb style="margin-bottom: 30px" ref="breadcrumb" :data.sync="routes"/> -->
<!-- 根据栏目的listStyleId判断是哪个列表样式这个出版物页面只显示下面三个列表样式 -->
<!-- 论文 -->
<Thesis v-if="type === 46" :id.sync="id" />
<Thesis v-if="type === 46"
:id.sync="id" />
<!-- 专利 -->
<Patent v-if="type === 44" :id.sync="id" />
<Patent v-if="type === 44"
:id.sync="id" />
<!-- 专著 -->
<Monograph v-if="type === 45" :id.sync="id" />
<Monograph v-if="type === 45"
:id.sync="id" />
</div>
</div>
</template>
@ -26,6 +32,7 @@ import Thesis from './thesis'
import Patent from './patent'
import Monograph from './monograph'
import Breadcrumb from '@/components/breadcrumb'
import Util from '@/libs/util'
export default {
mixins: [mixins],
data () {
@ -124,20 +131,9 @@ export default {
margin: 0 auto;
}
@media (max-width: 1200px) {
.banner {
.texts {
.text {
font-size: 1.5rem;
}
}
}
}
@media (max-width: 320px) {
.banner {
.texts {
left: 6rem;
top: 6rem;
}
.tab-content {
width: 90%;
margin: 0 auto;
}
}
</style>

@ -3,9 +3,7 @@
<div class="forms">
<div class="item">
<span class="label">{{$t('column.publicationyear')}}</span>
<el-date-picker
style="width: 300px"
v-model="form.publicationYear"
<el-date-picker v-model="form.publicationYear"
type="year"
:placeholder="$t('column.pleaseSelectThePublicationTime')"
format="yyyy"
@ -15,14 +13,17 @@
</el-date-picker>
</div>
<div class="search">
<el-tooltip class="item" effect="dark" :content="$t('column.PleaseEnterThePaperName')" placement="top-start">
<input type="text" :placeholder="$t('column.PleaseEnterThePaperName')" v-model="form.paperQueryKeyWord" clearable>
</el-tooltip>
<input type="text"
:placeholder="$t('column.PleaseEnterThePaperName')"
v-model="form.paperQueryKeyWord"
clearable>
</div>
</div>
<ul class="list">
<li v-for="(item, i) in articles" :key="i" @click="$parent.toArtice(item)">
<li v-for="(item, i) in articles"
:key="i"
@click="$parent.toArtice(item)">
<h6>{{ item.title }}</h6>
<p class="meta">{{$t('column.author')}}: {{ item.author }}</p>
<p class="meta">{{$t('column.journalName')}}: {{ item.periodicalName }}</p>
@ -89,7 +90,7 @@ export default {
</script>
<style lang="scss" scoped>
@import "../../styles/page/publication.scss";
@import '../../styles/page/publication.scss';
.list {
li {
padding: 30px;
@ -107,4 +108,18 @@ export default {
line-height: 30px;
}
}
@media (max-width: 640px) {
.forms {
flex-direction: column;
align-items: flex-start;
.item {
display: flex;
margin-bottom: 20px;
margin-right: 0;
}
.search {
width: 100%;
}
}
}
</style>

@ -51,27 +51,6 @@
<p class="name">DOI</p>
<p class="val">{{ form.doi }}</p>
</template>
<p class="l-title">{{$t('column.hot')}}</p>
<ul class="list">
<li v-for="(item, i) in hots"
:key="i"
:title="item.title"
@click="toArtice(item)">
<p class="text">{{ item.title }}</p>
<span class="date">{{ item.releaseTime }}</span>
</li>
</ul>
<p class="l-title">{{$t('column.latestNews')}}</p>
<ul class="list">
<li v-for="(item, i) in news"
:key="i"
@click="toArtice(item)">
<p class="text">{{ item.title }}</p>
<span class="date">{{ item.releaseTime }}</span>
</li>
</ul>
</div>
</div>
</div>

@ -1,10 +1,16 @@
<template>
<div class="wrap" v-if="modules.length>=1">
<el-carousel :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'">
<div class="wrap"
v-if="modules.length>=1">
<el-carousel :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">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
<img :src="item.pic" alt="">
<el-carousel-item v-if="item.pic && item.isEnable"
:key="i">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
@click="openLink(item)">
<img :src="item.pic"
alt="">
<p class="banner-name">{{ item.title }}</p>
</div>
</el-carousel-item>
@ -13,12 +19,22 @@
<div class="block">
<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>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
<ul class="area">
<li v-for="(item, i) in modules[2].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
<img :src="item.pic" alt="" class="pic">
<li v-for="(item, i) in modules[2].list"
:key="i"
class="wow fadeInDown"
:data-wow-delay="(0.2 * i).toFixed(1) + 's'"
:class="{'cursor-pointer': isLink(item.link.linkName)}"
@click="openLink(item)">
<img :src="item.pic"
alt=""
class="pic">
<div class="texts">
<img :src="require('@/assets/images/research/res' + (i + 1) + '-1.png')" alt="" class="icon">
<img :src="require('@/assets/images/research/res' + (i + 1) + '-1.png')"
alt=""
class="icon">
<h6>{{ item.title }}</h6>
<p class="des">{{ item.des }}</p>
</div>
@ -29,10 +45,17 @@
<div class="block gray">
<div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[3].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
<ul class="group">
<li v-for="(item, i) in modules[4].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
<img :src="item.pic" alt="">
<li v-for="(item, i) in modules[4].list"
:key="i"
class="wow fadeInDown"
:data-wow-delay="(0.2 * i).toFixed(1) + 's'"
:class="{'cursor-pointer': isLink(item.link.linkName)}"
@click="openLink(item)">
<img :src="item.pic"
alt="">
<p class="text">{{ item.title }}</p>
</li>
</ul>
@ -42,10 +65,17 @@
<div class="block">
<div class="inner news-inner">
<h2 class="b-title wow fadeInUp">{{ modules[5].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
<ul class="news">
<li v-for="(item, i) in modules[6].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
<img :src="item.pic" alt="">
<li v-for="(item, i) in modules[6].list"
:key="i"
class="wow fadeInDown"
:data-wow-delay="(0.2 * i).toFixed(1) + 's'"
:class="{'cursor-pointer': isLink(item.link.linkName)}"
@click="openLink(item)">
<img :src="item.pic"
alt="">
<div class="texts">
<h6>{{ item.title }}</h6>
<div class="des">{{ item.des }}</div>
@ -93,7 +123,7 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
@import '../../styles/page/page.scss';
.wrap {
/deep/ .el-carousel {
height: 24rem;
@ -123,7 +153,7 @@ export default {
width: 19%;
color: #fff;
background: url(../../assets/images/research/res1.png) 0 0/100% 100% no-repeat;
transition: .3s;
transition: 0.3s;
&:hover {
transform: translateY(20px);
.icon {
@ -134,12 +164,12 @@ export default {
width: 21%;
margin-top: 70px;
.texts {
background: #2B1B1C;
background: #2b1b1c;
}
}
&:nth-child(3) {
.texts {
background: #009C91;
background: #009c91;
}
}
&:nth-child(4) {
@ -151,21 +181,22 @@ export default {
&:nth-child(5) {
width: 22%;
.texts {
background: #9A4E10;
background: #9a4e10;
}
}
}
.pic {
width: 100%;
height: 32.65rem;
object-fit: cover;
}
.icon {
transition: .3s;
transition: 0.3s;
}
.texts {
width: 100%;
padding: 1rem 2rem;
background: #08577B;
background: #08577b;
overflow: hidden;
}
h6 {
@ -173,7 +204,7 @@ export default {
white-space: nowrap;
}
.des {
font-size: .96rem;
font-size: 0.96rem;
color: rgba(255, 255, 255, 0.55);
}
}
@ -184,7 +215,7 @@ export default {
position: relative;
width: calc((100% - 56px) / 3);
margin: 0 1.4rem 1.95rem 0;
transition: .3s;
transition: 0.3s;
&:hover {
transform: scale(1.05);
.text {
@ -213,7 +244,7 @@ export default {
text-align: center;
color: #272727;
background-color: #fff;
transition: .3s;
transition: 0.3s;
}
}
.news {
@ -229,7 +260,7 @@ export default {
background-color: #fff;
box-shadow: 0px 5px 1rem 0px rgba(98, 117, 163, 0.08);
border-radius: 10px;
transition: .3s;
transition: 0.3s;
&:hover {
transform: translateY(20px);
}
@ -238,7 +269,7 @@ export default {
}
&:hover {
color: #fff;
background-color: #0252D9;
background-color: #0252d9;
}
}
img {
@ -246,15 +277,15 @@ export default {
height: auto;
}
.texts {
padding: 0 .9rem 2.5rem;
padding: 0 0.9rem 2.5rem;
}
h6 {
margin: 1.75rem 0 .6rem;
margin: 1.75rem 0 0.6rem;
font-size: 1.04rem;
line-height: 1.65rem;
}
.des {
font-size: .88rem;
font-size: 0.88rem;
line-height: 1.3rem;
}
}
@ -279,10 +310,12 @@ export default {
.area {
flex-direction: column;
li {
width: 95%;margin: 1.25rem auto;
width: 95%;
margin: 1.25rem auto;
}
}
.group,.news{
.group,
.news {
flex-direction: column;
li {
width: 95%;
@ -337,7 +370,8 @@ export default {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group ,.news{
.group,
.news {
li {
img {
height: auto;
@ -379,7 +413,8 @@ export default {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group ,.news{
.group,
.news {
li {
img {
height: auto;
@ -421,7 +456,8 @@ export default {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group ,.news{
.group,
.news {
li {
img {
height: auto;
@ -470,7 +506,8 @@ export default {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group ,.news{
.group,
.news {
li {
img {
height: auto;
@ -519,7 +556,8 @@ export default {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group ,.news{
.group,
.news {
li {
img {
height: auto;
@ -531,7 +569,7 @@ export default {
}
}
.area {
flex-direction: row;;
flex-direction: row;
li {
width: 19%;
.pic {
@ -570,12 +608,13 @@ export default {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group ,.news{
.group,
.news {
flex-direction: row;
li {
width: calc((100% - 3rem) / 3);
margin: 0 .8rem 1.95rem 0;
-webkit-transition: .3s;
margin: 0 0.8rem 1.95rem 0;
-webkit-transition: 0.3s;
img {
height: auto;
}
@ -586,7 +625,7 @@ export default {
}
}
.area {
flex-direction: row;;
flex-direction: row;
li {
width: 19%;
.pic {
@ -625,12 +664,13 @@ export default {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group ,.news{
.group,
.news {
flex-direction: row;
li {
width: calc((100% - 3rem) / 3);
margin: 0 .8rem 1.95rem 0;
-webkit-transition: .3s;
margin: 0 0.8rem 1.95rem 0;
-webkit-transition: 0.3s;
img {
height: auto;
}
@ -641,7 +681,409 @@ export default {
}
}
.area {
flex-direction: row;;
flex-direction: row;
li {
width: 19%;
.pic {
height: auto;
}
}
}
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel {
height: 18rem;
.el-carousel__container {
height: 18rem;
}
img {
height: 18rem;
}
}
}
.block {
padding: 50px 0;
.intro {
margin-bottom: 30px;
}
.area {
flex-direction: column;
li {
width: 95%;
margin: 1.25rem auto;
}
}
.group,
.news {
flex-direction: column;
li {
width: 95%;
margin: 20px auto;
}
}
}
.area {
li {
height: auto;
.pic {
height: 20rem;
}
.texts {
height: 10rem;
}
}
}
.group img {
height: 20rem;
}
.news img {
height: 20rem;
}
}
@media (max-width: 320px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
li {
img {
height: auto;
}
.text {
font-size: 1.5rem;
line-height: 1.8rem;
}
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
li {
img {
height: auto;
}
.text {
font-size: 1.5rem;
line-height: 1.8rem;
}
}
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
li {
img {
height: auto;
}
.text {
font-size: 1.5rem;
line-height: 1.8rem;
}
}
}
.area {
li {
.pic {
height: 22rem;
}
}
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
li {
img {
height: auto;
}
.text {
font-size: 1.5rem;
line-height: 1.8rem;
}
}
}
.area {
li {
.pic {
height: auto;
}
}
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
li {
img {
height: auto;
}
.text {
font-size: 1.5rem;
line-height: 1.8rem;
}
}
}
.area {
flex-direction: row;
li {
width: 19%;
.pic {
height: auto;
}
}
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
flex-direction: row;
li {
width: calc((100% - 3rem) / 3);
margin: 0 0.8rem 1.95rem 0;
-webkit-transition: 0.3s;
img {
height: auto;
}
.text {
font-size: 1.5rem;
line-height: 1.8rem;
}
}
}
.area {
flex-direction: row;
li {
width: 19%;
.pic {
height: auto;
}
}
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel {
height: 12rem !important;
}
/deep/ .el-carousel__container {
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item {
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.b-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.group,
.news {
flex-direction: row;
li {
width: calc((100% - 3rem) / 3);
margin: 0 0.8rem 1.95rem 0;
-webkit-transition: 0.3s;
img {
height: auto;
}
.text {
font-size: 1.5rem;
line-height: 1.8rem;
}
}
}
.area {
flex-direction: row;
li {
width: 19%;
.pic {

@ -31,20 +31,20 @@
:key="i"
@click="toArtice(item, modules[1].form)">
<div class="line">
<img src="http://10.10.11.7/images/researchTeam/3.png"
<img src="https://huorantech.com/images/researchTeam/3.png"
alt=""
class="icon">
<span class="bold">{{ item.title }}</span>
<span class="val">/ {{ item.post }}</span>
</div>
<div class="line">
<img src="http://10.10.11.7/images/researchTeam/4.png"
<img src="https://huorantech.com/images/researchTeam/4.png"
alt=""
class="icon">
<span class="text">专业 {{ item.major }}</span>
</div>
<div class="line">
<img src="http://10.10.11.7/images/researchTeam/5.png"
<img src="https://huorantech.com/images/researchTeam/5.png"
alt=""
class="icon">
<span class="text">荣誉 {{ item.honor }}</span>
@ -209,7 +209,7 @@ export default {
width: calc((100% - 10px) / 2);
padding: 20px 30px;
margin: 0 10px 10px 0;
background: url(http://10.10.11.7/images/researchTeam/2.png) 0 0 / cover no-repeat;
background: url(https://huorantech.com/images/researchTeam/2.png) 0 0 / cover no-repeat;
cursor: pointer;
&:nth-child(even) {
margin-right: 0;

@ -1,7 +1,9 @@
<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>
<p class="banner-des des">{{ modules[0].form.des }}</p>
@ -10,37 +12,34 @@
<div class="block">
<div class="inner">
<div
class="item wow bounceInLeft"
<div class="item wow bounceInLeft"
data-wow-delay="0.5s"
:class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }"
@click="openLink(modules[1].form)"
>
<img src="@/assets/images/science/1.png" alt="" />
@click="openLink(modules[1].form)">
<img src="@/assets/images/science/1.png"
alt="" />
<div class="texts">
<h6>{{ modules[1].form.title }}</h6>
<div class="des">{{ modules[1].form.des }}</div>
</div>
</div>
<div
class="item wow bounceInRight"
<div class="item wow bounceInRight"
data-wow-delay="0.8s"
:class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }"
@click="openLink(modules[2].form)"
>
<img src="@/assets/images/science/2.png" alt="" />
@click="openLink(modules[2].form)">
<img src="@/assets/images/science/2.png"
alt="" />
<div class="texts rightText">
<h6>{{ modules[2].form.title }}</h6>
<div class="des">{{ modules[2].form.des }}</div>
</div>
</div>
<div
class="item wow bounceInLeft"
<div class="item wow bounceInLeft"
data-wow-delay="0.5s"
:class="{ 'cursor-pointer': isLink(modules[3].form.link.linkName) }"
@click="openLink(modules[3].form)"
>
<img src="@/assets/images/science/3.png" alt="" />
@click="openLink(modules[3].form)">
<img src="@/assets/images/science/3.png"
alt="" />
<div class="texts">
<h6>{{ modules[3].form.title }}</h6>
<div class="des">{{ modules[3].form.des }}</div>
@ -70,10 +69,7 @@ export default {
//
getInfo () {
// /
this.$post(
`${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
)
.then(({ data }) => {
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
// state1theEditedJson稿0jsonBeforeEditing
const json = JSON.parse(
@ -95,7 +91,7 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
@import '../../styles/page/page.scss';
.inner {
width: 960px;
}
@ -106,10 +102,10 @@ export default {
.texts {
h6 {
font-size: 2.16rem;
margin-bottom: .95rem;
margin-bottom: 0.95rem;
}
.banner-des {
font-size: .96rem;
font-size: 0.96rem;
}
}
}
@ -154,15 +150,16 @@ export default {
transition: 0.5s;
}
h6 {
margin-bottom: .875rem;
margin-bottom: 0.875rem;
font-size: 1.6rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
}
.des {
font-size: .88rem;
font-size: 0.88rem;
}
}
@media (max-width: 1200px) {
body {
width: 100% !important;
@ -184,7 +181,7 @@ export default {
right: -1.5rem !important;
}
.des {
-webkit-line-clamp: inherit
-webkit-line-clamp: inherit;
}
}
}
@ -200,10 +197,10 @@ export default {
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: .5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: .85rem;
font-size: 0.85rem;
}
}
}
@ -220,7 +217,7 @@ export default {
font-size: 1.2rem;
}
.des {
font-size: .75rem;
font-size: 0.75rem;
}
}
}
@ -237,10 +234,10 @@ export default {
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: .5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: .85rem;
font-size: 0.85rem;
}
}
}
@ -257,7 +254,7 @@ export default {
font-size: 1.4rem;
}
.des {
font-size: .75rem;
font-size: 0.75rem;
}
}
}
@ -274,10 +271,10 @@ export default {
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: .5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: .85rem;
font-size: 0.85rem;
}
}
}
@ -294,7 +291,7 @@ export default {
font-size: 1.4rem;
}
.des {
font-size: .75rem;
font-size: 0.75rem;
}
}
}
@ -311,10 +308,10 @@ export default {
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: .5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: .85rem;
font-size: 0.85rem;
}
}
}
@ -342,10 +339,10 @@ export default {
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: .5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: .85rem;
font-size: 0.85rem;
}
}
}
@ -373,10 +370,10 @@ export default {
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: .5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: .85rem;
font-size: 0.85rem;
}
}
}
@ -404,10 +401,10 @@ export default {
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: .5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: .85rem;
font-size: 0.85rem;
}
}
}

@ -13,8 +13,6 @@
<div class="block gray"
style="padding: 2rem 0;">
<div class="inner">
<Breadcrumb ref="breadcrumb"
:data.sync="routes" />
<ul class="items">
<li>
<img class="pic"
@ -72,7 +70,6 @@
<script>
import mixins from "@/mixins/page";
import WOW from "wow.js";
import Breadcrumb from '@/components/breadcrumb'
import Util from '@/libs/util'
export default {
mixins: [mixins],
@ -81,21 +78,14 @@ export default {
routes: [],
};
},
components: {
Breadcrumb
},
mounted () {
new WOW().init();
this.getColumn()
},
methods: {
//
getInfo () {
// /
this.$post(
`${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
)
.then(({ data }) => {
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
// state1theEditedJson稿0jsonBeforeEditing
const json = JSON.parse(
@ -111,34 +101,6 @@ export default {
})
.catch((err) => { });
},
// id
getParent (data, id) {
for (const e of data) {
if (e.id == id) {
this.routes.push({
name: e.columnName,
query: {
id: e.id
}
})
break
} else if (e.children.length) {
this.routes.push({
name: e.columnName,
query: {
id: e.id
}
})
this.getParent(e.children, id)
}
}
},
//
getColumn () {
this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`).then(({ data }) => {
this.getParent(data, this.id)
}).catch(err => { })
},
},
};
</script>
@ -161,6 +123,7 @@ export default {
.pic {
width: 100%;
height: 100%;
object-fit: cover;
}
.texts {
position: absolute;
@ -305,7 +268,6 @@ export default {
height: 643px;
text-align: center;
background: url(../../assets/images/about-bg.png) no-repeat center center;
background-size: 100% 100%;
.texts {
padding: 2.375rem 3.75rem;
color: #fff;

File diff suppressed because it is too large Load Diff

@ -49,10 +49,7 @@ export default {
//
getInfo () {
// /
this.$post(
`${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
)
.then(({ data }) => {
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
// state1theEditedJson稿0jsonBeforeEditing
const json = JSON.parse(
@ -76,7 +73,7 @@ export default {
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.block {
background: url(http://10.10.11.7/images/speech/2.png) no-repeat;
background: url(https://huorantech.com/images/speech/2.png) no-repeat;
}
.inner {
display: flex;
@ -115,11 +112,6 @@ export default {
}
}
}
@media (max-width: 1200px) {
.inner {
width: 95%;
}
}
@media (max-width: 920px) {
.inner {
flex-direction: column;

@ -298,6 +298,7 @@ export default {
line-height: 1.5rem;
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.single-banner {
.texts {

@ -322,6 +322,7 @@ export default {
}
}
}
@media (max-width: 1200px) {
.content {
width: 98%;

@ -71,28 +71,6 @@
<span class="date">{{ item.releaseTime }}</span>
</li>
</ul>
<p class="l-title">{{$t('column.hot')}}</p>
<ul class="list">
<li v-for="(item, i) in hots"
:key="i"
:title="item.title"
@click="toArtice(item)">
<p class="text">{{ item.title }}</p>
<span class="date">{{ item.releaseTime }}</span>
</li>
</ul>
<p class="l-title">{{$t('column.latestNews')}}</p>
<ul class="list">
<li v-for="(item, i) in news"
: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>
@ -136,7 +114,7 @@ export default {
json[4].list = json[4].list.filter(e => e.isEnable)
json[4].list.unshift({
title: '人才中心'
title: '加入我们'
})
json[4].list.forEach((e, i) => {
e.id = i
@ -220,13 +198,13 @@ export default {
.texts {
left: 50px;
right: auto;
background: rgba(255, 255, 255, 0.43);
}
}
}
.pic {
width: 100%;
height: 100%;
object-fit: cover;
}
.texts {
position: absolute;
@ -292,6 +270,7 @@ export default {
}
}
}
@media (max-width: 1200px) {
.content {
width: 90%;

@ -10,9 +10,9 @@
</div>
<div class="content">
<div class="left">
<ul class="list">
<li v-for="(item, i) in modules[1].list"
<template v-for="(item, i) in modules[1].list">
<li v-if="item.isEnable"
:key="i"
:class="{'cursor-pointer': isLink(item.link.linkName)}"
@click="openLink(item)">
@ -26,11 +26,9 @@
v-html="item.des"></div>
</div>
</li>
</template>
</ul>
</div>
<RightColumns />
</div>
</div>
</template>
@ -38,6 +36,7 @@
import mixins from '@/mixins/page'
import WOW from 'wow.js'
import RightColumns from '@/components/rightColumns'
import Util from '@/libs/util'
export default {
mixins: [mixins],
data () {
@ -55,10 +54,7 @@ export default {
//
getInfo () {
// /
this.$post(
`${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
)
.then(({ data }) => {
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
// state1theEditedJson稿0jsonBeforeEditing
const json = JSON.parse(
@ -103,6 +99,7 @@ export default {
width: 224px;
height: 268px;
margin-right: 25px;
object-fit: cover;
}
h6 {
font-size: 1.2rem;

@ -11,23 +11,24 @@
</div>
<div class="block share">
<div class="inner">
<div class="inner relative">
<div class="left">
<h6 class="wow fadeInUp"
v-html="modules[1].form.title"></h6>
<p class="en wow fadeInUp"
data-wow-delay="0.5s">USERS SHARE</p>
<div class="des wow fadeInUp"
data-wow-delay="0.8s">{{ modules[1].form.des }}</div>
data-wow-delay="0.8s"
v-html="modules[1].form.des"></div>
</div>
<img class="pic wow bounceInRight"
data-wow-delay="0.8s"
src="@/assets/images/userSharing/1.png"
:src="modules[1].form.pic"
alt="">
<div class="card wow bounceInLeft"
data-wow-delay="0.8s">
<p class="title">{{ modules[1].form.subTitle }}</p>
<p class="en-text">EFFICIENT OPERATION, CLASSIFICATION OPEN</p>
<p class="en-text">{{ modules[1].form.enTitle }}</p>
</div>
</div>
</div>
@ -35,7 +36,7 @@
<div class="block gray">
<ul class="group">
<li class="wow bounceInDown"
:class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
:class="{'cursor-pointer': modules[2].form.link && isLink(modules[2].form.link.linkName)}"
@click="openLink(modules[2].form)">
<img src="@/assets/images/userSharing/2.png"
alt="">
@ -44,7 +45,7 @@
</li>
<li class="wow bounceInDown"
data-wow-delay="0.1s"
:class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
:class="{'cursor-pointer': modules[3].form.link && isLink(modules[3].form.link.linkName)}"
@click="openLink(modules[3].form)">
<img src="@/assets/images/userSharing/3.png"
alt="">
@ -53,7 +54,7 @@
</li>
<li class="wow bounceInDown"
data-wow-delay="0.2s"
:class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}"
:class="{'cursor-pointer': modules[4].form.link && isLink(modules[4].form.link.linkName)}"
@click="openLink(modules[4].form)">
<img src="@/assets/images/userSharing/4.png"
alt="">
@ -126,6 +127,7 @@ export default {
}
.left {
width: 40%;
padding-right: 2%;
}
h6 {
position: relative;
@ -150,14 +152,14 @@ export default {
.pic {
width: 60%;
height: auto;
border-top-left-radius: 20px;
border-top-left-radius: 70px;
}
.card {
position: absolute;
bottom: 5.2rem;
bottom: 0;
left: 0;
width: 66.75rem;
padding: 1.875rem 0 1.875rem 21.5%;
width: 60%;
padding: 1.5rem 0 1.5rem 2%;
background: #7bacc4;
border-radius: 0px 100px 0px 0px;
opacity: 0.88;
@ -221,6 +223,7 @@ export default {
line-height: 31px;
}
}
@media (max-width: 1200px) {
body {
width: 100% !important;

Loading…
Cancel
Save