equipment-rental-mini/pages/index/index.vue

<template>
	<view class="content">
		<image class="logo" src="/static/logo/logo.png"></image>
		<view class="text-area">
			<!-- <text class="title">{{title}}</text> -->
			<view class="text-area-login">
				登录
			</view>
			<view class="text-area-content">
				<text class="text1">广州医科大</text>
				<view class="line"></view>
				<text class="text2">实验室管理系统</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 300rpx;
		width: 300rpx;
		position: fixed;
		top: 30%;
		left:50%;
		transform: translate(-50%,-50%);
	}

	.text-area {
		display: flex;
		justify-content: center;
		flex-direction: column;
		position: fixed;
		top: 60%;
		text-align: center;
	}
	.text-area-login{
		font-size: $uni-font-size-lg;
		width: 448rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		border: 2rpx solid $uni-text-color-black;
		border-radius: 38rpx;
	}
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.text-area-content{
		margin-top: 50rpx;
		.text1{
			color: $uni-text-color;
			font-size: 56rpx;
			line-height: 150%;
		}
		.text2{
			color: rgba(128, 128, 128, 1);
			font-size: 30rpx;
			line-height: 150%;
		}
		.line{
			width: 354rpx;
			height: 2rpx;
			margin: auto;
			color: $uni-text-color;
			background-color: $uni-text-color-grey;
			font-size: 32rpx;
			line-height: 150%;
			text-align: center;
		}
	}
	
</style>