hemall.terabimsoft.com.cn/plugins/shop_server/components/templateTwo/article-layout.vue

<!-- 文章 新动态 -->
<template>
  <div id="article-layout">
    <div class="article-main">
      <div class="article-item">
        <div class="article-bg" @click="toUrl('notice',{},{class_id: datas[0].category_id})">
          <img :src="datas[0].img||require(`~/assets/images/index/article1.png`)" alt="">
          <div class="title">{{datas[0].category}}</div>
        </div>
        <div class="article-list">
          <div class="list-item" v-for="child in datas[0].list" :key="child.id" @click="toArticle(child, 'articleContent-id', child.id)">
            <div class="time">{{child.virtual_at}}</div>
            <div class="article-content">
              <div class="article-tag">【{{child.author}}】</div>
              <div class="article-title">{{child.title}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="article-item" >
        <div class="article-bg" @click="toUrl('notice',{},{class_id: datas[1]?datas[1].category_id:0})">
          <img :src="datas[1]?datas[1].img:require(`~/assets/images/index/article2.png`)" alt="">
          <div class="title">{{datas[1]?datas[1].category:''}}</div>
        </div>
        <div class="article-list" v-if="datas[1]">
          <div class="list-item" v-for="child in datas[1].list" :key="child.id" @click="toArticle(child, 'articleContent-id', child.id)">
            <div class="time">{{child.virtual_at}}</div>
            <div class="article-content">
              <div class="article-tag">【{{child.author}}】</div>
              <div class="article-title">{{child.title}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    datas: {
      type: Array,
      default: () => ([])
    },
  },
  data () {
    return {
    };
  },

  activated() {},

  components: {},

  computed: {},

  mounted() {},

  methods: {
    toUrl(url, params, query) {
      this.$router.push(this.fun.getUrl(url, params, query));
    },
    toArticle(item, url, id) {
      if(item.has_one_article_pay) {
        if(item.has_one_record) {
          if(this.$baseURL) {
            window.open(this.fun.getSiteRoot() + "/plugins/shop_server/articleContent?i=" +this.fun.getKeyByI()+ '&id='+id, "_blank");
          }else {
            window.open(this.fun.getSiteRoot() + "/plugins/shop_server/articleContent/"+id+"?i=" +this.fun.getKeyByI(), "_blank");
          }
          // this.$router.push(this.fun.getUrl(url, { id: id }, {}));
        }else{
          this.getPay(item.id);
        }
      }else {
        if(this.$baseURL) {
          window.open(this.fun.getSiteRoot() + "/plugins/shop_server/articleContent?i=" +this.fun.getKeyByI()+ '&id='+id, "_blank");
        }else {
          window.open(this.fun.getSiteRoot() + "/plugins/shop_server/articleContent/"+id+"?i=" +this.fun.getKeyByI(), "_blank");
        }
        // this.$router.push(this.fun.getUrl(url, { id: id }, {}));
      }
    },
  }
}

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
#article-layout{
  .article-main{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 60px;
    .article-item{
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .article-bg{
        height: 150px;
        padding: 30px;
        border-radius: 5px;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        flex-direction: column-reverse;
        position: relative;
        img{
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
        .title{
          width: 100%;
          font-size: 24px;
          color: #fff;
          z-index: 3;
          text-shadow: 0px 1px 2px #2f2f2f;
          overflow: hidden;/*超出部分隐藏*/
          text-overflow:ellipsis;/* 超出部分显示省略号 */
          white-space: nowrap;/*规定段落中的文本不进行换行 */
        }
        &:hover{
          // box-shadow: 0px 4px 14px 2px rgba(4, 0, 0, 0.15);
          cursor:pointer;
          img {
            transform: scale(1.04);
            transition: all 0.5s ease;
          }
        }
      }
      .article-list{
        display: flex;
        flex-direction: column;
        padding-top: 30px;
        .list-item{
          display: flex;
          padding: 0 20px 18px;
          box-sizing: border-box;
          font-size: 14px;
          cursor:pointer;
          .time{
            color: #a0a0a0;
            margin-right: 6px;
          }
          .article-content{
            display: flex;
            flex: 1;
            overflow: hidden;
            .article-tag{
              color: var(--color);
              margin-right: 6px;
              flex-shrink: 0;
            }
            .article-title{
              color: #262626;
              overflow: hidden;/*超出部分隐藏*/
              text-overflow:ellipsis;/* 超出部分显示省略号 */
              white-space: nowrap;/*规定段落中的文本不进行换行 */
            }
          }
          &:hover{
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>