Skip to content

Commit

Permalink
fix: house
Browse files Browse the repository at this point in the history
  • Loading branch information
@TiAmo-code
TiAmo-code committed Jul 4, 2024
1 parent bbbecf7 commit 9679b46
Show file tree
Hide file tree
Showing 6 changed files with 869 additions and 284 deletions.
382 changes: 382 additions & 0 deletions src/assets/css/exterior/detail.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,382 @@
.m-guise_detail {
.mt(40px);
.pr();
.flex();
align-self: self-start;
.m-info__scroll {
max-height: calc(100vh - @header-height - 120px);
}
.m-info {
.ml(30px);
.r(30px);
.pr();
box-sizing: border-box;
transition: 0.3s all;
flex-grow: 1;
padding: 40px;
.m-info__top {
.flex();
.pr();
.z(1);
.m-body {
.x();
.w(22px);
.mr(2px);
.u-item {
.dbi();
.color(#958b71);
.fz(12px);
.mt(4px);
.pr();
.z(1);
.pointer();
padding: 4px 2px;
border: 1px solid #afa089;
&.act {
.color(white);
&::before {
content: "";
.db();
.pa();
.lt(2px);
.rb(2px);
.z(-1);
background: #958b71;
}
}
}
}
.m-preview {
.w(158px);
.h(248px);
padding: 5px;
box-sizing: border-box;
background-image: url(../../img/exterior/exterior_border.svg);
background-size: 100% 100%;
.u-img {
.h(100%);
background-size: cover;
}
}
.m-detail {
.ml(30px);
.u-name {
.po();
.color(#886542);
.bold();
.fz(32px);
}
.m-info__list {
.m-list__ul {
.mt(10px);
.flex();
gap: 10px;
.m-list__li {
.fz(14px,26px);
.flex();
background-color: white;
.u-title {
padding: 0 4px;
background-color: #886542;
.color(white);
}
.u-value {
padding: 0 10px;
}
}
&:last-child {
.mt(40px);
}
}
}
.m-goods {
.mt(10px);
.flex();
gap: 10px;
.m-item {
border: 1px solid #886542;
padding: 3px;
.u-img {
.size(48px);
}
}
.u-gap {
margin: 0 10px;
border-left: 1px solid #886542;
.color(#886542);
.pl(20px);
.flex();
.item(o);
}
}
}
}
.m-info__bottom {
.w(100%);
.auto(x);
.pr();
.z(1);
max-width: 798px;
.m-info__title {
.flex();
.item(y);
.mt(60px);
.u-title {
.pr();
.z(1);
.pr();
.color(#958b71);
margin: 0 10px;
padding: 9px 19px;
border: 1px solid #958b71;
&::before {
content: "";
.db();
.pa();
.lt(4px);
.rb(4px);
.z(-1);
background: #fffbf3;
}
}
.u-line {
flex-grow: 1;
.h(2px);
&:first-child {
background: linear-gradient(to left, rgba(149, 139, 113, 0.6) 0%, transparent 100%);
}
&:last-child {
background: linear-gradient(to right, rgba(149, 139, 113, 0.6) 0%, transparent 100%);
}
}
}
.u-exterior {
.db();
.w(100%);
.mt(28px);
}
.m-trend-chart {
.mt(40px);
}
}
&::after {
content: "";
.db();
.pa();
.lt(0);
.z(0);
.size(100%,100%);
.r(30px);
}
&.info-bg1 {
&::after {
background-image: url(../../img/exterior/bg/bg1.png);
background-size: cover;
background-position: center;
}
}
&.info-bg2 {
&::after {
background-image: url(../../img/exterior/bg/bg2.png);
background-size: 80%;
background-position: right 80px;
background-repeat: no-repeat;
opacity: 0.2;
}
}
&.info-bg3 {
&::after {
background-image: url(../../img/exterior/bg/bg3.png);
opacity: 0.2;
}
}
}
.m-action {
.w(40px);
.pa();
// .rt(40px,calc(@header-height + 40px));
.rt(0);
.u-action {
.size(40px);
.flex();
.flex(o);
.pointer();
.r(50%);
.pr();
.m-img__pr {
.pr();
.size(20px);
}
.u-img {
.size(20px);
.db();
transition: 0.3s all;
&.u-img__hover {
.pa();
.lt(50%);
transform: translateX(-50%) translateY(-50%);
opacity: 0;
}
}
.u-img__fill {
.pa();
.lt(50%);
transform: translateX(-50%) translateY(-50%);
padding: 10px;
.r(50%);
}
&.u-close {
}
&.u-like {
background: #ff4365;
box-shadow: 0px 0px 10px 0px rgba(255, 67, 101, 0.3);
flex-wrap: wrap;
.u-text {
.color(white);
.fz(11px,1);
.bold();
.w(100%);
.x();
}
.u-img__fill {
background: #ff4365;
opacity: 0;
}
&:hover {
.u-img__fill {
opacity: 1;
}
}
}
&.u-bag {
background: #da8029;
box-shadow: 0px 0px 10px 0px rgba(218, 128, 41, 0.3);
}
&.u-wbl {
background: #ffdb5a;
box-shadow: 0px 0px 10px 0px rgba(255, 219, 90, 0.4);
}
&.u-unfold {
background: #2aa7af;
box-shadow: 0px 0px 10px 0px rgba(42, 167, 175, 0.3);
}
&:not(:first-child) {
.mt(10px);
}
&:hover {
.u-img.u-img__hover {
opacity: 1;
}
}
}
.m-quick {
.mt(30px);
}
.m-change_bg {
.mt(125px);
padding: 0 10px;
.u-change__btn {
.size(20px);
.flex();
.flex(o);
.pointer();
.r(50%);
.pr();
box-sizing: border-box;
background-color: white;
border: 1px solid #886542;
transition: 0.3s all;
.u-img {
.size(14px);
}
&::after {
content: "";
.db();
.pa();
.r(50%);
.size(28px);
border: 1px solid transparent;
transition: 0.3s all;
}
&:hover,
&.act {
background-color: #886542;
.u-img {
filter: brightness(0) invert(1);
}
&::after {
border-color: #886542;
}
}
&:not(:first-child) {
.mt(20px);
}
}
}
.m-change_color {
.mt(200px);
padding: 0 10px;
.u-change__btn {
.size(20px);
.r(50%);
.pr();
.pointer();
&::after {
content: "";
.db();
.pa();
.r(50%);
.size(28px);
.lt(-5px);
border: 1px solid transparent;
transition: 0.3s all;
}
&:not(:first-child) {
.mt(20px);
}
&:hover,
&.act {
&::after {
border-color: #886542;
}
}
}
}
}
.color1 {
background: linear-gradient(180deg, #fe9991 -122.92%, #ffd5bc 67%);
&.m-info,
&.u-close {
background: var(
--Pink,
linear-gradient(0deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.46) 100%),
linear-gradient(180deg, #fe9991 -122.92%, #ffd5bc 67%)
);
box-shadow: 0px 0px 10px 0px #ffe3d7;
}
}
.color2 {
background: linear-gradient(180deg, #2aa7af -17.5%, #ffd5bc 182.5%);
&.m-info,
&.u-close {
background: var(
--sky,
linear-gradient(0deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.46) 100%),
linear-gradient(148deg, #2aa7af -38.94%, #ffeadd 63.95%)
);
box-shadow: 0px 0px 10px 0px #cde4e2;
}
}
.color3 {
background: linear-gradient(171deg, #ffdb5a -4.09%, #ffd5bc 95.63%);
&.m-info,
&.u-close {
background: var(
--orange,
linear-gradient(0deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.46) 100%),
linear-gradient(168deg, #da8029 -19.42%, #da8029 -19.41%, #ffe7c3 64.17%)
);
box-shadow: 0px 0px 10px 0px #f5d5b3;
}
}
}
Loading

0 comments on commit 9679b46

Please sign in to comment.