五十 商品详情页 内容布局

detials.vue

<template>
        <view class="details">
                <!-- 商品图 -->
                <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                        <swiper-item v-for="(item,index) in swiperList" :key="index">
                                <view class="swiper-item">
                                        <image class="swiper-img" :src="item.imgUrl" mode=""></image>
                                </view>
                        </swiper-item>
                </swiper>
                <!-- 价格和名称 -->
                <view class="detial-goods">
                        <view class="goods-pprice">￥399.00</view>
                        <view class="goods-oprice">￥599.33</view>
                        <view class="goods-name">正在热刷新，如刷新失败，请点击控制台工具栏上的【重启应用图标】</view>
                </view>
                <!-- 商品详情 -->
                <view>
                        <view>
                                <image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
                        </view>
                        <view>
                                <image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
                        </view>
                        <view>
                                <image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
                        </view>
                        <view>
                                <image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
                        </view>
                        <view>
                                <image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
                        </view>
                </view>
                <!-- 商品列表 -->
                <Card name="看了又看"></Card>
                <CommodityList :commodityList='dataList'></CommodityList>
        </view>
</template>

<script>
        import Card from '@/components/common/card.vue'
        import CommodityList from '@/components/common/commodityList.vue'
        export default {
                data() {
                        return {
                                swiperList: [{
                                        imgUrl: '../../static/img/recommended-3.png'
                                }, {
                                        imgUrl: '../../static/img/recommended-3.png'
                                }, {
                                        imgUrl: '../../static/img/recommended-3.png'
                                }],
                                dataList: [{
                                                id: 1,
                                                img: '../../static/img/commondity.png',
                                                name: '爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                pprice: '299',
                                                oprice: '699',
                                                discount: '5.5'
                                        },
                                        {
                                                id: 2,
                                                img: '../../static/img/commondity.png',
                                                name: '爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                pprice: '269',
                                                oprice: '699',
                                                discount: '5.5'
                                        },
                                        {
                                                id: 3,
                                                img: '../../static/img/commondity.png',
                                                name: '爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                pprice: '289',
                                                oprice: '688',
                                                discount: '5.5'
                                        }
                                ]
                        }
                },
                components: {
                        Card,
                        CommodityList
                },
                methods: {

                },

        }
</script>

<style>
        swiper {
                width: 100%;
                height: 700rpx;
        }

        .swiper-img {
                width: 100%;
                height: 700rpx;
        }

        .detial-goods {
                text-align: center;
                font-size: 36rpx;
                font-weight: bold;
                padding: 10rpx 0;
        }

        .detial-imgs {
                width: 100%;
        }
</style>