耗牛行情.md 2.1KB
在 package-a/yak-market/index.vue 编写页面 页面布局 从上到下依次
- 使用 up-card 分成 左右两部分 flex 垂直居中，左边 up-avatar 头像形状是 square 文字头像 背景色是绿色 文字是 '市'， 右边 分为上下两层 上层 耗牛 [18.68] 元/斤 18.68是字段赋值的 [18.68 元/斤] 文本红色 下层 巴青耗牛交易市场 + 日期 字体小写
2.使用 up-card 嵌套
2.1 up-subsection mode button bgColor 设置为绿色 分段器 [价格走势, 价格预测] 默认 价格走势
2.2 #F0F6FB 背景颜色 当选择的是 价格走势 请看 2.2.2 2.2.3 价格预测 请看 2.2.4
2.2.1 分成三等分 flex 文本居中展示 左边 从上到下 [7日均价, 17.94, 占位] 中间 从上到下 [7日最低价, 17.53, 3-30] 右边 从上到下 [7日最高价, 18.68, 04-01] 其中 7日最低价 和 7日 最高价的 价格文本 红色
2.2.2 分成左右2边对齐 左边 更新时间：YYYY-MM-DD 右边 单位：元/斤 字体小点 灰色
2.2.3 （兼容微信小程序）echarts line 图表 line线是绿色的 yAxis 价格 xAxis 日期 下方是 可选 7日 30日 默认7日
2.2.4 第一行 小标题 后市预测 字体小 灰色 第二行 分成 3等分 间隔 10rpx 做出 类似圆形进度条那种 圆形中间是 数值 35%， 从左到右 圆形进度条 红色 下方 文本 看涨 。 圆形进度条 蓝色 文本 看平 。 圆形进度条 绿色 文本 看跌
- 标题 每日行情
3.1 用虚拟列表 up-virtual-list 使用 up-card 嵌套 包裹
第一行 分成 左右两部分 flex 垂直居中，左边 up-avatar 背景色是现在展示是灰色 ， 右边 分为上下两层 上层 xxx交易市场 下层 xxxx + 日期 下层 字体小写
第二行 分成左右两部分 flex space-between 左边 xxx 右边 [16.00-180.00]元/斤(暂时这样写) 右边文本 红色
第三行 出栏情况：xxx
第四行 变化因素：天气、供不应求 第五行 走势预测：看涨 第六行 出栏建议：鼓励上市
第一行 第二行下方需要分割线 up-divider 不需要传入文本 第三行到第六行 字体变小 文本灰色