8-6 商品類別的圖標顯示（顏色及樓層）

一、GoodsForm.java中定義變量

private String count;  ----樓層圖標
	private String color;  ----圖標顏色

二、GuestController .java中設置循環

 //在頁面初始化以前用size()方法對商品類型commodityType計數，計算出有多少類型
	int sum = commodityType.size();
 //使用循環設置Count的值爲i+F  ************  即在前臺能夠顯示文本1F
        for (int i = 1; i < sum; i++) {
	    commodityType.get(i - 1).setCount(i + "F");
	}
 // 使用循環設置Color的值爲"columnT-"+(j%6+1) ****即在前臺能夠顯示文本相似columnT columnT-1
 // 是css中定義的樣式
 // j%6+1爲控制j爲1到6的循環輸出
	for (int j = 0; j < sum; j++) {
		commodityType.get(j).setColor("columnT" + " " + "columnT-" + (j % 6 + 1));
	}

三、style.css中顯示空圈圖標

/*goodsList*/
.main{ background: #fff; padding-top: 15px; padding-bottom: 15px;}
.columnT{ border-bottom:solid 1px;}
.columnT i{ width: 44px; height: 60px; vertical-align: middle; margin-right: 15px; font-size: 18px; text-align: center; line-height: 44px}
.columnT a{ float: right; margin-top: 20px; font-size: 14px;}
.columnT-1{ border-color: #fac132;}
.columnT-1 i{ background-position: 0 -40px; color: #fac132}
.columnT-2{ border-color: #94562c;}
.columnT-2 i{ background-position: -50px -40px; color: #94562c}
.columnT-3{ border-color: #ef3799;}
.columnT-3 i{ background-position: -100px -40px; color: #ef3799}
.columnT-4{ border-color: #1acbe5;}
.columnT-4 i{ background-position: -150px -40px; color: #1acbe5}
.columnT-5{ border-color: #ce2404;}
.columnT-5 i{ background-position: -200px -40px; color: #ce2404}
.columnT-6{ border-color: #13713f;}
.columnT-6 i{ background-position: -250px -40px; color: #13713f}

四、index.html中添加顯示代碼

<!--th:class 等同於class，只是class後要存放一個存放接收後臺傳來的一個變量時要用th:class  -->
<!--${typeInfo.color}就是接收後臺設置的color變量      例： columnT columnT-1   -->
	<div th:class="${typeInfo.color}">	
<!--${typeInfo.count}就是接收後臺設置的count變量      用於前臺顯示   -->
	<i class="yh"><span th:text="${typeInfo.count}"></span></i>