首页/新闻资讯/正文详情

DiaryDetail2Page 卡片式详情:琥珀渐变 + 引号装饰

发布时间:2026/9/27 11:39:19 来源:云帆数科 栏目:资讯中心
DiaryDetail2Page 卡片式详情:琥珀渐变 + 引号装饰
前言“海风日记“提供了两种日记详情页样式DiaryDetailPage的纸张风格和DiaryDetail2Page的卡片风格。本文介绍第二种风格——卡片式详情页以琥珀渐变卡片展示日期配以白色正文卡片整体风格更现代、更精致。一、卡片式详情布局1.1 整体结构Column() { // 顶部导航栏 Row() { ... } Scroll() { Column({ space: 16 }) { // 顶部日期卡片琥珀渐变 Stack({ alignContent: Alignment.BottomEnd }) { Column() .width(100%).height(180) .borderRadius(CARD_RADIUS) .linearGradient({ angle: 135, colors: [[COLOR_HEADER_TOP, 0.0], [#FFCC70, 0.6], [#F5A623, 1.0]] }) .shadow({ radius: 20, color: rgba(245,166,35,0.30), offsetY: 6 }) Text().fontSize(120).fontColor(rgba(255,255,255,0.12)) .position({ x: 8, y: -20 }) // 日期内容 Column({ space: 12 }) { Row({ space: 12 }) { Text(this.diary.dayNum.toString()) .fontSize(72).fontColor(#FFFFFF).fontWeight(FontWeight.Bold) Column({ space: 6 }) { Text(weekday).fontSize(14).fontColor(rgba(255,255,255,0.90)) Text(yearMonth).fontSize(12).fontColor(rgba(255,255,255,0.75)) Row({ space: 8 }) { Text(getWeatherEmoji(this.diary.weather)).fontSize(16) Text(getMoodEmoji(this.diary.mood)).fontSize(16) } } } } } // 标签行 if (this.diary.tags.length 0) { ... } // 正文卡片 Column({ space: 16 }) { Text(this.diary.content) .fontSize(16).fontColor(COLOR_TEXT_MAIN).lineHeight(30) } .padding(PAGE_PADDING) .backgroundColor(COLOR_CARD_BG) .borderRadius(CARD_RADIUS) .shadow({ radius: 12, color: rgba(160,120,60,0.08), offsetY: 2 }) // 底部签名 Column() { Divider() Row() { Text(— 海风日记).fontSize(12).fontColor(COLOR_AMBER) Text(this.diary.date).fontSize(11).fontColor(COLOR_TEXT_HINT) } } } } }二、两种详情页的对比对比维度DiaryDetailPageDiaryDetail2Page头部风格暖橙渐变琥珀渐变日期展示80vp 大数字72vp 白色数字正文背景象牙色纸张白色卡片装饰元素波浪分隔引号装饰卡片效果无圆角 阴影三、引号装饰Text() .fontSize(120) .fontColor(rgba(255,255,255,0.12)) .fontWeight(FontWeight.Bold) .position({ x: 8, y: -20 })四、shadow 阴影体系// 顶部卡片阴影 .shadow({ radius: 20, color: rgba(245,166,35,0.30), offsetY: 6 }) // 正文卡片阴影 .shadow({ radius: 12, color: rgba(160,120,60,0.08), offsetY: 2 })五、总结本文通过 DiaryDetail2Page深入讲解了卡片式详情页的设计琥珀渐变卡片品牌色渐变引号装饰120vp 超大引号白色正文卡片圆角 阴影两种风格对比纸张 vs 卡片下一篇文章将深入讲解shadow 阴影体系敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源LinearGradient 文档Shadow 属性文档Stack 容器文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区

相关推荐

深入解析MMC/SD控制器寄存器:从能力探测到高速模式配置实战
深入解析MMC/SD控制器寄存器:从能力探测到高速模式配置实战

1. 项目概述与核心价值在嵌入式系统开发,尤其是涉及存储接口的驱动或硬件验证时,我们常常需要与MMC/SD控制器打交道。这个硬件模块是连接处理器和SD卡、eMMC等存储设备的关键桥梁。很多工程师,尤其是应用层开发者,可能更熟悉上层文… · 2026/9/27 11:39:00

#AI重塑终身职业教育:未来10年,职场人的“必修课”会彻底变样
#AI重塑终身职业教育:未来10年,职场人的“必修课”会彻底变样

最近和身边不少职场朋友聊天,大家的焦虑高度一致:AI迭代太快了,今天刚学会一个工具,明天又出了新模型;去年还吃香的岗位,今年就开始缩招;35岁危机还没过去,“AI替代焦虑”又先一步到… · 2026/9/18 21:47:04

如何设置BP神经网络参数
如何设置BP神经网络参数

目录 摘要 BP神经网络参数设置及各种函数选择 参数设置 训练函数 传递函数 学习函数 性能函数 显示函数 前向网络创建函数 BP神经网络训练窗口详解 训练窗口例样 训练窗口四部详解 基于BP神经网络的测量误差预测 效果图 结果分析 摘要 本文总结BP神经网络的参数设置,训练函… · 2026/9/14 22:53:42

基于Trae开发的自动表关联查询工具:TaoToken统一Key接入与settings.json配置实战
基于Trae开发的自动表关联查询工具:TaoToken统一Key接入与settings.json配置实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 11:39:00

新手入门必看:3步搞定wordpress删除plugins避坑指南
新手入门必看:3步搞定wordpress删除plugins避坑指南

新手入门必看:3步搞定wordpress删除plugins避坑指南 自己不会代码想做网站,却卡在 wordpress 删除plugins 这一步?别急,这其实是 新手入门… · 2026/9/27 11:39:00

Egg 项目接入 egg-mongoose:从 config.default.js 配置到常用 Mongoose 方法实战
Egg 项目接入 egg-mongoose:从 config.default.js 配置到常用 Mongoose 方法实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 11:39:00

OpenClaw 理性评估:国内开发者如何用 TaoToken 统一 Key 接入 AI 代理
OpenClaw 理性评估:国内开发者如何用 TaoToken 统一 Key 接入 AI 代理

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 11:38:54

备战2026金九银十:用TaoToken统一Key一周打通AI前端TypeScript+SSE+RAG+MCP实战大纲
备战2026金九银十:用TaoToken统一Key一周打通AI前端TypeScript+SSE+RAG+MCP实战大纲

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 11:38:54

微软 Azure DevOps Skills 实战:用 SKILL.md 让 AI 助手接管 DevOps 工作流
微软 Azure DevOps Skills 实战:用 SKILL.md 让 AI 助手接管 DevOps 工作流

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 11:38:54

MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现

简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01

汕头网站建设制作厂家避坑指南:5大注意事项救急
汕头网站建设制作厂家避坑指南:5大注意事项救急

汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01

多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习

简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01

MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现

简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01

汕头网站建设制作厂家避坑指南:5大注意事项救急
汕头网站建设制作厂家避坑指南:5大注意事项救急

汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01

多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习

简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码