card-mini/pages/mine/otherCard/othercarddetail.wxss

715 lines
10 KiB
Plaintext

.card-container {
box-sizing: border-box;
}
.share-btn {
background: #eee;
}
.card {
width: 100%;
box-sizing: border-box;
position: relative;
overflow: hidden;
/* text-align: center; */
}
.area-box {
white-space: nowrap;
word-break: break-all;
z-index: 111;
}
.card-bgImg {
width: 100%;
}
.person {
padding: 20rpx;
}
.dynamic-container {
margin-top: -50rpx;
position: relative;
background-color: #fff;
padding: 20rpx;
border-radius: 20rpx;
}
.dynamic-title image {
width: 30rpx;
height: 30rpx;
vertical-align: middle;
margin-top: -4rpx;
}
.catelog-title {
display: flex;
position: relative;
align-items: center;
padding: 15rpx;
justify-content: space-between;
}
.catelog-title .action {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
}
.title {
font-size: 30rpx;
position: relative;
color: #000;
display: inline-block;
}
.title text {
margin-left: 20rpx;
}
.column-box {
display: flex;
flex-direction: column;
background-color: #fff;
width: 100%;
}
.column-box-row {
display: flex;
flex-direction: row;
align-items: center;
background-color: #fff;
width: 100%;
padding: 15rpx;
}
.column-item {
margin: 0rpx;
padding: 7.5rpx 15rpx 7.5rpx 15rpx;
}
.column-item:nth-child(1) {
padding: 15rpx 15rpx 7.5rpx 15rpx;
}
.column-item:last-child {
padding: 7.5rpx 15rpx 15rpx 15rpx;
}
.img-item {
width: 100%;
border-radius: 5rpx;
}
.img-item:nth-child(1) {
padding: 7.5rpx 0rpx 7.5rpx 0rpx;
}
.img-item:last-child {
padding: 7.5rpx 0rpx 7.5rpx 0rpx;
}
.column-content {
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: 10rpx;
width: 100%;
box-shadow: 0px 2px 2px #f0f0f0;
z-index: 2;
}
.intro-title image {
width: 28rpx;
height: 30rpx;
vertical-align: middle;
margin-top: -4px;
}
.serve-title image {
width: 28rpx;
height: 30rpx;
vertical-align: middle;
margin-top: -4px;
}
.person-content {
padding: 20rpx;
border-radius: 20rpx;
background: #fff;
margin-top: -30rpx;
font-size: 30rpx;
color: #000;
line-height: 40rpx;
word-break: break-all;
line-height: 40rpx;
letter-spacing: 2rpx;
position: relative;
}
.company-title {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ddd;
}
.company-title image {
width: 140rpx;
height: 140rpx;
}
.company-name {
width: 520rpx;
height: 140rpx;
display: flex;
align-items: center;
font-size: 34rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.company-content {
background: #fff;
border-radius: 20rpx;
padding: 20rpx;
margin-top: -30rpx;
position: relative;
}
.company-content image {
width: 100%;
height: 300rpx;
border-radius: 20rpx;
}
.company .person-content {
margin-top: 0;
}
.dynamic-title {
width: 710rpx;
margin: 0 auto;
display: block;
}
.dynamic-box {
margin-bottom: 20rpx;
background: #fff;
border-radius: 20rpx;
overflow: hidden;
position: relative;
height: 400rpx;
}
.dynamic-box image {
width: 100%;
height: 400rpx;
}
.dynamic-text {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
line-height: 60rpx;
color: #fff;
padding: 0 10rpx;
font-size: 30rpx;
}
.person-info {
display: flex;
justify-content: space-between;
padding-bottom: 20rpx;
border-bottom: 1px solid #EEE;
}
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
overflow: hidden;
}
.avatar image {
width: 100%;
height: 100%;
}
.person-name {
width: 530rpx;
}
.name {
font-size: 32rpx;
margin: 15rpx 0 10rpx;
color: #000;
}
.time {
color: #b2b2b2;
}
.dynamic-content {
margin: 20rpx 0;
}
.dynamic-img {
position: relative;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.dynamic-img image {
width: 32%;
margin-right: 2%;
height: 160rpx;
margin-bottom: 10rpx;
}
.dynamic-img image:nth-child(3n) {
margin-right: 0;
}
.dynamic-img-text {
position: absolute;
left: 0;
right: 0;
bottom: 3rpx;
padding: 0 20rpx;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 32rpx;
line-height: 70rpx;
}
.dynamic-good {
margin: 10rpx 0;
display: flex;
justify-content: space-between;
}
.good-count {
color: #333;
font-size: 28rpx;
}
.good-btn image {
width: 40rpx;
height: 40rpx;
vertical-align: top;
}
.dynamic-reply {
background: #eee;
padding: 15rpx;
margin-top: 15rpx;
}
.reply {
font-size: 32rpx;
color: #000;
margin-bottom: 5rpx;
}
.reply-name {
font-weight: bold;
display: inline;
}
.dynamic-reply-input {
margin-top: 10rpx;
}
.dynamic-reply-input input {
width: 100%;
height: 60rpx;
border-bottom: 1px solid #eee;
}
.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;
}
.creat-card image {
width: 80rpx;
height: 60rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.share-save {
text-align: center;
display: flex;
justify-content: space-between;
}
.share-btn {
border: 1px solid #E6B980;
background: none;
color: #1296db;
font-weight: normal;
}
.save-btn {
border: 1px solid #1296db;
background: #1296db;
color: #fff;
font-weight: normal;
}
.bottom-btn {
margin-top: 20rpx;
padding: 0 20rpx;
width: 100%;
white-space: nowrap;
}
.phone-box .icon {
width: 30rpx;
height: 30rpx;
vertical-align: top;
}
.wechate-box .icon {
width: 35rpx;
height: 30rpx;
vertical-align: top;
}
.email-box .icon {
width: 30rpx;
height: 30rpx;
vertical-align: top;
}
.bottom-btn-box {
display: inline-block;
min-width: 32%;
line-height: 30rpx;
padding: 20rpx;
box-sizing: border-box;
border: 1px solid #DDD;
border-radius: 10rpx;
margin-right: 10rpx;
}
.bottom-text {
margin-top: 10rpx;
}
.top-box {
width: 100%;
}
.good {
display: flex;
justify-content: space-between;
width: 100%;
background-color: #fff;
padding: 15rpx;
}
.good-avatar,
.good-click {
line-height: 45rpx;
color: #333;
}
.good-avatar {
font-size: 0;
}
.good-click {
display: flex;
}
.view-count {
border-right: 1px solid #808080;
color: #808080;
display: flex;
flex-direction: row;
font-size: 36rpx;
align-items: center;
justify-content: center;
}
.view-count-no {
color: #808080;
display: flex;
flex-direction: row;
align-items: center;
font-size: 36rpx;
margin-left: 15rpx;
}
.good-avatar image {
width: 100%;
height: 100%;
border-radius: 50%;
}
.good-click image {
width: 38rpx;
height: 38rpx;
}
.view-count image {
width: 32rpx;
height: 32rpx;
}
.view-count-no image {
width: 32rpx;
height: 32rpx;
}
.movie-item {
height: 280rpx;
width: 100%;
padding-bottom: 0px;
}
.avatar-list {
width: 45rpx;
height: 45rpx;
margin-left: -15rpx;
vertical-align: top;
display: inline-block;
border-radius: 50%;
border: 2px solid #fff;
position: relative;
}
.avatar-list:first-child {
margin-left: 0;
}
.mid {
display: flex;
width: 100%;
background: white;
position: relative;
}
.mid-box {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
align-items: left;
justify-content: left;
border: 2rpx solid #EAC390;
border-radius: 10rpx;
background-color: white;
font-weight: normal;
padding: 15rpx;
}
.mid-box:nth-child(1) {
background: white;
}
.mid-box:nth-child(2) {
margin-left: 15rpx;
}
.mid-box:last-child {
border: none;
border-radius: 10rpx;
margin-left: 15rpx;
}
.mid-box image {
width: 48rpx;
height: 48rpx;
}
.mid-box-text {
font-size: 28rpx;
color: #000;
text-align: left;
font-weight: bold;
}
.mid-box-text-white {
font-size: 28rpx;
color: #FFF;
text-align: left;
font-weight: bold;
}
.mid-btn {
position: relative;
margin-top: 15rpx;
display: flex;
width: 100%;
border: 1rpx solid rgb(235, 235, 235);
border-radius: 15rpx;
background: #fff;
box-shadow: 10rpx 10rpx 20rpx 20rpx #e4e4e426;
flex-wrap: nowrap;
flex-direction: column;
justify-content: center;
}
.mid-btn-box {
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
.mid-btn-box:nth-child(1) {
padding: 15rpx 15rpx 7.5rpx 15rpx
}
.mid-btn-box:nth-child(2) {
padding: 7.5rpx 15rpx 7.5rpx 15rpx
}
.mid-btn-box:nth-child(3) {
padding: 7.5rpx 15rpx 7.5rpx 15rpx
}
.mid-btn-box:nth-child(4) {
padding: 7.5rpx 15rpx 15rpx 15rpx
}
.mid-btn-title {
display: flex;
flex-direction: row;
justify-content: flex-start;
flex: 3;
align-items: center;
}
.mid-btn-title .image {
width: 48rpx;
height: 48rpx;
}
.movie-box {
display: flex;
width: 100%;
border-radius: 10rpx;
height: 350rpx;
flex-direction: row;
align-items: center;
justify-content: center;
}
.movie-box image {
border-radius: 10rpx;
width: 100%;
height: 350rpx;
}
.mid-btn-title text {
margin-left: 15rpx;
font-size: 28rpx;
color: #333333;
}
.mid-btn-box image {
width: 80rpx;
height: 80rpx;
}
.mid-btn-text {
width: 200rpx;
}
.text-top {
line-height: 45rpx;
font-size: 30rpx;
color: #000;
}
.text-bottom {
font-size: 26rpx;
color: #898989;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bar-code {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 999;
}
.bar-code-tr {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0, 0, 0, 0);
z-index: 999;
}
.bar-code .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 96%;
background: #fff;
border-radius: 10rpx;
padding: 20rpx;
min-width: 60%;
min-height: 45%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.code-title {
font-size: 32rpx;
font-weight: bold;
color: #000;
}
.code-txt {
font-size: 32rpx;
color: #000;
}
.bar-code image {
width: 300rpx;
height: 300rpx;
}