推进活动系统最小成品闭环与游客体验

miniprogram/pages/event-prepare/event-prepare.wxss

@@ -88,6 +88,50 @@ page {
   flex-wrap: wrap;
 }
 
+.launch-progress {
+  display: grid;
+  gap: 12rpx;
+  padding: 18rpx 20rpx;
+  border-radius: 18rpx;
+  background: #f4f8fc;
+}
+
+.launch-progress__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16rpx;
+}
+
+.launch-progress__label,
+.launch-progress__value {
+  font-size: 22rpx;
+  line-height: 1.6;
+  color: #35567d;
+}
+
+.launch-progress__value {
+  font-weight: 700;
+  text-align: right;
+}
+
+.launch-progress__track {
+  position: relative;
+  height: 12rpx;
+  overflow: hidden;
+  border-radius: 999rpx;
+  background: #d7e4f1;
+}
+
+.launch-progress__fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: 999rpx;
+  background: linear-gradient(90deg, #1e5ca1 0%, #2d78cf 100%);
+}
+
 .device-list {
   display: grid;
   gap: 14rpx;
@@ -98,6 +142,106 @@ page {
   gap: 14rpx;
 }
 
+.preview-card {
+  display: grid;
+  gap: 14rpx;
+  margin-top: 8rpx;
+}
+
+.preview-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16rpx;
+}
+
+.preview-card__title {
+  font-size: 26rpx;
+  font-weight: 700;
+  color: #17345a;
+}
+
+.preview-card__status {
+  font-size: 22rpx;
+  color: #5c7288;
+  text-align: right;
+}
+
+.preview-card__variant {
+  justify-self: start;
+  padding: 8rpx 16rpx;
+  border-radius: 999rpx;
+  background: #eef4fb;
+  color: #24486f;
+  font-size: 22rpx;
+  line-height: 1.5;
+}
+
+.preview-frame {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%;
+  overflow: hidden;
+  border-radius: 22rpx;
+  background: #d9e4ef;
+  box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.35);
+}
+
+.preview-stage {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  background: #d7e1ec;
+}
+
+.preview-tile {
+  position: absolute;
+}
+
+.preview-wash {
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.34);
+  pointer-events: none;
+}
+
+.preview-control {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28rpx;
+  height: 28rpx;
+  margin-left: -14rpx;
+  margin-top: -14rpx;
+  border-radius: 999rpx;
+  border: 4rpx solid #e05f36;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 6rpx 14rpx rgba(23, 52, 90, 0.12);
+}
+
+.preview-control--start {
+  border-color: #1f6a45;
+  background: rgba(225, 245, 235, 0.96);
+}
+
+.preview-control--finish {
+  border-color: #8f1f4c;
+  background: rgba(255, 230, 239, 0.96);
+}
+
+
+.preview-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(244, 248, 252, 0.76);
+  font-size: 24rpx;
+  color: #35567d;
+}
+
 .variant-card {
   display: grid;
   gap: 8rpx;