中分站点权限卡 组件（测试中）

改编自原作，由Dr Talcite和Yosk-San king合著

02区 - 动态大小、半透明纯色颜色减淡抬头

四级权限卡

Level 4 Keycard

Area-CN-02

特殊收容措施基金会

对比原图

---

44站 - 固定大小、渐变抬头

四级权限卡

Level 4 Keycard

Site-CN-44

特殊收容措施基金会

对比原图

---

96站 - 动态大小、纯色黑字抬头（有问题）

四级权限卡

Level 4 Keycard

Site-CN-96

特殊收容措施基金会

对比原图

---

• 基本要求：
  • 权限卡和站点的字可以修改
  • 底图可以修改（包括图片位置）
  • 版头可以设置不同混合模式、透明度、颜色（上下两个可以不同，以及fallback填充色）或渐变；
  • 卡片的全局大小可以修改（均依赖于一个变量card-width，并且是等比缩放）
  • 二维码可以自行上传，或者使用某些网站的api生成
  • 同一页面里的每个卡片样式可以不同
• 进阶要求：可以修改顶上的“SCP基金会”字样和logo；可以添加分割线（增加背景的区分度）
• 卡片背面：
  • 自定义图片
  • 颜色
  • 群号
  • 条形码
  • 站点logo水印
  • 下面的一句话标语
• 可以选择是否生成背面，以及是否使用悬停翻转功能。
• 可以使用html2canvas库将div保存为图片并下载。或许需要将CSS代码复制一份写一个html，并且使用输入框。

相比原图，统一了字体阴影，并且更方便控制各种尺寸。

问题：

• 要不要让文字阴影也能自定义？
• 加入分割线的必要性？
• 抬头如果选择黑字，目前适配不良，因为logo和二维码都是图片，需要使用反相滤镜

flex布局教程

grid布局教程

二维码API

<简单的介绍>

在你的页面中插入下面这行代码以使用本组件：

现在暂时用不了，还没设定自定义参数

[[include :area-cn-02:component:authcard]]

<其它解释说明/选项/示例>

---

保存卡片（测试中）

请稍候加载出来。这里面的文字是可以直接点击编辑的

利用了snapDOM库，将上面的div保存为png图片。然而，整个库存在各种各样的小bug，所以仍然会出问题

另外，直接引用wikidot附件的图会被CORS拦截

---

卡面字体是思源黑体（Noto Sans SC Black）。

SCP字样字体是Bauhaus LT Demi。

---

○ 源代码

/* 思源黑体-粗 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@900&display=swap');
 
/* 整体设置 */
.card {
    --card-width: calc(80px + 40vw);
    --card-height: calc(var(--card-width) * 0.66);
    --card-radius: calc(var(--card-width) * 0.05);
 
    margin: 2em auto;
    width: var(--card-width);
    max-width: max-content !important;
    height: var(--card-height);
    position: relative;
    border-radius: var(--card-radius);
    overflow: hidden;
 
    display: flex;
    flex-direction: column;
 
    color: white;
    font-family: 'Noto Sans SC', "黑体", Tahoma, sans-serif;
    font-weight: 900;
 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
 
/* 去掉卡面里p的行高 */
.card p {
    line-height: 0%;
}
 
.card-header, .card-body, .card-footer {
    width: 100%;
}
 
/* 正面上下两个部分的背景 */
.card-header, .card-footer {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
 
/* 正面最上部分 */
.card-header {
    height: calc(var(--card-height) * 0.33);
    display: flex;
    justify-content: space-around;
}
 
/* 正面最上部分的背景图片位置 */
.slogan, .qrcode {
    background-repeat: no-repeat;
    background-position: center;
    flex: none;
}
 
/* “SCP基金会”抬头 */
.slogan {
    background-image: url(https://area-cn-02.wikidot.com/local--files/component:authcard/header.png);
    width: calc(var(--card-width)* 0.7);
    background-size: calc(var(--card-width)* 0.63);
    filter: drop-shadow(calc(var(--card-height) * 0.007) calc(var(--card-height) * 0.007) 0px rgba(0,0,0,.5));
}
 
/* 二维码模块 */
.qrcode {
    width: calc(var(--card-width)* 0.3);
    background-size: calc(var(--card-width)* 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
 
    /* 将混合模式设置成变亮，这样如果二维码有黑色背景将被隐藏 */
    mix-blend-mode: lighten;
}
 
/* 如果用户设定了背景图片，则隐藏接口二维码；检测属性值里是否包括{$qrcode}字符串，如果没有，说明用户设定了这个属性，则隐藏里面的二维码图片 */
.qrcode:not([style*="{$qrcode}"]) img {
    display: none;
}
 
.qrcode img {
    filter: invert(1);
    width: calc(var(--card-width)* 0.15);
}
 
/* 正面中间部分 */
.card-body {
    height: calc(var(--card-height) * 0.55);
    display: grid;
    grid-template-areas: 
        "level rf"
        "level-en rf"
        "site-name rf";
    grid-template-columns: 4.5fr 1fr;
}
 
/* 中间部分的文字阴影 */
.card-body p {
    filter: drop-shadow(calc(var(--card-height) * 0.01) calc(var(--card-height) * 0.01) 0px rgba(0,0,0,.5));
    margin-left: calc(var(--card-width)* 0.04);
}
 
/* 正面最下部分 */
.card-footer {
    height: calc(var(--card-height) * 0.12);
    text-align: center;
    letter-spacing: calc(var(--card-height) * 0.05);
    font-size: calc(var(--card-height) * 0.06);
}
 
/* 最下部分的文字阴影 */
.card-footer p {
    filter: drop-shadow(calc(var(--card-height) * 0.007) calc(var(--card-height) * 0.007) 0px rgba(0,0,0,.5));
}
 
/* 权限卡等级 */
.level {
    grid-area: level;
    font-size: calc(var(--card-height) * 0.15);
}
 
/* 英文等级 */
.level-en {
    grid-area: level-en;
    margin-top: calc(var(--card-height) * -0.18);
    font-size: calc(var(--card-height) * 0.085);
}
 
/* 站点名称 */
.site-name {
    grid-area: site-name;
    margin-top: calc(var(--card-height) * -0.14);
    font-size: calc(var(--card-height) * 0.06);
}
 
/* 右侧的射频感应符号 */
.rf {
    grid-area: rf;
    background-image: url(https://area-cn-02.wikidot.com/local--files/component:authcard/rf.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center calc(var(--card-height)* 0.06);
}