From f201a38feac620ac576871029fd36a23e3aebb72 Mon Sep 17 00:00:00 2001 From: Huang <596417202@qq.com> Date: Fri, 29 Jul 2022 15:34:05 +0800 Subject: [PATCH] =?UTF-8?q?feat-=E6=96=B0=E5=A2=9E=E5=85=AC=E5=85=B1?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/style/auxiliary.scss | 75 +++++++++++++++++++++++++++++++++ src/assets/style/flex.scss | 34 +++++++++++++++ src/assets/style/main.scss | 49 ++------------------- src/assets/style/mixin.scss | 8 ++++ src/main.ts | 1 + src/pages/demo/index.vue | 4 ++ vite.config.ts | 2 +- 7 files changed, 126 insertions(+), 47 deletions(-) create mode 100644 src/assets/style/auxiliary.scss create mode 100644 src/assets/style/flex.scss create mode 100644 src/assets/style/mixin.scss diff --git a/src/assets/style/auxiliary.scss b/src/assets/style/auxiliary.scss new file mode 100644 index 0000000..ff93181 --- /dev/null +++ b/src/assets/style/auxiliary.scss @@ -0,0 +1,75 @@ +view, +scroll-view, +swiper, +match-media, +movable-area, +movable-view, +cover-view, +cover-image, +icon, +text, +rich-text, +progress, +button, +checkboxe, +ditor, +form, +input, +label, +picker, +picker-view, +radio, +slider, +switch, +textarea, +navigator, +audio, +camera, +image, +video, +live-player, +live-pusher, +map, +canvas, +web-view, +:before, +:after { + box-sizing: border-box; +} + +/* 隐藏scroll-view的滚动条 */ +::-webkit-scrollbar { + display: none; + width: 0 !important; + height: 0 !important; + -webkit-appearance: none; + background: transparent; +} + +// 超出省略,最多5行 +@for $i from 1 through 5 { + .text-ellipsis-#{$i} { + // vue下，单行和多行显示省略号需要单独处理 + @if $i == '1' { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } @else { + display: -webkit-box!important; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; + -webkit-line-clamp: $i; + -webkit-box-orient: vertical!important; + } + } +} + +// 历遍生成4个方向的底部安全区 +@each $d in top, right, bottom, left { + .safe-area-inset-#{$d} { + padding-#{$d}: 0; + padding-#{$d}: constant(safe-area-inset-#{$d}); + padding-#{$d}: env(safe-area-inset-#{$d}); + } +} \ No newline at end of file diff --git a/src/assets/style/flex.scss b/src/assets/style/flex.scss new file mode 100644 index 0000000..065abda --- /dev/null +++ b/src/assets/style/flex.scss @@ -0,0 +1,34 @@ +// flex布局 + +$flex-directions: row,row-reverse,column,column-reverse; +@each $v in $flex-directions { + .flex-#{$v} { + @include flex($v); + } +} + +$justify-content: start,end,center,between,around,evenly; +@each $v in $justify-content { + .justify-#{$v} { + @if($v == 'start') { + justify-content: flex- + $v; + }@else if($v == 'start') { + justify-content: flex- + $v; + }@else { + justify-content: $v; + } + } +} + +$align-items: start,end,center,baseline,stretch; +@each $v in $align-items { + .items-#{$v} { + @if($v == 'start') { + align-items: flex- + $v; + }@else if($v == 'start') { + align-items: flex- + $v; + }@else { + align-items: $v; + } + } +} \ No newline at end of file diff --git a/src/assets/style/main.scss b/src/assets/style/main.scss index 53df1b3..aa9e434 100644 --- a/src/assets/style/main.scss +++ b/src/assets/style/main.scss @@ -1,46 +1,3 @@ -view, -scroll-view, -swiper, -match-media, -movable-area, -movable-view, -cover-view, -cover-image, -icon, -text, -rich-text, -progress, -button, -checkboxe, -ditor, -form, -input, -label, -picker, -picker-view, -radio, -slider, -switch, -textarea, -navigator, -audio, -camera, -imagevideo, -live-player, -live-pusher, -map, -canvas, -web-view, -:before, -:after { - box-sizing: border-box; -} - -/* 隐藏scroll-view的滚动条 */ -::-webkit-scrollbar { - display: none; - width: 0 !important; - height: 0 !important; - -webkit-appearance: none; - background: transparent; -} +@import "auxiliary"; +@import "mixin"; +@import "flex"; \ No newline at end of file diff --git a/src/assets/style/mixin.scss b/src/assets/style/mixin.scss new file mode 100644 index 0000000..c0bad64 --- /dev/null +++ b/src/assets/style/mixin.scss @@ -0,0 +1,8 @@ + +@mixin flex($direction: row) { + display: flex; + flex-direction: $direction; +} + + + diff --git a/src/main.ts b/src/main.ts index 2a12137..e6821fa 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,7 @@ import { createSSRApp } from 'vue'; import App from './App.vue'; import { setupStore } from '@/state'; +import '@/assets/style/main.scss'; export function createApp() { const app = createSSRApp(App); diff --git a/src/pages/demo/index.vue b/src/pages/demo/index.vue index bd2a92e..18e59e2 100644 --- a/src/pages/demo/index.vue +++ b/src/pages/demo/index.vue @@ -2,6 +2,10 @@