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

<template>
  <Card title="疫情播报" class="max">
    <div class="container" id="more" @click="toMore">
      <div id="page"  v-for="(item, index) in list" :key="index">
        <div class="content">
          <p class="time">{{ item}}</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'
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";

export default {
  components: { Card },
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      let data = {
        projectSn: this.$store.state.projectSn,
      };
      getProjectDetail(data).then((res) => {
        if (res.code == 200) {
          getEpidemicBroadcastApi({adCode: res.result.cityCode }).then(res => {
            console.log('res--------',res);

        if (res.code == 200) {
          this.list= res.result
        }
      })
        }
      });
    },
    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;
    padding: 20px 0px 10px 0px;
      // color:rgba(255, 255, 255, 0.65)
      border-left: 4px solid #66d3d8;
      background-image: linear-gradient(to right, #3b7589, #182337);
    .time {
    
      font-size: 18px;
    }
    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>