.page.HuiQuanYi { width: 100%; height: 100%; .Banner { width: 100%; padding-bottom: 41%; position: relative; overflow: hidden; > view { width: 100%; position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; background: #ccc; } } .NewsList { padding: 20px 0; background: #fff; margin-top: 20px; > .flex-h { padding: 0 20px; align-items: center; margin-top: 10px; > .flex-item { > image { height: 48px; } } > .More { font-size: 26px; color: #999; > text { font-size: 26px; } } } > .List { position: relative; overflow: hidden; margin-top: 40px; margin-bottom: 30px; > .flex-h { align-items: center; &:nth-child(1) { > .Num { > text { width: 40px; text-align: center; line-height: 40px; display: inline-block; border-radius: 100%; background: #fe4e45; color: #fff; box-shadow: 0 10px 20px 5px rgba(254, 78, 69, 0.1); } } } &:nth-child(2) { > .Num { > text { display: inline-block; width: 40px; text-align: center; line-height: 40px; display: inline-block; border-radius: 100%; background: #fe7e48; color: #fff; box-shadow: 0 10px 20px 5px rgba(254, 126, 72, 0.1); } } } &:nth-child(3) { > .Num { > text { width: 40px; text-align: center; line-height: 40px; display: inline-block; border-radius: 100%; background: #ffa93a; color: #fff; box-shadow: 0 10px 20px 5px rgba(255, 169, 58, 0.1); } } } > .Num { width: 56px; margin-left: 10px; text-align: center; font-size: 0; height: 40px; overflow: visible; > text { font-size: 24px; color: #999; } } > .flex-item { padding: 20px 0; margin-left: 10px; border-bottom: 2px solid #f5f5f5; font-size: 0; white-space: nowrap; margin-top: 10px; > text { display: inline-block; vertical-align: middle; max-width: 100%; font-size: 28px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; &:nth-child(1) { max-width: 88%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } &:nth-child(2) { color: #999; width: 10%; margin-left: 2%; } } } } } } }