web-test/src/views/direct.vue

<template>
  <div id="hall" style="background-color: #fff">
    <el-col :span="24">
      <div class="livetop">
        <div class="w_1200">
          <!-- <el-col v-if="">
                <el-col v-else-if="">
                  <el-col else> -->
          <el-col :span="24" class="title">
            吉林省计算中心对接直播大厅
          </el-col>
          <el-col :span="24" class="zhuban">
            <span>主办方:</span>
            <span>吉林省计算中心直播大厅</span>
          </el-col>
          <el-col :span="24" class="num">
            <p>
              <span>同时在线</span>
              <span>1人</span>
            </p>
            <p>
              <span>特邀嘉宾</span>
              <span>1人</span>
            </p>
            <p>
              <span>洽谈合作</span>
              <span>1人</span>
            </p>
            <p>
              <span>达成意愿</span>
              <span>1人</span>
            </p>
            <p>
              <span>展示成果</span>
              <span>1人</span>
            </p>
            <p>
              <span>发布需求</span>
              <span>1人</span>
            </p>
          </el-col>
        </div>
      </div>
      <div class="w_1200">
        <el-col :span="24" class="livemain">
          <el-col :span="24" class="livevideo">
            <el-col :span="24" class="left">
              <el-col :span="24" class="title">
                <span style="color: rgb(255, 132, 0);">现场</span>
                <span>直播</span>
              </el-col>
              <el-col :span="24" class="video">
                直播换面
              </el-col>
            </el-col>
            <el-col :span="24" class="right">
              <el-col :span="24">
                <p>
                  <span>交易实况</span>
                </p>
              </el-col>
              <el-col :span="24">
                <ul>
                  <li v-for="(item, index) in directlist" :key="index">
                    <span>[{{ item.time }}]</span> <span>{{ item.name1 }}</span> <span>与</span><span>{{ item.name2 }}</span
                    ><span>实现对接</span>
                  </li>
                </ul>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="newimage">
            <el-image :src="superOne" style="width:100%;height:100px;position:relative;"> </el-image>
            <span>使用手册</span>
          </el-col>
          <el-col :span="24" class="context">
            <el-tabs type="border-card">
              <el-tab-pane label="找技术">
                <el-col :span="24" class="newsheight">
                  <ul>
                    <li v-for="(item, index) in jishulist" :key="index">
                      <el-col :span="14" class="lileft">
                        <p>
                          <el-popover placement="top-start" title="" width="500" trigger="hover">
                            <el-col :span="24" class="detail" v-if="policyInfo.totaltype">
                              <el-col :span="24" class="infoMess">
                                <el-col :span="24" class="info"> 名称:{{ policyInfo.name }} </el-col>
                                <el-col :span="24" class="info"> 类型：{{ policyInfo.product_type_name }} </el-col>
                                <el-col :span="24" class="info"> 单价:{{ policyInfo.price }} </el-col>
                                <el-col :span="24" class="info"> 单位:{{ policyInfo.priceunit }} </el-col>
                                <el-col :span="24">
                                  <span class="tupian"> 图片:</span>
                                  <el-col :span="6" class="infos" v-for="(acm, index) in policyInfo.image" :key="index">
                                    <span><el-image class="newclassimage" style="width:100px;height:100px" :src="acm.url"></el-image></span>
                                  </el-col>
                                </el-col>
                                <el-col :span="24" class="info"> 服务范围:{{ policyInfo.scope }} </el-col>
                                <el-col :span="24" class="info"> 描述{{ policyInfo.description }} </el-col>
                                <el-col :span="24" class="info"> 知识产权:{{ policyInfo.property }} </el-col>

                                <el-col :span="24" class="infos"> 简介:{{ policyInfo.introduction }} </el-col>

                                <el-col :span="24" class="info">
                                  <el-button type="primary" class="duijie" @click="technology(policyInfo.id)">对接</el-button>
                                </el-col>
                              </el-col>
                            </el-col>

                            <span class="title" slot="reference" @mouseover="hover(item)"> {{ item.name }}</span>
                          </el-popover>

                          <span><el-button class="duijie" @click="technologyBtn(item.id)">对接</el-button></span>
                        </p>

                        <p class="newp">
                          <span class="name"><i class="el-icon-user-solid"></i>{{ item.contact_user }}</span
                          ><span> <i class="el-icon-phone"></i>{{ item.contact_tel }}</span>
                        </p>
                        <p>
                          <span class="pspan">类型:{{ item.product_type_name }}</span
                          ><span class="pspan">研发阶段:{{ item.phase == '0' ? '阶段成果' : '最终成果' }}</span
                          ><span class="pspan">交易方式:{{ item.business == '0' ? '公用' : item.business == '1' ? '转让' : '竞价' }} </span
                          ><span class="pspan">交易价格:{{ item.price }}{{ item.priceunit }}</span>
                        </p>
                      </el-col>
                      <el-col :span="10" class="liright">
                        <p>摘要:{{ item.introduction }}</p>
                      </el-col>
                    </li>
                  </ul>
                </el-col>
              </el-tab-pane>
              <el-tab-pane label="找产品">
                <el-col :span="24" class="newsheight">
                  <ul class="demand">
                    <li class="demandList" v-for="(item, index) in demandList" :key="index">
                      <p>
                        <el-popover placement="top-start" title="" width="700" trigger="hover">
                          <el-col :span="24" class="detail" v-if="policyInfo.totaltype">
                            <el-col :span="24" class="infoMess">
                              <el-col :span="24" class="info"> 名称:{{ policyInfo.name }} </el-col>
                              <el-col :span="24" class="info"> 类型：{{ policyInfo.product_type_name }} </el-col>
                              <el-col :span="24" class="info"> 单价:{{ policyInfo.price }} </el-col>
                              <el-col :span="24" class="info"> 单位:{{ policyInfo.priceunit }} </el-col>
                              <el-col :span="24">
                                <span class="tupian"> 图片:</span>
                                <el-col :span="6" class="info" v-for="(acm, index) in policyInfo.image" :key="index">
                                  <span><el-image class="newclassimage" style="width:100px;height:100px" :src="acm.url"></el-image></span>
                                </el-col>
                              </el-col>
                              <el-col :span="24" class="info"> 服务范围:{{ policyInfo.scope }} </el-col>
                              <el-col :span="24" class="infos"> 描述:{{ policyInfo.description }} </el-col>
                              <el-col :span="24" class="info"> 知识产权:{{ policyInfo.property }} </el-col>

                              <el-col :span="24" class="infos"> 简介:{{ policyInfo.introduction }} </el-col>

                              <el-col :span="24" class="info">
                                <el-button type="primary" class="duijie" @click="technology(policyInfo.id)">对接</el-button>
                              </el-col>
                            </el-col>
                          </el-col>

                          <span class="title" slot="reference" @mouseover="hover(item)"> {{ item.name }}</span>
                        </el-popover>
                        <el-button type="primary" size="mini" @click="technologyBtn(item.id)" class="duijie">对接</el-button>
                      </p>
                      <p>
                        <span>研发阶段：{{ item.phase == '0' ? '阶段成果' : '最终成果' }}</span>
                        <span>发布时间：{{ item.meta | getDate }}</span>
                      </p>
                      <p>
                        <span>需求类型：{{ item.product_type_name }}</span>
                        <span>{{ item.address }}</span>
                      </p>
                    </li>
                  </ul>
                </el-col>
              </el-tab-pane>
              <el-tab-pane label="找服务">
                <el-col :span="24" class="newsheight">
                  <ul class="service">
                    <li class="serviceList" v-for="(item, index) in serviceList" :key="index">
                      <p class="company">
                        <el-popover placement="top-start" title="" width="700" trigger="hover">
                          <el-col :span="24" class="detail" v-if="policyInfo.totaltype">
                            <el-col :span="24" class="infoMess">
                              <el-col :span="24" class="info"> 名称:{{ policyInfo.name }} </el-col>
                              <el-col :span="24" class="info"> 类型：{{ policyInfo.product_type_name }} </el-col>
                              <el-col :span="24" class="info"> 单价:{{ policyInfo.price }} </el-col>
                              <el-col :span="24" class="info"> 单位:{{ policyInfo.priceunit }} </el-col>
                              <el-col :span="24">
                                <span class="tupian"> 图片:</span>
                                <el-col :span="6" class="infos" v-for="(acm, index) in policyInfo.image" :key="index">
                                  <span><el-image class="newclassimage" style="width:100px;height:100px" :src="acm.url"></el-image></span>
                                </el-col>
                              </el-col>
                              <el-col :span="24" class="info"> 服务范围:{{ policyInfo.scope }} </el-col>
                              <el-col :span="24" class="info"> 描述{{ policyInfo.description }} </el-col>
                              <el-col :span="24" class="info"> 知识产权:{{ policyInfo.property }} </el-col>

                              <el-col :span="24" class="infos"> 简介:{{ policyInfo.introduction }} </el-col>

                              <el-col :span="24" class="info">
                                <el-button type="primary" class="duijie" @click="technology(policyInfo.id)">对接</el-button>
                              </el-col>
                            </el-col>
                          </el-col>
                          <span class="title" slot="reference" @mouseover="hover(item)"> {{ item.name }}</span>
                        </el-popover>
                      </p>
                      <div class="serviceDown">
                        <el-image :src="item.image[0].url"></el-image>
                        <p>联系人:{{ item.contact_user }}</p>
                        <p>
                          <span>服务类型：</span>
                          <span class="type2">{{ item.product_type_name }}</span>
                        </p>
                        <p>电话:{{ item.contact_tel }}</p>
                        <p>单价:{{ item.price }} 单位:{{ item.priceunit }}</p>
                        <p>知识产权:{{ item.property }}</p>
                      </div>
                    </li>
                  </ul>
                </el-col>
              </el-tab-pane>
              <el-tab-pane label="找专家">
                <el-col :span="24" class="newsheight">
                  <ul class="expert">
                    <li class="expertList" v-for="(item, index) in expertList" :key="index">
                      <el-image :src="item.imgpath"></el-image>
                      <div>
                        <p>
                          <el-popover placement="top-start" title="" width="700" trigger="hover">
                            <el-col :span="24" class="infoMess">
                              <el-col :span="24" class="info"> 专家名称:{{ policyInfo.name }} </el-col>
                              <el-col :span="24" class="info"> <el-image style="width:100px;height:100px" :src="policyInfo.imgpath"></el-image></el-col>
                              <el-col :span="24" class="info"> 民族:{{ policyInfo.nation }} </el-col>
                              <el-col :span="24" class="info"> 学术成就:{{ policyInfo.achievement }} </el-col>
                              <el-col :span="24" class="info"> 身份证号:{{ policyInfo.cardnumber }} </el-col>
                              <el-col :span="24" class="info"> 毕业院校:{{ policyInfo.school }} </el-col>
                              <el-col :span="24" class="info"> 学位:{{ policyInfo.degree }} </el-col>
                              <el-col :span="24" class="info"> 电子邮箱:{{ policyInfo.email }} </el-col>
                              <el-col :span="24" class="info"> 学历:{{ policyInfo.eduback }} </el-col>
                              <el-col :span="24" class="info"> 职务:{{ policyInfo.position }} </el-col>
                              <el-col :span="24" class="info"> 从事专业:{{ policyInfo.professional }} </el-col>
                              <el-col :span="24" class="info"> 手机号:{{ policyInfo.phone }} </el-col>
                              <el-col :span="24" class="infos"> 业务工作简介:{{ policyInfo.job_profile }} </el-col>
                              <el-col :span="24" class="info">
                                <el-button type="primary" class="duijie" @click="duizhuanjia(policyInfo.id)">对接</el-button>
                              </el-col>
                            </el-col>
                            <span class="title" slot="reference" @mouseover="zhuanjia(item)"> {{ item.name }}</span>
                          </el-popover>
                          <span>{{ item.nation }}</span>
                        </p>
                        <p>职务：{{ item.position }}</p>
                        <p>从事领域：{{ item.field }}</p>
                      </div>
                    </li>
                  </ul>
                </el-col>
              </el-tab-pane>
            </el-tabs>
          </el-col>
          <el-col :span="24" class="newimage2">
            <el-image :src="two" style="width:100%;height:100px;position:relative;"> </el-image>
          </el-col>
          <div class="fangtan">
            <el-col :span="7" class="jiabin">
              <p class="jiabintop">
                <span>嘉宾访谈</span>
                <el-link :underline="false">MORE</el-link>
              </p>
              <div class="jiabinlist">
                <ul>
                  <li v-for="(ref, index) in jiabinlist" :key="index">
                    <img :src="ref.url" />
                    <p>
                      <span class="textOver">{{ ref.title }}</span>
                      <span>{{ ref.date }}</span>
                      <span class="text">{{ ref.context }} </span>
                    </p>
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col :span="7" class="jiabin luyan">
              <p class="jiabintop luyanTop">
                <span>项目路演</span>
                <el-link :underline="false">MORE</el-link>
              </p>
              <div class="luyanList">
                <ul>
                  <li v-for="(item, index) in luyanList" :key="index">
                    <p>
                      <span>{{ item.title }}</span>
                      <span>浏览:{{ item.num }}</span>
                    </p>
                    <p>
                      <span>所在地区：{{ item.city }} | 所属行业：{{ item.hy }}</span>
                      <span>项目融资方式：{{ item.xurz }}</span>
                    </p>
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col :span="7" class="chat">
              <chat></chat>
            </el-col>
          </div>
        </el-col>
      </div>
    </el-col>

    <div class="pz_down">
      <live-foot></live-foot>
    </div>
    <!-- <div class="suspenInfo">
      <el-link :underline="false" @click="clickBtn()" target="_blank">直播中心</el-link>
    </div> -->
  </div>
</template>

<script>
import liveFoot from '@/layout/live/foot.vue';
import chat from '@/components/parts/chat.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: mapProduct } = createNamespacedHelpers('marketproduct');
const { mapActions: market } = createNamespacedHelpers('market');
const { mapActions: dock } = createNamespacedHelpers('dock');
const { mapActions: talentExperts } = createNamespacedHelpers('talentExperts');

import _ from 'loadsh';
export default {
  name: 'hall',
  props: {},
  filters: {
    getDate(meta) {
      let createdAt = _.get(meta, `createdAt`);
      let date = new Date(createdAt)
        .toLocaleDateString()
        .replace('/', '-')
        .replace('/', '-');
      return date;
    },
  },
  components: {
    chat,
    liveFoot,
  },
  data: () => ({
    visible: false,
    dialogVisible: false,
    dialogVisibles: false,
    dialogVisibless: false,
    dialogVisiblesss: false,

    directlist: [
      {
        time: '2019-03-05',
        name1: '中科院宁波先进制造所',
        name2: '深圳市华尔威体育用品',
      },
      {
        time: '2019-03-05',
        name1: '中科院宁波先进制造所',
        name2: '深圳市华尔威体育用品',
      },
      {
        time: '2019-03-05',
        name1: '中科院宁波先进制造所',
        name2: '深圳市华尔威体育用品',
      },
      {
        time: '2019-03-05',
        name1: '中科院宁波先进制造所',
        name2: '深圳市华尔威体育用品',
      },
      {
        time: '2019-03-05',
        name1: '中科院宁波先进制造所',
        name2: '深圳市华尔威体育用品',
      },
      {
        time: '2019-03-05',
        name1: '中科院宁波先进制造所',
        name2: '深圳市华尔威体育用品',
      },
      {
        time: '2019-03-05',
        name1: '中科院宁波先进制造所',
        name2: '深圳市华尔威体育用品',
      },
      {
        time: '2019-03-05',
        name1: '中科院宁波先进制造所',
        name2: '深圳市华尔威体育用品',
      },
    ],

    jiabinlist: [
      {
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        title: '测试title',
        date: '2017-03-04',
        context: '1231232121212121212121212121212121212121231111111111111111111111111111111111111111121212121212121212121212121212121212121212121212121321',
      },
      {
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        title: '测试title',
        date: '2017-03-04',
        context: '1231232121212121212121212121212121212121231111111111111111111111111111111111111111121212121212121212121212121212121212121212121212121321',
      },
      {
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        title: '测试title',
        date: '2017-03-04',
        context: '1231232121212121212121212121212121212121231111111111111111111111111111111111111111121212121212121212121212121212121212121212121212121321',
      },

      {
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        title: '测试title',
        date: '2017-03-04',
        context: '1231232121212121212121212121212121212121231111111111111111111111111111111111111111121212121212121212121212121212121212121212121212121321',
      },
    ],
    policyInfo: {},
    jishulist: [],
    technologyList: [],
    // 找产品
    demandList: [],
    // 找服务
    serviceList: [],
    // 找专家
    expertList: [],

    // 路演
    luyanList: [
      {
        title: '项目路演',
        num: '1234',
        city: '吉林省',
        hy: '所属行业',
        xurz: '股权融资',
      },
      {
        title: '项目路演',
        num: '1234',
        city: '吉林省',
        hy: '所属行业',
        xurz: '股权融资',
      },
      {
        title: '项目路演',
        num: '1234',
        city: '吉林省',
        hy: '所属行业',
        xurz: '股权融资',
      },
      {
        title: '项目路演',
        num: '1234',
        city: '吉林省',
        hy: '所属行业',
        xurz: '股权融资',
      },
    ],

    superOne: require('@/assets/live/main1.png'),
    two: require('@/assets/live/top_bg.png'),

    superOnes: require('@/assets/live/测试图片.jpg'),
  }),
  created() {
    this.searchInfo();
  },
  methods: {
    ...mapProduct({ mapProductQuery: 'query' }),
    ...market({ marketFetch: 'fetch' }),
    ...dock({ dockQuery: 'query' }),
    ...talentExperts({ expertQuery: 'query' }),
    async searchInfo() {
      let res = await this.mapProductQuery({ skip: 0, limit: 4, totaltype: '0' });
      console.log(res);
      if (this.$checkRes(res)) this.$set(this, `jishulist`, res.data);
      res = await this.mapProductQuery({ skip: 0, limit: 4, totaltype: '1' });
      console.log(res);
      if (this.$checkRes(res)) this.$set(this, `demandList`, res.data);
      res = await this.mapProductQuery({ skip: 0, limit: 4, totaltype: '2' });
      console.log(res);

      if (this.$checkRes(res)) this.$set(this, `serviceList`, res.data);
      console.log(res);
      res = await this.expertQuery({ skip: 0, limit: 4 });
      console.log(res);
      if (this.$checkRes(res)) this.$set(this, `expertList`, res.data);
    },

    onclickjs(item) {
      console.log(item);
      this.$set(this, `policyInfo`, item);
    },
    //划过展示
    hover: function(item) {
      this.$set(this, `policyInfo`, item);
      console.log(item);
    },

    zhuanjia(item) {
      console.log(item);
      this.dialogVisible = true;
      this.$set(this, `policyInfo`, item);
    },

    //对接
    technologyBtn(id) {
      console.log(id);
      this.$router.push({ path: '/live/hall/dock/dockDetail', query: { id: id } });
    },
    technology(id) {
      this.$router.push({ path: '/live/hall/dock/dockDetail', query: { id: id } });
    },
    duizhuanjia(id) {
      this.$router.push({ path: '/live/hall/dock/zhuanjiaDetail', query: { id: id } });
    },

    //直播中心
    clickBtn() {
      this.$router.push({ path: '/live/liveList' });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
  },
  computed: {
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  margin: 0 auto;
  width: 1200px;
}

.livetop {
  width: 100%;
  height: 487px;
  overflow: hidden;
  background-image: url(../assets/live/top_3.png);
}
.livetop .title {
  text-align: center;
  color: #fff;
  position: relative;
  width: 100%;
  font-size: 45px;
  top: 65px;
}
.livetop .zhuban {
  text-align: center;
  color: #fff;
  position: relative;
  width: 100%;
  font-size: 25px;
  top: 140px;
}
.livetop .zhuban span:first-child {
  font-weight: 700;
}
.livetop .num {
  position: relative;
  top: 190px;
  color: #fff;
}
.livetop .num p {
  float: left;
  width: 15%;
  background: #fff;
  margin: 0 14px 0 0 !important;
  color: #000;
  height: 50px;
  line-height: 50px;
  border-radius: 30px;
}
.livetop .num p span:first-child {
  display: inline-block;
  width: 56%;
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  background: red;
  border-radius: 30px;
  color: #fff;
  font-weight: 700;
}
.livetop .num p span:last-child {
  display: inline-block;
  width: 42%;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}
.livemain {
  position: relative;
  top: -55px;
  z-index: 999;
}
.livemain .livevideo {
  height: 470px;
  overflow: hidden;
}
.livemain .livevideo .left {
  float: left;
  width: 50%;
  height: 460px;
  overflow: hidden;
  border: 5px solid #000;
  background: #fff;
  border-radius: 5px;
}
.livemain .livevideo .left .title {
  padding: 0 10px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  font-weight: 700;
}
p {
  margin: 0 !important;
}
.livemain .livevideo .left .video {
  height: 400px;
  margin: 0 10px 10px 10px;
  border: 2px solid #ccc;
  width: 97%;
}
.livemain .livevideo .right {
  width: 50%;
  height: 460px;
  overflow: hidden;
  background-color: #6e042c;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow: hidden;
}
.livemain .livevideo .right p {
  color: #fff;
  width: 100%;
  float: left;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  background: #fe950e;
}
.right ul {
  padding: 0;
  margin: 0;
}
.right ul li {
  height: 43px;
  line-height: 40px;
  font-size: 14px;
  color: #fff;
  border-bottom: 1px solid #ff8500;
  padding: 0 0 0 10px;
  margin: 0 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.right ul li span:first-child {
  color: #ff8500;
}

.right ul li span {
  margin: 0 20px 0 0;
}

.newimage {
  margin: 20px 0 0 0;
  background-size: 100% * 80px;
  background-size: cover;
  height: 100px;
  width: 100%;
  margin-bottom: 5px;
  position: relative;
}
.newimage span {
  position: absolute;
  top: 30px;
  left: 46%;
  color: #ffffff;
  font-size: 36px;
  // position: relative;
  // top: 30px;
  z-index: 999;
}
/deep/.el-tabs--border-card {
  background: #fff;
  border: 1px solid #c20808;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}

/deep/.el-tabs--border-card > .el-tabs__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #c20808;
  border-right: 1px solid #c20808;
  border-left: 1px solid #c20808;
  margin: 0;
}

/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  background-color: #fff;
  border-right-color: #c20808;
  border-left-color: #c20808;
  color: #ff8500;
}
.context {
  margin: 30px 0 0 0;
}
.context ul {
  padding: 0;
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}
.context ul li {
  margin: 0 20px;
  overflow: hidden;
  // white-space: nowrap;
  text-overflow: ellipsis;
  border-bottom: 1px solid #ff8500;
  height: 150px;
}

/deep/.el-tabs--border-card > .el-tabs__content {
  padding: 0px 15px 0 0;
}
.context ul li p .title {
  display: inline-block;
  width: 85%;
  font-size: 18px;
}

.context ul li p .title:hover {
  color: #ff8500;
  font-weight: bold;
}
.lileft {
  width: 60%;
}
.liright {
  border: 1px solid #c20808;
  height: 119px;
  margin: 15px 0 15px 0;
  width: 40%;
}
.liright p {
  float: left;
  width: 96%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  padding: 10px;
  height: 67px;
}
.duijie {
  color: #fff;
  background-color: #ff8500;
  text-align: center;
  padding: 10px 15px 10px 15px;
  margin: 10px 0 0 0;
}
.duijie:hover {
  background-color: #0279d5;
}

.newp {
  font-size: 16px;
  height: 50px;
  margin: 0 0 10px 0 !important;
  line-height: 50px;
}

.newp i {
  color: #ff8500;
}
.name {
  display: inline-block;
  width: 430px;
  font-size: 16px;
}
.pspan {
  display: inline-block;
  width: 25%;
  font-size: 16px;
}

.fangtan {
  float: left;
  height: 525px;
  overflow: hidden;
}

.fangtan .jiabin {
  width: 31%;
  border-radius: 5px;
  box-shadow: 0 0 5px #c20808;
  padding: 0 10px 0px 10px;
  margin: 4px 15px 0 3px;
  height: 515px;
}

.jiabin .jiabintop {
  height: 30px;
  line-height: 30px;
}

.jiabin .jiabintop span {
  display: inline-block;
  padding: 0 10px;
  height: 30px;
  color: #fff;
  background-color: #ff8500;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.jiabin .jiabintop a {
  float: right;
}

.jiabin .jiabinlist ul li {
  float: left;
  width: 100%;
  border-bottom: 1px dashed #ff8500;
  padding: 20px 0;
}

.jiabin .jiabinlist ul li:last-child {
  border-bottom: none;
  float: left;
  width: 100%;
}

.jiabin .jiabinlist ul li:hover p span:first-child {
  color: #0e90d2;
}

.jiabin .jiabinlist ul li img {
  float: left;
  width: 20%;
  height: 80px;
}

.jiabin .jiabinlist ul li p {
  float: left;
  width: 71%;
  padding: 0 0 0 10px;
}

.jiabin .jiabinlist ul li p span:first-child {
  float: left;
  width: 65%;
  font-size: 18px;
}

.jiabin .jiabinlist ul li p span:nth-child(2n) {
  float: left;
  width: 35%;
  font-size: 14px;
  text-align: right;
  padding: 2px 0 0 0;
}

.jiabin .jiabinlist ul li p span:last-child {
  float: left;
  width: 100%;
  font-size: 14px;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.fangtan .luyan {
  width: 33%;
  border-radius: 5px;
  box-shadow: 0 0 5px #c20808;
  padding: 0 10px 0px 10px;
  margin: 4px 10px 0 3px;
  height: 515px;
  overflow: hidden;
}

.luyanList {
  padding: 10px 0 0 0;
}

.luyanList ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.luyanList ul li {
  float: left;
  border-radius: 10px;
  padding: 5px 10px;
  margin: 0 0 10px 0;
  height: 95px;
  border: 1px solid #ff8500;
}

.luyanList ul li:nth-child(5) {
  border: 1px solid #ff8500;
  float: left;
  border-radius: 10px;
  padding: 5px 10px;
  margin: 0 0 22px 0;
  // width: 96%;
  height: 95px;
}

.luyanList ul li:hover {
  box-shadow: 0 0 5px red;
}

.luyanList ul li p:first-child span:first-child {
  font-size: 18px;
  float: left;
  width: 80%;
}

.luyanList ul li p:first-child span:last-child {
  float: left;
  width: 20%;
  color: #c20808;
}

.luyanList ul li p:last-child span {
  float: left;
  width: 100%;
  padding: 5px 0;
  font-size: 14px;
  color: #666;
}
.chat {
  float: left;
  width: 33%;
}
// 找产品
.demand {
  overflow: hidden;
  height: 547px;
  padding: 0;
  margin: 0;
  -webkit-margin-before: 0;
  margin-block-start: 0;
  -webkit-margin-after: 0;
  margin-block-end: 0;
  -webkit-margin-start: 0;
  margin-inline-start: 0;
  -webkit-margin-end: 0;
  margin-inline-end: 0;
  -webkit-padding-start: 0;
  padding-inline-start: 0;
}

.demand .demandList {
  float: left;
  width: 50%;
  border-bottom: 1px solid #ccc;
  margin: 0 0 20px 0;
  text-indent: 10px;
  font-size: 12px;
  padding: 10px 0 0 0;
}
.demandList:hover p:first-child {
  color: #005293;
  font-weight: bold;
  font-size: 16px !important;
}
.demand .demandList p:first-child {
  float: left;
  width: 100%;
  font-weight: bold;
  font-size: 16px !important;
}
.demand .demandList p:nth-child(2) {
  float: left;
  padding: 10px 0;
  width: 100%;
}
.demand .demandList p:nth-child(2) span:first-child {
  display: inline-block;
  width: 50%;
  text-align: left;
}
.demand .demandList p:nth-child(2) span:last-child {
  display: inline-block;
  width: 45%;
  text-align: left;
}
.demand .demandList p:last-child {
  float: left;
  font-size: 16px;
  padding: 10px 0;
  width: 100%;
}
.demand .demandList p:last-child span:first-child {
  display: inline-block;
  width: 50%;
  text-align: left;
}
.demand .demandList p:last-child span:last-child {
  display: inline-block;
  width: 50%;
  text-align: left;
}
// 找服务
.service {
  float: left;
  height: 518px;
  width: 100%;
}
.service .serviceList {
  float: left;
  width: 29%;
  border: 1px solid #ccc;
  margin: 10px 24px;
  height: 181px;
}

/deep/.el-tabs--border-card > .el-tabs__content {
  padding: 0;
}
.service .serviceList:hover {
  box-shadow: 0 0 10px #ccc;
}
.service .serviceList .company {
  font-size: 18px;
  padding: 10px;
}
.service .serviceList .serviceDown {
  float: left;
  width: 100%;
}
.service .serviceList .serviceDown .el-image {
  float: left;
  width: 20%;
  height: 80px;
  margin: 10px;
}
.service .serviceList .serviceDown p {
  float: left;
  width: 65%;
  padding: 1px 0 0 0;
}
.service .serviceList .serviceDown p button {
  float: left;
  width: 50%;
  border: 1px solid #ddd;
  height: 35px;
  color: #39c;
  margin: 0 0 0 15px;
  background-color: #fff;
}
.service .serviceList .serviceDown p .type1 {
  float: left;
  width: 100%;
  padding: 15px 0 3px 20px;
}
.service .serviceList .serviceDown p .type2 {
  color: darkorange;
}
.service .serviceList .btn {
  font-size: 16px;
  float: left;
  width: 100%;
  padding: 9px 0;
  text-align: center;
  color: #fff;
  background: orangered;
}
// 找专家
// .expert {
// }
.expert .expertList {
  height: 117px;
  float: left;
  width: 48%;
  border: 1px solid #ccc;
  margin: 10px 14px 10px 13px;
  padding: 5px 0 5px 0;
  overflow: hidden;
}
.expert .expertList:hover {
  box-shadow: 0 0 5px green;
}
.expert .expertList:nth-child(2n) {
  margin: 10px 0 10px 0;
}
.expert .expertList .el-image {
  float: left;
  width: 100px;
  height: 100px;
  border-radius: 90px;
}
.expert .expertList div {
  float: left;
  width: 82%;
}
.expert .expertList div p:first-child {
  float: left;
  width: 100%;
  padding: 5px 0 10px 0;
}
.expert .expertList div p:first-child span:first-child {
  float: left;
  width: 50%;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}
.expert .expertList div p:first-child span:last-child {
  float: left;
  width: 50%;
  font-size: 16px;
}
.expert .expertList div p:nth-child(2) {
  float: left;
  width: 100%;
  font-size: 16px;
  color: #666;
  padding: 0 0 5px 0;
}
.expert .expertList div p:last-child {
  float: left;
  width: 100%;
  font-size: 16px;
  color: #666;
  padding: 5px 0 0 0;
}

.suspenInfo {
  position: fixed;
  background: #0279d5;
  width: 100px;
  height: 100px;
  z-index: 999;
  left: 13%;
  top: 60%;
  border-radius: 20px;
  box-shadow: 2px 2px 2px #055c9f;
  text-align: center;
  line-height: 100px;
}
/deep/.suspenInfo .el-link {
  font-size: 20px;
  color: #fff;
  font-weight: bold;
}
.suspenInfo:hover {
  background: #f60;
}

.detail {
  min-height: 398px;
  line-height: 33px;
}
/deep/.el-dialog__body {
  padding: 0 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
.newsheight {
  height: 604px;

  overflow: hidden;
}
.newimage2 {
  margin: 30px 0 30px 0;
}
.newimage2 span {
  position: absolute;
  top: 30px;
  left: 650px;
  color: #ffffff;
  font-size: 36px;
  // position: relative;
  // top: 30px;
  z-index: 999;
}
.headimage {
  height: 100px;
  width: 100px;
}
.annius {
  text-align: center;
}
.newclassimage {
  float: left;
}
.tupian {
  float: left;
}
.infos {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>