154 lines
3.2 KiB
Vue
154 lines
3.2 KiB
Vue
<template>
|
|
<div class="innovate">
|
|
<div class="box conter1000" 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="_head">
|
|
<p
|
|
class="text_hidden"
|
|
>{{state.data.title}}</p>
|
|
<div class="_tags">
|
|
<el-tag class="x_fff x_bg_blue" size="mini">{{state.data.description}}</el-tag>
|
|
</div>
|
|
<div class="text-right">
|
|
<el-button class="x_btns">购买服务</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="_info">
|
|
<div class="_l">
|
|
<div class="html" v-html="state.data.content"></div>
|
|
</div>
|
|
<div class="_r">
|
|
<webContact />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<webFooter></webFooter>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import webFooter from "@/components/webFooter/index.vue";
|
|
import webBreadcrumb from "@/components/webBreadcrumb/index.vue";
|
|
import webContact from "@/components/webContact/index.vue";
|
|
import request from '@/utils/request'
|
|
// to do 创新服务详情
|
|
function detail (id) {
|
|
return request({
|
|
url: '/v1/service/innovate/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>
|
|
.innovate {
|
|
background-color: #f2f6ff;
|
|
min-height: 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.box {
|
|
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;
|
|
}
|
|
}
|
|
._head {
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
p {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 30px;
|
|
}
|
|
._tags {
|
|
margin: 9px 0;
|
|
}
|
|
}
|
|
._info {
|
|
display: flex;
|
|
margin-top: 16px;
|
|
margin-bottom: 35px;
|
|
._l {
|
|
width: 662px;
|
|
margin-right: 14px;
|
|
padding: 14px 40px 0 20px;
|
|
background-color: #fff;
|
|
._tit {
|
|
&::before {
|
|
content: "";
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
width: 5px;
|
|
height: 5px;
|
|
background-color: #0054ff;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
._txt {
|
|
margin-bottom: 45px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 24px;
|
|
div {
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
._r {
|
|
flex: 1;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|