app关注/收藏效果UI优化

app.html

@@ -6,7 +6,7 @@
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/element-ui/1.3.7/theme-default/index.css" />
   <!--<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_0d1jjt5tukcblnmi.css"/>-->
-  <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_452262_218u5ghbpzt.css">
+  <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_452262_7ji4kygow4.css">
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css" />
   <!--<script src="https://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>-->
   {{ HEAD }}

components/mobile/brand/ComponentDetail.vue

@@ -24,7 +24,10 @@
         <img src="/images/mobile/@2x/brand/nostate-img.png"/>
         暂无描述
       </div>
-      <i class="iconfont icon-shoucang" :style="isCollect?'color:#ff7800':'color: #ddd'" @click="collectComponent"></i>
+      <span class="focus" @click="collectComponent">
+        <i class="iconfont icon-shoucang1" :class="isCollect ? 'icon-shoucang1' : 'icon-shoucang2'"></i>
+        <span v-text="isCollect ? '已收藏' : '收藏'" :class="isCollect ? '' : 'right01'">已收藏</span>
+      </span>
     </div>
     <div class="product-switch-item">
       <span :class="activeType=='store'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='store'">商家</span>
@@ -405,18 +408,31 @@
           color: #999;
         }
       }
-      >i {
-        position: absolute;
-        font-size: .4rem;
-        background: #fff;
-        width: .6rem;
-        height: .6rem;
-        line-height: .6rem;
-        border-radius: 100%;
-        box-shadow: 0 0 .05rem #aaa;
-        right: .28rem;
-        top: .55rem;
+      span.focus{
+        margin: 0 auto;
         text-align: center;
+        i {
+          position: absolute;
+          font-size: .4rem;
+          width: .6rem;
+          height: .6rem;
+          line-height: .6rem;
+          border-radius: 100%;
+          right: .28rem;
+          top: .45rem;
+          color: #fff;
+          text-align: center;
+        }
+        span{
+          position: absolute;
+          right: .19rem;
+          top: .95rem;
+          font-size: .28rem;
+          color: #fff;
+          &.right01 {
+            right: .3rem;
+          }
+        }
       }
     }
     .product-switch-item {

pages/mobile/center/user/collect/component/_key.vue

@@ -30,7 +30,10 @@
             </div>
             <div class="vir"></div>
             <div class="fr">
-              <i class="iconfont icon-shoucang" :style="comp.isFocus?'color:#ff7800':'color: #ddd'" @click="cancelFocus(comp, $event)"></i>
+              <span class="focus" @click="cancelFocus(comp, $event)">
+                <i class="iconfont icon-shoucang1" :class="comp.isFocus ? 'icon-shoucang1' : 'icon-shoucang2'"></i>
+                {{comp.isFocus ? '已收藏' : '收藏'}}
+              </span>
               <a class="sa-pub" @click="compInquiry(comp, $event)">立即询价</a>
             </div>
           </li>
@@ -304,13 +307,17 @@
           margin-top: .3rem;
           i {
             display: block;
-            color: #ff7800;
+            color: #008bf7;
             font-size: .5rem;
             width: .6rem;
-            height: .6rem;
+            height: .5rem;
             line-height: .6rem;
             text-align: center;
-            margin: .29rem auto .1rem;
+            margin: .15rem auto .1rem
+          }
+          span.focus{
+            font-size: .28rem;
+            color: #008bf7;
           }
           .sa-pub {
             display: block;
@@ -322,6 +329,7 @@
             color: #fff;
             background: #008bf7;
             margin: 0 auto;
+            margin-top: .1rem;
             border-radius: .05rem;
           }
         }

pages/mobile/center/user/collect/component/index.vue

@@ -26,7 +26,10 @@
           </div>
           <div class="vir"></div>
           <div class="fr">
-            <i class="iconfont icon-shoucang" @click="cancelFocus(comp, $event)"></i>
+            <span @click="cancelFocus(comp, $event)">
+              <i class="iconfont icon-shoucang1"></i>
+              <span class="focus">已收藏</span>
+            </span>
             <a class="sa-pub" @click="compInquiry(comp, $event)">立即询价</a>
           </div>
         </li>
@@ -264,13 +267,17 @@
           margin-top: .3rem;
           i {
             display: block;
-            color: #ff7800;
+            color: #008bf7;
             font-size: .5rem;
             width: .6rem;
             height: .6rem;
             line-height: .6rem;
             text-align: center;
-            margin: .29rem auto .1rem;
+            margin: .15rem auto .1rem;
+          }
+          span.focus {
+            font-size: .28rem;
+            color: #008bf7;
           }
           .sa-pub {
             display: block;
@@ -282,6 +289,7 @@
             color: #fff;
             background: #008bf7;
             margin: 0 auto;
+            margin-top: .1rem;
             border-radius: .05rem;
           }
         }

pages/mobile/center/user/collect/store.vue

@@ -21,7 +21,10 @@
             <p v-else>手机：<span>{{item.storeInfo.enterprise.enPhone || '-'}}</span></p>
             <p>传真：<span>{{item.storeInfo.enterprise.enFax || '-'}}</span></p>
             <!--<p>联系商家：<a @click="selectStoreInfo(item, $event)">点击查看</a></p>-->
-            <i class="iconfont icon-shoucang" @click="cancelFocus(item, $event)"></i>
+            <span @click="cancelFocus(item, $event)">
+               <i class="iconfont icon-shoucang1"></i>
+              <span class="focus">已关注</span>
+            </span>
           </div>
         </div>
       </div>
@@ -210,12 +213,19 @@
           top: -.06rem;
           right: -.18rem;
           font-size:.5rem;
-          color:#ff7800;
+          color:#008bf7;
           width: .6rem;
           height: .6rem;
           text-align: center;
           line-height: .6rem;
         }
+        span.focus{
+          position: absolute;
+          top: .55rem;
+          right: -.28rem;
+          font-size: .28rem;
+          color: #008bf7;
+        }
       }
     }
     &:active {

pages/mobile/center/vendor/attentionBus.vue

@@ -18,9 +18,8 @@
                 {{ item.nameCn | filterStr}}
               </div>
               <div class="attention-button" @click="attentionFn(item, index)">
-                <i class="iconfont icon-shoucang" :class="{'active': item.status}"></i>
-                <p v-if="item.status === 1">取消关注</p>
-                <p v-else>关注</p>
+                <i class="iconfont icon-shoucang1" :class="item.status ? 'icon-shoucang1' : 'icon-shoucang2'"></i>
+                <p v-text="item.status === 1 ? '已关注' : '关注'">已关注</p>
               </div>
             </div>
           </li>
@@ -226,13 +225,14 @@
               font-size: 0.24rem;
               color: #666;
               text-align: center;
-              .icon-shoucang {
-                &.active {
-                  color: #ff7800
-                }
-                color: #dadada;
+              i{
+                color: #008bf7;
                 font-size: 0.5rem;
               }
+              p{
+                font-size: .26rem;
+                color: #008bf7;
+              }
             }
           }
         }

pages/mobile/shop/index.vue

@@ -37,7 +37,11 @@
               <p>传真：<span>{{item.enterprise.enFax}}</span></p>
               <!--<p>商家介绍： <nuxt-link :to="'/mobile/merchantDescription/'+item.uuid">点击查看</nuxt-link></p>-->
               <!--<p>联系商家：<a @click="selectStoreInfo(item, $event)">点击查看</a></p>-->
-              <i class="iconfont icon-shoucang" :style="item.isFocus=='true'?'color:#ff7800':'color:#bbb'" @click="focusStore(item, $event)"></i>
+              <!--<i class="iconfont icon-shoucang" :style="item.isFocus=='true'?'color:#ff7800':'color:#bbb'" @click="focusStore(item, $event)"></i>-->
+              <span class="focus" @click="focusStore(item, $event)">
+                 <i class="iconfont icon-shoucang1" :class="item.isFocus == 'true' ? 'icon-shoucang1' : 'icon-shoucang2'"></i>
+                <span v-text="item.isFocus == 'true' ? '已关注' : '关注'" :class="item.isFocus == 'true' ? '' : 'right01'">已关注</span>
+              </span>
             </div>
           </div>
         </div>
@@ -351,13 +355,27 @@
             white-space: nowrap;
             width: 3.2rem;
           }
+          span.focus{
+            font-size: .28rem;
+            color: #008bf7;
+            span{
+              position: absolute;
+              top: .55rem;
+              right: -.16rem;
+              font-size: .28rem;
+              color: #008bf7;
+              &.right01{
+                right: -0.05rem;
+              }
+            }
+          }
           i{
             display:block;
             position:absolute;
             top: -.06rem;
             right: -.06rem;
             font-size:.5rem;
-            color:#ff7800;
+            color:#008bf7;
             width: .6rem;
             height: .6rem;
             text-align: center;