<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="refresh" content="5">
    <title>企业管理及健康监管平台</title>
    <link th:href="@{/static/css/mui.min.css}" href="static/css/mui.min.css" rel="stylesheet" />
    <link th:href="@{/static/fonts/iconfont.css}" href="static/css/iconfont.css" rel="stylesheet" />
    <link th:href="@{/static/css/sczpfyy.css}" href="static/css/sczpfyy.css" rel="stylesheet" />
    <style>
        header .mui-pull-right {
            z-index: 99 !important;
        }

        .header-right-wz {
            margin-left: 5px;
        }
    </style>
    <link th:href="@{/static/css/xpwyfyy.css}" href="static/css/xpwyfyy.css" rel="stylesheet" />
    <link th:href="@{/static/css/wallfyy.css}" href="static/css/wallfyy.css" rel="stylesheet" />
    <style>
        .fyy-statistics.mui-grid-view.mui-grid-9 .mui-table-view-cell {
            padding: 0 10px;
        }

        .fyy-statistics.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
            text-align: inherit;
            margin: 0;
            display: inherit;
            line-height: inherit;
            height: auto;
            background: #283464;
            padding: 15px 0;
            border-radius: 4px;
            border: #375cf5 solid 1px;
        }

        .fyy-statistics.mui-grid-view.mui-grid-9 .mui-media .mui-icon {
            padding: 0;
            font-size: 60px
        }

        .fyy-wall-top .mui-table-view-cell p {
            color: #ffffff;
            font-size: 24px;
            margin: 20px 0
        }

        .mui-bar .mui-content-padded h5 {
            font-size: 24px;
            position: absolute;
            right: 15px;
            top: 50%;
            margin-top: -12px;
            color: #ffffff
        }

        .fyy-wall-top .mui-col-xs-3 {
            width: 25%
        }

        .fyy-slider .mui-table-view-cell,
        .fyy-slider .mui-table-view-cell .mui-content-padded,
        .fyy-slider .mui-table-view {
            padding: 10px
        }

        .mui-segmented-control.mui-scroll-wrapper,
        .mui-segmented-control.mui-scroll-wrapper .mui-scroll {
            height: 60px
        }

        .mui-segmented-control .fyy-control-item {
            line-height: 60px;
        }

        .mui-bar {
            height: 100px;
        }

        .mui-bar .mui-title {
            font-size: 60px;
            line-height: 100px;
            font-weight: 600;
            letter-spacing: 10px;
            top: 0;
        }

        .mui-bar-nav~.mui-content {
            padding-top: 120px
        }

        .mui-segmented-control.mui-segmented-control-inverted .fyy-control-item {
            font-size: 24px
        }
        .mui-table-view-cell .mui-content-padded{
            border: 1px #212c54 solid;
        }
        .mui-table-view .mui-table-view-cell {
            font-size: 18px;
            line-height: 30px;
        }

        .mui-table-view-cell p {
            font-size: 18px
        }

        .mui-slider-group .mui-col-xs-1 {
            width: 12.5%
        }

        .mui-table-view:before,.mui-table-view:after{
            background:0
        }
        .fyy-facema{
            position: absolute;
            left:0;
            bottom:0;
            width:25%
        }
    </style>
</head>
<body>
<div id="app">

    <div class="mui-content fyy-wall">

        <ul class="mui-table-view" style="display:flex;flex-direction:row;flex-wrap:wrap;justify-content: space-between;">
            <li class="mui-table-view-cell mui-media" th:each="item : ${itemList}" style="width:33%;padding-left: 0px;padding-right: 4px;">
                <div class="mui-content-padded" style="background-color: #3e4970">
                    <div class="mui-media-object" style="width:60%;height:22vw;float: left;">
                        <img
                                th:if="${item.faceImage!=null}"
                                th:src="${item.faceImage} + '?x-oss-process=image/resize,m_fill,w_200,h_200'"
                                style="object-fit:cover;min-height:100%;width:100%;" class="fyy-faceimage"/>
                        <img
                                th:if="${item.faceImage==null}"
                                th:src="@{static/img/wu.jpg}"
                                style="object-fit:cover;min-height:100%;width:100%;" class="fyy-faceimage"/>

                    </div>
                    <div class="mui-media-body parent"  style="height:22vw;padding: 10px">
                        <span style="  font-size: 28px;font-weight:bold" th:text="${item.name}"></span>
                        <p  style="color: #FFF" th:text="${item.companyName}"></p>
                        <p  class="child" th:text="${#dates.format(item.recordTime, 'MM-dd HH:mm')}"></p>

                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>

<style type="text/css">
    html{
        width: 100%;
        height: 100%;
    }
    *{
        margin: 0;
        padding: 0;
    }
    body{
        width: 100%;
        height: 100%;
    }
    .parent{
        position: relative;


    }
    .child{

        position: absolute;
        bottom: 0;
    }
</style>
</html>