zfire-newmall-admin/src/components/head.vue

<template>
  <div class="headview">
    <div class="asleft">
      <dv-scroll-board
        ref="scrollBoard"
        :config="config"
        style="width: 100%; height: 100%"
      />
    </div>
    <img :src="[img0, img1, img2][swindex]" alt="" srcset="" />
    <div class="asright">{{ timeStr }}</div>
  </div>
</template>

<script>
import { dateFormat } from '@/utils/tool.js';
import { tq } from '@/api/bigView.js';
import img0 from '@/assets/head0.png';
import img1 from '@/assets/head1.png';
import img2 from '@/assets/head2.png';
export default {
  props: {
    swindex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      img0,
      img1,
      img2,
      timeStr: '',
      timeId: null,
      info: {},
      config: {
        rowNum: 1,
        carousel: 'page',
        data: [],
        waitTime: 3000,
      },
    };
  },
  mounted() {
    this.gettq();
    this.timeId2 = setInterval(this.gettq, 60000 * 60 * 8);
    this.timeId = setInterval(() => {
      let date = new Date();
      this.timeStr = dateFormat('YYYY-mm-dd HH:MM:SS WWW', date);
    }, 1000);
  },
  beforeUnmount() {
    this.timeId && clearInterval(this.timeId);
    this.timeId2 && clearInterval(this.timeId2);
  },
  methods: {
    gettq() {
      Promise.all([
        tq('广州市'),
        tq('清远市'),
        tq('韶关市'),
        tq('佛山市'),
        tq('肇庆市'),
        tq('云浮市'),
      ])
        .then((reslist) => {
          var atrlist = reslist.map((item2) => {
            var item = item2.data;
            return [
              `<div class="jajajaj">${
                item.result.city
                  ? `${item.result.city} ：${item.result.weather || ''} ${
                      item.result.templow || ''
                    }℃ ~${item.result.temphigh || ''}℃`
                  : ''
              }</div>`,
            ];
          });
          this.$refs['scrollBoard'].updateRows(atrlist);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .jajajaj {
  height: 24px;
  line-height: 24px;
  font-size: 20px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: left;
  color: #34c7ff;
}
::v-deep .dv-scroll-board {
  background: none !important;
  .row,
  .row-item {
    background: none !important;
    height: 24px !important;
  }
}
.headview {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  img {
    position: absolute;
    bottom: 0;
    width: 1920;
    height: 58px;
  }
  .asleft {
    width: 500px;
    height: 24px;
    overflow: hidden;
    position: absolute;
    bottom: 10px;
    left: 67px;
  }
  .asright {
    font-size: 20px;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    text-align: left;
    color: #34c7ff;
    position: absolute;
    bottom: 10px;
    right: 67px;
  }
}
</style>