1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| <template>
| <el-card shadow="hover" header="时钟" class="item-background">
| <div class="time">
| <h2>{{ time }}</h2>
| <p>{{ day }}</p>
| </div>
| </el-card>
| </template>
|
| <script>
| export default {
| title: "时钟",
| icon: "el-icon-clock",
| description: "演示部件效果",
| data() {
| return {
| time: '',
| day: ''
| }
| },
| mounted() {
| this.showTime()
| setInterval(()=>{
| this.showTime()
| },1000)
| },
| methods: {
| showTime(){
| this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
| this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
| }
| }
| }
| </script>
|
| <style scoped>
| .item-background {background: linear-gradient(to right, #8E54E9, #4776E6);color: #fff;}
| .time h2 {font-size: 40px;}
| .time p {font-size: 14px;margin-top: 13px;opacity: 0.7;}
| </style>
|
|
