更新记录

0.0.1（2026-03-12） 下载此版本

Changelog

All notable changes to this project will be documented in this file.

[1.0.0] - 2024-03-12

Added

• 初始化项目结构 (UniApp)。
• 集成 600 个 CSS 形状样式 (static/shapes.css)。
• 实现 CssShape Vue 组件，支持 ID 和名称显示。
• 实现主页 (pages/index/index.vue) 网格布局展示所有图形。
• 添加 Python 脚本 (convert_px.py) 用于批量转换 px 为 rpx。
• 实现点击图形自动复制 HTML 代码功能。
• 添加项目文档 (README.md, LICENSE, CHANGELOG.md)。

Changed

• 优化 CSS 样式单位，适配移动端显示 (rpx)。

平台兼容性

uni-app(4.61)

Pluis Shapes (CSS 特殊形状)

这是一个基于 UniApp 的 CSS 形状展示项目，包含了 600 种纯 CSS 实现的特殊图形。

特性

• 600 种 CSS 图形：涵盖各种几何形状、图标和装饰图案。
• 响应式设计：所有图形尺寸已适配 UniApp 的 rpx 单位（原 px 值的 2 倍）。
• 一键复制：点击任意图形即可复制其 HTML 调用代码。
• 组件化：提供可复用的 CssShape 组件。

目录结构

• components/CssShape/CssShape.vue: 核心形状展示组件。
• pages/index/index.vue: 主展示页面。
• static/shapes.css: 包含所有图形样式的 CSS 文件。
• common/shapes.js: 图形名称映射数据。
• convert_px.py: 用于批量转换 CSS 单位的 Python 脚本。

快速开始

1. 使用 HBuilderX 导入项目。
2. 运行到浏览器或小程序模拟器。

使用组件

<template>
    <CssShape :id="1" />
</template>

<script>
    import CssShape from '@/components/CssShape/CssShape.vue';

    export default {
        components: {
            CssShape
        }
    }
</script>

贡献

欢迎提交 Issue 和 Pull Request。

许可证

本项目基于 MIT 许可证开源。详见 LICENSE 文件。