yujialong 4 months ago
parent 95773d1d73
commit e17d895b2e
  1. 14
      src/layouts/footer/index.vue
  2. 6
      src/layouts/navbar/index.vue
  3. 2
      src/pages/column/index.vue
  4. 153
      src/pages/exp/index.vue
  5. 149
      src/pages/overview/index.vue
  6. 2
      src/setting.js

@ -553,11 +553,23 @@ export default {
.float { .float {
position: relative; position: relative;
&:hover .popup { // &:first-child .popup {
// display: block;
// }
&:hover {
// &~.float {
// .popup {
// display: none;
// }
// }
.popup {
display: block; display: block;
} }
} }
} }
}
@media (max-width: 1500px) { @media (max-width: 1500px) {
.footer { .footer {

@ -146,8 +146,10 @@ export default {
}, },
// //
jump (id) { jump (id) {
this.getPath(this.otherMenus, id || this.otherMenus[0].id) id = id || this.otherMenus[0].id
this.getPath(this.menus, id || this.menus[0].id) this.active = id
this.getPath(this.otherMenus, id)
this.getPath(this.menus, id)
this.columnTo(this.toItem) this.columnTo(this.toItem)
this.$parent.showSearch = false this.$parent.showSearch = false
this.$emit('updateModelType', false) this.$emit('updateModelType', false)

@ -662,7 +662,7 @@ export default {
} }
} else if (typeId === 3) { } else if (typeId === 3) {
// path // path
this.$router.push(`/${to.path}?id=${to.id}&siteId=${this.site}`).catch(() => { }) this.$router.replace(`/${to.path}?id=${to.id}&siteId=${this.site}`).catch(() => { })
} else if (left && (typeId === 1 || (typeId === 4 && !to.children.length))) { } else if (left && (typeId === 1 || (typeId === 4 && !to.children.length))) {
// column // column
this.$router.push(`/column?id=${to.id + (to.level !== 1 || !this.sameStyle ? '&column=1' : '')}&siteId=${this.site}`).catch((err) => { }); this.$router.push(`/column?id=${to.id + (to.level !== 1 || !this.sameStyle ? '&column=1' : '')}&siteId=${this.site}`).catch((err) => { });

@ -4,12 +4,9 @@
:arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :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'"> :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" <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
:key="i"> <div :class="['banner-item', { 'cursor-pointer': isLink(item.link.linkName) }]" @click="openLink(item)">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" <img :src="item.pic" alt="">
@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>
@ -18,67 +15,48 @@
<div class="block station"> <div class="block station">
<div class="inner"> <div class="inner">
<h6 class="wow fadeInUp" <h6 class="wow fadeInUp" v-html="modules[1].form.title"></h6>
v-html="modules[1].form.title"></h6> <p class="en wow fadeInUp" data-wow-delay="0.5s">{{ modules[1].form.subTitle }}</p>
<p class="en wow fadeInUp" <div v-if="modules[1].form.pic" class="text-center">
data-wow-delay="0.5s">{{ modules[1].form.subTitle }}</p> <video v-if="Util.isVideo(modules[1].form.mediaType)" class="pic" ref="video" autoplay controls loop>
<div v-if="modules[1].form.pic" <source :src="modules[1].form.pic" type="video/mp4">
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 <img v-else class="pic" :src="modules[1].form.pic" alt="">
class="pic"
:src="modules[1].form.pic"
alt="">
</div> </div>
<div class="des" <div class="des" v-html="modules[1].form.des"></div>
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) }]" <li :class="['item1', { 'cursor-pointer': isLink(modules[2].form.link.linkName) }]"
@click="openLink(modules[2].form)"> @click="openLink(modules[2].form)">
<img src="@/assets/images/exp/2.png" <img src="@/assets/images/exp/2.png" alt="">
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) }]" <li :class="['item2', { 'cursor-pointer': isLink(modules[3].form.link.linkName) }]"
@click="openLink(modules[3].form)"> @click="openLink(modules[3].form)">
<img src="@/assets/images/exp/3.png" <img src="@/assets/images/exp/3.png" alt="">
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) }]" <li :class="['item3', { 'cursor-pointer': isLink(modules[4].form.link.linkName) }]"
@click="openLink(modules[4].form)"> @click="openLink(modules[4].form)">
<img src="@/assets/images/exp/4.png" <img src="@/assets/images/exp/4.png" alt="">
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) }]" <li :class="['item4', { 'cursor-pointer': isLink(modules[5].form.link.linkName) }]"
@click="openLink(modules[5].form)"> @click="openLink(modules[5].form)">
<img src="@/assets/images/exp/5.png" <img src="@/assets/images/exp/5.png" alt="">
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) }]" <li :class="['item5', { 'cursor-pointer': isLink(modules[6].form.link.linkName) }]"
@click="openLink(modules[6].form)"> @click="openLink(modules[6].form)">
<img src="@/assets/images/exp/6.png" <img src="@/assets/images/exp/6.png" alt="">
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) }]" <li :class="['item6', { 'cursor-pointer': isLink(modules[7].form.link.linkName) }]"
@click="openLink(modules[7].form)"> @click="openLink(modules[7].form)">
<img src="@/assets/images/exp/7.png" <img src="@/assets/images/exp/7.png" alt="">
alt="">
<h6>{{ modules[7].form.title }}</h6> <h6>{{ modules[7].form.title }}</h6>
</li> </li>
</ul> </ul>
@ -124,18 +102,23 @@ export default {
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss'; @import '../../styles/page/page.scss';
$banner-height: 21.6rem; $banner-height: 21.6rem;
.wrap { .wrap {
padding-bottom: 70px; padding-bottom: 70px;
/deep/ .el-carousel { /deep/ .el-carousel {
height: $banner-height; height: $banner-height;
.el-carousel__container { .el-carousel__container {
height: $banner-height; height: $banner-height;
} }
img { img {
height: $banner-height; height: $banner-height;
} }
} }
} }
.banner-item { .banner-item {
.banner-name { .banner-name {
font-size: 2.16rem; font-size: 2.16rem;
@ -143,18 +126,22 @@ $banner-height: 21.6rem;
bottom: 20%; bottom: 20%;
} }
} }
.block { .block {
padding: 3.85rem 0; padding: 3.85rem 0;
.inner { .inner {
h6 { h6 {
font-size: 1.76rem; font-size: 1.76rem;
} }
.en { .en {
font-size: 1.76rem; font-size: 1.76rem;
margin: 0px 0 2rem; margin: 0px 0 2rem;
} }
} }
} }
.station { .station {
h6 { h6 {
position: relative; position: relative;
@ -164,6 +151,7 @@ $banner-height: 21.6rem;
color: #333333; color: #333333;
line-height: 1; line-height: 1;
} }
.en { .en {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 1.7rem; font-size: 1.7rem;
@ -171,11 +159,13 @@ $banner-height: 21.6rem;
color: #e4e4e4; color: #e4e4e4;
line-height: 1; line-height: 1;
} }
.pic { .pic {
width: 64%; width: 64%;
height: auto; height: auto;
margin: 0 auto; margin: 0 auto;
} }
.des { .des {
margin-top: 2.75rem; margin-top: 2.75rem;
font-size: 0.98rem; font-size: 0.98rem;
@ -184,27 +174,32 @@ $banner-height: 21.6rem;
-webkit-line-clamp: inherit; -webkit-line-clamp: inherit;
} }
} }
.list { .list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 1.5rem; margin-top: 1.5rem;
width: 1200px; width: 1200px;
margin: auto; margin: auto;
li { li {
position: relative; position: relative;
height: 20.1rem; height: 20.1rem;
overflow: hidden; overflow: hidden;
&:hover { &:hover {
img { img {
transform: scale(1.3); transform: scale(1.3);
} }
} }
} }
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: 0.5s; transition: 0.5s;
} }
h6 { h6 {
position: absolute; position: absolute;
top: 192px; top: 192px;
@ -214,19 +209,24 @@ $banner-height: 21.6rem;
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
} }
.item1, .item1,
.item2 { .item2 {
width: 25%; width: 25%;
} }
.item3 { .item3 {
width: 50%; width: 50%;
} }
.item4 { .item4 {
width: 40%; width: 40%;
} }
.item5 { .item5 {
width: 32%; width: 32%;
} }
.item6 { .item6 {
width: 28%; width: 28%;
} }
@ -236,53 +236,66 @@ $banner-height: 21.6rem;
.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;
} }
} }
.list { .list {
li { li {
height: 20rem; height: 20rem;
h6 { h6 {
top: 5rem; top: 5rem;
} }
} }
} }
} }
@media (max-width: 320px) { @media (max-width: 320px) {
.wrap { .wrap {
/deep/ .el-carousel { /deep/ .el-carousel {
height: 13rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 13rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 13rem !important; height: 13rem !important;
} }
} }
.banner-item { .banner-item {
img { img {
height: 13rem !important; height: 13rem !important;
} }
.banner-name { .banner-name {
padding: 7rem 0 0 1rem; padding: 7rem 0 0 1rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
.block { .block {
padding: 2rem 0; padding: 2rem 0;
.inner { .inner {
width: 90%; width: 90%;
.text-center { .text-center {
.pic { .pic {
width: 100%; width: 100%;
@ -291,40 +304,50 @@ $banner-height: 21.6rem;
} }
} }
} }
.list { .list {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
li { li {
margin-top: 1rem; margin-top: 1rem;
width: 100% !important; width: 100% !important;
} }
} }
} }
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.wrap { .wrap {
/deep/ .el-carousel { /deep/ .el-carousel {
height: 13rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 13rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 13rem !important; height: 13rem !important;
} }
} }
.banner-item { .banner-item {
img { img {
height: 13rem !important; height: 13rem !important;
} }
.banner-name { .banner-name {
padding: 7rem 0 0 1rem; padding: 7rem 0 0 1rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
.block { .block {
padding: 2rem 0; padding: 2rem 0;
.inner { .inner {
width: 90%; width: 90%;
.text-center { .text-center {
.pic { .pic {
width: 100%; width: 100%;
@ -333,40 +356,50 @@ $banner-height: 21.6rem;
} }
} }
} }
.list { .list {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
li { li {
margin-top: 1rem; margin-top: 1rem;
width: 100% !important; width: 100% !important;
} }
} }
} }
@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;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 13rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 13rem !important; height: 13rem !important;
} }
} }
.banner-item { .banner-item {
img { img {
height: 13rem !important; height: 13rem !important;
} }
.banner-name { .banner-name {
padding: 7rem 0 0 1rem; padding: 7rem 0 0 1rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
.block { .block {
padding: 2rem 0; padding: 2rem 0;
.inner { .inner {
width: 90%; width: 90%;
.text-center { .text-center {
.pic { .pic {
width: 100%; width: 100%;
@ -375,40 +408,50 @@ $banner-height: 21.6rem;
} }
} }
} }
.list { .list {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
li { li {
margin-top: 1rem; margin-top: 1rem;
width: 100% !important; width: 100% !important;
} }
} }
} }
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.wrap { .wrap {
/deep/ .el-carousel { /deep/ .el-carousel {
height: 13rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 13rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 13rem !important; height: 13rem !important;
} }
} }
.banner-item { .banner-item {
img { img {
height: 13rem !important; height: 13rem !important;
} }
.banner-name { .banner-name {
padding: 7rem 0 0 1rem; padding: 7rem 0 0 1rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
.block { .block {
padding: 2rem 0; padding: 2rem 0;
.inner { .inner {
width: 90%; width: 90%;
.text-center { .text-center {
.pic { .pic {
width: 100%; width: 100%;
@ -417,40 +460,50 @@ $banner-height: 21.6rem;
} }
} }
} }
.list { .list {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
li { li {
margin-top: 1rem; margin-top: 1rem;
width: 100% !important; width: 100% !important;
} }
} }
} }
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.wrap { .wrap {
/deep/ .el-carousel { /deep/ .el-carousel {
height: 13rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 13rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 13rem !important; height: 13rem !important;
} }
} }
.banner-item { .banner-item {
img { img {
height: 13rem !important; height: 13rem !important;
} }
.banner-name { .banner-name {
padding: 7rem 0 0 1rem; padding: 7rem 0 0 1rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
.block { .block {
padding: 2rem 0; padding: 2rem 0;
.inner { .inner {
width: 90%; width: 90%;
.text-center { .text-center {
.pic { .pic {
width: 100%; width: 100%;
@ -459,40 +512,50 @@ $banner-height: 21.6rem;
} }
} }
} }
.list { .list {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
li { li {
margin-top: 1rem; margin-top: 1rem;
width: 100% !important; width: 100% !important;
} }
} }
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.wrap { .wrap {
/deep/ .el-carousel { /deep/ .el-carousel {
height: 13rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 13rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 13rem !important; height: 13rem !important;
} }
} }
.banner-item { .banner-item {
img { img {
height: 13rem !important; height: 13rem !important;
} }
.banner-name { .banner-name {
padding: 7rem 0 0 1rem; padding: 7rem 0 0 1rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
.block { .block {
padding: 2rem 0; padding: 2rem 0;
.inner { .inner {
width: 90%; width: 90%;
.text-center { .text-center {
.pic { .pic {
width: 100%; width: 100%;
@ -501,42 +564,53 @@ $banner-height: 21.6rem;
} }
} }
} }
.list { .list {
display: flex; display: flex;
width: 100%; width: 100%;
li { li {
width: 25%; width: 25%;
} }
} }
.item3 { .item3 {
width: 50% !important; width: 50% !important;
} }
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.wrap { .wrap {
/deep/ .el-carousel { /deep/ .el-carousel {
height: 13rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 13rem !important; height: 13rem !important;
} }
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 13rem !important; height: 13rem !important;
} }
} }
.banner-item { .banner-item {
img { img {
height: 13rem !important; height: 13rem !important;
} }
.banner-name { .banner-name {
padding: 7rem 0 0 1rem; padding: 7rem 0 0 1rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
.block { .block {
padding: 2rem 0; padding: 2rem 0;
.inner { .inner {
width: 90%; width: 90%;
.text-center { .text-center {
.pic { .pic {
width: 100%; width: 100%;
@ -545,13 +619,16 @@ $banner-height: 21.6rem;
} }
} }
} }
.list { .list {
display: flex; display: flex;
width: 100%; width: 100%;
li { li {
width: 25%; width: 25%;
} }
} }
.item3 { .item3 {
width: 50% !important; width: 50% !important;
} }

@ -1,9 +1,7 @@
<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>
@ -12,19 +10,13 @@
<div class="block history gray"> <div class="block history gray">
<div :class="['inner', { 'cursor-pointer': isLink(modules[1].form.link.linkName) }]" <div :class="['inner', { 'cursor-pointer': isLink(modules[1].form.link.linkName) }]"
@click="openLink(modules[1].form)"> @click="openLink(modules[1].form)">
<div class="texts wow fadeInDown" <div class="texts wow fadeInDown" data-wow-delay="0.5s">
data-wow-delay="0.5s">
<div class="left"> <div class="left">
<h2 v-html="modules[1].form.title"></h2> <h2 v-html="modules[1].form.title"></h2>
<div class="line"></div> <div class="line"></div>
<div class="des" <div class="des" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div>
</div> </div>
<img class="bg" <img class="bg" width="562" height="418" :src="modules[1].form.pic" alt="">
width="562"
height="418"
:src="modules[1].form.pic"
alt="">
</div> </div>
</div> </div>
</div> </div>
@ -33,26 +25,20 @@
<div class="inner"> <div class="inner">
<div :class="['core', { 'cursor-pointer': isLink(modules[2].form.link.linkName) }]" <div :class="['core', { 'cursor-pointer': isLink(modules[2].form.link.linkName) }]"
@click="openLink(modules[2].form)"> @click="openLink(modules[2].form)">
<img :src="modules[2].form.pic" <img :src="modules[2].form.pic" alt="" class="pic">
alt=""
class="pic">
<div class="texts"> <div class="texts">
<h6>{{ modules[2].form.title }}</h6> <div class="core-title" v-html="modules[2].form.title"></div>
<div class="line"></div> <div class="line"></div>
<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 :class="['core', { 'cursor-pointer': isLink(modules[3].form.link.linkName) }]" <div :class="['core', { 'cursor-pointer': isLink(modules[3].form.link.linkName) }]"
@click="openLink(modules[3].form)"> @click="openLink(modules[3].form)">
<img :src="modules[3].form.pic" <img :src="modules[3].form.pic" alt="" class="pic">
alt=""
class="pic">
<div class="texts"> <div class="texts">
<h6>{{ modules[3].form.title }}</h6> <div class="core-title" v-html="modules[3].form.title"></div>
<div class="line"></div> <div class="line"></div>
<div class="text" <div class="text" v-html="modules[3].form.des"></div>
v-html="modules[3].form.des"></div>
</div> </div>
</div> </div>
</div> </div>
@ -61,53 +47,35 @@
<div class="block gray fac"> <div class="block gray fac">
<div class="inner"> <div class="inner">
<div class="event"> <div class="event">
<img src="https://huorantech.com/images/overview/16.png" <img src="https://huorantech.com/images/overview/16.png" alt="" class="pic">
alt=""
class="pic">
<div class="texts"> <div class="texts">
<h6 v-html="modules[4].form.title"></h6> <h6 v-html="modules[4].form.title"></h6>
<p class="en">{{ modules[4].form.subTitle }}</p> <p class="en">{{ modules[4].form.subTitle }}</p>
<div class="text" <div class="text" v-html="modules[4].form.des"></div>
v-html="modules[4].form.des"></div> <img v-if="isLink(modules[4].form.link.linkName)" class="arrow" src="@/assets/images/arrow.png" alt=""
<img v-if="isLink(modules[4].form.link.linkName)"
class="arrow"
src="@/assets/images/arrow.png"
alt=""
@click="openLink(modules[4].form)"> @click="openLink(modules[4].form)">
</div> </div>
</div> </div>
<ul class="l-card"> <ul class="l-card">
<li :class="{'cursor-pointer': isLink(modules[5].form.link.linkName)}" <li :class="{ 'cursor-pointer': isLink(modules[5].form.link.linkName) }" @click="openLink(modules[5].form)">
@click="openLink(modules[5].form)"> <img :src="modules[5].form.pic" alt="" class="pic" />
<img :src="modules[5].form.pic"
alt=""
class="pic" />
<div class="texts"> <div class="texts">
<h6>{{ modules[5].form.title }}</h6> <h6>{{ 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>
</div> </div>
</li> </li>
<li :class="{'cursor-pointer': isLink(modules[6].form.link.linkName)}" <li :class="{ 'cursor-pointer': isLink(modules[6].form.link.linkName) }" @click="openLink(modules[6].form)">
@click="openLink(modules[6].form)"> <img :src="modules[6].form.pic" alt="" class="pic" />
<img :src="modules[6].form.pic"
alt=""
class="pic" />
<div class="texts"> <div class="texts">
<h6>{{ modules[6].form.title }}</h6> <h6>{{ modules[6].form.title }}</h6>
<div class="text" <div class="text" v-html="modules[6].form.des"></div>
v-html="modules[6].form.des"></div>
</div> </div>
</li> </li>
<li :class="{'cursor-pointer': isLink(modules[7].form.link.linkName)}" <li :class="{ 'cursor-pointer': isLink(modules[7].form.link.linkName) }" @click="openLink(modules[7].form)">
@click="openLink(modules[7].form)"> <img :src="modules[7].form.pic" alt="" class="pic" />
<img :src="modules[7].form.pic"
alt=""
class="pic" />
<div class="texts"> <div class="texts">
<h6>{{ modules[7].form.title }}</h6> <h6>{{ modules[7].form.title }}</h6>
<div class="text" <div class="text" v-html="modules[7].form.des"></div>
v-html="modules[7].form.des"></div>
</div> </div>
</li> </li>
</ul> </ul>
@ -115,20 +83,13 @@
</div> </div>
<div class="block scan gray"> <div class="block scan gray">
<h2 class="b-title wow fadeInUp hide-bd" <h2 class="b-title wow fadeInUp hide-bd" v-html="modules[8].form.title"></h2>
v-html="modules[8].form.title"></h2> <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
<div class="inner scan-inner"> <div class="inner scan-inner">
<div class="left"> <div class="left">
<template v-for="(item, i) in modules[9].list"> <template v-for="(item, i) in modules[9].list">
<div v-if="item.isEnable" <div v-if="item.isEnable" class="line" :key="i">
class="line" <img v-if="item.pic" :src="item.pic" alt="" class="icon">
:key="i">
<img v-if="item.pic"
:src="item.pic"
alt=""
class="icon">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
</div> </div>
</template> </template>
@ -147,9 +108,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<img :src="modules[13].form.pic" <img :src="modules[13].form.pic" alt="" class="pic" />
alt=""
class="pic" />
</div> </div>
</div> </div>
</div> </div>
@ -197,11 +156,13 @@ 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 {
font-size: 1rem; font-size: 1rem;
color: #333; color: #333;
} }
.texts { .texts {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -210,42 +171,51 @@ export default {
background-color: #fff; background-color: #fff;
border-radius: 6.25rem 0px 0px 0px; border-radius: 6.25rem 0px 0px 0px;
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
} }
.left { .left {
width: 43.4375rem; width: 43.4375rem;
} }
.line { .line {
width: 53px; width: 53px;
height: 3px; height: 3px;
margin: 18px 0; margin: 18px 0;
background: #0280f1; background: #0280f1;
} }
.des { .des {
font-size: 0.9rem; font-size: 0.9rem;
color: #181818; color: #181818;
line-height: 31px; line-height: 31px;
-webkit-line-clamp: 6; -webkit-line-clamp: 6;
} }
.bg { .bg {
margin: -115px -80px 0 30px; margin: -115px -80px 0 30px;
border-top-right-radius: 40px; border-top-right-radius: 40px;
} }
} }
.core { .core {
position: relative; position: relative;
margin-bottom: 40px; margin-bottom: 40px;
&:last-child { &:last-child {
.texts { .texts {
left: 40px; left: 40px;
right: auto; right: auto;
} }
} }
.pic { .pic {
width: 100%; width: 100%;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 80px; top: 80px;
@ -253,10 +223,12 @@ export default {
width: 500px; width: 500px;
color: #fff; color: #fff;
} }
h6 {
.core-title {
font-size: 1.4rem; font-size: 1.4rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
} }
.line { .line {
width: 136px; width: 136px;
height: 3px; height: 3px;
@ -264,17 +236,21 @@ export default {
background: #ffffff; background: #ffffff;
opacity: 0.56; opacity: 0.56;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
line-height: 1.6; line-height: 1.6;
} }
} }
.fac { .fac {
.event { .event {
position: relative; position: relative;
.pic { .pic {
width: 100%; width: 100%;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 70px; top: 70px;
@ -282,40 +258,48 @@ export default {
bottom: 70px; bottom: 70px;
left: 60px; left: 60px;
} }
h6 { h6 {
position: relative; position: relative;
font-size: 2.2rem; font-size: 2.2rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
color: #333; color: #333;
} }
.en { .en {
margin-top: -30px; margin-top: -30px;
font-size: 2rem; font-size: 2rem;
font-family: AppleSystemUIFont; font-family: AppleSystemUIFont;
color: #e4e4e4; color: #e4e4e4;
} }
.text { .text {
margin: 15px 0; margin: 15px 0;
font-size: 1rem; font-size: 1rem;
color: #333; color: #333;
} }
} }
.l-card { .l-card {
display: flex; display: flex;
margin-top: 20px; margin-top: 20px;
li { li {
position: relative; position: relative;
width: calc((100% - 40px) / 3); width: calc((100% - 40px) / 3);
height: 359px; height: 359px;
margin-right: 20px; margin-right: 20px;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
.pic { .pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 0; top: 0;
@ -326,11 +310,13 @@ export default {
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
h6 { h6 {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 1.6rem; font-size: 1.6rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
@ -339,23 +325,28 @@ export default {
} }
} }
} }
.scan { .scan {
.scan-inner { .scan-inner {
display: flex; display: flex;
} }
.left { .left {
width: 45%; width: 45%;
margin-right: 80px; margin-right: 80px;
} }
.line { .line {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 30px; margin-bottom: 30px;
.icon { .icon {
width: 50px; width: 50px;
height: 50px; height: 50px;
margin-right: 20px; margin-right: 20px;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
@ -363,10 +354,12 @@ export default {
line-height: 1.6; line-height: 1.6;
} }
} }
.total { .total {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 50px; margin-top: 50px;
.num { .num {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 2rem; font-size: 2rem;
@ -374,11 +367,13 @@ export default {
font-weight: 800; font-weight: 800;
color: #1583ff; color: #1583ff;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
color: #333; color: #333;
} }
} }
.pic { .pic {
width: 50%; width: 50%;
// object-fit: cover; // object-fit: cover;
@ -392,14 +387,17 @@ export default {
} }
} }
} }
@media (max-width: 1400px) { @media (max-width: 1400px) {
.history { .history {
.texts { .texts {
flex-direction: column; flex-direction: column;
} }
.left { .left {
width: 100%; width: 100%;
} }
.bg { .bg {
width: auto; width: auto;
max-width: 100%; max-width: 100%;
@ -407,18 +405,22 @@ export default {
margin: 20px 0 0 0; margin: 20px 0 0 0;
} }
} }
.scan { .scan {
.scan-inner { .scan-inner {
flex-direction: column; flex-direction: column;
} }
.left { .left {
width: 100%; width: 100%;
} }
.pic { .pic {
width: 100%; width: 100%;
margin-top: 2rem; margin-top: 2rem;
} }
} }
.fac { .fac {
.event { .event {
.texts { .texts {
@ -428,6 +430,7 @@ export default {
} }
} }
} }
@media (max-width: 920px) { @media (max-width: 920px) {
.core { .core {
.texts { .texts {
@ -437,12 +440,15 @@ export default {
width: auto; width: auto;
} }
} }
.scan { .scan {
padding: 20px; padding: 20px;
} }
.fac { .fac {
.l-card { .l-card {
flex-direction: column; flex-direction: column;
li { li {
width: 100%; width: 100%;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -450,23 +456,28 @@ export default {
} }
} }
} }
@media (max-width: 750px) { @media (max-width: 750px) {
.hide-bd:after { .hide-bd:after {
display: none; display: none;
} }
.block { .block {
padding: 50px 0; padding: 50px 0;
} }
.core { .core {
.texts { .texts {
position: static; position: static;
padding: 20px; padding: 20px;
color: #333; color: #333;
} }
.line { .line {
background: #333; background: #333;
} }
} }
.fac { .fac {
.event { .event {
.pic { .pic {

@ -7,7 +7,7 @@ const isGta = url.includes('139.159.254.212'); // 国泰安
let host = `${location.origin}/` let host = `${location.origin}/`
if (isDev) { if (isDev) {
host = 'http://192.168.31.217:10000/' host = 'http://192.168.31.217:10000/'
// host = 'https://huorantech.com' host = 'https://huorantech.com'
} }
const Setting = { const Setting = {

Loading…
Cancel
Save