|
@@ -2,7 +2,7 @@
|
|
* @Author: zhangyu
|
|
* @Author: zhangyu
|
|
* @Date: 2020-05-08 16:06:03
|
|
* @Date: 2020-05-08 16:06:03
|
|
* @Info:
|
|
* @Info:
|
|
- * @LastEditTime: 2020-05-09 16:29:41
|
|
|
|
|
|
+ * @LastEditTime: 2020-05-09 19:04:06
|
|
-->
|
|
-->
|
|
<template>
|
|
<template>
|
|
<div class="saga-brand-box">
|
|
<div class="saga-brand-box">
|
|
@@ -18,6 +18,11 @@
|
|
</div>
|
|
</div>
|
|
<div v-for="(list, letter) in brandList" :key="letter" class="saga-brand-group">
|
|
<div v-for="(list, letter) in brandList" :key="letter" class="saga-brand-group">
|
|
<h3 class="saga-brand-letter">{{letter}}</h3>
|
|
<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>
|
|
|
|
+ </ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
@@ -52,16 +57,39 @@ export default {
|
|
width: 100%;
|
|
width: 100%;
|
|
margin-top: 90px;
|
|
margin-top: 90px;
|
|
padding: 16px;
|
|
padding: 16px;
|
|
|
|
+ box-sizing: border-box;
|
|
background: rgba(255,255,255,1);
|
|
background: rgba(255,255,255,1);
|
|
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
|
|
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
|
|
.saga-brand-header {
|
|
.saga-brand-header {
|
|
height: 40px;
|
|
height: 40px;
|
|
- border-bottom: 1px solid #EFF0F1;
|
|
|
|
- }
|
|
|
|
- .saga-brand-letter {
|
|
|
|
- font-size: 20px;
|
|
|
|
|
|
+ margin-bottom: 16px;
|
|
border-bottom: 1px solid #EFF0F1;
|
|
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;
|
|
|
|
+ margin-right: 16px;
|
|
|
|
+ margin-bottom: 16px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ border-radius:4px;
|
|
|
|
+ border:1px solid #E4E5E7;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
/deep/ .el-dropdown-link {
|
|
/deep/ .el-dropdown-link {
|
|
cursor: pointer;
|
|
cursor: pointer;
|