颜式风格布局

模态框页脚按钮右对齐

      <div slot="footer" class="flex-r">
        <!-- 取消 -->
        <Button style="display:inline-block;" @click="theNameOfTheVIPModal = false;">{{$t('cancel')}}</Button>
        <!-- 确定 -->
        <Button type="primary" style="display:inline-block;" @click="handleSubmit('formVipName');">{{$t('confirm')}}</Button>
      </div>

模态框按钮左一个右一个

      <div slot="footer" v-else  class="flex-between">
        <!-- 编辑 -->
        <Button @click="addShow = true;" style="display:inline-block;">{{$t('editor')}}</Button>
        <!-- 确定 -->
        <Button type="primary" @click="showModal = false;" style="display:inline-block; ">{{$t('confirm')}}</Button>
      </div>

再次确认警告框

    <!-- 确定警告框 -->
    <Modal v-model="confirmModal" footer-hide width="416" :mask-closable="false" :closable="false">
      <div style="font-size:18px; font-weight:600;" class="flex-vc">
        <div style="font-size:30px; color:orange; margin:0 10px;">
          <Icon type="android-alert"></Icon>
        </div>
        <div style="line-height: 36px;height: 36px;">
          {{$t('changesWillAffectTheOnlineAristocracy')}}
        </div>
      </div>
      <p style="font-size:14px; margin-left:50px; margin-top:20px; margin-bottom:20px">{{this.$t('whetherOrNotToContinue')}}</p>
        <div class="flex-r">
        <!-- 取消 -->
        <Button style="display:inline-block; margin: 5px;" @click="confirmModal = false">{{$t('cancel')}}</Button>
        <!-- 继续 -->
        <Button type="primary" @click="submitConfirmModal" style="display:inline-block;  margin: 5px;">{{$t('continue')}}</Button>
      </div>
    </Modal>

表单label右对齐 以及加：

      <Form ref="formVipName" :model='userBaseInfo' :label-width='100' :rules="ruleuserBaseInfo"  label-position="right">
        <!-- 中文 -->
        <FormItem :label='$t("chinese") + " : "' prop="vipName_zh">
            <Input :maxlength="5" :disabled="!addShow" v-model='userBaseInfo.vipName_zh' :placeholder="$t('fiveCharacters')" style="width: 90%;" />
        </FormItem>
        <!-- 英文 -->
        <FormItem :label='$t("english") + " : "' prop="vipName_en">
            <Input :disabled="!addShow" v-model='userBaseInfo.vipName_en' :placeholder="$t('withinTwelveCharacters')" style="width: 90%;"/>
        </FormItem>
        <!-- 阿拉伯文 -->
        <FormItem :label='$t("arabic") + " : "' prop="vipName_ar">
            <Input :disabled="!addShow" v-model='userBaseInfo.vipName_ar' :placeholder="$t('asFarAsPossibleBrief')" style="width: 90%;"/>
        </FormItem>
        <!-- 印尼文 -->
        <FormItem :label='$t("indonesian") + " : "' prop="vipName_id">
            <Input :disabled="!addShow" v-model='userBaseInfo.vipName_id' :placeholder="$t('asFarAsPossibleBrief')" style="width: 90%;"/>
        </FormItem>
        <!-- 土耳其文 -->
        <FormItem :label='$t("turkish") + " : "' prop="vipName_tr">
            <Input :disabled="!addShow" v-model='userBaseInfo.vipName_tr' :placeholder="$t('asFarAsPossibleBrief')" style="width: 90%;"/>
        </FormItem>
        <!-- 俄文 -->
        <FormItem :label='$t("ru") + " : "' prop="vipName_ru">
            <Input :disabled="!addShow" v-model='userBaseInfo.vipName_ru' :placeholder="$t('asFarAsPossibleBrief')" style="width: 90%;"/>
        </FormItem>
      </Form>