fe / yohobuy-mobile · Commits

Go to a project

Authored by unknown
Commit 44a1969c7c974af62eb7e11cd1d2ac9e50d47c4d 1 parent 8b1476f9

侧栏导航新需求html css img

Inline Side-by-side
Showing 20 changed files with 197 additions and 73 deletions
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3 <svg xmlns="http://www.w3.org/2000/svg"> 3 <svg xmlns="http://www.w3.org/2000/svg">
4 <metadata> 4 <metadata>
5 -Created by FontForge 20120731 at Tue Jul 14 10:41:37 2015 5 +Created by FontForge 20120731 at Sun Sep 6 17:15:18 2015
6 By Ads 6 By Ads
7 </metadata> 7 </metadata>
8 <defs> 8 <defs>
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Tue Jul 14 10:41:37 2015 @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Tue Jul 14 10:41:37 2015
19 bbox="0 -224 5637 812" 19 bbox="0 -224 5637 812"
20 underline-thickness="50" 20 underline-thickness="50"
21 underline-position="-100" 21 underline-position="-100"
22 - unicode-range="U+0078-E610" 22 + unicode-range="U+0078-E614"
23 /> 23 />
24 <missing-glyph horiz-adv-x="374" 24 <missing-glyph horiz-adv-x="374"
25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" /> 25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -92,5 +92,15 @@ d="M682 74q-108 -89 -249 -89q-53 0 -104.5 14.5t-94.5 39.5t-79.5 61.5t-61.5 79.5t @@ -92,5 +92,15 @@ d="M682 74q-108 -89 -249 -89q-53 0 -104.5 14.5t-94.5 39.5t-79.5 61.5t-61.5 79.5t
92 t-223 -93q-91 -93 -92 -222q0 -86 42 -158.5t115 -114.5t158 -42z" /> 92 t-223 -93q-91 -93 -92 -222q0 -86 42 -158.5t115 -114.5t158 -42z" />
93 <glyph glyph-name="uniE610" unicode="&#xe610;" 93 <glyph glyph-name="uniE610" unicode="&#xe610;"
94 d="M245 300l-9 9l472 472l80 -80l-400 -401l400 -401l-80 -80l-472 472z" /> 94 d="M245 300l-9 9l472 472l80 -80l-400 -401l400 -401l-80 -80l-472 472z" />
  95 + <glyph glyph-name="uniE611" unicode="&#xe611;"
  96 +d="M509 780q-4 -2 -245 -245q-221 -224 -235 -245q-6 -9 -6 -15q0 -35 42 -33q7 0 233 227l225 228l226 -228q105 -106 167 -166.5t65 -60.5q21 -1 31.5 7.5t10.5 25.5q0 12 -32 46q-33 36 -206 212q-241 243 -246 246q-15 8 -30 1zM171 245q-12 -8 -14 -38.5t-2 -188
  97 +t2 -188t14 -38.5q7 -6 352.5 -6t352.5 6q11 8 13 36q2 30 2 190q0 158 -2 188.5t-13 38.5q-8 7 -21.5 5.5t-21.5 -10.5l-10 -9v-381h-600v381l-10 9q-15 16 -36 9q-4 -2 -6 -4zM398 202l-11 -12v-215l11 -12q6 -8 11 -10.5t14 -2.5q16 0 26 13l10 12v175h128v-175l11 -12
  98 +q7 -9 16 -12t18.5 0t16.5 12l10 12v215l-20 24h-231z" />
  99 + <glyph glyph-name="uniE612" unicode="&#xe612;"
  100 +d="M951 -7h-878l439 614z" />
  101 + <glyph glyph-name="uniE613" unicode="&#xe613;"
  102 +d="M512 -7l-439 614h878z" />
  103 + <glyph glyph-name="uniE614" unicode="&#xe614;"
  104 +d="M313 -49l349 349l-349 349q-7 7 -7 16.5t6.5 16t16 6.5t16.5 -6l345 -345q16 -15 21 -20q7 -7 7 -17t-7 -17q-4 -4 -25.5 -25t-22.5 -22l-318 -318q-7 -6 -16.5 -6t-16 6.5t-6.5 16t7 16.5z" />
95 </font> 105 </font>
96 </defs></svg> 106 </defs></svg>
No preview for this file type
@@ -13,6 +13,20 @@ @@ -13,6 +13,20 @@
13 <ul class="icon_lists clear"> 13 <ul class="icon_lists clear">
14 14
15 <li> 15 <li>
  16 + <i class="icon iconfont">&#xe612;</i>
  17 + <div class="name">三角2</div>
  18 + <div class="code">&amp;#xe612;</div>
  19 + <div class="fontclass">.sanjiao2</div>
  20 + </li>
  21 +
  22 + <li>
  23 + <i class="icon iconfont">&#xe613;</i>
  24 + <div class="name">三角1</div>
  25 + <div class="code">&amp;#xe613;</div>
  26 + <div class="fontclass">.sanjiao1</div>
  27 + </li>
  28 +
  29 + <li>
16 <i class="icon iconfont">&#xe600;</i> 30 <i class="icon iconfont">&#xe600;</i>
17 <div class="name">share</div> 31 <div class="name">share</div>
18 <div class="code">&amp;#xe600;</div> 32 <div class="code">&amp;#xe600;</div>
@@ -90,6 +104,13 @@ @@ -90,6 +104,13 @@
90 </li> 104 </li>
91 105
92 <li> 106 <li>
  107 + <i class="icon iconfont">&#xe614;</i>
  108 + <div class="name">前进</div>
  109 + <div class="code">&amp;#xe614;</div>
  110 + <div class="fontclass">.qianjin</div>
  111 + </li>
  112 +
  113 + <li>
93 <i class="icon iconfont">&#xe610;</i> 114 <i class="icon iconfont">&#xe610;</i>
94 <div class="name">back</div> 115 <div class="name">back</div>
95 <div class="code">&amp;#xe610;</div> 116 <div class="code">&amp;#xe610;</div>
@@ -104,6 +125,13 @@ @@ -104,6 +125,13 @@
104 </li> 125 </li>
105 126
106 <li> 127 <li>
  128 + <i class="icon iconfont">&#xe611;</i>
  129 + <div class="name">home</div>
  130 + <div class="code">&amp;#xe611;</div>
  131 + <div class="fontclass">.home</div>
  132 + </li>
  133 +
  134 + <li>
107 <i class="icon iconfont">&#xe60b;</i> 135 <i class="icon iconfont">&#xe60b;</i>
108 <div class="name">menu-btn</div> 136 <div class="name">menu-btn</div>
109 <div class="code">&amp;#xe60b;</div> 137 <div class="code">&amp;#xe60b;</div>
@@ -15,6 +15,8 @@ @@ -15,6 +15,8 @@
15 -webkit-text-stroke-width: 0.2px; 15 -webkit-text-stroke-width: 0.2px;
16 -moz-osx-font-smoothing: grayscale; 16 -moz-osx-font-smoothing: grayscale;
17 } 17 }
  18 +.icon-sanjiao2:before { content: "\e612"; }
  19 +.icon-sanjiao1:before { content: "\e613"; }
18 .icon-yoho-share:before { content: "\e600"; } 20 .icon-yoho-share:before { content: "\e600"; }
19 .icon-yoho-good:before { content: "\e601"; } 21 .icon-yoho-good:before { content: "\e601"; }
20 .icon-yoho-view:before { content: "\e602"; } 22 .icon-yoho-view:before { content: "\e602"; }
@@ -26,8 +28,10 @@ @@ -26,8 +28,10 @@
26 .icon-up:before { content: "\e608"; } 28 .icon-up:before { content: "\e608"; }
27 .icon-downn:before { content: "\e609"; } 29 .icon-downn:before { content: "\e609"; }
28 .icon-gou:before { content: "\e60a"; } 30 .icon-gou:before { content: "\e60a"; }
  31 +.icon-qianjin:before { content: "\e614"; }
29 .icon-back:before { content: "\e610"; } 32 .icon-back:before { content: "\e610"; }
30 .icon-search:before { content: "\e60f"; } 33 .icon-search:before { content: "\e60f"; }
  34 +.icon-home:before { content: "\e611"; }
31 .icon-icon1:before { content: "\e60b"; } 35 .icon-icon1:before { content: "\e60b"; }
32 .icon-point1:before { content: "\e60c"; } 36 .icon-point1:before { content: "\e60c"; }
33 .icon-logo2:before { content: "\e60d"; } 37 .icon-logo2:before { content: "\e60d"; }
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3 <svg xmlns="http://www.w3.org/2000/svg"> 3 <svg xmlns="http://www.w3.org/2000/svg">
4 <metadata> 4 <metadata>
5 -Created by FontForge 20120731 at Tue Jul 14 10:41:37 2015 5 +Created by FontForge 20120731 at Sun Sep 6 17:15:18 2015
6 By Ads 6 By Ads
7 </metadata> 7 </metadata>
8 <defs> 8 <defs>
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Tue Jul 14 10:41:37 2015 @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Tue Jul 14 10:41:37 2015
19 bbox="0 -224 5637 812" 19 bbox="0 -224 5637 812"
20 underline-thickness="50" 20 underline-thickness="50"
21 underline-position="-100" 21 underline-position="-100"
22 - unicode-range="U+0078-E610" 22 + unicode-range="U+0078-E614"
23 /> 23 />
24 <missing-glyph horiz-adv-x="374" 24 <missing-glyph horiz-adv-x="374"
25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" /> 25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -92,5 +92,15 @@ d="M682 74q-108 -89 -249 -89q-53 0 -104.5 14.5t-94.5 39.5t-79.5 61.5t-61.5 79.5t @@ -92,5 +92,15 @@ d="M682 74q-108 -89 -249 -89q-53 0 -104.5 14.5t-94.5 39.5t-79.5 61.5t-61.5 79.5t
92 t-223 -93q-91 -93 -92 -222q0 -86 42 -158.5t115 -114.5t158 -42z" /> 92 t-223 -93q-91 -93 -92 -222q0 -86 42 -158.5t115 -114.5t158 -42z" />
93 <glyph glyph-name="uniE610" unicode="&#xe610;" 93 <glyph glyph-name="uniE610" unicode="&#xe610;"
94 d="M245 300l-9 9l472 472l80 -80l-400 -401l400 -401l-80 -80l-472 472z" /> 94 d="M245 300l-9 9l472 472l80 -80l-400 -401l400 -401l-80 -80l-472 472z" />
  95 + <glyph glyph-name="uniE611" unicode="&#xe611;"
  96 +d="M509 780q-4 -2 -245 -245q-221 -224 -235 -245q-6 -9 -6 -15q0 -35 42 -33q7 0 233 227l225 228l226 -228q105 -106 167 -166.5t65 -60.5q21 -1 31.5 7.5t10.5 25.5q0 12 -32 46q-33 36 -206 212q-241 243 -246 246q-15 8 -30 1zM171 245q-12 -8 -14 -38.5t-2 -188
  97 +t2 -188t14 -38.5q7 -6 352.5 -6t352.5 6q11 8 13 36q2 30 2 190q0 158 -2 188.5t-13 38.5q-8 7 -21.5 5.5t-21.5 -10.5l-10 -9v-381h-600v381l-10 9q-15 16 -36 9q-4 -2 -6 -4zM398 202l-11 -12v-215l11 -12q6 -8 11 -10.5t14 -2.5q16 0 26 13l10 12v175h128v-175l11 -12
  98 +q7 -9 16 -12t18.5 0t16.5 12l10 12v215l-20 24h-231z" />
  99 + <glyph glyph-name="uniE612" unicode="&#xe612;"
  100 +d="M951 -7h-878l439 614z" />
  101 + <glyph glyph-name="uniE613" unicode="&#xe613;"
  102 +d="M512 -7l-439 614h878z" />
  103 + <glyph glyph-name="uniE614" unicode="&#xe614;"
  104 +d="M313 -49l349 349l-349 349q-7 7 -7 16.5t6.5 16t16 6.5t16.5 -6l345 -345q16 -15 21 -20q7 -7 7 -17t-7 -17q-4 -4 -25.5 -25t-22.5 -22l-318 -318q-7 -6 -16.5 -6t-16 6.5t-6.5 16t7 16.5z" />
95 </font> 105 </font>
96 </defs></svg> 106 </defs></svg>
@@ -12,51 +12,51 @@ module.exports = { @@ -12,51 +12,51 @@ module.exports = {
12 searchUrl: 'http://www.yohoboys.com', 12 searchUrl: 'http://www.yohoboys.com',
13 sideNav: [{ 13 sideNav: [{
14 textCn: '男生', 14 textCn: '男生',
15 - textEn: 'Boys',  
16 - url: false,  
17 - current: true,  
18 - subNav: {  
19 - list: [{  
20 - textCn: '男生',  
21 - textEn: 'Boys',  
22 - img: '',  
23 - url: false  
24 - }, {  
25 - textCn: '首页',  
26 - img: 'http://res.yohoboys.com/res/new/boys/images/about/thirdbtn-sina.png',  
27 - url: ''  
28 - }, {  
29 - textCn: '新品到着',  
30 - img: '',  
31 - url: ''  
32 - }]  
33 - } 15 + textEn: 'BOYS',
  16 + styleClass: 'boys',
  17 + url: ''
34 }, { 18 }, {
35 textCn: '女生', 19 textCn: '女生',
36 - textEn: 'Girls',  
37 - url: false, 20 + textEn: 'GIRLS',
  21 + styleClass: 'girls',
  22 + url: ''
  23 + }, {
  24 + textCn: '潮童',
  25 + textEn: 'KIDS',
  26 + styleClass: 'kids',
  27 + url: ''
  28 + }, {
  29 + textCn: '创意生活',
  30 + textEn: 'LIFE STYLE',
  31 + styleClass: 'life',
  32 + url: ''
  33 + }, {
  34 + textCn: '新品节',
  35 + textEn: 'NEW',
  36 + styleClass: 'new',
  37 + url: ''
  38 + }, {
  39 + textCn: '逛',
  40 + textEn: 'TRENDFINDER',
  41 + styleClass: 'guang',
38 subNav: { 42 subNav: {
39 list: [{ 43 list: [{
40 - textCn: '女生',  
41 - textEn: 'Girls',  
42 - img: '',  
43 - url: false 44 + textCn: '逛',
  45 + textEn: 'TrendFinder',
  46 + back: true
44 }, { 47 }, {
45 - textCn: '首页',  
46 - img: '', 48 + textCn: '查看全部',
47 url: '' 49 url: ''
48 }, { 50 }, {
49 - textCn: '新品到着',  
50 - img: '', 51 + textCn: '只看男生',
  52 + textEn: 'Boys',
  53 + url: ''
  54 + }, {
  55 + textCn: '只看女生',
  56 + textEn: 'Girls',
51 url: '' 57 url: ''
52 }] 58 }]
53 } 59 }
54 - }, {  
55 - textCn: '潮童',  
56 - textEn: 'Kids'  
57 - }, {  
58 - textCn: '家居',  
59 - textEn: 'Life Style'  
60 }], 60 }],
61 content: [{ 61 content: [{
62 bannerTop: { 62 bannerTop: {
@@ -5,45 +5,87 @@ @@ -5,45 +5,87 @@
5 right: 100rem / $pxConvertRem; 5 right: 100rem / $pxConvertRem;
6 bottom: 0; 6 bottom: 0;
7 left: 0; 7 left: 0;
8 - padding: 0 (30rem / $pxConvertRem);  
9 z-index: 1; 8 z-index: 1;
  9 + ul{
  10 + background: #f0f0f0;
  11 + }
10 li { 12 li {
11 position: relative; 13 position: relative;
12 - height: 110rem / $pxConvertRem;  
13 - line-height: 110rem / $pxConvertRem; 14 + height: 128rem / $pxConvertRem;
  15 + line-height: 128rem / $pxConvertRem;
  16 + border-bottom: 1px solid #e0e0e0;
  17 + background: #fff;
14 a { 18 a {
15 display: block; 19 display: block;
16 height: 100%; 20 height: 100%;
17 - padding-left: 48rem / $pxConvertRem; 21 + padding-left: 110rem / $pxConvertRem;
18 color: #444; 22 color: #444;
19 - font-size: 34rem / $pxConvertRem;  
20 - border-bottom: 1px solid #e0e0e0; 23 + font-size: 24rem / $pxConvertRem;
  24 +
21 } 25 }
22 - .nav-point { 26 + .nav-icon,.nav-img{
23 position: absolute; 27 position: absolute;
24 - left: 0;  
25 - color: #f0f0f0;  
26 - font-size: 18rem / $pxConvertRem;  
27 - height: 100%; 28 + width: 60rem / $pxConvertRem;
  29 + height: 60rem / $pxConvertRem;
  30 + top: 50%;
  31 + margin-top: -30rem / $pxConvertRem;
  32 + left: 24rem / $pxConvertRem;
28 } 33 }
29 - .enter-btn { 34 + .enter-subnav {
30 position: absolute; 35 position: absolute;
31 - right: 0; 36 + right: 30rem/ $pxConvertRem;
32 top: 0; 37 top: 0;
33 bottom: 0; 38 bottom: 0;
34 - font-size: 32rem / $pxConvertRem;  
35 - color: #b2b2b2; 39 + font-size: 36rem / $pxConvertRem;
  40 + color: #b0b0b0;
36 font-weight: lighter; 41 font-weight: lighter;
37 } 42 }
38 em { 43 em {
39 - margin-right: 20rem / $pxConvertRem; 44 + margin-right: 10rem / $pxConvertRem;
40 font-weight: bold; 45 font-weight: bold;
  46 + font-size: 34rem / $pxConvertRem;
41 } 47 }
42 } 48 }
43 - li.current {  
44 - .nav-point {  
45 - color: #444; 49 + li.boys{
  50 + i{
  51 + background: image-url('side-nav/boys.png') no-repeat left center;
  52 + background-size: 100% 100%;
  53 + }
  54 + }
  55 + li.girls{
  56 + i{
  57 + background: image-url('side-nav/girls.png') no-repeat left center;
  58 + background-size: 100% 100%;
  59 + }
  60 + }
  61 + li.kids{
  62 + i{
  63 + background: image-url('side-nav/kids.png') no-repeat left center;
  64 + background-size: 100% 100%;
  65 + }
  66 + }
  67 + li.life{
  68 + i{
  69 + background: image-url('side-nav/life.png') no-repeat left center;
  70 + background-size: 100% 100%;
  71 + }
  72 + }
  73 + li.new{
  74 + margin: 19rem / $pxConvertRem 0 0;
  75 + border-top: 1px solid #e0e0e0;
  76 + a{
  77 +
46 } 78 }
  79 + i{
  80 + background: image-url('side-nav/new.png') no-repeat left center;
  81 + background-size: 100% 100%;
  82 + }
  83 + }
  84 + li.guang{
  85 + i{
  86 + background: image-url('side-nav/guang.png') no-repeat left center;
  87 + background-size: 100% 100%;
  88 + }
47 } 89 }
48 } 90 }
49 91
@@ -53,18 +95,24 @@ @@ -53,18 +95,24 @@
53 right: 100rem / $pxConvertRem; 95 right: 100rem / $pxConvertRem;
54 left: 0; 96 left: 0;
55 bottom: 0; 97 bottom: 0;
56 - background: #fff; 98 + background: #fff !important;
57 z-index: 2; 99 z-index: 2;
58 transform: translate3d(100%, 0, 0); 100 transform: translate3d(100%, 0, 0);
59 transition: transform .3s ease-out; 101 transition: transform .3s ease-out;
60 li { 102 li {
  103 + height: 109rem / $pxConvertRem;
  104 + line-height: 109rem / $pxConvertRem;
  105 + border: none;
61 a { 106 a {
  107 + position: relative;
62 display: flex; 108 display: flex;
63 display: -webkit-flex; 109 display: -webkit-flex;
64 - margin: 0 (30rem / $pxConvertRem) 0 (112rem / $pxConvertRem);  
65 - padding-left: 0; 110 + margin: 0 0 0 (30rem / $pxConvertRem);
  111 + padding-left: 50rem / $pxConvertRem;
66 border-bottom: 1px solid #e0e0e0; 112 border-bottom: 1px solid #e0e0e0;
67 align-items: center; 113 align-items: center;
  114 + font-size: 36rem / $pxConvertRem;
  115 + z-index: 2;
68 } 116 }
69 /* img{ 117 /* img{
70 position: absolute; 118 position: absolute;
@@ -75,23 +123,34 @@ @@ -75,23 +123,34 @@
75 margin-top: -25rem / $pxConvertRem; 123 margin-top: -25rem / $pxConvertRem;
76 border: none; 124 border: none;
77 } */ 125 } */
78 - img {  
79 - max-width: 50rem / $pxConvertRem;  
80 - max-height: 50rem / $pxConvertRem;  
81 - margin-left: -70rem / $pxConvertRem;  
82 - margin-right: 16rem / $pxConvertRem; 126 + .nav-point{
  127 + position: absolute;
  128 + left: 0rem / $pxConvertRem;
  129 + font-size: 16rem / $pxConvertRem;
  130 + color: #f0f0f0;
83 } 131 }
84 em { 132 em {
85 font-weight: normal; 133 font-weight: normal;
  134 + font-size: 36rem / $pxConvertRem;
  135 + }
  136 + }
  137 + li:hover{
  138 + .nav-point{
  139 + color: #3e3e3e;
86 } 140 }
87 } 141 }
88 li:first-child { 142 li:first-child {
89 - height: 80rem / $pxConvertRem;  
90 - line-height: 80rem / $pxConvertRem; 143 + height: 88rem / $pxConvertRem;
  144 + line-height: 88rem / $pxConvertRem;
91 background: #3e3e3e; 145 background: #3e3e3e;
92 a { 146 a {
93 color: #fff; 147 color: #fff;
94 border-bottom: none; 148 border-bottom: none;
  149 + padding-left: 110rem / $pxConvertRem;
  150 + }
  151 + .nav-back{
  152 + position: absolute;
  153 + left: 0;
95 } 154 }
96 } 155 }
97 } 156 }
1 <div class="side-nav"> 1 <div class="side-nav">
2 <ul> 2 <ul>
3 {{# sideNav}} 3 {{# sideNav}}
4 - <li {{# current}}class="current"{{/ current}}> 4 + <li class="{{styleClass}}">
5 {{# url}} 5 {{# url}}
6 <a href="{{.}}"> 6 <a href="{{.}}">
7 {{/ url}} 7 {{/ url}}
8 {{^ url}} 8 {{^ url}}
9 <a href="javascript:;"> 9 <a href="javascript:;">
10 {{/ url}} 10 {{/ url}}
11 - <span class="nav-point iconfont">&#xe60c;</span> 11 + {{# img}}
  12 + <img class="nav-img" src="{{.}}" alt="">
  13 + {{/ img}}
  14 + {{^ img}}
  15 + <i class="nav-icon"></i>
  16 + {{/ img}}
12 <em>{{textCn}}</em>{{textEn}} 17 <em>{{textCn}}</em>{{textEn}}
13 - <span class="enter-btn iconfont">&#xe604;</span> 18 + {{# subNav}}
  19 + <span class="enter-subnav iconfont">&#xe614;</span>
  20 + {{/ subNav}}
14 </a> 21 </a>
15 {{# subNav}} 22 {{# subNav}}
16 <ul class="sub-nav"> 23 <ul class="sub-nav">
@@ -22,8 +29,14 @@ @@ -22,8 +29,14 @@
22 {{^ url}} 29 {{^ url}}
23 <a href="javascript:;"> 30 <a href="javascript:;">
24 {{/ url}} 31 {{/ url}}
25 - <img src="{{img}}" alt="">  
26 - <em>{{textCn}}</em>{{textEn}} 32 + {{^ back}}
  33 + <span class="nav-point iconfont">&#xe60c;</span>
  34 + {{/ back}}
  35 + {{# back}}
  36 + <i class="nav-back iconfont">&#xe610;</i>
  37 + {{/ back}}
  38 + <em>{{textCn}}</em>
  39 + {{textEn}}
27 </a> 40 </a>
28 </li> 41 </li>
29 {{/ list}} 42 {{/ list}}