更多达人列表页样式优化

zhiyangdu
1 parent de7e3549
Showing 2 changed files with 34 additions and 26 deletions
src/components/dresserList/dresserList.less
src/components/dresserList/dresserList.vue
@@ -19,6 +19,7 @@
             font-weight:500;
             color:rgba(51,51,51,1);
             line-height:40px;
+            display: -webkit-box;
             -webkit-line-clamp: 1;
             /*! autoprefixer: off */
             -webkit-box-orient: vertical;
@@ -27,12 +28,19 @@
             overflow: hidden;
         }
         .desc{
-            height:33px;
+            max-height:63px;
             font-size:24px;
             font-weight:400;
             color:rgba(102,102,102,1);
             line-height:33px;
             margin-top: 10px;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            /*! autoprefixer: off */
+            -webkit-box-orient: vertical;
+            /*! autoprefixer: on */
+            text-overflow: ellipsis;
+            overflow: hidden;
         }
     }
     .arrow_right{
 <template>
     <div>
-        <div class="item_box" v-for="(item,index) in dresserList" @click="toDetail(item)">
+        <div class="item_box" v-for="(item,index) in dresserList" :key="index" @click="toDetail(item)">
             <img class="head_portrait"  v-lazy="item.user_img || item.logo" />
             <div class="user_info">
                 <div class="name">
@@ -24,35 +24,35 @@
 </template>
 <script>
-    export default {
-        name: 'dresserList',
-        data() {
-            return {
+export default {
+  name: 'dresserList',
+  data () {
+    return {
-            }
-        },
-        props: ["dresserList"],
-        methods: {
+    }
+  },
+  props: ["dresserList"],
+  methods: {
-            /**
-             * 点击事件
-             * @param {object} item [数据参数]
-             */
-            toDetail(item) {
-                this.$emit("toDetail", item);
-            },
-            /**
-             * 关注达人
-             * @param {object} item [数据对象]
-             */
-            fansShop(item) {
-                this.$emit("fansShop", item);
-            },
-        }
+    /**
+     * 点击事件
+     * @param {object} item [数据参数]
+     */
+    toDetail (item) {
+      this.$emit("toDetail", item);
+    },
+    /**
+     * 关注达人
+     * @param {object} item [数据对象]
+     */
+    fansShop (item) {
+      this.$emit("fansShop", item);
+    },
   }
+}
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style rel="stylesheet/less" lang="less" scoped>
-    @import "dresserList";
+@import 'dresserList';
 </style>