sange-bridge/pages/math/index.vue

<template>
	<app-layout class="app-math">
		<view class="container">
			<view class="cover-image">
				<u-image width="100%" height="400rpx" src="https://xiansin.oss-cn-shenzhen.aliyuncs.com/sange-bridge/images/formula/formula-cover.png"></u-image>
			</view>
			<view class="input">
				<u-input
						type="number"
						:custom-style="{backgroundColor: '#ffffff',borderRadius:'10rpx',padding:'8rpx 16rpx'}"
						placeholder-style="color:#aaa"
						placeholder="请输入角度(0-90°)"
						v-model="angle"
				></u-input>
			</view>
			<view class="button">
				<u-button :ripple="true" @click="handleCalc" shape="circle" :custom-style="{backgroundColor:$u.color['mainBgColor'],color:'#ffffff'}">计算</u-button>
			</view>
			<view class="table">
				<view class="row">{{angle1}}°公示表</view>
				<view class="row stripe">
					<text class="txt">高</text>
					<text class="txt">*</text>
					<text class="txt">{{value1.toFixed(3)}}</text>
					<text class="txt">=</text>
					<text class="txt">底边</text>
				</view>
				<view class="row">
					<text class="txt">高</text>
					<text class="txt">*</text>
					<text class="txt">{{value2.toFixed(3)}}</text>
					<text class="txt">=</text>
					<text class="txt">斜边</text></view>
				<view class="row stripe">
					<text class="txt">边高</text>
					<text class="txt">*</text>
					<text class="txt">{{value3.toFixed(3)}}</text>
					<text class="txt">=</text>
					<text class="txt">切口</text></view>
				<view class="row">
					<text class="txt">底边</text>
					<text class="txt">*</text>
					<text class="txt">{{value4.toFixed(3)}}</text>
					<text class="txt">=</text>
					<text class="txt">高</text></view>
				<view class="row stripe">
					<text class="txt">底边</text>
					<text class="txt">*</text>
					<text class="txt">{{value5.toFixed(3)}}</text>
					<text class="txt">=</text>
					<text class="txt">斜边</text></view>
				<view class="row">
					<text class="txt">斜边</text>
					<text class="txt">*</text>
					<text class="txt">{{value6.toFixed(3)}}</text>
					<text class="txt">=</text>
					<text class="txt">高</text></view>
				<view class="row stripe">
					<text class="txt">斜边</text>
					<text class="txt">*</text>
					<text class="txt">{{value7.toFixed(3)}}</text>
					<text class="txt">=</text>
					<text class="txt">底边</text></view>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import appLayout from "@/components/app-layout"
	export default {
		components:{
			appLayout,
		},
		data() {
			return {
				angle: '',
				angle1: 45,
				value1: 1.0,
				value2: 1.414,
				value3: 0.828,
				value4: 1.0,
				value5: 1.414,
				value6: 0.707,
				value7: 0.707,
			}
		},
		methods: {
			handleCalc(){
				if(!this.angle){
					this.$u.toast('角度不能为0');
					return;
				}
				if(!this.angle > 90){
					this.$u.toast('角度不能大于90');
					return;
				}
				this.angle1 = this.angle
				this.value1 = this.$util.cot(this.angle);
				this.value2 = this.$util.csc(this.angle);
				this.value3 = this.$util.tan(this.angle/2)*2;
				this.value4 = this.$util.tan(this.angle);
				this.value5 = this.$util.sec(this.angle);
				this.value6 = this.$util.sin(this.angle);
				this.value7 = this.$util.cos(this.angle);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-math{
		.input{
			margin-top: 32rpx;
		}
		.button{
			margin-top: 32rpx;
		}

		.table{
			border-radius: 16rpx;
			overflow: hidden;
			text-align: center;
			margin-top: 32rpx;
			.row{
				padding: 16rpx 0;
				font-size: 36rpx;
				font-weight: 600;
				background: #EAEAEA;
				&.stripe{
					background: #D8D8D8;
				}
				>.txt{
					font-size: 28rpx;
					display: inline-block;
					font-weight: normal;
					&:nth-child(1){
						width: 15%;
					}
					&:nth-child(2){
						width: 15%;
					}
					&:nth-child(3){
						width: 15%;
					}
					&:nth-child(4){
						width: 15%;
					}
					&:nth-child(5){
						width: 15%;
					}
				}
			}
		}

		.version{
			font-size: 24rpx;
			margin-top: 32rpx;
			color: #c6c6c6;
		}
		.copyright{
			padding: 8rpx 0;
			color: #C6C6C6;
			font-size: 24rpx;
			.agreement{
				color: $main-color;
			}
		}
	}
</style>