xthyg
/
xt_scenic_controls
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

logo大小修改

Browse Source
main
rosehan 2 years ago
parent aeba5b526c
commit a87cf7e0ad
1 changed files with 12 additions and 470 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 482
      ruoyi-ui/src/views/home.vue

482
ruoyi-ui/src/views/home.vue
Unescape View File

@ -2,6 +2,12 @@
<div class="p-pages-box p-pages-bg" v-loading="fullscreenLoading">
<!-- 页面头部 -->
<base-header-small title="邢台海洋乐园综合管控平台"></base-header-small>
<div class="p-home-logo"><img src="@/assets/images/logo.png"></img></div>
<!-- 首页 导航 -->
<div class="p-index-nav">
<div v-for="(item,index) in navName" :key="index" :class="navStatus==index?'active':''" class="p-index-nav-item"
@ -175,13 +181,14 @@ export default {
</script>
<style lang="scss" scoped>
.p-home-logo{position: fixed;top: 90px; left: 50%;transform: translate(-50%,0);}
.p-home-logo img{width: 120px; }
.p-index-nav {
display: flex;
position: fixed;
top: 50%;
top: 220px;
left: 50%;
margin-top: -300rem;
transform: translate(-50%, -50%);
transform: translate(-50%, 0);
.p-index-nav-item {
width: 210rem;
@ -226,10 +233,10 @@ export default {
.p-index-menu {
position: fixed;
top: 50%;
top: 300px;
left: 50%;
z-index: 10;
transform: translate(-50%, -50%);
transform: translate(-50%, 0);
width: 500rem;
height: 500rem;
background: url("~@/assets/images/p_home_round.svg");
@ -697,469 +704,6 @@ export default {
}
}
@keyframes right-into {
from {
right: -1920rem;
opacity: 0;
}
to {
right: -430rem;
opacity: 1;
}
}
</style><style lang="scss" scoped>
.p-index-nav {
display: flex;
position: fixed;
top: 50%;
left: 50%;
margin-top: -300rem;
transform: translate(-50%, -50%);
.p-index-nav-item {
width: 210rem;
height: 60rem;
margin: 0 $p-spacer-small;
font-size: 30rem;
font-family: YouSheBiaoTiHei;
line-height: 52rem;
text-align: center;
color: rgba($p-white-color, .6);
background: url("~@/assets/images/p_home_submit_blue.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.p-index-nav-item.active {
color: $p-white-color;
background: url("~@/assets/images/p_home_submit_active_blue.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}
.p-index-menu-box {
position: relative;
.p-index-menu-box a::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: auto;
content: "";
background-color: rgba(0, 0, 0, 0);
}
}
.p-index-menu {
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
transform: translate(-50%, -50%);
width: 500rem;
height: 500rem;
background: url("~@/assets/images/p_home_round.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
.p-index-menu-item {
position: absolute;
width: 532rem;
height: 120rem;
cursor: pointer;
}
.p-index-menu-text {
position: absolute;
display: block;
line-height: 120rem;
font-size: 28rem;
font-family: YouSheBiaoTiHei;
background-image: linear-gradient(to bottom, $p-white-color 30%, $p-secondary-color);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.p-index-menu-text:after {
content: "";
position: absolute;
height: 10rem;
width: 100rem;
bottom: 30rem;
}
.p-index-menu-item:hover .p-index-menu-text {
background-image: linear-gradient(to bottom, $p-white-color 20%, $p-primary-color);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.p-index-menu-icon {
position: absolute;
display: inline-block;
width: 120rem;
height: 120rem;
background: url("~@/assets/images/p_home_icon_bg.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.p-index-menu-item.menu1, .p-index-menu-item.menu3, .p-index-menu-item.menu5 {
left: -430rem;
text-align: right;
opacity: 1;
background-image: linear-gradient(to left, rgba(102, 182, 255, 0.2) 0%, rgba(102, 182, 255, 0) 100%);
.p-index-menu-text:after {
right: 5rem;
background: url("~@/assets/images/p_home_line_left.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
.p-index-menu-item.menu1:hover, .p-index-menu-item.menu3:hover, .p-index-menu-item.menu5:hover {
.p-index-menu-text:after {
background: url("~@/assets/images/p_home_line_left_active.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
.p-index-menu-item.menu2, .p-index-menu-item.menu4, .p-index-menu-item.menu6 {
right: -430rem;
text-align: left;
opacity: 1;
background-image: linear-gradient(to right, rgba(102, 182, 255, 0.2) 0%, rgba(102, 182, 255, 0) 100%);
.p-index-menu-text:after {
left: 5rem;
background: url("~@/assets/images/p_home_line_right.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
.p-index-menu-item.menu2:hover, .p-index-menu-item.menu4:hover, .p-index-menu-item.menu6:hover {
.p-index-menu-text:after {
background: url("~@/assets/images/p_home_line_right_active.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
.p-index-menu-item.menu1 {
top: 190rem;
animation: left-into .6s;
background: url("~@/assets/images/p_home_menu1.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
.p-index-menu-icon {
right: 140rem;
}
.p-index-menu-text {
right: 270rem;
}
}
.p-index-menu-item.menu1:hover {
background: url("~@/assets/images/p_home_menu1_active.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
.p-index-menu-icon {
background: url("~@/assets/images/p_home_icon_bg_active.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
.p-index-menu-item.menu2 {
top: 190rem;
animation: right-into .6s;
background: url("~@/assets/images/p_home_menu2.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
.p-index-menu-icon {
left: 140rem;
}
.p-index-menu-text {
left: 270rem;
}
}
.p-index-menu-item.menu2:hover {
background: url("~@/assets/images/p_home_menu2_active.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
.p-index-menu-icon {
background: url("~@/assets/images/p_home_icon_bg_active.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
.p-index-menu-item.menu3 {
top: 50rem;
animation: left-into 1s;
background: url("~@/assets/images/p_home_menu3.svg");
background-size: contain;
background-position: 100rem center;
background-repeat: no-repeat;
.p-index-menu-icon {
right: 120rem;
}
.p-index-menu-text {
right: 250rem;
}
}
.p-index-menu-item.menu3:hover {
background: url("~@/assets/images/p_home_menu3_active.svg");
background-size: contain;
background-position: 100rem center;
background-repeat: no-repeat;
.p-index-menu-icon {
background: url("~@/assets/images/p_home_icon_bg_active.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
.p-index-menu-item.menu4 {
top: 50rem;
margin-left: -20rem;
animation: right-into 1s;
background: url("~@/assets/images/p_home_menu4.svg");
background-size: contain;
background-position: 10rem center;
background-repeat: no-repeat;
.p-index-menu-icon {
left: 120rem;
}
.p-index-menu-text {
left: 250rem;
}
}
.p-index-menu-item.menu4:hover {
background: url("~@/assets/images/p_home_menu4_active.svg");
background-size: contain;
background-position: 10rem center;
background-repeat: no-repeat;
.p-index-menu-icon {
background: url("~@/assets/images/p_home_icon_bg_active.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
.p-index-menu-item.menu5 {
top: 330rem;
animation: left-into 1s;
background: url("~@/assets/images/p_home_menu5.svg");
background-size: contain;
background-position: 100rem center;
background-repeat: no-repeat;
.p-index-menu-icon {
right: 120rem;
}
.p-index-menu-text {
right: 250rem;
}
}
.p-index-menu-item.menu5:hover {
background: url("~@/assets/images/p_home_menu5_active.svg");
background-size: contain;
background-position: 100rem center;
background-repeat: no-repeat;
.p-index-menu-icon {
background: url("~@/assets/images/p_home_icon_bg_active.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
.p-index-menu-item.menu6 {
top: 330rem;
animation: right-into 1s;
background: url("~@/assets/images/p_home_menu6.svg");
background-size: contain;
background-position: 10rem center;
background-repeat: no-repeat;
.p-index-menu-icon {
left: 120rem;
}
.p-index-menu-text {
left: 250rem;
}
}
.p-index-menu-item.menu6:hover {
background: url("~@/assets/images/p_home_menu6_active.svg");
background-size: contain;
background-position: 10rem center;
background-repeat: no-repeat;
.p-index-menu-icon {
background: url("~@/assets/images/p_home_icon_bg_active.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
}
.p-index-menu:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400rem;
height: 400rem;
background: url("~@/assets/images/p_home_earth.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.p-index-menu-page {
position: fixed;
width: 800rem;
height: 35rem;
bottom: 200rem;
left: 50%;
z-index: 10;
transform: translate(-50%, 0);
.p-index-menu-prev, .p-index-menu-next {
width: 80rem;
height: 35rem;
cursor: pointer;
}
.p-index-menu-prev {
position: absolute;
left: 0;
background: url("~@/assets/images/p_home_prev.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: menu-prev 2s infinite;
}
.p-index-menu-prev.noActive {
display: none;
}
.p-index-menu-next {
position: absolute;
right: 0;
background: url("~@/assets/images/p_home_next.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: menu-next 2s infinite;
}
@keyframes menu-prev {
from {
left: 0;
opacity: .5;
}
to {
left: -20rem;
opacity: 1;
}
}
@keyframes menu-next {
from {
right: 0;
opacity: .5;
}
to {
right: -20rem;
opacity: 1;
}
}
.p-index-menu-next.noActive {
display: none;
}
}
.p-index-menu-page:after {
content: " ";
display: table;
clear: both;
}
.p-index-bottom {
position: fixed;
left: 50%;
bottom: 0;
z-index: 9;
transform: translate(-55%, 0);
height: 600rem;
width: 1000rem;
background: url("~@/assets/images/p_home_lampstand.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@keyframes left-into {
from {
left: -1920rem;
opacity: 0;
}
to {
left: -430rem;
opacity: 1;
}
}
@keyframes right-into {
from {
right: -1920rem;
@ -1171,5 +715,3 @@ export default {
}
}
</style>

Write Preview
Loading…
Cancel
Save