|
|
|
|
@ -5,7 +5,7 @@
|
|
|
|
|
<div class="nav-bar"> |
|
|
|
|
<div class="nav-box"> |
|
|
|
|
<div class="logo"> |
|
|
|
|
<img class="logo" src="../assets/logo.png" /> |
|
|
|
|
<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)"> |
|
|
|
|
@ -36,7 +36,7 @@
|
|
|
|
|
<div class="ouer-btn"> |
|
|
|
|
我们的服务 |
|
|
|
|
</div> |
|
|
|
|
<div class="ouer-btn ouer-btn-two" @click="maskSwitchBtn()">联系我们</div> |
|
|
|
|
<div class="ouer-btn-two" @click="maskSwitchBtn()">联系我们</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="lunbo-img"> |
|
|
|
|
@ -82,8 +82,8 @@
|
|
|
|
|
</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"> |
|
|
|
|
<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> |
|
|
|
|
@ -95,20 +95,29 @@
|
|
|
|
|
<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 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-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 class="copmey-card" id='2'> |
|
|
|
|
<div class="copmey-card-left"> |
|
|
|
|
@ -156,11 +165,17 @@
|
|
|
|
|
<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"> |
|
|
|
|
<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> |
|
|
|
|
<div class="hovers" style="width: 100%;height: 18.125rem;position: absolute;top:0;left:0;"></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> |
|
|
|
|
@ -207,6 +222,9 @@
|
|
|
|
|
<div class="tel-number"> |
|
|
|
|
{{companyInfo.tel}} |
|
|
|
|
</div> |
|
|
|
|
<div class="tel-number"> |
|
|
|
|
{{companyInfo.phone}} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="gsdz"> |
|
|
|
|
<div class="gsdz-title">公司地址:</div> |
|
|
|
|
@ -216,18 +234,18 @@
|
|
|
|
|
<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 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"> |
|
|
|
|
<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> --> |
|
|
|
|
@ -238,22 +256,36 @@
|
|
|
|
|
</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)" /> |
|
|
|
|
<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="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"; |
|
|
|
|
import Vue from 'vue'; |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
name: "home", |
|
|
|
|
@ -265,9 +297,10 @@
|
|
|
|
|
|
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
imgsArr: [], |
|
|
|
|
host: 'http://gw.x-embers.com/', |
|
|
|
|
service: {}, |
|
|
|
|
flag: true, |
|
|
|
|
flag: false, |
|
|
|
|
maskSwitch: false, |
|
|
|
|
scrollTop: 0, |
|
|
|
|
bannerList: [], |
|
|
|
|
@ -288,7 +321,9 @@
|
|
|
|
|
honor: {}, |
|
|
|
|
companyInfo: {}, |
|
|
|
|
description: "", |
|
|
|
|
keyword: "" |
|
|
|
|
keyword: "", |
|
|
|
|
phone:'', |
|
|
|
|
memberIds:'' |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
@ -366,6 +401,7 @@
|
|
|
|
|
maskSwitchBtn() { |
|
|
|
|
this.maskSwitch == false ? this.maskSwitch = true : this.maskSwitch = false; |
|
|
|
|
this.scroolTab() |
|
|
|
|
console.log("开关", this.maskSwitch); |
|
|
|
|
}, |
|
|
|
|
scroolTab() { |
|
|
|
|
if (this.maskSwitch == false) { |
|
|
|
|
@ -422,15 +458,19 @@
|
|
|
|
|
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.caseList); |
|
|
|
|
console.log("选项卡1", this.imgsArr); |
|
|
|
|
console.log("选项卡id", this.checkCaseId); |
|
|
|
|
}, err => { |
|
|
|
|
console.log(err); |
|
|
|
|
@ -445,6 +485,7 @@
|
|
|
|
|
} |
|
|
|
|
}).then(res => { |
|
|
|
|
this.companyInfo = res.data.data |
|
|
|
|
// this.phone=res.data.phone |
|
|
|
|
console.log(res); |
|
|
|
|
}, err => { |
|
|
|
|
console.log(err); |
|
|
|
|
@ -461,6 +502,13 @@
|
|
|
|
|
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; |
|
|
|
|
|
