caimei365
/
caimei365-www


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
							<!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"/>
    <title>采美百科搜索页面</title>
    <link rel="stylesheet" th:href="@{/css/encyclopedia/normalize.css(v=${version})}"/>
    <link rel="stylesheet" th:href="@{/css/encyclopedia/base.css(v=${version})}"/>
    <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}"/>
    <link rel="stylesheet" th:href="@{/css/encyclopedia/pagination.css(v=${version})}"/>
    <link rel="stylesheet" th:href="@{/css/encyclopedia/index.css(v=${version})}"/>
</head>
<body>
<!-- 引用公共头部 -->
<template th:replace="encyclopedia/components/header"></template>
<!-- 分类楼层 -->
<div class="floor container search-floor" id="search">
    <p class="search-title">为您找到相关结果<span v-text="totalRecord"></span>条</p>
    <div class="emtyp" v-if="totalRecord <= 0">
        <img src="/img/encyclopedia/pc-icon-empty.png" alt="搜索结果为空"/>
        <p>未找到相关结果！</p>
    </div>
    <article class="article" v-else>
        <section class="section" v-for="(item, index) in searchList" :key="index">
            <a :href="item | formatUrl">
                <div class="cover">
                    <img :src="item.image" :alt="item.name"/>
                </div>
                <div class="content">
                    <h3 v-html="formatFromKeyword(item.name)"></h3>
                    <div class="title" v-text="item.discription"></div>
                    <div class="question">
                        <p v-for="question in item.questionList" v-html="formatFromKeyword(question)"></p>
                    </div>
                    <div class="tag-list">
                        <span class="tag">常见问题</span>
                        <span class="tag">效果展示</span>
                        <span class="tag">技术原理</span>
                        <span class="tag">术前术后</span>
                    </div>
                    <div class="dashed-line"></div>
                    <footer class="footer">
                        <time>日期：<span v-text="item.publishTime"></span></time>
                        <span>浏览量：<span v-text="item.pv"></span></span>
                    </footer>
                </div>
            </a>
        </section>
    </article>

    <!--页码-->
    <div class="pagination-container" v-if="totalPage > 1">
        <ul class="pagination">
            <!--左侧固定-->
            <li v-if="listQuery.pageNum > 1"><a href="#" @click.prevent="pageChange(listQuery.pageNum - 1)">«</a></li>
            <li v-if="pagination[0] > 1"><a href="#" @click.prevent="pageChange(1)">1</a></li>
            <li class="ellipsis" v-if="pagination[0] > 2"><span>···</span></li>
            <!--可变动-->
            <template v-for="num in pagination">
                <li :class="{ active: listQuery.pageNum === num }" v-if="num >= 1  && num <= totalPage">
                    <a href="#" @click.prevent="pageChange(num)" v-text="num"></a>
                </li>
            </template>
            <!--右侧固定-->
            <li class="ellipsis" v-if="pagination[pagination.length - 1] < totalPage - 1"><span>···</span></li>
            <li v-if="pagination[pagination.length - 1] < totalPage">
                <a href="#" @click.prevent="pageChange(totalPage)" v-text="totalPage"></a>
            </li>
            <li v-if="listQuery.pageNum < totalPage" :class="{ active: listQuery.pageNum === totalPage }">
                <a href="#" @click.prevent="pageChange(listQuery.pageNum + 1)">»</a>
            </li>
        </ul>
        <div class="tool">
            <div class="total">共<span v-text="totalPage"></span>页</div>
            <div class="jump">
                <div class="pagenum-input">跳至<input type="text" v-model="jumpInput"/>页</div>
                <a href="#" class="jump-btn" @click.prevent="pageChange(jumpInput)">点击跳转</a>
            </div>
        </div>
    </div>
</div>

<!-- 引用公共底部 -->
<template th:replace="encyclopedia/components/footer"></template>
<script src="/lib/vue2.6.12.min.js"></script>
<script th:src="@{/js/common/ajax.service.js(v=${version})}"></script>
<script th:src="@{/js/common/serviceapi/encyclopedia.service.js(v=${version})}"></script>
<script th:src="@{/js/encyclopedia/search.js(v=${version})}"></script>
</body>
</html>