通常看到这个页面，会想到它是有几块组成的。
第一块，分销佣金。
第二块，包括代言、商品、二维码
其中代言又是左右结构。
于是乎基本的div结构就出来了。
<div class="row_1"> </div> <div class="row_2"> <div clas="row_2_1"> </div> <div class="row_2_2"> </div> <div class="row_2_3"> </div> </div> <div class="row_3"> </div>
然后逐层的添加与调整。
<div class="row_1"> <div class="left"><img class="money_img" src="{sh::PRES}public/img/t2.png"></span></div> <div class="right"> <div class="money">分销佣金<font color='#CC0000'>{sh:$commission}</font>元</div> <div class="sale">已销售<font color='#CC0000'><php>echo ($goodsData['salecount'] + $goodsData['fakemembercount']);</php></font>件</div> </div> </div> <div class="row_2"> <div clas="row_2_1"> <div class="left"><img src="{sh:$wxuserData.headimgurl}" width="70px" class="headimg"></div> <div class="popover right"> <div class="arrow"></div> <div class="popover-content"> <p>我是<font color='#FF9900'>{sh:$wxuserData.nickname}</font>，<br/><span>我为<font color='#FF9900'>{sh:$storeData.name}</font>代言。</span></p> </div> </div> </div> <div class="row_2_2"> <div class="item-img"> <img class="item-img-logo" src="{sh:$goodsData.logoimg}" width="100%"> <div class="item-bottom"> <span>{sh:$goodsData.name}</span> <div> <span class="price">¥<strong>{sh:$goodsData.price}</strong></span> <small><s>¥{sh:$goodsData.oprice}</s></small> </div> </div> </div> </div> <div class="row_2_3 qrcode"> <img src="{sh:$goodsData.qrcode}" width="100%"> <strong>长按二维码 识别图中二维码</strong> </div> </div> <div class="row_3 tip"> <div class="title"> <i class="fa fa-sitemap"></i><span> 分销如何赚钱</span> </div> <div class="content"> <div> <strong>第一步：</strong>转发商品链接或商品二维码图片给微信好友；<br/><br/> <strong>第二步：</strong>从您转发的链接或图片进入商城的好友，系统将自动锁定成为您的客户，他们在微信商城中购买任何商品，您都可以获得分销佣金；<br/><br/> <strong>第三步：</strong>您可以在分销中查看【我的团队】和【分销佣金】。好友确认收货后，佣金可提现。<br/><br/> </div> </div> </div>
css最好写到style中
<style> body{ background-color: #EFEFEF; } .item-bottom{ position: absolute; left: 0px; bottom: 0px; background: rgba(0,0,0,0.4) none repeat scroll !important; width: 100%; color: #fff; line-height: 25px; padding-right: 5px; text-align: left; font-size: 13px; padding-left: 10px; } .qrcode{text-align: center;} .qrcode img{width:95%;} .qrcode strong{color:#cc0033;text-align:center;padding:20px;display:block} .tip .title{height:30px;margin:10px;vertical-align:middle;line-height:30px;} .tip .title img{padding: 5px;float:left;} .tip .title div{width:100%;margin-left:5px;height:1px;background-color: #cc0033;} .tip .content{margin-left:15px;margin-right:15px;color:gray;} .tip .content strong{color:black;} .row_1{ width:100%;display: inline-flex;background-color: white;margin-bottom: 15px; } .row_2{ width:100%;position: relative;background-color: white; } .row_2_1{ display: inline-flex;margin-bottom: 10px; } .popover{ display: inline;left:80px;top:10px;width:70%; } .headimg{ margin: 10px 10px; } .item-img{ position: relative; } .price{ color:#CC3300; font-size: 16px; } .money{ display: inline-grid;font-size: 25px;padding:10px 5px 5px 5px; } .sale{ font-size: 18px;padding-left:10px;color:gray; } .money_img{ width: 80px; padding: 5px; } .popover-content{ font-size: 14px; } </style>
如果很多的话，可以写到一个单独的css文件中，引入进来。
tips：
页面或者功能实现之后，这是第一步。
最好能够继续优化一下页面与代码。
将没用的去除，或者将代码进行优化调整。这是一个好习惯。
不管怎样，搞出来就是最牛逼的。优化是在搞出来基础上去做的事情。
