sky-web/src/views/Home.vue

<template>
  <div class="container">
    <banner></banner>
    <!-- 关于我们 -->
    <div class="about w">
      <div class="leftbox">
        <titles type="1" title="本刊介绍" en="About us"></titles>
        <cover class="cover"></cover>
        <div class="abouttext">
          <!-- <h4>本刊介绍：</h4> -->
          <!-- <p>
            {{ pageitem && pageitem.title }}
          </p> -->
          <!-- <p v-html="pageitem && pageitem.slug"></p> -->
          <p>《经济纵横》是吉林省社会科学院（社科联）主管、主办的经济学综合性学术期刊。创办于1985年，月刊，每期约20万字。</p>
          <p>《经济纵横》被确定为国家社科基金资助期刊（经济学类）。同时，还是中文社会科学引文索引（CSSCI）来源期刊、全国中文核心期刊、中国人文社会科学核心期刊。近年来，多次被列入中国人民大学书报资料中心“复印报刊资料”重要转载来源期刊。2016年，被吉林省新闻出版广电局评为“吉林省一级期刊”“吉林省社科期刊30强”。</p>
          <p>创刊以来，《经济纵横》一直以马克思主义为指导，重点打造马克思主义政治经济学品牌栏目，宣传推广马克思主义政治经济学创新发展成果，引领正确舆论导向，刊发了大量著名经济学家的精品力作，形成了长期关注马克思主义政治经济学创新成果的鲜明特色。同时，坚持理论联系实际的学风，瞄准经济学发展的前沿，跟踪改革开放中的热点和难点问题，组织开展学术探讨和交流，刊发了大批极具学术含量、极具影响力的文章，在学术界的认知度屡创新高。《经济纵横》每年都有几十篇文章被《新华文摘》、《中国社会科学文摘》、《人大复印报刊资料》等权威期刊转载或摘发。</p>
          <b class="bkjs" @click="pagejump(pageitem)">→</b>
        </div>
      </div>
      <bottons class="bottons"></bottons>
    </div>
    <!-- 本期要目 -->
    <div class="news w">
      <titles type="9" title="本期要目" en="Directory" @jump="jumpList"></titles>
      <div class="contentList">
        <div class="imngbox" v-for="(item, index) in directorylist" :key="index" @click="jump(item, '9')">
          <img :src="item.thumbnail || imguri" alt="本期要目" class="left">
          <div class="right">
            <p class="title">{{ item.title }}</p>
            <p class="date">{{ item.date }}</p>
            <!-- <p class="text" v-html="item && item.slug"></p> -->
            <!-- <p class="text">{{ item.slug }}</p> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 党建园地 -->
    <!-- <div class="directory w">
      <titles type="007" title="党建园地" en="Building" @jump="jumpList"></titles>
      <div class="contentList">
        <el-card class="imgbox" v-for="(item, index) in park" :key="index">
          <div class="box">
            <img :src="item.thumbnail || imguri" alt="人物">
          </div>
          <p class="text" @click="jump(item, '007')">{{ item.title }}</p>
          <p class="date">{{ item.date }}</p>
        </el-card>
      </div>
    </div> -->
    <!-- 往期回顾 -->
    <div class="review w">
      <div class="titlebox">
        <div class="xian"></div>
        <div class="title">
          <img src="../assets/icons/tb0.png" alt="图标">
          <h2 class="black">往期</h2>
          <h2 class="red">回顾</h2>
        </div>
        <div class="xian"></div>
        <div class="more" @click="jumpList('4')">更多>></div>
      </div>
      <div class="contentList">
        <div class="circular" @click="jump(item, '4')" :class="{ circular2: mous == index }" v-for="(item, index) in reviewlist" :key="index" @mouseover="mouseOver(index)" @mouseleave="mouseLeave(index)">
          <div class="txtbox">
            <p class="year" :class="{ year2: mous == index }">{{ item.year }}</p>
            <p class="date" :class="{ date2: mous == index }">{{ item.term }}</p>
            <p class="title" :class="{ title2: mous == index }">{{ item.title }}</p>
            <!-- <p class="text" :class="{ text2: mous == index }">{{ item.slug }}</p> -->
            <p class="yes" :class="{ yes2: mous == index }">✔</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 最新动态 -->
    <div class="communication w">
      <div class="left">
        <titles type="2" title="最新动态" en="news" @jump="jumpList"></titles>
        <div class="textlist">
          <p class="textbox" @click="jump(item, '2')" v-for="(item, index) in newslist" :key="index">
            <span class="text">{{ item.title }}</span>
            <span class="date">{{ item.date }}</span>
          </p>
        </div>
      </div>
      <div class="right">
        <div class="text">
          <h2>本刊声明</h2>
          <!-- <span>statement</span> -->
          <p>本刊实行双向匿名审稿制度。</p>
          <p>本刊不以任何形式收取审稿费、版面费。</p>
          <p>本刊未与任何社会中介机构合作办刊，    并保留向假冒者追究法律责任的权利。</p>
        </div>
        <div class="weixin">
          <img src="../assets/weixin.png" alt="公众号">
          <p>公众号</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import banner from '../components/banner.vue'
import bottons from '../components/sidebar/buttons.vue'
import cover from '../components/sidebar/cover.vue'
import titles from '../components/sidebar/title.vue'
import moment from 'moment'
import { createNamespacedHelpers } from 'vuex'
const { mapState: pagemapState, mapActions: pagemapActions } = createNamespacedHelpers('page')
const { mapState: contentnmapState, mapActions: contentmapActions } = createNamespacedHelpers('content')
const { mapActions: menumapActions } = createNamespacedHelpers('menu')
export default {
  components: {
    banner,
    cover,
    bottons,
    titles
  },
  data () {
    return {
      imguri: require('../assets/moren.png'),
      mous: -1,
      communicationlist: [],
      directorylist: [],
      newslist: [],
      reviewlist: [],
      park: []
    }
  },
  methods: {
    ...pagemapActions(['getdetails']),
    ...contentmapActions(['getcontent']),
    ...menumapActions(['getmenu']),
    // 移入事件
    mouseOver (e) {
      this.mous = e
    },
    // 移出事件
    mouseLeave (e) {
      this.mous = -1
    },
    jump (e, num) {
      localStorage.setItem('itemId', num)
      const routeData = this.$router.resolve({
        path: `/www/details/${e._id}`
      })
      window.open(routeData.href)
    },
    jumpList (e) {
      this.$router.push(`/www/list/${e}`)
      localStorage.setItem('itemId', e)
    },
    pagejump (pageitem) {
      localStorage.setItem('itemId', '1')
      const routeData = this.$router.resolve({
        path: `/www/page/${pageitem._id}`
      })
      window.open(routeData.href)
    }
  },
  async mounted () {
    const pagelist = await this.getmenu()
    if (pagelist.data.errcode === 0) {
      const res = pagelist.data.data.filter(p => p.code === '1')
      await this.getdetails({ code: res[0].pages })
      const list = ['9', '007', '4', '2']
      list.forEach(async e => {
        let num
        if (e === '9') num = 6
        if (e === '007') num = 8
        if (e === '4') num = 4
        if (e === '2') num = 5
        const contentList = await this.getcontent({ code: e, skip: 0, limit: num })
        switch (e) {
          case '9':
            this.directorylist = contentList.data.data
            break

          case '007':
            this.park = contentList.data.data
            break

          case '4':
            this.reviewlist = contentList.data.data
            break

          case '2':
            this.newslist = contentList.data.data
            break
          default:
            break
        }
      })
    }
  },
  computed: {
    ...pagemapState(['pageitem']),
    ...contentnmapState({ contentitems: 'items', contenttotal: 'total' })
  },
  filters: {
    dates (e) {
      return moment(Number(e)).format('YYYY-MM-DD')
    }
  }
}
</script>
<style lang="less" scoped>
.w {
  width: 80%;
  margin: 5vh auto;
}
.bkjs {
  cursor: pointer;
}
/* 关于我们 */
.about {
  display: flex;
  .leftbox {
    width: 70%;
    display: flex;
    color: #696969;
    font-size: 1.2em;
    flex-wrap: wrap;
    .cover {
      width: 25%;
      padding-top: 20px;
    }
    .abouttext {
      width: 65%;
      margin: 0 5%;
      p {
        font-size: 0.8em;
        text-indent: 2em;
        line-height: 1.5em;
      }
    }
  }
  .bottons {
    width: 30%;
    margin-top: 2%;
  }
}
/* 本期要目 */
.directory {
  .contentList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .imgbox {
      width: 23%;
      margin: 1%;
      height: 320px;
      /deep/ .el-card__body {
        height: 100%;
        .box {
          height: 70%;
          width: 100%;
          overflow: hidden;
          display: flex;
          align-items: center;
          img {
            width: 100%;
            display: block;
          }
        }
        p {
          color: #696969;
        }
        .text {
          height: 2.5em;
          cursor: pointer;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }
      }
    }
  }
}
/* 最新动态 */
.news {
  .contentList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .imngbox {
      width: 46%;
      height: 17vh;
      display: flex;
      margin: 2% 2%;
      .left {
        width: 25%;
        margin-right: 5%;
      }
      .right {
        width: 70%;
        .title {
          font-weight: 700;
          color: #000;
          cursor: pointer;
          // word-break: keep-all;
          // white-space: nowrap;
          // overflow: hidden;
          // text-overflow: ellipsis;
        }
        p {
          color: #696969;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }
      }
    }
  }
}
/* 往期回顾 */
.review {
  margin-top: 10vh;
  .titlebox {
    width: 100%;
    display: flex;
    position: relative;
    .title {
      width: 20%;
      display: flex;
      img {
        height: 30px;
        margin-top: 20px;
      }
      h2 {
        margin-top: -10px;
        font-size: 2.5em;
        letter-spacing: 5px;
      }
      .black {
        margin-left: 20px;
      }
      .red {
        color: #eb4f38;
      }
    }
    .xian {
      width: 40%;
      height: 3px;
      background: #a40000;
      margin: 0 10px;
      margin-top: 2%;
    }
    .more {
      position: absolute;
      right: 2%;
      color: #999;
    }
  }
  .contentList {
    width: 100%;
    height: 40vh;
    display: flex;
    .circular {
      width: 20%;
      height: 16vw;
      margin: 5% 2.5%;
      border-radius: 38%;
      background: #f0f0f0;
      transform:rotate(45deg);
      -ms-transform:rotate(45deg);
      -moz-transform:rotate(45deg);
      -webkit-transform:rotate(45deg);
      -o-transform:rotate(45deg);
      position: relative;
      .txtbox{
        position: absolute;
        left: 50%;
        margin-left: -50%;
        top: 8%;
        transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
        -moz-transform:rotate(-45deg);
        -webkit-transform:rotate(-45deg);
        -o-transform:rotate(-45deg);
         width: 90%;
        p {
          line-height: 1.5em;
          width: 100%;
          margin: 0 auto;
          text-align: center;
        }
        .year {
          color: #eb4f38;
          font-size: 1.5em;
          margin-top: 14%;
        }
        .title {
          margin-top: 5px;
          font-size: 1em;
          color: #222;
          overflow: hidden;
          // text-overflow: ellipsis;
          // display: -webkit-box;
          // -webkit-line-clamp: 1;
          // -webkit-box-orient: vertical;
          // word-break: break-all;
        }
        .date {
          font-size: 2.5em;
          color: #eb4f38;
        }
        .text {
          margin-top: 10px;
          font-size: 0.8em;
          color: #666666;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }
        .yes {
          width: 30px;
          height: 30px;
          margin: 8% auto;
          color: #eb4f38;
          border: 1px solid;
          border-color: #999;
          border-radius: 50%;
          background: #f0f0f0;
          line-height: 30px;
        }
        .year2 {
          color: #fff;
        }
        .title2 {
          color: #fff;
        }
        .date2 {
          color: #fff;
        }
        .text2 {
          color: #fff;
        }
        .yes2 {
          background: #fff;
          color: #039ae4;
        }
      }
    }
    .circular2 {
      background: #c9161d;
    }
  }
}
// 联系我们
.communication {
  display: flex;
  margin-top: 5%;
  .left {
    width: 50%;
    margin-left: 5%;
    .textlist {
      width: 100%;
      .textbox  {
        width: 90%;
        margin: 5% auto;
        color: #999999;
        display: flex;
        .text {
          width: 70%;
          display: block;
          cursor: pointer;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }
        .date {
          display: block;
          width: 30%;
          text-align: right;
        }
      }
    }
  }
  .right {
    width: 45%;
    margin-left: 5%;
    background: #a80002;
    display: flex;
    .text {
      width: 70%;
      color: #fff;
      // font-size: 0.8em;
      margin: 10% 5%;
    }
    .weixin {
      width: 15%;
      color: #fff;
      margin-top: 20%;
      img{
        width: 100%;
      }
      p {
        width: 100%;
        display: block;
        text-align: center
      }
    }
  }
}
@import '../assets/compatible.less';
</style>