MatchSignQRCode | Press Next

# MatchSignQRCode

Sign-in QR code component for displaying event check-in QR codes with a clean card-style design. Supports customizable title, venue name, and tip text.

# Import

import PressMatchSignQRCode from 'press-next/press-match-sign-q-r-code/press-match-sign-q-r-code';

# Usage

# Basic Usage

Display sign-in QR code with title, venue name, and tip text.

<template>
  <PressMatchSignQRCode
    qr-code-url="https://image-1251917893.file.myqcloud.com/general-match-components/img/common/qrcode/qrcode-test.png"
    title="Sign-in QR Code"
    venue-name="NetFish Internet Cafe Kexing Road Store"
    tips-text="Long press to save image"
  />
</template>

# Using Mock Data

The component provides a getMockData function to get complete component props configuration.

<template>
  <PressMatchSignQRCode v-bind="componentProps" />
</template>

<script setup lang="ts">
import { getMockData } from 'press-next/press-match-sign-q-r-code/demo-data';
import PressMatchSignQRCode from 'press-next/press-match-sign-q-r-code/press-match-sign-q-r-code';

const componentProps = getMockData();
</script>

# Custom Title and Venue

Customize title text and venue name.

<template>
  <PressMatchSignQRCode
    qr-code-url="https://example.com/qrcode.png"
    title="Competition Check-in"
    venue-name="Tencent Binhai Building"
    tips-text="Please scan to check in"
  />
</template>

# Simplified Version

Display only QR code without venue name and tips.

<template>
  <PressMatchSignQRCode
    qr-code-url="https://example.com/qrcode.png"
    title="Sign-in QR Code"
    venue-name=""
    tips-text=""
  />
</template>

# Custom Styling

Customize component styles via CSS variables.

<template>
  <PressMatchSignQRCode
    qr-code-url="https://example.com/qrcode.png"
    title="Sign-in QR Code"
    venue-name="NetFish Internet Cafe Kexing Road Store"
    custom-class="my-qrcode"
  />
</template>

<style>
.my-qrcode {
  --pms-qrcode-title-text-color: #ff6b00;
  --pms-qrcode-main-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --pms-qrcode-qr-code-size: 6rem;
}
</style>

# API

# Props

Attribute	Description	Type	Default
qr-code-url	QR code image URL	string	`''`
title	Title text	string	`'签到二维码'`
venue-name	Venue name	string	`''`
tips-text	Tip text	string	`'长按保存图片'`
custom-class	Custom class name	string	`''`

# Mock Data

The component provides a demo-data module for quick integration and testing.

import { getMockData } from 'press-next/press-match-sign-q-r-code/demo-data';

// Get default configuration data
const componentProps = getMockData();
// Returns: { qrCodeUrl, title, venueName, customClass, tipsText }

# Features

# Core Functions

✅ QR Code Display: Clearly display sign-in QR code with customizable size
✅ Card Design: Elegant card layout with decorative rounded cutouts
✅ Complete Information: Includes title, venue name, and operation tips
✅ Flexible Customization: Support customizing all text content and styles

# Design Highlights

🎨 Visual Appeal: Gradient background and decorative cutout design
🎨 Clear Hierarchy: Title decoration, dashed divider, content area clearly layered
🎨 Responsive: Adapts to various screen sizes

# Use Cases

Event on-site check-in
Activity entrance verification
Member sign-in and check-in
Offline event registration

# Theme Customization

The component provides the following CSS variables for custom styling. Please refer to the ConfigProvider component for usage.

# Style Variables

Name	Default Value	Description
--pms-qrcode-main-padding-top	$spacing-xxl	Main top padding
--pms-qrcode-title-after-plr	.2rem	Title decoration left-right padding
--pms-qrcode-qr-mt	.96rem	QR code top margin
--pms-qrcode-name-mt	.4rem	Venue name top margin
--pms-qrcode-divider-mt	1.24rem	Divider top margin
--pms-qrcode-tips-mt	.56rem	Tips top margin
--pms-qrcode-qr-code-size	5.32rem	QR code size
--pms-qrcode-main-height	10.28rem	Main height
--pms-qrcode-title-after-height	.4rem	Title decoration height
--pms-qrcode-title-text-color	$color-text-brand	Title text color
--pms-qrcode-name-text-color	$color-text-primary	Venue name color
--pms-qrcode-title-after-bg	linear-gradient(...)	Title decoration background
--pms-qrcode-qr-code-bg	none	QR code background
--pms-qrcode-divider-color	$color-border-tertiary	Divider color
--pms-qrcode-tips-text-color	$color-text-invert-default	Tips text color
--pms-qrcode-title-font-size	$font-size-xxl	Title font size
--pms-qrcode-title-font-weight	$font-weight-bold	Title font weight
--pms-qrcode-name-font-size	$font-size-lg	Venue name font size
--pms-qrcode-tips-font-size	$font-size-lg	Tips font size
--pms-qrcode-qr-border-radius	0	QR code border radius
--pms-qrcode-main-border-radius	$border-radius-sm	Main border radius
--pms-qrcode-main-shadow	drop-shadow(...)	Main shadow
--pms-qrcode-main-bg	radial-gradient(...)	Main background

# Custom Style Example

<template>
  <PressMatchSignQRCode
    class="custom-qrcode"
    qr-code-url="https://example.com/qrcode.png"
    title="Sign-in QR Code"
    venue-name="NetFish Internet Cafe Kexing Road Store"
  />
</template>

<style>
.custom-qrcode {
  /* Custom main background */
  --pms-qrcode-main-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  /* Custom text color */
  --pms-qrcode-title-text-color: #ffffff;
  --pms-qrcode-name-text-color: #ffffff;
  
  /* Custom QR code size */
  --pms-qrcode-qr-code-size: 6rem;
  
  /* Custom shadow */
  --pms-qrcode-main-shadow: drop-shadow(0 .08rem .32rem rgba(0, 0, 0, .3));
}
</style>

# FAQ

# How to adjust QR code size?

Use the --pms-qrcode-qr-code-size CSS variable:

.my-qrcode {
  --pms-qrcode-qr-code-size: 6rem; /* Default 5.32rem */
}

# How to hide venue name or tip text?

Set the corresponding prop to an empty string:

<PressMatchSignQRCode
  qr-code-url="..."
  title="Sign-in QR Code"
  venue-name=""
  tips-text=""
/>

# How to customize background style?

Use the --pms-qrcode-main-bg CSS variable:

.my-qrcode {
  --pms-qrcode-main-bg: linear-gradient(to bottom, #f0f0f0, #ffffff);
}

# How to modify decorative rounded cutout position?

The decorative rounded cutouts are positioned 60px (1.2rem) from the bottom. Adjust the position by modifying the calc(100% - 1.2rem) and 1.2rem values in the --pms-qrcode-main-bg variable.

← MatchSignActionPopup MatchTableHeader →