card-mini/pages/mine/index/index.wxss
2021-09-06 09:18:46 +08:00

452 lines
6.8 KiB
Plaintext

/* pages/mine/index/index.wxss */
.UCenter-bg {
height: 400rpx;
display: flex;
justify-content: center;
overflow: hidden;
position: relative;
flex-direction: column;
align-items: flex-start;
color: #fff;
font-weight: 300;
top: 0;
/* text-shadow: 0 0 3px rgba(0, 0, 0, 0.3); */
width: 100%;
}
.UCenter-bg .user-info {
width: 85%;
height: 200rpx;
position: absolute;
align-self: center;
display: flex;
flex-direction: row;
align-items: center;
}
.user-info .user-icon {
width: 136rpx;
height: 136rpx;
border-radius: 50%;
}
.vip-box {
position: absolute;
top: 300rpx;
left: 80rpx;
color: #fff;
}
.vip-box .title {
font-size: 32rpx;
font-weight: bold;
}
.vip-box .msg {
font-size: 28rpx;
}
.sign-txt {
position: absolute;
top: 280rpx;
width: 80%;
align-self: center;
display: flex;
color: white;
font-size: 28rpx;
font-weight: bold;
}
.user-content {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 30rpx;
}
.user-content .title {
font-size: 38rpx;
color: #fff;
font-weight: bold;
margin-bottom: 15rpx;
}
.user-content .des {
font-size: 32rpx;
margin-top: 15rpx;
color: #fff;
}
.UCenter-bg image {
width: 100%;
height: 400px;
}
.UCenter-bg .icon {
width: 48rpx;
height: 48rpx;
}
.UCenter-bg .icons {
z-index: 10;
position: absolute;
right: 15rpx;
}
.scroll-content {
width: 100%;
display: flex;
flex-direction: column;
z-index: 99;
min-height: 300rpx;
}
.UCenter-bg .gif-wave {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
z-index: 99;
mix-blend-mode: screen;
height: 100rpx;
}
map,
.mapBox {
left: 0;
z-index: 99;
mix-blend-mode: screen;
height: 100rpx;
}
map,
.mapBox {
width: 750rpx;
height: 300rpx;
}
.play-box {
display: flex;
margin-left: 20rpx;
flex-direction: column;
width: 80%;
background-color: white;
border-radius: 15rpx;
align-items: center;
justify-content: center;
padding: 10rpx 0rpx;
box-shadow: 10px 10px 5px #cacaca;
}
.play-box image {
width: 60rpx;
height: 60rpx;
}
.creat-card {
position: fixed;
right: 20rpx;
bottom: 20rpx;
padding: 20rpx;
background: #E6B980;
border-radius: 50%;
box-sizing: border-box;
align-items: center;
justify-content: center;
flex-direction: column;
width: 140rpx;
height: 140rpx;
z-index: 100;
}
.order-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 15rpx;
padding: 15rpx;
background-color: #fff;
}
.order-item {
width: 128rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.order-item image {
width: 64rpx;
height: 64rpx;
}
.order-item text {
margin-top: 15rpx;
}
.purse-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #fff;
margin: 0rpx 15rpx 15rpx 15rpx;
padding: 15rpx;
}
.purse-title {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.purse-title .title {
font-size: 32rpx;
color: #000;
}
.purse-title .hint {
font-size: 28rpx;
color: #5f5f5f;
}
.purse-content-box {
display: flex;
flex-direction: row;
width: 100%;
font-size: 28rpx;
color: #000;
align-items: center;
justify-content: space-around;
}
.purse-content-box .item {
display: flex;
flex-direction: column;
width: 100%;
font-size: 28rpx;
color: #000;
align-items: center;
justify-content: center;
}
.purse-content-box .item:nth-child(2) {
border-left: 1rpx solid #dfdfdf;
border-right: 1rpx solid #dfdfdf;
}
.marketing-box {
display: flex;
flex-direction: row;
width: 100%;
font-size: 28rpx;
color: #000;
align-items: center;
justify-content: space-around;
margin-top: 15rpx;
}
.marketing-box .item {
display: flex;
flex-direction: row;
width: 100%;
font-size: 28rpx;
color: #000;
align-items: center;
justify-content: center;
background-color: #f5f5f5;
border-radius: 10rpx;
}
.marketing-box .item:active {
color: #000;
background-color: #fcfcfc;
}
.marketing-box .item:nth-child(2) {
margin-left: 15rpx;
}
.price {
font-size: 32rpx;
color: #000;
line-height: 64rpx;
height: 64rpx;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 180rpx;
}
.img-48 {
width: 48rpx;
height: 48rpx;
}
.money-box {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 66%;
background-color: #f5f5f5;
}
.moeny-box-2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 33%;
height: 145rpx;
}
.money-box .item {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 145rpx;
z-index: 2;
padding: 15rpx;
}
.img-bg-128 {
position: absolute;
height: 145rpx;
width: 33%;
}
.item-white {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 145rpx;
padding: 15rpx;
z-index: 2;
color: #fff;
font-size: 28rpx;
}
.money-box .item image {
width: 64rpx;
height: 64rpx;
}
.bg-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
width: 100%;
background-color: #f5f5f5;
border-radius: 10rpx;
margin-top: 15rpx;
}
.img-64 {
width: 64rpx;
height: 64rpx;
}
.text-28 {
font-size: 28rpx;
color: #000;
margin-top: 15rpx;
}
.creat-card image {
width: 80rpx;
height: 60rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.item-box {
display: flex;
flex-direction: row;
width: 100%;
align-items: center;
height: 128rpx;
background-color: #ffffff;
padding: 15rpx;
}
.item-img {
width: 96rpx;
height: 96rpx;
}
.item-content {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 128rpx;
padding: 15rpx;
width: 80%;
}
.group-box {
margin: 5rpx 15rpx 0rpx 15rpx;
background-color: #ffffff;
}
.group-box:nth-child(1) {
margin: 0rpx 15rpx 0rpx 15rpx;
}
.ver-box {
display: flex;
flex-direction: column;
}
.ver-box-title {
font-size: 32rpx;
color: black;
font-weight: bold;
padding: 15rpx 15rpx 0rpx 15rpx;
}
.ver-box-list {
display: flex;
flex-direction: row;
padding-left: 15rpx;
align-items: flex-start;
justify-content: flex-start;
}
.ver-box-items {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 15rpx 15rpx 15rpx 15rpx;
}
.ver-box-items text {
margin-top: 15rpx;
font-size: 24rpx;
max-width: 96rpx;
}
.ver-box-items:nth-child(1) {
margin: 15rpx 15rpx 15rpx 0rpx;
}
.ver-box-items image {
/* align-self: flex-start; */
height: 96rpx;
width: 96rpx;
border-radius: 10rpx;
}