日历部分调整，视频部分调整，专题部分调整

shuishen

2022-03-24 369b82a3d81afe2f0574e2c44fd0a2918516b433

 src/components/map/components/calender.vue

@@ -1,6 +1,15 @@
<template>
    <div class="calender-box">
        <div class="header">活动</div>
        <div class="header">
            <img class="celebrate deblurring" src="/img/icon/school-celebrate.png" alt />
            校园活动
            <img
                @click="closeCurrent"
                class="close deblurring"
                src="/img/navicon/close.png"
                alt
            />
        </div>
        <div class="content">
            <full-calendar ref="fullCalendar" style="height: 100%" :options="calendarOptions"></full-calendar>
        </div>
@@ -16,11 +25,378 @@
// import '@fullcalendar/core/main.css'
import '@fullcalendar/daygrid/main.css'

import moment from 'moment'
import tippy from 'tippy.js'
import 'tippy.js/dist/tippy.css'
import 'tippy.js/themes/light-border.css'
// const getTime = (time) => {
//     const datetime = new Date(time)
//     const year = datetime.getFullYear()

//     const month = datetime.getMonth()
//     const date = datetime.getDate()
//     const hour = datetime.getHours()
//     const minute = datetime.getMinutes()
//     const second = datetime.getSeconds()

//     const result1 = year +
//         '-' +
//         ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
//         '-' +
//         ((date + 1) < 10 ? '0' + date : date) +
//         ' ' +
//         ((hour + 1) < 10 ? '0' + hour : hour) +
//         ':' +
//         ((minute + 1) < 10 ? '0' + minute : minute) +
//         ':' +
//         ((second + 1) < 10 ? '0' + second : second)

//     const result2 = year +
//         '-' +
//         ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
//         '-' +
//         ((date + 1) < 10 ? '0' + date : date)

//     const result = {
//         hasTime: result1,
//         withoutTime: result2
//     }

//     return result
// }

const timeEvents = [{
    id: '92963',
    title: '文化素质教育讲座：逻辑的现实性意义——大学生为何需要逻辑学？',
    start: '2022-03-25T18:30:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '本科生院',
    url2: 'http://today.hit.edu.cn/event/2022/03/23/92963',
    color: '#337ab7'
},
{
    id: '92944',
    title: '青年教师交流发展论坛之对话“青椒“第二期',
    start: '2022-03-23T13:30:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '人事处',
    url2: 'http://today.hit.edu.cn/event/2022/03/22/92944',
    color: '#337ab7'
},
{
    id: '92862',
    title: '国际组织实习项目线上宣讲会预告',
    start: '2022-03-22T18:30:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '学工处',
    url2: 'http://today.hit.edu.cn/event/2022/03/20/92862',
    color: '#337ab7'
},
{
    id: '92769',
    title: '文化素质教育讲座：物理与创新漫谈',
    start: '2022-03-20T18:30:00',
    end: null,
    location: null,
    category:
        '讲座报告',
    department: '本科生院',
    url2: 'http://today.hit.edu.cn/event/2022/03/15/92769',
    color: '#337ab7'
},
{
    id: '92763',
    title: '马克思主义学院“世界大变局与疫情交织背景下的时代盛会”两会专题讲座预告',
    start: '2022-03-18T18:30:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '马克思主义学院',
    url2: 'http://today.hit.edu.cn/event/2022/03/15/92763',
    color: '#337ab7'
},
{
    id: '92736',
    title: '青年教师交流发展论坛之对话“青椒”第一期',
    start: '2022-03-17T12:00:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '人事处',
    url2: 'http://today.hit.edu.cn/event/2022/03/14/92736',
    color: '#337ab7'
},
{
    id: '92733',
    title: '【因斯图们交流会】仪器学院研究生微沙龙第三十六期活动——关注心理健康',
    start: '2022-03-16T18:00:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '仪器科学与工程学院',
    url2: 'http://today.hit.edu.cn/event/2022/03/14/92733',
    color: '#337ab7'
},
{
    id: '92653',
    title: '仪器学院寒假政务实习分享交流会',
    start: '2022-03-12T18:00:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '仪器科学与工程学院',
    url2: 'http://today.hit.edu.cn/event/2022/03/11/92653',
    color: '#337ab7'
},
{
    id: '92624',
    title: '文化素质教育讲座：“核”你有约',
    start: '2022-03-18T18:30:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '本科生院',
    url2: 'http://today.hit.edu.cn/event/2022/03/10/92624',
    color: '#337ab7'
},
{
    id: '92500',
    title: '德累斯顿工业大学硕士团审项目介绍及校友经验分享',
    start: '2022-03-12T18:30:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '国际合作部',
    url2: 'http://today.hit.edu.cn/event/2022/03/07/92500',
    color: '#337ab7'
},
{
    id: '92496',
    title: '德国亚琛工业大学4+2项目招生宣讲会',
    start: '2022-03-10T19:00:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '国际合作部',
    url2: 'http://today.hit.edu.cn/event/2022/03/07/92496',
    color: '#337ab7'
},
{
    id: '92358',
    title: '【生科青年说第3期】博士生郑善亮关于iASPP与内质网Ca2+稳态的研究分享',
    start: '2022-03-02T18:30:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '生命科学与技术学院',
    url2: 'http://today.hit.edu.cn/event/2022/03/02/92358',
    color: '#337ab7'
},
{
    id: '92313',
    title: '文化素质教育讲座：从物理，到“悟理”——对科技、文化与人生的若干思考',
    start: '2022-03-02T18:30:00',
    end: null,
    location: null,
    category: '讲座报告',

    department: '本科生院',
    url2: 'http://today.hit.edu.cn/event/2022/02/28/92313',
    color: '#337ab7'
},
{
    id: '92026',
    title: '【career讲坛】公职系列“银行校招考情介绍备考指导”讲座',
    start: '2022-01-18T19:00:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '学工处',
    url2: 'http://today.hit.edu.cn/event/2022/01/15/92026',
    color: '#337ab7'
}, {
    id: '91997',
    title: '伦敦国王学院Kawal Rhode教授线上学术讲座',
    start: '2022-01-20T18:30:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '医学与健康学院',
    url2: 'http://today.hit.edu.cn/event/2022/01/11/91997',
    color: '#337ab7'
}, {
    id: '91982',
    title: '【career讲坛】公职系列“人民银行考情介绍备考指导”讲座',
    start: '2022-01-11T19:00:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '学工处',
    url2: 'http://today.hit.edu.cn/event/2022/01/09/91982',
    color: '#337ab7'
}, {
    id: '91879',
    title: '“全驱系统方法---诞生背景、优越性及展望”段广仁院士报告通知',
    start: '2021-12-29T15:30:18',
    end: null,
    location: null,
    category: '讲座报告',
    department: '科工院',
    url2: 'http://today.hit.edu.cn/event/2021/12/29/91879',
    color: '#337ab7'
}, {
    id: '91825',
    title: '【生科青年说第2期】博士生徐珍媚关于G蛋白偶联受体结构与功能的研究分享',
    start: '2021-12-30T18:30:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '生命科学与技术学院',
    url2: 'http://today.hit.edu.cn/event/2021/12/26/91825',
    color: '#337ab7'
},

{
    id: '91817',
    title: '美国大学生数学建模竞赛经验分享会（第二期）',
    start: '2021-12-26T15:00:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '数学学院',
    url2: 'http://today.hit.edu.cn/event/2021/12/25/91817',
    color: '#337ab7'
},
{
    id: '91758',
    title: '第六届国际青年学者神舟论坛机电分论坛学术报告通知',
    start: '2021-12-23T19:00:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '机电学院',
    url2: 'http://today.hit.edu.cn/event/2021/12/23/91758',
    color: '#337ab7'
},
{
    id: '91737',
    title: '【新百年 睿思无界】哈尔滨工业大学建筑学院2021学术月——专题系列讲座',
    start: '2021-12-22T19:00:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '建筑学院',
    url2: 'http://today.hit.edu.cn/event/2021/12/22/91737',
    color: '#337ab7'
},
{
    id: '91731',
    title: '第六届国际青年学者神舟论坛化工与化学分论坛学术报告通知',
    start: '2021-12-26T08:00:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '化工化学学院',
    url2: 'http://today.hit.edu.cn/event/2021/12/22/91731',
    color: '#337ab7'
},
{
    id: '91708',
    title: '【Career讲坛】公职系列“军队文职考情介绍及备考”讲座预告',
    start: '2021-12-22T18:00:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '学工处',
    url2: 'http://today.hit.edu.cn/event/2021/12/21/91708',
    color: '#337ab7'
},
{
    id: '91696',
    title: '【新百年 睿思无界】哈尔滨工业大学建筑学院2021学术月——专题系列讲座',
    start: '2021-12-20T19:00:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '建筑学院',
    url2: 'http://today.hit.edu.cn/event/2021/12/20/91696',
    color: '#337ab7'
}, {
    id: '91678',
    title: '预告| 第六届哈尔滨工业大学国际青年学者神舟论坛-电气工程及自动化学院分论坛学术报告通知',
    start: '2021-12-21T08:00:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '电气工程及自动化学院',
    url2: 'http://today.hit.edu.cn/event/2021/12/20/91678',
    color: '#337ab7'
},
{
    id: '91655',
    title: '【从炘创新讲坛】特邀报告第2期：《数学分析》课程学习的点滴体会（多元积分学部分）',
    start: '2021-12-20T14:00:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '数学学院',
    url2: 'http://today.hit.edu.cn/event/2021/12/19/91655',
    color: '#337ab7'
}, {
    id: '91645',
    title: '哈尔滨工业大学国际青年学者神舟论坛宇航分论坛学术报告会',
    start: '2021-12-21T14:00:00',
    end: null,
    location: null,
    category: '会议',
    department: '航天学院',
    url2: 'http://today.hit.edu.cn/event/2021/12/17/91645',
    color: '#f0ad4e'
}, {
    id: '91621',
    title: '【Career讲坛】公职系列“国考、省考、选调生考情介绍及备考”讲座预告',
    start: '2021-12-18T15:00:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '学工处',
    url2: 'http://today.hit.edu.cn/event/2021/12/17/91621',
    color: '#337ab7'
}, {
    id: '91552',
    title: '【预告】美国大学生数学建模竞赛经验分享',
    start: '2021-12-19T15:00:00',
    end: null,
    location: null,
    category: '讲座报告',
    department: '数学学院',
    url2: 'http://today.hit.edu.cn/event/2021/12/14/91552',
    color: '#337ab7'
}, {
    id: '91548',
    title: '“炘火•学知”讲师团开展《数学分析》考前知识梳理',
    start: '2021-12-14T19:00:00',
    end: null,
    location: null,
    category: '其它',
    department: '数学学院',
    url2: 'http://today.hit.edu.cn/event/2021/12/14/91548',
    color: '#996600'
}]

export default {
    name: 'calender',

    components: {
        FullCalendar
    },

    data () {
        return {
            calendarOptions: {
@@ -50,9 +426,10 @@
                eventColor: '#2196f3', // 修改日程背景色
                timeGridEventMinHeight: '20', // 设置事件的最小高度
                aspectRatio: '1.5', // 设置日历单元格宽高比
                displayEventTime: true, // 是否显示事件时间
                displayEventTime: false, // 是否显示事件时间
                allDaySlot: false, // 周、日视图时，all-day不显示
                eventLimit: true, // 设置月日程，与all-day slot 的最大显示数量，超过的通过弹窗展示
                // eventLimitText: '更多',
                eventTimeFormat: {
                    hour: 'numeric',
                    minute: '2-digit',
@@ -64,45 +441,72 @@
                    meridiem: false,
                    hour12: false // 设置时间为24小时制
                },
                events: [
                    {
                        id: 1,
                        title: '09:30~11:30 小破孩',
                        start: '2022-03-11', // 事件开始时间必须
                        end: '2022-03-20', // 事件结束事件，可选
                        allDay: false, // 是否为全天事件，可选
                        // color: '#f08f00',
                        // textColor: '#000',
                        className: 'read-all-day'
                    },
                    {
                        id: 3,
                        title: '09:30~11:30 小1破孩',
                        start: '2022-03-11',
                        end: '2022-03-20',
                        color: '#f08f01'
                    },
                    {
                        id: 2,
                        title: '9:30~14:30 项目会议',
                        start: '2022-03-21',
                        end: '2022-03-25',
                        color: '#6bb377'
                    }
                ], // 日程数组

                // 日程函数
                events (time, callback) {
                    // const startTime = getTime(time.start).withoutTime
                    // const endTime = getTime(time.end).withoutTime

                    const events = []

                    timeEvents.forEach(item => {
                        events.push({
                            id: item.id,
                            title: item.title,
                            start: moment(item.start).format('YYYY-MM-DD HH:mm:ss'), // 事件开始时间必须
                            // end: item.endTime, // 事件结束事件，可选
                            // allDay: item.allDay, // 是否为全天事件，可选
                            color: item.color,
                            textColor: '#fff'
                            // className: item.className
                        })
                    })

                    callback(events)
                },

                // [
                //     {
                //         id: 1,
                //         title: '09:30~11:30 小破孩',
                //         start: '2022-03-11', // 事件开始时间必须
                //         end: '2022-03-20', // 事件结束事件，可选
                //         allDay: false, // 是否为全天事件，可选
                //         // color: '#f08f00',
                //         // textColor: '#000',
                //         className: 'read-all-day'
                //     },
                //     {
                //         id: 3,
                //         title: '09:30~11:30 小1破孩',
                //         start: '2022-03-11',
                //         end: '2022-03-20',
                //         color: '#f08f01'
                //     },
                //     {
                //         id: 2,
                //         title: '9:30~14:30 项目会议',
                //         start: '2022-03-21',
                //         end: '2022-03-25',
                //         color: '#6bb377'
                //     }
                // ]

                // 事件
                editable: true, // 是否可以进行（拖动、缩放）修改
                eventStartEditable: true, // Event日程开始时间可以改变，默认为true，若为false,则表示开始结束时间范围不能拉伸，只能拖拽
                eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认为true,若为false，则表示开始结束时间范围不能拉伸，只能拖拽
                selectable: true, // 是否可以选中日历格
                selectMirror: true,
                editable: false, // 是否可以进行（拖动、缩放）修改
                eventStartEditable: false, // Event日程开始时间可以改变，默认为true，若为false,则表示开始结束时间范围不能拉伸，只能拖拽
                eventDurationEditable: false, // Event日程的开始结束时间距离是否可以改变，默认为true,若为false，则表示开始结束时间范围不能拉伸，只能拖拽
                selectable: false, // 是否可以选中日历格
                selectMirror: false,
                selectMinDistance: 0, // 选中日历格的最小距离
                weekends: true,
                weekMode: 'liquid', // 在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。
                navLinks: true, // 天链接
                selectHelper: false,
                selectEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认为true，允许
                dayMaxEvents: true,
                dayMaxEvents: false,
                dateClick: this.handleDateClick, // 日期点击
                eventMouseEnter: this.handleEventMouseEnter,
                eventsSet: this.handleEvents, // 事件点击
                eventClick: this.handleEventClick, // 日程点击信息展示
                eventDrop: this.handleEventDrop, // 日程拖动事件
@@ -110,21 +514,21 @@
                select: this.handleDateSelect,
                customButtons: {
                    prev: { // this overrides the prev button
                        text: 'PREV',
                        click: () => {
                            this.prev()
                        // text: 'PREV',
                        click: (e) => {
                            this.prev(e)
                        }
                    },
                    next: { // this overrides the next button
                        text: 'PREV',
                        // text: 'PREV',
                        click: () => {
                            this.next()
                        }
                    },
                    today: {
                        text: '今天',
                        click: () => {
                            this.today()
                        click: (e) => {
                            this.today(e)
                        }
                    }
                }
@@ -137,15 +541,16 @@
    },

    methods: {
        prev () {

        prev (e) {
            this.calendarApi.prev()
        },
        // 切换下一个按钮事件
        next () {
        next (e) {
            this.calendarApi.next()
        },
        // 点击今天按钮
        today () {
        today (e) {
            this.calendarApi.today()
        },
        // 日程保存
@@ -185,27 +590,64 @@
        },
        // 日程事件点击
        handleEvents (info) {
            console.log('handleEvents.info:', info)
            // console.log('handleEvents.info:', info)
            // this.currentEvents = events
        },
        handleWeekendsToggle () {
            console.log('handleWeekendsToggle')
            this.calendarOptions.weekends = !this.calendarOptions.weekends
        },
        // 日期点击
        handleDateClick (selectInfo) {
            if (confirm('您是否要在【' + selectInfo.dateStr + '】添加一个新的事件？')) {
                // 父组件直接调用子组件方法
                this.$refs.eventDialogue.openDialog('add')
                // 父组件直接修改子组件变量
                // this.$refs['eventDialogue'].dialogVisible = true
            }

            // if (confirm('您是否要在【' + selectInfo.dateStr + '】添加一个新的事件？')) {
            //     // 父组件直接调用子组件方法
            //     this.$refs.eventDialogue.openDialog('add')
            //     // 父组件直接修改子组件变量
            //     // this.$refs['eventDialogue'].dialogVisible = true
            // }

        },
        // 日程点击信息展示
        handleEventClick (info) {
            console.log('handleEventClick.info:', info)
            info.el.style.borderColor = 'red'
            this.$refs.eventDialogue.openDialog('view', info)
            // console.log('handleEventClick.info:', info)
            // info.el.style.borderColor = 'red'
            // this.$refs.eventDialogue.openDialog('view', info)
        },
        handleDateSelect (startDate, endDate, allDay, jsEvent, view) {
            console.log(startDate, endDate, allDay, jsEvent, view)
        },
        handleEventMouseEnter (info) {
            const col = info.event.borderColor
            const eve = info.event._def.extendedProps
            const category = info.event._def.extendedProps.category

            tippy(info.el, {
                // content:"<div style='width: 280px;background-color:#FAFAFA;padding:5px;font-size:14px;z-index:99999'>" +
                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议名称：" + info.event.title+"</div>" +
                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议类型："+eve.type+"</div>" +
                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议时间："+eve.times+"</div>" +
                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议状态："+eve.status+"</div>" +
                //         "</div>",
                content: `<div style='width: 260px;background-color:#FAFAFA;padding:5px;font-size:14px;z-index:99999;'>
                  <div style='display:flex;color: #666666;overflow: hidden;' class="${eve.category == 1 ? 'hidden' : ''}">
                    <div><span style='display:inline-block;width:6px;height:6px;background-color:${col};border-radius:50%;margin:0 5px;'></span>活动名称： </div>
                    <div style="width:161px;white-space:normal;overflow: auto;table-layout:fixed; word-break: break-all; height:auto;display:inner-block">${info.event.title}</div>
                  </div>
       
                </div>`,
                //            <div style='color: #666666;overflow: hidden;' class="${eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议类型：${eve.type}</div>
                //   <div style='color: #666666;overflow: hidden;' class="${eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议时间：${eve.times}</div>
                //   <div style='color: #666666;overflow: hidden;' class="${eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议状态：${eve.status}</div>
                //   <div style='color: #666666;overflow: hidden;' class="${eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>年份：${eve.year}</div>
                //   <div style='color: #666666;overflow: hidden;' class="${eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>领域角色：${eve.depRoleName}</div>
                //   <div style='color: #666666;overflow: hidden;' class="${eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>姓名：${eve.name}</div>
                theme: 'light-border', // 主题选取
                // trigger: 'click', //触发类型
                interactive: true, // 可交互的
                placement: 'top-start', // 悬浮框位置
                allowHTML: true, // 是否允许html文本
                zIndex: 99999
            })
        },
        // 日程事件触发
        eventClick (info) {
@@ -214,13 +656,16 @@
        },
        // 日程拖动事件
        handleEventDrop (info) {
            this.$refs.eventDialogue.eventFormModel.start = info.event.start
            this.$refs.eventDialogue.eventFormModel.end = info.event.end
            // this.$refs.eventDialogue.eventFormModel.start = info.event.start
            // this.$refs.eventDialogue.eventFormModel.end = info.event.end
        },
        // 日程缩放事件
        eventResize (info) {
            this.$refs.eventDialogue.eventFormModel.start = info.event.start
            this.$refs.eventDialogue.eventFormModel.end = info.event.end
            // this.$refs.eventDialogue.eventFormModel.start = info.event.start
            // this.$refs.eventDialogue.eventFormModel.end = info.event.end
        },
        closeCurrent () {
            this.$store.commit('SET_CALENDERSHOW', false)
        }
    }
}
@@ -238,13 +683,33 @@
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 4px 2px #dddddd;

    .header {
        position: relative;
        padding: 0 10px;
        line-height: 40px;
        background: #2196f3;
        color: #fff;
        font-size: 18px;
        .celebrate {
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }
        .close {
            position: absolute;
            right: 10px;
            top: 0;
            left: auto;
            bottom: 0;
            margin: auto;
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
    }

    .content {
@@ -252,9 +717,5 @@
        padding: 0 10px 10px 10px;
        height: calc(100% - 50px);
    }
}
.read-all-day {
    background: red;
    color: green;
}
</style>