jufubao-forms 1.0.0-beta1

package/src/components/JfbFormsDynamicForm/JfbFormsDynamicForm.vue

@@ -0,0 +1,767 @@
+<template>
+  <view
+    class="jfb-forms-dynamic-form"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-forms-dynamic-form__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-forms-dynamic-form__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-forms-dynamic-form__body">
+      <view v-if="loaded">
+        <view v-if="form_status === 'content'" class="form_content">
+          <view class="jfb-forms-dynamic-form__title">{{ formName }}</view>
+          <xd-form labelPosition="top" labelAlign="left" :model="form" :paddingBetween="0" :key="renderForm">
+            <xd-form-item v-for="(item, i) in dynamicFormList" :key="item.created_time"
+              :id="item.field_value"
+              :subTitle="item.explain"
+              :label="(i+1) + '、' + item.field_name" :prop="item.field_value" contentAlign="left"
+              :errorMessage="item.error" :required="item.required">
+              <view class="align-center" v-if="item.field_type === 'text'">
+                <image :src="item.icon" v-if="item.icon" class="input_icon" mode="widthFix"></image>
+                <xd-form-input
+                  v-model="form[item.field_value]"
+                  :placeholder="item.placeholder"
+                  @focus="handleClearError(item)"
+                  @blur="handleValidItem(item)"
+                ></xd-form-input>
+              </view>
+              <xd-form-input v-if="item.field_type === 'textarea'"
+                type="textarea"
+                v-model="form[item.field_value]"
+                :placeholder="item.placeholder"
+                @focus="handleClearError(item)"
+              ></xd-form-input>
+              <ld-select v-if="item.field_type === 'select'"
+                v-model="form[item.field_value]"
+                :list="item.options"
+                :multiple="item.validate_type === 'Y'"
+                :placeholder="item.placeholder || '请选择'"
+                clearable
+                @change="handleClearError(item)"
+              >
+              </ld-select>
+              <xd-form-checkbox v-if="item.field_type === 'checkbox' || item.field_type === 'radio'"
+                v-model="form[item.field_value]"
+                :localdata="item.options.map(item => ({value: item.value, text: item.label}))"
+                :multiple="item.field_type === 'checkbox'"
+                @change="handleClearError(item)"
+                :class="'mySelf' + item.field_type"
+              ></xd-form-checkbox>
+              <template v-if="item.field_type === 'date'">
+                <picker v-if="item.validate_type === 'month' || item.validate_type === 'year'"
+                  v-model="form[item.field_value]"
+                  :value="form[item.field_value]"
+                  mode="date"
+                  :start="item.start_time"
+                  :end="item.end_time"
+                  :fields="item.validate_type"
+                  @change="e => handleDatepicker(e, item)">
+                  <view class="align-center">
+                    <!-- <xd-font-icon icon="iconriqi" color="#5C5C66"></xd-font-icon> -->
+                    <image src="//img6.jufubao.cn/common/form/icon_date.png" mode="widthFix" class="input_icon"></image>
+                    <view class="form_datepicker">{{form[item.field_value] || '请选择日期'}}</view>
+                  </view>
+                </picker>
+                <uni-datetime-picker v-else
+                  v-model="form[item.field_value]"
+                  :type="item.validate_type"
+                  :start="item.start_time"
+                  :end="item.end_time"
+                  :border="false"
+                  placeholder="请选择日期"
+                  @change="handleClearError(item)">
+                </uni-datetime-picker>
+              </template>
+              <!-- <xd-form-date v-if="item.field_type === 'calendar'"
+                v-model="form[item.field_value]"
+                :type="item.validate_type"
+                :start="item.start_time"
+                :end="item.end_time"
+                :rules="item.validate_rules"
+                @change="handleClearError(item)"
+              >
+                {{ form[item.field_value] || "请选择日期" }}
+              </xd-form-date> -->
+            </xd-form-item>
+          </xd-form>
+          <!-- <view class="description">{{ description }}</view> -->
+          <view class="footer_btn">
+            <xd-button style="width: 460rpx;" type="primary" @click="doShowDialog">提交表单</xd-button>
+          </view>
+        </view>
+        <view v-if="form_status === 'success'" class="form_status form_success">
+          <xd-font-icon icon="iconchenggong" color="#06bc85" :size="64"></xd-font-icon>
+          <view class="status_tip">您已成功提交</view>
+          <view class="status_name">{{ formName }}</view>
+          <view class="status_btn" @click="doClose">关闭</view>
+        </view>
+        <view v-if="form_status === 'error'" class="form_status form_error">
+          <xd-font-icon icon="iconshibai" color="#ff5235" :size="64"></xd-font-icon>
+          <view class="status_tip error_tip">{{ err_msg }}</view>
+          <view class="status_name">{{ formName }}</view>
+        </view>
+      </view>
+      
+      
+      <xd-dialog :show.sync="isShowDialog" title="请输入验证码" :showCloseIcon="false">
+        <xd-form
+          label-align="left"
+          content-align="left"
+          label-position="left"
+          :paddingBetween="0"
+        >
+          <xd-form-item label="" :labelWidth="1" content-align="left" :paddingBetween="0">
+            <view class="valid_wrap">
+              <xd-form-input v-model="valid_code" placeholder="请输入验证码" style="width: 300rpx;"></xd-form-input>
+              <view class="capture" @click="switchValidToken">
+                <image
+                  style="width: 100%;height:100%"
+                  :src="validImageAPIUrl + '?image_width=180&image_height=80&token='+ valid_token"
+                />
+              </view>
+            </view>
+          </xd-form-item>
+        </xd-form>
+        
+        <view slot="btn">
+          <xd-button type="primary" width="400rpx" @click="doCheckValidCode">提交</xd-button>
+        </view>
+      </xd-dialog>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdForm from "@/components/XdForm/XdForm"
+  import XdFormItem from "@/components/XdFormItem/XdFormItem"
+  import XdButton from "@/components/XdButton/XdButton"
+  import XdFormInput from "@/components/XdFormInput/XdFormInput"
+  import XdFormCheckbox from "@/components/XdFormCheckbox/XdFormCheckbox"
+  import XdFormSelect from "@/components/XdFormSelect/XdFormSelect"
+  import XdFormDate from "./XdFormDate"
+  import LdSelect from "./ld-select/ld-select"
+  import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer"
+  import UniDatetimePicker from "./uni-datetime-picker/uni-datetime-picker"
+  import XdDialog from "@/components/XdDailog/XdDailog"
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbFormsDynamicFormMixin from "./JfbFormsDynamicFormMixin";
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  import { mapState } from "vuex";
+  export default {
+    name: "JfbFormsDynamicForm",
+    components: {
+      XdFontIcon,
+      XdForm,
+      XdFormItem,
+      XdButton,
+      XdFormInput,
+      XdFormCheckbox,
+      XdFormSelect,
+      XdFormDate,
+      XdDownDrawer,
+      UniDatetimePicker,
+      LdSelect,
+      XdDialog
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbFormsDynamicFormMixin
+    ],
+    data() {
+      return {
+        formName: "",
+        form: {},
+        dynamicFormList: [],
+        renderForm: "renderForm",
+        form_id: "",
+        isShowDialog: false,
+        validImageAPIUrl: "",
+        valid_token: "",
+        valid_code: "",
+        form_status: "content", //content, success, error
+        err_msg: "",
+        loaded: false,
+        isPreview: false,
+
+        //面板
+        submitPagePath: "",
+        formBe: "1",
+        // description: "",
+      }
+    },
+    computed: {
+      ...mapState({
+        brandInfo: state => state.brandInfo
+      }),
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+    },
+    created() {
+      this.isPreview = this.$configProject['isPreview'];
+      this.init(this.container);
+      this.validImageAPIUrl = this.brandInfo['api_host'] + '/common/v1/valid_code/image/show'
+      this.valid_token = this.$xdUniHelper.randomChar(20);
+      //todo
+    },
+    methods: {
+      onJfbLoad(options) {
+        if (!this.isPreview){
+          if(!options.form_id) {
+            return uni.showToast({
+              title: '请配置表单id',
+              duration: 2000
+            });
+          }
+          this.form_id = options.form_id;
+        }else{
+          this.form_id = 1;
+        }
+        let getFormFn = "getDynamicForm";  //加盟商营销动态表单fn
+        if(this.formBe == 2) getFormFn = "getSaasDynamicForm"
+
+
+        this.$xdShowLoading({});
+        jfbRootExec(getFormFn, {
+          vm: this,
+          data: {
+            form_id: this.form_id,
+          }
+        }).then(res => {
+          this.$xdHideLoading();
+          this.loaded = true;
+          this.formName = res.form_name;
+          this.err_msg = res.message;
+          if(res.message){
+            this.form_status = "error";
+            return;
+          }
+          this.dynamicFormList = res.list.map((item, i) => {
+            item.error = "";
+            
+            if(item.is_show_explain !== 'Y'){
+              item.explain = "";
+            }
+
+            if(item.field_type === 'text' || item.field_type === 'textarea'){
+              try{
+                let itemRule = JSON.parse(item.validate_rules);
+                let { rule, limit } = itemRule;
+                if(rule.value === 'phone'){
+                  item['icon'] = '//img6.jufubao.cn/common/form/icon_phone.png';
+                }else if(rule.value === 'email'){
+                  item['icon'] = '//img6.jufubao.cn/common/form/icon_email.png';
+                }else if(rule.value === 'idCard'){
+                  item['icon'] = '//img6.jufubao.cn/common/form/icon_idcard.png';
+                }else if(rule.value === 'url'){
+                  item['icon'] = '//img6.jufubao.cn/common/form/icon_net.png';
+                }else if(rule.value === 'english'){
+                  item['icon'] = '//img6.jufubao.cn/common/form/icon_en.png';
+                }
+
+                if(limit.showDefaultValue){
+                  this.form[item.field_value] = item.default;
+                }
+              }catch(e){}
+            }else if(item.default){
+              if(item.field_type === 'checkbox'){
+                this.form[item.field_value] = item.default.split(",");
+              }else{
+                this.form[item.field_value] = item.default;
+              }
+            }
+            if(item.field_type === 'calendar' || item.field_type === 'date'){
+              try{
+                let monthOrYear = item.validate_type === 'month' || item.validate_type === 'year'
+                let dateRule = JSON.parse(item.validate_rules);
+                if(dateRule.showRange){
+                  let date_range = dateRule.date_range; //all, before, after
+                  if(date_range === 'before'){
+                    if(monthOrYear){
+                      item['end_time'] = this.getTimeFormat();
+                    }else{
+                      item['end_time'] = new Date().getTime();
+                    }
+                  }else if(date_range === 'after'){
+                    if(monthOrYear){
+                      item['start_time'] = this.getTimeFormat();
+                    }else{
+                      item['start_time'] = new Date().getTime();
+                    }
+                  }
+                }
+              }catch(e){}
+            }
+            console.log(item, "item")
+            return item;
+          });
+          setTimeout(() => {
+            this.setFieldItemTop();
+          }, 100)
+        })
+      },
+      setFieldItemTop(){
+        const query = uni.createSelectorQuery().in(this);
+        this.dynamicFormList = this.dynamicFormList.map(item => {
+          let id = item.field_value;
+          query.select('#'+id).boundingClientRect(data => {
+            // console.log("得到布局位置信息" + JSON.stringify(data));
+            item['top'] = data.top;
+          }).exec();
+          return item;
+        })
+      },
+      getTimeFormat() {
+        let date = new Date();
+        return (date.getFullYear() + "-" + this.getTimeFormat2((date.getMonth() + 1)) + "-" + this.getTimeFormat2(date.getDate()));
+      },
+      getTimeFormat2(num) {
+        return Number(num) < 10 ? "0" + num : num;
+      },
+      doCheckValidCode(){
+        let token = this.valid_token;
+        let valid_code = this.valid_code;
+        if(!valid_code) return;
+
+        jfbRootExec("checkValidCode", {
+          vm: this,
+          data: {
+            token,
+            valid_code
+          }
+        }).then(res => {
+          if(res.is_valid){
+            this.isShowDialog = false;
+            this.handleSubmit();
+          }else{
+            uni.showToast({
+              title: '验证码错误',
+              duration: 2000,
+              icon: "none"
+            });
+            this.switchValidToken();
+          }
+        })
+      },
+      switchValidToken(){
+        let valid_token = this.$xdUniHelper.randomChar(20);
+        this.valid_token = valid_token;
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        this.submitPagePath = getContainerPropsValue(container, 'content.submitPagePath', {value: ""}).value;
+        this.formBe = getContainerPropsValue(container, 'content.formBe', '1');
+        // this.description = getContainerPropsValue(container, 'content.description', "");
+      },
+      handleClearError(item){
+        this.$set(item, "error", "")
+      },
+      handleValidItem(item){
+        console.log("handleValidItem", item);
+        let fieldValue = this.form[item.field_value];
+        let err = "";
+        if(item.required && !fieldValue){
+          err = "请填写" + item.field_name;
+        }else{
+          err = this.validFromText(item, fieldValue);
+        }
+        if(err){
+          this.$set(item, "error", err);
+        }
+      },
+      doShowDialog(){
+        var err_arr = this.validFrom();
+        if(err_arr.length > 0) return;
+
+        this.isShowDialog = true;
+      },
+      handleSubmit(){
+
+        let contents = this.dynamicFormList.map(item => {
+          let fieldValue = this.form[item.field_value];
+          let field_id = item.field_id;
+          if(typeof fieldValue !== 'string'){
+            fieldValue = String(fieldValue);
+          }
+          return {
+            field_id,
+            content: fieldValue
+          }
+        })
+        if(contents.length === 0) return;
+        console.log(contents, "contents")
+
+        let submitFormFn = "submitDynamicForm";  //加盟商营销动态表单fn
+        if(this.formBe == 2) submitFormFn = "submitSaasDynamicForm"
+
+        this.$xdShowLoading({});
+        jfbRootExec(submitFormFn, {
+          vm: this,
+          data: {
+            contents,
+            form_id: this.form_id
+          }
+        }).then(res => {
+          this.$xdHideLoading();
+          this.form_status = 'success';
+        })
+      },
+      validFrom(){
+        console.log("validFrom")
+        var err_arr = [];
+        this.dynamicFormList.forEach(item => {
+          item.error = "";
+          let fieldValue = this.form[item.field_value];
+          console.log(fieldValue, "fieldValue")
+
+          if(item.required && !fieldValue){
+            let errTip = "";
+            if(item.field_type === 'text' || item.field_type === 'textarea'){
+              errTip = "请填写" + item.field_name;
+            }else{
+              errTip = "请选择" + item.field_name;
+            }
+            item.error = errTip;
+            err_arr.push(item);
+          }else if(item.required && item.field_type === 'select'){
+            if(fieldValue === '' || fieldValue.length == 0){
+              let errTip = "请选择" + item.field_name;
+              item.error = errTip;
+              err_arr.push(item);
+            }
+          }else if(item.field_type === 'text'){
+            let errTip = this.validFromText(item, fieldValue);
+            if(errTip) {
+              item.error = errTip;
+              err_arr.push(item);
+            }
+          }
+        })
+        console.log(this.dynamicForm);
+        if(err_arr.length > 0){
+          let tops = err_arr.map(item => {
+            return item.top;
+          })
+          let top = Math.min(...tops);
+          uni.pageScrollTo({
+            scrollTop: top,
+            duration: 0
+          });
+        }
+        return err_arr;
+      },
+      getIntTip(item){
+        let validate_rules = JSON.parse(item.validate_rules);
+        let { rule, limit } = validate_rules;
+        let { min, max, showRange } = limit;
+        let rangeTip = "";
+        if(showRange){
+          if(min && max){
+            rangeTip = `范围在最小${min}，最大${max}`;
+          }else if(max){
+            rangeTip = "最大输入" + max;
+          }else if(min){
+            rangeTip = "最小输入" + min;
+          }
+        }
+        if(!rangeTip) return "请填写整数";
+        if(rangeTip) return `请填写整数且${rangeTip}`;
+      },
+      //小数报错提示
+      getDecimalTip(item){
+        let validate_rules = JSON.parse(item.validate_rules);
+        let { rule, limit } = validate_rules;
+        let { min, max, showRange, roundDecimal, showRoundDecimal } = limit;
+        let ruleTip = "";
+        let rangeTip = "";
+        if(showRoundDecimal && roundDecimal){ //保留小数位
+          ruleTip = "保留" + roundDecimal + "位";
+        }
+        if(showRange){
+          if(min && max){
+            rangeTip = `范围在最小${min}，最大${max}`;
+          }else if(max){
+            rangeTip = "最大输入" + max;
+          }else if(min){
+            rangeTip = "最小输入" + min;
+          }
+        }
+        if(!ruleTip && !rangeTip) return "请填写小数";
+        if(ruleTip && rangeTip) return `请填写小数且${rangeTip},${ruleTip}`;
+        if(ruleTip && !rangeTip) return `请填写小数且${ruleTip}`;
+        if(!ruleTip && rangeTip) return `请填写小数且${rangeTip}`;
+      },
+      validFromText(item, fieldValue){
+        let validate_rules = JSON.parse(item.validate_rules);
+        let { rule, limit } = validate_rules;
+        let regExp = new RegExp(rule.RegExp);
+        let { min, max, showRange, roundDecimal } = limit;
+        let errTip = "";
+        let inputType = "text"; //text, number
+        let typeText = "";
+
+        switch(rule.value){
+          case 'all': //不限制
+            inputType = "text";
+            break;
+          case 'decimal': //小数
+            inputType = "number";
+            typeText = "小数";
+            break;
+          case 'positiveInteger': //正整数
+            inputType = "number";
+            typeText = "整数";
+            break;
+          case 'phone': //手机号码
+            typeText = "手机号";
+            break;
+          case 'email': //邮箱
+            typeText = "邮箱";
+            break;
+          case 'url': //网址
+            typeText = "网址";
+            break;
+          case 'idCard': //身份证
+            typeText = "身份证";
+            break;
+          case 'english': //英文
+            inputType = "text";
+            typeText = "英文";
+        }
+
+        if( fieldValue && regExp.test(fieldValue) === false){
+          if(rule.value === 'decimal'){
+            errTip = this.getDecimalTip(item);
+          }else if(rule.value === 'positiveInteger'){
+            errTip = this.getIntTip(item);
+          }else{
+            errTip = "请填写正确的" + (typeText || item.field_name);
+          }
+          return errTip;
+        }
+
+        //小数验证保留位数
+        if(rule.value === 'decimal' && fieldValue && limit.showRoundDecimal){
+          let roundDecimal = limit.roundDecimal;//保留小数位数
+          let decimal = fieldValue.split('.')[1] || "";
+          if(decimal.length != roundDecimal){
+            return this.getDecimalTip(item);
+          }
+        }
+        
+        //开始验证限制范围
+        if(fieldValue && !showRange) return errTip;
+        max = Number(max);
+        min = Number(min);
+        if(inputType === 'text'){
+          if(max && fieldValue.length > max){
+            return "最多输入" + max + "个字符";
+          }
+          if(min && fieldValue.length < min){
+            return "最少输入" + min + "个字符";
+          }
+        }else if(inputType === 'number' || inputType === 'decimal'){
+          if((max && Number(fieldValue) > max) || (min && Number(fieldValue) < min)){
+            if(rule.value === 'decimal'){
+              return this.getDecimalTip(item);
+            }else if(rule.value === 'positiveInteger'){
+              return this.getIntTip(item);
+            }
+          }
+        }
+
+        return errTip;
+      },
+      handleDatepicker(e, item){
+        let value = e.detail.value;
+        this.$set(this.form, item.field_value, value);
+        this.$set(item, "error", "")
+      },
+      doClose(){
+        this.$xdUniHelper.navigateTo({
+          url: this.submitPagePath
+        })
+        // window.location.href = 'about:blank';
+        // window.close();
+      },
+      onJfbScroll(options) {
+        // console.log('event.onJfbScroll', options)
+      },
+      onJfbReachBottom(options) {
+        // console.log('event.onJfbReachBottom', options)
+      },
+      onJfbShow(options) {
+        console.log('event.onJfbShow', options)
+      },
+      onJfbHide(options) {
+        console.log('event.onJfbHide', options)
+      },
+      onJfbBack(options) {
+        console.log('event.onJfbBack', options)
+      },
+      onJfbUpdate(...data) {
+        console.log('event.onJfbUpdate', data)
+      },
+      onJfbCustomEvent(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbFormsDynamicFormLess.less";
+
+  .jfb-forms-dynamic-form {
+    &__body{
+      padding: 32rpx 24rpx;
+      .form_status{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-top: 100rpx;
+        .status_tip{
+          color: #06bc85;
+          margin-top: 32rpx;
+          font-size: 40rpx;
+          &.error_tip{
+            color: #f0413d;
+          }
+        }
+        .status_name{
+          font-size: 32rpx;
+          margin: 78rpx 0;
+        }
+        .status_btn{
+          width: 80%;
+          border-radius: 4px;
+          background: #06bc85;
+          color: #fff;
+          font-size: 26rpx;
+          height: 80rpx;
+          line-height: 80rpx;
+          text-align: center;
+        }
+      }
+     
+      .align-center{
+        display: flex;
+        align-items: center;
+      }
+      .input_icon{
+        width: 48rpx;
+        image{
+          width: 100%;
+        }
+      }
+      .valid_wrap{
+        display: flex;
+        align-items: center;
+        border: 1px solid #DDD;
+      }
+      .capture{
+        width: 180rpx;
+        height: 80rpx;
+        background: #DDD;
+      }
+      .form_datepicker{
+        font-size: 26rpx;
+        color: #666666;
+        height: 80rpx;
+        display: flex;
+        align-items: center;
+        padding: 0 20rpx;
+      }
+      /deep/ .uni-forms-item{
+        border-bottom: 1px solid #F5F5F5;
+        &:last-child{
+          border-bottom: none;
+        }
+        .checklist-box{
+          align-items: flex-start;
+        }
+        .uni-error-message{
+          height: 28rpx;
+          line-height: 28rpx;
+          z-index: 1111;
+          bottom: 12rpx;
+          .uni-error-message-text{
+            font-size: 20rpx;
+          }
+        }
+        .uni-forms-item__content{
+          padding-left: 10px;
+          &.is-input-error-border .uni-easyinput__placeholder-class{
+            color: #979797;
+          }
+        }
+        .mySelfradio{
+          .checklist-group{
+            flex-direction: column;
+            .checklist-text{
+              line-height: 32rpx;
+            }
+          }
+        }
+      }
+      /deep/ .uni-forms-item__inner{
+        padding-bottom: 20rpx;
+        padding-top: 8rpx;
+        .uni-forms-item__label{
+          height: auto;
+        }
+
+        .uni-forms-item__label .label-text{
+          font-size: 24rpx;
+          color: #666666;
+          line-height: 1.2;
+        }
+        .uni-easyinput__content-input{
+          font-size: 24rpx;
+          
+          .uni-easyinput__placeholder-class{
+            font-size: 24rpx;
+          }
+          .uni-input-input{
+            color: #333333;
+          }
+        }
+        .xd-select__box > uni-view{
+          font-size: 24rpx !important;
+          border: none !important;
+        }
+        
+      }
+      .description{
+        color: #666666;
+        font-size: 24rpx;
+        padding: 28rpx;
+      }
+      .footer_btn{
+        margin-top: 60rpx;
+      }
+    }
+    &__title{
+      height: 100rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+</style>