web-test/src/views/hallList/zongjie.vue

<template>
  <div id="zongjie">
    <el-row>
      <div class="w_1200">
        <el-col :span="24" class="main">
          <el-col :span="24" class="top"> {{ zjinfo.top }}展会总结 </el-col>
          <el-col :span="24" class="info">
            <el-col :span="24" class="one">
              <p>展会由{{ zjinfo.name }}主办，{{ zjinfo.juban }}承办，{{ zjinfo.xieban }}协办，{{ zjinfo.fr }}提供技术支持，展会已经圆满结束。</p>
              <p>
                本次展会到会人数:{{ zjinfo.person }}人，其中特邀嘉宾{{ zjinfo.jiabin }}人。同时还邀请了{{ zjinfo.school }}所高校、研究机构的{{
                  zjinfo.zhuanjia
                }}位专家到参与在线对接。
              </p>
              <p>
                参加本次展会的项目共{{ zjinfo.xiang }}项。其中，有自于高校院所的项目成果共{{ zjinfo.shcoolxiang }}项；专利共{{
                  zjinfo.zhuanli
                }}项成熟度处于中试及产业化阶段的项目成果共{{ zjinfo.chengguo }}项。
              </p>
              <p>本次展会共征集到技术需求{{ zjinfo.xuqiu }}项，其中{{ zjinfo.jishu }}项技术需求来自展会主办地区。</p>
              <p>
                本次在线展会共实现技术对接{{ zjinfo.duijie }}次，达成意向{{ zjinfo.yixiang }}次，实现合作{{ zjinfo.hezuo }}次。此次展会还吸引了
                {{ zjinfo.fangke }}访客在线观摩，产生了强烈的反响。共收到鲜花{{ zjinfo.hua }}束，掌声{{ zjinfo.sheng }}次。
              </p>
            </el-col>
            <el-col :span="24" class="two">
              <el-col :span="24" class="tables">
                <span>到会人数</span>
                <span>{{ zjinfo.renshu }}人</span>
                <span> 参展项目</span>
                <span>{{ zjinfo.xiangmu }}项</span>
                <span>技术需求</span>
                <span>{{ zjinfo.xuqiu }}项</span>
              </el-col>
              <el-col :span="24" class="tables">
                <span>洽谈对接</span>
                <span>{{ zjinfo.renshu }}次</span>
                <span>产生意向</span>
                <span>{{ zjinfo.xiangmu }}次</span>
                <span>达成意向</span>
                <span>{{ zjinfo.xuqiu }}次</span>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'zongjie',
  props: {},
  components: {},
  data: () => ({
    zjinfo: {
      top: '计算中心',
      name: '吉林省计算中心',
      juban: '中科院长春分院',
      xieban: '中科院计算机网络信息中心和吉林省计算中心',
      fr: '长春福瑞科技有限公司',
      person: '300',
      jiabin: '20',
      school: '5',
      zhuanjia: '12',
      xiang: '12',
      shcoolxiang: '10',
      zhuanli: '20',
      chengguo: '46',
      xuqiu: '12',
      jishu: '23',
      duijie: '33',
      yixiang: '33',
      hezuo: '23',
      fangke: '1',
      hua: '1',
      sheng: '23',
      renshu: '234',
      xiangmu: '233',
      xuqiu: '123',
    },
  }),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 80%;
  margin: 0 auto;
}
.main {
  min-height: 600px;
  margin: 30px 0;
}
p {
  padding: 0;
  margin: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main .top {
  text-align: center;
  font-size: 30px;
  padding: 30px 0;
}
.main .info {
  font-size: 20px;
  padding: 0 200px;
}
.main .info .one {
}
.main .info .one p {
  line-height: 50px;
}
.main .info .two {
  text-align: center;
  margin: 20px 0 0 0;
}
.main .info .two .tables span:nth-child(1n) {
  background: #ffdc6d;
  text-align: center;
  width: 100px;
  display: inline-block;
  padding: 10px 0;
  margin: 0 10px 5px 0;
}
.main .info .two .tables span:nth-child(2n) {
  padding: 10px 0;
  text-align: center;
  background: #ffe0ba;
  display: inline-block;
  width: 100px;
}
// .main .info .two .tables span:nth-child(2){
//   background: red;
//   text-align: center;
//   width: 100px;
//   display: inline-block;
//   padding: 10px 0;
// }
// .main .info .two .tables span:nth-child(2) {
//   padding: 10px 0;
//   text-align: center;
//   background: #ccc;
//   display: inline-block;
//   width: 100px;
// }
// .main .info .two .tables span:nth-child(2) {
//   background: red;
//   text-align: center;
//   width: 100px;
//   display: inline-block;
//   padding: 10px 0;
// }
// .main .info .two .tables span:nth-child(2) {
//   padding: 10px 0;
//   text-align: center;
//   background: #ccc;
//   display: inline-block;
//   width: 100px;
// }
// .main .top p:last-child {
//   font-size: 30px;
//   color: #fff;
//   position: absolute;
//   width: 100%;
//   top: 135px;
// }
// .main .info {
//   min-height: 600px;
//   border: 1px solid red;
//   background: #fff;
//   padding: 30px 20px;
// }
// .main .info .context p {
//   font-size: 16px;
//   padding: 20px 0 20px 0;
// }

// .main .info .tables {
//   font-size: 16px;
// }

// .main .info .tables span::nth-child(n) {
//   background-color: red;
// }

// .main .info .tables span::nth-child(2n) {
//   background-color: blue;
// }
</style>