.packet-bg{ display: inline-block; width: 281px; height: 387px; border-radius: 6px; background: url('./img/bg.png') no-repeat; box-sizing: border-box; background-size: 100%; vertical-align: middle; position: relative; overflow: hidden; padding-top: 40px; .el-icon-close{ position: absolute; top: 6px; right: 6px; color: #ffffff; font-size: 20px; cursor: pointer; } } .user-info{ text-align: center; } .avatar{ display: block; width: 60px; height: 60px; margin: 0 auto; border-radius: 4px; &.no-avatar{ line-height: 60px; text-align: center; font-size: 16px; color: #ffffff; } } .name{ color: #f9efc5; font-size: 14px; display: inline-block; margin: 10px 0 12px 0; } .text{ color: #f9efc5; font-size: 16px; padding: 0 14px; line-height: 1.4; } .open-btn{ position: absolute; left: 0; right: 0; margin: 0 auto; font-size: 36px; bottom: 70px; width: 82px; height: 82px; line-height: 82px; text-align: center; border-radius: 50%; margin: 0 auto; background-color: #e8cca0; color: #553a1b; cursor: pointer; &:hover{ background-color: #dbbd8b; } } .detail{ position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-size: 14px; color: #f9efc5; cursor: pointer; } .detail-bg{ display: inline-block; width: 281px; border-radius: 6px; background: url('./img/bg2.png') no-repeat; background-size: 100%; background-color: #ffffff; box-sizing: border-box; background-size: 100%; vertical-align: middle; position: relative; overflow: hidden; padding-top: 30px; .el-icon-close{ position: absolute; top: 6px; right: 6px; color: #ffffff; font-size: 20px; cursor: pointer; } .name{ color: #333333; margin-bottom: 6px; } .text{ color: #333333; font-size: 12px; } } .money{ text-align: center; font-size: 24px; color: #333333; margin: 14px 0; em{ font-size: 12px; color: #999999; } } .state{ font-size: 12px; color: #5a93eb; margin-bottom: 12px; } .state-num{ font-size: 12px; margin: 4px 0; color: #999999; } .packet-list{ margin: 14px 12px 0 12px; height: 148px; overflow: auto; li{ display: flex; padding: 6px 0; border-top: 1px solid #eee; .avatar{ width: 36px; height: 36px; border-radius: 2px; } .no-avatar{ line-height: 36px; } } .content{ flex: 1; margin-left: 10px; font-size: 12px; text-align: left; .top{ color: #333333; line-height: 1.4; margin-bottom: 8px; } .amount{ float: right; } } .time{ color: #999999; } } .tips{ color: #999999; text-align: center; font-size: 12px; margin: 12px 0; } .redpack-tips{ color: #f9efc5; font-size: 16px; line-height: 1.4; margin-top: 30px; padding: 0 12px; } .small{ margin-top: 40px; .avatar{ display: inline-block; width: 30px; height: 30px; margin-right: 10px; } .name{ font-size: 16px; } }