mszf-union
/
uni.scss

/**
 * 这里是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-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';

/* 全局属性 */

// 背景色
$dating-bg-color: #F8F8F8;
// 主色
$dating-color-primary: #8A38F5;

// 辅色一
$dating-color-auxiliary-one:#FFFFFF;
// 辅色二
$dating-color-auxiliary-two:#1998FF;
// 辅色三
$dating-color-auxiliary-three:#00C486;
// 辅色四
$dating-color-auxiliary-four:#FFC600;
// 辅色四
$dating-color-auxiliary-five:#ff0000;

// 文字色一
$dating-text-color-one:#333333;
// 文字色二
$dating-text-color-two:#3D3D3D;
// 文字色三
$dating-text-color-three:#D8D8D8;
// 文字色四
$dating-text-color-four:#EEEEF1;

$dating-font-size-sm:12px;
$dating-font-size-base:14px;
$dating-font-size-lg:16px;
$dating-font-size-lgm:18px;

.font-bold{
	font-weight: bold;
}

.base-font-size{
	font-size:$dating-font-size-base
}
.sm-font-size{
	font-size:$dating-font-size-sm
}
.lg-font-size{
	font-size:$dating-font-size-lg
}
.lgm-font-size{
	font-size: $dating-font-size-lgm
}

.text-color-one{
	color:$dating-text-color-one
}

.text-color-two{
	color:$dating-text-color-two
}

.bg-color-red{
	background-color: $dating-color-auxiliary-five
}

.text-color-three{
	color:$dating-text-color-three
}

.text-color-four{
	color:$dating-text-color-four
}

.text-color-white{
	color:$dating-color-auxiliary-one
}
.text-color-red{
	color:$dating-color-auxiliary-five
}

.text-color-primary{
	color: $dating-color-primary
}

.price-color{
	color: $dating-color-auxiliary-four;
	font-size: 20px;
}

.link-color{
	color: $dating-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-50{
	width: 100rpx;
	height: 100rpx;
}

.icon-img-64{
	width: 128rpx;
	height: 128rpx;
}

.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: $dating-text-color-three !important;
	font-size: 25px !important;
}

.def-bg{
	background: $dating-color-auxiliary-one;
	font-size: $dating-font-size-base;
}
.flex-1{
	flex: 1;
}
page{
	background-color: $dating-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;
}


.dating-page-main-scroll {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	//height:calc(100vh - var(--window-top));//calc()是动态计算函数
}
.dating-page-main-list{
	//background-color: $dating-color-auxiliary-one;
	padding:0 20rpx;
}

.dating-img-full{
	width: 100%;
	height: 100%;
}

.dating-img-radius-32{
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
}

.dating-img-radius-62{
	width: 124rpx;
	height: 124rpx;
	border-radius: 50%;
}

.dating-img-radius-48{
	width: 96rpx;
	height: 96rpx;
	border-radius: 50%;
}


.dating-img-12{
	width: 24rpx;
	height: 24rpx;
}

.dating-img-18{
	width: 36rpx;
	height: 36rpx;
}


.dating-img-24{
	width: 48rpx;
	height: 48rpx;
}

.dating-img-32{
	width: 64rpx;
	height: 64rpx;
}

.dating-img-48{
	width: 96rpx;
	height: 96rpx;
}

.dating-img-62{
	width: 124rpx;
	height: 124rpx;
}

.dating-bt-x-10{
	padding: 0 20rpx;
}


.dating-list-wrap{
	background-color: $dating-color-auxiliary-one;
	padding: 0 20rpx;
	.dating-list-item-bottom{
		border-bottom: 2rpx solid $dating-text-color-three;
	}
	.dating-list-item{
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.dating-list-item-left{

		}
		.dating-list-item-right{

		}
	}
}

.dating-sex-boys{
	background-color: #515BD4;
	width: 80rpx;
	height: 40rpx;
	border-radius: 25rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: $dating-color-auxiliary-one;
}
.dating-sex-girl{
	background-color: #F2317F;
	width: 80rpx;
	height: 40rpx;
	border-radius: 25rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: $dating-color-auxiliary-one;
}

.dating-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%;
}

.title {
  position: relative;
  padding-left: 13px;
}

.title:before {
  content: "";
  background-color: $dating-color-primary;
  width: 4px;
  height: 14px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.split-line-box{
	width: 2rpx;
	background: #d9d9d9;
	height: 50rpx;
}