| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- 您是一名专业的前端工程师，请帮我用纯前端实现以下产品结构。如果用到icon图标，用国内的CDN引用对应资源。整体布局以手机端为主，用flex布局。如果有更好的细节和美观优化思路，可以直接放心实现。请写在一个HTML文件中返回
- 页面结构如下：
- #整体布局
- 手机版页面，顶部搜索栏，中间是鸟类介绍界面，底部固定的Tab按钮区域
- #顶部区域
- ##搜索条
- 整体是椭圆角，左侧可以下拉选择城市
- 右侧为输入区域，占位提示：一拍即识，守护羽翼精灵
- ##精选照片推荐区域
- 整体是椭圆角，使用用户发布的鸟类照片，左下角显示图片作者
- 实现左右滑动至少5个轮换
- #内容区域
- ##按钮组（金刚区）
- 一行五列的按钮组
- 每个按钮上面是图标，下面是名称，从左到右分别是
- -查鸟
- -鸟音
- -附近
- -推荐
- -精选
- ##公告区域
- 左边为公告标识，右侧显示公告标题
- ##发帖推荐区域
- ###推荐tag区域
- 由一排横排小卡片显示
- 每个小卡片使用椭圆边框，用灰色填充，从左到右为
- -世界地球日
- -霞光鸟影
- -慢门拍摄
- ##帖子列表区域
- 多条帖子卡片构成。
- 每个帖子卡片中，分为上中下结构
- ###上
- 左侧为发帖人头像，头像右边上下分别为：
- -发帖人昵称
- -发帖人身份
- 右侧为关注图标，内容：
- -+关注（绿色）
- -已关注（灰色）
- ###中
- 帖子中的鸟类图片
- ###下
- 一排三列的按钮组
- 左侧为小图标，右侧为名称，从左到右分别是：
- -点赞
- -评论
- -分享
- #底部区域
- 一排五列的tag
- 上面是图标，下面是名称，从左到右分别是：
- -首页
- -发帖
- -识别（该图标放大，使用绿色圆形为背景）
- -消息
- -个人
- 个人主页页面设计
- 您是一名专业的前端工程师，请帮我用纯前端实现以下产品结构。如果用到icon图标，用国内的CDN引用对应资源。整体布局以手机端为主，用flex布局。如果有更好的细节和美观优化思路，可以直接放心实现。请写在一个HTML文件中返回
- 页面结构如下：
- #整体布局
- 手机版页面，顶部自我介绍栏，中间是个人日志，底部固定的Tab按钮区域
- #上半部分区域
- ##个人背景
- 中间左侧为头像，具有白色边框，头像旁边从上至下
- -昵称
- -身份
- 下方一行小字是个人签名
- ##粉丝数量
- 一个白色椭圆角小卡片，内容分一排三列
- 上面是绿色的数据，下面黑色小字是名称，从左至右是：
- -关注
- -粉丝
- -日志数量
- #中间
- ##上面一排五列小标题，从左至右是：
- -日志
- -点亮物种
- -相册
- -足迹
- -收藏
- ##下面为日志卡片
- ###上
- 帖子中的鸟类图片
- ###下
- 一排三列的按钮组
- 左侧为小图标，右侧为名称，从左到右分别是：
- -点赞
- -评论
- -分享
- 鸟类分类主页页面设计
- 您是一名专业的前端工程师，请帮我用纯前端实现以下产品结构。如果用到icon图标，用国内的CDN引用对应资源。整体布局以手机端为主，用flex布局。如果有更好的细节和美观优化思路，可以直接放心实现。请写在一个HTML文件中返回
- 页面结构如下：
- #整体布局
- 手机版页面，顶部返回键，中间是鸟类卡片，底部固定的Tab按钮区域
- #顶部区域
- 使用绿色，左侧为返回键，中间为标题“鸟类图鉴”
- #展示区域
- 使用生物学科中的纲目科属种来分鸟的类型
- 一个白色椭圆角小卡片，内容分为一列
- 每个卡片分为上下两个部分
- ##上面为该所属目的鸟类照片
- ##下面是该所属目鸟的名字
- 观鸟路线推荐页面设计
- 您是一名专业的前端工程师，请帮我用纯前端实现以下产品结构。如果用到icon图标，用国内的CDN引用对应资源。整体布局以手机端为主，用flex布局。如果有更好的细节和美观优化思路，可以直接放心实现。请写在一个HTML文件中返回
- 页面结构如下：
- #整体布局
- 手机版页面，顶部返回键，中间是路线推荐
- #顶部区域
- 使用绿色，左侧为返回键，中间为标题“路线推荐”
- #路线推荐
- 使用长方形椭圆边角卡片，可以实现左右滑动卡片的效果
- ##顶部区域
- 该路线标题
- ##中间区域
- 路线展示，并使用气泡样式，在路线的沿途展示该路线中所能观赏到的鸟类
- #底部区域
- 分为一排两列，从左至右为：
- -路线选择
- -路线上传
- AI咨询页面设计
- 您是一名专业的前端工程师，请帮我用纯前端实现以下产品结构。如果用到icon图标，用国内的CDN引用对应资源。整体布局以手机端为主，用flex布局。如果有更好的细节和美观优化思路，可以直接放心实现。请写在一个HTML文件中返回
- 页面结构如下：
- #整体布局
- 手机版页面，顶部介绍栏，中间为角色卡片
- #顶部区域
- 绿色作为底色，中间文字标题为“AI辨鸟咨询”
- #中间区域
- 卡片布局
- ##卡片布局
- 分为上中下结构
- ###上
- 中间为圆形专家头像，头像地址为：/assets/avatars/people.jpeg
- ###中间
- 人物信息
- 第一行从左到右信息为专家姓名：xxx 专家身份：xxx
- 第二行信息为研究方向：xxxx
- ###下
- 一个蓝色按钮，白字写咨询
- 附近推荐鸟类页面设计
- 您是一名专业的前端工程师，请帮我用纯前端实现以下产品结构。如果用到icon图标，用国内的CDN引用对应资源。整体布局以手机端为主，用flex布局。如果有更好的细节和美观优化思路，可以直接放心实现。请写在一个HTML文件中返回
- 页面结构如下：
- #整体布局
- 手机版页面，顶部介绍栏，中间是搜索栏，下面是附近鸟类卡片
- #顶部区域
- 使用绿色，左侧为返回上级页面按钮，中间为标题“附近鸟类”
- #搜索区域
- 从左至右分为三个部分
- ##左边灰色椭圆角按钮，可以下拉选择地区
- ##中间搜索栏输入区域，占位提示：一拍即识，守护羽翼精灵
- ##右侧为“导入数据”按钮
- #卡片区域
- 卡片分为上下两个部分
- ##上面分为左右两个部分
- ###左边为该鸟类头像，使用椭圆形
- ###右边为该鸟类信息，包括他的名称，所属纲目科目著类，稀有星级，
- ##下面为该鸟的一句话简介，以及距离的数据
|
