/* .container .toggle-camera-wrapper { top: 136rpx !important; } */ .container .human-indicate-wrapper { top: 136rpx !important; } .countt{ font-weight: bold; background-color: rgba(135, 150, 183,0.2); font-size: 42rpx; padding: 6rpx 30rpx; position: fixed; left: 32rpx; z-index: 9999; top: 100rpx; display: flex; flex-direction: column; min-width: 100rpx; align-items: center; justify-content: center; border-radius: 20rpx; color: #6cdabd; /* text-align: center; */ } .container .action-panel { width: 92%; margin: 0 4%; box-sizing: border-box; padding: 60rpx 40rpx 60rpx 40rpx; padding-top: 0; box-sizing: border-box; position: fixed; left: 0; bottom: 0; z-index: 9998; background-color: rgba(255, 255, 255, 0.2); border-radius: 20rpx 20rpx 0 0; transition: all 0.8s ease; } .container .action-panel .sport { padding-bottom: 6px; color: #fda900; font-size: 32px; text-align: center; } .container .action-panel .counter { display: flex; font-size: 17px; color: #FFFFFF; } .container .action-panel .counter text { padding-left: 5px; color: #fda900; font-size: 24px; } .container .action-panel .counter .counts { flex: 1; margin-right: 8px; } .container .action-panel .counter .times { flex: 1; } .container .action-panel .actions { margin: 12px 0 12px 0; text-align: center; } .container .action-panel .actions .button { width: 160px; border-radius: 25px; } @media screen and (orientation: landscape) { .container .toggle-camera-wrapper { top: 16px !important; } .container .human-indicate-wrapper { top: 16px !important; } .container .action-panel { padding-top: 80px; width: auto; height: 100vh; top: 0; left: auto; right: 0; } .container .action-panel .counter { margin-top: 24px; min-width: 25vw; display: block; line-height: 180%; } .container .action-panel .actions .button { margin-top: 40px; width: 146px; height: 46px; font-size: 17px; line-height: 46px; } } .title { /* font-weight: bold; */ font-size: 32rpx; display: flex; align-items: center; justify-content: center; margin-top: 60rpx; /* margin-top: 66rpx; */ /* margin-bottom: 8rpx; */ } .title-before { height: 24rpx; border-radius: 6rpx; width: 6rpx; margin-right: 20rpx; background: linear-gradient(180.00deg, rgb(38, 165, 246), rgba(38, 165, 246, 0) 100%) } .count { font-size: 96rpx; font-weight: bold; text-align: center; } .stat { display: flex; justify-content: space-between; align-items: center; margin-top: 20rpx; } .stat-item { font-weight: bold; display: flex; align-items: center; border-radius: 10px; background: rgb(244, 246, 248); padding-left: 30rpx; font-size: 28rpx; height: 72rpx; width: 160rpx; } .unit { font-size: 16rpx; } .stat-img { width: 40rpx; height: 40rpx; margin-right: 10rpx; } .iconn{ position: fixed; top: 32px; left: 32px; } .button-list { display: flex; align-items: center; height: 150rpx; margin-top: 40rpx; } .control-button { width: 120rpx !important; height: 120rpx !important; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; overflow: hidden; /* 隐藏溢出的水波纹 */ transition: background-color 0.8s ease; padding: 0 !important; } .go-b { background: linear-gradient(rgba(97, 217, 102,.6), rgba(62, 161, 66,.6)); box-shadow: 0px 11px 19px 0px #cdf7cf; } .back-b { width: 150rpx !important; height: 150rpx !important; background: linear-gradient(rgba(255, 212, 85,.6), rgba(238, 168, .6)); box-shadow: 0px 11px 19px 0px #ffe4a1; } .stop-b { background: linear-gradient(rgba(244, 152, 145,.6), rgba(222, 64, 51,.6)); box-shadow: 0px 11px 19px 0px rgb(255, 209, 205); } .stop-b-v{ width: 18px; height: 18px; border-radius: 2px; background-color: #fff; } .ripple { position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.6); transform: translate(-50%, -50%); animation: rippleEffect 0.6s linear; pointer-events: none; /* 不影响按钮的点击事件 */ } @keyframes rippleEffect { 0% { width: 0; height: 0; opacity: 1; } 100% { width: 200px; height: 200px; opacity: 0; } } .timeout{ width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); display: flex; align-items: center; color: #fff; justify-content: center; position: fixed; left: 0; bottom: 0; z-index: 9998; font-size: 130rpx; font-weight: bold; } @keyframes suoduan { 0% { height: 500rpx; } 100% { height: 200px; } } .homeWork{ display: flex; align-items: center; justify-content: space-between; margin-top: 20rpx; } .homework-item{ display: flex; flex-direction: column; align-items: center; } .detail{ color: #FA5151; } .finish{ color: #28B489; }