教你做网站和学习教程熊掌号,河源市网站建设公司,湖南软件定制开发,黄冈网站搭建推荐黑马 小兔鲜儿 uniapp 小程序开发- 分类模块- day04-CSDN博客 小兔鲜儿 - 商品详情(登录前)-day05
商品详情页分为两部分讲解#xff1a;
登录前#xff1a;展示商品信息#xff0c;轮播图交互#xff08;当前模块#xff09;登录后#xff1a;加入购物车#xff0c;立…黑马 小兔鲜儿 uniapp 小程序开发- 分类模块- day04-CSDN博客 小兔鲜儿 - 商品详情(登录前)-day05
商品详情页分为两部分讲解
登录前展示商品信息轮播图交互当前模块登录后加入购物车立即购买SKU 模块
准备工作
参考效果
用户点击商品列表跳转到对应的商品详情页。 静态结构
新建商品详情页。
// src/pages/goods/goods.vue
script setup langts
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } uni.getSystemInfoSync()
/scripttemplatescroll-view scroll-y classviewport!-- 基本信息 --view classgoods!-- 商品主图 --view classpreviewswiper circularswiper-itemimagemodeaspectFillsrchttps://yanxuan-item.nosdn.127.net/99c83709ca5f9fd5c5bb35d207ad7822.png//swiper-itemswiper-itemimagemodeaspectFillsrchttps://yanxuan-item.nosdn.127.net/f9107d47c08f0b99c097e30055c39e1a.png//swiper-itemswiper-itemimagemodeaspectFillsrchttps://yanxuan-item.nosdn.127.net/754c56785cc8c39f7414752f62d79872.png//swiper-itemswiper-itemimagemodeaspectFillsrchttps://yanxuan-item.nosdn.127.net/ef16f8127610ef56a2a10466d6dae157.jpg//swiper-itemswiper-itemimagemodeaspectFillsrchttps://yanxuan-item.nosdn.127.net/1f0c3f5d32b0e804deb9b3d56ea6c3b2.png//swiper-item/swiperview classindicatortext classcurrent1/texttext classsplit//texttext classtotal5/text/view/view!-- 商品简介 --view classmetaview classpricetext classsymbol¥/texttext classnumber29.90/text/viewview classname ellipsis云珍·轻软旅行长绒棉方巾 /viewview classdesc 轻巧无捻小方巾旅行便携 /view/view!-- 操作面板 --view classactionview classitem arrowtext classlabel选择/texttext classtext ellipsis 请选择商品规格 /text/viewview classitem arrowtext classlabel送至/texttext classtext ellipsis 请选择收获地址 /text/viewview classitem arrowtext classlabel服务/texttext classtext ellipsis 无忧退 快速退款 免费包邮 /text/view/view/view!-- 商品详情 --view classdetail panelview classtitletext详情/text/viewview classcontentview classproperties!-- 属性详情 --view classitemtext classlabel属性名/texttext classvalue属性值/text/viewview classitemtext classlabel属性名/texttext classvalue属性值/text/view/view!-- 图片详情 --imagemodewidthFixsrchttps://yanxuan-item.nosdn.127.net/a8d266886d31f6eb0d7333c815769305.jpg/imageimagemodewidthFixsrchttps://yanxuan-item.nosdn.127.net/a9bee1cb53d72e6cdcda210071cbd46a.jpg/image/view/view!-- 同类推荐 --view classsimilar panelview classtitletext同类推荐/text/viewview classcontentnavigatorv-foritem in 4:keyitemclassgoodshover-classnone:url/pages/goods/goods?idimageclassimagemodeaspectFillsrchttps://yanxuan-item.nosdn.127.net/e0cea368f41da1587b3b7fc523f169d7.png/imageview classname ellipsis简约山形纹全棉提花毛巾/viewview classpricetext classsymbol¥/texttext classnumber18.50/text/view/navigator/view/view/scroll-view!-- 用户操作 --viewclasstoolbar:style{ paddingBottom: safeAreaInsets?.bottom px }view classiconsbutton classicons-buttontext classicon-heart/text收藏/buttonbutton classicons-button open-typecontacttext classicon-handset/text客服/buttonnavigatorclassicons-buttonurl/pages/cart/cartopen-typeswitchTabtext classicon-cart/text购物车/navigator/viewview classbuttonsview classaddcart 加入购物车 /viewview classbuynow 立即购买 /view/view/view
/templatestyle langscss
page {height: 100%;overflow: hidden;display: flex;flex-direction: column;
}.viewport {background-color: #f4f4f4;
}.panel {margin-top: 20rpx;background-color: #fff;.title {display: flex;justify-content: space-between;align-items: center;height: 90rpx;line-height: 1;padding: 30rpx 60rpx 30rpx 6rpx;position: relative;text {padding-left: 10rpx;font-size: 28rpx;color: #333;font-weight: 600;border-left: 4rpx solid #27ba9b;}navigator {font-size: 24rpx;color: #666;}}
}.arrow {::after {position: absolute;top: 50%;right: 30rpx;content: \e6c2;color: #ccc;font-family: erabbit !important;font-size: 32rpx;transform: translateY(-50%);}
}/* 商品信息 */
.goods {background-color: #fff;.preview {height: 750rpx;position: relative;.indicator {height: 40rpx;padding: 0 24rpx;line-height: 40rpx;border-radius: 30rpx;color: #fff;font-family: Arial, Helvetica, sans-serif;background-color: rgba(0, 0, 0, 0.3);position: absolute;bottom: 30rpx;right: 30rpx;.current {font-size: 26rpx;}.split {font-size: 24rpx;margin: 0 1rpx 0 2rpx;}.total {font-size: 24rpx;}}}.meta {position: relative;border-bottom: 1rpx solid #eaeaea;.price {height: 130rpx;padding: 25rpx 30rpx 0;color: #fff;font-size: 34rpx;box-sizing: border-box;background-color: #35c8a9;}.number {font-size: 56rpx;}.brand {width: 160rpx;height: 80rpx;overflow: hidden;position: absolute;top: 26rpx;right: 30rpx;}.name {max-height: 88rpx;line-height: 1.4;margin: 20rpx;font-size: 32rpx;color: #333;}.desc {line-height: 1;padding: 0 20rpx 30rpx;font-size: 24rpx;color: #cf4444;}}.action {padding-left: 20rpx;.item {height: 90rpx;padding-right: 60rpx;border-bottom: 1rpx solid #eaeaea;font-size: 26rpx;color: #333;position: relative;display: flex;align-items: center;:last-child {border-bottom: 0 none;}}.label {width: 60rpx;color: #898b94;margin: 0 16rpx 0 10rpx;}.text {flex: 1;-webkit-line-clamp: 1;}}
}/* 商品详情 */
.detail {padding-left: 20rpx;.content {margin-left: -20rpx;}.properties {padding: 0 20rpx;margin-bottom: 30rpx;.item {display: flex;line-height: 2;padding: 10rpx;font-size: 26rpx;color: #333;border-bottom: 1rpx dashed #ccc;}.label {width: 200rpx;}.value {flex: 1;}}
}/* 同类推荐 */
.similar {padding-left: 20rpx;.content {padding: 0 20rpx 20rpx;margin-left: -20rpx;background-color: #f4f4f4;overflow: hidden;navigator {width: 345rpx;padding: 24rpx 20rpx 20rpx;margin: 20rpx 20rpx 0 0;border-radius: 10rpx;background-color: #fff;float: left;}.image {height: 260rpx;}.name {height: 80rpx;margin: 10rpx 0;font-size: 26rpx;color: #262626;}.price {line-height: 1;font-size: 20rpx;color: #cf4444;}.number {font-size: 26rpx;margin-left: 2rpx;}}navigator {:nth-child(even) {margin-right: 0;}}
}/* 底部工具栏 */
.toolbar {background-color: #fff;height: 100rpx;padding: 0 20rpx;border-top: 1rpx solid #eaeaea;display: flex;justify-content: space-between;align-items: center;box-sizing: content-box;.buttons {display: flex; view {width: 220rpx;text-align: center;line-height: 72rpx;font-size: 26rpx;color: #fff;border-radius: 72rpx;}.addcart {background-color: #ffa868;}.buynow {background-color: #27ba9b;margin-left: 20rpx;}}.icons {padding-right: 10rpx;display: flex;align-items: center;flex: 1;.icons-button {flex: 1;text-align: center;line-height: 1.4;padding: 0;margin: 0;border-radius: 0;font-size: 20rpx;color: #333;background-color: #fff;}text {display: block;font-size: 34rpx;}}
}
/style
获取数据
获取页面参数
根据商品的 id 查询到某个商品的详细信息如图片、价格、型号等展示给用户。
// 接收页面参数
const query defineProps{id: string
}()
接口调用
接口信息如下
接口地址/goods
请求方式GET
请求参数
Query 字段名称 是否必须 默认值 备注 id 是 无 商品 id
请求封装
/*** 商品详情* param id 商品id*/
export const getGoodsByIdAPI (id: string) {return httpGoodsResult({method: GET,url: /goods,data: { id },})
}
类型声明
import type { GoodsItem } from ./global/** 商品信息 */
export type GoodsResult {/** id */id: string/** 商品名称 */name: string/** 商品描述 */desc: string/** 当前价格 */price: number/** 原价 */oldPrice: number/** 商品详情: 包含详情属性 详情图片 */details: Details/** 主图图片集合[ 主图图片链接 ] */mainPictures: string[]/** 同类商品[ 商品信息 ] */similarProducts: GoodsItem[]/** sku集合[ sku信息 ] */skus: SkuItem[]/** 可选规格集合备注[ 可选规格信息 ] */specs: SpecItem[]/** 用户地址列表[ 地址信息 ] */userAddresses: AddressItem[]
}/** 商品详情: 包含详情属性 详情图片 */
export type Details {/** 商品属性集合[ 属性信息 ] */properties: DetailsPropertyItem[]/** 商品详情图片集合[ 图片链接 ] */pictures: string[]
}/** 属性信息 */
export type DetailsPropertyItem {/** 属性名称 */name: string/** 属性值 */value: string
}/** sku信息 */
export type SkuItem {/** id */id: string/** 库存 */inventory: number/** 原价 */oldPrice: number/** sku图片 */picture: string/** 当前价格 */price: number/** sku编码 */skuCode: string/** 规格集合[ 规格信息 ] */specs: SkuSpecItem[]
}/** 规格信息 */
export type SkuSpecItem {/** 规格名称 */name: string/** 可选值名称 */valueName: string
}/** 可选规格信息 */
export type SpecItem {/** 规格名称 */name: string/** 可选值集合[ 可选值信息 ] */values: SpecValueItem[]
}/** 可选值信息 */
export type SpecValueItem {/** 是否可售 */available: boolean/** 可选值备注 */desc: string/** 可选值名称 */name: string/** 可选值图片链接 */picture: string
}/** 地址信息 */
export type AddressItem {/** 收货人姓名 */receiver: string/** 联系方式 */contact: string/** 省份编码 */provinceCode: string/** 城市编码 */cityCode: string/** 区/县编码 */countyCode: string/** 详细地址 */address: string/** 默认地址1为是0为否 */isDefault: number/** 收货地址 id */id: string/** 省市区 */fullLocation: string
}
接下来将获取到的数据结合模板语法渲染到页面中。
轮播图交互
参考效果
当轮播图滑动切换的时候更新自定义下标当图片被点击的时候大图预览。 参考代码
商品详情页轮播图交互
script setup langts
// 轮播图变化时
const currentIndex ref(0)
const onChange: UniHelper.SwiperOnChange (ev) {currentIndex.value ev.detail.current
}// 点击图片时
const onTapImage (url: string) {// 大图预览uni.previewImage({current: url,urls: goods.value!.mainPictures,})
}
/scripttemplate!-- 商品主图 --view classpreviewswiper changeonChange circularswiper-item v-foritem in goods?.mainPictures :keyitemimage taponTapImage(item) modeaspectFill :srcitem //swiper-item/swiperview classindicatortext classcurrent{{ currentIndex 1 }}/texttext classsplit//texttext classtotal{{ goods?.mainPictures.length }}/text/view/view
/template
弹出层交互
参考效果
uni-ui 弹出层组件uni-popup 静态结构
提供 服务说明 和 收获地址 两个组件的静态结构实现弹出层交互。
组件 1服务说明
// ServicePanel.vue
script setup langts
//
/scripttemplateview classservice-panel!-- 关闭按钮 --text classclose icon-close/text!-- 标题 --view classtitle服务说明/view!-- 内容 --view classcontentview classitemview classdt无忧退货/viewview classdd自收到商品之日起30天内可在线申请无忧退货服务食品等特殊商品除外/view/viewview classitemview classdt快速退款/viewview classdd收到退货包裹并确认无误后将在48小时内办理退款退款将原路返回不同银行处理时间不同预计1-5个工作日到账/view/viewview classitemview classdt满88元免邮费/viewview classdd单笔订单金额(不含运费)满88元可免邮费不满88元 单笔订单收取10元邮费/view/view/view/view
/templatestyle langscss
.service-panel {padding: 0 30rpx;border-radius: 10rpx 10rpx 0 0;position: relative;background-color: #fff;
}.title {line-height: 1;padding: 40rpx 0;text-align: center;font-size: 32rpx;font-weight: normal;border-bottom: 1rpx solid #ddd;color: #444;
}.close {position: absolute;right: 24rpx;top: 24rpx;
}.content {padding: 20rpx 20rpx 100rpx 20rpx;.item {margin-top: 20rpx;}.dt {margin-bottom: 10rpx;font-size: 28rpx;color: #333;font-weight: 500;position: relative;::before {content: ;width: 10rpx;height: 10rpx;border-radius: 50%;background-color: #eaeaea;transform: translateY(-50%);position: absolute;top: 50%;left: -20rpx;}}.dd {line-height: 1.6;font-size: 26rpx;color: #999;}
}
/style
组件 2收获地址组件
// AddressPanel.vue
script setup langts
//
/scripttemplateview classaddress-panel!-- 关闭按钮 --text classclose icon-close/text!-- 标题 --view classtitle配送至/view!-- 内容 --view classcontentview classitemview classuser李明 13824686868/viewview classaddress北京市顺义区后沙峪地区安平北街6号院/viewtext classicon icon-checked/text/viewview classitemview classuser王东 13824686868/viewview classaddress北京市顺义区后沙峪地区安平北街6号院/viewtext classicon icon-ring/text/viewview classitemview classuser张三 13824686868/viewview classaddress北京市朝阳区孙河安平北街6号院/viewtext classicon icon-ring/text/view/viewview classfooterview classbutton primary 新建地址 /viewview v-iffalse classbutton primary确定/view/view/view
/templatestyle langscss
.address-panel {padding: 0 30rpx;border-radius: 10rpx 10rpx 0 0;position: relative;background-color: #fff;
}.title {line-height: 1;padding: 40rpx 0;text-align: center;font-size: 32rpx;font-weight: normal;border-bottom: 1rpx solid #ddd;color: #444;
}.close {position: absolute;right: 24rpx;top: 24rpx;
}.content {min-height: 300rpx;max-height: 540rpx;overflow: auto;padding: 20rpx;.item {padding: 30rpx 50rpx 30rpx 60rpx;background-size: 40rpx;background-repeat: no-repeat;background-position: 0 center;background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);position: relative;}.icon {color: #999;font-size: 40rpx;transform: translateY(-50%);position: absolute;top: 50%;right: 0;}.icon-checked {color: #27ba9b;}.icon-ring {color: #444;}.user {font-size: 28rpx;color: #444;font-weight: 500;}.address {font-size: 26rpx;color: #666;}
}.footer {display: flex;justify-content: space-between;padding: 20rpx 0 40rpx;font-size: 28rpx;color: #444;.button {flex: 1;height: 72rpx;text-align: center;line-height: 72rpx;margin: 0 20rpx;color: #fff;border-radius: 72rpx;}.primary {color: #fff;background-color: #27ba9b;}.secondary {background-color: #ffa868;}
}
/style
参考代码
商品详情页通过组件 ref 获取弹出层组件实例调用打开弹出层方法。
script setup langts
import AddressPanel from ./components/AddressPanel.vue
import ServicePanel from ./components/ServicePanel.vue// uni-ui 弹出层组件 ref
const popup ref{open: (type?: UniHelper.UniPopupType) voidclose: () void
}()// 弹出层条件渲染
const popupName refaddress | service()
const openPopup (name: typeof popupName.value) {// 修改弹出层名称popupName.value name// 打开弹出层popup.value?.open()
}
/scripttemplate!-- 操作面板 --view classactionview classitem arrowtext classlabel选择/texttext classtext ellipsis 请选择商品规格 /text/viewview tapopenPopup(address) classitem arrowtext classlabel送至/texttext classtext ellipsis 请选择收获地址 /text/viewview tapopenPopup(service) classitem arrowtext classlabel服务/texttext classtext ellipsis 无忧退 快速退款 免费包邮 /text/view/view!-- uni-ui 弹出层 --uni-popup refpopup typebottom background-color#fffAddressPanel v-ifpopupName address closepopup?.close() /ServicePanel v-ifpopupName service closepopup?.close() //uni-popup
/template
服务说明 和 收获地址 组件通讯通过子调父关闭弹出层。
script setup langts
// 子调父
const emit defineEmits{(event: close): void
}()
/scripttemplateview classservice-panel!-- 关闭按钮 --text classclose icon-close tapemit(close)/text...省略/view
/template
骨架屏
参考效果
课后练习大家自主独立完成。 参考代码(总)
商品详情页
script setup langts
import { getGoodsByIdAPI } from /services/goods
import type { GoodsResult } from /types/goods
import { onLoad } from dcloudio/uni-app
import { ref } from vue
import AddressPanel from ./components/AddressPanel.vue
import ServicePanel from ./components/ServicePanel.vue// 获取屏幕边界到安全区域距离
const { safeAreaInsets } uni.getSystemInfoSync()// 接收页面参数
const query defineProps{id: string
}()// 获取商品详情信息
const goods refGoodsResult()
const getGoodsByIdData async () {const res await getGoodsByIdAPI(query.id)goods.value res.result
}// 页面加载
onLoad(() {getGoodsByIdData()
})// 轮播图变化时
const currentIndex ref(0)
const onChange: UniHelper.SwiperOnChange (ev) {currentIndex.value ev.detail!.current
}// 点击图片时
const onTapImage (url: string) {// 大图预览uni.previewImage({current: url,urls: goods.value!.mainPictures,})
}// uni-ui 弹出层组件 ref
const popup ref{open: (type?: UniHelper.UniPopupType) voidclose: () void
}()// 弹出层条件渲染
const popupName refaddress | service()
const openPopup (name: typeof popupName.value) {// 修改弹出层名称popupName.value namepopup.value?.open()
}
/scripttemplatescroll-view scroll-y classviewport!-- 基本信息 --view classgoods!-- 商品主图 --view classpreviewswiper changeonChange circularswiper-item v-foritem in goods?.mainPictures :keyitemimage taponTapImage(item) modeaspectFill :srcitem //swiper-item/swiperview classindicatortext classcurrent{{ currentIndex 1 }}/texttext classsplit//texttext classtotal{{ goods?.mainPictures.length }}/text/view/view!-- 商品简介 --view classmetaview classpricetext classsymbol¥/texttext classnumber{{ goods?.price }}/text/viewview classname ellipsis{{ goods?.name }}/viewview classdesc {{ goods?.desc }} /view/view!-- 操作面板 --view classactionview classitem arrowtext classlabel选择/texttext classtext ellipsis 请选择商品规格 /text/viewview tapopenPopup(address) classitem arrowtext classlabel送至/texttext classtext ellipsis 请选择收获地址 /text/viewview tapopenPopup(service) classitem arrowtext classlabel服务/texttext classtext ellipsis 无忧退 快速退款 免费包邮 /text/view/view/view!-- 商品详情 --view classdetail panelview classtitletext详情/text/viewview classcontentview classproperties!-- 属性详情 --viewclassitemv-foritem in goods?.details.properties:keyitem.nametext classlabel{{ item.name }}/texttext classvalue{{ item.value }}/text/view/view!-- 图片详情 --imagev-foritem in goods?.details.pictures:keyitemmodewidthFix:srcitem/image/view/view!-- 同类推荐 --view classsimilar panelview classtitletext同类推荐/text/viewview classcontentnavigatorv-foritem in goods?.similarProducts:keyitem.idclassgoodshover-classnone:url/pages/goods/goods?id${item.id}image classimage modeaspectFill :srcitem.picture/imageview classname ellipsis{{ item.name }}/viewview classpricetext classsymbol¥/texttext classnumber{{ item.price }}/text/view/navigator/view/view/scroll-view!-- 用户操作 --viewclasstoolbar:style{ paddingBottom: safeAreaInsets?.bottom px }view classiconsbutton classicons-buttontext classicon-heart/text收藏/buttonbutton classicons-button open-typecontacttext classicon-handset/text客服/buttonnavigator classicons-buttontext classicon-cart/text购物车/navigator/viewview classbuttonsview classaddcart 加入购物车 /viewview classpayment 立即购买 /view/view/view!-- uni-ui 弹出层 --uni-popup refpopup typebottom background-color#fffAddressPanel v-ifpopupName address closepopup?.close() /ServicePanel v-ifpopupName service closepopup?.close() //uni-popup
/templatestyle langscss
page {height: 100%;overflow: hidden;display: flex;flex-direction: column;
}.viewport {background-color: #f4f4f4;
}.panel {margin-top: 20rpx;background-color: #fff;.title {display: flex;justify-content: space-between;align-items: center;height: 90rpx;line-height: 1;padding: 30rpx 60rpx 30rpx 6rpx;position: relative;text {padding-left: 10rpx;font-size: 28rpx;color: #333;font-weight: 600;border-left: 4rpx solid #27ba9b;}navigator {font-size: 24rpx;color: #666;}}
}.arrow {::after {position: absolute;top: 50%;right: 30rpx;content: \e6c2;color: #ccc;font-family: erabbit !important;font-size: 32rpx;transform: translateY(-50%);}
}/* 商品信息 */
.goods {background-color: #fff;.preview {height: 750rpx;position: relative;.indicator {height: 40rpx;padding: 0 24rpx;line-height: 40rpx;border-radius: 30rpx;color: #fff;font-family: Arial, Helvetica, sans-serif;background-color: rgba(0, 0, 0, 0.3);position: absolute;bottom: 30rpx;right: 30rpx;.current {font-size: 26rpx;}.split {font-size: 24rpx;margin: 0 1rpx 0 2rpx;}.total {font-size: 24rpx;}}}.meta {position: relative;border-bottom: 1rpx solid #eaeaea;.price {height: 130rpx;padding: 25rpx 30rpx 0;color: #fff;font-size: 34rpx;box-sizing: border-box;background-color: #35c8a9;}.number {font-size: 56rpx;}.brand {width: 160rpx;height: 80rpx;overflow: hidden;position: absolute;top: 26rpx;right: 30rpx;}.name {max-height: 88rpx;line-height: 1.4;margin: 20rpx;font-size: 32rpx;color: #333;}.desc {line-height: 1;padding: 0 20rpx 30rpx;font-size: 24rpx;color: #cf4444;}}.action {padding-left: 20rpx;.item {height: 90rpx;padding-right: 60rpx;border-bottom: 1rpx solid #eaeaea;font-size: 26rpx;color: #333;position: relative;display: flex;align-items: center;:last-child {border-bottom: 0 none;}}.label {width: 60rpx;color: #898b94;margin: 0 16rpx 0 10rpx;}.text {flex: 1;-webkit-line-clamp: 1;}}
}/* 商品详情 */
.detail {padding-left: 20rpx;.content {margin-left: -20rpx;}.properties {padding: 0 20rpx;margin-bottom: 30rpx;.item {display: flex;line-height: 2;padding: 10rpx;font-size: 26rpx;color: #333;border-bottom: 1rpx dashed #ccc;}.label {width: 200rpx;}.value {flex: 1;}}
}/* 同类推荐 */
.similar {padding-left: 20rpx;.content {padding: 0 20rpx 20rpx;margin-left: -20rpx;background-color: #f4f4f4;overflow: hidden;navigator {width: 345rpx;padding: 24rpx 20rpx 20rpx;margin: 20rpx 20rpx 0 0;border-radius: 10rpx;background-color: #fff;float: left;}.image {height: 260rpx;}.name {height: 80rpx;margin: 10rpx 0;font-size: 26rpx;color: #262626;}.price {line-height: 1;font-size: 20rpx;color: #cf4444;}.number {font-size: 26rpx;margin-left: 2rpx;}}navigator {:nth-child(even) {margin-right: 0;}}
}/* 底部工具栏 */
.toolbar {background-color: #fff;height: 100rpx;padding: 0 20rpx;border-top: 1rpx solid #eaeaea;display: flex;justify-content: space-between;align-items: center;box-sizing: content-box;.buttons {display: flex; view {width: 220rpx;text-align: center;line-height: 72rpx;font-size: 26rpx;color: #fff;border-radius: 72rpx;}.addcart {background-color: #ffa868;}.payment {background-color: #27ba9b;margin-left: 20rpx;}}.icons {padding-right: 10rpx;display: flex;align-items: center;flex: 1;.icons-button {flex: 1;text-align: center;line-height: 1.4;padding: 0;margin: 0;border-radius: 0;font-size: 20rpx;color: #333;background-color: #fff;}text {display: block;font-size: 34rpx;}}
}
/style
