|
@@ -14,7 +14,7 @@
|
|
|
</el-affix>
|
|
</el-affix>
|
|
|
</div> -->
|
|
</div> -->
|
|
|
|
|
|
|
|
- <div :class="isOpen ? 'isOpenLeftShow' : 'isOpenRightShow'" @click="isOpen = !isOpen">
|
|
|
|
|
|
|
+ <!-- <div :class="isOpen ? 'isOpenLeftShow' : 'isOpenRightShow'" @click="isOpen = !isOpen">
|
|
|
<div>
|
|
<div>
|
|
|
<el-icon :size="20" class="btn_color">
|
|
<el-icon :size="20" class="btn_color">
|
|
|
<DArrowLeft v-if="isOpen == false" />
|
|
<DArrowLeft v-if="isOpen == false" />
|
|
@@ -25,7 +25,19 @@
|
|
|
|
|
|
|
|
<el-drawer v-model="isOpen" :with-header="false" size="100%">
|
|
<el-drawer v-model="isOpen" :with-header="false" size="100%">
|
|
|
<iframe :src="iframeUrl" class="win-iframe"></iframe>
|
|
<iframe :src="iframeUrl" class="win-iframe"></iframe>
|
|
|
- </el-drawer>
|
|
|
|
|
|
|
+ </el-drawer> -->
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 一张图可视化平台 全息按钮 -->
|
|
|
|
|
+ <a href="" @click="handleOpenClick()" target="_blank" class="btn-map-new">
|
|
|
|
|
+ <span class="btn-title">一张图可视化平台</span>
|
|
|
|
|
+ <svg class="out-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8">
|
|
|
|
|
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
|
|
|
|
+ <polyline points="15 3 21 3 21 9"></polyline>
|
|
|
|
|
+ <line x1="10" y1="14" x2="21" y2="3"></line>
|
|
|
|
|
+ </svg>
|
|
|
|
|
+ <!-- 循环流动光效层 -->
|
|
|
|
|
+ <div class="flow-light"></div>
|
|
|
|
|
+ </a>
|
|
|
|
|
|
|
|
<div class="part1" id="top">
|
|
<div class="part1" id="top">
|
|
|
<div style="margin-left: 10%">
|
|
<div style="margin-left: 10%">
|
|
@@ -1378,6 +1390,11 @@ export default {
|
|
|
|
|
|
|
|
return `${month}/${day}`;
|
|
return `${month}/${day}`;
|
|
|
},
|
|
},
|
|
|
|
|
+ handleOpenClick() {
|
|
|
|
|
+ // console.log(systemConfig.iframeUrl + "?token=" + localStorage.getItem("token"));
|
|
|
|
|
+ // window.open(systemConfig.iframeUrl + "?token=" + localStorage.getItem("token"), "_blank");
|
|
|
|
|
+ window.open(systemConfig.iframeUrl + "?token=1", "_blank");
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
};
|
|
};
|
|
|
</script>
|
|
</script>
|
|
@@ -2398,6 +2415,88 @@ export default {
|
|
|
height: 100%; /* 固定高度 */
|
|
height: 100%; /* 固定高度 */
|
|
|
border: none; /* 移除默认边框 */
|
|
border: none; /* 移除默认边框 */
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+.btn_onemap {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ font-size: 30px;
|
|
|
|
|
+ right: 20px;
|
|
|
|
|
+ top: 300px;
|
|
|
|
|
+ z-index: 9;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ // background-color: #152736;
|
|
|
|
|
+ // box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ background-clip: padding-box, border-box;
|
|
|
|
|
+ background-origin: padding-box, border-box;
|
|
|
|
|
+ background-image: linear-gradient(138deg, #00002d42, #2220, #00002d52), linear-gradient(358deg, #e5e5e5de, #00000000, #00000000, #00000000);
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ transform: translateY(-5px);
|
|
|
|
|
+ background-clip: padding-box, border-box;
|
|
|
|
|
+ background-origin: padding-box, border-box;
|
|
|
|
|
+ background-image: linear-gradient(138deg, #00002d42, #2220, #00002d52), linear-gradient(358deg, #acffffde, #00000000, #00000000, #00000000);
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.btn-map-new {
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 10px;
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+ /* 高透玻璃质感 */
|
|
|
|
|
+ background: linear-gradient(135deg, rgba(10,40,80,0.4), rgba(0,15,35,0.5));
|
|
|
|
|
+ border-radius: 16px;
|
|
|
|
|
+ border: 1px solid rgba(90, 200, 255, 0.35);
|
|
|
|
|
+ box-shadow:
|
|
|
|
|
+ 0 0 20px rgba(50,160,255,0.25),
|
|
|
|
|
+ inset 0 0 15px rgba(80,190,255,0.1);
|
|
|
|
|
+ text-decoration: none;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 200px;
|
|
|
|
|
+ right: 50px;
|
|
|
|
|
+ z-index: 9;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ transition: all 0.3s cubic-bezier(0.2,0,0.2,1);
|
|
|
|
|
+}
|
|
|
|
|
+/* 循环流光动画 */
|
|
|
|
|
+.flow-light {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: -100%;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ background: linear-gradient(90deg, transparent, rgba(120,220,255,0.25), transparent);
|
|
|
|
|
+ animation: flow-move 4s infinite linear;
|
|
|
|
|
+}
|
|
|
|
|
+@keyframes flow-move {
|
|
|
|
|
+ 0% { left: -100%; }
|
|
|
|
|
+ 100% { left: 100%; }
|
|
|
|
|
+}
|
|
|
|
|
+.btn-title {
|
|
|
|
|
+ font-size: 20px;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ letter-spacing: 2px;
|
|
|
|
|
+ color: #e6f6ff;
|
|
|
|
|
+ text-shadow: 0 0 8px rgba(100,200,255,0.4);
|
|
|
|
|
+}
|
|
|
|
|
+.out-icon {
|
|
|
|
|
+ opacity: 0.8;
|
|
|
|
|
+}
|
|
|
|
|
+/* 悬浮交互 */
|
|
|
|
|
+.btn-map-new:hover {
|
|
|
|
|
+ background: linear-gradient(135deg, rgba(15,50,95,0.55), rgba(0,20,45,0.65));
|
|
|
|
|
+ box-shadow:
|
|
|
|
|
+ 0 0 35px rgba(60,170,255,0.45),
|
|
|
|
|
+ inset 0 0 20px rgba(90,200,255,0.15);
|
|
|
|
|
+ transform: translateY(-4px) scale(1.02);
|
|
|
|
|
+}
|
|
|
|
|
+/* 点击反馈 */
|
|
|
|
|
+.btn-map-new:active {
|
|
|
|
|
+ transform: scale(0.97);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
:deep(.el-drawer__body) {
|
|
:deep(.el-drawer__body) {
|
|
|
padding: 0;
|
|
padding: 0;
|
|
|
}
|
|
}
|