This commit is contained in:
Wang Kejun 2022-07-06 10:54:08 +08:00
parent 56159bd2fd
commit 4163f41a1c
21 changed files with 181 additions and 157 deletions

View File

@ -1 +1,107 @@
@import "../../../styles/cell.less";
@import "../../../styles/base.less";
@import "../../../styles/mixins.less";
.g-cell {
position: relative;
padding: 12px 15px;
display: flex;
background: #fff;
align-items: center;
line-height: 1.4;
font-size: @size-font-base;
overflow: hidden;
&-label {
color: @text-color;
min-width: 65px;
padding-right: 10px;
}
&-content {
flex: 1;
line-height: 1.6;
padding: 4px 0;
min-height: 22px;
height: auto;
font-size: 14px;
display: flex;
flex-direction: row;
align-items: center;
}
&-content-right:extend(&-content) {
// 不会写,这里
flex: 1;
line-height: 1.6;
padding: 4px 0;
min-height: 22px;
height: auto;
font-size: 14px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
&::after {
.hairline();
border-bottom-width: 1px;
left: 15px;
right: 0;
}
}
.g-input {
padding: 15px;
color: @text-color;
&-wrapped {
margin: 10px 15px;
background-color: #fff;
&::after {
left: 0;
border-width: 1px;
border-radius: 4px;
}
}
&-error {
color: @error-color;
}
&-title {
color: @text-color;
min-width: 65px;
padding-right: 10px;
}
&-input {
flex: 1;
line-height: 1.6;
padding: 4px 0;
min-height: 22px;
height: auto;
font-size: 14px;
}
&-placeholder {
font-size: @size-font-base;
}
&-input-right {
text-align: right;
}
}
/* 圆角输入框,强制展示边框 */
.g-input.g-input-wrapped::after {
display: block;
}
/* 圆角输入框出现错误时,将边框也置红 */
.g-input-wrapped.g-input-error::after {
border-color: @error-color;
}

View File

@ -1 +1,20 @@
@import "../../../styles/panel.less";
@import "../../../styles/base.less";
.g-panel {
position: relative;
overflow: hidden;
&-title {
font-size: @size-font-base;
line-height: 1;
color: @title-color;
padding: 20px 16px 10px;
}
&-content {
position: relative;
background: #fff;
overflow: hidden;
}
}

View File

@ -1,6 +1,7 @@
/** index.wxss **/
@import "../../../styles/cell.less";
@import "../../../styles/base.less";
@import "../../../styles/mixins.less";
.page-body {
height: 100vh;
display: flex;

View File

@ -1,5 +1,5 @@
/** index.wxss **/
@import "../../../styles/cell.less";
@import "../../../styles/base.less";
@import "../../../styles/mixins.less";
.page-body {

View File

@ -1,5 +1,5 @@
/** index.wxss **/
@import "../../../config/_base.less";
@import "../../../styles/base.less";
.page-body {
height: 100vh;

View File

@ -1,4 +1,4 @@
@import "../../../config/_base.less";
@import "../../../styles/base.less";
.container {
height: 100vh;
background-color: @background-color-base;

View File

@ -1,5 +1,5 @@
/** index.wxss **/
@import "../../../config/_base.less";
@import "../../../styles/base.less";
.page-body {
height: 100vh;

View File

@ -1,5 +1,5 @@
/** index.wxss **/
@import "../../../styles/cell.less";
@import "../../../styles/base.less";
.page-body {
display: flex;

View File

@ -1,5 +1,5 @@
/** index.wxss **/
@import "../../../config/_base.less";
@import "../../../styles/base.less";
page {
height: 100%;

View File

@ -1,6 +1,6 @@
/** index.wxss **/
@import "../../../styles/panel.less";
@import "../../../styles//cell.less";
@import "../../../styles/base.less";
@import "../../../styles/mixins.less";
.page-body {
height: 100vh;

View File

@ -1,5 +1,5 @@
/** index.wxss **/
@import "../../../../styles/cell.less";
@import "../../../../styles/base.less";
.page-body {
height: 100vh;

View File

@ -1,5 +1,5 @@
/** index.wxss **/
@import "../../../styles/cell.less";
@import "../../../styles/base.less";
.page-body {
height: 100vh;

View File

@ -1,5 +1,5 @@
/** index.wxss **/
@import "../../../../styles/cell.less";
@import "../../../../styles/base.less";
.page-body {
height: 100vh;

View File

@ -1,5 +1,5 @@
/** index.wxss **/
@import "../../../config/_base.less";
@import "../../../styles/base.less";
@import "../../../styles/mixins.less";
.page-body {

View File

@ -1,5 +1,5 @@
/** index.wxss **/
@import "../../../styles/cell.less";
@import "../../../styles/base.less";
@import "../../../styles/mixins.less";
.page-body {

View File

@ -1,5 +1,5 @@
/** index.wxss **/
@import "../../../styles/cell.less";
@import "../../../styles/base.less";
@import "../../../styles/mixins.less";
.page-body {

View File

@ -1,5 +1,5 @@
/** index.wxss **/
@import "../../../config/_base.less";
@import "../../../styles/base.less";
@import "../../../styles/mixins.less";
.page-body {

View File

@ -15,6 +15,8 @@
@text-color : #495060;
@active-color : #333;
@background-color-base : #f7f7f7; // base
// Border color

View File

@ -1,119 +0,0 @@
@import "./base.less";
.hairline() {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border: 0 solid @border-color-split;
}
.g-cell {
position: relative;
padding: 12px 15px;
display: flex;
background: #fff;
align-items: center;
line-height: 1.4;
font-size: @size-font-base;
overflow: hidden;
&-label {
color: @text-color;
min-width: 65px;
padding-right: 10px;
}
&-content {
flex: 1;
line-height: 1.6;
padding: 4px 0;
min-height: 22px;
height: auto;
font-size: 14px;
display: flex;
flex-direction: row;
align-items: center;
}
&-content-right:extend(&-content) {
// 不会写,这里
flex: 1;
line-height: 1.6;
padding: 4px 0;
min-height: 22px;
height: auto;
font-size: 14px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
&::after {
.hairline();
border-bottom-width: 1px;
left: 15px;
right: 0;
}
}
.g-input {
padding: 15px;
color: @text-color;
&-wrapped {
margin: 10px 15px;
background-color: #fff;
&::after {
left: 0;
border-width: 1px;
border-radius: 4px;
}
}
&-error {
color: @error-color;
}
&-title {
color: @text-color;
min-width: 65px;
padding-right: 10px;
}
&-input {
flex: 1;
line-height: 1.6;
padding: 4px 0;
min-height: 22px;
height: auto;
font-size: 14px;
}
&-placeholder {
font-size: @size-font-base;
}
&-input-right {
text-align: right;
}
}
/* 圆角输入框,强制展示边框 */
.g-input.g-input-wrapped::after {
display: block;
}
/* 圆角输入框出现错误时,将边框也置红 */
.g-input-wrapped.g-input-error::after {
border-color: @error-color;
}

View File

@ -1,7 +1,40 @@
@import "./base.less";
.hairline() {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border: 0 solid @border-color-split;
}
.active() {
opacity: 0.15;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border: inherit;
border-radius: inherit;
/* inherit parent's border radius */
transform: translate(-50%, -50%);
content: " ";
background-color: @active-color;
border-color: @active-color;
}
// 解决全屏幕机型底部适配问题
.safe-area-inset-bottom() {
padding-bottom: constant(safe-area-inset-bottom) !important; /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom) !important; /* 兼容 iOS >= 11.2 */
padding-bottom: constant(safe-area-inset-bottom) !important;
/* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom) !important;
/* 兼容 iOS >= 11.2 */
}

View File

@ -1,18 +0,0 @@
@import "./base.less";
.g-panel {
position: relative;
overflow: hidden;
&-title{
font-size: @size-font-base;
line-height: 1;
color: @title-color;
padding: 20px 16px 10px;
}
&-content{
position: relative;
background: #fff;
overflow: hidden;
}
}