|
|
@@ -59,6 +59,61 @@
|
|
|
.albums img:first-child {
|
|
|
margin-left: 15px;
|
|
|
}
|
|
|
+
|
|
|
+ #preview {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(97, 94, 92, 0.85);
|
|
|
+ position: fixed;
|
|
|
+ z-index: 99;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ #preview .close {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 14px;
|
|
|
+ font-style: normal;
|
|
|
+ /*padding: 4px;*/
|
|
|
+ text-align: center;
|
|
|
+ right: 30px;
|
|
|
+ top: 80px;
|
|
|
+ z-index: 9;
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ background-color: #333;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 100%;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ #preview-img {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ #download {
|
|
|
+ max-width: 120px;
|
|
|
+ z-index: 9;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 30px;
|
|
|
+ left: 0;
|
|
|
+ margin: auto;
|
|
|
+ background-color: #666;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ padding: 8px 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -79,16 +134,21 @@
|
|
|
<div class="albums" id="albums-{$v.id}">
|
|
|
{assign name="images" value="$v.images" /}
|
|
|
{volist name="images" id="vv"}
|
|
|
- <img src="{$vv}" alt="">
|
|
|
+ <img src="{$vv}" alt="" onclick="showPic('{$vv}')">
|
|
|
{/volist}
|
|
|
</div>
|
|
|
<div class="action">
|
|
|
<button onclick="copy('{$v.title}')">复制文案</button>
|
|
|
- <button onclick="savePics('{$v.id}')">保存图片</button>
|
|
|
+<!-- <button onclick="savePics('{$v.id}')">保存图片</button>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
{/volist}
|
|
|
</div>
|
|
|
+ <div id="preview">
|
|
|
+ <p><span class="close" onclick="closePic()">x</span></p>
|
|
|
+ <p><img id="preview-img" src="" alt=""></p>
|
|
|
+ <p><button id="download" onclick="downloadPic()">保存素材</button></p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</body>
|
|
|
<script src="__CDN__/assets/shop/js/jquery.min.js"></script>
|
|
|
@@ -96,7 +156,6 @@
|
|
|
<script src="__CDN__/assets/shop/js/app.js"></script>
|
|
|
<script src="__CDN__/assets/libs/layer/layer.js"></script>
|
|
|
<script>
|
|
|
-
|
|
|
/**
|
|
|
* 批量
|
|
|
*/
|
|
|
@@ -110,11 +169,24 @@
|
|
|
$urls.each(function(item,k){
|
|
|
var url = $(this).attr('src');
|
|
|
if(url){
|
|
|
- doenloadPic(url);
|
|
|
+ downloadPic(url);
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+ function showPic(url){
|
|
|
+ if(url){
|
|
|
+ $("#preview-img").attr('src', url);
|
|
|
+ $("#preview").show();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function closePic(){
|
|
|
+ console.log(666)
|
|
|
+ $("#preview").hide();
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
function copy(message) {
|
|
|
var input = document.createElement("input");
|
|
|
input.value = message;
|
|
|
@@ -129,7 +201,8 @@
|
|
|
* 下载
|
|
|
* @param imgUrl
|
|
|
*/
|
|
|
- function doenloadPic(imgUrl){
|
|
|
+ function downloadPic(){
|
|
|
+ var imgUrl = $("#preview-img").attr('src');
|
|
|
let triggerEvent = "touchstart"; //指定下载方式
|
|
|
let blob=new Blob([''], {type:'application/octet-stream'});
|
|
|
let url = URL.createObjectURL(blob); //创建一个字符串路径空位
|
APPLE