Skip to content

H
hls-easy-ui
Commit 47a7d413 authored by Nature's avatar Nature
Browse files
Options

px to rem

parent e0683419
Expand all Show whitespace changes
Inline Side-by-side
Showing with 236 additions and 219 deletions
packages/common/styles/ionic-public-style.less
View file @ 47a7d413
.has-footer { .has-footer {
bottom: 44px; bottom: 0.88rem;
.scrollContent{ .scrollContent{
padding-bottom: 45px; padding-bottom: 0.9rem;
} }
} }
.header-top { .header-top {
margin-top: 34px; margin-top: 0.68rem;
} }
.has-tabs { .has-tabs {
.scrollContent{ .scrollContent{
padding-bottom: 50px; padding-bottom: 1rem;
} }
bottom: 50px; bottom: 1rem;
} }
.spinner svg { .spinner svg {
width: 28px; width: 0.56rem;
height: 28px; height: 0.56rem;
} }
.public-style { .public-style {
...@@ -26,32 +26,32 @@ ...@@ -26,32 +26,32 @@
width: 100%; width: 100%;
font-weight: inherit; font-weight: inherit;
.bar.button.button-icon .icon:before, .bar .button.button-icon.icon-left:before, .bar .button.button-icon.icon-right:before, .bar .button.button-icon:before, .bar button.button-icon .icon:before, .bar button.button-icon.icon-left:before, .bar button.button-icon.icon-right:before, .bar button.button-icon:before { .bar.button.button-icon .icon:before, .bar .button.button-icon.icon-left:before, .bar .button.button-icon.icon-right:before, .bar .button.button-icon:before, .bar button.button-icon .icon:before, .bar button.button-icon.icon-left:before, .bar button.button-icon.icon-right:before, .bar button.button-icon:before {
padding-right: 4px; padding-right: 0.8rem;
padding-left: 4px; padding-left: 0.8rem;
font-size: 32px; font-size: 0.64rem;
line-height: 32px; line-height: 0.64rem;
} }
.bar { .bar {
background-image: none; background-image: none;
padding: 5px 0; padding: 0.1rem 0;
height: 43px; height: 0.86rem;
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;
align-items: center; align-items: center;
-webkit-align-items: center; -webkit-align-items: center;
.title { .title {
height: 43px; height: 0.86rem;
min-width: 30px; min-width: 0.6rem;
line-height: normal; line-height: normal;
font-size: 17px; font-size: 0.34rem;
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;
justify-content: center; justify-content: center;
-webkit-justify-content: center; -webkit-justify-content: center;
align-items: center; align-items: center;
-webkit-align-items: center; -webkit-align-items: center;
padding-top: 4px; padding-top: 0.8rem;
} }
} }
.header-bar { .header-bar {
...@@ -60,14 +60,14 @@ ...@@ -60,14 +60,14 @@
.buttons { .buttons {
.button { .button {
color: @headerColor; color: @headerColor;
font-size: 16px; font-size: 0.32rem;
padding-left: 10px; padding-left: 0.2rem;
padding-right: 12.5px; padding-right: 0.25rem;
} }
} }
.title { .title {
color: #4A4A4A; color: #4A4A4A;
font-size: 17px; font-size: 0.34rem;
//font-weight: 600; //font-weight: 600;
left: 0 !important; left: 0 !important;
right: 0 !important; right: 0 !important;
...@@ -75,8 +75,8 @@ ...@@ -75,8 +75,8 @@
.iconLeft { .iconLeft {
text-align: left; text-align: left;
i { i {
font-size: 12.5px; font-size: 0.25rem;
padding-left: 5px; padding-left: 0.1rem;
} }
} }
} }
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
.list { .list {
background-color: #ffffff; background-color: #ffffff;
//border-bottom: 1px solid rgba(0, 0, 0, 0.10); //border-bottom: 1px solid rgba(0, 0, 0, 0.10);
margin-bottom: 10px; margin-bottom: 0.2rem;
.item:last-child { .item:last-child {
.contents { .contents {
border-bottom: none; border-bottom: none;
...@@ -113,9 +113,9 @@ ...@@ -113,9 +113,9 @@
transform: scale(1,1) transform: scale(1,1)
} }
.item { .item {
height: 45px; height: 0.9rem;
border: none; border: none;
padding: 0 0 0 15px; padding: 0 0 0 0.3rem;
.contents { .contents {
height: 100%; height: 100%;
width: 100%; width: 100%;
...@@ -127,7 +127,7 @@ ...@@ -127,7 +127,7 @@
align-items: center; align-items: center;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
-webkit-align-items: center; -webkit-align-items: center;
padding: 0 15px 0 0; padding: 0 0.3rem 0 0;
&.activated { &.activated {
opacity: 0.9; opacity: 0.9;
-webkit-transform: scale(0.95); -webkit-transform: scale(0.95);
...@@ -141,13 +141,13 @@ ...@@ -141,13 +141,13 @@
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
-webkit-align-items: center; -webkit-align-items: center;
letter-spacing: 0; letter-spacing: 0;
line-height: 16px; line-height: 0.32rem;
font-size: @font-size-big; font-size: @font-size-big;
color: #838E94; color: #838E94;
letter-spacing: 0; letter-spacing: 0;
text-align: center; text-align: center;
.left-icon { .left-icon {
margin-right: 10px; margin-right: 0.2rem;
} }
.required { .required {
display: flex; display: flex;
...@@ -155,9 +155,9 @@ ...@@ -155,9 +155,9 @@
.required::after { .required::after {
content: '*'; content: '*';
color: #D24E4E; color: #D24E4E;
height: 8px; height: 0.16rem;
padding-top: 4px; padding-top: 0.08rem;
margin-left: 2.5px; margin-left: 0.05rem;
} }
} }
.add-content { .add-content {
...@@ -174,7 +174,7 @@ ...@@ -174,7 +174,7 @@
white-space: normal; white-space: normal;
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
line-height: 20px; line-height: 0.4rem;
//输入框 //输入框
input { input {
font-size: @font-size-middle; font-size: @font-size-middle;
...@@ -186,7 +186,7 @@ ...@@ -186,7 +186,7 @@
} }
//右侧图标 //右侧图标
.right-icon { .right-icon {
margin-left: 10px; margin-left: 0.2rem;
} }
//toggle //toggle
.toggle-check { .toggle-check {
...@@ -197,15 +197,15 @@ ...@@ -197,15 +197,15 @@
-webkit-align-items: center; -webkit-align-items: center;
align-items: center; align-items: center;
.track { .track {
width: 40px; width: 0.8rem;
height: 25px; height: 0.5rem;
margin-right: 2.5px; margin-right: 0.05rem;
border-radius: 15px; border-radius: 0.3rem;
.handle { .handle {
width: 22.5px; width: 0.45rem;
height: 22.5px; height: 0.45rem;
top: 3.5px; top: 0.07rem;
left: 2.5px; left: 0.05rem;
} }
} }
} }
...@@ -213,10 +213,10 @@ ...@@ -213,10 +213,10 @@
border-color: @check-box-bg; border-color: @check-box-bg;
background-color: @check-box-bg; background-color: @check-box-bg;
.handle { .handle {
width: 22.5px; width: 0.45rem;
height: 22.5px; height: 0.45rem;
top: 3.5px; top: 0.07rem;
left: 9px; left: 0.18rem;
} }
} }
} }
...@@ -225,7 +225,7 @@ ...@@ -225,7 +225,7 @@
} }
} }
.bottom-tab { .bottom-tab {
height: 44px; height: 0.88rem;
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
position: fixed; position: fixed;
...@@ -257,7 +257,7 @@ ...@@ -257,7 +257,7 @@
} }
.bottom-tab-divider { .bottom-tab-divider {
width: 2px; /*no*/ width: 2px; /*no*/
height: 30px; height: 0.6rem;
background-color: rgb(214, 217, 218); background-color: rgb(214, 217, 218);
} }
} }
......
packages/common/styles/ionic.less
View file @ 47a7d413
This diff is collapsed.
packages/common/styles/platform-ios.less
View file @ 47a7d413
.platform-ios { .platform-ios {
.bar .title + .buttons { .bar .title + .buttons {
top: auto; top: auto;
bottom: 12px; bottom: 0.24rem;
} }
.has-header { .has-header {
top: 64px; top: 1.28rem;
} }
.header-top { .header-top {
margin-top: 63px; margin-top: 1.26rem;
} }
.img { .img {
margin-top: 10px; margin-top: 0.2rem;
} }
.bar { .bar {
background-image: none; background-image: none;
padding: 5px 0 5px 0; padding: 0.1rem 0 0.1rem 0;
height: 64px !important; height: 1.28rem !important;
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;
align-items: center; align-items: center;
-webkit-align-items: center; -webkit-align-items: center;
.title { .title {
height: 48px; height: 0.96rem;
min-width: 30px; min-width: 0.6rem;
line-height: 48px; line-height: 0.96rem;
font-size: 17px; font-size: 0.34rem;
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;
justify-content: center; justify-content: center;
-webkit-justify-content: center; -webkit-justify-content: center;
align-items: center; align-items: center;
-webkit-align-items: center; -webkit-align-items: center;
margin-top: 4px; margin-top: 0.08rem;
} }
} }
.content { .content {
...@@ -44,8 +44,8 @@ ...@@ -44,8 +44,8 @@
color: #D24E4E; color: #D24E4E;
position: absolute; position: absolute;
top: 0; top: 0;
right: -8px; right: -0.16rem;
height: 8px; height: 0.16rem;
padding-top: 2px; padding-top: 2px;
} }
} }
......
packages/common/styles/platform-iosx.less
View file @ 47a7d413
...@@ -2,18 +2,18 @@ ...@@ -2,18 +2,18 @@
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
.platform-ios{ .platform-ios{
.has-header { .has-header {
top: 84px; top: 1.68rem;
} }
.has-tabs { .has-tabs {
bottom: 84px; bottom: 1.68rem;
} }
.has-footer{ .has-footer{
margin-bottom: 34px; margin-bottom: 0.68rem;
} }
.public-style { .public-style {
.bottom-tab{ .bottom-tab{
height: 78px; height: 1.56rem;
padding-bottom: 34px; padding-bottom: 0.68rem;
} }
} }
} }
...@@ -21,21 +21,21 @@ ...@@ -21,21 +21,21 @@
// iPhoneX适配 // iPhoneX适配
@media (device-width: 414) and (device-height: 896){ @media (device-width: 414px) and (device-height: 896px){
.platform-ios{ .platform-ios{
.has-header { .has-header {
top: 84px; top: 1.68rem;
} }
.has-tabs { .has-tabs {
bottom: 84px; bottom: 1.68rem;
} }
.has-footer{ .has-footer{
margin-bottom: 34px; margin-bottom: 0.68rem;
} }
.public-style { .public-style {
.bottom-tab{ .bottom-tab{
height: 78px; height: 1.56rem;
padding-bottom: 34px; padding-bottom: 0.68rem;
} }
} }
} }
......
packages/common/styles/publicStyle.less
View file @ 47a7d413
...@@ -3,27 +3,27 @@ ...@@ -3,27 +3,27 @@
position: absolute !important; position: absolute !important;
top: 0; top: 0;
width: 100%; width: 100%;
height: 46px; height: 0.92rem;
font-size: 14px !important; font-size: 0.28rem !important;
background: white; background: white;
.vux-header-left { .vux-header-left {
font-size: 14px !important; font-size: 0.28rem !important;
top: 12px !important; top: 0.24rem !important;
line-height: 21px !important; line-height: 0.42rem !important;
.vux-header-back { .vux-header-back {
} }
.left-arrow { .left-arrow {
&before { &before {
width: 12px !important; width: 0.24rem !important;
height: 12px !important; height: 0.24rem !important;
} }
} }
} }
.vux-header-title { .vux-header-title {
height: 40px !important; height: 0.8rem !important;
line-height: 40px !important; line-height: 0.8rem !important;
font-size: 18px !important; font-size: 0.36rem !important;
} }
.vux-header-right { .vux-header-right {
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
} }
.weui-loading_toast .weui-toast__content { .weui-loading_toast .weui-toast__content {
margin-top: 7px !important; margin-top: 0.14rem !important;
} }
.weui-toast { .weui-toast {
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
max-width: 14em; max-width: 14em;
min-height: 3em !important; min-height: 3em !important;
top: 38% !important; top: 38% !important;
border-radius: 7px !important; border-radius: 0.14rem !important;
} }
.weui-toast.vux-toast-top { .weui-toast.vux-toast-top {
...@@ -58,27 +58,27 @@ ...@@ -58,27 +58,27 @@
} }
.weui-icon_toast { .weui-icon_toast {
margin: 15px 0 0 !important; margin: 0.3rem 0 0 !important;
} }
.weui-icon_toast.weui-loading { .weui-icon_toast.weui-loading {
width: 32px !important; width: 0.64rem !important;
height: 32px !important; height: 0.64rem !important;
} }
.weui-toast__content { .weui-toast__content {
//margin: 0 0 30px !important; //margin: 0 0 30px !important;
font-size: 16px !important; font-size: 0.32rem !important;
} }
.weui-toast_text .weui-toast__content { .weui-toast_text .weui-toast__content {
border-radius: 10px !important; border-radius: 0.2rem !important;
padding: 6px 7px; padding: 0.12rem 0.14rem;
} }
.weui-toast.vux-toast-bottom { .weui-toast.vux-toast-bottom {
top: auto !important; top: auto !important;
bottom: 50px !important; bottom: 1rem !important;
} }
.weui-toast_success { .weui-toast_success {
...@@ -88,8 +88,8 @@ ...@@ -88,8 +88,8 @@
width: auto !important; width: auto !important;
.weui-toast__content { .weui-toast__content {
margin: 10px 5px !important; margin: 0.2rem 0.1rem !important;
line-height: 21px !important; line-height: 0.42rem !important;
} }
} }
...@@ -105,22 +105,22 @@ ...@@ -105,22 +105,22 @@
} }
.weui-toast.weui-toast_forbidden .weui-toast__content { .weui-toast.weui-toast_forbidden .weui-toast__content {
margin: 10px 5px !important; margin: 0.2rem 0.1rem !important;
line-height: 21px !important; line-height: 0.42rem !important;
} }
.weui-icon_toast.weui-loading { .weui-icon_toast.weui-loading {
margin: 12px 0 0 !important; margin: 0.24rem 0 0 !important;
} }
.weui-icon_toast.weui-icon-success-no-circle:before { .weui-icon_toast.weui-icon-success-no-circle:before {
font-size: 34px !important; font-size: 0.68rem !important;
} }
.weui-dialog { .weui-dialog {
width: 70% !important; width: 70% !important;
max-width: 260px !important; max-width: 5.2rem !important;
border-radius: 10px !important; border-radius: 0.2rem !important;
} }
.weui-dialog__hd { .weui-dialog__hd {
...@@ -128,16 +128,16 @@ ...@@ -128,16 +128,16 @@
} }
.weui-tabbar__item { .weui-tabbar__item {
padding: 6px 0 0 !important; padding: 0.12rem 0 0 !important;
} }
.weui-tabbar__icon { .weui-tabbar__icon {
width: 22px !important; width: 0.44rem !important;
height: 22px !important; height: 0.44rem !important;
} }
.weui-tabbar__label { .weui-tabbar__label {
font-size: 12px !important; font-size: 0.24rem !important;
} }
...@@ -148,52 +148,52 @@ ...@@ -148,52 +148,52 @@
.weui-dialog__title { .weui-dialog__title {
font-weight: 600 !important; font-weight: 600 !important;
font-size: 18px !important; font-size: 0.36rem !important;
} }
.weui-dialog__bd { .weui-dialog__bd {
font-size: 15px !important; font-size: 0.3rem !important;
min-height: 0.4rem; min-height: 0.4rem;
} }
.weui-dialog__ft { .weui-dialog__ft {
line-height: 48px !important; line-height: 0.96rem !important;
font-size: 18px !important; font-size: 0.36rem !important;
} }
.dp-header { .dp-header {
.vux-datetime-cancel { .vux-datetime-cancel {
padding-left: 15px !important; padding-left: 0.3rem !important;
} }
.vux-datetime-confirm { .vux-datetime-confirm {
padding-right: 15px !important; padding-right: 0.3rem !important;
} }
} }
.dp-header .dp-item { .dp-header .dp-item {
font-size: 16px !important; font-size: 0.32rem !important;
height: 44px !important; height: 0.88rem !important;
line-height: 44px !important; line-height: 0.88rem !important;
} }
.dp-content { .dp-content {
padding: 10px 0 !important; padding: 0.2rem 0 !important;
} }
.scroller-component { .scroller-component {
height: 238px !important; height: 4.76rem !important;
background-color: #fff; background-color: #fff;
z-index: 2; z-index: 2;
} }
.scroller-mask { .scroller-mask {
background-size: 100% 102px !important; background-size: 100% 2.04rem !important;
} }
.scroller-indicator { .scroller-indicator {
top: 102px !important; top: 2.04rem !important;
height: 34px !important; height: 0.68rem !important;
line-height: 34px !important; line-height: 0.68rem !important;
//border-bottom: 1px solid #cccccc !important; //border-bottom: 1px solid #cccccc !important;
//border-top: 1px solid #cccccc !important; //border-top: 1px solid #cccccc !important;
background-image: none !important; background-image: none !important;
...@@ -207,9 +207,9 @@ ...@@ -207,9 +207,9 @@
} }
.scroller-item { .scroller-item {
font-size: 16px !important; font-size: 0.32rem !important;
height: 34px !important; height: 0.68rem !important;
line-height: 34px !important; line-height: 0.68rem !important;
} }
.weui-cells { .weui-cells {
...@@ -231,7 +231,7 @@ ...@@ -231,7 +231,7 @@
} }
.weui-textarea { .weui-textarea {
font-size: 16px !important; font-size: 0.32rem !important;
} }
.lg-preview-img { .lg-preview-img {
......
packages/components/BottomTab/index.vue
View file @ 47a7d413
...@@ -41,22 +41,18 @@ export default { ...@@ -41,22 +41,18 @@ export default {
// iPhoneX适配 // iPhoneX适配
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
.platform-ios { .platform-ios {
//.h-ios {
.h-bottom-tab { .h-bottom-tab {
height: 78px; height: 78px;
padding-bottom: 34px; padding-bottom: 34px;
} }
//}
} }
} }
@media (device-width: 414px) and (device-height: 896px){ @media (device-width: 414px) and (device-height: 896px){
.platform-ios { .platform-ios {
//.h-ios {
.h-bottom-tab { .h-bottom-tab {
height: 78px; height: 78px;
padding-bottom: 34px; padding-bottom: 34px;
} }
//}
} }
} }
......
packages/components/NumberKeyboard/index.vue
View file @ 47a7d413
...@@ -98,6 +98,28 @@ ...@@ -98,6 +98,28 @@
border-bottom: 1px solid #e5e5e5; /*no*/ border-bottom: 1px solid #e5e5e5; /*no*/
border-right: 1px solid #e5e5e5; /*no*/ border-right: 1px solid #e5e5e5; /*no*/
&:nth-child(3){
border-right: none;
}
&:nth-child(6){
border-right: none;
}
&:nth-child(9){
border-right: none;
}
&:nth-child(10){
border-right: none;
border-bottom: none;
}
&:nth-child(11){
border-right: none;
border-bottom: none;
}
&:nth-child(12){
border-right: none;
border-bottom: none;
}
} }
.delete { .delete {
......
src/App.vue
View file @ 47a7d413
...@@ -66,7 +66,6 @@ export default { ...@@ -66,7 +66,6 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
html, body, #app { html, body, #app {
height: 100%; height: 100%;
width: 100%; width: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment