Luyue123456
/
ZGC_PEOP


			
				
					
						
						
							
							<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('人员详情')" />
    <link th:href="@{/css/use/css1.css}" rel="stylesheet"/>
    <style>
        .gray-bg{
            background-color: #ffffff;
        }
        .piece{
            margin-bottom: 20px;
        }
        .education{
            width: 30%;
            display: flex;
        }
        .education div:first-child{
            color: #999;
            margin-right: 50px;
            font-weight: bold;
        }
        .piece .marks{
            width: 10px;
            height: 20px;
            margin-right: 10px;
            margin-top: 3px;
            background-color: #1a7bb9;
        }
        .piece .line{
            flex: 0 0 calc(88% - 20px);
            margin-left: 20px;
            margin-top: 10px;
            border-top: 1px solid #E1E1E1;
        }
        .piece .content .informationText{
            padding: 20px;
        }
        .piece .content {
            width: 75%;
            max-height: 500px;
            box-sizing: border-box;
            overflow-y: auto; /* 超出内容出现滚动条 */
            border-right: 1px solid #ccc; /* 右边框 */
            scrollbar-width: thin; /* Firefox: 设置滚动条宽度为细 */
            scrollbar-color: #888 #f1f1f1; /* Firefox: 滚动条颜色和背景颜色 */
        }
        .piece .sidebar {
            width: 25%;
            max-height: 500px;
            padding: 10px 10px 10px 40px;
            position: relative;
        }
        .piece .title {
            margin: 10px 0;
            font-size: 16px;
            cursor: pointer;
            font-weight: bold;
        }
        .sidebar .arrow {
            position: absolute;
            width: 0;
            height: 0;
            border-left: 16px solid blue; /* 三角形底部为左 */
            border-right: 16px solid transparent;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            left: 10px; /* 三角形位置 */
            top: 21px; /* 默认位置 */
            transition: top 0.3s; /* 动画效果 */
        }
        .sidebar .active {
            color: blue;
        }
        /* 自定义滚动条样式 */
        .piece .content::-webkit-scrollbar {
            width: 6px; /* 设置更细的滚动条宽度 */
        }
        .piece .content::-webkit-scrollbar-thumb {
            background: #888; /* 滚动条颜色 */
            border-radius: 10px; /* 滚动条圆角 */
        }
        .piece .content::-webkit-scrollbar-thumb:hover {
            background: #555; /* 滚动条悬停颜色 */
        }
    </style>
</head>
<body class="gray-bg">
<form class="form-horizontal m" id="form-information-view" th:object="${rwkStaffInformation}">
    <input name="id" th:field="*{id}" type="hidden">
    <div class="container-div">
        <div class="piece">
            <h2 style="font-weight: bold;" th:text="*{name}">姓名</h2>
            <h3 style="font-weight: normal;" th:text="*{currentOccupation}">职务</h3>
        </div>
        <div class="piece" style="display: flex;">
            <div style="width: 77%; font-size: 16px;">
                <div class="basicInfo_UxXSa J-basic-info">
                    <dl class="basicInfoBlock_q4iJb left">
                        <div class="itemWrapper_yeNiB">
                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">性&nbsp;&nbsp;&nbsp;&nbsp;别</dt>
                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
                                <span class="text_lqEdu" data-text="true" th:text="*{sex}"></span>
                            </dd>
                        </div>
                        <div class="itemWrapper_yeNiB">
                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">籍&nbsp;&nbsp;&nbsp;&nbsp;贯</dt>
                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
                                <span class="text_lqEdu" data-text="true" th:text="*{nativePlace}"></span>
                            </dd>
                        </div>
                        <div class="itemWrapper_yeNiB">
                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">加入党派时间</dt>
                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
                                <span class="text_lqEdu" data-text="true" th:text="*{joinTime}"></span>
                            </dd>
                        </div>
                        <div class="itemWrapper_yeNiB">
                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">单位属性</dt>
                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
                                <span class="text_lqEdu" data-text="true" th:text="*{unitAttribute}"></span>
                            </dd>
                        </div>
                        <div class="itemWrapper_yeNiB">
                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">是否取得境外长期居留资格</dt>
                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
                                <span class="text_lqEdu" data-text="true" th:text="*{overseasResidencyStatus}"></span>
                            </dd>
                        </div>
                    </dl>
                    <dl class="basicInfoBlock_q4iJb center">
                        <div class="itemWrapper_yeNiB">
                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">出生年月</dt>
                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
                                <span class="text_lqEdu" data-text="true" th:text="*{birthday}"></span>
                            </dd>
                        </div>
                        <div class="itemWrapper_yeNiB">
                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">出&nbsp;生&nbsp;地</dt>
                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
                                <span class="text_lqEdu" data-text="true" th:text="*{birthplace}"></span>
                            </dd>
                        </div>
                        <div class="itemWrapper_yeNiB">
                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">参加工作时间</dt>
                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
                                <span class="text_lqEdu" data-text="true" th:text="*{workTime}"></span>
                            </dd>
                        </div>
                        <div class="itemWrapper_yeNiB">
                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">单位职务级别</dt>
                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
                                <span class="text_lqEdu" data-text="true" th:text="*{jobLevel}"></span>
                            </dd>
                        </div>
                        <div class="itemWrapper_yeNiB">
                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">取得国家</dt>
                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
                                <span class="text_lqEdu" data-text="true" th:text="*{acquiringCountry}"></span>
                            </dd>
                        </div>
                    </dl>
                    <dl class="basicInfoBlock_q4iJb right">
                        <div class="itemWrapper_yeNiB">
                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">民&nbsp;&nbsp;&nbsp;&nbsp;族</dt>
                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
                                <span class="text_lqEdu" data-text="true" th:text="*{nation}"></span>
                            </dd>
                        </div>
                        <div class="itemWrapper_yeNiB">
                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">政治面貌</dt>
                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
                                <span class="text_lqEdu" data-text="true" th:text="*{party}"></span>
                            </dd>
                        </div>
                        <div class="itemWrapper_yeNiB">
                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">党派职务</dt>
                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
                                <span class="text_lqEdu" data-text="true" th:text="*{partyPositions}"></span>
                            </dd>
                        </div>
                        <div class="itemWrapper_yeNiB">
                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">宗教信仰</dt>
                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
                                <span class="text_lqEdu" data-text="true" th:text="*{religion}"></span>
                            </dd>
                        </div>
                        <div class="itemWrapper_yeNiB">
                            <dt class="basicInfoItem_aRc0i itemName_PqU2f">证件号</dt>
                            <dd class="basicInfoItem_aRc0i itemValue_OfJ1R">
                                <span class="text_lqEdu" data-text="true" th:text="*{idNumber}"></span>
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>
            <div style="width: 25%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
                <div style="width: 45%;height: 100%;"><img style="width: 100%;height: 100%"  th:src="*{photo}" /></div>
            </div>
        </div>
        <div class="piece" style="font-size: 16px;">
            <div style="display: flex;">
                <div class="marks"></div><h3>学历&nbsp;&nbsp;学位</h3><span style="flex: 0 0 calc(64% - 20px);" class="line"></span>
            </div>
            <div style="margin-left: 40px;border-bottom: 1px dashed #DBDBDB;width: 75%;">
                <h3>全日制教育</h3>
                <div style="display: flex;">
                    <div class="education">
                        <div>学&nbsp;&nbsp;&nbsp;&nbsp;历</div>
                        <div th:text="*{qrzQualification}"></div>
                    </div>
                    <div class="education">
                        <div>学&nbsp;&nbsp;&nbsp;&nbsp;位</div>
                        <div th:text="*{qrzDegree}"></div>
                    </div>
                    <div class="education">
                        <div>毕业院校系及专业</div>
                        <div th:text="*{qrzSchoolMajor}">研究生</div>
                    </div>
                </div>
            </div>
            <div style="margin-left: 40px;border-bottom: 1px dashed #DBDBDB;width: 75%;margin-top:10px;">
                <h3>在职教育</h3>
                <div style="display: flex;">
                    <div class="education">
                        <div>学&nbsp;&nbsp;&nbsp;&nbsp;历</div>
                        <div th:text="*{zzQualification}"></div>
                    </div>
                    <div class="education">
                        <div>学&nbsp;&nbsp;&nbsp;&nbsp;位</div>
                        <div th:text="*{zzDegree}"></div>
                    </div>
                    <div class="education">
                        <div>毕业院校系及专业</div>
                        <div th:text="*{zzSchoolMajor}"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="piece" style="margin-top: 40px;">
            <div style="display: flex;">
                <div class="content" id="content">
                    <div class="section" id="title1">
                        <div style="display: flex;">
                            <div class="marks"></div><h3>简历</h3><span class="line"></span>
                        </div>
                        <div class="informationText">
                            <div th:each="line1, iterStat1 : ${resumeLines}"
                                 th:class="${iterStat1.even} ? 'multiLine-item bg-color-1' : 'multiLine-item bg-color-2'">
                                <div th:each="line2,iterStat2:${line1}"
                                     th:class="${iterStat2.even} ? 'right-content' : 'left-content'" th:text="${line2}"></div>
                            </div>
                        </div>
                    </div>
                    <div class="section" id="title2">
                        <div style="display: flex;">
                            <div class="marks" style="width: 4px;"></div><h3>培训情况</h3><span class="line"></span>
                        </div>
                        <div class="informationText">
                            <div th:each="line1 : ${trainingLines}" class="multiLine-item">
                                <div th:each="line2,iterStat2:${line1}"
                                     th:class="${iterStat2.even} ? 'right-content' : 'left-content'" th:text="${line2}"></div>
                            </div>
                        </div>
                    </div>
                    <div class="section" id="title3">
                        <div style="display: flex;">
                            <div class="marks" style="width: 4px;"></div><h3>主要成就</h3><span class="line"></span>
                        </div>
                        <div class="informationText">
                            <div th:each="line1 : ${achievementLines}" class="multiLine-item">
                                <div th:each="line2,iterStat2:${line1}"
                                     th:class="${iterStat2.even} ? 'right-content' : 'left-content'" th:text="${line2}"></div>
                            </div>
                        </div>
                    </div>
                    <div class="section" id="title4">
                        <div style="display: flex;">
                            <div class="marks" style="width: 4px;"></div><h3>家庭成员</h3><span class="line"></span>
                        </div>
                        <div class="informationText">
                            <table style="width: 100%;">
                                <tr>
                                    <th colspan="2">称谓</th>
                                    <th colspan="3">姓名</th>
                                    <th colspan="2">出生年月</th>
                                    <th colspan="3">政治面貌</th>
                                    <th colspan="6">工作单位及职称</th>
                                </tr>
                                <tr class="" th:each="item,index: ${rwkStaffInformation.rwkFamilyMemberList}"
                                    th:class="${index.even} ? 'bg-color-1' : 'bg-color-2'">
                                    <td colspan="2" th:text="${item.appellation}"></td>
                                    <td colspan="3" th:text="${item.name}"></td>
                                    <td colspan="2" th:text="${item.birthday}"></td>
                                    <td colspan="3" th:text="${item.politicalStatus}"></td>
                                    <td colspan="6" th:text="${item.unitJob}"></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="sidebar" id="sidebar">
                    <div class="arrow" id="arrow"></div>
                    <div class="title active" data-target="#title1">1&nbsp;&nbsp;简历</div>
                    <div class="title" data-target="#title2">2&nbsp;&nbsp;培训情况</div>
                    <div class="title" data-target="#title3">3&nbsp;&nbsp;主要成就</div>
                    <div class="title" data-target="#title4">4&nbsp;&nbsp;家庭成员</div>
                </div>
            </div>
        </div>
    </div>
</form>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var prefix = ctx + "system/information";
    rollingLinkage();
    init();
    //数据进行初始化加载
    function init(){

    }

    function rollingLinkage(){
        // 点击事件
        var arrow = $("#arrow");
        $('.sidebar .title').click(function() {
            const target = $(this).data('target');
            const targetElement = $(target);
            let scrollPosition = 0;
            // 计算目标标签之前的所有兄弟标签的高度
            targetElement.prevAll().each(function() {
                scrollPosition += parseInt($(this).css("height"));
            });
            // 移动箭头
            const newArrowPosition = $(this).position().top + 11; // 更新箭头位置
            arrow.css('top', newArrowPosition); // 更新箭头位置
            $('.sidebar .title').removeClass('active'); // 移除所有标题的选中状态
            $(this).addClass('active'); // 设置当前标题为选中状态
            // 滚动左侧区域到目标内容
            $('#content').animate({
                scrollTop: scrollPosition
            }, 300); // 动画效果
        });
    }
</script>
</body>
</html>