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
Split 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>
<div class="block share">
<h6>{{ modules[1].form.title }}</h6>
<h6 v-html="modules[1].form.title"></h6>
<p class="en"
v-html="modules[1].form.des"></p>
<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="inner">
<h6>{{ modules[1].form.title }}</h6>
<h6 v-html="modules[1].form.title"></h6>
<p class="en">{{ modules[1].form.subTitle }}</p>
<div class="card"
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="inner">
<h2 class="wow fadeInLeft">{{ modules[1].form.title }}</h2>
<h2 class="wow fadeInLeft"
v-html="modules[1].form.title"></h2>
<p class="en"
v-html="modules[1].form.des"></p>
<div class="texts wow fadeInDown"

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

@ -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>
@ -13,42 +18,67 @@
<div class="block station">
<div class="inner">
<h6 class="wow fadeInUp">{{ modules[1].form.title }}</h6>
<p class="en wow fadeInUp" data-wow-delay="0.5s">{{ modules[1].form.subTitle }}</p>
<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">
<h6 class="wow fadeInUp"
v-html="modules[1].form.title"></h6>
<p class="en wow fadeInUp"
data-wow-delay="0.5s">{{ modules[1].form.subTitle }}</p>
<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>
<img v-else class="pic" :src="modules[1].form.pic" alt="">
<img v-else
class="pic"
:src="modules[1].form.pic"
alt="">
</div>
<div class="des" v-html="modules[1].form.des"></div>
<div class="des"
v-html="modules[1].form.des"></div>
</div>
</div>
<ul class="list">
<li :class="['item1', {'cursor-pointer': isLink(modules[2].form.link.linkName)}]" @click="openLink(modules[2].form)">
<img src="@/assets/images/exp/2.png" alt="">
<li :class="['item1', {'cursor-pointer': isLink(modules[2].form.link.linkName)}]"
@click="openLink(modules[2].form)">
<img src="@/assets/images/exp/2.png"
alt="">
<h6>{{ modules[2].form.title }}</h6>
</li>
<li :class="['item2', {'cursor-pointer': isLink(modules[3].form.link.linkName)}]" @click="openLink(modules[3].form)">
<img src="@/assets/images/exp/3.png" alt="">
<li :class="['item2', {'cursor-pointer': isLink(modules[3].form.link.linkName)}]"
@click="openLink(modules[3].form)">
<img src="@/assets/images/exp/3.png"
alt="">
<h6>{{ modules[3].form.title }}</h6>
</li>
<li :class="['item3', {'cursor-pointer': isLink(modules[4].form.link.linkName)}]" @click="openLink(modules[4].form)">
<img src="@/assets/images/exp/4.png" alt="">
<li :class="['item3', {'cursor-pointer': isLink(modules[4].form.link.linkName)}]"
@click="openLink(modules[4].form)">
<img src="@/assets/images/exp/4.png"
alt="">
<h6>{{ modules[4].form.title }}</h6>
</li>
<li :class="['item4', {'cursor-pointer': isLink(modules[5].form.link.linkName)}]" @click="openLink(modules[5].form)">
<img src="@/assets/images/exp/5.png" alt="">
<li :class="['item4', {'cursor-pointer': isLink(modules[5].form.link.linkName)}]"
@click="openLink(modules[5].form)">
<img src="@/assets/images/exp/5.png"
alt="">
<h6>{{ modules[5].form.title }}</h6>
</li>
<li :class="['item5', {'cursor-pointer': isLink(modules[6].form.link.linkName)}]" @click="openLink(modules[6].form)">
<img src="@/assets/images/exp/6.png" alt="">
<li :class="['item5', {'cursor-pointer': isLink(modules[6].form.link.linkName)}]"
@click="openLink(modules[6].form)">
<img src="@/assets/images/exp/6.png"
alt="">
<h6>{{ modules[6].form.title }}</h6>
</li>
<li :class="['item6', {'cursor-pointer': isLink(modules[7].form.link.linkName)}]" @click="openLink(modules[7].form)">
<img src="@/assets/images/exp/7.png" alt="">
<li :class="['item6', {'cursor-pointer': isLink(modules[7].form.link.linkName)}]"
@click="openLink(modules[7].form)">
<img src="@/assets/images/exp/7.png"
alt="">
<h6>{{ modules[7].form.title }}</h6>
</li>
</ul>
@ -62,18 +92,18 @@ import Util from '@/libs/util'
import WOW from 'wow.js'
export default {
mixins: [mixins],
data() {
data () {
return {
routes: [],
Util
}
},
mounted() {
mounted () {
new WOW().init()
},
methods: {
// 获取文章详情
getInfo() {
getInfo () {
// 预览/详情
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
@ -84,7 +114,7 @@ export default {
this.modules = 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>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
.wrap{
@import '../../styles/page/page.scss';
.wrap {
/deep/ .el-carousel {
height: 12.6rem;
.el-carousel__container{
.el-carousel__container {
height: 12.6rem;
}
img{
img {
height: 12.6rem;
}
}
@ -136,7 +166,7 @@ export default {
margin-bottom: 20px;
font-size: 1.7rem;
font-family: AppleSystemUIFont;
color: #E4E4E4;
color: #e4e4e4;
line-height: 1;
}
.pic {
@ -146,7 +176,7 @@ export default {
}
.des {
margin-top: 2.75rem;
font-size: .98rem;
font-size: 0.98rem;
color: #333;
line-height: 1.7rem;
-webkit-line-clamp: inherit;
@ -171,7 +201,7 @@ export default {
img {
width: 100%;
height: 100%;
transition: .5s;
transition: 0.5s;
}
h6 {
position: absolute;
@ -182,7 +212,8 @@ export default {
font-weight: 500;
color: #fff;
}
.item1, .item2 {
.item1,
.item2 {
width: 25%;
}
.item3 {
@ -200,18 +231,18 @@ export default {
}
@media (min-width: 280px) and (max-width: 768px) {
.wrap{
.wrap {
/deep/ .el-carousel {
height: 15rem;
.el-carousel__container{
.el-carousel__container {
height: 15rem;
}
img{
img {
height: 15rem;
}
}
}
.station{
.station {
.pic {
height: 20rem;
}
@ -237,7 +268,7 @@ export default {
height: 13rem !important;
}
}
.banner-item{
.banner-item {
img {
height: 13rem !important;
}
@ -256,7 +287,6 @@ export default {
height: auto;
}
}
}
}
.list {
@ -280,7 +310,7 @@ export default {
height: 13rem !important;
}
}
.banner-item{
.banner-item {
img {
height: 13rem !important;
}
@ -299,7 +329,6 @@ export default {
height: auto;
}
}
}
}
.list {
@ -311,7 +340,7 @@ export default {
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
/deep/ .el-carousel {
height: 13rem !important;
@ -323,7 +352,7 @@ export default {
height: 13rem !important;
}
}
.banner-item{
.banner-item {
img {
height: 13rem !important;
}
@ -342,7 +371,6 @@ export default {
height: auto;
}
}
}
}
.list {
@ -366,7 +394,7 @@ export default {
height: 13rem !important;
}
}
.banner-item{
.banner-item {
img {
height: 13rem !important;
}
@ -385,7 +413,6 @@ export default {
height: auto;
}
}
}
}
.list {
@ -409,7 +436,7 @@ export default {
height: 13rem !important;
}
}
.banner-item{
.banner-item {
img {
height: 13rem !important;
}
@ -428,7 +455,6 @@ export default {
height: auto;
}
}
}
}
.list {
@ -452,7 +478,7 @@ export default {
height: 13rem !important;
}
}
.banner-item{
.banner-item {
img {
height: 13rem !important;
}
@ -471,14 +497,13 @@ export default {
height: auto;
}
}
}
}
.list {
display: flex;
width: 100%;
li {
width: 25% ;
width: 25%;
}
}
.item3 {
@ -497,7 +522,7 @@ export default {
height: 13rem !important;
}
}
.banner-item{
.banner-item {
img {
height: 13rem !important;
}
@ -516,14 +541,13 @@ export default {
height: auto;
}
}
}
}
.list {
display: flex;
width: 100%;
li {
width: 25% ;
width: 25%;
}
}
.item3 {

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

@ -19,7 +19,8 @@
<div class="block history">
<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>
<div v-if="modules[2].list.length"
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"
alt="">
<div class="right">
<h6>
{{ modules[1].form.title }}
<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"
alt="">
</h6>
</div>
<div class="text"
v-html="modules[1].form.des"></div>
</div>

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save