1548 lines
26 KiB
Plaintext
1548 lines
26 KiB
Plaintext
@charset "UTF-8";
|
||
/**
|
||
* 这里是uni-app内置的常用样式变量
|
||
*
|
||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||
*
|
||
*/
|
||
/**
|
||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||
*
|
||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||
*/
|
||
/* 颜色变量 */
|
||
/* 行为相关颜色 */
|
||
/* 文字基本颜色 */
|
||
/* 背景颜色 */
|
||
/* 边框颜色 */
|
||
/* 尺寸变量 */
|
||
/* 文字尺寸 */
|
||
/* 图片尺寸 */
|
||
/* Border Radius */
|
||
/* 水平间距 */
|
||
/* 垂直间距 */
|
||
/* 透明度 */
|
||
/* 文章场景相关 */
|
||
/* 1px方案,改变border的颜色即可 */
|
||
.b-1px, .b-1px-t, .b-1px-b, .b-1px-tb, .b-1px-l, .b-1px-r {
|
||
position: relative;
|
||
}
|
||
.b-1px:before {
|
||
content: " ";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 200%;
|
||
border: 1px solid #eee;
|
||
color: #eee;
|
||
height: 200%;
|
||
-webkit-transform-origin: left top;
|
||
transform-origin: left top;
|
||
-webkit-transform: scale(0.5);
|
||
transform: scale(0.5);
|
||
box-sizing: border-box;
|
||
}
|
||
.b-1px-t:before {
|
||
content: " ";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
height: 1px;
|
||
border-top: 1px solid #eee;
|
||
color: #eee;
|
||
-webkit-transform-origin: 0 0;
|
||
transform-origin: 0 0;
|
||
-webkit-transform: scaley(0.5);
|
||
transform: scaley(0.5);
|
||
box-sizing: border-box;
|
||
}
|
||
.b-1px-b:after {
|
||
content: " ";
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
height: 1px;
|
||
border-bottom: 1px solid #eee;
|
||
color: #eee;
|
||
-webkit-transform-origin: 0 100%;
|
||
transform-origin: 0 100%;
|
||
-webkit-transform: scaley(0.5);
|
||
transform: scaley(0.5);
|
||
box-sizing: border-box;
|
||
}
|
||
.b-1px-tb:before {
|
||
content: " ";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
height: 1px;
|
||
border-top: 1px solid #eee;
|
||
color: #eee;
|
||
-webkit-transform-origin: 0 0;
|
||
transform-origin: 0 0;
|
||
-webkit-transform: scaley(0.5);
|
||
transform: scaley(0.5);
|
||
box-sizing: border-box;
|
||
}
|
||
.b-1px-tb:after {
|
||
content: " ";
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
height: 1px;
|
||
border-bottom: 1px solid #eee;
|
||
color: #eee;
|
||
-webkit-transform-origin: 0 100%;
|
||
transform-origin: 0 100%;
|
||
-webkit-transform: scaley(0.5);
|
||
transform: scaley(0.5);
|
||
box-sizing: border-box;
|
||
}
|
||
.b-1px-l::before {
|
||
content: " ";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 1px;
|
||
bottom: 0;
|
||
border-left: 1px solid #eee;
|
||
color: #eee;
|
||
-webkit-transform-origin: 0 0;
|
||
transform-origin: 0 0;
|
||
-webkit-transform: scalex(0.5);
|
||
transform: scalex(0.5);
|
||
box-sizing: border-box;
|
||
}
|
||
.b-1px-r::after {
|
||
content: " ";
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 1px;
|
||
bottom: 0;
|
||
border-right: 1px solid #eee;
|
||
color: #eee;
|
||
-webkit-transform-origin: 100% 0;
|
||
transform-origin: 100% 0;
|
||
-webkit-transform: scalex(0.5);
|
||
transform: scalex(0.5);
|
||
box-sizing: border-box;
|
||
}
|
||
/* 头像 */
|
||
.avatar {
|
||
margin: 0;
|
||
padding: 0;
|
||
display: inline-flex;
|
||
text-align: center;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
white-space: nowrap;
|
||
position: relative;
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
background-size: cover;
|
||
background-position: center;
|
||
vertical-align: middle;
|
||
}
|
||
.avatar.big {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
}
|
||
.avatar.lg {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
.avatar.md {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
}
|
||
.avatar.sm {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
.avatar.mini {
|
||
width: 66rpx;
|
||
height: 66rpx;
|
||
}
|
||
.avatar-group {
|
||
width: 46rpx;
|
||
height: 48rpx;
|
||
direction: ltl;
|
||
unicode-bidi: bidi-override;
|
||
display: inline-block;
|
||
}
|
||
.avatar-group .avatar {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
font-size: 1em;
|
||
border-radius: 50%;
|
||
border: 1rpx solid white;
|
||
-webkit-transform: rotateZ(360deg);
|
||
transform: rotateZ(360deg);
|
||
vertical-align: middle;
|
||
}
|
||
.avatar-group.md {
|
||
width: 58rpx;
|
||
height: 60rpx;
|
||
}
|
||
.avatar-group.md .avatar {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
.avatar-group.lg {
|
||
width: 82rpx;
|
||
height: 92rpx;
|
||
}
|
||
.avatar-group.lg .avatar {
|
||
width: 92rpx;
|
||
height: 92rpx;
|
||
}
|
||
.avatar-group .avatar:nth-child(1) {
|
||
margin-left: 0rpx;
|
||
}
|
||
/* 字体大小 */
|
||
.f-little {
|
||
font-size: 20rpx;
|
||
}
|
||
.f-icontext {
|
||
font-size: 22rpx;
|
||
}
|
||
/* 很小的文字,一般和图标一起使用 */
|
||
.f-caption {
|
||
font-size: 24rpx;
|
||
}
|
||
/* 辅助描述性文字 */
|
||
.f-desc {
|
||
font-size: 26rpx;
|
||
}
|
||
/* 段落字体 */
|
||
.f-paragraph {
|
||
font-size: 28rpx;
|
||
}
|
||
/* 段落字体 */
|
||
.f-title {
|
||
font-size: 30rpx;
|
||
}
|
||
/* 标题 */
|
||
.f-sm-title {
|
||
font-size: 32rpx;
|
||
}
|
||
/* 大点的标题 */
|
||
.f-md-title {
|
||
font-size: 36rpx;
|
||
}
|
||
/* 大点的标题 */
|
||
.f-lg-title {
|
||
font-size: 40rpx;
|
||
}
|
||
/* 大点的标题 */
|
||
.f-big-title {
|
||
font-size: 60rpx;
|
||
}
|
||
/* 大点的标题 */
|
||
/* 字体颜色 */
|
||
.c-base {
|
||
color: #ffffff;
|
||
}
|
||
/* 白色 */
|
||
.c-black {
|
||
color: #000000;
|
||
}
|
||
/* 黑色 */
|
||
.c-title {
|
||
color: #333;
|
||
}
|
||
/* 标题/副标题 */
|
||
.c-desc {
|
||
color: #555;
|
||
}
|
||
/* 辅助描述性文字 */
|
||
.c-caption {
|
||
color: #999999;
|
||
}
|
||
/* 辅助描述性文字 */
|
||
.c-paragraph {
|
||
color: #777;
|
||
}
|
||
/* 段落字体 */
|
||
.c-desc {
|
||
color: #666;
|
||
}
|
||
/* 段落字体 */
|
||
.c-success {
|
||
color: #4A9E45;
|
||
}
|
||
/* 成功/链接文字 */
|
||
.c-tips {
|
||
color: #ffd753;
|
||
}
|
||
/* 失效 */
|
||
.c-warning {
|
||
color: #E82F21;
|
||
}
|
||
/* 警告/非法 */
|
||
.c-nodata {
|
||
color: #cccccc;
|
||
}
|
||
/* 链接文字 */
|
||
.c-placeholder {
|
||
color: #C4C4C6;
|
||
}
|
||
/* 输入框文字 */
|
||
.c-shadow {
|
||
text-shadow: 2rpx 2rpx 2rpx #808080;
|
||
}
|
||
/* 字体阴影 */
|
||
/* 填充色 */
|
||
.fill-base {
|
||
background: #ffffff;
|
||
}
|
||
/* 默认 */
|
||
.fill-body {
|
||
background: #F0F4EC;
|
||
}
|
||
/* 页面 */
|
||
.fill-primary {
|
||
background: #19c865;
|
||
}
|
||
/* 主题色/主要活动按钮 */
|
||
.fill-caption {
|
||
background: #ffd753;
|
||
}
|
||
/* 辅助色 */
|
||
.fill-warning {
|
||
background: #f12c20;
|
||
}
|
||
/* 警告/非法 */
|
||
.fill-second {
|
||
background: #efeff4;
|
||
}
|
||
/* 区块分割线 */
|
||
.fill-space {
|
||
background: #EEEEEE;
|
||
}
|
||
/* 次要活动按钮 */
|
||
/* 阴影 */
|
||
.box-shadow {
|
||
box-shadow: 0px 3px 6px 0px rgba(227, 227, 227, 0.47);
|
||
}
|
||
.box-shadow-mini {
|
||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
||
}
|
||
/* 字体样式 */
|
||
text {
|
||
vertical-align: middle;
|
||
}
|
||
/* 上下居中 */
|
||
.text-left {
|
||
text-align: left;
|
||
}
|
||
/* 左对齐 */
|
||
.text-center {
|
||
text-align: center;
|
||
}
|
||
/* 中对齐 */
|
||
.text-right {
|
||
text-align: right;
|
||
}
|
||
/* 右对齐 */
|
||
.text-justify {
|
||
text-align: justify;
|
||
}
|
||
/* 两端对齐，谨慎使用 */
|
||
.text-justify::after {
|
||
content: "";
|
||
width: 100%;
|
||
display: inline-block;
|
||
}
|
||
.text-delete {
|
||
text-decoration: line-through;
|
||
}
|
||
/* 删除线 */
|
||
.text-underline {
|
||
text-decoration: underline;
|
||
}
|
||
/* 下划线 */
|
||
.text-bold {
|
||
font-weight: bold;
|
||
}
|
||
/* 加粗 */
|
||
.text-normal {
|
||
font-weight: normal;
|
||
}
|
||
/* 文本溢出省略 */
|
||
.ellipsis {
|
||
display: block;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.ellipsis-2 {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
}
|
||
.ellipsis-3 {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 3;
|
||
overflow: hidden;
|
||
}
|
||
.ellipsis-4 {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 4;
|
||
overflow: hidden;
|
||
}
|
||
/* 最大宽度 */
|
||
.max-100 {
|
||
max-width: 100rpx;
|
||
}
|
||
.max-150 {
|
||
max-width: 150rpx;
|
||
}
|
||
.max-180 {
|
||
max-width: 180rpx;
|
||
}
|
||
.max-200 {
|
||
max-width: 200rpx;
|
||
}
|
||
.max-300 {
|
||
max-width: 300rpx;
|
||
}
|
||
.max-350 {
|
||
max-width: 350rpx;
|
||
}
|
||
.max-380 {
|
||
max-width: 380rpx;
|
||
}
|
||
.max-400 {
|
||
max-width: 400rpx;
|
||
}
|
||
.max-446 {
|
||
max-width: 446rpx;
|
||
}
|
||
.max-476 {
|
||
max-width: 476rpx;
|
||
}
|
||
.max-490 {
|
||
max-width: 490rpx;
|
||
}
|
||
.max-500 {
|
||
max-width: 500rpx;
|
||
}
|
||
.max-510 {
|
||
max-width: 510rpx;
|
||
}
|
||
.max-520 {
|
||
max-width: 520rpx;
|
||
}
|
||
.max-540 {
|
||
max-width: 540rpx;
|
||
}
|
||
.max-550 {
|
||
max-width: 550rpx;
|
||
}
|
||
.max-566 {
|
||
max-width: 566rpx;
|
||
}
|
||
.max-580 {
|
||
max-width: 580rpx;
|
||
}
|
||
.max-600 {
|
||
max-width: 600rpx;
|
||
}
|
||
/* 外间距 */
|
||
.mg-sm {
|
||
margin: 10rpx;
|
||
}
|
||
.mg-big {
|
||
margin: 16rpx;
|
||
}
|
||
.mg-md {
|
||
margin: 20rpx;
|
||
}
|
||
.mg-lg {
|
||
margin: 30rpx;
|
||
}
|
||
.mt-sm {
|
||
margin-top: 10rpx;
|
||
}
|
||
.mt-big {
|
||
margin-top: 16rpx;
|
||
}
|
||
.mt-md {
|
||
margin-top: 20rpx;
|
||
}
|
||
.mt-lg {
|
||
margin-top: 30rpx;
|
||
}
|
||
.mr-sm {
|
||
margin-right: 10rpx;
|
||
}
|
||
.mr-big {
|
||
margin-right: 16rpx;
|
||
}
|
||
.mr-md {
|
||
margin-right: 20rpx;
|
||
}
|
||
.mr-lg {
|
||
margin-right: 30rpx;
|
||
}
|
||
.mb-sm {
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.mb-big {
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.mb-md {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.mb-lg {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.ml-sm {
|
||
margin-left: 10rpx;
|
||
}
|
||
.ml-big {
|
||
margin-left: 16rpx;
|
||
}
|
||
.ml-md {
|
||
margin-left: 20rpx;
|
||
}
|
||
.ml-lg {
|
||
margin-left: 30rpx;
|
||
}
|
||
/* 内间距 */
|
||
.pd-sm {
|
||
padding: 10rpx;
|
||
}
|
||
.pd-big {
|
||
padding: 16rpx;
|
||
}
|
||
.pd-md {
|
||
padding: 20rpx;
|
||
}
|
||
.pd-lg {
|
||
padding: 30rpx;
|
||
}
|
||
.pt-sm {
|
||
padding-top: 10rpx;
|
||
}
|
||
.pt-big {
|
||
padding-top: 16rpx;
|
||
}
|
||
.pt-md {
|
||
padding-top: 20rpx;
|
||
}
|
||
.pt-lg {
|
||
padding-top: 30rpx;
|
||
}
|
||
.pr-sm {
|
||
padding-right: 10rpx;
|
||
}
|
||
.pr-big {
|
||
padding-right: 16rpx;
|
||
}
|
||
.pr-md {
|
||
padding-right: 20rpx;
|
||
}
|
||
.pr-lg {
|
||
padding-right: 30rpx;
|
||
}
|
||
.pb-sm {
|
||
padding-bottom: 10rpx;
|
||
}
|
||
.pb-big {
|
||
padding-bottom: 16rpx;
|
||
}
|
||
.pb-md {
|
||
padding-bottom: 20rpx;
|
||
}
|
||
.pb-lg {
|
||
padding-bottom: 30rpx;
|
||
}
|
||
.pl-sm {
|
||
padding-left: 10rpx;
|
||
}
|
||
.pl-big {
|
||
padding-left: 16rpx;
|
||
}
|
||
.pl-md {
|
||
padding-left: 20rpx;
|
||
}
|
||
.pl-lg {
|
||
padding-left: 30rpx;
|
||
}
|
||
/* 图标尺寸 */
|
||
.icon-xs {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
display: block;
|
||
font-size: 32rpx;
|
||
}
|
||
.icon-sm {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
display: block;
|
||
font-size: 44rpx;
|
||
}
|
||
.icon-md {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: block;
|
||
font-size: 60rpx;
|
||
}
|
||
.icon-lg {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
display: block;
|
||
font-size: 80rpx;
|
||
}
|
||
/* 组件间距 */
|
||
.space-sm {
|
||
height: 10rpx;
|
||
}
|
||
.space-md {
|
||
height: 20rpx;
|
||
}
|
||
.space-lg {
|
||
height: 30rpx;
|
||
}
|
||
.space-lg {
|
||
height: 30rpx;
|
||
}
|
||
.space-body {
|
||
height: 150rpx;
|
||
}
|
||
.space-safe {
|
||
height: calc(env(safe-area-inset-bottom) / 2);
|
||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||
}
|
||
.space-footer {
|
||
height: 30rpx;
|
||
height: calc(30rpx + env(safe-area-inset-bottom) / 2);
|
||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||
}
|
||
.space-max-footer {
|
||
height: 180rpx;
|
||
height: calc(180rpx + env(safe-area-inset-bottom) / 2);
|
||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||
}
|
||
.space {
|
||
height: 1rpx;
|
||
background: rgba(216, 216, 216, 0.5);
|
||
}
|
||
/* 圆角 */
|
||
.radius {
|
||
border-radius: 5000rpx;
|
||
}
|
||
.radius-4 {
|
||
border-radius: 4rpx;
|
||
}
|
||
.radius-10 {
|
||
border-radius: 10rpx;
|
||
}
|
||
.radius-16 {
|
||
border-radius: 16rpx;
|
||
}
|
||
.radius-20 {
|
||
border-radius: 20rpx;
|
||
}
|
||
.radius-24 {
|
||
border-radius: 24rpx;
|
||
}
|
||
.radius-34 {
|
||
border-radius: 34rpx;
|
||
}
|
||
.radius-top-34 {
|
||
border-radius: 34rpx 34rpx 0 0;
|
||
}
|
||
.radius-bottom-34 {
|
||
border-radius: 0 0 34rpx 34rpx;
|
||
}
|
||
/* 旋转 */
|
||
.rotate-45 {
|
||
-webkit-transform: rotate(45deg);
|
||
transform: rotate(45deg);
|
||
}
|
||
.rotate-90 {
|
||
-webkit-transform: rotate(90deg);
|
||
transform: rotate(90deg);
|
||
}
|
||
.rotate-180 {
|
||
-webkit-transform: rotate(180deg);
|
||
transform: rotate(180deg);
|
||
}
|
||
.rotate-270 {
|
||
-webkit-transform: rotate(270deg);
|
||
transform: rotate(270deg);
|
||
}
|
||
.rotate-360 {
|
||
-webkit-transform: rotate(-360deg);
|
||
transform: rotate(-360deg);
|
||
}
|
||
/* 定位 */
|
||
.rel {
|
||
position: relative;
|
||
}
|
||
.abs {
|
||
position: absolute;
|
||
}
|
||
.fix {
|
||
position: fixed;
|
||
width: 100%;
|
||
z-index: 100;
|
||
}
|
||
.fixed-top {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
.fixed-bottom {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 100;
|
||
}
|
||
/* 灰度 */
|
||
.grayscale {
|
||
-webkit-filter: grayscale(100%);
|
||
filter: grayscale(100%);
|
||
}
|
||
/* 字体颜色 */
|
||
.icon-font-color {
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
/* button样式修改 */
|
||
button {
|
||
font-size: 30rpx;
|
||
border-radius: 15rpx;
|
||
line-height: 96rpx;
|
||
padding: 0rpx;
|
||
margin: 0rpx;
|
||
color: #fff;
|
||
background: transparent;
|
||
}
|
||
button::after {
|
||
border-color: transparent;
|
||
border-radius: 30rpx;
|
||
}
|
||
button.plain::after {
|
||
border-color: currentColor;
|
||
}
|
||
button[type=grey] {
|
||
color: #999999;
|
||
background: #EEEEEE;
|
||
}
|
||
/* 商品按钮 */
|
||
button.goods-btn {
|
||
width: 172rpx;
|
||
height: 58rpx;
|
||
line-height: 58rpx;
|
||
color: #777777;
|
||
background: #FEFEFE;
|
||
border-radius: 29rpx;
|
||
font-size: 28rpx;
|
||
border: 1rpx solid #C7C7C7;
|
||
-webkit-transform: rotateZ(360deg);
|
||
transform: rotateZ(360deg);
|
||
font-weight: bold;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 30rpx;
|
||
}
|
||
/* 订单按钮 */
|
||
button.order {
|
||
min-width: 100rpx;
|
||
padding: 0 20rpx;
|
||
height: 44rpx;
|
||
line-height: 44rpx;
|
||
color: #666666;
|
||
background: #fff;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 30rpx;
|
||
border-radius: 5rpx;
|
||
-webkit-transform: rotateZ(360deg);
|
||
transform: rotateZ(360deg);
|
||
}
|
||
/* 按钮按下 */
|
||
.button-hover {
|
||
opacity: 0.6;
|
||
}
|
||
/* 清除按钮默认样式 */
|
||
.clear-btn {
|
||
margin: 0;
|
||
padding: 0;
|
||
background: transparent;
|
||
border-radius: 0rpx;
|
||
line-height: 1.5;
|
||
border: none;
|
||
text-align: left;
|
||
color: #333;
|
||
}
|
||
.clear-btn::after {
|
||
border: none;
|
||
}
|
||
@font-face {
|
||
font-family: "iconfont";
|
||
/* Project id 3016672 */
|
||
src: url("https://at.alicdn.com/t/c/font_3016672_s1t0the2h0t.woff2?t=1663657760637") format("woff2"), url("https://at.alicdn.com/t/c/font_3016672_s1t0the2h0t.woff?t=1663657760637") format("woff"), url("https://at.alicdn.com/t/c/font_3016672_s1t0the2h0t.ttf?t=1663657760637") format("truetype"), url("https://at.alicdn.com/t/c/font_3016672_s1t0the2h0t.svg?t=1663657760637#iconfont") format("svg");
|
||
}
|
||
.iconfont {
|
||
font-family: "iconfont" !important;
|
||
font-size: 16px;
|
||
line-height: 1;
|
||
font-style: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
.icon-apple:before {
|
||
content: "\e618";
|
||
}
|
||
.icon-more:before {
|
||
content: "\e639";
|
||
}
|
||
.icon-xiangyou:before {
|
||
content: "\eb09";
|
||
}
|
||
.icon-fenxiao:before {
|
||
content: "\e630";
|
||
}
|
||
.icon-down:before {
|
||
content: "\e68e";
|
||
}
|
||
.icon-up:before {
|
||
content: "\e6b3";
|
||
}
|
||
.icon-account:before {
|
||
content: "\e610";
|
||
}
|
||
.icon-alipay:before {
|
||
content: "\e68a";
|
||
}
|
||
.icon-tixing:before {
|
||
content: "\e612";
|
||
}
|
||
.icon-gengduo:before {
|
||
content: "\e607";
|
||
}
|
||
.icon-wenhao:before {
|
||
content: "\e61a";
|
||
}
|
||
.icon-yingjian:before {
|
||
content: "\e64b";
|
||
}
|
||
.icon-star-bold-fill:before {
|
||
content: "\e603";
|
||
}
|
||
.icon-gouwuche:before {
|
||
content: "\e601";
|
||
}
|
||
.icon-required:before {
|
||
content: "\e808";
|
||
}
|
||
.icon-edit:before {
|
||
content: "\e7d8";
|
||
}
|
||
.icon-search:before {
|
||
content: "\e605";
|
||
}
|
||
.icon-camera:before {
|
||
content: "\e606";
|
||
}
|
||
.icon-right-bold:before {
|
||
content: "\e617";
|
||
}
|
||
.icon-add-circle-fill:before {
|
||
content: "\e61d";
|
||
}
|
||
.icon-del:before {
|
||
content: "\e621";
|
||
}
|
||
.icon-chakan:before {
|
||
content: "\e624";
|
||
}
|
||
.icon-home-fill:before {
|
||
content: "\e625";
|
||
}
|
||
.icon-weixin:before {
|
||
content: "\e627";
|
||
}
|
||
.icon-zhibo:before {
|
||
content: "\e62a";
|
||
}
|
||
.icon-home:before {
|
||
content: "\e62b";
|
||
}
|
||
.icon-mine:before {
|
||
content: "\e62c";
|
||
}
|
||
.icon-cate:before {
|
||
content: "\e62d";
|
||
}
|
||
.icon-claim-fill:before {
|
||
content: "\e62e";
|
||
}
|
||
.icon-cate-fill:before {
|
||
content: "\e62f";
|
||
}
|
||
.icon-shop:before {
|
||
content: "\e631";
|
||
}
|
||
.icon-shop-fill:before {
|
||
content: "\e633";
|
||
}
|
||
.icon-erweima:before {
|
||
content: "\e634";
|
||
}
|
||
.icon-claim:before {
|
||
content: "\e635";
|
||
}
|
||
.icon-mine-fill:before {
|
||
content: "\e636";
|
||
}
|
||
.icon-about-us:before {
|
||
content: "\e637";
|
||
}
|
||
.icon-share:before {
|
||
content: "\e638";
|
||
}
|
||
.icon-add-square:before {
|
||
content: "\e63f";
|
||
}
|
||
.iconshouye:before {
|
||
content: "\e644";
|
||
}
|
||
.icon-seed:before {
|
||
content: "\e645";
|
||
}
|
||
.icon-remove-square:before {
|
||
content: "\e646";
|
||
}
|
||
.icon-dianhua:before {
|
||
content: "\e64c";
|
||
}
|
||
.icon-remove-circle:before {
|
||
content: "\e651";
|
||
}
|
||
.icon-down-bold:before {
|
||
content: "\e652";
|
||
}
|
||
.icon-add-circle:before {
|
||
content: "\e657";
|
||
}
|
||
.icon-shuaxin:before {
|
||
content: "\e658";
|
||
}
|
||
/*flex布局,可以自己定义适合自己的*/
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
.flex-1 {
|
||
flex: 1;
|
||
}
|
||
.flex-column {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.flex-warp {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.flex-center {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.flex-between {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.flex-x-center {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.flex-x-between {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.flex-y-center {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.flex-y-start {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
}
|
||
.flex-y-end {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
}
|
||
.flex-y-baseline {
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
/* ios_自定义navBar */
|
||
.back-user-ios {
|
||
width: 87px;
|
||
height: 32px;
|
||
border-radius: 32px;
|
||
margin-top: 6px;
|
||
/* margin-top: calc(22px - 31rpx); */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #fff;
|
||
border: 1px solid #eeeeee;
|
||
-webkit-transform: rotateZ(360deg);
|
||
transform: rotateZ(360deg);
|
||
/* margin-left: 24rpx; */
|
||
}
|
||
.back-user-ios .back-user_avatar {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
background: #f4f6f8;
|
||
}
|
||
.back-user-ios .back-user_text {
|
||
font-size: 11px;
|
||
line-height: 44px;
|
||
margin-left: 5px;
|
||
}
|
||
/* .nav_c_text {
|
||
line-height: 44px;
|
||
font-size: 16px;
|
||
} */
|
||
/* android_自定义navBar */
|
||
.back-user-android {
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
width: 87px;
|
||
height: 32px;
|
||
border-radius: 32px;
|
||
margin-top: 6px;
|
||
|
||
/* margin-top: calc(22px - 31rpx); */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #fff;
|
||
border: 1px solid #eeeeee;
|
||
-webkit-transform: rotateZ(360deg);
|
||
transform: rotateZ(360deg);
|
||
/* margin-left: 24rpx; */
|
||
}
|
||
.back-user-android .back-user_avatar {
|
||
|
||
|
||
|
||
|
||
|
||
width: 24px;
|
||
height: 24px;
|
||
|
||
border-radius: 50%;
|
||
background: #f4f6f8;
|
||
}
|
||
.back-user-android .back-user_text {
|
||
|
||
|
||
|
||
|
||
|
||
|
||
font-size: 11px;
|
||
line-height: 44px;
|
||
margin-left: 5px;
|
||
}
|
||
.nav_c_text {
|
||
|
||
|
||
|
||
|
||
|
||
line-height: 44px;
|
||
font-size: 16px;
|
||
}
|
||
.common-popup-content {
|
||
width: 620rpx;
|
||
height: auto;
|
||
padding: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
.common-popup-content .title {
|
||
font-size: 40rpx;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
.common-popup-content .desc,
|
||
.common-popup-content .name {
|
||
font-size: 24rpx;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #666;
|
||
margin-top: 5rpx;
|
||
}
|
||
.common-popup-content .name {
|
||
color: #333;
|
||
margin-top: 15rpx;
|
||
}
|
||
.common-popup-content .image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 15rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
.common-popup-content .image.middle {
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
}
|
||
.common-popup-content .image.large {
|
||
width: 520rpx;
|
||
height: 520rpx;
|
||
}
|
||
.common-popup-content .input {
|
||
width: 480rpx;
|
||
height: 110rpx;
|
||
background: #F7F7F7;
|
||
}
|
||
.common-popup-content .item-right {
|
||
height: 110rpx;
|
||
top: 0;
|
||
right: 20rpx;
|
||
}
|
||
.common-popup-content .button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 50rpx;
|
||
}
|
||
.common-popup-content .button .item-child {
|
||
width: 240rpx;
|
||
height: 90rpx;
|
||
color: #666;
|
||
background: #EEEEEE;
|
||
border-radius: 45rpx;
|
||
margin: 0 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.popup-choose-time .time-item .item-child {
|
||
width: 50%;
|
||
}
|
||
.popup-choose-time .button-item {
|
||
margin-top: 50rpx;
|
||
}
|
||
.popup-choose-time .button-item .item-child {
|
||
width: 240rpx;
|
||
height: 80rpx;
|
||
color: #666;
|
||
background: #EEEEEE;
|
||
border-radius: 40rpx;
|
||
margin: 0 20rpx;
|
||
}
|
||
.popup-btn {
|
||
width: 240rpx;
|
||
height: 80rpx;
|
||
background: #EEEEEE;
|
||
}
|
||
.common-top-img {
|
||
height: 104px;
|
||
}
|
||
.common-top-info {
|
||
height: 38px;
|
||
}
|
||
.common-top-info .top-box {
|
||
bottom: 0;
|
||
width: 100%;
|
||
}
|
||
.common-nav-title {
|
||
height: 80rpx;
|
||
}
|
||
.common-nav-title .iconfont {
|
||
font-size: 24rpx;
|
||
}
|
||
.common-nav-title .icon-right {
|
||
font-size: 28rpx;
|
||
}
|
||
.common-line {
|
||
width: 8rpx;
|
||
height: 30rpx;
|
||
border-radius: 8rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
.common-btn {
|
||
min-width: 150rpx;
|
||
height: 56rpx;
|
||
padding: 0 24rpx;
|
||
}
|
||
.common-btn.disabled {
|
||
background: #EEEEEE;
|
||
}
|
||
.common-mini-btn {
|
||
width: 100rpx;
|
||
height: 44rpx;
|
||
}
|
||
.common-bg {
|
||
width: 100%;
|
||
height: 338rpx;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
.common-bg.breed {
|
||
height: 280rpx;
|
||
}
|
||
.common-bg.mine {
|
||
height: 416rpx;
|
||
}
|
||
.common-bg.home {
|
||
height: 720rpx;
|
||
}
|
||
.common-bg.sign {
|
||
height: 532rpx;
|
||
}
|
||
.common-bg.nav {
|
||
height: 128rpx;
|
||
}
|
||
.common-bg.collage {
|
||
height: 480rpx;
|
||
top: 128rpx;
|
||
}
|
||
.space-common-bg {
|
||
height: 61rpx;
|
||
}
|
||
/* 海报 */
|
||
.hideCanvasView {
|
||
position: relative;
|
||
}
|
||
.hideCanvasView .hideCanvas {
|
||
position: absolute;
|
||
left: -9999rpx;
|
||
top: -9999rpx;
|
||
}
|
||
/* 星级 */
|
||
.star-fill-info {
|
||
width: 6rem;
|
||
height: 1rem;
|
||
}
|
||
.star-fill-info .star {
|
||
top: 0;
|
||
left: -5rpx;
|
||
}
|
||
.star-fill-info .star-fill {
|
||
width: 6rem;
|
||
top: 0;
|
||
left: -5rpx;
|
||
height: 1rem;
|
||
overflow: hidden;
|
||
}
|
||
.star-fill-info .flex-warp {
|
||
width: 6rem;
|
||
}
|
||
.star-fill-info .flex-warp .item-star {
|
||
width: 0.8rem;
|
||
height: 0.8rem;
|
||
margin: 0.1rem 0.2rem;
|
||
}
|
||
.star-fill-info .flex-warp .item-star .iconfont {
|
||
/* font-size: 0.8rem; */
|
||
}
|
||
.star-fill-info .icon-star-bold-fill {
|
||
color: #eee;
|
||
}
|
||
/* 评价图片 */
|
||
.eva-img {
|
||
width: 206rpx;
|
||
height: 206rpx;
|
||
overflow: hidden;
|
||
}
|
||
.eva-img .more {
|
||
right: 0;
|
||
bottom: 0;
|
||
padding: 5rpx 10rpx;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
.eva-img.sm {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
}
|
||
.eva-img:nth-child(3n-1) {
|
||
margin: 0 20rpx;
|
||
}
|
||
/* 加减按钮 */
|
||
.add-remove-item .iconfont {
|
||
font-size: 50rpx;
|
||
}
|
||
.add-remove-item .number {
|
||
min-width: 80rpx;
|
||
}
|
||
/* 限时直降 */
|
||
.reduce-info {
|
||
top: 0;
|
||
left: 0;
|
||
min-width: 228rpx;
|
||
height: 50rpx;
|
||
border-radius: 4rpx;
|
||
padding-left: 120rpx;
|
||
}
|
||
.reduce-info .reduce-tag {
|
||
top: 0;
|
||
left: 0;
|
||
width: 120rpx;
|
||
height: 50rpx;
|
||
background: #FFFB00;
|
||
background: linear-gradient(-70deg, transparent 20rpx, #FFFB00 0);
|
||
}
|
||
/* 订单相关页面 */
|
||
.order-item .text-item {
|
||
width: 180rpx;
|
||
}
|
||
.order-item .add-remove-item .number-text {
|
||
min-width: 60rpx;
|
||
padding: 0 15rpx;
|
||
}
|
||
.order-item .add-remove-item .iconfont {
|
||
font-size: 50rpx;
|
||
}
|
||
.order-status-info .status-item {
|
||
width: 25%;
|
||
z-index: 1;
|
||
}
|
||
.order-status-info .status-item .status-img {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
}
|
||
.order-status-info .status-line {
|
||
top: 66rpx;
|
||
left: 68rpx;
|
||
width: 554rpx;
|
||
height: 1rpx;
|
||
background: #CCCCCC;
|
||
}
|
||
.order-text-info .text {
|
||
min-width: 173rpx;
|
||
}
|
||
.order-text-info .mini-text {
|
||
width: 150rpx;
|
||
}
|
||
.copy-btn {
|
||
width: 80rpx;
|
||
height: 38rpx;
|
||
font-size: 22rpx;
|
||
border-radius: 10rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
.copy-btn.sm {
|
||
width: 68rpx;
|
||
height: 36rpx;
|
||
font-size: 20rpx;
|
||
border-radius: 18rpx;
|
||
}
|
||
/* 退款图片 */
|
||
.refund-img {
|
||
width: 203rpx;
|
||
height: 203rpx;
|
||
}
|
||
.refund-img:nth-child(3n) {
|
||
margin-right: 0;
|
||
}
|
||
/* 申请表单相关页面 */
|
||
.icon-required {
|
||
font-size: 14rpx;
|
||
}
|
||
.apply-pages .icon-right {
|
||
color: #C4C4C6;
|
||
}
|
||
.apply-pages .item-text {
|
||
width: 180rpx;
|
||
height: 30rpx;
|
||
line-height: 30rpx;
|
||
font-size: 30rpx;
|
||
color: #1F1F1F;
|
||
font-weight: bold;
|
||
}
|
||
.apply-pages .item-input {
|
||
min-height: 30rpx;
|
||
line-height: 30rpx;
|
||
padding: 25rpx 0;
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
}
|
||
.apply-pages .item-input.text {
|
||
padding: 30rpx 0;
|
||
}
|
||
.apply-pages .item-textarea {
|
||
width: 690rpx;
|
||
height: 300rpx;
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
overflow-y: auto;
|
||
}
|
||
.apply-pages .item-textarea.mini {
|
||
height: 200rpx;
|
||
}
|
||
.apply-pages .icon-switch,
|
||
.apply-pages .icon-switch-on {
|
||
font-size: 90rpx;
|
||
line-height: 46rpx;
|
||
}
|
||
.apply-pages .icon-jian-fill {
|
||
font-size: 40rpx;
|
||
}
|
||
.apply-pages .add-spec-btn {
|
||
width: 182rpx;
|
||
height: 74rpx;
|
||
background: #fff;
|
||
-webkit-transform: rotateZ(360deg);
|
||
transform: rotateZ(360deg);
|
||
}
|
||
.apply-pages .add-spec-btn .iconfont {
|
||
font-size: 26rpx;
|
||
}
|
||
/* 储值明细记录 */
|
||
.stored-record-pages .list-time {
|
||
z-index: 99999;
|
||
}
|
||
.stored-record-pages .list-time .item-child {
|
||
width: 50%;
|
||
height: 95rpx;
|
||
}
|
||
.stored-record-pages .list-time .item-child .iconfont {
|
||
font-size: 28rpx;
|
||
}
|
||
/* 地址信息 */
|
||
.address-info .address-icon {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
}
|
||
.address-info .address-icon .iconfont {
|
||
font-size: 38rpx;
|
||
}
|
||
.address-info .username {
|
||
font-size: 30rpx;
|
||
}
|
||
/* 轮播图 */
|
||
.banner-info {
|
||
position: relative;
|
||
}
|
||
.banner-info .banner-swiper {
|
||
width: 750rpx;
|
||
height: 750rpx;
|
||
}
|
||
.banner-info .banner-swiper .img-bg {
|
||
top: 0rpx;
|
||
font-size: 80rpx;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
}
|
||
.banner-info .banner-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.banner-info .banner-taglist {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
bottom: 32rpx;
|
||
width: 100%;
|
||
}
|
||
.banner-info .banner-tagitem {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 90rpx;
|
||
height: 50rpx;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
color: #2b2b2b;
|
||
font-size: 22rpx;
|
||
margin-left: 1rpx;
|
||
}
|
||
.banner-info .banner-tagitem:nth-child(1) {
|
||
margin-left: 0;
|
||
}
|
||
.banner-info .banner-tagitem_count {
|
||
background: rgba(0, 0, 0, 0.5);
|
||
color: #fff;
|
||
position: absolute;
|
||
bottom: 32rpx;
|
||
right: 32rpx;
|
||
z-index: 10;
|
||
font-size: 26rpx;
|
||
border-radius: 25rpx;
|
||
}
|
||
.banner-info .banner-tagitem_active {
|
||
/* background: rgba(255, 255, 255, 0.6); */
|
||
color: #fff;
|
||
background: #19c865;
|
||
}
|
||
.banner-info .radius-left {
|
||
border-radius: 10rpx 0 0 10rpx;
|
||
}
|
||
.banner-info .radius-right {
|
||
border-radius: 0 10rpx 10rpx 0;
|
||
}
|
||
page {
|
||
font-size: 28rpx;
|
||
color: #222;
|
||
line-height: 1.5;
|
||
background: #F6F6F6;
|
||
font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
|
||
}
|
||
input::-webkit-input-placeholder {
|
||
/* WebKit browsers */
|
||
color: #A9A9A9;
|
||
}
|
||
input:-moz-placeholder {
|
||
/* Mozilla Firefox 4 to 18 */
|
||
color: #A9A9A9;
|
||
}
|
||
input::-moz-placeholder {
|
||
/* Mozilla Firefox 19+ */
|
||
color: #A9A9A9;
|
||
}
|
||
input:-ms-input-placeholder {
|
||
/* Internet Explorer 10+ */
|
||
color: #A9A9A9;
|
||
}
|
||
view {
|
||
box-sizing: border-box;
|
||
}
|
||
image {
|
||
display: block;
|
||
}
|
||
/*隐藏滚动条*/
|
||
::-webkit-scrollbar {
|
||
width: 0;
|
||
height: 0;
|
||
color: transparent;
|
||
}
|