This commit is contained in:
2023-07-03 17:31:57 +08:00
parent eb19778bd0
commit 4789db178f
16 changed files with 546 additions and 521 deletions

View File

@ -1,28 +1,28 @@
<template>
<div class="small" v-loading="loading">
<div v-loading="loading" class="small">
<div class="_title">
<div
v-if="!state.banner"
style="height: 394px; background-color: #108de9"
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"
:src="state.banner"
alt="banner"
style="width: 100%; height: 100%"
/>
</div>
<div
v-if="state.caseList.length"
class="_li"
:class="isFixed ? '_fixed' : ''"
v-if="state.caseList.length"
:class="isFixed ? '_fixed' : ''"
class="_li"
>
<ul class="conter1000">
<li
:class="activeId == item.id ? '_active' : ''"
v-for="(item, index) in state.caseList"
:key="item.id"
@click="setScrollTop(item.id, index)"
v-for="(item, index) in state.caseList"
:key="item.id"
:class="activeId == item.id ? '_active' : ''"
@click="setScrollTop(item.id, index)"
>
{{ item.title }}
</li>
@ -30,24 +30,24 @@
</div>
<h2 v-else style="text-align: center; line-height: 100px">暂无数据</h2>
</div>
<div class="box" v-show="!isShowMore">
<div v-show="!isShowMore" class="box">
<div
class="_item"
:ref="setItemRef"
v-for="(item, index) in state.caseList"
:key="index"
:data-id="item.id"
v-for="(item, index) in state.caseList"
:key="index"
:ref="setItemRef"
:data-id="item.id"
class="_item"
>
<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 v-if="isOddEvenNumber(index)" class="_r">
<img :src="item.image" alt srcset/>
</div>
<div
class="_l"
:class="isOddEvenNumber(index) ? '_paddingl' : '_paddingr'"
:class="isOddEvenNumber(index) ? '_paddingl' : '_paddingr'"
class="_l"
>
<h3 :class="isOddEvenNumber(index) ? 'text-right' : ''">
{{ item.title }}
@ -55,21 +55,21 @@
<!-- <p>{{ item.description }}</p> -->
<p>{{ item.description }}</p>
</div>
<div class="_r" v-if="!isOddEvenNumber(index)">
<img :src="item.image" alt srcset />
<div v-if="!isOddEvenNumber(index)" class="_r">
<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)"
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"
:src="child.image"
fit="cover"
style="width: 100%; height: 135px"
></el-image>
<div class="_head text_hidden">{{ child.title }}</div>
<div class="_detail text_hidden">{{ child.description }}</div>
@ -77,34 +77,35 @@
</ul>
<div class="_liBtn text-right">
<el-button class="x_btns" @click="handleShowMore(item)"
>查看更多</el-button
>查看更多
</el-button
>
</div>
</div>
</div>
</div>
<seeMore
v-if="isShowMore"
:data="moreData"
v-model:isShowMore="isShowMore"
v-model:oneLevelTitle="oneLevelTitle"
v-if="isShowMore"
v-model:isShowMore="isShowMore"
v-model:oneLevelTitle="oneLevelTitle"
:data="moreData"
></seeMore>
<webFooter></webFooter>
</div>
</template>
<script setup>
import { nextTick, onMounted, reactive } from "vue";
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";
import {banner} from "@/api/website/home/index";
import {useRoute, useRouter} from "vue-router";
import {getCase} from "@/api/website/solution";
// import { getCategory } from "../../../api/website/solution";
const router = useRouter();
function handlePath(id) {
let routeData = router.resolve({ path: `/solution/detail/${id}/` });
let routeData = router.resolve({path: `/solution/detail/${id}/`});
window.open(routeData.href, "_blank");
}
@ -137,6 +138,8 @@ const route = useRoute();
watch(route, () => {
initData();
});
onMounted(() => {
initData();
});
@ -148,20 +151,20 @@ async function initData() {
let mode = route.params.mode;
// let key = keyDict[name];
getCase({ mode }).then((res) => {
mode && getCase({mode}).then((res) => {
state.caseList = res.data;
initScroll();
// loading.value = false;
});
loading.value = true;
banner({ locals: `解决方案>${name}` })
.then((resp) => {
state.banner = resp.data[0].images;
loading.value = false;
})
.catch(() => {
loading.value = false;
});
banner({locals: `解决方案>${name}`})
.then((resp) => {
state.banner = resp.data[0].images;
loading.value = false;
})
.catch(() => {
loading.value = false;
});
}
function initScroll() {
@ -183,20 +186,22 @@ function initScroll() {
});
});
}
function getScroll() {
return {
left:
window.pageXOffset ||
document.documentElement.scrollLeft ||
document.body.scrollLeft ||
0,
window.pageXOffset ||
document.documentElement.scrollLeft ||
document.body.scrollLeft ||
0,
top:
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0,
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0,
};
}
function setScrollTop(id, index) {
// if (isShowMore.value) return false;
isShowMore.value = false;
@ -207,9 +212,11 @@ function setScrollTop(id, index) {
});
activeId.value = id;
}
function isOddEvenNumber(num) {
return num % 2 == 0 ? false : true;
}
function handleShowMore(item) {
console.log(item);
moreData.value = item.children;
@ -223,18 +230,22 @@ function handleShowMore(item) {
<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;
@ -243,11 +254,13 @@ function handleShowMore(item) {
display: inline-block;
cursor: pointer;
}
._active {
background: #000000;
}
}
}
._fixed {
position: fixed;
top: 80px;
@ -255,28 +268,36 @@ function handleShowMore(item) {
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;
@ -284,9 +305,11 @@ function handleShowMore(item) {
line-height: 24px;
}
}
._r {
width: 420px;
background: #f2f6ff;
img {
width: 100%;
height: 100%;
@ -294,19 +317,24 @@ function handleShowMore(item) {
}
}
}
._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;
@ -315,6 +343,7 @@ function handleShowMore(item) {
color: #333333;
line-height: 19px;
}
._detail {
font-size: 15px;
font-family: Source Han Sans CN;
@ -324,6 +353,7 @@ function handleShowMore(item) {
}
}
}
._liBtn {
margin-top: 36px;
display: flex;