screenFront/src/views/Temp/Tufting/component/center.vue

<template>
  <div class="container">
    <p class="toptip-p">
      <span>预计工厂交货日期:</span><span>{{ data.date }}</span>
    </p>
    <div
      :class="dateColor == '1' ? 'toptip-h2 colorRed' : dateColor == '2' ? 'toptip-h2 colorgreen' : dateColor == '3' ? 'toptip-h2 coloryellow' : 'toptip-h2'">
      <div style="margin-bottom: 20px;">{{ data.status }}</div>
      <div>{{ data.countdown }}</div>

    </div>
    <!-- <img :style="{width:itemSize.imgwidth}" :src="data.src" alt=""> -->
    <el-image :style="{ width: '100%', height: '60%' }" :src="data.src"
      fit="contain">
      <template #error>
        <div class="image-slot">
          <el-icon><icon-picture /></el-icon>
        </div>
      </template>
    </el-image>

  </div>
</template>

<script setup lang='ts'>
import { reactive, ref,onUnmounted } from 'vue';
import { imgurlAddXhr } from "@/utils/devSever"
import { clacendTime } from "@/utils/time"


let data = reactive({
  date: "2023年06月10日",
  src: require("/src/assets/img/tufting.png"),
  realityTime: "",
  status: "物联调试中",
  countdown: "",
});
let dateColor = ref('2');
let time = null
const itemSize = reactive({
  height: "0px",
  width: "0px",
  imgwidth: "0px",
  imgheight: "0px",
});

time = setInterval(function () {
      data.countdown = '距交付剩余：'+clacendTime(1686326400000, new Date().getTime())
  }, 1000)

  onUnmounted(() => {
    clearInterval(time)
  })
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}


.green {
  color: green;
  font-size: 2rem;
}

.red {
  color: red;
  font-size: 2rem;
}

.fff {
  color: #aaa;
  font-size: 2rem;
}

.toptip-h2 {
  color: red;
  font-size: 2rem;
}

.toptip-p {
  font-size: 2rem;
  color: #fff;
}

p {
  font-size: 1.2rem
}

.uldianji {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

img {
  padding: 1rem 0 1rem 0;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}

.image-slot .el-icon {
  font-size: 30px;
}

.tipbox {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin: 0 30px 0 30px;
}

.colorRed {
  color: #FF6E76;
  animation: redstarton 3s infinite;
}

.colorgreen {
  color: #7CFFB2;
}

.coloryellow {
  color: #FDDD60;
}

@keyframes redstarton {
  0% {
    color: rgba(255, 110, 118, 0.2);
    transform: scale(1);
    /* font-size: 30px; */
  }

  50% {
    color: rgba(255, 110, 118, 1);
    transform: scale(1.1);
    /* font-size: 35px; */
  }

  100% {
    color: rgba(255, 110, 118, 0.2);
    transform: scale(1);
    /* font-size: 30px; */
  }
}</style>