gcb_zc/components/subItem.vue

<template>
  <div class="sub_item">
    <i class="sub_time">
      <span>5月8日</span> 更新
    </i>
    <div class="sub_show">
      <h3>刚刚，华北地区发不了20条电力招标公告</h3>
      <p>中标公告为：</p>
      <ul>
        <li>保定恒源祥电气设备公司招标******</li>
        <li>中偶同逊色韩第一工程招投标******</li>
        <li>...</li>
      </ul>
      <nuxt-link to>查看详情</nuxt-link>
    </div>
  </div>
</template>

<script>
import '~/static/css/style.css' // 引入
import '~/assets/new.scss' // 引入

export default {
  data() {
    return {
      current: "0",
    }
  }
}
</script>
  
<style>
.sub_item {
  margin-bottom: 24px;
  background-color: rgba(0, 0, 0, 0);
  
  text-align: center;
}
.sub_item h3 {
  padding: 10px 0;
}
.sub_item .sub_time {
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.12);
  margin-bottom: 10px;
  font-style: normal;
  display: inline-block;
}
.sub_item .sub_show {
  text-align: left;
  padding: 0 1.5rem;
  background-color: #fff;
  border-radius: 8px;
  padding-top: 1rem;
}
.sub_item .sub_show {
  text-align: left;
}
.sub_item .sub_show p{
  margin-top: 10px;
}
.sub_item .sub_show ul{
  margin-bottom: 10px;
}
.sub_item .sub_show ul li {
  color: #afafaf;
  line-height: 30px;
}
.sub_item .sub_show a {
  padding: 15px 0;
  color: #202020;
  text-decoration: none;
  border-top: 1px solid #f0f0f0;
  display: block;
}
</style>