From 052f18cae491ee243338c5089990c1fc8a65a5a4 Mon Sep 17 00:00:00 2001
From: hh <292475944@qq.com>
Date: Tue, 18 Jan 2022 18:55:17 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E6=96=B9=E6=A1=88&=E5=88=9B?=
 =?UTF-8?q?=E6=96=B0=E6=9C=8D=E5=8A=A1&=E6=B4=BB=E5=8A=A8=E6=8A=A5?=
 =?UTF-8?q?=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   2 +-
 src/api/website/home/index.js                 |  19 +-
 src/assets/styles/index.scss                  |   5 +
 src/components/Pagination/index.vue           |   2 +-
 src/components/webHead/index.vue              |   2 +-
 src/layout/components/tagsView/index.vue      |   1 -
 src/router/index.js                           |  43 +--
 src/views/website/about/about.vue             |  78 +++--
 src/views/website/activity/activity.vue       |  38 ++-
 src/views/website/activity/detail.vue         | 158 ++++++++++
 src/views/website/activity/list.vue           | 289 +++++++++++++++++
 src/views/website/index/comp/index3.vue       |  24 +-
 src/views/website/index/comp/index4.vue       |  24 +-
 src/views/website/index/comp/index5.vue       |  24 +-
 src/views/website/index/comp/index6.vue       |  24 +-
 src/views/website/index/comp/index7.vue       |  24 +-
 src/views/website/index/index.vue             |   4 +-
 src/views/website/innovate/detail.vue         | 150 +++++++++
 src/views/website/innovate/innovate.vue       | 262 ++++++----------
 .../website/solution/components/seeMore.vue   |  88 ++++--
 src/views/website/solution/detail.vue         | 127 ++++++++
 src/views/website/solution/solution.vue       | 296 +++++++++++++++++-
 22 files changed, 1374 insertions(+), 310 deletions(-)
 create mode 100644 src/views/website/activity/detail.vue
 create mode 100644 src/views/website/activity/list.vue
 create mode 100644 src/views/website/innovate/detail.vue
 create mode 100644 src/views/website/solution/detail.vue

diff --git a/src/App.vue b/src/App.vue
index 521028a..93d36a2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,6 @@
 import { defineComponent, getCurrentInstance, onMounted, reactive } from "vue";
 import DevicePixelRatio from './utils/devicePixelRatio';
 onMounted(() => {
-  new DevicePixelRatio().init();
+  // new DevicePixelRatio().init();
 })
 </script>
diff --git a/src/api/website/home/index.js b/src/api/website/home/index.js
index 1c1601f..f70191b 100644
--- a/src/api/website/home/index.js
+++ b/src/api/website/home/index.js
@@ -38,4 +38,21 @@ export function company() {
     url: '/v1/index/distribution/company',
     method: 'get'
   })
-}
\ No newline at end of file
+}
+
+// 获取banner
+export function banner (key) {
+  return request({
+    url: '/v1/sys/banner',
+    method: 'get',
+    params: { key }
+  })
+}
+
+// 行业领域信息
+export function industry () {
+  return request({
+      url: '/v1/sys/industry',
+      method: 'get',
+  })
+}
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 150af0a..6f50f81 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -237,3 +237,8 @@ aside {
 .x_bg_blue{
   background-color: #0054ff !important;
 }
+
+// 富文本图片
+.html img {
+  max-width: 100%;
+}
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index 25fbb13..86debd3 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -3,7 +3,7 @@
     <el-pagination
       :background="background"
       v-model:current-page="currentPage"
-      :page-size="pageSize"
+      v-model:page-size="pageSize"
       :layout="layout"
       :page-sizes="pageSizes"
       :pager-count="pagerCount"
diff --git a/src/components/webHead/index.vue b/src/components/webHead/index.vue
index 0ab0d2a..fa3733e 100644
--- a/src/components/webHead/index.vue
+++ b/src/components/webHead/index.vue
@@ -157,7 +157,7 @@ dt {
       .show_box {
         display: none;
         position: absolute;
-        bottom: -170px;
+        top: 80px;
         width: 100%;
         text-align: center;
         background-color: red;
diff --git a/src/layout/components/tagsView/index.vue b/src/layout/components/tagsView/index.vue
index 3b08500..5fbc761 100644
--- a/src/layout/components/tagsView/index.vue
+++ b/src/layout/components/tagsView/index.vue
@@ -44,7 +44,6 @@
 <script setup>
 import ScrollPane from './ScrollPane'
 import { getNormalPath } from '@/utils/ruoyi'
-
 const visible = ref(false);
 const top = ref(0);
 const left = ref(0);
diff --git a/src/router/index.js b/src/router/index.js
index dce99ca..96c2fb6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -40,38 +40,41 @@ export const constantRoutes = [
         component: () => import('../views/website/index/index.vue'),
       },
       {
-        path: 'solution',
+        path: 'solution/:name',
         name: 'solution',
         component: () => import('../views/website/solution/solution.vue'),
-        children:[
-          {
-            path:'small',
-            name:'small',
-            component: () => import('../views/website/solution/small.vue'),
-          },{
-            path:'large',
-            name:'large',
-            component: () => import('../views/website/solution/large.vue'),
-          },{
-            path:'government',
-            name:'government',
-            component: () => import('../views/website/solution/government.vue'),
-          },{
-            path:'scientific',
-            name:'scientific',
-            component: () => import('../views/website/solution/scientific.vue'),
-          },
-        ]
+      },
+      {
+        path: 'solution/detail/:id',
+        name: 'solutionDetail',
+        component: () => import('../views/website/solution/detail.vue'),
       },
       {
         path: 'innovate',
         name: 'innovate',
         component: () => import('../views/website/innovate/innovate.vue'),
       },
+      {
+        path: 'innovate/detail/:id',
+        name: 'innovateDetail',
+        component: () => import('../views/website/innovate/detail.vue'),
+      },
       {
         path: 'activity',
         name: 'activity',
         component: () => import('../views/website/activity/activity.vue'),
+        children:[
+          {
+            path: '',
+            name: 'activityList',
+            component: () => import('../views/website/activity/list.vue'),
+          },
+          {
+            path: 'detail/:id',
+            name: 'activityDetail',
+            component: () => import('../views/website/activity/detail.vue'),
+          },
+        ]
       },
       {
         path: 'about',
diff --git a/src/views/website/about/about.vue b/src/views/website/about/about.vue
index d88d803..e2fac3e 100644
--- a/src/views/website/about/about.vue
+++ b/src/views/website/about/about.vue
@@ -1,21 +1,26 @@
 <template>
-  <div class="about">
-    <div style="height: 394px; background-color: #ccc"></div>
+  <div class="about" v-loading="loading">
+    <div v-if="!state.banner" style="height: 394px; background-color: #ccc"></div>
+    <div
+      v-else
+      style="height: 394px;background-size: cover;background-color: #ccc"
+      :style="{ backgroundImage: `url(${state.banner})` }"
+    ></div>
+
     <div class="box conter1000">
       <div class="_l">
         <div
           class="_item pointer"
-          :class="item.id == kindId ? 'x_fff x_bg_blue' : ''"
-          v-for="item in kindList"
+          v-for="(item,index) in state.data"
+          :class="index == kindId ? 'x_fff x_bg_blue' : ''"
           :key="item.id"
-          @click="handleActive(item.id)"
-        >
-          {{ item.title }}
-        </div>
+          @click="handleActive(index)"
+        >{{ item.title }}</div>
       </div>
-      <div class="_r" v-loading="loading">
+      <div class="_r">
+        <div v-if="state.data.length" class="html" v-html="state.data[kindId]['content']"></div>
         <!-- 公司简介---后期可能是接收富文本内容 -->
-        <h3>公司简介</h3>
+        <!-- <h3>公司简介</h3>
         <p>
           中国科学院重庆绿色智能技术研究院合肥分院（以下简称“合肥分院”）是在响应中科院号召支持合肥国家科学中心建设的前提下，中国科学院重庆绿色智能技术研究院与合肥市共建的直属事业法人科研机构。2018年2月20号在中科院与安徽省共建领导小组会议上正式签约筹建，2018年12月20日，正式获得事业法人登记证书合肥分院设立科技咨询委员会和产业咨询委员会设人工智能、精准医疗、5G物联、绿色环保等研究单元。主要从事绿色智能科技研发与科技成果转化。合肥分院秉持重庆研究院“市场为魂，创新为本的理念。按照“院企共建、源头创新、科技共享、产业集聚”模式建设。以服务好科技工作者，服务好合作企业为宗旨。开展形式多样的成果转移转化加快科研成果落地。
         </p>
@@ -31,7 +36,7 @@
         </p>
         <p>
           中国科学院重庆绿色智能技术研究院合肥分院（以下简称“合肥分院”）是在响应中科院号召支持合肥国家科学中心建设的前提下，中国科学院重庆绿色智能技术研究院与合肥市共建的直属事业法人科研机构。2018年2月20号在中科院与安徽省共建领导小组会议上正式签约筹建，2018年12月20日，正式获得事业法人登记证书合肥分院设立科技咨询委员会和产业咨询委员会设人工智能、精准医疗、5G物联、绿色环保等研究单元。主要从事绿色智能科技研发与科技成果转化。合肥分院秉持重庆研究院“市场为魂，创新为本的理念。按照“院企共建、源头创新、科技共享、产业集聚”模式建设。以服务好科技工作者，服务好合作企业为宗旨。开展形式多样的成果转移转化加快科研成果落地。主要从事绿色智能科技研发与科技成果转化。合肥分院秉持重庆研究院“市场为魂，创新为本的理念。按照“院企共建、源头创新、科技共享、产业集聚”模式建设。以服务好科技工作者，服务好合作企业为宗旨。开展形式多样的成果转移转化加快科研成果落地。
-        </p>
+        </p>-->
       </div>
     </div>
     <webFooter></webFooter>
@@ -40,32 +45,47 @@
 
 <script setup>
 import webFooter from "@/components/webFooter/index.vue";
-
-const input3 = ref("");
+import request from '@/utils/request'
+import { banner } from "@/api/website/home/index";
+function about () {
+  return request({
+    url: '/v1/sys/about',
+    method: 'get',
+  })
+}
 const loading = ref(true);
-const total = ref(1);
-const queryParams = reactive({
-  pageNum: 1,
-  pageSize: 10,
+const state = reactive({
+  data: [],
+  banner: ''
 });
-const kindId = ref(1);
-const kindList = reactive([
-  { id: 1, title: "公司简介" },
-  { id: 2, title: "发展历程" },
-  { id: 3, title: "联系我们" },
-]);
+const kindId = ref(0);
+
 /** 查询 */
-function getList() {
+function getData () {
   loading.value = true;
-  setTimeout(() => {
+  banner('关于我们').then(res => {
+    if (200 == res.code) {
+      state.banner = res.data.images
+      loading.value = false;
+    }
+  }).catch(() => {
     loading.value = false;
-  }, 1000);
+  })
+  console.log('baout1')
+  about().then(res => {
+    console.log('baout2')
+    if (200 == res.code) {
+      console.log('baout', res)
+      state.data = res.data;
+    }
+  })
 }
-function handleActive(id) {
+onMounted(() => {
+  getData()
+});
+function handleActive (id) {
   kindId.value = id;
-  getList();
 }
-getList();
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/website/activity/activity.vue b/src/views/website/activity/activity.vue
index 6aec7d2..5bb4586 100644
--- a/src/views/website/activity/activity.vue
+++ b/src/views/website/activity/activity.vue
@@ -1,12 +1,21 @@
 <template>
-  <div class="activity">
+  <div class="activity" v-loading="loading">
     <webReleaseActive v-model:dialogVisible="dialogVisible"></webReleaseActive>
-    <div class="_banner" style="height: 394px; background-color: #ccc">
+    <div v-if="!state.banner" class="_banner" style="height: 394px; background-color: #ccc">
       <div class="_publish conter1000">
         <el-button @click="dialogVisible = true">发布活动</el-button>
       </div>
     </div>
-    <div class="box conter1000" v-show="!isShow">
+    <div v-else class="_banner" style="height: 394px;background-size: cover;" :style="{backgroundImage: `url(${state.banner})`}">
+      <div class="_publish conter1000">
+        <el-button @click="dialogVisible = true">发布活动</el-button>
+      </div>
+    </div>
+    <div>
+      <router-view />
+    </div>
+
+    <!-- <div class="box conter1000" v-show="!isShow">
       <el-row :gutter="10">
         <el-col :span="5">
           <el-select
@@ -128,11 +137,13 @@
         </div>
         <div class="_r">联系我</div>
       </div>
-    </div>
+    </div> -->
     <webFooter></webFooter>
   </div>
 </template>
 <script setup>
+import { banner } from "@/api/website/home/index";
+
 import webFooter from "@/components/webFooter/index.vue";
 import webBreadcrumb from "@/components/webBreadcrumb/index.vue";
 import webReleaseActive from "@/components/webReleaseActive/index.vue";
@@ -140,12 +151,8 @@ import webReleaseActive from "@/components/webReleaseActive/index.vue";
 const dialogVisible = ref(false);
 const loading = ref(true);
 const total = ref(1);
-const queryParams = reactive({
-  pageNum: 1,
-  pageSize: 10,
-  value: "",
-  value2: "",
-  value3: "",
+const state = reactive({
+  banner: ''
 });
 let dataList = ref([]);
 const isShow = ref(false);
@@ -197,6 +204,17 @@ function handleDetail(item) {
   isShow.value = !isShow.value;
 }
 getList();
+
+onMounted(() => {
+  banner('活动报名').then(res => {
+    if (200 == res.code) {
+      state.banner = res.data.images
+      loading.value = false;
+    }
+  }).catch(() => {
+    loading.value = false;
+  })
+});
 </script>
 <style lang="scss" scoped>
 .activity {
diff --git a/src/views/website/activity/detail.vue b/src/views/website/activity/detail.vue
new file mode 100644
index 0000000..72fc6a0
--- /dev/null
+++ b/src/views/website/activity/detail.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="box conter1000">
+<div class="_head">
+        <div class="_l">
+          <el-image
+            style="width: 358px; height: 100%; vertical-align: middle"
+            :src="state.data.image"
+            fit="cover"
+          ></el-image>
+        </div>
+        <div class="_r">
+          <p class="_title text_hidden">{{state.data.title }}</p>
+          <p class="_brief text_hidden">
+              <!-- 修改样式 -->
+            活动简介：{{state.data.description || '暂无'}}</p>
+          <p class="_classif">活动分类：{{state.data.industry}}</p>
+          <p class="_time">
+            活动时间：{{ parseTime(state.data.begin_at) }} ~ {{parseTime(state.data.finish_at) }}
+          </p>
+          <p class="_place text_hidden">
+            活动地点：{{state.data.address}}
+          </p>
+          <p class="_user">
+            <el-button class="x_btns" disabled>已报名</el-button>
+            <span class="_num"><span class="x_blue">{{state.data.join_count}}</span> 人报名</span>
+          </p>
+        </div>
+      </div>
+      <div class="_info">
+        <div class="_l">
+          <p class="_tit">活动详情</p>
+          <div class="html" v-html="state.data.content"></div>
+        </div>
+        <div class="_r">联系我</div>
+      </div>
+    </div>
+</template>
+
+<script setup>
+import webFooter from "@/components/webFooter/index.vue";
+import webBreadcrumb from "@/components/webBreadcrumb/index.vue";
+import request from '@/utils/request'
+function detail (id) {
+  return request({
+    url: '/v1/activity/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>
+  .box {
+    ._head {
+      padding: 20px;
+      background-color: #fff;
+      display: flex;
+      ._r {
+        padding-left: 18px;
+        p {
+          margin: 11px 0;
+        }
+        ._title {
+          font-size: 18px;
+          font-weight: 500;
+          color: #333333;
+          line-height: 30px;
+          height: 60px;
+        }
+        ._brief,
+        ._classif,
+        ._time,
+        ._place {
+          font-size: 14px;
+          font-weight: 400;
+          color: #666666;
+        }
+        ._brief, ._place {
+          line-height: 24px;
+          height: 48px;
+        }
+        ._user {
+          margin-bottom: 0;
+          display: flex;
+          align-items: flex-end;
+          ._num {
+            margin-left: 10px;
+            font-size: 16px;
+            font-weight: 400;
+            color: #666666;
+            .x_blue {
+              font-size: 30px;
+            }
+          }
+        }
+      }
+    }
+    ._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;
+        }
+      }
+      ._r {
+        flex: 1;
+        background-color: #fff;
+      }
+    }
+  }
+</style>
diff --git a/src/views/website/activity/list.vue b/src/views/website/activity/list.vue
new file mode 100644
index 0000000..ac89213
--- /dev/null
+++ b/src/views/website/activity/list.vue
@@ -0,0 +1,289 @@
+<template>
+    <div>
+        <div class="box conter1000">
+            <el-row :gutter="10" style="margin-bottom: 10px;">
+                <el-col :span="8">
+                    <el-select
+                        style="width: 100%;"
+                        placeholder="请选择"
+                        v-model="state.id1"
+                        @change="state.id2 = ''"
+                        clearable
+                    >
+                        <el-option
+                            v-for="option in state.industryList"
+                            :key="option.id"
+                            :value="option.id"
+                            :label="option.name"
+                        />
+                    </el-select>
+                </el-col>
+                <el-col :span="8">
+                    <el-select
+                        style="width: 100%;"
+                        placeholder="请选择"
+                        v-model="state.id2"
+                        @change="state.id3 = ''"
+                        clearable
+                    >
+                        <el-option
+                            v-for="option in searchIndustryData(state.id1)['children']"
+                            :key="option.id"
+                            :value="option.id"
+                            :label="option.name"
+                        />
+                    </el-select>
+                </el-col>
+                <el-col :span="8">
+                    <el-select style="width: 100%;" placeholder="请选择" v-model="state.id3" clearable>
+                        <el-option
+                            v-for="option in searchIndustryData(state.id2)['children']"
+                            :key="option.id"
+                            :value="option.id"
+                            :label="option.name"
+                        />
+                    </el-select>
+                </el-col>
+            </el-row>
+            <el-row :gutter="10">
+                <el-col :span="8">
+                    <el-select style="width: 100%;" placeholder="活动状态" v-model="state.status">
+                        <el-option
+                            v-for="option in [{ status: 1, name: '未开始' }, { status: 2, name: '进行中' }, { status: 3, name: '已结束' },]"
+                            :key="option.status"
+                            :value="option.status"
+                            :label="option.name"
+                        />
+                    </el-select>
+                </el-col>
+                <el-col :span="16">
+                    <el-row type="flex" class="row-bg" justify="space-between">
+                        <el-col :span="21">
+                            <el-input v-model="state.title" placeholder="请输入关键词"></el-input>
+                        </el-col>
+                        <el-col :span="3" style="text-align: right;">
+                            <el-button type="primary" @click="handleQuery">搜索</el-button>
+                        </el-col>
+                    </el-row>
+                </el-col>
+            </el-row>
+            <div v-loading="loading">
+                <div
+                    class="_item pointer"
+                    v-for="item in state.list"
+                    :key="item.id"
+                    @click="handleDetail(item.id)"
+                >
+                    <div class="_l">
+                        <el-image
+                            style="width: 358px; height: 200px; vertical-align: middle"
+                            :src="item.image"
+                            fit="fill"
+                        ></el-image>
+                    </div>
+                    <div class="_r">
+                        <p class="text_hidden">{{ item.title }}</p>
+                        <div
+                            class="_time"
+                        >活动时间：{{ parseTime(item.begin_at) }} - {{ parseTime(item.finish_at) }}</div>
+                        <div class="_info">
+                            <span class="fl">
+                                <span class="x_blue">{{ item.join_count }}</span> 人报名
+                            </span>
+                            <el-button
+                                class="fr x16"
+                                style="border-radius: 0"
+                                type="info"
+                                v-if="item.status == 1"
+                                disabled
+                            >未开始</el-button>
+                            <el-button
+                                v-else-if="item.status == 2"
+                                class="fr x16 x_blue x_border_blue"
+                                style="border-radius: 0"
+                            >报名</el-button>
+                            <el-button
+                                v-if="item.status == 3"
+                                class="fr x16"
+                                style="border-radius: 0"
+                                type="info"
+                                disabled
+                            >已结束</el-button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <pagination
+                class="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 { industry } from "@/api/website/home/index";
+const router = useRouter();
+const loading = ref(true);
+const state = reactive({
+    kind: [],
+    kindId: '',
+    list: [],
+    pageNum: 1,
+    total: 1,
+    pageSize: 10,
+    pageSizes: [10, 10 << 1, 10 << 2, 10 << 3],
+    title: "",
+    industryList: [],
+    id1: '',
+    id2: '',
+    id3: '',
+});
+
+let treeData = [];
+
+function searchIndustryData (code) {
+    return deepFindTree(code, treeData);
+}
+
+function deepFindTree (code, arr) {
+    let snap = false;
+    for (let index = 0; index < arr.length; index++) {
+        const ele = arr[index];
+        if (code == ele.id) {
+            snap = ele;
+            break;
+        } else if (ele['children'] != null) {
+            snap = deepFindTree(code, ele['children']);
+            if (snap) {
+                break;
+            }
+        } else {
+            snap = false;
+        }
+    }
+    return snap;
+}
+
+function activity () {
+    let industry = '';
+    if (state.id1) {
+        industry += state.id1;
+    }
+    if (state.id2) {
+        industry += `-${state.id2}`;
+    }
+    if (state.id3) {
+        industry += `-${state.id3}`;
+    }
+    return request({
+        url: '/v1/activity',
+        method: 'post',
+        data: { industry, status: state.status, page_num: state.pageNum, page_size: state.pageSize, title: state.title }
+    })
+}
+
+
+function getDataList () {
+    loading.value = true;
+    activity().then(res => {
+        if (200 == res.code) {
+            state.total = res.data.count;
+            state.list = res.data.data;
+            loading.value = false;
+        }
+    }).catch(() => {
+        loading.value = false;
+    })
+}
+
+onMounted(() => {
+    init();
+});
+
+function init () {
+    loading.value = true;
+    industry().then(res => {
+        if (200 == res.code) {
+            state.industryList = res.data;
+            treeData = res.data;
+            console.log('++++++')
+            console.log(searchIndustryData(15))
+        }
+    })
+
+    getDataList();
+
+}
+
+function handleDetail (id) {
+    let routeData = router.resolve({ path: `/activity/detail/${id}` });
+    window.open(routeData.href, '_blank');
+}
+
+function handleQuery () {
+    state.pageNum = 1;
+    getDataList();
+}
+
+</script>
+
+
+<style  lang="scss" scoped>
+.box {
+    position: relative;
+    padding-top: 20px;
+    .el-input {
+        // ::v-deep(.el-input__inner) {
+        //     border-right: 0;
+        // }
+        ::v-deep(.el-input-group__append) {
+            overflow: hidden;
+            font-size: 16px;
+            color: #fff;
+            border-top-color: #0054ff;
+            border-right-color: #0054ff;
+            border-bottom-color: #0054ff;
+            background-color: #0054ff;
+        }
+    }
+    ._item {
+        display: flex;
+        margin-top: 16px;
+        ._r {
+            flex: 1;
+            padding: 36px 20px 0 16px;
+            background-color: #fff;
+            p {
+                margin-top: 0;
+                font-size: 16px;
+                font-weight: 600;
+                color: #333333;
+                line-height: 30px;
+            }
+            ._time {
+                margin-bottom: 7px;
+                font-size: 16px;
+                font-weight: 400;
+                color: #666666;
+            }
+            ._info {
+                .fl {
+                    font-size: 16px;
+                    font-weight: 400;
+                    color: #666666;
+                    span {
+                        font-size: 30px;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/website/index/comp/index3.vue b/src/views/website/index/comp/index3.vue
index 1e9f33d..6839a29 100644
--- a/src/views/website/index/comp/index3.vue
+++ b/src/views/website/index/comp/index3.vue
@@ -137,16 +137,16 @@ onMounted(async () => {
       loading.value = false;
     }
   });
-  let echartsDomList = document.querySelectorAll('.echartsDom');
-  // 兼容echarts
-  echartsDomList.forEach(element => {
-    element.style.zoom = window.devicePixelRatio;
-    element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
-    element.style.transformOrigin = "0%0%";
-    element.style.width = window.devicePixelRatio * 100 + '%';
-    element.style.height = window.devicePixelRatio * 100 + '%';
-    console.log(element.style.zoom, 'element.style.zoom')
-  });
+  // let echartsDomList = document.querySelectorAll('.echartsDom');
+  // // 兼容echarts
+  // echartsDomList.forEach(element => {
+  //   element.style.zoom = window.devicePixelRatio;
+  //   element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
+  //   element.style.transformOrigin = "0%0%";
+  //   element.style.width = window.devicePixelRatio * 100 + '%';
+  //   element.style.height = window.devicePixelRatio * 100 + '%';
+  //   console.log(element.style.zoom, 'element.style.zoom')
+  // });
 
   let height = document.body.clientHeight;
   let width = document.body.clientWidth;
@@ -417,10 +417,10 @@ function loadMap (mapName, data) {
   }
 }
 .leftBox {
-  left: 230px;
+  left: 10%;
 }
 .rightBox {
-  right: 230px;
+  right: 10%;
   max-height: 465px !important;
 }
 
diff --git a/src/views/website/index/comp/index4.vue b/src/views/website/index/comp/index4.vue
index 8f94e82..68f67ca 100644
--- a/src/views/website/index/comp/index4.vue
+++ b/src/views/website/index/comp/index4.vue
@@ -137,16 +137,16 @@ onMounted(async () => {
       loading.value = false;
     }
   });
-  let echartsDomList = document.querySelectorAll('.echartsDom');
-  // 兼容echarts
-  echartsDomList.forEach(element => {
-    element.style.zoom = window.devicePixelRatio;
-    element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
-    element.style.transformOrigin = "0%0%";
-    element.style.width = window.devicePixelRatio * 100 + '%';
-    element.style.height = window.devicePixelRatio * 100 + '%';
-    console.log(element.style.zoom, 'element.style.zoom')
-  });
+  // let echartsDomList = document.querySelectorAll('.echartsDom');
+  // // 兼容echarts
+  // echartsDomList.forEach(element => {
+  //   element.style.zoom = window.devicePixelRatio;
+  //   element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
+  //   element.style.transformOrigin = "0%0%";
+  //   element.style.width = window.devicePixelRatio * 100 + '%';
+  //   element.style.height = window.devicePixelRatio * 100 + '%';
+  //   console.log(element.style.zoom, 'element.style.zoom')
+  // });
 
   let height = document.body.clientHeight;
   let width = document.body.clientWidth;
@@ -416,10 +416,10 @@ function loadMap (mapName, data) {
   }
 }
 .leftBox {
-  left: 230px;
+  left: 10%;
 }
 .rightBox {
-  right: 230px;
+  right: 10%;
   max-height: 465px !important;
 }
 
diff --git a/src/views/website/index/comp/index5.vue b/src/views/website/index/comp/index5.vue
index f66c353..66d695d 100644
--- a/src/views/website/index/comp/index5.vue
+++ b/src/views/website/index/comp/index5.vue
@@ -137,16 +137,16 @@ onMounted(async () => {
       loading.value = false;
     }
   });
-  let echartsDomList = document.querySelectorAll('.echartsDom');
-  // 兼容echarts
-  echartsDomList.forEach(element => {
-    element.style.zoom = window.devicePixelRatio;
-    element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
-    element.style.transformOrigin = "0%0%";
-    element.style.width = window.devicePixelRatio * 100 + '%';
-    element.style.height = window.devicePixelRatio * 100 + '%';
-    console.log(element.style.zoom, 'element.style.zoom')
-  });
+  // let echartsDomList = document.querySelectorAll('.echartsDom');
+  // // 兼容echarts
+  // echartsDomList.forEach(element => {
+  //   element.style.zoom = window.devicePixelRatio;
+  //   element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
+  //   element.style.transformOrigin = "0%0%";
+  //   element.style.width = window.devicePixelRatio * 100 + '%';
+  //   element.style.height = window.devicePixelRatio * 100 + '%';
+  //   console.log(element.style.zoom, 'element.style.zoom')
+  // });
 
   let height = document.body.clientHeight;
   let width = document.body.clientWidth;
@@ -417,10 +417,10 @@ function loadMap (mapName, data) {
   }
 }
 .leftBox {
-  left: 230px;
+  left: 10%;
 }
 .rightBox {
-  right: 230px;
+  right: 10%;
   max-height: 465px !important;
 }
 
diff --git a/src/views/website/index/comp/index6.vue b/src/views/website/index/comp/index6.vue
index 34e801a..04ff8f6 100644
--- a/src/views/website/index/comp/index6.vue
+++ b/src/views/website/index/comp/index6.vue
@@ -137,16 +137,16 @@ onMounted(async () => {
       loading.value = false;
     }
   });
-  let echartsDomList = document.querySelectorAll('.echartsDom');
-  // 兼容echarts
-  echartsDomList.forEach(element => {
-    element.style.zoom = window.devicePixelRatio;
-    element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
-    element.style.transformOrigin = "0%0%";
-    element.style.width = window.devicePixelRatio * 100 + '%';
-    element.style.height = window.devicePixelRatio * 100 + '%';
-    console.log(element.style.zoom, 'element.style.zoom')
-  });
+  // let echartsDomList = document.querySelectorAll('.echartsDom');
+  // // 兼容echarts
+  // echartsDomList.forEach(element => {
+  //   element.style.zoom = window.devicePixelRatio;
+  //   element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
+  //   element.style.transformOrigin = "0%0%";
+  //   element.style.width = window.devicePixelRatio * 100 + '%';
+  //   element.style.height = window.devicePixelRatio * 100 + '%';
+  //   console.log(element.style.zoom, 'element.style.zoom')
+  // });
 
   let height = document.body.clientHeight;
   let width = document.body.clientWidth;
@@ -416,10 +416,10 @@ function loadMap (mapName, data) {
   }
 }
 .leftBox {
-  left: 230px;
+  left: 10%;
 }
 .rightBox {
-  right: 230px;
+  right: 10%;
   max-height: 465px !important;
 }
 
diff --git a/src/views/website/index/comp/index7.vue b/src/views/website/index/comp/index7.vue
index be01341..4e8e47a 100644
--- a/src/views/website/index/comp/index7.vue
+++ b/src/views/website/index/comp/index7.vue
@@ -137,16 +137,16 @@ onMounted(async () => {
       loading.value = false;
     }
   });
-  let echartsDomList = document.querySelectorAll('.echartsDom');
-  // 兼容echarts
-  echartsDomList.forEach(element => {
-    element.style.zoom = window.devicePixelRatio;
-    element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
-    element.style.transformOrigin = "0%0%";
-    element.style.width = window.devicePixelRatio * 100 + '%';
-    element.style.height = window.devicePixelRatio * 100 + '%';
-    console.log(element.style.zoom, 'element.style.zoom')
-  });
+  // let echartsDomList = document.querySelectorAll('.echartsDom');
+  // // 兼容echarts
+  // echartsDomList.forEach(element => {
+  //   element.style.zoom = window.devicePixelRatio;
+  //   element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
+  //   element.style.transformOrigin = "0%0%";
+  //   element.style.width = window.devicePixelRatio * 100 + '%';
+  //   element.style.height = window.devicePixelRatio * 100 + '%';
+  //   console.log(element.style.zoom, 'element.style.zoom')
+  // });
 
   let height = document.body.clientHeight;
   let width = document.body.clientWidth;
@@ -417,10 +417,10 @@ function loadMap (mapName, data) {
   }
 }
 .leftBox {
-  left: 230px;
+  left: 10%;
 }
 .rightBox {
-  right: 230px;
+  right: 10%;
   max-height: 465px !important;
 }
 
diff --git a/src/views/website/index/index.vue b/src/views/website/index/index.vue
index 07cdd6c..2cf5060 100644
--- a/src/views/website/index/index.vue
+++ b/src/views/website/index/index.vue
@@ -30,7 +30,7 @@ import index7 from './comp/index7.vue';
 import index8 from './comp/index8.vue';
 
 let state = reactive({
-  showBox: 2,
+  showBox: 0,
   boxList: [
     {
       comp: index1,
@@ -156,7 +156,7 @@ const throttle: (func: any, delay: number, immediate?: boolean) => any = (
 };
 
 onMounted(() => {
-  window.addEventListener("mousewheel", throttle(mouseWheelHandler, 600), true);
+  window.addEventListener("mousewheel", throttle(mouseWheelHandler, 500), true);
 });
 </script>
 
diff --git a/src/views/website/innovate/detail.vue b/src/views/website/innovate/detail.vue
new file mode 100644
index 0000000..7c9a174
--- /dev/null
+++ b/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>
diff --git a/src/views/website/innovate/innovate.vue b/src/views/website/innovate/innovate.vue
index 78bc9a6..9851f1e 100644
--- a/src/views/website/innovate/innovate.vue
+++ b/src/views/website/innovate/innovate.vue
@@ -1,163 +1,145 @@
 <template>
   <div class="innovate">
-    <div class="box conter1000" v-show="!isShow">
+    <div class="box conter1000" v-loading="loading">
       <div class="_l">
         <div
           class="_item pointer"
-          :class="item.id == kindId ? 'x_fff x_bg_blue' : ''"
-          v-for="item in kindList"
+          :class="item.id == state.kindId ? 'x_fff x_bg_blue' : ''"
+          v-for="item in state.kind"
           :key="item.id"
           @click="handleActive(item.id, item.title)"
-        >
-          {{ item.title }}
-        </div>
+        >{{ item.title }}</div>
       </div>
       <div class="_r">
         <div style="width: 70%">
-          <el-input
-            v-model.trim="queryParams.input3"
-            placeholder="请输入关键词"
-          >
+          <el-input v-model.trim="state.title" placeholder="请输入关键词">
             <template #append>
               <el-button @click="handleQuery">搜索</el-button>
             </template>
           </el-input>
         </div>
-        <div class="_list" v-loading="loading">
-          <div class="item" v-for="item in dataList" :key="item.id">
+        <div class="_list" v-loading="listLoading">
+          <div class="item pointer" v-for="item in state.list" :key="item.id">
             <div class="_info">
               <p class="text_hidden">{{ item.title }}</p>
               <div class="_tags">
-                <el-tag class="x_fff x_bg_blue">{{ item.tag }}</el-tag>
+                <el-tag class="x_fff x_bg_blue">{{ item.description }}</el-tag>
               </div>
             </div>
-            <div class="_detail pointer" @click="handleDetail(item)">
-              查看详情
-            </div>
+            <div class="_detail" @click="handleDetail(item.id)">查看详情</div>
           </div>
         </div>
         <pagination
-          v-show="total > 0"
-          :total="total"
-          v-model:page="queryParams.pageNum"
-          v-model:limit="queryParams.pageSize"
+          class="pagination"
+          :total="state.total"
+          :pageSizes="state.pageSizes"
+          v-model:page="state.pageNum"
+          v-model:limit="state.pageSize"
+          :autoScroll="false"
           @pagination="getDataList"
         />
       </div>
     </div>
-    <div class="box2 conter1000" v-show="isShow">
-      <webBreadcrumb
-        v-model:isShow="isShow"
-        v-model:breadcrumbTitle="breadcrumbTitle"
-      ></webBreadcrumb>
-      <div class="_head">
-        <p class="text_hidden">
-          服务标题/固体废物处理与资源化系列技术与产品固体废物处理与资源化系列技术处理与资源化系列技术固体废物处理与资源化系列技术与产品固体废物处理与资源化系列技术处理与资源化系列技术
-        </p>
-        <div class="_tags">
-          <el-tag class="x_fff x_bg_blue" size="mini">服务描述标签</el-tag>
-        </div>
-        <div class="text-right">
-          <el-button class="x_btns">购买服务</el-button>
-        </div>
-      </div>
-      <div class="_info">
-        <div class="_l">
-          <p class="_tit">服务介绍</p>
-          <div class="_txt">
-            <div>现有基础：</div>
-            本项目将生产废水分质处理后，提升进入曝气微电解反应器内，通过铁、碳原料在酸性情况下形成微电池，首先对铜氨络合物破络；其次对油墨等有机物质开环断链，提高废水的可生化性。更突出的是，利用金属离子的活性：铁置换其他金属离子，从而从废水中除去，然后经生化系统处理后，出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单、出水稳定达标等优点。
-            出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单出水稳定达标等优点。
-          </div>
-          <div class="_txt">
-            <div>现有基础：</div>
-            本项目将生产废水分质处理后，提升进入曝气微电解反应器内，通过铁、碳原料在酸性情况下形成微电池，首先对铜氨络合物破络；其次对油墨等有机物质开环断链，提高废水的可生化性。更突出的是，利用金属离子的活性：铁置换其他金属离子，从而从废水中除去，然后经生化系统处理后，出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单、出水稳定达标等优点。
-            出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单出水稳定达标等优点。
-          </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'
+const router = useRouter();
 const loading = ref(true);
-const queryParams = reactive({
+const listLoading = ref(true);
+const state = reactive({
+  kind: [],
+  kindId: '',
+  list: [],
   pageNum: 1,
-  pageSize: 10,
-  input3: "",
-});
-const total = ref(1);
-const kindId = ref(1);
-let kindTitle = ref("情报服务");
-const isShow = ref(false);
-let breadcrumbTitle = reactive({
-  id: null,
+  total: 1,
+  pageSize: 9,
+    pageSizes: [9, 9 << 1, 9 << 2, 9 << 3],
   title: "",
-  twoTitle: "",
 });
-let kindList = ref([]);
-let dataList = ref([]);
 
-function getKindList() {
-  kindList.value = [
-    { id: 1, title: "情报服务" },
-    { id: 2, title: "高技术服务" },
-    { id: 3, title: "情报2服务" },
-  ];
-  if (kindList.value.length) {
-    breadcrumbTitle.id = kindList.value[0].id;
-    breadcrumbTitle.title = kindList.value[0].title;
-    breadcrumbTitle.twoTitle = kindList.value[0].title + "详情";
-  }
+function kind () {
+  return request({
+    url: '/v1/service/innovate/kind',
+    method: 'get',
+  })
 }
-function getDataList() {
+
+function innovate () {
+  return request({
+    url: '/v1/service/innovate',
+    method: 'post',
+    data: { kind_id: state.kindId, page_num: state.pageNum, page_size: state.pageSize, title: state.title }
+  })
+}
+
+function getDataList () {
+  listLoading.value = true;
+  innovate().then(res => {
+    if (200 == res.code) {
+      state.total = res.data.count;
+      state.list = res.data.data;
+      listLoading.value = false;
+    }
+  }).catch(() => {
+    listLoading.value = false;
+  })
+}
+
+onMounted(() => {
+  init();
+});
+
+function init () {
   loading.value = true;
-  setTimeout(() => {
-    dataList.value = [
-      { id: 1, title: "服务标题", tag: "标签1" },
-      { id: 2, title: "服务标题2", tag: "标签2" },
-      { id: 3, title: "服务标题3", tag: "标签3" },
-      { id: 4, title: "服务标题4", tag: "标签4" },
-      { id: 5, title: "服务标题5", tag: "标签5" },
-      { id: 6, title: "服务标题6", tag: "标签6" },
-    ];
+  kind().then(res => {
+    if (200 == res.code) {
+      state.kind = res.data;
+      if (res.data.length > 0) {
+        state.kindId = res.data[0].id;
+        getDataList();
+      }
+      loading.value = false;
+    }
+  }).catch(() => {
     loading.value = false;
-  }, 500);
+  })
 }
 
-function handleActive(id, title) {
-  breadcrumbTitle.id = id;
-  breadcrumbTitle.title = title;
-  breadcrumbTitle.twoTitle = title + "详情";
-  kindId.value = id;
-  kindTitle.value = title;
-  queryParams.pageNum = 1;
-  queryParams.input3 = "";
+function handleDetail (id) {
+  let routeData = router.resolve({ path: `/innovate/detail/${id}` });
+  window.open(routeData.href, '_blank');
+}
+
+function handleActive (id, title) {
+  state.kindId = id;
+  state.pageNum = 1;
+  state.title = "";
   getDataList();
 }
-function handleQuery() {
-  queryParams.pageNum = 1;
+function handleQuery () {
+  state.pageNum = 1;
   getDataList();
 }
-function handleDetail(item) {
-  isShow.value = !isShow.value;
-}
-getKindList();
-getDataList();
+
 </script>
 
 <style lang="scss" scoped>
 .innovate {
   background-color: #f2f6ff;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
   .box {
-    padding-top: 30px;
+    padding: 30px 0 20px 0;
+    flex: 1;
+    box-sizing: border-box;
     display: flex;
+    position: relative;
+
     ._l {
       width: 230px;
       margin-right: 14px;
@@ -173,6 +155,14 @@ getDataList();
     ._r {
       position: relative;
       flex: 1;
+      box-sizing: border-box;
+      padding-bottom: 50px;
+
+      .pagination {
+        position: absolute;
+        bottom: 0;
+        right: 20px;
+      }
       .el-input {
         ::v-deep(.el-input__inner) {
           border-right: 0;
@@ -222,66 +212,14 @@ getDataList();
             color: #333;
             font-weight: bold;
             font-size: 14px;
-            &:hover {
-              color: #fff;
-              background: #9bbcff;
-            }
+          }
+          &:hover ._detail {
+            color: #fff;
+            background: #9bbcff;
           }
         }
       }
     }
   }
-  .box2 {
-    ._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>
diff --git a/src/views/website/solution/components/seeMore.vue b/src/views/website/solution/components/seeMore.vue
index e832599..112babe 100644
--- a/src/views/website/solution/components/seeMore.vue
+++ b/src/views/website/solution/components/seeMore.vue
@@ -1,6 +1,9 @@
 <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>
@@ -8,24 +11,51 @@
         <span class="_two">{{ twoLevelTitle }}</span>
       </el-breadcrumb-item>
     </el-breadcrumb>
-    <ul class="_list">
-      <li v-for="item in 12" :key="item">
-        <el-image
-          style="width: 100%; height: 135px"
-          src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
-          fit="cover"
-        ></el-image>
-        <div class="_head text_hidden">
-          盘活本地技术供需对接，某企业引盘活本地技术供需对接，某企业引
-        </div>
-        <div class="_detail text_hidden">
-          江启明电子有限公司自成立以来始终专注于LED显示屏。
-        </div>
-      </li>
-    </ul>
+    <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'
+const router = useRouter();
+
+function handlePath(id) {
+  let routeData = router.resolve({ path: `/solution/detail/${id}/`});
+  window.open(routeData.href, '_blank');
+}
+function solution_case_list () {
+  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,
@@ -41,9 +71,25 @@ const props = defineProps({
   },
 });
 const emit = defineEmits();
-// function handleShow() {
-//   emit("update:isShowMore", false);
-// }
+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 {
@@ -65,8 +111,14 @@ const emit = defineEmits();
     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;
diff --git a/src/views/website/solution/detail.vue b/src/views/website/solution/detail.vue
new file mode 100644
index 0000000..6504496
--- /dev/null
+++ b/src/views/website/solution/detail.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/website/solution/solution.vue b/src/views/website/solution/solution.vue
index 837d64b..8f264a2 100644
--- a/src/views/website/solution/solution.vue
+++ b/src/views/website/solution/solution.vue
@@ -1,9 +1,297 @@
 <template>
-  <router-view></router-view>
+  <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="item.id" @click="handlePath(item.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>
-</script>
+import { nextTick, onMounted } from "vue";
+import seeMore from "./components/seeMore.vue";
+import webFooter from "@/components/webFooter/index.vue";
+import request from '@/utils/request'
+import { banner } from "@/api/website/home/index";
 
+const router = useRouter();
+
+function handlePath (id) {
+  let routeData = router.resolve({ path: `/solution/detail/${id}/`});
+  window.open(routeData.href, '_blank');
+}
+function solution_case (mode) {
+  return request({
+    url: '/v1/service/solution_case',
+    method: 'post',
+    data: { mode }
+  })
+}
+
+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, () => {
+  init0()
+})
+onMounted(() => {
+  init0()
+});
+
+function init0 () {
+  let name = route.params.name;
+  if(!name) return
+  let mode = modeDict[name];
+  let key = keyDict[name];
+  solution_case(mode).then(res => {
+    if (200 == res.code) {
+      state.caseList = res.data
+      init();
+    }
+  })
+  loading.value = true;
+  banner(key).then(res => {
+    if (200 == res.code) {
+      state.banner = res.data.images
+      loading.value = false;
+    }
+  }).catch(() => {
+    loading.value = false;
+  })
+}
+
+function init () {
+  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>
-</style>
+.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: 520px;
+          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>
\ No newline at end of file