From 94645bad0e47b79937765ec02b12a3c2dcf56b78 Mon Sep 17 00:00:00 2001 From: fanluyan <754122931@qq.com> Date: Wed, 26 Jul 2023 09:28:00 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=9F=A5=E7=9C=8B=E5=A4=A7?= =?UTF-8?q?=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/components/carouselChart.vue | 289 ++++++++++++++++--------- 1 file changed, 187 insertions(+), 102 deletions(-) diff --git a/src/views/components/carouselChart.vue b/src/views/components/carouselChart.vue index 93be162..c942e4e 100644 --- a/src/views/components/carouselChart.vue +++ b/src/views/components/carouselChart.vue @@ -8,23 +8,16 @@ bigPicPath.indexOf('nopic') == -1 && bigPicPath.indexOf('videos') == -1 " - :style="bigPicPath ? 'backgroundImage:url(' + bgbigPath + ')' : ''" + :style="bigPicPath ? 'backgroundImage:url(' + bigPicPath + ')' : ''" > - +
-
- +
+
-
@@ -45,28 +38,6 @@ /> -
-
- -
-
- -
-
@@ -182,6 +153,30 @@ + + +
+
+ + +
+
+ +
+
@@ -228,13 +223,16 @@ export default { showBigpic: false, flagline: true, markEnable: "", + zoomD: 1, + canvasloading: false, + bigImgPath: "", }; }, mounted() { console.log(this.terminalPhoto); this.mediaType = this.terminalPhoto[0].mediaType; this.bigPicPath = this.terminalPhoto[0].path + "!1366x768"; - this.bgbigPath = this.terminalPhoto[0].path + "!1366x768"; + // this.bigPicPath = this.terminalPhoto[0].path + "!1366x768"; this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize); this.total = this.terminalPhoto.length / this.pagesize; @@ -261,26 +259,97 @@ export default { watch: { terminalPhoto: function (newVal, oldVal) { this.bigPicPath = this.terminalPhoto[0].path + "!1366x768"; - this.bgbigPath = this.terminalPhoto[0].path + "!1366x768"; + this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize); this.total = this.terminalPhoto.length / this.pagesize; }, }, created() {}, methods: { - showbigpicPath(data) { - console.log(data); - if (data.includes("!")) { - this.bigPicPath = data.substring(0, data.length - 9); + // showbigpicPath(data) { + // console.log(data); + // if (data.includes("!")) { + // this.bigPicPath = data.substring(0, data.length - 9); + // } else { + // this.bigPicPath = data; + // this.bgbigPath = data; + // } + + // console.log(this.bigPicPath); + // }, + // handleBigPicbox() { + // this.showBigpic = true; + // }, + //移动demo + move(e) { + console.log(e); + e.preventDefault(); + // 获取元素 + var personBox = document.querySelector(".picboxI"); + var img = document.querySelector(".img"); + var x = e.pageX - img.offsetLeft; + var y = e.pageY - img.offsetTop; + // 添加鼠标移动事件 + personBox.addEventListener("mousemove", move); + console.log(personBox.addEventListener("mousemove", move)); + console.log(personBox.style); + function move(e) { + console.log(personBox.style.left); + personBox.style.left = e.pageX - x + "px"; + personBox.style.top = e.pageY - y + "px"; + } + // 添加鼠标抬起事件，鼠标抬起，将事件移除 + img.addEventListener("mouseup", function () { + personBox.removeEventListener("mousemove", move); + }); + // 鼠标离开父级元素，把事件移除 + personBox.addEventListener("mouseout", function () { + personBox.removeEventListener("mousemove", move); + }); + }, + // 缩放图片 + rollImg(e) { + let direction = e.deltaY > 0 ? "down" : "up"; + if (direction === "up") { + // 滑轮向上滚动 + this.large(); } else { - this.bigPicPath = data; - this.bgbigPath = data; + // 滑轮向下滚动 + this.Small(); } - - console.log(this.bigPicPath); }, - handleBigPicbox() { + //大 + large() { + this.$nextTick(() => { + if (this.zoomD < 6) { + this.zoomD += 0.1; + } + document.querySelector( + ".picboxI" + ).style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`; + }); + }, + // 小 + Small() { + this.$nextTick(() => { + if (this.zoomD > 0.3) { + this.zoomD -= 0.1; + } + document.querySelector( + ".picboxI" + ).style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`; + }); + }, + imgOnload() { + console.log("加载完成"); + this.canvasloading = false; + }, + //放大图 + handleBigPicbox(val) { + console.log(val); + //this.canvasloading = true; this.showBigpic = true; + this.bigImgPath = val.substring(0, val.length - 9); }, closePic(data) { console.log(data); @@ -347,7 +416,7 @@ export default { ); this.bigPicPath = this.fiveList[this.activeSmall].path + "!1366x768"; - this.bgbigPath = this.terminalPhoto[0].path + "!1366x768"; + this.videopath = this.fiveList[this.activeSmall].thumb; }, //大图点击左侧切换图片 @@ -355,7 +424,7 @@ export default { this.bigNum--; //执行下一张 this.mediaType = this.terminalPhoto[this.bigNum].mediaType; this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768"; - this.bgbigPath = this.terminalPhoto[0].path + "!1366x768"; + this.activeSmall--; console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum); console.log(this.page); @@ -383,7 +452,7 @@ export default { this.bigNum++; //执行下一张 this.mediaType = this.terminalPhoto[this.bigNum].mediaType; this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768"; - this.bgbigPath = this.terminalPhoto[0].path + "!1366x768"; + this.activeSmall++; console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum); if (this.activeSmall > 4) { @@ -412,7 +481,7 @@ export default { this.activeSmall = index; this.mediaType = row.mediaType; this.bigPicPath = row.path + "!1366x768"; - this.bgbigPath = row.path + "!1366x768"; + // this.bgbigPath = row.path + "!1366x768"; getCoordinate({ channelId: row.channelId, needPic: "1", @@ -492,58 +561,6 @@ export default { height: calc(100% - 32px); box-sizing: border-box; - .showPic { - position: fixed; - background-color: rgba(0, 0, 0, 0.5); - bottom: 0; - left: 0; - overflow: hidden; - right: 0; - top: 0; - z-index: 9999; - display: flex; - cursor: pointer; - .picboxI { - position: relative; - max-width: 1366px; - max-height: 768px; - margin: auto; - animation-name: scaleDraw; - /*关键帧名称*/ - animation-timing-function: ease; - /*动画的速度曲线*/ - animation-iteration-count: 1; - /*动画播放的次数*/ - animation-duration: 0.65s; - overflow: hidden; - border: 2px solid #f00; - img { - width: 100%; - height: 100%; - margin: auto; - } - } - .viewClose { - -webkit-app-region: no-drag; - background-color: rgba(0, 0, 0, 0.5); - border-radius: 50%; - cursor: pointer; - height: 80px; - overflow: hidden; - position: absolute; - right: -40px; - top: -40px; - transition: background-color 0.15s; - width: 80px; - .el-icon-close { - bottom: 16px; - left: 16px; - position: absolute; - color: #fff; - font-size: 18px; - } - } - } .picTop { width: 100%; height: 80%; @@ -741,6 +758,75 @@ export default { right: 16px; } } + //放大图 + .showPic { + position: fixed; + background-color: rgba(0, 0, 0, 50%); + bottom: 0; + left: 0; + overflow: hidden; + right: 0; + top: 0; + z-index: 9999; + width: 100%; + height: 100%; + display: flex; + cursor: pointer; + .picboxI { + position: relative; + width: 85%; + height: 85%; + margin: auto; + animation-name: scaleDraw; + /*关键帧名称*/ + animation-timing-function: ease; + /*动画的速度曲线*/ + animation-iteration-count: 1; + /*动画播放的次数*/ + animation-duration: 0.65s; + display: flex; + align-items: center; + justify-content: center; + img { + max-width: 100%; + max-height: 100%; + + margin: auto; + position: absolute; + cursor: grab; + } + .myCanvas { + position: absolute; + // top: 0; + // left: 0; + max-width: 100%; + max-height: 100%; + margin: 0 auto; + cursor: pointer; + pointer-events: none; + } + } + .viewClose { + -webkit-app-region: no-drag; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 50%; + cursor: pointer; + height: 80px; + overflow: hidden; + position: absolute; + right: -40px; + top: -40px; + transition: background-color 0.15s; + width: 80px; + .el-icon-close { + bottom: 16px; + left: 16px; + position: absolute; + color: #fff; + font-size: 18px; + } + } + } } @keyframes scaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/ @@ -753,6 +839,5 @@ export default { transform: scale(1); } } - // https://v1.github.surmon.me/vue-awesome-swiper/