fanyunAi/App.vue

<script>
	import {
		init
	} from "@/common";

	export default {
		onLaunch(options) {
			init(options);
			// #ifndef MP-TOUTIAO
			uni.hideTabBar({});
			// #endif			
		}
	};
</script>

<style lang="scss">
	@import '@/style/_style.scss';

	/*每个页面公共css */
	@import "uview-ui/index.scss";
	@import "animate.css";
	@import "static/iconfont/iconfont.css";
	@import './tuniao-ui/index.scss';
	@import './tuniao-ui/iconfont.css';

	@import "@/static/fonts/iconfont.css";

	.flxe {
		display: flex;
	}

	.justify-between {
		justify-content: space-between;
	}

	.flxe-column {
		flex-direction: column;
	}

	.align-center {
		align-items: center;
	}

	.justify-center {
		justify-content: center;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}


	.u-relative,
	.u-rela {
		position: relative;
	}

	.u-absolute,
	.u-abso {
		position: absolute;
	}

	// nvue不能用标签命名样式，不能放在微信组件中，否则微信开发工具会报警告，无法使用标签名当做选择器
	/* #ifndef APP-NVUE */
	image {
		display: inline-block;
	}

	// 在weex，也即nvue中，所有元素默认为border-box
	view,
	text {
		box-sizing: border-box;
	}

	/* #endif */

	.u-font-xs {
		font-size: 22rpx;
	}

	.u-font-sm {
		font-size: 26rpx;
	}

	.u-font-md {
		font-size: 28rpx;
	}

	.u-font-lg {
		font-size: 30rpx;
	}

	.u-font-xl {
		font-size: 34rpx;
	}

	.u-flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.u-flex-wrap {
		flex-wrap: wrap;
	}

	.u-flex-nowrap {
		flex-wrap: nowrap;
	}

	.u-col-center {
		align-items: center;
	}

	.u-col-top {
		align-items: flex-start;
	}

	.u-col-bottom {
		align-items: flex-end;
	}

	.u-row-center {
		justify-content: center;
	}

	.u-row-left {
		justify-content: flex-start;
	}

	.u-row-right {
		justify-content: flex-end;
	}

	.u-row-between {
		justify-content: space-between;
	}

	.u-row-around {
		justify-content: space-around;
	}

	.u-text-left {
		text-align: left;
	}

	.u-text-center {
		text-align: center;
	}

	.u-text-right {
		text-align: right;
	}

	.u-flex-col {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	/**
* 弹性盒三段式布局
*/
	.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;
	}

	/**
* 溢出省略号
* @param {Number} 行数
*/
	@mixin ellipsis($rowCount: 1) {
		@if $rowCount <=1 {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		@else {
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: $rowCount;
			-webkit-box-orient: vertical;
		}
	}

	@for $i from 1 through 12 {
		.u-ellipsis-#{$i} {
			@include ellipsis($i);
		}
	}

	// 定义flex等分
	@for $i from 0 through 12 {
		.u-flex-#{$i} {
			flex: $i;
		}
	}

	// 定义字体(px)单位，小于20都为px单位字体
	@for $i from 9 to 20 {
		.u-font-#{$i} {
			font-size: $i + px;
		}
	}

	// 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
	@for $i from 20 through 40 {
		.u-font-#{$i} {
			font-size: $i + rpx;
		}
	}

	// 定义内外边距，历遍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;
				}
			}
		}
	}

	// 重置nvue的默认关于flex的样式
	.u-reset-nvue {
		flex-direction: row;
		align-items: center;
	}
</style>