1483 lines
34 KiB
SCSS
1483 lines
34 KiB
SCSS
|
html,
|
||
|
|
body {
|
||
|
|
padding: 0;
|
||
|
|
height: 100%;
|
||
|
|
position: relative;
|
||
|
|
margin: 0;
|
||
|
|
background-color: #000;
|
||
|
|
overflow-x: hidden;
|
||
|
|
a,
|
||
|
|
div,
|
||
|
|
a:hover,
|
||
|
|
a:active,
|
||
|
|
a:visited,
|
||
|
|
a:link,
|
||
|
|
a:focus {
|
||
|
|
-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 {
|
||
|
|
background: #eee;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #000;
|
||
|
|
margin: 0;
|
||
|
|
height: 100%;
|
||
|
|
padding: 0;
|
||
|
|
scrollbar-width: none;
|
||
|
|
position: relative;
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
width: 0 !important;
|
||
|
|
}
|
||
|
|
-ms-overflow-style: none;
|
||
|
|
a {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: Averia Serif;
|
||
|
|
src: url("@/assets/font/AveriaSerif-Regular.ttf");
|
||
|
|
}
|
||
|
|
.outhome {
|
||
|
|
height: 100%;
|
||
|
|
.swiper-container {
|
||
|
|
margin: 0 auto;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
.swiper-wrapper {
|
||
|
|
// height: 100vh !important;
|
||
|
|
}
|
||
|
|
.swiper-slide {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 18px;
|
||
|
|
height: 100%;
|
||
|
|
-webkit-overflow-scrolling: touch;
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
width: 0 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.home {
|
||
|
|
position: relative;
|
||
|
|
transform: translate3d(0, 0, 0);
|
||
|
|
overflow: hidden;
|
||
|
|
height: 100vh;
|
||
|
|
|
||
|
|
.ageTip {
|
||
|
|
width: 115px;
|
||
|
|
height: 152px;
|
||
|
|
position: absolute;
|
||
|
|
left: 50px;
|
||
|
|
top: 110px;
|
||
|
|
}
|
||
|
|
.title_bg_video {
|
||
|
|
min-width: 100%;
|
||
|
|
min-height: 100%;
|
||
|
|
// min-width: auto;
|
||
|
|
// height: auto;
|
||
|
|
// transform: scale(0.99);
|
||
|
|
margin-top: -30px;
|
||
|
|
}
|
||
|
|
.playBtn {
|
||
|
|
width: 216px;
|
||
|
|
height: 210px;
|
||
|
|
// background: url("@/assets/partTwo/btn.png") center no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
position: absolute;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
cursor: pointer;
|
||
|
|
z-index: 3;
|
||
|
|
}
|
||
|
|
.concatList {
|
||
|
|
list-style: none;
|
||
|
|
width: 190px;
|
||
|
|
height: 658px;
|
||
|
|
background: url("@/assets/partOne/focus_bg.png") left no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
position: absolute;
|
||
|
|
right: 42px;
|
||
|
|
top: 180px;
|
||
|
|
padding: 151px 60px 151px 70px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
.concat-item {
|
||
|
|
width: 69px;
|
||
|
|
margin-bottom: 13px;
|
||
|
|
height: 66px;
|
||
|
|
position: relative;
|
||
|
|
a,
|
||
|
|
div {
|
||
|
|
width: 69px;
|
||
|
|
display: block;
|
||
|
|
height: 66px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.sina {
|
||
|
|
background: url("@/assets/partOne/img.png");
|
||
|
|
background-size: 100% auto;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: 3px -125px;
|
||
|
|
}
|
||
|
|
.wechat {
|
||
|
|
background: url("@/assets/partOne/img.png");
|
||
|
|
background-size: 100% auto;
|
||
|
|
position: relative;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: 3px -185px;
|
||
|
|
&:hover {
|
||
|
|
&::after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
left: -10px;
|
||
|
|
top: 50%;
|
||
|
|
width: 238px;
|
||
|
|
height: 226px;
|
||
|
|
transform: translate(-100%, -50%);
|
||
|
|
background: url("@/assets/partOne/wechat_code.png") center no-repeat;
|
||
|
|
background-size: contain;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.qq {
|
||
|
|
position: relative;
|
||
|
|
background: url("@/assets/partOne/img.png");
|
||
|
|
background-size: 100% auto;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: 3px 0;
|
||
|
|
}
|
||
|
|
.qq_number {
|
||
|
|
position: absolute;
|
||
|
|
left: -20px;
|
||
|
|
top: 50%;
|
||
|
|
transform: translate(-100%, -50%);
|
||
|
|
min-width: 260px;
|
||
|
|
padding: 0 38px 0 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
height: 33px;
|
||
|
|
font-size: 18px;
|
||
|
|
font-family: "Noto Serif SC", serif;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #ffffff;
|
||
|
|
line-height: 33px;
|
||
|
|
// background: url("@/assets/partOne/qq_bg.png") center no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
a {
|
||
|
|
text-decoration: none;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-image: -webkit-linear-gradient(
|
||
|
|
bottom,
|
||
|
|
#f9f7ee,
|
||
|
|
#f7d5ca,
|
||
|
|
#f5908b
|
||
|
|
);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
}
|
||
|
|
&::before {
|
||
|
|
position: absolute;
|
||
|
|
left: -8px;
|
||
|
|
top: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
background: url("@/assets/partOne/qq_star.png") center no-repeat;
|
||
|
|
background-size: contain;
|
||
|
|
content: "";
|
||
|
|
width: 52px;
|
||
|
|
height: 52px;
|
||
|
|
}
|
||
|
|
&::after {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 50%;
|
||
|
|
transform: translate(0, -50%);
|
||
|
|
background: url("@/assets/partOne/qq_right.png") center no-repeat;
|
||
|
|
background-size: contain;
|
||
|
|
content: "";
|
||
|
|
width: 50px;
|
||
|
|
height: 70px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.blibli {
|
||
|
|
background: url("@/assets/partOne/img.png");
|
||
|
|
background-size: 100% auto;
|
||
|
|
// background-size: contain;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: 3px -59px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.orderBox {
|
||
|
|
width: 702px;
|
||
|
|
height: 400px;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
background: url("@/assets/mobile/order.png") center no-repeat;
|
||
|
|
// background: url("https://cdn.star-linear.com/resource/dream/order.png")
|
||
|
|
// center no-repeat;
|
||
|
|
background-size: contain;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: flex-start;
|
||
|
|
|
||
|
|
.order_btn {
|
||
|
|
width: 330px;
|
||
|
|
margin: 110px 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: 110px 0 0;
|
||
|
|
height: 96px;
|
||
|
|
background: url("@/assets/mobile/recruit.png") center no-repeat;
|
||
|
|
background-size: contain;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper-button-next.swiper_btn {
|
||
|
|
width: 82px;
|
||
|
|
height: 79px;
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
bottom: 10px;
|
||
|
|
top: auto;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
background: url("@/assets/partOne/scroll.png") center no-repeat;
|
||
|
|
background-size: contain;
|
||
|
|
z-index: 12;
|
||
|
|
animation: ghostUpdown 0.8s infinite alternate;
|
||
|
|
&: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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.trailer {
|
||
|
|
width: 100vw;
|
||
|
|
height: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
position: relative;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
|
||
|
|
.news {
|
||
|
|
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: 1378px;
|
||
|
|
height: 517px;
|
||
|
|
display: flex;
|
||
|
|
background: rgba(0, 0, 0, 0.5);
|
||
|
|
background: url("../assets/partTwo/new_bg.png") center no-repeat;
|
||
|
|
background-size: contain;
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
flex-direction: row;
|
||
|
|
padding: 0 40px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
&::before {
|
||
|
|
content: "";
|
||
|
|
width: 1400px;
|
||
|
|
height: 82px;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 20px;
|
||
|
|
transform: translateY(-100%);
|
||
|
|
background: url("@/assets/partTwo/newTitle.png") center no-repeat;
|
||
|
|
background-size: contain;
|
||
|
|
}
|
||
|
|
&::after {
|
||
|
|
content: "";
|
||
|
|
width: 1489px;
|
||
|
|
height: 341px;
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
bottom: -110px;
|
||
|
|
transform: translateX(20%);
|
||
|
|
background: url("../assets/partTwo/bg_two_light.png") center no-repeat;
|
||
|
|
background-size: contain;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
// &::before {
|
||
|
|
// content: "";
|
||
|
|
// width: 17px;
|
||
|
|
// height: 446px;
|
||
|
|
// position: absolute;
|
||
|
|
// left: -10px;
|
||
|
|
// top: 0;
|
||
|
|
// background: url("../assets/news/swiper-prefab.png") center no-repeat;
|
||
|
|
// background-size: cover;
|
||
|
|
// z-index: 10;
|
||
|
|
// }
|
||
|
|
.swiper-container {
|
||
|
|
width: 650px;
|
||
|
|
height: 441px;
|
||
|
|
|
||
|
|
.swiper-slide {
|
||
|
|
width: 742px;
|
||
|
|
height: 441px;
|
||
|
|
// &::after {
|
||
|
|
// content: "";
|
||
|
|
// width: 650px;
|
||
|
|
// height: 60px;
|
||
|
|
// position: absolute;
|
||
|
|
// bottom: 0;
|
||
|
|
// left: 0;
|
||
|
|
// background: linear-gradient(transparent, #000 80%);
|
||
|
|
// z-index: 10;
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
// background: linear-gradient(#000 16%, transparent);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.newList {
|
||
|
|
flex: 1;
|
||
|
|
height: 90%;
|
||
|
|
margin: 0 36px;
|
||
|
|
text-align: right;
|
||
|
|
.listNav {
|
||
|
|
transform: translate3d(0, 0, 0);
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
color: #fff9e9;
|
||
|
|
margin: 62px 0 0;
|
||
|
|
font-family: "Noto Serif SC", serif;
|
||
|
|
.item {
|
||
|
|
font-size: 24px;
|
||
|
|
position: relative;
|
||
|
|
cursor: pointer;
|
||
|
|
white-space: nowrap;
|
||
|
|
&.listNavActived {
|
||
|
|
position: relative;
|
||
|
|
&::after {
|
||
|
|
content: "";
|
||
|
|
width: 116px;
|
||
|
|
height: 75px;
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
display: block;
|
||
|
|
background: url("../assets/partTwo/new_active.png") center
|
||
|
|
no-repeat;
|
||
|
|
background-size: contain;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.listContent {
|
||
|
|
max-height: 280px;
|
||
|
|
overflow: hidden;
|
||
|
|
.none {
|
||
|
|
color: #fff9e9;
|
||
|
|
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: #fff9e9;
|
||
|
|
cursor: pointer;
|
||
|
|
.pic {
|
||
|
|
padding: 2px 10px;
|
||
|
|
font-family: "Microsoft Yahei";
|
||
|
|
text-align: center;
|
||
|
|
color: #fff9e9;
|
||
|
|
font-size: 14px;
|
||
|
|
background: #7db6e3;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
.notice {
|
||
|
|
background: #dd3580;
|
||
|
|
}
|
||
|
|
.activity {
|
||
|
|
background: #dfb078;
|
||
|
|
}
|
||
|
|
.trends {
|
||
|
|
background: #c56be1;
|
||
|
|
}
|
||
|
|
.title {
|
||
|
|
width: 68%;
|
||
|
|
text-align: left;
|
||
|
|
font-size: 16px;
|
||
|
|
margin-left: 10px;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
font-family: "Microsoft Yahei";
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.date {
|
||
|
|
text-align: right;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.moreNews {
|
||
|
|
color: #fff9e9;
|
||
|
|
display: inline-block;
|
||
|
|
margin-top: 15px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/*包裹自定义分页器的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;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
/*自定义分页器的样式，这个你自己想要什么样子自己写*/
|
||
|
|
.swiper-pagination-bullet {
|
||
|
|
width: 30px;
|
||
|
|
height: 10px;
|
||
|
|
display: inline-block;
|
||
|
|
background: url("../assets/partTwo/swiper_normal.png") center no-repeat;
|
||
|
|
background-size: contain;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
/*自定义分页器激活时的样式表现*/
|
||
|
|
.swiper-pagination-bullet-active {
|
||
|
|
opacity: 1;
|
||
|
|
background: none;
|
||
|
|
// 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: 55px;
|
||
|
|
height: 45px;
|
||
|
|
content: "";
|
||
|
|
background: url("../assets/partTwo/swiper_active.png") center no-repeat;
|
||
|
|
background-size: 150%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.world {
|
||
|
|
// background: url("@/assets/partThree/motianlun.png") center no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
.world_bg {
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
// &::after {
|
||
|
|
// content: "";
|
||
|
|
// width: 100vw;
|
||
|
|
// height: 100vh;
|
||
|
|
// position: absolute;
|
||
|
|
// top: 0;
|
||
|
|
// left: 0;
|
||
|
|
// background: url("@/assets/partThree/bg1.png") center no-repeat;
|
||
|
|
// background-size: contain;
|
||
|
|
// // animation: fadeInLeft 1.6s;
|
||
|
|
// }
|
||
|
|
|
||
|
|
.story {
|
||
|
|
width: 865px;
|
||
|
|
// min-height: 637px;
|
||
|
|
// background: url("@/assets/partThree/border.png") center no-repeat;
|
||
|
|
background-size: contain;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
margin: 0 auto;
|
||
|
|
margin-top: 180px;
|
||
|
|
position: relative;
|
||
|
|
text-align: center;
|
||
|
|
box-sizing: border-box;
|
||
|
|
z-index: 12;
|
||
|
|
|
||
|
|
.story_bg {
|
||
|
|
width: 620px;
|
||
|
|
height: 344px;
|
||
|
|
position: absolute;
|
||
|
|
top: -220px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
// &::after {
|
||
|
|
// content: "";
|
||
|
|
// width: 620px;
|
||
|
|
// height: 344px;
|
||
|
|
// position: absolute;
|
||
|
|
// top: -220px;
|
||
|
|
// left: 50%;
|
||
|
|
// transform: translateX(-50%);
|
||
|
|
// background: url("@/assets/partThree/story.png") center no-repeat;
|
||
|
|
// background-size: contain;
|
||
|
|
// }
|
||
|
|
.content {
|
||
|
|
width: 521px;
|
||
|
|
font-size: 18px;
|
||
|
|
padding: 40px 0;
|
||
|
|
font-family: "Noto Serif SC", serif;
|
||
|
|
color: #936cc0;
|
||
|
|
// line-height: 36px;
|
||
|
|
line-height: 18px;
|
||
|
|
text-align: center;
|
||
|
|
margin: 0 auto;
|
||
|
|
text-shadow: 0px 0px 1px rgba(133, 97, 171, 0.15);
|
||
|
|
}
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.characters {
|
||
|
|
position: relative;
|
||
|
|
.gif {
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
.team_bg {
|
||
|
|
width: 100%;
|
||
|
|
// height: 97%;
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background-size: auto 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: left;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
// &::after {
|
||
|
|
// content: "";
|
||
|
|
|
||
|
|
// background-image: url("@/assets/partFour/team_bg.png");
|
||
|
|
// background-size: auto 100%;
|
||
|
|
// background-repeat: no-repeat;
|
||
|
|
// background-position: left;
|
||
|
|
// }
|
||
|
|
.bg {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
// background-image: url("@/assets/partFour/demian_bg.jpg");
|
||
|
|
background-size: cover;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
// animate-repeat: 1;
|
||
|
|
// &.active {
|
||
|
|
// animation: fadeInLeft 0.8s;
|
||
|
|
// // fill-mode;;
|
||
|
|
// // animation-duration: 1s;
|
||
|
|
// // animation-delay: 1s;
|
||
|
|
// animation-fill-mode: both;
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
.bg_bg {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-size: cover;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper {
|
||
|
|
// width: 752px;
|
||
|
|
width: 871px;
|
||
|
|
// height: 880px;
|
||
|
|
height: 1019px;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-48%);
|
||
|
|
// background-image: url("@/assets/partFour/swiper1.png");
|
||
|
|
background-size: contain;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
z-index: 2;
|
||
|
|
|
||
|
|
.prev,
|
||
|
|
.next {
|
||
|
|
width: 88px;
|
||
|
|
height: 88px;
|
||
|
|
background-size: contain;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
position: absolute;
|
||
|
|
// transform: translateX(50%);
|
||
|
|
// right: 33.5%;
|
||
|
|
// width: 76.5px;
|
||
|
|
// height: 76.5px;
|
||
|
|
right: 253px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.prev {
|
||
|
|
top: 11%;
|
||
|
|
// background-image: url("@/assets/partFour/prev.png");
|
||
|
|
}
|
||
|
|
|
||
|
|
.next {
|
||
|
|
bottom: 6%;
|
||
|
|
// background-image: url("@/assets/partFour/next.png");
|
||
|
|
}
|
||
|
|
|
||
|
|
.characterList {
|
||
|
|
list-style: none;
|
||
|
|
position: absolute;
|
||
|
|
right: 63px;
|
||
|
|
bottom: 120px;
|
||
|
|
// right: 7%;
|
||
|
|
// bottom: 11.7%;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
// height: 633px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
.character-item {
|
||
|
|
// width: 145px;
|
||
|
|
// height: 145px;
|
||
|
|
// margin-bottom: -21px;
|
||
|
|
width: 167px;
|
||
|
|
height: 167px;
|
||
|
|
margin-bottom: -26px;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.active {
|
||
|
|
position: absolute;
|
||
|
|
// height: 355px;
|
||
|
|
// width: 358px;
|
||
|
|
transform: translate(-50.5%, -52%);
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
height: 400px;
|
||
|
|
width: 400px;
|
||
|
|
}
|
||
|
|
// &.active {
|
||
|
|
// &::after {
|
||
|
|
// content: "";
|
||
|
|
// position: absolute;
|
||
|
|
// // height: 355px;
|
||
|
|
// // width: 358px;
|
||
|
|
// transform: translate(-50.5%, -51%);
|
||
|
|
// top: 50%;
|
||
|
|
// left: 50%;
|
||
|
|
|
||
|
|
// height: 408px;
|
||
|
|
// width: 412px;
|
||
|
|
// background-image: url("@/assets/partFour/checked.png");
|
||
|
|
// background-size: contain;
|
||
|
|
// background-repeat: no-repeat;
|
||
|
|
// background-position: center;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
&:first-child {
|
||
|
|
position: relative;
|
||
|
|
right: 49.1%;
|
||
|
|
}
|
||
|
|
&:nth-child(2n) {
|
||
|
|
position: relative;
|
||
|
|
right: 17.9%;
|
||
|
|
}
|
||
|
|
&:last-child {
|
||
|
|
position: relative;
|
||
|
|
margin-bottom: 0;
|
||
|
|
right: 49.1%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.minipic {
|
||
|
|
width: 97%;
|
||
|
|
height: 97%;
|
||
|
|
z-index: 22;
|
||
|
|
cursor: pointer;
|
||
|
|
position: relative;
|
||
|
|
&.isreall {
|
||
|
|
// width: 94%;
|
||
|
|
// height: 94%;
|
||
|
|
// margin: 6% auto 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.desBox {
|
||
|
|
position: absolute;
|
||
|
|
// width: 462px;
|
||
|
|
// top: 215px;
|
||
|
|
// left: 60px;
|
||
|
|
width: 532px;
|
||
|
|
top: 240px;
|
||
|
|
left: 70px;
|
||
|
|
color: #8867b0;
|
||
|
|
text-align: center;
|
||
|
|
.preview {
|
||
|
|
width: 140px;
|
||
|
|
font-size: 22px;
|
||
|
|
font-family: Averia Serif;
|
||
|
|
margin: 0 auto;
|
||
|
|
line-height: 1.1;
|
||
|
|
}
|
||
|
|
.character_name {
|
||
|
|
font-size: 80px;
|
||
|
|
font-family: "Noto Serif SC", serif;
|
||
|
|
position: relative;
|
||
|
|
&::after {
|
||
|
|
position: absolute;
|
||
|
|
// bottom: -20px;
|
||
|
|
bottom: -26px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
content: "";
|
||
|
|
// width: 462px;
|
||
|
|
// height: 9.5px;
|
||
|
|
width: 532px;
|
||
|
|
height: 11px;
|
||
|
|
background-image: url("@/assets/partFour/line.png");
|
||
|
|
background-size: contain;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.cv_name {
|
||
|
|
margin-top: 48px;
|
||
|
|
font-size: 34px;
|
||
|
|
font-family: "Noto Serif SC", serif;
|
||
|
|
color: #9468ca;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
.changeBtn {
|
||
|
|
width: 79px;
|
||
|
|
height: 31px;
|
||
|
|
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 {
|
||
|
|
// vertical-align: middle;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.voice {
|
||
|
|
margin-left: 12px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
img {
|
||
|
|
width: 32px;
|
||
|
|
height: 31px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// .text,
|
||
|
|
// .voice {
|
||
|
|
// vertical-align: middle;
|
||
|
|
// position: relative;
|
||
|
|
// &::after {
|
||
|
|
// // width: 19px;
|
||
|
|
// // height: 19px;
|
||
|
|
// width: 22px;
|
||
|
|
// height: 22px;
|
||
|
|
// position: absolute;
|
||
|
|
// top: 50%;
|
||
|
|
// transform: translateY(-50%);
|
||
|
|
// content: "";
|
||
|
|
// background-image: url("@/assets/partFour/star.png");
|
||
|
|
// background-size: contain;
|
||
|
|
// background-repeat: no-repeat;
|
||
|
|
// background-position: center;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
.text {
|
||
|
|
&::after {
|
||
|
|
// left: -44px;
|
||
|
|
left: -66px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.voice {
|
||
|
|
&::after {
|
||
|
|
// right: -40px;
|
||
|
|
right: -56px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.dialogue {
|
||
|
|
// font-size: 20px;
|
||
|
|
// margin-top: 20.8px;
|
||
|
|
font-size: 22px;
|
||
|
|
margin-top: 60px;
|
||
|
|
font-family: "Noto Serif SC", serif;
|
||
|
|
color: #785da4;
|
||
|
|
.text {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.teamPic {
|
||
|
|
// width: 160px;
|
||
|
|
// height: 162px;
|
||
|
|
// margin: 0 auto;
|
||
|
|
// margin-top: 24px;
|
||
|
|
width: auto;
|
||
|
|
height: 187px;
|
||
|
|
margin: 24px auto 0;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.namePic {
|
||
|
|
// width: 254px;
|
||
|
|
// height: 96.5px;
|
||
|
|
// margin-top: 4px;
|
||
|
|
// width: 292px;
|
||
|
|
height: 142px;
|
||
|
|
// width: auto;
|
||
|
|
// height: 151px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
@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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
height: auto !important;
|
||
|
|
.content {
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
width: 0 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.arguments {
|
||
|
|
width: 100%;
|
||
|
|
// height: 62.7%;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding-top: 5.8vh;
|
||
|
|
text-align: center;
|
||
|
|
.content {
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
width: 0 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
p {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
.argumentList {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 0 660px;
|
||
|
|
margin: 0;
|
||
|
|
margin-bottom: 4.7vh;
|
||
|
|
box-sizing: border-box;
|
||
|
|
li {
|
||
|
|
list-style: none;
|
||
|
|
font-size: 24px;
|
||
|
|
font-family: "Noto Serif SC", serif;
|
||
|
|
color: #a785b8;
|
||
|
|
position: relative;
|
||
|
|
cursor: pointer;
|
||
|
|
&::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 {
|
||
|
|
text-align: center;
|
||
|
|
border-bottom: 2px solid rgba(145, 145, 145, 0.6);
|
||
|
|
padding-bottom: 1.2vh;
|
||
|
|
|
||
|
|
.itemList {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
margin-bottom: 2.3vh;
|
||
|
|
align-items: flex-start;
|
||
|
|
.item {
|
||
|
|
font-size: 18px;
|
||
|
|
&:first-child {
|
||
|
|
margin-right: 115px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.advice {
|
||
|
|
margin-top: 1.38vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.argularTxt {
|
||
|
|
color: #919191;
|
||
|
|
font-family: Noto Sans S Chinese;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 21px;
|
||
|
|
}
|
||
|
|
.boldTxt {
|
||
|
|
color: #919191;
|
||
|
|
font-size: 21px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.small {
|
||
|
|
margin: 0 auto;
|
||
|
|
font-size: 16px;
|
||
|
|
&.mt {
|
||
|
|
margin-top: 4vh;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.starLine_logo {
|
||
|
|
width: 212px;
|
||
|
|
height: 80px;
|
||
|
|
vertical-align: middle;
|
||
|
|
margin-right: 5.1vh;
|
||
|
|
margin-top: 3vh;
|
||
|
|
}
|
||
|
|
.lunaring_logo {
|
||
|
|
width: 249px;
|
||
|
|
height: 54px;
|
||
|
|
margin-top: 3vh;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
audio {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.community {
|
||
|
|
// background: url("../assets/background/news.jpg") center no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
.contentBox {
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
width: 0 !important;
|
||
|
|
}
|
||
|
|
.gif {
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
width: 100%;
|
||
|
|
min-height: 100vh;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
.team_bg {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background-size: auto 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: left;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
// }
|
||
|
|
.bg {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
// background-image: url("@/assets/partFour/demian_bg.jpg");
|
||
|
|
background-size: cover;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
}
|
||
|
|
.bg_bg {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-size: cover;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper {
|
||
|
|
width: 871px;
|
||
|
|
height: 1019px;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-48%);
|
||
|
|
background-size: contain;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
z-index: 2;
|
||
|
|
|
||
|
|
.prev,
|
||
|
|
.next {
|
||
|
|
width: 88px;
|
||
|
|
height: 88px;
|
||
|
|
background-size: contain;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
position: absolute;
|
||
|
|
|
||
|
|
right: 253px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.prev {
|
||
|
|
top: 11%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.next {
|
||
|
|
bottom: 6%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.characterList {
|
||
|
|
list-style: none;
|
||
|
|
position: absolute;
|
||
|
|
right: 63px;
|
||
|
|
bottom: 120px;
|
||
|
|
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
.character-item {
|
||
|
|
// width: 145px;
|
||
|
|
// height: 145px;
|
||
|
|
// margin-bottom: -21px;
|
||
|
|
width: 167px;
|
||
|
|
height: 167px;
|
||
|
|
margin-bottom: -26px;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.active {
|
||
|
|
position: absolute;
|
||
|
|
// height: 355px;
|
||
|
|
// width: 358px;
|
||
|
|
transform: translate(-50.5%, -52%);
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
height: 400px;
|
||
|
|
width: 400px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:first-child {
|
||
|
|
position: relative;
|
||
|
|
right: 49.1%;
|
||
|
|
}
|
||
|
|
&:nth-child(2n) {
|
||
|
|
position: relative;
|
||
|
|
right: 17.9%;
|
||
|
|
}
|
||
|
|
&:last-child {
|
||
|
|
position: relative;
|
||
|
|
margin-bottom: 0;
|
||
|
|
right: 49.1%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.minipic {
|
||
|
|
width: 97%;
|
||
|
|
height: 97%;
|
||
|
|
z-index: 22;
|
||
|
|
cursor: pointer;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.desBox {
|
||
|
|
position: absolute;
|
||
|
|
|
||
|
|
width: 532px;
|
||
|
|
top: 240px;
|
||
|
|
left: 70px;
|
||
|
|
color: #8867b0;
|
||
|
|
text-align: center;
|
||
|
|
.preview {
|
||
|
|
width: 140px;
|
||
|
|
font-size: 22px;
|
||
|
|
font-family: Averia Serif;
|
||
|
|
margin: 0 auto;
|
||
|
|
line-height: 1.1;
|
||
|
|
}
|
||
|
|
.character_name {
|
||
|
|
font-size: 80px;
|
||
|
|
font-family: "Noto Serif SC", serif;
|
||
|
|
position: relative;
|
||
|
|
&::after {
|
||
|
|
position: absolute;
|
||
|
|
// bottom: -20px;
|
||
|
|
bottom: -26px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
content: "";
|
||
|
|
// width: 462px;
|
||
|
|
// height: 9.5px;
|
||
|
|
width: 532px;
|
||
|
|
height: 11px;
|
||
|
|
background-image: url("@/assets/partFour/line.png");
|
||
|
|
background-size: contain;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.cv_name {
|
||
|
|
margin-top: 48px;
|
||
|
|
font-size: 34px;
|
||
|
|
font-family: "Noto Serif SC", serif;
|
||
|
|
color: #9468ca;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
.changeBtn {
|
||
|
|
width: 79px;
|
||
|
|
height: 31px;
|
||
|
|
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 {
|
||
|
|
// vertical-align: middle;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.voice {
|
||
|
|
margin-left: 12px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
img {
|
||
|
|
width: 32px;
|
||
|
|
height: 31px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.text {
|
||
|
|
&::after {
|
||
|
|
left: -66px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.voice {
|
||
|
|
&::after {
|
||
|
|
right: -56px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.dialogue {
|
||
|
|
// font-size: 20px;
|
||
|
|
// margin-top: 20.8px;
|
||
|
|
font-size: 22px;
|
||
|
|
margin-top: 60px;
|
||
|
|
font-family: "Noto Serif SC", serif;
|
||
|
|
color: #785da4;
|
||
|
|
.text {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.teamPic {
|
||
|
|
// width: 160px;
|
||
|
|
// height: 162px;
|
||
|
|
// margin: 0 auto;
|
||
|
|
// margin-top: 24px;
|
||
|
|
width: auto;
|
||
|
|
height: 187px;
|
||
|
|
margin: 24px auto 0;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.namePic {
|
||
|
|
// width: 254px;
|
||
|
|
// height: 96.5px;
|
||
|
|
// margin-top: 4px;
|
||
|
|
// width: 292px;
|
||
|
|
height: 142px;
|
||
|
|
// width: auto;
|
||
|
|
// height: 151px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.footerBox {
|
||
|
|
height: auto;
|
||
|
|
margin: 2vw;
|
||
|
|
font-size: 28px;
|
||
|
|
text-align: center;
|
||
|
|
color: #000;
|
||
|
|
.starLine_logo {
|
||
|
|
width: 84.5px;
|
||
|
|
height: 111px;
|
||
|
|
vertical-align: bottom;
|
||
|
|
// margin-right: 5.1vh;
|
||
|
|
// margin-top: 3vh;
|
||
|
|
}
|
||
|
|
.lunaring_logo {
|
||
|
|
width: 104px;
|
||
|
|
height: 90px;
|
||
|
|
// margin-top: 3vh;
|
||
|
|
margin: 0 2vw;
|
||
|
|
vertical-align: bottom;
|
||
|
|
}
|
||
|
|
.fearless_logo {
|
||
|
|
width: 125px;
|
||
|
|
height: 89px;
|
||
|
|
vertical-align: middle;
|
||
|
|
margin-right: 2vw;
|
||
|
|
}
|
||
|
|
.listItem {
|
||
|
|
color: #000;
|
||
|
|
margin-right: 2vw;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.small {
|
||
|
|
margin: 0 auto;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #ccc;
|
||
|
|
&.mt {
|
||
|
|
margin-top: 4vh;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#swiper-container2 .swiper-wrapper {
|
||
|
|
height: auto !important;
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
width: 0 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
#swiper-container2 .swiper-slide {
|
||
|
|
font-size: 18px;
|
||
|
|
height: auto;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: block;
|
||
|
|
color: #fff;
|
||
|
|
}
|