-
- 前望 2022-11-17
BEM 命名规范
｜ Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。
__双下划线：代表层级关系
-- 双中杆： 代表不同状态
按钮状态可以用 三目运算符 ? :
- 0赞 · 0采集
-
- 想成为技术大牛的程序猿 2022-02-19
在React中写js需要用到{}
- 0赞 · 0采集
-
- 想成为技术大牛的程序猿 2022-02-19
从props中获取data，从data中拿到shop、product、price、picture字段
- 0赞 · 0采集
-
- 慕慕1642157 2020-03-22
/*我的css简洁一些，效果一样*/
.orderItem{width: 100%;height: 30vw;margin: 5px auto;}
.orderItem__pic{width: 100%;height: 100%;}
.orderItem__picContainer{width: 30vw;height: 30vw;float: left;}
.orderItem__content{width: 63vw;/*background: lightblue;*/margin-top:10px;display: inline-block;float: right;}
.orderItem__product{font-weight: 700;font-size: 17px;line-height: 30px;}
.orderItem__shop{color: #777;line-height: 30px;text-overflow: ellipsis;white-space: nowrap;}
.orderItem__price{color: #777;float: left;line-height: 30px;}
.orderItem__price::before{content: '￥';}
.orderItem__btn{color: white;background: lightgray;float: right;width: 80px;height: 22px;border: 0;}
.orderItem__btn--red{background-color: #e9203d}
.orderItem__btn--grey{background-color: #999}
- 4赞 · 1采集
-
- qq_碓冰拓海_0 2019-02-28
//list item css file
.orderItem {
display: block;
padding: 11px 10px 11px 15px;
}
.orderItem__picContainer {
padding-right: 10px;
display: inline-block;
}
.orderItem__pic {
width: 90px;
height: 90px;
}
.orderItem__content {
display: inline-block;
width: calc(100% - 100px);
}
.orderItem__product {
max-width: 237px;
font-size: 17px;
font-weight: 700;
color: #111;
padding-right: 8px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.orderItem__shop {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
color: #777;
padding-top: 9px;
padding-bottom: 13px;
}
.orderItem__detail {
display: flex;
justify-content: space-between;
height: 22px;
line-height: 22px;
padding-right: 4px;
}
.orderItem__price {
font-size: 13px;
color: #777;
vertical-align: 1px;
margin-left: 10px;
}
.orderItem__price::before {
content: "\A5";
margin-right:1px;
}
.orederItem__btn {
width: 80px;
height: 22px;
text-align: center;
color: #fff;
border: 0;
font-size: 14px;
}
.orederItem__btn--red {
background-color: #e9203d;
}
.orederItem__btn--grey {
background-color: #999;
}
.orderItem__StarContainer{
margin: 3px 0;
}
.orderItem__star {
font-size: 22px;
cursor: pointer;
color: #ccc;
}
.orderItem__star--red {
color: #e9203d;
}
.orderItem__star--light {
color: #ccc;
}
- 0赞 · 4采集
-
- 慕仰3813937 2018-12-22
有源码么，没有样式
- 0赞 · 0采集
-
- fengshunsgit 2018-12-04
样式文件。。。。。。。。。。。。。。
-
截图1赞 · 11采集
