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.content }}</p>
          <!-- <p class="value">
          <a :href= item.url target="_blank">{{111}}</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: [{ content: '' }]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getEpidemicBroadcastApi({adCode: this.$store.state.currentProDetail.cityCode }).then(res => {
        if (res.code == 200) {
          this.list[0].content = res.result
        }
        // console.log('疫情',res)
      })
    },
    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: 10px 0px 10px 0px;
      // color:rgba(255, 255, 255, 0.65)
      border-left: 4px solid #66d3d8;
      background-image: linear-gradient(to right, #3b7589, #182337);
      margin-top: 35px;
    }
    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>