From b3cd2b47d41fba38cc6b510a622c3f61ee1ea3b0 Mon Sep 17 00:00:00 2001
From: unknown <binbin0314@126.com>
Date: Fri, 8 Jan 2021 15:17:54 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=AD=B5=E5=8C=96=E5=B9=B3=E5=8F=B0?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Introduce/AddShopping.vue      |  50 +++-
 .../Children/MakerSpace.vue                   |  11 +-
 .../Children/place/EntitySpace.vue            |  23 +-
 .../components/AddModel.vue                   | 229 +++++++++++++++++
 src/views/NewPlatform/Children/AchDet.vue     |   2 +-
 src/views/NewPlatform/components/NewModel.vue |   1 +
 .../NewPlatform/components/myTransition.vue   | 231 ++++++++++++++++++
 7 files changed, 525 insertions(+), 22 deletions(-)
 create mode 100644 src/views/IncubationPlatform/components/AddModel.vue
 create mode 100644 src/views/NewPlatform/components/myTransition.vue

diff --git a/src/components/Introduce/AddShopping.vue b/src/components/Introduce/AddShopping.vue
index 49360d5..3c95db7 100644
--- a/src/components/Introduce/AddShopping.vue
+++ b/src/components/Introduce/AddShopping.vue
@@ -1,8 +1,9 @@
 <template>
   <div>
-    <a-button type="primary" @click="showModal">
+    <a-button type="primary" @click="showModal" class="shopping">
       {{ str }}
     </a-button>
+    <a-icon id="ddd" type="shopping-cart" />
     <a-modal width="50%" :title="title" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
       <a-form :form="form">
         <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="项目信息简述">
@@ -41,12 +42,19 @@ export default {
       formItemLayout,
       formTailLayout,
       confirmLoading: false,
+      pageX: 0,
+      pageY: 0,
+      WinWidth: 0,
+      WinHeight: 0,
       describe: '', // 项目描述
     };
   },
   methods: {
     // 显示表单输入框
-    showModal() {
+    showModal(event) {
+      this.pageX = event.clientX;
+      this.pageY = event.clientY;
+
       this.visible = true;
     },
     // 取消显示
@@ -71,6 +79,7 @@ export default {
           this.visible = false;
           this.confirmLoading = false;
           this.describe = '';
+          this.anma();
         } else {
           this.$message.error(msg);
         }
@@ -78,6 +87,19 @@ export default {
         this.$message.error(error);
       }
     },
+    // 加入购物车动画
+    anma() {
+      this.WinWidth = window.innerWidth;
+      this.WinHeight = window.innerHeight;
+      var d = document.getElementById('ddd');
+      d.style.top = this.pageY - d.offsetHeight * 0.5 + 'px';
+      console.log(d.offsetWidth);
+      d.style.right = this.WinWidth - this.pageX - d.offsetWidth * 0.5 + 'px';
+      d.style.display = 'block';
+      setTimeout(() => {
+        d.style.display = 'none';
+      }, 900);
+    },
   },
 };
 </script>
@@ -91,4 +113,28 @@ export default {
   height: 32px;
   width: 120px;
 }
+
+#ddd {
+  color: #13acc4;
+  font-size: 50px;
+  display: none;
+  z-index: 1000;
+  animation: animations 1s cubic-bezier(0.5, 0.5, 0.5, 0.5);
+  position: fixed;
+}
+
+@keyframes animations {
+  0% {
+  }
+
+  99% {
+    top: 0;
+    right: -50px;
+    font-size: 20px;
+  }
+
+  100% {
+    transform: none;
+  }
+}
 </style>
diff --git a/src/views/IncubationPlatform/Children/MakerSpace.vue b/src/views/IncubationPlatform/Children/MakerSpace.vue
index eaed49b..57d283f 100644
--- a/src/views/IncubationPlatform/Children/MakerSpace.vue
+++ b/src/views/IncubationPlatform/Children/MakerSpace.vue
@@ -7,7 +7,7 @@
       <div>
         <div
           :key="index"
-          @click="jump(item.url,item.type)"
+          @click="item.imgUrl ? jump(item.url, item.type) : ''"
           style="margin-top: 50px; cursor: pointer"
           v-for="(item, index) in list"
         >
@@ -16,7 +16,9 @@
               <p class="introduce-title">{{ item.title }}</p>
               <p class="introduce-content">{{ item.content }}</p>
             </div>
-            <img :src="item.imgUrl" style="width: 452px" />
+            <img v-if="item.imgUrl" :src="item.imgUrl" style="width: 452px" />
+            <!-- <a-button v-else style="width: 452px; height: 100%">123</a-button> -->
+            <add-model :value="1" v-else style="width: 452px" />
           </div>
           <div class="d-flex justify-space-between" v-else>
             <img :src="item.imgUrl" style="width: 452px" />
@@ -35,10 +37,11 @@
 import Banner from 'components/Banner/Banner.vue';
 import HNav from './../components/HNav.vue';
 import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';
+import AddModel from '../components/AddModel.vue';
 
 export default {
   name: 'MakerSpace',
-  components: { BreadCrumb, HNav, Banner },
+  components: { BreadCrumb, HNav, Banner, AddModel },
   data() {
     return {
       showPage: 41,
@@ -70,7 +73,7 @@ export default {
           content:
             '山西绿谷生物科技股份有限公司立足功能食品、生物医药和大健康产业，聚焦“创新”、聚力“孵化”、聚合“产业”，' +
             '致力建设集创新链、孵化链和产业链为一体，产学研协同、多学科交叉、大中小企业...',
-          imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210106/88a52985a48c4780a76507b06798b00f.png',
+          imgUrl: '',
           url: '',
           type: 1,
         },
diff --git a/src/views/IncubationPlatform/Children/place/EntitySpace.vue b/src/views/IncubationPlatform/Children/place/EntitySpace.vue
index 834c6be..79df7c3 100644
--- a/src/views/IncubationPlatform/Children/place/EntitySpace.vue
+++ b/src/views/IncubationPlatform/Children/place/EntitySpace.vue
@@ -40,7 +40,8 @@
         念，以“赋能健康中国，筑梦绿色未来”为愿景，以“构建创新创业生态，发展特色产业集群，打造全链条一体化开放
         式创新创业高地”为使命，大力推动建设“共融共生，共建 共创”价值共同体。
       </div>
-      <a-button class="center-btn" type="primary">申请加入</a-button>
+      <!-- <a-button class="center-btn" type="primary">申请加入</a-button> -->
+      <add-model :value="2" class="center-btn" style="height: 32px" />
     </div>
     <div class="center-box" v-else>
       <div class="center-title">
@@ -55,7 +56,8 @@
         念，以“赋能健康中国，筑梦绿色未来”为愿景，以“构建创新创业生态，发展特色产业集群，打造全链条一体化开放
         式创新创业高地”为使命，大力推动建设“共融共生，共建 共创”价值共同体。
       </div>
-      <a-button class="center-btn" type="primary">申请加入</a-button>
+      <!-- <a-button class="center-btn" type="primary">申请加入</a-button> -->
+      <add-model :value="3" class="center-btn" style="height: 32px" />
     </div>
     <div class="center-box c-box" style="margin-bottom: 160px">
       <div class="center-title">
@@ -64,12 +66,7 @@
       </div>
       <div class="center-content" v-if="type === '1'">
         <div class="d-flex flex-wrap">
-          <div
-            :class="(index + 1) % 3 === 0 ? 'margin-0' : ''"
-            :key="index"
-            class="ent-box"
-            v-for="(item, index) in lists"
-          >
+          <div :class="(index + 1) % 3 === 0 ? 'margin-0' : ''" :key="index" class="ent-box" v-for="(item, index) in lists">
             <p class="ent-index">{{ index + 1 }}</p>
             <span class="ent-name" style="margin-left: 50px">{{ item }}</span>
           </div>
@@ -77,12 +74,7 @@
       </div>
       <div class="center-content" v-else>
         <div class="d-flex flex-wrap">
-          <div
-            :class="(index + 1) % 3 === 0 ? 'margin-0' : ''"
-            :key="index"
-            class="ent-box"
-            v-for="(item, index) in lists1"
-          >
+          <div :class="(index + 1) % 3 === 0 ? 'margin-0' : ''" :key="index" class="ent-box" v-for="(item, index) in lists1">
             <p class="ent-index">{{ index + 1 }}</p>
             <span class="ent-name" style="margin-left: 50px">{{ item }}</span>
           </div>
@@ -108,9 +100,10 @@
 <script>
 import HNav from '../../components/HNav.vue';
 import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';
+import AddModel from './../../components/AddModel.vue';
 export default {
   name: 'EntitySpace',
-  components: { HNav, BreadCrumb },
+  components: { HNav, BreadCrumb, AddModel },
   data() {
     return {
       title: '实体众创空间',
diff --git a/src/views/IncubationPlatform/components/AddModel.vue b/src/views/IncubationPlatform/components/AddModel.vue
new file mode 100644
index 0000000..bd1c248
--- /dev/null
+++ b/src/views/IncubationPlatform/components/AddModel.vue
@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <a-button type="primary" @click="showModal" style="height: 100%; width: 100%" :style="value === 1 ? 'font-size:30px' : ''">
+      {{ str }}
+    </a-button>
+    <a-modal width="50%" :title="title" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
+      <p v-show="value !== 1" style="text-align: center">
+        <a-radio-group v-model="value" style="margin-bottom: 20px !important">
+          <a-radio :value="2" style="margin-right: 100px"> 实体空间 </a-radio>
+          <a-radio :value="3"> 虚拟空间 </a-radio>
+        </a-radio-group>
+      </p>
+      <a-form :form="form">
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="公司名称">
+          <a-input v-model.trim="platform.companyName" placeholder="请输入公司名称..." />
+        </a-form-item>
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="联系人" required>
+          <a-input v-model.trim="platform.manName" placeholder="请输入联系人..." />
+        </a-form-item>
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="联系电话" required>
+          <a-input @change="changePhone" type="tel" v-decorator="['tel', { rules: phoneRules }]" placeholder="请输入联系电话.." />
+        </a-form-item>
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="图片验证码" required>
+          <div class="d-flex flex-nowrap">
+            <a-input placeholder="图片验证码" type="number" v-model="codeNum" />
+            <img :src="picCode.imageBase64" @click="changePicCode" class="code_img ml-2" v-if="picCode && picCode.imageBase64" />
+            <a-button @click="changePicCode" class="code_img ml-2" size="small" v-else>获取验证码</a-button>
+            <!-- <a-input v-decorator="['account', { rules: rules.account }]" /> -->
+          </div>
+        </a-form-item>
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="短信验证码" required>
+          <div class="d-flex flex-nowrap">
+            <a-input placeholder="请输入验证码" type="number" v-model="platform.code" />
+            <a-button class="code_img ml-2" disabled type="primary" v-if="showInterval">重新发送 {{ interval }}</a-button>
+            <a-button :disabled="platform.isTel === false" @click="getCode" class="code_img ml-2" type="primary" v-else>
+              获取验证码
+            </a-button>
+          </div>
+        </a-form-item>
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="合作信息简述" required>
+          <a-textarea v-model.trim="platform.describe" style="height: 120px" placeholder="请输入合作信息简述..." />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+import { JoinPlatform } from 'config/api';
+const formItemLayout = {
+  labelCol: { span: 5 },
+  wrapperCol: { span: 18 },
+};
+const formTailLayout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 18, offset: 6 },
+};
+export default {
+  name: 'AddModel',
+  props: {
+    value: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      form: this.$form.createForm(this, { name: 'submit' }),
+      visible: false,
+      title: '申请加入',
+      str: '申请加入',
+      formItemLayout,
+      formTailLayout,
+      confirmLoading: false,
+      platform: {
+        companyName: '', // 公司名称
+        manName: '', // 联系人
+        tel: '', // 联系电话
+        describe: '', // 项目描述
+        code: '', // 验证码
+        isTel: false,
+      },
+      codeRules: [
+        { required: true, message: '请输入验证码' },
+        { min: 4, max: 4, message: '请输入4位短信验证码' },
+      ],
+      codeNum: '',
+      showInterval: false,
+      codeTimer: null,
+      interval: 120, // 验证码有效时间倒计时
+      phoneRules: [
+        { required: true, pattern: new RegExp(/^[1][3,4,5,6,7,8,9][0-9]{9}$/), whitespace: true, message: '请输入正确的手机号' },
+      ],
+    };
+  },
+  computed: mapState('user', ['picCode']),
+  async created() {
+    this.sendPicCode();
+    await this.getUserSer();
+    if (this.userSer) {
+      if (this.userSer.name) {
+        this.platform.manName = this.userSer.name;
+      }
+      if (this.userSer.phone) {
+        this.platform.tel = this.userSer.phone;
+      }
+      if (this.userSer.companyName) {
+        this.platform.companyName = this.userSer.companyName;
+      }
+    }
+  },
+  methods: {
+    ...mapActions('user', ['sendCode', 'sendPicCode']),
+    ...mapActions('home', ['getUserSer']),
+    // 显示表单输入框
+    showModal() {
+      this.visible = true;
+    },
+    // 取消显示
+    handleCancel(e) {
+      this.visible = false;
+    },
+    // 验证电话
+    changePhone(e) {
+      this.platform.tel = e.target.value;
+      this.platform.isTel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.platform.tel);
+    },
+    // 点击确定
+    handleOk() {
+      if (!this.platform.manName) {
+        this.$message.error('请输入联系人');
+      } else if (!this.platform.tel) {
+        this.$message.error('请输入联系电话');
+      } else if (!this.platform.code) {
+        this.$message.error('请输入验证码');
+      } else if (!this.platform.describe) {
+        this.$message.error('请输入项目信息简述');
+      } else {
+        if (this.platform.isTel) {
+          this.subMitAdd();
+        } else {
+          this.$message.error('请输入正确的联系电话');
+        }
+      }
+    },
+    // 加入接口
+    async subMitAdd() {
+      this.confirmLoading = true;
+      try {
+        const params = {
+          param: {
+            code: this.platform.code,
+            companyName: this.platform.companyName,
+            contactName: this.platform.manName,
+            contactPhone: this.platform.tel,
+            description: this.platform.describe,
+            type: this.value,
+          },
+        };
+        const res = await JoinPlatform(params);
+        const { code, msg, data } = res.data;
+        if (code === 200) {
+          this.$message.success('申请成功');
+          this.visible = false;
+          this.confirmLoading = false;
+          for (let key in this.platform) {
+            this.platform[key] = '';
+          }
+          this.platform.isTel = false;
+        } else {
+          throw msg;
+          this.confirmLoading = false;
+        }
+      } catch (error) {
+        this.$message.error(error);
+        this.confirmLoading = false;
+      }
+    },
+    // 获取验证码
+    async getCode() {
+      console.log(111);
+      try {
+        const params = {
+          phone: this.platform.tel,
+          verificationCodeId: this.picCode.verificationCodeId,
+          verificationCodeValue: this.codeNum,
+        };
+        await this.sendCode(params);
+        this.getCodeInterval();
+      } catch (error) {
+        // throw new Error(`SignIn.vue method getCode: ${error}`);
+        console.log(error);
+      }
+    },
+
+    // 验证码倒计时
+    getCodeInterval() {
+      this.showInterval = true;
+      this.codeTimer = setInterval(() => {
+        if (this.interval === 0) {
+          clearInterval(this.codeTimer);
+          this.codeTimer = null;
+          this.showInterval = false;
+          this.interval = 120;
+          return;
+        }
+        this.interval = this.interval - 1;
+      }, 1000);
+    },
+
+    // 刷新验证码
+    changePicCode() {
+      this.sendPicCode();
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+.must-color {
+  color: red;
+}
+
+.code_img {
+  height: 32px;
+  width: 120px;
+}
+</style>
diff --git a/src/views/NewPlatform/Children/AchDet.vue b/src/views/NewPlatform/Children/AchDet.vue
index e5c5cc3..d935164 100644
--- a/src/views/NewPlatform/Children/AchDet.vue
+++ b/src/views/NewPlatform/Children/AchDet.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="inner equ-box">
     <div class="equ-info d-flex">
-      <img :src="obj.img" alt="" />
+      <img :src="obj.img" />
       <div class="equ-info-box">
         <p class="equ-name">{{ obj.name }}</p>
         <div class="d-flex flex-wrap">
diff --git a/src/views/NewPlatform/components/NewModel.vue b/src/views/NewPlatform/components/NewModel.vue
index b848e37..4cd2423 100644
--- a/src/views/NewPlatform/components/NewModel.vue
+++ b/src/views/NewPlatform/components/NewModel.vue
@@ -52,6 +52,7 @@ const formTailLayout = {
 };
 export default {
   name: 'NewModel',
+
   data() {
     return {
       form: this.$form.createForm(this, { name: 'submit' }),
diff --git a/src/views/NewPlatform/components/myTransition.vue b/src/views/NewPlatform/components/myTransition.vue
new file mode 100644
index 0000000..582881e
--- /dev/null
+++ b/src/views/NewPlatform/components/myTransition.vue
@@ -0,0 +1,231 @@
+<template>
+  <div class="transition_test">
+    <h2>过渡效果</h2>
+
+    <button @click="show = !show">click</button>
+    <!-- <transition name="slide-fade">
+      <div v-if="show" class="circle"></div>
+    </transition> -->
+    <div>
+      图片放大效果:
+      <transition name="img-fade">
+        <img
+          class="bigimg"
+          v-if="show"
+          src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1672824262,2727256094&fm=111&gp=0.jpg"
+          alt=""
+        />
+      </transition>
+    </div>
+    <div class="shop_cart">
+      加入购物车动画(css实现):
+      <div class="add">
+        <button @click="addShopCart">add</button>
+        <transition name="shop_cart">
+          <img
+            class="add_img"
+            v-if="addShow"
+            src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1672824262,2727256094&fm=111&gp=0.jpg"
+            alt=""
+          />
+        </transition>
+      </div>
+      <div class="cart">
+        <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1672824262,2727256094&fm=111&gp=0.jpg" alt="" />
+      </div>
+    </div>
+
+    <div class="shop_cart">
+      加入购物车动画(JavaScript钩子函数实现):
+      <div class="add">
+        <button @click="addShopCart1">add</button>
+        <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter">
+          <img
+            class="add_img_js"
+            v-if="addShow1"
+            src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1672824262,2727256094&fm=111&gp=0.jpg"
+            alt=""
+          />
+        </transition>
+      </div>
+      <div class="cart">
+        <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1672824262,2727256094&fm=111&gp=0.jpg" alt="" />
+      </div>
+    </div>
+    <!-- 动画数组效果 -->
+    <ul class="group_list">
+      <button @click="addItem">addItem</button>
+      <button @click="removeItem">removeItem</button>
+      <transition-group name="list">
+        <li class="group_item" v-for="item in list" :key="item">{{ item }}</li>
+      </transition-group>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  name: 'myTransition',
+  components: {},
+  data() {
+    return {
+      show: false,
+      addShow: false,
+      addShow1: false,
+      list: [1, 2, 3],
+    };
+  },
+  created() {},
+
+  methods: {
+    addShopCart() {
+      this.addShow = true;
+      setTimeout(() => {
+        this.addShow = false;
+      }, 1000);
+    },
+    addShopCart1() {
+      this.addShow1 = true;
+    },
+
+    // 动画钩子函数
+    // 进入前状态
+    beforeEnter(el) {
+      el.style.left = '-20px';
+      el.style.top = '-15px';
+      el.style.transform = 'scale(1)';
+    },
+    // 进入中
+    enter(el, done) {
+      // 需要调用元素的offset操作,才有过渡的效果,否则会马上实现过渡
+      el.offsetWidth;
+      el.style.left = '600px';
+      el.style.top = '-160px';
+      el.style.transform = 'scale(.5)';
+      done();
+    },
+    // 进入后
+    afterEnter() {
+      this.addShow1 = false;
+    },
+
+    // 新增
+    addItem() {
+      this.list.push(this.list.length + 1);
+    },
+    // 删除
+    removeItem() {
+      if (this.list.length > 1) {
+        this.list.pop();
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.transition_test {
+  text-align: left;
+  padding-bottom: 300px;
+}
+.circle {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: aquamarine;
+}
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.5s ease-out;
+}
+.slide-fade-enter,
+.slide-fade-leave-to {
+  /* transform: translateX(500px); */
+  opacity: 0;
+}
+.bigimg {
+  width: 300px;
+}
+
+.img-fade-enter-active {
+  transition: all 1s ease-out;
+}
+.img-fade-enter {
+  transform: scale(0.5);
+  /* width: 50px; */
+}
+
+.shop_cart {
+  padding: 20px;
+}
+.shop_cart .add {
+  position: relative;
+  margin-top: 100px;
+  width: 500px;
+  display: inline-block;
+}
+.shop_cart .add button {
+  position: absolute;
+  z-index: 99;
+}
+.shop_cart .cart {
+  width: 300px;
+  display: inline-block;
+}
+.shop_cart .cart img {
+  width: 100%;
+}
+.shop_cart .add_img {
+  width: 100px;
+  position: absolute;
+  left: 600px;
+  top: -160px;
+}
+/* 动画效果实现 */
+/* @keyframes bounce-in {
+    0% {
+      transform: scale(1);
+      transform: translate(-610px, 100px);
+    }
+    100% {
+      transform: scale(.5);
+      transform: translate(0px, 0px);
+    }
+  }
+  .shop_cart-enter-active {
+    animation: bounce-in 1s;
+  } */
+
+/* CSS类名实现 */
+.shop_cart-enter-active {
+  transition: all 1s ease-out;
+}
+.shop_cart-enter {
+  opacity: 0;
+  transform: scale(0.5);
+  transform: translate(-610px, 100px);
+}
+.shop_cart .add_img_js {
+  width: 100px;
+  position: absolute;
+  left: 600px;
+  top: -160px;
+  transition: all 1s;
+}
+.group_list {
+  padding: 30px;
+}
+.group_list .group_item {
+  width: 200px;
+  height: 100px;
+  border: 1px solid orangered;
+  margin: 10px;
+}
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.8s;
+}
+.list-enter,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(40px);
+}
+</style>

From 4a145c61f6990fc3a750eb42efe84d71ac7492de Mon Sep 17 00:00:00 2001
From: unknown <binbin0314@126.com>
Date: Fri, 8 Jan 2021 15:19:02 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=AD=B5=E5=8C=96=E5=B9=B3=E5=8F=B0?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/IncubationPlatform/Children/Tutor.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/views/IncubationPlatform/Children/Tutor.vue b/src/views/IncubationPlatform/Children/Tutor.vue
index 8099b53..a84d536 100644
--- a/src/views/IncubationPlatform/Children/Tutor.vue
+++ b/src/views/IncubationPlatform/Children/Tutor.vue
@@ -4,16 +4,18 @@
     <h-nav />
     <div class="inner">
       <bread-crumb :arr="arr" />
-      <div class="py-5 my-5" v-if="teachers && teachers.length>0">
+      <div class="py-5 my-5" v-if="teachers && teachers.length > 0">
         <div :key="teacher.categoryId" class="mb-4" v-for="teacher in teachers">
           <p class="font-bold-24 title-color">{{ teacher.categoryName }}</p>
           <div class="d-flex flex-wrap mb-10" v-if="teacher.services && teacher.services.length">
             <div
-              :class="(index+1)%5===0? 'teacher-item1' : ''"
+              :class="(index + 1) % 5 === 0 ? 'teacher-item1' : ''"
               :key="index"
               class="teacher-item font-24 mb-3"
-              v-for="(item,index) in teacher.services"
-            >{{ item.name }}</div>
+              v-for="(item, index) in teacher.services"
+            >
+              {{ item.name }}
+            </div>
           </div>
         </div>
       </div>
@@ -25,12 +27,11 @@
 import Banner from 'components/Banner/Banner.vue';
 import HNav from './../components/HNav.vue';
 import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';
-import RichText from 'components/Introduce/RichText.vue';
 import { selTeacher } from 'config/api';
 
 export default {
   name: 'Tutor',
-  components: { Banner, HNav, BreadCrumb, RichText },
+  components: { Banner, HNav, BreadCrumb },
   data() {
     return {
       title: '创业导师',