.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 100px 0; box-sizing: border-box; } page,.page { height: 100%; font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Droid Sans Fallback', 'Microsoft Yahei', sans-serif; } .page-bottom{ height: 100%; width: 725px; position: fixed; background-color: #07c160; z-index: 0; } .wc{ color: white; padding: 15px 0 15px 20px; } .page-content{ padding-top: 150px; } .page-top{ height: 100%; position: fixed; width: 725px; background-color: var(--weui-BG-1); z-index: 0; transition: All 0.4s ease; -webkit-transition: All 0.4s ease; } .c-state1{ transform: rotate(0deg) scale(1) translate(40%,0%); -webkit-transform: rotate(0deg) scale(1) translate(40%,0%); } .c-state2{ transform: rotate(0deg) scale(.8) translate(40%,0%); -webkit-transform: rotate(0deg) scale(.8) translate(40%,0%); } .item-title { margin: 10px 10px 5px; font-size: 18px; width: 100%; } .item-desc { margin: 5px 10px 0; width: 100%; color: #00000080 }