.container .toolbar { border-bottom: 1px solid #f2f2f2; margin: 0 5px; padding-bottom: 10px; } .container .toolbar .button { padding: 5px 10px; cursor: pointer; } .container .toolbar .button.reversal i { transform: rotate3d(0, 1, 0, 180deg); } .container .pictureWrapper { position: relative; text-align: center; margin-top: 15px; padding: 0 5px; } .container .pictureWrapper .tools { position: absolute; left: 0; top: 0; bottom: 0; right: 0; } .container .pictureWrapper .tools .item { width: 33%; display: inline-block; height: 100%; } .container .pictureWrapper .tools .item.left { cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"), auto; } .container .pictureWrapper .tools .item.shrink { cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"), auto; } .container .pictureWrapper .tools .item.right { cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"), auto; } .container .pictureWrapper .picture { max-width: 100%; max-height: 400px; } .container .pictureWrapper .prev { position: absolute; width: 50px; background-color: transparent; z-index: 100; opacity: 0.5; font-size: 50px; text-align: left; cursor: pointer; left: 5px; top: 0; bottom: 0; } .container .pictureWrapper .prev:hover { background-color: #fff; } .container .pictureWrapper .next { position: absolute; width: 50px; background-color: transparent; z-index: 100; opacity: 0.5; font-size: 50px; text-align: left; cursor: pointer; right: 5px; top: 0; bottom: 0; } .container .pictureWrapper .next:hover { background-color: #fff; } .container .pictureWrapper .middle { position: absolute; top: 50%; transform: translateY(-50%); } .container .list { font-size: 0; margin-top: 25px; } .container .list .wrapper { width: 11.1%; height: 0; padding-bottom: 11.1%; position: relative; display: inline-block; border-radius: 5px; border: 1px solid transparent; opacity: 0.5; } .container .list .wrapper.active { border: 1px solid #fc4747; opacity: 1; } .container .list .wrapper .thumbnail { position: absolute; top: 5px; bottom: 5px; left: 5px; right: 5px; background-size: cover; background-position: center; border-radius: 5px; cursor: pointer; }