samehome/pages/login/useragreement.vue

<template>
	<view class="main">
		<navigation>{{ content.title }}</navigation>
		
		<!-- #ifdef APP-PLUS -->
		<view class="body-app">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="body">
				<!-- #endif -->
			<view class="content" v-html="content.content">
				
			</view>


	</view>
	</view>
</template>

<script>
	import UButton from '../../uview-ui/components/u-button/u-button.vue'
	import api from '@/utils/api'
	import md5 from 'js-md5'
	export default {
		name: "register",
		data() {
			return {
			 content:{}
			};
		},
		computed: {
			i18n() {
				return this.$t("login");
			},
		},
		onLoad() {
		this.agreement()
		},
		watch: {
			
		},
		onShow() {},
		methods: {
			// 服务协议
			agreement() {
					api.agreement({
						type:'useragreement'
					}).then(res => {
						 this.content=res
					})

			},

		},
	}
</script>

<style lang="scss" scoped>
	.content{
		margin-top: 50rpx;
		text-align: left;
		padding-bottom: 60rpx;
		// HTML+CSS 对于英文单词强制换行但不截断单词的解决办法
						
		/* 这两个在技术上是一样的, 为了兼容了浏览器两个都加上 */
		overflow-wrap: break-word;
		word-wrap: break-word;
					
		-ms-word-break: break-all;
		/* 这个的使用在web-kit中有些危险，他可能会阶段所有东西 */
		word-break: break-all;
		/* Instead use this non-standard one: */
		word-break: break-word;
					
		/* 如果浏览器支持的话增加一个连接符(Blink不支持) */
		-ms-hyphens: auto;
		-moz-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	.main {

		.body {
			margin-top: 204rpx;
			padding: 0 40rpx;
			overflow: hidden;

			.welcomeText {
				margin-top: 48rpx;
				font-size: 48rpx;
				font-weight: 800;
				text-align: center;
			}

			.signInText {
				font-size: 32rpx;
				text-align: center;
				color: #A2A0A8;
			}

			.form {
				font-size: 32rpx;
				margin-top: 48rpx;

				.input-item {
					height: 112rpx;
					line-height: 112rpx;
					background: #211F32;
					margin-bottom: 48rpx;
					border-radius: 32rpx;

					.icon {
						margin: 0 24rpx;
					}

					/deep/.u-form-item__body {
						padding: 0;
					}

					.input {
						height: 112rpx;
					}
				}

				.vCode {

					.getVCodeBtn {
						// position: absolute;
						width: 154rpx;
						height: 56rpx;
						right: 28rpx;
						// top: 14px;
						border-radius: 8px;
						line-height: 56rpx;
						font-size: 24rpx;
						color: #00E8A2 !important;
						padding: 0;
					}
				}
			}

			.agree {
				font-size: 28rpx;

				.check {
					display: inline-block;
					vertical-align: top;
					margin-right: 32rpx;
				}

				.text {
					display: inline-block;
					width: 542rpx;
				}

				span {
					cursor: pointer;
					color: #00E8A2;
					padding: 0 10rpx;

				}
			}

			.button {
				margin-top: 64rpx;
				height: 112rpx;
				line-height: 112rpx;
				border-radius: 32rpx;
				font-size: 32rpx;
				color: #15141F !important;
			}

			.signUp {
				margin: 48rpx 0;
				text-align: center;
				font-size: 32rpx;

				.navigator {
					display: inline;
					color: #00E8A2;
					padding: 0 10rpx;
				}

			}
		}
     .body-app{
     	margin-top: 204rpx !important;
     	padding: 0 40rpx;
     	overflow: hidden;
     
     	.welcomeText {
     		margin-top: 48rpx;
     		font-size: 48rpx;
     		font-weight: 800;
     		text-align: center;
     	}
     
     	.signInText {
     		font-size: 32rpx;
     		text-align: center;
     		color: #A2A0A8;
     	}
     
     	.form {
     		font-size: 32rpx;
     		margin-top: 48rpx;
     
     		.input-item {
     			height: 112rpx;
     			line-height: 112rpx;
     			background: #211F32;
     			margin-bottom: 48rpx;
     			border-radius: 32rpx;
     
     			.icon {
     				margin: 0 24rpx;
     			}
     
     			/deep/.u-form-item__body {
     				padding: 0;
     			}
     
     			.input {
     				height: 112rpx;
     			}
     		}
     
     		.vCode {
     
     			.getVCodeBtn {
     				// position: absolute;
     				width: 154rpx;
     				height: 56rpx;
     				right: 28rpx;
     				// top: 14px;
     				border-radius: 8px;
     				line-height: 56rpx;
     				font-size: 24rpx;
     				color: #00E8A2 !important;
     				padding: 0;
     			}
     		}
     	}
     
     	.agree {
     		font-size: 28rpx;
     
     		.check {
     			display: inline-block;
     			vertical-align: top;
     			margin-right: 32rpx;
     		}
     
     		.text {
     			display: inline-block;
     			width: 542rpx;
     		}
     
     		span {
     			cursor: pointer;
     			color: #00E8A2;
     			padding: 0 10rpx;
     
     		}
     	}
     
     	.button {
     		margin-top: 64rpx;
     		height: 112rpx;
     		line-height: 112rpx;
     		border-radius: 32rpx;
     		font-size: 32rpx;
     		color: #15141F !important;
     	}
     
     	.signUp {
     		margin: 48rpx 0;
     		text-align: center;
     		font-size: 32rpx;
     
     		.navigator {
     			display: inline;
     			color: #00E8A2;
     			padding: 0 10rpx;
     		}
     
     	}
     }
	}
</style>