123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268 |
- <!--
- * @Author: zhangyu
- * @Date: 2020-05-08 16:06:03
- * @Info:
- * @LastEditTime: 2020-05-12 19:31:47
- -->
- <template>
- <div class="saga-brand-box" ref="brandBox">
- <div class="saga-brand-header">
- <el-dropdown @command="handleCommand" style="line-height: 40px;">
- <span class="el-dropdown-link">
- {{sort}}<i class="el-icon-arrow-down el-icon--right"></i>
- </span>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item v-for="(val, key) in sortMap" :key="key" :command="key">{{val}}</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- <el-input
- placeholder="请输入品牌关键字(Enter检索)"
- style="float: right;width: 240px;"
- @keyup.enter.native="ChangeKeyWord(keyWord)"
- v-model="keyWord">
- <i slot="prefix" class="el-input__icon el-icon-search" style="cursor:pointer;" @click="ChangeKeyWord(keyWord)"></i>
- </el-input>
- </div>
- <div v-for="(list, letter) in brandList" :key="letter" v-show="list.length" class="saga-brand-group">
- <h3 class="saga-brand-letter">{{letter}}</h3>
- <ul class="saga-brand-list">
- <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">
- <div class="saga-brand-name">
- <p class="saga-brand-zhName">{{item.zhName}}</p>
- <p class="saga-brand-enName" :title="item.enName">{{item.enName}}</p>
- </div>
- <div class="saga-brand-logo">
- <el-image style="width: 52px; height: 52px" :src="item.logoUrl" fit="fill">
- <div slot="error" class="image-slot">
- <i class="el-icon-picture-outline"></i>
- </div>
- </el-image>
- </div>
- </li>
- </ul>
- </div>
- <ul class="saga-letter-ul" :style="`transform:translate(${boxWidth+4}px,0)`" @click.stop="handleClickLetter">
- <li
- v-for="(list, letter, index) in brandList"
- v-show="list.length"
- :key="`nav-${letter}`"
- :data-index="index"
- class="saga-letter-li"
- :class="{ 'active': index == stepActive}"
- :title="letter">
- {{letter}}
- </li>
- </ul>
- </div>
- </template>
- <script>
- import brandList from "@/data/brandList"
- export default {
- components: {},
- created() {
- this.brandList = brandList
- },
- mounted() {
- this.boxWidth = this.$refs.brandBox.clientWidth
- let listener = document.querySelector('.page-content-scroll')
- listener.addEventListener('scroll', this.onScroll)
- },
- data() {
- return {
- sortMap: {
- zh: "中文排序",
- en: "英文排序",
- },
- sort: "中文排序",
- brandList: {},
- boxWidth: 0,
- stepActive: 0, //锚点
- keyWord: "", //检索关键字
- }
- },
- methods: {
- handleCommand(command) {// 切换排序方式
- this.sort = this.sortMap[command]
- },
- ChangeKeyWord(keyWord) {// 品牌检索
- debugger
- },
- handleClickLetter(e) {
- let index = e.target.dataset.index
- if (index) {
- this.stepActive = index
- let jump = document.querySelectorAll('.saga-brand-group'),
- total = jump[index].offsetTop - 127,// 获取需要滚动的距离
- listener = document.querySelector('.page-content-scroll'),
- distance = listener.scrollTop,
- step = total / 50;
- if (total > distance) {
- smoothDown()
- } else {
- let newTotal = distance - total + 100
- step = newTotal / 50
- smoothUp()
- }
- function smoothDown() {
- if (distance < total) {
- distance += step
- listener.scrollTop = distance
- setTimeout(smoothDown, 10)
- } else {
- listener.scrollTop = total
- }
- }
- function smoothUp() {
- if (distance > total) {
- distance -= step
- listener.scrollTop = distance
- setTimeout(smoothUp, 10)
- } else {
- listener.scrollTop = total
- }
- }
- }
- },
- onScroll() {
- let scrolled = document.querySelector('.page-content-scroll').scrollTop
- let jump = document.querySelectorAll('.saga-brand-group')
- for (let i = 0; i < jump.length; i++) {
- if ((jump[i].offsetTop - 127) >= scrolled) {
- this.stepActive = i
- break
- }
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .saga-brand-box {
- width: 100%;
- height: 100%;
- padding: 16px;
- box-sizing: border-box;
- background: rgba(255,255,255,1);
- box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
- .saga-brand-header {
- height: 40px;
- margin-bottom: 16px;
- border-bottom: 1px solid #EFF0F1;
- }
- .saga-brand-group {
- .saga-brand-letter {
- margin-bottom: 16px;
- padding-left: 13px;
- height: 34px;
- line-height: 45px;
- font-size: 20px;
- border-bottom: 1px solid #EFF0F1;
- }
- .saga-brand-list {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- .saga-brand-item {
- width:224px;
- height:102px;
- padding: 16px 12px;
- margin-right: 12px;
- margin-bottom: 16px;
- cursor: pointer;
- box-sizing: border-box;
- border-radius:4px;
- border:1px solid #E4E5E7;
- transition: all 0.1s linear 0.01s;
- .saga-brand-name {
- display: inline-block;
- width: 133px;
- height: 100%;
- margin-right: 5px;
- font-size: 14px;
- line-height: 22px;
- .saga-brand-zhName {
- height: 44px;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
- }
- .saga-brand-enName {
- color: #8D9399;
- margin-top: 4px;
- height: 22px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
- .saga-brand-logo {
- width: 52px;
- height: 52px;
- display: inline-block;
- vertical-align: top;
- /deep/ .image-slot {
- font-size: 30px;
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 100%;
- background: #f5f7fa;
- color: #909399;
- }
- }
- }
- .saga-brand-item.brand-new {
- border:1px solid rgba(58,141,222,0.6);
- }
- .saga-brand-item:hover {
- box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
- transform: translate(0,-5px);
- }
- .item1200 {
- width:224px;
- }
- .item980 {
- width:228px;
- }
- .item1200:nth-child(5n) {
- margin-right: 0;
- }
- .item980:nth-child(4n) {
- margin-right: 0;
- }
- }
- }
- .saga-letter-ul {
- position: fixed;
- top: 196px;
- .saga-letter-li {
- width:20px;
- height:20px;
- margin-bottom: 2px;
- text-align: center;
- line-height: 20px;
- font-size: 12px;
- cursor: pointer;
- color: #8D9399;
- background: #EEEEEE;
- }
- .saga-letter-li.active {
- color: #3A8DDE;
- background: #D1E3F4;
- }
- .saga-letter-li:hover {
- color: #3A8DDE;
- background: #D1E3F4;
- }
- }
- }
- /deep/ .el-dropdown-link {
- cursor: pointer;
- color: #1F2429;
- }
- </style>
|