1

src/views/halltwo/parts/achiDetail.vue

@@ -1,166 +0,0 @@
-<template>
-  <div id="achiDetail">
-    <el-row>
-      <el-col :span="24" class="achiDetail">
-        <el-col :span="4" class="left">
-          <el-menu :default-active="activeIndex" class="el-menu-demo" @select="select">
-            <el-menu-item index="1"><i class="el-icon-notebook-2"></i>项目信息</el-menu-item>
-            <el-menu-item index="2"><i class="el-icon-picture"></i>项目图片({{ detailInfo.image.length }})</el-menu-item>
-            <el-menu-item index="3"><i class="el-icon-chat-dot-round"></i>在线对接</el-menu-item>
-          </el-menu>
-        </el-col>
-        <el-col :span="19" class="right">
-          <el-col :span="24" class="info" v-if="num == '1' && type == '0'">
-            <el-col :span="24" class="title"
-              ><p>{{ detailInfo.name }}</p></el-col
-            >
-            <el-col :span="24" class="infoDetail">
-              <el-col :span="12" class="text">技术类型：{{ detailInfo.type }}</el-col>
-              <el-col :span="12" class="text">行业分类：{{ detailInfo.field }}</el-col>
-              <el-col :span="12" class="text">技术成熟度：{{ detailInfo.achievestatus }}</el-col>
-              <el-col :span="12" class="text">交易方式：{{ detailInfo.cooperation }}</el-col>
-              <el-col :span="12" class="text">交易价格：{{ detailInfo.intentionprice }}</el-col>
-            </el-col>
-            <el-col :span="24" class="introduct">
-              <el-col :span="24" class="top"> <img :src="url1" /><span>项目介绍</span> </el-col>
-              <el-col :span="24" class="artical">
-                <p>成果简介:{{ detailInfo.achievebrief }}</p>
-              </el-col>
-            </el-col>
-          </el-col>
-          <el-col :span="24" class="info" v-if="num == '2'">
-            <el-col :span="8" v-for="(item, index) in detailInfo.image" :key="index" class="img2">
-              <el-image :src="item.url" style="width: 100%;height: 100%"></el-image>
-            </el-col>
-          </el-col>
-          <el-col :span="24" class="info" v-if="num == '3'">
-            对接
-          </el-col>
-        </el-col>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapState, createNamespacedHelpers } from 'vuex';
-
-export default {
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-  name: 'achiDetail',
-  props: {
-    detailInfo: { type: Object },
-  },
-  components: {},
-  data: function() {
-    return {
-      activeIndex: '1',
-      url1: require('@a/book4.png'),
-      num: 1,
-      dialogVisible: false,
-    };
-  },
-  created() {
-    console.log(this.detailInfo);
-  },
-  methods: {
-    select(index) {
-      this.num = index;
-    },
-  },
-  computed: {
-    ...mapState(['user']),
-    dock_id() {
-      return this.$route.query.dock_id;
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.achiDetail {
-  .left {
-    width: 195px;
-  }
-  .right {
-    float: right;
-    width: 82%;
-    .info {
-      .title {
-        font-size: 24px;
-        text-align: center;
-        line-height: 60px;
-        margin: 0 auto;
-        padding: 0px 40px;
-        p {
-          border-bottom: 4px solid #2152cb;
-        }
-      }
-      .infoDetail {
-        padding: 30px 10%;
-        border-bottom: 1px dashed #2152cb;
-        .text {
-          font-size: 16px;
-          color: #2152cb;
-          width: 50%;
-          float: left;
-          margin-bottom: 20px;
-        }
-      }
-      .introduct {
-        .top {
-          font-size: 20px;
-          color: #2152cb;
-          margin: 25px;
-          line-height: 41px;
-          position: relative;
-          span {
-            display: inline-block;
-            position: absolute;
-            top: 3px;
-            left: 6%;
-          }
-        }
-        .artical {
-          margin-top: 25px;
-          p {
-            font-size: 16px;
-            color: #080808;
-            line-height: 25px;
-            padding: 0 25px 0 80px;
-          }
-        }
-      }
-      .img2 {
-        height: 180px;
-      }
-    }
-  }
-}
-/deep/.el-menu {
-  border-right: 0px;
-}
-/deep/.el-menu-item {
-  padding: 0px 5px 0px 20px;
-  background-color: #bccbef;
-  color: #2152cb;
-  border-radius: 5px;
-  font-size: 20px;
-  height: 50px;
-  margin-bottom: 30px;
-  line-height: 50px;
-}
-/deep/.el-menu-item i {
-  vertical-align: middle;
-  font-size: 25px;
-  margin-right: 5px;
-  color: #2152cb;
-}
-/deep/.el-menu-item.is-active,
-.el-menu-item.is-active i {
-  color: #fff;
-  background: linear-gradient(to bottom, #7296f0 0%, #2152cb 100%);
-}
-</style>

src/views/halltwo/parts/trainlist.vue

@@ -50,7 +50,7 @@ export default {
 .style {
   padding: 0 10px;
   height: 345px;
-  overflow-y: auto;
+  overflow: hidden;
   margin: 0 0 7px 0px;
   .list {
     padding: 10px 0;

src/views/halltwo/parts/xmdjtechol.vue

@@ -0,0 +1,105 @@
+<template>
+  <div id="xmdjtechol">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          {{ detailInfo.name }}
+        </el-col>
+        <el-col :span="24" class="two">
+          <el-col :span="24" class="twoinfo">单位名称：{{ detailInfo.company }} </el-col>
+          <el-col :span="12" class="twoinfo">联系人：{{ detailInfo.contacts }} </el-col>
+          <el-col :span="12" class="twoinfo">需求类别：{{ detailInfo.type == '0' ? '科技需求' : detailInfo == '1' ? '技术成果' : '商务信息' }} </el-col>
+          <el-col :span="12" class="twoinfo">行业分类：{{ detailInfo.field }} </el-col>
+          <el-col :span="12" class="twoinfo">投入预算：{{ detailInfo.budget }} </el-col>
+        </el-col>
+        <el-col :span="24" class="three">
+          <el-col :span="24" class="top">
+            <i class="el-icon-document"></i>
+            <span>项目介绍</span>
+          </el-col>
+          <el-col :span="24" class="down">
+            <el-col :span="24" class="downinfo">
+              <p>技术说明：</p>
+              <p>{{ detailInfo.requirementdesc }}</p>
+            </el-col>
+            <el-col :span="24" class="downinfo">
+              <p>预期目标：</p>
+              <p>{{ detailInfo.expect }}</p>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'xmdjtechol',
+  props: {
+    detailInfo: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    font-size: 24px;
+    text-align: center;
+    border-bottom: 3px solid #2152cb;
+    padding: 20px 0;
+    margin: 0 0 15px 0;
+  }
+  .two {
+    color: #2152cb;
+    font-size: 16px;
+    padding: 0 0 15px 0;
+    border-bottom: 1px dashed #2152cb;
+    .twoinfo {
+      padding: 10px 30px;
+    }
+  }
+  .three {
+    border-bottom: 1px dashed #000;
+    .top {
+      padding: 15px 0;
+      font-size: 20px;
+      color: #2152cb;
+      i {
+        font-size: 40px;
+      }
+      span {
+        position: relative;
+        top: -5px;
+        left: 5px;
+      }
+    }
+    .down {
+      padding: 0 0 15px 0;
+      .downinfo {
+        font-size: 16px;
+        padding: 0px 15px 15px 40px;
+        p:nth-child(1) {
+          font-weight: bold;
+        }
+        p:nth-child(2) {
+          text-indent: 2rem;
+          line-height: 30px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/halltwo/xmdj copy.vue

@@ -1,395 +0,0 @@
-<template>
-  <div id="xmdj">
-    <el-row>
-      <el-col :span="24" class="main">
-        <el-col :span="24" class="one">
-          <div class="w_1200">
-            <el-col :span="20" class="left">
-              <el-col :span="24" class="leftone">
-                <span>科技成果展洽会</span>
-                <span>欢迎您</span>
-              </el-col>
-              <el-col :span="24" class="lefttwo">
-                SCIENTIFIC AND TECHNOLOGICAL ACHIEVEEMENTS EXHIBITION
-              </el-col>
-            </el-col>
-            <el-col :span="4" class="right">
-              <el-link :underline="false">帮助中心</el-link>
-            </el-col>
-          </div>
-        </el-col>
-        <el-col :span="24" class="two">
-          <div class="w_1200">
-            <el-col :span="24" class="twotop">
-              <el-col :span="18" class="left">
-                <p>{{ dockInfo.title }}</p>
-                <el-image :src="two1"></el-image>
-              </el-col>
-              <el-col :span="6" class="right">
-                <el-image :src="two2"></el-image>
-                <p>{{ dockInfo.start_time }}</p>
-                <p>距离展会结束还有</p>
-                <p>{{ djs }}</p>
-              </el-col>
-            </el-col>
-            <el-col :span="24" class="twocen">
-              <el-col :span="15" class="left"> <span>主办单位：</span>{{ dockInfo.sponsor }} </el-col>
-              <el-col :span="8" class="right">
-                <el-button class="btn1" @click="$router.push({ path: '/halltwo/directTwo', query: { id: dockInfo.id } })">返回展会进行页</el-button>
-                <el-button class="btn2" @click="$router.push({ path: '/halltwo/detail', query: { dock_id: dockInfo.id } })">进入展会总结页</el-button>
-              </el-col>
-            </el-col>
-          </div>
-        </el-col>
-        <el-col :span="24" class="three">
-          <div class="w_1200">
-            <el-col :span="24" class="threeinfo">
-              <span v-if="this.type == '0'">
-                <techDetail :detailInfo="detailInfo" @onSubmit="onSubmit" :displayBtn="displayBtn"></techDetail>
-              </span>
-              <span v-else-if="this.type == '1'">
-                <achiDetail :detailInfo="detailInfo" @onSubmit="onSubmit" :displayBtn="displayBtn"></achiDetail>
-              </span>
-              <span v-else-if="this.type == '2'">
-                <busiDetail :detailInfo="detailInfo" @onSubmit="onSubmit" :displayBtn="displayBtn"></busiDetail>
-              </span>
-              <span v-else>
-                <expeDetail :detailInfo="detailInfo" @onSubmit="onSubmit" :displayBtn="displayBtn"></expeDetail>
-              </span>
-            </el-col>
-          </div>
-        </el-col>
-        <el-col :span="24" class="four">
-          <div class="w_1200">
-            <ywlx></ywlx>
-          </div>
-        </el-col>
-      </el-col>
-      <div class="pz_down">
-        <live-foot></live-foot>
-      </div>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import ywlx from './parts/ywlx.vue';
-import liveFoot from '@/layout/live/foot.vue';
-import techDetail from '@/views/market/detail/techDetail.vue';
-import achiDetail from '@/views/market/detail/achiDetail.vue';
-import busiDetail from '@/views/market/detail/busiDetail.vue';
-import expeDetail from '@/views/market/detail/expeDetail.vue';
-import { mapState, createNamespacedHelpers } from 'vuex';
-const { mapActions: dock } = createNamespacedHelpers('dock');
-const { mapActions: transaction } = createNamespacedHelpers('transaction');
-const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
-var moment = require('moment');
-export default {
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-  name: 'xmdj',
-  props: {},
-  components: {
-    liveFoot,
-    techDetail,
-    achiDetail,
-    busiDetail,
-    expeDetail,
-    ywlx,
-  },
-  data: function() {
-    return {
-      two1: require('@a/sy_04.png'),
-      two2: require('@a/dock2.png'),
-      // 展會詳情
-      dockInfo: {},
-      // 指导单位
-      erweima: require('@a/二维码.jpg'),
-      // 产品列表
-      productList: [],
-      // 产品详情
-      detailInfo: {},
-      // 显示按钮
-      displayBtn: true,
-      // 倒计时
-      djs: '',
-    };
-  },
-  async created() {
-    await this.searchInfo();
-  },
-  methods: {
-    ...dock({ dockQuery: 'query', dockFetch: 'fetch', goodsquery: 'goodsquery' }),
-    ...transaction({ buyProduct: 'create' }),
-    ...expertsuser(['fetch']),
-    async searchInfo() {
-      // 查询展会详情
-      if (this.dock_id) {
-        let res = await this.dockFetch(this.dock_id);
-        if (this.$checkRes(res)) {
-          this.$set(this, `dockInfo`, res.data);
-          if (this.type == '3') {
-            this.searchExpert();
-          } else {
-            // 查询产品
-            let czxm = res.data.apply.map(item => item.goodsList);
-            czxm = _.flattenDeep(czxm);
-            let czxmNew = czxm.filter(item => item.dockStatus == '1');
-            this.$set(this, `productList`, czxmNew);
-            this.searchProduct();
-          }
-          // 倒计时
-          this.timer = setInterval(() => {
-            this.setTime(res.data.start_time);
-          }, 1000);
-        }
-      }
-    },
-    // 倒计时
-    setTime(end) {
-      let now = moment().format('YYYY-MM-DD HH:mm:ss');
-      // let now = moment().format('2020-11-20 08:00:00');
-      if (end == now) {
-        clearInterval(this.timer);
-        this.$set(this, `djs`, '展会开始');
-      } else {
-        let sec = moment(end).diff(now, 'seconds');
-        let day = _.floor(sec / 60 / 60 / 24);
-        let hour = _.floor(Math.abs(day * 24 - sec / 60 / 60));
-        let dayhour = day * 24;
-        let minute = _.floor(Math.abs(day * 24 * 60 + hour * 60 - sec / 60));
-        let second = _.floor(Math.abs(day * 24 * 60 * 60 + hour * 60 * 60 + minute * 60 - sec));
-        let str = `${hour + dayhour}小时${minute}分${second}秒`;
-        this.$set(this, `djs`, str);
-      }
-    },
-    // 查找产品详情
-    searchProduct() {
-      let productInfo = this.productList.find(i => i._id == this.id);
-      if (productInfo) {
-        this.$set(this, `detailInfo`, productInfo);
-      }
-    },
-    // 查找专家详情
-    async searchExpert() {
-      let res = await this.fetch(this.id);
-      if (res.errcode === 0) {
-        this.$set(this, `detailInfo`, res.data);
-      }
-    },
-    // 洽谈
-    async onSubmit() {
-      let data = this.detailInfo;
-      let form = {};
-      if (this.type == '3') {
-        form = {
-          userid: this.user.uid,
-          username: this.user.name,
-          product_id: data.id,
-          product_name: data.name,
-          market_userid: data.id,
-          market_username: data.name,
-          status: '0',
-          type: '1',
-        };
-      } else {
-        form = {
-          userid: this.user.uid,
-          username: this.user.name,
-          product_id: data._id,
-          product_name: data.name,
-          market_userid: data.userid,
-          market_username: data.contacts,
-          status: '0',
-          type: '1',
-        };
-      }
-      if (!this.user.uid) {
-        // this.$message.error('游客身份无法与卖家对话,请先注册');
-        this.$message({
-          dangerouslyUseHTMLString: true,
-          message: '<strong><a href="http://free.liaoningdoupo.com/platlive/webLogin" style="color:red;">游客身份无法与卖家对话,请先注册</a></strong>',
-          type: 'error',
-        });
-        return;
-      } else {
-        let res = await this.buyProduct(form);
-        this.$checkRes(res, '购买申请成功', res.errmsg || '购买申请失败');
-      }
-    },
-  },
-  computed: {
-    ...mapState(['user']),
-    dock_id() {
-      return this.$route.query.dock_id;
-    },
-    id() {
-      return this.$route.query.id;
-    },
-    type() {
-      return this.$route.query.type;
-    },
-  },
-  watch: {},
-};
-</script>
-
-<style lang="less" scoped>
-.main {
-  .one {
-    height: 100px;
-    .left {
-      height: 100px;
-      .leftone {
-        margin: 15px 0 0 0;
-        span:nth-child(1) {
-          font-size: 35px;
-          color: #535353;
-          font-weight: bold;
-          font-family: cursive;
-        }
-        span:nth-child(2) {
-          font-size: 15px;
-          padding: 0 10px;
-          color: #535353;
-        }
-      }
-      .lefttwo {
-        font-size: 12px;
-        color: #535353;
-      }
-    }
-    .right {
-      height: 100px;
-      line-height: 100px;
-      text-align: right;
-    }
-  }
-  .two {
-    height: 610px;
-    background: url('~@/assets/bj1.jpg');
-    padding: 20px 0;
-    .twotop {
-      margin: 0 0 10px 0;
-      .left {
-        height: 357px;
-        margin: 0 10px 0 0;
-        background: url('~@/assets/dock1.png');
-        p {
-          float: left;
-          width: 79%;
-          font-size: 43px;
-          color: #fff;
-          font-weight: bold;
-          padding: 13% 0 0 20px;
-        }
-        .el-image {
-          float: left;
-          width: 153px;
-          height: 94px;
-          margin: 4% 0 0 0;
-        }
-      }
-      .right {
-        background-color: #ffffff;
-        width: 24%;
-        height: 357px;
-        text-align: center;
-        padding: 0 10px;
-        .el-image {
-          width: 120px;
-          height: 48px;
-          margin: 50px 0 0px 0;
-        }
-        p:nth-child(2) {
-          font-size: 18px;
-          margin: 30px 0 5px 0;
-        }
-        p:nth-child(3) {
-          font-size: 22px;
-          font-weight: bold;
-          margin-bottom: 30px;
-        }
-        p:nth-child(4) {
-          background: #f5f5f5;
-          padding: 20px 0px;
-          border-radius: 5px;
-          font-size: 30px;
-        }
-      }
-      .right:hover {
-        cursor: pointer;
-        p:nth-child(3) {
-          color: #535353;
-        }
-      }
-    }
-    .twocen {
-      height: 130px;
-      overflow: hidden;
-      line-height: 130px;
-      background-color: #fff;
-      margin: 0 0 35px 0;
-      .left {
-        font-size: 18px;
-        margin: 0 0 0 30px;
-        span {
-          font-size: 22px;
-          font-weight: bold;
-        }
-      }
-      .right {
-        .btn1 {
-          font-size: 16px;
-          color: #fff;
-          background: red;
-          border: none;
-          font-weight: bold;
-        }
-        .btn2 {
-          font-size: 16px;
-          color: #ff0000;
-          border: 1px solid #ff0000;
-          font-weight: bold;
-        }
-      }
-    }
-  }
-  .three {
-    min-height: 700px;
-    overflow: hidden;
-    position: relative;
-    top: -50px;
-    z-index: 999;
-    .threeinfo {
-      min-height: 700px;
-      overflow: hidden;
-      background-color: #fff;
-      padding: 15px;
-      box-shadow: 0 5px 15px rgba(33, 82, 203, 0.35);
-    }
-  }
-  .four {
-    border-top: 2px solid #305798;
-    height: 250px;
-    .info {
-      .left {
-        h1 {
-          padding: 15px 0;
-          font-weight: bold;
-          color: #4d4d4d;
-        }
-        p {
-          font-size: 16px;
-          color: #4d4d4d;
-          padding: 5px 0;
-        }
-      }
-      .right {
-        text-align: center;
-      }
-    }
-  }
-}
-</style>

src/views/halltwo/xmdj.vue

@@ -44,18 +44,43 @@
         <el-col :span="24" class="three">
           <div class="w_1200">
             <el-col :span="24" class="threeinfo">
-              <span v-if="this.type == '0'">
-                <techDetail :detailInfo="detailInfo" @onSubmit="onSubmit" :displayBtn="displayBtn"></techDetail>
-              </span>
-              <span v-else-if="this.type == '1'">
-                <achiDetail :detailInfo="detailInfo" @onSubmit="onSubmit" :displayBtn="displayBtn"></achiDetail>
-              </span>
-              <span v-else-if="this.type == '2'">
-                <busiDetail :detailInfo="detailInfo" @onSubmit="onSubmit" :displayBtn="displayBtn"></busiDetail>
-              </span>
-              <span v-else>
-                <expeDetail :detailInfo="detailInfo" @onSubmit="onSubmit" :displayBtn="displayBtn"></expeDetail>
-              </span>
+              <el-col :span="4" class="left">
+                <el-col
+                  :span="24"
+                  v-for="(item, index) in menuList"
+                  :key="index"
+                  @click.native="changeMenu(item.name, index)"
+                  :class="menuIndex == index ? 'indexClass' : ''"
+                  class="menuList"
+                >
+                  <i :class="item.url"></i>
+                  <span>{{ item.name }}</span>
+                </el-col>
+              </el-col>
+              <el-col :span="20" class="right">
+                <span v-if="menuIndex == '0'">
+                  <span v-if="type == '0'">
+                    <xmdjtechol :detailInfo="detailInfo"></xmdjtechol>
+                  </span>
+                  <span v-else-if="type == '1'">
+                    成果
+                  </span>
+                  <span v-else-if="type == '2'">
+                    商务
+                  </span>
+                  <span v-else>
+                    专家
+                  </span>
+                </span>
+                <span v-else-if="menuIndex == '1'">
+                  <el-col :span="12" class="productImage" v-for="(item, index) in image" :key="index">
+                    <el-image :src="item.url"></el-image>
+                  </el-col>
+                </span>
+                <span v-else>
+                  对接
+                </span>
+              </el-col>
             </el-col>
           </div>
         </el-col>
@@ -75,11 +100,7 @@
 <script>
 import ywlx from './parts/ywlx.vue';
 import liveFoot from '@/layout/live/foot.vue';
-import techDetail from '@/views/market/detail/techDetail.vue';
-// import achiDetail from '@/views/market/detail/achiDetail.vue';
-import achiDetail from '@/views/halltwo/parts/achiDetail.vue';
-import busiDetail from '@/views/market/detail/busiDetail.vue';
-import expeDetail from '@/views/market/detail/expeDetail.vue';
+import xmdjtechol from './parts/xmdjtechol.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: dock } = createNamespacedHelpers('dock');
 const { mapActions: transaction } = createNamespacedHelpers('transaction');
@@ -93,11 +114,9 @@ export default {
   props: {},
   components: {
     liveFoot,
-    techDetail,
-    achiDetail,
-    busiDetail,
-    expeDetail,
     ywlx,
+    // 技术对接
+    xmdjtechol,
   },
   data: function() {
     return {
@@ -115,6 +134,33 @@ export default {
       displayBtn: true,
       // 倒计时
       djs: '',
+      // 菜单列表
+      menuList: [
+        {
+          url: 'el-icon-reading',
+          name: '项目内容',
+        },
+        {
+          url: 'el-icon-picture-outline',
+          name: '项目图片',
+        },
+        {
+          url: 'el-icon-chat-dot-square',
+          name: '项目对接',
+        },
+      ],
+      menuIndex: '0',
+      image: [
+        {
+          url: require('@a/7.jpg'),
+        },
+        {
+          url: require('@a/7.jpg'),
+        },
+        {
+          url: require('@a/7.jpg'),
+        },
+      ],
     };
   },
   async created() {
@@ -219,6 +265,10 @@ export default {
         this.$checkRes(res, '购买申请成功', res.errmsg || '购买申请失败');
       }
     },
+    // 选择菜单
+    changeMenu(name, index) {
+      this.menuIndex = index;
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -367,9 +417,55 @@ export default {
       min-height: 700px;
       overflow: hidden;
       background-color: #fff;
-      // padding: 15px;
-      padding: 40px 25px;
+      padding: 50px 15px 0 15px;
       box-shadow: 0 5px 15px rgba(33, 82, 203, 0.35);
+      .left {
+        .menuList {
+          height: 50px;
+          border-radius: 5px;
+          background-color: #bccbef;
+          color: #2152cb;
+          margin: 0 0 30px 0;
+          padding: 0 0 0 30px;
+          i {
+            font-size: 35px;
+            padding: 6px 0;
+          }
+          span {
+            position: relative;
+            top: -8px;
+            font-size: 18px;
+            left: 6px;
+          }
+        }
+        .indexClass {
+          background: #2152cb;
+          color: #fff;
+          i {
+            color: #fff;
+          }
+        }
+        .menuList:hover {
+          cursor: pointer;
+          background: #2152cb;
+          color: #fff;
+          i {
+            color: #fff;
+          }
+        }
+      }
+      .right {
+        min-height: 650px;
+        padding: 0 0 0 15px;
+        .productImage {
+          width: 48%;
+          margin: 0 15px 15px 0;
+          .el-image {
+            width: 100%;
+            border-radius: 10px;
+          }
+        }
+      }
     }
   }
   .four {