edit

service/assets/mobile/css/success.css

@@ -1,2 +1,163 @@
-.code{background:url(../images/code.png) no-repeat top #eee;background-size:4.8rem 4.8133rem;height:4.533333rem;padding-bottom:.533333rem;padding-top:.2667rem;margin-bottom:.5333rem}.code p{height:.96rem;line-height:.96rem;margin-bottom:.2667rem;text-align:center;color:#fff;font-size:.4rem}.code img{width:2.7467rem;height:2.7467rem;display:block;margin:0 auto}.success{background:url(../images/success.png) no-repeat top;background-size:.786667rem .786667rem;width:.8rem;height:.8rem;margin:0 auto .506667rem}.txt{margin:0 1.6rem .533333rem;font-size:.3733rem}.txt span{color:#d1171a}.download{margin-bottom:.333333rem;font-size:.373333rem;text-align:center}.download *{border-bottom:.026667rem solid #d1171a;color:#d1171a}.tip{display:none;margin-bottom:.5333rem;text-align:center;color:#999;font-size:.32rem}.read{margin-bottom:1.066667rem;position:relative;height:.9333rem}.read p{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:url(../images/].png) no-repeat 100% 0;background-size:.2667rem .9333rem;padding:0 .4rem;color:#d1171a;font-size:.3733rem;line-height:.933333rem}.read p,.read P:before{position:absolute;top:0;height:.9333rem}.read P:before{left:0;background:url(../images/[.png) no-repeat 0 0;background-size:.2667rem .9333rem;padding-right:.4rem;content:""}.btn{margin:0 .6rem}.btn .button{float:right;width:4rem}.btn .button.opposite{float:left}.btn .button span{position:absolute;opacity:0}.success-copy{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:rgba(0,0,0,.75);border-radius:.2rem;width:6.6667rem;height:1.0667rem;line-height:1.0667rem;font-size:.4rem;text-align:center;color:#fff}
+.code {
+    background: url(../images/code.png) no-repeat top #eee;
+    background-size: 4.8rem 4.8133rem;
+    height: 4.533333rem;
+    padding-bottom: .533333rem;
+    padding-top: .2667rem;
+    margin-bottom: .5333rem
+}
+
+.code p {
+    height: .96rem;
+    line-height: .96rem;
+    margin-bottom: .2667rem;
+    text-align: center;
+    color: #fff;
+    font-size: .4rem
+}
+
+.code img {
+    width: 2.7467rem;
+    height: 2.7467rem;
+    display: block;
+    margin: 0 auto
+}
+
+.success {
+    background: url(../images/success.png) no-repeat top;
+    background-size: .786667rem .786667rem;
+    width: .8rem;
+    height: .8rem;
+    margin: 0 auto .506667rem
+}
+
+.txt {
+    margin: 0 1.6rem .533333rem;
+    font-size: .3733rem
+}
+
+.txt span {
+    color: #d1171a
+}
+
+.download {
+    margin-bottom: .333333rem;
+    font-size: .373333rem;
+    text-align: center
+}
+
+.download * {
+    border-bottom: .026667rem solid #d1171a;
+    color: #d1171a
+}
+
+.tip {
+    display: none;
+    margin-bottom: .5333rem;
+    text-align: center;
+    color: #999;
+    font-size: .32rem
+}
+.tabtn{
+    display: block;
+    margin: .2rem /* 15/75 */ auto;
+    text-align: center;
+    font-size: .373333rem /* 28/75 */;
+    line-height: .666667rem /* 50/75 */;
+    width:3.2rem /* 240/75 */;
+    height:.666667rem /* 50/75 */;
+    border:1px /* 1/75 */ solid #D1171A;
+    opacity:1;
+    color: #D1171A;
+    border-radius:.066667rem /* 5/75 */;
+}
+.read {
+    margin-bottom: 1.066667rem;
+    position: relative;
+}
+
+.read p {
+    /* left: 50%;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+    background: url(../images/].png) no-repeat 100% 0;
+    background-size: .2667rem .9333rem;
+    padding: 0 .4rem; */
+    color: #d1171a;
+    /* font-size: .3733rem; */
+    /* line-height: .933333rem; */
+    width: 6.933333rem /* 520/75 */;
+    margin: 0 auto;
+}
+.read p span{
+    display: inline-block;
+    width: 50%;
+    padding: 0 .266667rem /* 20/75 */;
+    box-sizing: border-box;
+    position: relative;
+    font-size: .373333rem /* 28/75 */;
+    line-height: .48rem /* 36/75 */;
+}
+.read p span:nth-child(even){
+    text-align: left;
+}
+.read p span:nth-child(odd){
+    text-align: right;
+}
+.read p span:nth-child(odd):after{
+    content: "|";
+    position: absolute;
+    right: -0.053333rem /* 4/75 */;
+    top: 0;
+}
+
+/* .read p,
+.read P:before {
+    position: absolute;
+    top: 0;
+    height: .9333rem
+}
+
+.read P:before {
+    left: 0;
+    background: url(../images/[.png) no-repeat 0 0;
+    background-size: .2667rem .9333rem;
+    padding-right: .4rem;
+    content: ""
+} */
+
+.btn {
+    margin: 0 .6rem
+}
+
+.btn .button {
+    float: right;
+    width: 4rem
+}
+
+.btn .button.opposite {
+    float: left
+}
+
+.btn .button span {
+    position: absolute;
+    opacity: 0
+}
+
+.success-copy {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    background: rgba(0, 0, 0, .75);
+    border-radius: .2rem;
+    width: 6.6667rem;
+    height: 1.0667rem;
+    line-height: 1.0667rem;
+    font-size: .4rem;
+    text-align: center;
+    color: #fff
+}
+
 /*# sourceMappingURL=success.css.map?v=ed449126*/

service/assets/mobile/success.html

@@ -16,9 +16,10 @@
     <p class="txt">购买成功，长按上方小程序码识别或微信搜索“<span>JSTYLE精美电子刊</span>”进入小程序使用兑换码</p>
     <p class="download" style="display:none;"><a href="#">点击下载“JSTYLE精美”APP查看电子刊</a></p>
     <div id="code" style="display:none;">
-        <p class="tip" style="display:none;">(点击下方兑换码可直接复制)</p>
+        <span class="tabtn" style="display:block;">阅读码</span>
+        <p class="tip" style="display:block;">(长按下方兑换码可直接复制)</p>
         <div class="read">
-            <p>兑换码：1521DSJDB55</p>
+            <p><span>1521DSJDB55</span><span>1521DSJDB55</span><span>1521DSJDB55</span><span>1521DSJDB55</span><span>1521DSJDB55</span><span>1521DSJDB55</span><span>5521DSJDB55</span><span>5521DSJDB55</span><span>1521DSJDB55</span><span>1521DSJDB55</span></p>
         </div>
     </div>
     <div class="btn clearfix">

service/src/Buy.php

@@ -183,15 +183,16 @@ class Buy extends Base
                 $config['button'] = '复制兑换码<span>'.$order['code'].'</span>';
             }
             
-            $config['code'] = '<p>兑换码：'.$order['code'].'</p>';
+            $config['code'] = '<p><span>'.$order['code'].'</span></p>';
             $buy = Dever::db('journal/buy_num')->one($buy_id);
             if ($buy && $buy['code'] > 1) {
                 $uid = $this->user['id'];
                 $code = Dever::db('code/info')->state(array('create_uid' => $uid, 'order_id' => $order['order_id']));
-                $config['code'] = '<p>兑换码</p>';
+                $config['code'] = '<p>';
                 foreach ($code as $k => $v) {
-                    $config['code'] .= '<p>'.$v['code'].'</p>';
+                    $config['code'] .= '<span>'.$v['code'].'</span>';
                 }
+                $config['code'] .= '</p>';
             }
         }