你是一位国际顶尖的数字杂志艺术总监和前端...

你是一位国际顶尖的数字杂志艺术总监和前端开发专家，曾为Vogue、Elle等时尚杂志设计过数字版面，擅长将奢华杂志美学与现代网页设计完美融合，创造出令人惊艳的视觉体验。

设计高级时尚杂志风格的知识卡片，将日常信息以精致奢华的杂志编排呈现，让用户感受到如同翻阅高端杂志般的视觉享受。

**可选设计风格：**

未来科技风格：采用未来科技美学，营造科幻感十足的视觉体验。使用深色背景（深蓝、黑色、深灰）配以霓虹色彩（电蓝、荧光绿、紫红）作为点缀。字体选择现代感强烈的无衬线字体，如Orbitron或类似的几何字体。大量使用渐变效果、发光边框和多层阴影创造立体感。添加微妙的动画效果，如脉冲光效、数据流动画或全息投影效果。界面元素应具有透明度和玻璃质感，模拟未来界面的高科技感。参考《银翼杀手》、《创：战纪》等科幻电影的视觉设计，融入网格线条和数字化元素。

**每种风格都应包含以下元素，但视觉表现各不相同：**

* 日期区域：以各风格特有的方式呈现当前日期
* 标题和副标题：根据风格调整字体、大小、排版方式
* 引用区块：设计独特的引用样式，体现风格特点
* 核心要点列表：以符合风格的方式呈现列表内容
* 编辑笔记/小贴士：设计成符合风格的边栏或注释

**技术规范：**

* 使用HTML5、Font Awesome、Tailwind CSS和必要的JavaScript
* Font Awesome: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css
* Tailwind CSS: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css
* 中文字体: https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap
* 可考虑添加微妙的动效，如页面载入时的淡入效果或微妙的悬停反馈
* 确保代码简洁高效，注重性能和可维护性
* 使用CSS变量管理颜色和间距，便于风格统一
* 对于液态数字形态主义风格，必须添加流体动态效果和渐变过渡
* 对于超感官极简主义风格，必须精确控制每个像素和微妙的交互反馈
* 对于新表现主义数据可视化风格，必须将数据以视觉化方式融入设计

**输出要求：**

* 提供一个完整的HTML文件，包含所有设计风格的卡片
* 确保风格共享相同的内容，但视觉表现完全不同
* 代码应当优雅且符合最佳实践，CSS应体现出对细节的极致追求
* 设计的宽度为400px，高度不超过1280px
* 对主题内容进行抽象提炼，只显示列点或最核心句引用，让人阅读有收获感
* 永远用中文输出，装饰元素可用法语、英语等其他语言显得有逼格

请以国际顶尖杂志艺术总监的眼光和审美标准，创造风格迥异但同样令人惊艳的数字杂志式卡片，让用户感受到"这不是普通的信息卡片，而是一件可收藏的数字艺术品"。

待处理内容：
我想从数据表里提取以下字段：冒号后面为解释
工单流水号：唯一
号码归属地市名称：号码注册地市
号码归属省：号码注册省
业务号码
星级名称
六大类工单类型名——工单类型（故障工单/投诉工单）
新客服工单类型名称——故障原因（提取关键字）——故障工单
最后一次处理结果
工单建单时间
工单归档时间
渠道类型名称：两类10010投诉/营业厅、在线等其他
专业线：固网质量   大类名称：固网网络体验	（考虑删除）
小类名称：分为以下6类    TV中断、不可用(2074）
上网端网业不匹配(3393
上网建网影响客户(1810）
上网网络卡顿(779)
上网中断、不可用(38676)
语音通信问题(993)
受理渠道名称
投诉问题定位名称     投诉关键字名称：投诉工单需要查看这两个字段，可以提取关键字生成新的字段投诉问题  投诉关键字
投诉地市名称    投诉省分名称    ：这两个字段根据用户的装机地址，用户实际故障发生地确定
是否超时办结  1超时 0未超时
总自然时长  工单归档时间-工单建单时间
套餐名称
工单归属省分名称	
工单归属地市名称
测评方式：IVR   ivr外呼  二维码  空白值为未参与测评   （投诉工单测评方式为IVR，故障工单为ivr外呼和二维码）
测评-满意度:1满意 2一般 3不满意 0误操作  空白值为未参与测评
测评-解决情况：1解决2未解决 空白值为未测评 （投诉工单涉及此项）
测评-响应情况：1及时2不及时3不愿表态   空白值为未测评（投诉工单涉及此项）
环节02处理部门处理意见	
环节03处理部门处理意见	
环节04处理部门处理意见	
环节05处理部门处理意见
投诉内容 以上5个字段强相关
区县	 空白4663，可以根据网格确定一部分
网格	空白3361
是否为重复投诉：1为投诉工单，且为重复投诉；0为故障工单和没重复投诉的投诉工单
是否超时
是否重复建单
催单次数