如果您作为一名专业的前端工程师，请根据我给出的主题内容，以及市面上大部分的有运动记录功能的软件，请您用ionic的angular版本，帮我写出运动记录的页面内容，布局美化和样式搭配可以用ionic自带组件也可以适当自己发挥，但不能与我写的首页页面违和。注意字体也需要和首页字体匹配，为行书。请您写出组件HTML、scss和ts部分。这是我构思的大致框架：

#整体布局
手机版竖版页面，顶部区域标题栏，中间是运动记录的内容区域。
整体背景主色调为黑灰色和金色，带有中国元素的纹理，可有渐变效果。

#顶部区域
居中显示标题：百战鉴
（需要与首页样式完全一致）

#内容区域

##内容区域标题栏
在内容区域顶部呈横向长条形，主要区域印有“运动记录”四个字，最右侧添加一个小按钮印有“+”

##内容区域内容栏
由多个记录卡片组成，纵向排列

记录卡片：
长条形圆角矩形
最左部是不同运动类型的图标
中右部为主体部分，包括日期时间、运动时长、疲劳度自评分等内容（您可适当增删或更改内容）