开源我最近写的日历控件吧

css/index.css

+
+        html, body {
+            width: 100%;
+            height: 100%;
+            padding: 0;
+            margin: 0;
+        }
+
+        ul, li {
+            padding: 0;
+            margin: 0;
+            list-style: none;
+        }
+
+        #calendar {
+            width: 600px;
+        }
+
+        .calendar {
+            position: relative;
+            font-family: "Chinese Quote", "Microsoft YaHei";
+            font-size: 14px;
+        }
+
+
+        .calendar-header {
+            padding: 11px 16px 11px 0;
+            text-align: center;
+        }
+
+        .calendar-select {
+            line-height: 1.5;
+            color: rgba(0, 0, 0, 0.65);
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            display: inline-block;
+            position: relative;
+            outline: 0;
+        }
+
+        .calendar-table {
+            width: 100%;
+            height: 100%;
+        }
+
+        .calendar-column-header,
+        .calendar-cell {
+            width: 14%
+        }
+
+        .calendar-column-header {
+            text-align: center;
+            font-weight: 400;
+            padding-right: 12px;
+        }
+
+        .calendar-table {
+            table-layout: fixed;
+        }
+
+        .calendar-cell {
+            color: rgba(0, 0, 0, 0.65);
+        }
+
+
+        .calendar-cell.calendar-last-month-cell,
+        .calendar-cell.calendar-next-month-cell {
+            color: rgba(0, 0, 0, 0.25);
+        }
+
+        .calendar-date {
+            padding: 4px 8px;
+            border-top: 1px solid #e8e8e8;
+        }
+
+        .calendar-cell.calendar-thisMonth .calendar-date,
+        .calendar-cell.calendar-today .calendar-date {
+            border-top-color: #1890ff;
+            background-color: #e6f7ff;
+        }
+
+        .calendar-date:hover {
+            background: #e6f7ff;
+        }
+
+
+        .calendar-value {
+            text-align: center;
+        }
+
+        .calendar-content {
+            height: 60px;
+            overflow-x: hidden;
+            overflow-y: auto;
+            position: static;
+            width: auto;
+            left: auto;
+            bottom: auto;
+        }
+
+
+        .calendar-select {
+            font-size: 13px;
+            vertical-align: middle;
+        }
+
+        .btn.calendar-select-active {
+            border-color: #40a9ff;
+            z-index: 2;
+        }
+
+        .calendar-select:first-child {
+            margin-right: 10px;
+        }
+
+        .calendar-year-select,
+        .calendar-month-select {
+            border-radius: 4px;
+            border: 1px solid #d9d9d9;
+        }
+
+        .calendar-year-select:hover,
+        .calendar-month-select:hover {
+            border-color: #40a9ff;
+        }
+
+        .calendar-year-text,
+        .calendar-month-text {
+            margin: 0 10px;
+            line-height: 28px;
+        }
+
+        .calendar-icon {
+            margin: 0 10px 0 0;
+            position: relative;
+        }
+
+        .calendar-icon * {
+            color: rgba(0, 0, 0, 0.25);
+        }
+
+        .btn {
+            float: left;
+            padding: 5px 10px;
+            border: 1px solid #d9d9d9;
+            border-radius: 4px;
+        }
+
+        .btn-group {
+            float: left;
+            display: inline;
+            padding: 0 8px;
+        }
+
+        .btn-group > .btn {
+            position: relative;
+            float: left;
+        }
+
+        .btn-group > .btn:hover {
+            z-index: 2;
+            border-color: #40a9ff;
+        }
+
+        .btn-group .btn + .btn {
+            margin-left: -1px;
+        }
+
+        .btn-group > .btn:first-child {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        .btn-group > .btn:last-child:not(:first-child) {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+
+        /*dropdown-menu*/
+        ul.dropdown-month, .dropdown-month li,
+        ul.dropdown-year, .dropdown-year li {
+            list-style: none;
+            text-align: center;
+            padding: 0;
+            margin: 0;
+        }
+
+        .dropdown-month.open,
+        .dropdown-year.open {
+            display: inline-block;
+            margin-top: 1px;
+            width: 100%;
+        }
+
+        .dropdown-month,
+        .dropdown-year {
+            height: 250px;
+            overflow-y: auto;
+            overflow-x: hidden;
+            display: none;
+            position: absolute;
+            left: 0;
+            top: 100%;
+            background: #fff;
+            width: 50px;
+            border: 1px solid #eee;
+            box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.175);
+            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175)
+        }
+
+        .dropdown-month .month-item,
+        .dropdown-year .year-item {
+            font-size: 12px;
+            position: relative;
+            display: block;
+            padding: 5px 2px;
+            line-height: 20px;
+            font-weight: normal;
+            color: rgba(0, 0, 0, 0.65);
+            white-space: nowrap;
+            cursor: pointer;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            -webkit-transition: background 0.3s ease;
+            transition: background 0.3s ease;
+        }
+
+        .month-item:hover,
+        .year-item:hover {
+            background: #e6f7ff;
+        }
+
+        .year-item.active {
+            background-color: #fafafa;
+            font-weight: 600;
+            color: rgba(0, 0, 0, 0.65);
+        }
+
+        /*自定义事件样式*/
+        ul.events li {
+            white-space: nowrap;
+            font-size: 13px;
+            padding: 1px 2px;
+        }
+
+        ul.events li span {
+            margin-left: 5px;
+        }
+
+        ul.events li:before {
+            content: "*"
+        }
+
+        /*scrollbar*/
+        *::-webkit-scrollbar {
+            width: 8px;
+            background-color: #fff;
+        }
+
+        *::-webkit-scrollbar-thumb {
+            background-color: #ddd;
+            border-radius: 8px;
+            -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, .3);
+        }
+   
\ No newline at end of file

index.html

 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
-    <link rel="stylesheet" href="src/style.css">
-</head>
-<body>
-    <div class="app">
-        <img src="src/logo.svg" width="100px">
-        <h1>欢迎使用 Cloud IDE</h1>
-        官网：<a href="https://ide.csdn.net" target="_blank">https://ide.csdn.net</a>
-    </div>
-</body>
-</html>
\ No newline at end of file
+    <script src="./js/jquery-1.11.3.min.js"></script>
+    <link rel="stylesheet" href="./css/raoCalendar.css" />
+    <link rel="stylesheet" href="./css/index.css" />
+    <script src="./js/raoCalendar.js"></script>
+    <script>
+      $(document).ready(function () {
+        var data = [
+          { startDate: "2018-6-10", name: "事件1" },
+          { startDate: "2018-7-10", name: "事件1" },
+          { startDate: "2018-8-10", name: "事件1" },
+          { startDate: "2018-9-10", name: "事件1" },
+          { startDate: "2018-10-10", name: "事件1" },
+          { startDate: "2018-11-1", name: "事件2" },
+          { startDate: "2018-11-1", name: "事件11" },
+          { startDate: "2018-12-1", name: "事件12" },
+          { startDate: "2018-12-1", name: "事件13" },
+          { startDate: "2018-12-1", name: "事14" },
+          { startDate: "2019-1-10", name: "事件14" },
+          { startDate: "2019-2-10", name: "事件14" },
+          { startDate: "2019-3-10", name: "事件14" },
+          { startDate: "2019-4-10", name: "事件14" },
+          { startDate: "2019-5-10", name: "事件14" },
+          { startDate: "2019-6-10", name: "事件14" },
+          { startDate: "2019-7-10", name: "事件14" },
+          { startDate: "2019-8-10", name: "事件14" },
+          { startDate: "2019-9-10", name: "事件14" },
+          { startDate: "2019-10-10", name: "事件14" },
+          { startDate: "2019-11-10", name: "事件14" },
+          { startDate: "2019-12-10", name: "事件14" },
+          { startDate: "2020-1-10", name: "事件14" },
+          { startDate: "2020-2-10", name: "事件14" },
+        ];
+
+        $(".calendar").calendar({
+          data: data,
+          mode: "month",
+          //  maxEvent: 3,
+          //showModeBtn: false
+          //  newDate: "2018-04-1",
+          cellClick: function (events) {
+            console.log(events);
+            //viewCell的事件列表
+            art.dialog.parent.location =
+              "${ctx}/yzself/tsakManage/my-working-manage!addWorking.action";
+          },
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div class="calendar"></div>
+  </body>
+</html>

js/raoCalendar.js

+var Calendar = function (element, options) {
+
+    this.el = $(element);
+    this.options = $.extend(true, {}, this.options, options);
+    this.init();
+}
+Calendar.prototype = {
+
+    options: {
+        mode: "month",
+        weekMode: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
+        newDate: new Date(),
+        width: null,
+        height: null,
+        shwoLunar: false,
+        showModeBtn: true,
+        showEvent: true,
+        maxEvent: null,
+    },
+
+    init: function () {
+        var me = this,
+            el = me.el,
+            opts = me.options;
+
+        el.addClass("calendar");
+        opts.width = el.width();
+        opts.height = el.height();
+
+        typeof (opts.newDate) == "string" ? opts.newDate = me._getDateByString(opts.newDate) : "";
+
+        me._createCalendar();
+
+        //绑定事件
+        //changeMode
+        el.on("click", ".calendar-mode-select .btn", function (e) {
+            e.stopPropagation();
+            var modeText = $(this).text();
+            var mode = modeText == "月" ? "month" : "year";
+            me.changeMode(mode);
+        })
+        //calendar-cell日期点击事件
+        el.on("click", ".calendar-cell", function (e) {
+            e.stopPropagation();
+            $(".dropdown-month").removeClass("open");
+            $(".dropdown-year").removeClass("open");
+
+            var cellDate = $(this).attr("title");
+
+            var viewData = me.viewData;
+            var year = parseInt(cellDate.split("年")[0]);
+            var month = parseInt(cellDate.split("年")[1].split("月")[0]);
+            var date = parseInt(cellDate.split("年")[1].split("月")[1].split("日")[0]);
+            console.log(cellDate)
+            // if (opts.mode == "year") {
+            //
+            //     if (opts.cellClick) opts.cellClick.call(me, `${year}-${month < 10 ? '0' + String(month) : month}-${date < 10 ? '0' + String(date) : date}`)
+            // } else if (opts.mode == "month" && month == opts.newDate.getMonth()) {
+
+            if (opts.cellClick) opts.cellClick.call(me, `${year}-${month < 10 ? '0' + String(month) : month}-${date < 10 ? '0' + String(date) : date}`)
+            // }
+
+        })
+        // el.on("click", ".calendar-cell")
+        //年份下拉
+        el.on("click", ".calendar-year-select", function (e) {
+            e.stopPropagation();
+            $(".dropdown-month").removeClass("open");
+            $(".dropdown-year").toggleClass("open");
+            //创建下拉数据
+            var yearText = opts.newDate.getFullYear();
+            var s = '';
+            for (var i = 0; i < 21; i++) {
+                if (i == 10) {
+                    s += '<li class="year-item active">'
+                } else {
+                    s += '<li class="year-item">'
+                }
+                s += '<span class="year-check">' + (yearText - 10 + i) + '</span>'
+                s += '<span >年</span>'
+                s += '</li>'
+            }
+            me.el.find(".dropdown-year").html(s);
+        })
+        //年份改变
+        el.on("click", ".year-item", function (e) {
+            e.stopPropagation();
+            $(".dropdown-year").removeClass("open");
+            var yearText = $(this).text();
+            var yearNum = yearText.split("年")[0];
+            if (yearNum == opts.newDate.getFullYear()) return;
+            opts.newDate.setFullYear(yearNum);
+            opts.mode == "month" ? me._refreshCalendar(opts.newDate) : me._refreshYearCalendar(opts.newDate);
+            $(".calendar-year-text").text(yearText);
+
+
+        })
+        //触发选择月份
+        el.on("click", ".calendar-month-select", function (e) {
+            e.stopPropagation();
+            $(".dropdown-year").removeClass("open");
+            $(".dropdown-month").toggleClass("open");
+        })
+        //月份check事件
+        el.on("click", ".month-item", function (e) {
+            e.stopPropagation();
+            $(".dropdown-month").removeClass("open");
+            var monthText = $(this).text();
+            var monthNum = monthText.split("月")[0];
+            if (monthNum == (opts.newDate.getMonth() + 1)) return;
+
+            var beforeDate = opts.newDate.getDate();
+            opts.newDate.setMonth(monthNum - 1);
+            var afterDate = opts.newDate.getDate();
+
+            //处理日期30号，切换到2月不存在30号
+            if (beforeDate != afterDate) {
+                opts.newDate.setDate(opts.newDate.getDate() - 1);
+            }
+            me._refreshCalendar(opts.newDate);
+            $(".calendar-month-text").text(monthText);
+
+        })
+        $(document.body).on("click", function (e) {
+            $(".dropdown-month").removeClass("open");
+            $(".dropdown-year").removeClass("open");
+        })
+    },
+    //公开方法
+    changeMode: function (mode) {
+        var me = this;
+        if (mode == me.options.mode) return;
+        me.options.mode = mode;
+        me._createCalendar();
+    },
+
+
+    getViewDate: function (viewDate) {
+        var me = this,
+            opts = me.options,
+            mode = opts.mode,
+            data = opts.data;
+        if (!data || data.length == 0) return [];
+        var viewData = {},
+            modeYear = viewDate.getFullYear(),
+            modeMonth = null;
+        if (mode == "month") {
+            modeMonth = viewDate.getMonth()
+        }
+        ;
+
+
+        //筛选视图数据并转化未对象 要不要转化为属性
+        for (var i = 0; i < data.length; i++) {
+            var item = data[i];
+
+
+            var start = me._getDateByString(item.startDate);
+
+            var year = start.getFullYear();
+            var month = start.getMonth();
+            var date = start.getDate();
+            if (modeMonth && year == modeYear && modeMonth == month) {
+                if (!viewData[date]) viewData[date] = [];
+                viewData[date].push(item);
+            } else if (!modeMonth && year == modeYear) {
+                if (!viewData[month]) viewData[month] = [];
+
+                viewData[month].push(item);
+
+            }
+
+        }
+
+        return viewData;
+
+    },
+    _getDateByString: function (stringDate) {
+        var me = this;
+        var year = stringDate.split("-")[0];
+        var month = parseInt(stringDate.split("-")[1]) - 1;
+        var date = stringDate.split("-")[2];
+
+        return new Date(year, month, date);
+    },
+    //私有方法
+    _createCalendar: function () {
+        var me = this;
+        var dateMode = me.options.mode;
+
+
+        me._createView()
+        //dateMode == "year" ? me._createYearView() : me._createMonthView();
+
+    },
+    _createView: function () {
+        var me = this,
+            el = me.el,
+            opts = me.options,
+            mode = opts.mode,
+            newDate = opts.newDate,
+            html = '';
+        html += me._createToolbar();
+        html += '<div class="calendar-body">';
+        html += '<table class="calendar-table" cellspacing="0">'
+        if (mode == "month") {
+            html += me._createHeader();
+        }
+        html += me._createBody();
+        html += '</table>'
+        html += '</div>'
+        el.html(html);
+
+
+        if (mode == "month") {
+            me._refreshCalendar(newDate);
+        } else {
+            me._refreshYearCalendar(newDate);
+        }
+
+    },
+    _createToolbar: function () {
+        var me = this,
+            newDare = me.options.newDate,
+            mode = me.options.mode,
+            showModeBtn = me.options.showModeBtn,
+            s = '';
+
+        var year = newDare.getFullYear();
+        var month = newDare.getMonth() + 1;
+
+        s += '<div class="calendar-header">'
+        s += '<div class="calendar-select calendar-year-select" >'
+        s += '<span class="calendar-year-text"> ' + year + '年</span >'
+        s += '<span class="calendar-icon"><i class="fa fa-angle-down"></i></span>'
+        s += '<ul id="dropdown-year" class="dropdown-year">'
+        s += '</ul>'
+        s += '</div > '
+
+        if (mode == "month") {
+
+            s += '<div class="calendar-select  calendar-month-select">'
+            s += '<span class="calendar-month-text"> ' + month + '月</span >'
+            s += '<span class="calendar-icon"><i class="fa fa-angle-down"></i></span>'
+
+            //创建月份下拉(写死)
+            s += '<ul class="dropdown-month">'
+            for (var i = 1; i <= 12; i++) {
+                s += '<li class="month-item">'
+                s += '<span class="month-check">' + i + '</span>'
+                s += '<span >月</span>'
+                s += '</li>'
+            }
+            s += '</ul>'
+            s += '</div > '
+        }
+
+        if (showModeBtn) {
+            s += '<div class="calendar-select  calendar-mode-select">'
+            s += '<div class="btn-group">'
+
+            if (mode == "month") {
+                s += '<span  class="btn calendar-select-active">月</span>'
+                s += '<span class="btn">年</span>'
+            } else {
+                s += '<span  class="btn">月</span>'
+                s += '<span class="btn calendar-select-active">年</span>'
+            }
+            s += '</div>'
+            s += '</div>'
+        }
+
+        s += '</div >'
+        return s;
+    },
+    _createHeader: function () {
+        var me = this,
+            opts = me.options,
+            weekMode = opts.weekMode;
+        var s = '<thead><tr>'
+        weekMode.forEach(function (item) {
+            s += ' <th class="calendar-column-header" title="周' + item + '"><span class="calendar-column-header-inner">' + item + '</span></th>'
+        })
+        s += '</thead></tr>'
+        return s;
+    },
+    _createBody: function () {
+        var me = this;
+        var s = ' <tbody class="calendar-tbody">'
+        s += '</tbody>'
+        return s;
+    },
+    _refreshYearCalendar: function (newDate) {
+        var me = this,
+            showEvent = me.options.showEvent,
+            maxEvent = me.options.maxEvent,
+            s = '';
+
+        //每次都重新获取会不会影响性能
+        me.viewData = viewData = me.getViewDate(newDate);
+
+        var year = newDate.getFullYear(), month = newDate.getMonth();
+        //四行三列
+        for (var i = 0; i < 4; i++) {
+            s += '<tr>'
+            for (var l = 0; l < 3; l++) {
+                renderMonth = i * 3 + l;
+                if (month == renderMonth) {
+                    s += '<td title="' + year + '年' + (renderMonth + 1) + '月" class="calendar-cell calendar-thisMonth">';
+                } else {
+                    s += '<td title="' + year + '年' + (renderMonth + 1) + '月" class="calendar-cell">';
+                }
+                s += '<div class="calendar-date">';
+                s += '<div class="calendar-value">' + (renderMonth + 1) + '月</div>';
+                s += '<div class="calendar-content"><ul class="events">'
+
+                if (showEvent && viewData[renderMonth]) {
+                    if (maxEvent && viewData[renderMonth].length > maxEvent) {
+                        s += viewData[renderMonth].length + "个事件";
+                    } else {
+                        viewData[renderMonth].forEach(function (item) {
+                            s += '<li><span>' + item.name + '</span></li>'
+                        })
+                    }
+                }
+                s += '</ul ></div > ';
+                s += '</div></td>';
+            }
+            s += '</tr>'
+        }
+
+        me.el.find(".calendar-tbody").html(s);
+    },
+    _refreshCalendar: function (newDate) {
+        var me = this,
+            showEvent = me.options.showEvent,
+            maxEvent = me.options.maxEvent,
+            s = '';
+
+        me.viewData = viewData = me.getViewDate(newDate);
+
+        var _newDate = me._cloneDate(newDate);
+        //当前date
+        var nowNum = _newDate.getDate();
+
+        //第一天周几
+        _newDate.setDate(1);
+        var weekDay = _newDate.getDay() == 0 ? 7 : _newDate.getDay();
+
+
+        //视图第一天
+        var viewDate = me._cloneDate(_newDate);
+        viewDate.setDate(viewDate.getDate() - weekDay + 1);
+
+        //当前第几周/行 (暂不处理)
+        var spileDate = (newDate.getTime() - viewDate.getTime()) / (1000 * 60 * 60 * 24);
+
+        renderDate = me._cloneDate(viewDate);
+
+
+        //固定六行
+        for (var i = 0; i < 6; i++) {
+            s += '<tr>'
+            for (var l = 0; l < 7; l++) {
+
+                var year = renderDate.getFullYear();
+                var month = renderDate.getMonth() + 1;
+                var date = renderDate.getDate();
+
+                if (renderDate.getMonth() < newDate.getMonth()) {
+                    s += '<td title="' + year + '年' + month + '月' + date + '日" class="calendar-cell calendar-last-month-cell">';
+                } else if (renderDate.getMonth() > newDate.getMonth()) {
+                    s += '<td title="' + year + '年' + month + '月' + date + '日" class="calendar-cell calendar-next-month-cell">';
+                } else if (date == nowNum) {
+                    s += '<td title="' + year + '年' + month + '月' + date + '日" class="calendar-cell ">'; //calendar-today
+                } else {
+                    s += '<td title="' + year + '年' + month + '月' + date + '日" class="calendar-cell">';
+                }
+                s += '<div class="calendar-date">';
+                s += '<div class="calendar-value">' + date + '</div>';
+                s += '<div class="calendar-content"><ul class="events">'
+                if (showEvent && viewData[date] && renderDate.getMonth() == newDate.getMonth()) {
+                    if (maxEvent && viewData[date].length > maxEvent) {
+                        s += viewData[date].length + "个事件";
+                    } else {
+                        viewData[date].forEach(function (item) {
+                            s += '<li><span>' + item.name + '</span></li>'
+                        })
+                    }
+                }
+                s += '</ul ></div > ';
+                s += '</div></td>';
+
+                renderDate.setDate(renderDate.getDate() + 1);
+
+            }
+            s += '</tr>'
+        }
+        me.el.find(".calendar-tbody").html(s);
+    },
+    _cloneDate: function (date) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    },
+
+}
+$.fn.calendar = function (options) {
+
+    var isSTR = typeof options == "string",
+        args, ret;
+
+    if (isSTR) {
+        args = $.makeArray(arguments)
+        args.splice(0, 1);
+    }
+
+    var name = "calendar",
+        type = Calendar;
+
+    var jq = this.each(function () {
+        var ui = $.data(this, name);
+
+        if (!ui) {
+            ui = new type(this, options);
+            $.data(this, name, ui);
+        }
+        if (isSTR) {
+            ret = ui[options].apply(ui, args);
+        }
+    });
+
+    return isSTR ? ret : jq;
+};
\ No newline at end of file

src/logo.svg

-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="37px" height="28px" viewBox="0 0 37 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>开发云logo备份@40x</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="开发云logo备份@40x" transform="translate(2.000000, 2.000000)" stroke="#1890FF">
-            <path d="M22.8925411,9.29032948 L22.8925411,6.7248501 C22.8925411,3.01081795 19.8817231,-1.77635684e-15 16.167691,-1.77635684e-15 C12.4536588,-1.77635684e-15 9.44284085,3.01081795 9.44284085,6.7248501 L9.44284085,7.87271787 L9.44284085,7.87271787 L7.66157921,7.87271787 C3.43020585,7.87271787 0,11.3029237 0,15.5342971 C0,19.7656704 3.43020585,23.1958763 7.66157921,23.1958763 L23.6762383,23.1958763 L23.6762383,23.1958763" id="路径-28" stroke-width="4" stroke-linecap="round"></path>
-            <path d="M33.2652638,20.4086185 C33.0827033,20.2352897 32.8345087,20.1392132 32.5943359,20.1433691 C32.3478429,20.1482585 32.1246865,20.2509357 31.9659488,20.4335544 C30.544846,22.0690553 28.0684903,22.2455623 27.0696344,22.2455623 C25.2163178,22.2455623 23.798132,21.7732472 22.8544575,20.8423074 C21.9579423,19.9578168 21.4880498,18.6552834 21.4571774,16.9706441 C21.3852228,13.0654885 23.5839699,9.02587465 27.388082,9.02587465 C29.2051781,9.02587465 30.6155851,10.3220519 31.1374989,10.8794423 C31.3188438,11.0728177 31.5699556,11.1842958 31.8273877,11.1850292 C32.0860352,11.1921188 32.3245063,11.0764847 32.4864041,10.8845762 L32.6344458,10.7085581 C32.938308,10.3486991 33.0754106,9.88371809 33.0199862,9.39991297 C32.9645617,8.91195187 32.7209857,8.46579505 32.3347161,8.14431767 C31.4027098,7.36812705 29.8184937,6.44329897 27.5648083,6.44329897 C25.2231243,6.44329897 22.9103681,7.52654327 21.2191925,9.41555902 C19.4426923,11.4001623 18.4936698,14.1025281 18.5476357,17.0241829 C18.5906626,19.3679119 19.3554231,21.3390694 20.7597528,22.7249669 C22.2681249,24.2132972 24.4785403,25 27.152528,25 C30.2896017,25 32.2338338,24.066371 33.3124232,23.2830908 C33.7300514,22.9799486 33.9801908,22.5020108 33.9989087,21.9720009 C34.0173836,21.4397908 33.8005475,20.9180929 33.404068,20.5408765 L33.2652638,20.4086185 Z" id="Fill-9457" fill="#1890FF" fill-rule="nonzero"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file

src/style.css

-.app{
-    text-align: center;
-}
-.app img{
-    margin-top: 32px;
-}
\ No newline at end of file