index.html 10.4 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>index</title>
    <link rel="stylesheet" href="css/vendor.css">
</head>
<body>
    <div class="container-fluid">
        <div class="wrapper-ipad-app-h5">
            <div class="header-main-1 clearfix">
                <div class="header-main-left">
                    <h1></h1>
                    <div class="header-main-word-dropdown clearfix">
                        <a class="btn btn-sm btn-link dropdown-toggle collapsed js-collapse" href="#header-main-collapse-1" data-toggle="collapse">字源</a>
                        <a class="btn btn-sm btn-link dropdown-toggle collapsed js-collapse" href="#header-main-collapse-2" data-toggle="collapse">书法</a>
                    </div>
                </div>
                <div class="header-main-right">
                    <div class="word-read">
                        <span>【xiàng】</span>
                        <a class="link js-play-voice" href="javascript:;">
                            <i class="icon icon-shengyin"></i>
                        </a>
                    </div>
                    <table>
                        <tbody>
                            <tr>
                                <td>笔画:
                                    <strong>11</strong>
                                </td>
                                <td>部首:豕</td>
                                <td>四角号码:71220</td>
                            </tr>
                            <tr>
                                <td>部外:
                                    <strong>4</strong>
                                </td>
                                <td>结构:上下</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="clear collapse-wrapper">
                    <div class="collapse" id="header-main-collapse-1">
                        <img class="img-fluid" src="temp/ziyuan.jpg" width="225">
                    </div>
                    <div class="collapse" id="header-main-collapse-2">
                        <img class="img-fluid" src="temp/ziyuan.jpg" width="225">
                    </div>
                </div>
            </div>
            <article class="content-detail">
                <ul class="nav nav-tabs nav-tabs-main" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" href="#content-detail-tab-0" role="tab" data-toggle="tab">释义</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#content-detail-tab-1" role="tab" data-toggle="tab">精简释义</a>
                    </li>
                </ul>
                <div class="tab-content pt-3">
                    <div class="tab-pane fade show active" id="content-detail-tab-0" role="tabpanel">
                        <ol class="list-paddingleft-2">
                            <li data-num="1.">
                                <p>
                                    <strong>象牙的省称。</strong>
                                </p>
                                <p>《礼记·玉藻》:“笏,天子以球玉,诸侯以象。”</p>
                            </li>
                            <li data-num="2.">
                                <p>
                                    <strong>形状。</strong>
                                </p>
                                <p>《书·说命上》:“乃审厥象。”孔传:“审所梦之人,刻其形象。”</p>
                            </li>
                            <li data-num="3.">
                                <p>
                                    <strong>模拟。</strong>
                                </p>
                                <p>如:象声;象形。</p>
                            </li>
                            <li data-num="4.">
                                <p>
                                    <strong>现象;表现。</strong>
                                </p>
                                <p>《管子·七法》:“论材审用,不知象不可。”意谓只有审察一个人的表现,才能恰当地使用人材。</p>
                            </li>
                            <li data-num="5.">
                                <p>
                                    <strong>象征。</strong>
                                </p>
                                <p>《周易》用卦、爻等符号象征自然变化和人事休咎。《易·系辞下》:“是故《易》者象也,象也者像也。”孔颖达疏:“谓卦为万物象者,法像万物,犹若乾卦之象法像于天也。”</p>
                            </li>
                            <li data-num="6.">
                                <p>
                                    <strong>想象。</strong>
                                </p>
                                <p>《韩非子·解老》:“故诸人之所以意想者,皆谓之象也。”</p>
                            </li>
                            <li data-num="7.">
                                <p>
                                    <strong>古代通译南方民族语言的官。</strong>
                                </p>
                                <p>《礼记·王制》:“达其志,通其欲,东方曰寄,南方曰象。”</p>
                            </li>
                            <li data-num="8.">
                                <p>
                                    <strong>古代一种舞的名称。</strong>
                                </p>
                                <p>《礼记·内则》:“成童,舞象,学射御。”</p>
                            </li>
                            <li data-num="9.">
                                <p>
                                    <strong>文章。</strong>
                                </p>
                                <p>指《象辞》、《十翼》的两篇。</p>
                            </li>
                            <li data-num="10.">
                                <p>
                                    <strong>十辉之一。</strong>
                                </p>
                                <p>《周礼·春官·眡祲》:“眡祲掌十辉之法……一曰祲,二曰象……”凡灾变之物如众赤乌之属,有所象似,故曰“象”。所以一切有所象似的大气晕象,如珥、缨、纽、履、㦸、提、格、背、负等晕和形如“王”字、“田”字,或如赤乌夹日等晕象,均属十辉中之“象”。</p>
                            </li>
                        </ol>
                    </div>
                    <div class="tab-pane fade" id="content-detail-tab-1" role="tabpanel">
                        <div class="row">
                            <div class="col-sm-6">
                                <ol class="list-paddingleft-2">
                                    <li data-num="1.">
                                        <p>
                                            <strong>象牙的省称。</strong>
                                        </p>
                                    </li>
                                    <li data-num="2.">
                                        <p>
                                            <strong>形状。</strong>
                                        </p>
                                    </li>
                                    <li data-num="3.">
                                        <p>
                                            <strong>模拟。</strong>
                                        </p>
                                    </li>
                                    <li data-num="4.">
                                        <p>
                                            <strong>现象;表现。</strong>
                                        </p>
                                    </li>
                                    <li data-num="5.">
                                        <p>
                                            <strong>象征。</strong>
                                        </p>
                                    </li>
                                </ol>
                            </div>
                            <div class="col-sm-6">
                                <ol class="list-paddingleft-2">
                                    <li data-num="6.">
                                        <p>
                                            <strong>想象。</strong>
                                        </p>
                                    </li>
                                    <li data-num="7.">
                                        <p>
                                            <strong>古代通译南方民族语言的官。</strong>
                                        </p>
                                    </li>
                                    <li data-num="8.">
                                        <p>
                                            <strong>古代一种舞的名称。</strong>
                                        </p>
                                    </li>
                                    <li data-num="9.">
                                        <p>
                                            <strong>文章。</strong>
                                        </p>
                                    </li>
                                    <li data-num="10.">
                                        <p>
                                            <strong>十辉之一。</strong>
                                        </p>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </article>
        </div>
    </div>
    <script src="js/plugins/jquery.min.js"></script>
    <script src="js/vendor.js" merge="true"></script>
    <script>
        $('.js-collapse').each(function() {
            var $this = $(this);
            $($this.attr('href')).on('show.bs.collapse', function() {
                $($this.siblings().attr('href')).collapse('hide');
            });
        });
    </script>
</body>
</html>