| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- 您是一名专业的前端工程师，请帮我用纯前端实现以下产品结构。如果用到icon图标，请用国内的CDN引用对应资源。整体布局以手机端为主，用flex布局。如果有更好的细节和美观优化思路，可以放心实现。请写在一个HTML中返回。
- 页面结构如下：
- #整体布局
- 手机版竖版页面，顶部区域标题栏，中间是运动搜索的内容区域。底部固定的Tab按钮区域。
- 整体背景主色调为黑色和金色，带有中国元素的纹理，可有渐变效果
- #顶部区域
- 居中显示标题：六韬策
- #内容区域
- ##搜索条
- 整体是椭圆角的长矩形。
- 左侧是城市下拉选择
- 右侧是输入区域，占位提示：「谋定身心疆场，淬就今古锋芒」
- ##按钮组
- 两行三列的按钮组。
- 每个按钮上面是图标，下面两行文字名称（括号前是上行，括号内是下行，上行需比下行加粗且字体较大），从左到右从上到下分别是：
- - 文韬智策(战略规划中枢)
- - 武韬战枢(竞技对抗熔炉)
- - 龙韬军阵(团队协作密令)
- - 虎韬锋镝(环境淬火疆场)
- - 豹韬奇袭(敏捷破阵锋刃)
- - 犬韬训典(动作基准火纹)
- ##广告区域
- 圆角长矩形，灰黑色渐变背景，画面占比不能过大。
- 左侧是：六韬奇策
- 右侧是：四页滑动翻页的运动品牌广告图片
- ##运动分享区域
- ###运动分享标题栏
- 顶部是横排列的四个标题栏，点击标题栏会将运动分享内容栏翻页转换到相应的页面。前三个标题栏占据主要位置，第四个标题栏只需要最右侧一角：
- - 附近
- - 推荐
- - 关注
- - ＋
- ###运动分享内容栏
- 多条分享卡片组成，排列呈现纵向两列排列
- 每个分享卡片中：
- 上部为主体部分，是图片
- 中部部左侧是卡片标题
- 下部左侧是卡片标签，右侧是用户头像和昵称
- #底部Tab按钮区域
- 从左到右分别是：
- - 首页
- - 运动记录
- - 消息
- - 我的
|
