334 lines
7.9 KiB
Vue
334 lines
7.9 KiB
Vue
<template>
|
|
<div class="small" v-loading="loading">
|
|
<div class="_title">
|
|
<div
|
|
v-if="!state.banner"
|
|
style="height: 394px; background-color: #108de9"
|
|
></div>
|
|
<div v-else style="height: 394px">
|
|
<img
|
|
:src="state.banner"
|
|
style="width: 100%; height: 100%"
|
|
alt="banner"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="state.caseList.length"
|
|
class="_li"
|
|
:class="isFixed ? '_fixed' : ''"
|
|
>
|
|
<ul class="conter1000">
|
|
<li
|
|
:class="activeId == item.id ? '_active' : ''"
|
|
v-for="(item, index) in state.caseList"
|
|
:key="item.id"
|
|
@click="setScrollTop(item.id, index)"
|
|
>
|
|
{{ item.title }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<h2 v-else style="text-align: center; line-height: 100px">暂无数据</h2>
|
|
</div>
|
|
<div class="box" v-show="!isShowMore">
|
|
<div
|
|
class="_item"
|
|
:ref="setItemRef"
|
|
v-for="(item, index) in state.caseList"
|
|
:key="index"
|
|
:data-id="item.id"
|
|
>
|
|
<h3 class="_tit text-center" style="font-size: 24px; color: #333333">
|
|
{{ item.title }}
|
|
</h3>
|
|
<div class="_info conter1000">
|
|
<div class="_r" v-if="isOddEvenNumber(index)">
|
|
<img :src="item.image" alt srcset />
|
|
</div>
|
|
<div
|
|
class="_l"
|
|
:class="isOddEvenNumber(index) ? '_paddingl' : '_paddingr'"
|
|
>
|
|
<h3 :class="isOddEvenNumber(index) ? 'text-right' : ''">
|
|
{{ item.title }}
|
|
</h3>
|
|
<!-- <p>{{ item.description }}</p> -->
|
|
<p>{{ item.description }}</p>
|
|
</div>
|
|
<div class="_r" v-if="!isOddEvenNumber(index)">
|
|
<img :src="item.image" alt srcset />
|
|
</div>
|
|
</div>
|
|
<div class="_list conter1400">
|
|
<ul>
|
|
<li
|
|
v-for="child in item.children.slice(0, 2)"
|
|
:key="child.id"
|
|
@click="handlePath(child.id)"
|
|
>
|
|
<el-image
|
|
style="width: 100%; height: 135px"
|
|
:src="child.image"
|
|
fit="cover"
|
|
></el-image>
|
|
<div class="_head text_hidden">{{ child.title }}</div>
|
|
<div class="_detail text_hidden">{{ child.description }}</div>
|
|
</li>
|
|
</ul>
|
|
<div class="_liBtn text-right">
|
|
<el-button class="x_btns" @click="handleShowMore(item)"
|
|
>查看更多</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<seeMore
|
|
v-if="isShowMore"
|
|
:data="moreData"
|
|
v-model:isShowMore="isShowMore"
|
|
v-model:oneLevelTitle="oneLevelTitle"
|
|
></seeMore>
|
|
<webFooter></webFooter>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { nextTick, onMounted, reactive } from "vue";
|
|
import seeMore from "./components/seeMore.vue";
|
|
import webFooter from "@/components/webFooter/index.vue";
|
|
import { banner } from "@/api/website/home/index";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { getCase } from "@/api/website/solution";
|
|
|
|
const router = useRouter();
|
|
|
|
function handlePath(id) {
|
|
let routeData = router.resolve({ path: `/solution/detail/${id}/` });
|
|
window.open(routeData.href, "_blank");
|
|
}
|
|
|
|
let moreData = ref([]);
|
|
const loading = ref(true);
|
|
const oneLevelTitle = ref({});
|
|
const modeDict = { small: 101, large: 102, government: 103, scientific: 104 };
|
|
const keyDict = {
|
|
small: "解决方案>中小型企业服务",
|
|
large: "解决方案>大型企业服务",
|
|
government: "解决方案>政府区域服务",
|
|
scientific: "解决方案>政府区域服务",
|
|
};
|
|
const isShowMore = ref(false);
|
|
const activeId = ref("");
|
|
const itemRefs = [];
|
|
const setItemRef = (el) => {
|
|
if (el) {
|
|
itemRefs.push(el);
|
|
}
|
|
};
|
|
const state = reactive({
|
|
caseList: [],
|
|
banner: "",
|
|
});
|
|
const scrollTop = ref(0);
|
|
const isFixed = ref(false);
|
|
const route = useRoute();
|
|
|
|
watch(route, () => {
|
|
initData();
|
|
});
|
|
onMounted(() => {
|
|
initData();
|
|
});
|
|
|
|
//
|
|
function initData() {
|
|
let name = route.params.name;
|
|
if (!name) return;
|
|
let mode = modeDict[name];
|
|
let key = keyDict[name];
|
|
|
|
getCase({ mode }).then((res) => {
|
|
state.caseList = res.data;
|
|
initScroll();
|
|
});
|
|
loading.value = true;
|
|
banner({ locals: key })
|
|
.then((resp) => {
|
|
state.banner = resp.data[0].images;
|
|
loading.value = false;
|
|
})
|
|
.catch(() => {
|
|
loading.value = false;
|
|
});
|
|
}
|
|
|
|
function initScroll() {
|
|
if (state.caseList.length) {
|
|
activeId.value = state.caseList[0].id;
|
|
}
|
|
document.addEventListener("scroll", () => {
|
|
scrollTop.value = getScroll().top;
|
|
if (scrollTop.value >= 394) {
|
|
isFixed.value = true;
|
|
} else {
|
|
isFixed.value = false;
|
|
}
|
|
itemRefs.map((item) => {
|
|
if (isShowMore.value) return false;
|
|
if (scrollTop.value >= item.offsetTop - 80) {
|
|
activeId.value = item.getAttribute("data-id");
|
|
}
|
|
});
|
|
});
|
|
}
|
|
function getScroll() {
|
|
return {
|
|
left:
|
|
window.pageXOffset ||
|
|
document.documentElement.scrollLeft ||
|
|
document.body.scrollLeft ||
|
|
0,
|
|
top:
|
|
window.pageYOffset ||
|
|
document.documentElement.scrollTop ||
|
|
document.body.scrollTop ||
|
|
0,
|
|
};
|
|
}
|
|
function setScrollTop(id, index) {
|
|
// if (isShowMore.value) return false;
|
|
isShowMore.value = false;
|
|
nextTick(() => {
|
|
window.scrollTo({
|
|
top: itemRefs[index].offsetTop,
|
|
});
|
|
});
|
|
activeId.value = id;
|
|
}
|
|
function isOddEvenNumber(num) {
|
|
return num % 2 == 0 ? false : true;
|
|
}
|
|
function handleShowMore(item) {
|
|
console.log(item);
|
|
moreData.value = item.children;
|
|
oneLevelTitle.value = item;
|
|
window.scrollTo({
|
|
top: 0,
|
|
});
|
|
isShowMore.value = true;
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.small {
|
|
background-color: #fff;
|
|
._title {
|
|
position: relative;
|
|
._li {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 48px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
> ul {
|
|
display: flex;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
li {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
color: #ffffff;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
}
|
|
._active {
|
|
background: #000000;
|
|
}
|
|
}
|
|
}
|
|
._fixed {
|
|
position: fixed;
|
|
top: 80px;
|
|
z-index: 1;
|
|
background-color: #ccc;
|
|
}
|
|
}
|
|
.box {
|
|
margin-bottom: 30px;
|
|
._item {
|
|
._tit {
|
|
margin: 0;
|
|
padding: 100px 0 60px;
|
|
}
|
|
._info {
|
|
display: flex;
|
|
._paddingr {
|
|
padding-right: 63px;
|
|
}
|
|
._paddingl {
|
|
padding-left: 63px;
|
|
}
|
|
._l {
|
|
flex: 1;
|
|
h3 {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
p {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
._r {
|
|
width: 420px;
|
|
background: #f2f6ff;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
._list {
|
|
margin-top: 86px;
|
|
> ul {
|
|
display: flex;
|
|
justify-content: center;
|
|
li {
|
|
cursor: pointer;
|
|
width: calc(100% / 6);
|
|
padding: 0 11px;
|
|
&:hover ._head,
|
|
&:hover ._detail {
|
|
opacity: 0.6;
|
|
}
|
|
._head {
|
|
margin: 5px 0;
|
|
font-size: 17px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 19px;
|
|
}
|
|
._detail {
|
|
font-size: 15px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 19px;
|
|
}
|
|
}
|
|
}
|
|
._liBtn {
|
|
margin-top: 36px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|