jufubao-base 1.0.237-beta2 → 1.0.237

package/src/components/JfbBaseUserInfo/JfbBaseUserInfo.vue

@@ -1,104 +1,84 @@
 <template>
-  <view class="jfb-base-user-info" @click="handleEditxSelect" :class="{ editx : isEditx && active }">
+  <view
+    class="jfb-base-user-info"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
     <!--#ifdef H5-->
-    <view class="jfb-base-user-info__edit" :class="{ editx : isEditx && active }" v-if="isEditx && active">
+    <view
+      class="jfb-base-user-info__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
       <view class="jfb-base-user-info__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
     <view class="jfb-base-user-info__body">
       <view class="x-line"></view>
-      <view v-if="is_plus_site==='Y'">
-        <view :style="[boxPlusStyleComp]" class="jfb-base-user-info__body-plus-header" v-if="userInfo !== null">
-          <view :style="[boxPlusStyleCompTop]" :class="is_vip==='Y'?'is_vip_top':'is_normal_top'"
-            class="jfb-base-user-info__body-plus-header-top">
-            <view class="jfb-base-user-info__body-plus-header-top-left">
-              <template v-if="logined">
-                <image :style="{border: `1px solid ${imageColor}`, borderRadius:imageRadius}"
-                  v-if="userInfo['head_url']" :src="userInfo['head_url']"></image>
-                <view :style="{borderColor: imageColor, borderRadius:imageRadius}" class="no-image" v-else>
-                  <xd-font-icon :color="imageColor" icon="iconwode_mian" size="100"></xd-font-icon>
-                </view>
-              </template>
-              <view :style="{borderColor: imageColor, borderRadius:imageRadius}" v-else class="no-image">
-                <xd-font-icon :color="imageColor" icon="iconwode_mian" size="90"></xd-font-icon>
+      <view
+        class="jfb-base-user-info__body-header"
+        :style="[boxStyleComp]"
+        v-if="userInfo !== null"
+      >
+        <view
+          class="jfb-base-user-info__body-header-left"
+          :class="{center: textType === 'N',vertical: textType === 'Y'}"
+        >
+          <template v-if="logined">
+            <image v-if="userInfo['head_url']" :style="{border: `1px solid ${imageColor}`, borderRadius:imageRadius}" :src="userInfo['head_url']"></image>
+            <view class="no-image" :style="{borderColor: imageColor, borderRadius:imageRadius}" v-else>
+              <xd-font-icon :color="imageColor" icon="iconwode_mian" size="100"></xd-font-icon>
+            </view>
+          </template>
+          <view v-else class="no-image" :style="{borderColor: imageColor, borderRadius:imageRadius}">
+            <xd-font-icon :color="imageColor" icon="iconwode_mian" size="90"></xd-font-icon>
+          </view>
+          <view v-if="logined && textType ==='N'" :style="[nickNameStyle]">{{userInfo|getName}}</view>
+          <view class="vertical-user" v-if="logined && textType ==='Y'">
+            <view :style="[nickNameStyle]">{{userInfo|getName}}</view>
+            <view v-if="rightContent && rightContent.type !== 'hidden'"
+              class="logout" style="margin-top: 16rpx;"
+              :style="[logoutBtnStyle]"
+            >
+              <view v-if="rightContent && rightContent.type === 'logout'"
+                class="right_cont_i"
+                :style="[logoutStyleComp]"
+                @click="handleLogout()"
+              >
+                <xd-font-icon v-if="rightContent.icon" class="xd-font-icon" :icon="rightContent.icon" :size="28"></xd-font-icon>
+                {{rightContent.name || '退出登录'}}
               </view>
-              <view class="jfb-base-user-info__body-plus-header-top-left-info">
-                <view class="jfb-base-user-info__body-plus-header-top-left-info-name" v-if="logined">
-                  <view>{{userInfo|getName}} </view>
-                  <view v-if="is_vip==='Y'"><text>PLUS</text>会员</view>
-                  <view v-else>普通用户</view>
-                </view>
-                <view>{{userInfo.phone_number}}</view>
+              <view v-if="rightContent && rightContent.type === 'addr'"
+                class="right_cont_i"
+                :style="[logoutStyleComp]"
+                @click="handleAddress()"
+              >
+                <xd-font-icon v-if="rightContent.icon" class="xd-font-icon" :icon="rightContent.icon" :size="28"></xd-font-icon>
+                {{ rightContent.name || '地址' }}
               </view>
             </view>
-            <view class="jfb-base-user-info__body-plus-header-right">
-              <xd-font-icon size="40" icon="iconerweima"></xd-font-icon>
+            <view @click="handleToLink()" v-if="isSetting === 'Y'">
+              <xd-font-icon size="26" icon="iconshezhi_mian"></xd-font-icon>
             </view>
           </view>
-          <view :style="[boxPlusStyleCompBottom]" :class="is_vip==='Y'?'is_vip_bottom':'is_normal_bottom'"
-            class="jfb-base-user-info__body-plus-header-bottom">
-            <view v-if="is_vip==='Y'">点击查看更多会员权益</view>
-            <view v-else>开通 <span :style="{color:mainColor}">PLUS会员</span>享受更多内容</view>
-            <view v-if="is_vip==='Y'" @click="handleToView">立即查看</view>
-            <view v-else @click="handleToOpen">立即开通</view>
-          </view>
         </view>
-      </view>
-      <view v-else>
-        <view class="jfb-base-user-info__body-header" :style="[boxStyleComp]" v-if="userInfo !== null">
-          <view class="jfb-base-user-info__body-header-left"
-            :class="{center: textType === 'N',vertical: textType === 'Y'}">
-            <template v-if="logined">
-              <image v-if="userInfo['head_url']" :style="{border: `1px solid ${imageColor}`, borderRadius:imageRadius}"
-                :src="userInfo['head_url']"></image>
-              <view class="no-image" :style="{borderColor: imageColor, borderRadius:imageRadius}" v-else>
-                <xd-font-icon :color="imageColor" icon="iconwode_mian" size="100"></xd-font-icon>
-              </view>
-            </template>
-            <view v-else class="no-image" :style="{borderColor: imageColor, borderRadius:imageRadius}">
-              <xd-font-icon :color="imageColor" icon="iconwode_mian" size="90"></xd-font-icon>
-            </view>
-            <view v-if="logined && textType ==='N'" :style="[nickNameStyle]">{{userInfo|getName}}</view>
-            <view class="vertical-user" v-if="logined && textType ==='Y'">
-              <view :style="[nickNameStyle]">{{userInfo|getName}}</view>
-              <view v-if="rightContent && rightContent.type !== 'hidden'" class="logout" style="margin-top: 16rpx;"
-                :style="[logoutBtnStyle]">
-                <view v-if="rightContent && rightContent.type === 'logout'" class="right_cont_i"
-                  :style="[logoutStyleComp]" @click="handleLogout()">
-                  <xd-font-icon v-if="rightContent.icon" class="xd-font-icon" :icon="rightContent.icon"
-                    :size="28"></xd-font-icon>
-                  {{rightContent.name || '退出登录'}}
-                </view>
-                <view v-if="rightContent && rightContent.type === 'addr'" class="right_cont_i"
-                  :style="[logoutStyleComp]" @click="handleAddress()">
-                  <xd-font-icon v-if="rightContent.icon" class="xd-font-icon" :icon="rightContent.icon"
-                    :size="28"></xd-font-icon>
-                  {{ rightContent.name || '地址' }}
-                </view>
-              </view>
-              <view @click="handleToLink()" v-if="isSetting === 'Y'">
-                <xd-font-icon size="26" icon="iconshezhi_mian"></xd-font-icon>
-              </view>
-            </view>
+        <view v-if="logined && textType ==='N' && rightContent && rightContent.type !== 'hidden'" class="logout" :style="[logoutBtnStyle]">
+          <view v-if="rightContent && rightContent.type === 'logout'" class="right_cont_i"
+            :style="[logoutStyleComp]"
+             @click="handleLogout()"
+          >
+            <xd-font-icon v-if="rightContent.icon" class="xd-font-icon" :icon="rightContent.icon" :size="28"></xd-font-icon>
+            {{rightContent.name || '退出登录'}}
           </view>
-          <view v-if="logined && textType ==='N' && rightContent && rightContent.type !== 'hidden'" class="logout"
-            :style="[logoutBtnStyle]">
-            <view v-if="rightContent && rightContent.type === 'logout'" class="right_cont_i" :style="[logoutStyleComp]"
-              @click="handleLogout()">
-              <xd-font-icon v-if="rightContent.icon" class="xd-font-icon" :icon="rightContent.icon"
-                :size="28"></xd-font-icon>
-              {{rightContent.name || '退出登录'}}
-            </view>
-            <view v-if="rightContent && rightContent.type === 'addr'" class="right_cont_i" :style="[logoutStyleComp]"
-              @click="handleAddress()">
-              <xd-font-icon v-if="rightContent.icon" class="xd-font-icon" :icon="rightContent.icon"
-                :size="28"></xd-font-icon>
-              {{ rightContent.name || '地址' }}
-            </view>
+          <view v-if="rightContent && rightContent.type === 'addr'" class="right_cont_i"
+            :style="[logoutStyleComp]"
+            @click="handleAddress()"
+          >
+            <xd-font-icon v-if="rightContent.icon"class="xd-font-icon" :icon="rightContent.icon" :size="28"></xd-font-icon>
+            {{ rightContent.name || '地址' }}
           </view>
         </view>
       </view>
-
     </view>
   </view>
 </template>
@@ -111,7 +91,7 @@
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins"
   import { getContainerPropsValue } from "@/utils/xd.base";
-  import { mapState } from 'vuex';
+  import {mapState} from 'vuex';
   import store from "@/store";
   import getServiceUrl from "@/common/getServiceUrl";
   export default {
@@ -119,11 +99,11 @@
     components: {
       XdFontIcon
     },
-    mixins: [componentsMixins, extsMixins, JfbBaseUserInfoMixin],
+    mixins: [componentsMixins,extsMixins,JfbBaseUserInfoMixin],
     computed: {
       ...mapState(['jfbAuthorize']),
 
-      boxStyleComp() {
+      boxStyleComp(){
         let border = this.getBorderCompatibleOldStyle(this.contBorder, {
           color: this.is_border_c,
           width: this.is_border_w,
@@ -138,7 +118,7 @@
         })
         return {
           margin: this.getMarginAndPadding(this.margin, 20),
-          backgroundColor: this.backgroundColor,
+          backgroundColor : this.backgroundColor,
           backgroundImage: `url(${this.bgImage})`,
           padding: this.getMarginAndPadding(this.padding, 20),
           boxShadow: shadow,
@@ -148,64 +128,30 @@
         }
       },
 
-      boxPlusStyleComp() {
-        let border = this.getBorderCompatibleOldStyle(this.contBorder, {
-          color: this.is_border_c,
-          width: this.is_border_w,
-          type: this.is_border,
-          style: 'solid'
-        })
-        let shadow = this.getShadowCompatibleOldStyle(this.contShadow, {
-          color: this.is_shadow_bg,
-          width: this.is_shadow_w,
-          type: this.is_shadow,
-        })
-        return {
-          margin: this.getMarginAndPadding(this.margin, 20),
-          padding: this.getMarginAndPadding(this.padding, 0),
-          boxShadow: shadow,
-          border: border,
-        }
-      },
-
-      boxPlusStyleCompTop() {
-        return {
-          borderRadius: `${this.radius + 'rpx'} ${this.radius + 'rpx'} 0 0`,
-          background: this.is_vip === 'Y' ? this.plusTopBackgroundColor : this.normalTopBackgroundColor
-        }
-      },
-
-      boxPlusStyleCompBottom() {
-        return {
-          borderRadius: `0 0 ${this.radius + 'rpx'} ${this.radius + 'rpx'}`,
-          background: this.is_vip === 'Y' ? this.plusBottomBackgroundColor : this.normalBottomBackgroundColor
-        }
-      },
-
-      shadow() {
-        if (this.is_shadow === 'Y') return `0 0 ${this.is_shadow_w}rpx ${this.is_shadow_bg}`;
+      shadow(){
+        if(this.is_shadow === 'Y') return  `0 0 ${this.is_shadow_w}rpx ${this.is_shadow_bg}`;
         else return '0 0 0 rgba(0,0,0,0)';
       },
-      borderBox() {
+      borderBox(){
         if (this.is_border === 'Y') return `${this.is_border_w}rpx ${this.is_border_s} ${this.is_border_c}`;
         else return '0';
       },
 
-      nickNameStyle() {
+      nickNameStyle(){
         return {
           fontSize: this.nickStyle.fontSize || '32rpx',
-          color: `${this.nickStyle.color ||'#333'}`,
+          color: `${this.nickStyle.color || '#333'}`,
           fontWeight: `${this.nickStyle.fontWeight || 'normal'}`,
         }
       },
-      logoutStyleComp() {
+      logoutStyleComp(){
         return {
           fontSize: this.logoutStyle.fontSize || '20rpx',
           color: `${this.logoutStyle.color || '#333'}`,
           fontWeight: `${this.logoutStyle.fontWeight || 'normal'}`,
         }
       },
-      logoutBtnStyle() {
+      logoutBtnStyle(){
         let padding = `${this.checkValue(this.rightContentPadding.top, 20)}rpx`;
         padding = `${padding} ${this.checkValue(this.rightContentPadding.right, 20)}rpx`;
         padding = `${padding} ${this.checkValue(this.rightContentPadding.bottom, 20)}rpx`;
@@ -218,8 +164,8 @@
         }
       }
     },
-    filters: {
-      getName(val) {
+    filters:{
+      getName(val){
         return val.nickname || val['real_name'] || val['user_name'] || val['phone_number'];
       }
     },
@@ -227,9 +173,9 @@
       return {
         logined: false,
         userInfo: null,
-        isSetting: 'N',
+        isSetting:'N',
         // logoutName:'[退出登录]',
-        imageRadius: '50%',
+        imageRadius:'50%',
 
         //基础
         imageColor: '#333',
@@ -238,13 +184,13 @@
         radius: 0,
 
         //投影
-        contShadow: {},
+        contShadow:{},
         is_shadow: 'N',
         is_shadow_bg: 0,
         is_shadow_w: 0,
 
         //边框
-        contBorder: {},
+        contBorder:{},
         is_border: 'N',
         is_border_w: 0,
         is_border_c: '',
@@ -252,65 +198,47 @@
         //其他
         margin: {},
         padding: {},
-        nickStyle: {},
-        logoutStyle: {},
+        nickStyle:{},
+        logoutStyle:{},
         rightContent: null,
         addressUrl: '',
         bgImage: "",
         rightContentBgColor: "",
         // rightContentTextColor: "",
         rightContentPadding: "",
-        rightContentRadius: 0,
-        is_plus_site: '',
-        is_vip: 'N',
-        is_plus_preview: 'N', //预览vip样式
-        openVipPath: '',
-        viewPath: '',
-        plusTopBackgroundColor: '',
-        plusBottomBackgroundColor: '',
-        normalTopBackgroundColor: '',
-        normalBottomBackgroundColor: '',
+        rightContentRadius: 0
       }
     },
     watch: {
-      container(value, oldValue) {
-        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      container(value,oldValue) {
+        if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
         if (this.$configProject['isPreview']) this.init(value)
-      },
-      is_plus_preview() {
-        if (this.$configProject['isPreview']) {
-          this.is_vip = this.is_plus_preview
-        }
       }
     },
     created() {
-      console.log(this.getTokenForKey('user_level'),'user_leveluser_level');
-      console.log(this.projectAttr.headers['X-Site-Group'],'this.$configProject');
-      this.is_plus_site = this.projectAttr.headers['X-Site-Group']==="vip";
-      this.is_vip = this.getTokenForKey('user_level')&&this.getTokenForKey('user_level')==='VIP'?'Y':'N'
       this.init(this.container);
     },
     methods: {
-      handleToLink() {
+      handleToLink(){
         this.$xdUniHelper.navigateTo({
           url: '/pages/settings/settings'
         })
       },
 
-      async handleLogout() {
+      async handleLogout(){
         // #ifdef H5
         if (this.$configProject.isPreview) return;
         // #endif
 
         if (this.jfbAuthorize !== null) {
           this.$xdShowLoading({});
-          store.dispatch('logout').then(res => {
+          store.dispatch('logout').then(res=>{
             let url = this.$configProject.entry || `/${this.projectAttr.deploy_dir}/`;
             this.$xdHideLoading();
             this.jfbAuthorize.removeAllCardToken();
             this.jfbAuthorize.removeAllToken()
             this.jfbAuthorize.jumpToUserLogin(this, false, url);
-          }).catch(err => {
+          }).catch(err=>{
             console.error(err);
           })
         }
@@ -319,7 +247,7 @@
       async onJfbLoad(options) {
 
         //预览模式
-        if (this.$configProject.isPreview) {
+        if(this.$configProject.isPreview) {
           jfbRootExec('getBaseUserInfo', {
             vm: this,
             data: {}
@@ -334,16 +262,16 @@
         }
 
         this.logined = await this.jfbAuthorize.checkUserLogin(true, this, false);
-        if (!this.logined) return;
+        if(!this.logined) return;
 
         jfbRootExec('getBaseUserInfo', {
           vm: this,
           data: {}
-        }).then(res => {
+        }).then(res=>{
           this.userInfo = res || {};
-          console.log('getBaseUserInfo', res)
-        }).catch(error => {
-          console.log('getBaseUserInfo', error)
+          console.log('getBaseUserInfo',res)
+        }).catch(error=>{
+          console.log('getBaseUserInfo',error)
         })
       },
       /**
@@ -355,7 +283,7 @@
         this.padding = getContainerPropsValue(container, 'content.padding', {});
         this.backgroundColor = getContainerPropsValue(container, 'content.backgroundColor', '#f8f8f8');
         this.textType = getContainerPropsValue(container, 'content.text_type', 'N');
-        this.radius = getContainerPropsValue(container, 'content.radius', '20');
+        this.radius = getContainerPropsValue(container, 'content.radius', '10');
         this.isSetting = getContainerPropsValue(container, 'content.isSetting', 'N');
         // this.logoutName = getContainerPropsValue(container, 'content.logoutName', '[退出登录]');
         this.imageRadius = getContainerPropsValue(container, 'content.imageRadius', '50%');
@@ -382,36 +310,18 @@
           icon: "",
           iconName: "",
         });
-        this.addressUrl = getContainerPropsValue(container, 'content.addressUrl', { value: "" }).value;
+        this.addressUrl = getContainerPropsValue(container, 'content.addressUrl', {value: ""}).value;
         this.bgImage = getServiceUrl(getContainerPropsValue(container, 'content.bgImage', '').url);
         this.rightContentBgColor = getContainerPropsValue(container, 'content.rightContentBgColor', 'transparent');
         // this.rightContentTextColor = getContainerPropsValue(container, 'content.rightContentTextColor', '');
         this.rightContentPadding = getContainerPropsValue(container, 'content.rightContentPadding', {});
         this.rightContentRadius = getContainerPropsValue(container, 'content.rightContentRadius', 0);
-        //plus
-        this.is_plus_site = getContainerPropsValue(container, 'content.is_plus_site', 'N');
-        this.is_plus_preview = getContainerPropsValue(container, 'content.is_plus_preview', 'N');
-        this.plusTopBackgroundColor = getContainerPropsValue(container, 'content.plusTopBackgroundColor', 'linear-gradient(270deg, rgba(250, 211, 140, 1) 0%, rgba(235, 185, 99, 1) 21.19%, rgba(232, 169, 66, 1) 100%)');
-        this.plusBottomBackgroundColor = getContainerPropsValue(container, 'content.plusBottomBackgroundColor', 'linear-gradient(90deg, #FFE4C2 0%, #FFF6E6 100%)');
-        this.normalTopBackgroundColor = getContainerPropsValue(container, 'content.normalTopBackgroundColor', '#fff');
-        this.normalBottomBackgroundColor = getContainerPropsValue(container, 'content.normalBottomBackgroundColor', 'linear-gradient(90deg, #FCF2DC 0%, #FAE7C4 100%)');
-        this.openVipPath = getContainerPropsValue(container, 'content.openVipPath', { value: "" }).value;
-        this.viewPath = getContainerPropsValue(container, 'content.viewPath', { value: "" }).value;
+
       },
-      handleAddress() {
+      handleAddress(){
         this.$xdUniHelper.navigateTo({
           url: this.addressUrl
         })
-      },
-      handleToOpen(){
-        this.$xdUniHelper.navigateTo({
-          url: this.openVipPath
-        })
-      },
-      handleToView(){
-        this.$xdUniHelper.navigateTo({
-          url: this.viewPath
-        })
       }
     }
   }
@@ -426,12 +336,10 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-
-    &>view:nth-child(2) {
+    & > view:nth-child(2) {
       margin-left: unit(15, rpx);
     }
-
-    &>view:nth-child(3) {
+    & > view:nth-child(3) {
       width: 26rpx;
       height: 26rpx;
       margin-left: unit(15, rpx);
@@ -442,7 +350,7 @@
   }
 
   .jfb-base-user-info {
-    &__body {
+    &__body{
       &-header {
         display: flex;
         align-items: center;
@@ -459,25 +367,22 @@
             width: 100%;
             flex-direction: column;
 
-            &>view:last-child {
+            & > view:last-child {
               width: 100%;
               text-align: center;
               flex-shrink: 0;
               padding-top: unit(20, rpx);
             }
 
-            &>image,
-            .no-image {
+            & > image, .no-image {
               margin-right: unit(0, rpx);
             }
           }
 
-          &>image,
-          .no-image {
+          & > image, .no-image {
             width: unit(140, rpx);
             height: unit(140, rpx);
-            margin-right: unit(30, rpx);
-            ;
+            margin-right: unit(30, rpx);;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -489,129 +394,33 @@
             border: unit(4, rpx) solid #e5e5e5;
           }
 
-          &>view {
+          & > view {
             color: #383838;
             font-size: unit(32, rpx);
           }
         }
 
-        &>view:nth-child(2) {
+        & > view:nth-child(2) {
           flex-shrink: 0;
         }
       }
-
-      &-plus-header {
-        .is_normal_top {
-          color: #333333;
-
-          .jfb-base-user-info__body-plus-header-top-left-info-name {
-            &>view:nth-child(2) {
-              color: #615850;
-              background: #FFE6C4;
-            }
-          }
-        }
-
-        .is_vip_top {
-          color: #fff;
-
-          .jfb-base-user-info__body-plus-header-top-left-info-name {
-            &>view:nth-child(2) {
-              color: #FFEFD7;
-              background: linear-gradient(180deg, #615243 0%, #2D2824 100%);
-            }
-          }
-        }
-
-        .is_normal_bottom {
-          color: #653D11;
-        }
-
-        .is_vip_bottom {
-          color: #915714;
-        }
-
-        &-top {
-          display: flex;
-          justify-content: space-between;
-          padding: 40rpx;
-
-          &-left {
-            display: flex;
-            align-items: center;
-
-            &-info {
-              display: flex;
-              flex-direction: column;
-              font-size: 24rpx;
-
-              &-name {
-                display: flex;
-                align-items: center;
-                margin-bottom: 16rpx;
-
-                &>view:first-child {
-                  margin-right: 8rpx;
-                  font-size: 28rpx;
-                }
-
-                &>view:nth-child(2) {
-                  border-radius: 40rpx;
-                  padding: 4rpx 16rpx;
-
-                  &>span {
-                    font-weight: 700;
-                  }
-                }
-              }
-            }
-
-            &>image,
-            .no-image {
-              width: 80rpx;
-              height: 80rpx;
-              border-radius: 50%;
-              margin-right: unit(30, rpx);
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              flex-shrink: 0;
-              overflow: hidden;
-            }
-
-            .no-image {
-              border: unit(2, rpx) solid #C8C0B5;
-            }
-          }
-        }
-
-        &-bottom {
-          font-size: 24rpx;
-          display: flex;
-          justify-content: space-between;
-          padding: 20rpx 40rpx;
-        }
-      }
     }
 
     .logout {
       font-size: unit(24, rpx);
-
-      .right_cont_i {
+      .right_cont_i{
         display: flex;
         align-items: center;
         font-size: 28rpx;
         color: inherit;
         font-weight: 400;
-
-        .xd-font-icon {
-          margin-right: 8rpx;
+        .xd-font-icon{
+          margin-right:8rpx;
         }
       }
-
-      &>view {
+      & > view {
         cursor: pointer;
       }
     }
   }
-</style>
+</style>