my-bookmark/public/views/weixin-article.html

<!-- 高度至少要设置1000，元素少时才能触发滚动条事件 -->
<div class="ui segment js-hot-card js-weixin-articles">
    <div class="ui container" style="cursor:default;" ng-if="callCount <= maxCallCount">
        <div class="ui label" style="margin:3px 20px 8px 0px;cursor:default;" ng-class="{green:channel.id===channelId}" ng-repeat="channel in channels"
            ng-click="getWeixinArticles(channel.id, 1)">{{ channel.name }} {{ channel.total ? ('('+channel.total+')') : '' }}</div>
    </div>
    <div class="ui center aligned container" style="cursor:default;" ng-if="callCount > maxCallCount && (!loadBusy)">
        <i class="random big link icon" title="随机刷一批" ng-click="randomHotBookmarks()"></i>
    </div>

    <div class="ui massive text centered inline loader js-hot-loader" style="margin: 50px 0px 120px 0px;" ng-class="{active:loadBusy, disabled:!loadBusy}">
        正在加载中...</div>

    <div class="ui divider" style="margin: 3px 0px 8px 0px;"></div>
    <div class="ui five stackable cards" ng-if="!loadBusy">
        <div class="card" ng-repeat="bookmark in bookmarks" ng-mouseover="setHoverBookmark(bookmark)" ng-mouseleave="setHoverBookmark(null)">
            <div class="content" style="max-height:70px;cursor:pointer" ng-click="detailBookmark(bookmark)">
                <div class="description bookmarkTitle" title="{{bookmark.title}}">
                    {{bookmark.title}}
                </div>
            </div>
            <div class="image hot-image" href="{{ bookmark.url }}" style="cursor:pointer" ng-click="detailBookmark(bookmark)">
                <img ng-src="{{bookmark.snap_url}}" />
            </div>
            <div class="extra content" ng-show="!bookmark.edit">
                <img class="ui avatar image" style="width:16px;height:16px;" ng-src="{{bookmark.favicon_url}}">
                <span class="sourceName" title="{{ bookmark.created_by }}">{{ bookmark.created_by }}</span>
                <span class="favCount" ng-if="bookmark.fav_count">·{{ bookmark.fav_count }}人收藏</span>
                <i class="ellipsis horizontal icon right floated" style="margin-top:6px;" ng-mouseover="bookmark.edit=true;"></i>
            </div>
            <div class="extra content" ng-show="bookmark.edit" ng-mouseleave="bookmark.edit=false;">
                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/favorite.png" ng-click="favoriteBookmark(bookmark)"
                    title="一键收藏">
                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/store-bookmark.png"
                    ng-click="storeBookmark(bookmark)" title="转存到我的书签">
                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/copy.png" ng-click="copy(bookmark.url)" title="复制链接">
                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)"
                    title="书签详情">
            </div>
        </div>
    </div>
    <div class="ui longer modal js-weixin-content">
        <i class="close icon" ng-click="close()"></i>
        <div class="header">{{ bookmark.title }}</div>
        <div class="scrolling content js-main-content">
            <div class="ui center aligned container" style="margin: 10px 0px">
                <span style="color: #4383BF" title="公众号名称">{{bookmark.created_by}}</span>
                &nbsp;&nbsp;
                <span title="公众号账号">{{bookmark.account}}</span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{bookmark.created_at}}</span>
            </div>
            <div class="ui divider"></div>
            <p ng-bind-html="bookmark.content"></p>
            <div class="ui divider"></div>
            <div class="ui container">
                <img class="ui middle aligned mini image" ng-src="{{bookmark.favicon_url}}" style="width:16px;height:16px;padding:0;cursor:pointer;"
                    ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="点击跳转到原页面(如果过期，需要在微信中才能打开)">
                <span title="点击复制链接" ng-click="copy(bookmark.url)" class="urlSpan">{{bookmark.url}}
                </span>
            </div>
            <div class="ui divider"></div>
            <div class="ui grid" ng-if="bookmark.content">
                <div class="eight wide column">
                    <div style="float: left;cursor: pointer" ng-click="detailBookmark(bookmarks[bookmark.index-1])" ng-if="bookmarks[bookmark.index-1]"><i
                            class="chevron left icon"></i>
                        {{ bookmarks[bookmark.index-1].title }}</div>
                </div>
                <div class="eight wide column">
                    <div style="float: right;cursor: pointer" ng-click="detailBookmark(bookmarks[bookmark.index+1])" ng-if="bookmarks[bookmark.index+1]">
                        {{ bookmarks[bookmark.index+1].title }} <i class="chevron right icon"></i></div>
                </div>
            </div>
        </div>
        <div class="actions">
            <div class="ui green button" ng-click="close()">已阅</div>
        </div>
    </div>
    <div class="ui grid">
        <div class="four wide column">
        </div>
        <div class="twelve wide column">
            <pagination></pagination>
        </div>
    </div>
</div>