zhgdyun/src/views/projectAdmin/fourEngin/command/rightThree.vue

<template>
  <Card title="疫情播报">
    <div class="container">
      <div class="content" v-for="(item,index) in list" :key="index">
        <p class="time">{{item.time}}</p>
        <p class="value">
          <a :href= item.href target="_blank">{{item.value}}</a>
        </p>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '../components/Card'
export default {
  components: { Card },
  data() {
    return {
      list:[
        {time:'10月14日 11:29',value:'2022年10月13日广州市新冠肺炎疫情情况-广州本地宝',
          href:'http://gz.bendibao.com/news/20221014/content326288.shtml'
        },
        {time:'10月14日 09:14',value:'10月13日广州新增本土确诊25例和无症状3例(含12例无症状确诊)',
          href:'http://gz.bendibao.com/news/20221014/content326265.shtml'
        },
        // {time:'10月13日 11:32',value:'2022年10月12日广州市新冠肺炎疫情情况-广州本地宝',
        //   href:'http://gz.bendibao.com/news/20221013/content326216.shtml'
        // },
      ]
    }
  },
  created() {
   
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  // padding: 16px 0px;
  width: 100%;
  height: 100%;
  overflow: auto;
  .content{
    margin-top: 10px;
    width: 100%;
    height: 65px;
    .time{
      padding:0px 0px 5px 5px;
      color:rgba(255, 255, 255, 0.65)
    }
    a{
      text-decoration: none;
      color:rgb(255,255,255);
    }
    .value {
      position: relative;
      box-sizing: border-box;
      border-left: 4px solid #66d3d8;
      margin-bottom: 3px;
      padding: 10px 5px;
      width: 100%;
      background-image: linear-gradient(to right, #3b7589, #182337);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      color:rgb(255, 255, 255);
      transition: all 0.3s;
      white-space: nowrap;

      &:hover {
        margin-top: 2px;
        margin-bottom: 5px;
        padding: 15px 0;
        padding-left: 20px;
        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 6px;
          display: inline-block;
          transform: translate(0, -50%);
          width: 8px;
          height: 14px;
          background-image: url('../assets/images/command-center/triangle.png');
          background-size: 100% 100%;
          transition: all .3s;
        }
      }
    }

  }
  
}
</style>