cfc/cfc-frontend/pages/activity/create.vue

<template>
  <view class="container">
    <view class="form-card">
      <!-- 活动标题 -->
      <view class="form-item">
        <text class="form-label">活动标题 *</text>
        <input class="form-input" v-model="form.title" placeholder="请输入活动标题" maxlength="50" />
      </view>

      <!-- 活动类型 -->
      <view class="form-item">
        <text class="form-label">活动类型 *</text>
        <picker class="form-picker" :value="typeIdx" :range="typeOptions" range-key="label" @change="onTypeChange">
          <text class="picker-text">{{ form.activityType ? typeLabel(form.activityType) : '请选择类型' }}</text>
        </picker>
      </view>

      <!-- 开始时间 -->
      <view class="form-item">
        <text class="form-label">开始时间 *</text>
        <picker class="form-picker" mode="date" :value="datePart" @change="onStartDateChange">
          <text class="picker-text">{{ datePart || '选择日期' }}</text>
        </picker>
        <picker class="form-picker" mode="time" :value="timePart" @change="onStartTimeChange" style="margin-top: 16rpx;">
          <text class="picker-text">{{ timePart || '选择时间' }}</text>
        </picker>
      </view>

      <!-- 结束时间 -->
      <view class="form-item">
        <text class="form-label">结束时间</text>
        <picker class="form-picker" mode="date" :value="endDatePart" @change="onEndDateChange">
          <text class="picker-text">{{ endDatePart || '选择日期（可选）' }}</text>
        </picker>
        <picker class="form-picker" mode="time" :value="endTimePart" @change="onEndTimeChange" style="margin-top: 16rpx;">
          <text class="picker-text">{{ endTimePart || '选择时间（可选）' }}</text>
        </picker>
      </view>

      <!-- 报名截止时间 -->
      <view class="form-item">
        <text class="form-label">报名截止时间</text>
        <picker class="form-picker" mode="date" :value="regDatePart" @change="onRegDateChange">
          <text class="picker-text">{{ regDatePart || '选择日期（不填=活动开始前）' }}</text>
        </picker>
        <picker class="form-picker" mode="time" :value="regTimePart" @change="onRegTimeChange" style="margin-top: 16rpx;">
          <text class="picker-text">{{ regTimePart || '选择时间' }}</text>
        </picker>
      </view>

      <!-- 活动地点 -->
      <view class="form-item">
        <text class="form-label">活动地点</text>
        <input class="form-input" v-model="form.location" placeholder="请输入活动地点" maxlength="100" />
      </view>

      <!-- 人数 + 价格 -->
      <view class="form-item-row">
        <view class="form-item half">
          <text class="form-label">最大人数</text>
          <input class="form-input" type="number" v-model="maxParticipantsStr" placeholder="0=不限" />
        </view>
        <view class="form-item half">
          <text class="form-label">孩子费用（元）</text>
          <input class="form-input" type="digit" v-model="childFeeYuan" placeholder="0=免费" />
        </view>
      </view>

      <view class="form-item-row">
        <view class="form-item half">
          <text class="form-label">孩子会员费（元）</text>
          <input class="form-input" type="digit" v-model="childMemberFeeYuan" placeholder="0=免费" />
        </view>
        <view class="form-item half">
          <text class="form-label">家长费用（元）</text>
          <input class="form-input" type="digit" v-model="parentFeeYuan" placeholder="0=免费" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">家长会员费（元）</text>
        <input class="form-input" type="digit" v-model="parentMemberFeeYuan" placeholder="0=免费" />
      </view>

      <!-- 主办方 -->
      <view class="form-item">
        <text class="form-label">主办方</text>
        <input class="form-input" v-model="form.vendorName" placeholder="请输入主办方名称（可选）" maxlength="50" />
      </view>

      <!-- 封面图片 -->
      <view class="form-item">
        <text class="form-label">封面图片</text>
        <view class="cover-upload" @click="chooseImage">
          <image v-if="form.coverImage" class="preview-img" :src="getCoverUrl(form.coverImage)" mode="aspectFill" @click.stop  lazy-load />
          <view v-else class="upload-placeholder">
            <text class="upload-icon">📷</text>
            <text class="upload-text">点击上传封面图</text>
          </view>
        </view>
        <view class="cover-actions" v-if="form.coverImage">
          <text class="cover-action" @click="chooseImage">重新选择</text>
          <text class="cover-action-danger" @click="removeCover">移除</text>
        </view>
      </view>

      <!-- 活动描述 -->
      <view class="form-item">
        <text class="form-label">活动描述</text>
        <textarea class="form-textarea" v-model="form.description" placeholder="请输入活动详细介绍" maxlength="500"
          auto-height />
      </view>

      <!-- 操作按钮 -->
      <view class="form-actions">
        <view class="btn-save" @click="handleSave">
          <text>保存为草稿</text>
        </view>
        <view class="btn-publish" @click="handlePublish">
          <text>{{ isAdmin ? '保存并发布' : '保存并提交审核' }}</text>
        </view>
      </view>
    </view>

    <!-- 海报模板选择 + 预览 -->
    <view class="form-card" v-if="posterTemplates.length > 0">
      <view class="form-title">活动海报模板（可选）</view>
      <view class="poster-tpl-list">
        <view
          v-for="tpl in posterTemplates"
          :key="tpl.id"
          class="poster-tpl-card"
          :class="{ 'poster-tpl-active': form.posterTemplateId === tpl.id }"
          @click="selectPosterTemplate(tpl)"
        >
          <view class="tpl-colors">
            <view class="tpl-dot tpl-main" :style="{ background: tpl.mainColor || BrandColors.primary }"></view>
            <view class="tpl-dot tpl-dark" :style="{ background: tpl.darkColor || BrandColors.orangeDeep }"></view>
            <view class="tpl-dot tpl-light" :style="{ background: tpl.lightColor || paleColor }"></view>
          </view>
          <text class="tpl-name">{{ tpl.name }}</text>
        </view>
      </view>
      <view class="poster-preview-row" v-if="form.posterTemplateId">
        <text class="poster-preview-hint">已选择海报模板，点击「预览」查看效果</text>
        <view class="btn-preview" @click="openPosterPreview">预览</view>
      </view>
    </view>

    <!-- 海报预览弹层 -->
    <content-share-poster
      v-if="showPosterPreview"
      :show="showPosterPreview"
      :title="form.title || '活动海报'"
      :cover-image="form.coverImage"
      :dimension-code="form.dimensionCode"
      :template="previewTemplateKey"
      :templates="posterTemplates"
      :poster-qr-code="''"
      @close="showPosterPreview = false"
      @update:template="previewTemplateKey = $event"
      @update:bgColor="previewBgColor = $event"
    ></content-share-poster>

    <view class="loading" v-if="loading">
      <view class="loading-spinner"></view>
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
import { BrandColors } from '../../utils/brand-colors.js'
import { adminCreateActivity, adminUpdateActivity, adminPublishActivity, submitActivityForReview, getActivityDetail, getPosterTemplates } from '../../utils/api.js'
import config from '../../config.js'
import { parseDate } from '../../utils/format.js'
import { hasActivityManageRole } from '../../utils/activity-role.js'
import { pickImage } from '../../utils/image-picker.js'
import ContentSharePoster from '../../components/ContentSharePoster.vue'

var BASE_URL = config.api('')

export default {
  components: { ContentSharePoster },
  computed: {
    // 后台活动管理员可直接发布；服务商账号只能保存后提交审核
    isAdmin: function() {
      return hasActivityManageRole()
    }
  },
  data() {
    return {
      paleColor: BrandColors.primaryPale,
      isNew: true,
      activityId: null,
      loading: false,
      memberId: '',
      form: {
        title: '',
        description: '',
        coverImage: '',
        dimensionCode: '',
        activityType: '',
        status: 'draft',
        startTime: null,
        endTime: null,
        registrationDeadline: null,
        location: '',
        maxParticipants: 0,
        childFee: 0,
        childMemberFee: 0,
        parentFee: 0,
        parentMemberFee: 0,
        visibility: 'public',
        requireRegistration: 1,
        requireCheckinReview: 0,
        checkinPoints: 0
      },
      childFeeYuan: '0',
      childMemberFeeYuan: '0',
      parentFeeYuan: '0',
      parentMemberFeeYuan: '0',
      maxParticipantsStr: '0',
      datePart: '',
      timePart: '',
      endDatePart: '',
      endTimePart: '',
      regDatePart: '',
      regTimePart: '',
      typeIdx: 0,
      typeOptions: [
        { key: 'offline', label: '线下活动' },
        { key: 'online', label: '线上活动' },
        { key: 'campaign', label: '营销活动' }
      ],
      // 海报模板
      posterTemplates: [],
      selectedPosterTemplate: null,
      showPosterPreview: false,
      previewTemplateKey: 'gradient',
      previewBgColor: ''
    }
  },
  onLoad(options) {
    if (options.id) {
      this.activityId = parseInt(options.id)
      this.isNew = false
      uni.setNavigationBarTitle({ title: '编辑活动' })
      this.loadDetail()
    } else {
      uni.setNavigationBarTitle({ title: '创建活动' })
    }
    // 加载海报模板列表（未登录也会返回空列表，不阻塞创建）
    this.loadPosterTemplates()
  },
  methods: {
    loadDetail() {
      var self = this
      self.loading = true
      getActivityDetail(self.activityId).then(function(res) {
        self.loading = false
        if (res && res.code === 200 && res.data) {
          var d = res.data
          self.form.title = d.title || ''
          self.form.description = d.description || ''
          self.form.coverImage = d.coverImage || ''
          self.form.vendorName = d.vendorName || ''
          self.form.posterTemplateId = d.posterTemplateId || null
          self.form.dimensionCode = d.dimensionCode || ''
          self.form.activityType = d.activityType || ''
          self.form.location = d.location || ''
          self.form.maxParticipants = d.maxParticipants || 0
          self.form.childFee = d.childFee || 0
          self.form.childMemberFee = d.childMemberFee || 0
          self.form.parentFee = d.parentFee || 0
          self.form.parentMemberFee = d.parentMemberFee || 0
          self.form.status = d.status || 'draft'
          self.form.visibility = d.visibility || 'public'
          self.maxParticipantsStr = String(self.form.maxParticipants)
          self.childFeeYuan = self.form.childFee ? (self.form.childFee / 100).toString() : '0'
          self.childMemberFeeYuan = self.form.childMemberFee ? (self.form.childMemberFee / 100).toString() : '0'
          self.parentFeeYuan = self.form.parentFee ? (self.form.parentFee / 100).toString() : '0'
          self.parentMemberFeeYuan = self.form.parentMemberFee ? (self.form.parentMemberFee / 100).toString() : '0'
          if (d.startTime) {
            var sd = parseDate(d.startTime)
            if (sd) {
              self.datePart = self.fmtDate(sd)
              self.timePart = self.fmtTime(sd)
              self.form.startTime = sd.toISOString()
            }
          }
          if (d.endTime) {
            var ed = parseDate(d.endTime)
            if (ed) {
              self.endDatePart = self.fmtDate(ed)
              self.endTimePart = self.fmtTime(ed)
              self.form.endTime = ed.toISOString()
            }
          }
          if (d.registrationDeadline) {
            var rd = parseDate(d.registrationDeadline)
            if (rd) {
              self.regDatePart = self.fmtDate(rd)
              self.regTimePart = self.fmtTime(rd)
              self.form.registrationDeadline = rd.toISOString()
            }
          }
          // sync type picker
          for (var j = 0; j < self.typeOptions.length; j++) {
            if (self.typeOptions[j].key === self.form.activityType) self.typeIdx = j
          }
        }
      }).catch(function() { self.loading = false })
    },
    onTypeChange(e) {
      this.typeIdx = e.detail.value
      this.form.activityType = this.typeOptions[this.typeIdx].key
    },
    onStartDateChange(e) {
      this.datePart = e.detail.value
      this.syncStartTime()
    },
    onStartTimeChange(e) {
      this.timePart = e.detail.value
      this.syncStartTime()
    },
    onEndDateChange(e) {
      this.endDatePart = e.detail.value
      this.syncEndTime()
    },
    onEndTimeChange(e) {
      this.endTimePart = e.detail.value
      this.syncEndTime()
    },
    onRegDateChange(e) {
      this.regDatePart = e.detail.value
      this.syncRegDeadline()
    },
    onRegTimeChange(e) {
      this.regTimePart = e.detail.value
      this.syncRegDeadline()
    },
    syncStartTime() {
      if (this.datePart && this.timePart) {
        this.form.startTime = this.datePart + 'T' + this.timePart + ':00'
      }
    },
    syncEndTime() {
      if (this.endDatePart && this.endTimePart) {
        this.form.endTime = this.endDatePart + 'T' + this.endTimePart + ':00'
      } else {
        this.form.endTime = null
      }
    },
    syncRegDeadline() {
      if (this.regDatePart && this.regTimePart) {
        this.form.registrationDeadline = this.regDatePart + 'T' + this.regTimePart + ':00'
      } else {
        this.form.registrationDeadline = null
      }
    },
    chooseImage() {
      var self = this
      pickImage({
        count: 1,
        sizeType: ['compressed'],
        success: function(res) {
          self.uploadCover(res.tempFilePaths[0])
        }
      })
    },
    uploadCover(filePath) {
      var self = this
      uni.uploadFile({
        url: BASE_URL + '/api/admin/articles/upload/image',
        filePath: filePath,
        name: 'file',
        header: { 'Authorization': 'Bearer ' + (uni.getStorageSync('token') || '') },
        success: function(res) {
          try {
            var data = JSON.parse(res.data)
            if (data.code === 200 && data.data) {
              self.form.coverImage = data.data
            } else {
              uni.showToast({ title: '上传失败', icon: 'none' })
            }
          } catch (e) {
            uni.showToast({ title: '上传失败', icon: 'none' })
          }
        },
        fail: function() {
          uni.showToast({ title: '上传失败', icon: 'none' })
        }
      })
    },
    onImgError() {
      this.form.coverImage = ''
    },
    getCoverUrl(path) {
      if (!path) return ''
      var s = String(path).trim()
      if (!s || s === 'null' || s === '/null') return ''
      if (s.indexOf('http://') === 0 || s.indexOf('https://') === 0) return s
      return BASE_URL + (s.charAt(0) === '/' ? s : '/' + s)
    },
    removeCover() {
      this.form.coverImage = ''
    },
    async loadPosterTemplates() {
      try {
        var res = await getPosterTemplates()
        if (res && res.code === 200) {
          this.posterTemplates = res.data || []
        }
      } catch (e) { /* 模板拉取失败不影响创建 */ }
    },
    selectPosterTemplate(tpl) {
      this.form.posterTemplateId = tpl.id
      this.selectedPosterTemplate = tpl
      this.previewTemplateKey = tpl.templateKey || 'gradient'
      // 默认背景色取模板主色
      this.previewBgColor = tpl.mainColor || ''
      uni.showToast({ title: '已选择：' + tpl.name, icon: 'none' })
    },
    openPosterPreview() {
      if (!this.form.posterTemplateId) {
        uni.showToast({ title: '请先选择海报模板', icon: 'none' })
        return
      }
      this.showPosterPreview = true
    },
    validate() {
      if (!this.form.title) {
        uni.showToast({ title: '请输入活动标题', icon: 'none' })
        return false
      }
      if (!this.form.activityType) {
        uni.showToast({ title: '请选择活动类型', icon: 'none' })
        return false
      }
      if (!this.datePart || !this.timePart) {
        uni.showToast({ title: '请选择开始时间', icon: 'none' })
        return false
      }
      return true
    },
    buildPayload() {
      var payload = Object.assign({}, this.form)
      payload.maxParticipants = parseInt(this.maxParticipantsStr) || 0
      payload.childFee = Math.round((parseFloat(this.childFeeYuan) || 0) * 100)
      payload.childMemberFee = Math.round((parseFloat(this.childMemberFeeYuan) || 0) * 100)
      payload.parentFee = Math.round((parseFloat(this.parentFeeYuan) || 0) * 100)
      payload.parentMemberFee = Math.round((parseFloat(this.parentMemberFeeYuan) || 0) * 100)
      if (this.activityId) payload.id = this.activityId
      // 维度由审核时设置，创建/编辑不提交空维度，避免误清空已有维度
      if (!payload.dimensionCode) delete payload.dimensionCode
      // 主办方和海报模板仅非空时提交
      if (!payload.vendorName) delete payload.vendorName
      if (!payload.posterTemplateId) delete payload.posterTemplateId
      return payload
    },
    handleSave() {
      if (!this.validate()) return
      this.submit(false)
    },
    handlePublish() {
      if (!this.validate()) return
      this.submit(true)
    },
    submit(publishAfter) {
      var self = this
      self.loading = true
      var payload = self.buildPayload()
      var isAdmin = self.isAdmin

      var doPublish = function(id) {
        if (isAdmin) {
          adminPublishActivity(id).then(function(r) {
            self.loading = false
            if (r && r.code === 200) {
              uni.showToast({ title: '已发布', icon: 'success' })
              setTimeout(function() {
                uni.navigateBack()
              }, 1200)
            } else {
              uni.showToast({ title: (r && r.message) || '发布失败', icon: 'none' })
            }
          }).catch(function() {
            self.loading = false
            uni.showToast({ title: '发布失败', icon: 'none' })
          })
        } else {
          submitActivityForReview(id).then(function(r) {
            self.loading = false
            if (r && r.code === 200) {
              uni.showToast({ title: '已提交审核', icon: 'success' })
              setTimeout(function() {
                uni.navigateBack()
              }, 1200)
            } else {
              uni.showToast({ title: (r && r.message) || '提交审核失败', icon: 'none' })
            }
          }).catch(function() {
            self.loading = false
            uni.showToast({ title: '提交审核失败', icon: 'none' })
          })
        }
      }

      if (self.isNew) {
        adminCreateActivity(payload).then(function(res) {
          if (res && res.code === 200) {
            var newId = res.data.id || res.data
            if (publishAfter) {
              doPublish(newId)
            } else {
              self.loading = false
              uni.showToast({ title: '已保存草稿', icon: 'success' })
              setTimeout(function() { uni.navigateBack() }, 1200)
            }
          } else {
            self.loading = false
            uni.showToast({ title: (res && res.message) || '保存失败', icon: 'none' })
          }
        }).catch(function() {
          self.loading = false
          uni.showToast({ title: '网络异常', icon: 'none' })
        })
      } else {
        adminUpdateActivity(payload).then(function(res) {
          if (res && res.code === 200) {
            if (publishAfter && (self.form.status === 'draft' || self.form.status === 'rejected')) {
              doPublish(self.activityId)
            } else {
              self.loading = false
              uni.showToast({ title: '已保存', icon: 'success' })
              setTimeout(function() { uni.navigateBack() }, 1200)
            }
          } else {
            self.loading = false
            uni.showToast({ title: (res && res.message) || '保存失败', icon: 'none' })
          }
        }).catch(function() {
          self.loading = false
          uni.showToast({ title: '网络异常', icon: 'none' })
        })
      }
    },
    typeLabel(key) {
      for (var i = 0; i < this.typeOptions.length; i++) {
        if (this.typeOptions[i].key === key) return this.typeOptions[i].label
      }
      return '请选择类型'
    },
    fmtDate(d) {
      var y = d.getFullYear()
      var m = ('0' + (d.getMonth() + 1)).slice(-2)
      var day = ('0' + d.getDate()).slice(-2)
      return y + '-' + m + '-' + day
    },
    fmtTime(d) {
      var h = ('0' + d.getHours()).slice(-2)
      var mi = ('0' + d.getMinutes()).slice(-2)
      return h + ':' + mi
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  background: $app-bg;
  padding: 24rpx;
}

.form-card {
  background: $app-surface;
  border-radius: 20rpx;
  padding: 32rpx 28rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.form-title {
  font-size: 36rpx;
  font-weight: bold;
  color: $uni-text-color;
  margin-bottom: 24rpx;
}

.form-item {
  margin-bottom: 28rpx;
}

.form-item-row {
  display: flex;
  flex-direction: row;
  gap: 20rpx;
  margin-bottom: 28rpx;
}

.form-item.half {
  flex: 1;
}

.form-label {
  font-size: 26rpx;
  color: $facade-text-slate-deep;
  font-weight: 600;
  margin-bottom: 12rpx;
  display: block;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid $uni-border-color-light;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: $uni-text-color;
  box-sizing: border-box;
}

.form-picker {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid $uni-border-color-light;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: $uni-text-color;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.picker-text {
  font-size: 28rpx;
  color: $uni-text-color;
}

.form-textarea {
  width: 100%;
  min-height: 160rpx;
  border: 1rpx solid $uni-border-color-light;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  font-size: 28rpx;
  color: $uni-text-color;
  box-sizing: border-box;
}

.cover-upload {
  width: 100%;
  height: 320rpx;
  border: 2rpx dashed $uni-border-color;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.preview-img {
  width: 100%;
  height: 100%;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-icon {
  font-size: 64rpx;
  color: $app-text-subtle;
}

.upload-text {
  font-size: 24rpx;
  color: $app-text-subtle;
  margin-top: 8rpx;
}

.cover-actions {
  display: flex;
  flex-direction: row;
  gap: 24rpx;
  margin-top: 12rpx;
}

.cover-action {
  font-size: 24rpx;
  color: $facade-text-slate-deep;
  text-decoration: underline;
}

.cover-action-danger {
  font-size: 24rpx;
  color: $status-danger;
  text-decoration: underline;
}

/* 海报模板选择 */
.poster-tpl-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-top: 20rpx;
}

.poster-tpl-card {
  width: 200rpx;
  border: 2rpx solid $uni-border-color-light;
  border-radius: 12rpx;
  padding: 20rpx 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: $app-surface;
}

.poster-tpl-active {
  border-color: $brand-primary;
  background: $uni-primary-pale;
}

.tpl-colors {
  display: flex;
  flex-direction: row;
  gap: 8rpx;
  margin-bottom: 12rpx;
}

.tpl-dot {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
}

.tpl-name {
  font-size: 24rpx;
  color: $uni-text-color;
  text-align: center;
}

.poster-preview-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;
}

.poster-preview-hint {
  font-size: 24rpx;
  color: $uni-text-color-secondary;
}

.btn-preview {
  padding: 12rpx 32rpx;
  border-radius: 32rpx;
  background: $brand-primary;
  color: $app-surface;
  font-size: 26rpx;
}

.form-actions {
  display: flex;
  flex-direction: row;
  gap: 20rpx;
  margin-top: 40rpx;
}

.btn-save,
.btn-publish {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-weight: 600;
}

.btn-save {
  background: $app-surface;
  color: $brand-primary;
  border: 2rpx solid $brand-primary;
}

.btn-publish {
  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
  color: $app-surface;
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid $brand-primary-light-2;
  border-top: 4rpx solid $brand-primary;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 16rpx;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>