如何抽离一个公共的电梯导航

234 阅读1分钟

// 组件部分 @import "../style/logGed.less"; >

// css样式部分 li{ list-style: none; } .shopping{ height: 30px; line-height: 30px; background-color: rgb(227, 228, 229); } .centreBox{ width: 1200px; margin: 0 auto; } .flex{ display: flex; justify-content: space-between; } .topFlex{ display: flex; } .topFlexO{ min-width: 180px; } .topFlexT{ min-width: 1020px;

} .logos{ position: relative; line-height: 90px; left: 50%; top: 26%; transform: translateX(-50%); } .Adaptive{ min-width: 600px; margin: 0 auto; display: flex; justify-content: space-between; margin-left: 20px; } i{ font-style:normal; } .searchLogo{ width:58px; background-color: red; font-size: 20px; height:100%; position: absolute; left: 66%; color: white; } ::v-deep .searchLogo:before{ position: absolute; left: 50%; top: 15%; transform: translateX(-50%); } .grays{ color:rgb( 177, 178, 178); } .blacks{ color:rgb(11, 11, 11); } .sgg{ margin-right: 30px; } ::v-deep .inputs .ivu-input-default{ border: 1px solid red; outline:none; } .contentBoxO{ min-height: 100px; width: 100%; position: relative; margin-left: 130px;

} .myCarSty{ width: 190px; background-color: white; position: relative; left: 30px; // border: 1px solid rgb(242, 242, 242) border: 1px solid rgb(208, 208, 208); } ::v-deep .myCarSty .ivu-badge-count{ margin-right: -20px; } .myCarSty:hover{ border-color: rgb(243, 40, 56); } .myCarSty div{ position: absolute; left: 30%; top: 50%; // transform: translateX(-25%); transform: translateY(-50%); } .carSty{ color: rgb(243, 40, 56); } .searchCar{ position: absolute; top: 46%; transform: translateY(-50%); display: flex; justify-content: space-between; } .lunBox{ border-radius: 10px; overflow: hidden;

} .leftTie{ padding: 10px 0; min-height: 338px; overflow: hidden; background-color: rgb(110, 101, 104); } .leftTie li { position: relative; left: 50%; transform: translateX(-41%); padding: 8px 28px 8px 0; } .leftTie li p{ font-size: 14px; color: white; font-family: Microsoft YaHei; }

.leftTie li span{ font-size: 12px; color: rgb(191, 187, 189); font-family: Microsoft YaHei; }

.carousel{ margin-left: 10px; margin-top: -11px; } .logoUser{ width: 190px; min-height: 340px; // margin-top: 20px; margin-bottom: 7px; background-color: rgb(255, 255, 255); } .logoSty{ width: 39px; height: 39px; border-radius: 50%; } .topLogo{ display: flex; justify-content: space-around; margin-top: 25px; padding-bottom: 20px; border-bottom:1px solid rgb(245, 245, 245) } .bottomInfo{ position: relative; padding: 1px 20px; overflow: auto; margin-top: 10px; top: 50%; max-height: 200px; } .bottomInfo::-webkit-scrollbar { display: none; } .bottomInfo ul>li{ padding-top: 7px; } .bottomInfo ul>li a{ color: black; } .bottomInfo p:hover{ border-bottom: 1px solid red; } .moreA{ position: absolute; right: 26px; top: 8px; } .ulLiBox{ display: flex; justify-content: flex-start; flex-wrap: wrap; } .ulLiBox li { width: 228px; height: 300px; margin-right: 20px; margin-top: 20px; padding: 10px 14px; background-color: white; cursor: pointer; } .ulLiBox li p{ width:100%; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; } .ulLiBox li:hover { color: rgb(243, 40, 56); } .ulLiBox li .imgBox{ margin: 26px auto; width: 160px; height: 160px; background-color: rgb(244, 244, 244); } .tops{ min-width: 1240px; margin-top: 20px; } .tops h2{ margin-bottom: 10px; } .shufFling{ display: inline-block; width: 100%; min-height: 340px; } .demo-carousel{ width: 100%; overflow: hidden; max-height: 340px; } // .ulAuent{ // max-height: 80px; // } .cursor{ cursor: pointer; } .cursor:hover{ color: rgb(243, 40, 56) !important; } .announcementMore{ margin-top: 6px; display: flex; padding-right: 18px; justify-content: space-between; } .announcementMore>div{ width: 40px; text-align: center; margin-left: 18px; }

.msBox{ position: relative; display: inline-block; } .moresBox{ position: absolute; width: 100px; left: -75px; background-color: white; color: black; text-align: center; display: none; } .msBox:hover .moresBox { display: block; }

.navigation{ position: fixed; right: 10%; top: 50%; transform: translateY(-50%); } // .navigation>ul{ // position: absolute; // right: 12%; // top: 50%; // transform: translateY(-50%); // } .navigation>ul>li{ width: 50px; padding: 8px 10px; background-color: white; border-bottom: 1px solid rgb(241, 241, 241); } .custo{ position: relative; } .custo:hover .customer{ display: block; } .customer{ color: white; text-align: center; line-height: 32px; display: none; width: 180px; height: 32px; background-color: rgb(228, 57, 60); position: absolute; right: 130%; top: 50%; transform: translateY(-50%); } .class1{ cursor: pointer; color: #666666; } .class2{ color: rgb(228, 57, 60); border-bottom: 1px solid rgb(228, 57, 60); cursor: pointer; }

// 首页部分 @import "../../style/logGed.less"; .moressBox{ background-color: white; color: black; text-align: center; } .goOut:hover .moressBox{ display: block; } .allShp{ width: 200px; line-height: 34px; color: white; text-align: center; } .leftTies{ display: none; width: 60px; position: absolute; z-index: 999 !important; padding: 10px 0; margin-left: 50px; margin-top: -14px; overflow: hidden; } .allShp:hover .leftTies{ display: block; } >