钟表

1. 组件实现

<!-- 组件模板 -->
<template>
  <div class="clock">
    <div
      class="item"
      v-for="item in 12"
      :style="'transform: rotate(' + 30 * item + 'deg)'"
      :key="item"
      :class="item % 3 == 0 ? 'clock-item' : ''"
    >
      {{ item }}
    </div>
    <div class="hour pointer" :style="'transform:rotate(' + circleHour + 'deg)'"></div>
    <div class="minute pointer" :style="'transform:rotate(' + minute * 6 + 'deg)'"></div>
    <div class="seconds pointer" :style="'transform:rotate(' + second * 6 + 'deg)'"></div>
    <div class="point"></div>
  </div>
</template>

<script>
import {} from "vant";
export default {
  components: {},
  props: {},
  data() {
    return {
      minute: "",
      circleHour: "",
      second: "",
      clock: null,
    };
  },
  setup() {
    return {};
  },
  mounted() {
    let that = this;
    this.clock = setInterval(function () {
      var nowDate = new Date(); //每次读取当前时间
      var hour = nowDate.getHours();
      var minute = nowDate.getMinutes();
      var second = nowDate.getSeconds();
      var circleHour = (hour % 12) * 30;
      that.minute = minute;
      that.second = second;
      that.circleHour = circleHour;
    }, 1000);
  },
  unmounted() {
    clearInterval(this.clock);
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.point {
  position: absolute;
  left: calc(50% - 4px);
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  z-index: 999;
  border-radius: 50%;
  background: #fff;
}
.pointer {
  position: absolute;
  left: 50%;
  height: 160px;
  width: 10px;
  margin-left: -5px;
}
.hour::after {
  content: "";
  height: 40px;
  width: 6px;
  position: absolute;
  top: 50px;
  left: 2px;
  background-image: linear-gradient(#fa7299, #fedb44);
  border-radius: 8px 8px 8px 8px;
  z-index: 1;
}
.minute::after {
  content: "";
  height: 50px;
  width: 4px;
  position: absolute;
  top: 40px;
  left: 3px;
  background-image: linear-gradient(#fa7299, #fedb44);
  border-radius: 8px 8px 8px 8px;
  z-index: 2;
}
.seconds::after {
  content: "";
  height: 60px;
  width: 1px;
  position: absolute;
  top: 30px;
  left: 4.5px;
  background-image: linear-gradient(#fa7299, #fedb44);
  z-index: 3;
}
.clock {
  position: relative;
  width: 160px;
  height: 160px;
  background-image: linear-gradient(#4fa3fb, #c962fa);
  border-radius: 50%;
  overflow: hidden;
  padding: 10px;
  color: #fff;
  box-shadow: 0px 15px 24px -5px #7a8fae;
}
.item {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  overflow: hidden;

  font-size: 12px;
}
.clock-item {
  font-size: 18px;
  font-weight: bold;
}

</style>

2. 组件使用

<template>
  <van-nav-bar title="测试页面" fixed placeholder safe-area-inset-top></van-nav-bar>
  <div class="test">
    <my-clock />
  </div>
</template>

<script>
import { NavBar } from "vant";
import MyClock from '../../components/example/MyClock.vue';


export default {
  components: {
    MyClock,
    
    [NavBar.name]: NavBar,
  },
  setup() {
    return {};
  },
  data() {
    return {};
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.test{
  display: flex;
  justify-content: center;
  padding: 20px;
}
</style>