孵化平台部分界面

src/components/Introduce/FicHatch.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="white">
+    <div class="top-bg">
+      <div class="words-content">
+        <p class="words-title">
+          <span v-if="typeNum === 0">数智创世代企业孵化器</span>
+          <span v-else>虚拟孵化器</span>
+        </p>
+        <p class="con-con">
+          研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系与科创能力咨询服务中心、
+          知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、
+          山西奥依工业设计咨询服务中心；研究院的介绍包含研究院，公司架构，和各中心的介绍。
+          各中心介绍包含科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、
+          科技信息咨询服务中心、科创战略协同研究中心、山西奥依工业设计咨询服务中心
+        </p>
+        <p class="words-title">加入流程</p>
+        <p class="con-con">
+          研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系与科创能力咨询服务中心、
+          知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、
+          山西奥依工业设计咨询服务中心；研究院的介绍包含研究院，公司架构，和各中心的介绍。
+          各中心介绍包含科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、
+          科技信息咨询服务中心、科创战略协同研究中心、山西奥依工业设计咨询服务中心
+          研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系与科创能力咨询服务中心、
+          知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、
+          山西奥依工业设计咨询服务中心；研究院的介绍包含研究院，公司架构，和各中心的介绍。
+          各中心介绍包含科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、
+          科技信息咨询服务中心、科创战略协同研究中心、山西奥依工业设计咨询服务中心
+          研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系与科创能力咨询服务中心、
+          知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、
+          山西奥依工业设计咨询服务中心；研究院的介绍包含研究院，公司架构，和各中心的介绍。
+          各中心介绍包含科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、
+          科技信息咨询服务中心、科创战略协同研究中心、山西奥依工业设计咨询服务中心
+        </p>
+      </div>
+      <a-button type="primary" class="btn">我要发榜</a-button>
+    </div>
+    <div>
+      <p class="words-title">
+        <span>入驻企业名录</span>
+      </p>
+      <div class="d-flex flex-wrap" style="padding: 0 25px 80px 25px; position: relative">
+        <div v-for="(item, index) in lists" :key="index" class="ent-box" :class="(index + 1) % 4 === 0 ? 'mr0' : ''">
+          <div class="ent-img-box" :style="{ background: colorList[index] }">
+            <img :src="item.logoUrl" class="ent-img" />
+          </div>
+          <p class="ent-title">
+            <span style="border-bottom: 2px solid #007cc1; padding-bottom: 4px">{{ item.name }} </span>
+          </p>
+          <p class="ent-des">
+            {{ item.description }}
+          </p>
+          <p class="ent-man">
+            <span class="ent-lf"> 联系人：{{ item.man }} </span>
+            <span class="ent-rh"> 联系电话：{{ item.tel }} </span>
+          </p>
+        </div>
+        <a-button type="primary" class="btn" style="bottom: 20px">入驻企业注册</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FicHatch',
+  props: {
+    typeNum: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      lists: [
+        {
+          description: '系统创新中心介绍系统创新中心介绍系统创新中心介绍系统创新中心介绍系统创新中心介绍系统创新中心介绍...',
+          name: '测试公司1',
+          logoUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2816433753,267880517&fm=26&gp=0.jpg',
+          man: '张三',
+          tel: '15000000000',
+        },
+        {
+          description: '系统创新中心介绍系统创新中心介绍系统创新中心介绍系统创新中心介绍系统创新中心介绍系统创新中心介绍...',
+          name: '测试公司1',
+          logoUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2816433753,267880517&fm=26&gp=0.jpg',
+          man: '张三',
+          tel: '15000000000',
+        },
+        {
+          description: '系统创新中心介绍系统创新中心介绍系统创新中心介绍系统创新中心介绍系统创新中心介绍系统创新中心介绍...',
+          name: '测试公司1',
+          logoUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2816433753,267880517&fm=26&gp=0.jpg',
+          man: '张三',
+          tel: '15000000000',
+        },
+        {
+          description: '系统创新中心介绍系统创新中心介绍系统创新中心介绍系统创新中心介绍系统创新中心介绍系统创新中心介绍...',
+          name: '测试公司1',
+          logoUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2816433753,267880517&fm=26&gp=0.jpg',
+          man: '张三',
+          tel: '15000000000',
+        },
+      ],
+      colorList: ['rgba(19, 172, 196, 0.3)', 'rgba(19,96,196,0.3)', 'rgba(162,19,196,0.3)', 'rgba(19,196,72,0.3)'],
+    };
+  },
+};
+</script>
+
+
+
+<style lang="stylus" scoped>
+.top-bg {
+  padding: 40px 25px 100px 25px !important;
+  position: relative;
+}
+
+.words-title {
+  font-size: 20px;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.85);
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.con-con {
+  margin-bottom: 40px;
+}
+
+.btn {
+  position: absolute;
+  right: 25px;
+}
+
+.ent-box {
+  width: 20.5%;
+  margin-right: 6%;
+  min-height: 300px;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
+}
+
+.ent-img-box {
+  height: 140px;
+  // background: ;
+  text-align: center;
+  line-height: 140px;
+}
+
+.ent-img {
+  height: 100px;
+  width: 100px;
+  border-radius: 50%;
+}
+
+.ent-title {
+  text-align: center;
+  margin-top: 14px;
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.ent-des {
+  padding: 0 4px;
+  font-size: 15px;
+  color: rgba(0, 0, 0, 0.65);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ent-man {
+  overflow: hidden;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+  padding: 0 4px;
+}
+
+.ent-lf {
+  float: left;
+}
+
+.ent-rh {
+  float: right;
+}
+
+@media only screen and (max-width: 1600px) {
+  .ent-rh {
+    float: left;
+  }
+}
+</style>

src/views/About/components/LeftNav.vue

@@ -3,7 +3,7 @@
  * @email: 18603454788@163.com
  * @Date: 2021-01-13 17:25:56
  * @LastEditors: wally
- * @LastEditTime: 2021-01-13 18:19:19
+ * @LastEditTime: 2021-01-14 18:27:18
 -->
 <template>
   <div class="nav-box">
@@ -40,6 +40,19 @@ export default {
       ],
     };
   },
+  watch: {
+    $route(to, from) {
+      if (to.path === '/About/Organ') {
+        this.activeNum = 1;
+      } else if (to.path === '/About/Partner') {
+        this.activeNum = 2;
+      } else if (to.path === '/About/SpinOffs') {
+        this.activeNum = 3;
+      } else {
+        this.activeNum = 0;
+      }
+    },
+  },
   created() {
     if (this.$route.fullPath === '/About/Organ') {
       this.activeNum = 1;

src/views/Challenge/components/LeftNav.vue

@@ -1,3 +1,10 @@
+<!--
+ * @Author: wally
+ * @email: 18603454788@163.com
+ * @Date: 2021-01-14 12:28:17
+ * @LastEditors: wally
+ * @LastEditTime: 2021-01-14 18:28:03
+-->
 <template>
   <div class="nav-box">
     <div :class="activeNum === index ? 'nav-box-active' : ''" :key="index" @click="jump(item.url, index)" v-for="(item, index) in list">
@@ -29,6 +36,17 @@ export default {
       ],
     };
   },
+  watch: {
+    $route(to, from) {
+      if (to.path === '/Challenge/Release') {
+        this.activeNum = 1;
+      } else if (to.path === '/Challenge/Notice') {
+        this.activeNum = 2;
+      } else {
+        this.activeNum = 0;
+      }
+    },
+  },
   created() {
     if (this.$route.fullPath === '/Challenge/Release') {
       this.activeNum = 1;

src/views/Hatch/Children/Fictitious.vue

@@ -1,9 +1,13 @@
 <template>
-  <div>虚拟孵化器</div>
+  <div>
+    <fic-hatch :type-num="1" />
+  </div>
 </template>
 <script>
+import FicHatch from 'components/Introduce/FicHatch.vue';
 export default {
   name: 'Fictitious',
+  components: { FicHatch },
   data() {
     return {};
   },

src/views/Hatch/Children/Incubator.vue

@@ -1,16 +1,13 @@
-<!--
- * @Author: wally
- * @email: 18603454788@163.com
- * @Date: 2021-01-14 17:34:23
- * @LastEditors: wally
- * @LastEditTime: 2021-01-14 17:37:46
--->
 <template>
-  <div>数智创世代企业孵化器</div>
+  <div>
+    <fic-hatch :type-num="0" />
+  </div>
 </template>
 <script>
+import FicHatch from 'components/Introduce/FicHatch.vue';
 export default {
   name: 'Incubator',
+  components: { FicHatch },
   data() {
     return {};
   },

src/views/Hatch/Children/Space.vue

@@ -1,11 +1,111 @@
+<!--
+ * @Author: wally
+ * @email: 18603454788@163.com
+ * @Date: 2021-01-14 17:29:47
+ * @LastEditors: wally
+ * @LastEditTime: 2021-01-14 18:19:17
+-->
+<!--
+ * @Author: wally
+ * @email: 18603454788@163.com
+ * @Date: 2021-01-14 17:29:47
+ * @LastEditors: wally
+ * @LastEditTime: 2021-01-14 17:55:47
+-->
 <template>
-  <div>高新众创空间</div>
+  <div style="padding: 0 25px">
+    <div style="padding-bottom: 80px; position: relative">
+      <div class="words-content">
+        <p class="words-title">需求征集</p>
+        <p class="con-con">
+          研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系与科创能力咨询服务中心、
+          知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、
+          山西奥依工业设计咨询服务中心；研究院的介绍包含研究院，公司架构，和各中心的介绍。
+          各中心介绍包含科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、
+          科技信息咨询服务中心、科创战略协同研究中心、山西奥依工业设计咨询服务中心
+        </p>
+      </div>
+      <a-button type="primary" class="btn">申请加入</a-button>
+    </div>
+    <div>
+      <div class="content-box">
+        <div :key="index" style="cursor: pointer" v-for="(item, index) in list" @click="jumpUrl(index)">
+          <div class="d-flex justify-space-between" v-if="index % 2 === 0">
+            <img :src="item.imgUrl" style="width: 48%" />
+            <div class="introduce-box" style="width: 52% !important">
+              <p class="introduce-title">{{ item.title }}</p>
+              <p class="introduce-content">{{ item.content }}</p>
+            </div>
+          </div>
+          <div class="d-flex justify-space-between" v-else>
+            <div class="introduce-box" style="width: 52% !important">
+              <p class="introduce-title">{{ item.title }}</p>
+              <p class="introduce-content">{{ item.content }}</p>
+            </div>
+            <img :src="item.imgUrl" style="width: 48%" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 export default {
   name: 'Space',
   data() {
-    return {};
+    return {
+      list: [
+        {
+          title: '数智创世代企业孵化器',
+          content:
+            '研究院的介绍包含研究院，公司架构，和各中心的介绍。' +
+            '各中心介绍包含科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、' +
+            '数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、' +
+            '山西奥依工业设计咨询服务中心；研究院的介绍包含研究院，公司架构，和各中心的介绍。',
+          imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
+        },
+        {
+          title: '虚拟孵化器',
+          content:
+            '各中心介绍包含科创体系与科创能力咨询服务中心、' +
+            '知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、科技信息咨询服务中心、' +
+            '科创战略协同研究中心、山西奥依工业设计咨询服务中心',
+          imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/4f9b898da25e48d3b73b47345ed14a9a.jpg',
+        },
+      ],
+    };
+  },
+  methods: {
+    jumpUrl(index) {
+      if (index === 0) {
+        this.$router.push('/Hatch/Incubator');
+      } else {
+        this.$router.push('/Hatch/Fictitious');
+      }
+    },
   },
 };
 </script>
+
+<style lang="stylus" scoped>
+.introduce-title {
+  color: #007CC1 !important;
+}
+
+.words-title {
+  font-size: 20px;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.85);
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.con-con {
+  margin-bottom: 40px;
+}
+
+.btn {
+  position: absolute;
+  right: 25px;
+}
+</style>

src/views/Hatch/Hatch.vue

@@ -1,17 +1,21 @@
 <template>
-  <div class="inner" style="margin-top: 50px; margin-bottom: 100px">
+  <div>
-    <left-nav style="float: left" />
+    <rotation />
-    <div style="width: 83%; float: right">
+    <div class="inner" style="margin-top: 50px; margin-bottom: 100px">
-      <router-view></router-view>
+      <left-nav style="float: left" />
+      <div style="width: 83%; float: right">
+        <router-view></router-view>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import Rotation from 'components/Rotation/Rotation.vue';
 import LeftNav from './components/LeftNav.vue';
 export default {
   name: 'Hatch',
-  components: { LeftNav },
+  components: { LeftNav, Rotation },
   data() {
     return {
       title: '孵化平台',

src/views/Hatch/components/LeftNav.vue

@@ -3,7 +3,7 @@
  * @email: 18603454788@163.com
  * @Date: 2021-01-13 17:25:56
  * @LastEditors: wally
- * @LastEditTime: 2021-01-14 17:42:17
+ * @LastEditTime: 2021-01-14 18:08:51
 -->
 <template>
   <div class="nav-box">
@@ -48,6 +48,24 @@ export default {
       ],
     };
   },
+  watch: {
+    $route(to, from) {
+      // console.log(from.path,to.path);
+      if (to.path === '/Hatch/Incubator') {
+        this.activeNum = 1;
+      } else if (to.path === '/Hatch/Fictitious') {
+        this.activeNum = 2;
+      } else if (to.path === '/Hatch/Tutor') {
+        this.activeNum = 3;
+      } else if (to.path === '/Hatch/Partner') {
+        this.activeNum = 4;
+      } else if (to.path === '/Hatch/Service') {
+        this.activeNum = 5;
+      } else {
+        this.activeNum = 0;
+      }
+    },
+  },
   created() {
     if (this.$route.fullPath === '/Hatch/Incubator') {
       this.activeNum = 1;