From b9e8e73c3f15a51c1574e5082ac6bfd2f4467795 Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Mon, 29 Mar 2021 11:02:55 +0800
Subject: [PATCH] 图片放大关闭按钮颜色修改为白色
---
/dev/null | 233 ----------------------------------------------
src/views/parcel/parcelKind.vue | 8 +
src/views/parcel/parcel.vue | 8 +
3 files changed, 16 insertions(+), 233 deletions(-)
diff --git a/src/views/parcel/ImagePreview.js b/src/views/parcel/ImagePreview.js
deleted file mode 100644
index e37866c..0000000
--- a/src/views/parcel/ImagePreview.js
+++ /dev/null
@@ -1,233 +0,0 @@
-/*
- * 预览图片 Object
- * 2015-05-23 17:25
- *
- */
-import request from '@/router/axios';
-
-
-export const ImagePreview = () => {
- var that = this;
- //用来存储图片数据
- var IMGS = {
- "num": 0,
- "imgs": {}
- };
- var IMGP_BG = null;
- var IMGP_P_BG = null;
- var IMGSHOW_BG = null;
- var IMGSHOW_BOX = null;
- var IMGSHOW_NEXT = null;
- var IMGSHOW_LAST = null;
- var IMGSHOW_CLOSE = null;
- var FullScreen = null;
- var IMGSHOW_NOW = null;
- var IMGP_BOX = null;
- var IMGP_IMGS = null;
- var IMGP_NEXT = null;
- var IMGP_LAST = null;
- var IMGP_HTML = "";
- var nowNum = 0; //当前预览图片序号
- var moveW = 0;
- var isFullscreen = false;
- _start();
- //初始化获得图片数据
- this.Image = function(imgObjBox) {
-
- var len = imgObjBox.children.length;
- IMGP_HTML = "";
- for (var i = 0; i < len; i++) {
- IMGS["imgs"][i] = { "src": '' }
- IMGS["imgs"][i]["src"] = imgObjBox.children[i].firstElementChild.src;
- IMGP_HTML += '<div class="imgp_k"><img data-num="' + i + '"src="' + imgObjBox.children[i].firstElementChild.src + '" class="imgp"/></div>';
- }
- IMGS["num"] = len;
- IMGP_IMGS.innerHTML = IMGP_HTML;
- IMGP_IMGS.style.width = len * (100 + 7) + "px";
- IMGSHOW_NOW.src = IMGS["imgs"][0]["src"]; //显示第一张图片
- IMGP_IMGS.onclick = function(e) {
- //获取data-num
- var n = e.target.dataset.num; //ie不识别
- if (n) {
- nowNum = n;
- that.show(nowNum);
- }
- }
- }
- IMGP_BG.onmousewheel = function(e) {
- //存在兼容性
- //console.log(e.wheelDelta+" "+e.detail);
- return false;
- }
- //显示图片
- this.show = function(n) {
- nowNum = n;
- IMGP_BG.style.display = "block";
- IMGSHOW_NOW.src = IMGS["imgs"][n]["src"];
- }
- //预览下一张
- IMGSHOW_NEXT.onclick = function() {
- nowNum++;
- if (nowNum > (IMGS["num"] - 1)) {
- nowNum = 0;
- }
- that.show(nowNum);
- }
- //预览上一张
- IMGSHOW_LAST.onclick = function() {
- nowNum--;
- if (nowNum < 0) {
- nowNum = IMGS["num"] - 1;
- }
- that.show(nowNum);
- }
- //关闭预览
- IMGSHOW_CLOSE.onclick = function() {
- exitFullscreen();
- isFullscreen = false;
- document.body.style.overflow = "auto";
- IMGP_BG.style.display = "none";
- }
- FullScreen.onclick = function() {
- if (isFullscreen == false) {
- //进入全屏
- isFullscreen = true;
- requestFullScreen();
- FullScreen.className = "isFullScreen";
- document.body.style.overflow = "hidden";
- } else {
- //退出全屏
- isFullscreen = false;
- exitFullscreen();
- FullScreen.className = "notFullScreen";
- document.body.style.overflow = "auto";
- }
- }
- IMGP_NEXT.onclick = function() {
- var w_bg = IMGP_BOX.offsetWidth;
- var w = IMGP_IMGS.offsetWidth;
- var L = -IMGP_IMGS.offsetLeft;
- var wr = w - (L + w_bg);
- var moveL = wr > w_bg ? w_bg : wr;
- console.log(w_bg + " " + w + " " + L + " " + moveL + " " + wr);
- if (wr == 0) {
- IMGP_IMGS.style.left = 0 + "px";
- } else {
- IMGP_IMGS.style.left = -(L + moveL) + "px";
- }
- }
- IMGP_LAST.onclick = function() {
- var w_bg = IMGP_BOX.offsetWidth;
- var w = IMGP_IMGS.offsetWidth;
- var L = -IMGP_IMGS.offsetLeft;
- var wl = L;
- var moveL = wl > w_bg ? w_bg : wl;
- console.log(w_bg + " " + w + " " + L + " " + moveL + " " + wl);
- if (wl == 0) {
- IMGP_IMGS.style.left = -(w - w_bg) + "px";
- } else {
- IMGP_IMGS.style.left = -(L - moveL) + "px";
- }
-
- }
-
- function _start() {
- //创建预览照片盒子
- IMGP_BG = document.createElement("div");
- IMGP_BG.id = "IMGP_BG";
- document.body.appendChild(IMGP_BG);
- //大图预览背景
- IMGSHOW_BG = document.createElement("div");
- IMGSHOW_BG.id = "IMGSHOW_BG";
- IMGP_BG.appendChild(IMGSHOW_BG);
- //大图预览盒子
- IMGSHOW_BOX = document.createElement("div");
- IMGSHOW_BOX.id = "IMGSHOW_BOX";
- IMGSHOW_BG.appendChild(IMGSHOW_BOX);
- //大图预览按钮下
- IMGSHOW_NEXT = document.createElement("div");
- IMGSHOW_NEXT.id = "IMGSHOW_NEXT";
- IMGSHOW_BG.appendChild(IMGSHOW_NEXT);
- //大图预览按钮上
- IMGSHOW_LAST = document.createElement("div");
- IMGSHOW_LAST.id = "IMGSHOW_LAST";
- IMGSHOW_BG.appendChild(IMGSHOW_LAST);
- //大图预览按钮关闭
- IMGSHOW_CLOSE = document.createElement("div");
- IMGSHOW_CLOSE.id = "IMGSHOW_CLOSE";
- IMGSHOW_BG.appendChild(IMGSHOW_CLOSE);
- //全屏控制按钮
- FullScreen = document.createElement("div");
- FullScreen.id = "FullScreen";
- FullScreen.className = "notFullScreen";
- IMGSHOW_BG.appendChild(FullScreen);
- //正在预览
- IMGSHOW_NOW = document.createElement("img");
- IMGSHOW_NOW.id = "IMGSHOW_NOW";
- IMGSHOW_BOX.appendChild(IMGSHOW_NOW);
- //--------------------------------
- //创建待预览图片背景
- IMGP_P_BG = document.createElement("div");
- IMGP_P_BG.id = "IMGP_P_BG";
- IMGP_BG.appendChild(IMGP_P_BG);
- //创建待预览图片盒子背景
- IMGP_BOX = document.createElement("div");
- IMGP_BOX.id = "IMGP_BOX";
- IMGP_P_BG.appendChild(IMGP_BOX);
- //创建待预览图片盒子
- IMGP_IMGS = document.createElement("div");
- IMGP_IMGS.id = "IMGP_IMGS";
- IMGP_BOX.appendChild(IMGP_IMGS);
- //创建待预览盒子按钮上
- IMGP_LAST = document.createElement("div");
- IMGP_LAST.id = "IMGP_LAST";
- IMGP_P_BG.appendChild(IMGP_LAST);
- //创建待预览盒子按钮下
- IMGP_NEXT = document.createElement("div");
- IMGP_NEXT.id = "IMGP_NEXT";
- IMGP_P_BG.appendChild(IMGP_NEXT);
-
- var bodyW = document.documentElement.clientHeight;
- IMGSHOW_BG.style.height = (bodyW) / bodyW * 100 + "%";
- IMGSHOW_BOX.style.lineHeight = (bodyW - 5) + "px";
- IMGSHOW_NEXT.style.top = ((bodyW) - 400) / 2 + "px";
- IMGSHOW_LAST.style.top = ((bodyW) - 400) / 2 + "px";
- ///IMGSHOW_NOW.src="./Uploads/3.0_banner.jpg"
- }
- window.onresize = function() {
- var bodyW = document.documentElement.clientHeight;
- IMGSHOW_BG.style.height = (bodyW) / bodyW * 100 + "%";
- IMGSHOW_BOX.style.lineHeight = (bodyW - 5) + "px";
- IMGSHOW_NEXT.style.top = ((bodyW) - 400) / 2 + "px";
- IMGSHOW_LAST.style.top = ((bodyW) - 400) / 2 + "px";
- }
-
- function _setCss(obj, css) {
- for (var v in css) {
- obj.style[v] = css[v];
- }
- }
- //进入全屏
- function requestFullScreen() {
- var de = document.documentElement;
- if (de.requestFullscreen) {
- de.requestFullscreen();
- } else if (de.mozRequestFullScreen) {
- de.mozRequestFullScreen();
- } else if (de.webkitRequestFullScreen) {
- de.webkitRequestFullScreen();
- }
- }
- //退出全屏
- function exitFullscreen() {
- var de = document;
- if (de.exitFullscreen) {
- de.exitFullscreen();
- } else if (de.mozCancelFullScreen) {
- de.mozCancelFullScreen();
- } else if (de.webkitCancelFullScreen) {
- de.webkitCancelFullScreen();
- }
- }
-
-}
\ No newline at end of file
diff --git a/src/views/parcel/parcel.vue b/src/views/parcel/parcel.vue
index 8bc2667..77cd679 100644
--- a/src/views/parcel/parcel.vue
+++ b/src/views/parcel/parcel.vue
@@ -36,6 +36,7 @@
<template>
<div>
<el-image-viewer
+ class="img"
v-if="showViewer"
:on-close="closeViewer"
:url-list="['data:image/png;base64,'+imgUrl]" />
@@ -323,3 +324,10 @@
}
};
</script>
+<style lang="scss">
+ .img {
+ .el-icon-circle-close {
+ color: white;
+ }
+ }
+</style>
diff --git a/src/views/parcel/parcelKind.vue b/src/views/parcel/parcelKind.vue
index e922997..fb41972 100644
--- a/src/views/parcel/parcelKind.vue
+++ b/src/views/parcel/parcelKind.vue
@@ -38,6 +38,7 @@
:preview-src-list="['data:image/png;base64,'+imgUrl]"
z-index=9999></el-image> -->
<el-image-viewer
+ class="img"
v-if="showViewer"
:on-close="closeViewer"
:url-list="['data:image/png;base64,'+imgUrl]" />
@@ -289,3 +290,10 @@
}
};
</script>
+<style lang="scss">
+ .img {
+ .el-icon-circle-close {
+ color: white;
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3