YLShipBuildLandMap/YLShipBuildLandMap.Web/wwwroot/app/js/template/modal-showimg.html

<style type="text/css">
    /*图片列表*/
    .img-list {
        display: flex;
        text-align: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

        .img-list .img-item {
            width: 20%;
            position: relative;
        }

            .img-list .img-item img {
                padding: 0px;
                height: 100px;
                width: 100px;
                cursor: pointer;
                border-radius: 14px;
            }
</style>
<div class="img-list">
    <div class="img-item" ng-repeat="it in imgList" style="width:{{width+20}}px;">
        <div style="padding:5px 10px;">
            <img ng-if="it.success" style="width:{{width}}px;height:{{height}}px;margin: 5px 0;cursor: pointer;"
                 ng-src="{{it.blobUrl}}"
                 data-toggle="modal"
                 data-target="#{{modalId}}" ng-click="showImg($index)" onerror="this.src='images/default.png'" />
            <img ng-if="!it.success" style="width:{{width}}px;height:{{height}}px;margin: 5px 0;cursor: pointer;"
                 src="images/default.png" />
            <i ng-if="!readonly" class="material-icons remove-icon"
               ng-click="deleteImg(it.AttachmentId)">remove_circle_outline</i>
        </div>
    </div>
    <i ng-if="!readonly && (ismulti || (!ismulti && imgList.length==0))" class="material-icons dj-add"
       ng-class="imgList.length>0?'dj-add-pd':''"
       ng-click="uploadImg()">add_circle_outline</i>
    <div ng-if="imgList.length==0 && readonly==true" style="padding: 10px;">
        暂无图片
    </div>
</div>
<!-- 查看大图-->
<div class="modal fade text-center" id="{{modalId}}" tabindex="-1" role="dialog">
    <div class="modal-dialog bigimg-modal">
        <div class="card">
            <div class="header">
                <div class="btn-tool" style="float: left !important;margin: 12px;">
                    <button class="close" ng-click="up()" ng-if="showIndex>0" style="padding-right: 10px;">
                        上一张
                    </button>
                    <button class="close" ng-click="next()" ng-if="showIndex<(imgList.length-1)">
                        下一张
                    </button>
                </div>
                <!--<div class="btn-tool" style="float: left !important;margin: 12px;">
                    <button class="close" ng-click="zoomIn()" style="padding-right: 10px;">
                        <span class="glyphicon glyphicon-zoom-in btn-refresh-icon"></span>
                    </button>
                    <button class="close" ng-click="zoomOut()" style="padding-right: 10px;">
                        <span class="glyphicon glyphicon-zoom-out btn-refresh-icon"></span>
                    </button>
                    <button class="close" ng-click="img.rotate=img.rotate+90">
                        <span class="glyphicon glyphicon-repeat btn-refresh-icon"></span>
                    </button>
                </div>-->
                <div class="btn-tool">
                    <button type="button" class="close btn-close"
                            data-dismiss="modal">
                        &times;
                    </button>
                </div>
            </div>
            <div class="body" style="overflow: auto;display:block;margin: 50px;">
                <div ng-if="img.isload" style="transform:scale({{img.scale}});">
                    <img ng-src="{{img.url}}"
                         style="max-width: 100%;transform:rotate({{img.rotate}}deg);-webkit-transform:rotate({{img.rotate}}deg);-moz-transform:rotate({{img.rotate}}deg);"
                         ng-click="img.rotate=img.rotate+90" />
                </div>
            </div>
        </div>
    </div>
</div>