fix
This commit is contained in:
@ -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;
|
||||
|
Reference in New Issue
Block a user