10--------------------内置页面

.wxml

<!--PART ONE-->
<!--头部-->
<view class="header">
  <view class="container hdcon">
    <navigator open-type="switchTab" url="/pages/index/index" class="logo">
      <image mode="heightFix" src="/images/logo.png"></image>
    </navigator>
    <view class="kefu">
      <button class="btn" open-type="contact"></button>
      <image  mode="heightFix" src="/images/xiaoxi.png"></image>
    </view>
  </view>
</view>

<view class="banner">
  <image src="/images/psbanner.jpg" mode="widthFix"></image>
</view>

<view class="psBox">
  <view class="psBoxTit">
     专业转件技能
  </view>
  <view class="psBoxConOne" >
    <view class="item">
      <image src="/images/photoshop.png1.png" class="pic" mode="widthFic"></image>
      <view>photoshop</view>
    </view>
    <view class="item">
      <image src="/images/photoshop.png1.png" class="pic" mode="widthFic"></image>
      <view>photoshop</view>
    </view>
    <view class="item">
      <image src="/images/photoshop.png1.png" class="pic" mode="widthFic"></image>
      <view>photoshop</view>
    </view>
    <view class="item">
      <image src="/images/photoshop.png1.png" class="pic" mode="widthFic"></image>
      <view>photoshop</view>
    </view>
    <view class="item">
      <image src="/images/photoshop.png1.png" class="pic" mode="widthFic"></image>
      <view>photoshop</view>
    </view>
   
  </view>
</view>

<view class="psBox">
  <view class="psBoxTit">
     专业转件技能
  </view>
  <view class="psBoxCon" >
   <image src="/images/psmajor02.jpg2.jpg" class="pic" mode="widthFic"></image>
   <view class="text">
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
   </view>
  </view>
</view>

<view class="psBox">
  <view class="psBoxTit">
     专业转件技能
  </view>
  <view class="psBoxCon" >
   <image src="/images/psmajor02.jpg2.jpg" class="pic" mode="widthFic"></image>
   <view class="text">
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
   </view>
  </view>
</view>

<view class="psBox">
  <view class="psBoxTit">
     专业转件技能
  </view>
  <view class="psBoxCon" >
   <image src="/images/psmajor02.jpg2.jpg" class="pic" mode="widthFic"></image>
   <view class="text">
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
   </view>
  </view>
</view>

<view class="psBox">
  <view class="psBoxTit">
     专业转件技能
  </view>
  <view class="psBoxCon" >
   <image src="/images/psmajor02.jpg2.jpg" class="pic" mode="widthFic"></image>
   <view class="text">
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
   </view>
  </view>
</view>

<view class="psBox">
  <view class="psBoxTit">
     专业转件技能
  </view>
  <view class="psBoxCon" >
   <image src="/images/psmajor02.jpg2.jpg" class="pic" mode="widthFic"></image>
   <view class="text">
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
    <view>人像精修</view>
   </view>
  </view>
</view>

<!--PART SIX-->
<!--logo-->
<view class="footer">
  <image class="pic" mode="widthFix" src="/images/logo.png"></image>
  <view class="txt">-高端实训品牌-</view>
</view>

.wxss

/**PART ONE头部布局**/
.header{width:750rpx;height:90rpx;}
.hdcon{display:flex;justify-content:space-between;align-items:center;height:100%;}/**两张图片放在一行**/
.hdcon navigator,.hdcon .kefu{height:50rpx;}
.hdcon image{height:100%;}
.kefu{position:relative;animation:dh linear 1s infinite;}
.kefu .btn{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;}

.banner{width:100%}
.banner image{width:750rpx;display:block;}
.psBox{padding:80rpx 0;background:#1C356E}
.psBox:nth-child(2n){background:#fff;}
.psBoxTit{width:490rpx;height:70rpx;background:#DE2E05;border-radius:70rpx;color:#fff;text-align:center;line-height:70rpx;font-size:40rpx;margin:0 auto;position:relative;margin-bottom:40rpx;}
.psBoxTit::before{display:block;content:"";width:100%;height:100%;position:absolute;top:0;left:0;border:2px dotted #DE2E05;box-sizing:border-box;border-radius:70rpx;transform:scale(1.03,1.2);}

.psBoxCon .pic{width:100%;}
.psBoxCon .text{padding:40rpx 26rpx 0;box-sizing:border-box;display:flex;flex-wrap:wrap;}
.psBoxCon .text view{width:50%;font-size:30rpx;line-height:1.8em;position: relative;padding-left:18rpx;box-sizing:border-box;}
.psBoxCon .text view::before{content:"";display:block;width:10rpx;height:10rpx;border-radius:50%;background:#000;position:absolute;left:0;top:50%;margin-top:-5rpx;}
.psBox:nth-child(2n-1) .psBoxCon .text {color:#fff;}
.psBox:nth-child(2n-1) .text view::before{background:#fff;}
.psBoxConOne{color:#fff;display:flex;flex-wrap:wrap;justify-content:center;}
.psBoxConOne image{text-align:center;padding:20rpx;}
.psBoxConOne image{width:180rpx;height:180rpx;}
.psBoxConOne .item view{text-transform:uppercase;font-size:28rpx;padding-top:5rpx;}
/*PART SIX*/
/*logo*/
.footer{padding:30rpx 0;background:#f2f2f2;text-align:center;}
.footer .pic{width: 180rpx;}
.footer .txt{font-size:25rpx;color:#666;}