2160 lines
45 KiB
CSS
2160 lines
45 KiB
CSS
.right-container {
|
||
width: calc(100% - 235rpx);
|
||
height: 100vh;
|
||
transition: opacity 1s ease;
|
||
|
||
.right-container-sec {
|
||
width: 100%;
|
||
display: flex;
|
||
position: relative;
|
||
|
||
.right-container-left-font-spec {
|
||
position: absolute;
|
||
top: 180rpx;
|
||
left: 580rpx;
|
||
width: 100rpx;
|
||
height: 40rpx;
|
||
font-size: 25rpx;
|
||
border-radius: 5rpx;
|
||
color: #fff;
|
||
z-index: 10;
|
||
background-color: rgb(52, 198, 120);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.right-container-fir-left-carousel {
|
||
position: absolute;
|
||
right: 245rpx;
|
||
top: 17rpx;
|
||
|
||
.carousel {
|
||
position: relative;
|
||
width: 30rpx;
|
||
height: 80rpx;
|
||
|
||
.dots {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 10rpx;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 7rpx;
|
||
|
||
.dot {
|
||
width: 10rpx;
|
||
height: 10rpx;
|
||
border-radius: 50%;
|
||
background-color: #657494;
|
||
/* 默认未激活的颜色 */
|
||
cursor: pointer;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.dot-dark {
|
||
width: 10rpx;
|
||
height: 10rpx;
|
||
border-radius: 50%;
|
||
background-color: #fff;
|
||
/* 默认未激活的颜色 */
|
||
cursor: pointer;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.dot.active {
|
||
background-color: #01A0FE;
|
||
/* 激活的颜色 */
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-container-right-father-dark {
|
||
|
||
height: 630rpx;
|
||
border-radius: 50rpx;
|
||
background-color: rgb(22, 48, 76);
|
||
border: 2rpx solid transparent;
|
||
background:
|
||
url('/static/index/cardbgc/bgcdark.png') padding-box,
|
||
linear-gradient(45deg, #9bc4f8, #285399, #9bc4f8, #285399, #9bc4f8) border-box;
|
||
background-clip: padding-box, border-box;
|
||
background-color: rgba(12, 25, 47, 0.1);
|
||
/* 背景颜色 #f4f9ff，透明度 70% */
|
||
/* 背景颜色 #f4f9ff，透明度 70% */
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: 0px 8rpx 16rpx rgba(105, 129, 178,0.8);
|
||
overflow: hidden;
|
||
|
||
.uni-margin-wrap {
|
||
margin-top: 200rpx;
|
||
width: 1200rpx;
|
||
|
||
.swiper {
|
||
height: 900rpx;
|
||
|
||
.swiper-item-flex {
|
||
display: flex;
|
||
}
|
||
|
||
.swiper-item {
|
||
display: block;
|
||
height: 300rpx;
|
||
line-height: 300rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.time-tra-next {
|
||
height: 100%;
|
||
width: 700rpx;
|
||
.time-people {
|
||
display: flex;
|
||
margin-bottom: 20rpx;
|
||
|
||
.time-people-img {
|
||
width: 42rpx;
|
||
height: 42rpx;
|
||
margin-right: 5rpx;
|
||
}
|
||
|
||
.time-people-font {
|
||
font-size: 30rpx;
|
||
margin-right: 90rpx;
|
||
}
|
||
|
||
.time-people-font-dark {
|
||
color: #CDD6EA;
|
||
font-size: 30rpx;
|
||
margin-right: 90rpx;
|
||
}
|
||
}
|
||
|
||
.time-font {
|
||
font-size: 65rpx;
|
||
margin-top: 50rpx;
|
||
margin-bottom: 10rpx;
|
||
font-weight: 700;
|
||
background: linear-gradient(to bottom, #7080A1, #263556);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.time-font-dark {
|
||
font-size: 65rpx;
|
||
margin-top: 50rpx;
|
||
margin-bottom: 10rpx;
|
||
background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.time-text {
|
||
margin-left: 10rpx;
|
||
font-size: 70rpx;
|
||
font-weight: 700;
|
||
width: 800rpx;
|
||
margin-bottom: 50rpx;
|
||
line-height: 70rpx;
|
||
position: relative;
|
||
|
||
.time-text-img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 300rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-container-right-down-father {
|
||
width: 100%;
|
||
height: 560rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.right-container-right-down-left {
|
||
height: 50rpx;
|
||
width: 50rpx;
|
||
margin-top: -150rpx;
|
||
}
|
||
|
||
.right-container-right-down-card-dark {
|
||
margin-left: 50rpx;
|
||
margin-top: 60rpx;
|
||
width: 763rpx;
|
||
height: 430rpx;
|
||
border-radius: 40rpx;
|
||
position: relative;
|
||
display: flex;
|
||
box-shadow: 2rpx 0 0 2rpx;
|
||
background-color: rgb(22, 48, 76);
|
||
border: 2rpx solid #fff;
|
||
|
||
|
||
.right-container-right-down-card-line {
|
||
width: 1px;
|
||
/* 线条的宽度 */
|
||
height: 200rpx;
|
||
/* 高度占满父容器 */
|
||
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #808080 50%, rgba(0, 0, 0, 0) 100%);
|
||
margin-left: -20rpx;
|
||
margin-right: 30rpx;
|
||
margin-top: 100rpx;
|
||
}
|
||
|
||
.right-container-right-down-card-card {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
width: 450rpx;
|
||
position: relative;
|
||
|
||
.right-container-right-down-card-card-type {
|
||
position: absolute;
|
||
top: 0rpx;
|
||
left: -25rpx;
|
||
width: 250rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.right-container-right-down-card-card-font {
|
||
position: absolute;
|
||
top: 15rpx;
|
||
left: 65rpx;
|
||
font-size: 35rpx;
|
||
color: #414F6E;
|
||
}
|
||
|
||
.right-container-right-down-card-card-font-dark {
|
||
position: absolute;
|
||
top: 15rpx;
|
||
left: 65rpx;
|
||
font-size: 35rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.right-container-right-down-card-img {
|
||
width: 230rpx;
|
||
height: 200rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.right-container-right-down-card-font {
|
||
font-size: 35rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.right-container-right-down-card-font-dark {
|
||
font-size: 35rpx;
|
||
color: #fff;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-container-right-down-card {
|
||
margin-left: 50rpx;
|
||
margin-top: 60rpx;
|
||
width: 763rpx;
|
||
height: 430rpx;
|
||
border-radius: 40rpx;
|
||
position: relative;
|
||
display: flex;
|
||
border: 1rpx solid black;
|
||
box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.3);
|
||
|
||
.right-container-right-down-card-line {
|
||
width: 1px;
|
||
/* 线条的宽度 */
|
||
height: 200rpx;
|
||
/* 高度占满父容器 */
|
||
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #808080 50%, rgba(0, 0, 0, 0) 100%);
|
||
margin-left: -20rpx;
|
||
margin-right: 30rpx;
|
||
margin-top: 100rpx;
|
||
}
|
||
|
||
.right-container-right-down-card-card {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
width: 450rpx;
|
||
position: relative;
|
||
|
||
.right-container-right-down-card-card-type {
|
||
position: absolute;
|
||
top: 0rpx;
|
||
left: -25rpx;
|
||
width: 250rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.right-container-right-down-card-card-font {
|
||
position: absolute;
|
||
top: 15rpx;
|
||
left: 65rpx;
|
||
font-size: 35rpx;
|
||
color: #414F6E;
|
||
}
|
||
|
||
.right-container-right-down-card-img {
|
||
width: 230rpx;
|
||
height: 200rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.right-container-right-down-card-font {
|
||
font-size: 35rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.right-container-right-down-card-font-dark {
|
||
font-size: 50rpx;
|
||
color: #fff;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-container-right-down-right {
|
||
height: 50rpx;
|
||
width: 50rpx;
|
||
margin-top: -150rpx;
|
||
}
|
||
}
|
||
|
||
.right-container-right-title {
|
||
width: 100%;
|
||
height: 170rpx;
|
||
position: relative;
|
||
|
||
.right-container-right-text {
|
||
line-height: 130rpx;
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
margin-left: 60rpx;
|
||
}
|
||
|
||
.right-container-right-text-dark {
|
||
line-height: 130rpx;
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
margin-left: 60rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.right-container-right-img {
|
||
position: absolute;
|
||
top: 60rpx;
|
||
right: 50rpx;
|
||
width: 50rpx;
|
||
height: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-container-right-father {
|
||
width: 100%;
|
||
height: 630rpx;
|
||
border-radius: 50rpx;
|
||
border: 2rpx solid #fff;
|
||
background-image: url('/static/index/mountain.png');
|
||
background-color: rgba(200, 216, 238, 0.8);
|
||
background-position: 60% 50%;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: 0px 8rpx 16rpx rgba(105, 129, 178,0.8);
|
||
overflow: hidden;
|
||
|
||
.uni-margin-wrap {
|
||
margin-top: 200rpx;
|
||
width: 1200rpx;
|
||
|
||
.swiper {
|
||
height: 900rpx;
|
||
|
||
.swiper-item-flex {
|
||
display: flex;
|
||
}
|
||
|
||
.swiper-item {
|
||
display: block;
|
||
height: 300rpx;
|
||
line-height: 300rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.time-tra-next {
|
||
height: 100%;
|
||
width: 700rpx;
|
||
|
||
|
||
.time-people {
|
||
display: flex;
|
||
margin-bottom: 20rpx;
|
||
|
||
.time-people-img {
|
||
width: 42rpx;
|
||
height: 42rpx;
|
||
margin-right: 5rpx;
|
||
}
|
||
|
||
.time-people-font {
|
||
font-size: 30rpx;
|
||
margin-right: 90rpx;
|
||
}
|
||
|
||
.time-people-font-dark {
|
||
color: #CDD6EA;
|
||
font-size: 30rpx;
|
||
margin-right: 90rpx;
|
||
}
|
||
}
|
||
|
||
.time-font {
|
||
font-size: 65rpx;
|
||
margin-top: 50rpx;
|
||
margin-bottom: 10rpx;
|
||
font-weight: 700;
|
||
background: linear-gradient(to bottom, #7080A1, #263556);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.time-font-dark {
|
||
font-size: 65rpx;
|
||
margin-top: 50rpx;
|
||
margin-bottom: 10rpx;
|
||
background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.time-text {
|
||
margin-left: 10rpx;
|
||
font-size: 70rpx;
|
||
font-weight: 700;
|
||
width: 800rpx;
|
||
margin-bottom: 50rpx;
|
||
line-height: 70rpx;
|
||
position: relative;
|
||
|
||
.time-text-img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 300rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-container-right-down-father {
|
||
width: 100%;
|
||
height: 560rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.right-container-right-down-left {
|
||
height: 50rpx;
|
||
width: 50rpx;
|
||
margin-top: -150rpx;
|
||
}
|
||
|
||
.right-container-right-down-card-dark {
|
||
margin-left: 50rpx;
|
||
margin-top: 60rpx;
|
||
width: 763rpx;
|
||
height: 430rpx;
|
||
border-radius: 40rpx;
|
||
position: relative;
|
||
display: flex;
|
||
box-shadow: 2rpx 0 0 2rpx;
|
||
background-color: rgb(22, 48, 76);
|
||
border: 2rpx solid #fff;
|
||
|
||
|
||
.right-container-right-down-card-line {
|
||
width: 1px;
|
||
/* 线条的宽度 */
|
||
height: 200rpx;
|
||
/* 高度占满父容器 */
|
||
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #808080 50%, rgba(0, 0, 0, 0) 100%);
|
||
margin-left: -20rpx;
|
||
margin-right: 30rpx;
|
||
margin-top: 100rpx;
|
||
}
|
||
|
||
.right-container-right-down-card-card {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
width: 450rpx;
|
||
position: relative;
|
||
|
||
.right-container-right-down-card-card-type {
|
||
position: absolute;
|
||
top: 0rpx;
|
||
left: -25rpx;
|
||
width: 250rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.right-container-right-down-card-card-font {
|
||
position: absolute;
|
||
top: 15rpx;
|
||
left: 65rpx;
|
||
font-size: 35rpx;
|
||
color: #414F6E;
|
||
}
|
||
|
||
.right-container-right-down-card-card-font-dark {
|
||
position: absolute;
|
||
top: 15rpx;
|
||
left: 65rpx;
|
||
font-size: 35rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.right-container-right-down-card-img {
|
||
width: 230rpx;
|
||
height: 200rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.right-container-right-down-card-font {
|
||
font-size: 35rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.right-container-right-down-card-font-dark {
|
||
font-size: 35rpx;
|
||
color: #fff;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-container-right-down-card {
|
||
margin-left: 50rpx;
|
||
margin-top: 60rpx;
|
||
width: 763rpx;
|
||
height: 430rpx;
|
||
border-radius: 40rpx;
|
||
position: relative;
|
||
display: flex;
|
||
border: 1rpx solid black;
|
||
box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.3);
|
||
|
||
.right-container-right-down-card-line {
|
||
width: 1px;
|
||
/* 线条的宽度 */
|
||
height: 200rpx;
|
||
/* 高度占满父容器 */
|
||
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #808080 50%, rgba(0, 0, 0, 0) 100%);
|
||
margin-left: -20rpx;
|
||
margin-right: 30rpx;
|
||
margin-top: 100rpx;
|
||
}
|
||
|
||
.right-container-right-down-card-card {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
width: 450rpx;
|
||
position: relative;
|
||
|
||
.right-container-right-down-card-card-type {
|
||
position: absolute;
|
||
top: 0rpx;
|
||
left: -25rpx;
|
||
width: 250rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.right-container-right-down-card-card-font {
|
||
position: absolute;
|
||
top: 15rpx;
|
||
left: 65rpx;
|
||
font-size: 35rpx;
|
||
color: #414F6E;
|
||
}
|
||
|
||
.right-container-right-down-card-img {
|
||
width: 230rpx;
|
||
height: 200rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.right-container-right-down-card-font {
|
||
font-size: 35rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.right-container-right-down-card-font-dark {
|
||
font-size: 50rpx;
|
||
color: #fff;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-container-right-down-right {
|
||
height: 50rpx;
|
||
width: 50rpx;
|
||
margin-top: -150rpx;
|
||
}
|
||
}
|
||
|
||
.right-container-right-title {
|
||
width: 100%;
|
||
height: 170rpx;
|
||
position: relative;
|
||
|
||
.right-container-right-text {
|
||
line-height: 130rpx;
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
margin-left: 60rpx;
|
||
}
|
||
|
||
.right-container-right-text-dark {
|
||
line-height: 130rpx;
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
margin-left: 60rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.right-container-right-img {
|
||
position: absolute;
|
||
top: 60rpx;
|
||
right: 50rpx;
|
||
width: 50rpx;
|
||
height: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-container-left {
|
||
height: 630rpx;
|
||
border-radius: 50rpx;
|
||
border: 1rpx solid #fff;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: rgba(255, 255, 255, 0.5);
|
||
background-image: url('/static/index/mountain.png');
|
||
background-position: 70% 45%;
|
||
overflow: hidden;
|
||
box-shadow: 0px 8rpx 16rpx rgba(105, 129, 178,0.8);
|
||
}
|
||
|
||
.right-container-left-dark {
|
||
height: 630rpx;
|
||
border-radius: 50rpx;
|
||
background-color: rgb(22, 48, 76);
|
||
border: 2rpx solid transparent;
|
||
background:
|
||
url('/static/index/cardbgc/bgcdark.png') padding-box,
|
||
linear-gradient(45deg, #9bc4f8, #285399, #9bc4f8, #285399, #9bc4f8) border-box;
|
||
background-clip: padding-box, border-box;
|
||
background-color: rgba(12, 25, 47, 0.1);
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
box-shadow: 0px 8rpx 16rpx rgba(105, 129, 178,0.8);
|
||
}
|
||
|
||
.uni-margin-wrap {
|
||
width: 1000rpx;
|
||
|
||
.swiper {
|
||
height: 700rpx;
|
||
|
||
.swiper-item-flex {
|
||
display: flex;
|
||
position: relative;
|
||
}
|
||
|
||
.swiper-item {
|
||
display: block;
|
||
height: 250rpx;
|
||
line-height: 300rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-container-fir-left-card-main-right {
|
||
height: 50rpx;
|
||
width: 50rpx;
|
||
margin-right: 10rpx;
|
||
z-index: 11;
|
||
}
|
||
|
||
.right-huli-fir {
|
||
width: 250rpx;
|
||
height: 100%;
|
||
margin-top: 0rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.right-huli-view {
|
||
margin-left: 8rpx;
|
||
height: 750rpx;
|
||
overflow: auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
|
||
.right-huli-view-dis {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
height: 170rpx;
|
||
|
||
.right-huli-img {
|
||
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.right-huli-text {
|
||
width: 100%;
|
||
height: 10rpx;
|
||
font-size: 35rpx;
|
||
text-align: center;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.right-huli-text-dark {
|
||
width: 100%;
|
||
height: 10rpx;
|
||
font-size: 35rpx;
|
||
text-align: center;
|
||
margin-bottom: 5rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-huli-shang {
|
||
margin-top: 40rpx;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.right-huli-xia {
|
||
margin-bottom: 40rpx;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
|
||
.right-container-photo {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-left: 50rpx;
|
||
|
||
.right-container-photo-img {
|
||
width: 310rpx;
|
||
height: 350rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.right-container-photo-text {
|
||
font-size: 30rpx;
|
||
color: #324160;
|
||
}
|
||
|
||
.right-container-photo-text-dark {
|
||
font-size: 30rpx;
|
||
background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
}
|
||
|
||
.right-container-fir-left-card-main-left {
|
||
height: 50rpx;
|
||
width: 50rpx;
|
||
margin-left: 30rpx;
|
||
}
|
||
|
||
.right-container-left-type {
|
||
position: absolute;
|
||
top: 42rpx;
|
||
left: -15rpx;
|
||
width: 235rpx;
|
||
height: 73rpx;
|
||
z-index: 10;
|
||
}
|
||
|
||
.right-container-left-font {
|
||
position: absolute;
|
||
top: 51rpx;
|
||
left: 50rpx;
|
||
font-size: 36rpx;
|
||
color: #fff;
|
||
z-index: 10;
|
||
}
|
||
|
||
.time-tra-thi {
|
||
margin-left: 80rpx;
|
||
margin-top: 70rpx;
|
||
height: 100%;
|
||
width: 550rpx;
|
||
position: relative;
|
||
|
||
.time-text {
|
||
margin-left: 10rpx;
|
||
font-size: 35rpx;
|
||
width: 450rpx;
|
||
margin-bottom: 40rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.time-text-dark {
|
||
margin-left: 10rpx;
|
||
color: #CDD6EA;
|
||
font-size: 35rpx;
|
||
width: 450rpx;
|
||
margin-bottom: 40rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.time-tra-thi-zhixing {
|
||
position: absolute;
|
||
top: 75rpx;
|
||
left: 450rpx;
|
||
}
|
||
|
||
.time-tra-thi-zhixing-font {
|
||
position: absolute;
|
||
top: 60rpx;
|
||
left: 10rpx;
|
||
width: 100rpx;
|
||
height: 40rpx;
|
||
font-size: 25rpx;
|
||
border-radius: 5rpx;
|
||
color: #fff;
|
||
z-index: 10;
|
||
background-color: rgb(243, 123, 91);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.time-people-two {
|
||
display: flex;
|
||
margin-top: 40rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.time-people-img {
|
||
width: 42rpx;
|
||
height: 42rpx;
|
||
margin-right: 10rpx;
|
||
|
||
}
|
||
|
||
.time-people-font {
|
||
font-size: 30rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.time-people-font-dark {
|
||
color: #CDD6EA;
|
||
font-size: 30rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.time-people-thi {
|
||
display: flex;
|
||
|
||
.time-people-img {
|
||
width: 42rpx;
|
||
height: 42rpx;
|
||
margin-right: 5rpx;
|
||
margin-left: 5rpx;
|
||
}
|
||
|
||
.time-people-font {
|
||
font-size: 30rpx;
|
||
margin-right: 20rpx;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.time-people-font-dark {
|
||
color: #CDD6EA;
|
||
font-size: 30rpx;
|
||
margin-right: 20rpx;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.time-button-view {
|
||
display: flex;
|
||
margin-left: 0rpx;
|
||
transition: all 0.4s ease-in-out;
|
||
|
||
.time-button-start {
|
||
width: 230rpx;
|
||
height: 84rpx;
|
||
border-radius: 30rpx;
|
||
background: linear-gradient(to bottom, #AF8ED7, #4D3E9B);
|
||
border-left: 2rpx solid #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
margin-right: 25rpx;
|
||
box-shadow: 3rpx 3rpx 10rpx rgba(105, 129, 178,0.2);
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
|
||
.time-button-end {
|
||
width: 230rpx;
|
||
height: 84rpx;
|
||
border-radius: 30rpx;
|
||
background: linear-gradient(to bottom, #f3f3f5 , #dee4e9);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
box-shadow: 3rpx 3rpx 10rpx rgba(105, 129, 178,0.2);
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
|
||
.time-button-end-dark {
|
||
width: 230rpx;
|
||
height: 80rpx;
|
||
border-radius: 30rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
|
||
background: linear-gradient(to top, #6B87BA, #FFFFFF);
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
}
|
||
|
||
.time-font {
|
||
font-size: 70rpx;
|
||
margin-top: 120rpx;
|
||
margin-bottom: 40rpx;
|
||
font-weight: 700;
|
||
background: linear-gradient(to bottom, #7080A1, #263556);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.time-font-dark {
|
||
font-size: 70rpx;
|
||
margin-top: 120rpx;
|
||
margin-bottom: 40rpx;
|
||
background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.time-text-img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 300rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
}
|
||
|
||
.time-tra-sec {
|
||
margin-left: 80rpx;
|
||
margin-top: 110rpx;
|
||
height: 100%;
|
||
width: 500rpx;
|
||
overflow: hidden;
|
||
|
||
.time-people-thi {
|
||
display: flex;
|
||
margin-bottom: 15rpx;
|
||
|
||
.time-people-img {
|
||
width: 42rpx;
|
||
height: 42rpx;
|
||
margin-right: 5rpx;
|
||
margin-left: 5rpx;
|
||
}
|
||
|
||
.time-people-font {
|
||
font-size: 30rpx;
|
||
margin-right: 20rpx;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.time-people-font-dark {
|
||
color: #CDD6EA;
|
||
font-size: 30rpx;
|
||
margin-right: 20rpx;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.time-button-view {
|
||
display: flex;
|
||
margin-top: 30rpx;
|
||
margin-left: 0rpx;
|
||
|
||
.time-button-start {
|
||
width: 230rpx;
|
||
height: 84rpx;
|
||
border-radius: 30rpx;
|
||
background: linear-gradient(to top, #0DA0B1, #04D3AF);
|
||
border-left: 2rpx solid #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
margin-right: 25rpx;
|
||
box-shadow: 3rpx 3rpx 10rpx rgba(105, 129, 178,0.2);
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
|
||
.time-button-end {
|
||
width: 230rpx;
|
||
height: 84rpx;
|
||
border-radius: 30rpx;
|
||
background: linear-gradient(to bottom, #f3f3f5 , #dee4e9);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
box-shadow: 3rpx 3rpx 10rpx rgba(105, 129, 178,0.2);
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
|
||
.time-button-end-dark {
|
||
width: 230rpx;
|
||
height: 80rpx;
|
||
border-radius: 30rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
|
||
background: linear-gradient(to top, #6B87BA, #FFFFFF);
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
}
|
||
|
||
.time-font {
|
||
font-size: 75rpx;
|
||
margin-top: 30rpx;
|
||
margin-bottom: 10rpx;
|
||
font-weight: 700;
|
||
background: linear-gradient(to bottom, #7080A1, #263556);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.time-font-dark {
|
||
font-size: 75rpx;
|
||
margin-top: 30rpx;
|
||
margin-bottom: 10rpx;
|
||
background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.time-text-img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 300rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.time-people-sec {
|
||
display: flex;
|
||
margin-bottom: 10rpx;
|
||
|
||
.time-people-img {
|
||
width: 42rpx;
|
||
height: 42rpx;
|
||
margin-right: 10rpx;
|
||
margin-left: 5rpx;
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
|
||
.time-people-font {
|
||
font-size: 30rpx;
|
||
margin-right: 90rpx;
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
|
||
.time-people-font-dark {
|
||
color: #CDD6EA;
|
||
font-size: 30rpx;
|
||
margin-right: 90rpx;
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
}
|
||
|
||
.right-container-fir {
|
||
width: 100%;
|
||
height: 580rpx;
|
||
display: flex;
|
||
.right-container-fir-left-nav {
|
||
width: 63%;
|
||
height: 548rpx;
|
||
/* border-radius: 50rpx; */
|
||
/* 圆角 */
|
||
position: relative;
|
||
/* 增加背景色确保视觉效果 */
|
||
|
||
box-shadow: 0px 8rpx 16rpx rgba(105, 129, 178,0.8);
|
||
|
||
/* 增强的阴影效果 */
|
||
.right-container-fir-left-carousel {
|
||
position: absolute;
|
||
left: 930rpx;
|
||
margin-top: 10rpx;
|
||
|
||
.carousel {
|
||
position: relative;
|
||
width: 150rpx;
|
||
height: 100rpx;
|
||
|
||
/* 背景色（示例） */
|
||
.dots {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 10rpx;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 7rpx;
|
||
|
||
.dot {
|
||
width: 10rpx;
|
||
height: 10rpx;
|
||
border-radius: 50%;
|
||
background-color: #657494;
|
||
/* 默认未激活的颜色 */
|
||
cursor: pointer;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.dot-dark {
|
||
width: 10rpx;
|
||
height: 10rpx;
|
||
border-radius: 50%;
|
||
background-color: #fff;
|
||
/* 默认未激活的颜色 */
|
||
cursor: pointer;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.dot.active {
|
||
background-color: #01A0FE;
|
||
/* 激活的颜色 */
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 包括边框在内计算宽高 */
|
||
.right-container-fir-left-card {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50rpx;
|
||
border: 1rpx solid #fff;
|
||
background-color: rgba(99, 115, 157, 0.1);
|
||
/* 白色背景透明度为 10% */
|
||
background-image: url('/static/index/mountain.png');
|
||
background-position: 60% 50%;
|
||
}
|
||
|
||
.right-container-fir-left-card-dark {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 2rpx solid transparent;
|
||
border-radius: 50rpx;
|
||
background:
|
||
url('/static/index/cardbgc/bgcdark.png') padding-box,
|
||
linear-gradient(45deg, #9bc4f8, #285399, #9bc4f8, #285399, #9bc4f8) border-box;
|
||
background-clip: padding-box, border-box;
|
||
background-color: rgba(12, 25, 47, 0.1);
|
||
}
|
||
|
||
|
||
|
||
.right-container-fir-left-card-main {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.split-line-white-right-left {
|
||
width: 2rpx;
|
||
/* 线条的宽度 */
|
||
height: 800rpx;
|
||
/* 高度占满父容器 */
|
||
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #fff 50%, rgba(0, 0, 0, 0) 100%);
|
||
margin-right: 20rpx;
|
||
position: relative;
|
||
|
||
.split-line-white-img {
|
||
position: absolute;
|
||
top: 0rpx;
|
||
left: -300rpx;
|
||
height: 800rpx;
|
||
width: 300rpx;
|
||
z-index: -1;
|
||
}
|
||
}
|
||
|
||
.uni-margin-wrap-fir {
|
||
width: 100%;
|
||
|
||
|
||
.swiper {
|
||
height: 470rpx;
|
||
|
||
.swiper-item-flex {
|
||
display: flex;
|
||
margin-top: 30rpx;
|
||
z-index: 10;
|
||
}
|
||
|
||
.swiper-item {
|
||
display: block;
|
||
height: 200rpx;
|
||
line-height: 300rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
.right-container-fir-left-card-main-right {
|
||
height: 50rpx;
|
||
width: 50rpx;
|
||
margin-right: 25rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.time-tra-fir {
|
||
margin-top: 40rpx;
|
||
margin-left: 30rpx;
|
||
|
||
.time-people-two {
|
||
display: flex;
|
||
}
|
||
|
||
.time-button-view {
|
||
display: flex;
|
||
margin-top: 10rpx;
|
||
margin-left: 0rpx;
|
||
|
||
.time-button-start {
|
||
width: 230rpx;
|
||
height: 84rpx;
|
||
border-radius: 30rpx;
|
||
background: linear-gradient(to top, #047ADB, #0EA7DD);
|
||
border-left: 2rpx solid #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
margin-right: 25rpx;
|
||
box-shadow: 3rpx 3rpx 10rpx rgba(105, 129, 178,0.2);
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
|
||
.time-button-end {
|
||
width: 230rpx;
|
||
height: 84rpx;
|
||
border-radius: 30rpx;
|
||
background: linear-gradient(to bottom, #f3f3f5 , #dee4e9);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
box-shadow: 3rpx 3rpx 10rpx rgba(105, 129, 178,0.2);
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
|
||
.time-button-end-dark {
|
||
width: 230rpx;
|
||
height: 80rpx;
|
||
border-radius: 30rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
|
||
background: linear-gradient(to top, #6B87BA, #FFFFFF);
|
||
transition: all 0.4s ease-in-out;
|
||
/* 渐变从下到上 */
|
||
}
|
||
}
|
||
|
||
.time-people-fir {
|
||
display: flex;
|
||
margin-right: 20rpx;
|
||
|
||
.time-people-img {
|
||
width: 42rpx;
|
||
height: 42rpx;
|
||
margin-right: 10rpx;
|
||
margin-left: 5rpx;
|
||
}
|
||
|
||
.time-people-font {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.time-people-font-dark {
|
||
color: #CDD6EA;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
.time-font {
|
||
font-size: 70rpx;
|
||
margin-bottom: 30rpx;
|
||
background: linear-gradient(to top, #334160, #687898);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
font-weight: 700;
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
|
||
.time-font-dark {
|
||
font-size: 70rpx;
|
||
margin-bottom: 30rpx;
|
||
background: linear-gradient(to right, #EBF4FF, #ADC4E0);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
font-weight: 700;
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
|
||
.time-text {
|
||
margin-left: 10rpx;
|
||
font-size: 35rpx;
|
||
width: 530rpx;
|
||
margin-bottom: 40rpx;
|
||
line-height: 40rpx;
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
|
||
.time-text-dark {
|
||
margin-left: 10rpx;
|
||
color: #CDD6EA;
|
||
font-size: 35rpx;
|
||
width: 530rpx;
|
||
margin-bottom: 40rpx;
|
||
line-height: 40rpx;
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
}
|
||
|
||
|
||
.right-container-fir-left-card-card {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
position: relative;
|
||
margin-left: 50rpx;
|
||
|
||
.right-container-fir-left-card-zhixing {
|
||
position: absolute;
|
||
top: 10rpx;
|
||
left: 870rpx;
|
||
}
|
||
|
||
.right-container-fir-left-card-zhixing-font {
|
||
position: absolute;
|
||
top: 60rpx;
|
||
left: 10rpx;
|
||
width: 100rpx;
|
||
height: 40rpx;
|
||
font-size: 25rpx;
|
||
border-radius: 5rpx;
|
||
color: #fff;
|
||
z-index: 10;
|
||
background-color: rgb(243, 123, 91);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
|
||
.right-container-fir-left-card-main-font {
|
||
font-size: 34rpx;
|
||
font-weight: 350;
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
|
||
.right-container-fir-left-card-main-font-dark {
|
||
font-size: 34rpx;
|
||
font-weight: 350;
|
||
transition: all 0.4s ease-in-out;
|
||
color: #fff;
|
||
}
|
||
|
||
|
||
.right-container-fir-left-card-main-laba-video {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 10rpx;
|
||
|
||
.right-container-fir-left-card-main-laba {
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
margin-right: 5rpx;
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
|
||
.right-container-fir-left-card-main-video {
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
}
|
||
|
||
.right-container-fir-left-card-img {
|
||
width: 360rpx;
|
||
height: 270rpx;
|
||
}
|
||
}
|
||
|
||
.right-container-fir-left-card-main-left-up {
|
||
height: 50rpx;
|
||
width: 50rpx;
|
||
margin-right: 0rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.right-container-fir-left-card-hulilei {
|
||
position: absolute;
|
||
top: 42rpx;
|
||
left: -10rpx;
|
||
width: 220rpx;
|
||
height: 73rpx;
|
||
z-index: 10;
|
||
}
|
||
|
||
.right-container-fir-left-card-hulilei-font {
|
||
position: absolute;
|
||
top: 51rpx;
|
||
left: 45rpx;
|
||
font-size: 36rpx;
|
||
color: #fff;
|
||
z-index: 10;
|
||
}
|
||
}
|
||
|
||
.right-container-fir-right {
|
||
margin-left: 2%;
|
||
margin-right: 2%;
|
||
width: 700rpx;
|
||
height: 548rpx;
|
||
border-radius: 50rpx;
|
||
border: 1rpx solid #fff;
|
||
background: url(/static/index/rightbgi.png);
|
||
background-size: cover;
|
||
background-color: rgba(99, 115, 157, 0.1);
|
||
box-shadow: 0px 8rpx 16rpx rgba(105, 129, 178,0.8);
|
||
}
|
||
|
||
.right-container-fir-right-dark {
|
||
margin-left: 2%;
|
||
margin-right: 2%;
|
||
width: 700rpx;
|
||
height: 548rpx;
|
||
border-radius: 50rpx;
|
||
border: 1rpx solid #fff;
|
||
background-color: #16304c;
|
||
border: 2rpx solid transparent;
|
||
background:
|
||
url('/static/index/cardbgc/bgcdark.png') padding-box,
|
||
linear-gradient(45deg, #9bc4f8, #285399, #9bc4f8, #285399, #9bc4f8) border-box;
|
||
background-clip: padding-box, border-box;
|
||
background-color: rgba(12, 25, 47, 0.1);
|
||
box-shadow: 0px 8rpx 16rpx rgba(105, 129, 178,0.8);
|
||
}
|
||
|
||
.right-container-card {
|
||
margin-top: 25rpx;
|
||
margin-left: 40rpx;
|
||
|
||
position: relative;
|
||
|
||
.right-container-card-right {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 120rpx;
|
||
height: 350rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
margin-bottom: 20rpx;
|
||
margin-right: 20rpx;
|
||
|
||
.right-container-card-right-img {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.right-container-button {
|
||
display: flex;
|
||
margin-left: -20rpx;
|
||
margin-top: 23rpx;
|
||
|
||
.right-container-button-any {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
width: 150rpx;
|
||
position: relative;
|
||
|
||
.right-container-button-ray {
|
||
position: absolute;
|
||
top: -25rpx;
|
||
left: 0rpx;
|
||
width: 158rpx;
|
||
height: 150rpx;
|
||
|
||
}
|
||
|
||
.right-container-button-text {
|
||
font-size: 25rpx;
|
||
color: #313D56;
|
||
}
|
||
}
|
||
|
||
.right-container-button-img {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
}
|
||
|
||
.right-container-fenge {
|
||
// margin-top: 40rpx;
|
||
width: 100%;
|
||
height: 2rpx;
|
||
/* 可根据需求调整容器的高度 */
|
||
background: linear-gradient(to right,
|
||
rgba(255, 255, 255, 0) 0%,
|
||
/* 左端透明 */
|
||
rgba(255, 255, 255, 1) 50%,
|
||
/* 中心纯白 */
|
||
rgba(255, 255, 255, 0) 100%
|
||
/* 右端透明 */
|
||
);
|
||
}
|
||
|
||
.right-container-tem {
|
||
display: flex;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.right-container-tem-text {
|
||
font-size: 50rpx;
|
||
margin-right: 70rpx;
|
||
}
|
||
|
||
.right-container-tem-text-dark {
|
||
font-size: 50rpx;
|
||
margin-right: 70rpx;
|
||
background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.right-container-tem-img {
|
||
width: 65rpx;
|
||
height: 65rpx;
|
||
}
|
||
}
|
||
|
||
.right-container-title {
|
||
font-size: 120rpx;
|
||
font-weight: 500;
|
||
background: linear-gradient(to bottom, #7080A1, #263556);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
margin: 0;
|
||
}
|
||
|
||
.right-container-title-dark {
|
||
font-size: 120rpx;
|
||
display: block;
|
||
margin: 0;
|
||
font-weight: 500;
|
||
background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.right-container-date {
|
||
font-size: 35rpx;
|
||
display: block;
|
||
margin: 0;
|
||
margin-left: 18rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.right-container-date-dark {
|
||
font-size: 35rpx;
|
||
color: #7080A1;
|
||
display: block;
|
||
margin: 0;
|
||
margin-left: 18rpx;
|
||
margin-bottom: 10rpx;
|
||
background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.right-container-day {
|
||
font-size: 35rpx;
|
||
font-weight: 600;
|
||
margin-left: 18rpx;
|
||
}
|
||
|
||
.right-container-day-dark {
|
||
font-size: 35rpx;
|
||
font-weight: 600;
|
||
margin-left: 18rpx;
|
||
background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.right-container-title-nav {
|
||
margin-top: 75rpx;
|
||
margin-bottom: 20rpx;
|
||
margin-left: 20rpx;
|
||
|
||
.right-container-title-no {
|
||
font-size: 35rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.right-container-title-no-dark {
|
||
font-size: 35rpx;
|
||
background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.right-container-title-class {
|
||
font-size: 35rpx;
|
||
font-weight: 800;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.right-container-title-class-dark {
|
||
font-size: 35rpx;
|
||
font-weight: 800;
|
||
margin-left: 20rpx;
|
||
background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.right-container-title-class-anhei-button {
|
||
float: right;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 30rpx;
|
||
margin-right: 30rpx;
|
||
width: 200rpx;
|
||
height: 50rpx;
|
||
background-color: black;
|
||
border: 2rpx solid;
|
||
|
||
.right-container-title-class-anhei {
|
||
font-size: 20rpx;
|
||
font-weight: 800;
|
||
color: white;
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
.split-line {
|
||
margin-left: 20rpx;
|
||
margin-top: 120rpx;
|
||
width: 2rpx;
|
||
/* 线条的宽度 */
|
||
height: 150rpx;
|
||
/* 高度占满父容器 */
|
||
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #92a7c5 50%, rgba(0, 0, 0, 0) 100%);
|
||
}
|
||
|
||
.split-line-white-sec {
|
||
width: 2rpx;
|
||
/* 线条的宽度 */
|
||
height: 800rpx;
|
||
/* 高度占满父容器 */
|
||
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #fff 50%, rgba(0, 0, 0, 0) 100%);
|
||
position: relative;
|
||
|
||
.split-line-white-img {
|
||
position: absolute;
|
||
top: 0rpx;
|
||
left: -300rpx;
|
||
height: 800rpx;
|
||
width: 300rpx;
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
|
||
.card-upfaguang {
|
||
position: absolute;
|
||
top: 265rpx;
|
||
left: 50rpx;
|
||
height: 600rpx;
|
||
width: 500rpx;
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
|
||
.card-upfaguang-down {
|
||
position: absolute;
|
||
top: 620rpx;
|
||
left: 860rpx;
|
||
height: 600rpx;
|
||
width: 500rpx;
|
||
}
|
||
|
||
|
||
.right-huli-sec {
|
||
margin-left: 7rpx;
|
||
width: 230rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
transition: all 0.4s ease-in-out;
|
||
|
||
|
||
.right-huli-view {
|
||
width: 100%;
|
||
overflow: auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
/* 垂直方向对齐方式可以调整 */
|
||
flex-direction: column;
|
||
height: 450rpx;
|
||
|
||
.right-huli-view-dis {
|
||
height: 140rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
transition: all 0.4s ease-in-out;
|
||
|
||
.right-huli-img {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
}
|
||
|
||
.right-huli-text {
|
||
width: 100%;
|
||
height: 15rpx;
|
||
text-align: center;
|
||
font-size: 35rpx;
|
||
}
|
||
|
||
.right-huli-text-dark {
|
||
width: 100%;
|
||
height: 15rpx;
|
||
text-align: center;
|
||
font-size: 35rpx;
|
||
color: #fff;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-huli-shang {
|
||
width: 30rpx;
|
||
height: 20rpx;
|
||
}
|
||
|
||
.right-huli-xia {
|
||
width: 30rpx;
|
||
height: 20rpx;
|
||
}
|
||
}
|
||
|
||
.right-container-fir-left-card-flex {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.right-container-fir-left-card-flex-sec {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
|
||
|
||
.right-container-fir-left-card-flex-sec-img {
|
||
position: absolute;
|
||
top: 42rpx;
|
||
left: -10rpx;
|
||
width: 220rpx;
|
||
height: 73rpx;
|
||
z-index: 10;
|
||
}
|
||
|
||
.right-container-fir-left-card-flex-sec-font {
|
||
position: absolute;
|
||
top: 51rpx;
|
||
left: 45rpx;
|
||
font-size: 36rpx;
|
||
color: #fff;
|
||
z-index: 10;
|
||
}
|
||
|
||
.right-container-fir-left-card-flex-sec-imgright-fir {
|
||
position: absolute;
|
||
width: 100rpx;
|
||
height: 50rpx;
|
||
top: 51rpx;
|
||
left: 650rpx;
|
||
z-index: 10;
|
||
}
|
||
|
||
.right-container-fir-left-card-flex-sec-imgright-sec {
|
||
position: absolute;
|
||
width: 100rpx;
|
||
height: 50rpx;
|
||
top: 51rpx;
|
||
left: 670rpx;
|
||
z-index: 10;
|
||
}
|
||
}
|
||
|
||
.savehundred {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.mt {
|
||
margin-top: 50rpx;
|
||
}
|
||
|
||
.progress-bar-container {
|
||
margin-top: 30rpx;
|
||
width: 60%;
|
||
height: 20rpx;
|
||
background-color: #AAB9D6;
|
||
border-radius: 15px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 100%;
|
||
/* 这里可以更改进度百分比 */
|
||
background: linear-gradient(to top, #047ADB, #0EA7DD);
|
||
border-radius: 15px 0 0 15px;
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.under-father {
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 150rpx;
|
||
|
||
.under-father-view {
|
||
margin-left: 10rpx;
|
||
margin-right: 150rpx;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.under-father-light {
|
||
position: absolute;
|
||
bottom: -20rpx;
|
||
left: -90rpx;
|
||
width: 300rpx;
|
||
height: 200rpx;
|
||
}
|
||
|
||
.under-father-img {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
margin-left: -3rpx;
|
||
}
|
||
|
||
.under-father-img-font {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.under-father-img-font-dark {
|
||
font-size: 30rpx;
|
||
background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.right-icons {
|
||
display: flex;
|
||
align-items: center;
|
||
float: right;
|
||
height: 70rpx;
|
||
margin-right: 40rpx;
|
||
|
||
.right-icons-font {
|
||
margin-left: 10rpx;
|
||
margin-right: 10rpx;
|
||
font-size: 35rpx;
|
||
margin-top: -30rpx;
|
||
}
|
||
|
||
.right-icons-font-dark {
|
||
color: #fff;
|
||
margin-left: 10rpx;
|
||
margin-right: 10rpx;
|
||
font-size: 35rpx;
|
||
margin-top: -30rpx;
|
||
}
|
||
|
||
.right-icons-img {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
margin-left: 10rpx;
|
||
margin-right: 10rpx;
|
||
margin-top: -40rpx;
|
||
|
||
}
|
||
|
||
.right-icons-img-icon {
|
||
width: 60rpx;
|
||
height: 80rpx;
|
||
margin-top: -10rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.swiper-item-flex {
|
||
|
||
.time-tra-thi-photo {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 300rpx;
|
||
flex-direction: column;
|
||
transition: all 0.4s ease-in-out;
|
||
margin-left: 20rpx;
|
||
|
||
.time-tra-thi-photo-img {
|
||
width: 330rpx;
|
||
height: 330rpx;
|
||
margin-top: -100rpx;
|
||
margin-left: -50rpx;
|
||
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
|
||
.time-tra-thi-photo-font {
|
||
font-size: 30rpx;
|
||
margin-right: 50rpx;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
|
||
.time-tra-thi-photo-font-dark {
|
||
color: #CDD6EA;
|
||
font-size: 30rpx;
|
||
margin-right: 50rpx;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.down-icons {
|
||
margin-top: 10rpx;
|
||
width: 100%;
|
||
height: 60rpx;
|
||
background-color: rgb(255, 216, 126);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.icon {
|
||
margin: 0 5rpx;
|
||
font-size: 20rpx;
|
||
padding: 5rpx 10rpx;
|
||
background-color: rgb(255, 138, 0);
|
||
color: #fff;
|
||
border-radius: 5rpx;
|
||
}
|
||
}
|
||
|
||
.right-container-big {
|
||
transform: scale(1.562);
|
||
/* 初始状态 */
|
||
transition: transform 0.5s ease;
|
||
/* 平滑过渡 */
|
||
transform-origin: left top;
|
||
background-color: rgba(220, 230, 254, 1);
|
||
border-radius: 30rpx;
|
||
}
|
||
|
||
.right-container-small {
|
||
transform: scale(1);
|
||
/* 初始状态 */
|
||
transition: transform 0.5s ease;
|
||
/* 平滑过渡 */
|
||
transform-origin: left top;
|
||
background-color: rgba(220, 230, 254, 1);
|
||
border-radius: 50rpx;
|
||
z-index: 998;
|
||
}
|
||
|
||
.right-container-right-big {
|
||
transform: scale(1.923);
|
||
margin-left: 2%;
|
||
width: 41%;
|
||
/* 初始状态 */
|
||
transition: transform 0.5s ease;
|
||
/* 平滑过渡 */
|
||
transform-origin: right bottom;
|
||
background-color: rgba(220, 230, 254, 1);
|
||
border-radius: 29rpx;
|
||
}
|
||
|
||
.right-container-right-small {
|
||
transform: scale(1);
|
||
margin-left: 2%;
|
||
width: 41%;
|
||
/* 初始状态 */
|
||
transition: transform 0.5s ease;
|
||
/* 平滑过渡 */
|
||
transform-origin: right bottom;
|
||
background-color: rgba(220, 230, 254, 1);
|
||
border-radius: 50rpx;
|
||
}
|
||
|
||
.right-container-left-big {
|
||
transform: scale(1.781);
|
||
width: 55%;
|
||
/* 初始状态 */
|
||
transition: transform 0.5s ease;
|
||
/* 平滑过渡 */
|
||
transform-origin: left bottom;
|
||
background-color: rgba(183, 200, 243, 1);
|
||
border-radius: 29rpx;
|
||
}
|
||
|
||
.right-container-left-small {
|
||
transform: scale(1);
|
||
width: 55%;
|
||
/* 初始状态 */
|
||
transition: transform 0.5s ease;
|
||
/* 平滑过渡 */
|
||
transform-origin: left bottom;
|
||
background-color: rgba(183, 200, 243, 1);
|
||
border-radius: 50rpx;
|
||
} |