sagaBrand.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. <!--
  2. * @Author: zhangyu
  3. * @Date: 2020-05-08 16:06:03
  4. * @Info:
  5. * @LastEditTime: 2020-05-12 19:31:47
  6. -->
  7. <template>
  8. <div class="saga-brand-box" ref="brandBox">
  9. <div class="saga-brand-header">
  10. <el-dropdown @command="handleCommand" style="line-height: 40px;">
  11. <span class="el-dropdown-link">
  12. {{sort}}<i class="el-icon-arrow-down el-icon--right"></i>
  13. </span>
  14. <el-dropdown-menu slot="dropdown">
  15. <el-dropdown-item v-for="(val, key) in sortMap" :key="key" :command="key">{{val}}</el-dropdown-item>
  16. </el-dropdown-menu>
  17. </el-dropdown>
  18. <el-input
  19. placeholder="请输入品牌关键字(Enter检索)"
  20. style="float: right;width: 240px;"
  21. @keyup.enter.native="ChangeKeyWord(keyWord)"
  22. v-model="keyWord">
  23. <i slot="prefix" class="el-input__icon el-icon-search" style="cursor:pointer;" @click="ChangeKeyWord(keyWord)"></i>
  24. </el-input>
  25. </div>
  26. <div v-for="(list, letter) in brandList" :key="letter" v-show="list.length" class="saga-brand-group">
  27. <h3 class="saga-brand-letter">{{letter}}</h3>
  28. <ul class="saga-brand-list">
  29. <li class="saga-brand-item" :class="{ 'brand-new': item.new, item1200: boxWidth == 1200, item980: boxWidth == 980}" v-for="item in list" :key="item.id" :title="item.zhName">
  30. <div class="saga-brand-name">
  31. <p class="saga-brand-zhName">{{item.zhName}}</p>
  32. <p class="saga-brand-enName" :title="item.enName">{{item.enName}}</p>
  33. </div>
  34. <div class="saga-brand-logo">
  35. <el-image style="width: 52px; height: 52px" :src="item.logoUrl" fit="fill">
  36. <div slot="error" class="image-slot">
  37. <i class="el-icon-picture-outline"></i>
  38. </div>
  39. </el-image>
  40. </div>
  41. </li>
  42. </ul>
  43. </div>
  44. <ul class="saga-letter-ul" :style="`transform:translate(${boxWidth+4}px,0)`" @click.stop="handleClickLetter">
  45. <li
  46. v-for="(list, letter, index) in brandList"
  47. v-show="list.length"
  48. :key="`nav-${letter}`"
  49. :data-index="index"
  50. class="saga-letter-li"
  51. :class="{ 'active': index == stepActive}"
  52. :title="letter">
  53. {{letter}}
  54. </li>
  55. </ul>
  56. </div>
  57. </template>
  58. <script>
  59. import brandList from "@/data/brandList"
  60. export default {
  61. components: {},
  62. created() {
  63. this.brandList = brandList
  64. },
  65. mounted() {
  66. this.boxWidth = this.$refs.brandBox.clientWidth
  67. let listener = document.querySelector('.page-content-scroll')
  68. listener.addEventListener('scroll', this.onScroll)
  69. },
  70. data() {
  71. return {
  72. sortMap: {
  73. zh: "中文排序",
  74. en: "英文排序",
  75. },
  76. sort: "中文排序",
  77. brandList: {},
  78. boxWidth: 0,
  79. stepActive: 0, //锚点
  80. keyWord: "", //检索关键字
  81. }
  82. },
  83. methods: {
  84. handleCommand(command) {// 切换排序方式
  85. this.sort = this.sortMap[command]
  86. },
  87. ChangeKeyWord(keyWord) {// 品牌检索
  88. debugger
  89. },
  90. handleClickLetter(e) {
  91. let index = e.target.dataset.index
  92. if (index) {
  93. this.stepActive = index
  94. let jump = document.querySelectorAll('.saga-brand-group'),
  95. total = jump[index].offsetTop - 127,// 获取需要滚动的距离
  96. listener = document.querySelector('.page-content-scroll'),
  97. distance = listener.scrollTop,
  98. step = total / 50;
  99. if (total > distance) {
  100. smoothDown()
  101. } else {
  102. let newTotal = distance - total + 100
  103. step = newTotal / 50
  104. smoothUp()
  105. }
  106. function smoothDown() {
  107. if (distance < total) {
  108. distance += step
  109. listener.scrollTop = distance
  110. setTimeout(smoothDown, 10)
  111. } else {
  112. listener.scrollTop = total
  113. }
  114. }
  115. function smoothUp() {
  116. if (distance > total) {
  117. distance -= step
  118. listener.scrollTop = distance
  119. setTimeout(smoothUp, 10)
  120. } else {
  121. listener.scrollTop = total
  122. }
  123. }
  124. }
  125. },
  126. onScroll() {
  127. let scrolled = document.querySelector('.page-content-scroll').scrollTop
  128. let jump = document.querySelectorAll('.saga-brand-group')
  129. for (let i = 0; i < jump.length; i++) {
  130. if ((jump[i].offsetTop - 127) >= scrolled) {
  131. this.stepActive = i
  132. break
  133. }
  134. }
  135. }
  136. }
  137. }
  138. </script>
  139. <style lang="scss" scoped>
  140. .saga-brand-box {
  141. width: 100%;
  142. height: 100%;
  143. padding: 16px;
  144. box-sizing: border-box;
  145. background: rgba(255,255,255,1);
  146. box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
  147. .saga-brand-header {
  148. height: 40px;
  149. margin-bottom: 16px;
  150. border-bottom: 1px solid #EFF0F1;
  151. }
  152. .saga-brand-group {
  153. .saga-brand-letter {
  154. margin-bottom: 16px;
  155. padding-left: 13px;
  156. height: 34px;
  157. line-height: 45px;
  158. font-size: 20px;
  159. border-bottom: 1px solid #EFF0F1;
  160. }
  161. .saga-brand-list {
  162. display: flex;
  163. flex-direction: row;
  164. flex-wrap: wrap;
  165. .saga-brand-item {
  166. width:224px;
  167. height:102px;
  168. padding: 16px 12px;
  169. margin-right: 12px;
  170. margin-bottom: 16px;
  171. cursor: pointer;
  172. box-sizing: border-box;
  173. border-radius:4px;
  174. border:1px solid #E4E5E7;
  175. transition: all 0.1s linear 0.01s;
  176. .saga-brand-name {
  177. display: inline-block;
  178. width: 133px;
  179. height: 100%;
  180. margin-right: 5px;
  181. font-size: 14px;
  182. line-height: 22px;
  183. .saga-brand-zhName {
  184. height: 44px;
  185. display: -webkit-box;
  186. -webkit-box-orient: vertical;
  187. -webkit-line-clamp: 2;
  188. overflow: hidden;
  189. }
  190. .saga-brand-enName {
  191. color: #8D9399;
  192. margin-top: 4px;
  193. height: 22px;
  194. overflow: hidden;
  195. white-space: nowrap;
  196. text-overflow: ellipsis;
  197. }
  198. }
  199. .saga-brand-logo {
  200. width: 52px;
  201. height: 52px;
  202. display: inline-block;
  203. vertical-align: top;
  204. /deep/ .image-slot {
  205. font-size: 30px;
  206. display: flex;
  207. justify-content: center;
  208. align-items: center;
  209. width: 100%;
  210. height: 100%;
  211. background: #f5f7fa;
  212. color: #909399;
  213. }
  214. }
  215. }
  216. .saga-brand-item.brand-new {
  217. border:1px solid rgba(58,141,222,0.6);
  218. }
  219. .saga-brand-item:hover {
  220. box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  221. transform: translate(0,-5px);
  222. }
  223. .item1200 {
  224. width:224px;
  225. }
  226. .item980 {
  227. width:228px;
  228. }
  229. .item1200:nth-child(5n) {
  230. margin-right: 0;
  231. }
  232. .item980:nth-child(4n) {
  233. margin-right: 0;
  234. }
  235. }
  236. }
  237. .saga-letter-ul {
  238. position: fixed;
  239. top: 196px;
  240. .saga-letter-li {
  241. width:20px;
  242. height:20px;
  243. margin-bottom: 2px;
  244. text-align: center;
  245. line-height: 20px;
  246. font-size: 12px;
  247. cursor: pointer;
  248. color: #8D9399;
  249. background: #EEEEEE;
  250. }
  251. .saga-letter-li.active {
  252. color: #3A8DDE;
  253. background: #D1E3F4;
  254. }
  255. .saga-letter-li:hover {
  256. color: #3A8DDE;
  257. background: #D1E3F4;
  258. }
  259. }
  260. }
  261. /deep/ .el-dropdown-link {
  262. cursor: pointer;
  263. color: #1F2429;
  264. }
  265. </style>