432 lines
14 KiB
Vue
432 lines
14 KiB
Vue
<!--
|
|
* @Author: hisense.zhangfeihu
|
|
* @Date: 2022-06-13 10:22:27
|
|
* @LastEditors: hisense.liangjunhua
|
|
* @LastEditTime: 2022-06-20 18:58:40
|
|
* @Description: 赋能案例-详情页
|
|
-->
|
|
<template>
|
|
<home-header></home-header>
|
|
<div class="assign-case-detail-page">
|
|
<!--详情页头部-->
|
|
<div class="assign-case-detail-page-header">
|
|
<div class="assign-case-detail-page-header-son">
|
|
<div
|
|
class="assign-case-detail-page-header-son-left"
|
|
:style="`background:url(${dataFrom.note1})`"
|
|
></div>
|
|
<div class="assign-case-detail-page-header-son-right">
|
|
<div class="assign-case-detail-page-header-son-right-title">
|
|
{{ dataFrom.name }}
|
|
</div>
|
|
<div
|
|
class="assign-case-detail-page-header-son-right-click"
|
|
@click="clickToView(dataFrom.apiUrl)"
|
|
>
|
|
<span>点击查看</span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="assign-case-detail-page-content">
|
|
<div class="assign-case-detail-page-content-son">
|
|
<div class="assign-case-detail-page-content-left">
|
|
<div
|
|
class="assign-case-detail-page-content-left-border"
|
|
id="assign-case-detail-page-content-left-border-id"
|
|
>
|
|
<div
|
|
v-for="(item, index) in dataFrom.infoList"
|
|
:key="index"
|
|
@click="tabSwitch(item, index)"
|
|
:class="
|
|
(tabName == item.attrType
|
|
? 'assign-case-detail-page-content-left-border-click'
|
|
: '') ||
|
|
(selectNow == item.id
|
|
? 'assign-case-detail-page-content-left-border-click'
|
|
: '')
|
|
"
|
|
>
|
|
{{ item.attrType }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="assign-case-detail-page-content-center">
|
|
<div
|
|
class="assign-case-detail-page-content-center-card"
|
|
v-for="(item, index) in dataFrom.infoList"
|
|
:key="index"
|
|
:id="'assign-case-detail-page-content-center-card' + index"
|
|
>
|
|
<div class="assign-case-detail-page-content-center-card-title">
|
|
{{ item.attrType }}
|
|
</div>
|
|
<div
|
|
class="assign-case-detail-page-content-center-card-description"
|
|
>
|
|
{{ item.attrValue }}
|
|
<div v-if="item.descriptions">
|
|
<p
|
|
v-for="(
|
|
itemDescriptions, indexDescriptions
|
|
) in item.descriptions"
|
|
:key="indexDescriptions"
|
|
>
|
|
{{ itemDescriptions }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="assign-case-detail-page-content-right">
|
|
<div class="assign-case-detail-page-content-right-card">
|
|
<div class="assign-case-detail-page-content-right-card-title">
|
|
<span></span>
|
|
<span>其他案例</span>
|
|
</div>
|
|
<div class="assign-case-detail-page-content-right-card-content">
|
|
<div
|
|
class="assign-case-detail-page-content-right-card-content-card"
|
|
v-for="(item, index) in dataList"
|
|
:key="index"
|
|
@click="routerClick(item.id)"
|
|
>
|
|
<p>{{ item.name }}</p>
|
|
<p>{{ item.createDate }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="no-data">暂无更多</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<home-footer></home-footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, onMounted } from 'vue'
|
|
import HomeHeader from '@/views/home/components/header'
|
|
import HomeFooter from '@/views/newHome/components/Footer'
|
|
import { useRouter } from 'vue-router'
|
|
import { selectOne, pageWithAttrs } from '@/api/home'
|
|
const router = useRouter()
|
|
let val = router.currentRoute.value.query.id
|
|
const scrollTop = ref(0)
|
|
let dataFrom = ref({})
|
|
const domArr = ref([])
|
|
const selectNow = ref('')
|
|
const dataList = ref([])
|
|
let tabName = ref('案例背景')
|
|
//路由跳转事件
|
|
const routerClick = (id) => {
|
|
router.push({ path: 'AssignCaseDetailPage', query: { id: id } })
|
|
}
|
|
//初始化数据
|
|
const init = () => {
|
|
pageWithAttrsFunction(router.currentRoute.value.query.id)
|
|
val = router.currentRoute.value.query.id
|
|
tabName.value = '案例背景'
|
|
selectOne(val).then((res) => {
|
|
res.data.data.infoList.map((item, index) => {
|
|
console.log('res.data.data.infoList', res.data.data.infoList)
|
|
if (item.attrType == '图片') {
|
|
res.data.data.infoList.splice(index, 1)
|
|
}
|
|
})
|
|
res.data.data.infoList.map((item, index) => {
|
|
console.log('res.data.data.infoList', res.data.data.infoList)
|
|
if (item.attrType == '应用领域') {
|
|
res.data.data.infoList.splice(index, 1)
|
|
}
|
|
})
|
|
dataFrom.value = res.data.data
|
|
console.log('dataFrom.value', dataFrom.value)
|
|
})
|
|
}
|
|
//其他案例
|
|
const pageWithAttrsFunction = (id) => {
|
|
let params = {
|
|
deptIds: [],
|
|
districtId: '',
|
|
infoList: [],
|
|
orderField: 'create_date',
|
|
orderType: 'DESC',
|
|
pageNum: 1,
|
|
pageSize: 99,
|
|
type: '赋能案例',
|
|
}
|
|
pageWithAttrs(params).then((res) => {
|
|
res.data.data.records.map((item, index) => {
|
|
if (item.id == id) {
|
|
res.data.data.records.splice(index, 1)
|
|
}
|
|
})
|
|
dataList.value = res.data.data.records
|
|
console.log('dataList.value', dataList.value)
|
|
})
|
|
}
|
|
//监听路由发生变化
|
|
watch(
|
|
() => router.currentRoute.value.query.id,
|
|
() => {
|
|
init()
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
//tab点击事件
|
|
const tabSwitch = (item, index) => {
|
|
tabName.value = item.attrType
|
|
if (index != 0 && index != 3) {
|
|
let top =
|
|
document.querySelector(
|
|
'#assign-case-detail-page-content-center-card' + index
|
|
).offsetTop -
|
|
document.querySelector(
|
|
'#assign-case-detail-page-content-center-card' + (index - 1)
|
|
).offsetHeight
|
|
let view = document.getElementById(
|
|
'assign-case-detail-page-content-left-border-id'
|
|
)
|
|
view.style.top =
|
|
document.querySelector(
|
|
'#assign-case-detail-page-content-center-card' + (index - 1)
|
|
).offsetHeight + 'px'
|
|
console.log('view.style.top', view.style.top)
|
|
document.documentElement.scrollTop = top
|
|
document.body.scrollTop = top
|
|
} else if (index == 0) {
|
|
let top = 0
|
|
let view = document.getElementById(
|
|
'assign-case-detail-page-content-left-border-id'
|
|
)
|
|
document.documentElement.scrollTop = top
|
|
document.body.scrollTop = top
|
|
view.style.top = '490px'
|
|
} else if (index == 3) {
|
|
let top = document.querySelector(
|
|
'#assign-case-detail-page-content-center-card' + index
|
|
).offsetTop
|
|
let view = document.getElementById(
|
|
'assign-case-detail-page-content-left-border-id'
|
|
)
|
|
document.documentElement.scrollTop = top
|
|
document.body.scrollTop = top
|
|
view.style.top = '220px'
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
init()
|
|
// console.clear()
|
|
window.addEventListener('scroll', () => {
|
|
domArr.value = document.querySelectorAll(
|
|
'.assign-case-detail-page-content-center-card'
|
|
)
|
|
scrollTop.value =
|
|
document.documentElement.scrollTop || document.body.scrollTop
|
|
for (let i = 0; i < domArr.value.length; i++) {
|
|
if (i === 0) {
|
|
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
|
selectNow.value = domArr.value[i].id
|
|
}
|
|
} else if (i == domArr.value.length - 1) {
|
|
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
|
selectNow.value = domArr.value[i].id
|
|
}
|
|
} else {
|
|
if (
|
|
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
|
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
|
) {
|
|
selectNow.value = domArr.value[i].id
|
|
}
|
|
}
|
|
}
|
|
})
|
|
})
|
|
//点击查看事件
|
|
const clickToView = (link) => {
|
|
window.open(link)
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.assign-case-detail-page {
|
|
position: relative;
|
|
top: 0.64rem;
|
|
.assign-case-detail-page-header {
|
|
height: 3.7rem;
|
|
background: url('~@/assets/assignCase/assignCase_bg2.png') no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
padding-top: 1.2rem;
|
|
.assign-case-detail-page-header-son {
|
|
width: 9rem;
|
|
height: 2.5rem;
|
|
border-radius: 0.01rem;
|
|
background: #fff;
|
|
margin: auto;
|
|
box-shadow: 5px 5px 20px #f2f3fb;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.2rem;
|
|
.assign-case-detail-page-header-son-left {
|
|
height: 2rem;
|
|
width: 2.9rem;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 100%;
|
|
margin-right: 0.3rem;
|
|
}
|
|
.assign-case-detail-page-header-son-right {
|
|
.assign-case-detail-page-header-son-right-title {
|
|
color: #000000;
|
|
font-size: 0.36rem;
|
|
line-height: 0.36rem;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
.assign-case-detail-page-header-son-right-click {
|
|
color: #526aff;
|
|
font-size: 0.2rem;
|
|
line-height: 0.2rem;
|
|
cursor: pointer;
|
|
span {
|
|
display: inline-block;
|
|
}
|
|
span:first-child {
|
|
margin-right: 10px;
|
|
}
|
|
span:last-child {
|
|
width: 0.2rem;
|
|
height: 10px;
|
|
background: url('~@/assets/assignCase/assignCase_click.png')
|
|
no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.assign-case-detail-page-content {
|
|
padding-top: 0.6rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
.assign-case-detail-page-content-son {
|
|
width: 13rem;
|
|
display: flex;
|
|
}
|
|
.assign-case-detail-page-content-left {
|
|
width: 1.67rem;
|
|
.assign-case-detail-page-content-left-border {
|
|
border-right: 1px #e5e5e5 solid;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
position: fixed;
|
|
top: 4.9rem;
|
|
div {
|
|
height: 0.3rem;
|
|
padding-right: 0.7rem;
|
|
margin-bottom: 0.3rem;
|
|
font-size: 24px;
|
|
color: #666666;
|
|
line-height: 0.3rem;
|
|
cursor: pointer;
|
|
}
|
|
div:last-child {
|
|
margin-bottom: 0px;
|
|
}
|
|
.assign-case-detail-page-content-left-border-click {
|
|
padding-right: 0.66rem;
|
|
border-right: 4px #526aff solid;
|
|
color: #526aff;
|
|
}
|
|
}
|
|
}
|
|
.assign-case-detail-page-content-center {
|
|
width: 8.45rem;
|
|
padding: 0 0.4rem 1rem 0.35rem;
|
|
.assign-case-detail-page-content-center-card {
|
|
margin-bottom: 0.6rem;
|
|
.assign-case-detail-page-content-center-card-title {
|
|
font-size: 0.28rem;
|
|
color: #000000;
|
|
font-weight: bold;
|
|
line-height: 0.28rem;
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
.assign-case-detail-page-content-center-card-description {
|
|
color: #333333;
|
|
font-size: 0.2rem;
|
|
line-height: 0.34rem;
|
|
}
|
|
}
|
|
}
|
|
.assign-case-detail-page-content-right {
|
|
width: 2.7rem;
|
|
display: inline-block;
|
|
.assign-case-detail-page-content-right-card {
|
|
width: 2.7rem;
|
|
border: 1px #e5e5e5 solid;
|
|
position: relative;
|
|
padding-bottom: 0.6rem;
|
|
.assign-case-detail-page-content-right-card-title {
|
|
padding-left: 15px;
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(113, 132, 252, 0.8),
|
|
rgba(148, 163, 252, 0.8)
|
|
);
|
|
height: 0.64rem;
|
|
color: #fff;
|
|
font-size: 24px;
|
|
line-height: 0.64rem;
|
|
margin-bottom: 30px;
|
|
border-radius: 10px 10px 0 0;
|
|
span:first-child {
|
|
display: inline-block;
|
|
width: 15px;
|
|
height: 15px;
|
|
background: url('~@/assets/assignCase/assignCase_else.png')
|
|
no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
.assign-case-detail-page-content-right-card-content {
|
|
padding: 0 20px;
|
|
border-radius: 0px 0px 10px 10px;
|
|
.assign-case-detail-page-content-right-card-content-card {
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #ebebeb;
|
|
p:first-child {
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
margin-bottom: 20px;
|
|
color: #333;
|
|
}
|
|
p:last-child {
|
|
font-size: 18px;
|
|
line-height: 18px;
|
|
margin-bottom: 30px;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
.no-data {
|
|
position: absolute;
|
|
bottom: 0.2rem;
|
|
font-size: 0.18rem;
|
|
color: #cccccc;
|
|
width: 2.3rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|