|
|
@@ -1,275 +1,276 @@
|
|
|
$base_fontSize: 100;
|
|
|
@function rem($px) {
|
|
|
- @return $px / $base_fontSize * 1rem;
|
|
|
+ @return $px / $base_fontSize * 1rem;
|
|
|
}
|
|
|
.nav-wrap {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: linear-gradient(0deg, #000000 0%, #132037 100%);
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- .top {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(0deg, #000000 0%, #132037 100%);
|
|
|
+ overflow: hidden;
|
|
|
position: relative;
|
|
|
- z-index: 101;
|
|
|
- padding-top: rem(67);
|
|
|
- .lfet-right {
|
|
|
- padding: 0 rem(100) 0 rem(100);
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- text-align: center;
|
|
|
- position: relative;
|
|
|
- top: rem(-25);
|
|
|
- .tenantName {
|
|
|
- color: RGBA(254, 254, 254, 1);
|
|
|
- padding: 0 rem(20);
|
|
|
- height: rem(49);
|
|
|
- line-height: rem(49);
|
|
|
- font-size: rem(20);
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1px solid RGBA(71, 81, 98, 1);
|
|
|
- border-radius: rem(10);
|
|
|
- margin-right: rem(20);
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ .top {
|
|
|
+ position: relative;
|
|
|
+ z-index: 101;
|
|
|
+ padding-top: rem(67);
|
|
|
+ .lfet-right {
|
|
|
+ padding: 0 rem(100) 0 rem(100);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ top: rem(-25);
|
|
|
+ .tenantName {
|
|
|
+ color: RGBA(254, 254, 254, 1);
|
|
|
+ padding: 0 rem(20);
|
|
|
+ height: rem(49);
|
|
|
+ line-height: rem(49);
|
|
|
+ font-size: rem(20);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid RGBA(71, 81, 98, 1);
|
|
|
+ border-radius: rem(10);
|
|
|
+ margin-right: rem(20);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .logo {
|
|
|
- width: rem(120);
|
|
|
- height: rem(36);
|
|
|
- background: url(../../assets/img/nav/logo.png);
|
|
|
- background-size: 100% 100%;
|
|
|
- z-index: 11;
|
|
|
- }
|
|
|
- .logout {
|
|
|
- width: rem(49);
|
|
|
- height: rem(49);
|
|
|
- background: url(../../assets/img/btn_switch.png);
|
|
|
- background-size: 100% 100%;
|
|
|
- z-index: 11;
|
|
|
- }
|
|
|
-
|
|
|
- .top_png {
|
|
|
- width: 100%;
|
|
|
- width: rem(1458);
|
|
|
- margin: auto;
|
|
|
- height: rem(58);
|
|
|
- // transform: translateX(-50%);
|
|
|
- animation-name: opacityAni;
|
|
|
- background: url(../../assets/img/nav/img_toubu.png);
|
|
|
- background-size: cover;
|
|
|
- opacity: 0;
|
|
|
- animation-delay: 0.668s;
|
|
|
- animation-duration: 0.834s;
|
|
|
- animation-fill-mode: forwards;
|
|
|
- p {
|
|
|
- font-size: rem(24);
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 600;
|
|
|
- color: #ffffff;
|
|
|
- background: linear-gradient(1deg, #a8c4f5 0%, #ffffff 100%);
|
|
|
- -webkit-background-clip: text;
|
|
|
- -webkit-text-fill-color: transparent;
|
|
|
- position: relative;
|
|
|
- top: rem(-10);
|
|
|
- text-align: center;
|
|
|
+ .logo {
|
|
|
+ width: rem(120);
|
|
|
+ height: rem(36);
|
|
|
+ background: url(../../assets/img/nav/logo.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ z-index: 11;
|
|
|
}
|
|
|
- }
|
|
|
- .bottom_png {
|
|
|
- position: absolute;
|
|
|
- z-index: 100;
|
|
|
- bottom: 0;
|
|
|
- width: 100%;
|
|
|
- height: rem(83);
|
|
|
- // height: 4.3vw;
|
|
|
- background: #010305;
|
|
|
- & > span {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: rem(83);
|
|
|
- // height: 4.3vw;
|
|
|
- animation-name: opacityAni;
|
|
|
- background: url(../../assets/img/nav/img_dibu.png);
|
|
|
- background-size: cover;
|
|
|
- opacity: 0;
|
|
|
- animation-delay: 0.668s;
|
|
|
- animation-duration: 0.834s;
|
|
|
- animation-fill-mode: forwards;
|
|
|
+ .logout {
|
|
|
+ width: rem(49);
|
|
|
+ height: rem(49);
|
|
|
+ background: url(../../assets/img/btn_switch.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ z-index: 11;
|
|
|
}
|
|
|
- }
|
|
|
- .bg-earth {
|
|
|
- position: absolute;
|
|
|
- width: rem(1500);
|
|
|
- height: rem(600);
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- overflow-y: auto;
|
|
|
|
|
|
- &::-webkit-scrollbar {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- .nav-title {
|
|
|
- position: absolute;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- width: rem(381);
|
|
|
- height: rem(153);
|
|
|
- img {
|
|
|
- width: rem(150);
|
|
|
- height: rem(40);
|
|
|
- }
|
|
|
- .dot_icon {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- flex-direction: row;
|
|
|
- margin-top: rem(10);
|
|
|
- p {
|
|
|
- font-size: rem(36);
|
|
|
- font-weight: 600;
|
|
|
- font-family: PingFang SC;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .icon-blue-rect {
|
|
|
- display: inline-block;
|
|
|
- margin: 0 rem(10);
|
|
|
- width: rem(6);
|
|
|
- height: rem(6);
|
|
|
- background: linear-gradient(-80deg, #2a68e6 0%, #2887f2 100%);
|
|
|
- border-radius: rem(6);
|
|
|
- vertical-align: super;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .nav-content {
|
|
|
- display: grid;
|
|
|
- // 左右距离30 一列3等分
|
|
|
- row-gap: rem(30);
|
|
|
- column-gap: rem(30);
|
|
|
- grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
- .item {
|
|
|
- width: rem(480);
|
|
|
- height: rem(180);
|
|
|
- background: RGBA(32, 40, 57, 1);
|
|
|
- border-radius: rem(10);
|
|
|
- border: 1px solid transparent;
|
|
|
- position: relative;
|
|
|
- cursor: pointer;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- &:hover {
|
|
|
- border-color: #ffffff;
|
|
|
- .left-label {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- .item-cenText .contents {
|
|
|
- opacity: 1;
|
|
|
- .subtitle {
|
|
|
- color: #0eaeff;
|
|
|
- }
|
|
|
- }
|
|
|
- .right-img {
|
|
|
- opacity: 0.7;
|
|
|
+ .top_png {
|
|
|
+ width: 100%;
|
|
|
+ width: rem(1458);
|
|
|
+ margin: auto;
|
|
|
+ height: rem(58);
|
|
|
+ // transform: translateX(-50%);
|
|
|
+ animation-name: opacityAni;
|
|
|
+ background: url(../../assets/img/nav/img_toubu.png);
|
|
|
+ background-size: cover;
|
|
|
+ opacity: 0;
|
|
|
+ animation-delay: 0.668s;
|
|
|
+ animation-duration: 0.834s;
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+ p {
|
|
|
+ font-size: rem(24);
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ffffff;
|
|
|
+ background: linear-gradient(1deg, #a8c4f5 0%, #ffffff 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ position: relative;
|
|
|
+ top: rem(-10);
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
- .img {
|
|
|
- display: none;
|
|
|
+ }
|
|
|
+ .bottom_png {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 100;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: rem(83);
|
|
|
+ // height: 4.3vw;
|
|
|
+ background: #010305;
|
|
|
+ & > span {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: rem(83);
|
|
|
+ // height: 4.3vw;
|
|
|
+ animation-name: opacityAni;
|
|
|
+ background: url(../../assets/img/nav/img_dibu.png);
|
|
|
+ background-size: cover;
|
|
|
+ opacity: 0;
|
|
|
+ animation-delay: 0.668s;
|
|
|
+ animation-duration: 0.834s;
|
|
|
+ animation-fill-mode: forwards;
|
|
|
}
|
|
|
- .imghover {
|
|
|
- display: block;
|
|
|
+ }
|
|
|
+ .bg-earth {
|
|
|
+ position: absolute;
|
|
|
+ width: rem(1500);
|
|
|
+ height: rem(600);
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
}
|
|
|
- }
|
|
|
- .imghover {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .item-cenText {
|
|
|
- margin: rem(43) 0 0 rem(56);
|
|
|
+ }
|
|
|
+ .nav-title {
|
|
|
+ position: absolute;
|
|
|
display: flex;
|
|
|
- .img,
|
|
|
- .imghover {
|
|
|
- width: rem(82);
|
|
|
- height: rem(92);
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ width: rem(381);
|
|
|
+ height: rem(153);
|
|
|
+ img {
|
|
|
+ width: rem(150);
|
|
|
+ height: rem(40);
|
|
|
}
|
|
|
- .contents {
|
|
|
- margin-left: rem(48);
|
|
|
- font-size: rem(24);
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
- opacity: 0.8;
|
|
|
- .subtitle {
|
|
|
- font-size: rem(12);
|
|
|
+ .dot_icon {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: row;
|
|
|
margin-top: rem(10);
|
|
|
- color: #748ba8;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
+ p {
|
|
|
+ font-size: rem(36);
|
|
|
+ font-weight: 600;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .icon-blue-rect {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 rem(10);
|
|
|
+ width: rem(6);
|
|
|
+ height: rem(6);
|
|
|
+ background: linear-gradient(-80deg, #2a68e6 0%, #2887f2 100%);
|
|
|
+ border-radius: rem(6);
|
|
|
+ vertical-align: super;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .right-img {
|
|
|
- background: url("../../assets/img/nav/img6.png") no-repeat;
|
|
|
- background-size: cover;
|
|
|
- width: rem(90);
|
|
|
- height: rem(180);
|
|
|
- opacity: 0.2;
|
|
|
- }
|
|
|
-
|
|
|
- .left-label {
|
|
|
- width: rem(6);
|
|
|
- height: rem(50);
|
|
|
- background: #ffffff;
|
|
|
- opacity: 0.3;
|
|
|
- border-radius: 0px rem(4) rem(4) 0px;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- }
|
|
|
}
|
|
|
- .item.unOwner {
|
|
|
- opacity: 0.3;
|
|
|
- cursor: no-drop;
|
|
|
- animation-name: opacityAni2;
|
|
|
- &:hover {
|
|
|
- border-color: transparent;
|
|
|
- .left-label {
|
|
|
- opacity: 0.3;
|
|
|
- }
|
|
|
- .item-cenText .contents {
|
|
|
- opacity: 0.8;
|
|
|
- .subtitle {
|
|
|
- color: #748ba8;
|
|
|
- }
|
|
|
- }
|
|
|
- .right-img {
|
|
|
- opacity: 0.2;
|
|
|
- }
|
|
|
- .img {
|
|
|
- display: block;
|
|
|
+ .nav-content {
|
|
|
+ display: grid;
|
|
|
+ // 左右距离30 一列3等分
|
|
|
+ row-gap: rem(30);
|
|
|
+ column-gap: rem(30);
|
|
|
+ grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
+ .item {
|
|
|
+ width: rem(480);
|
|
|
+ height: rem(180);
|
|
|
+ background: RGBA(32, 40, 57, 1);
|
|
|
+ border-radius: rem(10);
|
|
|
+ border: 1px solid transparent;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ &:hover {
|
|
|
+ border-color: #ffffff;
|
|
|
+ .left-label {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ .item-cenText .contents {
|
|
|
+ opacity: 1;
|
|
|
+ .subtitle {
|
|
|
+ color: #0eaeff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-img {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+ .img {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .imghover {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imghover {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .item-cenText {
|
|
|
+ margin: rem(43) 0 0 rem(56);
|
|
|
+ display: flex;
|
|
|
+ .img,
|
|
|
+ .imghover {
|
|
|
+ width: rem(82);
|
|
|
+ height: rem(92);
|
|
|
+ }
|
|
|
+ .contents {
|
|
|
+ margin-left: rem(48);
|
|
|
+ font-size: rem(24);
|
|
|
+ margin-top: rem(16);
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ opacity: 0.8;
|
|
|
+ .subtitle {
|
|
|
+ font-size: rem(12);
|
|
|
+ margin-top: rem(10);
|
|
|
+ color: #748ba8;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-img {
|
|
|
+ background: url('../../assets/img/nav/img6.png') no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ width: rem(90);
|
|
|
+ height: rem(180);
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-label {
|
|
|
+ width: rem(6);
|
|
|
+ height: rem(50);
|
|
|
+ background: #ffffff;
|
|
|
+ opacity: 0.3;
|
|
|
+ border-radius: 0px rem(4) rem(4) 0px;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
}
|
|
|
- .imghover {
|
|
|
- display: none;
|
|
|
+ .item.unOwner {
|
|
|
+ opacity: 0.3;
|
|
|
+ cursor: no-drop;
|
|
|
+ animation-name: opacityAni2;
|
|
|
+ &:hover {
|
|
|
+ border-color: transparent;
|
|
|
+ .left-label {
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+ .item-cenText .contents {
|
|
|
+ opacity: 0.8;
|
|
|
+ .subtitle {
|
|
|
+ color: #748ba8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-img {
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
+ .img {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .imghover {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
@keyframes opacityAni {
|
|
|
- 0% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
@keyframes opacityAni2 {
|
|
|
- 0% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- opacity: 0.3;
|
|
|
- }
|
|
|
-}
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+}
|
