7 changed files with 1510 additions and 22663 deletions
Binary file not shown.
@ -1,482 +1,530 @@
|
||||
<template> |
||||
<div> |
||||
<!-- 头部导航栏 --> |
||||
<header v-show="maskSwitch==false"> |
||||
<div class="nav-bar"> |
||||
<div class="nav-box"> |
||||
<div class="logo"> |
||||
<img class="logo" src="../assets/logo.png" /> |
||||
</div> |
||||
<ul class="nav" v-for="(item,index) in menuList" :key="index"> |
||||
<li class="nav-list" @click="checkMenu(item.index)"> |
||||
<a :href="'#'+item.id"> |
||||
{{item.title}} |
||||
</a> |
||||
|
||||
</li> |
||||
</ul> |
||||
<div class="conect-btn" @click="maskSwitchBtn()">立即咨询</div> |
||||
</div> |
||||
<div> |
||||
<!-- 头部导航栏 --> |
||||
<header v-show="maskSwitch==false"> |
||||
<div class="nav-bar"> |
||||
<div class="nav-box"> |
||||
<div class="logo"> |
||||
<img class="logo" :src="getImgUrl(companyInfo.logo )" /> |
||||
</div> |
||||
<ul class="nav" v-for="(item,index) in menuList" :key="index"> |
||||
<li class="nav-list" @click="checkMenu(item.index)"> |
||||
<a :href="'#'+item.id"> |
||||
{{item.title}} |
||||
</a> |
||||
|
||||
</div> |
||||
</header> |
||||
<!-- 头部导航栏 --> |
||||
<!-- 轮播 --> |
||||
<div class="about"> |
||||
<div class="swiper-container"> |
||||
<div class="swiper-wrapper" id="1"> |
||||
<div class="swiper-slide" v-for="(item,index) in bannerList" :key="index"> |
||||
<div class="s-content"> |
||||
<div> |
||||
<div class="banner-title">{{item.title}}</div> |
||||
<div class="banner-indroce"> |
||||
{{item.introduce}} |
||||
</div> |
||||
<div class="btn-group"> |
||||
<div class="ouer-btn"> |
||||
我们的服务 |
||||
</div> |
||||
<div class="ouer-btn ouer-btn-two" @click="maskSwitchBtn()">联系我们</div> |
||||
</div> |
||||
</div> |
||||
<div class="lunbo-img"> |
||||
<img class="lunbo-img" :src="getImgUrl(item.image)" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 如果需要分页器 --> |
||||
<!-- <div class="swiper-pagination"></div> --> |
||||
</li> |
||||
</ul> |
||||
<div class="conect-btn" @click="maskSwitchBtn()">立即咨询</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</header> |
||||
<!-- 头部导航栏 --> |
||||
<!-- 轮播 --> |
||||
<div class="about"> |
||||
<div class="swiper-container"> |
||||
<div class="swiper-wrapper" id="1"> |
||||
<div class="swiper-slide" v-for="(item,index) in bannerList" :key="index"> |
||||
<div class="s-content"> |
||||
<div> |
||||
<div class="banner-title">{{item.title}}</div> |
||||
<div class="banner-indroce"> |
||||
{{item.introduce}} |
||||
</div> |
||||
<div class="btn-group"> |
||||
<div class="ouer-btn"> |
||||
我们的服务 |
||||
</div> |
||||
<div class="ouer-btn-two" @click="maskSwitchBtn()">联系我们</div> |
||||
</div> |
||||
</div> |
||||
<div class="lunbo-img"> |
||||
<img class="lunbo-img" :src="getImgUrl(item.image)" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 如果需要分页器 --> |
||||
<!-- <div class="swiper-pagination"></div> --> |
||||
|
||||
<!-- 如果需要导航按钮 --> |
||||
<!-- <div class="swiper-button-prev"></div> |
||||
<!-- 如果需要导航按钮 --> |
||||
<!-- <div class="swiper-button-prev"></div> |
||||
<div class="swiper-button-next"></div> --> |
||||
|
||||
<!-- 如果需要滚动条 --> |
||||
<!-- <div class="swiper-scrollbar"></div> --> |
||||
</div> |
||||
</div> |
||||
<!-- 我们的服务 --> |
||||
<div style="width:74rem;margin: auto;margin-top:6.625rem;" id='3'> |
||||
<div style="width: 24rem;"> |
||||
<div class="serve-title">{{service.name}}</div> |
||||
<div class="serve-line"></div> |
||||
</div> |
||||
</div> |
||||
<div class="our-serve"> |
||||
<div class="serve-left"> |
||||
<div class="servr-text">{{firstServe}}</div> |
||||
<div class="servr-text-grey"> |
||||
{{secServe}} |
||||
</div> |
||||
</div> |
||||
<div class="serve-right"> |
||||
<div class="serve-right-list" v-for="(item,index) in service.content" :key="index"> |
||||
<img class="serve-right-list-icon" :src="getImgUrl(item.image)"> |
||||
<div class="serve-right-list-text"> |
||||
<div class="serve-right-text-title">{{item.title}}</div> |
||||
<div class="serve-right-text-indrouce">{{item.introduce}}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- fuwu--> |
||||
<div class="khfw" id='3'> |
||||
<div class="khfw-list" v-for="(item,index) in solve" :style="{ backgroundImage:`url(${getImgUrl(item.image)})`}" |
||||
:key="index"> |
||||
<img class="khfw-icon" :src="getImgUrl(item.background)" /> |
||||
<div class="line-khfw"></div> |
||||
<div class="khfw-title">{{item.title}}</div> |
||||
</div> |
||||
</div> |
||||
<!-- 案例展示--> |
||||
<div class="fwal-card" id='4'> |
||||
<div class="fwal-title">{{contentInfo.ServiceCase?contentInfo.ServiceCase.name:''}}</div> |
||||
<div class="line-fwal"></div> |
||||
<p class="fwmw-text">{{contentInfo.ServiceCase?contentInfo.ServiceCase.introduce:''}}</p> |
||||
<div class="ywfw-ul"> |
||||
<div class="ywfw-tag" :class="fwfwIndex==index?'ywfw-tag-act':'ywfw-tag'" @click="checkTag(index,item.id)" |
||||
v-for="(item,index) in ywfwList" :key="index">{{item.title}}</div> |
||||
</div> |
||||
|
||||
<div class="case-ul"> |
||||
<!-- 如果需要滚动条 --> |
||||
<!-- <div class="swiper-scrollbar"></div> --> |
||||
</div> |
||||
</div> |
||||
<!-- 我们的服务 --> |
||||
<div style="width:74rem;margin: auto;margin-top:6.625rem;" id='3'> |
||||
<div style="width: 24rem;"> |
||||
<div class="serve-title">{{service.name}}</div> |
||||
<div class="serve-line"></div> |
||||
</div> |
||||
</div> |
||||
<div class="our-serve"> |
||||
<div class="serve-left"> |
||||
<div class="servr-text">{{firstServe}}</div> |
||||
<div class="servr-text-grey"> |
||||
{{secServe}} |
||||
</div> |
||||
</div> |
||||
<div class="serve-right"> |
||||
<div class="serve-right-list" v-for="(item,index) in service.content" :key="index"> |
||||
<img class="serve-right-list-icon" :src="getImgUrl(item.image)"> |
||||
<div class="serve-right-list-text"> |
||||
<div class="serve-right-text-title">{{item.title}}</div> |
||||
<div class="serve-right-text-indrouce">{{item.introduce}}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- fuwu--> |
||||
<div class="khfw" id='3'> |
||||
<div class="khfw-list" v-for="(item,index) in solve" |
||||
:style="{ backgroundImage:`url(${getImgUrl(item.image)})`}" :key="index"> |
||||
<img class="khfw-icon" :src="getImgUrl(item.background)" /> |
||||
<div class="line-khfw"></div> |
||||
<div class="khfw-title">{{item.title}}</div> |
||||
</div> |
||||
</div> |
||||
<!-- 案例展示--> |
||||
<div class="fwal-card" id='4'> |
||||
<div class="fwal-title">{{contentInfo.ServiceCase?contentInfo.ServiceCase.name:''}}</div> |
||||
<div class="line-fwal"></div> |
||||
<p class="fwmw-text">{{contentInfo.ServiceCase?contentInfo.ServiceCase.introduce:''}}</p> |
||||
<div class="ywfw-ul"> |
||||
<div class="ywfw-tag" :class="fwfwIndex==index?'ywfw-tag-act':'ywfw-tag'" |
||||
@click="checkTag(index,item.id)" v-for="(item,index) in ywfwList" :key="index">{{item.title}}</div> |
||||
</div> |
||||
|
||||
<!-- <div class="case-ul"> |
||||
<div class="case-list" v-for="(item,index) in caseList" :key="index"> |
||||
<img class="case-img" :src="getImgUrl(item.image)" /> |
||||
<div class="case-name">{{item.name}}</div> |
||||
<p class="case-indrouce">{{item.introduce}}</p> |
||||
</div> |
||||
</div> --> |
||||
<transition-group name="list-complete" tag="ul" v-bind:class="'case-ul'" |
||||
> |
||||
<li class="case-list" v-for="item in caseList" :key="item"> |
||||
<img class="case-img" :src="getImgUrl(item.image)" /> |
||||
<div class="case-list-act" > |
||||
<div class="case-name">{{item.name}}</div> |
||||
<p class="case-indrouce">{{item.introduce}}</p> |
||||
</div> |
||||
</li> |
||||
</transition-group> |
||||
</div> |
||||
|
||||
</div> |
||||
<!-- 公司简介--> |
||||
<div class="copmey-card" id='2'> |
||||
<div class="copmey-card-left"> |
||||
<div class="ggjj-title">{{aboutInfo.name}}</div> |
||||
<div class="line-gsjj"></div> |
||||
<div class="compy-indoce"> |
||||
{{aboutInfo.introduce}} |
||||
</div> |
||||
<div class="gsbq-ul"> |
||||
<div class="gsbq-tag"> |
||||
<div class="gsbq-title"> |
||||
<span class="gsbq-big-text">{{aboutInfo.content?aboutInfo.content[0].number:''}}</span> |
||||
</div> |
||||
<div class="gsbq-text">{{aboutInfo.content?aboutInfo.content[0].title:''}}</div> |
||||
</div> |
||||
<div class="gsbq-tag"> |
||||
<div class="gsbq-title"> |
||||
<span class="gsbq-big-text">{{aboutInfo.content?aboutInfo.content[1].number:''}}</span> |
||||
<span class="jia">+</span> |
||||
</div> |
||||
<div class="gsbq-text">{{aboutInfo.content?aboutInfo.content[1].title:''}}</div> |
||||
</div> |
||||
<div class="gsbq-tag"> |
||||
<div class="gsbq-title"> |
||||
<span class="gsbq-big-text">{{aboutInfo.content?aboutInfo.content[2].number:''}}</span> |
||||
<span class="jia">+</span> |
||||
</div> |
||||
<div class="gsbq-text">{{aboutInfo.content?aboutInfo.content[2].title:''}}</div> |
||||
</div> |
||||
<div class="gsbq-tag"> |
||||
<div class="gsbq-title"> |
||||
<span class="gsbq-big-text">{{aboutInfo.content?aboutInfo.content[3].number:''}}</span> |
||||
<span class="gsbq-ge">个</span> |
||||
</div> |
||||
<div class="gsbq-text">{{aboutInfo.content?aboutInfo.content[3].title:''}}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<img class="gstp" :src="getImgUrl(aboutInfo.image)" /> |
||||
</div> |
||||
<!-- 我们的团队--> |
||||
<div class="our-team-card" > |
||||
<div class="fwal-title">{{team.name}}</div> |
||||
<div class="line-fwal"></div> |
||||
<p class="fwmw-text">{{team.introduce}}</p> |
||||
<div v-if="team.content"> |
||||
<div class="s-content2"> |
||||
<div class="member-list" @mouseover="teamMove(index)" style="position: relative;" v-for="(item,index) in team.content" |
||||
:key="index"> |
||||
<img class="member-img" :src="getImgUrl(item.avatar)" /> |
||||
<div class="member-name">{{item.name}}</div> |
||||
<div class="member-zhiwei">{{item.position}}</div> |
||||
<transition name="fade" mode="out-in"> |
||||
<div class="hovers" v-if="memberIds==index" > |
||||
<div class="menmber-indroce">{{item.introduce}}</div> |
||||
</div> |
||||
</transition> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 合作伙伴--> |
||||
<div class="hzhb-card" id="8"> |
||||
<div class="fwal-title">{{partner.name}}</div> |
||||
<div class="line-fwal"></div> |
||||
<p class="fwmw-text">{{partner.introduce}}</p> |
||||
<div class="logo-ul" v-if="partner.content"> |
||||
<div class="logo-list" v-for="(item,index) in partner.content" :key="index"> |
||||
<img class="hz-logo-img" :src="getImgUrl(item.image)"> |
||||
<div class="hzhb-name">{{item.title}}</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
<!-- 公司简介--> |
||||
<div class="copmey-card" id='2'> |
||||
<div class="copmey-card-left"> |
||||
<div class="ggjj-title">{{aboutInfo.name}}</div> |
||||
<div class="line-gsjj"></div> |
||||
<div class="compy-indoce"> |
||||
{{aboutInfo.introduce}} |
||||
</div> |
||||
<div class="gsbq-ul"> |
||||
<div class="gsbq-tag"> |
||||
<div class="gsbq-title"> |
||||
<span class="gsbq-big-text">{{aboutInfo.content?aboutInfo.content[0].number:''}}</span> |
||||
</div> |
||||
<div class="gsbq-text">{{aboutInfo.content?aboutInfo.content[0].title:''}}</div> |
||||
</div> |
||||
<div class="gsbq-tag"> |
||||
<div class="gsbq-title"> |
||||
<span class="gsbq-big-text">{{aboutInfo.content?aboutInfo.content[1].number:''}}</span> |
||||
<span class="jia">+</span> |
||||
</div> |
||||
<div class="gsbq-text">{{aboutInfo.content?aboutInfo.content[1].title:''}}</div> |
||||
</div> |
||||
<div class="gsbq-tag"> |
||||
<div class="gsbq-title"> |
||||
<span class="gsbq-big-text">{{aboutInfo.content?aboutInfo.content[2].number:''}}</span> |
||||
<span class="jia">+</span> |
||||
</div> |
||||
<div class="gsbq-text">{{aboutInfo.content?aboutInfo.content[2].title:''}}</div> |
||||
</div> |
||||
<div class="gsbq-tag"> |
||||
<div class="gsbq-title"> |
||||
<span class="gsbq-big-text">{{aboutInfo.content?aboutInfo.content[3].number:''}}</span> |
||||
<span class="gsbq-ge">个</span> |
||||
</div> |
||||
<div class="gsbq-text">{{aboutInfo.content?aboutInfo.content[3].title:''}}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<img class="gstp" :src="getImgUrl(aboutInfo.image)" /> |
||||
</div> |
||||
<!-- 我们的团队--> |
||||
<div class="our-team-card"> |
||||
<div class="fwal-title">{{team.name}}</div> |
||||
<div class="line-fwal"></div> |
||||
<p class="fwmw-text">{{team.introduce}}</p> |
||||
<div v-if="team.content"> |
||||
<div class="s-content2"> |
||||
<div class="member-list" style="position: relative;" v-for="(item,index) in team.content" :key="index"> |
||||
<img class="member-img" :src="getImgUrl(item.avatar)" /> |
||||
<div class="member-name">{{item.name}}</div> |
||||
<div class="member-zhiwei">{{item.position}}</div> |
||||
<div class="hovers" style="width: 100%;height: 18.125rem;position: absolute;top:0;left:0;"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 合作伙伴--> |
||||
<div class="hzhb-card" id="8"> |
||||
<div class="fwal-title">{{partner.name}}</div> |
||||
<div class="line-fwal"></div> |
||||
<p class="fwmw-text">{{partner.introduce}}</p> |
||||
<div class="logo-ul" v-if="partner.content"> |
||||
<div class="logo-list" v-for="(item,index) in partner.content" :key="index"> |
||||
<img class="hz-logo-img" :src="getImgUrl(item.image)"> |
||||
<div class="hzhb-name">{{item.title}}</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
<!-- 荣誉资质--> |
||||
<div class="ryzz-card" id='5'> |
||||
<div class="ryzz-left"> |
||||
<div class="ryzz-title">{{honor.name}}</div> |
||||
<div class="ryzz-line"></div> |
||||
<div class="ryzz-indroce"> |
||||
{{honor.introduce}} |
||||
</div> |
||||
</div> |
||||
<div class="yyzz-ul" v-if="honor.content"> |
||||
<div class="yyzz" v-for="(item,index) in honor.content" :key="index"> |
||||
<img class="yyzz-img" :src="getImgUrl(item.image)" /> |
||||
<div class="yyzz-name">{{item.name}}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 底部--> |
||||
<footer id='6'> |
||||
<div class="bottom"> |
||||
<div class="foot-up"> |
||||
<div class="foot-up-left"> |
||||
<div class="foot-up-left-up"> |
||||
<img class="foot-up-left-tel" src="../assets/tel.png" /> |
||||
<span class="foot-up-left-tel-num">客服咨询热线</span> |
||||
</div> |
||||
<div class="tel-number"> |
||||
{{companyInfo.tel}} |
||||
</div> |
||||
<div class="tel-number"> |
||||
{{companyInfo.phone}} |
||||
</div> |
||||
</div> |
||||
<div class="gsdz"> |
||||
<div class="gsdz-title">公司地址:</div> |
||||
<div class="gsdz-detail">{{companyInfo.address}}</div> |
||||
</div> |
||||
<div class="gsdz"> |
||||
<div class="gsdz-title">电子邮箱:</div> |
||||
<div class="gsdz-detail">{{companyInfo.email}}</div> |
||||
</div> |
||||
<div class="wxkf-ul" v-if="contentInfo.CustomerService"> |
||||
<div class="wxkf-list" v-for="(item,index) in contentInfo.CustomerService.content" :key="index"> |
||||
<img class="wxkf-img" :src="getImgUrl(item.image)" /> |
||||
<div class="wxkf-name">{{item.position}}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="foot-line"></div> |
||||
<div class="foot-dow"> |
||||
<div class="foot-dow-ul"> |
||||
<div class="foot-dow-list" v-for="(item,index) in menuList" :key="index"><a |
||||
style="color: white;" :href="'#'+item.id"> |
||||
{{item.title}} |
||||
</a></div> |
||||
<!-- <div class="foot-dow-list">联系我们</div> --> |
||||
</div> |
||||
<div class="last-text"> |
||||
{{companyInfo.copyright}} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</footer> |
||||
<transition name="slide-fade"> |
||||
<div class="mask" v-if="maskSwitch==true"> |
||||
<div class="ewm-box" v-if="contentInfo.CustomerService"> |
||||
<div>请添加微信或电话咨询</div> |
||||
<div class="ewm-div-ul"> |
||||
<div class="ewm-div" v-for="(item,index) in contentInfo.CustomerService.content" :key="index"> |
||||
<img class="ewm-img-img" :src="getImgUrl(item.image)" /> |
||||
<div class="custor-info"> |
||||
<div class="custor-info-up">{{item.position}}</div> |
||||
<div class="custor-info-dow">{{item.introduce}}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
<!-- 荣誉资质--> |
||||
<div class="ryzz-card" id='5'> |
||||
<div class="ryzz-left"> |
||||
<div class="ryzz-title">{{honor.name}}</div> |
||||
<div class="ryzz-line"></div> |
||||
<div class="ryzz-indroce"> |
||||
{{honor.introduce}} |
||||
</div> |
||||
</div> |
||||
<div class="yyzz-ul" v-if="honor.content"> |
||||
<div class="yyzz" v-for="(item,index) in honor.content" :key="index"> |
||||
<img class="yyzz-img" :src="getImgUrl(item.image)" /> |
||||
<div class="yyzz-name">{{item.name}}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 底部--> |
||||
<footer id='6'> |
||||
<div class="bottom"> |
||||
<div class="foot-up"> |
||||
<div class="foot-up-left"> |
||||
<div class="foot-up-left-up"> |
||||
<img class="foot-up-left-tel" src="../assets/tel.png" /> |
||||
<span class="foot-up-left-tel-num">客服咨询热线</span> |
||||
</div> |
||||
<div class="tel-number"> |
||||
{{companyInfo.tel}} |
||||
</div> |
||||
</div> |
||||
<div class="gsdz"> |
||||
<div class="gsdz-title">公司地址:</div> |
||||
<div class="gsdz-detail">{{companyInfo.address}}</div> |
||||
</div> |
||||
<div class="gsdz"> |
||||
<div class="gsdz-title">电子邮箱:</div> |
||||
<div class="gsdz-detail">{{companyInfo.email}}</div> |
||||
</div> |
||||
<div class="wxkf-ul"> |
||||
<div class="wxkf-list" v-for="(item,index) in companyInfo.wechat" :key="index"> |
||||
<img class="wxkf-img" :src="getImgUrl(item)" /> |
||||
<div class="wxkf-name">微信客服</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="foot-line"></div> |
||||
<div class="foot-dow"> |
||||
<div class="foot-dow-ul"> |
||||
<div class="foot-dow-list" v-for="(item,index) in menuList" :key="index"><a style="color: white;" |
||||
:href="'#'+item.id"> |
||||
{{item.title}} |
||||
</a></div> |
||||
<!-- <div class="foot-dow-list">联系我们</div> --> |
||||
</div> |
||||
<div class="last-text"> |
||||
{{companyInfo.copyright}} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</footer> |
||||
<div class="mask" v-show="maskSwitch==true"> |
||||
<div class="ewm-box"> |
||||
<div class="ewm-div" v-for="(item,index) in companyInfo.wechat" :key="index"> |
||||
<img class="ewm-img-img" :src="getImgUrl(item)" /> |
||||
</div> |
||||
</div> |
||||
<div class="close-btn" @click="maskSwitchBtn()">关闭</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="close-btn" @click="maskSwitchBtn()">关闭</div> |
||||
</div> |
||||
</transition> |
||||
|
||||
</div> |
||||
</template> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script> |
||||
|
||||
<script> |
||||
import { |
||||
swiper, |
||||
swiperSlide |
||||
} from "vue-awesome-swiper"; |
||||
import "swiper/dist/css/swiper.css"; |
||||
|
||||
export default { |
||||
name: "home", |
||||
|
||||
components: { |
||||
swiper, |
||||
swiperSlide |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
host: 'http://gw.x-embers.com/', |
||||
service: {}, |
||||
flag: true, |
||||
maskSwitch: false, |
||||
scrollTop: 0, |
||||
bannerList: [], |
||||
firstServe: '', |
||||
secServe: '', |
||||
solve: [], |
||||
ywfwList: [], |
||||
fwfwIndex: 0, |
||||
menuList: [], |
||||
contentInfo: {}, |
||||
activeBtn: 0, |
||||
caseList: [], |
||||
checkCaseId: '1', |
||||
caseCardids: 0, |
||||
aboutInfo: {}, |
||||
team: {}, |
||||
partner: {}, |
||||
honor: {}, |
||||
companyInfo: {}, |
||||
description: "", |
||||
keyword: "" |
||||
}; |
||||
}, |
||||
|
||||
metaInfo() { |
||||
return { |
||||
meta: [{ |
||||
vmid: 'description', |
||||
name: 'description', |
||||
content: this.description |
||||
}, |
||||
{ |
||||
vmid: 'keyword', |
||||
name: 'keyword', |
||||
content: this.keyword |
||||
} |
||||
] |
||||
} |
||||
}, |
||||
|
||||
mounted() { |
||||
|
||||
this.getSeo(); |
||||
|
||||
/* 获取滚动条 */ |
||||
window.addEventListener('scroll', this.windowScroll) |
||||
new Swiper('.swiper-container', { |
||||
loop: true, |
||||
// 如果需要分页器 |
||||
pagination: '.swiper-pagination', |
||||
// 如果需要前进后退按钮 |
||||
nextButton: '.swiper-button-next', |
||||
prevButton: '.swiper-button-prev', |
||||
// 如果需要滚动条 |
||||
// scrollbar: '.swiper-scrollbar', |
||||
//如果需要自动切换海报 |
||||
// autoplay: { |
||||
// delay: 1000,//时间 毫秒 |
||||
// disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true |
||||
// }, |
||||
}), |
||||
this.getMenu(); |
||||
this.getContent(); |
||||
this.getCompanyInfo() |
||||
}, |
||||
methods: { |
||||
|
||||
getSeo() { |
||||
this.$axios.post("http://gw.x-embers.com/api/index/seo", {}).then(res => { |
||||
this.description = res.data.data.description; |
||||
this.keyword = res.data.data.keyword; |
||||
}) |
||||
}, |
||||
|
||||
caseModal(index) { |
||||
this.caseCardids = index |
||||
}, |
||||
windowScroll() { |
||||
// 滚动条距离页面顶部的距离 |
||||
// 以下写法原生兼容 |
||||
this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; |
||||
|
||||
}, |
||||
|
||||
|
||||
getImgUrl(url) { |
||||
if (!url) { |
||||
return ""; |
||||
} |
||||
if (url.includes("http") || url.includes("https")) { |
||||
return url; |
||||
} |
||||
return this.host + url; |
||||
}, |
||||
|
||||
maskSwitchBtn() { |
||||
this.maskSwitch == false ? this.maskSwitch = true : this.maskSwitch = false; |
||||
this.scroolTab() |
||||
}, |
||||
scroolTab() { |
||||
if (this.maskSwitch == false) { |
||||
this.move() |
||||
} else { |
||||
this.stop() |
||||
} |
||||
}, |
||||
move() { |
||||
var mo = function(e) { |
||||
e.preventDefault(); |
||||
}; |
||||
document.body.style.overflow = ''; //出现滚动条 |
||||
document.removeEventListener("touchmove", mo, false); |
||||
}, |
||||
stop() { |
||||
var mo = function(e) { |
||||
e.preventDefault(); |
||||
}; |
||||
document.body.style.overflow = 'hidden'; |
||||
document.addEventListener("touchmove", mo, false); //禁止页面滑动 |
||||
}, |
||||
getMenu() { |
||||
this.$axios({ |
||||
method: 'get', |
||||
url: 'http://gw.x-embers.com/api/index/menu', |
||||
params: { |
||||
|
||||
} |
||||
}).then(res => { |
||||
this.menuList = res.data.data |
||||
console.log(res); |
||||
}, err => { |
||||
console.log(err); |
||||
}) |
||||
}, |
||||
getContent() { |
||||
this.$axios({ |
||||
method: 'get', |
||||
url: 'http://gw.x-embers.com/api/index/content', |
||||
params: { |
||||
|
||||
} |
||||
}).then(res => { |
||||
this.contentInfo = res.data.data |
||||
this.bannerList = this.contentInfo.banner.content |
||||
this.service = this.contentInfo.service |
||||
this.firstServe = this.service.introduce.substr(0, 70) |
||||
this.secServe = this.service.introduce.substr(71, this.service.introduce.length - 1) |
||||
this.solve = this.contentInfo.solve.content |
||||
//this.caseList=this.contentInfo.ServiceCase.content |
||||
this.ywfwList = this.contentInfo.ServiceCase.type_map |
||||
this.aboutInfo = this.contentInfo.about |
||||
this.team = this.contentInfo.team |
||||
this.partner = this.contentInfo.Partner |
||||
this.honor = this.contentInfo.Honor |
||||
this.caseList = this.contentInfo.ServiceCase.content.filter(item => { |
||||
return item.type.includes(this.checkCaseId) |
||||
}) |
||||
// for(let i in caseTag){ |
||||
// this.ywfwList.push({[i]:caseTag[i]}) |
||||
// } |
||||
//this.ywfwList=Array.from(caseTag) |
||||
//this.ywfwList=this.contentInfo.ServiceCase.type_map |
||||
console.log("选项卡1", this.caseList); |
||||
console.log("选项卡id", this.checkCaseId); |
||||
}, err => { |
||||
console.log(err); |
||||
}) |
||||
}, |
||||
getCompanyInfo() { |
||||
this.$axios({ |
||||
method: 'get', |
||||
url: 'http://gw.x-embers.com/api/index/companyInfo', |
||||
params: { |
||||
|
||||
} |
||||
}).then(res => { |
||||
this.companyInfo = res.data.data |
||||
console.log(res); |
||||
}, err => { |
||||
console.log(err); |
||||
}) |
||||
}, |
||||
checkTag(index, id) { |
||||
this.checkCaseId = id |
||||
this.fwfwIndex = index; |
||||
this.flag = false; |
||||
setTimeout(() => { |
||||
this.flag = true; |
||||
}) |
||||
this.caseList = this.contentInfo.ServiceCase.content.filter(item => { |
||||
return item.type.includes(this.checkCaseId) |
||||
}) |
||||
}, |
||||
checkMenu(selector, index) { |
||||
this.activeBtn = index; |
||||
// document.querySelector("#app-root").scrollTop = this.$el.querySelector(selector).offsetTop; |
||||
} |
||||
|
||||
}, |
||||
|
||||
|
||||
|
||||
|
||||
beforeDestroy() { |
||||
window.removeEventListener('scroll', this.windowScroll) |
||||
}, |
||||
|
||||
}; |
||||
import { |
||||
swiper, |
||||
swiperSlide |
||||
} from "vue-awesome-swiper"; |
||||
import "swiper/dist/css/swiper.css"; |
||||
import Vue from 'vue'; |
||||
|
||||
export default { |
||||
name: "home", |
||||
|
||||
components: { |
||||
swiper, |
||||
swiperSlide |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
imgsArr: [], |
||||
host: 'http://gw.x-embers.com/', |
||||
service: {}, |
||||
flag: false, |
||||
maskSwitch: false, |
||||
scrollTop: 0, |
||||
bannerList: [], |
||||
firstServe: '', |
||||
secServe: '', |
||||
solve: [], |
||||
ywfwList: [], |
||||
fwfwIndex: 0, |
||||
menuList: [], |
||||
contentInfo: {}, |
||||
activeBtn: 0, |
||||
caseList: [], |
||||
checkCaseId: '1', |
||||
caseCardids: 0, |
||||
aboutInfo: {}, |
||||
team: {}, |
||||
partner: {}, |
||||
honor: {}, |
||||
companyInfo: {}, |
||||
description: "", |
||||
keyword: "", |
||||
phone:'', |
||||
memberIds:'' |
||||
}; |
||||
}, |
||||
|
||||
metaInfo() { |
||||
return { |
||||
meta: [{ |
||||
vmid: 'description', |
||||
name: 'description', |
||||
content: this.description |
||||
}, |
||||
{ |
||||
vmid: 'keyword', |
||||
name: 'keyword', |
||||
content: this.keyword |
||||
} |
||||
] |
||||
} |
||||
}, |
||||
|
||||
mounted() { |
||||
|
||||
this.getSeo(); |
||||
|
||||
/* 获取滚动条 */ |
||||
window.addEventListener('scroll', this.windowScroll) |
||||
new Swiper('.swiper-container', { |
||||
loop: true, |
||||
// 如果需要分页器 |
||||
pagination: '.swiper-pagination', |
||||
// 如果需要前进后退按钮 |
||||
nextButton: '.swiper-button-next', |
||||
prevButton: '.swiper-button-prev', |
||||
// 如果需要滚动条 |
||||
// scrollbar: '.swiper-scrollbar', |
||||
//如果需要自动切换海报 |
||||
// autoplay: { |
||||
// delay: 1000,//时间 毫秒 |
||||
// disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true |
||||
// }, |
||||
}), |
||||
this.getMenu(); |
||||
this.getContent(); |
||||
this.getCompanyInfo() |
||||
}, |
||||
methods: { |
||||
|
||||
getSeo() { |
||||
this.$axios.post("http://gw.x-embers.com/api/index/seo", {}).then(res => { |
||||
this.description = res.data.data.description; |
||||
this.keyword = res.data.data.keyword; |
||||
}) |
||||
}, |
||||
|
||||
caseModal(index) { |
||||
this.caseCardids = index |
||||
}, |
||||
windowScroll() { |
||||
// 滚动条距离页面顶部的距离 |
||||
// 以下写法原生兼容 |
||||
this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; |
||||
|
||||
}, |
||||
|
||||
|
||||
getImgUrl(url) { |
||||
if (!url) { |
||||
return ""; |
||||
} |
||||
if (url.includes("http") || url.includes("https")) { |
||||
return url; |
||||
} |
||||
return this.host + url; |
||||
}, |
||||
|
||||
maskSwitchBtn() { |
||||
this.maskSwitch == false ? this.maskSwitch = true : this.maskSwitch = false; |
||||
this.scroolTab() |
||||
console.log("开关", this.maskSwitch); |
||||
}, |
||||
scroolTab() { |
||||
if (this.maskSwitch == false) { |
||||
this.move() |
||||
} else { |
||||
this.stop() |
||||
} |
||||
}, |
||||
move() { |
||||
var mo = function(e) { |
||||
e.preventDefault(); |
||||
}; |
||||
document.body.style.overflow = ''; //出现滚动条 |
||||
document.removeEventListener("touchmove", mo, false); |
||||
}, |
||||
stop() { |
||||
var mo = function(e) { |
||||
e.preventDefault(); |
||||
}; |
||||
document.body.style.overflow = 'hidden'; |
||||
document.addEventListener("touchmove", mo, false); //禁止页面滑动 |
||||
}, |
||||
getMenu() { |
||||
this.$axios({ |
||||
method: 'get', |
||||
url: 'http://gw.x-embers.com/api/index/menu', |
||||
params: { |
||||
|
||||
} |
||||
}).then(res => { |
||||
this.menuList = res.data.data |
||||
console.log(res); |
||||
}, err => { |
||||
console.log(err); |
||||
}) |
||||
}, |
||||
getContent() { |
||||
this.$axios({ |
||||
method: 'get', |
||||
url: 'http://gw.x-embers.com/api/index/content', |
||||
params: { |
||||
|
||||
} |
||||
}).then(res => { |
||||
this.contentInfo = res.data.data |
||||
this.bannerList = this.contentInfo.banner.content |
||||
this.service = this.contentInfo.service |
||||
this.firstServe = this.service.introduce.substr(0, 70) |
||||
this.secServe = this.service.introduce.substr(71, this.service.introduce.length - 1) |
||||
this.solve = this.contentInfo.solve.content |
||||
//this.caseList=this.contentInfo.ServiceCase.content |
||||
this.ywfwList = this.contentInfo.ServiceCase.type_map |
||||
this.aboutInfo = this.contentInfo.about |
||||
this.team = this.contentInfo.team |
||||
this.partner = this.contentInfo.Partner |
||||
this.honor = this.contentInfo.Honor |
||||
|
||||
this.caseList = this.contentInfo.ServiceCase.content.filter(item => { |
||||
return item.type.includes(this.checkCaseId) |
||||
}) |
||||
this.caseList.filter(item => { |
||||
this.imgsArr.push(this.host + item.image) |
||||
}) |
||||
// for(let i in caseTag){ |
||||
// this.ywfwList.push({[i]:caseTag[i]}) |
||||
// } |
||||
//this.ywfwList=Array.from(caseTag) |
||||
//this.ywfwList=this.contentInfo.ServiceCase.type_map |
||||
console.log("选项卡1", this.imgsArr); |
||||
console.log("选项卡id", this.checkCaseId); |
||||
}, err => { |
||||
console.log(err); |
||||
}) |
||||
}, |
||||
getCompanyInfo() { |
||||
this.$axios({ |
||||
method: 'get', |
||||
url: 'http://gw.x-embers.com/api/index/companyInfo', |
||||
params: { |
||||
|
||||
} |
||||
}).then(res => { |
||||
this.companyInfo = res.data.data |
||||
// this.phone=res.data.phone |
||||
console.log(res); |
||||
}, err => { |
||||
console.log(err); |
||||
}) |
||||
}, |
||||
checkTag(index, id) { |
||||
this.checkCaseId = id |
||||
this.fwfwIndex = index; |
||||
this.flag = false; |
||||
setTimeout(() => { |
||||
this.flag = true; |
||||
}) |
||||
this.caseList = this.contentInfo.ServiceCase.content.filter(item => { |
||||
return item.type.includes(this.checkCaseId) |
||||
}) |
||||
}, |
||||
teamMove(index){ |
||||
this.memberIds = index |
||||
console.log("sss",this.memberIds); |
||||
}, |
||||
teamOut(){ |
||||
this.memberIds = '' |
||||
}, |
||||
checkMenu(selector, index) { |
||||
this.activeBtn = index; |
||||
// document.querySelector("#app-root").scrollTop = this.$el.querySelector(selector).offsetTop; |
||||
} |
||||
|
||||
}, |
||||
|
||||
|
||||
|
||||
|
||||
beforeDestroy() { |
||||
window.removeEventListener('scroll', this.windowScroll) |
||||
}, |
||||
|
||||
}; |
||||
</script> |
||||
<style> |
||||
@import "./home.css"; |
||||
@import "./home.css"; |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue