4.6接接口和样式

This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-05-14 18:52:31 +08:00
parent 4b84dd558e
commit d201c8892f
22 changed files with 1064 additions and 690 deletions

View File

@@ -235,7 +235,6 @@
background-color: #ebebeb;
border-radius: 8px;
color: #555555;
line-height: 26px;
padding: 0 8px;
font-size: 13px;
margin-right: 10px;
@@ -288,6 +287,7 @@
.content .header .header-content .header-right .introduce .introduce-head .more {
color: #333333;
font-size: 14px;
cursor: pointer;
}
.content .header .header-content .header-right .introduce .introduce-head .more .icon {
width: 6px;
@@ -424,7 +424,7 @@
margin-right: 4px;
}
.content .operate-box-bj .operate-box .btn-box .btn-item.consult-btn {
width: 180px;
width: 138px;
background: -webkit-linear-gradient(324.8544545deg, #62b1ff -11%, #80ffff 135%);
background: -moz-linear-gradient(125.1455455deg, #62b1ff -11%, #80ffff 135%);
background: linear-gradient(125.1455455deg, #62b1ff -11%, #80ffff 135%);
@@ -452,10 +452,12 @@
}
.content .details-box .details-left .special-offer .special-bj {
width: 876px;
height: 169px;
height: 100px;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
border-radius: 10px;
}
.content .details-box .details-left .special-offer .head {
width: 125px;
@@ -675,6 +677,7 @@
.content .details-box .details-left .type-box .item .info .tags {
margin-bottom: 16px;
margin-bottom: 5px;
flex-wrap: wrap;
}
.content .details-box .details-left .type-box .item .info .tags .tags-item {
width: fit-content;
@@ -825,10 +828,17 @@
.content .details-box .details-left .details-item .traffic-box .traffic-title {
margin-bottom: 16px;
}
.content .details-box .details-left .details-item.apartment-facilities .facility-box {
padding: 30px;
.content .details-box .details-left .details-item.apartment-facilities {
transition: all 0.3s;
position: relative;
}
.content .details-box .details-left .details-item.apartment-facilities.hide {
height: 820px;
overflow: hidden;
}
.content .details-box .details-left .details-item.apartment-facilities .facility-box {
padding: 30px 30px 30px 46px;
}
.content .details-box .details-left .details-item.apartment-facilities .facility-box .item:not(:last-of-type) {
margin-bottom: 40px;
}
@@ -855,7 +865,6 @@
box-sizing: border-box;
}
.content .details-box .details-left .details-item.apartment-facilities .facility-box .item .label {
margin-bottom: 7px;
flex-wrap: wrap;
}
.content .details-box .details-left .details-item.apartment-facilities .facility-box .item .label .label-item {
@@ -873,11 +882,15 @@
height: 16px;
margin-right: 10px;
}
.content .details-box .details-left .details-item.apartment-facilities .facility-box .item .img-box {
margin-top: 7px;
}
.content .details-box .details-left .details-item.apartment-facilities .facility-box .item .img-box .img-item {
width: 110px;
height: 110px;
margin-right: 10px;
position: relative;
cursor: pointer;
}
.content .details-box .details-left .details-item.apartment-facilities .facility-box .item .img-box .img-item .icon {
width: 110px;
@@ -898,6 +911,14 @@
border-radius: 0 0 10px 10px;
padding-left: 10px;
}
.content .details-box .details-left .details-item.details-message {
transition: all 0.3s;
position: relative;
}
.content .details-box .details-left .details-item.details-message.hide {
height: 820px;
overflow: hidden;
}
.content .details-box .details-left .details-item .bottom-btn {
position: absolute;
bottom: 0;
@@ -970,8 +991,6 @@
margin-bottom: 20px;
font-size: 18px;
color: #000000;
background: -webkit-linear-gradient(350.34816653deg, #fdda55 0%, #e5d7be 50%, #cbfebf 100%);
background: -moz-linear-gradient(99.65183347deg, #fdda55 0%, #e5d7be 50%, #cbfebf 100%);
background: linear-gradient(99.65183347deg, #fdda55 0%, #e5d7be 50%, #cbfebf 100%);
border-radius: 12px;
width: 304px;
@@ -980,6 +999,13 @@
position: relative;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706);
}
.content .details-box .details-right .same-brand-title.like {
background: linear-gradient(-80.34816653deg, #d6dcf0 0%, #dae6f2 19%, #eff2cc 62%, #eff9f1 100%);
}
.content .details-box .details-right .same-brand-title.like .same-brand-icon {
width: 24px;
height: 24px;
}
.content .details-box .details-right .same-brand-title::after {
content: "";
position: absolute;
@@ -993,124 +1019,9 @@
transform: translateX(-50%);
}
.content .details-box .details-right .same-brand-title .same-brand-icon {
width: 24px;
height: 24px;
margin-right: 4px;
}
.content .details-box .details-right .same-brand-list .same-brand-item {
width: 304px;
background-color: #ffffff;
border-radius: 17px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706);
padding: 8px 0;
margin-bottom: 20px;
cursor: pointer;
}
.content .details-box .details-right .same-brand-list .same-brand-item:hover {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25686275);
}
.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-header {
width: 288px;
height: 192px;
overflow: hidden;
border-radius: 17px;
margin: 0 auto 20px;
position: relative;
}
.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-header .same-brand-img {
width: 288px;
height: 192px;
object-fit: none;
}
.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-header .apartment-name {
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
height: 32px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.7);
padding: 0 15px;
border-radius: 40px;
width: max-content;
line-height: 30px;
max-width: 100%;
}
.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-header .apartment-synopsis {
width: 100%;
height: 32px;
line-height: 32px;
background-color: rgba(0, 0, 0, 0.63921569);
border-radius: 0 0 10px 10px;
position: absolute;
bottom: 0;
font-size: 13px;
color: #d7d7d7;
padding: 0 10px;
}
.content .details-box .details-right .same-brand-list .same-brand-item .site {
margin: 0 20px 20px;
color: #555555;
font-size: 14px;
}
.content .details-box .details-right .same-brand-list .same-brand-item .site .site-icon {
width: 18px;
height: 18px;
margin-right: 4px;
}
.content .details-box .details-right .same-brand-list .same-brand-item .price-box {
font-size: 14px;
color: #555555;
margin: 0 20px 31px;
}
.content .details-box .details-right .same-brand-list .same-brand-item .price-box .price-item {
justify-content: space-between;
height: 50px;
}
.content .details-box .details-right .same-brand-list .same-brand-item .price-box .price-item:not(:last-of-type) {
border-bottom: 1px solid #ebebeb;
}
.content .details-box .details-right .same-brand-list .same-brand-item .price-box .room-name {
font-size: 15px;
color: #000000;
padding-right: 5px;
}
.content .details-box .details-right .same-brand-list .same-brand-item .price-box .unit {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
color: #000000;
font-size: 13px;
}
.content .details-box .details-right .same-brand-list .same-brand-item .price-box .quantity {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
font-size: 18px;
color: #f95d5d;
margin: 0 5px;
}
.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-quantity {
font-size: 14px;
color: #555555;
margin: 21px auto;
}
.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-quantity .quantity {
font-weight: 650;
font-size: 14px;
color: #000000;
line-height: 18px;
height: 18px;
background-color: #fddf6d;
border-radius: 9px;
padding: 0 8px;
margin: 0 8px;
}
.content .details-box .details-right .same-brand-list .same-brand-item .same-brand-quantity .same-brand-quantity-icon {
width: 7px;
height: 12px;
margin-left: 8px;
width: 22px;
height: 22px;
margin-right: 7px;
}
.add-customer-mask {
position: fixed;