1077 lines
23 KiB
SCSS
1077 lines
23 KiB
SCSS
html,
|
|
body {
|
|
position: relative;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
// -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
* {
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
-webkit-tap-highlight-color: transparent;
|
|
outline: none;
|
|
background: none;
|
|
text-decoration: none;
|
|
}
|
|
input {
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
}
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
height: 100%;
|
|
padding: 0;
|
|
position: relative;
|
|
&::-webkit-scrollbar {
|
|
width: 0 !important;
|
|
}
|
|
}
|
|
|
|
.index {
|
|
height: 100%;
|
|
width: 100%;
|
|
// &.hidden {
|
|
// // overflow: hidden;
|
|
// position: absolute;
|
|
// }
|
|
.swiper-container {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
// .swiper-wrapper {
|
|
// height: 100% !important;
|
|
// }
|
|
.swiper-slide {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
height: 100%;
|
|
// overflow: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
&::-webkit-scrollbar {
|
|
width: 0 !important;
|
|
}
|
|
|
|
// overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
&::-webkit-scrollbar {
|
|
width: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Averia Serif;
|
|
src: url("@/assets/font/AveriaSerif-Regular.ttf");
|
|
}
|
|
|
|
.m-home {
|
|
// position: relative;
|
|
transform: translate3d(0, 0, 0);
|
|
overflow: auto;
|
|
// height: 100vh;
|
|
background: url("https://cdn.star-linear.com/resource/dream/home_new.jpg") 50% /
|
|
cover no-repeat;
|
|
|
|
.ageTip {
|
|
width: 80px;
|
|
height: 106px;
|
|
position: absolute;
|
|
right: 54px;
|
|
top: 89px;
|
|
}
|
|
.playBtn {
|
|
width: 211px;
|
|
height: 206px;
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
left: 50%;
|
|
top: 51%;
|
|
// cursor: pointer;
|
|
}
|
|
|
|
.orderBox {
|
|
width: 750px;
|
|
height: 300px;
|
|
position: absolute;
|
|
// bottom: 0;
|
|
bottom: 100px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: url("@/assets/mobile/order.png") center no-repeat;
|
|
background-size: cover;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
.order_btn {
|
|
width: 330px;
|
|
margin: 50px 0 0;
|
|
height: 96px;
|
|
background: url("@/assets/mobile/orderBtn.png") center no-repeat;
|
|
background-size: contain;
|
|
// position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.recruit_btn {
|
|
width: 330px;
|
|
margin: -10px 0 0;
|
|
height: 96px;
|
|
background: url("@/assets/mobile/recruit.png") center no-repeat;
|
|
background-size: contain;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.req {
|
|
width: 170px;
|
|
margin: 50px 0 0;
|
|
height: 96px;
|
|
background: url("@/assets/mask/mb_req.png") center no-repeat;
|
|
background-size: contain;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
bottom: 0;
|
|
bottom: 120px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.nav_btn {
|
|
width: 128px;
|
|
height: 116px;
|
|
position: fixed;
|
|
top: 46px;
|
|
left: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.swiper_btn._mobile {
|
|
width: 86px;
|
|
height: 81px;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
top: auto;
|
|
transform: translateX(-50%);
|
|
background: url("@/assets/mobile/scroll.png") center no-repeat;
|
|
background-size: contain;
|
|
z-index: 12;
|
|
animation: ghostUpdown 0.8s infinite alternate;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
border: none;
|
|
outline: none;
|
|
&:after {
|
|
content: "";
|
|
}
|
|
|
|
&.btn-hidden {
|
|
width: 74px;
|
|
height: 74px;
|
|
background: url("@/assets/footer/scroll.png") center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
|
|
@keyframes ghostUpdown {
|
|
from {
|
|
bottom: 10px;
|
|
}
|
|
to {
|
|
bottom: 20px;
|
|
}
|
|
}
|
|
|
|
.mobile_news {
|
|
.innerBox {
|
|
background-size: cover;
|
|
background-position: center;
|
|
transform: translate3d(0, 0, 0);
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.content {
|
|
width: 700px;
|
|
height: 990px;
|
|
padding-top: 28px;
|
|
box-sizing: border-box;
|
|
// height: auto;
|
|
display: flex;
|
|
// display: none;
|
|
flex-direction: column;
|
|
// background: rgba(0, 0, 0, 0.5);
|
|
background: url("@/assets/mobile/new_bg.png") center no-repeat;
|
|
background-size: contain;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: "";
|
|
width: 743px;
|
|
height: 101px;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 15px;
|
|
transform: translate(-50%, -100%);
|
|
background: url("@/assets/mobile/newTitle.png") center no-repeat;
|
|
background-size: contain;
|
|
// z-index: 10;
|
|
}
|
|
&::after {
|
|
content: "";
|
|
width: 742px;
|
|
height: 373px;
|
|
position: absolute;
|
|
right: -25px;
|
|
bottom: -125px;
|
|
background: url("../assets/mobile/bg_two_light.png") center no-repeat;
|
|
background-size: contain;
|
|
z-index: -1;
|
|
}
|
|
.swiper-container {
|
|
width: 605px;
|
|
height: 415px;
|
|
// height: auto;
|
|
position: relative;
|
|
.swiper-slide {
|
|
height: 415px;
|
|
width: 605px;
|
|
// height: 390px;
|
|
}
|
|
a {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
text-decoration: none;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
/*包裹自定义分页器的div的位置等CSS样式*/
|
|
.swiper-pagination {
|
|
bottom: 5px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 24px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: url("../assets/partTwo/swiper_bg.png") center no-repeat;
|
|
}
|
|
/*自定义分页器的样式，这个你自己想要什么样子自己写*/
|
|
.swiper-pagination-bullet {
|
|
width: 43px;
|
|
height: 15px;
|
|
display: inline-block;
|
|
background: url("../assets/partTwo/swiper_normal.png") center no-repeat;
|
|
background-size: contain;
|
|
opacity: 1;
|
|
// margin: 0 2px;
|
|
}
|
|
/*自定义分页器激活时的样式表现*/
|
|
.swiper-pagination-bullet-active {
|
|
opacity: 1;
|
|
// background: url("../assets/partTwo/swiper_active.png") center no-repeat;
|
|
// background-size: contain;
|
|
position: relative;
|
|
&::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 110px;
|
|
height: 96px;
|
|
content: "";
|
|
background: url("../assets/partTwo/swiper_active.png") center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
|
|
.newList {
|
|
flex: 1;
|
|
height: 100%;
|
|
width: 565px;
|
|
// transform: translate3d(0, 0, 0);
|
|
box-sizing: border-box;
|
|
text-align: right;
|
|
.listNav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #ffe8d4;
|
|
margin: 20px 0 18px;
|
|
font-family: "Noto Serif SC", serif;
|
|
.item {
|
|
margin: 0 26px;
|
|
font-size: 36px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
&.listNavActived {
|
|
// color: #fc4100;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: "";
|
|
width: 157px;
|
|
height: 84px;
|
|
position: absolute;
|
|
top: 54%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: block;
|
|
background: url("~@/assets/mobile/new_active.png") center
|
|
no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.listContent {
|
|
max-height: 310px;
|
|
margin-bottom: 35px;
|
|
overflow: hidden;
|
|
.none {
|
|
color: #ffe8d4;
|
|
padding: 30px 0 10px;
|
|
text-align: center;
|
|
}
|
|
.listItem {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
padding: 30px 0 10px;
|
|
border-bottom: 1px solid #bda0c4;
|
|
color: #ffe8d4;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
position: relative;
|
|
.pic {
|
|
padding: 2px 10px;
|
|
font-family: "Microsoft Yahei";
|
|
// font-weight: bolder;
|
|
box-sizing: border-box;
|
|
text-align: left;
|
|
color: #fff9e9;
|
|
font-size: 26px;
|
|
background: #7db6e3;
|
|
border-radius: 5px;
|
|
}
|
|
.notice {
|
|
background: #dd3580;
|
|
}
|
|
.activity {
|
|
background: #dfb078;
|
|
}
|
|
.trends {
|
|
background: #c56be1;
|
|
}
|
|
.title {
|
|
margin-left: 1%;
|
|
width: 58%;
|
|
text-align: left;
|
|
font-size: 18px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-family: "Microsoft Yahei";
|
|
overflow: hidden;
|
|
}
|
|
.date {
|
|
text-align: right;
|
|
font-size: 16px;
|
|
color: #ffe8d4;
|
|
// width: 25%;
|
|
}
|
|
}
|
|
}
|
|
.moreNews {
|
|
color: #ffe8d4;
|
|
display: inline-block;
|
|
// margin-top: 30px;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mobile_world {
|
|
// background: url("@/assets/partThree/motianlun.png") center no-repeat;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
position: relative;
|
|
text-align: center;
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
.world_bg {
|
|
width: 100vw;
|
|
height: 100%;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.world_cloud {
|
|
width: 100vw;
|
|
height: 100%;
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.story {
|
|
width: 657px;
|
|
// min-height: 365px;
|
|
// margin: -84px auto -121px;
|
|
margin: -34px auto 0;
|
|
position: relative;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
z-index: 12;
|
|
}
|
|
.content {
|
|
// width: 521px;
|
|
font-size: 25px;
|
|
// padding: 70px 0;
|
|
font-family: "Noto Serif SC", serif;
|
|
color: #936cc0;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
margin: 78px 0 100px;
|
|
line-height: 45px;
|
|
text-shadow: 0px 0px 1px rgba(133, 97, 171, 0.15);
|
|
position: relative;
|
|
p {
|
|
margin: 0;
|
|
}
|
|
.world_borderBottom {
|
|
width: 100vw;
|
|
height: 38px;
|
|
position: absolute;
|
|
bottom: -100px;
|
|
left: 0;
|
|
}
|
|
.world_borderTop {
|
|
width: 100vw;
|
|
height: 38px;
|
|
position: absolute;
|
|
top: -86px;
|
|
left: 0;
|
|
}
|
|
}
|
|
.feedInOne {
|
|
animation: fadeInBottom 0.8s;
|
|
animation-delay: 0.4s;
|
|
animation-fill-mode: both;
|
|
}
|
|
.feedInTwo {
|
|
animation: fadeInBottom 0.6s;
|
|
animation-delay: 1.2s;
|
|
animation-fill-mode: both;
|
|
}
|
|
.feedInThree {
|
|
animation: fadeInBottom 0.8s;
|
|
animation-delay: 2s;
|
|
animation-fill-mode: both;
|
|
}
|
|
.feedInFour {
|
|
animation: fadeInBottom 0.8s;
|
|
animation-delay: 2.8s;
|
|
animation-fill-mode: both;
|
|
}
|
|
.feedInFive {
|
|
animation: fadeInBottom 0.8s;
|
|
animation-delay: 3.6s;
|
|
animation-fill-mode: both;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInBottom {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 50%, 0);
|
|
transform: translate3d(0, 50%, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.mobile_characters {
|
|
.content {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
position: relative;
|
|
margin-bottom: 2vw;
|
|
//背景花
|
|
.swiper_bg {
|
|
width: 100%;
|
|
height: 937px;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.bg {
|
|
&.active {
|
|
animation: fadeInLeft 0.4s;
|
|
animation-fill-mode: both;
|
|
}
|
|
}
|
|
.bg,
|
|
.bg_bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
//台词
|
|
.dialogue_bg {
|
|
width: 174px;
|
|
// height: 595px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
//人物描述
|
|
.desBox {
|
|
position: absolute;
|
|
width: 750px;
|
|
bottom: 455px;
|
|
left: 0;
|
|
padding: 0 42px;
|
|
box-sizing: border-box;
|
|
color: #8867b0;
|
|
text-align: center;
|
|
z-index: 12;
|
|
.preview {
|
|
width: 130px;
|
|
height: 47px;
|
|
font-size: 28px;
|
|
font-family: Averia Serif;
|
|
font-weight: 400;
|
|
color: #8867b0;
|
|
line-height: 26px;
|
|
position: relative;
|
|
&::after,
|
|
&::before {
|
|
width: 17px;
|
|
height: 17px;
|
|
position: absolute;
|
|
top: 25%;
|
|
transform: translateY(-50%);
|
|
content: "";
|
|
background-image: url("@/assets/partFour/star.png");
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
&::after {
|
|
left: -25px;
|
|
}
|
|
&::before {
|
|
right: -60px;
|
|
}
|
|
}
|
|
|
|
.introduce {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
align-items: flex-end;
|
|
&::after {
|
|
position: absolute;
|
|
bottom: -16px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
content: "";
|
|
width: 667px;
|
|
height: 12px;
|
|
background-image: url("@/assets/mobile/swiper_line.png");
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
.character_name {
|
|
font-size: 76px;
|
|
font-family: "Noto Serif SC", serif;
|
|
}
|
|
|
|
.cv_name {
|
|
font-size: 32px;
|
|
font-family: "Noto Serif SC", serif;
|
|
color: #9468ca;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.changeBtn {
|
|
width: 89px;
|
|
height: 40px;
|
|
margin-right: 10px;
|
|
background-image: url("@/assets/mobile/voice_bg.png");
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.btn {
|
|
width: 32px;
|
|
height: 31px;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
.lan {
|
|
font-size: 22px;
|
|
font-family: Noto Serif CJK SC;
|
|
font-weight: 400;
|
|
color: #8f73b3;
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
.text {
|
|
text-decoration: none;
|
|
}
|
|
.voice {
|
|
margin-left: 12px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
img {
|
|
width: 32px;
|
|
height: 31px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dialogue {
|
|
font-size: 25px;
|
|
font-family: "Noto Serif SC", serif;
|
|
color: #785da4;
|
|
margin-top: 30px;
|
|
text-align: left;
|
|
.text {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
.teamPic {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 92.36px;
|
|
transform: translateX(-50%);
|
|
width: 138px;
|
|
height: 140px;
|
|
}
|
|
.namePic {
|
|
height: 142px;
|
|
}
|
|
|
|
//转盘
|
|
.swiper {
|
|
width: 750px;
|
|
height: 455px;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
z-index: 2;
|
|
|
|
.prev,
|
|
.next {
|
|
width: 35px;
|
|
height: 35px;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
position: absolute;
|
|
bottom: 181px;
|
|
cursor: pointer;
|
|
}
|
|
.prev {
|
|
left: 30.5px;
|
|
}
|
|
|
|
.next {
|
|
right: 29.8px;
|
|
}
|
|
|
|
.characterList {
|
|
list-style: none;
|
|
position: absolute;
|
|
left: 56px;
|
|
bottom: 258.33px;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.character-item {
|
|
width: 140px;
|
|
height: 140px;
|
|
margin-right: -16px;
|
|
position: relative;
|
|
.active_img {
|
|
position: absolute;
|
|
transform: translate(-51%, -50%);
|
|
top: 50%;
|
|
left: 50%;
|
|
height: 354px;
|
|
width: 354px;
|
|
z-index: 2;
|
|
}
|
|
&:first-child {
|
|
position: relative;
|
|
top: 72px;
|
|
}
|
|
&:nth-child(2n) {
|
|
position: relative;
|
|
top: 27px;
|
|
}
|
|
&:last-child {
|
|
position: relative;
|
|
margin-right: 0;
|
|
top: 72px;
|
|
}
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 3;
|
|
position: relative;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.small {
|
|
color: #ccc;
|
|
margin: 0;
|
|
}
|
|
.mt {
|
|
margin-top: 5vw;
|
|
}
|
|
.starLine_logo {
|
|
width: 84.5px;
|
|
height: 111px;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.lunaring_logo {
|
|
width: 104px;
|
|
height: 90px;
|
|
margin: 0 3vw;
|
|
vertical-align: bottom;
|
|
}
|
|
.fearless_logo {
|
|
width: 125px;
|
|
height: 89px;
|
|
vertical-align: middle;
|
|
margin-right: 2vw;
|
|
}
|
|
.listItem {
|
|
color: #000;
|
|
margin-bottom: 2vw;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
audio {
|
|
opacity: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.fade-leave-active {
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.fade-enter-active {
|
|
transition: opacity 0.6s;
|
|
}
|
|
|
|
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.mobile_footer {
|
|
.ulList {
|
|
transform: translate3d(0, 0, 0);
|
|
width: 100%;
|
|
height: 400.5px;
|
|
background-size: cover;
|
|
background-position: bottom;
|
|
background-repeat: no-repeat;
|
|
overflow: hidden;
|
|
position: relative;
|
|
&::after,
|
|
&::before {
|
|
position: absolute;
|
|
content: "";
|
|
width: 140px;
|
|
height: 140px;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
&::after {
|
|
background-image: url("@/assets/footer/mobile_footer_top.png");
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
&::before {
|
|
background-image: url("@/assets/footer/mobile_footer_bottom.png");
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
.listTitle {
|
|
font-size: 33px;
|
|
font-family: "Noto Serif SC", serif;
|
|
// font-weight: bold;
|
|
color: #ffefd1;
|
|
text-shadow: 0px 0px 5px #b96f47;
|
|
// background: linear-gradient(0deg, #95332a 0%, rgba(149, 51, 42, 0) 100%);
|
|
// -webkit-background-clip: text;
|
|
// -webkit-text-fill-color: transparent;
|
|
text-align: center;
|
|
margin: 65px auto 45px;
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
margin: 0;
|
|
width: 100%;
|
|
padding: 0 63px;
|
|
box-sizing: border-box;
|
|
li {
|
|
list-style: none;
|
|
width: 125px;
|
|
height: 156px;
|
|
a {
|
|
width: 125px;
|
|
height: 156px;
|
|
text-decoration: none;
|
|
}
|
|
img {
|
|
width: 125px;
|
|
height: 156px;
|
|
}
|
|
.QQ {
|
|
position: relative;
|
|
.qqNum {
|
|
position: absolute;
|
|
top: 40%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
// background: url("@/assets/footer/qq_bg.png") center no-repeat;
|
|
background-position: center;
|
|
background-repeat: repeat;
|
|
background-size: contain;
|
|
opacity: 0.9;
|
|
width: 240px;
|
|
height: auto;
|
|
line-height: 44px;
|
|
font-size: 17px;
|
|
font-family: Noto Sans S Chinese;
|
|
color: #ffb0c1;
|
|
}
|
|
}
|
|
.wechat {
|
|
position: relative;
|
|
.code {
|
|
position: absolute;
|
|
top: 37%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 85px;
|
|
height: 85px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.arguments {
|
|
width: 100%;
|
|
height: 933.5px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
box-sizing: border-box;
|
|
padding-top: 45px;
|
|
text-align: center;
|
|
p {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.argumentList {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 70px;
|
|
margin: 0;
|
|
margin-bottom: 10px;
|
|
box-sizing: border-box;
|
|
li {
|
|
list-style: none;
|
|
font-size: 25px;
|
|
font-family: "Noto Serif SC", serif;
|
|
color: #a785b8;
|
|
position: relative;
|
|
&::after {
|
|
position: absolute;
|
|
content: "";
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 2px;
|
|
height: 28px;
|
|
background-color: #a785b8;
|
|
right: -38px;
|
|
}
|
|
&:last-child {
|
|
&::after {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
a {
|
|
color: #a785b8;
|
|
text-decoration: none;
|
|
}
|
|
p {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
.contentTxt {
|
|
transform: scale(0.91);
|
|
text-align: center;
|
|
border-bottom: 2px solid rgba(145, 145, 145, 0.6);
|
|
padding-bottom: 16px;
|
|
|
|
.mb {
|
|
margin-bottom: 18px;
|
|
}
|
|
.mt {
|
|
margin-top: 32px;
|
|
}
|
|
}
|
|
|
|
.argularTxt {
|
|
color: #919191;
|
|
font-family: Noto Sans S Chinese;
|
|
text-align: center;
|
|
font-size: 21px;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.boldTxt {
|
|
color: #919191;
|
|
font-size: 21px;
|
|
font-weight: bold;
|
|
}
|
|
.advice {
|
|
// margin-top: 12px;
|
|
transform: scale(0.91);
|
|
|
|
.mt {
|
|
margin-top: 22px;
|
|
}
|
|
}
|
|
.small {
|
|
margin: 0 auto;
|
|
// width: 80%;
|
|
font-size: 12px;
|
|
// transform: scale(0.66);
|
|
}
|
|
.starLine_logo {
|
|
width: 192px;
|
|
height: 72px;
|
|
vertical-align: middle;
|
|
margin-right: 52px;
|
|
}
|
|
.lunaring_logo {
|
|
width: 224px;
|
|
height: 49px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInLeft {
|
|
0% {
|
|
opacity: 0;
|
|
// transform: scale(1);
|
|
// // -webkit-transform: translate3d(-50%, 0, 0);
|
|
// // transform: translate3d(-50%, 0, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
// transform: scale(2);
|
|
|
|
// -webkit-transform: translateZ(0);
|
|
// transform: translateZ(0);
|
|
}
|
|
}
|
|
|
|
#swiper-container2.swiper-container {
|
|
overflow: scroll;
|
|
}
|
|
#swiper-container2 .swiper-wrapper {
|
|
height: auto !important;
|
|
overflow-x: hidden;
|
|
scrollbar-width: none; /* firefox */
|
|
-ms-overflow-style: none; /* IE 10+ */
|
|
&::-webkit-scrollbar {
|
|
width: 0 !important;
|
|
display: none; /* Chrome Safari */
|
|
}
|
|
}
|
|
#swiper-container2 .swiper-slide {
|
|
font-size: 18px;
|
|
height: auto;
|
|
box-sizing: border-box;
|
|
display: block;
|
|
overflow-x: hidden;
|
|
color: #fff;
|
|
&::-webkit-scrollbar {
|
|
width: 0 !important;
|
|
display: none; /* Chrome Safari */
|
|
}
|
|
}
|