sc
This commit is contained in:
qsh
241
src/static/scss/global.css
Normal file
241
src/static/scss/global.css
Normal file
@@ -0,0 +1,241 @@
|
||||
@charset "UTF-8";
|
||||
.list-cell-arrow::before {
|
||||
content: ' ';
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-width: 2px 2px 0 0;
|
||||
border-color: #c0c0c0;
|
||||
border-style: solid;
|
||||
-webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
||||
transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
.list-cell {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
padding: 26rpx 30rpx;
|
||||
}
|
||||
|
||||
.list-cell:first-child {
|
||||
border-radius: 8rpx 8rpx 0 0;
|
||||
}
|
||||
|
||||
.list-cell:last-child {
|
||||
border-radius: 0 0 8rpx 8rpx;
|
||||
}
|
||||
|
||||
.list-cell::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 1px solid #eaeef1;
|
||||
-webkit-transform: scaleY(0.5) translateZ(0);
|
||||
transform: scaleY(0.5) translateZ(0);
|
||||
transform-origin: 0 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
margin: 15px 15px;
|
||||
}
|
||||
|
||||
.menu-list .menu-item-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-list .menu-item-box .menu-icon {
|
||||
color: #007aff;
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.menu-list .menu-item-box .text-right {
|
||||
margin-left: auto;
|
||||
margin-right: 34rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 全局Radio样式美化 */
|
||||
radio {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
radio[checked] .wx-radio-input {
|
||||
border-color: #409eff !important;
|
||||
background-color: #409eff !important;
|
||||
}
|
||||
|
||||
/* 全局Checkbox样式美化 */
|
||||
/* 基础样式重置 */
|
||||
checkbox {
|
||||
width: 40rpx !important;
|
||||
height: 40rpx !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Uni-app核心样式覆盖 */
|
||||
.uni-checkbox-input {
|
||||
width: 40rpx !important;
|
||||
height: 40rpx !important;
|
||||
border: 2rpx solid #dcdfe6 !important;
|
||||
border-radius: 8rpx !important;
|
||||
background-color: #ffffff !important;
|
||||
transition: all 0.3s ease-in-out !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.uni-checkbox-input:hover {
|
||||
border-color: #409eff !important;
|
||||
box-shadow: 0 0 12rpx rgba(64, 158, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
/* 选中状态 */
|
||||
.uni-checkbox-input.uni-checkbox-input-checked {
|
||||
border-color: #409eff !important;
|
||||
background-color: #409eff !important;
|
||||
animation: checkboxPulse 0.3s ease-in-out !important;
|
||||
}
|
||||
|
||||
/* 选中状态的对勾 - 使用SVG路径实现 */
|
||||
.uni-checkbox-input.uni-checkbox-input-checked::after {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: 8rpx !important;
|
||||
left: 13rpx !important;
|
||||
width: 12rpx !important;
|
||||
height: 20rpx !important;
|
||||
border: 3rpx solid #ffffff !important;
|
||||
border-top: none !important;
|
||||
border-left: none !important;
|
||||
transform: rotate(45deg) !important;
|
||||
transform-origin: center !important;
|
||||
animation: checkboxTick 0.3s ease-in-out !important;
|
||||
}
|
||||
|
||||
/* 清除默认对勾 */
|
||||
.uni-checkbox-input.uni-checkbox-input-checked::before {
|
||||
display: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* 微信小程序兼容 */
|
||||
checkbox .wx-checkbox-input {
|
||||
width: 40rpx !important;
|
||||
height: 40rpx !important;
|
||||
border: 2rpx solid #dcdfe6 !important;
|
||||
border-radius: 8rpx !important;
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
checkbox[checked] .wx-checkbox-input {
|
||||
border-color: #409eff !important;
|
||||
background-color: #409eff !important;
|
||||
}
|
||||
|
||||
checkbox[checked] .wx-checkbox-input::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 禁用状态样式 */
|
||||
checkbox[disabled] {
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
checkbox[disabled] .uni-checkbox-input {
|
||||
border-color: #dcdfe6 !important;
|
||||
background-color: #f5f7fa !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
checkbox[disabled] .uni-checkbox-input:hover {
|
||||
border-color: #dcdfe6 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
checkbox[disabled] .uni-checkbox-input.uni-checkbox-input-checked {
|
||||
border-color: #dcdfe6 !important;
|
||||
background-color: #dcdfe6 !important;
|
||||
}
|
||||
|
||||
/* 微信小程序禁用状态 */
|
||||
checkbox[disabled] .wx-checkbox-input {
|
||||
border-color: #dcdfe6 !important;
|
||||
background-color: #f5f7fa !important;
|
||||
}
|
||||
|
||||
checkbox[disabled][checked] .wx-checkbox-input {
|
||||
border-color: #dcdfe6 !important;
|
||||
background-color: #dcdfe6 !important;
|
||||
}
|
||||
|
||||
checkbox[checked] .wx-checkbox-input::after {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: 8rpx !important;
|
||||
left: 13rpx !important;
|
||||
width: 12rpx !important;
|
||||
height: 20rpx !important;
|
||||
border: 3rpx solid #ffffff !important;
|
||||
border-top: none !important;
|
||||
border-left: none !important;
|
||||
transform: rotate(45deg) !important;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes checkboxPulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkboxTick {
|
||||
0% {
|
||||
transform: rotate(45deg) scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(45deg) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 通用选择器样式 */
|
||||
.radio-item,
|
||||
.checkbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.radio-item:hover .radio-label,
|
||||
.checkbox-item:hover .checkbox-label {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.radio-label,
|
||||
.checkbox-label {
|
||||
margin-left: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #303133;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
1
src/static/scss/global.min.css
vendored
Normal file
1
src/static/scss/global.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.list-cell-arrow::before{content:' ';height:10px;width:10px;border-width:2px 2px 0 0;border-color:#c0c0c0;border-style:solid;-webkit-transform:matrix(0.5, 0.5, -0.5, 0.5, 0, 0);transform:matrix(0.5, 0.5, -0.5, 0.5, 0, 0);position:absolute;top:50%;margin-top:-6px;right:30rpx}.list-cell{position:relative;width:100%;box-sizing:border-box;background-color:#fff;color:#333;padding:26rpx 30rpx}.list-cell:first-child{border-radius:8rpx 8rpx 0 0}.list-cell:last-child{border-radius:0 0 8rpx 8rpx}.list-cell::after{content:'';position:absolute;border-bottom:1px solid #eaeef1;-webkit-transform:scaleY(0.5) translateZ(0);transform:scaleY(0.5) translateZ(0);transform-origin:0 100%;bottom:0;right:0;left:0;pointer-events:none}.menu-list{margin:15px 15px}.menu-list .menu-item-box{width:100%;display:flex;align-items:center}.menu-list .menu-item-box .menu-icon{color:#007aff;font-size:16px;margin-right:5px}.menu-list .menu-item-box .text-right{margin-left:auto;margin-right:34rpx;color:#999}radio{transform:scale(0.8)}radio[checked] .wx-radio-input{border-color:#409eff !important;background-color:#409eff !important}checkbox{width:40rpx !important;height:40rpx !important;margin:0 !important;padding:0 !important}.uni-checkbox-input{width:40rpx !important;height:40rpx !important;border:2rpx solid #dcdfe6 !important;border-radius:8rpx !important;background-color:#ffffff !important;transition:all 0.3s ease-in-out !important;position:relative !important;overflow:hidden !important}.uni-checkbox-input:hover{border-color:#409eff !important;box-shadow:0 0 12rpx rgba(64,158,255,0.2) !important}.uni-checkbox-input.uni-checkbox-input-checked{border-color:#409eff !important;background-color:#409eff !important;animation:checkboxPulse 0.3s ease-in-out !important}.uni-checkbox-input.uni-checkbox-input-checked::after{content:'' !important;position:absolute !important;top:8rpx !important;left:13rpx !important;width:12rpx !important;height:20rpx !important;border:3rpx solid #ffffff !important;border-top:none !important;border-left:none !important;transform:rotate(45deg) !important;transform-origin:center !important;animation:checkboxTick 0.3s ease-in-out !important}.uni-checkbox-input.uni-checkbox-input-checked::before{display:none !important;content:none !important}checkbox .wx-checkbox-input{width:40rpx !important;height:40rpx !important;border:2rpx solid #dcdfe6 !important;border-radius:8rpx !important;background-color:#ffffff !important}checkbox[checked] .wx-checkbox-input{border-color:#409eff !important;background-color:#409eff !important}checkbox[checked] .wx-checkbox-input::before{display:none !important}checkbox[disabled]{opacity:0.5 !important}checkbox[disabled] .uni-checkbox-input{border-color:#dcdfe6 !important;background-color:#f5f7fa !important;cursor:not-allowed !important}checkbox[disabled] .uni-checkbox-input:hover{border-color:#dcdfe6 !important;box-shadow:none !important}checkbox[disabled] .uni-checkbox-input.uni-checkbox-input-checked{border-color:#dcdfe6 !important;background-color:#dcdfe6 !important}checkbox[disabled] .wx-checkbox-input{border-color:#dcdfe6 !important;background-color:#f5f7fa !important}checkbox[disabled][checked] .wx-checkbox-input{border-color:#dcdfe6 !important;background-color:#dcdfe6 !important}checkbox[checked] .wx-checkbox-input::after{content:'' !important;position:absolute !important;top:8rpx !important;left:13rpx !important;width:12rpx !important;height:20rpx !important;border:3rpx solid #ffffff !important;border-top:none !important;border-left:none !important;transform:rotate(45deg) !important}@keyframes checkboxPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes checkboxTick{0%{transform:rotate(45deg) scale(0);opacity:0}100%{transform:rotate(45deg) scale(1);opacity:1}}.radio-item,.checkbox-item{display:flex;align-items:center;cursor:pointer;transition:color 0.3s ease}.radio-item:hover .radio-label,.checkbox-item:hover .checkbox-label{color:#409eff}.radio-label,.checkbox-label{margin-left:8rpx;font-size:24rpx;color:#303133;transition:color 0.3s ease}
|
||||
@@ -1,90 +1,240 @@
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.font-13 {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.font-12 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.font-11 {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.text-grey1 {
|
||||
color: #888;
|
||||
}
|
||||
.text-grey2 {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.list-cell-arrow::before {
|
||||
content: ' ';
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-width: 2px 2px 0 0;
|
||||
border-color: #c0c0c0;
|
||||
border-style: solid;
|
||||
-webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
||||
transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
.list-cell {
|
||||
position: relative;
|
||||
content: ' ';
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-width: 2px 2px 0 0;
|
||||
border-color: #c0c0c0;
|
||||
border-style: solid;
|
||||
-webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
||||
transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
.list-cell {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
padding: 26rpx 30rpx;
|
||||
}
|
||||
|
||||
.list-cell:first-child {
|
||||
border-radius: 8rpx 8rpx 0 0;
|
||||
}
|
||||
|
||||
.list-cell:last-child {
|
||||
border-radius: 0 0 8rpx 8rpx;
|
||||
}
|
||||
|
||||
.list-cell::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 1px solid #eaeef1;
|
||||
-webkit-transform: scaleY(0.5) translateZ(0);
|
||||
transform: scaleY(0.5) translateZ(0);
|
||||
transform-origin: 0 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
margin: 15px 15px;
|
||||
|
||||
.menu-item-box {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
padding: 26rpx 30rpx;
|
||||
}
|
||||
|
||||
.list-cell:first-child {
|
||||
border-radius: 8rpx 8rpx 0 0;
|
||||
}
|
||||
|
||||
.list-cell:last-child {
|
||||
border-radius: 0 0 8rpx 8rpx;
|
||||
}
|
||||
|
||||
.list-cell::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 1px solid #eaeef1;
|
||||
-webkit-transform: scaleY(0.5) translateZ(0);
|
||||
transform: scaleY(0.5) translateZ(0);
|
||||
transform-origin: 0 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.menu-list {
|
||||
margin: 15px 15px;
|
||||
|
||||
.menu-item-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.menu-icon {
|
||||
color: #007AFF;
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
margin-left: auto;
|
||||
margin-right: 34rpx;
|
||||
color: #999;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.menu-icon {
|
||||
color: #007aff;
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
margin-left: auto;
|
||||
margin-right: 34rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 全局Radio样式美化 */
|
||||
radio {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
radio[checked] .wx-radio-input {
|
||||
border-color: #409eff !important;
|
||||
background-color: #409eff !important;
|
||||
}
|
||||
|
||||
/* 全局Checkbox样式美化 */
|
||||
/* 基础样式重置 */
|
||||
checkbox {
|
||||
width: 40rpx !important;
|
||||
height: 40rpx !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Uni-app核心样式覆盖 */
|
||||
.uni-checkbox-input {
|
||||
width: 40rpx !important;
|
||||
height: 40rpx !important;
|
||||
border: 2rpx solid #dcdfe6 !important;
|
||||
border-radius: 8rpx !important;
|
||||
background-color: #ffffff !important;
|
||||
transition: all 0.3s ease-in-out !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.uni-checkbox-input:hover {
|
||||
border-color: #409eff !important;
|
||||
box-shadow: 0 0 12rpx rgba(64, 158, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
/* 选中状态 */
|
||||
.uni-checkbox-input.uni-checkbox-input-checked {
|
||||
border-color: #409eff !important;
|
||||
background-color: #409eff !important;
|
||||
animation: checkboxPulse 0.3s ease-in-out !important;
|
||||
}
|
||||
|
||||
/* 选中状态的对勾 - 使用SVG路径实现 */
|
||||
.uni-checkbox-input.uni-checkbox-input-checked::after {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: 8rpx !important;
|
||||
left: 13rpx !important;
|
||||
width: 12rpx !important;
|
||||
height: 20rpx !important;
|
||||
border: 3rpx solid #ffffff !important;
|
||||
border-top: none !important;
|
||||
border-left: none !important;
|
||||
transform: rotate(45deg) !important;
|
||||
transform-origin: center !important;
|
||||
animation: checkboxTick 0.3s ease-in-out !important;
|
||||
}
|
||||
|
||||
/* 清除默认对勾 */
|
||||
.uni-checkbox-input.uni-checkbox-input-checked::before {
|
||||
display: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* 微信小程序兼容 */
|
||||
checkbox .wx-checkbox-input {
|
||||
width: 40rpx !important;
|
||||
height: 40rpx !important;
|
||||
border: 2rpx solid #dcdfe6 !important;
|
||||
border-radius: 8rpx !important;
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
checkbox[checked] .wx-checkbox-input {
|
||||
border-color: #409eff !important;
|
||||
background-color: #409eff !important;
|
||||
}
|
||||
|
||||
checkbox[checked] .wx-checkbox-input::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 禁用状态样式 */
|
||||
checkbox[disabled] {
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
checkbox[disabled] .uni-checkbox-input {
|
||||
border-color: #dcdfe6 !important;
|
||||
background-color: #f5f7fa !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
checkbox[disabled] .uni-checkbox-input:hover {
|
||||
border-color: #dcdfe6 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
checkbox[disabled] .uni-checkbox-input.uni-checkbox-input-checked {
|
||||
border-color: #dcdfe6 !important;
|
||||
background-color: #dcdfe6 !important;
|
||||
}
|
||||
|
||||
/* 微信小程序禁用状态 */
|
||||
checkbox[disabled] .wx-checkbox-input {
|
||||
border-color: #dcdfe6 !important;
|
||||
background-color: #f5f7fa !important;
|
||||
}
|
||||
|
||||
checkbox[disabled][checked] .wx-checkbox-input {
|
||||
border-color: #dcdfe6 !important;
|
||||
background-color: #dcdfe6 !important;
|
||||
}
|
||||
|
||||
checkbox[checked] .wx-checkbox-input::after {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: 8rpx !important;
|
||||
left: 13rpx !important;
|
||||
width: 12rpx !important;
|
||||
height: 20rpx !important;
|
||||
border: 3rpx solid #ffffff !important;
|
||||
border-top: none !important;
|
||||
border-left: none !important;
|
||||
transform: rotate(45deg) !important;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes checkboxPulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkboxTick {
|
||||
0% {
|
||||
transform: rotate(45deg) scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(45deg) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 通用选择器样式 */
|
||||
.radio-item,
|
||||
.checkbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.radio-item:hover .radio-label,
|
||||
.checkbox-item:hover .checkbox-label {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.radio-label,
|
||||
.checkbox-label {
|
||||
margin-left: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #303133;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user