首页搜索
This commit is contained in:
169
src/views/website/solution/components/seeMore.vue
Normal file
169
src/views/website/solution/components/seeMore.vue
Normal file
@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="more conter1400">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item>
|
||||
<span class="_one" @click="handleShow()" style="cursor: pointer"
|
||||
>解决方案</span
|
||||
>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>
|
||||
<span class="_one">{{ oneLevelTitle.title }}</span>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>
|
||||
<span class="_two">{{ twoLevelTitle }}</span>
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
<div>
|
||||
<ul class="_list" v-loading="loading">
|
||||
<li v-for="item in state.list" :key="item" @click="handlePath(item.id)">
|
||||
<el-image
|
||||
style="width: 100%; height: 135px"
|
||||
:src="item.image"
|
||||
fit="cover"
|
||||
></el-image>
|
||||
<div class="_head text_hidden">{{ item.title }}</div>
|
||||
<div class="_detail text_hidden">{{ item.description }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="conter1400" style="position: relative">
|
||||
<pagination
|
||||
:total="state.total"
|
||||
:pageSizes="state.pageSizes"
|
||||
v-model:page="state.pageNum"
|
||||
v-model:limit="state.pageSize"
|
||||
:autoScroll="false"
|
||||
@pagination="getDataList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
// import request from "@/utils/request";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
|
||||
function handlePath(id) {
|
||||
let routeData = router.resolve({ path: `/solution/detail/${id}/` });
|
||||
window.open(routeData.href, "_blank");
|
||||
}
|
||||
async function solution_case_list() {
|
||||
return {
|
||||
code: 200,
|
||||
message: "ok",
|
||||
data: {
|
||||
data: [
|
||||
{
|
||||
id: "DXN0wBPaQldP",
|
||||
title: "复杂条件下城际轨道交通地下结构施工关键技术研究",
|
||||
image:
|
||||
"https://www.casshare.com/upimages/upload/20220310/9784d1c88922ef03f75ebc2a2db25f14.jpg",
|
||||
description: "复杂条件下城际轨道交通地下结构施工关键技术研究",
|
||||
},
|
||||
],
|
||||
count: 1,
|
||||
},
|
||||
};
|
||||
// return request({
|
||||
// url: "/v1/service/solution_case/list",
|
||||
// method: "post",
|
||||
// data: {
|
||||
// kind_id: props.oneLevelTitle.id,
|
||||
// page_num: state.pageNum,
|
||||
// page_size: state.pageSize,
|
||||
// },
|
||||
// });
|
||||
}
|
||||
const loading = ref(true);
|
||||
|
||||
const state = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 12,
|
||||
pageSizes: [12, 12 << 1, 12 << 2, 12 << 3],
|
||||
total: 0,
|
||||
list: [],
|
||||
});
|
||||
const props = defineProps({
|
||||
isShowMore: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
oneLevelTitle: {
|
||||
required: true,
|
||||
type: Object,
|
||||
},
|
||||
twoLevelTitle: {
|
||||
type: String,
|
||||
default: "查看更多",
|
||||
},
|
||||
});
|
||||
const emit = defineEmits();
|
||||
function handleShow() {
|
||||
emit("update:isShowMore", false);
|
||||
}
|
||||
|
||||
function getDataList() {
|
||||
loading.value = true;
|
||||
solution_case_list()
|
||||
.then((res) => {
|
||||
if (200 == res.code) {
|
||||
state.total = res.data.count;
|
||||
state.list = res.data.data;
|
||||
loading.value = false;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
getDataList();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.more {
|
||||
padding-top: 30px;
|
||||
.el-breadcrumb {
|
||||
padding-bottom: 22px;
|
||||
._one {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
._two {
|
||||
font-size: 16px;
|
||||
font-weight: 600 !important;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
._list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
li {
|
||||
cursor: pointer;
|
||||
width: calc(100% / 6);
|
||||
padding: 0 11px 44px;
|
||||
box-sizing: border-box;
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
127
src/views/website/solution/detail.vue
Normal file
127
src/views/website/solution/detail.vue
Normal file
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="bg">
|
||||
<div class="conter1400" v-loading="loading">
|
||||
<div class="head">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item>
|
||||
<span class="one">服务案例</span>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>
|
||||
<span>服务案例详情</span>
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="title">
|
||||
<div>{{ state.data.title }}</div>
|
||||
|
||||
<div class="description">
|
||||
<span class="visits">浏览量：{{ state.data.visits }}</span>
|
||||
<span>{{ parseTime(state.data.created_at) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="html" v-html="state.data.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<webFooter></webFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, onMounted } from "vue";
|
||||
import seeMore from "./components/seeMore.vue";
|
||||
import webFooter from "@/components/webFooter/index.vue";
|
||||
import request from '@/utils/request'
|
||||
|
||||
function detail (id) {
|
||||
return request({
|
||||
url: '/v1/service/solution_case/detail',
|
||||
method: 'post',
|
||||
data: { id }
|
||||
})
|
||||
}
|
||||
|
||||
const loading = ref(true);
|
||||
|
||||
const state = reactive({
|
||||
data: {},
|
||||
});
|
||||
const route = useRoute();
|
||||
watch(route, () => {
|
||||
getData()
|
||||
})
|
||||
onMounted(() => {
|
||||
getData()
|
||||
});
|
||||
|
||||
function getData () {
|
||||
let id = route.params.id;
|
||||
if (!id) return
|
||||
detail(id).then(res => {
|
||||
if (200 == res.code) {
|
||||
state.data = res.data;
|
||||
loading.value = false;
|
||||
}
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bg {
|
||||
background: rgba(242, 246, 255, 1);
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.conter1400 {
|
||||
flex: 1;
|
||||
}
|
||||
.head {
|
||||
padding: 30px 0 20px 0;
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
.one {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
background: #fff;
|
||||
margin-bottom: 40px;
|
||||
|
||||
.title,
|
||||
.html {
|
||||
padding: 30px 40px;
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
.description {
|
||||
padding-top: 20px;
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
.visits {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -1,6 +1,359 @@
|
||||
<template>
|
||||
<WebFooter></WebFooter>
|
||||
<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"
|
||||
: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"
|
||||
v-model:isShowMore="isShowMore"
|
||||
v-model:oneLevelTitle="oneLevelTitle"
|
||||
></seeMore>
|
||||
<webFooter></webFooter>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="Solution">
|
||||
import WebFooter from "@/components/webFooter/index.vue";
|
||||
<script setup>
|
||||
import { nextTick, onMounted } 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";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function handlePath(id) {
|
||||
let routeData = router.resolve({ path: `/solution/detail/${id}/` });
|
||||
window.open(routeData.href, "_blank");
|
||||
}
|
||||
function solution_case(mode) {
|
||||
return { code: 200, message: "ok", data: [] };
|
||||
}
|
||||
|
||||
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];
|
||||
let res = {};
|
||||
if (name == "large") {
|
||||
res = {
|
||||
code: 200,
|
||||
message: "ok",
|
||||
data: [
|
||||
{
|
||||
id: "oKZkJoBa9lmX",
|
||||
mode: 102,
|
||||
title: "技术资讯",
|
||||
image:
|
||||
"https://www.casshare.com/upimages/upload/20220310/e461612dff5675507d04885174397d40.png",
|
||||
description:
|
||||
"内部技术成果孵化\n\n提供从顶层设计到项目市场化的\n 全套解决方案，加速大企业内部创新创业\n 提高内孵成功率\n\n 孵化机制设计咨询 商业培训资源对接\n 产品体系延伸拓展 项目落地渠道对接",
|
||||
children: [
|
||||
{
|
||||
id: "DXN0wBPaQldP",
|
||||
title: "复杂条件下城际轨道交通地下结构施工关键技术研究",
|
||||
image:
|
||||
"https://www.casshare.com/upimages/upload/20220310/9784d1c88922ef03f75ebc2a2db25f14.jpg",
|
||||
description: "复杂条件下城际轨道交通地下结构施工关键技术研究",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
} else {
|
||||
res = { code: 200, message: "ok", data: [] };
|
||||
}
|
||||
// solution_case(mode).then((res) => {
|
||||
// if (200 == res.code) {
|
||||
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({
|
||||
// - 80
|
||||
top: itemRefs[index].offsetTop,
|
||||
});
|
||||
});
|
||||
activeId.value = id;
|
||||
}
|
||||
function isOddEvenNumber(num) {
|
||||
return num % 2 == 0 ? false : true;
|
||||
}
|
||||
function handleShowMore(item) {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user