解决方案&创新服务&活动报名

src/views/website/innovate/detail.vue

@@ -0,0 +1,150 @@
+<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">联系我</div>
+      </div>
+    </div>
+    <webFooter></webFooter>
+  </div>
+</template>
+
+<script setup>
+import webFooter from "@/components/webFooter/index.vue";
+import webBreadcrumb from "@/components/webBreadcrumb/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>