<view class='bk-scancode topView'>
  <view class='basicText'>
    二维码
  </view>
  <navigator url='' class='nav-class'>
    <view class='detailView'>
      <image src='/images/bianminCode.png'></image>
      <text>领取二维码</text>
      <view class='guide'></view>
    </view>
  </navigator>
</view>

/* 全局class */
page{
  background-color: #EBEBEB;
  width:100%;
  height:100%;
}
/* 整个总类板块的背景色及距顶端高度 */
.bk-scancode{
  margin-top:30px;
}
.topView{
  margin-top:0px;
}
/* 二维码整个板块的头文字和上边框条 */
.basicText{
  border: 5px #DCDCDC;
  border-style: solid none none none;
  color:#808080;
  line-height: 2;
  visibility: visible;
  padding-left:30px;
  box-sizing: border-box;
}
/* 子选项的边框及边距设定 */
.nav-class{
  margin-left:10px;
  margin-right:10px;
  border-radius: 10px;
  margin-top:10px;
  border:1px solid;
  border-color: transparent;
  background-color:#DCDCDC;
}
/* 引导箭头 */
.guide{
  width:7px;
  height:7px;
  border-width:1px 1px 0 0;
  border-color:#464646;
  border-style:solid;
  transform: rotate(45deg);
  margin-top:5px;
}
/* 子选项的边框内部设定 */
.detailView{
  margin-top:15px;
  margin-bottom:15px;
  margin-left:10px;
  vertical-align:middle;
}
/* icon的设定 */
.detailView image{
  width:20px;
  height:20px;
}
/* icon对应的字体设定 */
.detailView text{
  margin-left:10px;
  color:#323232;
}

（bianminCode.png)

因为后续navigator中的文字板块长度有变化，所以不考虑在guide中添加margin-left。