| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>照片查看</title>
- <link rel="stylesheet" type="text/css" href="../../../css/bootstrap.min.css" />
- <link rel="stylesheet" type="text/css" href="../../../css/cross.css"/>
- <link rel="stylesheet" type="text/css" href="../../../css/style.min.css" />
- <link href="../../../plugins/toastr/toastr.min.css" rel="stylesheet">
- <style>
- .img_list { position: fixed; bottom: 0; wdith: 100%; height: 40px;}
- .img_list img {opacity: 0.4;}
- .img_list img.active, .img_list img:hover {opacity: 1;}
- .w-20 {width: 20%;}
- .h100 {height: 100px;}
- .w-100 {width: 100%;}
- .h-100 {height: 100%;}
- .h-100-100 {height: calc(100% - 100px); }
- .left-arrow, .right-arrow {
- top: 50%;
- width: 34px;
- height: 50px;
- background: url(../../../images/left02_btn.png) no-repeat no-repeat center center;
- z-index: 99;
- }
- .left-arrow {
- left: 10px;
- }
- .right-arrow {
- right: 10px;
- background: url(../../../images/right02_btn.png) no-repeat no-repeat center center;
- }
- .left-arrow:hover {
- background: url(../../../images/left02_pre.png) no-repeat no-repeat center center;
- }
- .right-arrow:hover {
- background: url(../../../images/right02_pre.png) no-repeat no-repeat center center;
- }
- .bgc-999 {background-color: #d7dce6;}
- .lh80 {line-height: 80px;}
- </style>
- </head>
- <body>
- <div id="app" class="c-position-r h-100 bgc-999">
- <div v-if="photoList.length > 0" class="h-100">
- <div class="h-100-100 c-t-center c-position-r">
- <span v-if="curryIndex != 0" class="c-position-a left-arrow" @click="changeCurryIndex(curryIndex - 1)"></span>
- <img class="h-100" :src="setImg(photoList[curryIndex].certificatePath)" alt="图片">
- <span v-if="curryIndex != (photoList.length - 1)" class="c-position-a right-arrow" @click="changeCurryIndex(curryIndex + 1)"></span>
- </div>
- <div class="h100 c-t-center m0 p0 img_list clearfix">
- <img class="w-20 h100" :class="curryIndex == index ? 'active' : ''" v-for="(img, index) in photoList" :key="index" :src="setImg(img.certificatePath)" alt="图片" @click="changeCurryIndex(index)">
- </div>
- </div>
- <div v-if="!photoList || photoList.length == 0" class="h-100">
- <h2 class="ptb30 c-t-center lh80 c-f18">该居民没有上传凭证</h2>
- </div>
- </div>
- <script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
- <script src="../../../js/jquery-2.2.4.js"></script>
- <script src="../../../plugins/layer/layer.min.js"></script>
- <script src="../../../js/bootstrap.min.js"></script>
- <script src="../../../plugins/toastr/toastr.min.js"></script>
- <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
- <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
- <script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
- <script src="../../../api/http-request.js" type="text/javascript"></script>
- <script src="../../../api/sign_api.js" type="text/javascript"></script>
- <script src="../js/photo_show.js" type="text/javascript"></script>
- </body>
- </html>
|
