Sfoglia il codice sorgente

'添加排序和mock数据'

zhangyu 4 anni fa
parent
commit
33f97afc3e

+ 49 - 5
src/components/brand/sagaBrand.vue

@@ -2,25 +2,69 @@
  * @Author: zhangyu
  * @Date: 2020-05-08 16:06:03
  * @Info: 
- * @LastEditTime: 2020-05-08 16:23:35
+ * @LastEditTime: 2020-05-09 16:29:41
  -->
 <template>
-  <div>
+  <div class="saga-brand-box">
+    <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>
+    </div>
+    <div v-for="(list, letter) in brandList" :key="letter" class="saga-brand-group">
+      <h3 class="saga-brand-letter">{{letter}}</h3>
+    </div>
   </div>
 </template>
 
 <script>
+import brandList from "@/data/brandList"
 export default {
   components: {},
-  created() {},
+  created() {
+    this.brandList = brandList
+  },
   mounted() {},
   data() {
     return {
+      sortMap: {
+        zh: "中文排序",
+        en: "英文排序",
+      },
+      sort: "中文排序",
+      brandList: {},
     }
   },
-  methods: {}
+  methods: {
+    handleCommand(command) {
+      this.sort = this.sortMap[command]
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
-
+  .saga-brand-box {
+    width: 100%;
+    margin-top: 90px;
+    padding: 16px;
+    background: rgba(255,255,255,1);
+    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
+    .saga-brand-header {
+      height: 40px;
+       border-bottom: 1px solid #EFF0F1;
+    }
+    .saga-brand-letter {
+      font-size: 20px;
+      border-bottom: 1px solid #EFF0F1;
+    }
+  }
+  /deep/ .el-dropdown-link {
+    cursor: pointer;
+    color: #1F2429;
+  }
 </style>

File diff suppressed because it is too large
+ 1360 - 0
src/data/brandList.js


+ 20 - 0
src/framework/layout/Main.vue

@@ -71,6 +71,26 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+  #page-main {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: #f7f9fa;
+    .page-container {
+      padding: 0;
+      margin-top: 0;
+      height: 100%;
+      min-height: auto;
+      box-sizing: border-box;
+      .page-content-wrapper {
+        width: 1200px;
+        padding: 0;
+        margin: 0 auto;
+        box-sizing: border-box;
+        height: 100%;
+      }
+    }
+  }
   /deep/ .el-scrollbar__wrap {
     overflow-x: hidden;
   }

+ 1 - 0
src/framework/layout/PageHeader.vue

@@ -71,6 +71,7 @@ export default {
 			width: 1200px;
 			height: 100%;
 			margin: auto;
+			overflow: hidden;
 			.page-header-logo {
 				flex-grow: 0;
         flex-shrink: 0;

+ 0 - 34
src/framework/style/layout.scss

@@ -1,34 +0,0 @@
-html,
-body {
-    padding: 0 !important;
-    margin: 0 !important;
-    font-size: 14px;
-    color: #333;
-    width: 100%;
-    height: 100%;
-}
-
-#app {
-    width: 100%;
-    height: 100%;
-}
-#page-main {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    background: #F7F9FA;
-    .page-container {
-        padding: 0;
-        margin-top: 0;
-        height: 100%;
-        min-height: auto;
-        box-sizing: border-box;
-        .page-content-wrapper {
-            width: 1200px;
-            padding: 0;
-            margin: 0 auto;
-            box-sizing: border-box;
-            height: 100%;
-        }
-    }
-}

+ 65 - 0
src/framework/style/reset.scss

@@ -0,0 +1,65 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, menu, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+main, menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+
+html,
+body {
+    padding: 0 !important;
+    margin: 0 !important;
+    font-size: 14px;
+    color: #333;
+    width: 100%;
+    height: 100%;
+    font-family: Microsoft YaHei,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,SimSun,sans-serif;
+    font-weight: 400;
+}
+
+#app {
+    width: 100%;
+    height: 100%;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, main, menu, nav, section {
+	display: block;
+}
+/* HTML5 hidden-attribute fix for newer browsers */
+*[hidden] {
+    display: none;
+}
+body {
+	line-height: 1;
+}
+menu, ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

+ 1 - 1
src/main.js

@@ -11,7 +11,7 @@ import 'element-ui/lib/theme-chalk/index.css'
 Vue.use(ElementUI, { size: "small", zIndex: 1000 })
 
 Vue.component(CollapseTransition.name, CollapseTransition)
-import './framework/style/layout.scss'
+import './framework/style/reset.scss'
 
 import '@/assets/style/style.scss'
 import '@/assets/style/iconfont/iconfont.css'