更新

src/layout/market/context.vue

@@ -0,0 +1,247 @@
+<template>
+  <div id="context">
+    <el-col :span="24" class="one">
+      <el-col :span="7" class="oneLeft">
+        <el-carousel trigger="click" height="210px">
+          <template v-if="detailInfo.image && detailInfo.image.length > 0">
+            <el-carousel-item v-for="(item, index) in detailInfo.image" :key="index">
+              <el-image :src="item.url"> </el-image>
+            </el-carousel-item>
+          </template>
+        </el-carousel>
+      </el-col>
+      <el-col :span="17" class="oneRight">
+        <p class="textOver">
+          {{ detailInfo.name }}
+        </p>
+        <p>
+          <span>产品类型:{{ detailInfo.product_type_name || '暂无' }}</span>
+          <span>收费标准:{{ detailInfo.price || '暂无' }}/{{ detailInfo.priceunit || '暂无' }}</span>
+        </p>
+        <p>
+          <span>
+            交易方式:{{ detailInfo.business === '0' ? '公用' : detailInfo.business === '1' ? '转让' : detailInfo.business === '2' ? '竞价' : '暂无' }}
+          </span>
+          <span>研发阶段:{{ detailInfo.phase == 1 ? '阶段成果' : detailInfo.phase == 2 ? '最终成果' : '暂无' }}</span>
+        </p>
+        <p>
+          <span>联系人:{{ detailInfo.contact_user || '暂无' }}</span>
+          <span>联系电话:{{ detailInfo.contact_tel || '暂无' }}</span>
+        </p>
+      </el-col>
+      <el-col :span="24" class="oneDown">
+        <div>
+          <p>应用领域：</p>
+          <p>{{ detailInfo.field || '暂无' }}</p>
+        </div>
+        <div>
+          <p>
+            <span>产品参数:</span
+            ><span
+              ><el-button type="text" @click="dialogTableVisible = true">查看详情</el-button>
+
+              <el-dialog title="参数" :visible.sync="dialogTableVisible">
+                <el-table :data="detailInfo.product_args" border style="width: 100%">
+                  <el-table-column prop="arg_name" label="参数名称" :show-overflow-tooltip="true"> </el-table-column>
+                  <el-table-column prop="memo" label="参数内容" :show-overflow-tooltip="true"> </el-table-column>
+                </el-table>
+              </el-dialog>
+            </span>
+          </p>
+        </div>
+        <div>
+          <p>服务范围:</p>
+          <p class="moreScope" v-if="scope != ''">{{ detailInfo.scope || '暂无' }}</p>
+          <p class="moreScope1" v-else>{{ detailInfo.scope || '暂无' }}</p>
+          <el-button size="mini" @click="scopeMore()" v-if="scope != ''">更多</el-button>
+          <el-button size="mini" @click="scopeMore1()" v-else>收起</el-button>
+        </div>
+        <div>
+          <p>服务范围:</p>
+          <p>{{ detailInfo.scope || '暂无' }}</p>
+        </div>
+        <div>
+          <p>产品简介:</p>
+          <p class="introduction" v-if="introduction != ''">{{ detailInfo.introduction || '暂无' }}</p>
+          <p class="introduction1" v-else>{{ detailInfo.introduction || '暂无' }}</p>
+          <el-button size="mini" v-if="detailInfo.introduction != null">
+            <span v-if="introduction != ''" @click="introductionMore()">更多</span>
+            <span v-else @click="introductionMore1()">收起</span>
+          </el-button>
+        </div>
+        <el-col :span="24"><el-button @click="onSubmit">洽谈交易</el-button></el-col>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'context',
+  props: {
+    detailInfo: null,
+  },
+  components: {},
+  data: () => ({
+    dialogTableVisible: false,
+    dialogFormVisible: false,
+    scope: '123',
+    introduction: '123',
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    scopeMore() {
+      this.scope = '';
+    },
+    // 收起
+    scopeMore1() {
+      this.scope = '123';
+    },
+    // 更多
+    introductionMore() {
+      this.introduction = '';
+    },
+    // 收起
+    introductionMore1() {
+      this.introduction = '123';
+    },
+    onSubmit() {
+      console.log(this.policyInfo);
+      this.$emit('onSubmit', this.detailInfo);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+// .textOver{}
+// 	overflow: hidden;
+// 	text-overflow: ellipsis;
+// 	-webkit-line-clamp: 3;
+// 	word-break: break-all;
+// 	display: -webkit-box;
+//   -webkit-box-orient: vertical;
+//   }
+.style {
+  height: 100vh;
+}
+.style .info {
+  position: relative;
+  top: -450px;
+}
+.style .top {
+  position: relative;
+  top: 0;
+  width: 100%;
+  text-align: center;
+  z-index: 999;
+  height: 230px;
+  margin: 0 0 20px 0;
+}
+.style .top p:first-child {
+  font-size: 50px;
+  color: #fff;
+}
+.style .top p:last-child {
+  font-size: 30px;
+  color: #fff;
+  position: absolute;
+  width: 100%;
+  top: 170px;
+}
+
+.one {
+  min-height: 550px;
+  padding: 20px;
+  .oneLeft {
+    height: 210px;
+    overflow: hidden;
+  }
+  .oneRight {
+    padding: 0 15px;
+    p {
+      font-size: 16px;
+      padding: 0 0 20px 0;
+      span {
+        display: inline-block;
+        width: 50%;
+      }
+    }
+    p:first-child {
+      font-size: 20px;
+      font-weight: bold;
+      padding: 20px 0;
+    }
+    p:nth-child(2) span:last-child {
+      color: red;
+      font-weight: bold;
+    }
+  }
+  .oneDown {
+    border-top: 1px dashed #ccc;
+    margin: 30px 0 0 0;
+    padding: 30px 0 0 0;
+    div {
+      padding: 0 0 15px 0;
+      p {
+        font-size: 18px;
+      }
+      p:first-child {
+        color: #333;
+        font-weight: bold;
+        padding: 0 0 10px 0;
+      }
+    }
+    div:nth-child(2) p span:last-child {
+      color: #409eff;
+      padding: 0 10px;
+    }
+    div:nth-child(2) p span:last-child:hover {
+      cursor: pointer;
+    }
+    div:nth-child(3) .moreScope {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 6;
+      word-break: break-all;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+    }
+    div:nth-child(3) .moreScope1 {
+      overflow: none;
+    }
+    div:nth-child(3) .el-button {
+      float: right;
+    }
+    div:nth-child(5) .introduction {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 6;
+      word-break: break-all;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+    }
+    div:nth-child(5) .introduction1 {
+      overflow: none;
+    }
+    div:last-child .el-button {
+      float: right;
+    }
+  }
+  .mainDown {
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+  }
+}
+</style>

src/router/index.js

@@ -77,6 +77,13 @@ const live = [
         component: () => import('../views/supermaket/supermarketdetail.vue'),
       },
 
+      //科技超市列表
+      {
+        path: '/supermaket/list',
+        name: 'supermarketlists',
+        component: () => import('../views/supermaket/list.vue'),
+      },
+
       {
         path: '/dynamic/index',
         name: 'dynamic_index',

src/store/index.js

@@ -22,7 +22,7 @@ import place from '@common/store/place/place';
 import password from '@common/store/market/password';
 import maarkettype from '@common/store/market/markettype';
 import comment from '@common/store/live/comment';
-
+import tranaudit from '@common/store/market/tranaudit';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
@@ -50,5 +50,6 @@ export default new Vuex.Store({
     password,
     maarkettype,
     comment,
+    tranaudit,
   },
 });

src/views/hallList/index.vue

@@ -3,13 +3,13 @@
     <el-col :span="24" class="main">
       <el-col :span="24" class="info" style="padding:30px">
         <el-tabs>
-          <el-tab-pane label="进行中的对接会" name="0">
+          <el-tab-pane label="正在直播" name="0">
             <list :list="listNow" :total="nowTotal" status="1" @query="searchList"></list>
           </el-tab-pane>
-          <el-tab-pane label="近期对接会" name="1">
+          <el-tab-pane label="下期直播" name="1">
             <list :list="listPre" :total="preTotal" status="0" @query="searchList"></list>
           </el-tab-pane>
-          <el-tab-pane label="过往对接会" name="2">
+          <el-tab-pane label="已往直播" name="2">
             <list :list="listPast" :total="pastTotal" status="2" @query="searchList"></list>
           </el-tab-pane>
         </el-tabs>

src/views/hallList/parts/list.vue

@@ -105,7 +105,7 @@ export default {
 }
 .infoRightList p span:first-child {
   display: inline-block;
-  width: 89%;
+  width: 85%;
   margin: 0 20px 0 10px;
 }
 .infoRightList p span:last-child {

src/views/market/index.vue

@@ -220,25 +220,25 @@ export default {
       if (this.$checkRes(res)) this.$set(this, `expertsList`, res.data);
     },
     toProductList() {
-      this.$router.push({ path: '/supermaket/supermarketlist', query: { totaltype: 1 } });
+      this.$router.push({ path: '/supermaket/list', query: { totaltype: 1, column_name: '科技产品' } });
     },
     productDetail(id) {
-      this.$router.push({ path: '/supermaket/supermarketdetail', query: { totaltype: 2, id: id } });
+      this.$router.push({ path: '/supermaket/supermarketdetail', query: { totaltype: 2, id: id, display: 2 } });
     },
     toTecList() {
-      this.$router.push({ path: '/supermaket/supermarketlist', query: { totaltype: 0 } });
+      this.$router.push({ path: '/supermaket/list', query: { totaltype: 0, column_name: '技术供求' } });
     },
     tecDetail(id) {
-      this.$router.push({ path: '/supermaket/supermarketdetail', query: { totaltype: 0, id: id } });
+      this.$router.push({ path: '/supermaket/supermarketdetail', query: { totaltype: 0, id: id, display: 2 } });
     },
     toServiceList() {
-      this.$router.push({ path: '/supermaket/supermarketlist', query: { totaltype: 2 } });
+      this.$router.push({ path: '/supermaket/list', query: { totaltype: 2, column_name: '技术供求' } });
     },
     serviceDetail(id) {
-      this.$router.push({ path: '/supermaket/supermarketdetail', query: { totaltype: 2, id: id } });
+      this.$router.push({ path: '/supermaket/supermarketdetail', query: { totaltype: 2, id: id, display: 2 } });
     },
     zhuanjia() {
-      this.$router.push({ path: '/personnel/list' });
+      this.$router.push({ path: '/supermaket/list', query: { column_name: '专家供求' } });
     },
     zhuanjiaDetail(id) {
       this.$router.push({ path: '/personnel/rencai', query: { id: id } });

src/views/supermaket/list.vue

@@ -0,0 +1,423 @@
+<template>
+  <div id="list">
+    <el-col :span="24" class="main">
+      <el-col :span="24">
+        <el-col :span="5" class="menu">
+          <el-image :src="squareImage"></el-image>
+          <span>Menu</span>
+          <el-col class="menuList" :span="24" v-for="(item, index) in menuList" :key="index">
+            <p @click="changeMenu(item.name, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.name }}</p>
+          </el-col>
+        </el-col>
+        <el-col :span="19" class="info" v-if="display == '1'">
+          <el-col v-if="menuIndex == '0'" class="leftInfo">
+            <el-col :span="24" class="leftTop">
+              <span>|</span> <span>{{ menuName }}</span>
+            </el-col>
+            <el-col class="infoLeftList" :span="24" v-for="(item, index) in zhuantiList" :key="index">
+              <p>{{ item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || '' }}</p>
+              <p>
+                <span class="textOver" @click="clickshanpin(item.id)">{{ item.name }}</span>
+                <span>{{ item.introduction }}</span>
+              </p>
+            </el-col>
+          </el-col>
+          <el-col v-if="menuIndex == '1'" class="leftInfo">
+            <el-col :span="24" class="leftTop">
+              <span>|</span> <span>{{ menuName }}</span>
+            </el-col>
+            <el-col class="infoRightList" :span="24" v-for="(item, index) in jishuList" :key="index">
+              <p>
+                <span class="textOver" @click="clickjishu(item.id)">{{ item.name }}</span
+                ><span class="textOver">{{ item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || '' }}</span>
+              </p>
+            </el-col>
+          </el-col>
+          <el-col v-if="menuIndex == '2'" class="leftInfo">
+            <el-col :span="24" class="leftTop">
+              <span>|</span> <span>{{ menuName }}</span>
+            </el-col>
+            <el-col class="infoRightList" :span="24" v-for="(item, index) in hangyeList" :key="index">
+              <p>
+                <span class="textOver" @click="clickfuwu(item.id)">{{ item.name }}</span
+                ><span class="textOver">{{ item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || '' }}</span>
+              </p>
+            </el-col>
+          </el-col>
+          <el-col v-if="menuIndex == '3'" class="leftInfo">
+            <el-col :span="24" class="leftTop">
+              <span>|</span> <span>{{ menuName }}</span>
+            </el-col>
+            <el-col class="infoLeftList" :span="24" v-for="(item, index) in jiaoyuList" :key="index">
+              <p>{{ item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || '' }}</p>
+              <p>
+                <span class="textOver" @click="clickzhuanjia(item.id)">{{ item.name }}</span>
+                <span>{{ item.job_profile }}</span>
+              </p>
+            </el-col>
+          </el-col>
+          <el-col class="page">
+            <el-pagination
+              background
+              @current-change="handleCurrentChange"
+              :current-page.sync="currentPage"
+              :page-size="pageSize"
+              layout="total,prev, pager, next, jumper"
+              :total="pageTotal"
+            >
+            </el-pagination>
+          </el-col>
+        </el-col>
+        <el-col :span="19" v-else-if="display == '2'" class="info">
+          <context :detailInfo="detailInfo" @onSubmit="onSubmit"></context>
+        </el-col>
+        <el-col :span="19" v-else-if="display == '3'" class="info">
+          <zhuanjia></zhuanjia>
+        </el-col>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: product } = createNamespacedHelpers('marketproduct');
+const { mapActions: talentExperts } = createNamespacedHelpers('talentExperts');
+const { mapActions: transaction } = createNamespacedHelpers('transaction');
+const { mapActions: tranaudit } = createNamespacedHelpers('tranaudit');
+import zhuanjia from '@/layout/market/zhuanjia.vue';
+import context from '@/layout/market/context.vue';
+
+export default {
+  name: 'list',
+  props: {},
+  components: {
+    context,
+    zhuanjia,
+  },
+  data: () => ({
+    squareImage: require('@/assets/live/square_big.png'),
+    menuList: [{ name: '科技产品' }, { name: '技术供求' }, { name: '服务供求' }, { name: '专家供求' }],
+    menuIndex: '0',
+    menuName: '科技产品',
+    menuColor: 'rgb(254, 149, 14)',
+    currentPage: 1,
+    pageTotal: 0,
+    pageSize: 10,
+    limit: 10,
+    zhuantiList: [],
+    jishuList: [],
+    hangyeList: [],
+    jiaoyuList: [],
+    display: '1',
+    detailInfo: {},
+  }),
+  created() {
+    this.searchList();
+    this.search();
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+    totaltype() {
+      return this.$route.query.totaltype;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+
+  methods: {
+    ...product({ list: 'newquery', newfetch: 'newfetch' }),
+    ...talentExperts({ lists: 'query', fetch: 'fetch' }),
+    ...transaction({ transactioncreate: 'create', transactionfetch: 'fetch' }),
+    ...tranaudit({ tranauditcreate: 'create' }),
+    async searchList({ skip = 0, limit = 10, ...info } = {}) {
+      if (this.$route.query.column_name == '科技产品') {
+        this.display = '1';
+        this.changeMenu(this.$route.query.column_name, 0);
+      } else if (this.$route.query.column_name == '技术供求') {
+        this.display = '1';
+        this.changeMenu(this.$route.query.column_name, 1);
+      } else if (this.$route.query.column_name == '服务供求') {
+        this.display = '1';
+        this.changeMenu(this.$route.query.column_name, 2);
+      } else if (this.$route.query.column_name == '专家供求') {
+        this.display = '1';
+        this.changeMenu(this.$route.query.column_name, 3);
+      }
+    },
+    async changeMenu(name, index) {
+      console.log(index, name);
+
+      this.menuIndex = index;
+      this.menuColor = 'rgb(254, 149, 14)';
+      this.menuName = name;
+      this.initList({ name });
+    },
+    async initList({ name, skip = 0, limit = 10, ...info } = {}) {
+      this.display = '1';
+      let res = [];
+      this.pageSize = 5;
+      if (name == '科技产品') {
+        let totaltype = '1';
+        console.log(totaltype);
+
+        res = await this.list({ skip, limit, totaltype, status: 1, ...info });
+
+        this.$set(this, `zhuantiList`, res.data);
+      } else if (name == '技术供求') {
+        let totaltype = '0';
+        console.log(totaltype);
+        res = await this.list({ skip, limit, totaltype, status: 1, ...info });
+        this.$set(this, `jishuList`, res.data);
+      } else if (name == '服务供求') {
+        let totaltype = '2';
+        console.log(totaltype);
+        res = await this.list({ skip, limit, totaltype, status: 1, ...info });
+        this.$set(this, `hangyeList`, res.data);
+      } else if (name == '专家供求') {
+        let totaltype = this.totaltype;
+        res = await this.lists({ skip, limit, status: 1, ...info });
+        this.$set(this, `jiaoyuList`, res.data);
+      }
+      this.$set(this, `pageTotal`, res.total);
+    },
+    handleCurrentChange(val) {
+      const name = this.menuName;
+      if (name == '科技产品' || name == '专家供求') {
+        this.limit = 5;
+      }
+      this.initList({ name: name, skip: (val - 1) * this.limit, limit: this.limit });
+    },
+    async clickshanpin(id) {
+      this.display = '2';
+      console.log(id);
+      const res = await this.newfetch(id);
+      console.log(res.data);
+      this.$set(this, `detailInfo`, res.data);
+    },
+
+    async clickjishu(id) {
+      this.display = '2';
+      console.log(id);
+      const res = await this.newfetch(id);
+      console.log(res.data);
+      this.$set(this, `detailInfo`, res.data);
+    },
+
+    async search() {
+      if (this.display == '2') {
+        console.log(id);
+        const res = await this.newfetch(id);
+        console.log(res.data);
+        this.$set(this, `detailInfo`, res.data);
+      }
+    },
+
+    async clickfuwu(id) {
+      this.display = '2';
+      console.log(id);
+      const res = await this.newfetch(id);
+      console.log(res.data);
+      this.$set(this, `detailInfo`, res.data);
+    },
+
+    async clickzhuanjia(id) {
+      this.display = '3';
+    },
+
+    async onSubmit() {
+      console.log(this.user.uid);
+      let form = {};
+      form.userid = this.user.uid;
+      form.username = this.user.name;
+      form.product_id = this.detailInfo.id;
+      form.product_name = this.detailInfo.name;
+      form.market_userid = this.detailInfo.userid;
+      form.market_username = this.detailInfo.contact_user;
+      form.status = '0';
+      console.log(form);
+      let res = await this.transactioncreate(form);
+      this.$checkRes(res, '发起洽谈交易成功', '交易失败');
+      let shenhe = {};
+      shenhe.result = '0';
+      console.log(res.data.id);
+
+      shenhe.transaction_id = res.data.id;
+      shenhe.userid = this.detailInfo.userid;
+      shenhe.product_id = this.detailInfo.userid;
+      console.log(shenhe);
+      let ress = await this.tranauditcreate(shenhe);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 80%;
+  margin: 0 auto;
+  float: none;
+}
+.menu {
+  float: left;
+  height: 450px;
+  width: 20%;
+  background: no-repeat bottom right;
+  background-image: url(../../assets/live/menu_back.jpg);
+  margin: 30px 0;
+  padding: 10px 0 0 10px;
+  box-sizing: border-box;
+  box-shadow: 0 0 10px #bbbaba;
+}
+.menu .el-image {
+  width: 30px;
+  display: inline-table;
+  margin: 10px 5px;
+}
+.menu span {
+  font-size: 24px;
+  color: #92959a;
+  font-weight: 600;
+  margin-left: 3px;
+  position: relative;
+  top: 10px;
+}
+.menuList p {
+  line-height: 60px;
+  font-size: 18px;
+  cursor: pointer;
+  border-bottom: 1px solid #2d64b3;
+  color: #044b79;
+  font-weight: 600;
+}
+.info {
+  width: 77%;
+  float: right;
+  margin: 30px 0 30px 2px;
+  min-height: 766px;
+  box-shadow: 0 0 10px #2d64b3;
+  overflow: hidden;
+  right: 0px;
+  background: #ffffff;
+}
+.leftInfo {
+  height: 500px;
+  overflow: hidden;
+}
+.leftTop {
+  font-size: 18px;
+  width: 96%;
+  height: 41px;
+  line-height: 35px;
+  border-bottom: 1px solid #e5e5e5;
+  position: relative;
+  bottom: 1px;
+  margin: 10px;
+  font-weight: 600;
+  color: #22529a;
+}
+.infoLeftList {
+  float: left;
+  width: 95%;
+  border-bottom: 1px dashed #ccc;
+  padding: 10px 0 10px 10px;
+  height: 87px;
+  margin: 0 0 0 5px;
+}
+.infoLeftList:hover p:last-child span:first-child {
+  -webkit-transform: translateY(-3px);
+  -ms-transform: translateY(-3px);
+  transform: translateY(-3px);
+  -webkit-box-shadow: 0 0 6px #999;
+  box-shadow: 0 0 6px #999;
+  -webkit-transition: all 0.5s ease-out;
+  transition: all 0.5s ease-out;
+  color: #005293;
+  cursor: pointer;
+}
+.infoLeftList p:first-child {
+  float: left;
+  width: 20%;
+  font-size: 15px;
+  background: #044b79;
+  text-align: center;
+  color: #fff;
+  font-weight: bold;
+  padding: 4px 0px;
+  margin: 0 0 0 5px;
+}
+.infoLeftList p:last-child {
+  float: right;
+  width: 70%;
+  padding: 0 0 0 10px;
+}
+.infoLeftList p:last-child span:first-child {
+  float: left;
+  width: 90%;
+  font-size: 18px;
+}
+.infoLeftList p:last-child span:last-child {
+  float: left;
+  width: 90%;
+  font-size: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  margin: 5px 0 0 0;
+  color: #666;
+}
+.page {
+  text-align: center;
+  margin: 10px 0;
+}
+.infoRightList {
+  float: left;
+  width: 95%;
+  padding: 7px 0;
+  margin: 0 0 0 5px;
+}
+.infoRightList:nth-child(6) {
+  border-bottom: 1px solid #ccc;
+  padding: 0 0 17px 0;
+}
+.infoRightList:nth-child(7) {
+  padding: 15px 0 0 0;
+}
+.infoRightList:nth-child(11) {
+  border-bottom: 1px solid #ccc;
+  padding: 0 0 15px 0;
+}
+.infoRightList:hover p span:first-child {
+  -webkit-transform: translateY(-3px);
+  -ms-transform: translateY(-3px);
+  transform: translateY(-3px);
+  -webkit-box-shadow: 0 0 6px #999;
+  box-shadow: 0 0 6px #999;
+  -webkit-transition: all 0.5s ease-out;
+  transition: all 0.5s ease-out;
+  color: #005293;
+  cursor: pointer;
+}
+.infoRightList p {
+  font-size: 18px;
+}
+.infoRightList p span:first-child {
+  display: inline-block;
+  width: 70%;
+  margin: 0 20px 0 10px;
+}
+.infoRightList p span:last-child {
+  display: inline-block;
+  width: 21%;
+  text-align: center;
+  font-size: 16px;
+}
+</style>