代码拉取完成,页面将自动刷新
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
$uni-bg-color-primary: #F9F9F9;
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16;
/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;
/* uni.scss */
@import 'uview-ui/theme.scss';
/* 全局属性 */
// 背景色
$im-bg-color:#F8F8F8;
// 主色
$im-color-primary:#FB4A46;
// 辅色一
$im-color-auxiliary-one:#FFFFFF;
// 辅色二
$im-color-auxiliary-two:#1998FF;
// 辅色三
$im-color-auxiliary-three:#00C486;
// 辅色四
$im-color-auxiliary-four:#FFC600;
// 文字色一
$im-text-color-one:#333333;
// 文字色二
$im-text-color-two:#3D3D3D;
// 文字色三
$im-text-color-three:#D8D8D8;
// 文字色四
$im-text-color-four:#EEEEF1;
$im-font-size-sm:12px;
$im-font-size-base:14px;
$im-font-size-lg:16px;
$im-font-size-lgm:18px;
.font-bold{
font-weight: bold;
}
.base-font-size{
font-size:$im-font-size-base
}
.sm-font-size{
font-size:$im-font-size-sm
}
.lg-font-size{
font-size:$im-font-size-lg
}
.lgm-font-size{
font-size: $im-font-size-lgm
}
.text-color-one{
color:$im-text-color-one
}
.text-color-two{
color:$im-text-color-two
}
.text-color-three{
color:$im-text-color-three
}
.text-color-four{
color:$im-text-color-four
}
.text-color-white{
color:$im-color-auxiliary-one
}
.text-color-primary{
color: $im-color-primary
}
.price-color{
color: $im-color-auxiliary-four;
font-size: 20px;
}
.link-color{
color: $im-color-auxiliary-two;
}
.icon-size{
width: 50rpx;
height: 50rpx;
}
.icon-img-size{
width: 104rpx;
height: 104rpx;
}
.icon-img-32{
width: 64rpx;
height: 64rpx;
}
.icon-img-24{
width: 48rpx;
height: 48rpx;
}
.icon-img-20{
width: 40rpx;
height: 40rpx;
}
.icon-attention-color{
color: #515BD4 !important;
}
.icon-help-color{
color: #8134AF !important;
}
.icon-material-color{
color: #DD2A7B !important;
}
.icon-feedback-color{
color: #F07810 !important;
}
.icon-shipping_address-color{
color: #5BE7C4 !important;
}
.icon-updates-color{
color: #50C1E9 !important;
}
.icon-quit-color{
color: #FD5F00 !important;;
}
.icon-bg-color{
color: $im-text-color-three !important;
font-size: 25px !important;
}
.def-bg{
background: $im-color-auxiliary-one;
font-size: $im-font-size-base;
}
.flex-1{
flex: 1;
}
page{
background-color: $im-bg-color;
}
// 定义内外边距,历遍1-100
@for $i from 0 through 100 {
// 只要双数和能被5除尽的数
@if $i % 2 == 0 or $i % 5 == 0 {
// 得出:u-margin-30或者u-m-30
.u-margin-#{$i},
.u-m-#{$i} {
margin: $i + rpx !important;
}
.u-m-x-#{$i} {
margin-left: $i + rpx !important;
margin-right: $i + rpx !important;
}
.u-m-y-#{$i} {
margin-top: $i + rpx !important;
margin-bottom: $i + rpx !important;
}
// 得出:u-padding-30或者u-p-30
.u-padding-#{$i},
.u-p-#{$i} {
padding: $i + rpx !important;
}
.u-p-x-#{$i} {
padding-left: $i + rpx !important;
padding-right: $i + rpx !important;
}
.u-p-y-#{$i} {
padding-top: $i + rpx !important;
padding-bottom: $i + rpx !important;
}
@each $short, $long in l left, t top, r right, b bottom {
// 缩写版,结果如: u-m-l-30
// 定义外边距
.u-m-#{$short}-#{$i} {
margin-#{$long}: $i + rpx !important;
}
// 定义内边距
.u-p-#{$short}-#{$i} {
padding-#{$long}: $i + rpx !important;
}
// 完整版,结果如:u-margin-left-30
// 定义外边距
.u-margin-#{$long}-#{$i} {
margin-#{$long}: $i + rpx !important;
}
// 定义内边距
.u-padding-#{$long}-#{$i} {
padding-#{$long}: $i + rpx !important;
}
}
}
}
/**
* 弹性盒三段式布局
*/
.page_box {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-x: hidden;
background: $u-bg-color;
}
.scroll-box {
flex: 1;
height: 100%;
position: relative;
}
.content_box {
flex: 1;
overflow-y: auto;
}
.im-page-main-scroll {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
//height:calc(100vh - var(--window-top));//calc()是动态计算函数
}
.im-page-main-list{
//background-color: $im-color-auxiliary-one;
padding:0 20rpx;
}
.im-img-full{
width: 100%;
height: 100%;
}
.im-img-radius-32{
width: 64rpx;
height: 64rpx;
border-radius: 50%;
}
.im-img-radius-62{
width: 124rpx;
height: 124rpx;
border-radius: 50%;
}
.im-img-radius-48{
width: 96rpx;
height: 96rpx;
border-radius: 50%;
}
.im-img-12{
width: 24rpx;
height: 24rpx;
}
.im-img-18{
width: 36rpx;
height: 36rpx;
}
.im-img-24{
width: 48rpx;
height: 48rpx;
}
.im-img-32{
width: 64rpx;
height: 64rpx;
}
.im-img-48{
width: 96rpx;
height: 96rpx;
}
.im-img-62{
width: 124rpx;
height: 124rpx;
}
.im-bt-x-10{
padding: 0 20rpx;
}
.im-list-wrap{
background-color: $im-color-auxiliary-one;
padding: 0 20rpx;
.im-list-item-bottom{
border-bottom: 2rpx solid $im-text-color-three;
}
.im-list-item{
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
.im-list-item-left{
}
.im-list-item-right{
}
}
}
.im-sex-boys{
background-color: #515BD4;
width: 80rpx;
height: 40rpx;
border-radius: 25rpx;
display: flex;
justify-content: center;
align-items: center;
color: $im-color-auxiliary-one;
}
.im-sex-girl{
background-color: #F2317F;
width: 80rpx;
height: 40rpx;
border-radius: 25rpx;
display: flex;
justify-content: center;
align-items: center;
color: $im-color-auxiliary-one;
}
.im-level-wrap{
text-align: center;
background-color: #3c9cff;
color: #fff;
width:60rpx;
border-radius: 50rpx;
}
.row-y{
display: flex;
flex-direction: column;
}
.row-x{
display: flex;
}
.row-sta-bet{
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.row-end{
display: flex;
align-items: flex-end;
}
.row-cen{
display: flex;
align-items: center;
}
.row-sta{
display: flex;
align-items: flex-start;
}
.row-cen-end{
display: flex;
align-items: center;
justify-content: flex-end;
}
.row-cen-sta{
display: flex;
align-items: center;
justify-content: flex-start;
}
.row-cen-cen{
display: flex;
align-items: center;
justify-content: center;
}
.row-cen-end{
display: flex;
align-items: center;
justify-content: flex-end;
}
.row-cen-bet{
display: flex;
align-items: center;
justify-content: space-between;
}
.col-cen{
display: flex;
flex-direction: column;
align-items: center;
}
.col-cen-bet{
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.col-cen-cen{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.col-cen-end{
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.block-cen{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.def-img {
display: flex;
align-items: center;
justify-content: center;
}
.def-img>image {
width: 100%;
height: 100%;
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。