1. <dd id="erndk"></dd>
                1. 微信小程序訂單頁面

                  互聯網 2022/4/26 20:12:57

                  view:<view class="order"><view class="content_"><view class="title"><view>訂單編號:2018041729873019</view><text>已配送</text></view><view class="card" wx:for=&…

                  view:

                  <view class="order">
                      <view class="content_">
                          <view class="title">
                              <view>訂單編號:2018041729873019</view>
                              <text>已配送</text>
                          </view>
                          <view class="card" wx:for="{{List}}">
                              <view class="card-img">
                                  <image src="../../../img/refresh.png"></image>
                              </view>
                              <view class="card-text">
                                  <view class="card-text_">
                                      <text>比利時(Balance)甜葉菊純黑巧克力</text>
                                      <view>
                                          <view>¥98</view>
                                          <text>x1</text>
                                      </view>
                                  </view>
                              </view>
                          </view>
                      </view>
                      <view class="bottom-title">
                          共2件商品 實付:¥198.00
                      </view>
                      <view class="card-button">
                          <view>確認送達</view>
                          <view>補差價</view>
                          <view>退款</view>
                      </view>
                  </view>

                   

                  css:

                  .order {
                    width: 100%;
                    background-color: #f4f4f4;
                  }
                  
                  .content_ {
                    width: 100%;
                    background-color: #fff;
                    display: flex;
                    flex-direction: column;
                  }
                  
                  .title {
                    width: 94%;
                    line-height: 30px;
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px solid #f5f8f4;
                    padding: 0 3%;
                  }
                  
                  .title>view {
                    color: #666;
                  }
                  
                  .title>text {
                    color: #fa9b4e;
                  }
                  
                  .bottom-title {
                    width: 96%;
                    text-align: right;
                    line-height: 40px;
                    background-color: #fff;
                    padding: 0 2%;
                    border: 2rpx solid #f5f5f5;
                  }
                  
                  .card {
                    width: 100%;
                    height: 100px;
                    display: flex;
                    flex-direction: row;
                  }
                  
                  .card-img {
                    height: 100px;
                    width: 100px;
                    padding: 7px 7px;
                  }
                  
                  .card-img>image {
                    width: 86px;
                    height: 86px;
                  }
                  
                  .card-text {
                    height: 100px;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                  }
                  
                  .card-text_ {
                    width: 100%;
                    height: 60px;
                    display: flex;
                    flex-direction: row;
                  }
                  
                  .card-text_>text {
                    width: 80%;
                    padding-left: 20rpx;
                    color: #444;
                    font-weight: 600;
                    font-size: 10pt;
                  }
                  
                  .card-text_>view {
                    padding-right: 20rpx;
                    width: 20%;
                    text-align: right;
                  }
                  
                  .card-text_>view>view {
                    color: #444;
                    font-weight: 600;
                    margin-bottom: 10rpx;
                  }
                  
                  .card-text_>view>text {
                    font-size: 9pt;
                    color: #999;
                  }
                  
                  .card-button {
                    width: 98%;
                    line-height: 40px;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-end;
                    padding: 20rpx 2%;
                    background: #fff;
                  }
                  
                  .card-button>view {
                    background-color: #fff;
                    line-height: 25px;
                    width: 30%;
                    margin-left: 10rpx;
                    text-align: center;
                    border-radius: 15px;
                    border:1px solid#d6d6d6;
                    color: #444;
                    font-size: 9pt;
                  }

                  預覽:

                   

                  隨時隨地學軟件編程-關注百度小程序和微信小程序
                  關于找一找教程網

                  本站文章僅代表作者觀點,不代表本站立場,所有文章非營利性免費分享。
                  本站提供了軟件編程、網站開發技術、服務器運維、人工智能等等IT技術文章,希望廣大程序員努力學習,讓我們用科技改變世界。
                  [微信小程序訂單頁面]http://www.yachtsalesaustralia.com/tech/detail-317279.html

                  贊(0)
                  關注微信小程序
                  程序員編程王-隨時隨地學編程

                  掃描二維碼或查找【程序員編程王】

                  可以隨時隨地學編程啦!

                  技術文章導航 更多>
                  国产在线拍揄自揄视频菠萝

                        1. <dd id="erndk"></dd>