feat-新增公共样式

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});
+  }
+}

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;
+    }
+  }
+}

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";

src/assets/style/mixin.scss

@@ -0,0 +1,8 @@
+
+@mixin flex($direction: row) {
+  display: flex;
+  flex-direction: $direction;
+}
+
+
+

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);

src/pages/demo/index.vue

@@ -2,6 +2,10 @@
 
 <template>
   <view class="container"> 页面构建中... </view>
+  <view class="flex-row">
+    <view>item1</view>
+    <view>item2</view>
+  </view>
 </template>
 
 <style lang="scss" scoped>

vite.config.ts

@@ -53,7 +53,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData: '@import "@/assets/style/main.scss";',
+          // additionalData: '@import "@/assets/style/main.scss";',
         },
       },
     },