459 lines
11 KiB
Plaintext
459 lines
11 KiB
Plaintext
.selectSyr .selectSyr-tip {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
padding: 14rpx 20rpx;
|
||
background: #fae7ec;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #d5131f;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.selectSyr .selectSyr-list-tip {
|
||
height: 130rpx;
|
||
box-sizing: border-box;
|
||
padding: 20rpx;
|
||
margin: 39rpx 20rpx 0 20rpx;
|
||
background: #fff1df;
|
||
border-radius: 20rpx;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #ab6a21;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.selectSyr .selectSyr-list-tip .selectSyr-list-tip-icon {
|
||
width: 30rpx;
|
||
height: 26rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
.selectSyr .selectSyr-list {
|
||
margin-top: 20rpx;
|
||
}
|
||
.selectSyr .selectSyr-list .selectSyr-item {
|
||
margin: 0rpx 20rpx 20rpx 20rpx;
|
||
padding: 20rpx;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
-webkit-column-gap: 20rpx;
|
||
column-gap: 20rpx;
|
||
row-gap: 15rpx;
|
||
}
|
||
.selectSyr .selectSyr-list .selectSyr-item .selectSyr-item-photo {
|
||
margin-top: 15rpx;
|
||
width: 126rpx;
|
||
height: 126rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.selectSyr .selectSyr-list .selectSyr-item .selectSyr-item-right {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.selectSyr .selectSyr-list .selectSyr-item .selectSyr-item-right .selectSyr-item-right-name {
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.selectSyr .selectSyr-list .selectSyr-item .selectSyr-item-right .selectSyr-item-right-name .right-name-left {
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
line-height: 42rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.selectSyr .selectSyr-list .selectSyr-item .selectSyr-item-right .selectSyr-item-right-name .right-name-right {
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #E5616A;
|
||
text-align: left;
|
||
font-style: normal;
|
||
gap: 10rpx;
|
||
padding: 6rpx 10rpx;
|
||
border-radius: 30rpx;
|
||
border: 1rpx solid #E3C0C2;
|
||
}
|
||
.selectSyr .selectSyr-list .selectSyr-item .selectSyr-item-right .selectSyr-item-right-name .right-name-right .right-name-right-img {
|
||
width: 10rpx;
|
||
height: 19rpx;
|
||
}
|
||
.selectSyr .selectSyr-list .selectSyr-item .selectSyr-item-right .selectSyr-item-right-time {
|
||
margin-bottom: 4rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
gap: 10rpx;
|
||
}
|
||
.selectSyr .selectSyr-list .selectSyr-item .selectSyr-item-bottom {
|
||
width: 100%;
|
||
padding-top: 20rpx;
|
||
border-top: 1rpx solid #f1f1f1;
|
||
}
|
||
.selectSyr .selectSyr-list .selectSyr-item .selectSyr-item-bottom .selectSyr-item-right-adress {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10rpx;
|
||
}
|
||
.selectSyr .selectSyr-list .selectSyr-item .selectSyr-item-bottom .selectSyr-item-right-adress .right-adress-icon {
|
||
width: 24rpx;
|
||
height: 28rpx;
|
||
margin-top: 2rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.selectSyr .selectSyr-list .selectSyr-item .selectSyr-item-bottom .selectSyr-item-right-adress .selectSyr-item-right-adress-text {
|
||
flex: 1;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
word-break: break-all;
|
||
text-align: left;
|
||
min-height: 33rpx;
|
||
}
|
||
.selectSyr .noSyr {
|
||
margin-top: 0;
|
||
-webkit-transform: translateY(-53rpx);
|
||
transform: translateY(-53rpx);
|
||
}
|
||
.right-time-icon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.right-adress-icon {
|
||
width: 24rpx;
|
||
height: 28rpx;
|
||
margin-top: 2rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.popup-container {
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
background: #ffffff;
|
||
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
||
}
|
||
.popup-container .header-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #f1f1f1;
|
||
}
|
||
.popup-container .header-bar .avatar-name-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.popup-container .header-bar .avatar-name-wrap .avatar {
|
||
width: 124rpx;
|
||
height: 124rpx;
|
||
border-radius: 50%;
|
||
margin-right: 15rpx;
|
||
}
|
||
.popup-container .header-bar .avatar-name-wrap .name-exp {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
.popup-container .header-bar .avatar-name-wrap .name-exp .name {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 45rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
.popup-container .header-bar .avatar-name-wrap .name-exp .exp-tag {
|
||
padding: 0 22rpx 0 15rpx;
|
||
height: 45rpx;
|
||
background: #fff0f5;
|
||
border-radius: 23rpx;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #dc424c;
|
||
line-height: 45rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
width: -webkit-fit-content;
|
||
width: fit-content;
|
||
gap: 10rpx;
|
||
}
|
||
.popup-container .header-bar .avatar-name-wrap .name-exp .exp-tag .exp-tag-icon {
|
||
width: 27rpx;
|
||
height: 24rpx;
|
||
}
|
||
.popup-container .header-bar .cancel-btn {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 30rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
line-height: 37rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.popup-container .service-info {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.popup-container .service-info .info-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 8px;
|
||
}
|
||
.popup-container .service-info .info-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.popup-container .service-info .info-item .info-text {
|
||
flex: 1;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
line-height: 35rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 10rpx;
|
||
}
|
||
.popup-container .intro-text {
|
||
padding-top: 25rpx;
|
||
margin-bottom: 100rpx;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
position: relative;
|
||
}
|
||
.popup-container .intro-text .intro-text-icon {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 72rpx;
|
||
height: 44rpx;
|
||
}
|
||
.popup-container .confirm-btn {
|
||
margin: 0 21rpx;
|
||
width: 648rpx;
|
||
height: 94rpx;
|
||
background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
|
||
border-radius: 48rpx;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #ffffff;
|
||
line-height: 42rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.popup-container .confirm-btn:active {
|
||
opacity: 0.9;
|
||
-webkit-transform: scale(0.98);
|
||
transform: scale(0.98);
|
||
}
|
||
.popup-shop-info {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.popup-shop-info .popup-shop-label {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
white-space: nowrap;
|
||
margin-right: 10rpx;
|
||
margin-top: 2rpx;
|
||
}
|
||
.popup-shop-info .popup-shop-tags {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8rpx;
|
||
}
|
||
.popup-shop-info .popup-shop-tags .popup-shop-tag {
|
||
padding: 4rpx 12rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 10rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
}
|
||
.detail-info-user__company__name {
|
||
box-sizing: border-box;
|
||
background: #FFF5F6;
|
||
border-radius: 10rpx;
|
||
border: 1rpx solid #FFD0DC;
|
||
padding-right: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 21rpx;
|
||
width: -webkit-fit-content;
|
||
width: fit-content;
|
||
margin-top: 15rpx;
|
||
margin-bottom: 5rpx;
|
||
padding: 2rpx 10rpx;
|
||
max-width: 100%;
|
||
position: relative;
|
||
}
|
||
.detail-info-user__company__name .detail-info-user__company__name__text {
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #a7abae;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 10rpx;
|
||
}
|
||
.detail-info-user__company__name .detail-info-user__company__name__line {
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #D2C7C7;
|
||
border-radius: 1rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 10rpx;
|
||
}
|
||
.detail-info-user__company__name .detail-info-user__company__name__text1 {
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #666666;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 10rpx;
|
||
white-space: nowrap;
|
||
}
|
||
.detail-info-user__company__name .detail-info-user__company__name__text2 {
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #855151;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.detail-info-user__company__name .detail-info-user__company__name__text2 .detail-info-user__company__name__text2__img {
|
||
width: 15rpx;
|
||
height: 8rpx;
|
||
margin-left: 8rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.detail-info-user__company__name .detail-info-user__company__name__card {
|
||
margin-right: 8rpx;
|
||
width: 39rpx;
|
||
height: 34rpx;
|
||
background: rgba(212, 215, 223, 0.2);
|
||
border-radius: 6rpx;
|
||
border: 1rpx solid rgba(169, 172, 179, 0.2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.detail-info-user__company__name .detail-info-user__company__name__card .detail-info-user__company__name__card__img {
|
||
width: 22rpx;
|
||
height: 21rpx;
|
||
}
|
||
.sj-pop {
|
||
position: absolute;
|
||
top: 60rpx;
|
||
right: -34rpx;
|
||
width: 358rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 1rpx 8rpx 2rpx #E6E6E6;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 16rpx;
|
||
/* 新增圆角，更美观 */
|
||
z-index: 9999;
|
||
/* 新增层级，避免被遮挡 */
|
||
max-height: 400rpx;
|
||
overflow: visible;
|
||
/* 新增：三角形箭头样式 */
|
||
/* 第二步：三角形主体层（白色，覆盖阴影层中间，只露边缘阴影） */
|
||
/* 选中状态样式 */
|
||
}
|
||
.sj-pop::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -20rpx;
|
||
/* 比主体层向下偏移1rpx（对应阴影vertical:1rpx） */
|
||
right: 58rpx;
|
||
/* 向左微调，让阴影向两侧扩散 */
|
||
width: 0;
|
||
height: 0;
|
||
/* 尺寸比主体大2rpx（对应阴影spread:2rpx），模拟扩散效果 */
|
||
border-width: 0 20rpx 18rpx 18rpx;
|
||
border-style: solid;
|
||
border-color: transparent transparent #E6E6E6 transparent;
|
||
/* 阴影颜色 */
|
||
z-index: 1;
|
||
/* 层级低于主体 */
|
||
/* 核心：模拟box-shadow的blur:8rpx模糊效果 */
|
||
-webkit-filter: blur(2rpx);
|
||
filter: blur(2rpx);
|
||
/* 适配rpx的模糊值，视觉匹配8rpx的box-shadow模糊 */
|
||
opacity: 0.8;
|
||
/* 弱化阴影，更贴近原风格 */
|
||
}
|
||
.sj-pop::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -16rpx;
|
||
right: 60rpx;
|
||
width: 0;
|
||
height: 0;
|
||
border-width: 0 18rpx 16rpx 16rpx;
|
||
border-style: solid;
|
||
border-color: transparent transparent #FFFFFF transparent;
|
||
/* 主体白色 */
|
||
z-index: 2;
|
||
/* 层级高于阴影层 */
|
||
/* 可选：给主体加极轻微阴影，增强层次感 */
|
||
-webkit-filter: drop-shadow(0rpx 1rpx 1rpx rgba(230, 230, 230, 0.3));
|
||
filter: drop-shadow(0rpx 1rpx 1rpx rgba(230, 230, 230, 0.3));
|
||
}
|
||
.sj-pop .sj-pop-item {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-bottom: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #F1F1F1;
|
||
}
|
||
.sj-pop .sj-pop-item:last-child {
|
||
margin-bottom: 0rpx;
|
||
padding-bottom: 0rpx;
|
||
border-bottom: none;
|
||
}
|
||
.sj-pop .sj-pop-item.active {
|
||
color: #E8101E;
|
||
}
|
||
.common-list {
|
||
background-color: #fafafa !important;
|
||
padding-bottom: 0rpx;
|
||
}
|
||
.common-list .list-scroll {
|
||
margin-top: 0rpx;
|
||
}
|
||
.common-list .list-container {
|
||
padding: 0rpx;
|
||
}
|
||
|