大屏顶部动态时间显示

效果图：

 VUE-html部分代码：

<div class="dateTime">
    {{dateTime}}
</div>

CSS部分代码：

      .dateTime{
          text-align: center;
          font-size: 17px;
          color: #FEFEFE;
          letter-spacing: 3px;
          font-family: 'LedFont';
          line-height: 60px;
      }

js部分代码：

      data(){
          return{
              dateTime:'',
              timeTrim:null,//定时器
          }
      },
      created(){
          this.dateTime = this.getNowFormatDate(); //获取当前日期、时间
      },
      mounted(){
          this.timeTrim = setInterval(()=>{ //初始化定时器
              this.dateTime = this.getNowFormatDate();
          },5000)
      },
      methods:{
          getNowFormatDate(){//获取当前日期、时间
              var date = new Date();
              var month = date.getMonth() + 1;
              var strDate = date.getDate();
  
              var hours = date.getHours();
              var minutes = date.getMinutes();
  
              if (month >= 1 && month <= 9) {
                  month = "0" + month;
              }
              if (strDate >= 0 && strDate <= 9) {
                  strDate = "0" + strDate;
              }
              if (hours >= 0 && hours <= 9) {
                  hours = "0" + hours;
              }
              if (minutes >= 0 && minutes <= 9) {
                  minutes = "0" + minutes;
              }
  
              var a = new Array("日", "一", "二", "三", "四", "五", "六");  
              var week = new Date().getDay();  
              var weekDay = "星期"+ a[week];  
  
              //时间格式化
              // date.getSeconds() 获取秒数(0-59)
              var currentdate = `${date.getFullYear()}年${month}月${strDate}日 ${weekDay} ${hours}:${minutes}`;
              return currentdate;
          }
      },
      beforeDestroy(){
          clearInterval(this.timeTrim); //销毁定时器
      }

注：LED字体是用字体包，在项目中全局引入即可。

div盒子阴影：

底部阴影：box-shadow: 0px 10px 10px -10px rgba(228,229,230,0.3);

顶部阴影：box-shadow: 0px -10px 10px -10px rgba(228,229,230,0.3);