微信小程序红色订单详情页面样式设计制作开发教程

<!--pages/order/detail.wxml-->
<view class="w100">
		<view class="p_all bg_white df item" wx:for="{{proData}}">
			<view class="cp_photo">			
				<image src="{{item.photo_x}}"></image>
			</view>
			<view class="df_1">	
				<view class="font_14 mt5 ovh1">
		      {{item.name}}
		    </view>
			  <text class="gm_ovh_1h red pt10">¥{{item.price}}</text>
			  <view class="sl">
		        数量：{{item.num}}
		    </view>
			</view>
		</view>		
		
		<view class="p_all bg_white mt10 font_14">
			<view class="df">
				<view class="df_1 c6">
				<view class="l_h20">收货人：{{orderData.receiver}}<text class="fl_r mr10">{{orderData.tel}}</text></view>
				<view class="l_h20 mt5">地址：{{orderData.address_xq}}</view>
				</view>
			</view>
		</view>	

		<view class="p_all bg_white mt10 c6 l_h20  font_14">
			<view >
			订单状态：<text class="red">{{orderData.order_status}}</text>
			</view>
			<view >
			订单编号：{{orderData.order_sn}}
			</view>
			<view class="mt10">
			订单时间：{{orderData.addtime}}
			</view>         
		    </view>

           <view class="p_all bg_white mt10 font_14">
			<textarea class="min_60" auto-height name="remark" disabled="{{true}}" placeholder="订单备注" value="{{orderData.remark?orderData.remark:'未备注'}}"/> 
		</view>	

	<view class="zhifu mt10 tc">金额：<span class="font_20 red">¥ {{orderData.price}}</span></view>
        

	<view class="p_all mt10">
		<view class="btnGreen">
			        <!-- <button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="warn"> 确认 </button> -->
        		<!--<contact-button type="default-light" session-from="orderNo_{{orderData.OrderNo}}">
		        客服
		        </contact-button>-->
		</view>
	</view>
</view>