极客观点
项目管理
HarmonyOS
这个old价格 我想用一个线划掉,但是只划了数字 不知道为什么没有连那个符号一起划掉。。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
padding: 0 22px;
justify-content: center;
align-items: center;
}
.ticket-wrapper {
background: white;
border-radius: 6px;
border: 1px solid #E1E1E1;
width: 100%;
box-shadow: 0 0 0 1px #E1E1E1;
}
.header {
background: darkgrey;
height: 46px;
line-height: 46px;
border-radius: 6px 6px 0 0;
border-bottom: 1px solid #E1E1E1;
text-align: center;
}
.header .text {
font-size: 15px;
color: black;
opacity: .7;
font-weight: bold;
}
.footer {
border-radius: 0 0 6px 6px;
background: darkgrey;
height: 46px;
line-height: 46px;
border-top: 1px solid #E1E1E1;
text-align: center;
}
.footer .text {
color: #F8AC09;
font-size: 16px;
font-weight: bold;
}
.main ul li {
display: flex;
box-sizing: border-box;
padding: 0 16px;
height: 60px;
justify-content: space-between;
border-bottom: 1px solid #E1E1E1;
}
.main ul li .choice {
flex: auto;
display: flex;
align-items: center;
}
.main ul li .choice .icon {
width: 22px;
height: 22px;
border-radius: 50%;
margin-right: 17px;
border: 1px solid #C6C7C7;
}
.main ul li .choice .desc-wrapper {
/*这里的宽度如果是100%?*/
}
.main ul li .choice .desc-wrapper .desc {
font-size: 15px;
font-weight: bold;
margin-bottom: 10px;
}
.main ul li .choice .desc-wrapper .info {
font-size: 12px;
color: gainsboro;
}
.main ul li .price {
flex: none;
display: flex;
flex-direction: column;
font-size: 0;
justify-content: center;
}
.main ul li .price .now {
color: #F8AC09;
font-weight: bold;
font-size: 0;
margin-bottom: 8px;
}
.main ul li .price .now .flag {
font-size: 12px;
padding-right: 4px;
}
.main ul li .price .now .num {
font-size: 18px;
}
.main ul li .price .old {
font-size: 0;
color: darkgrey;
text-decoration: line-through;
}
.main ul li .price .old .flag {
font-size: 10px;
padding-right: 4px;
}
.main ul li .price .old .num {
font-size: 14px;
}
.script {
width: 0;
height: 0;
border-right: 10px solid transparent;
border-top: 15px solid #c59c53;
}
</style>
</head>
<body>
<div class="script"></div>
<div class="container">
<div class="ticket-wrapper">
<div class="header">
<span class="text">请选择票券</span>
</div>
<div class="main">
<ul>
<li>
<div class="choice">
<span class="icon"></span>
<div class="desc-wrapper">
<div class="desc">XX的票</div>
<div class="info">还剩10张,没人限购1张</div>
</div>
</div>
<div class="price">
<span class="now"><span class="flag">¥</span><span class="num">21</span></span>
<span class="old"><span class="flag">¥</span><span class="num">211</span></span>
</div>
</li>
</ul>
</div>
<div class="footer">
<span class="text">确定</span>
</div>
</div>
</div>
</body>
</html>
看一下
.flag的样式中是不是有text-decoration，覆盖了.old的样式。Update
是字体的问题，放大了看，中间是有一条横线的，由于￥和数字的文本高度不同，所以这两条线没有对齐。
有一个比较笨的解决办法，在
的人民币符号后面加个空格
CSS部分修改
效果：
