|
|
@@ -242,3 +242,208 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.reminder-config-page {
|
|
|
+ box-sizing: border-box;
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #F5F9FC;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.content {
|
|
|
+ padding: 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.cfg-card {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(91, 155, 213, 0.08);
|
|
|
+}
|
|
|
+.cfg-card-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.cfg-card-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1E293B;
|
|
|
+}
|
|
|
+.cfg-card-desc {
|
|
|
+ display: block;
|
|
|
+ margin-top: 12rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #94A3B8;
|
|
|
+ line-height: 1.6;
|
|
|
+}
|
|
|
+.cfg-switch {
|
|
|
+ padding: 10rpx 28rpx;
|
|
|
+ border-radius: 999rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ background: #E2E8F0;
|
|
|
+ color: #64748B;
|
|
|
+}
|
|
|
+.cfg-switch-on {
|
|
|
+ background: linear-gradient(135deg, #5B9BD5, #8FC5E8);
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.channel-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 20rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+}
|
|
|
+.channel-item {
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16rpx 24rpx;
|
|
|
+ border: 2rpx solid #E2E8F0;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ min-width: 200rpx;
|
|
|
+}
|
|
|
+.channel-selected {
|
|
|
+ border-color: #5B9BD5;
|
|
|
+ background: #5B9BD5;
|
|
|
+}
|
|
|
+.channel-disabled {
|
|
|
+ opacity: 0.55;
|
|
|
+}
|
|
|
+.channel-check {
|
|
|
+ position: absolute;
|
|
|
+ top: -8rpx;
|
|
|
+ right: -8rpx;
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ color: #5B9BD5;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-weight: 900;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 2;
|
|
|
+ box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
|
|
|
+}
|
|
|
+.channel-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 6rpx;
|
|
|
+}
|
|
|
+.channel-name {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #1E293B;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.channel-selected .channel-name {
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+.channel-reason {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #94A3B8;
|
|
|
+}
|
|
|
+.channel-tip {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 16rpx;
|
|
|
+}
|
|
|
+.channel-tip-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #5B9BD5;
|
|
|
+}
|
|
|
+.timing-list {
|
|
|
+ display: flex;
|
|
|
+ gap: 20rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+}
|
|
|
+.timing-item {
|
|
|
+ flex: 1;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 24rpx;
|
|
|
+ border: 2rpx solid #E2E8F0;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8rpx;
|
|
|
+}
|
|
|
+.timing-active {
|
|
|
+ border-color: #5B9BD5;
|
|
|
+ background: #F0F7FF;
|
|
|
+}
|
|
|
+.timing-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1E293B;
|
|
|
+}
|
|
|
+.timing-active .timing-name {
|
|
|
+ color: #3A7CC4;
|
|
|
+}
|
|
|
+.timing-desc {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #94A3B8;
|
|
|
+}
|
|
|
+.offset-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ background: #F8FAFC;
|
|
|
+ border-radius: 16rpx;
|
|
|
+}
|
|
|
+.offset-label {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #1E293B;
|
|
|
+ margin-right: 20rpx;
|
|
|
+}
|
|
|
+.offset-input {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #1E293B;
|
|
|
+}
|
|
|
+.offset-unit {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #94A3B8;
|
|
|
+ margin-left: 12rpx;
|
|
|
+}
|
|
|
+.offset-hint {
|
|
|
+ display: block;
|
|
|
+ margin-top: 12rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #94A3B8;
|
|
|
+}
|
|
|
+.tip-card {
|
|
|
+ background: #D6EAF8;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 24rpx 30rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+}
|
|
|
+.tip-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #3A7CC4;
|
|
|
+ line-height: 1.6;
|
|
|
+}
|
|
|
+.save-area {
|
|
|
+ padding: 40rpx 30rpx;
|
|
|
+}
|
|
|
+.save-btn {
|
|
|
+ background: linear-gradient(135deg, #5B9BD5, #3A7CC4);
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ padding: 28rpx 0;
|
|
|
+ border-radius: 999rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ box-shadow: 0 6rpx 20rpx rgba(91, 155, 213, 0.3);
|
|
|
+}
|
|
|
+.save-btn:active {
|
|
|
+ opacity: 0.9;
|
|
|
+ transform: scale(0.98);
|
|
|
+}
|
|
|
+</style>
|