city_card/pages/center/center.wxss
2023-07-15 14:25:28 +08:00

729 lines
11 KiB
Plaintext

.center-top {
background-color: #ff4949;
border-bottom-left-radius: 120rpx;
border-bottom-right-radius: 120rpx;
padding: 20rpx 20rpx 120rpx 40rpx;
}
.user-info {
display: flex;
}
.user-info image {
border-radius: 50%;
height: 120rpx;
margin-right: 20rpx;
width: 120rpx;
}
.name {
color: #fff;
font-size: 34rpx;
margin: 10rpx 0;
}
.user-community {
background-color: rgba(0,0,0,.22);
border-radius: 34rpx;
color: #fff;
font-size: 28rpx;
line-height: 50rpx;
padding: 0 20rpx;
text-align: center;
}
.integral {
display: flex;
margin-top: 40rpx;
}
.integral-box {
flex: 1;
text-align: center;
}
.integral-count {
color: #fff;
font-size: 40rpx;
}
.integral-name {
color: #fff;
font-size: 28rpx;
}
.case,.contact,.help {
background-color: #fff;
border-radius: 14rpx;
box-sizing: border-box;
margin: -100rpx auto 0;
padding: 20rpx;
position: relative;
width: 710rpx;
}
.case {
padding: 25rpx 20rpx;
}
.case-title {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
padding: 0 20rpx;
}
.help-title {
padding: 0;
}
.title {
font-size: 30rpx;
font-weight: 700;
}
.more {
color: #a6a6a6;
font-size: 28rpx;
}
.case-count,.contact-people {
display: flex;
}
.case-count-box {
flex: 1;
text-align: center;
}
.case-count-box image {
height: 80rpx;
width: 80rpx;
}
.case-count-name {
color: #010101;
font-size: 30rpx;
}
.contact {
background-color: initial;
margin-top: 20rpx;
padding: 0;
}
.contact-container {
overflow-x: auto;
white-space: nowrap;
}
.contact-box {
background-color: #fff;
border-radius: 14rpx;
display: inline-block;
margin-right: 3%;
padding: 20rpx;
text-align: center;
width: 32%;
}
.contact-box:last-child {
margin-right: 0;
}
.contact-box image {
border-radius: 50%;
height: 100rpx;
width: 100rpx;
}
.contact-name {
color: #101010;
font-size: 32rpx;
margin-top: 15rpx;
}
.contact-type {
color: #a6a6a6;
font-size: 28rpx;
}
.contact-btn {
background-color: #ff4949;
border-radius: 25rpx;
color: #fff;
font-size: 28rpx;
height: 50rpx;
line-height: 50rpx;
margin: 25rpx auto 0;
padding: 0 10rpx;
width: 140rpx;
}
.help {
margin-top: 20rpx;
}
.help-type {
display: flex;
height: 60rpx;
justify-content: space-between;
line-height: 60rpx;
}
.type-name {
color: #101010;
font-size: 30rpx;
}
.type-count {
color: #9b9b9b;
font-size: 30rpx;
}
.card {
margin-top: 20rpx;
}
.user-btn {
display: flex;
justify-content: space-between;
width: 100%;
}
.btn {
background-color: #db2a2a;
border-radius: 40rpx;
border-radius: 30rpx 0 0 30rpx;
color: #fff;
height: 60rpx;
line-height: 60rpx;
margin-right: -20rpx;
margin-top: 30rpx;
padding: 0 15rpx 0 30rpx;
}
.authentication {
background-color: rgba(0,0,0,.6);
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 9999;
}
.authentication-container {
font-size: 0;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 710rpx;
}
.authentication-container image {
width: 100%;
}
.authentication-box {
background-color: #fff;
padding: 60rpx 40rpx;
}
.authentication-box input {
background-color: #f3f3f3;
box-sizing: border-box;
height: 80rpx;
margin-bottom: 20rpx;
padding: 0 30rpx;
}
.authentication-box input,.authentication-btn {
border-radius: 40rpx;
font-size: 32rpx;
width: 100%;
}
.authentication-btn {
background-color: #f55054;
color: #fff;
line-height: 80rpx;
text-align: center;
}
.authentication-img {
position: relative;
}
.close {
height: 50rpx;
position: absolute;
right: -15rpx;
top: -25rpx;
width: 50rpx!important;
}
.no-padding {
padding: 0;
}
.more image {
height: 24rpx;
margin-top: 8rpx;
vertical-align: top;
}
.UCenter-bg {
align-items: flex-start;
color: #fff;
display: flex;
flex-direction: column;
font-weight: 300;
height: 400rpx;
justify-content: center;
overflow: hidden;
position: relative;
top: 0;
width: 100%;
}
.UCenter-bg .user-info {
align-items: center;
align-self: center;
display: flex;
flex-direction: row;
height: 200rpx;
position: absolute;
width: 85%;
}
.user-info .user-icon {
border-radius: 50%;
height: 136rpx;
width: 136rpx;
}
.vip-box {
color: #fff;
left: 80rpx;
position: absolute;
top: 300rpx;
}
.vip-box .title {
font-size: 32rpx;
font-weight: 700;
}
.vip-box .msg {
font-size: 28rpx;
}
.sign-txt {
align-self: center;
color: #fff;
font-size: 28rpx;
font-weight: 700;
position: absolute;
top: 280rpx;
width: 80%;
}
.sign-txt,.user-content {
display: flex;
}
.user-content {
flex-direction: column;
justify-content: space-between;
margin: 30rpx;
}
.user-content .title {
color: #fff;
font-size: 38rpx;
font-weight: 700;
margin-bottom: 15rpx;
}
.user-content .des {
color: #fff;
font-size: 32rpx;
margin-top: 15rpx;
}
.UCenter-bg image {
height: 400px;
width: 100%;
}
.UCenter-bg .icon {
height: 48rpx;
width: 48rpx;
}
.UCenter-bg .icons {
position: absolute;
right: 15rpx;
z-index: 10;
}
.scroll-content {
display: flex;
flex-direction: column;
min-height: 300rpx;
width: 100%;
z-index: 99;
}
.UCenter-bg .gif-wave {
bottom: 0;
position: absolute;
width: 100%;
}
.UCenter-bg .gif-wave,.mapBox,map {
height: 100rpx;
left: 0;
mix-blend-mode: screen;
z-index: 99;
}
.mapBox,map {
height: 300rpx;
width: 750rpx;
}
.play-box {
align-items: center;
background-color: #fff;
border-radius: 15rpx;
box-shadow: 10px 10px 5px #cacaca;
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 20rpx;
padding: 10rpx 0rpx;
width: 80%;
}
.play-box image {
height: 60rpx;
width: 60rpx;
}
.creat-card {
align-items: center;
background: #e6b980;
border-radius: 50%;
bottom: 20rpx;
box-sizing: border-box;
flex-direction: column;
height: 140rpx;
justify-content: center;
padding: 20rpx;
position: fixed;
right: 20rpx;
width: 140rpx;
z-index: 100;
}
.order-box {
background-color: #fff;
flex-direction: row;
justify-content: space-between;
margin: 15rpx;
padding: 15rpx;
}
.order-box,.order-item {
align-items: center;
display: flex;
}
.order-item {
flex-direction: column;
justify-content: center;
width: 128rpx;
}
.order-item image {
height: 64rpx;
width: 64rpx;
}
.order-item text {
margin-top: 15rpx;
}
.purse-box {
background-color: #fff;
flex-direction: column;
justify-content: center;
margin: 0rpx 15rpx 15rpx;
padding: 15rpx;
}
.purse-box,.purse-title {
align-items: center;
display: flex;
}
.purse-title {
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.purse-title .title {
color: #000;
font-size: 32rpx;
}
.purse-title .hint {
color: #5f5f5f;
font-size: 28rpx;
}
.purse-content-box {
flex-direction: row;
justify-content: space-around;
}
.purse-content-box,.purse-content-box .item {
align-items: center;
color: #000;
display: flex;
font-size: 28rpx;
width: 100%;
}
.purse-content-box .item {
flex-direction: column;
justify-content: center;
}
.purse-content-box .item:nth-child(2) {
border-left: 1rpx solid #dfdfdf;
border-right: 1rpx solid #dfdfdf;
}
.marketing-box {
justify-content: space-around;
margin-top: 15rpx;
}
.marketing-box,.marketing-box .item {
align-items: center;
color: #000;
display: flex;
flex-direction: row;
font-size: 28rpx;
width: 100%;
}
.marketing-box .item {
background-color: #f5f5f5;
border-radius: 10rpx;
justify-content: center;
}
.marketing-box .item:active {
background-color: #fcfcfc;
color: #000;
}
.marketing-box .item:nth-child(2) {
margin-left: 15rpx;
}
.price {
color: #000;
font-size: 32rpx;
height: 64rpx;
line-height: 64rpx;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
width: 180rpx;
}
.img-48 {
height: 48rpx;
width: 48rpx;
}
.money-box {
align-items: center;
background-color: #f5f5f5;
display: flex;
flex-direction: row;
justify-content: space-around;
width: 66%;
}
.moeny-box-2 {
justify-content: center;
width: 33%;
}
.moeny-box-2,.money-box .item {
align-items: center;
display: flex;
flex-direction: column;
height: 145rpx;
}
.money-box .item {
justify-content: space-between;
padding: 15rpx;
z-index: 2;
}
.img-bg-128 {
height: 145rpx;
position: absolute;
width: 33%;
}
.item-white {
align-items: center;
color: #fff;
display: flex;
flex-direction: column;
font-size: 28rpx;
height: 145rpx;
justify-content: space-between;
padding: 15rpx;
z-index: 2;
}
.money-box .item image {
height: 64rpx;
width: 64rpx;
}
.bg-box {
align-items: center;
background-color: #f5f5f5;
border-radius: 10rpx;
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 15rpx;
width: 100%;
}
.img-64 {
height: 64rpx;
width: 64rpx;
}
.text-28 {
color: #000;
font-size: 28rpx;
margin-top: 15rpx;
}
.creat-card image {
height: 60rpx;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 80rpx;
}
.item-box {
align-items: center;
background-color: #fff;
display: flex;
flex-direction: row;
height: 128rpx;
padding: 15rpx;
width: 100%;
}
.item-img {
height: 96rpx;
width: 96rpx;
}
.item-content {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 128rpx;
padding: 15rpx;
width: 80%;
}
.group-box {
background-color: #fff;
margin: 5rpx 15rpx 0rpx;
}
.group-box:nth-child(1) {
margin: 0rpx 15rpx;
}
.ver-box {
display: flex;
flex-direction: column;
}
.ver-box-title {
color: #000;
font-size: 32rpx;
font-weight: 700;
padding: 15rpx 15rpx 0rpx;
}
.ver-box-list {
align-items: flex-start;
flex-direction: row;
justify-content: flex-start;
padding-left: 15rpx;
}
.ver-box-items,.ver-box-list {
display: flex;
}
.ver-box-items {
align-items: center;
flex-direction: column;
justify-content: center;
margin: 15rpx;
}
.ver-box-items text {
font-size: 24rpx;
margin-top: 15rpx;
max-width: 96rpx;
}
.ver-box-items:nth-child(1) {
margin: 15rpx 15rpx 15rpx 0rpx;
}
.ver-box-items image {
border-radius: 10rpx;
height: 96rpx;
width: 96rpx;
}
.other-name {
align-items: center;
display: flex;
flex-direction: row;
font-size: 14px;
height: 120rpx;
justify-content: center;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: pre-line;
}