product_wx/pages/subPackages/peripheralService/detail.vue

<template>
    <div class="peripheralDetail">
        <div class="peripheralFirstBox">
          <div class="periTitle">福奈特洗衣店(基金PARK店) <span class="periType">干洗</span></div>
          <div class="periTime">更新时间：2021-03-21</div>
          <div class="periAddress">
            <span>地址：无锡市经开区XXXXXXXXXX</span>
            <img src="../parkActivity/image/dhIcon.png" class="dhIcon">
          </div>
          <div class="contactBox">
          <span class="contackLeft">
            <span style="color: #666666;font-size: 28rpx">联系电话：</span>
            <span style="color: #18172A;font-size: 36rpx;font-weight: 600">0510-680**808</span>
          </span>
            <img src="https://www.idea-co-sf.com/gardenProduct/image/phoneIcon.png" class="phoneIcon">
          </div>
        </div>
      <div class="peripheralFirstBox" style="padding: 32rpx">
        <div class="periTitle" style="padding: 0 0 32rpx 0">简介</div>
        <img src="https://www.idea-co-sf.com/gardenProduct/image/img1.png" class="firstImg"/>
        <div class="perInfo">
          洗衣拥有20多年的品牌沉淀,连续5年加盟稳居全国前列硬件上洗衣拥有20多年的品牌沉淀,连续5年加盟稳居全国前列,硬件上洗衣拥有20多年的品牌沉淀,连续5年加盟稳居全国前列,硬件上洗衣拥有20多年的品牌沉淀.
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "detail"
}
</script>

<style lang="scss">
    .peripheralDetail{
      box-sizing: border-box;
       .peripheralFirstBox{
         margin: 24rpx 0;
         padding: 32rpx 0;
         background: white;
         box-sizing: border-box;
         .periTitle{
           color: rgba(34, 34, 34, 1);
           font-size: 32rpx;
           font-weight: 600;
           display: flex;
           align-items: center;
           padding: 0 32rpx;
           box-sizing: border-box;
           .periType{
             display: flex;
             align-items: center;
             justify-content: center;
             width: 92rpx;
             height: 48rpx;
             background: rgba(3, 101, 249, 0.20);
             color: rgba(3, 101, 249, 1);
             border-radius: 8rpx;
             font-size: 28rpx;
             font-weight: 500;
             margin-left: 24rpx;
           }
         }
         .periTime{
           font-size: 28rpx;
           color: rgba(102, 102, 102, 1);
           padding: 16rpx 32rpx;
           box-sizing: border-box;
         }
         .periAddress{
           display: flex;
           justify-content: space-between;
           align-items: center;
           font-size: 28rpx;
           color: rgba(102, 102, 102, 1);
           padding: 0 32rpx 32rpx 32rpx;
           box-sizing: border-box;
           .dhIcon{
             width: 36rpx;
             height: 36rpx;
             padding-left: 20rpx;
             border-left: 1px solid #E6E6E6;
           }
         }
         .contactBox{
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding:24rpx 32rpx 0 32rpx;
           border-top: 1px solid #E6E6E6;
           .contackLeft{
             display: flex;
             align-items: center;
           }
           .phoneIcon{
             width: 64rpx;
             height: 64rpx;
           }
         }
         .firstImg{
           width: 686rpx;
           height: 300rpx;
         }
         .perInfo{
           font-size: 28rpx;
           color: rgba(51, 51, 51, 1);
           line-height: 50rpx;
           margin-top: 24rpx;
         }
       }
    }
</style>