html简单组件（九）：简洁的商城订单列表显示（带状态）

快来打我* 2022-11-13 09:30 213阅读 0赞

### html简单组件（九）：简洁的商城订单列表显示（带状态） ###

#### 效果图为： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]

#### HTML代码 ####

<div class="textDiv">
    			<div class="head">
    				<b>订单编号：</b>
    				2021032610194432
    			</div>
    			<div class="context">
    				<b>订单时间：</b>
    				2021-03-26 10:11:23
    			</div>
    			<div class="price">
    				<b>订单价格：</b>
    				<b style="color: red;">152.00￥</b>
    			</div>
    			<div class="stat blue">
    				待发货
    			</div>
    		</div>
    
    		<div class="textDiv">
    			<div class="head">
    				<b>订单编号：</b>
    				2021032610194433
    			</div>
    			<div class="context">
    				<b>订单时间：</b>
    				2021-03-27 15:56:01
    			</div>
    			<div class="price">
    				<b>订单价格：</b>
    				<b style="color: red;">751.00￥</b>
    			</div>
    			<div class="stat green">
    				已发货
    			</div>
    		</div>
    
    		<div class="textDiv">
    			<div class="head">
    				<b>订单编号：</b>
    				2021032610194434
    			</div>
    			<div class="context">
    				<b>订单时间：</b>
    				2021-03-28 15:22:45
    			</div>
    			<div class="price">
    				<b>订单价格：</b>
    				<b style="color: red;">75.00￥</b>
    			</div>
    			<div class="stat red">
    				已退货
    			</div>
    		</div>
    	</body>

#### CSS样式代码 ####

.textDiv { 
    				width: 260px;
    				height: 85px;
    				border-radius: 10px;
    				background-color: white;
    				border: 2px solid gainsboro;
    				margin-top: 10px;
    			}
    
    			.head, .context, .price { 
    				width: 250px;
    				height: 24px;
    				margin-left: 15px;
    				font-size: 12px;
    			}
    
    			.stat { 
    				height: 0;
    				margin: 18px auto;
    				border: 18px solid transparent;
    				transform: rotate(45deg) translateY(-160px) translateX(8px);
    				font-size: 12px;
    				width: 40px;
    				text-align: center;
    				color: white;
    			}
    
    			.blue { 
    				border-bottom-color: deepskyblue;
    			}
    
    			.green { 
    				border-bottom-color: lawngreen;
    			}
    
    			.red { 
    				border-bottom-color: red;
    			}
    
    			.head { 
    				margin-top: 10px;
    			}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]: /images/20221022/655bf88f3da148f6bde3d7309285b3ab.png

发表评论取消回复

表情：

评论列表（有 0 条评论，213人围观）

还没有评论，来说两句吧...

相关阅读

相关【畅购商城】订单模块之显示勾选商品和添加订单

目录显示勾选商品添加订单接口：下订单接口：更新库存下订单分析后端实现：JavaBean 后端实现：更新库存后端实现：下订单前端实现显示勾

爱被打了一巴掌/ 2024年03月31日 16:26/ 0 赞/ 84 阅读

相关【畅购商城】订单模块之收货人列表

目录构建订单服务：8100 收货人列表接口后端实现：JavaBean 后端实现前端实现构建订单服务：8100 步骤一：构建项目，changgou4

红太狼/ 2024年03月31日 11:56/ 0 赞/ 106 阅读

相关快应用商城类列表组件

<template> <div class="shopList-wrap { {(type==3 || type==4 || type == 5) && '

绝地灬酷狼/ 2023年07月16日 03:36/ 0 赞/ 11 阅读

相关 ⑮HTML5 音视频标签的简单使用，状态标签，列表标签

Html5 音频 & 视频 H5中对音视频的设计初次使用音视频兼容性写法音视频js相关属性音视频

ゞ浴缸里的玫瑰/ 2023年02月15日 07:57/ 0 赞/ 269 阅读

相关 html简单组件（三）：简洁美观的搜索框

html简单组件（三）：简洁美观的搜索框搜索框效果图： ![在这里插入图片描述][20201230204142447.gif] HTML代码： <d

落日映苍穹つ/ 2023年01月01日 02:55/ 0 赞/ 121 阅读

相关 html简单组件（二）：简洁弹窗

html简单组件（二）：简洁弹窗代码实现效果图为： ![在这里插入图片描述][20201230192642578.gif] html代码 <div>

r囧r小猫/ 2023年01月01日 02:52/ 0 赞/ 213 阅读

相关 html简单组件（九）：简洁的商城订单列表显示（带状态）

html简单组件（九）：简洁的商城订单列表显示（带状态）效果图为： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk

快来打我*/ 2022年11月13日 09:30/ 0 赞/ 214 阅读

相关图书商城：订单模块

![这里写图片描述][20161118235338292] 1、创建相关类 domain： Order OrderItem dao：OrderD

绝地灬酷狼/ 2022年07月15日 07:13/ 0 赞/ 237 阅读

相关 html+css 实现简单的列表

实现效果 ![Image 1][] 结构 <div id="f_list" class="list"> <div class="list-item"> <d

水深无声/ 2022年06月04日 05:25/ 0 赞/ 255 阅读

相关 magento|后台订单列表增加显示数据

magento后台的订单列表显示数据过少，而对订单导出的时候，显示的数据和导出的一致。所以为了导出更多订单数据和显示更多数据，就有必要在订单列表调用更多数据。具体效果如下图：

爱被打了一巴掌/ 2022年05月20日 01:52/ 0 赞/ 233 阅读