|
|
@@ -0,0 +1,714 @@
|
|
|
+<template>
|
|
|
+ <view class="page-container">
|
|
|
+ <!-- 顶部导航 -->
|
|
|
+ <view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
|
|
|
+ <view class="back-btn" @tap="goBack">
|
|
|
+ <text class="back-icon">‹</text>
|
|
|
+ </view>
|
|
|
+ <view class="header-title">2026春季销售冲刺活动</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 统计卡片 -->
|
|
|
+ <view class="stats-cards">
|
|
|
+ <view class="stats-card">
|
|
|
+ <view class="stats-label">累计打卡天数</view>
|
|
|
+ <view class="stats-value">
|
|
|
+ <text class="stats-num">{{ stats.checkDays }}</text>
|
|
|
+ <text class="stats-unit"> 天</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="stats-card">
|
|
|
+ <view class="stats-label">累计购物数量</view>
|
|
|
+ <view class="stats-value">
|
|
|
+ <text class="stats-num">{{ stats.saleCount }}</text>
|
|
|
+ <text class="stats-unit"> 件</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 打卡日历 -->
|
|
|
+ <view class="calendar-section">
|
|
|
+ <view class="calendar-header">
|
|
|
+ <view class="calendar-title">
|
|
|
+ <text class="calendar-icon">📅</text>
|
|
|
+ <text>打卡日历</text>
|
|
|
+ </view>
|
|
|
+ <picker
|
|
|
+ mode="date"
|
|
|
+ :value="currentDate"
|
|
|
+ fields="month"
|
|
|
+ @change="onMonthChange"
|
|
|
+ >
|
|
|
+ <view class="month-picker">
|
|
|
+ <text>{{ currentMonthText }}</text>
|
|
|
+ <text class="arrow">▼</text>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 星期 -->
|
|
|
+ <view class="weekdays">
|
|
|
+ <text v-for="(day, index) in weekDays" :key="index" class="weekday">{{
|
|
|
+ day
|
|
|
+ }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 日历格子 -->
|
|
|
+ <view class="calendar-grid">
|
|
|
+ <view
|
|
|
+ v-for="(day, index) in calendarDays"
|
|
|
+ :key="index"
|
|
|
+ class="calendar-day"
|
|
|
+ :class="{
|
|
|
+ empty: !day.date,
|
|
|
+ checked: day.checked,
|
|
|
+ today: day.isToday,
|
|
|
+ }"
|
|
|
+ @tap="onDateClick(day)"
|
|
|
+ >
|
|
|
+ <text v-if="day.date" class="day-text">{{ day.day }}</text>
|
|
|
+ <text v-if="day.checked" class="check-icon">✓</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 打卡表单 -->
|
|
|
+ <view class="checkin-form">
|
|
|
+ <!-- 打卡说明 -->
|
|
|
+ <view class="checkin-intro">
|
|
|
+ <view class="intro-title">小票/朋友圈截图</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 图片上传 -->
|
|
|
+ <view class="upload-section">
|
|
|
+ <view class="upload-area" @tap="chooseImage">
|
|
|
+ <view class="upload-icon">📷</view>
|
|
|
+ <view class="upload-text">点击拍照或上传图片</view>
|
|
|
+ </view>
|
|
|
+ <!-- 预览已上传图片 -->
|
|
|
+ <view v-if="uploadedImage" class="image-preview">
|
|
|
+ <image :src="uploadedImage" mode="aspectFill" class="preview-img" />
|
|
|
+ <view class="delete-btn" @tap="deleteImage">✕</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 销售单品 -->
|
|
|
+ <view class="product-section">
|
|
|
+ <view class="section-title">销售单品</view>
|
|
|
+
|
|
|
+ <view class="product-list">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in products"
|
|
|
+ :key="index"
|
|
|
+ class="product-item"
|
|
|
+ :class="{ active: item.selected }"
|
|
|
+ @tap="selectProduct(index)"
|
|
|
+ >
|
|
|
+ <view class="product-name">{{ item.name }}</view>
|
|
|
+ <view class="product-input">
|
|
|
+ <text class="input-label">数量</text>
|
|
|
+ <input
|
|
|
+ type="number"
|
|
|
+ v-model="item.quantity"
|
|
|
+ class="quantity-input"
|
|
|
+ placeholder="0"
|
|
|
+ @tap.stop
|
|
|
+ @input="onQuantityChange(index)"
|
|
|
+ />
|
|
|
+ <text class="input-unit">盒</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 打卡按钮 -->
|
|
|
+ <view class="submit-section">
|
|
|
+ <button class="submit-btn" @tap="submitCheckin">立即打卡</button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 打卡规则、活动奖励-->
|
|
|
+ <view class="checkin-rule">
|
|
|
+ <view class="item">打卡规则</view>
|
|
|
+ <view class="item">活动奖励</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 底部占位 -->
|
|
|
+ <view class="tabbar-placeholder"></view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ statusBarHeight: 0,
|
|
|
+ currentDate: "2026-01",
|
|
|
+ weekDays: ["日", "一", "二", "三", "四", "五", "六"],
|
|
|
+ calendarDays: [],
|
|
|
+ stats: {
|
|
|
+ checkDays: 15,
|
|
|
+ saleCount: 45,
|
|
|
+ },
|
|
|
+ // 已打卡的日期
|
|
|
+ checkedDates: [
|
|
|
+ "2026-01-03",
|
|
|
+ "2026-01-05",
|
|
|
+ "2026-01-08",
|
|
|
+ "2026-01-12",
|
|
|
+ "2026-01-15",
|
|
|
+ "2026-01-19",
|
|
|
+ "2026-01-20",
|
|
|
+ "2026-01-24",
|
|
|
+ "2026-01-25",
|
|
|
+ "2026-01-26",
|
|
|
+ ],
|
|
|
+ // 打卡表单数据
|
|
|
+ uploadedImage: "",
|
|
|
+ products: [
|
|
|
+ { name: "春季限定A款", quantity: 0, selected: false },
|
|
|
+ { name: "年度爆款B款", quantity: 0, selected: false },
|
|
|
+ { name: "高端定制C款", quantity: 0, selected: false },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ currentMonthText() {
|
|
|
+ const [year, month] = this.currentDate.split("-");
|
|
|
+ return `${year}年${parseInt(month)}月`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.statusBarHeight = getApp().globalData.statusBarHeight;
|
|
|
+ if (options.id) {
|
|
|
+ this.activityId = options.id;
|
|
|
+ }
|
|
|
+ this.generateCalendar();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goBack() {
|
|
|
+ uni.navigateBack();
|
|
|
+ },
|
|
|
+ // 图片上传
|
|
|
+ chooseImage() {
|
|
|
+ uni.chooseImage({
|
|
|
+ count: 1,
|
|
|
+ sizeType: ["compressed"],
|
|
|
+ sourceType: ["album", "camera"],
|
|
|
+ success: (res) => {
|
|
|
+ this.uploadedImage = res.tempFilePaths[0];
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ deleteImage() {
|
|
|
+ this.uploadedImage = "";
|
|
|
+ },
|
|
|
+ // 商品选择
|
|
|
+ selectProduct(index) {
|
|
|
+ this.products[index].selected = !this.products[index].selected;
|
|
|
+ },
|
|
|
+ onQuantityChange(index) {
|
|
|
+ // 可以添加数量验证等逻辑
|
|
|
+ },
|
|
|
+ // 提交打卡
|
|
|
+ submitCheckin() {
|
|
|
+ // 检查是否上传图片
|
|
|
+ if (!this.uploadedImage) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "请上传图片",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查是否有填写销售数量
|
|
|
+ const selectedProducts = this.products.filter((p) => p.quantity > 0);
|
|
|
+ if (selectedProducts.length === 0) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "请填写销售数量",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 提交打卡
|
|
|
+ uni.showLoading({ title: "提交中..." });
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ // 更新统计数据
|
|
|
+ const totalQty = this.products.reduce(
|
|
|
+ (sum, p) => sum + (parseInt(p.quantity) || 0),
|
|
|
+ 0
|
|
|
+ );
|
|
|
+ this.stats.checkDays += 1;
|
|
|
+ this.stats.saleCount += totalQty;
|
|
|
+
|
|
|
+ // 添加到已打卡日期
|
|
|
+ const today = new Date();
|
|
|
+ const todayStr = `${today.getFullYear()}-${String(
|
|
|
+ today.getMonth() + 1
|
|
|
+ ).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
|
|
|
+ if (!this.checkedDates.includes(todayStr)) {
|
|
|
+ this.checkedDates.push(todayStr);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 重置表单
|
|
|
+ this.uploadedImage = "";
|
|
|
+ this.products.forEach((p) => {
|
|
|
+ p.quantity = 0;
|
|
|
+ p.selected = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 刷新日历
|
|
|
+ this.generateCalendar();
|
|
|
+
|
|
|
+ uni.showToast({
|
|
|
+ title: "打卡成功",
|
|
|
+ icon: "success",
|
|
|
+ });
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ onMonthChange(e) {
|
|
|
+ this.currentDate = e.detail.value.substring(0, 7);
|
|
|
+ this.generateCalendar();
|
|
|
+ },
|
|
|
+ onDateClick(day) {
|
|
|
+ if (!day.date) return;
|
|
|
+ // 点击日期可以查看当天打卡详情
|
|
|
+ const dateStr = `${this.currentDate}-${String(day.day).padStart(2, "0")}`;
|
|
|
+ uni.showToast({
|
|
|
+ title: dateStr,
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ generateCalendar() {
|
|
|
+ const [year, month] = this.currentDate.split("-").map(Number);
|
|
|
+ const firstDay = new Date(year, month - 1, 1).getDay();
|
|
|
+ const daysInMonth = new Date(year, month, 0).getDate();
|
|
|
+ const today = new Date();
|
|
|
+ const todayStr = `${today.getFullYear()}-${String(
|
|
|
+ today.getMonth() + 1
|
|
|
+ ).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
|
|
|
+ const currentMonthStr = `${year}-${String(month).padStart(2, "0")}`;
|
|
|
+
|
|
|
+ const days = [];
|
|
|
+
|
|
|
+ // 填充空白
|
|
|
+ for (let i = 0; i < firstDay; i++) {
|
|
|
+ days.push({ date: "" });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 填充日期
|
|
|
+ for (let d = 1; d <= daysInMonth; d++) {
|
|
|
+ const dateStr = `${currentMonthStr}-${String(d).padStart(2, "0")}`;
|
|
|
+ days.push({
|
|
|
+ day: d,
|
|
|
+ date: dateStr,
|
|
|
+ checked: this.checkedDates.includes(dateStr),
|
|
|
+ isToday: dateStr === todayStr,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ this.calendarDays = days;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #f5f6fa;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 88rpx;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.back-btn {
|
|
|
+ position: absolute;
|
|
|
+ left: 24rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.back-icon {
|
|
|
+ font-size: 44rpx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.header-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1a1a1a;
|
|
|
+}
|
|
|
+
|
|
|
+/* 统计卡片 */
|
|
|
+.stats-cards {
|
|
|
+ display: flex;
|
|
|
+ padding: 24rpx;
|
|
|
+ gap: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-card {
|
|
|
+ flex: 1;
|
|
|
+ background: #1677ff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 28rpx 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-label {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: rgba(255, 255, 255, 0.85);
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-value {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-num {
|
|
|
+ font-size: 52rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.stats-unit {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
+ margin-left: 4rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 打卡按钮 */
|
|
|
+.checkin-btn-wrap {
|
|
|
+ padding: 0 24rpx 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.checkin-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ background: #1677ff;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: none;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 打卡表单 */
|
|
|
+.checkin-form {
|
|
|
+ margin: 24rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+.checkin-intro {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.intro-title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+.checkin-rule {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 50rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ .item {
|
|
|
+ padding: 0 36rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 1;
|
|
|
+ color: #1677ff;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ border-right: 1rpx solid #ddd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/* 图片上传 */
|
|
|
+.upload-section {
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-area {
|
|
|
+ width: 100%;
|
|
|
+ height: 320rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: 2rpx dashed #ddd;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-icon {
|
|
|
+ font-size: 80rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-text {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+.image-preview {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 320rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.preview-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.delete-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 16rpx;
|
|
|
+ right: 16rpx;
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 50%;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+/* 销售单品 */
|
|
|
+.product-section {
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1a1a1a;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.product-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.product-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #fafafa;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ border: 2rpx solid transparent;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border-color: #1677ff;
|
|
|
+ background: #f0f7ff;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.product-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #1a1a1a;
|
|
|
+}
|
|
|
+
|
|
|
+.product-input {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.input-label {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-right: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.quantity-input {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 0 8rpx;
|
|
|
+ border: 1rpx solid #eee;
|
|
|
+}
|
|
|
+
|
|
|
+.input-unit {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-left: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 提交按钮 */
|
|
|
+.submit-section {
|
|
|
+ margin-top: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.submit-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ background: #1677ff;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: none;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 日历 */
|
|
|
+.calendar-section {
|
|
|
+ margin: 0 24rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+.calendar-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.calendar-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1a1a1a;
|
|
|
+}
|
|
|
+
|
|
|
+.calendar-icon {
|
|
|
+ margin-right: 8rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.month-picker {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+
|
|
|
+.arrow {
|
|
|
+ margin-left: 8rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 星期 */
|
|
|
+.weekdays {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.weekday {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+/* 日历格子 */
|
|
|
+.calendar-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.calendar-day {
|
|
|
+ width: calc(100% / 7);
|
|
|
+ height: 72rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &.empty {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.checked {
|
|
|
+ .day-text {
|
|
|
+ background: #1677ff;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.today {
|
|
|
+ .day-text {
|
|
|
+ border: 2rpx solid #1677ff;
|
|
|
+ color: #1677ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.day-text {
|
|
|
+ width: 56rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333;
|
|
|
+ background: #f5f5f5;
|
|
|
+}
|
|
|
+
|
|
|
+.check-icon {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 4rpx;
|
|
|
+ right: 50%;
|
|
|
+ margin-right: -20rpx;
|
|
|
+ font-size: 18rpx;
|
|
|
+ color: #fff;
|
|
|
+ background: #52c41a;
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.tabbar-placeholder {
|
|
|
+ height: 120rpx;
|
|
|
+}
|
|
|
+</style>
|