初始化代码
This commit is contained in:
102
uniapp/uni-app/styles/1px.scss
Normal file
102
uniapp/uni-app/styles/1px.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
/* 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%;
|
||||
transform-origin: left top;
|
||||
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;
|
||||
transform-origin: 0 0;
|
||||
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;
|
||||
transform-origin: 0 100%;
|
||||
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;
|
||||
transform-origin: 0 0;
|
||||
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;
|
||||
transform-origin: 0 100%;
|
||||
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;
|
||||
transform-origin: 0 0;
|
||||
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;
|
||||
transform-origin: 100% 0;
|
||||
transform: scalex(0.5);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
84
uniapp/uni-app/styles/avatar.scss
Normal file
84
uniapp/uni-app/styles/avatar.scss
Normal file
@@ -0,0 +1,84 @@
|
||||
/* 头像 */
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
181
uniapp/uni-app/styles/base.scss
Normal file
181
uniapp/uni-app/styles/base.scss
Normal file
@@ -0,0 +1,181 @@
|
||||
|
||||
/* 字体大小 */
|
||||
.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{transform: rotate(45deg);}
|
||||
.rotate-90{transform: rotate(90deg);}
|
||||
.rotate-180{transform: rotate(180deg);}
|
||||
.rotate-270{transform: rotate(270deg);}
|
||||
.rotate-360{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;}
|
||||
81
uniapp/uni-app/styles/button.scss
Normal file
81
uniapp/uni-app/styles/button.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
/* 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;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
200
uniapp/uni-app/styles/icon.scss
Normal file
200
uniapp/uni-app/styles/icon.scss
Normal file
@@ -0,0 +1,200 @@
|
||||
@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";
|
||||
}
|
||||
9
uniapp/uni-app/styles/index.scss
Normal file
9
uniapp/uni-app/styles/index.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
@import './1px.scss';
|
||||
@import './avatar.scss';
|
||||
@import './base.scss';
|
||||
@import './button.scss';
|
||||
@import './icon.scss';
|
||||
@import './layout.scss';
|
||||
@import './navbar.scss';
|
||||
@import './popup.scss';
|
||||
@import './pages.scss';
|
||||
60
uniapp/uni-app/styles/layout.scss
Normal file
60
uniapp/uni-app/styles/layout.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
/*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;
|
||||
}
|
||||
96
uniapp/uni-app/styles/navbar.scss
Normal file
96
uniapp/uni-app/styles/navbar.scss
Normal file
@@ -0,0 +1,96 @@
|
||||
/* 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;
|
||||
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 {
|
||||
/* #ifdef MP-BAIDU */
|
||||
width: 74.5px;
|
||||
height: 28px;
|
||||
border-radius: 28px;
|
||||
margin-top: 5px;
|
||||
/* #endif */
|
||||
/* #ifndef MP-BAIDU */
|
||||
width: 87px;
|
||||
height: 32px;
|
||||
border-radius: 32px;
|
||||
margin-top: 6px;
|
||||
/* #endif */
|
||||
/* margin-top: calc(22px - 31rpx); */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
border: 1px solid #eeeeee;
|
||||
transform: rotateZ(360deg);
|
||||
/* margin-left: 24rpx; */
|
||||
}
|
||||
|
||||
|
||||
.back-user-android .back-user_avatar {
|
||||
/* #ifdef MP-BAIDU */
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
/* #endif */
|
||||
/* #ifndef MP-BAIDU */
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
/* #endif */
|
||||
border-radius: 50%;
|
||||
background: #f4f6f8;
|
||||
}
|
||||
|
||||
|
||||
.back-user-android .back-user_text {
|
||||
/* #ifdef MP-BAIDU */
|
||||
font-size: 10px;
|
||||
line-height: 28px;
|
||||
margin-left: 3px;
|
||||
/* #endif */
|
||||
/* #ifndef MP-BAIDU */
|
||||
font-size: 11px;
|
||||
line-height: 44px;
|
||||
margin-left: 5px;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.nav_c_text {
|
||||
/* #ifdef MP-BAIDU */
|
||||
line-height: 36px;
|
||||
font-size: 15px;
|
||||
/* #endif */
|
||||
/* #ifndef MP-BAIDU */
|
||||
line-height: 44px;
|
||||
font-size: 16px;
|
||||
/* #endif */
|
||||
}
|
||||
432
uniapp/uni-app/styles/pages.scss
Normal file
432
uniapp/uni-app/styles/pages.scss
Normal file
@@ -0,0 +1,432 @@
|
||||
.common-top-img {
|
||||
height: 104px;
|
||||
}
|
||||
|
||||
.common-top-info {
|
||||
height: 38px;
|
||||
|
||||
.top-box {
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.common-nav-title {
|
||||
height: 80rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.hideCanvas {
|
||||
position: absolute;
|
||||
left: -9999rpx;
|
||||
top: -9999rpx
|
||||
}
|
||||
}
|
||||
|
||||
/* 星级 */
|
||||
.star-fill-info {
|
||||
width: 6rem;
|
||||
height: 1rem;
|
||||
|
||||
.star {
|
||||
top: 0;
|
||||
left: -5rpx;
|
||||
}
|
||||
|
||||
.star-fill {
|
||||
width: 6rem;
|
||||
top: 0;
|
||||
left: -5rpx;
|
||||
height: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flex-warp {
|
||||
width: 6rem;
|
||||
|
||||
.item-star {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
margin: 0.1rem 0.2rem;
|
||||
|
||||
.iconfont {
|
||||
/* font-size: 0.8rem; */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-star-bold-fill {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* 评价图片 */
|
||||
.eva-img {
|
||||
width: 206rpx;
|
||||
height: 206rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.number {
|
||||
min-width: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 限时直降 */
|
||||
.reduce-info {
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-width: 228rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 4rpx;
|
||||
padding-left: 120rpx;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.add-remove-item {
|
||||
.number-text {
|
||||
min-width: 60rpx;
|
||||
padding: 0 15rpx;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.order-status-info {
|
||||
.status-item {
|
||||
width: 25%;
|
||||
z-index: 1;
|
||||
|
||||
.status-img {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.status-line {
|
||||
top: 66rpx;
|
||||
left: 68rpx;
|
||||
width: 554rpx;
|
||||
height: 1rpx;
|
||||
background: #CCCCCC;
|
||||
}
|
||||
}
|
||||
|
||||
.order-text-info {
|
||||
.text {
|
||||
min-width: 173rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
width: 180rpx;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
font-size: 30rpx;
|
||||
color: #1F1F1F;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item-input {
|
||||
min-height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
padding: 25rpx 0;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.item-input.text {
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.item-textarea {
|
||||
width: 690rpx;
|
||||
height: 300rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.item-textarea.mini {
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.icon-switch,
|
||||
.icon-switch-on {
|
||||
font-size: 90rpx;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
|
||||
|
||||
.icon-jian-fill {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.add-spec-btn {
|
||||
width: 182rpx;
|
||||
height: 74rpx;
|
||||
background: #fff;
|
||||
transform: rotateZ(360deg);
|
||||
|
||||
.iconfont {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 储值明细记录 */
|
||||
.stored-record-pages {
|
||||
.list-time {
|
||||
z-index: 99999;
|
||||
|
||||
.item-child {
|
||||
width: 50%;
|
||||
height: 95rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 地址信息 */
|
||||
.address-info {
|
||||
.address-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 轮播图 */
|
||||
.banner-info {
|
||||
position: relative;
|
||||
|
||||
.banner-swiper {
|
||||
width: 750rpx;
|
||||
height: 750rpx;
|
||||
|
||||
.img-bg {
|
||||
top: 0rpx;
|
||||
font-size: 80rpx;
|
||||
background: rgba(0, 0, 0, 0.2)
|
||||
}
|
||||
}
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banner-taglist {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: 32rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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-tagitem:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.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-tagitem_active {
|
||||
/* background: rgba(255, 255, 255, 0.6); */
|
||||
color: #fff;
|
||||
background: #19c865;
|
||||
}
|
||||
|
||||
.radius-left {
|
||||
border-radius: 10rpx 0 0 10rpx;
|
||||
}
|
||||
|
||||
.radius-right {
|
||||
border-radius: 0 10rpx 10rpx 0;
|
||||
}
|
||||
}
|
||||
106
uniapp/uni-app/styles/popup.scss
Normal file
106
uniapp/uni-app/styles/popup.scss
Normal file
@@ -0,0 +1,106 @@
|
||||
.common-popup-content {
|
||||
width: 620rpx;
|
||||
height: auto;
|
||||
padding: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.desc,
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #333;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 15rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.image.middle {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.image.large {
|
||||
width: 520rpx;
|
||||
height: 520rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 480rpx;
|
||||
height: 110rpx;
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.item-right {
|
||||
height: 110rpx;
|
||||
top: 0;
|
||||
right: 20rpx;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 50rpx;
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
|
||||
.button-item {
|
||||
margin-top: 50rpx;
|
||||
|
||||
.item-child {
|
||||
width: 240rpx;
|
||||
height: 80rpx;
|
||||
color: #666;
|
||||
background: #EEEEEE;
|
||||
border-radius: 40rpx;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-btn {
|
||||
width: 240rpx;
|
||||
height: 80rpx;
|
||||
background: #EEEEEE;
|
||||
}
|
||||
Reference in New Issue
Block a user