vue3+vant3实现电商手机端商品详情页代码
代码语言:html
所属分类:布局界面
代码描述:vue3+vant3实现电商手机端商品详情页代码
代码标签: vue3 vant3 电商 手机端 商品 详情页 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" /> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vant.3.index.css"> <!-- 自定义样式 --> <style> body { color: #333; background-color: #f8f8f8; } .goods { padding-bottom: 50px; } .goods-swipe img { width: 100%; display: block; } .goods-title { font-size: 16px; } .goods-price { color: #f44; } .goods-express { font-size: 12px; padding: 5px 15px; } .goods-cell-group { margin: 15px 0; } .goods-tag { margin-left: 5px; } </style> </head> <body> <div id="app"> <!-- 模板 --> <div class="goods"> <van-swipe class="goods-swipe" :autoplay="3000"> <van-swipe-item v-for="thumb in goods.thumb" :key="thumb"> <img :src="thumb" /> </van-swipe-item> </van-swipe> <van-cell-group> <van-cell> <template #title> <div class="goods-title">{{ goods.title }}</div> <div class="goods-price".........完整代码请登录后点击上方下载按钮下载查看
网友评论0