上架

App.vue

@@ -37,7 +37,9 @@ button::after {
 @font-face {
 	font-family: 'iconfont';
 	src: url('https://at.alicdn.com/t/c/font_4191999_7iv6g88ty2h.ttf?t=1693811980958') format('truetype');
-	/* src: url('~@/static/font/iconfont.ttf') format('truetype'); */
+	 // src: url('~@/static/font/iconfont.woff2?t=1724655869789') format('woff2')
+	 //       url('~@/static/font/iconfont.woff?t=1724655869789') format('woff'),
+	 //       url('~@/static/font/iconfont.ttf?t=1724655869789') format('truetype');
 }
 .icon {
 	font-family: iconfont;

common/http.js

@@ -3,7 +3,7 @@
 //const ip = 'http://hs-server.aseanbusiness.cn'; //线上
 const ip = 'http://hs-server.tbgjhc.top:8018';
 const ngip = 'http://hs.tbgjhc.top:7010'
-//const ip = 'http:///127.0.0.1:8080'; //线下
+// const ip = 'http:///127.0.0.1:8080'; //线下
 
 /**
  * 封装的http请求

pages/index/index.vue

@@ -156,9 +156,10 @@
 				if (user.userType > 2) {
 					return;
 				}
+				console.log(user)
 				// 是否校验互助委托书【1校验  2不校验】
 				this.http.request({
-					url: '/sp-admin/SpCfg/getCfg',
+					url: '/sp-admin/SpCfg/cooper',
 					method: 'POST',
 					data: { cfgName: 'cooper_entrust_cfg' },
 					success: res => {

pages/market/one/leader/detail.vue

@@ -28,23 +28,16 @@
 					<text class="desc">{{ item.goodsNames }}</text>
 				</view>
 				<view class="item">
-					<text class="label">商品单位</text>
-					<text class="desc">{{ item.goodsUnit }}</text>
-				</view>
-				<view class="item">
 					<text class="label">商铺名称</text>
 					<text class="desc">{{ item.shopName }}</text>
 				</view>
+			
 				<view class="item">
-					<text class="label">申报金额</text>
-					<text class="desc">¥ {{ item.totalPrice }}</text>
-				</view>
-				<view class="item">
-					<text class="label">净重(kg)</text>
+					<text class="label">净重({{item.goodsUnit}})</text>
 					<text class="desc">{{ item.netWt }}</text>
 				</view>
 				<view class="item">
-					<text class="label">毛重(kg)</text>
+					<text class="label">毛重({{item.goodsUnit}})</text>
 					<text class="desc">{{ item.grossWt }}</text>
 				</view>
 				<view class="item">
@@ -55,13 +48,17 @@
 					<text class="label">交易地区名称</text>
 					<text class="desc">{{ item.tradeAreaName }}</text>
 				</view>
-				<!-- <view class="item">
-					<text class="label">进出口预申报单号</text>
-					<text class="desc">{{ item.preIeportNo }}</text>
-				</view> -->
 				<view class="item">
-					<text class="label">批次预录入号</text>
-					<text class="desc">{{ item.preNo }}</text>
+					<text class="label">申报金额(元)</text>
+					<text class="desc">¥ {{ item.totalPrice }}</text>
+				</view>
+				<view class="item" v-if="item.upPrice&&item.upStatus==2">
+					<text class="label">上架金额(元)</text>
+					<text class="desc">¥ {{ item.upPrice }}</text>
+				</view>
+				<view class="item" v-if="item.upPrice&&item.upStatus==2">
+					<text class="label">上架时间</text>
+					<text class="desc"> {{ item.upTime }}</text>
 				</view>
 			</view>
 		</view>

pages/market/one/leader/order.vue

@@ -5,20 +5,26 @@
 		</view>
 		<view class="goodsList">
 			<view class="item" v-for="(item, index) in list" :key="index" @click="detail(item)">
-				<view class="title">铺主：{{ item.enterpriseName }}
-					<view class="state" v-if="(item.peopleConfirmStatus == 0 || item.cooperEntrustStatus == 0 || item.applyConfirmStatus == 0) && item.finishStatus == 0">
+				<view class="title">{{ item.enterpriseName }}
+					<view class="state"
+						v-if="(item.peopleConfirmStatus == 0 || item.cooperEntrustStatus == 0 || item.applyConfirmStatus == 0) && item.finishStatus == 0">
 						<text class="icon">&#xe830;</text>
 						<text>未确认</text>
 					</view>
-					<view class="state" v-if="item.peopleConfirmStatus == 1 && item.cooperEntrustStatus == 1 && item.applyConfirmStatus == 1 &&item.finishStatus == 0">
+					<view class="state"
+						v-if="item.peopleConfirmStatus == 1 && item.cooperEntrustStatus == 1 && item.applyConfirmStatus == 1 &&item.finishStatus == 0">
 						<text class="icon">&#xe830;</text>
 						<text>未进口</text>
 					</view>
-					<view class="state" v-if="item.finishStatus == 1 && item.resaleStatus == 0">
+					<view class="state" v-if="item.finishStatus == 1 && item.upStatus == 1">
 						<text class="icon" style="color:#13ce66">&#xe830;</text>
-						<text>已进口</text>
+						<text>待上架</text>
 					</view>
-					<view class="state" v-if="item.resaleStatus == 1">
+					<view class="state" v-if="item.finishStatus == 1 && item.upStatus == 2&&item.resaleStatus == 0">
+						<text class="icon" style="color:#13ce66">&#xe830;</text>
+						<text>已上架</text>
+					</view>
+					<view class="state" v-if="item.resaleStatus == 1&& item.upStatus == 2">
 						<text class="icon" style="color: #13ce66">&#xe830;</text>
 						<text>已转售</text>
 					</view>
@@ -36,15 +42,22 @@
 				<view class="clear"></view>
 				<view class="op">
 					<view class="date">{{ item.createTime }}</view>
-					<template v-if="item.finishStatus == 1 && item.resaleStatus == 0">
-						<view class="an" style="color: blue;"  @click.stop="resale(item)">订单转售</view>
+					<template v-if="item.finishStatus == 1 && (item.upStatus == 1||item.upStatus == 3)">
+						<view v-if="user.bindShop==2" class="an" style="color: blue;" @click.stop="resale(item)">上架
+						</view>
+						<view v-else class="an">请联系互助社绑定商铺
+						</view>
 					</template>
-					<template v-if="item.peopleConfirmStatus == 1 && item.Sxb010Status == 1 && item.finishStatus == 0 && item.refundStatus == 0">
-						<view class="an" style="color: #f44336"  @click.stop="orderRefund(item.id)">退款</view>
+					<template
+						v-if="item.peopleConfirmStatus == 1 && item.Sxb010Status == 1 && item.finishStatus == 0 && item.refundStatus == 0">
+						<view class="an" style="color: #f44336" @click.stop="orderRefund(item.id)">退款</view>
 					</template>
-					<!-- <template v-if="item.resaleStatus == 1 && item.beingOrder == 0">
+					<!-- 	<template v-if="item.resaleStatus == 1 && item.beingOrder == 0">
 						<view class="an" style="color: #f44336"  @click.stop="updateResalePrice(item.id)">修改转售价格</view>
 					</template> -->
+					<template v-if="item.resaleStatus == 0 && item.beingOrder == 0&& item.upStatus == 2">
+						<view class="an" style="color: #f44336" @click.stop="downOrder(item)">下架</view>
+					</template>
 				</view>
 			</view>
 			<view class="loading" v-if="loadMore"><u-loadmore :status="loadMore ? 'loading' : 'nomore'" /></view>
@@ -54,149 +67,201 @@
 </template>
 
 <script>
-export default {
-	data() {
-		return {
-			tab: [
-				{
-					name: '全部',
-					peopleConfirmStatus: '',	//边民确认状态
-					cooperEntrustStatus: '',	//互助委托申报确认状态
-					applyConfirmStatus: '',		//进口申报确认状态
-					finishStatus: '',			//订单完成状态
-					resaleStatus: ''			//订单转售状态
-				},
-				{
-					name: '未进口',
-					peopleConfirmStatus: 1,
-					cooperEntrustStatus: 1,
-					applyConfirmStatus: 1,
-					finishStatus: 0,
-					resaleStatus: 0
-				},
-				{
-					name: '已进口',
-					peopleConfirmStatus: 1,
-					finishStatus: 1,
-					resaleStatus: 0
+	export default {
+		data() {
+			return {
+				user: {},
+				tab: [{
+						name: '全部',
+						peopleConfirmStatus: '', //边民确认状态
+						cooperEntrustStatus: '', //互助委托申报确认状态
+						applyConfirmStatus: '', //进口申报确认状态
+						finishStatus: '', //订单完成状态
+						resaleStatus: '' //订单转售状态
+					},
+					{
+						name: '未进口',
+						peopleConfirmStatus: 1,
+						cooperEntrustStatus: 1,
+						applyConfirmStatus: 1,
+						finishStatus: 0,
+						resaleStatus: 0,
+						upStatus: 1
+					},
+					{
+						name: '待上架',
+						finishStatus: 1,
+						resaleStatus: 0,
+						upStatus: 1
+					},
+					{
+						name: '已上架',
+						finishStatus: 1,
+						resaleStatus: 0,
+						upStatus: 2
+					},
+					{
+						name: '已转售',
+						finishStatus: 1,
+						resaleStatus: 1,
+						upStatus: 2
+					}
+				],
+				param: {
+					pageNo: 1,
+					pageSize: 10
 				},
-				{
-					name: '已转售',
-					peopleConfirmStatus: 1,
-					finishStatus: 1,
-					resaleStatus: 1
+				list: [],
+				loadMore: true,
+				id: '',
+				flag: '',
+			};
+		},
+		onLoad() {
+			this.user = this.getUser()
+			uni.$on('face', res => {
+				if (this.flag == 1) {
+					this.http.request({
+						url: '/level-one-server/app/TbOrder/confirmOrder',
+						data: {
+							orderId: this.id
+						},
+						success: resp => {
+							uni.showToast({
+								title: '订单确认成功'
+							});
+							this.refresh();
+						}
+					});
+				} else if (this.flag == 2) {
+					this.http.request({
+						url: '/level-one-server/app/TbOrder/applyOrder',
+						data: {
+							orderId: this.id
+						},
+						success: resp => {
+							uni.showToast({
+								title: '进口申报确认成功'
+							});
+							this.refresh();
+						}
+					});
 				}
-			],
-			param: {
-				pageNo: 1,
-				pageSize: 10
+			})
+		},
+		onShow() {
+			this.getData();
+		},
+		methods: {
+			downOrder(item) {
+				uni.showModal({
+					title: '提示',
+					content: '确定下架？',
+					success: res => {
+						if (res.confirm) {
+							this.http.request({
+								url: '/level-one-server/app/TbOrder/down',
+								data: {
+									id: item.id
+								},
+								success: res => {
+									uni.showToast({
+										title: '提交成功'
+									});
+									item.upStatus = 1;
+								}
+							});
+						}
+					}
+				});
 			},
-			list: [],
-			loadMore: true,
-			id: '',
-			flag: '',
-		};
-	},
-	onLoad() {
-		this.getData();
-		uni.$on('face', res => {
-			if(this.flag == 1) {
+			getData() {
 				this.http.request({
-					url: '/level-one-server/app/TbOrder/confirmOrder',
-					data: { orderId: this.id },
-					success: resp => {
-						uni.showToast({ title: '订单确认成功' });
-						this.refresh();
+					url: '/level-one-server/app/TbOrder/getList',
+					loading: 'false',
+					data: this.param,
+					success: res => {
+						this.loadMore = parseInt(res.data.pageCount) > this.param.pageNo;
+						if (res.data.data) {
+							this.list=res.data.data;
+							console.log("---1---=" + this.list[0].finishStatus)
+							console.log("---2---=" + this.list[0].resaleStatus)
+						}
 					}
 				});
-			} else if(this.flag == 2) {
+			},
+			// 点击tab切换
+			click(e) {
+				console.log(e);
+				this.param.peopleConfirmStatus = e.peopleConfirmStatus;
+				this.param.cooperEntrustStatus = e.cooperEntrustStatus;
+				this.param.applyConfirmStatus = e.applyConfirmStatus;
+				this.param.finishStatus = e.finishStatus;
+				this.param.resaleStatus = e.resaleStatus;
+				this.param.upStatus = e.upStatus;
+				this.refresh();
+			},
+			detail(item) {
+				uni.navigateTo({
+					url: '/pages/market/one/leader/detail?id=' + item.id
+				});
+			},
+			resale(item) {
+				uni.navigateTo({
+					url: '/pages/market/two/leader/resale?item=' + JSON.stringify(item)
+				});
+			},
+			orderRefund(id) {
 				this.http.request({
-					url: '/level-one-server/app/TbOrder/applyOrder',
-					data: { orderId: this.id },
+					url: '/level-one-server/app/TbOrder/orderRefund',
+					data: {
+						id: id
+					},
+					method: 'POST',
 					success: resp => {
-						uni.showToast({ title: '进口申报确认成功' });
+						uni.showToast({
+							title: '操作成功'
+						});
 						this.refresh();
 					}
 				});
+			},
+			updateResalePrice(id) {
+				uni.navigateTo({
+					url: '/pages/market/two/leader/updatePrice?id=' + id
+				});
+			},
+			// 刷新数据
+			refresh() {
+				this.loadMore = true;
+				this.param.pageNo = 1;
+				this.list = [];
+				this.getData();
 			}
-		})
-	},
-	methods: {
-		getData() {
-			this.http.request({
-				url: '/level-one-server/app/TbOrder/getList',
-				loading: 'false',
-				data: this.param,
-				success: res => {
-					this.loadMore = parseInt(res.data.pageCount) > this.param.pageNo;
-					if (res.data.data) {
-						this.list.push(...res.data.data);
-						console.log("---1---="+this.list[0].finishStatus)
-						console.log("---2---="+this.list[0].resaleStatus)
-					}
-				}
-			});
-		},
-		// 点击tab切换
-		click(e) {
-			console.log(e);
-			this.param.peopleConfirmStatus = e.peopleConfirmStatus;
-			this.param.cooperEntrustStatus = e.cooperEntrustStatus;
-			this.param.applyConfirmStatus = e.applyConfirmStatus;
-			this.param.finishStatus = e.finishStatus;
-			this.param.resaleStatus = e.resaleStatus;
-			this.refresh();
-		},
-		detail(item) {
-			uni.navigateTo({url: '/pages/market/one/leader/detail?id=' + item.id});
 		},
-		resale(item) {
-			uni.navigateTo({url: '/pages/market/two/leader/resale?item=' + JSON.stringify(item)});
-		},
-		orderRefund(id) {
-			this.http.request({
-				url: '/level-one-server/app/TbOrder/orderRefund',
-				data: { id: id },
-				method: 'POST',
-				success: resp => {
-					uni.showToast({ title: '操作成功' });
-					this.refresh();
-				}
-			});
+		//下拉刷新
+		onPullDownRefresh() {
+			setTimeout(() => {
+				this.refresh();
+				uni.stopPullDownRefresh();
+			}, 1000);
 		},
-		updateResalePrice(id) {
-			uni.navigateTo({url: '/pages/market/two/leader/updatePrice?id=' + id});
-		},
-		// 刷新数据
-		refresh() {
-			this.loadMore = true;
-			this.param.pageNo = 1;
-			this.list = [];
-			this.getData();
-		}
-	},
-	//下拉刷新
-	onPullDownRefresh() {
-		setTimeout(() => {
-			this.refresh();
-			uni.stopPullDownRefresh();
-		}, 1000);
-	},
-	//上拉加载
-	onReachBottom() {
-		if (this.loadMore) {
-			this.param.pageNo++;
-			this.getData();
+		//上拉加载
+		onReachBottom() {
+			if (this.loadMore) {
+				this.param.pageNo++;
+				this.getData();
+			}
 		}
-	}
-};
+	};
 </script>
 
 <style lang="scss">
-page {
-	background-color: $pg;
-}
-.state{
-	margin-right: -70px;
-}
-</style>
+	page {
+		background-color: $pg;
+	}
+
+	.state {
+		margin-right: -70px;
+	}
+</style>

pages/market/two/leader/resale.vue

@@ -15,6 +15,14 @@
 					<text class="desc">{{ item.totalWeight }}</text>
 				</view>
 				<view class="item">
+					<text class="label">净重</text>
+					<text class="desc">{{ item.netWt }}</text>
+				</view>	
+				<view class="item">
+					<text class="label">毛重</text>
+					<text class="desc">{{ item.grossWt }}</text>
+				</view>
+				<view class="item">
 					<text class="label">商品单位</text>
 					<text class="desc">{{ item.goodsUnit }}</text>
 				</view>
@@ -22,47 +30,45 @@
 					<text class="label">订单金额</text>
 					<text class="desc">¥ {{ item.totalPrice }}</text>
 				</view>
-				<!-- <view class="item">
-					<text class="label">转售金额</text>
+				<view class="item">
+					<text class="label">上架金额(元)</text>
 					<text class="desc">
-						<input type="number" v-model="resalePrice" placeholder="请输入(元)" />
+						<input type="number" v-model="resalePrice" placeholder="请输入" />
 					</text>
-				</view> -->
-				<view class="item">
+				</view>
+				<!-- <view class="item">
 					<text class="label">利润</text>
 					<text class="desc">50元</text>
-				</view>
-				<view class="item">
+				</view> -->
+				<!-- <view class="item">
 					<text class="label">计算总金额</text>
 					<text class="desc">
 						<input type="number" v-model="resalePrice"  :disabled="true"/>
 					</text>
-				</view>
+				</view> -->
 			</view>
 			<u-divider text="费项明细"></u-divider>
+			<view>总费用：{{fee.totalFee}}<span style="color: coral;margin-left: 5px;font-size: 16px;">元</span></view>
 			<view class="box">
-				<u-collapse v-for="(item,index) in newRuleList" :key="index">
+				<u-collapse v-for="(item,index) in fee.feeList" :key="index">
 					<u-collapse-item :title="item.name" class="cell_title" >
-						<view class="itm">1、收费企业：{{ item.companyName }}</view>
+						<view class="itm">1、名称：{{ item.name }}</view>
 						<view class="itm" v-if="item.feeType ==1">2、收费类型：按交易额收取</view>
 						<view class="itm" v-if="item.feeType ==2">2、收费类型：按次收取</view>
 						<view class="itm" v-if="item.feeType ==3">2、收费类型：按吨收取</view>
 						<view class="itm" v-if="item.feeType ==1">3、收费%(按交易额收)：<span style="color: coral;">{{ item.percent }} %</span></view>
-						<view class="itm" v-if="item.feeType ==1">4、当前订单收取金额：<span style="color: coral;">{{ item.percent*price/100 }} 元</span></view>
 						<view class="itm" v-if="item.feeType ==2">3、收费金额(按次收)：<span style="color: coral;">{{ item.feeMoney }} 元</span></view>
-						<view class="itm" v-if="item.feeType ==2">4、当前订单收取金额：<span style="color: coral;">{{ item.feeMoney }} 元</span></view>
 						<view class="itm" v-if="item.feeType ==3">3、收费%(按吨收)：<span style="color: coral;">{{ item.percent }} %</span></view>
-						<view class="itm" v-if="item.feeType ==3">4、当前订单收取金额：<span style="color: coral;">{{ item.percent*weight/100 }} 元</span></view>
-						</br>
-						<view class="itm">当前费项收取金额以最后结算时为准</view>
+						<view class="itm">4、当前订单收取金额：<span style="color: coral;">{{ item.feeMoney }} 元</span></view>
+				
 					</u-collapse-item>
 				</u-collapse>
 			</view>
 		</view>
-		<view class="mfooter" v-if="item.resaleStatus != 1">
+		<view class="mfooter" v-if="item.upStatus != 2">
 			<view class="flex">
 				<view class="f">
-					<button class="btn" @click="ok()">确定</button>
+					<button class="btn" @click="ok()">上架</button>
 				</view>
 			</view>
 		</view>
@@ -77,7 +83,11 @@ export default {
 			resalePrice: '',
 			weight: '',
 			price: '',
-			newRuleList: []
+			newRuleList: [],
+			fee:{
+				totalFee:0,
+				feeList:[]
+			}
 		};
 	},
 	onLoad(e) {
@@ -89,30 +99,49 @@ export default {
 		}
 	},
 	methods: {
+		fetchItemList(){
+			this.http.request({
+				url: '/level-two-server/app/TbOrders/fetchItemList',
+				data: {id: this.item.id},
+				success: res => {
+					this.resalePrice = (res.data.data.sumPrice + 50).toFixed(2)
+					this.newRuleList = res.data.data.newRuleList
+				}
+			});
+		},
 		//费项合计
 		countPrice(){
 			this.http.request({
 				url: '/level-two-server/app/TbOrders/countPrice',
 				data: {id: this.item.id},
 				success: res => {
-					this.resalePrice = (res.data.data.sumPrice + 50).toFixed(2)
-					this.newRuleList = res.data.data.newRuleList
+					// this.resalePrice = (res.data.data.sumPrice + 50).toFixed(2)
+					// this.newRuleList = res.data.data.newRuleList
+					this.fee=res.data.data;
 				}
 			});
 		},
 		ok() {
-			console.log("----this.resalePrice-----=",this.resalePrice)
+			let resalePrice=this.resalePrice;
+			if(!resalePrice){
+					uni.showToast({title: '请填写上架金额',icon:'error'});
+				return;
+			}
+			if(resalePrice<this.item.totalPrice){
+				uni.showToast({title: '上架金额不能小于订单金额',icon:'error'});
+				return;
+			}
 			uni.showModal({
 				title: '提示',
-				content: '我已核对转售信息',
+				content: '确定上架？',
 				success: res => {
 					if (res.confirm) {
 						this.http.request({
-							url: '/level-two-server/app/TbOrders/addOrderByResale',
-							data: {id: this.item.id, resalePrice: this.resalePrice},
+							url: '/level-one-server/app/TbOrder/up',
+							data: {id: this.item.id, upPrice: this.resalePrice},
 							success: res => {
 								uni.showToast({title: '提交成功'});
-								this.item.resaleStatus = 1;
+								uni.navigateBack();
 							}
 						});
 					}

pages/personal/personal.vue

@@ -21,6 +21,7 @@
 				<text class="icon">&#xe78d;</text>
 				<text>你还未人脸认证，请先人脸认证</text>
 				<text class="icon" style="float: right">&#xe8f2;</text>
+				
 			</view>
 			<!--用户信息-->
 			<view class="user">

static/font/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

static/font/demo_index.html

@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4624459" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe88a;</span>
+                <div class="name">07配载、装车-线性</div>
+                <div class="code-name">&amp;#xe88a;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1724655869789') format('woff2'),
+       url('iconfont.woff?t=1724655869789') format('woff'),
+       url('iconfont.ttf?t=1724655869789') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-peizaizhuangche-xianxing"></span>
+            <div class="name">
+              07配载、装车-线性
+            </div>
+            <div class="code-name">.icon-peizaizhuangche-xianxing
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-peizaizhuangche-xianxing"></use>
+                </svg>
+                <div class="name">07配载、装车-线性</div>
+                <div class="code-name">#icon-peizaizhuangche-xianxing</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

static/font/iconfont.css

@@ -0,0 +1,19 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4624459 */
+  src: url('iconfont.woff2?t=1724655869789') format('woff2'),
+       url('iconfont.woff?t=1724655869789') format('woff'),
+       url('iconfont.ttf?t=1724655869789') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-peizaizhuangche-xianxing:before {
+  content: "\e88a";
+}
+

static/font/iconfont.json

@@ -0,0 +1,16 @@
+{
+  "id": "4624459",
+  "name": "云南互市",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "1727274",
+      "name": "07配载、装车-线性",
+      "font_class": "peizaizhuangche-xianxing",
+      "unicode": "e88a",
+      "unicode_decimal": 59530
+    }
+  ]
+}