hi-ucs/front/src/views/newHome/components/Carousel.vue

<!--
 * @Author: Light
 * @Date: 2022-11-30 17:43:43
 * @LastEditors: Light
 * @LastEditTime: 2022-12-08 15:20:23
 * @Description: 告诉大家这是什么
-->
<template>
  <div class="carousel" v-if="dataSource.noticeList.length > 0">
    <div class="notice">
      <!-- <div class="item" id="notice-item1" v-html="dataSource.str"></div>
      <div class="item" id="notice-item2" v-html="dataSource.str"></div> -->
      <div class="notice-item">
        <svg
          t="1669889820945"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1382"
          width="20"
          height="20"
        >
          <path
            d="M553.141571 59.499589a43.664726 43.664726 0 0 0-47.54116 6.253491l-255.990857 218.616193-204.061284-0.841113h-0.07314a43.884147 43.884147 0 0 0-31.377165 13.274954 46.041784 46.041784 0 0 0-13.128674 32.291418L0.018468 694.283776a46.370915 46.370915 0 0 0 12.982393 32.364558 43.884147 43.884147 0 0 0 31.523446 13.421235h206.511482l254.747473 217.81165a43.664726 43.664726 0 0 0 47.541159 6.21692 45.749223 45.749223 0 0 0 25.599086-41.360808V100.823828a45.785793 45.785793 0 0 0-25.599086-41.324239z m172.610978 228.343845a43.884147 43.884147 0 0 0-58.695047 21.466662 46.553766 46.553766 0 0 0 20.332988 60.925824 150.668905 150.668905 0 0 1 69.483233 138.271633c0 108.174422-62.352059 144.013142-64.436556 145.183387a46.261205 46.261205 0 0 0-19.930717 61.291525 44.432699 44.432699 0 0 0 39.898004 25.269955 43.481876 43.481876 0 0 0 19.857577-4.790686c4.644406-2.413628 113.623371-60.267562 113.62337-226.954181a239.607443 239.607443 0 0 0-120.169422-220.664119z m138.600764-134.139209a43.884147 43.884147 0 0 0-61.181815 13.677226 46.553766 46.553766 0 0 0 12.909253 63.120031c4.827256 3.254741 118.889468 82.977608 118.889469 281.370523s-109.417807 278.664333-113.769651 281.589943a46.370915 46.370915 0 0 0-12.360702 63.339452 43.884147 43.884147 0 0 0 61.766937 12.653262c6.253491-4.278704 153.375094-107.735581 153.375094-357.728938S870.862795 157.873219 864.353313 153.594514z m0 0"
            p-id="1383"
            fill="#d81e06"
          ></path>
        </svg>
        <!-- {{ item.content }} -->
        <marquee
          direction="left"
          behavior="scroll"
          onmouseover="this.stop()"
          onmouseout="this.start()"
        >
          {{ dataSource.str }}
        </marquee>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
  import { sysnoticemanagement } from '@/api/home'
  import { getCategoryTreePage } from '@/api/personalCenter'
  const dataSource = reactive({
    noticeList: [],
    total: 0,
    str: '',
  })
  getCategoryTreePage({
    dictTypeId: '1598237460358852610',
    page: 1,
    limit: 9999,
  }).then((res) => {
    sysnoticemanagement({
      page: 1,
      limit: 9999,
      content: '',
      days: res.data.data.list[0].dictLabel,
    }).then((res1) => {
      dataSource.noticeList = res1.data.data.list
      dataSource.total = res1.data.data.total
      dataSource.noticeList.map((val, index) => {
        dataSource.str +=
          '通知' + (index + 1) + '：' + val.content + '　　　　　'
      })
    })
  })
  // let time = null
  onMounted(() => {
    // nextTick(() => {
    //   const domArr = document.getElementsByClassName('notice-item')
    //   let num = 0
    //   // 移动方法
    //   const move = () => {
    //     num++
    //     for (let i = 0; i < domArr.length; i++) {
    //       let offsetWidth = 0
    //       for (let j = 0; j < i; j++) {
    //         offsetWidth += domArr[j].offsetWidth + 30
    //       }
    //       domArr[i].style.left = -num + offsetWidth + 'px'
    //     }
    //   }
    //   // 设置transition
    //   const setTransition = (str) => {
    //     for (let i = 0; i < domArr.length; i++) {
    //       domArr[i].style.transition = str
    //     }
    //   }
    //   move()
    //   time = window.setInterval(() => {
    //     move()
    //     let str = domArr[dataSource.total].style.left
    //     if (str.substring(0, str.length - 2) < 0) {
    //       num = 0
    //       setTransition('unset')
    //       move()
    //     } else if (domArr[0].style.transition == 'unset') {
    //       setTransition('all 0.05s linear')
    //     }
    //   }, 50)
    // })
  })
  onBeforeUnmount(() => {
    // window.clearInterval(time)
  })
</script>
<style lang="less" scoped>
  .carousel {
    width: 100%;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    // background: #364d79;
    color: #fff;
    position: absolute;
    top: 60px;
    left: 0;
    .notice {
      width: 740px;
      height: 50px;
      line-height: 50px;
      position: relative;
      overflow: hidden;
      .notice-item {
        width: 740px;
        font-size: 16px;
        position: absolute;
        top: 0;
        white-space: nowrap;
        transition: all 0.05s linear;
        display: flex;
        align-items: center;
        .icon {
          margin-right: 10px;
        }
      }
    }
  }
  marquee {
    font-weight: 600;
  }
</style>