From 7971cdb3b382bd0b5d6766d9ecf25cbe559f142f Mon Sep 17 00:00:00 2001 From: yuanlei <18627959669@163.com> Date: Fri, 18 Jul 2025 17:12:46 +0800 Subject: [PATCH] 1 --- static/style/nine-base-001.scss | 6 ++ static/style/nine-base-002.scss | 140 ++++++++++++++++++++++++--------------- static/style/nine-base-003.scss | 15 +++++ static/style/nine-btn-001.scss | 30 ++++----- static/style/nine-image-001.scss | 46 ++++++++----- static/style/nine-list-001.scss | 14 ++-- static/style/nine-nav-001.scss | 54 +++++++-------- 7 files changed, 186 insertions(+), 119 deletions(-) create mode 100644 static/style/nine-base-003.scss diff --git a/static/style/nine-base-001.scss b/static/style/nine-base-001.scss index 0c44685..b672644 100644 --- a/static/style/nine-base-001.scss +++ b/static/style/nine-base-001.scss @@ -34,11 +34,14 @@ .color-black{ color: black } .color-f1f1f1{ color: #f1f1f1 } +.bgcolor-gray{ background-color: gray } +.bgcolor-green{ background-color: green } .bgcolor-blue{ background-color: blue } .bgcolor-red{ background-color: red } .bgcolor-pink{ background-color: pink } .bgcolor-white{ background-color: white } .bgcolor-lightblue{ background-color: lightblue } +.bgcolor-dff5fa{ background-color: #dff5fa } .bgcolor-cce1e6{ background-color: #cce1e6 } .bgcolor-787fff{ background-color: #787fff } .bgcolor-eef0ff{ background-color: #eef0ff } @@ -59,6 +62,7 @@ .border-f1f1f1{ border: 3rpx solid #f1f1f1 } .border-radius10{ border-radius: 10rpx } +.border-radius50{ border-radius: 50% } .position-fixed{ position: fixed } .position-absolute{ position: absolute } @@ -144,6 +148,7 @@ .pa300{ padding: 300rpx } .ptb0{ padding-top: 0rpx; padding-bottom: 0rpx } +.ptb2{ padding-top: 2rpx; padding-bottom: 2rpx } .ptb5{ padding-top: 5rpx; padding-bottom: 5rpx } .ptb10{ padding-top: 10rpx; padding-bottom: 10rpx } .ptb15{ padding-top: 15rpx; padding-bottom: 15rpx } @@ -459,6 +464,7 @@ .mb-300{ margin-bottom: -300rpx } .ml0{ margin-left: 0rpx } +.ml2{ margin-left: 2rpx } .ml5{ margin-left: 5rpx } .ml10{ margin-left: 10rpx } .ml15{ margin-left: 15rpx } diff --git a/static/style/nine-base-002.scss b/static/style/nine-base-002.scss index 4ce38eb..4db6069 100644 --- a/static/style/nine-base-002.scss +++ b/static/style/nine-base-002.scss @@ -1,38 +1,44 @@ .height100{ - height: 100%; + height: 100%; +} +.width23{ + width: 23%; +} +.width24{ + width: 24%; } .width25{ - width: 25%; + width: 25%; } .width30{ - width: 30%; + width: 30%; } .width45{ - width: 45%; + width: 45%; } .width46{ - width: 46%; + width: 46%; } .width47{ - width: 47%; + width: 47%; } .width48{ - width: 48%; + width: 48%; } .width49{ - width: 49%; + width: 49%; } .width50{ - width: 50%; + width: 50%; } .width80{ - width: 80%; + width: 80%; } .width90{ - width: 90%; + width: 90%; } .width100{ - width: 100%; + width: 100%; } .test{ border: 3rpx solid red} @@ -50,64 +56,76 @@ .float-left{ float: left; } .float-right{ float: right; } -// 允许文本复制 -.nine-user-select { - cursor: auto; - -webkit-user-select: text; - user-select: text; -} - .display-flex-row{ - display: flex; - flex-direction: row; - align-items: center; + display: flex; + flex-direction: row; + align-items: center; } .display-flex-column{ - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .display-flex-column-center{ - display: flex; - flex-direction: column; - justify-content: center; + display: flex; + flex-direction: column; + justify-content: center; } .display-flex-row-between{ - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; } .display-flex-row-center{ - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; } .display-flex-row-around{ - display: flex; - flex-direction: row; - justify-content: space-around; - align-items: center; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; +} +.display-flex-row-end{ + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; +} +.display-flex-row-wrap{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-content: flex-start; } .display-flex-column-between{ - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; } .display-flex-column-around{ - display: flex; - flex-direction: column; - justify-content: space-around; - align-items: center; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; } .justify-content-center{ - justify-content: center + justify-content: center } .flex1{ - flex: 1 + flex: 1 } +.overflow-x-auto{ + overflow-x: auto; +} +.overflow-y-auto{ + overflow-y: auto; +} .text-nowrap{ white-space:nowrap; @@ -118,19 +136,33 @@ white-space: nowrap; } +// 不占位隐藏 +.display-none{ display: none } +// 占位隐藏 +.visibility-hidden{ visibility: hidden } + // 放大缩小比例 .transform-scale05{ - transform: scale(0.5); + transform: scale(0.5); } .transform-scale06{ - transform: scale(0.6); + transform: scale(0.6); } .transform-scale07{ - transform: scale(0.7); + transform: scale(0.7); } .transform-scale08{ - transform: scale(0.8); + transform: scale(0.8); } .transform-scale09{ - transform: scale(0.9); + transform: scale(0.9); +} + +// 旋转90度 +.transform-rotate90{ + transform: rotate(90deg); + ms-transform: rotate(90deg); /* IE 9 */ + moz-transform: rotate(90deg); /* Firefox */ + webkit-transform: rotate(90deg); /* Safari and Chrome */ + o-transform: rotate(90deg); /* Opera */ } \ No newline at end of file diff --git a/static/style/nine-base-003.scss b/static/style/nine-base-003.scss new file mode 100644 index 0000000..59f450f --- /dev/null +++ b/static/style/nine-base-003.scss @@ -0,0 +1,15 @@ +.nine-nomore-001{ + padding: 25rpx; + text-align: center; +} +.nine-nomore-001-span{ + font-size: 12px; + color: lightgray +} + +// 允许文本复制 +.nine-user-select { + cursor: auto; + -webkit-user-select: text; + user-select: text; +} \ No newline at end of file diff --git a/static/style/nine-btn-001.scss b/static/style/nine-btn-001.scss index daf61f9..8734588 100644 --- a/static/style/nine-btn-001.scss +++ b/static/style/nine-btn-001.scss @@ -1,27 +1,27 @@ // 边框蓝,字体蓝,用于获取短信验证码按钮 .nine-btn-verify-001{ - border-radius: 10rpx; - color: #1e1eff; - border: 3rpx solid #1e1eff; + border-radius: 10rpx; + color: #1e1eff; + border: 3rpx solid #1e1eff; } // 保存按钮 .nine-btn-save-001{ - padding: 20rpx; - border-radius: 10rpx; - color: #fff; - background-color: #0000ff; - text-align: center; + padding: 20rpx; + border-radius: 10rpx; + color: #fff; + background-color: #0000ff; + text-align: center; } // 退出登录 .nine-btn-login-out-001{ - padding: 20rpx; - border-radius: 10rpx; - color: red; - background: #fff; - text-align: center; + padding: 20rpx; + border-radius: 10rpx; + color: red; + background: #fff; + text-align: center; } // 灰色横线 .nine-line-001{ - height: 1rpx; - border-top: 1rpx solid #d9d9d9; + height: 1rpx; + border-top: 1rpx solid #d9d9d9; } \ No newline at end of file diff --git a/static/style/nine-image-001.scss b/static/style/nine-image-001.scss index fdd71d9..e554c89 100644 --- a/static/style/nine-image-001.scss +++ b/static/style/nine-image-001.scss @@ -1,36 +1,46 @@ .image35{ - width: 35rpx; - height: 35rpx; + width: 35rpx; + height: 35rpx; } .image40{ - width: 40rpx; - height: 40rpx; + width: 40rpx; + height: 40rpx; } .image50{ - width: 40rpx; - height: 40rpx; + width: 50rpx; + height: 50rpx; +} +.image60{ + width: 60rpx; + height: 60rpx; } .image70{ - width: 70rpx; - height: 70rpx; + width: 70rpx; + height: 70rpx; } .image80{ - width: 70rpx; - height: 70rpx; + width: 70rpx; + height: 70rpx; } .image90{ - width: 90rpx; - height: 90rpx; + width: 90rpx; + height: 90rpx; } .image150{ - width: 150rpx; - height: 150rpx; + width: 150rpx; + height: 150rpx; } .image200{ - width: 200rpx; - height: 200rpx; + width: 200rpx; + height: 200rpx; } .image400{ - width: 400rpx; - height: 400rpx; + width: 400rpx; + height: 400rpx; +} + +// 验证码大小 +.image-size-verify-001{ + width: 150rpx; + height: 35px; } \ No newline at end of file diff --git a/static/style/nine-list-001.scss b/static/style/nine-list-001.scss index 4780b21..a2403ec 100644 --- a/static/style/nine-list-001.scss +++ b/static/style/nine-list-001.scss @@ -1,9 +1,13 @@ .nine-list-001{ - padding: 10rpx; + padding: 10rpx; } .nine-list-001-item{ - background-color: #fff; - margin: 10rpx 0; - padding: 10rpx 30rpx; - border-radius: 10rpx; + background-color: #fff; + margin: 10rpx 0; + padding: 10rpx 30rpx; + border-radius: 10rpx; +} +.nine-list-001-item-image-image{ + width: 40rpx; + height: 30rpx; } \ No newline at end of file diff --git a/static/style/nine-nav-001.scss b/static/style/nine-nav-001.scss index 7ddfb98..fc384a2 100644 --- a/static/style/nine-nav-001.scss +++ b/static/style/nine-nav-001.scss @@ -1,39 +1,39 @@ .nine-nav-001{ - display: flex; - flex-direction: column; - padding: 10rpx; - flex: 1; - height: 100%; - overflow-y: auto; + display: flex; + flex-direction: column; + padding: 10rpx; + flex: 1; + height: 100%; + overflow-y: auto; } .nine-nav-001-item{ - background: #fff; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - margin-top: 5rpx; - padding: 20rpx 15rpx; - border-radius: 1rpx; - border-style: solid; - border-width: 0px; + background: #fff; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin-top: 5rpx; + padding: 20rpx 15rpx; + border-radius: 1rpx; + border-style: solid; + border-width: 0px; } .nine-nav-001-item-left{ - display: flex; - flex-direction: row; - align-items: center; - padding: 2rpx 10rpx; + display: flex; + flex-direction: row; + align-items: center; + padding: 2rpx 10rpx; } .nine-nav-001-item-left-text{ - font-size: 16px; - padding-left: 20rpx; + font-size: 16px; + padding-left: 20rpx; } .nine-nav-001-item-right{ - display: flex; - flex-direction: row; - align-items: center; + display: flex; + flex-direction: row; + align-items: center; } .nine-nav-001-item-right-image{ - width: 16rpx; - height: 35rpx; + width: 16rpx; + height: 35rpx; } \ No newline at end of file