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

fix

Browse Source
master
yujialong 2 months ago
parent f62303137c
commit 0134ba874e
1 changed files with 308 additions and 300 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. 608
      src/pages/industrial/index.vue

608
src/pages/industrial/index.vue
Unescape View File

@ -1,80 +1,58 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="" />
: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>
</div> </div>
</div> </div>
<div class="block history gray"> <div class="block history gray">
<div class="inner" <div class="inner" :class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }"
:class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)">
@click="openLink(modules[1].form)"> <h2 class="wow fadeInLeft" style="margin-left: 57px" v-html="modules[1].form.title"></h2>
<h2 class="wow fadeInLeft" <div class="texts wow fadeInDown" data-wow-delay="0.5s">
style="margin-left: 57px"
v-html="modules[1].form.title"></h2>
<div class="texts wow fadeInDown"
data-wow-delay="0.5s">
<div class="left"> <div class="left">
<h2>{{ modules[1].form.subTitle }}</h2> <h2>{{ modules[1].form.subTitle }}</h2>
<div class="text" <div class="text" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div>
</div> </div>
<img class="bg" <img class="bg" :src="modules[1].form.pic" alt="">
:src="modules[1].form.pic"
alt="">
</div> </div>
</div> </div>
</div> </div>
<div class="block land"> <div class="block land">
<div class="inner"> <div class="inner">
<img class="pic wow fadeInLeft" <img class="pic wow fadeInLeft" :src="modules[2].form.pic" alt="">
:src="modules[2].form.pic"
alt="">
<div class="right wow fadeInDown"> <div class="right wow fadeInDown">
<h6 v-html="modules[2].form.title"></h6> <h6 v-html="modules[2].form.title"></h6>
<div class="text" <div class="text" v-html="modules[2].form.des"></div>
v-html="modules[2].form.des"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="block gray"> <div class="block gray">
<div class="inner"> <div class="inner">
<h2 class="b-title wow fadeInUp plan-title" <h2 class="b-title wow fadeInUp plan-title" v-html="modules[3].form.title"></h2>
v-html="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="plan"> <ul class="plan">
<li> <li>
<div class="left"> <div class="left">
<h6 v-html="modules[4].form.title"></h6> <h6 v-html="modules[4].form.title"></h6>
<div class="text" <div class="text" v-html="modules[4].form.des"></div>
v-html="modules[4].form.des"></div> <a v-if="isLink(modules[4].form.link.linkName)" class="survey" @click="openLink(modules[4].form)">需求调研
<a v-if="isLink(modules[4].form.link.linkName)" ></a>
class="survey"
@click="openLink(modules[4].form)">需求调研 ></a>
</div> </div>
<img class="pic" <img class="pic" :src="modules[4].form.pic" alt="">
:src="modules[4].form.pic"
alt="">
</li> </li>
<li> <li>
<div class="left"> <div class="left">
<h6 v-html="modules[5].form.title"></h6> <h6 v-html="modules[5].form.title"></h6>
<div class="text" <div class="text" v-html="modules[5].form.des"></div>
v-html="modules[5].form.des"></div> <a v-if="isLink(modules[5].form.link.linkName)" class="survey" @click="openLink(modules[5].form)">需求调研
<a v-if="isLink(modules[5].form.link.linkName)" ></a>
class="survey"
@click="openLink(modules[5].form)">需求调研 ></a>
</div> </div>
<img class="pic" <img class="pic" :src="modules[5].form.pic" alt="">
:src="modules[5].form.pic"
alt="">
</li> </li>
</ul> </ul>
</div> </div>
@ -82,23 +60,14 @@
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<h2 class="b-title" <h2 class="b-title" :class="{ 'wow fadeInUp': $store.getters.getModelType }" v-html="modules[6].form.title"></h2>
:class="{'wow fadeInUp': $store.getters.getModelType}" <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
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"> <ul class="app">
<li v-for="(item, i) in modules[7].list" <li v-for="(item, i) in modules[7].list" :key="i" :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
:key="i" :class="{ 'cursor-pointer': isLink(item.link.linkName), 'wow fadeInDown': $store.getters.getModelType }"
:data-wow-delay="(0.2 * i).toFixed(1) + 's'" @click="openLink(item)">
:class="{'cursor-pointer': isLink(item.link.linkName),'wow fadeInDown': $store.getters.getModelType}" <img class="bg" :src="require('@/assets/images/industrial/app' + (i + 1) + '.png')" alt="">
@click="openLink(item)"> <img class="icon" :src="require('@/assets/images/industrial/app' + (i + 1) + '-1.png')" alt="">
<img class="bg"
:src="require('@/assets/images/industrial/app' + (i + 1) + '.png')"
alt="">
<img class="icon"
:src="require('@/assets/images/industrial/app' + (i + 1) + '-1.png')"
alt="">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
</li> </li>
</ul> </ul>
@ -107,30 +76,20 @@
<div class="block news-block"> <div class="block news-block">
<div class="inner"> <div class="inner">
<h2 class="b-title" <h2 class="b-title" :class="{ 'wow fadeInUp': $store.getters.getModelType }" v-html="modules[8].form.title"></h2>
:class="{'wow fadeInUp': $store.getters.getModelType}" <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
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"> <ul class="news">
<li :class="{'wow fadeInDown': $store.getters.getModelType}" <li :class="{ 'wow fadeInDown': $store.getters.getModelType }" :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
:data-wow-delay="(0.2 * i).toFixed(1) + 's'" v-for="(item, i) in articles" :key="i" @click="toArtice(item, modules[9].form)">
v-for="(item, i) in articles" <img :src="item.titleImg" alt="">
:key="i"
@click="toArtice(item, modules[9].form)">
<img :src="item.titleImg"
alt="">
<div class="texts"> <div class="texts">
<span class="meta">{{ item.releaseTime }}</span> <span class="meta">{{ item.releaseTime }}</span>
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
</div> </div>
</li> </li>
</ul> </ul>
<div class="all-link" <div class="all-link" @click="toAll(modules[9].form)">
@click="toAll(modules[9].form)"> <span>{{ $t('column.all') }} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
<span>{{$t('column.all')}} <img class="icon"
src="@/assets/images/arrow.png"
alt=""></span>
</div> </div>
</div> </div>
</div> </div>
@ -187,264 +146,313 @@ 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';
.history { .history {
h2 { h2 {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 1.8rem; font-size: 1.8rem;
color: #333; color: #333;
} }
.texts {
display: flex; .texts {
justify-content: space-between; display: flex;
padding: 30px 57px; justify-content: space-between;
background-color: #fff; padding: 30px 57px;
border-radius: 100px 0px 0px 0px; background-color: #fff;
transition: 0.3s; border-radius: 100px 0px 0px 0px;
&:hover { transition: 0.3s;
transform: scale(1.05);
} &:hover {
} transform: scale(1.05);
.left {
width: 500px;
padding-right: 30px;
}
.text {
margin: 20px 0;
font-size: 1.2rem;
color: #181818;
line-height: 31px;
@include mul-ellipsis(10);
}
.bg {
width: 560px;
height: 500px;
margin: -122px -83px 0 0;
// object-fit: cover;
} }
}
.left {
width: 500px;
padding-right: 30px;
}
.text {
margin: 20px 0;
font-size: 1.2rem;
color: #181818;
line-height: 31px;
@include mul-ellipsis(10);
}
.bg {
width: 560px;
height: 500px;
margin: -122px -83px 0 0;
// object-fit: cover;
}
} }
.land { .land {
.inner { .inner {
display: flex; display: flex;
} }
.pic {
width: 50%; .pic {
height: 450px; width: 50%;
object-fit: cover; height: 450px;
object-fit: cover;
}
.right {
width: 50%;
}
h6 {
margin-left: 50px;
font-size: 1.3rem;
font-family: PingFangSC-Semibold, PingFang SC;
color: #333;
@include ellipsis();
}
.text {
height: 405px;
padding: 50px;
margin-top: 1rem;
background: rgba(242, 246, 248, 0.45);
border-radius: 0px 100px 0px 0px;
}
}
.plan {
li {
display: flex;
justify-content: space-between;
height: 433px;
margin-bottom: 60px;
color: #333;
background-color: #fff;
border-radius: 100px 0px 0px 0px;
&:nth-child(even) {
flex-direction: row-reverse;
.pic {
margin: -20px 0 0 -20px;
border-radius: 0 100px 0 0;
}
} }
.right {
width: 50%; .left {
width: 50%;
padding: 50px;
} }
h6 { h6 {
margin-left: 50px; font-size: 1.4rem;
font-size: 1.3rem; font-family: PingFangSC-Medium, PingFang SC;
font-family: PingFangSC-Semibold, PingFang SC;
color: #333;
@include ellipsis();
} }
.text { .text {
height: 405px; margin: 14px 0 40px;
padding: 50px; font-size: 1rem;
margin-top: 1rem; line-height: 1.6;
background: rgba(242, 246, 248, 0.45);
border-radius: 0px 100px 0px 0px;
} }
}
.plan { .survey {
li { padding: 8px 15px;
display: flex; font-size: 0.9rem;
justify-content: space-between; color: #fff;
height: 433px; background-color: #1150ac;
margin-bottom: 60px; cursor: pointer;
color: #333; border-radius: 4px;
background-color: #fff; }
border-radius: 100px 0px 0px 0px;
&:nth-child(even) { .pic {
flex-direction: row-reverse; width: 48%;
.pic { height: 423px;
margin: -20px 0 0 -20px; margin: -20px -20px 0 0;
border-radius: 0 100px 0 0; border-radius: 100px 0 0 0;
} object-fit: cover;
}
.left {
width: 50%;
padding: 50px;
}
h6 {
font-size: 1.4rem;
font-family: PingFangSC-Medium, PingFang SC;
}
.text {
margin: 14px 0 40px;
font-size: 1rem;
line-height: 1.6;
}
.survey {
padding: 8px 15px;
font-size: 0.9rem;
color: #fff;
background-color: #1150ac;
cursor: pointer;
border-radius: 4px;
}
.pic {
width: 48%;
height: 423px;
margin: -20px -20px 0 0;
border-radius: 100px 0 0 0;
object-fit: cover;
}
} }
}
} }
.app { .app {
display: flex;
flex-wrap: wrap;
li {
position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-direction: column;
li { justify-content: center;
position: relative; align-items: center;
display: flex; width: calc((100% - 30px) / 4);
flex-direction: column; height: 200px;
justify-content: center; margin: 0 10px 10px 0;
align-items: center; transition: 0.3s;
width: calc((100% - 30px) / 4);
height: 200px; &:hover {
margin: 0 10px 10px 0; transform: scale(1.05);
transition: 0.3s;
&:hover { .icon {
transform: scale(1.05); transform: rotateY(180deg);
.icon { }
transform: rotateY(180deg);
}
}
&:nth-child(4n) {
margin-right: 0;
}
}
.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.icon {
position: relative;
width: 62px;
transition: 0.5s;
} }
.text {
position: relative; &:nth-child(4n) {
margin-top: 20px; margin-right: 0;
font-size: 32px;
color: #fff;
} }
}
.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.icon {
position: relative;
width: 62px;
transition: 0.5s;
}
.text {
position: relative;
margin-top: 20px;
font-size: 32px;
color: #fff;
}
} }
.news { .news {
position: relative; position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
li {
width: calc((100% - 34px) / 3); li {
margin: 0 17px 20px 0; width: calc((100% - 34px) / 3);
background-color: #fff; margin: 0 17px 20px 0;
cursor: pointer; background-color: #fff;
&:nth-child(3n) { cursor: pointer;
margin-right: 0;
} &:nth-child(3n) {
} margin-right: 0;
img {
width: 100%;
height: 220px;
object-fit: cover;
} }
}
img {
width: 100%;
height: 220px;
object-fit: cover;
}
.texts {
padding: 20px 24px;
background-color: #fff;
}
h6 {
margin-top: 8px;
font-size: 1rem;
color: #333;
text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21);
}
.meta {
font-size: 0.9rem;
color: #666;
text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21);
}
}
@media (max-width: 1200px) {
.history {
.texts { .texts {
padding: 20px 24px; flex-direction: column;
background-color: #fff;
} }
h6 {
margin-top: 8px; .left {
font-size: 1rem; width: 100%;
color: #333;
text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21);
} }
.meta {
font-size: 0.9rem; .bg {
color: #666; width: 100%;
text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21); height: auto;
margin-top: 1rem;
} }
} }
@media (max-width: 1200px) { .land {
.history { .inner {
.texts { flex-direction: column;
flex-direction: column;
}
.left {
width: 100%;
}
.bg {
width: 100%;
height: auto;
margin-top: 1rem;
}
} }
.land {
.inner { .pic,
flex-direction: column; .right {
} width: 100%;
.pic,
.right {
width: 100%;
}
h6 {
margin-left: 0;
}
.right {
margin-top: 1rem;
}
.text {
height: auto;
}
} }
.plan {
li { h6 {
flex-direction: column !important; margin-left: 0;
height: auto;
.left,
.pic {
width: 100%;
}
.pic {
margin: 1rem 0 0 !important;
}
}
} }
.app {
li { .right {
width: calc((100% - 10px) / 2); margin-top: 1rem;
height: 267px;
&:nth-child(2n) {
margin-right: 0;
}
}
} }
.news {
flex-direction: column; .text {
li { height: auto;
width: 100%; }
margin: 0 0 20px 0; }
}
.plan {
li {
flex-direction: column !important;
height: auto;
.left,
.pic {
width: 100%;
}
.pic {
margin: 1rem 0 0 !important;
}
}
}
.app {
li {
width: calc((100% - 10px) / 2);
height: 267px;
&:nth-child(2n) {
margin-right: 0;
}
}
}
.news {
flex-direction: column;
li {
width: 100%;
margin: 0 0 20px 0;
} }
}
} }
@media (max-width: 780px) { @media (max-width: 780px) {
.app { .app {
li { li {
width: 100%; width: 100%;
margin-right: 0; margin-right: 0;
}
}
.plan-title:after {
display: none;
} }
}
.plan-title:after {
display: none;
}
} }
</style> </style>

Write Preview
Loading…
Cancel
Save