Skip to content

Commit

Permalink
fix: horse
Browse files Browse the repository at this point in the history
  • Loading branch information
zixuan1986 committed Dec 20, 2023
1 parent 05884d5 commit d2bd647
Show file tree
Hide file tree
Showing 13 changed files with 527 additions and 482 deletions.
2 changes: 1 addition & 1 deletion src/assets/css/cross.less
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.cross-wrapper {
position: relative;
width: 100%;
width: 100%;
.list {
display: flex;
justify-content: flex-start;
Expand Down
14 changes: 11 additions & 3 deletions src/assets/css/horse/card.less
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,19 @@
.r(10px);
background-color: #fff;
box-sizing: border-box;
border: 1px solid #fff;
padding: 20px;
color: #24292e;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

transition: 0.3s ease-out;
&:hover {
border: 1px solid #e86f00;
box-shadow: 0 0 10px 0 rgba(232, 111, 0, 0.4);
background-color: rgba(232, 111, 0, 0.1);
.u-more {
background-color: #fff;
}
}
.u-image {
.size(160px);
.r(10px);
Expand Down Expand Up @@ -54,10 +63,9 @@
}
.u-more {
.flex;
.r(3px);
.r(5px);
.w(100%);
font-weight: 400;
cursor: default;
align-items: center;
justify-content: center;
color: #999;
Expand Down
221 changes: 122 additions & 99 deletions src/assets/css/horse/index.less
Original file line number Diff line number Diff line change
@@ -1,116 +1,139 @@
.horse-home-wrapper {
.pt(40px);
position: relative;
.list-wrapper {

.m-horse-content {
.m-horse-broadcast__header {
.mb(10px);
}
.m-horse-broadcast .m-horse-broadcast__header .el-select input {
background-color: #f1f1f1;
}
.m-horse-broadcast .list {
padding: 10px;
.ml(-10px);
}
}
.operate-wrap {
display: flex;
justify-content: flex-end;
align-items: center;
.list-type-wrapper {
display: flex;
justify-content: flex-end;
align-items: center;
border-radius: 30px;
padding: 3px;
background-color: #fff;
.list-type-item {
font-size: 13px;
background-color: #fff;
color: #bbb;
padding: 5px 15px;
text-align: center;
cursor: pointer;
&:hover {
font-weight: bold;
color: @active-color;
}
&:first-of-type {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
&:last-of-type {
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
&.active {
font-weight: bold;
color: #fff;
border-radius: 30px;
background: @active-color;
}
.m-horse-broadcast {
overflow: hidden;
.list {
padding: 10px;
.ml(-10px);
}
}
}

.list-wrapper {
min-height: 300px;
.list-item-wrapper {
.title-header {
margin: 40px 0 20px 0;
display: flex;
justify-content: space-between;
align-items: flex-end;
.title {
font-weight: 700;
font-size: 28px;
height: 42px;
line-height: 42px;
color: #24292e;
}
a {
font-weight: 400;
font-size: 16px;
line-height: 21px;
color: #a5a5a5;
}
}
.no-cross-wrap {
.list {
display: flex;
gap: 20px;
}
}
}
.list-card-content {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
gap: 20px;
.more-btn {
width: 100%;
}
}
.list-content {
gap: 20px;
}
}
}
@media screen and (max-width: @ipad) {
.horse-home-wrapper {
.list-wrapper {
.list-card-content {
justify-content: space-evenly;
.m-list-wrapper {
.u-type {
.flex;
.mb(20px);
justify-content: space-between;
align-items: flex-end;
.u-all {
cursor: pointer;
color: #a5a5a5;
.fz(16px,21px);
}
}
}
}
@media screen and (max-width: @phone) {
.horse-home-wrapper {
.list-wrapper {
.pt(64px);
.u-title {
.mt(40px);
.fz(28px,42px);
.bold(700);
color: #24292e;
}
}
// .operate-wrap {
// display: flex;
// justify-content: flex-end;
// align-items: center;
// .list-type-wrapper {
// display: flex;
// justify-content: flex-end;
// align-items: center;
// border-radius: 30px;
// padding: 3px;
// background-color: #fff;
// .list-type-item {
// font-size: 13px;
// background-color: #fff;
// color: #bbb;
// padding: 5px 15px;
// text-align: center;
// cursor: pointer;
// &:hover {
// font-weight: bold;
// color: @active-color;
// }
// &:first-of-type {
// border-top-left-radius: 30px;
// border-bottom-left-radius: 30px;
// }
// &:last-of-type {
// border-top-right-radius: 30px;
// border-bottom-right-radius: 30px;
// }
// &.active {
// font-weight: bold;
// color: #fff;
// border-radius: 30px;
// background: @active-color;
// }
// }
// }
// }

// .list-wrapper {
// min-height: 300px;
// .list-item-wrapper {
// .title-header {
// margin: 40px 0 20px 0;
// display: flex;
// justify-content: space-between;
// align-items: flex-end;
// .title {
// font-weight: 700;
// font-size: 28px;
// height: 42px;
// line-height: 42px;
// color: #24292e;
// }
// a {
// font-weight: 400;
// font-size: 16px;
// line-height: 21px;
// color: #a5a5a5;
// }
// }
// .no-cross-wrap {
// .list {
// display: flex;
// gap: 20px;
// }
// }
// }
// .list-card-content {
// position: relative;
// display: flex;
// justify-content: flex-start;
// align-items: center;
// flex-wrap: wrap;
// gap: 20px;
// .more-btn {
// width: 100%;
// }
// }
// .list-content {
// gap: 20px;
// }
// }
}
// @media screen and (max-width: @ipad) {
// .horse-home-wrapper {
// .list-wrapper {
// .list-card-content {
// justify-content: space-evenly;
// }
// }
// }
// }
// @media screen and (max-width: @phone) {
// .horse-home-wrapper {
// .list-wrapper {
// .pt(64px);
// }
// }
// }
Loading

0 comments on commit d2bd647

Please sign in to comment.