From 110deb9a991921c79a118db31e6f92c6b2e5f103 Mon Sep 17 00:00:00 2001
From: unknown <binbin0314@126.com>
Date: Wed, 6 Jan 2021 18:35:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9B=E6=96=B0=E6=8C=91=E6=88=98=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/platform.styl                      |   2 +-
 src/components/HeadNav/HeadNav.vue            |  21 +-
 src/router/index.js                           |  25 +-
 src/views/Challenge/Challenge.vue             |  13 +
 src/views/Challenge/Children/Notice.vue       | 222 +++++++++++++++++
 src/views/Challenge/Children/Release.vue      | 231 ++++++++++++++++++
 src/views/Challenge/Children/Solicitation.vue |  57 +++++
 src/views/Challenge/components/HNav.vue       |  54 ++++
 src/views/NewPlatform/Children/Service.vue    |  51 ++--
 src/views/NewPlatform/Children/ServiceDet.vue |  11 +-
 10 files changed, 651 insertions(+), 36 deletions(-)
 create mode 100644 src/views/Challenge/Challenge.vue
 create mode 100644 src/views/Challenge/Children/Notice.vue
 create mode 100644 src/views/Challenge/Children/Release.vue
 create mode 100644 src/views/Challenge/Children/Solicitation.vue
 create mode 100644 src/views/Challenge/components/HNav.vue

diff --git a/src/common/platform.styl b/src/common/platform.styl
index d464bb5..db1f1ea 100644
--- a/src/common/platform.styl
+++ b/src/common/platform.styl
@@ -32,7 +32,7 @@
   float: right;
   margin: 70px 0;
   margin-right: 12%;
-  width: 60%;
+  width: 62%;
   padding: 0;
   font-size: 16px;
   color: #fff;
diff --git a/src/components/HeadNav/HeadNav.vue b/src/components/HeadNav/HeadNav.vue
index be23c75..cba2bef 100644
--- a/src/components/HeadNav/HeadNav.vue
+++ b/src/components/HeadNav/HeadNav.vue
@@ -2,12 +2,7 @@
   <div class="head">
     <img @click="jumUrl('/')" alt class="logo-img" src="@/assets/logo.png" style="cursor: pointer" />
     <div class="li-box">
-      <a-dropdown
-        :disabled="item.children.length > 0 ? false : true"
-        :key="a"
-        class="list-down"
-        v-for="(item, a) in list"
-      >
+      <a-dropdown :disabled="item.children.length > 0 ? false : true" :key="a" class="list-down" v-for="(item, a) in list">
         <a @click="jumUrl(item.url)" class="ant-dropdown-link">
           {{ item.name }}&nbsp;&nbsp;
           <a-icon type="down" v-show="item.children.length > 0" />
@@ -24,12 +19,7 @@
       <template slot="title">
         <span>点击查看购物车！</span>
       </template>
-      <a-icon
-        @click="$router.push('/Cart')"
-        class="icon-head baseColor"
-        style="right: 100px"
-        type="shopping-cart"
-      />
+      <a-icon @click="$router.push('/Cart')" class="icon-head baseColor" style="right: 100px" type="shopping-cart" />
     </a-tooltip>
     <router-link tag="span" to="/login">
       <a-icon class="icon-head" style="right: 50px" type="user" />
@@ -145,17 +135,18 @@ export default {
           children: [
             {
               title: '需求征集',
-              url: '',
+              url: '/Challenge/Solicitation',
             },
             {
               title: '项目发布',
-              url: '',
+              url: '/Challenge/Release',
             },
             {
               title: '结果公告',
-              url: '',
+              url: '/Challenge/Notice',
             },
           ],
+          url: '/Challenge/Solicitation',
         },
         {
           name: '交流社区',
diff --git a/src/router/index.js b/src/router/index.js
index 2305683..857bd6e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -111,8 +111,8 @@ const routes = [
     name: 'ContactUs',
     component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/ContactUs/ContactUs.vue'),
   },
-
   {
+    // 创新平台
     path: '/NewPlatform/NewCore',
     name: 'NewPlatform',
     component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/NewPlatform/NewPlatform.vue'),
@@ -181,6 +181,29 @@ const routes = [
     name: 'Cart',
     component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/Cart/Cart.vue'),
   },
+  // 创新挑战
+  {
+    path: '/Challenge/Solicitation',
+    name: 'Challenge',
+    component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/Challenge/Challenge.vue'),
+    children: [
+      {
+        path: '/Challenge/Solicitation',
+        name: 'Solicitation',
+        component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/Challenge/Children/Solicitation.vue'),
+      },
+      {
+        path: '/Challenge/Release',
+        name: 'Release',
+        component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/Challenge/Children/Release.vue'),
+      },
+      {
+        path: '/Challenge/Notice',
+        name: 'Notice',
+        component: () => import(/* webpackChunkName: "cooperative-enterprise" */ 'views/Challenge/Children/Notice.vue'),
+      },
+    ],
+  },
 ];
 
 const router = new VueRouter({
diff --git a/src/views/Challenge/Challenge.vue b/src/views/Challenge/Challenge.vue
new file mode 100644
index 0000000..6a47a88
--- /dev/null
+++ b/src/views/Challenge/Challenge.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
diff --git a/src/views/Challenge/Children/Notice.vue b/src/views/Challenge/Children/Notice.vue
new file mode 100644
index 0000000..11682fe
--- /dev/null
+++ b/src/views/Challenge/Children/Notice.vue
@@ -0,0 +1,222 @@
+<template>
+  <div>
+    <h-nav />
+    <div class="search-background">
+      <div class="d-flex">
+        <div class="flex-3 flex-wrap">
+          <span class="ins-title">技术领域：</span>
+          <span
+            :class="item.isActive ? 'act-color' : ''"
+            v-for="(item, index) in list"
+            :key="index"
+            class="ins-name"
+            @click="choose(index)"
+          >
+            {{ item.name }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="inner d-flex flex-wrap">
+      <div class="pro-box" v-for="(item, index) in lists" :key="index" :class="(index + 1) % 4 === 0 ? 'margin-0' : ''">
+        <p class="pro-title">{{ item.title }}</p>
+        <p class="pro-content">{{ item.content }}</p>
+        <p class="pro-time">时间：{{ item.time }}</p>
+      </div>
+    </div>
+    <div class="inner">
+      <a-pagination
+        :current="current"
+        :total="total"
+        :page-size="pageSize"
+        @change="onShowSizeChange"
+        class="pagination"
+        show-less-items
+        show-quick-jumper
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import HNav from './../components/HNav.vue';
+export default {
+  name: 'Release',
+  components: { HNav },
+  data() {
+    return {
+      str: '发布界面',
+      current: 1,
+      pageSize: 8,
+      total: 10,
+      list: [
+        {
+          id: 1,
+          name: '功能食品',
+          isActive: false,
+        },
+        {
+          id: 2,
+          name: '生物医药',
+          isActive: false,
+        },
+        {
+          id: 3,
+          name: '大健康',
+          isActive: false,
+        },
+      ],
+      lists: [
+        {
+          title: '需求标题',
+          content: 'XXX挑战成功',
+          time: '2020-11-20',
+        },
+        {
+          title: '需求标题',
+          content: 'XXX挑战成功',
+          time: '2020-11-20',
+        },
+        {
+          title: '需求标题',
+          content: 'XXX挑战成功',
+          time: '2020-11-20',
+        },
+        {
+          title: '需求标题',
+          content: 'XXX挑战成功',
+          time: '2020-11-20',
+        },
+        {
+          title: '需求标题',
+          content: 'XXX挑战成功',
+          time: '2020-11-20',
+        },
+        {
+          title: '需求标题',
+          content: 'XXX挑战成功',
+          time: '2020-11-20',
+        },
+        {
+          title: '需求标题',
+          content: 'XXX挑战成功',
+          time: '2020-11-20',
+        },
+        {
+          title: '需求标题',
+          content: 'XXX挑战成功',
+          time: '2020-11-20',
+        },
+      ],
+    };
+  },
+  methods: {
+    choose(index) {
+      const that = this;
+      // that.achList = [];
+      const { list } = this;
+      list[index].isActive = !list[index].isActive;
+      this.list = [...list];
+      // for (let i = 0; i < list.length; i++) {
+      //   if (list[i].isActive) {
+      //     this.achList.push(list[i].id);
+      //   }
+      // }
+      // this.setAchList(this.achList);
+    },
+    // 改变单当前页数
+    onShowSizeChange(current, size) {
+      this.current = current;
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+.search-background {
+  background: rgba(0, 0, 0, 0.02);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  height: auto;
+  padding: 0 20px;
+  width: 82%;
+  margin: 40px auto;
+  line-height: 44px;
+}
+
+.pagination {
+  margin: 40px 0;
+  text-align: right;
+}
+
+.ins-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.ins-name {
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.65);
+  padding: 0 10px;
+  cursor: pointer;
+}
+
+.act-color {
+  color: #13ACC4 !important;
+}
+
+.margin-0 {
+  margin-right: 0% !important;
+}
+
+.pro-box {
+  width: 20.5%;
+  margin-right: 6%;
+  height: auto;
+  background: #FFFFFF;
+  padding: 24px 20px;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  position: relative;
+  margin-bottom: 20px;
+  opacity: 1;
+}
+
+.pro-title {
+  font-size: 24px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  line-height: 31px;
+  color: rgba(0, 0, 0, 0.85);
+  opacity: 1;
+}
+
+.pro-content {
+  font-size: 30px;
+  overflow: hidden;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #13ACC4;
+  margin-bottom: 60px;
+  opacity: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+}
+
+.pro-time {
+  position: absolute;
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.45);
+  opacity: 1;
+  bottom: 0;
+}
+
+.pro-btn {
+  position: absolute;
+  bottom: 24px;
+  width: 100px;
+}
+</style>
diff --git a/src/views/Challenge/Children/Release.vue b/src/views/Challenge/Children/Release.vue
new file mode 100644
index 0000000..b91d7e5
--- /dev/null
+++ b/src/views/Challenge/Children/Release.vue
@@ -0,0 +1,231 @@
+<template>
+  <div>
+    <h-nav />
+    <div class="search-background">
+      <div class="d-flex">
+        <div class="flex-3 flex-wrap">
+          <span class="ins-title">技术领域：</span>
+          <span
+            :class="item.isActive ? 'act-color' : ''"
+            v-for="(item, index) in list"
+            :key="index"
+            class="ins-name"
+            @click="choose(index)"
+          >
+            {{ item.name }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="inner d-flex flex-wrap">
+      <div class="pro-box" v-for="(item, index) in lists" :key="index" :class="(index + 1) % 4 === 0 ? 'margin-0' : ''">
+        <p class="pro-title">{{ item.title }}</p>
+        <p class="pro-content">{{ item.content }}</p>
+        <p class="pro-time">时间：{{ item.time }}</p>
+        <a-button class="pro-btn" type="primary">揭榜</a-button>
+      </div>
+    </div>
+    <div class="inner">
+      <a-pagination
+        :current="current"
+        :total="total"
+        :page-size="pageSize"
+        @change="onShowSizeChange"
+        class="pagination"
+        show-less-items
+        show-quick-jumper
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import HNav from './../components/HNav.vue';
+export default {
+  name: 'Release',
+  components: { HNav },
+  data() {
+    return {
+      str: '发布界面',
+      current: 1,
+      pageSize: 8,
+      total: 10,
+      list: [
+        {
+          id: 1,
+          name: '功能食品',
+          isActive: false,
+        },
+        {
+          id: 2,
+          name: '生物医药',
+          isActive: false,
+        },
+        {
+          id: 3,
+          name: '大健康',
+          isActive: false,
+        },
+      ],
+      lists: [
+        {
+          title: '需求标题',
+          content:
+            '需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容求内容需求内容求内容需求内容',
+          time: '2020-11-20',
+        },
+        {
+          title: '需求标题',
+          content:
+            '需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容求内容需求内容求内容需求内容',
+          time: '2020-11-20',
+        },
+        {
+          title: '需求标题',
+          content:
+            '需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容求内容需求内容求内容需求内容',
+          time: '2020-11-20',
+        },
+        {
+          title: '需求标题',
+          content:
+            '需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容求内容需求内容求内容需求内容',
+          time: '2020-11-20',
+        },
+        {
+          title: '需求标题',
+          content:
+            '需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容求内容需求内容求内容需求内容',
+          time: '2020-11-20',
+        },
+        {
+          title: '需求标题',
+          content:
+            '需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容求内容需求内容求内容需求内容',
+          time: '2020-11-20',
+        },
+        {
+          title: '需求标题',
+          content:
+            '需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容求内容需求内容求内容需求内容',
+          time: '2020-11-20',
+        },
+        {
+          title: '需求标题',
+          content:
+            '需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容求内容需求内容求内容需求内容',
+          time: '2020-11-20',
+        },
+      ],
+    };
+  },
+  methods: {
+    choose(index) {
+      const that = this;
+      // that.achList = [];
+      const { list } = this;
+      list[index].isActive = !list[index].isActive;
+      this.list = [...list];
+      // for (let i = 0; i < list.length; i++) {
+      //   if (list[i].isActive) {
+      //     this.achList.push(list[i].id);
+      //   }
+      // }
+      // this.setAchList(this.achList);
+    },
+    // 改变单当前页数
+    onShowSizeChange(current, size) {
+      this.current = current;
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+.search-background {
+  background: rgba(0, 0, 0, 0.02);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  height: auto;
+  padding: 0 20px;
+  width: 82%;
+  margin: 40px auto;
+  line-height: 44px;
+}
+
+.pagination {
+  margin: 40px 0;
+  text-align: right;
+}
+
+.ins-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.ins-name {
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.65);
+  padding: 0 10px;
+  cursor: pointer;
+}
+
+.act-color {
+  color: #13ACC4 !important;
+}
+
+.margin-0 {
+  margin-right: 0% !important;
+}
+
+.pro-box {
+  width: 20.5%;
+  margin-right: 6%;
+  height: 300px;
+  background: #FFFFFF;
+  padding: 24px 20px;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  position: relative;
+  margin-bottom: 20px;
+  opacity: 1;
+}
+
+.pro-title {
+  font-size: 24px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  line-height: 31px;
+  color: rgba(0, 0, 0, 0.85);
+  opacity: 1;
+}
+
+.pro-content {
+  font-size: 16px;
+  overflow: hidden;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  line-height: 24px;
+  color: rgba(0, 0, 0, 0.65);
+  opacity: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+}
+
+.pro-time {
+  position: absolute;
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.45);
+  opacity: 1;
+  bottom: 60px;
+}
+
+.pro-btn {
+  position: absolute;
+  bottom: 24px;
+  width: 100px;
+}
+</style>
diff --git a/src/views/Challenge/Children/Solicitation.vue b/src/views/Challenge/Children/Solicitation.vue
new file mode 100644
index 0000000..2dda88b
--- /dev/null
+++ b/src/views/Challenge/Children/Solicitation.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <h-nav />
+    <div class="top-box">
+      <div class="top-title">创新挑战</div>
+      <div class="top-content">
+        山西绿谷生物科技股份有限公司立足功能食品、生物医药和大健康产业，聚焦“创新”、聚力“孵化”、聚合“产业”，
+        致力建设集创新链、孵化链和产业链为一体，产学研协同、多学科交叉、大中小企业融通、
+        线上线下相结合的融合发展机制和开放式创新创业平台，培育打造全链条一体化新型社会研发机构和创新创业生态系统，
+        构筑专业化、集群化、园区化、产业发展新模式和新业态。公司秉持“创新、开放、协同、融合”发展理
+        念，以“赋能健康中国，筑梦绿色未来”为愿景，以“构建创新创业生态，发展特色产业集群，打造全链条一体化开放
+        式创新创业高地”为使命，大力推动建设“共融共生，共建 共创”价值共同体。
+      </div>
+    </div>
+    <div class="center-box" style="margin-bottom: 160px">
+      <div class="center-title">
+        <div class="circular"></div>
+        <div style="margin-left: 40px">需求征集</div>
+      </div>
+      <div class="center-content">
+        山西绿谷生物科技股份有限公司立足功能食品、生物医药和大健康产业，聚焦“创新”、聚力“孵化”、聚合“产业”，
+        致力建设集创新链、孵化链和产业链为一体，产学研协同、多学科交叉、大中小企业融通、
+        线上线下相结合的融合发展机制和开放式创新创业平台，培育打造全链条一体化新型社会研发机构和创新创业生态系统，
+        构筑专业化、集群化、园区化、产业发展新模式和新业态。公司秉持“创新、开放、协同、融合”发展理
+        念，以“赋能健康中国，筑梦绿色未来”为愿景，以“构建创新创业生态，发展特色产业集群，打造全链条一体化开放
+        式创新创业高地”为使命，大力推动建设“共融共生，共建 共创”价值共同体。
+      </div>
+      <a-button class="center-btn" type="primary">需求填报</a-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import HNav from './../components/HNav.vue';
+export default {
+  name: 'Solicitation',
+  components: { HNav },
+  data() {
+    return {
+      str: '征集界面',
+      list: [],
+    };
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+.top-box {
+  background: -webkit-linear-gradient(left, #13ACC4, #A9C300) !important;
+}
+
+.center-btn {
+  position: absolute;
+  left: 26%;
+  bottom: 100px;
+}
+</style>
diff --git a/src/views/Challenge/components/HNav.vue b/src/views/Challenge/components/HNav.vue
new file mode 100644
index 0000000..d22a567
--- /dev/null
+++ b/src/views/Challenge/components/HNav.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="nav-box d-flex">
+    <div v-for="(item, index) in list" :key="index" :class="activeNum === index ? 'nav-box-active' : ''" @click="jump(item.url)">
+      {{ item.title }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HNav',
+  data() {
+    return {
+      str: '导航条',
+      activeNum: 0,
+      list: [
+        {
+          title: '需求征集',
+          url: '/Challenge/Solicitation',
+        },
+        {
+          title: '项目发布',
+          url: '/Challenge/Release',
+        },
+        {
+          title: '结果公告',
+          url: '/Challenge/Notice',
+        },
+      ],
+    };
+  },
+  created() {
+    console.log();
+    if (this.$route.fullPath === '/Challenge/Release') {
+      this.activeNum = 1;
+    } else if (this.$route.fullPath === '/Challenge/Notice') {
+      this.activeNum = 2;
+    } else {
+      this.activeNum = 0;
+    }
+  },
+  methods: {
+    jump(url) {
+      if (this.$route.fullPath === url) {
+        this.$message.success('已在当前界面');
+      } else {
+        this.$router.push(url);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped></style>
diff --git a/src/views/NewPlatform/Children/Service.vue b/src/views/NewPlatform/Children/Service.vue
index b494841..1f39bec 100644
--- a/src/views/NewPlatform/Children/Service.vue
+++ b/src/views/NewPlatform/Children/Service.vue
@@ -9,28 +9,19 @@
         <span class="login-color">购物车</span> 后可通过顶部菜单栏的购物车查看。
       </div>
     </div>
-    <div class="inner d-flex flex-wrap">
+    <div class="inner d-flex flex-wrap" style="margin: 60px auto">
       <div v-for="(item, index) in list" :key="index" class="item-box" :class="(index + 1) % 4 === 0 ? 'margin-0' : ''">
-        <img :src="item.imgUrl" style="height: 220px; width: 100%; border: 1px solid #ccc" />
-        <p class="font-24 my-4">{{ item.name }}</p>
+        <img :src="item.picUrl" style="height: 220px; width: 100%; border: 1px solid #ccc" />
+        <p class="font-24 item-title">{{ item.name }}</p>
+        <p class="font-24 my-4 item-content">{{ item.intro }}</p>
         <p class="font-16 baseColor" style="text-align: right; cursor: pointer" @click="jump(item.id)">了解更多→</p>
       </div>
     </div>
-    <div class="inner">
-      <a-pagination
-        :current="current"
-        :total="total"
-        :page-size="pageSize"
-        @change="onShowSizeChange"
-        class="pagination"
-        show-less-items
-        show-quick-jumper
-      />
-    </div>
   </div>
 </template>
 
 <script>
+import { selService } from 'config/api';
 import Rotation from 'components/Rotation/Rotation.vue';
 import HNav from './../components/HNav.vue';
 export default {
@@ -45,14 +36,25 @@ export default {
       total: 0,
     };
   },
+  created() {
+    this.getService();
+  },
   methods: {
-    // 改变单当前页数
-    onShowSizeChange(current, size) {
-      this.current = current;
+    // 获取服务列表
+    async getService() {
+      try {
+        const params = { param: {} };
+        const res = await selService(params);
+        const { code, data, msg } = res.data;
+        if (code === 200) {
+          this.list = data;
+        }
+      } catch (error) {
+        console.log(data);
+      }
     },
     // 查看 服务 详情
     jump(id) {
-      console.log(id);
       this.$router.push({
         path: '/NewPlatform/ServiceDet',
         name: 'ServiceDet',
@@ -70,6 +72,7 @@ export default {
 }
 
 .item-box {
+  position: relative;
   width: 20.5%;
   margin-right: 6%;
   border-radius: 4px;
@@ -79,4 +82,16 @@ export default {
 .margin-0 {
   margin-right: 0 !important;
 }
+
+.item-title {
+  position: absolute;
+  top: 100px;
+  width: 100%;
+  text-align: center;
+}
+
+.item-content {
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.65);
+}
 </style>
diff --git a/src/views/NewPlatform/Children/ServiceDet.vue b/src/views/NewPlatform/Children/ServiceDet.vue
index 32f5cb6..9183a8b 100644
--- a/src/views/NewPlatform/Children/ServiceDet.vue
+++ b/src/views/NewPlatform/Children/ServiceDet.vue
@@ -1,6 +1,12 @@
 <template>
   <div>
-    <div class="inner service-box">服务详情页</div>
+    <div class="inner service-box">
+      <div style="margin-bottom: 40px">简介</div>
+      <div>
+        <a-button>直接申请</a-button>
+        <a-button type="primary">加入购物车</a-button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -10,6 +16,9 @@ export default {
   data() {
     return {};
   },
+  created() {
+    console.log(this.$route.params.id);
+  },
 };
 </script>