demo.html 3.2 KB
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
</head>
<body>
<div class="contianer">
    <div class="bg-img-container">
    </div>
    <h1>模板pdf</h1>
    <div class="flex-div">
        <p>表1</p>
    </div>

    <table border="1" cellSpacing="1">
        <tr>
            <th>姓名</th>
            <td colspan="3">$!{name}</td>
        </tr>
        <tr>
            <th #if($!{gender}==1) class="blue" #else class="red" #end>性别</th>
            <td colspan="3">
                #if($!{gender}==1)

                #else

                #end

                <input type="checkbox" checked="checked">是否
            </td>
        </tr>
        <tr>
            <th>出生日期</th>
            <td>$!{birthDate}</td>
            <th>联系方式</th>
            <td>$!{phone}</td>
        </tr>
    </table>
    <h1>双重For循环取值</h1>
    <div class="flex-div">
        <p>表2</p>
    </div>
    <table border="1" cellSpacing="1">
        <tr>
            <th>学历</th>
            <th>学科</th>
            <td class="gray-bg">分数</td>
        </tr>
        #foreach($item in $eduList)
        <tr>
            <th  #set($len= $item.size+1) rowspan="$len">$item.name</th>
            #foreach($result in $item.itemList)
        <tr>
            <td>$velocityCount、$result.subject</td>
            <td #if($result.num > 60) class="green" #else class="red" #end>$result.num</td>
        </tr>
        #end
        </tr>
        #end
    </table>

</div>

</body>
<style>
    .blue {
        color: #244385;
        margin-left: 30px;
    }

    .green {
        color: #52c41a;
        margin-left: 30px;
    }

    .red {
        color: #c1181e;
        margin-left: 30px;
    }

    .flex-div {
        margin: 30px 0 15px;
        display: flex;
        align-items: center;
    }

    .line {
        width: 540px;
        height: 0px;
        border: dashed 1px #edf0f5;
    }

    table {
        width: 700px;
        border-collapse: collapse;
        /*border-spacing: 0;*/
        border-left: 1px solid #edf0f5;
        border-top: 1px solid #edf0f5;
    }

    th, td {
        border-right: 1px solid #edf0f5;
        border-bottom: 1px solid #edf0f5;
        padding: 5px 15px;
    }

    h1 {
        text-align: center;
        font-family: 'Microsoft YaHei';
        line-height: 60px;
        letter-spacing: 8px;
        color: #244385;
    }

    p {
        font-family: 'Microsoft YaHei';
        font-size: 20px;
        font-weight: normal;
        color: #244385;
        margin: 0 16px;
    }

    th {
        background-color: rgba(0, 0, 0, 0.01);
        width: 90px;
        min-width: 90px;
        max-width: 90px;
        text-align: left;
        text-indent: 10px;
        font-family: 'Microsoft YaHei';
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 48px;
        letter-spacing: 2px;
        color: #666666;
    }

    td {
        font-size: 16px;
        color: #000000;
        text-align: left;
        text-indent: 10px;
        padding-right: 20px;
        height: 50px;
    }

    table,tr, th, td {
        border: solid 1px #edf0f5;
    }

    .gray-bg {
        background-color: rgba(0, 0, 0, 0.01);
    }
</style>
</html>