You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
429 lines
11 KiB
429 lines
11 KiB
<template>
|
|
<div class="cjy-header" :class="theme">
|
|
<div class="v-container cjy-header-box row flex-align-center">
|
|
<div class="cjy-header-logo">
|
|
<img
|
|
:src="theme == 'header-light' ? require('@/assets/images/logo_red.svg') : theme == '' ? require('@/assets/images/logo_red.svg') : require('@/assets/images/logo_white.svg')"
|
|
class="img" />
|
|
</div>
|
|
<div class="cjy-header-nav row">
|
|
<div class="nav-item" :class="{ 'active': activeIndex == index }" v-for="(item, index) in nav_list" :key="index"
|
|
@click="gotoPages(item.url)" @mouseover="hoverItem(index)">
|
|
{{ item.title || '--' }}
|
|
<span class="rote-icon" v-if="index == 1 || index == 2"><i class="el-icon-arrow-down"></i></span>
|
|
</div>
|
|
</div>
|
|
<div class="call-box">
|
|
<div class="call-icon-box">
|
|
<i class="el-icon-phone"></i>
|
|
</div>
|
|
<div class="info-box">
|
|
商务合作热线：{{ tel }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-list" v-show="showContent" @mouseleave="closeContent">
|
|
<div class="list-box is-flex" v-if="activeIndex == 1">
|
|
<div class="list-box-left">
|
|
<div class="min-title">全域旅游<span class="min-title-more" @click="gotoPages1(solvePlan[0].id, 1)">查看全部</span></div>
|
|
<div class="nav-item-text-box">
|
|
<div class="nav-item-text" v-for="(item, index) in solvePlan" :key='index' @click="gotoPages1(item.id, 1)">
|
|
{{ item.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-box-right">
|
|
<div class="min-title">智慧景区<span class="min-title-more" @click="gotoPages1(scensePlan[0].id, 1)">查看全部</span></div>
|
|
<div class="nav-item-text-box">
|
|
<div class="nav-item-text" v-for="(item, index) in scensePlan" :key='index' @click="gotoPages1(item.id, 1)">
|
|
{{ item.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-box" v-if="activeIndex == 2">
|
|
<div class="min-title">热门案例</div>
|
|
<div class="list-item-pic">
|
|
<div class="list-item-i" v-for="(item, index) in case_list" :key="index" @click="gotoPages1(item.id, 2)">
|
|
<div class="img-boox">
|
|
<el-image class="img" :src="item.logo"></el-image>
|
|
</div>
|
|
<div class="image-title">{{ item.title }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as Api from "@/api/cjy/columninfo"
|
|
import * as Api1 from '@/api/cjy/company';
|
|
export default {
|
|
name: "index",
|
|
props: {
|
|
theme: {
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
nav_list: [],
|
|
showContent: false,
|
|
activeIndex: null,
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
},
|
|
case_list: [],
|
|
solvePlan: [],
|
|
scensePlan: [],
|
|
tel: ""
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getNavList()
|
|
this.infoPages()
|
|
this.getCompanyAllArea()
|
|
this.getCompanySolvePlan()
|
|
this.infoTel()
|
|
},
|
|
methods: {
|
|
closeContent() {
|
|
this.$nextTick(() => {
|
|
if (document.querySelector('.content-list')) {
|
|
document.querySelector('.content-list').style.opacity = 0
|
|
}
|
|
setTimeout(() => {
|
|
this.showContent = false
|
|
this.activeIndex = null
|
|
|
|
}, 100)
|
|
})
|
|
},
|
|
//全域旅游解决方案
|
|
async getCompanyAllArea() {
|
|
const params = {
|
|
type: 3,
|
|
infoType: 1
|
|
}
|
|
let res = await Api.getColumnInfoList(params)
|
|
this.solvePlan = res.data.list.slice(0, 6);
|
|
// this.solvePlan.push({
|
|
// title: '更多方案',
|
|
// id: this.solvePlan[0].id
|
|
// })
|
|
|
|
},
|
|
//智慧景区解决方案
|
|
async getCompanySolvePlan() {
|
|
const params = {
|
|
type: 3,
|
|
infoType: 2
|
|
}
|
|
let res = await Api.getColumnInfoList(params)
|
|
this.scensePlan = res.data.list.slice(0, 6);
|
|
// this.scensePlan.push({
|
|
// title: '更多方案',
|
|
// id: this.scensePlan[0].id
|
|
// })
|
|
|
|
},
|
|
//合作电话
|
|
async infoTel() {
|
|
let res = await Api1.getColumnInfo()
|
|
console.log(res)
|
|
this.tel = res.data.phone
|
|
},
|
|
//案例
|
|
async infoPages() {
|
|
this.queryParams.type = 5
|
|
let res = await Api.getColumnInfoList(this.queryParams)
|
|
this.case_list = res.data.list.filter(item => item.recommend == 1).slice(0,4)
|
|
},
|
|
hoverItem(val) {
|
|
this.activeIndex = val
|
|
console.log(val)
|
|
if (val == 1 || val == 2) {
|
|
this.$nextTick(() => {
|
|
this.showContent = true
|
|
setTimeout(() => {
|
|
if (document.querySelector('.content-list')) {
|
|
document.querySelector('.content-list').style.opacity = 1
|
|
}
|
|
}, 100)
|
|
})
|
|
} else {
|
|
this.$nextTick(() => {
|
|
if (document.querySelector('.content-list')) {
|
|
document.querySelector('.content-list').style.opacity = 0
|
|
}
|
|
setTimeout(() => {
|
|
this.showContent = false
|
|
}, 100)
|
|
})
|
|
}
|
|
},
|
|
getNavList() {
|
|
this.nav_list = [
|
|
{ title: "首页", url: "/home" },
|
|
{ title: "解决方案" },
|
|
{ title: "经典案例", url: "/case-list" },
|
|
{ title: "新闻资讯", url: "/news-list" },
|
|
{ title: "关于我们 ", url: "/about-us" }
|
|
]
|
|
},
|
|
// 跳转页面 函数
|
|
gotoPages(val) {
|
|
this.$router.push(val)
|
|
},
|
|
gotoPages1(val, type) {
|
|
this.$router.push("/case-detail?id=" + val + "&type=" + type)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.cjy-header {
|
|
height: fit-content;
|
|
background-color: #ffffffe6;
|
|
gap: 20px;
|
|
transition: all 0.3s ease-in-out;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 999;
|
|
width: 100%;
|
|
|
|
.cjy-header-box {
|
|
height: 100px
|
|
}
|
|
|
|
.cjy-header-logo {
|
|
.img {
|
|
width: 125px
|
|
}
|
|
}
|
|
|
|
.cjy-header-nav {
|
|
margin-left: 40px;
|
|
|
|
.nav-item {
|
|
margin: 0 30px;
|
|
color: #2A333D;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
|
|
.rote-icon {
|
|
transition: all 0.3s ease-in-out;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.nav-item {
|
|
position: relative;
|
|
}
|
|
|
|
.nav-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -2px;
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #0B59B3;
|
|
transform-origin: center;
|
|
transform: translate(-50%, 0) scaleX(0);
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
|
|
.nav-item:hover::before {
|
|
transform: translate(-50%, 0) scaleX(1);
|
|
}
|
|
}
|
|
|
|
.call-box {
|
|
display: flex;
|
|
margin-left: 100px;
|
|
|
|
.call-icon-box {
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 50%;
|
|
background-color: #0B59B3;
|
|
text-align: center;
|
|
line-height: 26px;
|
|
|
|
i {
|
|
color: #fff;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.info-box {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
color: #2A333D;
|
|
margin-left: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-light {
|
|
gap: 20px;
|
|
border-radius: 0px;
|
|
background-color: #ffffffe6 !important;
|
|
backdrop-filter: blur(5px);
|
|
box-shadow: rgba(0, 0, 0, 0.1) 2px 8px 8px;
|
|
|
|
.nav-item,
|
|
.info-box {
|
|
color: #2A333D !important;
|
|
}
|
|
|
|
.nav-item::before {
|
|
background-color: #0B59B3 !important;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.content-list {
|
|
position: fixed;
|
|
top: 100px;
|
|
z-index: 999;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
transition: all 0.3s ease-in-out;
|
|
opacity: 0;
|
|
|
|
.list-box {
|
|
max-width: 1220px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
|
|
.min-title {
|
|
color: #333;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
cursor: pointer;
|
|
transition: all ease-in-out 0.3s;
|
|
|
|
&:hover {
|
|
color: #0B59B3
|
|
}
|
|
|
|
.min-title-more {
|
|
color: #0B59B3;
|
|
cursor: pointer;
|
|
position: relative;
|
|
margin-left: 20px;
|
|
font-size: 14px;
|
|
|
|
&::after {
|
|
content: '';
|
|
width: 20%;
|
|
height: 100%;
|
|
position: absolute;
|
|
right: -40%;
|
|
top: 100%;
|
|
transform: translateY(-50%);
|
|
background-image: url('~@/assets/images/shang-you-lan-jian.png') !important;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.list-item-pic {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
overflow-x: scroll;
|
|
scrollbar-width: none;
|
|
|
|
.list-item-i {
|
|
width: 24%;
|
|
height: fit-content;
|
|
height: 250px;
|
|
|
|
cursor: pointer;
|
|
flex: none;
|
|
transition: all ease-in-out 0.3s;
|
|
scale: 0.98;
|
|
|
|
&:not(:first-child) {
|
|
margin-left: 15px;
|
|
}
|
|
|
|
&:hover {
|
|
scale: 1;
|
|
}
|
|
|
|
.img-boox {
|
|
width: 100%;
|
|
height: 200px;
|
|
|
|
|
|
.img {
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.image-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.is-flex {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.list-box-left,
|
|
.list-box-right {
|
|
width: 50%;
|
|
|
|
.nav-item-text-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.nav-item-text {
|
|
line-height: 35px;
|
|
color: #333;
|
|
width: 45%;
|
|
margin-left: 5%;
|
|
margin-top: 14px;
|
|
padding-left: 15px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: all ease-in-out 0.3s;
|
|
background: linear-gradient(to right, rgba(0, 0, 0, .1), #f6f6f600);
|
|
|
|
&:hover {
|
|
color: #0B59B3;
|
|
padding-left: 18px;
|
|
background: linear-gradient(to right, #0066be37, #f6f6f600);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.active {
|
|
.rote-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
</style>
|
|
|