From f99449cef0d7d42ab6022a9af1a164fad6425a35 Mon Sep 17 00:00:00 2001
From: JsonLeex <jsonleex@163.com>
Date: Wed, 27 Dec 2017 10:23:32 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/group/components/groupListItem.vue |   5 +-
 src/page/group/group.vue                    | 110 ++++++++++----------
 src/page/profile/profile.vue                |   4 +-
 3 files changed, 60 insertions(+), 59 deletions(-)

diff --git a/src/page/group/components/groupListItem.vue b/src/page/group/components/groupListItem.vue
index a02e77ae..7d02cb1d 100644
--- a/src/page/group/components/groupListItem.vue
+++ b/src/page/group/components/groupListItem.vue
@@ -5,7 +5,7 @@
     </div>
     <div :class="`${prefixCls}-info`">
       <div :class="`${prefixCls}-name`">
-        <h3>{{ group.name }}</h3>
+        <h3 class="ellipsis">{{ group.name }}</h3>
         <i v-if='group.mode ==="paid"' :class="`${prefixCls}-paid-icon`">付费</i>
       </div>
       <p>
@@ -136,12 +136,14 @@ export default {
 
   &-name {
     width: 100%;
+    max-width: 420px;
     display: flex;
     align-items: center;
     margin-bottom: 20px;
     font-size: 32px;
     color: #333;
     h3 {
+      max-width: calc(~'100% - ' 100px);
       margin: 0;
       padding: 0;
     }
@@ -197,6 +199,7 @@ export default {
     flex: none;
     width: 120px;
     height: 120px;
+    overflow: hidden;
     img {
       width: 100%;
       object-fit: cover;
diff --git a/src/page/group/group.vue b/src/page/group/group.vue
index 8be4498a..9dd1a4ed 100644
--- a/src/page/group/group.vue
+++ b/src/page/group/group.vue
@@ -32,7 +32,7 @@
         <div class="group-list-label">
           <span>热门推荐</span>
           <div class="group-list-more" @click='getRec'>
-            <v-icon :class='{"btn-loading": loading}' type='base-refresh'></v-icon>
+            <v-icon type='base-refresh' :style='{ transform: `rotate(${clickCount}turn)` }'></v-icon>
             <span>换一批</span>
           </div>
         </div>
@@ -42,7 +42,6 @@
     </div>
   </div>
 </template>
-
 <script>
 import HeadTop from '../../components/HeadTop'
 import groupListItem from './components/groupListItem'
@@ -52,30 +51,30 @@ export default {
     HeadTop,
     groupListItem
   },
-  data () {
+  data() {
     return {
       joined: [],
       recommend: [],
       count: 0, // 圈子总数
-      loading: false
+      clickCount: 0
     }
   },
   computed: {
-    showRecommend () {
+    showRecommend() {
       return this.recommend.length > 0
     }
   },
   methods: {
-    cancel () {
+    cancel() {
       this.to('/discover')
     },
-    to (path) {
+    to(path) {
       path = typeof path === 'string' ? { path } : path
       if (path) {
         this.$router.push(path)
       }
     },
-    createdGroup () {
+    createdGroup() {
       this.$router.push('/group/add')
       // this.$Modal.info({
       //     content: '只有认证通过的用户才可以创建圈子, 是否去认证?',
@@ -88,7 +87,7 @@ export default {
     },
 
     // 获取首页圈子
-    getGroup () {
+    getGroup() {
       this.$http.get('/plus-group/user-groups').then(({ data = [] }) => {
         if (data) {
           this.joined = [...data]
@@ -108,17 +107,16 @@ export default {
       })
     },
     // 获取推荐圈子
-    getRec () {
-      this.loading = true
+    getRec() {
       this.$http.get('/plus-group/recommend/groups?type=random').then(({ data = [] }) => {
         if (data) {
           this.recommend = [...data]
-          this.loading = false
+          this.clickCount += 1
         }
       })
     }
   },
-  created () {
+  created() {
     this.getGroup()
     this.$store.dispatch('GET_GROUP_TYPES')
   }
@@ -128,56 +126,56 @@ export default {
 @group-list-prefixCls: group-list;
 
 .entry_group.group-count {
-    margin: 10px 0;
-    font-size: 24px;
-    .num {
-        font-size: 40px;
-        color: #f4504d;
-    }
+  margin: 10px 0;
+  font-size: 24px;
+  .num {
+    font-size: 40px;
+    color: #f4504d;
+  }
 
-    .entry_title {
-        color: #999;
-    }
+  .entry_title {
+    color: #999;
+  }
 
-    .entry_append.v-icon {
-        color: #999;
-        margin-right: 0;
-        width: 24px;
-        height: 24px;
-    }
+  .entry_append.v-icon {
+    color: #999;
+    margin-right: 0;
+    width: 24px;
+    height: 24px;
+  }
 }
 
 .@{group-list-prefixCls} {
-    &-group {
-        background-color: #fff;
-        font-size: 26px;
-        color: #999;
-        &+& {
-            margin-top: 10px;
-        }
-    }
-    &-label {
-        padding: 0 20px;
-        border-bottom: 1px solid #ededed;
-        /*no*/
-        height: 70px;
-        line-height: 68px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+  &-group {
+    background-color: #fff;
+    font-size: 26px;
+    color: #999;
+    &+& {
+      margin-top: 10px;
     }
+  }
+  &-label {
+    padding: 0 20px;
+    border-bottom: 1px solid #ededed;
+    /*no*/
+    height: 70px;
+    line-height: 68px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
 
-    &-more {
-        display: flex;
-        align-items: center;
-        span {
-            margin: 0 5px;
-        }
-        .v-icon {
-            width: 24px;
-            height: 24px;
-            vertical-align: baseline;
-        }
+  &-more {
+    display: flex;
+    align-items: center;
+    span {
+      margin: 0 5px;
+    }
+    .v-icon {
+      width: 24px;
+      height: 24px;
+      transition: .5s ease;
     }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/page/profile/profile.vue b/src/page/profile/profile.vue
index 1277e799..c022644e 100644
--- a/src/page/profile/profile.vue
+++ b/src/page/profile/profile.vue
@@ -20,7 +20,7 @@
 import HeadTop from '../../components/HeadTop'
 import FootGuide from '../../components/FootGuide'
 
-const prefix = 'mine'
+const prefix = 'profile'
 export default {
   name: 'profileIndex',
   components: {
@@ -39,7 +39,7 @@ export default {
           tips: ''
         }, {
           title: '我的圈子',
-          icon: 'news',
+          icon: 'group',
           path: '/profile/group',
           new_tips: false,
           tips: ''