1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- <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">
- ×
- </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>
|