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">{{ formatPrice(goods.price) }}</div> </template> </van-cell> <van-cell class="goods-express"> <template #title> <van-col span="10">运费:{{ goods.express }}</van-col> <van-col span="14">剩余:{{ goods.remain }}</van-col> </template> </van-cell> </van-cell-group> <van-cell-group class="goods-cell-group"> <van-cell value="进入店铺" icon="shop-o" is-link @click="enterShop"> <template #title> <span class="van-cell-text">有赞的店</span> <van-tag class="goods-tag" type="danger">官方</van-tag> </.........完整代码请登录后点击上方下载按钮下载查看
网友评论0