jufubao-base 1.0.203 → 1.0.205-beta1

package/src/components/JfbBasePosterType/JfbBasePosterType.vue

@@ -15,16 +15,12 @@
     <!-- #endif -->
     <view class="jfb-base-poster-type__body" v-if="noData">
       <view class="x-line"></view>
-      <view
-        class="jfb-base-poster-cont"
-        :style="{
-          margin: margin,
-          padding:contentPaddingOut,
-          backgroundColor: bgColor,
-          borderRadius: bgRadius + 'rpx'
-        }"
-      >
-        <four-screen style="width: 100%;" :config="getConfig" :content="info"></four-screen>
+      <view class="jfb-base-poster-cont" :style="[bodyStyleComp]">
+        <four-screen
+          style="width: 100%;"
+          :config="getConfig"
+          :content="info"
+        ></four-screen>
       </view>
 
     </view>
@@ -56,7 +52,13 @@
     mixins: [componentsMixins,extsMixins,JfbBasePosterTypeMixin],
     data() {
       return {
+        //closeMask: true,
         params: {},
+        noData:false,
+        timer: null,
+        info: [],
+        isPreview: false,
+
 				//Swiper 配置
         posterPosition: null,
         current: 0,
@@ -64,76 +66,134 @@
 				isCarousel: true, //是否轮播图
         carouselTime: 5,//轮播图轮播周期
 				useNumber: null, //广告使用张数
-				padding: 0, //广告内容之间间距
-        jdRows: 1, //行
-        cells: 4, //列
-        shadow: false, //是否设置阴影
-        shadowColor:'rgba(0,0,0,.3)',
+        mode:'round',//索引样式
+        row: 1, //行
+        column: 4, //列
+        columnSpacing:0,
+
+        //icon样式设置
+        contShadow:{},
         radius: '20', //10/20/40 ， 小/中/大
-				timer: null,
-				info: [],
-        mS: {},
-        iconPadding:{},
-        contentPadding:{},
-				isPreview: false,
-				noData:false,
+        iconMargin:20,
+        titleStyle:{},
 
 				//颜色设置
-        textColor: '#333',
+        margin: {},
+        contentPadding:{},
         bgColor:'rgba(0,0,0,0)',
         bgRadius: 0,
       }
     },
 		computed: {
+      dotStyleData(){
+        return this.dotStyleDataConf[this.mode];
+      },
+      dotStyleDataConf(){
+        let alpha = 0.6;
+        let selectedColor = `rgba(${color(this.mainColor).alpha(alpha).array().join(',')})`;
+        let textColor = `rgba(${color(this.mainColor).alpha(0.2).array().join(',')})`;
+        return {
+          dot: {
+            backgroundColor: 'rgba(166,166,166,.5)',
+            border: '0px rgba(166,166,166,.5) solid',
+            color: '#fff',
+            selectedBackgroundColor: selectedColor,
+            selectedBorder: `0px this.mainColor solid`
+          },
+          default: {
+            width: 16,
+            backgroundColor: 'rgba(200,200,200,.45)',
+            border: '1px rgba(200,200,200,.45) solid',
+            color: '#fff',
+            selectedBackgroundColor: selectedColor,
+            selectedBorder: `1px this.mainColor solid`
+          },
+          round: {
+            backgroundColor: 'rgba(166,166,166,.5)',
+            border: '0px rgba(166,166,166,.5) solid',
+            color: '#fff',
+            selectedBackgroundColor: selectedColor,
+            selectedBorder: `0px this.mainColor solid`
+          },
+          nav: {
+            backgroundColor: selectedColor,
+            border: '1px rgba(0,0,0,.2) solid',
+            color: '#fff',
+            selectedBackgroundColor: selectedColor,
+            selectedBorder: '1px rgba(255, 255, 255 1) solid'
+          },
+          indexes: {
+            backgroundColor: textColor,
+            border: '0px rgba(0,0,0,.2) solid',
+            color: '#fff',
+            selectedBackgroundColor: selectedColor,
+            selectedBorder: '0px rgba(0,0,0,.8) solid',
+            selectedColor: '#fff',
+          }
+        }
+      },
       getConfig(){
-        let width = uni.getSystemInfoSync().safeArea.width -
-          (this.checkValue(this.mS.left, 0) + this.checkValue(this.mS.right, 0)) * this.$rpxNum;
-        width = width -
-          (this.checkValue(this.contentPadding.left, 0) + this.checkValue(this.contentPadding.right, 0)) * this.$rpxNum;
         return {
-          mode: 'normal',
-          dotStyleData: this.dotStyleData,
-          poster: this.poster,
-          showType: this.showType,
-          isCarousel: this.isCarousel,
-          carouselTime: this.carouselTime,
-          height: width / this.cells,
-          width: width / this.cells,
-          radius: this.radius,
-          padding: this.padding,
-          jdRows: this.jdRows,
-          cells: this.cells,
-          shadow: this.shadow,
-          shadowColor: this.shadowColor,
-          textColor: this.textColor,
-          iconPadding:this.iconCPadding,
+          mode:this.mode,
+          isCarousel: this.isCarousel,  //焦点图｜轮播
+          carouselTime: this.carouselTime, //轮播周期速度
+          row: this.row,
+          isPreview: this.isPreview,
+          column: this.column,
+          iconStyleComp: this.iconStyleComp,
+          iconItemStyleComp: this.iconItemStyleComp,
+          iconItemBoxStyleComp: this.iconItemBoxStyleComp,
+          height: this.iconWH.height,
+          width: this.iconWH.width,
+          titleStyle: this.titleStyle,
+          dotStyleData: this.dotStyleData
 				}
 			},
-      iconCPadding(){
-        let defaultPadding = 20;
-        if(this.cells === 4) defaultPadding = 25
-        let str = `${this.checkValue(this.iconPadding.top, defaultPadding)}rpx`;
-        str = `${str} ${this.checkValue(this.iconPadding.right, defaultPadding)}rpx`;
-        str = `${str} ${this.checkValue(this.iconPadding.bottom, defaultPadding)}rpx`;
-        str = `${str} ${this.checkValue(this.iconPadding.left, defaultPadding)}rpx`;
-        return str
+      iconItemStyleComp(){
+        return {
+          height: this.iconWH.height + 'px',
+          width: this.iconWH.width + 'px',
+          marginRight: this.columnSpacing + 'rpx'
+        }
       },
-      margin(){
-        let str = `${this.checkValue(this.mS.top, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.mS.right, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.mS.bottom, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.mS.left, 0)}rpx`;
-        return str
-			},
-      contentPaddingOut(){
-        let str = `${this.checkValue(this.contentPadding.top, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.contentPadding.right, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.contentPadding.bottom, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.contentPadding.left, 0)}rpx`;
-        return str
+      iconItemBoxStyleComp(){
+        return {
+          height: this.iconWH.width + 'px',
+          width: this.iconWH.width + 'px',
+          marginRight: this.columnSpacing + 'rpx',
+          padding: this.iconMargin + 'rpx',
+          boxSizing: 'border-box'
+        }
       },
-      dotStyleData() {
-      	return {}
+      iconWH(){
+        //宽高
+        let outWidth = uni.getSystemInfoSync().safeArea.width;
+        let marginRL = this.getPMValue(this.margin, 'RL', 0) * this.$rpxNum;
+        let contentPaddingRL = this.getPMValue(this.contentPadding, 'RL', 0) * this.$rpxNum;
+        let columnSpacings = this.columnSpacing * (this.column -1)* this.$rpxNum
+        let width = (outWidth - (marginRL + contentPaddingRL + columnSpacings))/ this.column;
+        let textHeight = 40;
+        if(this.titleStyle.lineHeight) textHeight = parseInt(this.titleStyle.lineHeight);
+
+        return {
+          width,
+          height: width + textHeight * this.$rpxNum
+        }
+      },
+      iconStyleComp(){
+        return {
+          boxShadow: this.contShadow,
+          borderRadius: this.radius + 'rpx',
+        }
+      },
+
+      bodyStyleComp(){
+        return {
+          margin: this.getMarginAndPadding(this.margin, 0),
+          padding:this.getMarginAndPadding(this.contentPadding, 0),
+          backgroundColor: this.bgColor,
+          borderRadius: this.bgRadius + 'rpx'
+        }
       }
 		},
     watch: {
@@ -151,9 +211,7 @@
       this.isPreview = this.$configProject.isPreview;
     },
     methods: {
-      handleAnimationfinish(e) {
-        this.current = e.detail.current;
-      },
+
       handleImage(list){
       	return list.map(item => {
           return {
@@ -176,25 +234,48 @@
         if (this.poster.position) {
           this.posterPosition = this.poster.position
         }
-        this.jdRows = getContainerPropsValue(container, 'content.jdRows', 1);
-        this.cells = getContainerPropsValue(container, 'content.cells', 4);
+        this.row = getContainerPropsValue(container, 'content.jdRows', 1);
+        this.column = getContainerPropsValue(container, 'content.cells', 4);
+        this.columnSpacing = getContainerPropsValue(container, 'columnSpacing', 0)
 
         //content
-        this.mode = getContainerPropsValue(container, 'content.dot_type', 'dot');
+        this.mode = getContainerPropsValue(container, 'content.dot_type', 'round');
         this.isCarousel = getContainerPropsValue(container, 'content.isCarousel', 1) === 2;
         this.carouselTime = Number(getContainerPropsValue(container, 'content.carouselTime', 5)) * 1000;
-        this.useNumber = getContainerPropsValue(container, 'content.number', 1);
-        this.shadow = getContainerPropsValue(container, 'content.shadow', 2);
-        this.shadowColor = getContainerPropsValue(container, 'content.shadowColor', 'rgba(0,0,0,.3)');
-        this.mS = getContainerPropsValue(container, 'content.margin', {});
-        this.iconPadding = getContainerPropsValue(container, 'content.iconPadding', {});
-        this.contentPadding = getContainerPropsValue(container, 'content.contentPadding', {});
+        let useNumberDefault = 20;
+        if(this.isCarousel === false) useNumberDefault = this.row * this.column;
+        this.useNumber = getContainerPropsValue(container, 'content.number', useNumberDefault);
+
+        //icon样式设置
+        let shadow = getContainerPropsValue(container, 'content.shadow', 2);
+        let shadowColor = getContainerPropsValue(container, 'content.shadowColor', 'rgba(0,0,0,0)');
+        let defaultPadding = 20;
+        if(this.column === 4) defaultPadding = 25
+        this.iconMargin = getContainerPropsValue(container, 'content.iconMargin', defaultPadding);
+        this.contShadow = this.getShadowCompatibleOldStyle(getContainerPropsValue(container, 'content.iconShadow', {}),{
+          type: shadow ===1?'Y':'N',
+          width: '10',
+          color: shadowColor|| 'rgba(0,0,0,0)'
+        })
+        let textColor = getContainerPropsValue(container, 'content.textColor', '#333');
+        let iconSetBaseStyle = getContainerPropsValue(container, 'content.iconSetBaseStyle', 'Y');
+        if(iconSetBaseStyle === 'N') {
+          shadow = 'N';
+          textColor = '#333';
+        }
+        let titleStyle = getContainerPropsValue(container,'content.titleStyle', {});
+        if(!titleStyle.color) titleStyle.color = textColor || '#333';
+        if(!titleStyle.lineHeight) titleStyle.lineHeight = '36rpx';
+        if(!titleStyle.fontWeight) titleStyle.fontWeight = 'normal';
+        if(!titleStyle.fontSize) titleStyle.fontSize = '24rpx';
+        if(!titleStyle.textDecoration) titleStyle.textDecoration = 'none';
+        this.titleStyle = titleStyle;
 
         //样式设置
-        this.textColor = getContainerPropsValue(container, 'content.textColor', '#333');
         this.bgColor = getContainerPropsValue(container, 'content.bgColor','rgba(0,0,0,0)');
         this.bgRadius = getContainerPropsValue(container, 'content.bgRadius', '0');
-
+        this.contentPadding = getContainerPropsValue(container, 'content.contentPadding', {});
+        this.margin = getContainerPropsValue(container, 'content.margin', {});
 
       },
 

package/src/components/JfbBaseUserInfo/Attr.js

@@ -1,5 +1,6 @@
 'use strict';
 import {oldTonNewBorAndSha, checkValue} from '@/utils/AttrTools'
+import ICONS from "@/ICONS.js"
 
 /**
  * @description 当表单组件中有联动操作时候，使用方法进行返回
@@ -33,16 +34,31 @@ export default {
         ]
       },
       {
-        label: '退出登录自定义名称:',
-        ele: 'el-input',
-        type: 'text',
-        groupKey:'content',
-        valueKey: 'logoutName',
-        value: data['logoutName'] || '',
-        notice: '退出登录自定义名称设置，默认值：<span style="color:red">[退出登录]</span>',
-        inline: false,
-        className: 'input60',
+        label: "头像右侧内容:",
+        ele: "xd-radio-self",
+        valueKey: "rightContent",
+        value: data.rightContent || {
+          type: "logout",
+          name: "退出登录",
+          icon: "",
+          iconName: "",
+        },
+        groupKey: "content",
+        setting: {
+          icons: ICONS
+        }
       },
+      // {
+      //   label: '退出登录自定义名称:',
+      //   ele: 'el-input',
+      //   type: 'text',
+      //   groupKey:'content',
+      //   valueKey: 'logoutName',
+      //   value: data['logoutName'] || '',
+      //   notice: '退出登录自定义名称设置，默认值：<span style="color:red">[退出登录]</span>',
+      //   inline: false,
+      //   className: 'input60',
+      // },
 
       {
         ele: 'title',
@@ -85,6 +101,26 @@ export default {
         placeholder: '请选择背景颜色',
         classNmae: 'input80',
       },
+      {
+        label: '内容背景图片:', //label
+        ele: 'xd-upload', //package 名称
+        valueKey: 'bgImage', //form[valueKey]
+        value: data.bgImage || null, //v-model
+        defaultValue: data.bgImage || null, //默认图片对象
+        groupKey: "style",
+        slot: true, //按钮是否使用slot
+        oneWidth: 200, //单个图片显示宽度
+        oneHeight: 100, //单个图片显示高度
+        elinputClassName: 'input40',
+        tipsformet: '上传文件格式：@imageType@，不超过@size@MB.',
+        type: ['jpg', 'png', 'jpeg'],
+        styleType: 'one', //其值：one=>单文件上传 auth=>证件正反面上传 list=>多文件上传
+        uploadType: 'aliyun', //''=>API服务上传  qiniu=>七牛云OSS上传  aliyun=> 阿里云OSS上传
+        size: 5, //5M
+        action: 'aliyun',
+        sort: true, //当上传图片列表时候，是否启用排序
+        maxlen: 100, //当上传图片列表时候，最大数量数量
+      },
       {
         label: '圆角设置:',
         ele: 'xd-site-select-list',
@@ -164,30 +200,6 @@ export default {
             });
         },
       },
-      {
-        label: "退出字体样式设置",
-        ele: "xd-text-and-bgc",
-        groupKey:'style',
-        valueKey: 'logoutStyle',
-        value: data['logoutStyle'] || null,
-        setting: {
-          fontSize: true,
-          color: true,
-          bgColor: false,
-          weight: true,
-          selected:false
-        },
-        handleCustom({action, data}) {
-          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_font_size'})
-            .then(res => {
-              data.cb(res.list)
-            })
-            .catch(error => {
-              console.error(error);
-              data.cb([])
-            });
-        },
-      },
 
       {
         ele: 'title',
@@ -351,6 +363,95 @@ export default {
           {label: '显示', value: 'Y'},
         ]
       },
+      {
+        label: "头像右侧内容配置",
+        ele: "title",
+        size: "small",
+        groupKey: "style"
+      },
+      {
+        label: "头像右侧内容背景颜色:",
+        ele: "xd-color",
+        valueKey: "rightContentBgColor",
+        value: data.rightContentBgColor || '',
+        placeholder: '请选择头像右侧内容背景颜色',
+        groupKey: "style",
+      },
+      {
+        label: "头像右侧内容文字颜色",
+        ele: "xd-text-and-bgc",
+        groupKey:'style',
+        valueKey: 'logoutStyle',
+        value: data['logoutStyle'] || null,
+        setting: {
+          fontSize: true,
+          color: true,
+          bgColor: false,
+          weight: true,
+          selected:false
+        },
+        handleCustom({action, data}) {
+          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_font_size'})
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch(error => {
+              console.error(error);
+              data.cb([])
+            });
+        },
+      },
+      // {
+      //   label: "头像右侧内容文字颜色:",
+      //   ele: "xd-color",
+      //   valueKey: "rightContentTextColor",
+      //   value: data.rightContentTextColor || '',
+      //   placeholder: '请选择头像右侧内容文字颜色',
+      //   groupKey: "style",
+      // },
+      {
+        label: "头像右侧内容内边距配置:",
+        ele: 'xd-margin-padding',
+        valueKey: 'rightContentPadding',
+        groupKey: "style",
+        value: data.rightContentPadding || {},
+        setting: {
+          type: 'padding',
+        },
+        inline: false,
+        notice: '设置外填充，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">20</span>像素',
+      },
+      {
+        label: "头像右侧内容圆角:",
+        ele: 'xd-site-select-list',
+        valueKey: 'rightContentRadius',
+        value: data['rightContentRadius'] || '',
+        groupKey:'style',
+        placeholder: '请选择内容圆角设置',
+        multiple: false,
+        className: 'input80',
+        handleCustom({ action, data }) {
+          XdBus.getParentApi('getOptionsSettingList')({ setting_id: 'edtix_style_radius' })
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch(error => {
+              console.error(error);
+            });
+        },
+      },
+      {
+        label: '编辑地址路径:',
+        ele: 'xd-select-pages-path',
+        valueKey: 'addressUrl',
+        groupKey:'advanced',
+        placeholder: '请选择编辑地址路径',
+        value: data['addressUrl'] || null,
+        setting: {
+          router: XdBus.getParentApi('getPagesTree'),
+        },
+        inline: false,
+      },
       {
         label: '',
         ele: 'slot',

package/src/components/JfbBaseUserInfo/JfbBaseUserInfo.vue

@@ -36,16 +36,47 @@
           <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 class="logout" @click="handleLogout()">
-              <view :style="[logoutStyleComp]">{{logoutName}}</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>
-        <view @click="handleLogout()" v-if="logined && textType ==='N'" class="logout">
-          <view :style="[logoutStyleComp]">{{logoutName}}</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>
       </view>
     </view>
@@ -62,6 +93,7 @@
   import { getContainerPropsValue } from "@/utils/xd.base";
   import {mapState} from 'vuex';
   import store from "@/store";
+  import getServiceUrl from "@/common/getServiceUrl";
   export default {
     name: "JfbBaseUserInfo",
     components: {
@@ -86,7 +118,8 @@
         })
         return {
           margin: this.getMarginAndPadding(this.margin, 20),
-          background : this.backgroundColor,
+          backgroundColor : this.backgroundColor,
+          backgroundImage: `url(${this.bgImage})`,
           padding: this.getMarginAndPadding(this.padding, 20),
           boxShadow: shadow,
           borderRadius: this.radius + 'rpx',
@@ -117,6 +150,18 @@
           color: `${this.logoutStyle.color || '#333'}`,
           fontWeight: `${this.logoutStyle.fontWeight || 'normal'}`,
         }
+      },
+      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`;
+        padding = `${padding} ${this.checkValue(this.rightContentPadding.left, 20)}rpx`;
+        return {
+          backgroundColor: this.rightContentBgColor,
+          // color: this.rightContentTextColor || this.color,
+          padding: padding,
+          borderRadius: this.rightContentRadius + 'rpx'
+        }
       }
     },
     filters:{
@@ -129,7 +174,7 @@
         logined: false,
         userInfo: null,
         isSetting:'N',
-        logoutName:'[退出登录]',
+        // logoutName:'[退出登录]',
         imageRadius:'50%',
 
         //基础
@@ -155,6 +200,13 @@
         padding: {},
         nickStyle:{},
         logoutStyle:{},
+        rightContent: null,
+        addressUrl: '',
+        bgImage: "",
+        rightContentBgColor: "",
+        // rightContentTextColor: "",
+        rightContentPadding: "",
+        rightContentRadius: 0
       }
     },
     watch: {
@@ -233,7 +285,7 @@
         this.textType = getContainerPropsValue(container, 'content.text_type', 'N');
         this.radius = getContainerPropsValue(container, 'content.radius', '10');
         this.isSetting = getContainerPropsValue(container, 'content.isSetting', 'N');
-        this.logoutName = getContainerPropsValue(container, 'content.logoutName', '[退出登录]');
+        // this.logoutName = getContainerPropsValue(container, 'content.logoutName', '[退出登录]');
         this.imageRadius = getContainerPropsValue(container, 'content.imageRadius', '50%');
         this.imageColor = getContainerPropsValue(container, 'content.imageColor', '#333');
 
@@ -252,8 +304,25 @@
 
         this.nickStyle = getContainerPropsValue(container, 'content.nickStyle', {});
         this.logoutStyle = getContainerPropsValue(container, 'content.logoutStyle', {});
+        this.rightContent = getContainerPropsValue(container, 'content.rightContent', {
+          type: "logout",
+          name: "退出登录",
+          icon: "",
+          iconName: "",
+        });
+        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);
 
       },
+      handleAddress(){
+        this.$xdUniHelper.navigateTo({
+          url: this.addressUrl
+        })
+      }
     }
   }
 
@@ -264,6 +333,7 @@
 
   .vertical-user {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     & > view:nth-child(2) {
@@ -285,7 +355,8 @@
         display: flex;
         align-items: center;
         justify-content: flex-start;
-
+        background-size: cover;
+        background-repeat: no-repeat;
 
         &-left {
           display: flex;
@@ -337,6 +408,16 @@
 
     .logout {
       font-size: unit(24, rpx);
+      .right_cont_i{
+        display: flex;
+        align-items: center;
+        font-size: 28rpx;
+        color: inherit;
+        font-weight: 400;
+        .xd-font-icon{
+          margin-right:8rpx;
+        }
+      }
       & > view {
         cursor: pointer;
       }