image.pngimage.png

    1. <template>
    2.     <view class='goods_detail'>
    3.         <swiper indicator-dots>
    4.             <swiper-item v-for="(item,index) in swipers" :key="index">
    5.                 <image :src='item.src'></image>
    6.             </swiper-item>
    7.         </swiper>
    8.         <view class='box1'>
    9.             <view class='price'>
    10.                 <text>￥6788</text>
    11.                 <text>￥8788</text>
    12.                 <view class='goods_name'>苹果Apple iPhone 6 plus 16G 4G手机（联网三网板）</view>
    13.             </view>
    14.         </view>
    16.         <view class='line'></view>
    18.         <view class='box2'>
    19.             <view>货号：1111</view>
    20.             <view>库存：2222</view>
    21.         </view>
    23.         <view class='line'></view>
    24.         <view class='box3'>
    25.             <view class='tit'>详情介绍</view>
    26.             <view class='content'>内容</view>
    27.         </view>
    28.     </view>
    29. </template>
    31. <script>
    32.     export default {
    33.         data() {
    34.             return {
    35.                 id: 0,
    36.                 swipers: []
    37.             }
    38.         },
    39.         methods: {
    40.             //获取轮播图的数据，首先会有函数
    41.             async getSwipers() {
    42.                 const res = await this.$myRequest({
    43.                     url: '/api/getthumimages/' + this.id
    44.                 })
    45.                 this.swipers = res.data.message
    46.             }
    47.         },
    48.         onLoad(options) {
    49.             // console.log(options)
    50.             this.id = options.id
    51.             this.getSwipers()
    52.         }
    53.     }
    54. </script>
    56. <style lang="scss">
    57.     .goods_detail {
    58.         swiper {
    59.             height: 750rpx;
    61.             image {
    62.                 width: 100%;
    63.                 height: 100%;
    64.             }
    65.         }
    66.         .box1 {
    67.             padding: 10px;
    68.             .price {
    69.                 font-size: 35rpx;
    70.                 color: $shop-color;
    71.                 line-height: 80rpx;
    72.                 text:nth-child(2) {
    73.                     color: #ccc;
    74.                     font-size: 28rpx;
    75.                     text-decoration: line-through;
    76.                     margin-left: 20rpx;
    77.                 }
    78.             }
    79.             .goods_name {
    80.                 font-size: 35rpx;
    81.                 line-height: 60rpx;
    82.                 color:#333;
    83.             }    
    84.         }
    85.         .box2{
    86.             padding:10rpx 10rpx;
    87.             font-size: 35rpx;
    88.             line-height: 60rpx;
    89.         }
    91.         .box3{
    92.             .tit{
    93.                 font-size: 40rpx;
    94.                 padding-left: 10px;
    95.                 border-bottom: 1px solid #eee;
    96.                 line-height: 70rpx;
    97.             }
    98.             .content{
    99.                 padding:10px;
    100.                 font-size:28rpx;
    101.                 color:#333;
    102.             }
    103.         }
    104.     }
    106. .line{
    107.     height:10rpx;
    108.     width:750rpx;
    109.     background: #eee;
    110. }
    111. </style>

    本章节主要就是 样式的调节，使用scss相对来说简单一点 注意行显示和块显示的区别