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

自由电子激光标题改成富文本

Browse Source
master
yujialong 1 year ago
parent 52bb3feb3c
commit 14e2083f8d
9 changed files with 1350 additions and 1279 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/pages/deviceIntroBeam/index.vue
  2. 2
      src/pages/deviceIntroLayout/index.vue
  3. 3
      src/pages/deviceIntroLinear/index.vue
  4. 136
      src/pages/exp/index.vue
  5. 3
      src/pages/overviewDevHistory/index.vue
  6. 6
      src/pages/overviewIntro/index.vue
  7. 2
      src/pages/overviewSetup/index.vue
  8. 146
      src/pages/talent/index.vue
  9. 171
      src/pages/userSharing/index.vue

2
src/pages/deviceIntroBeam/index.vue
Unescape View File

@ -17,7 +17,7 @@
</el-carousel> </el-carousel>
<div class="block share"> <div class="block share">
<h6>{{ modules[1].form.title }}</h6> <h6 v-html="modules[1].form.title"></h6>
<p class="en" <p class="en"
v-html="modules[1].form.des"></p> v-html="modules[1].form.des"></p>
<div class="sum">{{ modules[2].form.title }}</div> <div class="sum">{{ modules[2].form.title }}</div>

2
src/pages/deviceIntroLayout/index.vue
Unescape View File

@ -18,7 +18,7 @@
<div class="block share"> <div class="block share">
<div class="inner"> <div class="inner">
<h6>{{ modules[1].form.title }}</h6> <h6 v-html="modules[1].form.title"></h6>
<p class="en">{{ modules[1].form.subTitle }}</p> <p class="en">{{ modules[1].form.subTitle }}</p>
<div class="card" <div class="card"
v-html="modules[1].form.des"></div> v-html="modules[1].form.des"></div>

3
src/pages/deviceIntroLinear/index.vue
Unescape View File

@ -18,7 +18,8 @@
<div class="block history gray"> <div class="block history gray">
<div class="inner"> <div class="inner">
<h2 class="wow fadeInLeft">{{ modules[1].form.title }}</h2> <h2 class="wow fadeInLeft"
v-html="modules[1].form.title"></h2>
<p class="en" <p class="en"
v-html="modules[1].form.des"></p> v-html="modules[1].form.des"></p>
<div class="texts wow fadeInDown" <div class="texts wow fadeInDown"

136
src/pages/exp/index.vue
Unescape View File

@ -1,10 +1,15 @@
<template> <template>
<div class="wrap"> <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"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" :key="i"> <el-carousel-item v-if="item.pic && item.isEnable"
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)"> :key="i">
<img :src="item.pic" alt=""> <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> <p class="banner-name">{{ item.title }}</p>
</div> </div>
</el-carousel-item> </el-carousel-item>
@ -13,42 +18,67 @@
<div class="block station"> <div class="block station">
<div class="inner"> <div class="inner">
<h6 class="wow fadeInUp">{{ modules[1].form.title }}</h6> <h6 class="wow fadeInUp"
<p class="en wow fadeInUp" data-wow-delay="0.5s">{{ modules[1].form.subTitle }}</p> v-html="modules[1].form.title"></h6>
<div v-if="modules[1].form.pic" class="text-center"> <p class="en wow fadeInUp"
<video v-if="Util.isVideo(modules[1].form.mediaType)" class="pic" ref="video" autoplay controls loop> data-wow-delay="0.5s">{{ modules[1].form.subTitle }}</p>
<source :src="modules[1].form.pic" type="video/mp4"> <div v-if="modules[1].form.pic"
class="text-center">
<video v-if="Util.isVideo(modules[1].form.mediaType)"
class="pic"
ref="video"
autoplay
controls
loop>
<source :src="modules[1].form.pic"
type="video/mp4">
您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
</video> </video>
<img v-else class="pic" :src="modules[1].form.pic" alt=""> <img v-else
class="pic"
:src="modules[1].form.pic"
alt="">
</div> </div>
<div class="des" v-html="modules[1].form.des"></div> <div class="des"
v-html="modules[1].form.des"></div>
</div> </div>
</div> </div>
<ul class="list"> <ul class="list">
<li :class="['item1', {'cursor-pointer': isLink(modules[2].form.link.linkName)}]" @click="openLink(modules[2].form)"> <li :class="['item1', {'cursor-pointer': isLink(modules[2].form.link.linkName)}]"
<img src="@/assets/images/exp/2.png" alt=""> @click="openLink(modules[2].form)">
<img src="@/assets/images/exp/2.png"
alt="">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
</li> </li>
<li :class="['item2', {'cursor-pointer': isLink(modules[3].form.link.linkName)}]" @click="openLink(modules[3].form)"> <li :class="['item2', {'cursor-pointer': isLink(modules[3].form.link.linkName)}]"
<img src="@/assets/images/exp/3.png" alt=""> @click="openLink(modules[3].form)">
<img src="@/assets/images/exp/3.png"
alt="">
<h6>{{ modules[3].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
</li> </li>
<li :class="['item3', {'cursor-pointer': isLink(modules[4].form.link.linkName)}]" @click="openLink(modules[4].form)"> <li :class="['item3', {'cursor-pointer': isLink(modules[4].form.link.linkName)}]"
<img src="@/assets/images/exp/4.png" alt=""> @click="openLink(modules[4].form)">
<img src="@/assets/images/exp/4.png"
alt="">
<h6>{{ modules[4].form.title }}</h6> <h6>{{ modules[4].form.title }}</h6>
</li> </li>
<li :class="['item4', {'cursor-pointer': isLink(modules[5].form.link.linkName)}]" @click="openLink(modules[5].form)"> <li :class="['item4', {'cursor-pointer': isLink(modules[5].form.link.linkName)}]"
<img src="@/assets/images/exp/5.png" alt=""> @click="openLink(modules[5].form)">
<img src="@/assets/images/exp/5.png"
alt="">
<h6>{{ modules[5].form.title }}</h6> <h6>{{ modules[5].form.title }}</h6>
</li> </li>
<li :class="['item5', {'cursor-pointer': isLink(modules[6].form.link.linkName)}]" @click="openLink(modules[6].form)"> <li :class="['item5', {'cursor-pointer': isLink(modules[6].form.link.linkName)}]"
<img src="@/assets/images/exp/6.png" alt=""> @click="openLink(modules[6].form)">
<img src="@/assets/images/exp/6.png"
alt="">
<h6>{{ modules[6].form.title }}</h6> <h6>{{ modules[6].form.title }}</h6>
</li> </li>
<li :class="['item6', {'cursor-pointer': isLink(modules[7].form.link.linkName)}]" @click="openLink(modules[7].form)"> <li :class="['item6', {'cursor-pointer': isLink(modules[7].form.link.linkName)}]"
<img src="@/assets/images/exp/7.png" alt=""> @click="openLink(modules[7].form)">
<img src="@/assets/images/exp/7.png"
alt="">
<h6>{{ modules[7].form.title }}</h6> <h6>{{ modules[7].form.title }}</h6>
</li> </li>
</ul> </ul>
@ -62,18 +92,18 @@ import Util from '@/libs/util'
import WOW from 'wow.js' import WOW from 'wow.js'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data () {
return { return {
routes: [], routes: [],
Util Util
} }
}, },
mounted() { mounted () {
new WOW().init() new WOW().init()
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
getInfo() { 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) { if (data.length) {
@ -84,7 +114,7 @@ export default {
this.modules = json this.modules = json
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json) console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
} }
}).catch(err => {}) }).catch(err => { })
}, },
} }
}; };
@ -92,14 +122,14 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss"; @import '../../styles/page/page.scss';
.wrap{ .wrap {
/deep/ .el-carousel { /deep/ .el-carousel {
height: 12.6rem; height: 12.6rem;
.el-carousel__container{ .el-carousel__container {
height: 12.6rem; height: 12.6rem;
} }
img{ img {
height: 12.6rem; height: 12.6rem;
} }
} }
@ -136,7 +166,7 @@ export default {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 1.7rem; font-size: 1.7rem;
font-family: AppleSystemUIFont; font-family: AppleSystemUIFont;
color: #E4E4E4; color: #e4e4e4;
line-height: 1; line-height: 1;
} }
.pic { .pic {
@ -146,7 +176,7 @@ export default {
} }
.des { .des {
margin-top: 2.75rem; margin-top: 2.75rem;
font-size: .98rem; font-size: 0.98rem;
color: #333; color: #333;
line-height: 1.7rem; line-height: 1.7rem;
-webkit-line-clamp: inherit; -webkit-line-clamp: inherit;
@ -171,7 +201,7 @@ export default {
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: .5s; transition: 0.5s;
} }
h6 { h6 {
position: absolute; position: absolute;
@ -182,7 +212,8 @@ export default {
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
} }
.item1, .item2 { .item1,
.item2 {
width: 25%; width: 25%;
} }
.item3 { .item3 {
@ -200,18 +231,18 @@ export default {
} }
@media (min-width: 280px) and (max-width: 768px) { @media (min-width: 280px) and (max-width: 768px) {
.wrap{ .wrap {
/deep/ .el-carousel { /deep/ .el-carousel {
height: 15rem; height: 15rem;
.el-carousel__container{ .el-carousel__container {
height: 15rem; height: 15rem;
} }
img{ img {
height: 15rem; height: 15rem;
} }
} }
} }
.station{ .station {
.pic { .pic {
height: 20rem; height: 20rem;
} }
@ -237,7 +268,7 @@ export default {
height: 13rem !important; height: 13rem !important;
} }
} }
.banner-item{ .banner-item {
img { img {
height: 13rem !important; height: 13rem !important;
} }
@ -256,7 +287,6 @@ export default {
height: auto; height: auto;
} }
} }
} }
} }
.list { .list {
@ -280,7 +310,7 @@ export default {
height: 13rem !important; height: 13rem !important;
} }
} }
.banner-item{ .banner-item {
img { img {
height: 13rem !important; height: 13rem !important;
} }
@ -299,7 +329,6 @@ export default {
height: auto; height: auto;
} }
} }
} }
} }
.list { .list {
@ -311,7 +340,7 @@ export default {
} }
} }
} }
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.wrap { .wrap {
/deep/ .el-carousel { /deep/ .el-carousel {
height: 13rem !important; height: 13rem !important;
@ -323,7 +352,7 @@ export default {
height: 13rem !important; height: 13rem !important;
} }
} }
.banner-item{ .banner-item {
img { img {
height: 13rem !important; height: 13rem !important;
} }
@ -342,7 +371,6 @@ export default {
height: auto; height: auto;
} }
} }
} }
} }
.list { .list {
@ -366,7 +394,7 @@ export default {
height: 13rem !important; height: 13rem !important;
} }
} }
.banner-item{ .banner-item {
img { img {
height: 13rem !important; height: 13rem !important;
} }
@ -385,7 +413,6 @@ export default {
height: auto; height: auto;
} }
} }
} }
} }
.list { .list {
@ -409,7 +436,7 @@ export default {
height: 13rem !important; height: 13rem !important;
} }
} }
.banner-item{ .banner-item {
img { img {
height: 13rem !important; height: 13rem !important;
} }
@ -428,7 +455,6 @@ export default {
height: auto; height: auto;
} }
} }
} }
} }
.list { .list {
@ -452,7 +478,7 @@ export default {
height: 13rem !important; height: 13rem !important;
} }
} }
.banner-item{ .banner-item {
img { img {
height: 13rem !important; height: 13rem !important;
} }
@ -471,14 +497,13 @@ export default {
height: auto; height: auto;
} }
} }
} }
} }
.list { .list {
display: flex; display: flex;
width: 100%; width: 100%;
li { li {
width: 25% ; width: 25%;
} }
} }
.item3 { .item3 {
@ -497,7 +522,7 @@ export default {
height: 13rem !important; height: 13rem !important;
} }
} }
.banner-item{ .banner-item {
img { img {
height: 13rem !important; height: 13rem !important;
} }
@ -516,14 +541,13 @@ export default {
height: auto; height: auto;
} }
} }
} }
} }
.list { .list {
display: flex; display: flex;
width: 100%; width: 100%;
li { li {
width: 25% ; width: 25%;
} }
} }
.item3 { .item3 {

3
src/pages/overviewDevHistory/index.vue
Unescape View File

@ -19,7 +19,8 @@
<div class="block history"> <div class="block history">
<div class="inner"> <div class="inner">
<h2 class="wow fadeInLeft">{{ modules[1].form.title }}</h2> <h2 class="wow fadeInLeft"
v-html="modules[1].form.title"></h2>
<p class="en">{{ modules[1].form.des }}</p> <p class="en">{{ modules[1].form.des }}</p>
<div v-if="modules[2].list.length" <div v-if="modules[2].list.length"
class="event"> class="event">

6
src/pages/overviewIntro/index.vue
Unescape View File

@ -24,12 +24,12 @@
src="http://10.10.11.7/images/overviewIntro/1.png" src="http://10.10.11.7/images/overviewIntro/1.png"
alt=""> alt="">
<div class="right"> <div class="right">
<h6> <div class="relative">
{{ modules[1].form.title }} <h6 v-html="modules[1].form.title"></h6>
<img class="title-bg" <img class="title-bg"
src="http://10.10.11.7/images/overviewIntro/2.png" src="http://10.10.11.7/images/overviewIntro/2.png"
alt=""> alt="">
</h6> </div>
<div class="text" <div class="text"
v-html="modules[1].form.des"></div> v-html="modules[1].form.des"></div>
</div> </div>

2
src/pages/overviewSetup/index.vue
Unescape View File

@ -20,7 +20,7 @@
<div class="tab-content"> <div class="tab-content">
<div class="org"> <div class="org">
<div class="left"> <div class="left">
<h6>{{ modules[1].form.title }}</h6> <h6 v-html="modules[1].form.title"></h6>
<p class="text" <p class="text"
v-html="modules[1].form.des"></p> v-html="modules[1].form.des"></p>
</div> </div>

146
src/pages/talent/index.vue
Unescape View File

@ -1,7 +1,9 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" :src="modules[0].form.pic" alt=""> <img class="banner-img"
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
<p class="banner-des">{{ modules[0].form.des }}</p> <p class="banner-des">{{ modules[0].form.des }}</p>
@ -10,18 +12,28 @@
<div class="block talent"> <div class="block talent">
<div class="inner"> <div class="inner">
<div class="item wow bounceInLeft" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)"> <div class="item wow bounceInLeft"
data-wow-delay="0.5s"
:class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
@click="openLink(modules[1].form)">
<div class="img-wrap"> <div class="img-wrap">
<img class="pic" :src="modules[1].form.pic" alt=""> <img class="pic"
:src="modules[1].form.pic"
alt="">
</div> </div>
<div class="texts"> <div class="texts">
<h6>{{ modules[1].form.title }}</h6> <h6>{{ modules[1].form.title }}</h6>
<div class="des">{{ modules[1].form.des }}</div> <div class="des">{{ modules[1].form.des }}</div>
</div> </div>
</div> </div>
<div class="item wow bounceInRight" data-wow-delay="0.6s" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)"> <div class="item wow bounceInRight"
data-wow-delay="0.6s"
:class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
@click="openLink(modules[2].form)">
<div class="img-wrap"> <div class="img-wrap">
<img class="pic" :src="modules[2].form.pic" alt=""> <img class="pic"
:src="modules[2].form.pic"
alt="">
</div> </div>
<div class="texts"> <div class="texts">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
@ -32,12 +44,18 @@
</div> </div>
<div class="style"> <div class="style">
<h6 class="wow fadeInUp">{{ modules[3].form.title }}</h6> <h6 class="wow fadeInUp"
<el-carousel :interval="4000" type="card" height="30rem"> v-html="modules[3].form.title"></h6>
<el-carousel :interval="4000"
type="card"
height="30rem">
<template v-for="(item, i) in modules[4].list"> <template v-for="(item, i) in modules[4].list">
<el-carousel-item v-if="item.isEnable" :key="i"> <el-carousel-item v-if="item.isEnable"
<div class="item" @click="openLink(item)"> :key="i">
<img :src="item.pic" alt=""> <div class="item"
@click="openLink(item)">
<img :src="item.pic"
alt="">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
</div> </div>
</el-carousel-item> </el-carousel-item>
@ -47,26 +65,36 @@
<div class="block intro"> <div class="block intro">
<div class="inner"> <div class="inner">
<div class="item wow fadeInDown" data-wow-delay="0.1s"> <div class="item wow fadeInDown"
data-wow-delay="0.1s">
<div class="img-wrap"> <div class="img-wrap">
<img class="pic" :src="modules[5].form.pic" alt=""> <img class="pic"
:src="modules[5].form.pic"
alt="">
</div> </div>
<div class="texts"> <div class="texts">
<p class="type">{{ modules[5].form.subTitle }}</p> <p class="type">{{ modules[5].form.subTitle }}</p>
<h6>{{ modules[5].form.title }}</h6> <h6>{{ modules[5].form.title }}</h6>
<div class="des">{{ modules[5].form.des }}</div> <div class="des">{{ modules[5].form.des }}</div>
<el-button v-if="isLink(modules[5].form.link.linkName)" type="primary" @click="openLink(modules[5].form)">{{ $t('column.seeMore') }}</el-button> <el-button v-if="isLink(modules[5].form.link.linkName)"
type="primary"
@click="openLink(modules[5].form)">{{ $t('column.seeMore') }}</el-button>
</div> </div>
</div> </div>
<div class="item wow fadeInDown" data-wow-delay="0.3s"> <div class="item wow fadeInDown"
data-wow-delay="0.3s">
<div class="img-wrap"> <div class="img-wrap">
<img class="pic" :src="modules[6].form.pic" alt=""> <img class="pic"
:src="modules[6].form.pic"
alt="">
</div> </div>
<div class="texts"> <div class="texts">
<p class="type">{{ modules[6].form.subTitle }}</p> <p class="type">{{ modules[6].form.subTitle }}</p>
<h6>{{ modules[6].form.title }}</h6> <h6>{{ modules[6].form.title }}</h6>
<div class="des">{{ modules[6].form.des }}</div> <div class="des">{{ modules[6].form.des }}</div>
<el-button v-if="isLink(modules[6].form.link.linkName)" type="primary" @click="openLink(modules[6].form)">{{ $t('column.seeMore') }}</el-button> <el-button v-if="isLink(modules[6].form.link.linkName)"
type="primary"
@click="openLink(modules[6].form)">{{ $t('column.seeMore') }}</el-button>
</div> </div>
</div> </div>
</div> </div>
@ -82,7 +110,7 @@ import Breadcrumb from '@/components/breadcrumb'
import WOW from 'wow.js' import WOW from 'wow.js'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data () {
return { return {
routes: [] routes: []
} }
@ -90,12 +118,12 @@ export default {
components: { components: {
Breadcrumb Breadcrumb
}, },
mounted() { mounted () {
new WOW().init() new WOW().init()
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
getInfo() { 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) { if (data.length) {
@ -106,7 +134,7 @@ export default {
this.modules = json this.modules = json
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json) console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
} }
}).catch(err => {}) }).catch(err => { })
}, },
} }
}; };
@ -114,9 +142,9 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss"; @import '../../styles/page/page.scss';
.wrap { .wrap {
background: #F8F9FB; background: #f8f9fb;
} }
.single-banner { .single-banner {
.banner-img { .banner-img {
@ -125,7 +153,7 @@ export default {
.texts { .texts {
h6 { h6 {
font-size: 2.16rem; font-size: 2.16rem;
margin-bottom: .95rem; margin-bottom: 0.95rem;
} }
.banner-des { .banner-des {
font-size: 1.08rem; font-size: 1.08rem;
@ -146,7 +174,7 @@ export default {
margin-bottom: 1.8rem; margin-bottom: 1.8rem;
color: #333; color: #333;
background: #fff; background: #fff;
transition: .5s; transition: 0.5s;
&:nth-child(even) { &:nth-child(even) {
justify-content: space-between; justify-content: space-between;
flex-direction: row-reverse; flex-direction: row-reverse;
@ -169,7 +197,7 @@ export default {
.pic { .pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: .5s; transition: 0.5s;
} }
.texts { .texts {
width: 44.375rem; width: 44.375rem;
@ -182,7 +210,7 @@ export default {
font-weight: 300; font-weight: 300;
} }
.des { .des {
font-size: .88rem; font-size: 0.88rem;
line-height: 1.65rem; line-height: 1.65rem;
-webkit-line-clamp: 5; -webkit-line-clamp: 5;
} }
@ -214,9 +242,9 @@ export default {
width: 100%; width: 100%;
padding: 0 1.5rem; padding: 0 1.5rem;
line-height: 2.72rem; line-height: 2.72rem;
font-size: .96rem; font-size: 0.96rem;
color: #fff; color: #fff;
background: rgba(0,0,0,0.38); background: rgba(0, 0, 0, 0.38);
} }
} }
.intro { .intro {
@ -230,7 +258,7 @@ export default {
margin-bottom: 36px; margin-bottom: 36px;
color: #333; color: #333;
background: #fff; background: #fff;
transition: .5s; transition: 0.5s;
&:nth-child(even) { &:nth-child(even) {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
@ -249,14 +277,14 @@ export default {
.pic { .pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: .5s; transition: 0.5s;
} }
.texts { .texts {
width: 45%; width: 45%;
padding: 0 2.9rem; padding: 0 2.9rem;
} }
.type { .type {
font-size: .88rem; font-size: 0.88rem;
} }
h6 { h6 {
margin: 1rem 0; margin: 1rem 0;
@ -271,51 +299,49 @@ export default {
} }
} }
@media (min-width: 280px) and (max-width: 1200px) { @media (min-width: 280px) and (max-width: 1200px) {
.single-banner{ .single-banner {
.texts { .texts {
left: 200px; left: 200px;
.banner-title{ .banner-title {
font-size: 2.2rem; font-size: 2.2rem;
} }
} }
} }
.block { .block {
padding: 30px 0; padding: 30px 0;
.inner{ .inner {
.item { .item {
flex-direction: column; flex-direction: column;
padding: 1.5rem; padding: 1.5rem;
} }
.texts{ .texts {
width: 100%; width: 100%;
padding: 1.5rem; padding: 1.5rem;
} }
} }
} }
.style { .style {
/deep/ .el-carousel__container{ /deep/ .el-carousel__container {
height: 27rem !important; height: 27rem !important;
} }
.wow { .wow {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.item{ .item {
height: 25rem; height: 25rem;
} }
} }
} }
@media (max-width: 320px) { @media (max-width: 320px) {
.single-banner{ .single-banner {
.banner-img { .banner-img {
height: 12rem; height: 12rem;
} }
.texts { .texts {
left: 2rem; left: 2rem;
top:3rem; top: 3rem;
.banner-title{ .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.banner-des { .banner-des {
@ -352,14 +378,14 @@ export default {
} }
} }
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.single-banner{ .single-banner {
.banner-img { .banner-img {
height: 12rem; height: 12rem;
} }
.texts { .texts {
left: 2rem; left: 2rem;
top:3rem; top: 3rem;
.banner-title{ .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.banner-des { .banner-des {
@ -396,14 +422,14 @@ export default {
} }
} }
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.single-banner{ .single-banner {
.banner-img { .banner-img {
height: 12rem; height: 12rem;
} }
.texts { .texts {
left: 2rem; left: 2rem;
top:3rem; top: 3rem;
.banner-title{ .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.banner-des { .banner-des {
@ -440,14 +466,14 @@ export default {
} }
} }
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.single-banner{ .single-banner {
.banner-img { .banner-img {
height: 12rem; height: 12rem;
} }
.texts { .texts {
left: 2rem; left: 2rem;
top:3rem; top: 3rem;
.banner-title{ .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.banner-des { .banner-des {
@ -484,14 +510,14 @@ export default {
} }
} }
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.single-banner{ .single-banner {
.banner-img { .banner-img {
height: 12rem; height: 12rem;
} }
.texts { .texts {
left: 2rem; left: 2rem;
top:3rem; top: 3rem;
.banner-title{ .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.banner-des { .banner-des {
@ -528,14 +554,14 @@ export default {
} }
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.single-banner{ .single-banner {
.banner-img { .banner-img {
height: 12rem; height: 12rem;
} }
.texts { .texts {
left: 2rem; left: 2rem;
top:3rem; top: 3rem;
.banner-title{ .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.banner-des { .banner-des {
@ -578,14 +604,14 @@ export default {
} }
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.single-banner{ .single-banner {
.banner-img { .banner-img {
height: 12rem; height: 12rem;
} }
.texts { .texts {
left: 2rem; left: 2rem;
top:3rem; top: 3rem;
.banner-title{ .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.banner-des { .banner-des {

171
src/pages/userSharing/index.vue
Unescape View File

@ -1,7 +1,9 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" :src="modules[0].form.pic" alt=""> <img class="banner-img"
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
<p class="banner-des">{{ modules[0].form.des }}</p> <p class="banner-des">{{ modules[0].form.des }}</p>
@ -11,12 +13,19 @@
<div class="block share"> <div class="block share">
<div class="inner"> <div class="inner">
<div class="left"> <div class="left">
<h6 class="wow fadeInUp">{{ modules[1].form.title }}</h6> <h6 class="wow fadeInUp"
<p class="en wow fadeInUp" data-wow-delay="0.5s">USERS SHARE</p> v-html="modules[1].form.title"></h6>
<div class="des wow fadeInUp" data-wow-delay="0.8s">{{ modules[1].form.des }}</div> <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>
</div> </div>
<img class="pic wow bounceInRight" data-wow-delay="0.8s" src="@/assets/images/userSharing/1.png" alt=""> <img class="pic wow bounceInRight"
<div class="card wow bounceInLeft" data-wow-delay="0.8s"> data-wow-delay="0.8s"
src="@/assets/images/userSharing/1.png"
alt="">
<div class="card wow bounceInLeft"
data-wow-delay="0.8s">
<p class="title">{{ modules[1].form.subTitle }}</p> <p class="title">{{ modules[1].form.subTitle }}</p>
<p class="en-text">EFFICIENT OPERATION, CLASSIFICATION OPEN</p> <p class="en-text">EFFICIENT OPERATION, CLASSIFICATION OPEN</p>
</div> </div>
@ -25,18 +34,29 @@
<div class="block gray"> <div class="block gray">
<ul class="group"> <ul class="group">
<li class="wow bounceInDown" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)"> <li class="wow bounceInDown"
<img src="@/assets/images/userSharing/2.png" alt=""> :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
@click="openLink(modules[2].form)">
<img src="@/assets/images/userSharing/2.png"
alt="">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des">{{ modules[2].form.des }}</div> <div class="des">{{ modules[2].form.des }}</div>
</li> </li>
<li class="wow bounceInDown" data-wow-delay="0.1s" :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" @click="openLink(modules[3].form)"> <li class="wow bounceInDown"
<img src="@/assets/images/userSharing/3.png" alt=""> data-wow-delay="0.1s"
:class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
@click="openLink(modules[3].form)">
<img src="@/assets/images/userSharing/3.png"
alt="">
<h6>{{ modules[3].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
<div class="des">{{ modules[3].form.des }}</div> <div class="des">{{ modules[3].form.des }}</div>
</li> </li>
<li class="wow bounceInDown" data-wow-delay="0.2s" :class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}" @click="openLink(modules[4].form)"> <li class="wow bounceInDown"
<img src="@/assets/images/userSharing/4.png" alt=""> data-wow-delay="0.2s"
:class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}"
@click="openLink(modules[4].form)">
<img src="@/assets/images/userSharing/4.png"
alt="">
<h6>{{ modules[4].form.title }}</h6> <h6>{{ modules[4].form.title }}</h6>
<div class="des">{{ modules[4].form.des }}</div> <div class="des">{{ modules[4].form.des }}</div>
</li> </li>
@ -52,17 +72,17 @@ import Util from '@/libs/util'
import WOW from 'wow.js' import WOW from 'wow.js'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data () {
return { return {
routes: [] routes: []
} }
}, },
mounted() { mounted () {
new WOW().init() new WOW().init()
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
getInfo() { 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) { if (data.length) {
@ -73,7 +93,7 @@ export default {
this.modules = json this.modules = json
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json) console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
} }
}).catch(err => {}) }).catch(err => { })
}, },
} }
}; };
@ -81,7 +101,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss"; @import '../../styles/page/page.scss';
.single-banner { .single-banner {
.banner-img { .banner-img {
height: 21.6rem; height: 21.6rem;
@ -89,10 +109,10 @@ export default {
.texts { .texts {
h6 { h6 {
font-size: 2.16rem; font-size: 2.16rem;
margin-bottom: .95rem; margin-bottom: 0.95rem;
} }
.banner-des { .banner-des {
font-size: .96rem; font-size: 0.96rem;
} }
} }
} }
@ -103,7 +123,6 @@ export default {
position: relative; position: relative;
.inner { .inner {
display: flex; display: flex;
} }
.left { .left {
width: 40%; width: 40%;
@ -119,14 +138,14 @@ export default {
margin-top: 0; margin-top: 0;
font-size: 1.28rem; font-size: 1.28rem;
font-family: AppleSystemUIFont; font-family: AppleSystemUIFont;
color: #E4E4E4; color: #e4e4e4;
} }
.des { .des {
margin-top: 25px; margin-top: 25px;
font-size: .81rem; font-size: 0.81rem;
color: #333; color: #333;
line-height: 1.75rem; line-height: 1.75rem;
-webkit-line-clamp:5; -webkit-line-clamp: 5;
} }
.pic { .pic {
width: 60%; width: 60%;
@ -139,12 +158,12 @@ export default {
left: 0; left: 0;
width: 66.75rem; width: 66.75rem;
padding: 1.875rem 0 1.875rem 21.5%; padding: 1.875rem 0 1.875rem 21.5%;
background: #7BACC4; background: #7bacc4;
border-radius: 0px 100px 0px 0px; border-radius: 0px 100px 0px 0px;
opacity: 0.88; opacity: 0.88;
} }
.title { .title {
margin-bottom: .625rem; margin-bottom: 0.625rem;
font-size: 1.44rem; font-size: 1.44rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
@ -185,7 +204,7 @@ export default {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: .5s; transition: 0.5s;
} }
h6 { h6 {
position: relative; position: relative;
@ -203,33 +222,33 @@ export default {
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
body{ body {
width: 100% !important; width: 100% !important;
} }
.share{ .share {
width: 100%; width: 100%;
.inner{ .inner {
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
.left{ .left {
width: 100%; width: 100%;
} }
} }
.des{ .des {
display: block; display: block;
padding: 0 10px; padding: 0 10px;
} }
.pic{ .pic {
width: 100%; width: 100%;
} }
.card{ .card {
width: 100%; width: 100%;
} }
} }
.group { .group {
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
li{ li {
width: 100%; width: 100%;
margin-top: 20px; margin-top: 20px;
} }
@ -245,12 +264,12 @@ export default {
.texts { .texts {
top: 7rem; top: 7rem;
left: 2rem; left: 2rem;
.banner-title{ .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: 0.5rem;
} }
.banner-des{ .banner-des {
font-size: .85rem; font-size: 0.85rem;
} }
} }
} }
@ -261,14 +280,14 @@ export default {
.pic { .pic {
height: auto; height: auto;
} }
.card{ .card {
padding: 1.875rem 0 1.875rem 18.5%; padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0; bottom: 0;
.title { .title {
font-size: 1.4rem; font-size: 1.4rem;
} }
.en-text { .en-text {
font-size: .9rem; font-size: 0.9rem;
} }
} }
} }
@ -283,12 +302,12 @@ export default {
.texts { .texts {
top: 7rem; top: 7rem;
left: 2rem; left: 2rem;
.banner-title{ .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: 0.5rem;
} }
.banner-des{ .banner-des {
font-size: .85rem; font-size: 0.85rem;
} }
} }
} }
@ -299,14 +318,14 @@ export default {
.pic { .pic {
height: auto; height: auto;
} }
.card{ .card {
padding: 1.875rem 0 1.875rem 18.5%; padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0; bottom: 0;
.title { .title {
font-size: 1.4rem; font-size: 1.4rem;
} }
.en-text { .en-text {
font-size: .9rem; font-size: 0.9rem;
} }
} }
} }
@ -326,12 +345,12 @@ export default {
.texts { .texts {
top: 7rem; top: 7rem;
left: 2rem; left: 2rem;
.banner-title{ .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: 0.5rem;
} }
.banner-des{ .banner-des {
font-size: .85rem; font-size: 0.85rem;
} }
} }
} }
@ -342,14 +361,14 @@ export default {
.pic { .pic {
height: auto; height: auto;
} }
.card{ .card {
padding: 1.875rem 0 1.875rem 18.5%; padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0; bottom: 0;
.title { .title {
font-size: 1.4rem; font-size: 1.4rem;
} }
.en-text { .en-text {
font-size: .9rem; font-size: 0.9rem;
} }
} }
} }
@ -369,12 +388,12 @@ export default {
.texts { .texts {
top: 7rem; top: 7rem;
left: 2rem; left: 2rem;
.banner-title{ .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: 0.5rem;
} }
.banner-des{ .banner-des {
font-size: .85rem; font-size: 0.85rem;
} }
} }
} }
@ -385,14 +404,14 @@ export default {
.pic { .pic {
height: auto; height: auto;
} }
.card{ .card {
padding: 1.875rem 0 1.875rem 18.5%; padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0; bottom: 0;
.title { .title {
font-size: 1.4rem; font-size: 1.4rem;
} }
.en-text { .en-text {
font-size: .9rem; font-size: 0.9rem;
} }
} }
} }
@ -412,12 +431,12 @@ export default {
.texts { .texts {
top: 7rem; top: 7rem;
left: 2rem; left: 2rem;
.banner-title{ .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: 0.5rem;
} }
.banner-des{ .banner-des {
font-size: .85rem; font-size: 0.85rem;
} }
} }
} }
@ -428,14 +447,14 @@ export default {
.pic { .pic {
height: auto; height: auto;
} }
.card{ .card {
padding: 1.875rem 0 1.875rem 18.5%; padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0; bottom: 0;
.title { .title {
font-size: 1.4rem; font-size: 1.4rem;
} }
.en-text { .en-text {
font-size: .9rem; font-size: 0.9rem;
} }
} }
} }
@ -458,12 +477,12 @@ export default {
.texts { .texts {
top: 7rem; top: 7rem;
left: 2rem; left: 2rem;
.banner-title{ .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: 0.5rem;
} }
.banner-des{ .banner-des {
font-size: .85rem; font-size: 0.85rem;
} }
} }
} }
@ -474,14 +493,14 @@ export default {
.pic { .pic {
height: auto; height: auto;
} }
.card{ .card {
padding: 1.875rem 0 1.875rem 18.5%; padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0; bottom: 0;
.title { .title {
font-size: 1.4rem; font-size: 1.4rem;
} }
.en-text { .en-text {
font-size: .9rem; font-size: 0.9rem;
} }
} }
} }
@ -504,12 +523,12 @@ export default {
.texts { .texts {
top: 7rem; top: 7rem;
left: 2rem; left: 2rem;
.banner-title{ .banner-title {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: .5rem; margin-bottom: 0.5rem;
} }
.banner-des{ .banner-des {
font-size: .85rem; font-size: 0.85rem;
} }
} }
} }
@ -520,14 +539,14 @@ export default {
.pic { .pic {
height: auto; height: auto;
} }
.card{ .card {
padding: 1.875rem 0 1.875rem 18.5%; padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0; bottom: 0;
.title { .title {
font-size: 1.4rem; font-size: 1.4rem;
} }
.en-text { .en-text {
font-size: .9rem; font-size: 0.9rem;
} }
} }
} }

Write Preview
Loading…
Cancel
Save