<template>
  <div class="flex-box app-container part-container">
    <div class="tender-list">
      <div class="common-title">招标公告</div>
      <div class="tender-item" v-for="(item, index) in zbggList" :key="index">
        <div class="flex-box tender-title">{{item.name}}<span :class="item.tag=='项目动态'?'style2':item.tag=='招投标'?'style4':'style1'">{{item.tag}}</span></div>
        <span class="tender-time">{{item.tip}} {{item.time}}</span>
      </div>
    </div>
    <div class="tender-list">
      <div class="common-title">企业动态</div>
      <div class="tender-item" v-for="(item, index) in trendList" :key="index">
        <div class="flex-box tender-title">{{item.name}}<span :class="item.tag=='新增分支机构'?'style2':item.tag=='新增施工工法'?'style3':'style1'">{{item.tag}}</span></div>
        <span class="tender-time">{{item.time}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tender',
  data() {
    return {
      //招标公告数据
      zbggList:[
        {name: '深圳北站片区正建超大型商场，预计2026年建成', tag: '公司经营', tip: '通信信息报', time: '03-21'},
        {name: '深圳北站片区正建超大型商场，预计2026年建成', tag: '项目动态', tip: '通信信息报', time: '03-21'},
        {name: '深圳北站片区正建超大型商场，预计2026年建成', tag: '公司经营', tip: '通信信息报', time: '03-21'},
        {name: '深圳北站片区正建超大型商场，预计2026年建成', tag: '招投标', tip: '通信信息报', time: '03-21'},
        {name: '深圳北站片区正建超大型商场，预计2026年建成', tag: '公司经营', tip: '通信信息报', time: '03-21'}
      ],
      //企业动态数据
      trendList:[
        {name: '深圳北站片区正建超大型商场，预计2026年建成', tag: '对外投资变更', time: '03-21'},
        {name: '深圳北站片区正建超大型商场，预计2026年建成', tag: '新增分支机构', time: '03-21'},
        {name: '深圳北站片区正建超大型商场，预计2026年建成', tag: '新增分支机构', time: '03-21'},
        {name: '深圳北站片区正建超大型商场，预计2026年建成', tag: '新增施工工法', time: '03-21'},
        {name: '深圳北站片区正建超大型商场，预计2026年建成', tag: '新增施工工法', time: '03-21'}
      ]
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
  .part-container{
    margin: 0;
    padding: 0;
    justify-content: space-between;
    align-items: normal;
    .tender-list{
      width: calc(50% - 8px);
      padding: 24px 16px;
      background: #FFFFFF;
      overflow: hidden;
      border-radius: 4px;
      .common-title{
        margin-bottom: 10px;
      }
      .tender-item{
        padding: 16px 0;
        border-bottom: 1px solid #EEEEEE;
        .tender-title{
          color: #232323;
          justify-content: space-between;
          align-items: normal;
          span{
            height: 22px;
            line-height: 22px;
            padding: 1px 7px;
            border-radius: 2px;
            flex-shrink: 0;
            margin-left: 20px;
            margin-top: 3px;
            &.style1{
              background: #E4F3FD;
              font-size: 12px;
              color: #41A1FD;
            }
            &.style2{
              background: #F3F3FF;
              font-size: 12px;
              color: #8491E8;
            }
            &.style3{
              background: #ECF6E7;
              font-size: 12px;
              color: #54BC7E;
            }
            &.style4{
              background: #E5EEFC;
              font-size: 12px;
              color: #006EE4;
            }
          }
        }
        .tender-time{
          display: block;
          padding-top: 8px;
          color: rgba(35,35,35,0.4);
        }
      }
    }
  }
</style>
