732 lines
13 KiB
Plaintext
732 lines
13 KiB
Plaintext
/* 首页 */
|
|
page {
|
|
background: #fff;
|
|
}
|
|
|
|
.indexTab {
|
|
position: fixed;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
z-index: 999;
|
|
padding: 0 40rpx;
|
|
top: 80rpx;
|
|
box-sizing: border-box;
|
|
background-color: #07081d;
|
|
}
|
|
|
|
.indexTab-lable {
|
|
text-align: center;
|
|
flex: 3;
|
|
color: #fff;
|
|
position: relative;
|
|
}
|
|
|
|
.indexTab-lable.active {
|
|
background-image: -webkit-linear-gradient(left, #e4dab7, #d9b672);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
font-weight: 600;
|
|
font-size: 38rpx;
|
|
}
|
|
|
|
/* 轮播图 */
|
|
.indexBanner {
|
|
height: 360rpx;
|
|
position: relative;
|
|
padding-top: 20rpx;
|
|
}
|
|
|
|
.indexBanner::after {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 240rpx;
|
|
width: 100%;
|
|
content: '';
|
|
background: #07081d;
|
|
border-radius: 0 0 200rpx 200rpx;
|
|
}
|
|
|
|
.banner {
|
|
position: relative;
|
|
padding-top: 48%;
|
|
width: calc(100% - 100rpx);
|
|
background: white;
|
|
margin: 0 50rpx;
|
|
border-radius: 30rpx;
|
|
overflow: hidden;
|
|
z-index: 99;
|
|
}
|
|
|
|
.banner-swiper {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.banner-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* 指示点 */
|
|
.dots {
|
|
margin: 30rpx 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.dots view {
|
|
width: 14rpx;
|
|
height: 14rpx;
|
|
margin: 0 6rpx;
|
|
border-radius: 50%;
|
|
background-color: #c5c5c5;
|
|
}
|
|
|
|
.dots .active {
|
|
width: 24rpx;
|
|
border-radius: 40rpx;
|
|
background-color: #f46851;
|
|
}
|
|
|
|
/* 提示 */
|
|
.indexNews {
|
|
background: #dddddd;
|
|
padding: 25rpx 40rpx;
|
|
display: flex;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.indexNews image {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
margin: 4rpx 20rpx 0 0;
|
|
}
|
|
|
|
/* 权益列表 */
|
|
.cardArr {
|
|
padding: 50rpx 0 30rpx;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cardArr-top {
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
flex-wrap: wrap;
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.indexCard {
|
|
width: 33.33%;
|
|
text-align: center;
|
|
position: relative;
|
|
flex: 0 0 33.3333%;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.indexCard-img {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.activity-tips {
|
|
position: absolute;
|
|
top: -10rpx;
|
|
right: 10rpx;
|
|
z-index: 9;
|
|
background-image: -webkit-linear-gradient(left, #ff0000, #ff0000);
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
padding: 0 18rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
border-radius: 20rpx;
|
|
animation: zy 2.5s .15s linear infinite;
|
|
-moz-animation: zy 2.5s .15s linear infinite;
|
|
-webkit-animation: zy 2.5s .15s linear infinite;
|
|
-o-animation: zy 2.5s .15s linear infinite;
|
|
}
|
|
|
|
.indexCard-tips {
|
|
background-image: -webkit-linear-gradient(left, #ef354c, #ef001e);
|
|
color: #fff300;
|
|
height: 34rpx;
|
|
line-height: 32rpx;
|
|
padding: 0 10rpx;
|
|
right: 25rpx;
|
|
}
|
|
|
|
@keyframes zy {
|
|
10% {
|
|
transform: rotate(15deg);
|
|
}
|
|
|
|
20% {
|
|
transform: rotate(-10deg);
|
|
}
|
|
|
|
30% {
|
|
transform: rotate(5deg);
|
|
}
|
|
|
|
40% {
|
|
transform: rotate(-5deg);
|
|
}
|
|
|
|
50%,
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
.indexCard-title {
|
|
font-weight: 600;
|
|
margin: 5rpx 20rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.indexCard-remark {
|
|
font-size: 26rpx;
|
|
color: #8a8a8a;
|
|
}
|
|
|
|
/* 新增活动权利列表样式 */
|
|
.activity-remark {
|
|
background-color: #000000;
|
|
display: inline-block;
|
|
border-radius: 40rpx;
|
|
height: 38rpx;
|
|
line-height: 38rpx;
|
|
padding: 0 10rpx;
|
|
}
|
|
|
|
.activity-remark text {
|
|
display: block;
|
|
background-image: -webkit-linear-gradient(left, #e4dab7, #d9b672);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
|
|
/* 定位 */
|
|
|
|
.locationPicker {
|
|
background: #000;
|
|
color: #fff;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
position: fixed;
|
|
width: 100%;
|
|
z-index: 1009;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.locationPicker-icon {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
float: left;
|
|
vertical-align: middle;
|
|
margin: 22rpx 10rpx 0 20rpx;
|
|
}
|
|
|
|
.locationPicker-region-icon {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
.cityCont {
|
|
width: 60%;
|
|
display: flex;
|
|
}
|
|
|
|
.cityCont view {
|
|
max-width: calc(100% - 50rpx);
|
|
}
|
|
|
|
.cityCont image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
/* 权益提示 */
|
|
.legalTips {
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
padding: 80rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.legalTips image {
|
|
width: 240rpx;
|
|
height: 180rpx;
|
|
display: block;
|
|
margin: 0 auto 40rpx;
|
|
}
|
|
|
|
/* 滚动 */
|
|
/*首页跑马灯效果*/
|
|
@keyframes around {
|
|
from {
|
|
margin-left: 60rpx;
|
|
}
|
|
|
|
to {
|
|
/* var接受传入的变量 */
|
|
margin-left: var(--marqueeWidth--);
|
|
}
|
|
}
|
|
|
|
.marquee_container {
|
|
width: calc(100% - 40rpx);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.marquee_container:hover {
|
|
/* 不起作用 */
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
.marquee_text {
|
|
font-size: 28rpx;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.marquee_text.active {
|
|
animation-name: around;
|
|
animation-duration: 20s;
|
|
/*过渡时间*/
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
/* 福利日 */
|
|
/*
|
|
.Welfare {
|
|
background-color: #000;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
} */
|
|
|
|
.WelfareTitle {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-bottom: 30rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
padding-top: 50rpx;
|
|
color: #f1cb8c;
|
|
}
|
|
|
|
.WelfareTitle text {
|
|
font-size: 64rpx;
|
|
}
|
|
|
|
.WelfareCont {
|
|
background-color: #000;
|
|
border: #fcf9da 2rpx solid;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 30rpx 30rpx 10rpx 10rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.WelfareTop {
|
|
position: absolute;
|
|
top: -20rpx;
|
|
left: calc(50% - 225rpx);
|
|
width: 450rpx;
|
|
height: 70rpx;
|
|
}
|
|
|
|
.WelfareTop .welfare-title,
|
|
.WelfareTop .welfare_stra {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.WelfareTop .welfare_stra {
|
|
height: 130%;
|
|
z-index: 2;
|
|
animation: star .3s ease-in infinite;
|
|
}
|
|
|
|
@keyframes star {
|
|
10% {
|
|
opacity: 0;
|
|
}
|
|
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.WelfareList {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-top: 35%;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.WelfareList:last-child {
|
|
margin: 0;
|
|
}
|
|
|
|
.WelfareList-img {
|
|
border-radius: 15rpx;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.WelfareList-back {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 45rpx 40rpx;
|
|
box-sizing: border-box;
|
|
z-index: 8;
|
|
display: flex;
|
|
}
|
|
|
|
.WelfareList-left {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
margin-top: 6%;
|
|
}
|
|
|
|
.WelfareList-center {
|
|
font-size: 24rpx;
|
|
margin-left: 30rpx;
|
|
width: calc(100% - 100rpx);
|
|
}
|
|
|
|
.WelfareList-price {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.WelfareList-center-cont {
|
|
padding-right: 100rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.WelfareList-center-all {
|
|
margin: 10rpx 0;
|
|
color: #633c1b;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.WelfareList-right {
|
|
background: linear-gradient(to bottom, #e8b86d, #9d743e);
|
|
-webkit-background-size: 200% 100%;
|
|
-webkit-animation: masked-animation 2s infinite linear;
|
|
color: #fff;
|
|
height: 58rpx;
|
|
line-height: 58rpx;
|
|
font-size: 28rpx;
|
|
width: 120rpx;
|
|
text-align: center;
|
|
border-radius: 40rpx;
|
|
margin-top: 7%;
|
|
position: absolute;
|
|
right: 40rpx;
|
|
top: 60rpx;
|
|
}
|
|
@-webkit-keyframes masked-animation {
|
|
0% { background-position: 0 0;}
|
|
100% { background-position: -100% 0;}
|
|
}
|
|
|
|
.WelfareList-right.active {
|
|
background: linear-gradient(to bottom, #969696, #969696);
|
|
}
|
|
|
|
.WelfareList-img.active,
|
|
.WelfareList-left.active {
|
|
-webkit-filter: grayscale(100%);
|
|
-moz-filter: grayscale(100%);
|
|
-ms-filter: grayscale(100%);
|
|
-o-filter: grayscale(100%);
|
|
filter: grayscale(100%);
|
|
filter: gray;
|
|
}
|
|
|
|
.WelfareList-center-time.active,
|
|
.WelfareList-center-all.active {
|
|
color: #929292;
|
|
}
|
|
|
|
.WelfareList-center-time.active::after {
|
|
background-color: #cccccc;
|
|
}
|
|
|
|
.WelfareList-right text {
|
|
display: inline-block;
|
|
animation:mymove 2s infinite;
|
|
transform: scale(.9);
|
|
}
|
|
|
|
@keyframes mymove{
|
|
0%{
|
|
transform: scale(.9);
|
|
}
|
|
25%{
|
|
transform: scale(1);
|
|
}
|
|
50%{
|
|
transform: scale(.9);
|
|
}
|
|
75%{
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.WelfareList-right.active text {
|
|
-webkit-animation: mymove 0s infinite linear;
|
|
}
|
|
|
|
.WelfareList-center-time {
|
|
position: relative;
|
|
padding-top: 25rpx;
|
|
color: #a37d4d;
|
|
}
|
|
|
|
.WelfareList-center-time::after {
|
|
position: absolute;
|
|
content: '';
|
|
left: 0;
|
|
top: 0;
|
|
width: 60rpx;
|
|
height: 6rpx;
|
|
border-radius: 20rpx;
|
|
background-color: #d68f0d;
|
|
}
|
|
|
|
.WelfareList-center-time text,
|
|
.WelfareList-center-all text {
|
|
padding-right: 20rpx;
|
|
}
|
|
|
|
/* 光 */
|
|
.light {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
left: -100%;
|
|
top: 0;
|
|
width: 40px;
|
|
height: 100%;
|
|
background: rgba(255, 255, 255, 0);
|
|
transform: skewx(25deg);
|
|
-webkit-transition: all .5s ease-in;
|
|
-moz-transition: all .5s ease-in;
|
|
-o-transition: all .5s ease-in;
|
|
transition: all .5s ease-in;
|
|
animation-name: example;
|
|
animation-duration: 3.5s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
|
|
@keyframes example {
|
|
0% {
|
|
left: -100%;
|
|
background: rgba(255, 255, 255, .4);
|
|
}
|
|
|
|
50% {
|
|
left: -50%;
|
|
background: rgba(255, 255, 255, .7);
|
|
}
|
|
|
|
100% {
|
|
left: 100%;
|
|
background: rgba(255, 255, 255, 0);
|
|
}
|
|
}
|
|
|
|
/* 订阅消息 */
|
|
.subscribe {
|
|
color: #89663f;
|
|
width: 100%;
|
|
padding: 0 100rpx;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
margin-top: 50rpx;
|
|
display: flex;
|
|
/* -webkit-animation: Tada 3s both infinite;
|
|
-moz-animation: Tada 3s both infinite;
|
|
-ms-animation: Tada 3s both infinite;
|
|
animation: Tada 3s both infinite; */
|
|
}
|
|
|
|
.subscribe-icon,
|
|
.subscribe-cont {
|
|
height: 80rpx;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.subscribe-icon {
|
|
width: 150rpx;
|
|
padding-left: 30rpx;
|
|
box-sizing: border-box;
|
|
background: linear-gradient(to right, #f3c988, #f9e0b8);
|
|
border-radius: 40rpx 0 0 40rpx;
|
|
}
|
|
|
|
.subscribe-icon::after{
|
|
position: absolute;
|
|
content: '';
|
|
right: -50rpx;
|
|
top: 0;
|
|
width: 0;
|
|
height: 0;
|
|
border-bottom: 80rpx solid #f9e0b8;
|
|
border-right: 50rpx solid transparent;
|
|
z-index: 9;
|
|
}
|
|
|
|
.subscribe-cont {
|
|
width: calc(100% - 150rpx);
|
|
background: linear-gradient(to right, #f3c988, #f9e0b8);
|
|
border-radius: 0 40rpx 40rpx 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.subscribe-cont text {
|
|
display: inline-block;
|
|
-webkit-animation: subscribeCont 1s linear infinite;
|
|
animation: subscribeCont 1s linear infinite;
|
|
}
|
|
|
|
@keyframes subscribeCont {
|
|
25% {transform: scale(.98);}
|
|
50%, 100% {transform: scale(1);}
|
|
75% {transform: scale(1.05);}
|
|
}
|
|
|
|
.subscribe-icon image {
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
margin-top: 14rpx;
|
|
}
|
|
|
|
@keyframes Tada {
|
|
0% {
|
|
transform: scale(1);
|
|
transform: scale(1)
|
|
}
|
|
|
|
70%,73%{
|
|
transform: scale(1) rotate(-3deg);
|
|
transform: scale(1) rotate(-3deg)
|
|
}
|
|
|
|
77%,83%,90%,97% {
|
|
transform: scale(1) rotate(3deg);
|
|
transform: scale(1) rotate(3deg)
|
|
}
|
|
|
|
80%,87%,93%{
|
|
transform: scale(1) rotate(-3deg);
|
|
transform: scale(1) rotate(-3deg)
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1) rotate(0);
|
|
transform: scale(1) rotate(0)
|
|
}
|
|
}
|
|
|
|
.subscribe-icon-one {
|
|
-webkit-animation: bounce-right 1s linear infinite;
|
|
animation: bounce-right 1s linear infinite;
|
|
}
|
|
|
|
@keyframes bounce-right {
|
|
25% {transform: translateX(-3px);}
|
|
50%, 100% {transform: translateX(0);}
|
|
75% {transform: translateX(3px);}
|
|
}
|
|
|
|
.subscribe-icon-two {
|
|
-webkit-animation: bounce-two 1s linear infinite;
|
|
animation: bounce-two 1s linear infinite;
|
|
}
|
|
|
|
@keyframes bounce-two {
|
|
25% {opacity: 0;transform: translateX(-3px);}
|
|
75% {opacity: 1;transform: translateX(3px);}
|
|
}
|
|
|
|
|
|
/* 漂浮弹出层 */
|
|
.indexFloat {
|
|
position: fixed;
|
|
height: 70%;
|
|
width: 110rpx;
|
|
right: 20rpx;
|
|
bottom: 0;
|
|
z-index: 99;
|
|
}
|
|
|
|
.indexFloat-movable {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 280rpx;
|
|
z-index: 99;
|
|
}
|
|
|
|
.indexFloat-img image {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.indexFloat-animation {
|
|
animation: shake 3s linear infinite;
|
|
}
|
|
|
|
@keyframes shake {
|
|
70%, 80% {
|
|
transform: rotate(7deg);
|
|
}
|
|
75% {
|
|
transform: rotate(-7deg);
|
|
}
|
|
|
|
65%,
|
|
85% {
|
|
transform: rotate(0);
|
|
}
|
|
} |