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

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

<script>
import Card from '../components/Card'
import { getEpidemicBroadcastApi } from '@/assets/js/api/zhongjianFourth'
export default {
  components: { Card },
  data() {
    return {
      list:[
        // {time:'10月14日 11:29',value:'2022年10月13日广州市新冠肺炎疫情情况-广州本地宝',
        //   url:'http://gz.bendibao.com/news/20221014/content326288.shtml'
        // },
        // {time:'10月14日 09:14',value:'10月13日广州新增本土确诊25例和无症状3例(含12例无症状确诊)',
        //   url:'http://gz.bendibao.com/news/20221014/content326265.shtml'
        // },
      ]
    }
  },
  created() {
   this.getData()
  },
  methods: {
    getData(){
      getEpidemicBroadcastApi().then((res)=>{
        if(res.code == 200){
          this.list = res.result.slice(0,10)
        }
        console.log('疫情',this.list)
      })
    },
    toMore(){
      let dom = document.getElementById('more')
      dom.addEventListener('click', function (e) {
        if (e.target.id == 'more') {
          window.open("http://wjw.gz.gov.cn/ztzl/xxfyyqfk/yqtb/index.html","_blank")
        }
     })
    }
  }
}
</script>

<style lang="less" scoped>
.max{
  position: relative;
}
  .container::after{
    content: '更多 >';
    cursor: pointer;
    color: #66D4D9;
    position: absolute;
    right: 4%;
    top: 5%;
    z-index: 999;
  }
  .container {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 8px 15px;
    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%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      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 {
        cursor: pointer;
        margin-top: 2px;
        margin-bottom: 5px;
      }
    }

  }
  
}

</style>