.container { width: 100%; height: 100%; } .bg img { top: 0px; left: 0px; transition: all 0.5s; width: 100%; height: 100%; position: absolute; } .top { padding-left: 5px; } .box-card { position: relative; width: 100%; height: 100%; z-index: 99; } .card { width: 47%; float: left; border: 1px solid #ebeef5; background-color: #fff; color: #303133; -webkit-transition: .3s; transition: .3s; border-radius: 4px; overflow: hidden; /* margin: 4px; */ margin-bottom: 10px; padding: 10px; display: flex; box-sizing: border-box; } .between { display: flex; justify-content: space-between; width: 100%; margin: auto; } .cardBox { display: flex; align-items: center; } .card-letf { width: 46px; height: 46px; } .card-letf img { width: 100%; height: 100%; } .card-right { margin: auto 10px; padding-left: 5px; } .button { padding: 15px 10px 10px 20px; } .btn { display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .btn_primary { color: #fff; background-color: #409eff; border-color: #409eff; width: 50px; } .title { font-size: 18px; font-weight: 600; padding-bottom: 5px; }