update resource page

docs/resource/download.md

@@ -21,7 +21,7 @@
     <span class="resource-card-description">网络字体图标的本地文件包</span>
   </span>
 </a>
-<a target="_blank" class="resource-card disabled">
+<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/0.11.2/AntD_Box_v1.2.rp" class="resource-card">
   <img src="https://os.alipayobjects.com/rmsportal/QCKTwaWQLEOXtgL.png">
   <span class="resource-card-content">
     <span class="resource-card-title">Axure Box</span>
@@ -45,8 +45,17 @@
   font-size: 12px;
   color: #777;
   display: inline-block;
-  margin: 20px 40px 20px 0;
+  margin: 20px 40px 10px 0;
   vertical-align: middle;
+  transition: all 0.3s ease;
+}
+
+.resource-card:hover {
+  box-shadow: 0 1px 4px rgba(64,64,64,.2);
+}
+
+.resource-card:hover .resource-card-title {
+  color: #2db7f5;
 }
 
 .resource-card.disabled {

docs/resource/reference.md

@@ -2,8 +2,117 @@
 
 - order: 1
 - category: 1
-- disabled: true
 
 ---
 
-待补充。
+在进行模式、组件和语言的整理中，《交互设计精髓》、《Web 界面设计》、《界面设计模式》、《写给大家看的设计书》、《设计心理学》、《Web表单设计：点石成金的艺术》等书籍给了我们很多的启示，帮助我们节约了大量时间，并成功克服了很多困难。如果想了解更多设计相关的内容，建议你去阅读这些非常棒的书籍。
+
+<a target="_blank" href="http://book.douban.com/subject/26642302/" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/PeeRQQIGQJCswxe.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">About Face 4</span>
+    <span class="resource-card-description">作者: Alan.cooper</span>
+    <span class="resource-card-description">出版社: 电子工业出版社</span>
+  </span>
+</a>
+<a target="_blank" href="http://book.douban.com/subject/3821157/" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/CoojVXLtoWrUSmI.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">Web界面设计</span>
+    <span class="resource-card-description">作者: Bill Scott / Theresa Neil</span>
+    <span class="resource-card-description">出版社: 电子工业出版社</span>
+  </span>
+</a>
+<a target="_blank" href="http://book.douban.com/subject/25716088/" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/oRxdwgZMwfEFeJa.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">界面设计模式</span>
+    <span class="resource-card-description">作者: Tidwell,J.</span>
+    <span class="resource-card-description">出版社: 电子工业出版社</span>
+  </span>
+</a>
+<a target="_blank" href="http://book.douban.com/subject/3323633/" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/SNdJVyZaZwdwJmr.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">写给大家看的设计书</span>
+    <span class="resource-card-description">作者: Robin Williams</span>
+    <span class="resource-card-description">出版社: 人民邮电出版社</span>
+  </span>
+</a>
+<a target="_blank" href="http://book.douban.com/subject/26102860/" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/txGrSvGFMTTrwjY.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">设计心理学 1</span>
+    <span class="resource-card-description">作者: 唐纳德•A•诺曼</span>
+    <span class="resource-card-description">出版社: 中信出版社</span>
+  </span>
+</a>
+<a target="_blank" href="http://book.douban.com/subject/26424688/" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/cZQyAARFxzaKEOG.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">设计心理学 3</span>
+    <span class="resource-card-description">作者: 唐纳德•A•诺曼</span>
+    <span class="resource-card-description">出版社: 中信出版社</span>
+  </span>
+</a>
+<a target="_blank" href="http://book.douban.com/subject/4886100/" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/moeFnnuXrputdag.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">Web表单设计：点石成金的艺术</span>
+    <span class="resource-card-description">作者: Luke Wroblewski</span>
+    <span class="resource-card-description">出版社: 清华大学出版社</span>
+  </span>
+</a>
+
+<style>
+.resource-card {
+  width: 350px;
+  height: 130px;
+  border: 1px solid #e9e9e9;
+  border-radius: 12px;
+  font-size: 12px;
+  color: #777;
+  display: inline-block;
+  margin: 20px 40px 10px 0;
+  vertical-align: middle;
+  transition: all 0.3s ease;
+}
+
+.resource-card:hover {
+  box-shadow: 0 1px 4px rgba(64,64,64,.2);
+}
+
+.resource-card:hover .resource-card-title {
+  color: #2db7f5;
+}
+
+.resource-card.disabled {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.resource-card img {
+  display: inline-block;
+  vertical-align: middle;
+  width: 64px;
+  margin: 0 20px;
+}
+
+.resource-card-content {
+  display: inline-block;
+  vertical-align: middle;
+  height: 130px;
+  padding-top: 24px;
+}
+
+.resource-card-title {
+  display: block;
+  font-size: 16px;
+  color: #666;
+}
+
+.resource-card-description {
+  display: block;
+  color: #999;
+}
+</style>