<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragment :: head(~{::title})">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}" th:src="@{/images/favicon.ico}">
    <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <title>归档</title>
    <style>
        .w {
            /*overflow: hidden;*/
            margin: 100px auto;
            width: 850px;

            padding: 0 20px;
        }
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        a {
            color: black;
        }
        a:hover {
            color: #00a8c6 !important;
        }
        .margin-left-small {
            margin-left: 10px;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .w .left_content {
            float: left;
            width: 150px;
            margin-top: 50px;
        }
        .left_content li {
            color: #616161;
            height: 32px;
            padding-bottom: 2px;
        }
        .left_content li a{

            color: #616161;
            border-bottom: 1px solid #999;
        }

        .w .time_line {
            position: relative;
            width: 100%;
            height: 100%;
            /*background-color: pink;*/
            border-left:  3px 	rgba(0,0,0,.1) solid;
        }
        .time_line>h3 {

            font-weight: 400 ;
            margin-left: 15px;
            font-size: 16px;
            color: #555
        }
        .big_dot {
            width: 30px;
            height: 30px;
            position: absolute;
            left: -17px;
            top: -5px;

            border-radius: 50%;
            background-color:#00B5AD;

        }
        .big_dot i {
            position: relative;
            left: 7px;
            line-height: 30px;
            color: white;
        }
        .year h3 {
            margin-left: 30px;
            margin-top: 25px;

        }
        .blog {
            position: relative;
            width: 552px;
            height: 90px;
            /*background-color: #1abc9c;*/
            margin: 20px 20px 0px 30px;
            border: 1px rgba(0,0,0,.3);
            box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
        }
        .blog .dot {
            display: block;
            position: absolute;
            top: 10px;
            left: -38px;
            width: 12px;
            height: 12px;
            background-color:#00B5AD;
            border-radius: 50%;
        }
        .blog .left_pointing {
            width: 0;
            height: 0;
            position: absolute;
            top: 15px;
            left: -20px;
            border: 10px solid transparent;
            border-right-color: honeydew;
        }
        .blog .blog_title {
            width: 100%;
            height: 40px;
            background-color: white;
            border-bottom: 1px rgba(0,0,0,.1) solid;
        }
        .blog_title h4 {
            line-height: 40px;
            margin-left: 15px;

        }
        .blog_title a {
            color: #999;
        }
        .blog .blog_info {
            position: relative;
            width: 100%;
            height: 50px;
            padding-left: 15px;
        }

        .blog ul li {
            display: inline;
            line-height: 50px;
            font-size: 13px;
            color: #898d92;
        }
        .blog ul li a {
            color: #898d92;
        }

        .blog_info .flag {
            position: absolute;
            right: 10px;
            top: 10px;
        }
        .tags {
            margin-left: 20px!important;
        }
        .tags span:hover {
            color: #00a8c6;
        }
        .page {
            overflow: hidden;
            width: 100%;
            height: 35px;
            margin-top: 30px;
            background-color: white;
            text-align: center;
        }
        .page span {
            line-height: 35px;
            margin: 0 20px;
        }

    </style>
</head>
<body>
<nav th:replace="fragment :: menu(4)"></nav>
<div class="w">
    <h2>ARCHIVES</h2>
    <div class="left_content left animated slideInDown">
        <ul>
            <li><a href="#">2020年9月</a><span>(2)</span></li>
            <li><a href="#">2020年8月</a><span>(1)</span></li>
            <li><a href="#">2020年7月</a><span>(2)</span></li>
            <li><a href="#">2020年6月</a><span>(5)</span></li>
            <li><a href="#">2020年9月</a><span>(4)</span></li>
        </ul>
    </div>
    <div class="right_content right">
        <div class="time_line">
            <div class="big_dot"> <i class="calendar icon"></i></div>
            <h3 > #不错！ 目前总计 <strong style="font-size: 18px" th:text="${blogCount}">8 </strong>篇博客，继续努力</h3>
            <th:block th:each="item : ${archiveMap}">
            <ul class="year animated slideInDown" >
                <h3 style="font-weight: 400" th:text="${item.key}">2020</h3>
                <li class="blog" th:each="blog : ${item.value}">
                    <span class="dot"></span>
                    <span class="left_pointing"></span>
                    <div class="blog_title"><a href="#"><h4 style="font-weight: 400"><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" th:text="${blog.title}">人间失格</a></h4></a></div>
                    <ul class="blog_info">
                        <li class="date" >  <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'MM-dd')}">2020-09-12</span ></li>
                        <li class="tags ">
                             <i class="icon tags"></i>
                            <a href="#" th:each="tag,stat : ${blog.tags}" th:href="@{/tags/{id}(id=${tag.id})}"><span th:text="${stat.first}?${tag.getName()}:'，'+${tag.getName()}">好书</span></a>
<!--                            <span>暂无标签</span>-->
<!--                            <a href="#"><span>，心情</span></a>-->
                        </li>
                    </ul>
                </li>

            </ul>
            </th:block>


        </div>
    </div>
    <div style="clear:both"></div>

</div>
<!--底部footer-->
<footer th:replace="fragment :: footer"></footer>
</body>
</html>
