NUXT_FRONTEND/components/Widget/Lent.vue

<template>
  <div class="news-side__list">
    <client-only>
      <v-skeleton-loader v-if="!newsFeedList.length" type="list-item-two-line@9" class="mx-auto" min-width="385px"></v-skeleton-loader>
    </client-only>
    <div v-show="newsFeedList.length" class="news-side-list">
<!--      <div class="vote-countdown news-side-list__item">-->
<!--        <nuxt-link to="/news/novgod2023" class="news-side-list__link">-->
<!--          <img src="/png/cabbit.png" style="height: 60px;margin-top: -10px;"/>-->
<!--          <main class="news-side-list__item-main" >-->
<!--            <h3 class="news-side-list__item-title">До нового года осталось</h3>-->
<!--          </main>-->
<!--          <aside class="news-side-list__item-side">-->
<!--            <div class="news-side-list__item-time">-->
<!--              <span v-html="countdown"></span>-->
<!--            </div>-->
<!--          </aside>-->
<!--        </nuxt-link>-->
<!--      </div>-->
      <div
        class="news-side-list__item"
        v-for="(newsItem,index) in newsFeedList"
        :key="newsItem.id"
      >
        <client-only>
          <div class="detail-side__banner" v-if="(index === 10 && params['showad'] === true)">
            <BannersW240H400 />
          </div>
          <div class="detail-side__banner" v-if="(index === 3 && params['showadMainPage'] === true && isMobile())">
            <BannersLentMobile />
          </div>
          <div class="detail-side__banner" v-if="(index === 20 && !isMobile())">
            <BannersLentPartner />
          </div>
        </client-only>
        <nuxt-link
          :to="getNewsItemLink(newsItem)"
          class="news-side-list__link"
        >
          <main class="news-side-list__item-main">
            <h3
              class="news-side-list__item-title"
              :class="{ lightning: newsItem.lightning }"
              v-html="newsItem.title"
            >
            </h3>
          </main>
          <aside class="news-side-list__item-side">
            <div class="news-side-list__item-time">
              {{ $convertDate(newsItem.start_activity) }}
            </div>
            <div class="news-side-list__item-comments" v-if="newsItem.comments_count && newsItem.comments_count > 0">
              <BaseIcon clear :name="'comments'" />
              <span> {{ newsItem.comments_count }}</span>
            </div>
          </aside></nuxt-link
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import global from "@/mixins/global";

export default {
  mixins: [global],
  props: ['params'],

  data: () => {
    function declOfNum (n, titles) {
      return titles[(n % 10 === 1 && n % 100 !== 11) ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2]
    }
    function calc_estimate () {
      const voteEndDate = new Date()
      voteEndDate.setDate(31)
      voteEndDate.setHours(23)
      voteEndDate.setMinutes(59)
      voteEndDate.setSeconds(59)
      voteEndDate.setMonth(11)
      let diff = voteEndDate.getTime() - (new Date()).getTime()
      diff = Math.ceil(diff / (1000))
      let estimate = 'С новым 2023 годом!'
      if (diff >= 1) {
        const days = Math.floor((diff / (3600 * 24)))
        estimate = '<b>' + days + '</b>' + ' ' + declOfNum(days, ['день', 'дня', 'дней'])
        const hoursEstimate = Math.floor((diff - (days * 3600 * 24)) / 3600)
        // estimate += '<br>' + hoursEstimate + ' ' + declOfNum(hoursEstimate, ['час', 'часа', 'часов'])
        estimate += '<br>' + '<b>' + hoursEstimate.toString().padStart(2, '0') + ':'
        const minutesEstimate = Math.floor((diff - (days * 3600 * 24) - (hoursEstimate * 3600)) / 60)
        // estimate += '<br>' + minutesEstimate + ' ' + declOfNum(minutesEstimate, ['минуту', 'минуты', 'минут'])
        estimate += minutesEstimate.toString().padStart(2, '0') + ':'
        const secondsEstimate = Math.floor((diff - (days * 3600 * 24) - (hoursEstimate * 3600) - (minutesEstimate * 60)))
        // estimate += '<br>' + secondsEstimate + ' ' + declOfNum(secondsEstimate, ['секунду', 'секунды', 'секунд'])
        estimate += secondsEstimate.toString().padStart(2, '0')
        estimate += '</b>'
        estimate += '<br>' + declOfNum(hoursEstimate, ['час', 'часа', 'часов'])
      }
      return estimate
    }
    let estimate = calc_estimate()
    setInterval(function () {
      estimate = calc_estimate()
    },1000)
    return {
      countdown: estimate
    }
  },
  created () {
    this.getNewsFeedList()
  },
  mounted () {
    setInterval(this.getNewsFeedList, 240000);
    setInterval(() => { this.countdown = this.calc_estimate((new Date())) }, 1000)
  },

  computed: {
    ...mapGetters({
      newsFeedList: "modules/news/newsFeedList",
    }),
    nzk_logo(){
      return require('~/static/png/nzk_logo.png');
    },
  },
  methods: {
    ...mapActions({
      getNewsFeedList: "modules/news/getNewsFeedList",
    }),
    isMobile () {
      if (typeof screen !== 'undefined' && screen.width <= 576) {
        return true
      } else {
        return false
      }
    },
    calc_estimate (date) {
      function declOfNum (n, titles) {
        return titles[(n % 10 === 1 && n % 100 !== 11) ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2]
      }
      const voteEndDate = new Date()
      voteEndDate.setDate(31)
      voteEndDate.setHours(23)
      voteEndDate.setMinutes(59)
      voteEndDate.setSeconds(59)
      voteEndDate.setMonth(11)
      let diff = voteEndDate.getTime() - date.getTime()
      diff = Math.ceil(diff / (1000))
      let estimate = 'С новым 2023 годом!'
      if (diff >= 1) {
        const days = Math.floor((diff / (3600 * 24)))
        estimate = '<b>' + days + '</b>' + ' ' + declOfNum(days, ['день', 'дня', 'дней'])
        const hoursEstimate = Math.floor((diff - (days * 3600 * 24)) / 3600)
        // estimate += '<br>' + hoursEstimate + ' ' + declOfNum(hoursEstimate, ['час', 'часа', 'часов'])
        estimate += '<br>' + '<b>' + hoursEstimate.toString().padStart(2, '0') + ':'
        const minutesEstimate = Math.floor((diff - (days * 3600 * 24) - (hoursEstimate * 3600)) / 60)
        // estimate += '<br>' + minutesEstimate + ' ' + declOfNum(minutesEstimate, ['минуту', 'минуты', 'минут'])
        estimate += minutesEstimate.toString().padStart(2, '0') + ':'
        const secondsEstimate = Math.floor((diff - (days * 3600 * 24) - (hoursEstimate * 3600) - (minutesEstimate * 60)))
        // estimate += '<br>' + secondsEstimate + ' ' + declOfNum(secondsEstimate, ['секунду', 'секунды', 'секунд'])
        estimate += secondsEstimate.toString().padStart(2, '0')
        estimate += '</b>'
        estimate += '<br>' + declOfNum(hoursEstimate, ['час', 'часа', 'часов'])
      }
      return estimate
    }
  },

};
</script>

<style lang="less">
.news-side-list {
  &__item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box;
    //-webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    //line-clamp: 2;
    box-orient: vertical;
    &.lightning {
      display: flex;
      align-items: center;
    }
    &.lightning::before {
      margin-right: 15px;
      flex: none;
      width: 14px;
      height: 23px;
      content: "";
      display: inline-block;
      background-size: cover;
      background-image: url("~/static/svg/styled/lightning.svg");
    }
  }
  &__item-comments {
  }
}
.detail-side__banner{
  background: white;
  width: 100%;
  min-height: 200px;
  padding: 20px 0;
  box-sizing: border-box;
  .test-banner{
    width: 240px;
    height: 400px;
    background: blue;
    margin: 0 auto;
  }
  div{
    margin: 0 auto;
    text-align: center;
  }
}
</style>