﻿<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>
