web-live/src/views/technical/index.vue

<template>
  <div id="index">
    <div class="w_0100">
      <div class="w_1200">
        <div class="technicalmain">
          <div class="infoleft">
            <div class="lefttop"><span class="title"> |</span> 专题研讨<span class="MORE">MORE</span></div>
            <ul class="infoleftInfo">
              <li v-for="(item, index) in zhuantiList" :key="index">
                <p>{{ item.date }}</p>
                <p>
                  <span class="textOver">{{ item.title }}</span>
                  <span>{{ item.brief }}</span>
                </p>
              </li>
            </ul>
          </div>
          <!-- <div class="inforight">
            <div class="lefttop"><span class="title"> |</span> 技术问答<span class="MORE">MORE</span></div>
            <div>
              <ul>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="infoleft">
            <div class="lefttop"><span class="title"> |</span> 行业研究<span class="MORE">MORE</span></div>
            <div>
              <ul>
                <li>
                  <div class="times">
                    <span><font>17</font></span
                    ><font>2020.04</font>
                  </div>
                  <p class="infotitle">副校长杨斌参加机械70与机械82团支部联合械82团支部联合械82团支部联合</p>
                  <div class="infocontext">副校长杨斌参加机副校长杨斌参加副校长杨斌参加副校长杨斌参加械70与机械82团支部联合械82团支部联合械82团支部联合</div>
                </li>
                <li>
                  <div class="times">
                    <span><font>17</font></span
                    ><font>2020.04</font>
                  </div>
                  <p class="infotitle">副校长杨斌参加机械70与机械82团支部联合械82团支部联合械82团支部联合</p>
                  <div class="infocontext">副校长杨斌参加机副校长杨斌参加副校长杨斌参加副校长杨斌参加械70与机械82团支部联合械82团支部联合械82团支部联合</div>
                </li>
                <li>
                  <div class="times">
                    <span><font>17</font></span
                    ><font>2020.04</font>
                  </div>
                  <p class="infotitle">副校长杨斌参加机械70与机械82团支部联合械82团支部联合械82团支部联合</p>
                  <div class="infocontext">副校长杨斌参加机副校长杨斌参加副校长杨斌参加副校长杨斌参加械70与机械82团支部联合械82团支部联合械82团支部联合</div>
                </li>
                <li>
                  <div class="times">
                    <span><font>17</font></span
                    ><font>2020.04</font>
                  </div>
                  <p class="infotitle">副校长杨斌参加机械70与机械82团支部联合械82团支部联合械82团支部联合</p>
                  <div class="infocontext">副校长杨斌参加机副校长杨斌参加副校长杨斌参加副校长杨斌参加械70与机械82团支部联合械82团支部联合械82团支部联合</div>
                </li>
                <li>
                  <div class="times">
                    <span><font>17</font></span
                    ><font>2020.04</font>
                  </div>
                  <p class="infotitle">副校长杨斌参加机械70与机械82团支部联合械82团支部联合械82团支部联合</p>
                  <div class="infocontext">副校长杨斌参加机副校长杨斌参加副校长杨斌参加副校长杨斌参加械70与机械82团支部联合械82团支部联合械82团支部联合</div>
                </li>
                <li>
                  <div class="times">
                    <span><font>17</font></span
                    ><font>2020.04</font>
                  </div>
                  <p class="infotitle">副校长杨斌参加机械70与机械82团支部联合械82团支部联合械82团支部联合</p>
                  <div class="infocontext">
                    副校长杨斌参加机副校长杨斌参加副校长杨杨斌参加副校长杨斌参加副校长杨斌参加械70与机械82团支部联合械82团支部联合械82团支部联合
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="inforight">
            <div class="lefttop"><span class="title"> |</span> 技术问答<span class="MORE">MORE</span></div>
            <div>
              <ul>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
                <li>
                  <p class="rightspan">吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖 吉林大学5种出版物、2个编辑部、3人获第四届吉林新闻出版奖</p>
                  <p class="righttime">2020-05-05</p>
                </li>
              </ul>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'index',
  props: {},
  components: {},
  data: () => {
    return {
      zhuantiList: [
        {
          date: '2020-02-02',
          title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
          brief:
            '信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介',
        },
        {
          date: '2020-02-02',
          title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
          brief:
            '信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介',
        },
        {
          date: '2020-02-02',
          title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
          brief:
            '信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介',
        },
        {
          date: '2020-02-02',
          title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
          brief:
            '信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介',
        },
        {
          date: '2020-02-02',
          title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
          brief:
            '信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介',
        },
      ],
    };
  },
  created() {},
  methods: {},
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.infoleft {
  width: 589px;
  float: left;
  margin: 10px 0 10px 2px;
  min-height: 585px;
  box-shadow: 0 0 10px #2d64b3;
  overflow: hidden;
}
.lefttop {
  font-size: 18px;
  width: 96%;
  height: 41px;
  line-height: 35px;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  bottom: 1px;
  margin: 10px 10px 10px 10px;
}
.infoleftInfo {
  padding: 0 10px;
}
.infoleftInfo li {
  float: left;
  width: 100%;
  border-bottom: 1px dashed #ccc;
  padding: 15px 0 15px 0;
}
.infoleftInfo li: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;
}
.infoleftInfo li p:first-child {
  float: left;
  width: 17%;
  font-size: 16px;
  background: red;
  text-align: center;
  color: #fff;
  font-weight: bold;
  padding: 4px 0px;
}
.infoleftInfo li p:last-child {
  float: left;
  width: 80%;
  padding: 0 0 0 15px;
}
.infoleftInfo li p:last-child span:first-child {
  float: left;
  width: 100%;
  font-size: 18px;
}
.infoleftInfo li p:last-child span:last-child {
  float: left;
  width: 100%;
  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;
}
.inforight li {
  text-indent: 5px;
  padding: 10px 0;
  height: 19px;
  margin: 10px;
  font-size: 18px;
  color: #666;
}

.infotitle {
  width: 472px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
}
.infotitle:hover {
  -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;
}

.infocontext {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.rightspan {
  float: left;
  width: 460px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.righttime {
  float: right;
}

.rightspan:hover {
  -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;
}
</style>