<div ng-controller="FileViewController" ng-show="needShow()" class="file-list-view"><div class="side-bar"><div class="header">{{ currentModel.pathInfo.base }}</div><table><tr><td class="icon"><i class="fa fa-file-o"></i></td><td class="side-bar-label">原体积</td><td class="detail">{{ currentModel.originSize }}</td></tr><tr><td class="icon"><i class="fa fa-file-archive-o"></i></td><td class="side-bar-label">压缩后体积</td><td class="detail">{{ currentModel.size }}</td></tr><tr><td class="icon"><i class="glyphicon glyphicon-info-sign"></i></td><td class="side-bar-label">压缩比</td><td class="detail">{{ currentModel.reduceRate }}</td></tr><tr><td class="icon"><i class="fa fa-expand"></i></td><td class="side-bar-label">图片尺寸</td><td class="detail"><span ng-show="currentModel.bound">{{ currentModel.bound.width }} x {{ currentModel.bound.height }} px</span></td></tr><tr><td class="icon"><i class="fa fa-clock-o"></i></td><td class="side-bar-label">压缩时间</td><td class="detail">{{ currentModel.birthTime | date:'y-MM-dd'}}</td></tr><tr><td class="icon"><i class="fa fa-folder-open"></i></td><td class="side-bar-label">文件位置</td><td class="detail">{{ currentModel.fullPath }}</td></tr></table><div class="buttons"><button ng-if="!currentModel.isOrigin" ng-click="onRestore()" class="btn btn-warning">恢复原图</button><button ng-if="currentModel.isOrigin" ng-click="onAutoCompress()" class="btn btn-warning">重新压缩</button></div></div><div class="main-view"><div class="top-bar"><div ng-show="currentMode == MODE.LIST"><div ng-show="!modelEmpty" class="slider-bar"><a ng-click="zoomOut(zoomListImg)" class="zoom-out"></a><input type="range" min="{{ zoomListImg.min }}" max="{{ zoomListImg.max }}" step="{{ zoomListImg.step }}" ng-model="zoomListImg.cur" class="slider"/><a ng-click="zoomIn(zoomListImg)" class="zoom-in"></a></div><div ng-show="!modelEmpty" class="bg-switcher"><a href="" ng-click="setBG('white')" ng-class="{'active': currentBG == 'white'}" class="bg-white"></a><a href="" ng-click="setBG('dark')" ng-class="{'active': currentBG == 'dark'}" class="bg-dark"></a><a href="" ng-click="setBG('transparent')" ng-class="{'active': currentBG == 'transparent'}" class="bg-transparent"></a></div></div><div ng-show="currentMode == MODE.DIFF" class="diff-tool"><div class="tool-right"><a ng-click="listMode()">返回</a></div><div class="tool-center-tab"><div class="tool-center-cell"><div class="tool-compare"><i class="fa fa-picture-o"></i><a bind-left-btn="isOriFront">长按左键对比</a></div><div class="separator"></div><div class="tool-zoom"><i class="fa fa-search-minus"></i><a ng-click="zoomOut(zoomDiffBox)">缩小</a><input type="text" ng-model="zoomDiffBox.cur"/>%<i class="fa fa-search-plus"></i><a ng-click="zoomIn(zoomDiffBox)">放大</a></div></div></div></div></div><div files-drop="drop" class="file-list"><div ng-show="currentMode == MODE.LIST" ng-repeat="info in model.filesInfo" ng-class="{'active': currentModel.fullPath == info.fullPath}" ng-click="onModelSelect(info)" ng-dblclick="diffMode(info)" class="file-box"><div ng-show="info.autoCompress" class="badge"><a ng-show="false">{{ info.progress }}</a><div class="icon"><svg ng-show="info.progress==COMPRESS_PROGRESS.COMPRESSED"><path pie-path="{{ info.reduceRate }}" class="pie"></path></svg><img ng-if="[COMPRESS_PROGRESS.WAITING, COMPRESS_PROGRESS.COMPRESSING, COMPRESS_PROGRESS.COMPRESS_ERROR, COMPRESS_PROGRESS.LIMIT].indexOf(info.progress) &gt; -1" ng-src="{{BADGE_PATH[info.progress]}}"/></div><span ng-show="info.progress==COMPRESS_PROGRESS.COMPRESSED" class="compress-rate"><i class="fa fa-arrow-down"></i>{{ info.reduceRate * 100| number:0}}%</span></div><div class="image-box"><img ng-src="{{ info.fullPath }}?{{ refreshStamp }}" replace-html="BGCss"/></div><div class="name">{{ info.pathInfo.base | fileName}}</div><div ng-if="!info.isOrigin" class="info">{{ info.originSize | fileSize}}<i class="fa fa-long-arrow-right"></i>{{ info.size | fileSize}}</div><div ng-if="info.isOrigin" class="info">{{ info.originSize | fileSize}}</div></div><div ng-show="currentMode == MODE.DIFF" disable-child-drag="disable-child-drag" drag-move="drag-move" class="diff-box"><img ng-show="isOriFront" ng-src="{{ originModel.fullPath }}" bind-key-space="isOriFront" class="ori"/><img ng-show="!isOriFront" ng-src="{{ currentModel.fullPath }}?{{ refreshStamp }}" class="cur"/><div ng-show="isOriFront" class="info">原图 {{ currentModel.originSize | fileSize }}</div><div ng-show="!isOriFront" class="info">压缩后 {{ currentModel.size | fileSize }}</div></div></div></div><style>{{ zoomListImgCSS(zoomListImg.cur) }}</style><style>{{ imgBackgroundCSS(currentBG) }}</style><style>{{ zoomDiffBoxCSS(zoomDiffBox.cur) }}</style></div>