w-front-end / select_good · Commits

Commit 814d6edfe83e0858b427b5d677a71d6c4e54f17a

Authored by zhiyangdu
1 parent de7e3549

更多达人列表页样式优化

Inline Side-by-side
Showing 2 changed files with 34 additions and 26 deletions
src/components/dresserList/dresserList.less
  View file @814d6ed
... ... @@ -19,6 +19,7 @@
19 19 font-weight:500;
20 20 color:rgba(51,51,51,1);
21 21 line-height:40px;
  22 + display: -webkit-box;
22 23 -webkit-line-clamp: 1;
23 24 /*! autoprefixer: off */
24 25 -webkit-box-orient: vertical;
... ... @@ -27,12 +28,19 @@
27 28 overflow: hidden;
28 29 }
29 30 .desc{
30   - height:33px;
  31 + max-height:63px;
31 32 font-size:24px;
32 33 font-weight:400;
33 34 color:rgba(102,102,102,1);
34 35 line-height:33px;
35 36 margin-top: 10px;
  37 + display: -webkit-box;
  38 + -webkit-line-clamp: 2;
  39 + /*! autoprefixer: off */
  40 + -webkit-box-orient: vertical;
  41 + /*! autoprefixer: on */
  42 + text-overflow: ellipsis;
  43 + overflow: hidden;
36 44 }
37 45 }
38 46 .arrow_right{
... ...
src/components/dresserList/dresserList.vue
  View file @814d6ed
1 1 <template>
2 2 <div>
3   - <div class="item_box" v-for="(item,index) in dresserList" @click="toDetail(item)">
  3 + <div class="item_box" v-for="(item,index) in dresserList" :key="index" @click="toDetail(item)">
4 4 <img class="head_portrait" v-lazy="item.user_img || item.logo" />
5 5 <div class="user_info">
6 6 <div class="name">
... ... @@ -24,35 +24,35 @@
24 24 </template>
25 25  
26 26 <script>
27   - export default {
28   - name: 'dresserList',
29   - data() {
30   - return {
  27 +export default {
  28 + name: 'dresserList',
  29 + data () {
  30 + return {
31 31  
32   - }
33   - },
34   - props: ["dresserList"],
35   - methods: {
  32 + }
  33 + },
  34 + props: ["dresserList"],
  35 + methods: {
36 36  
37   - /**
38   - * 点击事件
39   - * @param {object} item [数据参数]
40   - */
41   - toDetail(item) {
42   - this.$emit("toDetail", item);
43   - },
44   - /**
45   - * 关注达人
46   - * @param {object} item [数据对象]
47   - */
48   - fansShop(item) {
49   - this.$emit("fansShop", item);
50   - },
51   - }
  37 + /**
  38 + * 点击事件
  39 + * @param {object} item [数据参数]
  40 + */
  41 + toDetail (item) {
  42 + this.$emit("toDetail", item);
  43 + },
  44 + /**
  45 + * 关注达人
  46 + * @param {object} item [数据对象]
  47 + */
  48 + fansShop (item) {
  49 + this.$emit("fansShop", item);
  50 + },
52 51 }
  52 +}
53 53 </script>
54 54  
55 55 <!-- Add "scoped" attribute to limit CSS to this component only -->
56 56 <style rel="stylesheet/less" lang="less" scoped>
57   - @import "dresserList";
  57 +@import 'dresserList';
58 58 </style>
... ...