竖版身份卡组件

源页面

Dr Talcite

2025年3月31日

修订 25

#组件

评分

↑ 10

↓ 0

支持率

100%

总票数 10

Wilson 95% 下界

72.2%

在相同票数下更稳健的支持率估计

争议指数

0.000

评分趋势

按周聚合

加载图表中...

页面源码

页面版本:

[[module CSS]] @import url('https://scp-wiki-cn.wdfiles.com/local--code/component:v-id-card/1'); [[/module]] [[iftags +组件]] [[include :scp-wiki:info:start]] **作者：**[[*user Dr Talcite]] **致谢：**[[*user EstrellaYoshte]]的[[[component:id-card| 身份卡组件]]] 英文版[*https://scp-wiki.wikidot.com/component:v-id-card 见此] 世界语版[*https://scp-esperanto.wikidot.com/component:v-id-card 见此] ---- = **文件信息** # *https://area-cn-02.wdfiles.com/local--files/component:v-id-card/scp-logo-alternate.svg ，修改自https://commons.wikimedia.org/wiki/File:SCP_Foundation_(emblem).svg ，CC BY-SA 3.0 Unported # *https://area-cn-02.wdfiles.com/local--files/component:v-id-card/alexis-talcite.png ，自己画的 # *https://area-cn-02.wdfiles.com/local--files/component:v-id-card/placeholder.svg ，自己画的 # *https://scp-sandbox-3.wdfiles.com/local--files/component:v-id-card/lillian-lillihammer.gif ，修改自[[*user Fenmoth]]的[*https://scp-wiki.wikidot.com/art:fenmothsartpage 艺作] # *https://area-cn-02.wdfiles.com/local--files/component:v-id-card/merry-dashmere.png ，自己画的 [[include :scp-wiki:info:end]] [[=]] ++ 这是什么？ [[/=]] [[div class="blockquote"]] 可自定义的人员身份卡，既可做装饰组件也可提供人物信息。其灵感主要源自[[[component:id-card| 身份卡组件]]]，但采用了竖向、更紧凑的排版，且增加了“设施”一栏。 [[/div]] [[=]] ---- ++ 示例 ---- [[/=]] [[div_ class="id-card-vertical"]] [[div_ class="level"]] [[div class="level-bar-container level-4"]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[/div]] [[div_ class="level-name"]] C-4 [[/div]] [[/div]] [[div_ class="portrait" style="background-image: var(--v-id-card-gradient-1);"]] [[image https://area-cn-02.wdfiles.com/local--files/component:v-id-card/alexis-talcite.png]] [[/div]] [[div_ class="data"]] [[div_ class="barcode-wrap"]] [[div_ class="barcode"]] *4951855* [[/div]] [[div_ class="barcode-num"]] 4951855 [[/div]] [[/div]] [[div_ class="issue-exp"]] [[span class="issue-exp-title"]]签发-到期[[/span]] [[span class="issue-exp-content"]]2018/12[[/span]] [[span class="issue-exp-content"]]2028/12[[/span]] [[/div]] [[/div]] [[div_ class="info"]] [[div_ class="fullname"]] [[span class="info-title"]]姓名[[/span]] [[span class="info-content" style="white-space: nowrap;"]]Alexis Asriel Talcite[[/span]] [[/div]] [[div_ class="department"]] [[span class="info-title"]]部门[[/span]] [[span class="info-content"]]信息技术与模因学[[/span]] [[/div]] [[div_ class="position"]] [[span class="info-title"]]职位[[/span]] [[span class="info-content"]]研究主管[[/span]] [[/div]] [[div_ class="facility"]] [[span class="info-title"]]设施[[/span]] [[span class="info-content"]]Area-CN-02[[/span]] [[/div]] [[/div]] [[/div]] [[module CSS]] /* 代码块注释样式 */ span.desc { user-select: none; color: darkblue; } /* 关键字ruby样式 */ .keycap ~ :is(.rt, rt) { line-height: 2; } [[/module]] [[=]] ---- ++ 如何使用？ ---- [[/=]] 复制下面的代码，粘贴到你页面的任何位置（另起一行），然后阅读下面的指南，填入各项信息。 [[div class="blockquote"]] @@[[include :scp-wiki-cn:component:v-id-card@@ |portrait= |portrait-bg-color= |portrait-gradient= |name= |department= |position= |facility= |class= |level= |number= |issue= YYYY/MM |exp= YYYY/MM @@]]@@ [[/div]] 你可以在同一个页面上放入多张身份卡，每一张上的内容都可以不同。 [[div class="blockquote"]] @@[[include :scp-wiki-cn:component:v-id-card@@ |portrait= [[span class="desc"]] {{肖像图片链接。如果留空，将显示成一个加载失败的图片标志。}} [[/span]] |portrait-bg-color= [[span class="desc"]] {{可选项。可以填入[*https://www.w3schools.com/cssref/css_colors.php 保留颜色名]，RGB（红绿蓝）或者HEX（十六进制）颜色码。这是证件照的背景色（默认透明）。如果你的图是透明底，这个选项会比较有用。}} [[/span]] |portrait-gradient= [[span class="desc"]] {{可选项。可以填入1/2/3或者其它关键字。这是证件照背景的渐变色预设。效果参见下文。}} [[/span]] |name= [[span class="desc"]]{{姓名。如果文字在你不想要的地方换行，你可以禁用自动换行（详情见下）或者另起一行。下同。}}[[/span]] |department= [[span class="desc"]]{{所属部门}}[[/span]] |position= [[span class="desc"]]{{工作职位}}[[/span]] |facility= [[span class="desc"]]{{所在设施（站点）}}[[/span]] |class= [[span class="desc"]]{{A/B/C/D/E，指明人员等级，可以参考[[[security-clearance-levels|这个页面]]]}}[[/span]] |level= [[span class="desc"]]{{0-5，指明权限等级}}[[/span]] |number= [[span class="desc"]]{{证件序列号}}[[/span]] |issue= YYYY/MM[[span class="desc"]] {{发卡日期}}[[/span]] |exp= YYYY/MM[[span class="desc"]] {{证件有效期至}}[[/span]] @@]]@@ [[/div]] [[collapsible show="▷ 选色器" hide="▽ 选色器"]] [[iframe https://photokit.com/colors/app/color-picker/#amp=1 frameborder="0" scrolling="no" title="颜色选择器" style="width: 100%; height: 550px;" sandbox="allow-scripts allow-popups allow-downloads"]] [[/collapsible]] 如果此组件正常工作，条形码应该是可以扫描出来的。 [[module ListUsers users="."]] --如果不知道序列号用什么，可以考虑一下用Wikidot UID：--系统获取到您当前登录账号的UID是 %%number%%。这个组件在最初设计时就是按照7位数字的条形码高度排的版。 [[/module]] 卡片的默认宽度是响应式设计，会随着屏幕宽度而自动调整。卡片最小高度是宽度的[[$ \sqrt{2} $]]倍，这种情况下其长宽比与[*https://zhuanlan.zhihu.com/p/10675562175 标准A系列纸张]一样，方便打印出来。 [[=]] ---- ++ 渐变预设 ---- [[/=]] 如果要使用这个，请将相应的关键字填入[[span class="keycap"]]|portrait-gradient= [[/span]]后面。 [[div_ style="display: flex; align-items: center; justify-content: center; gap: 1em;"]] [[div_ style="width: 47vw; aspect-ratio: 3/4; background-image: var(--v-id-card-gradient-1); "]] [[/div]] [[div_ style="width: 47vw; aspect-ratio: 3/4; background-image: var(--v-id-card-gradient-2); "]] [[/div]] [[div_ style="width: 47vw; aspect-ratio: 3/4; background-image: var(--v-id-card-gradient-3); "]] [[/div]] [[/div]] [[div_ style="display: flex; align-items: center; justify-content: center; gap: 1em;"]] [[div style="width: 21vw; text-align: center; font-size: 90%; padding: 1em; "]] 渐变1 [[span class="keycap"]][#u-preview-1 1][[/span]] [[/div]] [[div style="width: 21vw; text-align: center; font-size: 90%; padding: 1em; "]] 渐变2 [[span class="keycap"]][#u-preview-2 2][[/span]] [[/div]] [[div style="width: 21vw; text-align: center; font-size: 90%; padding: 1em; "]] 渐变3 [[span class="keycap"]][#u-preview-3 3][[/span]] [[/div]] [[/div]] 亦有一些骄傲旗可用。现在可用的包括[[span class="keycap"]][#u-preview-pride pride][[/span]]（基本六色彩虹）以及[[span class="ruby"]][[span class="keycap"]][#u-preview-phil phil][[/span]][[span class="rt"]]费城骄傲旗[[/span]][[/span]]（包括有色人种），当然还有更多（按字母顺序）： [[span class="ruby"]][[span class="keycap"]][#u-preview-abro abro][[/span]][[span class="rt"]]流性恋[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-agender agender][[/span]][[span class="rt"]]无性别[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-aroace aroace][[/span]][[span class="rt"]]无浪漫+无性吸引[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-aromantic aromantic][[/span]][[span class="rt"]]无浪漫[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-asexual asexual][[/span]][[span class="rt"]]无性吸引[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-bi bi][[/span]][[span class="rt"]]双性恋[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-bigender bigender][[/span]][[span class="rt"]]双性别[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-demiboy demiboy][[/span]][[span class="rt"]]部分男性[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-demigender demigender][[/span]][[span class="rt"]]部分性别[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-demigirl demigirl][[/span]][[span class="rt"]]部分女性[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-enbian enbian][[/span]][[span class="rt"]]非二元同性恋[[/span]][[/span]]， [[span class="ruby"]][[span class="keycap"]][#u-preview-gaymen gaymen][[/span]][[span class="rt"]]男同性恋[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-genderfluid genderfluid][[/span]][[span class="rt"]]流动性别[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-genderflux genderflux][[/span]][[span class="rt"]]波动性别[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-genderqueer genderqueer][[/span]][[span class="rt"]]性别酷儿[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-lesbian lesbian][[/span]][[span class="rt"]]女同性恋[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-nb nb][[/span]][[span class="rt"]]非二元性别[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-neutrois neutrois][[/span]][[span class="rt"]]中性[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-omni omni][[/span]][[span class="rt"]]全性恋[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-pan pan][[/span]][[span class="rt"]]泛性恋[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-pangender pangender][[/span]][[span class="rt"]]泛性别[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-poly poly][[/span]][[span class="rt"]]多性恋[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-qpr qpr][[/span]][[span class="rt"]]酷儿柏拉图[[/span]][[/span]]，[[span class="ruby"]][[span class="keycap"]][#u-preview-trans trans][[/span]][[span class="rt"]]跨性别[[/span]][[/span]]。以后可能会加入更多。点击这些关键词按钮，可以在下面预览其显示效果。 [[collapsible show="▷ 预览" hide="▽ 预览"]] [[div_ class="id-card-vertical"]] [[div_ class="level"]] [[div class="level-bar-container level-3"]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[/div]] [[div_ class="level-name"]] C-3 [[/div]] [[/div]] [[div_ id="u-preview-1"]] [[/div]] [[div_ id="u-preview-2"]] [[/div]] [[div_ id="u-preview-3"]] [[/div]] [[div_ id="u-preview-pride"]] [[/div]] [[div_ id="u-preview-phil"]] [[/div]] [[div_ id="u-preview-abro"]] [[/div]] [[div_ id="u-preview-agender"]] [[/div]] [[div_ id="u-preview-aroace"]] [[/div]] [[div_ id="u-preview-aromantic"]] [[/div]] [[div_ id="u-preview-asexual"]] [[/div]] [[div_ id="u-preview-bi"]] [[/div]] [[div_ id="u-preview-bigender"]] [[/div]] [[div_ id="u-preview-demiboy"]] [[/div]] [[div_ id="u-preview-demigender"]] [[/div]] [[div_ id="u-preview-demigirl"]] [[/div]] [[div_ id="u-preview-enbian"]] [[/div]] [[div_ id="u-preview-gaymen"]] [[/div]] [[div_ id="u-preview-genderfluid"]] [[/div]] [[div_ id="u-preview-genderflux"]] [[/div]] [[div_ id="u-preview-genderqueer"]] [[/div]] [[div_ id="u-preview-lesbian"]] [[/div]] [[div_ id="u-preview-nb"]] [[/div]] [[div_ id="u-preview-neutrois"]] [[/div]] [[div_ id="u-preview-omni"]] [[/div]] [[div_ id="u-preview-pan"]] [[/div]] [[div_ id="u-preview-pangender"]] [[/div]] [[div_ id="u-preview-poly"]] [[/div]] [[div_ id="u-preview-qpr"]] [[/div]] [[div_ id="u-preview-trans"]] [[/div]] [[div_ class="portrait"]] [[image https://area-cn-02.wdfiles.com/local--files/component:v-id-card/placeholder.svg]] [[/div]] [[div_ class="data"]] [[div_ class="barcode-wrap"]] [[div_ class="barcode"]] *0000000* [[/div]] [[div_ class="barcode-num"]] 0000000 [[/div]] [[/div]] [[div_ class="issue-exp"]] [[span class="issue-exp-title"]]签发-到期[[/span]] [[span class="issue-exp-content"]]YYYY/MM[[/span]] [[span class="issue-exp-content"]]YYYY/MM[[/span]] [[/div]] [[/div]] [[div_ class="info"]] [[div_ class="fullname"]] [[span class="info-title"]]姓名[[/span]] [[span class="info-content" style="white-space: nowrap;"]][Placeholder][[/span]] [[/div]] [[div_ class="department"]] [[span class="info-title"]]部门[[/span]] [[span class="info-content"]][Placeholder][[/span]] [[/div]] [[div_ class="position"]] [[span class="info-title"]]职位[[/span]] [[span class="info-content"]][Placeholder][[/span]] [[/div]] [[div_ class="facility"]] [[span class="info-title"]]设施[[/span]] [[span class="info-content"]][Placeholder][[/span]] [[/div]] [[/div]] [[/div]] [[/collapsible]] ---- [[collapsible show="▷ 使用示例" hide="▽ 使用示例"]] [[div class="blockquote"]] @@[[include :scp-wiki-cn:component:v-id-card@@ |portrait= ##blue|@@https://scp-sandbox-3.wdfiles.com/local--files/component:v-id-card/lillian-lillihammer.gif@@## |portrait-gradient= ##blue|3## |name= ##blue|Lillian Shelby ## ##blue|Lillihammer## |department= ##blue|模因与反模因部## |position= ##blue|分部主席## |facility= ##blue|Site-43## |class= ##blue|C## |level= ##blue|4## |number= ##blue|19990011## |issue= ##blue|1995/01## |exp= ##blue|2035/01## @@]]@@ [[/div]] [[div_ class="id-card-vertical"]] [[div_ class="level"]] [[div class="level-bar-container level-4"]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[/div]] [[div_ class="level-name"]] C-4 [[/div]] [[/div]] [[div_ class="portrait" style="background-image: var(--v-id-card-gradient-3);"]] [[image https://scp-sandbox-3.wdfiles.com/local--files/component:v-id-card/lillian-lillihammer.gif]] [[/div]] [[div_ class="data"]] [[div_ class="barcode-wrap"]] [[div_ class="barcode"]] *19990011* [[/div]] [[div_ class="barcode-num"]] 19990011 [[/div]] [[/div]] [[div_ class="issue-exp"]] [[span class="issue-exp-title"]]签发-到期[[/span]] [[span class="issue-exp-content"]]1995/01[[/span]] [[span class="issue-exp-content"]]2035/01[[/span]] [[/div]] [[/div]] [[div_ class="info"]] [[div_ class="fullname"]] [[span class="info-title"]]姓名[[/span]] [[span class="info-content"]]Lillian Shelby Lillihammer[[/span]] [[/div]] [[div_ class="department"]] [[span class="info-title"]]部门[[/span]] [[span class="info-content"]]模因与反模因部[[/span]] [[/div]] [[div_ class="position"]] [[span class="info-title"]]职位[[/span]] [[span class="info-content"]]分部主席[[/span]] [[/div]] [[div_ class="facility"]] [[span class="info-title"]]设施[[/span]] [[span class="info-content"]]Site-43[[/span]] [[/div]] [[/div]] [[/div]] ---- [[div class="blockquote"]] @@[[include :scp-wiki-cn:component:v-id-card@@ |portrait= ##blue|@@https://scp-wiki.wdfiles.com/local--files/component:v-id-card/alex-thorley.png@@ ## |portrait-gradient= ##blue|nb ## |name= ##blue|Alex Thorley ## |department= ##blue|非现实部## |position= ##blue|[在此插入文字] ## |facility= ##blue|Site-0 ## |class= ##blue|E ## |level= ##blue|0 ## |number= ##blue|NaN ## |issue= ##blue|未知## |exp= ##blue|∞ ## @@]]@@ [[/div]] [[div_ class="id-card-vertical"]] [[div_ class="level"]] [[div class="level-bar-container level-0"]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[/div]] [[div_ class="level-name"]] E-0 [[/div]] [[/div]] [[div_ class="portrait" style="background-image: var(--v-id-card-gradient-nb);"]] [[image https://scp-wiki.wdfiles.com/local--files/component:v-id-card/alex-thorley.png]] [[/div]] [[div_ class="data"]] [[div_ class="barcode-wrap"]] [[div_ class="barcode"]] *NaN* [[/div]] [[div_ class="barcode-num"]] NaN [[/div]] [[/div]] [[div_ class="issue-exp"]] [[span class="issue-exp-title"]]签发-到期[[/span]] [[span class="issue-exp-content"]]未知[[/span]] [[span class="issue-exp-content"]]∞[[/span]] [[/div]] [[/div]] [[div_ class="info"]] [[div_ class="fullname"]] [[span class="info-title"]]姓名[[/span]] [[span class="info-content"]]Alex Thorley[[/span]] [[/div]] [[div_ class="department"]] [[span class="info-title"]]部门[[/span]] [[span class="info-content"]]非现实部[[/span]] [[/div]] [[div_ class="position"]] [[span class="info-title"]]职位[[/span]] [[span class="info-content"]][在此插入文字][[/span]] [[/div]] [[div_ class="facility"]] [[span class="info-title"]]设施[[/span]] [[span class="info-content"]]Site-0[[/span]] [[/div]] [[/div]] [[/div]] = ##gray|//(肖像照片为故意留空。)//## [[/collapsible]] [[=]] ---- ++ 禁止换行 ---- [[/=]] 此选项可以防止特定某（几）项信息里的文字自动换行。警告：如果输入的文字内容过长，选择此项会导致溢出。 +++ 禁用……项的文字换行：姓名项： [[div class="blockquote"]] |name-nowrap= a [[/div]] 部门项： [[div class="blockquote"]] |dept-nowrap= a [[/div]] 职位项： [[div class="blockquote"]] |position-nowrap= a [[/div]] 设施项： [[div class="blockquote"]] |facility-nowrap= a [[/div]] [[collapsible show="▷ 显示对比" hide="▽ 折叠对比"]] +++ 默认（词内会自动换行） [[div class="blockquote"]] @@[[include :scp-wiki-cn:component:v-id-card@@ |portrait= @@https://area-cn-02.wdfiles.com/local--files/component:v-id-card/merry-dashmere.png@@ |portrait-gradient= 2 |name= Merry S. Dashmere |department= 科学部 |position= HMCL监督员 |facility= Area-03 |class= B |level= 5 |number= 001811 |issue= 2009/05 |exp= 2039/05 @@]]@@ [[/div]] [[div_ class="id-card-vertical"]] [[div_ class="level"]] [[div class="level-bar-container level-5"]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[/div]] [[div_ class="level-name"]] B-5 [[/div]] [[/div]] [[div_ class="portrait" style="background-image: var(--v-id-card-gradient-2);"]] [[image https://area-cn-02.wdfiles.com/local--files/component:v-id-card/merry-dashmere.png]] [[/div]] [[div_ class="data"]] [[div_ class="barcode-wrap"]] [[div_ class="barcode"]] *001811* [[/div]] [[div_ class="barcode-num"]] 001811 [[/div]] [[/div]] [[div_ class="issue-exp"]] [[span class="issue-exp-title"]]签发-到期[[/span]] [[span class="issue-exp-content"]]2009/05[[/span]] [[span class="issue-exp-content"]]2039/05[[/span]] [[/div]] [[/div]] [[div_ class="info"]] [[div_ class="fullname"]] [[span class="info-title"]]姓名[[/span]] [[span class="info-content"]]Merry S. Dashmere[[/span]] [[/div]] [[div_ class="department"]] [[span class="info-title"]]部门[[/span]] [[span class="info-content"]]科学部[[/span]] [[/div]] [[div_ class="position"]] [[span class="info-title"]]职位[[/span]] [[span class="info-content"]]HMCL监督员[[/span]] [[/div]] [[div_ class="facility"]] [[span class="info-title"]]设施[[/span]] [[span class="info-content"]]Area-03[[/span]] [[/div]] [[/div]] [[/div]] +++ 禁止换行 [[div class="blockquote"]] @@[[include :scp-wiki-cn:component:v-id-card@@ |portrait= @@https://area-cn-02.wdfiles.com/local--files/component:v-id-card/merry-dashmere.png@@ |portrait-gradient= 2 |name= Merry S. Dashmere ##red|**|name-nowrap= a**## |department= 科学部 |position= HMCL监督员 |facility= Area-03 |class= B |level= 5 |number= 001811 |issue= 2009/05 |exp= 2039/05 @@]]@@ [[/div]] [[div_ class="id-card-vertical"]] [[div_ class="level"]] [[div class="level-bar-container level-5"]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[/div]] [[div_ class="level-name"]] B-5 [[/div]] [[/div]] [[div_ class="portrait" style="background-image: var(--v-id-card-gradient-2);"]] [[image https://area-cn-02.wdfiles.com/local--files/component:v-id-card/merry-dashmere.png]] [[/div]] [[div_ class="data"]] [[div_ class="barcode-wrap"]] [[div_ class="barcode"]] *001811* [[/div]] [[div_ class="barcode-num"]] 001811 [[/div]] [[/div]] [[div_ class="issue-exp"]] [[span class="issue-exp-title"]]签发-到期[[/span]] [[span class="issue-exp-content"]]2009/05[[/span]] [[span class="issue-exp-content"]]2039/05[[/span]] [[/div]] [[/div]] [[div_ class="info"]] [[div_ class="fullname"]] [[span class="info-title"]]姓名[[/span]] [[span class="info-content" style="white-space: nowrap;"]]Merry S. Dashmere[[/span]] [[/div]] [[div_ class="department"]] [[span class="info-title"]]部门[[/span]] [[span class="info-content"]]科学部[[/span]] [[/div]] [[div_ class="position"]] [[span class="info-title"]]职位[[/span]] [[span class="info-content"]]HMCL监督员[[/span]] [[/div]] [[div_ class="facility"]] [[span class="info-title"]]设施[[/span]] [[span class="info-content"]]Area-03[[/span]] [[/div]] [[/div]] [[/div]] 如果每项信息只占一行，那么显示出的就是卡片的最小高度。 [[/collapsible]] [[=]] ---- ++ 更多技术细节 ---- [[/=]] [[collapsible show="▷ 显示CSS变量" hide="▽ 隐藏"]] ++ CSS变量为简洁性考虑，下列自定义选项没有加入组件中，但在代码里保留了下来，以备不时之需。 CSS老手可以用这些变量调整默认值（括号里的值）。如果要为每个卡片分开调整这些值，可以在内联样式而非全局CSS里定义变量。 [[span class="keycap"]]@@--v-id-card-width@@[[/span]]：卡片宽度（150px + 15vw）。 [[span class="keycap"]]@@--v-id-card-height@@[[/span]]：卡片高度。如果设置为固定值，内容可能会溢出，而且会被裁剪。 [[span class="keycap"]]@@--v-id-card-radius@@[[/span]]：卡片圆角大小（宽度的5%）。 [[span class="keycap"]]@@--v-id-card-padding@@[[/span]]：卡面内边距（宽度的4.5%）。 [[span class="keycap"]]@@--v-id-card-logo@@[[/span]]：背景水印logo的链接（SCP logo）。 [[span class="keycap"]]@@--v-id-card-logo-opacity@@[[/span]]：logo不透明度（0.08）。 [[span class="keycap"]]@@--v-id-card-bg-color@@[[/span]]：卡面背景色（白色）。 [[span class="keycap"]]@@--v-id-card-text-color@@[[/span]]：主要文字颜色（黑色）。 [[span class="keycap"]]@@--v-id-card-secondary-color@@[[/span]]：信息项标题和证件照边框的颜色（灰色）。 [[span class="keycap"]]@@--v-id-card-portrait-horizontal-corner-size@@[[/span]]：证件照外框四个装饰角的水平方向大小（33%）。 [[span class="keycap"]]@@--v-id-card-portrait-vertical-corner-size@@[[/span]]：证件照外框四个装饰角的垂直方向大小（25%）。 [[span class="keycap"]]@@--v-id-card-level0-color@@[[/span]]：0级权限等级条的颜色（浅灰色）。 [[span class="keycap"]]@@--v-id-card-level1-color@@[[/span]]：1级权限等级条的颜色（绿色）。 [[span class="keycap"]]@@--v-id-card-level2-color@@[[/span]]：2级权限等级条的颜色（蓝色）。 [[span class="keycap"]]@@--v-id-card-level3-color@@[[/span]]：3级权限等级条的颜色（黄色）。 [[span class="keycap"]]@@--v-id-card-level4-color@@[[/span]]：4级权限等级条的颜色（橙色）。 [[span class="keycap"]]@@--v-id-card-level5-color@@[[/span]]：5级权限等级条的颜色（红色）。 [[span class="keycap"]]@@--v-id-card-gradient-1@@[[/span]]（以及其它十几个）：内置的渐变预设值。 [[/collapsible]] ---- [[collapsible show="○ 展开源代码" hide="● 隐藏源代码" hideLocation="both"]] [[code type="CSS"]] /* Lato Black 字体 */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap'); /* 思源黑体 */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@900&family=Noto+Sans+TC:wght@900&display=swap'); /* Libre Barcode 39 字体 */ @import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39&display=swap'); /* 全局设置 */ :root { --v-id-card-width: calc(150px + 15vw); --v-id-card-radius: calc(var(--v-id-card-width) * 0.05); --v-id-card-padding: calc(var(--v-id-card-width) * 0.045); --v-id-card-logo: url(https://area-cn-02.wdfiles.com/local--files/component:v-id-card/scp-logo-alternate.svg); --v-id-card-bg-color: rgb(255, 255, 255); --v-id-card-text-color: rgb(0, 0, 0); --v-id-card-secondary-color: rgb(175, 175, 175); --v-id-card-level0-color: rgb(230, 230, 230); --v-id-card-level1-color: rgb(58, 214, 55); --v-id-card-level2-color: rgb(50, 148, 255); --v-id-card-level3-color: rgb(255, 200, 38); --v-id-card-level4-color: rgb(255, 131, 38); --v-id-card-level5-color: rgb(255, 38, 0); --v-id-card-gradient-1: linear-gradient(to bottom, rgb(50, 134, 224), 40%, rgb(255, 255, 255)); --v-id-card-gradient-2: radial-gradient(rgb(255, 255, 255), rgb(226, 224, 233)); --v-id-card-gradient-3: radial-gradient(ellipse 100% 120% at bottom, rgb(200, 200, 200), rgb(21, 21, 30)); } @media only screen and (max-width: 167px) { :root { --v-id-card-width: 90vw; } } .id-card-vertical { position: relative; z-index: 0; overflow: hidden; margin: 2em auto; box-sizing: border-box; width: var(--v-id-card-width); height: var(--v-id-card-height, auto); min-height: calc(var(--v-id-card-width)* 1.414); padding: var(--v-id-card-padding); border-radius: var(--v-id-card-radius); box-shadow: 0 0 calc(var(--v-id-card-width) * 0.025) gray; font-family: 'Lato', "Noto Sans SC", "Noto Sans TC", Tahoma, sans-serif; font-size: calc(var(--v-id-card-width) * 0.06); line-height: initial; background-color: var(--v-id-card-bg-color); color: var(--v-id-card-text-color); display: grid; grid-template-areas: "level level portrait" "data . portrait" "data . ." "data info info"; grid-template-columns: 25% 1fr 46%; grid-template-rows: calc(var(--v-id-card-width) * 0.4) calc(var(--v-id-card-width) * 0.1) calc(var(--v-id-card-width) * 0.1) 1fr; } /* 水印 */ .id-card-vertical::after { content: ""; display: block; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; opacity: var(--v-id-card-logo-opacity, 0.08); background-image: var(--v-id-card-logo); background-repeat: no-repeat; background-size: 75% 75%; background-position: 186% 146%; pointer-events: none; } /* ↖️左上角部分 */ .id-card-vertical .level { grid-area: level; display: flex; flex-direction: column; position: relative; } .id-card-vertical .level-bar-container { display: flex; flex-direction: column; gap: calc(var(--v-id-card-width) * 0.013); width: calc(var(--v-id-card-width) * 0.39); margin-left: calc(var(--v-id-card-padding) * -1); } .id-card-vertical .level-bar { width: 100%; height: calc(var(--v-id-card-width) * 0.0267); background-color: var(--v-id-card-level0-color); } .id-card-vertical .level-1 .level-bar:nth-child(1) { background-color: var(--v-id-card-level1-color); } .id-card-vertical .level-2 .level-bar:is(:nth-child(1), :nth-child(2)) { background-color: var(--v-id-card-level2-color); } .id-card-vertical .level-3 .level-bar:is(:nth-child(1), :nth-child(2), :nth-child(3)) { background-color: var(--v-id-card-level3-color); } .id-card-vertical .level-4 .level-bar:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)) { background-color: var(--v-id-card-level4-color); } .id-card-vertical .level-5 .level-bar { background-color: var(--v-id-card-level5-color); } .id-card-vertical .level-name { font-weight: 900; font-size: calc(var(--v-id-card-width) * 0.19); position: absolute; bottom: 0; } /* ↙️左下角部分 */ .id-card-vertical .data { grid-area: data; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: calc(var(--v-id-card-width)* 0.02); } .id-card-vertical .barcode-wrap { display: flex; align-items: flex-end; flex-direction: column; justify-content: space-between; gap: calc(var(--v-id-card-width)* 0.02); white-space: nowrap; writing-mode: vertical-lr; text-align: right; } .id-card-vertical .barcode { font-family: 'Libre Barcode 39', sans-serif; font-size: calc(var(--v-id-card-width) * 0.167); font-weight: normal; /* Barcode cannot display properly on higher font weights */ margin-left: -0.38em; transform: scaleX(1.2); } .id-card-vertical .barcode-num { font-weight: 900; font-size: calc(var(--v-id-card-width) * 0.067); } .id-card-vertical .issue-exp { display: flex; flex-direction: column; white-space: nowrap; font-size: 0; /* Remove <br> which takes up space */ } .id-card-vertical span.issue-exp-title { font-weight: 900; font-size: calc(var(--v-id-card-width) * 0.043); color: var(--v-id-card-secondary-color); } .id-card-vertical span.issue-exp-content { font-weight: 900; font-size: calc(var(--v-id-card-width) * 0.056); } /* ↗️右上角部分 */ .id-card-vertical .portrait { grid-area: portrait; border: solid calc(var(--v-id-card-width) * 0.019) var(--v-id-card-secondary-color); aspect-ratio: 3 / 4; position: relative; margin: calc(var(--v-id-card-width)* 0.01); } .id-card-vertical .portrait::after { content: ""; display: block; pointer-events: none; position: absolute; top: calc(var(--v-id-card-width)* -0.03); bottom: calc(var(--v-id-card-width)* -0.03); left: calc(var(--v-id-card-width)* -0.03); right: calc(var(--v-id-card-width)* -0.03); border: calc(var(--v-id-card-width)* 0.005) solid var(--v-id-card-secondary-color); clip-path: polygon( 0% 0%, var(--v-id-card-portrait-horizontal-corner-size, 33.3%) 0%, var(--v-id-card-portrait-horizontal-corner-size, 33.3%) var(--v-id-card-portrait-vertical-corner-size, 25%), calc(100% - var(--v-id-card-portrait-horizontal-corner-size, 33.3%)) var(--v-id-card-portrait-vertical-corner-size, 25%), calc(100% - var(--v-id-card-portrait-horizontal-corner-size, 33.3%)) 0%, 100% 0%, 100% var(--v-id-card-portrait-vertical-corner-size, 25%), calc(100% - var(--v-id-card-portrait-horizontal-corner-size, 33.3%)) var(--v-id-card-portrait-vertical-corner-size, 25%), calc(100% - var(--v-id-card-portrait-horizontal-corner-size, 33.3%)) calc(100% - var(--v-id-card-portrait-vertical-corner-size, 25%)), 100% calc(100% - var(--v-id-card-portrait-vertical-corner-size, 25%)), 100% 100%, calc(100% - var(--v-id-card-portrait-horizontal-corner-size, 33.3%)) 100%, calc(100% - var(--v-id-card-portrait-horizontal-corner-size, 33.3%)) calc(100% - var(--v-id-card-portrait-vertical-corner-size, 25%)), var(--v-id-card-portrait-horizontal-corner-size, 33.3%) calc(100% - var(--v-id-card-portrait-vertical-corner-size, 25%)), var(--v-id-card-portrait-horizontal-corner-size, 33.3%) 100%, 0% 100%, 0% calc(100% - var(--v-id-card-portrait-vertical-corner-size, 25%)), var(--v-id-card-portrait-horizontal-corner-size, 33.3%) calc(100% - var(--v-id-card-portrait-vertical-corner-size, 25%)), var(--v-id-card-portrait-horizontal-corner-size, 33.3%) var(--v-id-card-portrait-vertical-corner-size, 25%), 0% var(--v-id-card-portrait-vertical-corner-size, 25%), 0% 0%); } .id-card-vertical .portrait img { height: 100%; width: 100%; object-fit: cover; } /* ↘️右下角部分 */ .id-card-vertical .info { grid-area: info; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; text-align: right; gap: calc(var(--v-id-card-width)* 0.01); word-break: break-all; max-width: calc((var(--v-id-card-width) - var(--v-id-card-padding)* 2)* 0.75) !important; } .id-card-vertical span.info-title { font-weight: 900; font-size: calc(var(--v-id-card-width) * 0.057); color: var(--v-id-card-secondary-color); } .id-card-vertical span.info-content { font-weight: 900; font-size: calc(var(--v-id-card-width) * 0.082); display: flex; flex-direction: row-reverse; /* Prevent the text from overflowing rightwards */ } /* 骄傲旗渐变 */ :root { --v-id-card-gradient-pride: linear-gradient(to bottom, rgb(228, 0, 0) 16.7%, rgb(255, 140, 0) 16.7%, rgb(255, 140, 0) 33.3%, rgb(255, 237, 0) 33.3%, rgb(255, 237, 0) 50%, rgb(0, 128, 38) 50%, rgb(0, 128, 38) 66.7%, rgb(0, 77, 255) 66.7%, rgb(0, 77, 255) 83.3%, rgb(117, 7, 135) 83.3%); --v-id-card-gradient-phil: linear-gradient(to bottom, rgb(0, 0, 0) 12.5%, rgb(121, 78, 16) 12.5%, rgb(121, 78, 16) 25%, rgb(228, 0, 0) 25%, rgb(228, 0, 0) 37.5%, rgb(255, 140, 0) 37.5%, rgb(255, 140, 0) 50%, rgb(255, 237, 0) 50%, rgb(255, 237, 0) 62.5%, rgb(0, 128, 38) 62.5%, rgb(0, 128, 38) 75%, rgb(0, 77, 255) 75%, rgb(0, 77, 255) 87.5%, rgb(117, 7, 135) 87.5%); --v-id-card-gradient-abro: linear-gradient(to bottom, rgb(101, 194, 134) 20%, rgb(180, 228, 204) 20%, rgb(180, 228, 204) 40%, rgb(255, 255, 255) 40%, rgb(255, 255, 255) 60%, rgb(231, 150, 183) 60%, rgb(231, 150, 183) 80%, rgb(217, 68, 110) 80%); --v-id-card-gradient-agender: linear-gradient(to bottom, rgb(0, 0, 0) 14.3%, rgb(187, 187, 187) 14.3%, rgb(187, 187, 187) 28.6%, rgb(255, 255, 255) 28.6%, rgb(255, 255, 255) 42.9%, rgb(186, 244, 132) 42.9%, rgb(186, 244, 132) 57.1%, rgb(255, 255, 255) 57.1%, rgb(255, 255, 255) 71.4%, rgb(187, 187, 187) 71.4%, rgb(187, 187, 187) 85.7%, rgb(0, 0, 0) 85.7%); --v-id-card-gradient-aroace: linear-gradient(to bottom, rgb(226, 140, 0) 20%, rgb(236, 205, 0) 20%, rgb(236, 205, 0) 40%, rgb(255, 255, 255) 40%, rgb(255, 255, 255) 60%, rgb(98, 174, 220) 60%, rgb(98, 174, 220) 80%, rgb(32, 56, 86) 80%); --v-id-card-gradient-aromantic: linear-gradient(to bottom, rgb(58, 166, 64) 20%, rgb(168, 212, 122) 20%, rgb(168, 212, 122) 40%, rgb(255, 255, 255) 40%, rgb(255, 255, 255) 60%, rgb(171, 171, 171) 60%, rgb(171, 171, 171) 80%, rgb(0, 0, 0) 80%); --v-id-card-gradient-asexual: linear-gradient(to bottom, rgb(0, 0, 0) 25%, rgb(149, 149, 149) 25%, rgb(149, 149, 149) 50%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 75%, rgb(102, 0, 102) 75%); --v-id-card-gradient-bi: linear-gradient(to bottom, rgb(215, 0, 113) 40%, rgb(156, 78, 151) 40%, rgb(156, 78, 151) 60%, rgb(0, 53, 170) 60%); --v-id-card-gradient-bigender: linear-gradient(to bottom, rgb(104, 146, 217) 14.3%, rgb(145, 195, 231) 14.3%, rgb(145, 195, 231) 28.6%, rgb(255, 255, 255) 28.6%, rgb(255, 255, 255) 42.9%, rgb(197, 164, 236) 42.9%, rgb(197, 164, 236) 57.1%, rgb(255, 255, 255) 57.1%, rgb(255, 255, 525) 71.4%, rgb(248, 171, 197) 71.4%, rgb(248, 171, 197) 85.7%, rgb(237, 121, 168) 85.7%); --v-id-card-gradient-demiboy: linear-gradient(to bottom, rgb(127, 127, 127) 14.3%, rgb(195, 195, 195) 14.3%, rgb(195, 195, 195) 28.6%, rgb(153, 217, 234) 28.6%, rgb(153, 217, 234) 42.9%, rgb(255, 255, 255) 42.9%, rgb(255, 255, 255) 57.1%, rgb(153, 217, 234) 57.1%, rgb(153, 217, 234) 71.4%, rgb(195, 195, 195) 71.4%, rgb(195, 195, 195) 85.7%, rgb(127, 127, 127) 85.7%); --v-id-card-gradient-demigender: linear-gradient(to bottom, rgb(127, 127, 127) 14.3%, rgb(195, 195, 195) 14.3%, rgb(195, 195, 195) 28.6%, rgb(251, 255, 117) 28.6%, rgb(251, 255, 117) 42.9%, rgb(255, 255, 255) 42.9%, rgb(255, 255, 255) 57.1%, rgb(251, 255, 117) 57.1%, rgb(251, 255, 117) 71.4%, rgb(195, 195, 195) 71.4%, rgb(195, 195, 195) 85.7%, rgb(127, 127, 127) 85.7%); --v-id-card-gradient-demigirl: linear-gradient(to bottom, rgb(127, 127, 127) 14.3%, rgb(195, 195, 195) 14.3%, rgb(195, 195, 195) 28.6%, rgb(255, 176, 202) 28.6%, rgb(255, 176, 202) 42.9%, rgb(255, 255, 255) 42.9%, rgb(255, 255, 255) 57.1%, rgb(255, 176, 202) 57.1%, rgb(255, 176, 202) 71.4%, rgb(195, 195, 195) 71.4%, rgb(195, 195, 195) 85.7%, rgb(127, 127, 127) 85.7%); --v-id-card-gradient-enbian: linear-gradient(to bottom, rgb(62, 75, 198) 14.3%, rgb(93, 95, 247) 14.3%, rgb(93, 95, 247) 28.6%, rgb(146, 159, 247) 28.6%, rgb(146, 159, 247) 42.9%, rgb(255, 255, 255) 42.9%, rgb(255, 255, 255) 57.1%, rgb(218, 160, 241) 57.1%, rgb(218, 160, 241) 71.4%, rgb(131, 66, 186) 71.4%, rgb(131, 66, 186) 85.7%, rgb(58, 27, 144) 85.7%); --v-id-card-gradient-gaymen: linear-gradient(to bottom, rgb(7, 142, 112) 14.3%, rgb(38, 206, 170) 14.3%, rgb(38, 206, 170) 28.6%, rgb(152, 232, 193) 28.6%, rgb(152, 232, 193) 42.9%, rgb(255, 255, 255) 42.9%, rgb(255, 255, 255) 57.1%, rgb(123, 173, 226) 57.1%, rgb(123, 173, 226) 71.4%, rgb(80, 73, 203) 71.4%, rgb(80, 73, 203) 85.7%, rgb(61, 26, 120) 85.7%); --v-id-card-gradient-genderfluid: linear-gradient(to bottom, rgb(254, 117, 161) 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 40%, rgb(190, 24, 214) 40%, rgb(190, 24, 214) 60%, rgb(0, 0, 0) 60%, rgb(0, 0, 0) 80%, rgb(51, 62, 188) 80%); --v-id-card-gradient-genderflux: linear-gradient(to bottom, rgb(244, 118, 148) 16.7%, rgb(242, 162, 185) 16.7%, rgb(242, 162, 185) 33.3%, rgb(206, 206, 206) 33.3%, rgb(206, 206, 206) 50%, rgb(124, 224, 247) 50%, rgb(124, 224, 247) 66.7%, rgb(62, 205, 249) 66.7%, rgb(62, 205, 249) 83.3%, rgb(255, 244, 141) 83.3%); --v-id-card-gradient-genderqueer: linear-gradient(to bottom, rgb(182, 151, 218) 33.3%, rgb(255, 255, 255) 33.3%, rgb(255, 255, 255) 66.7%, rgb(107, 142, 58) 66.7%); --v-id-card-gradient-lesbian: linear-gradient(to bottom, rgb(215, 44, 0) 14.3%, rgb(239, 116, 39) 14.3%, rgb(239, 116, 39) 28.6%, rgb(255, 151, 87) 28.6%, rgb(255, 151, 87) 42.9%, rgb(255, 255, 255) 42.9%, rgb(255, 255, 255) 57.1%, rgb(209, 98, 166) 57.1%, rgb(209, 98, 166) 71.4%, rgb(183, 85, 146) 71.4%, rgb(183, 85, 146) 85.7%, rgb(165, 1, 98) 85.7%); --v-id-card-gradient-nb: linear-gradient(to bottom, rgb(254, 244, 51) 25%, rgb(255, 255, 255) 25%, rgb(255, 255, 255) 50%, rgb(154, 89, 207) 50%, rgb(154, 89, 207) 75%, rgb(45, 45, 45) 75%); --v-id-card-gradient-neutrois: linear-gradient(to bottom, rgb(255, 255, 255) 33.3%, rgb(43, 157, 23) 33.3%, rgb(43, 157, 23) 66.7%, rgb(0, 0, 0) 66.7%); --v-id-card-gradient-omni: linear-gradient(to bottom, rgb(255, 156, 206) 20%, rgb(255, 82, 191) 20%, rgb(255, 82, 191) 40%, rgb(33, 0, 68) 40%, rgb(33, 0, 68) 60%, rgb(102, 94, 255) 60%, rgb(102, 94, 255) 80%, rgb(141, 167, 255) 80%); --v-id-card-gradient-pan: linear-gradient(to bottom, rgb(255, 27, 141) 33.3%, rgb(255, 217, 0) 33.3%, rgb(255, 217, 0) 66.7%, rgb(27, 179, 255) 66.7%); --v-id-card-gradient-pangender: linear-gradient(to bottom, rgb(255, 247, 152) 14.3%, rgb(254, 221, 204) 14.3%, rgb(254, 221, 204) 28.6%, rgb(255, 235, 252) 28.6%, rgb(255, 235, 252) 42.9%, rgb(255, 255, 255) 42.9%, rgb(255, 255, 255) 57.1%, rgb(255, 235, 252) 57.1%, rgb(255, 235, 252) 71.4%, rgb(254, 221, 204) 71.4%, rgb(254, 221, 204) 85.7%, rgb(255, 247, 152) 85.7%); --v-id-card-gradient-poly: linear-gradient(to bottom, rgb(246, 28, 185) 33.3%, rgb(7, 213, 105) 33.3%, rgb(7, 213, 105) 66.7%, rgb(28, 146, 246) 66.7%); --v-id-card-gradient-qpr: linear-gradient(to bottom, rgb(255, 249, 125) 20%, rgb(255, 174, 221) 20%, rgb(255, 174, 221) 40%, rgb(255, 255, 255) 40%, rgb(255, 255, 255) 60%, rgb(127, 127, 127) 60%, rgb(127, 127, 127) 80%, rgb(15, 15, 15) 80%); --v-id-card-gradient-trans: linear-gradient(to bottom, rgb(91, 207, 250) 20%, rgb(245, 171, 185) 20%, rgb(245, 171, 185) 40%, rgb(255, 255, 255) 40%, rgb(255, 255, 255) 60%, rgb(245, 171, 185) 60%, rgb(245, 171, 185) 80%, rgb(91, 207, 250) 80%); } [[/code]] [[/collapsible]] ---- [[module CSS]] /* 按下按钮的外观 */ span.keycap:active { border: 1px solid; border-color: #bbb #ddd #ddd #bbb; border-bottom-width: 1px; border-top-width: 2px; } span.keycap a { color: unset; text-decoration: none; } /* 点击按钮预览 */ #u-preview-1, #u-preview-2, #u-preview-3, #u-preview-pride, #u-preview-phil, #u-preview-abro, #u-preview-agender, #u-preview-aroace, #u-preview-aromantic, #u-preview-asexual, #u-preview-bi, #u-preview-bigender, #u-preview-demiboy, #u-preview-demigender, #u-preview-demigirl, #u-preview-enbian, #u-preview-gaymen, #u-preview-genderfluid, #u-preview-genderflux, #u-preview-genderqueer, #u-preview-lesbian, #u-preview-nb, #u-preview-neutrois, #u-preview-omni, #u-preview-pan, #u-preview-pangender, #u-preview-poly, #u-preview-qpr, #u-preview-trans { position: absolute; top: -30em; width: 0; height: 0; pointer-events: none; } #u-preview-1:target ~ .portrait { background-image: var(--v-id-card-gradient-1) !important; } #u-preview-2:target ~ .portrait { background-image: var(--v-id-card-gradient-2) !important; } #u-preview-3:target ~ .portrait { background-image: var(--v-id-card-gradient-3) !important; } #u-preview-pride:target ~ .portrait { background-image: var(--v-id-card-gradient-pride) !important; } #u-preview-phil:target ~ .portrait { background-image: var(--v-id-card-gradient-phil) !important; } #u-preview-abro:target ~ .portrait { background-image: var(--v-id-card-gradient-abro) !important; } #u-preview-agender:target ~ .portrait { background-image: var(--v-id-card-gradient-agender) !important; } #u-preview-aroace:target ~ .portrait { background-image: var(--v-id-card-gradient-aroace) !important; } #u-preview-aromantic:target ~ .portrait { background-image: var(--v-id-card-gradient-aromantic) !important; } #u-preview-asexual:target ~ .portrait { background-image: var(--v-id-card-gradient-asexual) !important; } #u-preview-bi:target ~ .portrait { background-image: var(--v-id-card-gradient-bi) !important; } #u-preview-bigender:target ~ .portrait { background-image: var(--v-id-card-gradient-bigender) !important; } #u-preview-demiboy:target ~ .portrait { background-image: var(--v-id-card-gradient-demiboy) !important; } #u-preview-demigender:target ~ .portrait { background-image: var(--v-id-card-gradient-demigender) !important; } #u-preview-demigirl:target ~ .portrait { background-image: var(--v-id-card-gradient-demigirl) !important; } #u-preview-enbian:target ~ .portrait { background-image: var(--v-id-card-gradient-enbian) !important; } #u-preview-gaymen:target ~ .portrait { background-image: var(--v-id-card-gradient-gaymen) !important; } #u-preview-genderfluid:target ~ .portrait { background-image: var(--v-id-card-gradient-genderfluid) !important; } #u-preview-genderflux:target ~ .portrait { background-image: var(--v-id-card-gradient-genderflux) !important; } #u-preview-genderqueer:target ~ .portrait { background-image: var(--v-id-card-gradient-genderqueer) !important; } #u-preview-lesbian:target ~ .portrait { background-image: var(--v-id-card-gradient-lesbian) !important; } #u-preview-nb:target ~ .portrait { background-image: var(--v-id-card-gradient-nb) !important; } #u-preview-neutrois:target ~ .portrait { background-image: var(--v-id-card-gradient-neutrois) !important; } #u-preview-omni:target ~ .portrait { background-image: var(--v-id-card-gradient-omni) !important; } #u-preview-pan:target ~ .portrait { background-image: var(--v-id-card-gradient-pan) !important; } #u-preview-pangender:target ~ .portrait { background-image: var(--v-id-card-gradient-pangender) !important; } #u-preview-poly:target ~ .portrait { background-image: var(--v-id-card-gradient-poly) !important; } #u-preview-qpr:target ~ .portrait { background-image: var(--v-id-card-gradient-qpr) !important; } #u-preview-trans:target ~ .portrait { background-image: var(--v-id-card-gradient-trans) !important; } [[/module]] [[/iftags]] [[div_ class="id-card-vertical"]] [[div_ class="level"]] [[div_ class="level-bar-container level-{$level}"]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[div_ class="level-bar"]] [[/div]] [[/div]] [[div_ class="level-name"]] {$class}-{$level} [[/div]] [[/div]] [[div_ class="portrait" style="background-color: {$portrait-bg-color}; background-image: var(--v-id-card-gradient-{$portrait-gradient});"]] [[image {$portrait}]] [[/div]] [[div_ class="data"]] [[div_ class="barcode-wrap"]] [[div_ class="barcode"]] *{$number}* [[/div]] [[div_ class="barcode-num"]] {$number} [[/div]] [[/div]] [[div_ class="issue-exp"]] [[span class="issue-exp-title"]]签发-到期[[/span]] [[span class="issue-exp-content"]]{$issue}[[/span]] [[span class="issue-exp-content"]]{$exp}[[/span]] [[/div]] [[/div]] [[div_ class="info"]] [[div_ class="fullname"]] [[span class="info-title"]]姓名[[/span]] [[span class="info-content" style="white-space: nowr{$name-nowrap}p;"]]{$name}[[/span]] [[/div]] [[div_ class="department"]] [[span class="info-title"]]部门[[/span]] [[span class="info-content" style="white-space: nowr{$dept-nowrap}p;"]]{$department}[[/span]] [[/div]] [[div_ class="position"]] [[span class="info-title"]]职位[[/span]] [[span class="info-content" style="white-space: nowr{$position-nowrap}p;"]]{$position}[[/span]] [[/div]] [[div_ class="facility"]] [[span class="info-title"]]设施[[/span]] [[span class="info-content" style="white-space: nowr{$facility-nowrap}p;"]]{$facility}[[/span]] [[/div]] [[/div]] [[/div]]

竖版身份卡组件

评分趋势

最近修订

最近投票

相关页面

页面源码