caimei365
/
caimei365-www


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
							<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://www.thymeleaf.org ">
<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,user-scalable=0"/>
    <title>采美百科-百科详情</title>
    <link rel="stylesheet" href="/css/encyclopedia/normalize.css">
    <link href="/lib/jquery-confirm.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/lib/swiper.min.css">
    <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}">
    <link rel="stylesheet" th:href="@{/css/encyclopedia/detail.css(v=${version})}">
    <script type="text/javascript" src="/lib/swiper.min.js"></script>
</head>
<body>
<!-- 顶部公共区域 -->
<template th:replace="encyclopedia/components/header"></template>
<!-- 顶部公共区域 end -->
<input type="hidden" th:value="${baikeproduct.relatedLabels}" id="relatedLabels">

<main id="bk-page-container">
    <div class="bk-banner">
        <img src="/img/encyclopedia/assets/pc-banner-detail.png" alt="采美百科" class="only-pc"/>
        <img src="/img/encyclopedia/assets/h5-banner-detail.png" alt="采美百科" class="only-mobile"/>
        <div class="bk-container only-pc">
            <div class="bk-name" th:text="${baikeproduct.name}"></div>
        </div>
    </div>
    <div class="bk-detail bk-container" th:object="${baikeproduct}">
        <div class="only-mobile bk-entry-name">
            <div class="bk-name" th:text="*{name}"></div>
        </div>
        <div class="bk-detail-left">
            <div class="bk-name" th:utext="*{alias}"></div>
            <div class="bk-overview" th:utext="*{discription}"></div>
            <div class="bk-information only-pc">
                <div class="bk-row" th:each="row : *{infoListPC}">
                    <th:block th:each="col : ${row}">
                        <div class="bk-label" th:text="${col.infoName}"></div>
                        <div class="bk-content" th:utext="${col.infoContent}"></div>
                    </th:block>
                </div>
            </div>
            <div class="bk-information only-mobile">
                <div class="bk-row" th:each="item :*{infoList}">
                    <div class="bk-label" th:text="${item.infoName}"></div>
                    <div class="bk-content" th:utext="${item.infoContent}"></div>
                </div>
            </div>
            <div class="only-mobile bk-relevant">
                <div class="bk-album">
                    <div class="bk-title">透明质酸的概述图册</div>
                    <div class="bk-album-list">
                        <div class="bk-album-item" th:each="item : *{imageList}">
                            <img th:src="${item.image}" th:if="${item.type == 1}">
                            <video th:src="${item.videoUrl}" th:if="${item.type == 2}"></video>
                            <span class="bk-play" th:if="${item.type == 2}"></span>
                        </div>
                    </div>
                </div>
                <div class="bk-company">
<!--                    <div class="bk-cover"><img src="https://picsum.photos/280/220?random=4"></div>-->
                    <div class="bk-cover"><img th:src="*{shopLogo} ? *{shopLogo} : '/img/base/placeholder.png'"></div>
                    <div class="bk-title" th:text="*{shopName}">上海品辉医疗科技有限公司</div>
                </div>
                <div class="bk-directory">
                    <div class="bk-title">导航<span>></span></div>
                    <ul class="bk-directory-list" id="bk-directory-mobile"></ul>
                </div>
            </div>
            <div class="bk-section">
                <th:block th:each="item : *{textInfoList}">
                    <div class="bk-title" th:if="${item.dictionaryType == 1}">
                        <h2 th:utext="${item.dictionaryContent}">美容作用</h2>
                        <div class="line"></div>
                    </div>
                    <h3 th:if="${item.dictionaryType == 2}" th:utext="${item.dictionaryContent}"></h3>
                    <div class="bk-section-content" th:if="${item.dictionaryType == 3}" th:utext="${item.dictionaryContent}"></div>
                </th:block>
            </div>
            <div class="bk-literature">
                <div class="bk-title">
                    <div>参考资料</div>
                    <div class="line"></div>
                </div>
                <ul class="bk-literature-list">
                    <th:block th:each="item,stat :*{referenceList}">
                        <li th:if="${item.referenceType == 1}" th:id="${item.ctrlId}">
                            [<em th:text="${stat.index+1}">1</em>]
                            <i></i>
                            <a class="link" th:href="${item.website}" th:text="${item.articleName}"></a>.
                            <span th:text="${item.websiteName}"></span>
                            <span th:if="${item.acitationTimeStr}">[引用日期:<span th:text="${item.acitationTimeStr}"></span>]</span>
                        </li>
                        <li th:if="${item.referenceType == 2}" th:id="${item.ctrlId}">
                            [<em th:text="${stat.index+1}">1</em>]
                            <i></i>
                            <span th:text="${item.author}"></span>
                            <span th:text="${item.workName}"></span>：
                            <span th:text="${item.press}"></span>，
                            <span th:text="${item.publicationYearStr}"></span>
                        </li>
                        <li th:if="${item.referenceType == 3}" th:id="${item.ctrlId}">
                            [<em th:text="${stat.index+1}">1</em>]
                            <i></i>
                            <span th:text="${item.referenceDescription}"></span>
                            <span th:text="${item.imageDescription}"></span>
                            <a class="image" th:href="${item.imageUrl}" th:text="${item.articleName}" target="_blank">图片</a>
                        </li>
                    </th:block>
                </ul>
            </div>
            <div class="bk-remarks">声明：该文观点仅代表作者本人，不代表采美公司的立场或观点，本网站仅提供信息存储空间服务。任何单位与个人认为该文可能涉嫌侵犯其合法权利，应及时向采美公司提出书面权利通知，采美公司会依法处理。</div>
            <div class="bk-pv">
                <div class="bk-pv-item">浏览次数：<span th:text="*{pv}"></span></div>
                <div class="bk-pv-item" th:text="*{publishTimeStr}"></div>
            </div>
        </div>
        <div class="bk-detail-right only-pc">
            <div class="bk-album" th:if="*{#lists.size(imageList) ne 0}">
                <div class="swiper-container" id="album">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" th:each="item : *{imageList}">
                            <img th:src="${item.image}" th:if="${item.type == 1}">
                            <video th:src="${item.videoUrl}" th:if="${item.type == 2}"></video>
                            <span class="bk-play" th:if="${item.type == 2}"></span>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
                <div class="bk-title"><span th:text="*{name}"></span>的概述图册</div>
            </div>
            <div class="bk-company" th>
                <img th:src="*{shopLogo} ? *{shopLogo} : '/img/base/placeholder.png'">
                <div class="bk-title" th:text="*{shopName}">上海品辉医疗科技有限公司</div>
            </div>
            <div class="bk-directory">
                <div class="bk-title">文章目录</div>
                <div class="bk-content">
                    <ul class="bk-directory-list" id="bk-directory-pc"></ul>
                </div>
            </div>

        </div>
    </div>
</main>

<!-- 视频播放弹窗 -->
<div class="video-popup" style="display: none;" id="video-popup">
    <div class="mask"></div>
    <span class="close"></span>
    <div class="content">
        <video controls></video>
    </div>
</div>

<!-- 底部区域 -->
<template th:replace="encyclopedia/components/footer"></template>
<!-- 底部区域 end -->
<script th:src="@{/js/encyclopedia/detail.js(v=${version})}"></script>
<script type="text/javascript">
    new Swiper('#album', {
        pagination: {
            el: '.swiper-pagination'
        }
    })
</script>
</body>
</html>