|
|
@@ -0,0 +1,333 @@
|
|
|
+<template>
|
|
|
+ <div class="home">
|
|
|
+ <div
|
|
|
+ :class="`leftBxo ${isMove ? '' : isRow === '横' ? '' : 'leftBxoCenter'}`"
|
|
|
+ >
|
|
|
+ <!-- 左侧加号 -->
|
|
|
+ <div class="addIcon" @click="lookBigImg">+</div>
|
|
|
+
|
|
|
+ <!-- ---------竖------- 大盒子 -->
|
|
|
+ <div
|
|
|
+ v-if="isRow === '竖'"
|
|
|
+ @mousedown="isFlag = true"
|
|
|
+ @mouseup="isFlag = false"
|
|
|
+ @mouseleave="isFlag = false"
|
|
|
+ @mousemove="mousemoveFu"
|
|
|
+ :class="`imgBox ${isMove ? '' : 'imgBoxMove'}`"
|
|
|
+ :style="`clip-path: rect(0 100% ${zhouMove}% 0);
|
|
|
+ transform: translateY(${moveLoc}px)
|
|
|
+ `"
|
|
|
+ >
|
|
|
+ <!-- 画轴的移动 -->
|
|
|
+ <img
|
|
|
+ class="zhou"
|
|
|
+ src="../assets/img/zhou.png"
|
|
|
+ alt=""
|
|
|
+ :style="`bottom:${100 - zhouMove}%`"
|
|
|
+ />
|
|
|
+
|
|
|
+ <img src="../assets/img/mainLong.jpg" alt="" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- ------------横----------大盒子 -->
|
|
|
+ <div
|
|
|
+ v-else
|
|
|
+ @mousedown="isFlag = true"
|
|
|
+ @mouseup="isFlag = false"
|
|
|
+ @mouseleave="isFlag = false"
|
|
|
+ @mousemove="mousemoveFu"
|
|
|
+ :class="`imgBoxHH ${isMove ? '' : 'imgBoxHHMove'}`"
|
|
|
+ :style="`clip-path: rect(0 ${zhouMove}% 100% 0);
|
|
|
+ transform: translateX(${moveLoc}px) translateY(-50%)
|
|
|
+ `"
|
|
|
+ >
|
|
|
+ <!-- 画轴的移动 -->
|
|
|
+ <img
|
|
|
+ class="zhou"
|
|
|
+ src="../assets/img/zhouH.png"
|
|
|
+ alt=""
|
|
|
+ :style="`right:${100 - zhouMove}%`"
|
|
|
+ />
|
|
|
+
|
|
|
+ <img src="../assets/img/mainLongH.jpg" alt="" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧小盒子 -->
|
|
|
+ <div v-if="isMove" class="smImgBox">
|
|
|
+ <div
|
|
|
+ class="smImgBoxMain"
|
|
|
+ :style="`width:${imgWidth / 5}px; height:${imgHeight / 5}px`"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-if="isRow === '竖'"
|
|
|
+ @mousedown="isFlag = true"
|
|
|
+ @mouseup="isFlag = false"
|
|
|
+ @mouseleave="isFlag = false"
|
|
|
+ @mousemove="(e) => mousemoveFu(e, true)"
|
|
|
+ class="smBoxBor"
|
|
|
+ :style="`height:${pageHeight / 5}px;transform: translateY(${
|
|
|
+ -moveLoc / 5
|
|
|
+ }px)`"
|
|
|
+ ></div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-else
|
|
|
+ @mousedown="isFlag = true"
|
|
|
+ @mouseup="isFlag = false"
|
|
|
+ @mouseleave="isFlag = false"
|
|
|
+ @mousemove="(e) => mousemoveFu(e, true)"
|
|
|
+ class="smBoxBorHH"
|
|
|
+ :style="`width:${leftBoxWidth / 5}px;transform: translateX(${
|
|
|
+ -moveLoc / 5
|
|
|
+ }px)`"
|
|
|
+ ></div>
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ require(`@/assets/img/mainLong${isRow === '竖' ? '' : 'H'}.jpg`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 大图预览 -->
|
|
|
+ <ElImageViewer
|
|
|
+ v-if="showViewer"
|
|
|
+ :on-close="
|
|
|
+ () => {
|
|
|
+ showViewer = false;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ :url-list="showBig"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import ElImageViewer from "element-ui/packages/image/src/image-viewer";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: { ElImageViewer },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 竖轴还是横轴
|
|
|
+ isRow: "竖",
|
|
|
+
|
|
|
+ // 画作是否超过了屏幕（可以拖动）
|
|
|
+ isMove: false,
|
|
|
+ // 画作的真实高度
|
|
|
+ imgWidth: 0,
|
|
|
+ imgHeight: 0,
|
|
|
+ // 屏幕的高度
|
|
|
+ pageHeight: 0,
|
|
|
+ // 预览大图
|
|
|
+ showViewer: false,
|
|
|
+ showBig: [
|
|
|
+ "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
|
|
|
+ ],
|
|
|
+ // 画轴移动
|
|
|
+ zhouMove: 3,
|
|
|
+ tiemrr: -1,
|
|
|
+ // 画轴拖动
|
|
|
+ isFlag: false,
|
|
|
+ moveLoc: 0,
|
|
|
+
|
|
|
+ // 横轴左侧大盒子的宽度
|
|
|
+ leftBoxWidth: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ methods: {
|
|
|
+ // 查看大图
|
|
|
+ lookBigImg() {
|
|
|
+ this.showViewer = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 鼠标拖动
|
|
|
+ mousemoveFu(e, flag) {
|
|
|
+ let ev = e || event;
|
|
|
+ if (this.isFlag && this.isMove) {
|
|
|
+ if (this.isRow === "竖") {
|
|
|
+ // 最大能往下移动的距离
|
|
|
+ const maxNum = this.imgHeight - window.innerHeight;
|
|
|
+
|
|
|
+ // 向上是负 向下是正
|
|
|
+ let temp = this.moveLoc + ev.movementY * (flag ? -5 : 1);
|
|
|
+
|
|
|
+ if (-temp < 0) temp = 0;
|
|
|
+ else if (-temp >= maxNum) temp = -maxNum;
|
|
|
+
|
|
|
+ this.moveLoc = temp;
|
|
|
+ } else {
|
|
|
+ // 最大能往右移动的距离
|
|
|
+ const maxNum = this.imgWidth - this.leftBoxWidth;
|
|
|
+ // 向左是负 向右是正
|
|
|
+ let temp = this.moveLoc + ev.movementX * (flag ? -5 : 1);
|
|
|
+ if (-temp < 0) temp = 0;
|
|
|
+ else if (-temp >= maxNum) temp = -maxNum;
|
|
|
+ this.moveLoc = temp;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ // 判断画轴有没有超过屏幕
|
|
|
+ const pageHeight = window.innerHeight;
|
|
|
+ this.pageHeight = pageHeight;
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ if (this.isRow === "竖") {
|
|
|
+ const dom = document.querySelector(".imgBox");
|
|
|
+ if (dom.offsetHeight > pageHeight) {
|
|
|
+ this.isMove = true;
|
|
|
+ this.imgWidth = dom.offsetWidth;
|
|
|
+ this.imgHeight = dom.offsetHeight;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ const leftBoxWidthDom = document.querySelector(".leftBxo");
|
|
|
+ const leftBoxWidthDomWidth = leftBoxWidthDom.offsetWidth;
|
|
|
+ this.leftBoxWidth = leftBoxWidthDomWidth;
|
|
|
+ const dom = document.querySelector(".imgBoxHH");
|
|
|
+ if (dom.offsetWidth > leftBoxWidthDomWidth) {
|
|
|
+ this.isMove = true;
|
|
|
+ this.imgWidth = dom.offsetWidth;
|
|
|
+ this.imgHeight = dom.offsetHeight;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 200);
|
|
|
+ this.tiemrr = setInterval(() => {
|
|
|
+ if (this.zhouMove >= 99) clearInterval(this.tiemrr);
|
|
|
+ this.zhouMove = this.zhouMove + 1;
|
|
|
+ }, 30);
|
|
|
+ },
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.home {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+ .leftBxo {
|
|
|
+ background-color: aquamarine;
|
|
|
+ width: 60%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ .addIcon {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 50px;
|
|
|
+ left: 50px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 竖大盒子
|
|
|
+ .imgBox {
|
|
|
+ cursor: grab;
|
|
|
+ height: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 46%;
|
|
|
+ padding: 5% 3%;
|
|
|
+ white-space: nowrap;
|
|
|
+ display: inline-block;
|
|
|
+ background-image: url("../assets/img/ba.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .zhou {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 100%;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ & > img {
|
|
|
+ pointer-events: none;
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imgBoxMove {
|
|
|
+ cursor: default;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 横大盒子
|
|
|
+ .imgBoxHH {
|
|
|
+ cursor: grab;
|
|
|
+ width: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 55%;
|
|
|
+ padding: 3% 5%;
|
|
|
+ white-space: nowrap;
|
|
|
+ display: inline-block;
|
|
|
+ background-image: url("../assets/img/baH.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+ top: 50%;
|
|
|
+ .zhou {
|
|
|
+ position: absolute;
|
|
|
+ right: 100%;
|
|
|
+ top: 0;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ & > img {
|
|
|
+ pointer-events: none;
|
|
|
+ height: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imgBoxHHMove {
|
|
|
+ cursor: default;
|
|
|
+ }
|
|
|
+
|
|
|
+ .smImgBox {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 5px;
|
|
|
+ right: 5px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ padding: 10px 20px;
|
|
|
+ .smImgBoxMain {
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ .smBoxBor {
|
|
|
+ cursor: grab;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ }
|
|
|
+ .smBoxBorHH {
|
|
|
+ cursor: grab;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 100%;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ }
|
|
|
+ & > img {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .leftBxoCenter {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
