From f46809e0c7b8d78f681f17deec7c3bd8b472575a Mon Sep 17 00:00:00 2001
From: xiebin <123456>
Date: Fri, 17 Feb 2023 11:37:08 +0800
Subject: [PATCH] 修改系统切换样式
---
index.html | 117 +++++++++++++++++++++++-----------------------------------
1 files changed, 46 insertions(+), 71 deletions(-)
diff --git a/index.html b/index.html
index b5293e5..572e9c8 100644
--- a/index.html
+++ b/index.html
@@ -127,84 +127,50 @@
<body class="claro jimu-main-font">
<style>
- .qhdiv {
- z-index:10000;
- position: fixed;
- top: calc(40% - 90px);
- transform: translate(0, -50%);
- right: 20px;
- display: flex;
- flex-direction: column;margin: 0;
- width: 55px;
- height: 100px;
- text-align: center
- }
- .qhbtn {
- border: 0;
- width: 50px;
- height: 50px;
- background: url('images/qh001.jpg');
- background-size: 100%;
- border-radius: 50%;
- cursor: pointer;
- }
- .qhbtn:before, .qhbtn:after {
- opacity: 0; /*透明度为完全透明*/
+ .ss {
+ border-radius: 5px;
+ height: 32px;
+ width: 32px;
position: absolute;
- z-index: 100000; /*设为最上层*/
- /*鼠标放上元素上时的动画，鼠标放上后效果在.tip-*:hover:before, .tip-*:hover:after中设置;
- 0.3s:规定完成过渡效果需要多少秒或毫秒,ease:规定慢速开始，然后变快，然后慢速结束的过渡效果*/
- transition: 0.3s ease;
- -webkit-transition: 0.3s ease;
- -moz-transition: 0.3s ease;
}
- .qhbtn:before {
- content: '切换2D';
- border: 6px solid transparent;
- white-space: nowrap; /*强制不换行*/
- background-color: #000000;
- color: #ffffff;
+ .map3d-system {
+ background: #303336 url('images/3d-2-03.png');
+ border: 1px solid #303336;
+ background-size: cover;
+ z-index:6;
+ cursor:pointer;
+ right: 0.7%;
+ bottom: 25%;
}
-
- .qhbtn:after {
- content: '切换2D'; /*获取要提示的文本*/
- padding: 5px;
- white-space: nowrap; /*强制不换行*/
- background-color: #000000;
- color: #ffffff;
+ .map3d-system:hover{
+ color: #fff;
+ fill: #fff;
+ background: #48b url('images/3d-2-03.png');
+ background-size: cover;
+ border-color: #aef;
+ box-shadow: 0 0 8px #fff;
}
-
- .qhbtn:hover:before, .tip:hover:after {
- opacity: 1; /*鼠标放上时透明度为完全显示*/
- z-index: 1000;
+ .map3d-2d {
+ background: #303336 url('images/2d-2-02.png');
+ border: 1px solid #303336;
+ background-size: cover;
+ z-index:6;
+ cursor:pointer;
+ right: 3.5%;
+ bottom: 25%;
}
-
- .tip-left:before {
- top: 50%;
- left: 0%;
- border-left-color: rgba(0, 0, 0, 0.8);
- margin-left: 0px;
- margin-top: -3px;
- }
-
- .tip-left:after {
- top: 50%;
- right: 100%;
- margin-right: 0px;
- margin-top: -6px;
- }
-
- .tip-left:hover:before {
- margin-left: -6px;
- }
-
- .tip-left:hover:after {
- margin-right: 6px;
+ .map3d-2d:hover{
+ color: #fff;
+ fill: #fff;
+ background: #48b url('images/2d-2-02.png');
+ background-size: cover;
+ border-color: #aef;
+ box-shadow: 0 0 8px #fff;
}
</style>
- <div class="qhdiv" onclick="javascript:window.location='http://localhost:63342/hsyj/index.html'">
- <button type="button" class="qhbtn tip-left" data-tip="我是上边提示"><span style="color:dodgerblue;"></span></button>
- </div>
+ <div class="map3d-system ss" id="map3d" title="系统切换" onclick="map3dClick()"></div>
+ <div class="map3d-2d ss" id="map2d" title="切换2D"></div>
+
<div id="main-loading">
<div id="app-loading"></div>
<div id="loading-gif"></div>
@@ -233,6 +199,7 @@
</script> -->
<script type="text/javascript" src="init.js"></script>
<script>
+ $('#map2d').hide();
function runWidget(name) {
require(['dojo/topic'],
function(topic) {
@@ -240,6 +207,14 @@
});
}
+ function map3dClick() {
+ if($('#map2d').is(':hidden')){ //如果node是隐藏的则显示node元素，否则隐藏
+ $('#map2d').show();
+ }else{
+ $('#map2d').hide();
+ }
+ }
+
</script>
</body>
</html>
--
Gitblit v1.9.3