fe / yohoblk-wap · Commits

Go to a project

Authored by 王水玲
Commit 7133059307720c4b3d4bdc86da236279af672f49 1 parent 5c834699

bug 修改

Inline Side-by-side
Showing 8 changed files with 51 additions and 50 deletions
@@ -16,10 +16,10 @@ @@ -16,10 +16,10 @@
16 <div class="filter-content"> 16 <div class="filter-content">
17 <ul class="filter-type"> 17 <ul class="filter-type">
18 <li 18 <li
19 - class="type-item"><span class="sort-label">新品<i class="icon down icon-sort-down"></i></span></li> 19 + class="type-item"><span class="sort-label">新品<i class="icon down icon-arrow-down"></i></span></li>
20 <li 20 <li
21 class="type-item"><span class="sort-label">筛选 21 class="type-item"><span class="sort-label">筛选
22 - <i class="icon down icon-sort-down"></i></span></li> 22 + <i class="icon down icon-arrow-down"></i></span></li>
23 </ul> 23 </ul>
24 </div> 24 </div>
25 </div> 25 </div>
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 <dd class="item" v-for="brand in currentData[item.index]" :key="brand.id" :class="{'active': brand.checked}" @click="select(brand)"> 6 <dd class="item" v-for="brand in currentData[item.index]" :key="brand.id" :class="{'active': brand.checked}" @click="select(brand)">
7 <div class="item-inner">{{brand.name}}</div> 7 <div class="item-inner">{{brand.name}}</div>
8 <div class="item-check"> 8 <div class="item-check">
9 - <i class="icon icon-check"></i> 9 + <i class="icon icon-choose"></i>
10 </div> 10 </div>
11 </dd> 11 </dd>
12 </dl> 12 </dl>
@@ -149,8 +149,8 @@ @@ -149,8 +149,8 @@
149 .item, 149 .item,
150 .index { 150 .index {
151 color: #000; 151 color: #000;
152 - padding-left: 30px;  
153 - padding-right: 30px; 152 + padding-left: 35px;
  153 + padding-right: 35px;
154 } 154 }
155 155
156 .index { 156 .index {
@@ -191,7 +191,8 @@ @@ -191,7 +191,8 @@
191 display: none; 191 display: none;
192 192
193 i { 193 i {
194 - font-weight: bold; 194 + font-size: 60px;
  195 + line-height: 82px;
195 } 196 }
196 } 197 }
197 } 198 }
@@ -135,15 +135,15 @@ export default { @@ -135,15 +135,15 @@ export default {
135 recClass() { 135 recClass() {
136 return { 136 return {
137 down: this.recDown, 137 down: this.recDown,
138 - 'icon-sort-up': !this.recDown,  
139 - 'icon-sort-down': this.recDown 138 + 'icon-arrow-up': !this.recDown,
  139 + 'icon-arrow-down': this.recDown
140 }; 140 };
141 }, 141 },
142 filterClass() { 142 filterClass() {
143 return { 143 return {
144 down: this.filterDown, 144 down: this.filterDown,
145 - 'icon-sort-up': !this.filterDown,  
146 - 'icon-sort-down': this.filterDown 145 + 'icon-arrow-up': !this.filterDown,
  146 + 'icon-arrow-down': this.filterDown
147 }; 147 };
148 }, 148 },
149 activeSort: { 149 activeSort: {
@@ -426,14 +426,10 @@ export default { @@ -426,14 +426,10 @@ export default {
426 426
427 .icon { 427 .icon {
428 position: absolute; 428 position: absolute;
429 - top: 14px; 429 + top: 10px;
430 right: -46px; 430 right: -46px;
431 - font-size: 32px; 431 + font-size: 20px;
432 font-weight: bold; 432 font-weight: bold;
433 -  
434 - &.down {  
435 - top: -10px;  
436 - }  
437 } 433 }
438 } 434 }
439 435
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 {{item.name}} 5 {{item.name}}
6 </div> 6 </div>
7 <div class="item-check"> 7 <div class="item-check">
8 - <i class="icon icon-check"></i> 8 + <i class="icon icon-choose"></i>
9 </div> 9 </div>
10 </div> 10 </div>
11 <slot></slot> 11 <slot></slot>
@@ -40,7 +40,8 @@ @@ -40,7 +40,8 @@
40 $sideIdx: '', 40 $sideIdx: '',
41 sideRect: {}, 41 sideRect: {},
42 firstIdxRect: {}, 42 firstIdxRect: {},
43 - zoomSwitch: false 43 + zoomSwitch: false,
  44 + slideLeft: 0
44 }; 45 };
45 }, 46 },
46 watch: { 47 watch: {
@@ -62,13 +63,14 @@ @@ -62,13 +63,14 @@
62 }, 500); 63 }, 500);
63 }, 64 },
64 hideZoom() { 65 hideZoom() {
65 - this.zoomIdx = ''; 66 +
  67 + // this.zoomIdx = '';
66 this.zoomSwitch = false; 68 this.zoomSwitch = false;
67 }, 69 },
68 showZoom(e) { 70 showZoom(e) {
69 const eX = e.center.x; 71 const eX = e.center.x;
70 const eY = e.center.y; 72 const eY = e.center.y;
71 - const outRect = eX < this.sideRect.left || eY < this.sideRect.top || eY > this.sideRect.bottom; 73 + const outRect = eX < this.slideLeft || eY < this.sideRect.top || eY > this.sideRect.bottom;
72 74
73 if (outRect) { 75 if (outRect) {
74 return this.hideZoom(); 76 return this.hideZoom();
@@ -127,6 +129,7 @@ @@ -127,6 +129,7 @@
127 this.$nextTick(function() { 129 this.$nextTick(function() {
128 setTimeout(() => { 130 setTimeout(() => {
129 this.recordIdxRect(); 131 this.recordIdxRect();
  132 + this.slideLeft = this.sideRect.left;
130 }, 500); 133 }, 500);
131 }); 134 });
132 } 135 }
1 <template> 1 <template>
2 <resource class="resource-category"> 2 <resource class="resource-category">
3 - <a-link class="cate-label" :href="brandLink" :yas="value" :yas-f="index">品牌<i class="icon icon-arrow-right"></i></a-link> 3 + <a-link class="cate-label" :href="brandLink" :yas="value" :yas-f="index">品牌<i class="icon icon-arrow-up trans-right"></i></a-link>
4 <div v-for="(item, index) in sort" v-if="item.sub" :key="index"> 4 <div v-for="(item, index) in sort" v-if="item.sub" :key="index">
5 <p class="cate-label" @click="toggle(index)">{{item.category_name 5 <p class="cate-label" @click="toggle(index)">{{item.category_name
6 }}<i class="icon" :class="sortClass[index]"></i></p> 6 }}<i class="icon" :class="sortClass[index]"></i></p>
@@ -94,7 +94,7 @@ export default { @@ -94,7 +94,7 @@ export default {
94 color: #030303; 94 color: #030303;
95 font-size: 28px; 95 font-size: 28px;
96 font-weight: bold; 96 font-weight: bold;
97 - font-family: "HiraginoSansGB-W6", "PingFang SC", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei"; 97 + font-family: "HiraginoSansGB-W6";
98 98
99 .icon { 99 .icon {
100 position: absolute; 100 position: absolute;
@@ -102,10 +102,11 @@ export default { @@ -102,10 +102,11 @@ export default {
102 right: 24px; 102 right: 24px;
103 font-size: 20px; 103 font-size: 20px;
104 line-height: 88px; 104 line-height: 88px;
  105 + font-weight: bold;
105 } 106 }
106 107
107 - .icon.icon-arrow-right {  
108 - font-size: 34px; 108 + .icon.trans-right {
  109 + transform: rotate(90deg);
109 } 110 }
110 111
111 &:after { 112 &:after {
@@ -37,92 +37,92 @@ @@ -37,92 +37,92 @@
37 /* HiraginoSansGB-W3 */ 37 /* HiraginoSansGB-W3 */
38 @font-face { 38 @font-face {
39 font-family: "HiraginoSansGB-W3"; 39 font-family: "HiraginoSansGB-W3";
40 - src: resolve("hiragino/hiragino_sans_gb_w3.eot");  
41 - src: resolve("hiragino/hiragino_sans_gb_w3.eot?#iefix") format("embedded-opentype"), resolve("hiragino/hiragino_sans_gb_w3.woff") format("woff"), resolve("hiragino/hiragino_sans_gb_w3.ttf") format("truetype"), resolve("hiragino/hiragino_sans_gb_w3.svg#HiraginoSansGB-W3") format("svg"); 40 + src: url("../font/hiragino/hiragino_sans_gb_w3.eot");
  41 + src: url("../font/hiragino/hiragino_sans_gb_w3.eot?#iefix") format("embedded-opentype"), url("../font/hiragino/hiragino_sans_gb_w3.woff") format("woff"), url("../font/hiragino/hiragino_sans_gb_w3.ttf") format("truetype"), url("../font/hiragino/hiragino_sans_gb_w3.svg#HiraginoSansGB-W3") format("svg");
42 } 42 }
43 43
44 /* HiraginoSansGB-W6 */ 44 /* HiraginoSansGB-W6 */
45 @font-face { 45 @font-face {
46 font-family: "HiraginoSansGB-W6"; 46 font-family: "HiraginoSansGB-W6";
47 - src: resolve("hiragino/hiragino_sans_gb_w6.eot");  
48 - src: resolve("hiragino/hiragino_sans_gb_w6.eot?#iefix") format("embedded-opentype"), resolve("hiragino/hiragino_sans_gb_w6.woff") format("woff"), resolve("hiragino/hiragino_sans_gb_w6.ttf") format("truetype"), resolve("hiragino/hiragino_sans_gb_w6.svg#HiraginoSansGB-W6") format("svg"); 47 + src: url("../font/hiragino/hiragino_sans_gb_w6.eot");
  48 + src: url("../font/hiragino/hiragino_sans_gb_w6.eot?#iefix") format("embedded-opentype"), url("../font/hiragino/hiragino_sans_gb_w6.woff") format("woff"), url("../font/hiragino/hiragino_sans_gb_w6.ttf") format("truetype"), url("../font/hiragino/hiragino_sans_gb_w6.svg#HiraginoSansGB-W6") format("svg");
49 } 49 }
50 50
51 /* SanFranciscoText-Regular */ 51 /* SanFranciscoText-Regular */
52 @font-face { 52 @font-face {
53 font-family: "SanFranciscoText-Regular"; 53 font-family: "SanFranciscoText-Regular";
54 - src: resolve("sanFranciscoText/sanfranciscotext-regular.eot");  
55 - src: resolve("sanFranciscoText/sanfranciscotext-regular.eot?#iefix") format("embedded-opentype"), resolve("sanFranciscoText/sanfranciscotext-regular.woff") format("woff"), resolve("sanFranciscoText/sanfranciscotext-regular.ttf") format("truetype"), resolve("sanFranciscoText/sanfranciscotext-regular.svg#SanFranciscoText-Regular") format("svg"); 54 + src: url("../font/sanFranciscoText/sanfranciscotext-regular.eot");
  55 + src: url("../font/sanFranciscoText/sanfranciscotext-regular.eot?#iefix") format("embedded-opentype"), url("../font/sanFranciscoText/sanfranciscotext-regular.woff") format("woff"), url("../font/sanFranciscoText/sanfranciscotext-regular.ttf") format("truetype"), url("../font/sanFranciscoText/sanfranciscotext-regular.svg#SanFranciscoText-Regular") format("svg");
56 } 56 }
57 57
58 /* SanFranciscoText-Bold */ 58 /* SanFranciscoText-Bold */
59 @font-face { 59 @font-face {
60 font-family: "SanFranciscoText-Bold"; 60 font-family: "SanFranciscoText-Bold";
61 - src: resolve("sanFranciscoText/sanfranciscotext-bold.eot");  
62 - src: resolve("sanFranciscoText/sanfranciscotext-bold.eot?#iefix") format("embedded-opentype"), resolve("sanFranciscoText/sanfranciscotext-bold.woff") format("woff"), resolve("sanFranciscoText/sanfranciscotext-bold.ttf") format("truetype"), resolve("sanFranciscoText/sanfranciscotext-bold.svg#SanFranciscoText-Bold") format("svg"); 61 + src: url("../font/sanFranciscoText/sanfranciscotext-bold.eot");
  62 + src: url("../font/sanFranciscoText/sanfranciscotext-bold.eot?#iefix") format("embedded-opentype"), url("../font/sanFranciscoText/sanfranciscotext-bold.woff") format("woff"), url("../font/sanFranciscoText/sanfranciscotext-bold.ttf") format("truetype"), url("../font/sanFranciscoText/sanfranciscotext-bold.svg#SanFranciscoText-Bold") format("svg");
63 } 63 }
64 64
65 /* SanFranciscoText-Bolditalic */ 65 /* SanFranciscoText-Bolditalic */
66 @font-face { 66 @font-face {
67 font-family: "SanFranciscoText-Bolditalic"; 67 font-family: "SanFranciscoText-Bolditalic";
68 - src: resolve("sanFranciscoText/sanfranciscotext-bolditalic.eot");  
69 - src: resolve("sanFranciscoText/sanfranciscotext-bolditalic.eot?#iefix") format("embedded-opentype"), resolve("sanFranciscoText/sanfranciscotext-bolditalic.woff") format("woff"), resolve("sanFranciscoText/sanfranciscotext-bolditalic.ttf") format("truetype"), resolve("sanFranciscoText/sanfranciscotext-bolditalic.svg#SanFranciscoText-Bolditalic") format("svg"); 68 + src: url("../font/sanFranciscoText/sanfranciscotext-bolditalic.eot");
  69 + src: url("../font/sanFranciscoText/sanfranciscotext-bolditalic.eot?#iefix") format("embedded-opentype"), url("../font/sanFranciscoText/sanfranciscotext-bolditalic.woff") format("woff"), url("../font/sanFranciscoText/sanfranciscotext-bolditalic.ttf") format("truetype"), url("../font/sanFranciscoText/sanfranciscotext-bolditalic.svg#SanFranciscoText-Bolditalic") format("svg");
70 } 70 }
71 71
72 /* SanFranciscoText-Heavy */ 72 /* SanFranciscoText-Heavy */
73 @font-face { 73 @font-face {
74 font-family: "SanFranciscoText-Heavy"; 74 font-family: "SanFranciscoText-Heavy";
75 - src: resolve("sanFranciscoText/sanfranciscotext-heavy.eot");  
76 - src: resolve("sanFranciscoText/sanfranciscotext-heavy.eot?#iefix") format("embedded-opentype"), resolve("sanFranciscoText/sanfranciscotext-heavy.woff") format("woff"), resolve("sanFranciscoText/sanfranciscotext-heavy.ttf") format("truetype"), resolve("sanFranciscoText/sanfranciscotext-heavy.svg#SanFranciscoText-Heavy") format("svg"); 75 + src: url("../font/sanFranciscoText/sanfranciscotext-heavy.eot");
  76 + src: url("../font/sanFranciscoText/sanfranciscotext-heavy.eot?#iefix") format("embedded-opentype"), url("../font/sanFranciscoText/sanfranciscotext-heavy.woff") format("woff"), url("../font/sanFranciscoText/sanfranciscotext-heavy.ttf") format("truetype"), url("../font/sanFranciscoText/sanfranciscotext-heavy.svg#SanFranciscoText-Heavy") format("svg");
77 } 77 }
78 78
79 /* SanFranciscoText-Heavyitalic */ 79 /* SanFranciscoText-Heavyitalic */
80 @font-face { 80 @font-face {
81 font-family: "SanFranciscoText-Heavyitalic"; 81 font-family: "SanFranciscoText-Heavyitalic";
82 - src: resolve("sanFranciscoText/sanfranciscotext-heavyitalic.eot");  
83 - src: resolve("sanFranciscoText/sanfranciscotext-heavyitalic.eot?#iefix") format("embedded-opentype"), resolve("sanFranciscoText/sanfranciscotext-heavyitalic.woff") format("woff"), resolve("sanFranciscoText/sanfranciscotext-heavyitalic.ttf") format("truetype"), resolve("sanFranciscoText/sanfranciscotext-heavyitalic.svg#SanFranciscoText-Heavyitalic") format("svg"); 82 + src: url("../font/sanFranciscoText/sanfranciscotext-heavyitalic.eot");
  83 + src: url("../font/sanFranciscoText/sanfranciscotext-heavyitalic.eot?#iefix") format("embedded-opentype"), url("../font/sanFranciscoText/sanfranciscotext-heavyitalic.woff") format("woff"), url("../font/sanFranciscoText/sanfranciscotext-heavyitalic.ttf") format("truetype"), url("../font/sanFranciscoText/sanfranciscotext-heavyitalic.svg#SanFranciscoText-Heavyitalic") format("svg");
84 } 84 }
85 85
86 /* SanFranciscoText-Light */ 86 /* SanFranciscoText-Light */
87 @font-face { 87 @font-face {
88 font-family: "SanFranciscoText-Light"; 88 font-family: "SanFranciscoText-Light";
89 - src: resolve("sanFranciscoText/sanfranciscotext-light.eot");  
90 - src: resolve("sanFranciscoText/sanfranciscotext-light.eot?#iefix") format("embedded-opentype"), resolve("sanFranciscoText/sanfranciscotext-light.woff") format("woff"), resolve("sanFranciscoText/sanfranciscotext-light.ttf") format("truetype"), resolve("sanFranciscoText/sanfranciscotext-light.svg#SanFranciscoText-Light") format("svg"); 89 + src: url("../font/sanFranciscoText/sanfranciscotext-light.eot");
  90 + src: url("../font/sanFranciscoText/sanfranciscotext-light.eot?#iefix") format("embedded-opentype"), url("../font/sanFranciscoText/sanfranciscotext-light.woff") format("woff"), url("../font/sanFranciscoText/sanfranciscotext-light.ttf") format("truetype"), url("../font/sanFranciscoText/sanfranciscotext-light.svg#SanFranciscoText-Light") format("svg");
91 } 91 }
92 92
93 /* SanFranciscoText-Lightitalic */ 93 /* SanFranciscoText-Lightitalic */
94 @font-face { 94 @font-face {
95 font-family: "SanFranciscoText-Lightitalic"; 95 font-family: "SanFranciscoText-Lightitalic";
96 - src: resolve("sanFranciscoText/sanfranciscotext-lightitalic.eot");  
97 - src: resolve("sanFranciscoText/sanfranciscotext-lightitalic.eot?#iefix") format("embedded-opentype"), resolve("sanFranciscoText/sanfranciscotext-lightitalic.woff") format("woff"), resolve("sanFranciscoText/sanfranciscotext-lightitalic.ttf") format("truetype"), resolve("sanFranciscoText/sanfranciscotext-lightitalic.svg#SanFranciscoText-Lightitalic") format("svg"); 96 + src: url("../font/sanFranciscoText/sanfranciscotext-lightitalic.eot");
  97 + src: url("../font/sanFranciscoText/sanfranciscotext-lightitalic.eot?#iefix") format("embedded-opentype"), url("../font/sanFranciscoText/sanfranciscotext-lightitalic.woff") format("woff"), url("../font/sanFranciscoText/sanfranciscotext-lightitalic.ttf") format("truetype"), url("../font/sanFranciscoText/sanfranciscotext-lightitalic.svg#SanFranciscoText-Lightitalic") format("svg");
98 } 98 }
99 99
100 /* SanFranciscoText-Medium */ 100 /* SanFranciscoText-Medium */
101 @font-face { 101 @font-face {
102 font-family: "SanFranciscoText-Medium"; 102 font-family: "SanFranciscoText-Medium";
103 - src: resolve("sanFranciscoText/sanfranciscotext-medium.eot");  
104 - src: resolve("sanFranciscoText/sanfranciscotext-medium.eot?#iefix") format("embedded-opentype"), resolve("sanFranciscoText/sanfranciscotext-medium.woff") format("woff"), resolve("sanFranciscoText/sanfranciscotext-medium.ttf") format("truetype"), resolve("sanFranciscoText/sanfranciscotext-medium.svg#SanFranciscoText-Medium") format("svg"); 103 + src: url("../font/sanFranciscoText/sanfranciscotext-medium.eot");
  104 + src: url("../font/sanFranciscoText/sanfranciscotext-medium.eot?#iefix") format("embedded-opentype"), url("../font/sanFranciscoText/sanfranciscotext-medium.woff") format("woff"), url("../font/sanFranciscoText/sanfranciscotext-medium.ttf") format("truetype"), url("../font/sanFranciscoText/sanfranciscotext-medium.svg#SanFranciscoText-Medium") format("svg");
105 } 105 }
106 106
107 /* SanFranciscoText-Mediumitalic */ 107 /* SanFranciscoText-Mediumitalic */
108 @font-face { 108 @font-face {
109 font-family: "SanFranciscoText-Mediumitalic"; 109 font-family: "SanFranciscoText-Mediumitalic";
110 - src: resolve("sanFranciscoText/sanfranciscotext-mediumitalic.eot");  
111 - src: resolve("sanFranciscoText/sanfranciscotext-mediumitalic.eot?#iefix") format("embedded-opentype"), resolve("sanFranciscoText/sanfranciscotext-mediumitalic.woff") format("woff"), resolve("sanFranciscoText/sanfranciscotext-mediumitalic.ttf") format("truetype"), resolve("sanFranciscoText/sanfranciscotext-mediumitalic.svg#SanFranciscoText-Mediumitalic") format("svg"); 110 + src: url("../font/sanFranciscoText/sanfranciscotext-mediumitalic.eot");
  111 + src: url("../font/sanFranciscoText/sanfranciscotext-mediumitalic.eot?#iefix") format("embedded-opentype"), url("../font/sanFranciscoText/sanfranciscotext-mediumitalic.woff") format("woff"), url("../font/sanFranciscoText/sanfranciscotext-mediumitalic.ttf") format("truetype"), url("../font/sanFranciscoText/sanfranciscotext-mediumitalic.svg#SanFranciscoText-Mediumitalic") format("svg");
112 } 112 }
113 113
114 /* SanFranciscoText-Regularitalic */ 114 /* SanFranciscoText-Regularitalic */
115 @font-face { 115 @font-face {
116 font-family: "SanFranciscoText-Regularitalic"; 116 font-family: "SanFranciscoText-Regularitalic";
117 - src: resolve("sanFranciscoText/sanfranciscotext-regularitalic.eot");  
118 - src: resolve("sanFranciscoText/sanfranciscotext-regularitalic.eot?#iefix") format("embedded-opentype"), resolve("sanFranciscoText/sanfranciscotext-regularitalic.woff") format("woff"), resolve("sanFranciscoText/sanfranciscotext-regularitalic.ttf") format("truetype"), resolve("sanFranciscoText/sanfranciscotext-regularitalic.svg#SanFranciscoText-Regularitalic") format("svg"); 117 + src: url("../font/sanFranciscoText/sanfranciscotext-regularitalic.eot");
  118 + src: url("../font/sanFranciscoText/sanfranciscotext-regularitalic.eot?#iefix") format("embedded-opentype"), url("../font/sanFranciscoText/sanfranciscotext-regularitalic.woff") format("woff"), url("../font/sanFranciscoText/sanfranciscotext-regularitalic.ttf") format("truetype"), url("../font/sanFranciscoText/sanfranciscotext-regularitalic.svg#SanFranciscoText-Regularitalic") format("svg");
119 } 119 }
120 120
121 /* SanFranciscoText-Semibold */ 121 /* SanFranciscoText-Semibold */
122 @font-face { 122 @font-face {
123 font-family: "san_francisco_textsemibold"; 123 font-family: "san_francisco_textsemibold";
124 - src: resolve("sanFranciscoText/sanfranciscotext-semibold.eot");  
125 - src: resolve("sanFranciscoText/sanfranciscotext-semibold.eot?#iefix") format("embedded-opentype"), resolve("sanFranciscoText/sanfranciscotext-semibold.woff") format("woff"), resolve("sanFranciscoText/sanfranciscotext-semibold.ttf") format("truetype"), resolve("sanFranciscoText/sanfranciscotext-semibold.svg#SanFranciscoText-Semibold") format("svg"); 124 + src: url("../font/sanFranciscoText/sanfranciscotext-semibold.eot");
  125 + src: url("../font/sanFranciscoText/sanfranciscotext-semibold.eot?#iefix") format("embedded-opentype"), url("../font/sanFranciscoText/sanfranciscotext-semibold.woff") format("woff"), url("../font/sanFranciscoText/sanfranciscotext-semibold.ttf") format("truetype"), url("../font/sanFranciscoText/sanfranciscotext-semibold.svg#SanFranciscoText-Semibold") format("svg");
126 } 126 }
127 127
128 .brown-light { 128 .brown-light {