MatchCreateGame | Press Next

# MatchCreateGame

A comprehensive match creation component that supports logo upload, game mode selection, basic settings configuration, and prize setup. Perfect for creating competitive gaming events and tournaments.

# Import

import PressMatchCreateGame from 'press-next/press-match-create-game/press-match-create-game';

# Usage

# Basic Usage

<template>
  <PressMatchCreateGame
    :logo-pic="logoPic"
    :match-name="matchName"
    :mode-list="modeList"
    :create-list="createList"
    @create-game-click="handleCreateGame"
    @change-logo-click="handleChangeLogoClick"
    @change-match-name="handleChangeMatchName"
  />
</template>

<script setup>
import { ref } from 'vue';

const logoPic = ref('https://example.com/logo.png');
const matchName = ref('My Tournament');

const modeList = ref([
  {
    id: 1,
    title: 'Classic Mode',
    description: 'Traditional competitive mode',
    srcPic: 'https://example.com/mode1.png',
    hot: true,
    label: 'Recommended'
  },
  {
    id: 2,
    title: 'Quick Mode',
    description: 'Fast-paced battle experience',
    srcPic: 'https://example.com/mode2.png'
  }
]);

const createList = ref([
  {
    title: 'Enable AI',
    tip: 'AI will assist in managing the event',
    showSwitch: true,
    checked: false,
    isBasic: true
  },
  {
    title: 'Match Rules',
    desc: 'Set detailed rules',
    showSwitch: false,
    isBasic: true
  }
]);

const handleCreateGame = () => {
  console.log('Create tournament');
};

const handleChangeLogoClick = () => {
  console.log('Change logo');
};

const handleChangeMatchName = (value) => {
  matchName.value = value;
};
</script>

# Modify Mode

<template>
  <PressMatchCreateGame
    :logo-pic="logoPic"
    :match-name="matchName"
    :mode-list="modeList"
    :create-list="createList"
    :is-modify="true"
    create-button-text="Save Changes"
    @create-game-click="handleSaveGame"
    @change-logo-click="handleChangeLogoClick"
  />
</template>

<script setup>
import { ref } from 'vue';

const logoPic = ref('https://example.com/existing-logo.png');
const matchName = ref('Existing Tournament Name');

const modeList = ref([
  {
    id: 1,
    title: 'Classic Mode',
    description: 'Traditional competitive mode',
    srcPic: 'https://example.com/mode1.png',
    hot: true
  }
]);

const createList = ref([
  {
    title: 'Enable AI',
    tip: 'AI will assist in managing the event',
    showSwitch: true,
    checked: true,
    isBasic: true,
    aiType: 'GPT-4 Smart Assistant'
  }
]);

const handleSaveGame = () => {
  console.log('Save tournament changes');
};

const handleChangeLogoClick = () => {
  console.log('Change logo');
};
</script>

# Quick Create Mode

<template>
  <PressMatchCreateGame
    :logo-pic="logoPic"
    :match-name="matchName"
    :mode-list="modeList"
    :create-list="createList"
    :is-create-quick="true"
    create-button-text="Quick Create"
    @create-game-click="handleQuickCreate"
  />
</template>

<script setup>
import { ref } from 'vue';

const logoPic = ref('');
const matchName = ref('Quick Tournament');

const modeList = ref([
  {
    id: 1,
    title: 'Standard Mode',
    description: 'Perfect for beginners',
    srcPic: 'https://example.com/standard.png'
  }
]);

const createList = ref([
  {
    title: 'Enable AI',
    tip: 'Smart event management',
    showSwitch: true,
    checked: false,
    isBasic: true
  },
  {
    title: 'Advanced Settings',
    desc: 'More configuration options',
    showSwitch: false,
    isBasic: false,
    isMore: true
  }
]);

const handleQuickCreate = () => {
  console.log('Quick create tournament');
};
</script>

# Complete Feature Example

<template>
  <PressMatchCreateGame
    :logo-pic="logoPic"
    :match-name="matchName"
    :cur-mode-index="curModeIndex"
    :mode-list="modeList"
    :create-list="createList"
    :is-show-more="isShowMore"
    :prize-list="prizeList"
    more-text="AI streaming, match rules, prizes and more settings"
    @create-game-click="handleCreateGame"
    @update:cur-mode-index="handleModeChange"
    @change-logo-click="handleChangeLogoClick"
    @change-match-name="handleChangeMatchName"
    @click-cell-item="handleClickCellItem"
    @on-change-switch="handleSwitchChange"
    @update:is-show-more="handleShowMoreToggle"
    @add-prize="handleAddPrize"
    @delete-prize="handleDeletePrize"
    @prize-change="handlePrizeChange"
    @update:prize-list="handlePrizeListUpdate"
  />
</template>

<script setup>
import { ref } from 'vue';

const logoPic = ref('https://example.com/logo.png');
const matchName = ref('King of Glory Championship');
const curModeIndex = ref(0);
const isShowMore = ref(false);

const modeList = ref([
  {
    id: 1,
    title: 'Classic 5V5',
    description: 'Traditional 5V5 battle mode',
    srcPic: 'https://example.com/5v5.png',
    hot: true,
    label: 'Popular'
  },
  {
    id: 2,
    title: 'Brawl',
    description: 'Multi-player chaos mode',
    srcPic: 'https://example.com/brawl.png',
    label: 'New Mode'
  },
  {
    id: 3,
    title: 'Ranked',
    description: 'Competitive ranking mode',
    srcPic: 'https://example.com/ranked.png'
  }
]);

const createList = ref([
  {
    title: 'Match Type',
    desc: 'Team Match (4 players)',
    showSwitch: false,
    isBasic: true,
    type: 'match-type'
  },
  {
    title: 'Rounds & Map',
    desc: '1 Round (Zero Dam)',
    showSwitch: false,
    isBasic: true,
    type: 'map'
  },
  {
    title: 'Signup Deadline',
    desc: 'June 10, 10:50',
    showSwitch: false,
    isBasic: true,
    type: 'signup-deadline'
  },
  {
    title: 'Start Time',
    desc: 'June 10, 10:50',
    showSwitch: false,
    isBasic: true,
    type: 'start-time'
  },
  {
    title: 'Enable AI Streaming',
    aiType: 'Solo Commentary',
    showSwitch: true,
    checked: true,
    isBasic: false,
    isMore: true,
    type: 'ai'
  },
  {
    title: 'Match Group QR Code',
    desc: '',
    showSwitch: false,
    isBasic: false,
    isMore: true,
    type: 'qrcode'
  },
  {
    title: 'Match Rules',
    desc: 'Default Rules',
    showSwitch: false,
    isBasic: false,
    isMore: true,
    type: 'rules'
  },
  {
    title: 'Start Mode',
    desc: 'Manual Start',
    showSwitch: false,
    isBasic: false,
    isMore: true,
    type: 'start-mode'
  }
]);

// Prize list configuration
const prizeList = ref([
  {
    id: 1,
    title: 'Champion Reward',
    name: 'Exclusive Skin Bundle',
    description: 'Season exclusive skin pack + Special avatar frame',
    image: 'https://example.com/prize-champion.png',
    quantity: 1,
    quantityType: 'per_person'
  },
  {
    id: 2,
    title: 'Runner-up Reward',
    name: 'Game Credits',
    description: '500 Yuan worth of game credits',
    image: 'https://example.com/prize-runner.png',
    quantity: 2,
    quantityType: 'per_person'
  },
  {
    id: 3,
    title: 'Third Place Reward',
    name: 'Game Items',
    description: 'Rare game item gift pack',
    image: 'https://example.com/prize-third.png',
    quantity: 3,
    quantityType: 'total'
  }
]);

// Event handlers
const handleCreateGame = () => {
  console.log('Create tournament with current config:', {
    matchName: matchName.value,
    modeIndex: curModeIndex.value,
    settings: createList.value,
    prizes: prizeList.value
  });
};

const handleModeChange = (index) => {
  curModeIndex.value = index;
  console.log('Switch to mode:', modeList.value[index].title);
};

const handleChangeLogoClick = () => {
  console.log('Open logo selector');
  // Open image picker or logo library
};

const handleChangeMatchName = (value) => {
  matchName.value = value;
  console.log('Tournament name updated:', value);
};

const handleClickCellItem = (index) => {
  const item = createList.value[index];
  console.log('Click setting item:', item.title);
  
  // Open corresponding settings page based on type
  switch (item.type) {
    case 'match-type':
      console.log('Open match type selection');
      break;
    case 'map':
      console.log('Open map selection');
      break;
    case 'signup-deadline':
    case 'start-time':
      console.log('Open time picker');
      break;
    case 'rules':
      console.log('Open match rules settings');
      break;
    default:
      console.log('Open general settings');
  }
};

const handleSwitchChange = (eventData) => {
  console.log('Switch state changed:', eventData);
  
  // Update corresponding item state
  const item = createList.value[eventData.index];
  if (item) {
    item.checked = eventData.value;
    
    // Special handling for AI settings
    if (eventData.type === 'ai' && eventData.value) {
      item.aiType = 'Solo Commentary';
    }
  }
};

const handleShowMoreToggle = () => {
  isShowMore.value = !isShowMore.value;
  console.log('More settings', isShowMore.value ? 'expanded' : 'collapsed');
};

// Prize related events - handled by business layer
const handleAddPrize = () => {
  console.log('Add prize, current count:', prizeList.value.length);
  // Business layer creates new prize
  const newPrize = {
    id: Date.now(),
    title: `Prize ${prizeList.value.length + 1}`,
    name: '',
    description: '',
    image: '',
    quantity: 1,
    quantityType: 'per_person'
  };
  prizeList.value.push(newPrize);
  console.log('New prize added:', newPrize);
};

const handleDeletePrize = (index, canDelete) => {
  if (!canDelete) {
    // Show toast when deletion is not allowed
    console.warn('At least one prize must be kept');
    uni.showToast({
      title: 'At least one prize required',
      icon: 'none',
      duration: 2000
    });
    return;
  }
  console.log('Delete prize, index:', index);
  // Note: Component handles deletion internally, additional business logic can be added here
};

const handlePrizeChange = (index) => {
  console.log('Prize data changed, index:', index);
  console.log('Current prize data:', prizeList.value[index]);
};

const handlePrizeListUpdate = (list) => {
  console.log('Prize list updated:', list);
  prizeList.value = list;
};
</script>

<template>
  <PressMatchCreateGame
    :logo-pic="logoPic"
    :match-name="matchName"
    :mode-list="modeList"
    :create-list="createList"
  >
    <template #foot-btn>
      <div class="custom-buttons">
        <PressButton
          type="default"
          @click="handleSaveDraft"
        >
          Save Draft
        </PressButton>
        <PressButton
          type="primary"
          @click="handlePublish"
        >
          Publish Tournament
        </PressButton>
      </div>
    </template>
  </PressMatchCreateGame>
</template>

<script setup>
import { ref } from 'vue';

const logoPic = ref('');
const matchName = ref('');
const modeList = ref([]);
const createList = ref([]);

const handleSaveDraft = () => {
  console.log('Save as draft');
};

const handlePublish = () => {
  console.log('Publish tournament');
};
</script>

<style scoped>
.custom-buttons {
  display: flex;
  gap: 12px;
}

.custom-buttons .press-button {
  flex: 1;
}
</style>

# Prize List Management

The component supports complete prize list management functionality, including adding, deleting, and editing prizes. The component uses a unidirectional data flow + event update pattern to ensure clear and traceable data flow.

<template>
  <PressMatchCreateGame
    :prize-list="prizeList"
    @add-prize="handleAddPrize"
    @delete-prize="handleDeletePrize"
    @prize-change="handlePrizeChange"
    @update:prize-list="handlePrizeListUpdate"
  />
</template>

<script setup>
import { ref } from 'vue';

const prizeList = ref([
  {
    id: 1,
    title: 'Champion Reward',
    name: 'Exclusive Skin Bundle',
    description: 'Season exclusive skin pack',
    type: 'Physical Prize', // Prize type field
    image: 'https://example.com/prize1.png',
    quantity: 1,
    quantityType: 'per_person'
  }
]);

// Add prize - Business layer creates new prize data
const handleAddPrize = () => {
  const newPrize = {
    id: Date.now(),
    title: `Prize ${prizeList.value.length + 1}`,
    name: '',
    description: '',
    type: '', // Initialize prize type
    image: '',
    quantity: 1,
    quantityType: 'per_person'
  };
  prizeList.value.push(newPrize);
};

// Delete prize - Component passes canDelete parameter
const handleDeletePrize = (index, canDelete) => {
  if (!canDelete) {
    // At least one prize must be kept
    uni.showToast({
      title: 'At least one prize required',
      icon: 'none'
    });
    return;
  }
  // Business logic after successful deletion
  console.log('Prize deleted successfully');
};

// Prize data change - Triggered by PressMatchPrizeSet component
const handlePrizeChange = (index) => {
  console.log('Prize changed, index:', index);
  console.log('Prize data:', prizeList.value[index]);
};

// Prize list update - Unified exit for all data changes
const handlePrizeListUpdate = (list) => {
  console.log('===== Prize List Updated =====');
  prizeList.value = [...list]; // Create new array reference for reactive update
  
  // Log all prize information (including type field)
  list.forEach((prize, index) => {
    console.log(`Prize ${index + 1}:`, {
      name: prize.name,
      description: prize.description,
      type: prize.type, // Type field syncs correctly
      quantity: prize.quantity,
      quantityType: prize.quantityType
    });
  });
};
</script>

Important Notes:

Data Flow:
- User edits in PressMatchPrizeSet → triggers change event → press-match-create-game receives → updates internalPrizeList → triggers update:prizeList event → business layer receives latest data
Add Prize: The add-prize event only triggers a notification. New prize creation should be done in the business layer, allowing custom initialization data (remember to initialize the type field)
Delete Restriction: The component ensures at least one prize is kept. The delete-prize event passes a canDelete parameter indicating whether deletion is allowed
Data Synchronization:
- All prize data changes are synchronized through the update:prizeList event
- Use [...list] to create a new array reference for proper Vue reactivity
- Changes to all fields (input, selector, quantity, etc.) sync correctly

# Custom Prize Fields

You can customize the prize setting form fields through the customFormFields property, supporting both input and select types. The component internally dynamically calculates selectedValue based on each prize's data, ensuring selectors display the correct selected values.

<template>
  <PressMatchCreateGame
    :prize-list="prizeList"
    :custom-form-fields="customFormFields"
    @field-select="handleFieldSelect"
    @add-prize="handleAddPrize"
    @delete-prize="handleDeletePrize"
    @update:prize-list="handlePrizeListUpdate"
  />
  
  <!-- Field Selector -->
  <PressActionSheet
    v-model:show="showFieldSheet"
    :actions="fieldActions"
    :title="currentFieldLabel"
    @select="handleFieldValueSelect"
  />
</template>

<script setup>
import { ref, computed } from 'vue';

const prizeList = ref([
  {
    id: 1,
    title: 'Champion Prize',
    name: 'Limited Edition Skin',
    description: 'Exclusive skin pack',
    image: 'https://example.com/prize1.png',
    quantity: 1,
    quantityType: 'per_person',
    type: 'Physical Prize', // Custom field - prize type
    level: 'First Prize', // Custom field - prize level
    category: 'Game Items' // Custom field - prize category
  }
]);

// Custom form field configuration (recommended using computed to ensure latest config)
const customFormFields = computed(() => [
  {
    key: 'name',
    label: 'Prize Name',
    placeholder: 'Enter prize name',
    type: 'input'
  },
  {
    key: 'description',
    label: 'Prize Description',
    placeholder: 'Enter prize description',
    type: 'input'
  },
  {
    key: 'type',
    label: 'Prize Type',
    type: 'select',
    selectedValue: '', // Dynamically calculated internally
    defaultText: 'Please select'
  },
  {
    key: 'level',
    label: 'Prize Level',
    type: 'select',
    selectedValue: '', // Dynamically calculated internally
    defaultText: 'Select level'
  },
  {
    key: 'category',
    label: 'Prize Category',
    type: 'select',
    selectedValue: '', // Dynamically calculated internally
    defaultText: 'Select category'
  }
]);

const showFieldSheet = ref(false);
const currentFieldKey = ref('');
const currentFieldLabel = ref('');
const currentPrizeIndex = ref(0);

// Field selector options configuration
const fieldOptionsMap = {
  type: [
    { name: 'Physical Prize', value: 'Physical Prize' },
    { name: 'Virtual Prize', value: 'Virtual Prize' },
    { name: 'Cash Reward', value: 'Cash Reward' },
    { name: 'Coupon', value: 'Coupon' },
    { name: 'Points', value: 'Points' }
  ],
  level: [
    { name: 'First Prize', value: 'First Prize' },
    { name: 'Second Prize', value: 'Second Prize' },
    { name: 'Third Prize', value: 'Third Prize' },
    { name: 'Participation Prize', value: 'Participation Prize' }
  ],
  category: [
    { name: 'Game Items', value: 'Game Items' },
    { name: 'Physical Gifts', value: 'Physical Gifts' },
    { name: 'Electronics', value: 'Electronics' },
    { name: 'Benefits', value: 'Benefits' }
  ]
};

const fieldActions = computed(() => fieldOptionsMap[currentFieldKey.value] || []);

// Field select event handler
const handleFieldSelect = (index, fieldKey) => {
  currentPrizeIndex.value = index;
  currentFieldKey.value = fieldKey;
  
  const labelMap = {
    type: 'Prize Type',
    level: 'Prize Level',
    category: 'Prize Category'
  };
  
  currentFieldLabel.value = `Select ${labelMap[fieldKey] || 'Field'}`;
  showFieldSheet.value = true;
};

// Field value select callback - Optimized: create new object for reactivity
const handleFieldValueSelect = (action) => {
  if (prizeList.value[currentPrizeIndex.value]) {
    // Create new object to trigger reactive update
    prizeList.value[currentPrizeIndex.value] = {
      ...prizeList.value[currentPrizeIndex.value],
      [currentFieldKey.value]: action.value
    };
    console.log('Prize data updated:', prizeList.value[currentPrizeIndex.value]);
  }
  
  showFieldSheet.value = false;
};

// Initialize custom fields when adding prize
const handleAddPrize = () => {
  const newPrize = {
    id: Date.now(),
    title: `Prize ${prizeList.value.length + 1}`,
    name: '',
    description: '',
    image: '',
    quantity: 1,
    quantityType: 'per_person',
    type: '', // Initialize custom field
    level: '',
    category: ''
  };
  prizeList.value.push(newPrize);
};

const handleDeletePrize = (index, canDelete) => {
  if (!canDelete) {
    uni.showToast({
      title: 'At least one prize must be kept',
      icon: 'none'
    });
  }
};

// Prize list update
const handlePrizeListUpdate = (list) => {
  prizeList.value = [...list]; // Create new array reference for reactive update
};
</script>

Custom Field Usage Notes:

Field Types:
- input: Input box type, supports placeholder property
- select: Selector type, selectedValue is dynamically calculated internally based on prize data
Field Configuration:
- key: Field key name, must correspond to the field name in prize data
- label: Field display label text
- type: Field type (input or select)
- selectedValue: Initial value for selector (updated dynamically by component)
- defaultText: Prompt text when selector has no selection
Event Handling:
- field-select: Triggered when clicking selector field, parameters are (index, fieldKey)
- Needs to be used with ActionSheet or other selector components
- Create new object after selection to ensure reactivity
Data Synchronization:
- Input fields: Auto-sync through PressField's v-model
- Selector fields: Update prizeList data in business layer, component displays latest value automatically
- All field changes trigger update:prizeList event
Best Practices:
- Use computed to define customFormFields to ensure config is always latest
- Set selectedValue to empty string, let component calculate internally
- Use object destructuring in selector callback to create new object for Vue reactivity

# API

# Props

Attribute	Description	Type	Default
customClass	Custom CSS class	string	`''`
logoPic	Tournament logo image URL	string	`''`
createButtonText	Create button text	string	`'Create Tournament'`
saveButtonText	Save button text	string	`'Save Changes'`
isModify	Whether in modify mode	boolean	`false`
matchName	Tournament name	string	`''`
curModeIndex	Current selected mode index	number	`1`
modeList	Mode list data	ModeItem[]	`[]`
createList	Settings list data	CreateItem[]	`[]`
isCreateQuick	Whether in quick create mode	boolean	`false`
isShowMore	Whether to show more settings	boolean	`false`
moreText	More settings hint text	string	`'AI streaming, match rules, prizes and more settings'`
prizeData	Single prize data (legacy compatibility)	PrizeSetData	`{}`
prizeList	Prize list data	PrizeSetData[]	`[]`
isViewMode	Whether in view mode	boolean	`false`
customFormFields	Custom form field configuration	FormFieldConfig[]	`undefined`

# ModeItem Data Structure

interface ModeItem {
  id: string | number; // Mode ID
  title: string; // Mode title
  description: string; // Mode description
  hot?: boolean; // Whether to show hot badge
  label?: string; // Mode label
  srcPic?: string; // Mode image URL
}

# CreateItem Data Structure

interface CreateItem {
  title: string; // Setting item title
  tip?: string; // Tip text
  desc?: string; // Description text
  switchSize?: string; // Switch size
  activeColor?: string; // Switch active color
  showSwitch?: boolean; // Whether to show switch
  showTitle?: boolean; // Whether to show title
  checked?: boolean; // Switch state
  disabled?: boolean; // Whether disabled
  aiType?: string; // AI type description
  type?: string; // Setting item type
  isBasic?: boolean; // Whether basic setting item
  isMore?: boolean; // Whether more setting item
}

# PrizeSetData Data Structure

interface PrizeSetData {
  id?: string | number; // Prize ID
  title: string; // Prize title
  name: string; // Prize name
  description: string; // Prize description
  type?: string; // Prize type (supports customization)
  image: string; // Prize image URL
  quantity: number; // Prize quantity
  quantityType?: 'per_person' | 'total'; // Quantity type: per person/total
  [key: string]: string | number | undefined; // Supports dynamic field extension
}

# FormFieldConfig Data Structure

Used to customize form fields for prize settings:

interface FormFieldConfig {
  key: string; // Field key
  label: string; // Field label
  placeholder?: string; // Placeholder (input type)
  type?: 'input' | 'select'; // Field type
  selectedValue?: string; // Selected value (select type)
  defaultText?: string; // Default text (select type)
}

# Events

Event	Description	Parameters
create-game-click	Create/save button click	-
change-logo-click	Logo click event	-
click-change-ai	AI settings click event	-
click-cell-item	Setting item click event	index: number
update:curModeIndex	Mode index update	value: number
update:isShowMore	More settings expand state update	-
change-match-name	Tournament name change	value: string
on-change-switch	Switch state change	eventData: SwitchEventData
add-prize	Add prize event (business layer creates prize)	-
delete-prize	Delete prize event	index: number, canDelete: boolean
prize-change	Prize data change	index: number
image-edit	Prize image edit	index: number
field-select	Field select event	index: number, fieldKey: string
quantity-type-change	Prize quantity type change	index: number, type: 'per_person' \| 'total'
update:prizeList	Prize list data update	list: PrizeSetData[]

# SwitchEventData Data Structure

interface SwitchEventData {
  item: CreateItem; // Current setting item
  index: number; // Setting item index
  value: boolean; // Switch state
  title: string; // Setting item title
  type: string; // Setting item type
}

# Slots

Name	Description	Parameters
foot-btn	Custom footer button area	-

# CSS Variables

The component provides the following CSS variables for custom styling:

# Spacing System

CSS Variable	Description	Default
--pmcg-head-padding-top	Header content top padding	`$spacing-md`
--pmcg-upload-margin-bottom	Logo upload bottom margin	`$spacing-md`
--pmcg-imgwrap-spacing	Logo container padding	`.04rem`
--pmcg-swiper-spacing-tb	Swiper area top/bottom spacing	`0`
--pmcg-swiper-spacing-lr	Swiper area left/right spacing	`$spacing-lg`
--pmcg-play-margin-bottom	Swiper title bottom margin	`$spacing-lg`
--pmcg-swiper-card-padding-lr	Swiper card left/right padding	`$spacing-md`
--pmcg-swiper-card-desc-tb	Swiper card description top/bottom margin	`$spacing-xs`
--pmcg-hot-maring-left	Hot icon left margin	`$spacing-xs`
--pmcg-label-margin-botttom	Label bottom margin	`$spacing-xs`
--pmcg-label-padding-lr	Label left/right padding	`$spacing-xs`
--pmcg-prize-set-spacing	Prize settings padding	`$spacing-lg`
--pmcg-prize-item-margin-bottom	Prize item bottom margin	`$spacing-lg`
--pmcg-setting-margin-top	Settings area top margin	`$spacing-lg`
--pmcg-cell-spacing	Setting item inner spacing	`$spacing-lg`
--pmcg-cell-icon-maring-left	Setting item icon left margin	`$spacing-sm`
--pmcg-foot-spacing-lr	Footer left/right margin	`.72rem`
--pmcg-foot-spacing-tb	Footer top/bottom margin	`$spacing-lg`
--pmcg-container-padding-bottom	Container bottom padding	`2rem`

# Size System

CSS Variable	Description	Default
--pmcg-head-height	Header height	`3rem`
--pmcg-upload-logo-size	Logo upload size	`1.44rem`
--pmcg-exchange-size	Switch icon size	`.4rem`
--pmcg-hot-icon-size	Hot icon size	`.32rem`
--pmcg-label-height	Label height	`.28rem`
--pmcg-swiper-wrap-height	Swiper wrapper height	`1.46rem`
--pmcg-swiper-wrap-height-xiushi	Swiper wrapper extra height	`.3rem`
--pmcg-swiper-card-height	Swiper card height	`1.24rem`
--pmcg-swiper-card-active-height	Swiper card active height	`1.46rem`
--pmcg-foot-height	Footer height	`1.4rem`
--pmcg-cell-more-height	More settings height	`1.08rem`
--pmcg-swiper-card-name-width	Swiper card name width	`2rem`
--pmcg-exchange-icon-size	Switch icon size	`.32rem`
--pmcg-name-icon-size	Name edit icon size	`.28rem`
--pmcg-play-title-height	Tournament name height	`$spacing-xl`
--pmcg-prize-set-border	Prize settings border width	`.12rem`
--pmcg-more-border-width	More settings border width	`.12rem`
--pmcg-swiper-select-width	Swiper select icon width	`.44rem`
--pmcg-swiper-select-height	Swiper select icon height	`.44rem`

# Color System

CSS Variable	Description	Default
--pmcg-cell-icon-color-text	Setting item icon color	`$color-icon-default`
--pmcg-cell-desc-color-text	Setting item description text color	`$color-text-secondary`
--pmcg-cell-tip-color-text	Setting item tip text color	`$color-text-invert-default`
--pmcg-cell-title-color-text	Setting item title text color	`$color-text-primary`
--pmcg-cell-more-color-text	More text color	`$color-text-primary`
--pmcg-cell-color-border	Setting item border color	`$color-divider-light`
--pmcg-label-color-text	Label text color	`$color-text-invert-default`
--pmcg-label-color-border	Label border color	`$color-border-secondary`
--pmcg-swiper-card-desc-text-color	Swiper card description text color	`$color-text-invert-dark`
--pmcg-swiper-card-name-color	Swiper card name color	`$color-text-primary`
--pmcg-swiper-card-active-name-color	Swiper card active name color	`$color-text-brand`
--pmcg-title-info-color-text	Title info text color	`$color-text-invert-default`
--pmcg-title-color-text	Title text color	`$color-text-primary`
--pmcg-name-icon-color	Name edit icon color	`$color-text-primary`
--pmcg-name-text-color	Name text color	`$color-text-primary`
--pmcg-exchange-color-text	Switch icon text color	`$color-text-invert-light`
--pmcg-imgwrap-color-border	Logo container border color	`$color-divider-light`
--pmcg-imgwrap-bg-color	Logo container background color	`$color-surface-default`
--pmcg-exchange-bg-color	Switch icon background color	`$color-surface-brand`
--pmcg-foot-bg-color	Footer background color	`#fff`
--pmcg-prize-set-border-color	Prize settings border color	`$color-divider-light`
--pmcg-more-border-color	More settings border color	`$color-divider-light`
--pmcg-swiper-card-color-border	Swiper card border color	`$color-surface-brand-light2`
--pmcg-swiper-card-active-color-border	Swiper card active border color	`$color-surface-brand`

# Typography System

CSS Variable	Description	Default
--pmcg-font-weight-bold	Bold font weight	`$font-weight-bold`
--pmcg-cell-more-font-size	More text font size	`$font-size-sm`
--pmcg-cell-icon-font-size	Setting item icon size	`.4rem`
--pmcg-cell-desc-font-size	Setting item description font size	`$font-size-md`
--pmcg-cell-tip-font-size	Setting item tip font size	`$font-size-xs`
--pmcg-cell-title-font-size	Setting item title font size	`$font-size-lg`
--pmcg-label-font-size	Label font size	`$font-size-xs`
--pmcg-swiper-card-desc-font-size	Swiper card description font size	`.16rem`
--pmcg-swiper-card-name-font-size	Swiper card name font size	`$font-size-sm`
--pmcg-swiper-card-active-name-font-size	Swiper card active name font size	`$font-size-md`
--pmcg-swiper-card-active-desc-font-size	Swiper card active description font size	`.18rem`
--pmcg-title-info-font-size	Title info font size	`$font-size-md`
--pmcg-title-text-font-size	Title text font size	`$font-size-lg`
--pmcg-name-font-weight	Logo name font weight	`$font-weight-bold`

# Border Radius System

CSS Variable	Description	Default
--pmcg-border-radius-circle	Circle border radius	`$border-radius-circle`
--pmcg-label-border-radius	Label border radius	`.04rem`
--pmcg-swiper-card-radius	Swiper card border radius	`$border-radius-xs`

# Shadow System

CSS Variable	Description	Default
--pmcg-foot-shadow	Footer shadow	`$shadow-lg`
--pmcg-swiper-card-shadow	Swiper card shadow	`0 2px 2px rgba(104, 130, 201, .17)`

# Others

CSS Variable	Description	Default
--pmcg-bg-pic	Page background image	`url('...')`
--pmcg-hot-icon-pic	Hot icon image	`url('...')`
--pmcg-swiper-select-icon	Select icon image	`url('...')`

# Usage Example

/* Custom create game component styles */
:root {
  --pmcg-foot-bg-color: #f5f5f5;
  --pmcg-swiper-card-active-color-border: #1890ff;
  --pmcg-title-color-text: #333;
}

/* Or override via customClass */
.custom-create-game {
  --pmcg-head-height: 4rem;
  --pmcg-swiper-card-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

# Use Cases

# 1. Gaming Tournament Creation

Support multiple game mode selection
Flexible tournament configuration options
Complete prize setup functionality

# 2. Competitive Match Organization

Quick creation of standardized matches
AI-assisted tournament management
Custom match rules settings

# 3. Community Event Creation

Simplified event creation process
Rich event configuration options
Support for various event formats

# Notes

Data Structure: Ensure complete data structure is passed, especially modeList and createList
Image Resources: Recommend using high-quality mode images and logos, preferably square format
Permission Control: Display different setting options based on user permissions
State Management: Properly handle various switch states and data synchronization
Mini Program Compatibility: Supports WeChat mini program virtualHost configuration
Responsive Design: Component automatically adjusts layout based on content

# Dependencies

PressMatchPrizeSet: Prize settings component
PressButton: Button component
PressField: Input field component
PressSwiper: Swiper component
PressSwiperItem: Swiper item component
PressSwitch: Switch component

← MatchCountDownNormal MatchCreateTeamPopup →