471 lines
8.4 KiB
Plaintext
471 lines
8.4 KiB
Plaintext
page {
|
|
min-height: 100vh;
|
|
background: #fbfcff;
|
|
color: #161a26;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
.history-page {
|
|
width: 750rpx;
|
|
min-height: 100vh;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
background: linear-gradient(180deg, #ffffff 0%, #fbfcff 52%, #ffffff 100%);
|
|
}
|
|
|
|
.history-nav {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nav-back,
|
|
.nav-placeholder {
|
|
width: 58rpx;
|
|
height: 58rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.back-line {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
display: block;
|
|
border-left: 5rpx solid #11151e;
|
|
border-bottom: 5rpx solid #11151e;
|
|
transform: rotate(45deg);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 31rpx;
|
|
font-weight: 800;
|
|
color: #11141f;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.history-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 26rpx 24rpx 24rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.filter-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 18rpx;
|
|
margin-bottom: 26rpx;
|
|
}
|
|
|
|
.filter-tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
min-width: 0;
|
|
}
|
|
|
|
.filter-chip,
|
|
.failed-btn {
|
|
height: 52rpx;
|
|
border-radius: 999rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 23rpx;
|
|
font-weight: 800;
|
|
box-sizing: border-box;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.filter-chip {
|
|
min-width: 90rpx;
|
|
padding: 0 24rpx;
|
|
color: #727887;
|
|
background: #f4f6fb;
|
|
border: 1rpx solid #e8ebf4;
|
|
box-shadow: inset 0 1rpx 5rpx rgba(72, 82, 124, 0.04);
|
|
}
|
|
|
|
.filter-chip.active {
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
background: linear-gradient(135deg, #5c7cff 0%, #7148f4 100%);
|
|
box-shadow: 0 8rpx 16rpx rgba(91, 96, 255, 0.28);
|
|
}
|
|
|
|
.failed-btn {
|
|
width: 164rpx;
|
|
gap: 12rpx;
|
|
color: #3d4352;
|
|
background: #ffffff;
|
|
border: 2rpx solid #e6e8f7;
|
|
box-shadow: 0 6rpx 16rpx rgba(72, 82, 124, 0.05);
|
|
}
|
|
|
|
.filter-icon {
|
|
width: 22rpx;
|
|
height: 24rpx;
|
|
display: block;
|
|
border: 4rpx solid #676d85;
|
|
border-bottom: 0;
|
|
border-radius: 5rpx 5rpx 2rpx 2rpx;
|
|
box-sizing: border-box;
|
|
transform: skewX(-8deg);
|
|
}
|
|
|
|
.filter-icon::after {
|
|
content: "";
|
|
display: block;
|
|
width: 7rpx;
|
|
height: 14rpx;
|
|
margin: 16rpx auto 0;
|
|
background: #676d85;
|
|
border-radius: 999rpx;
|
|
}
|
|
|
|
.record-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18rpx;
|
|
}
|
|
|
|
.record-card {
|
|
min-height: 206rpx;
|
|
padding: 16rpx 18rpx;
|
|
border-radius: 17rpx;
|
|
display: flex;
|
|
gap: 24rpx;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
border: 1rpx solid #edf0fb;
|
|
box-shadow: 0 8rpx 22rpx rgba(74, 88, 148, 0.06);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.thumb {
|
|
width: 278rpx;
|
|
height: 172rpx;
|
|
border-radius: 10rpx;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: flex-start;
|
|
padding: 12rpx;
|
|
box-sizing: border-box;
|
|
background: #ece6dc;
|
|
}
|
|
|
|
.scene-layer {
|
|
display: flex;
|
|
}
|
|
|
|
.scene-bg,
|
|
.scene-subject {
|
|
pointer-events: none;
|
|
}
|
|
/*
|
|
.scene-live {
|
|
background:
|
|
linear-gradient(90deg, rgba(249, 243, 232, 0.92), rgba(240, 235, 222, 0.74)),
|
|
linear-gradient(135deg, #e9dac9 0%, #fbf8f1 45%, #d3dcc1 100%);
|
|
}
|
|
|
|
.scene-live::before,
|
|
.scene-classroom::before {
|
|
content: "";
|
|
width: 76rpx;
|
|
height: 118rpx;
|
|
margin-left: 82rpx;
|
|
margin-bottom: 24rpx;
|
|
border-radius: 36rpx 36rpx 10rpx 10rpx;
|
|
background: linear-gradient(180deg, #20202a 0 24%, #fff7ef 24% 42%, #ffffff 42% 100%);
|
|
box-shadow: 0 0 0 16rpx rgba(255, 255, 255, 0.34);
|
|
} */
|
|
|
|
.scene-product {
|
|
/* background:
|
|
radial-gradient(circle at 80% 22%, rgba(126, 151, 102, 0.32), transparent 15%),
|
|
radial-gradient(circle at 12% 28%, rgba(126, 151, 102, 0.25), transparent 16%),
|
|
linear-gradient(135deg, #e9e2d4, #fbf8ef 48%, #d8c8ad);
|
|
justify-content: center; */
|
|
}
|
|
|
|
/* .scene-product::before {
|
|
content: "";
|
|
width: 56rpx;
|
|
height: 96rpx;
|
|
margin-bottom: 32rpx;
|
|
border-radius: 11rpx 11rpx 7rpx 7rpx;
|
|
background: linear-gradient(180deg, #1e1b18 0 18%, #5b2e1d 18% 100%);
|
|
box-shadow: 0 22rpx 0 58rpx rgba(184, 151, 102, 0.22);
|
|
}
|
|
|
|
.scene-living {
|
|
background:
|
|
radial-gradient(circle at 14% 16%, rgba(121, 151, 95, 0.26), transparent 17%),
|
|
radial-gradient(circle at 88% 20%, rgba(121, 151, 95, 0.22), transparent 14%),
|
|
linear-gradient(180deg, #eee1cf 0%, #d8c1a1 100%);
|
|
justify-content: center;
|
|
}
|
|
|
|
.scene-living::before {
|
|
content: "";
|
|
width: 160rpx;
|
|
height: 58rpx;
|
|
margin-bottom: 44rpx;
|
|
border-radius: 18rpx 18rpx 10rpx 10rpx;
|
|
background: linear-gradient(180deg, #f4eadf, #bf9d7c);
|
|
box-shadow: 0 48rpx 0 -18rpx rgba(106, 76, 52, 0.28);
|
|
} */
|
|
|
|
.duration-badge {
|
|
height: 34rpx;
|
|
min-width: 68rpx;
|
|
padding: 0 10rpx;
|
|
border-radius: 999rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #ffffff;
|
|
font-size: 20rpx;
|
|
font-weight: 800;
|
|
background: rgba(0, 0, 0, 0.56);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.record-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 8rpx;
|
|
}
|
|
|
|
.record-title {
|
|
font-size: 27rpx;
|
|
line-height: 1.25;
|
|
font-weight: 900;
|
|
color: #111622;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.tag-row {
|
|
margin-top: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.tag {
|
|
height: 34rpx;
|
|
padding: 0 14rpx;
|
|
border-radius: 999rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #858b9d;
|
|
background: #f3f4f8;
|
|
font-size: 19rpx;
|
|
font-weight: 800;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.record-time {
|
|
margin-top: 18rpx;
|
|
font-size: 22rpx;
|
|
line-height: 1.2;
|
|
color: #777d92;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.status-line {
|
|
min-height: 34rpx;
|
|
margin-top: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 8rpx;
|
|
font-size: 21rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.status-line.done {
|
|
color: #32b975;
|
|
}
|
|
|
|
.status-line.done text {
|
|
height: 34rpx;
|
|
padding: 0 16rpx;
|
|
border-radius: 999rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #dcf8e9;
|
|
}
|
|
|
|
.status-line.processing {
|
|
color: #686dff;
|
|
}
|
|
|
|
.progress-dot {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
border-radius: 50%;
|
|
border: 4rpx solid currentColor;
|
|
border-top-color: rgba(104, 109, 255, 0.18);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.status-line.failed {
|
|
color: #f06d67;
|
|
}
|
|
|
|
.status-line.failed text {
|
|
height: 34rpx;
|
|
padding: 0 16rpx;
|
|
border-radius: 999rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #fff0ed;
|
|
}
|
|
|
|
.action-row {
|
|
margin-top: 14rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18rpx;
|
|
}
|
|
|
|
.secondary-btn,
|
|
.download-btn,
|
|
.more-btn,
|
|
.retry-btn {
|
|
height: 50rpx;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 21rpx;
|
|
font-weight: 900;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.secondary-btn {
|
|
flex: 1;
|
|
min-width: 128rpx;
|
|
color: #555b6e;
|
|
background: #ffffff;
|
|
border: 2rpx solid #dadcff;
|
|
}
|
|
|
|
.download-btn,
|
|
.retry-btn {
|
|
width: 158rpx;
|
|
color: #ffffff;
|
|
gap: 10rpx;
|
|
background: linear-gradient(135deg, #5a84ff, #763fee);
|
|
box-shadow: 0 8rpx 14rpx rgba(97, 86, 241, 0.24);
|
|
}
|
|
|
|
.download-icon {
|
|
width: 22rpx;
|
|
height: 24rpx;
|
|
display: block;
|
|
border-bottom: 4rpx solid currentColor;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.download-icon::before {
|
|
content: "";
|
|
display: block;
|
|
width: 4rpx;
|
|
height: 22rpx;
|
|
margin: 0 auto;
|
|
background: currentColor;
|
|
border-radius: 999rpx;
|
|
}
|
|
|
|
.download-icon::after {
|
|
content: "";
|
|
display: block;
|
|
width: 14rpx;
|
|
height: 14rpx;
|
|
margin: -12rpx auto 0;
|
|
border-right: 4rpx solid currentColor;
|
|
border-bottom: 4rpx solid currentColor;
|
|
transform: rotate(45deg);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.more-btn,
|
|
.retry-btn {
|
|
background: #ffffff;
|
|
color: #50566c;
|
|
border: 2rpx solid #e0e2ff;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.more-btn {
|
|
width: 100rpx;
|
|
gap: 7rpx;
|
|
}
|
|
|
|
.more-btn text {
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
|
|
|
|
.thumb-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.icon-placeholder {
|
|
display: block;
|
|
flex-shrink: 0;
|
|
background: none;
|
|
border: 0;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
.thumb {
|
|
position: relative;
|
|
padding: 0;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.duration-badge {
|
|
position: absolute;
|
|
left: 12rpx;
|
|
bottom: 12rpx;
|
|
}
|
|
|
|
.failed-btn.active {
|
|
color: #999999;
|
|
/* border-color: transparent; */
|
|
/* background: linear-gradient(135deg, #f06d67 0%, #ff8a62 100%); */
|
|
}
|
|
|
|
.empty-state {
|
|
min-height: 360rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #8a91a3;
|
|
font-size: 25rpx;
|
|
font-weight: 800;
|
|
}
|