Skip to content

S
singleStore
Commit 776e80a9 authored by June_Q's avatar June_Q
Browse files
Options

styles:优化全局css

parent 9e672258
Hide whitespace changes
Inline Side-by-side
Showing with 132 additions and 3 deletions
App.vue
View file @ 776e80a9
......@@ -74,7 +74,6 @@ export default {
</script>
<style lang="scss">
@import url("@/styles/layout.css");
@import url("@/styles/iconfont.css");
/* 隐藏scrollbar 滚动条 */
......
styles/layout.css → styles/layout.scss
View file @ 776e80a9
page {
color: #333;
background-color: #F8F8F8;
font-size: 28rpx;
}
/* 去除image的间距 */
image {
/* display: block; */
}
.wrapper {
width: 100%;
min-height: 100vh;
}
.w-100 { width: 100%; }
.wh-100 { width: 100%; height: 100%; }
/* flex 布局 */
.flex { display:flex!important; }
.flex-row{ flex-direction:row!important; }
.flex-column{ flex-direction:column!important; }
.flex-row-reverse{ flex-direction:row-reverse!important; }
.flex-column-reverse{ flex-direction:column-reverse!important; }
.flex-wrap{ flex-wrap:wrap; }
.flex-nowrap{ flex-wrap:nowrap; }
.j-start{ justify-content:flex-start; }
.j-end{ justify-content:flex-end; }
.j-between{ justify-content:space-between; }
.j-center{ justify-content:center; }
.j-around{ justify-content: space-around; }
.a-center{ align-items: center; }
.a-stretch{ align-items: stretch; }
.a-start{ align-items: flex-start; }
.a-end{ align-items: flex-end; }
.as-end{ align-self: flex-end; }
.flex-1{ flex: 1; }
.flex-2{ flex: 2; }
.flex-3{ flex: 3; }
.flex-4{ flex: 4; }
.flex-5{ flex: 5; }
/* -- 内外边距 -- */
.m-1 { margin: 10rpx; }
.m-2 { margin: 20rpx; }
.m-3 { margin: 30rpx; }
.m-4 { margin: 40rpx; }
.m-5 { margin: 50rpx; }
.mt-1 { margin-top: 10rpx; }
.mt-2 { margin-top: 20rpx; }
.mt-3 { margin-top: 30rpx; }
.mt-4 { margin-top: 40rpx; }
.mt-5 { margin-top: 50rpx; }
.mb-1 { margin-bottom: 10rpx; }
.mb-2 { margin-bottom: 20rpx; }
.mb-3 { margin-bottom: 30rpx; }
.mb-4 { margin-bottom: 40rpx; }
.mb-5 { margin-bottom: 50rpx; }
.ml-1 { margin-left: 10rpx; }
.ml-2 { margin-left: 20rpx; }
.ml-3 { margin-left: 30rpx; }
.ml-4 { margin-left: 40rpx; }
.ml-5 { margin-left: 50rpx; }
.mr-1 { margin-right: 10rpx; }
.mr-2 { margin-right: 20rpx; }
.mr-3 { margin-right: 30rpx; }
.mr-4 { margin-right: 40rpx; }
.mr-5 { margin-right: 50rpx; }
.my-1 { margin-top: 10rpx; margin-bottom: 10rpx; }
.my-2 { margin-top: 20rpx; margin-bottom: 20rpx; }
.my-3 { margin-top: 30rpx; margin-bottom: 30rpx; }
.my-4 { margin-top: 40rpx; margin-bottom: 40rpx; }
.my-5 { margin-top: 50rpx; margin-bottom: 50rpx; }
.mx-1 { margin-left: 10rpx; margin-right: 10rpx; }
.mx-2 { margin-left: 20rpx; margin-right: 20rpx; }
.mx-3 { margin-left: 30rpx; margin-right: 30rpx; }
.mx-4 { margin-left: 40rpx; margin-right: 40rpx; }
.mx-5 { margin-left: 50rpx; margin-right: 50rpx; }
page {
color: #333;
background-color: #F8F8F8;
font-size: 28rpx;
}
/* 去除image的间距 */
image {
/* display: block; */
}
.wrapper {
width: 100%;
min-height: 100vh;
}
.w-100 { width: 100%; }
.wh-100 { width: 100%; height: 100%; }
.p-1 { padding: 10rpx; }
.p-2 { padding: 20rpx; }
.p-3 { padding: 30rpx; }
.p-4 { padding: 40rpx; }
.p-5 { padding: 50rpx; }
.pt-1 { padding-top: 10rpx; }
.pt-2 { padding-top: 20rpx; }
.pt-3 { padding-top: 30rpx; }
.pt-4 { padding-top: 40rpx; }
.pt-5 { padding-top: 50rpx; }
.pb-1 { padding-bottom: 10rpx; }
.pb-2 { padding-bottom: 20rpx; }
.pb-3 { padding-bottom: 30rpx; }
.pb-4 { padding-bottom: 40rpx; }
.pb-5 { padding-bottom: 50rpx; }
.pl-1 { padding-left: 10rpx; }
.pl-2 { padding-left: 20rpx; }
.pl-3 { padding-left: 30rpx; }
.pl-4 { padding-left: 40rpx; }
.pl-5 { padding-left: 50rpx; }
.pr-1 { padding-right: 10rpx; }
.pr-2 { padding-right: 20rpx; }
.pr-3 { padding-right: 30rpx; }
.pr-4 { padding-right: 40rpx; }
.pr-5 { padding-right: 50rpx; }
.py-1 { padding-top: 10rpx; padding-bottom: 10rpx; }
.py-2 { padding-top: 20rpx; padding-bottom: 20rpx; }
.py-3 { padding-top: 30rpx; padding-bottom: 30rpx; }
.py-4 { padding-top: 40rpx; padding-bottom: 40rpx; }
.py-5 { padding-top: 50rpx; padding-bottom: 50rpx; }
.px-1 { padding-left: 10rpx; padding-right: 10rpx; }
.px-2 { padding-left: 20rpx; padding-right: 20rpx; }
.px-3 { padding-left: 30rpx; padding-right: 30rpx; }
.px-4 { padding-left: 40rpx; padding-right: 40rpx; }
.px-5 { padding-left: 50rpx; padding-right: 50rpx; }
/* 文字对齐 */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
/* 常规字体大小 */
.font-24 { font-size: 24rpx; }
.font-28 { font-size: 28rpx; }
.font-32 { font-size: 32rpx; }
.font-36 { font-size: 36rpx; }
.font-48 { font-size: 48rpx; }
/* 字粗 */
.font-bold { font-weight: bold; }
.font-bolder { font-weight: bolder; }
/* 内容溢出 */
.overflow-hidden { overflow: hidden; }
.overtext-1 {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
/* 阴影 */
.shadow { box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.3); }
.shadow-lg { box-shadow: 0rpx 40rpx 100rpx 0rpx rgba(0, 0, 0, 0.5); }
.borderBox {
box-sizing: border-box;
}
/* border-radius */
.r-8 {
border-radius: 8rpx;
/* flex 布局 */
.flex { display:flex!important; }
.flex-row{ flex-direction:row!important; }
.flex-column{ flex-direction:column!important; }
.flex-row-reverse{ flex-direction:row-reverse!important; }
.flex-column-reverse{ flex-direction:column-reverse!important; }
.flex-wrap{ flex-wrap:wrap; }
.flex-nowrap{ flex-wrap:nowrap; }
.j-start{ justify-content:flex-start; }
.j-end{ justify-content:flex-end; }
.j-between{ justify-content:space-between; }
.j-center{ justify-content:center; }
.j-around{ justify-content: space-around; }
.a-center{ align-items: center; }
.a-stretch{ align-items: stretch; }
.a-start{ align-items: flex-start; }
.a-end{ align-items: flex-end; }
.as-end{ align-self: flex-end; }
@for $i from 1 through 5 {
.flex-#{$i} {
flex: #{$i};
}
}
@for $i from 1 through 5 {
.m-#{$i} {
margin: #{$i}0rpx;
}
.mx-#{$i} {
margin-left: #{$i}0rpx;
margin-right: #{$i}0rpx;
}
.my-#{$i} {
margin-top: #{$i}0rpx;
margin-bottom: #{$i}0rpx;
}
.mr-#{$i} {
margin-right: #{$i}0rpx;
}
.ml-#{$i} {
margin-left: #{$i}0rpx;
}
.mt-#{$i} {
margin-top: #{$i}0rpx;
}
.mb-#{$i} {
margin-bottom: #{$i}0rpx;
}
}
@for $i from 1 through 5 {
.p-#{$i} {
padding: #{$i}0rpx;
}
.px-#{$i} {
padding-left: #{$i}0rpx;
padding-right: #{$i}0rpx;
}
.py-#{$i} {
padding-top: #{$i}0rpx;
padding-bottom: #{$i}0rpx;
}
.pr-#{$i} {
padding-right: #{$i}0rpx;
}
.pl-#{$i} {
padding-left: #{$i}0rpx;
}
.pt-#{$i} {
padding-top: #{$i}0rpx;
}
.pb-#{$i} {
padding-bottom: #{$i}0rpx;
}
}
/* 文字对齐 */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
/* 常规字体大小 */
.font-24 { font-size: 24rpx; }
.font-28 { font-size: 28rpx; }
.font-32 { font-size: 32rpx; }
.font-36 { font-size: 36rpx; }
.font-48 { font-size: 48rpx; }
/* 字粗 */
.font-bold { font-weight: bold; }
.font-bolder { font-weight: bolder; }
/* 内容溢出 */
.overflow-hidden { overflow: hidden; }
.overtext-1 {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
/* 阴影 */
.shadow { box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.3); }
.shadow-lg { box-shadow: 0rpx 40rpx 100rpx 0rpx rgba(0, 0, 0, 0.5); }
.borderBox {
box-sizing: border-box;
}
/* border-radius */
.r-8 {
border-radius: 8rpx;
}
\ No newline at end of file
uni.scss
View file @ 776e80a9
@import '@/styles/global.scss';
@import '@/styles/mixins.scss';
\ No newline at end of file
@import "@/styles/global.scss";
@import "@/styles/layout.scss";
@import "@/styles/mixins.scss";
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment