crowd-test-service-frontend/src/pages/Technology/TechnologyMG.vue

<template>
  <div class="technology-card">
    <div class="card-wrapper" v-if="techArticleList&&techArticleList.length">
      <el-card  v-for="item in techArticleList" :key="item.id"  style="margin-bottom: 15px">
        <el-row @click.native="gotoDetail(item)">
            <div class="technology-title">
              {{item.title}}
              <span v-if="item.chineseBrief" style="color:rgba(0, 118, 203, 1);cursor: pointer;">[chineseBrief]</span>
            </div>
          <div class="technology-info">
            发表年份：{{item.publicTime}}
          </div>
          <div class="technology-info">
            会议：{{item.conferenceJournal}}
          </div>
            <div class="technology-info">
              <el-row >
                作者：{{item.authorList}}
              </el-row>
            </div>
        </el-row>
      </el-card>
    </div>
    <div v-else>
      暂无内容
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TechnologyMG',
    props:['techArticleList'],
    methods:{
      gotoDetail(item){
        item.chineseBrief ? window.open(item.chineseBrief) : null
      }
    }
  }
</script>

<style scoped lang="less">
  .technology-card {
    .card-wrapper {
      .technology-img {
        width: 100%;
        height: 130px;
      }
      .technology-title{
        font-size:22px;
        font-family:Source Han Sans CN;
        font-weight:500;
        color:rgba(0,0,0,1);
      }
      .technology-info {
        font-size:16px;
        font-family:Source Han Sans CN;
        font-weight:400;
        color:rgba(0,0,0,1);
        margin: 10px 0
      }
    }
  }
</style>