Showing
3 changed files
with
25 additions
and
19 deletions
public/img/home/fav/fav-del-btn.png
deleted
100644 → 0
1.02 KB
| @@ -14,13 +14,14 @@ | @@ -14,13 +14,14 @@ | ||
| 14 | <span class="down" v-if="item.down">品牌已下架</span> | 14 | <span class="down" v-if="item.down">品牌已下架</span> |
| 15 | </div> | 15 | </div> |
| 16 | </a> | 16 | </a> |
| 17 | - <div class="fav-del-right" id="del-{{$index}}" @click="delItem($index, item.fav_id)"> | ||
| 18 | - <span class="fav-del-btn"></span> | 17 | + <div class="fav-del-right hide" id="del-{{$index}}" @click="delItem($index, item.fav_id)"> |
| 18 | + <span class="icon icon-delete"></span> | ||
| 19 | <br/> | 19 | <br/> |
| 20 | <span class="fav-del-txt">删除</span> | 20 | <span class="fav-del-txt">删除</span> |
| 21 | </div> | 21 | </div> |
| 22 | </li> | 22 | </li> |
| 23 | </ul> | 23 | </ul> |
| 24 | + | ||
| 24 | <div class="fav-null-box {{ nullbox }}"> | 25 | <div class="fav-null-box {{ nullbox }}"> |
| 25 | <span class="fav-null">您暂无收藏任何品牌</span> | 26 | <span class="fav-null">您暂无收藏任何品牌</span> |
| 26 | <a slot="go-shopping" class="go-shopping" :href="brandUrl">随便逛逛</a> | 27 | <a slot="go-shopping" class="go-shopping" :href="brandUrl">随便逛逛</a> |
| @@ -84,10 +85,12 @@ | @@ -84,10 +85,12 @@ | ||
| 84 | let width = delBtn.width(); | 85 | let width = delBtn.width(); |
| 85 | 86 | ||
| 86 | $('#li-' + index).css('transform', 'translateX(-' + width + 'px)'); | 87 | $('#li-' + index).css('transform', 'translateX(-' + width + 'px)'); |
| 88 | + delBtn.removeClass('hide'); | ||
| 87 | }, | 89 | }, |
| 88 | hideDelBth() { | 90 | hideDelBth() { |
| 89 | this.brandData.forEach(function(d, index) { | 91 | this.brandData.forEach(function(d, index) { |
| 90 | $('#li-' + index).css('transform', 'translateX(0px)'); | 92 | $('#li-' + index).css('transform', 'translateX(0px)'); |
| 93 | + $('#del-' + index).addClass('hide'); | ||
| 91 | }); | 94 | }); |
| 92 | }, | 95 | }, |
| 93 | delItem(index, id) { | 96 | delItem(index, id) { |
| @@ -134,7 +137,6 @@ | @@ -134,7 +137,6 @@ | ||
| 134 | li { | 137 | li { |
| 135 | height: 135px; | 138 | height: 135px; |
| 136 | overflow: hidden; | 139 | overflow: hidden; |
| 137 | - margin-top: 20px; | ||
| 138 | border-bottom: 1px solid #e0e0e0; | 140 | border-bottom: 1px solid #e0e0e0; |
| 139 | } | 141 | } |
| 140 | 142 | ||
| @@ -168,22 +170,24 @@ | @@ -168,22 +170,24 @@ | ||
| 168 | right: -126px; | 170 | right: -126px; |
| 169 | background: #ff3b30; | 171 | background: #ff3b30; |
| 170 | width: 126px; | 172 | width: 126px; |
| 171 | - height: 125px; | 173 | + height: 100%; |
| 172 | text-align: center; | 174 | text-align: center; |
| 173 | 175 | ||
| 174 | - .fav-del-btn { | 176 | + .icon-delete { |
| 175 | display: inline-block; | 177 | display: inline-block; |
| 176 | - width: 35px; | ||
| 177 | - height: 43px; | 178 | + color: white; |
| 179 | + font-size: 35px; | ||
| 178 | margin-top: 30px; | 180 | margin-top: 30px; |
| 179 | - background: resolve("home/fav/fav-del-btn.png"); | ||
| 180 | - background-size: 100%; | ||
| 181 | } | 181 | } |
| 182 | 182 | ||
| 183 | .fav-del-txt { | 183 | .fav-del-txt { |
| 184 | font-size: 24px; | 184 | font-size: 24px; |
| 185 | color: #fff; | 185 | color: #fff; |
| 186 | } | 186 | } |
| 187 | + | ||
| 188 | + .hide { | ||
| 189 | + display: none; | ||
| 190 | + } | ||
| 187 | } | 191 | } |
| 188 | 192 | ||
| 189 | .fav-img-box { | 193 | .fav-img-box { |
| @@ -22,8 +22,8 @@ | @@ -22,8 +22,8 @@ | ||
| 22 | </div> | 22 | </div> |
| 23 | </div> | 23 | </div> |
| 24 | </a> | 24 | </a> |
| 25 | - <div class="fav-del-right" id="del-{{$index}}" @click="delItem($index, item.fav_id)"> | ||
| 26 | - <span class="fav-del-btn"></span> | 25 | + <div class="fav-del-right hide" id="del-{{$index}}" @click="delItem($index, item.fav_id)"> |
| 26 | + <span class="icon icon-delete"></span> | ||
| 27 | <br/> | 27 | <br/> |
| 28 | <span class="fav-del-txt">删除</span> | 28 | <span class="fav-del-txt">删除</span> |
| 29 | </div> | 29 | </div> |
| @@ -91,10 +91,12 @@ | @@ -91,10 +91,12 @@ | ||
| 91 | let width = delBtn.width(); | 91 | let width = delBtn.width(); |
| 92 | 92 | ||
| 93 | $('#li-' + index).css('transform', 'translateX(-' + width + 'px)'); | 93 | $('#li-' + index).css('transform', 'translateX(-' + width + 'px)'); |
| 94 | + delBtn.removeClass('hide'); | ||
| 94 | }, | 95 | }, |
| 95 | hideDelBth() { | 96 | hideDelBth() { |
| 96 | this.productData.forEach(function(d, index) { | 97 | this.productData.forEach(function(d, index) { |
| 97 | $('#li-' + index).css('transform', 'translateX(0px)'); | 98 | $('#li-' + index).css('transform', 'translateX(0px)'); |
| 99 | + $('#del-' + index).addClass('hide'); | ||
| 98 | }); | 100 | }); |
| 99 | }, | 101 | }, |
| 100 | delItem(index, id) { | 102 | delItem(index, id) { |
| @@ -141,7 +143,6 @@ | @@ -141,7 +143,6 @@ | ||
| 141 | li { | 143 | li { |
| 142 | height: 205px; | 144 | height: 205px; |
| 143 | overflow: hidden; | 145 | overflow: hidden; |
| 144 | - margin-top: 20px; | ||
| 145 | } | 146 | } |
| 146 | 147 | ||
| 147 | .fav-del-left { | 148 | .fav-del-left { |
| @@ -177,19 +178,21 @@ | @@ -177,19 +178,21 @@ | ||
| 177 | height: 200px; | 178 | height: 200px; |
| 178 | text-align: center; | 179 | text-align: center; |
| 179 | 180 | ||
| 180 | - .fav-del-btn { | 181 | + .icon-delete { |
| 181 | display: inline-block; | 182 | display: inline-block; |
| 182 | - width: 35px; | ||
| 183 | - height: 43px; | ||
| 184 | - margin-top: 50px; | ||
| 185 | - background: resolve("home/fav/fav-del-btn.png"); | ||
| 186 | - background-size: 100%; | 183 | + color: white; |
| 184 | + font-size: 35px; | ||
| 185 | + margin-top: 55px; | ||
| 187 | } | 186 | } |
| 188 | 187 | ||
| 189 | .fav-del-txt { | 188 | .fav-del-txt { |
| 190 | font-size: 24px; | 189 | font-size: 24px; |
| 191 | color: #fff; | 190 | color: #fff; |
| 192 | } | 191 | } |
| 192 | + | ||
| 193 | + .hide { | ||
| 194 | + display: none; | ||
| 195 | + } | ||
| 193 | } | 196 | } |
| 194 | 197 | ||
| 195 | .fav-img-box { | 198 | .fav-img-box { |
| @@ -211,7 +214,6 @@ | @@ -211,7 +214,6 @@ | ||
| 211 | font-size: 24px; | 214 | font-size: 24px; |
| 212 | border-bottom: 1px solid #e0e0e0; | 215 | border-bottom: 1px solid #e0e0e0; |
| 213 | padding-bottom: 20px; | 216 | padding-bottom: 20px; |
| 214 | - margin-right: 5px; | ||
| 215 | height: 203px; | 217 | height: 203px; |
| 216 | overflow: hidden; | 218 | overflow: hidden; |
| 217 | position: relative; | 219 | position: relative; |
-
Please register or login to post a comment