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

<template>
  <div class="technology-card">
    <div class="card-wrapper" v-if="true">
      <el-card  v-for="item in [1,2,3]" :key="item"  style="margin-bottom: 15px">
        <el-row >
          <el-col :span="6">
            <img :src="item.photoUrl" alt="technology-img" class="pull-left technology-img">
          </el-col>
          <el-col :span="18" class="technology-detail">
            <div class="technology-title" @click="gotoDetail(item)">
              众测知识图谱辅助生成工具
            </div>
            <div class="technology-info">
              <div>简介：xxxxx</div>
              <div>开发：课题一</div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div v-else>
      暂无内容
    </div>
  </div>
</template>

<script>
  import Http from '@/js/http.js'

  export default {
    name: 'CrowdCase',
    // props:['caseList'],
    methods:{
      // gotoDetail(item){
      //   //增加访问量
      //   Http.get(`/api/technical/updateranking/${item.id}`).then(()=>{
      //     this.$emit('refreshList');
      //     window.open(item.articlesUrl);
      //   })
      // }
    }
  }
</script>

<style scoped lang="less">
  .technology-card {
    .card-wrapper {
      .technology-img {
        width: 100%;
        height: 130px;
      }
      .technology-detail {
        padding-left: 15px;
        height: 130px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .technology-title{
          cursor:pointer;
          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);
        }
      }

    }
  }
</style>