显示假期

时间:2018-12-17 09:07:25

标签: javascript vue.js vuejs2 laravel-5.2

----这里的js将thead格式化为MONTH YEAR,可以通过两个按钮进行更改。
----我有一个设计,可以显示月份,日期,假期名称及其说明。
----我有一个如何实现的想法,但是由于我是一个初学者,缺乏资源使我丧命。我正在努力从哪里开始。

<script>
// install from terminal [npm install moment --save]
  import moment from 'moment'

    export default {
        data() {
            return {
                today: null,
            }
        },
        methods: {
            todayMonth() {
                let date = moment().format('MMMM YYYY')
                this.today = date
            },
            downMonth() {
                let sub = moment(new Date(this.today)).subtract(1, 'M').format('MMMM YYYY')
                this.today = sub
            },
            upMonth() {
                let sub = moment(new Date(this.today)).add(1, 'M').format('MMMM YYYY')
                this.today =  sub
            },
        },
        mounted() {
            this.todayMonth()
        }
    }       
</script>
<style>
#p1{
    font-style:     italic;
    font-weight:    300;
    color:          #afafaf;
    margin-top:     -10px;
}
#date-head{
    margin-top: 8px;
}
 #Month_Date{
    display:         table-cell;
    padding:         0.01em 16px;
    background-color:#F55E1C;
    color:           white;
    text-align:      center;
    width:           10%;
    box-shadow:      0px 15px 20px grey;
} 
 #Month_Date_0{
    display:         table-cell;
    padding:         0.01em 16px;
    background-color:#F58523;
    color:           white;
    text-align:      center;
    width:           10%;
    height:          100%;
    box-shadow:      0px 15px 30px grey;
} 
#Holiday-Description{
    display:          table-cell;
    padding:          0.01em 16px;
    background-color: rgb(233, 232, 232);
    color:            #000;
    width:            100%;
    height:           100%;
    box-shadow:       0px 15px 30px grey;
}
#b_container2 {
     animation:       float .6s ease-in; 
     margin-top:      15px;
     margin-left:     -20px;
}
#b_container1 {
    width:             96%;
    margin-top:        30px;
    background-color:  #F55E1C;
    color:             white;
    padding:           13px;
    font-weight:       500;
    margin-left:       -8.5px;
}
#t_head{
    margin-top:        -12px;
}
#icon_chev_up:hover, #icon_chev_down:hover{
    cursor:     pointer;
    color:      grey;
}
.icon_chev{ 
    float:              right;
    margin-top:         -38.5px;
    margin-left:        200px;
    font-size:          200%;
}
@keyframes float {
    0% {
        opacity:   0;
        transform: translateY(50px);
    }
    100% {
        opacity:   1;
        transform: translateY(0px);
    }
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

0 个答案:

没有答案