gcb_zc/components/gcxm.vue

<template>
  <div class="item-gcxm">
    <h3 class="title-item">{{ title }}</h3>
    <p class="content-item">{{ description }}</p>
    <div>
    <ul class="info-tag">
      <li v-for="(tag,index) of tags" :key='index'>
        {{ tag.text }}
      </li> 
    </ul>
    <span class="time"> {{ updateTime }} </span>
    </div>
  </div>
</template>
<script>
export default{
  data(){
    return {
      title: 'title---项目名称占位，项目名称占位占位占位占位。',
      description: 'content---项目概况，项目详情，1~3行预览。项目概况，项目详情，1~3行预览。项目概况，项目详情，1~3行预览。项目概况，项目详情，1~3行预览。',
      updateTime:'2312132',
      tags: [
        { text: '2000万' },
        { text: '行业分类' }
      ]
    }
  }
}
</script>
  
<style>
  .item-gcxm{
    margin-bottom: 10px;
  }
  .title-item{
    font-size: 18px;
    color: #202020;
    font-weight: bold;
    margin-bottom: 15px;
  }
  .content-item{
    margin-bottom: 10px;
  }
  .info-tag li{
    font-size: 12px;
    display: inline-block;
    padding: 0 8px;
    margin-right: 10px;
    background-color: #f2f2fa;
    height: 20px;
    line-height: 20px;
    border-radius: 4px;
  }
  .content-item{
    overflow: hidden;
  }
</style>