|
|
|
|
@ -7,11 +7,12 @@ |
|
|
|
|
<div class="swiper-wrapper"> |
|
|
|
|
<div class="swiper-slide" v-for="(banner, index) in formattedBanners" :key="index"> |
|
|
|
|
<div class="banner" :style="{ backgroundImage: `url(${banner.logo})` }"> |
|
|
|
|
<div class=" v-container"> |
|
|
|
|
<div class="text-box"> |
|
|
|
|
<h1 class="banner-title" v-html="banner.title ? banner.title : ''"></h1> |
|
|
|
|
<p class="banner-description">{{ banner.subtitle || '' }}</p> |
|
|
|
|
<router-link :to="banner.url ? banner.url : ''" class="learn-more">了解更多</router-link> |
|
|
|
|
</div> |
|
|
|
|
</div></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -23,7 +24,8 @@ |
|
|
|
|
<div class="content-title company-profile-title"> |
|
|
|
|
<span>公司介绍</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="ciontent-text company-profile-text" v-html="companyProfile.content ? companyProfile.content : ''"> |
|
|
|
|
<div class="ciontent-text ql-editor company-profile-text" |
|
|
|
|
v-html="companyProfile.content ? companyProfile.content : ''"> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -36,12 +38,12 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="ciontent-text solve-plan-text"> |
|
|
|
|
<el-tabs class="pc-el-tabs" stretch v-model="activeName"> |
|
|
|
|
<el-tabs class="pc-el-tabs" v-model="activeName"> |
|
|
|
|
<el-tab-pane v-for="(product, index) in solvePlan" :key="index" :label="product.title" |
|
|
|
|
:name="'第' + index + '个'"> |
|
|
|
|
<div class="solve-plan-tabs-content"> |
|
|
|
|
<div class="solve-plan-tabs-content-left"> |
|
|
|
|
<div class="solve-plan-tabs-content-left-html" |
|
|
|
|
<div class="ql-editor solve-plan-tabs-content-left-html" |
|
|
|
|
v-html="product.introduction ? product.introduction : ''"> |
|
|
|
|
</div> |
|
|
|
|
<div class="saw-detail" @click="gotoDetail(product.id,1)">查看详情→</div> |
|
|
|
|
@ -65,7 +67,7 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="ciontent-text solve-plan-text scence-plan-text"> |
|
|
|
|
<el-tabs class="pc-el-tabs-dark" stretch v-model="activeName1"> |
|
|
|
|
<el-tabs class="pc-el-tabs-dark" v-model="activeName1"> |
|
|
|
|
<el-tab-pane v-for="(product, index) in scensePlan" :key="index" :label="product.title" |
|
|
|
|
:name="'第' + index + '个'"> |
|
|
|
|
<div class="solve-plan-tabs-content"> |
|
|
|
|
@ -73,7 +75,7 @@ |
|
|
|
|
<img :src="product.logo ? product.logo : ''" alt=""> |
|
|
|
|
</div> |
|
|
|
|
<div class="solve-plan-tabs-content-left"> |
|
|
|
|
<div class="solve-plan-tabs-content-left-html" |
|
|
|
|
<div class="ql-editor solve-plan-tabs-content-left-html" |
|
|
|
|
v-html="product.introduction ? product.introduction : ''"> |
|
|
|
|
</div> |
|
|
|
|
<div class="saw-detail" @click="gotoDetail(product.id,1)">查看详情→</div> |
|
|
|
|
@ -101,11 +103,12 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="classic-case-text-right"> |
|
|
|
|
<div class="classic-case-text-right-top" v-if="formattedClassicAse[ativeindex]"> |
|
|
|
|
<div class="classic-case-text-right-content" v-html="formattedClassicAse[ativeindex].introduction"></div> |
|
|
|
|
<div class="ql-editor classic-case-text-right-content" v-html="formattedClassicAse[ativeindex].introduction"></div> |
|
|
|
|
<div class="classic-case-text-right-top-images-box" |
|
|
|
|
v-if="formattedClassicAse[ativeindex].images.length > 0"> |
|
|
|
|
<el-image class="classic-case-text-right-middle-images" |
|
|
|
|
v-for="(image, index) in formattedClassicAse[ativeindex].images" :src="image" :key="index"></el-image> |
|
|
|
|
v-for="(image, index) in formattedClassicAse[ativeindex].images" :src="image" |
|
|
|
|
:key="index"></el-image> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="classic-case-text-right-bottom"> |
|
|
|
|
@ -137,6 +140,7 @@ |
|
|
|
|
的经营之道，持续改进 永续发展！ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<template v-if="partners && partners.images && partners.images.length > 0"> |
|
|
|
|
<div v-for="(item, index) in partners.images" :key="index" class="partner-img-box" |
|
|
|
|
:style="{ right: `${item.x}px`, top: `${item.y}px` }"> |
|
|
|
|
@ -156,14 +160,15 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="ciontent-text news-text"> |
|
|
|
|
<el-tabs class="pc-el-tabs-dark short-tabs" stretch v-model="activeName2" @tab-click="handleClick"> |
|
|
|
|
<el-tabs class="cjy-tabs short-tabs" v-model="activeName2" @tab-click="handleClick"> |
|
|
|
|
<el-tab-pane label="公司动态" name="first"> |
|
|
|
|
<el-row class="news-row" :gutter="40"> |
|
|
|
|
<el-col v-for="(item, index) in newsList" class="news-col" :span="12" @click.native="gotoNews(item.id)"> |
|
|
|
|
<el-col v-for="(item, index) in newsList" class="news-col row" :span="12" |
|
|
|
|
@click.native="gotoNews(item.id)"> |
|
|
|
|
<div class="news-img-box"> |
|
|
|
|
<el-image class="news-img" :src="item.logo"/> |
|
|
|
|
</div> |
|
|
|
|
<div class="news-col-text"> |
|
|
|
|
<div class="news-col-text col overflow-hidden"> |
|
|
|
|
<div class="news-text-title"> |
|
|
|
|
{{ item.title || '--' }} |
|
|
|
|
</div> |
|
|
|
|
@ -215,6 +220,7 @@ |
|
|
|
|
|
|
|
|
|
import * as Api from "@/api/cjy/columninfo" |
|
|
|
|
import {parse} from '@babel/parser'; |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
name: "index", |
|
|
|
|
data() { |
|
|
|
|
@ -253,10 +259,10 @@ |
|
|
|
|
formattedBanners() { |
|
|
|
|
return this.banners.map(banner => { |
|
|
|
|
// 在第4到第9个字符之间插入换行符 |
|
|
|
|
let description = banner.title; |
|
|
|
|
if (description.length > 9) { |
|
|
|
|
description = description.slice(0, 4) + '<br>' + description.slice(4, 9) + '<br>' + description.slice(9, 16) + '<br>' + description.slice(16); |
|
|
|
|
} |
|
|
|
|
let description = banner.title.replace(/\s+/g, '<br>'); |
|
|
|
|
// if (description.length > 9) { |
|
|
|
|
// description = description.slice(0, 4) + '<br>' + description.slice(4, 9) + '<br>' + description.slice(9, 16) + '<br>' + description.slice(16); |
|
|
|
|
// } |
|
|
|
|
return { |
|
|
|
|
...banner, |
|
|
|
|
title: description |
|
|
|
|
@ -396,6 +402,7 @@ |
|
|
|
|
this.partners = res.data.list[0]; |
|
|
|
|
if (this.partners.image) { |
|
|
|
|
this.partners.images = this.extractImageCoordinates(this.partners.image); |
|
|
|
|
console.log(this.partners.images) |
|
|
|
|
} else { |
|
|
|
|
this.partners.images = [] |
|
|
|
|
} |
|
|
|
|
@ -524,6 +531,7 @@ |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
<style lang="scss"> |
|
|
|
|
|
|
|
|
|
.page-header { |
|
|
|
|
position: fixed; |
|
|
|
|
top: 0; |
|
|
|
|
@ -584,15 +592,15 @@ |
|
|
|
|
/* 背景图居中 */ |
|
|
|
|
|
|
|
|
|
.text-box { |
|
|
|
|
width: 500px; |
|
|
|
|
width: 1000px; |
|
|
|
|
height: 500px; |
|
|
|
|
margin-left: 10%; |
|
|
|
|
padding: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.banner-title { |
|
|
|
|
font-size: 68px; |
|
|
|
|
line-height: 90px; |
|
|
|
|
/* 调整标题字体大小 */ |
|
|
|
|
font-weight: bold; |
|
|
|
|
opacity: 0; |
|
|
|
|
@ -605,7 +613,7 @@ |
|
|
|
|
text-align: left; |
|
|
|
|
font-size: 22px; |
|
|
|
|
/* 调整描述字体大小 */ |
|
|
|
|
margin: 10px 0; |
|
|
|
|
margin: 30px 0 20px 0; |
|
|
|
|
/* 添加上下间距 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -635,7 +643,7 @@ |
|
|
|
|
border-radius: 5px; |
|
|
|
|
transition: all 0.3s ease-in-out; |
|
|
|
|
float: left; |
|
|
|
|
|
|
|
|
|
font-size: 16px; |
|
|
|
|
&:hover { |
|
|
|
|
background-color: rgba(255, 255, 255, 0.8); |
|
|
|
|
color: #333; |
|
|
|
|
@ -690,7 +698,7 @@ |
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-size: 30px; |
|
|
|
|
color: #E5E5E5; |
|
|
|
|
color: rgba(0,0,0,.05); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.saw-more-box { |
|
|
|
|
@ -762,10 +770,9 @@ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.company-profile { |
|
|
|
|
height: 745px; |
|
|
|
|
height: 800px; |
|
|
|
|
scrollbar-width: none; |
|
|
|
|
overflow: hidden; |
|
|
|
|
overflow-y: scroll; |
|
|
|
|
|
|
|
|
|
.company-profile-title { |
|
|
|
|
text-align: center; |
|
|
|
|
@ -776,10 +783,10 @@ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.company-profile-text { |
|
|
|
|
height: 515px; |
|
|
|
|
height: 700px; |
|
|
|
|
scrollbar-width: none; |
|
|
|
|
overflow: hidden; |
|
|
|
|
overflow-y: scroll; |
|
|
|
|
overflow-y: hidden; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -800,7 +807,7 @@ |
|
|
|
|
|
|
|
|
|
&::after { |
|
|
|
|
content: 'GLOBAL TOURISM SOLUTION' !important; |
|
|
|
|
color: #e5e5e537 !important; |
|
|
|
|
color: rgba(255,255,255,.05) !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -817,6 +824,7 @@ |
|
|
|
|
.solve-plan-tabs-content-left-html { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 370px; |
|
|
|
|
line-height: 24px; |
|
|
|
|
padding-top: 20px; |
|
|
|
|
overflow: scroll; |
|
|
|
|
overflow-x: hidden; |
|
|
|
|
@ -968,19 +976,19 @@ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:not(:last-child) { |
|
|
|
|
border-bottom: solid 1px #2a333d26; |
|
|
|
|
; |
|
|
|
|
border-bottom: solid 1px #2a333d26;; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.classic-case-text-right { |
|
|
|
|
width: 895px; |
|
|
|
|
height: 560px; |
|
|
|
|
padding: 40px 35px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
border-radius: 12px; |
|
|
|
|
|
|
|
|
|
.classic-case-text-right-top { |
|
|
|
|
height: 430px; |
|
|
|
|
height: 350px; |
|
|
|
|
border-bottom: solid 1px #2a333d1b; |
|
|
|
|
transition: all ease 0.3s; |
|
|
|
|
|
|
|
|
|
@ -989,6 +997,7 @@ |
|
|
|
|
overflow-y: scroll; |
|
|
|
|
scrollbar-width: none; |
|
|
|
|
margin-bottom: 25px; |
|
|
|
|
line-height: 24px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.classic-case-text-right-top-images-box { |
|
|
|
|
@ -1001,7 +1010,7 @@ |
|
|
|
|
.classic-case-text-right-middle-images { |
|
|
|
|
width: 360px; |
|
|
|
|
height: 200px; |
|
|
|
|
|
|
|
|
|
.el-image__inner{height: auto!important;} |
|
|
|
|
&:not(:first-child) { |
|
|
|
|
margin-left: 10px; |
|
|
|
|
} |
|
|
|
|
@ -1129,11 +1138,11 @@ |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
.news-img-box { |
|
|
|
|
box-shadow: 0 0 8px 2px #efefef; |
|
|
|
|
box-shadow: 0 0 20px 5px rgba(0, 0, 0, .1); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.news-col-text { |
|
|
|
|
box-shadow: 0 0 8px 2px #efefef; |
|
|
|
|
box-shadow: 0 0 20px 2px rgba(0, 0, 0, .1); |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -1141,6 +1150,14 @@ |
|
|
|
|
color: #0B59B3 !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.news-time { |
|
|
|
|
color: #0B59B3 !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.news-text-title-fu { |
|
|
|
|
color: #0B59B3 !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.more-jian { |
|
|
|
|
background-image: url('~@/assets/images/shang-you-lan-jian.png') !important; |
|
|
|
|
} |
|
|
|
|
@ -1207,8 +1224,8 @@ |
|
|
|
|
.news-time { |
|
|
|
|
transition: all ease 0.3s; |
|
|
|
|
|
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #2A333D; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #999; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.more-jian { |
|
|
|
|
@ -1228,20 +1245,50 @@ |
|
|
|
|
</style> |
|
|
|
|
<style lang="scss"> |
|
|
|
|
.pc-el-tabs { |
|
|
|
|
.el-tabs__nav { |
|
|
|
|
display: inline-block; |
|
|
|
|
transform: translateX(-50%) !important; |
|
|
|
|
float: none; |
|
|
|
|
left: 50%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__nav-wrap::after { |
|
|
|
|
background-color: #c2deff5a; |
|
|
|
|
background-color: transparent; |
|
|
|
|
border-bottom: 1px dotted rgba(255,255,255,0.5); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__item { |
|
|
|
|
font-size: 16px; |
|
|
|
|
padding: 0 80px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__item:hover { |
|
|
|
|
color: #fff; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__item.is-active { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__active-bar { |
|
|
|
|
background-color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__nav-next { |
|
|
|
|
display: none |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__nav-prev { |
|
|
|
|
display: none |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__item.is-active { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__item { |
|
|
|
|
color: #E5F1FF; |
|
|
|
|
color: #fff; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -1251,25 +1298,50 @@ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.pc-el-tabs-dark { |
|
|
|
|
.el-tabs__active-bar { |
|
|
|
|
background-color: #0B59B3; |
|
|
|
|
.el-tabs__nav { |
|
|
|
|
display: inline-block; |
|
|
|
|
transform: translateX(-50%) !important; |
|
|
|
|
float: none; |
|
|
|
|
left: 50%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__item.is-active { |
|
|
|
|
color: #0B59B3; |
|
|
|
|
.el-tabs__nav-wrap::after { |
|
|
|
|
background-color: transparent; |
|
|
|
|
border-bottom: 1px dotted rgba(#0B59B3,.5); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__item { |
|
|
|
|
font-size: 16px; |
|
|
|
|
padding: 0 80px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__item:hover { |
|
|
|
|
color: #0B59B3; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__item.is-active { |
|
|
|
|
color: #0B59B3; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__active-bar { |
|
|
|
|
background-color: #0B59B3; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__nav-next { |
|
|
|
|
display: none |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__nav-prev { |
|
|
|
|
display: none |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.short-tabs { |
|
|
|
|
|
|
|
|
|
.el-tabs__header { |
|
|
|
|
width: 20%; |
|
|
|
|
width: 30%; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
margin-bottom: 45px; |
|
|
|
|
} |
|
|
|
|
|
