diff --git a/src/assets/img/map3.jpg b/src/assets/img/map3.jpg new file mode 100644 index 0000000..71567fe Binary files /dev/null and b/src/assets/img/map3.jpg differ diff --git a/src/views/index.vue b/src/views/index.vue index fb17d56..8e4854c 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -468,7 +468,7 @@ export default { // item.id == 2 东北; // item.id == 1 丽水; // item.id == 5 石门; - const foundObject = this.limitUserId.find(item => item.id == 2 || item.id == 1 || item.id == 5); + const foundObject = this.limitUserId.find(item => item.id == 2 || item.id == 1 || item.id == 5|| item.id == 7); if (!foundObject) { this.$message('您当前没有权限查看!') return diff --git a/src/views/page/largeScreen.vue b/src/views/page/largeScreen.vue index 2912376..3c76ad4 100644 --- a/src/views/page/largeScreen.vue +++ b/src/views/page/largeScreen.vue @@ -1,6 +1,6 @@ @@ -916,7 +1000,37 @@ export default { } } }, - + getTopOrLeft7(id){ + if(id == 1){ + return 'top:34%;left:62%' + }else if(id == 2){ + return 'top:19%;left:64%' + }else if(id == 3){ + return 'top:19%;left:50%' + }else if(id == 4){ + return 'top:52%;left:22%' + }else if(id == 5){ + return 'top:34%;left:25%' + }else if(id == 6){ + return 'top:52%;left:64%' + } + }, + getTopOrLeft77(id){ + + if(id == 1){ + return 'top:34%;left:62%;transform: translate(54%,-50%);' + }else if(id == 2){ + return 'top:19%;left:64%;transform: translate(54%,0%);' + }else if(id == 3){ + return 'top:19%;left:50%;transform: translate(54%,0%);' + }else if(id == 4){ + return 'top:52%;left:22%;transform: translate(54%,-50%);' + }else if(id == 5){ + return 'top:34%;left:25%;transform: translate(54%,-50%);' + }else if(id == 6){ + return 'top:52%;left:64%;transform: translate(54%,-50%);' + } + }, getNamePosition(id) { if (id == 1) { return "position: absolute;top: 41%;left: 13%;"; @@ -959,6 +1073,11 @@ export default { if(that.popContentCurrent > 4){ that.popContentCurrent = 1; } + } else if(that.limitUserId == 7){ + that.popContentCurrent++; + if(that.popContentCurrent > 6){ + that.popContentCurrent = 1; + } } }, 3000); }, @@ -1017,6 +1136,11 @@ export default { if(that.popContentCurrent > 4){ that.popContentCurrent = 1; } + }else if(that.limitUserId == 7){ + that.popContentCurrent++; + if(that.popContentCurrent > 6){ + that.popContentCurrent = 1; + } } }, 3000); } @@ -1026,13 +1150,15 @@ export default { get_user_getjurisdiction(userId) { this.api.user_getjurisdiction(userId).then((res) => { if (res.data.code == 200) { - this.limitUserId = (res.data.data.filter(el=>el.id == 1 || el.id == 2 || el.id == 5))[0].id; + this.limitUserId = (res.data.data.filter(el=>el.id == 1 || el.id == 2 || el.id == 5|| el.id == 7))[0].id; if (this.limitUserId == 1) { this.drag_boxHandler(); } else if (this.limitUserId == 2) { this.drag_boxHandler1(); } else if (this.limitUserId == 5) { this.drag_boxHandler5(); + } else if (this.limitUserId == 7) { + this.drag_boxHandler7(); } } }); @@ -1065,7 +1191,7 @@ export default { cancelHandler1() { this.popContentCurrent1 = -1; }, - + handlerPop(id) { // console.log(id); this.popContentCurrent = id; @@ -1074,7 +1200,7 @@ export default { handlerPop1(id) { this.popContentCurrent1 = id; }, - + toBack() { this.$router.push({ path: "/largeScreen" }); }, @@ -1214,7 +1340,73 @@ export default { } }; }, + drag_boxHandler7() { + let demo = this.$refs.drag_box7; + demo = document.querySelector(".drag_box7"); //待拖拽元素 + let canMove = false; //拖拽状态 + let x = 0, + y = 0; //鼠标位置 + //监听按下鼠标事件 + demo.onmousedown = function (e) { + x = e.pageX - demo.offsetLeft; + y = e.pageY - demo.offsetTop; + canMove = true; //激活拖拽状态 + }; + //监听右击鼠标事件 + demo.oncontextmenu = function (e) { + e.preventDefault(); //阻止默认行为 + }; + //监听鼠标抬起事件 + window.onmouseup = function () { + canMove = false; //关闭拖拽状态 + }; + window.onblur = function () { + //窗口失去焦点事件 + canMove = false; //关闭拖拽状态 + }; + + //监听鼠标移动事件 + window.onmousemove = function (e) { + e.preventDefault(); //阻止默认行为(字不能拖走) + if (canMove) { + //对范围判断 + let left = e.pageX - x; + let top = e.pageY - y; + + //if (left > 0) left = 0 //当距离左边小于0时 让它为0 + //if (top > 0) top = 0 //当距离上边小于0时 让它为0 + // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到) + // let maxLeft = window.innerWidth - demo.offsetWidth + // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到) + // let maxTop = window.innerHeight - demo.offsetHeight + + // if (left > maxLeft) left = maxLeft + // if (top > maxTop) top = maxTop + + demo.style.left = left + "px"; + demo.style.top = top + "px"; + } + }; + let scale = 1; + demo.onwheel = function (e) { + if (e.wheelDelta > 0) { + scale += 0.05; + if (scale > 4) { + scale = 4; + } + demo.style.transform = `scale(${scale})`; + // console.log(scale); + } else { + scale -= 0.05; + if (scale < 1) { + scale = 1; + } + demo.style.transform = `scale(${scale})`; + // console.log(scale); + } + }; + }, drag_boxHandler5() { let demo = this.$refs.drag_box5; demo = document.querySelector(".drag_box5"); //待拖拽元素 @@ -1950,7 +2142,234 @@ export default { } } } + .drag_box7{ + width: 100%; + height: auto; + position: absolute; + top:-95px; + -webkit-mask-image: linear-gradient( + 90deg, + transparent 0%, + blue 5%, + blue 93%, + transparent 99% + ); + .drag_img { + width: 100%; + height: auto; + -webkit-mask-image: linear-gradient( + transparent 0%, + blue 13%, + blue 73%, + transparent 97% + ); + } + + .pole_item{ + // width: 0.5rem; + height: 0.34rem; + position: absolute; + top: 21%; + left: 5%; + cursor: pointer; + .p_title { + // width: 0.5rem; + // height: 0.22rem; + background: rgba(1, 12, 28, 0.7); + border-radius:40px; + display: flex; + align-items: center; + box-sizing: border-box; + padding: 0.04rem; + // position: absolute; + overflow: hidden; + white-space: nowrap; + + > img { + width: 0.2rem; + height: 0.2rem; + margin-right: 0.05rem; + } + + > span { + font-size: 0.2rem; + font-family: MicrosoftYaHei; + font-weight: 400; + color: #ffffff; + flex: 1; + } + } + + .pole1 { + width: 0.5rem; + height:auto; + position: absolute; + left: 50%; + top: .2rem; + transform: translateX(-50%) + } + } + + .pop_content1 { + width: 3.5rem; + height: 4.55rem; + background: url("../../assets/img/pop_bg.png") center no-repeat; + background-size: 100% 100%; + overflow: hidden; + position: absolute; + // top: 17%; + // left: 23%; + z-index: 999999; + + .close_img { + width: 0.2rem; + height: 0.2rem; + position: absolute; + top: 0; + right: 0; + } + + .p_video { + width: 90%; + height: 1.82rem; + margin: 0.1rem auto 0; + + > img { + width: 100%; + height: 100%; + } + } + + .text { + width: 100%; + height: 0.4rem; + font-size: 0.2rem; + font-family: AlimamaShuHeiTi-Bold; + font-weight: bold; + color: #f3fdff; + line-height: 0.4rem; + box-sizing: border-box; + padding-left: 0.2rem; + } + + .line { + width: 90%; + height: 0.01rem; + background: #51d4fa; + opacity: 0.5; + margin: 0 auto; + } + + .detail { + width: 100%; + height: 0.45rem; + display: flex; + align-items: center; + justify-content: space-evenly; + padding: 0 0.15rem; + + .d_item { + height: 0.3rem; + background: rgba(81, 212, 250, 0.15); + border: 0.01rem solid rgba(106, 222, 255, 0.4); + border-radius: 0.02rem; + display: flex; + justify-content: center; + // align-items: center; + box-sizing: border-box; + padding: 0.05rem 0.05rem; + + > img { + width: 0.2rem; + height: 0.2rem; + margin-right: 0.05rem; + } + + > span { + font-size: 0.13rem; + font-family: MicrosoftYaHei; + font-weight: 400; + color: #d9effd; + } + } + } + + .grow { + width: 2.5rem; + height: 0.3rem; + background: url("../../assets/img/grow_bg.png") center no-repeat; + background-size: 100% 100%; + margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; + + > img { + width: 0.18rem; + height: 0.18rem; + margin-right: 0.05rem; + } + + > span:nth-child(2) { + font-size: 0.13rem; + font-family: MicrosoftYaHei; + font-weight: 400; + color: #ffffff; + } + + > span:nth-child(3) { + font-size: 0.13rem; + font-family: MicrosoftYaHei; + font-weight: 400; + color: #36ffd2; + } + } + + .icon_item { + width: 100%; + height: calc(100% - 3.22rem); + box-sizing: border-box; + padding: 0.1rem 0.15rem; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + overflow: auto; + + .icon_item_child { + width: 33.33%; + height: 33.33%; + display: flex; + margin-bottom: 0.05rem; + + > img { + width: 0.4rem; + height: 0.4rem; + margin-right: 0.05rem; + } + + > div { + display: flex; + flex-direction: column; + + > span:nth-child(1) { + font-size: 0.12rem; + font-family: MicrosoftYaHei; + font-weight: bold; + color: #86d9ff; + } + + > span:nth-child(2) { + font-size: 0.15rem; + font-family: AlibabaPuHuiTiB; + font-weight: bold; + color: #ffffff; + } + } + } + } + } + } .drag_box5{ width: 100%; height: 100%;