From bdc795300ab8dc52686abea0bd8d80d2f48410dc Mon Sep 17 00:00:00 2001 From: lfs3 Date: Wed, 14 Aug 2019 08:10:26 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=8F=E5=8C=BA=E9=80=89=E6=8B=A9=E7=95=8C?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/common/border.scss | 115 +++ src/assets/styles/common/common.scss | 1093 ++++++++++++++++++++++ src/assets/styles/common/icon.scss | 165 ++++ src/assets/styles/common/mixin.scss | 86 ++ src/assets/styles/common/transition.scss | 46 + src/assets/styles/common/variables.scss | 19 + src/assets/styles/index.scss | 203 ++++ src/components/nav-bottom.vue | 4 +- src/main.js | 1 + src/view/choose-community.vue | 19 + src/view/home.vue | 3 +- src/view/order-list.vue | 2 +- 12 files changed, 1752 insertions(+), 4 deletions(-) create mode 100644 src/assets/styles/common/border.scss create mode 100644 src/assets/styles/common/common.scss create mode 100644 src/assets/styles/common/icon.scss create mode 100644 src/assets/styles/common/mixin.scss create mode 100644 src/assets/styles/common/transition.scss create mode 100644 src/assets/styles/common/variables.scss create mode 100644 src/assets/styles/index.scss create mode 100644 src/view/choose-community.vue diff --git a/src/assets/styles/common/border.scss b/src/assets/styles/common/border.scss new file mode 100644 index 0000000..4a21378 --- /dev/null +++ b/src/assets/styles/common/border.scss @@ -0,0 +1,115 @@ +.border-1px { + position: relative; + &::before { + @include border-1px(); + } +} + +.border-1px-t { + position: relative; + &::before { + @include border-1px-top(); + } +} + +.border-1px-l { + position: relative; + &::before { + @include border-1px-left(); + } +} + +.border-1px-r { + position: relative; + &::after { + @include border-1px-right(); + } +} + +.border-1px-b { + position: relative; + &::after { + @include border-1px-bottom(); + } +} + +@media (-webkit-min-device-pixel-ratio: 2) { + .f-bb-gray { + position: relative; + &::after { + @include border-1px-bottom(#E8E8E8); + } + } + .f-bt-gray { + position: relative; + &::before { + @include border-1px-top(#E8E8E8); + } + } + .f-br-gray { + &::after { + @include border-1px-right(#E8E8E8); + } + } + .f-bl-gray { + &::before { + @include border-1px-left(#E8E8E8); + } + } + .f-bb-gray-dashed { + position: relative; + &:after { + height: 1px; + content: ''; + width: 100%; + border-bottom: 1px dashed #dcdcdc; + position: absolute; + bottom: -1px; + right: 0; + transform: scaleY(0.5); + -webkit-transform: scaleY(0.5); + } + } + .f-bb-blue { + position: relative; + &:after { + @include border-1px-bottom(#33a7e6); + } + } + .f-bt-1px { + position: relative; + &:after { + @include border-1px-bottom(#D6D6D6); + } + } + .f-border-grey { + /* content: ''; + position: absolute; + top: 0; + left: 0; + border: 1px solid #e8e8e8; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 200%; + height: 200%; + -webkit-transform: scale(0.5); + transform: scale(0.5); + -webkit-transform-origin: left top; + transform-origin: left top; + z-index: 0; + border-radius: 3px; */ + + position: relative; + &::before { + @include border-1px(#e8e8e8, 3px); + } + } +} + +.f-border-r4{ + border-radius: 4px; +} + +.f-border-b-E5{ + border-bottom: 1px solid #f3f3f3; +} diff --git a/src/assets/styles/common/common.scss b/src/assets/styles/common/common.scss new file mode 100644 index 0000000..41697cc --- /dev/null +++ b/src/assets/styles/common/common.scss @@ -0,0 +1,1093 @@ +.container { + width: 100%; + min-height: 100%; + position: relative; +} + +.f-fl { + float: left; +} + +.f-fr { + float: right; +} + +.f-relative { + position: relative; +} + +.f-absolute { + position: absolute; +} + +.f-fixed { + position: fixed; +} + +.f-no-margin { + margin: 0 !important; +} + +.f-mrl10 { + margin: 0 10px !important; +} + +.f-no-mr { + margin-right: 0 !important; +} + +.f-no-mb { + margin-bottom: 0 !important; +} + +.f-no-padding { + padding: 0 !important; +} + +.f-no-pr { + padding: 0 !important; +} + +.f-halfwidth { + width: 50% !important; +} + +.f-fullwidth { + width: 100% !important; +} + +.f-fullheight { + height: 100% !important; +} + +.f-text-left { + text-align: left; +} + +.f-text-center { + text-align: center; +} + +.f-text-right { + text-align: right; +} + +.f-show { + display: block !important; +} + +.f-hide { + display: none; +} + +.f-inblock { + display: inline-block; +} + +.f-table { + display: table; +} + +.f-table-cell { + display: table-cell; + vertical-align: middle; +} + +.f-vt { + vertical-align: top; +} + +.f-vm { + vertical-align: middle; +} + +.l-height-1 { + line-height: 1; +} + +.l-height-15 { + line-height: 15px; +} + +.l-height-18 { + line-height: 18px; +} + +.f-flex { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} + +.f-flex-1 { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.f-flex-center { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.f-flex-justify { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.f-flex-column { + -webkit-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.f-mb2 { + margin-bottom: 2px; +} + +.f-mb3 { + margin-bottom: 3px; +} + +.f-mb4 { + margin-bottom: 4px; +} + +.f-mb5 { + margin-bottom: 5px; +} + +.f-mb7 { + margin-bottom: 7px; +} + +.f-mb8 { + margin-bottom: 8px; +} + +.f-mb10 { + margin-bottom: 10px; +} + +.f-mb12 { + margin-bottom: 12px; +} + +.f-mb15 { + margin-bottom: 15px; +} + +.f-mb20 { + margin-bottom: 20px; +} + +.f-mb25 { + margin-bottom: 25px; +} + +.f-mb30 { + margin-bottom: 30px; +} + +.f-mb35 { + margin-bottom: 35px; +} + +.f-mb40 { + margin-bottom: 40px; +} + +.f-mb18 { + margin-bottom: 18px; +} + +.f-mb60 { + margin-bottom: 60px; +} + +.f-mb90 { + margin-bottom: 90px; +} + +.f-mt-1 { + margin-top: -1px; +} + +.f-mt-2 { + margin-top: -2px; +} + +.f-mt-3 { + margin-top: -3px; +} + +.f-mt-10 { + margin-top: -10px; +} + +.f-mt3 { + margin-top: 3px; +} + +.f-mt5 { + margin-top: 5px; +} + +.f-mt10 { + margin-top: 10px !important; +} + +.f-mt15 { + margin-top: 15px; +} + +.f-mt20 { + margin-top: 20px; +} + +.f-mt25 { + margin-top: 25px; +} + +.f-mt30 { + margin-top: 30px; +} + +.f-mt40 { + margin-top: 40px; +} + +.f-mt50 { + margin-top: 50px; +} + +.f-mt116 { + margin-top: 116px; +} + +.f-mr3 { + margin-right: 3px; +} + +.f-mr5 { + margin-right: 5px; +} + +.f-mr6 { + margin-right: 6px; +} + +.f-mr7 { + margin-right: 7px; +} + +.f-mr10 { + margin-right: 10px; +} + +.f-mr13 { + margin-right: 13px; +} + +.f-mr15 { + margin-right: 15px; +} + +.f-mr16 { + margin-right: 16px; +} + +.f-mr20 { + margin-right: 20px; +} + +.f-mr25 { + margin-right: 25px; +} + +.f-mr28 { + margin-right: 28px; +} + +.f-mr30 { + margin-right: 30px; +} + +.f-mr35 { + margin-right: 35px; +} + +.f-mr40 { + margin-right: 40px; +} + +.f-ml-5 { + margin-left: -5px; +} + +.f-ml3 { + margin-left: 3px; +} + +.f-ml5 { + margin-left: 5px; +} + +.f-ml6 { + margin-left: 6px; +} + +.f-ml7 { + margin-left: 7px; +} + +.f-ml8 { + margin-left: 8px; +} + +.f-ml10 { + margin-left: 10px; +} + +.f-ml12 { + margin-left: 12px; +} + +.f-ml13 { + margin-left: 13px; +} + +.f-ml15 { + margin-left: 15px; +} + +.f-ml16 { + margin-left: 16px; +} + +.f-ml20 { + margin-left: 20px; +} + +.f-ml25 { + margin-left: 25px; +} + +.f-ml30 { + margin-left: 30px; +} + +.f-ml50 { + margin-left: 50px; +} + +.f-p-15 { + padding: 15px; +} + +.f-pt0 { + padding-top: 0px; +} + +.f-pt2 { + padding-top: 2px; +} + +.f-pt5 { + padding-top: 5px; +} + +.f-pt10 { + padding-top: 10px !important; +} + +.f-pt12 { + padding-top: 12px; +} + +.f-pt15 { + padding-top: 15px !important; +} + +.f-pt20 { + padding-top: 20px !important; +} + +.f-pt25 { + padding-top: 25px; +} + +.f-pt30 { + padding-top: 30px; +} + +.f-pt35 { + padding-top: 35px; +} + +.f-pt40 { + padding-top: 40px; +} + +.f-pt50 { + padding-top: 50px; +} + +.f-pt70 { + padding-top: 70px; +} + +.f-pt110 { + padding-top: 110px; +} + +.f-pt120 { + padding-top: 120px; +} + +.f-pt180 { + padding-top: 180px; +} + +.f-pb0 { + padding-bottom: 0px !important; +} + +.f-pb5 { + padding-bottom: 5px !important; +} + +.f-pb7 { + padding-bottom: 7px !important; +} + +.f-pb10 { + padding-bottom: 10px !important; +} + +.f-pb12 { + padding-bottom: 12px; +} + +.f-pb13 { + padding-bottom: 13px; +} + +.f-pb15 { + padding-bottom: 15px !important; +} + +.f-pb20 { + padding-bottom: 20px; +} + +.f-pb25 { + padding-bottom: 25px; +} + +.f-pb30 { + padding-bottom: 30px; +} + +.f-pb40 { + padding-bottom: 40px; +} + +.f-pb50 { + padding-bottom: 50px; +} + +.f-pb60 { + padding-bottom: 60px; +} + +.f-pb70 { + padding-bottom: 70px; +} + +.f-pb90 { + padding-bottom: 90px; +} + +.f-pb95 { + padding-bottom: 95px; +} + +.f-pl5 { + padding-left: 5px; +} + +.f-pl10 { + padding-left: 10px; +} + +.f-pl15 { + padding-left: 15px; +} + +.f-pl25 { + padding-left: 25px; +} + +.f-pl20 { + padding-left: 20px !important; +} + +.f-pl29 { + padding-left: 29px; +} + +.f-pl30 { + padding-left: 30px; +} + +.f-pl35 { + padding-left: 35px; +} + +.f-pl40 { + padding-left: 40px; +} + +.f-pl50 { + padding-left: 50px; +} + +.f-pr5 { + padding-right: 5px; +} + +.f-pr10 { + padding-right: 10px; +} + +.f-pr13 { + padding-right: 13px; +} + +.f-pr15 { + padding-right: 15px; +} + +.f-pr16 { + padding-right: 16px; +} + +.f-pr20 { + padding-right: 20px !important; +} + +.f-pr25 { + padding-right: 25px; +} + +.f-pr30 { + padding-right: 30px; +} + +.f-pr35 { + padding-right: 35px; +} + +.f-pr40 { + padding-right: 40px; +} + +.f-bold { + font-weight: bold; +} + +.f-bg-white { + background-color: #fff; +} + +.f-bg-blue { + background-color: #4BBCEF; +} + +.f-h10{ + height: 10px; +} + +.f-h15{ + height: 15px; +} + +.f-h20{ + height: 20px; +} + +.f-h23{ + height: 23px; +} + +.f-h30{ + height: 30px; +} + +.f-h36{ + height: 36px; +} + +.f-h38{ + height: 38px; +} + +.f-h40{ + height: 40px; +} + +.f-h45{ + height: 45px; +} + +.f-h48{ + height: 48px; +} + +.f-h50{ + height: 50px; +} + +.f-h55{ + height: 55px; +} + +.f-h60{ + height: 60px; +} + +.f-h65{ + height: 65px; +} + +.f-h67{ + height: 67px; +} + +.f-h70{ + height: 70px; +} + +.f-h80{ + height: 80px; +} + +.f-h90{ + height: 90px; +} + +.f-h100{ + height: 100px; +} + +.f-h105{ + height: 105px; +} + +.f-w15{ + width: 15px; +} + +.f-w18{ + width: 18px; +} + +.f-w36{ + width: 36px; +} + +.f-w60{ + width: 60px; +} + +.f-w67{ + width: 67px; +} + +.f-w70{ + width: 70px; +} + +.f-w100{ + width: 100px; +} + +.f-flex-a-start{ + align-items: flex-start; +} + +.f-flex-a-end{ + align-items: flex-end; +} + +.f-flex-j-start{ + justify-content: flex-start; +} + +.f-flex-j-end{ + justify-content: flex-end; +} + +.f-text-1F { + color: #1F1F1F; +} + +.f-text-333 { + color: #333333; +} + +.f-text-666 { + color: #999999; +} + +.f-text-999 { + color: #999999; +} + +.f-text-blue{ + color: #009EE0; +} + +.s-black { + color: #323232; +} + +.s-white { + color: #fff; +} + +.s-deep-grey { + color: #aaa; +} + +.s-light-grey { + color: #a0a0a0; +} + +.s-grey { + color: #a3c5e1; +} + +.s-red { + color: #ff534a; +} + +.s-blue { + color: #00a0e8; +} + +.s-orange { + color: #FFA75C; +} + +.s-light-blue { + color: #99c9f0; +} + +.s-yellow { + color: #eea22a; +} + +.s-green { + color: #22c518; +} + +.f-font-10 { + font-size: 10px !important; +} + +.f-font-11 { + font-size: 11px; +} + +.f-font-12 { + font-size: 12px !important; +} + +.f-font-13 { + font-size: 13px; +} + +.f-font-14 { + font-size: 14px; +} + +.f-font-15 { + font-size: 15px; +} + +.f-font-16 { + font-size: 16px !important; +} + +.f-font-17 { + font-size: 17px; +} + +.f-font-18 { + font-size: 18px; +} + +.f-font-20 { + font-size: 20px; +} + +.f-font-22 { + font-size: 22px; +} + +.f-font-25 { + font-size: 25px; +} + +.f-font-30 { + font-size: 30px; +} + +.f-ellipsis-1 { + display: block; + word-break: keep-all; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.f-ellipsis-2 { + display: -webkit-box; + -webkit-line-clamp: 2; + overflow: hidden; + -webkit-box-orient: vertical; +} + +.f-ellipsis-3 { + display: -webkit-box; + -webkit-line-clamp: 3; + overflow: hidden; + -webkit-box-orient: vertical; +} + +.f-md-2{ + width: 50%; +} + +.f-md-3{ + width: 33.33%; +} + +.f-md-4{ + width: 25%; +} + +.overflow-x { + overflow-y: hidden; + overflow-x: scroll; + white-space: nowrap; +} + +.overflow-y { + overflow-y: auto; + overflow-x: hidden; + white-space: nowrap; +} + +.object-cover { + object-fit: cover; +} + +// min +.m-w-60 { + min-width: 60px; +} + +// button +.m-footer-btn { + position: fixed; + left: 0; + bottom: 0; + height: 50px; + width: 100%; + background-color: #fff; + z-index: 9; + .left { + position: relative; + &::after { + height: 1px; + content: ''; + width: 100%; + border-top: 1px solid #e2e2e2; + position: absolute; + top: -0.5px; + right: 0; + transform: scaleY(0.5); + -webkit-transform: scaleY(0.5); + } + } + div.button { + width: 50%; + height: 50px; + float: left; + } +} +.m-order-btn { + position: fixed; + left: 0; + bottom: 0; + height: 55px; + width: 100%; + background-color: #fff; + font-size: 14px; + z-index: 9; + button { + height: 25px; + } +} + +// nav +.m-nav { + padding: 0 10px; + background-color: #008de0; + ul { + width: 100%; + height: 50px; + li { + font-size: 15px; + color: #a3cbf0; + text-align: center; + flex: 1; + height: 50px; + line-height: 50px; + position: relative; + } + } + &__on { + font-size: 18px !important; + font-weight: bold; + color: #fff !important; + &::after { + content: ''; + position: absolute; + left: 50%; + bottom: 0; + display: inline-block; + width: 32px; + height: 4px; + background-color: #fff; + margin-left: -16px; + } + } +} + +// loadmore +.load-more-tips { + padding-bottom: 15px; + text-align: center; + color: #999; +} + +.load-more-normal { + height: 1px; + line-height: 1px; +} + +.load-more-hide { + height: 0; +} + +// placeholder-color +input { + &::-webkit-input-placeholder { + color: #cecece; + } + &:-moz-placeholder { + color: #cecece; + } + &:-ms-input-placeholder { + color: #cecece; + } + &::placeholder { + color: #cecece; + } +} + +textarea { + &::-webkit-input-placeholder { + color: #cecece; + } + &:-moz-placeholder { + color: #cecece; + } + &:-ms-input-placeholder { + color: #cecece; + } + &::placeholder { + color: #cecece; + } +} + +.triangle_border_down{ //倒三角（没选） + width:0; + height:0; + border-width:3.5px 3.5px 0; + border-style:solid; + border-color:#666666 transparent transparent;/*灰 透明 透明 */ + position:relative; +} + +.triangle_border_top{ //正三角（选中） + width:0; + height:0; + border-width:0 3.5px 3.5px; + border-style:solid; + border-color:transparent transparent #009DDF;/*灰 透明 透明 */ + position:relative; +} + +.f-ws-nowrap{ + white-space: nowrap; +} + +.f-ws-wrap{ + white-space: wrap; +} + +.f-transform-180 { + transform: rotate(180deg); + -webkit-transform: rotate(180deg); + transition: transform .5s; +} + +.slide { + overflow: hidden; + max-height: 0; + transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s; +} +.animate { + max-height: 9999px; + transition-timing-function: cubic-bezier(0.5, 0, 1, 0); + transition-delay: 0s; +} + +.weui-dialog__btn_primary { + color: #009DDF!important; +} + +.vux-popup-header-right { + padding-right: 15px; + color: #00A0E8!important; +} + +.dp-header .dp-item.dp-right { + color: #00A0E8!important; +} diff --git a/src/assets/styles/common/icon.scss b/src/assets/styles/common/icon.scss new file mode 100644 index 0000000..b1f8f68 --- /dev/null +++ b/src/assets/styles/common/icon.scss @@ -0,0 +1,165 @@ +.icon { + width: 24px; + height: 24px; + display: inline-block; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-11 { + width: 11px; + height: 11px; +} + +.icon-13 { + width: 13px; + height: 13px; +} + +.icon-14 { + width: 14px; + height: 14px; +} + +.icon-15 { + width: 15px; + height: 15px; +} + +.icon-16 { + width: 16px; + height: 16px; +} + +.icon-17 { + width: 17px; + height: 17px; +} + +.icon-18 { + width: 18px; + height: 18px; +} + +.icon-20 { + width: 20px; + height: 20px; +} + +.icon-22 { + width: 22px; + height: 22px; +} + +.icon-25 { + width: 25px; + height: 25px; +} + +.icon-28 { + width: 26px; + height: 26px; +} + +.icon-30 { + width: 30px; + height: 30px; +} + +.icon-33 { + width: 33px; + height: 33px; +} + +.icon-35 { + width: 35px; + height: 35px; +} + +.icon-44 { + width: 44px; + height: 44px; +} + +.icon-65 { + width: 65px; + height: 65px; +} + +.icon-arrow { + width: 6px; + height: 11px; +} + +.icon-width-3 { + width: 3px; +} + +.icon-width-14 { + width: 14px; +} + +.icon-width-6 { + width: 6px; +} + +.icon-width-10 { + width: 10px; +} + +.icon-width-19 { + width: 19px; +} + +.arrow-back { + width: 10px; + height: 18px; + margin-top: -4px; +} + +// .icon-close { +// background: url(../assets/images/delete.png) no-repeat; +// background-size: contain; +// } + +.arrow-left { + position: relative; + + &:before { + content: ' '; + display: inline-block; + height: 10px; + width: 10px; + border-width: 2px 2px 0 0; + border-color: #000; + border-style: solid; + -webkit-transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0); + transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0); + position: absolute; + top: 50%; + left: 0; + margin-top: -5px; + } +} + +.arrow-right { + position: relative; + + &:after { + content: ' '; + display: inline-block; + height: 10px; + width: 10px; + border-width: 2px 2px 0 0; + border-color: #c8c8cd; + border-style: solid; + -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); + transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); + position: absolute; + top: 50%; + right: 0px; + margin-top: -6px; + } +} diff --git a/src/assets/styles/common/mixin.scss b/src/assets/styles/common/mixin.scss new file mode 100644 index 0000000..bdff636 --- /dev/null +++ b/src/assets/styles/common/mixin.scss @@ -0,0 +1,86 @@ +@mixin clearfix { + &:after { + content: ''; + display: table; + clear: both; + } +} + +@mixin scrollBar { + &::-webkit-scrollbar-track-piece { + background: #d3dce6; + } + &::-webkit-scrollbar { + width: 6px; + } + &::-webkit-scrollbar-thumb { + background: #99a9bf; + border-radius: 20px; + } +} + +@mixin border-1px($color: #464353, $radius: 0px) { + content: ' '; + position: absolute; + left: 0; + top: 0; + width: 200%; + height: 200%; + border: 1px solid $color; + color: $color; + border-radius: $radius; + transform-origin: left top; + transform: scale(0.5); +} + +@mixin border-1px-top($color: #464353) { + content: ' '; + position: absolute; + left: 0; + top: 0; + right: 0; + height: 1px; + border-top: 1px solid $color; + color: $color; + transform-origin: 0 0; + transform: scaleY(0.5); +} + +@mixin border-1px-bottom($color: #464353) { + content: ' '; + position: absolute; + left: 0; + bottom: 0; + right: 0; + height: 1px; + border-bottom: 1px solid $color; + color: $color; + transform-origin: 0 100%; + transform: scaleY(0.5); +} + +@mixin border-1px-left($color: #464353) { + content: ' '; + position: absolute; + left: 0; + top: 0; + width: 1px; + bottom: 0; + border-left: 1px solid $color; + color: $color; + transform-origin: 0 0; + transform: scaleX(0.5); +} + +@mixin border-1px-right($color: #464353) { + content: ' '; + position: absolute; + right: 0; + top: 0; + width: 1px; + bottom: 0; + border-right: 1px solid $color; + color: $color; + transform-origin: 100% 0; + transform: scaleX(0.5); +} diff --git a/src/assets/styles/common/transition.scss b/src/assets/styles/common/transition.scss new file mode 100644 index 0000000..8dd9b04 --- /dev/null +++ b/src/assets/styles/common/transition.scss @@ -0,0 +1,46 @@ +//globl transition css + +/*fade*/ +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.28s; +} + +.fade-enter, +.fade-leave-active { + opacity: 0; +} + +/*fade-transform*/ +.fade-transform-leave-active, +.fade-transform-enter-active { + transition: all .5s; +} +.fade-transform-enter { + opacity: 0; + transform: translateX(-30px); +} +.fade-transform-leave-to { + opacity: 0; + transform: translateX(30px); +} + +/*fade*/ +.breadcrumb-enter-active, +.breadcrumb-leave-active { + transition: all .5s; +} + +.breadcrumb-enter, +.breadcrumb-leave-active { + opacity: 0; + transform: translateX(20px); +} + +.breadcrumb-move { + transition: all .5s; +} + +.breadcrumb-leave-active { + position: absolute; +} diff --git a/src/assets/styles/common/variables.scss b/src/assets/styles/common/variables.scss new file mode 100644 index 0000000..34e74b1 --- /dev/null +++ b/src/assets/styles/common/variables.scss @@ -0,0 +1,19 @@ +//sidebar +$menuBg: #304156; +$subMenuBg: #1f2d3d; +$menuHover: #001528; + +// public +$appWidth: 750px; +$appBg: #ededed; + +$colorWhite: #fff; +$errorColor: #f45438; + +// login +$versionColor: #aaa; +$borderBottomColor: #ccc; +$inputColor: #323232; +$placeholderColor: #c2c2c2; +$vertifyColor: #009ee0; +$loginButtonColor: #0099e0; diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss new file mode 100644 index 0000000..c796e82 --- /dev/null +++ b/src/assets/styles/index.scss @@ -0,0 +1,203 @@ +@import './common/icon.scss'; +@import './common/mixin.scss'; +// @import './common/transition.scss'; +@import './common/variables.scss'; +@import './common/border.scss'; +@import './common/common.scss'; + +* { + margin: 0; + padding: 0; +} + +img { + max-width: 100%; + vertical-align: middle; +} + +html, +body { + width: 100%; + height: 100%; +} + +@media screen and (min-width: 640px) { + body body, + body html, + html body, + html html { + width: 50%; + margin: 0 auto; + left: 25%; + } +} + +body { + min-height: 100%; + line-height: 1.6; + background-color: #ededed; + font-family: PingFang-SC-Regular, Arial, sans-serif; + font-size: 14px; + color: #323232; +} + +button { + border: none; + outline: none; + background: none; +} + +*, +*:before, +*:after { + box-sizing: border-box; +} + +a, +a:focus, +a:hover { + cursor: pointer; + outline: none; + text-decoration: none; +} + +div:focus { + outline: none; +} + +input::-webkit-input-placeholder, +textarea::-webkit-input-placeholder { + color: #cecece; +} + +.clearfix { + &:after { + visibility: hidden; + display: block; + font-size: 0; + content: ' '; + clear: both; + height: 0; + } +} + +.vertical-middle:after { + content: ''; + width: 0; + height: 100%; + display: inline-block; + vertical-align: middle; +} + +#app { + width: 100%; + max-width: 750px; + height: 100%; + margin: 0 auto; +} + +@media screen and (min-width: 640px) { + .footer-toolbar { + width: 50% !important; + margin: 0 auto; + left: 25% !important; + } +} + +select, +textarea, +input { + vertical-align: middle; + border: 0; + background: none; + -webkit-border-radius: 0; + border-radius: 0; + outline: none; + -webkit-appearance: none; + -webkit-tap-highlight-color: transparent; + font-size: 14px; +} + +ul, +ul li { + list-style: none; +} + +p { + word-break: break-word; +} +.el-input { + width: auto!important; +} +.el-input--suffix .el-input__inner { + height: 28px; + line-height: 28px; + background: #EDEDED; + border: none; + border-radius: 16px; +} +.el-input__icon { + line-height: 28px; +} +.el-dropdown-menu { + padding: 5px 0!important; +} +.el-dropdown-menu__item { + border-bottom: 1px solid #E3E3E3; + text-align: center; + font-size: 14px!important; + color: #333333!important; + margin: 0 10px!important; + padding: 0 10px!important; +} +.el-dropdown-menu__item:nth-last-child(2) { + border-bottom: none; +} + +.md-example-child-steps-5 { + height: 40px!important; +} +.md-steps.md-steps-horizontal { + padding: 5px 16px 0px!important; +} +.md-steps.md-steps-horizontal .bar.horizontal-bar .bar-inner { + width: 100%; + height: 1px; + background-color: #00A0E8; +} +.md-steps .step-wrapper .text-wrapper { + padding-top: 0px!important; + + .name { + line-height: 15px!important; + font-size: 11px!important; + color: #C4C4C4!important; + } +} +.md-steps.md-steps-horizontal .step-wrapper.reached .text-wrapper .name { + color: #333333!important; +} +.md-steps.md-steps-horizontal .step-wrapper.current .text-wrapper .name { + color: #00A0E8!important; +} +.md-steps .icon-wrapper .step-node-default-icon { + width: 10px!important; + height: 10px!important; +} +.md-steps .step-wrapper.reached .icon-wrapper .step-node-default-icon { + background: #00A0E8!important; + width: 12px!important; + height: 12px!important; +} +.md-steps .step-wrapper.current .icon-wrapper .step-node-default-icon { + background: #00A0E8!important; + width: 12px!important; + height: 12px!important; +} +.md-steps .step-wrapper, .md-steps .step-wrapper .icon-wrapper { + min-width: 16px!important; + min-height: 16px!important; +} +.md-steps.md-steps-horizontal .step-wrapper { + margin: 0 5px!important; +} diff --git a/src/components/nav-bottom.vue b/src/components/nav-bottom.vue index 1d8faf1..0bf467a 100644 --- a/src/components/nav-bottom.vue +++ b/src/components/nav-bottom.vue @@ -5,11 +5,11 @@ 首页 - + 服务 - + 我的 diff --git a/src/main.js b/src/main.js index a727bfb..bf1a162 100644 --- a/src/main.js +++ b/src/main.js @@ -14,6 +14,7 @@ import router from "./router"; import "@/assets/iconfont.css"; import "@/assets/styles/main.scss"; import "@/assets/styles/style.css"; +import '@/assets/styles/index.scss' // global css import "@/common/rem.js"; import ElementUI from "element-ui"; import "element-ui/lib/theme-chalk/index.css"; diff --git a/src/view/choose-community.vue b/src/view/choose-community.vue new file mode 100644 index 0000000..ffb40ce --- /dev/null +++ b/src/view/choose-community.vue @@ -0,0 +1,19 @@ + \ No newline at end of file diff --git a/src/view/home.vue b/src/view/home.vue index a12cdae..e262c15 100644 --- a/src/view/home.vue +++ b/src/view/home.vue @@ -3,7 +3,7 @@
- {{defaultCity}} + {{defaultCommunity}} 联系客服
@@ -135,6 +135,7 @@ export default { show: false, uniqueId:'', defaultCity: "天河区", //区名 默认值 不需要去掉 + defaultCommunity:"", merchantNo: 2, //商户编号 默认值 不需要去掉 districtId: "440106000", //区id 默认值 不需要去掉 addressData: [], diff --git a/src/view/order-list.vue b/src/view/order-list.vue index ce98878..0d6d37b 100644 --- a/src/view/order-list.vue +++ b/src/view/order-list.vue @@ -10,7 +10,7 @@
退款中
已退款
- +