|
@@ -2,10 +2,10 @@
|
|
|
* @Author: zhangyu
|
|
|
* @Date: 2020-05-08 16:06:03
|
|
|
* @Info:
|
|
|
- * @LastEditTime: 2020-05-09 19:04:06
|
|
|
+ * @LastEditTime: 2020-05-11 17:37:25
|
|
|
-->
|
|
|
<template>
|
|
|
- <div class="saga-brand-box">
|
|
|
+ <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">
|
|
@@ -19,8 +19,18 @@
|
|
|
<div v-for="(list, letter) in brandList" :key="letter" class="saga-brand-group">
|
|
|
<h3 class="saga-brand-letter">{{letter}}</h3>
|
|
|
<ul class="saga-brand-list">
|
|
|
- <li class="saga-brand-item" v-for="item in list" :key="item.id" :title="item.zhName">
|
|
|
-
|
|
|
+ <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>
|
|
@@ -34,7 +44,9 @@ export default {
|
|
|
created() {
|
|
|
this.brandList = brandList
|
|
|
},
|
|
|
- mounted() {},
|
|
|
+ mounted() {
|
|
|
+ this.boxWidth = this.$refs.brandBox.clientWidth
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
sortMap: {
|
|
@@ -43,6 +55,7 @@ export default {
|
|
|
},
|
|
|
sort: "中文排序",
|
|
|
brandList: {},
|
|
|
+ boxWidth: 0,
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -81,12 +94,72 @@ export default {
|
|
|
.saga-brand-item {
|
|
|
width:224px;
|
|
|
height:102px;
|
|
|
- margin-right: 16px;
|
|
|
+ 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 {
|
|
|
+ transform: translate(0,-5px);
|
|
|
+ box-shadow:0px 10px 20px -3px rgba(228,229,231,0.7);
|
|
|
+ }
|
|
|
+ .item1200 {
|
|
|
+ width:224px;
|
|
|
+ }
|
|
|
+ .item980 {
|
|
|
+ width:228px;
|
|
|
+ }
|
|
|
+ .item1200:nth-child(5n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .item980:nth-child(4n) {
|
|
|
+ margin-right: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|