From 09b5456259edb75099470af7c9d0e8c321bc7769 Mon Sep 17 00:00:00 2001 From: Huang <596417202@qq.com> Date: Mon, 28 Nov 2022 16:14:54 +0800 Subject: [PATCH] =?UTF-8?q?perf-=E4=BC=98=E5=8C=96=E5=A4=9A=E4=BD=99?= =?UTF-8?q?=E7=9A=84=E6=A0=B7=E5=BC=8F,=E4=BD=BF=E7=94=A8unocss?= 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 | 3 - src/assets/style/mixin.scss | 4 - src/components/BasicButton/index.vue | 12 +-- src/main.ts | 1 - src/uni.scss | 143 ++++++++++++--------------- unocss.config.js | 10 +- 8 files changed, 76 insertions(+), 206 deletions(-) delete mode 100644 src/assets/style/auxiliary.scss delete mode 100644 src/assets/style/flex.scss delete mode 100644 src/assets/style/main.scss delete mode 100644 src/assets/style/mixin.scss diff --git a/src/assets/style/auxiliary.scss b/src/assets/style/auxiliary.scss deleted file mode 100644 index 629375c..0000000 --- a/src/assets/style/auxiliary.scss +++ /dev/null @@ -1,75 +0,0 @@ -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 !important; - padding-#{$d}: constant(safe-area-inset-#{$d}) !important; - padding-#{$d}: env(safe-area-inset-#{$d}) !important; - } -} diff --git a/src/assets/style/flex.scss b/src/assets/style/flex.scss deleted file mode 100644 index b2a348a..0000000 --- a/src/assets/style/flex.scss +++ /dev/null @@ -1,34 +0,0 @@ -// 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; - } - } -} diff --git a/src/assets/style/main.scss b/src/assets/style/main.scss deleted file mode 100644 index a2dcaf2..0000000 --- a/src/assets/style/main.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'auxiliary'; -@import 'mixin'; -@import 'flex'; diff --git a/src/assets/style/mixin.scss b/src/assets/style/mixin.scss deleted file mode 100644 index dbca254..0000000 --- a/src/assets/style/mixin.scss +++ /dev/null @@ -1,4 +0,0 @@ -@mixin flex($direction: row) { - display: flex; - flex-direction: $direction; -} diff --git a/src/components/BasicButton/index.vue b/src/components/BasicButton/index.vue index c87ac2d..6ccb144 100644 --- a/src/components/BasicButton/index.vue +++ b/src/components/BasicButton/index.vue @@ -16,17 +16,17 @@ diff --git a/src/main.ts b/src/main.ts index 828f906..c3f39ef 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,7 +1,6 @@ import { createSSRApp } from 'vue'; import App from './App.vue'; import { setupStore } from '@/state'; -// import '@/assets/style/main.scss'; import 'uno.css'; export function createApp() { diff --git a/src/uni.scss b/src/uni.scss index 9ea8c31..66f7af6 100644 --- a/src/uni.scss +++ b/src/uni.scss @@ -1,81 +1,66 @@ -/** - * 这里是uni-app内置的常用样式变量 - * - * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量 - * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App - * - */ +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; +} -/** - * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能 - * - * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件 - */ +/* 隐藏scroll-view的滚动条 */ +::-webkit-scrollbar { + display: none; + width: 0 !important; + height: 0 !important; + -webkit-appearance: none; + background: transparent; +} -/* 颜色变量 */ - -/* 行为相关颜色 */ -$uni-color-primary: #007aff; -$uni-color-success: #4cd964; -$uni-color-warning: #f0ad4e; -$uni-color-error: #dd524d; - -/* 文字基本颜色 */ -$uni-text-color: #333; //基本色 -$uni-text-color-inverse: #fff; //反色 -$uni-text-color-grey: #999; //辅助灰色，如加载更多的提示信息 -$uni-text-color-placeholder: #808080; -$uni-text-color-disable: #c0c0c0; - -/* 背景颜色 */ -$uni-bg-color: #ffffff; -$uni-bg-color-grey: #f8f8f8; -$uni-bg-color-hover: #f1f1f1; //点击状态颜色 -$uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色 - -/* 边框颜色 */ -$uni-border-color: #c8c7cc; - -/* 尺寸变量 */ - -/* 文字尺寸 */ -$uni-font-size-sm: 24rpx; -$uni-font-size-base: 28rpx; -$uni-font-size-lg: 32rpx; - -/* 图片尺寸 */ -$uni-img-size-sm: 40rpx; -$uni-img-size-base: 52rpx; -$uni-img-size-lg: 80rpx; - -/* Border Radius */ -$uni-border-radius-sm: 4rpx; -$uni-border-radius-base: 6rpx; -$uni-border-radius-lg: 12rpx; -$uni-border-radius-circle: 50%; - -/* 水平间距 */ -$uni-spacing-row-sm: 10px; -$uni-spacing-row-base: 20rpx; -$uni-spacing-row-lg: 30rpx; - -/* 垂直间距 */ -$uni-spacing-col-sm: 8rpx; -$uni-spacing-col-base: 16rpx; -$uni-spacing-col-lg: 24rpx; - -/* 透明度 */ -$uni-opacity-disabled: 0.3; // 组件禁用态的透明度 - -/* 文章场景相关 */ -$uni-color-title: #2c405a; // 文章标题颜色 -$uni-font-size-title: 40rpx; -$uni-color-subtitle: #555555; // 二级标题颜色 -$uni-font-size-subtitle: 36rpx; -$uni-color-paragraph: #3f536e; // 文章段落颜色 -$uni-font-size-paragraph: 30rpx; - -/* 按钮相关 */ -$nui-button-bg-color: #60a5fa; -$nui-button-bg-hover-color: #3b82f6; -$nui-button-border-color: #bfdbfe; +// 超出省略,最多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; + } + } +} diff --git a/unocss.config.js b/unocss.config.js index 83e0a7a..e9332c4 100644 --- a/unocss.config.js +++ b/unocss.config.js @@ -1,5 +1,7 @@ -/* - * https://zhuanlan.zhihu.com/p/569976147 +/** + * unocss defineConfig + * @link unocss: https://github.com/unocss/unocss + * @link unocss-preset-weapp: https://github.com/MellowCo/unocss-preset-weapp * */ import { defineConfig, presetAttributify, presetIcons } from 'unocss'; @@ -24,7 +26,7 @@ const transformRules = { ',': '-r222-', }; -const prefix = `un:`; +const prefix = `un-`; export default defineConfig({ presets: [ @@ -44,7 +46,7 @@ export default defineConfig({ shortcuts: [ { 'border-base': 'border border-gray-500_10', - center: 'flex justify-center items-center', + 'un-center': 'un-flex un-justify-center un-items-center', }, ], theme: {},