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> 专题研讨<a class="more">MORE</a></div>
            <ul class="infoleftInfo">
              <li v-for="(item, index) in zhuantiList" :key="index">
                <p>{{ item.publish_time }}</p>
                <p>
                  <span class="textOver">{{ item.title }}</span>
                  <span>{{ item.content }}</span>
                </p>
              </li>
            </ul>
          </div>
          <div class="infoRight">
            <div class="lefttop"><span class="title"> |</span> 技术问答<a class="more">MORE</a></div>
            <ul class="infoRightInfo">
              <li v-for="(item, index) in jishuList" :key="index">
                <p>
                  <span class="textOver">{{ item.title }}</span
                  ><span>{{ item.publish_time }}</span>
                </p>
              </li>
            </ul>
          </div>
          <div class="downInfoleftList">
            <div class="lefttop"><span class="title"> |</span>行业研究<a class="more">MORE</a></div>
            <ul class="downInfoListInfo">
              <li v-for="(item, index) in hangyeList" :key="index">
                <p>
                  <span class="textOver">{{ item.title }}</span
                  ><span>{{ item.publish_time }}</span>
                </p>
              </li>
            </ul>
          </div>
          <div class="downInfoRightList">
            <div class="lefttop"><span class="title"> |</span>教育培训<a class="more">MORE</a></div>
            <ul class="downInfoListInfo">
              <li v-for="(item, index) in jiaoyuList" :key="index">
                <p>{{ item.publish_time }}</p>
                <p>
                  <span class="textOver">{{ item.title }}</span>
                  <span>{{ item.content }}</span>
                </p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: news } = createNamespacedHelpers('news');
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:
            '信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介信息简介',
        },
      ],
      jishuList: [
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
      ],
      hangyeList: [
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
        {
          title: '标题',
          date: '2020-02-02',
        },
      ],
      jiaoyuList: [
        {
          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() {
    this.searchInfo();
  },
  methods: {
    ...news(['query']),
    async searchInfo() {
      let res = await this.query({ skip: 0, limit: 4, column_name: '专题研讨' });
      if (this.$checkRes(res)) this.$set(this, `zhuantiList`, res.data);
      res = await this.query({ skip: 0, limit: 4, column_name: '技术问答' });
      if (this.$checkRes(res)) this.$set(this, `jishuList`, res.data);
      res = await this.query({ skip: 0, limit: 4, column_name: '行业研究' });
      if (this.$checkRes(res)) this.$set(this, `hangyeList`, res.data);
      res = await this.query({ skip: 0, limit: 4, column_name: '教育培训' });
      if (this.$checkRes(res)) this.$set(this, `jiaoyuList`, res.data);
    },
  },
  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;
}
.infoleft .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;
}
.infoleft .lefttop .more {
  float: right;
  font-size: 16px;
}
.infoleftInfo {
  padding: 0 10px;
}
.infoleftInfo li {
  float: left;
  width: 100%;
  border-bottom: 1px dashed #ccc;
  padding: 15px 0 15px 0;
  height: 71px;
}
.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;
  cursor: pointer;
}
.infoleftInfo li p:first-child {
  float: left;
  width: 17%;
  font-size: 15px;
  background: #044b79;
  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 {
  width: 589px;
  float: right;
  margin: 10px 0 10px 2px;
  height: 585px;
  box-shadow: 0 0 10px #2d64b3;
  overflow: hidden;
}
.infoRight .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;
}
.infoRight .lefttop .more {
  float: right;
  font-size: 16px;
}
.infoRightInfo {
  padding: 0 10px;
}
.infoRightInfo li {
  float: left;
  width: 100%;
  padding: 6px 0;
}
.infoRightInfo li:nth-child(6) {
  border-bottom: 1px solid #ccc;
  padding: 0 0 17px 0;
}
.infoRightInfo li:nth-child(7) {
  padding: 11px 0 0 0;
}
.infoRightInfo li: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;
}
.infoRightInfo li p {
  font-size: 18px;
}
.infoRightInfo li p span:first-child {
  display: inline-block;
  width: 80%;
}
.infoRightInfo li p span:last-child {
  display: inline-block;
  width: 20%;
  text-align: center;
  font-size: 16px;
}
.downInfoleftList {
  width: 570px;
  float: left;
  margin: 10px 0 10px 2px;
  height: 585px;
  box-shadow: 0 0 10px #2d64b3;
  overflow: hidden;
}
.downInfoleftList .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;
}
.downInfoleftList .lefttop .more {
  float: right;
  font-size: 16px;
}
.downInfoleftList {
  padding: 0 10px;
}
.downInfoleftList li {
  float: left;
  width: 100%;
  padding: 6px 0;
}
.downInfoleftList li:nth-child(6) {
  border-bottom: 1px solid #ccc;
  padding: 0 0 17px 0;
}
.downInfoleftList li:nth-child(7) {
  margin: 11px 0 0px 0;
}
.downInfoleftList li: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;
}
.downInfoleftList li p {
  font-size: 18px;
}
.downInfoleftList li p span:first-child {
  display: inline-block;
  width: 80%;
}
.downInfoleftList li p span:last-child {
  display: inline-block;
  width: 20%;
  text-align: center;
  font-size: 16px;
}
.downInfoRightList {
  width: 589px;
  float: right;
  margin: 10px 0 10px 2px;
  min-height: 585px;
  box-shadow: 0 0 10px #2d64b3;
  overflow: hidden;
}
.downInfoRightList .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;
}
.downInfoRightList .lefttop .more {
  float: right;
  font-size: 16px;
}
.downInfoRightList .downInfoListInfo {
  padding: 0 10px;
}
.downInfoRightList .downInfoListInfo li {
  float: left;
  width: 100%;
  border-bottom: 1px dashed #ccc;
  padding: 15px 0 15px 0;
}
.downInfoRightList .downInfoListInfo 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;
  cursor: pointer;
}
.downInfoRightList .downInfoListInfo li p:first-child {
  float: left;
  width: 17%;
  font-size: 15px;
  background: #044b79;
  text-align: center;
  color: #fff;
  font-weight: bold;
  padding: 4px 0px;
}
.downInfoRightList .downInfoListInfo li p:last-child {
  float: left;
  width: 80%;
  padding: 0 0 0 15px;
}
.downInfoRightList .downInfoListInfo li p:last-child span:first-child {
  float: left;
  width: 100%;
  font-size: 18px;
}
.downInfoRightList .downInfoListInfo 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;
}
</style>