组件样式，批量 rem 换 px，兼容小程序

Tevin

2021-03-17 54f1f35024c29f1cadc77d17ad7d5e66e644fb23

组件样式，批量 rem 换 px，兼容小程序

 forms/chinaArea/cChinaArea.scss

@@ -17,11 +17,11 @@
        }
        .at-icon-loading,
        .at-icon-chevron-right {
            font-size: 1.024rem;
            font-size: 48px;
            color: #ccc;
        }
        .at-icon-loading {
            margin-right: 0.2rem;
            margin-right: 9px;
            animation: atRotate 1s linear infinite;
        }
    }

 forms/form/CFormItem.vue

@@ -36,7 +36,7 @@
                label: this.label,
                required: this.isRequired,
                error: this.error,
                onChange: (evt) => this.onChange(evt),
                onChange: evt => this.onChange(evt),
            };
        },
        isRequired() {
@@ -66,8 +66,9 @@
                    !hasOwn.call(evt, 'constructor') &&
                    !hasOwn.call(evt.constructor.prototype, 'isPrototypeOf')
                ) {
                    throw new Error('错误的表单项 onChange 参数类型！（At: ' + this.name + '）');
                    return;
                    throw new Error(
                        '错误的表单项 onChange 参数类型！（At: ' + this.name + '）'
                    );
                }
            }
            // 未改变值不触发
@@ -83,7 +84,7 @@
        this.$nextTick(() => {
            // 未设置验证
            if (!this.required && !this.rules) {
                this.formRes.$regItemValidator(this.name, (validateType) => {
                this.formRes.$regItemValidator(this.name, validateType => {
                    this.error = false;
                    return Promise.resolve({
                        name: this.name,
@@ -105,13 +106,13 @@
                validator.messages(validateMsgs);
                // 注册验证
                let errTimer = null;
                this.formRes.$regItemValidator(this.name, (validateType) => {
                this.formRes.$regItemValidator(this.name, validateType => {
                    return validator
                        .validate({
                            [this.name]: this.formRes.formData[this.name],
                        })
                        .then(
                            (res) => {
                            res => {
                                this.error = false;
                                return {
                                    name: this.name,

 forms/form/cForm.scss

@@ -11,26 +11,26 @@
        .at-input__title--required {
            position: relative;
            &::before {
                @include position(absolute, 50% -0.5rem n n);
                @include position(absolute, 50% -23px n n);
                transform: translateY(-50%);
            }
        }
    }
    .c-form-agreement {
        padding: 0.512rem 0.68267rem;
        padding: 24px 32px;
        .title {
            display: inline;
            .icon {
                @include flexbox(inline, center center);
                margin-top: 0.08533rem;
                margin-right: 0.3rem;
                width: 0.85333rem;
                min-width: 0.85333rem;
                height: 0.85333rem;
                margin-top: 4px;
                margin-right: 14px;
                width: 40px;
                min-width: 40px;
                height: 40px;
                color: transparent;
                font-size: 0.512rem;
                font-size: 24px;
                line-height: 1;
                border: 0.04267rem solid rgba(97, 144, 232, .2);
                border: 2px solid rgba(97, 144, 232, .2);
                border-radius: 50%;
                background-color: #fff;
                box-sizing: border-box;
@@ -49,14 +49,14 @@
        .protocol {
            display: inline;
            color: #2b69de;
            font-size: 0.65rem;
            font-size: 30px;
        }
    }
    .c-form-submit {
        margin-top: 0.8rem;
        padding: 0 0.42667rem;
        margin-top: 37px;
        padding: 0 20px;
        [type=primary] {
            font-size: 0.7rem;
            font-size: 33px;
            line-height: 2.2;
            border: 1PX solid #2093df;
            background: #2093df;

 forms/imagePicker/cImagePicker.scss

@@ -14,11 +14,11 @@
            display: none;
        }
        .at-image-picker {
            padding-bottom: 0.25rem;
            padding-bottom: 12px;
        }
        .at-image-picker__flex-box {
            padding: 0.21333rem 0 0;
            margin-left: -0.21333rem;
            padding: 10px 0 0;
            margin-left: -10px;
        }
        .at-image-picker__preview-img {
            text-align: center;
@@ -30,8 +30,8 @@
                &:last-child {
                    display: inline-block;
                }
                width: 1.6rem;
                height: 1.6rem;
                width: 75px;
                height: 75px;
                font-family: iconfont;
                font-style: normal;
                font-weight: 400;
@@ -39,7 +39,7 @@
                text-transform: none;
                text-rendering: auto;
                line-height: 1;
                font-size: 1.6rem;
                font-size: 75px;
                color: #cfe0ed;
                -webkit-font-smoothing: antialiased;
                vertical-align: middle;

 forms/input/cInputPhoneCode.scss

@@ -7,7 +7,7 @@

.c-input-phone-code {
    .c-input-phone-btn {
        margin-right: 0.426rem;
        margin-right: 20px;
        border: none;
        background: #2093df;
        .at-button__text {

 forms/select/cSelect.scss

@@ -16,7 +16,7 @@
            display: none;
        }
        .at-icon-chevron-right {
            font-size: 1.024rem;
            font-size: 48px;
            color: #ccc;
        }
    }

 forms/switch/cSwitch.scss

@@ -12,10 +12,10 @@
                display: block;
                position: absolute;
                top: 50%;
                left: -0.5rem;
                margin-right: 0.17067rem;
                left: -23px;
                margin-right: 8px;
                color: #FF4949;
                font-size: 0.59733rem;
                font-size: 28px;
                font-family: SimSun, sans-serif;
                line-height: 1;
                content: "*";

 forms/textarea/CTextArea.vue

@@ -15,7 +15,7 @@
        <textarea
            ref="textarea"
            class="textarea"
            :style="{height: height || '2rem'}"
            :style="{height: height || '94px'}"
            :placeholder="placeholder"
            :value="itemRes.formData[itemRes.name]"
            :autoFocus="true"

 forms/textarea/cTextArea.scss

@@ -12,7 +12,7 @@
        }
        .textarea {
            width: 100%;
            height: 2rem;
            height: 94px;
            textarea {
                resize: none;
                @include flexbox(flex, center center);

 plugins/infiniteScroll/cInfiniteScroll.scss

@@ -18,14 +18,14 @@
        .inner {
            @include position(absolute, n 0 0 n);
            width: 100%;
            height: 5rem;
            padding-top: 3.3rem;
            height: 234px;
            padding-top: 155px;
            text-align: center;
            box-sizing: border-box;
            .at-activity-indicator {
                display: inline-block;
                height: 40px;
                margin-right: 0.2rem;
                margin-right: 9px;
                vertical-align: middle;
            }
            .text {
@@ -38,8 +38,8 @@
                display: none;
            }
            .at-icon {
                margin-right: 0.2rem;
                font-size: 0.7rem;
                margin-right: 9px;
                font-size: 33px;
                vertical-align: middle;
                transition-duration: 0.3s;
            }
@@ -62,17 +62,17 @@
    .c-infinite-bottom {
        text-align: center;
        .c-infinite-loading {
            height: 2rem;
            height: 94px;
            color: #666;
            line-height: 1.8rem;
            line-height: 84px;
        }
        .c-infinite-ended {
            height: 2rem;
            height: 94px;
            color: #999;
            line-height: 1.8rem;
            line-height: 84px;
        }
        .c-infinite-empty {
            line-height: 5rem;
            line-height: 234px;
            color: #999;
        }
    }