From 040e2ccd2a26efd3b0bf65ddb400f9803ed52360 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Tue, 16 Nov 2021 19:09:01 +0800
Subject: [PATCH] 所有表单控件、弹窗，基础字体大小，加大到36px
---
forms/select/cSelect.scss | 2
forms/input/CInputScanCode.vue | 8 +-
forms/form/cForm.scss | 21 ++++--
forms/switch/cSwitch.scss | 3 +
layout/h5Page/cPage.scss | 1
forms/input/CInputScanCode.scss | 11 ++-
forms/numberStep/CNumberStep.vue | 4
forms/numberValve/CNumberValve.vue | 18 +++--
common/custom.scss | 55 +++++++++++++++---
forms/numberValve/cNumberValve.scss | 2
forms/numberStep/cNumberStep.scss | 11 +++
11 files changed, 95 insertions(+), 41 deletions(-)
diff --git a/common/custom.scss b/common/custom.scss
index 9043603..e0b9e8e 100644
--- a/common/custom.scss
+++ b/common/custom.scss
@@ -7,7 +7,7 @@
.taro_page,
page {
- font-size: 30px;
+ font-size: 36px;
color: #333;
textarea {
font-size: inherit;
@@ -15,6 +15,10 @@
}
.at-button {
display: inline-block;
+ font-size: 36px;
+ &.at-button--small {
+ line-height: 56px;
+ }
&.at-button--full {
display: flex;
}
@@ -28,11 +32,21 @@
}
}
}
+ .at-input {
+ .at-input__title {
+ font-size: 36px;
+ }
+ .at-input__input {
+ .weui-input {
+ font-size: 36px;
+ }
+ }
+ }
.at-input-number {
.weui-input {
height: 100%;
border: none;
- font-size: 30px;
+ font-size: 36px;
}
}
.at-float-layout {
@@ -45,12 +59,15 @@
width: 100%;
height: 84px;
box-sizing: border-box;
+ .layout-header__title {
+ font-size: 38px;
+ }
}
.layout-body {
width: 100%;
height: calc(100% - 84px);
max-height: 100%;
- font-size: 30px;
+ font-size: 36px;
box-sizing: border-box;
&:first-child {
height: 100%;
@@ -64,12 +81,6 @@
}
.at-list {
position: unset;
- }
- .weui-picker {
- font-size: 30px;
- .weui-picker__hd {
- font-size: 30px;
- }
}
.at-tabs.at-tabs--horizontal {
height: 100%;
@@ -113,6 +124,20 @@
display: none;
}
}
+ .at-modal {
+ .at-modal__header {
+ font-size: 40px;
+ }
+ .at-modal__footer {
+ .at-modal__action>taro-button-core,
+ .at-modal__action button {
+ font-size: 36px;
+ &:last-child {
+ color: #2093df;
+ }
+ }
+ }
+ }
}
page {
@@ -128,4 +153,16 @@
.taro__toast,
.taro__modal {
word-break: break-word;
+}
+
+.weui-picker__overlay {
+ .weui-picker {
+ font-size: 32px;
+ .weui-picker__hd {
+ font-size: 36px;
+ .weui-picker__action:last-child {
+ color: #2093df;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/forms/form/cForm.scss b/forms/form/cForm.scss
index 9698a87..06a838e 100644
--- a/forms/form/cForm.scss
+++ b/forms/form/cForm.scss
@@ -29,15 +29,14 @@
.title {
display: inline;
.icon {
- @include flexbox(inline, center center);
- margin-top: 4px;
+ display: inline-block;
margin-right: 14px;
width: 40px;
- min-width: 40px;
height: 40px;
+ vertical-align: middle;
+ text-align: center;
+ line-height: 36px;
color: transparent;
- font-size: 24px;
- line-height: 1;
border: 2px solid rgba(97, 144, 232, .2);
border-radius: 50%;
background-color: #fff;
@@ -48,16 +47,22 @@
border: none;
background-color: #6190e8;
}
+ .at-icon {
+ font-size: 24px;
+ line-height: 1;
+ }
}
.tips {
+ vertical-align: middle;
color: rgb(117, 117, 117);
;
}
}
.protocol {
display: inline;
- color: #2b69de;
- font-size: 30px;
+ color: #2093df;
+ font-size: 36px;
+ vertical-align: middle;
}
}
.c-form-submit {
@@ -65,7 +70,7 @@
padding: 0 20px 30px;
[type=primary] {
height: 80px;
- font-size: 33px;
+ font-size: 36px;
line-height: 78px;
border: 1PX solid #2093df;
background: #2093df;
diff --git a/forms/input/CInputScanCode.scss b/forms/input/CInputScanCode.scss
index e8b28fa..c3d98bb 100644
--- a/forms/input/CInputScanCode.scss
+++ b/forms/input/CInputScanCode.scss
@@ -6,19 +6,20 @@
@import "../../common/sassMixin";
.c-input-scan-code {
- .c-input-scan-btn {
+ .c-input-scan-space {
width: 140px;
height: 48px;
+ pointer-events: none;
}
- .c-input-scan-show {
+ .c-input-scan-btn {
@include position(absolute, 50% n n 16px);
- width: 100px;
+ width: 110px;
box-sizing: border-box;
transform: translateY(-50%);
- pointer-events: none;
.at-icon-loading {
- margin-right: 9px;
+ font-size: 40px;
animation: atRotate 1s linear infinite;
+ transform-origin: 50% 48%;
}
}
.at-input__icon {
diff --git a/forms/input/CInputScanCode.vue b/forms/input/CInputScanCode.vue
index 50ea652..b0dc4c7 100644
--- a/forms/input/CInputScanCode.vue
+++ b/forms/input/CInputScanCode.vue
@@ -15,14 +15,12 @@
:value="itemRes.formData[itemRes.name]"
:onChange="evt=>itemRes.onChange(evt)"
>
- <view
- class="c-input-scan-btn"
- @tap="evt => handleScan()"
- ></view>
+ <view class="c-input-scan-space"></view>
<AtButton
- class="c-input-scan-show"
+ class="c-input-scan-btn"
size="small"
type="primary"
+ :onClick="evt => handleScan()"
>
<text v-show="!scaning">扫描</text>
<AtIcon
diff --git a/forms/numberStep/CNumberStep.vue b/forms/numberStep/CNumberStep.vue
index add9fd5..be55295 100644
--- a/forms/numberStep/CNumberStep.vue
+++ b/forms/numberStep/CNumberStep.vue
@@ -51,7 +51,7 @@
// 取值范围
range: {
type: Array,
- default: [0, 100],
+ default: () => [0, 100],
},
// 步长
step: {
@@ -106,7 +106,7 @@
mounted() {
if (process.env.TARO_ENV === 'h5') {
$(this.$refs.input.$el)
- .find('.at-input__input')
+ .find('.at-input__container')
.prepend(this.$refs.number.$el);
} else if (process.env.TARO_ENV === 'weapp') {
$(this.$refs.input.$el)
diff --git a/forms/numberStep/cNumberStep.scss b/forms/numberStep/cNumberStep.scss
index f66a649..f08b3ae 100644
--- a/forms/numberStep/cNumberStep.scss
+++ b/forms/numberStep/cNumberStep.scss
@@ -20,13 +20,20 @@
}
.c-number-step-step {
.at-input-number {
+ .weui-input {
+ display: inline-block;
+ }
.at-input-number__btn {
padding: 16px 16px;
- width: 30px;
+ width: 36px;
height: 30px;
}
.at-input-number__input {
- font-size: 30px;
+ font-size: 36px;
+ }
+ .at-input-number__btn-subtract,
+ .at-input-number__btn-add {
+ font-size: 36px;
}
}
&.on-unit {
diff --git a/forms/numberValve/CNumberValve.vue b/forms/numberValve/CNumberValve.vue
index 98e7af5..342beb5 100644
--- a/forms/numberValve/CNumberValve.vue
+++ b/forms/numberValve/CNumberValve.vue
@@ -152,16 +152,18 @@
let $slider = null;
if (process.env.TARO_ENV === 'h5') {
$slider = $(this.$refs.slider.$el);
+ const rect = $slider[0].getBoundingClientRect();
+ this.rect.width = rect.width;
+ this.rect.left = rect.left;
} else if (process.env.TARO_ENV === 'weapp') {
- $slider = $(this.$refs.slider);
+ Taro.createSelectorQuery()
+ .select('#' + this.$refs.slider.uid)
+ .boundingClientRect(rect => {
+ this.rect.width = rect.width;
+ this.rect.left = rect.left;
+ })
+ .exec();
}
- Taro.createSelectorQuery()
- .select('#' + this.$refs.slider.uid)
- .boundingClientRect(rect => {
- this.rect.width = rect.width;
- this.rect.left = rect.left;
- })
- .exec();
},
handleChangeVal(type, value) {
this.updateRect();
diff --git a/forms/numberValve/cNumberValve.scss b/forms/numberValve/cNumberValve.scss
index c4c2c71..388ff9e 100644
--- a/forms/numberValve/cNumberValve.scss
+++ b/forms/numberValve/cNumberValve.scss
@@ -60,7 +60,7 @@
align-items: center;
width: 100%;
height: 28PX;
- padding: 35PX 0 50PX;
+ padding: 35PX 0 55PX;
.min {
@include position(absolute, 20PX 0 n n);
height: 60PX;
diff --git a/forms/select/cSelect.scss b/forms/select/cSelect.scss
index 2bfd699..47c92ea 100644
--- a/forms/select/cSelect.scss
+++ b/forms/select/cSelect.scss
@@ -37,7 +37,7 @@
}
.c-select-slot {
position: relative;
- height: 90px;
+ height: 98px;
@include flexbox(flex, center center);
&::after {
position: absolute;
diff --git a/forms/switch/cSwitch.scss b/forms/switch/cSwitch.scss
index 775525c..17494cf 100644
--- a/forms/switch/cSwitch.scss
+++ b/forms/switch/cSwitch.scss
@@ -6,6 +6,9 @@
@import "../../common/sassMixin";
.c-switch {
+ .at-switch__title {
+ font-size: 36px;
+ }
&.c-switch-required {
.at-switch__title {
&::before {
diff --git a/layout/h5Page/cPage.scss b/layout/h5Page/cPage.scss
index 488f637..d60b4b5 100644
--- a/layout/h5Page/cPage.scss
+++ b/layout/h5Page/cPage.scss
@@ -10,6 +10,7 @@
@include flexbox(flex, flex-start flex-start, column);
width: 100%;
height: 100%;
+ background-color: #E1ECEE;
.c-nav-bar {
width: 100%;
}
--
Gitblit v1.9.1