mirror of
https://gitee.com/h_mo/uniapp-vue3-vite-ts-template
synced 2025-04-05 06:12:44 +08:00
perf-优化多余的样式,使用unocss
This commit is contained in:
Huang
parent
7b56b3d838
commit
09b5456259
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
@import 'auxiliary';
|
||||
@import 'mixin';
|
||||
@import 'flex';
|
||||
@ -1,4 +0,0 @@
|
||||
@mixin flex($direction: row) {
|
||||
display: flex;
|
||||
flex-direction: $direction;
|
||||
}
|
||||
@ -16,17 +16,17 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.default-btn {
|
||||
color: $uni-text-color-inverse;
|
||||
color: #fff;
|
||||
border-width: 4rpx;
|
||||
border-color: $nui-button-border-color;
|
||||
border-color: #bfdbfe;
|
||||
border-style: solid;
|
||||
border-radius: $uni-border-radius-base;
|
||||
background-color: $nui-button-bg-color;
|
||||
border-radius: 6rpx;
|
||||
background-color: #60a5fa;
|
||||
padding: 12rpx 26rpx;
|
||||
display: inline-block;
|
||||
font-size: $uni-font-size-sm;
|
||||
font-size: 24rpx;
|
||||
&:hover {
|
||||
background-color: $nui-button-bg-hover-color;
|
||||
background-color: #3b82f6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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() {
|
||||
|
||||
143
src/uni.scss
143
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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: {},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user