From 54f1f35024c29f1cadc77d17ad7d5e66e644fb23 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Wed, 17 Mar 2021 17:04:58 +0800
Subject: [PATCH] 组件样式，批量 rem 换 px，兼容小程序
---
forms/imagePicker/cImagePicker.scss | 12 +++---
forms/textarea/CTextArea.vue | 2
forms/textarea/cTextArea.scss | 2
plugins/infiniteScroll/cInfiniteScroll.scss | 20 +++++-----
forms/select/cSelect.scss | 2
forms/form/CFormItem.vue | 13 +++---
forms/chinaArea/cChinaArea.scss | 4 +-
forms/form/cForm.scss | 26 ++++++------
forms/input/cInputPhoneCode.scss | 2
forms/switch/cSwitch.scss | 6 +-
10 files changed, 45 insertions(+), 44 deletions(-)
diff --git a/forms/chinaArea/cChinaArea.scss b/forms/chinaArea/cChinaArea.scss
index 0313e43..65d15cf 100644
--- a/forms/chinaArea/cChinaArea.scss
+++ b/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;
}
}
diff --git a/forms/form/CFormItem.vue b/forms/form/CFormItem.vue
index 2d0ed74..6a2fbdf 100644
--- a/forms/form/CFormItem.vue
+++ b/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,
diff --git a/forms/form/cForm.scss b/forms/form/cForm.scss
index 2534bef..02b16a7 100644
--- a/forms/form/cForm.scss
+++ b/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;
diff --git a/forms/imagePicker/cImagePicker.scss b/forms/imagePicker/cImagePicker.scss
index cedeaa3..2327519 100644
--- a/forms/imagePicker/cImagePicker.scss
+++ b/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;
diff --git a/forms/input/cInputPhoneCode.scss b/forms/input/cInputPhoneCode.scss
index 4c4b45e..33510de 100644
--- a/forms/input/cInputPhoneCode.scss
+++ b/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 {
diff --git a/forms/select/cSelect.scss b/forms/select/cSelect.scss
index f01a470..0f1f8b2 100644
--- a/forms/select/cSelect.scss
+++ b/forms/select/cSelect.scss
@@ -16,7 +16,7 @@
display: none;
}
.at-icon-chevron-right {
- font-size: 1.024rem;
+ font-size: 48px;
color: #ccc;
}
}
diff --git a/forms/switch/cSwitch.scss b/forms/switch/cSwitch.scss
index 1738612..775525c 100644
--- a/forms/switch/cSwitch.scss
+++ b/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: "*";
diff --git a/forms/textarea/CTextArea.vue b/forms/textarea/CTextArea.vue
index 69f97d8..854caea 100644
--- a/forms/textarea/CTextArea.vue
+++ b/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"
diff --git a/forms/textarea/cTextArea.scss b/forms/textarea/cTextArea.scss
index 9a368d7..5ba80f8 100644
--- a/forms/textarea/cTextArea.scss
+++ b/forms/textarea/cTextArea.scss
@@ -12,7 +12,7 @@
}
.textarea {
width: 100%;
- height: 2rem;
+ height: 94px;
textarea {
resize: none;
@include flexbox(flex, center center);
diff --git a/plugins/infiniteScroll/cInfiniteScroll.scss b/plugins/infiniteScroll/cInfiniteScroll.scss
index ef486c1..797defb 100644
--- a/plugins/infiniteScroll/cInfiniteScroll.scss
+++ b/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;
}
}
--
Gitblit v1.9.1