使用VMIN进行布局
先了解css3的两个属性vmax和vmin

vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

竖屏布局的时候，750rpx就是竖屏布局屏幕的宽度，vmin不管横竖屏的情况下，100vmin都是手机屏幕的宽度，所以rpx与vmin之间有一个换算的关系：x rpx=( x * 100 / 750)vmin。
也就是说： 75rpx转化为vmin就是 75 * 100/750=10vmin
所以我们将rpx转化成vmin就可以正常的进行横屏的开发。

主要：
@function tovmin(KaTeX parse error: Expected '}', got 'EOF' at end of input: rpx) { //rpx为需要转换的字号
@return #{$rpx * 100 / 750}vmin;
}

<template>
	<view class="clanHall" style="background-image: url(https://image.zrms.com.cn/1683537773246xianghuo.png);">
		<view class="videoTop row-me row-center">
			<image src="../static/back.png" mode="aspectFit" class="returnImg" @click="goClick"></image>
			<view class="row-me row-center broadcast">
				<image src="../static/icon_laba.png" mode="aspectFit" class="margin-right10 horn"></image>
				<swiper circular="true" vertical="true" autoplay="true" interval="3000" duration="1000"
					class="margin-right30 swiperBox">
					<swiper-item v-for="(item,index) in noticeList" :key="index"
						class="row-me row-center swiperItem colorfff">
						<view class="margin-left10 txt1">{{item.name}}</view>于<view class="txt2">{{item.day}}
						</view>去世，送上属于你的思念。
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="leftBox">
			<view class="row-me row-center viewBox margin-bottom20" @click="tabLeft(1)">
				<image src="../static/btn_quanjing.png" mode="aspectFit" class="img"></image>
				<view class="font-bold colorfff leftTxt">全景</view>
			</view>
			<view class="row-me row-center viewBox margin-bottom20" @click="tabLeft(2)">
				<image src="../static/btn_sc.png" mode="aspectFit" class="img">
				</image>
				<view class="font-bold colorfff leftTxt">商城</view>
			</view>
			<view class="row-me row-center viewBox margin-bottom20" @click="tabLeft(3)">
				<image src="../static/btn_jcxx.png" mode="aspectFit" class="img"></image>
				<view class="font-bold colorfff leftTxt">家祠信息</view>
			</view>
			<view class="row-me row-center viewBox" @click="tabLeft(4)">
				<image src="../static/btn_jcys.png" mode="aspectFit" class="img"></image>
				<view class="font-bold colorfff leftTxt">家祠议事</view>
			</view>
		</view>

		<view class="rightBottom row-me row-center">
			<view class="viewBox" @click="tabRightbottom(1)">留言</view>
			<view class="viewBox" @click="tabRightbottom(2)">相册</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				noticeList: [ //公告栏播报
					{
						name: '杨树林',
						day: '2020年3月29日',
					},
					{
						name: '杨树林01',
						day: '2020年3月29日',
					},
					{
						name: '杨树林02',
						day: '2020年3月29日',
					},
				],
			}
		},
		// 侦听器
		watch: {

		},
		// 计算属性
		computed: {

		},
		//组件创建
		created() {

		},
		// 页面加载
		onLoad(e) {

		},
		// 页面显示
		onShow() {

		},
		// 方法
		methods: {
			goClick() {
				this.$.back();
			},
			tabLeft(index) {
				if (index == 1) {
					this.$.toast('暂无开通，敬请期待！');
				} else if (index == 2) {
					this.$.open("/ancestralHall/store/indexList");
				} else if (index == 3) {
					this.$.toast('暂无开通，敬请期待！');
				} else if (index == 4) {
					this.$.toast('暂无开通，敬请期待！');
				}
			},
			tabRightbottom(index) {
				if (index == 1) {
					this.$.toast('暂无开通，敬请期待！');
				} else if (index == 2) {
					this.$.open("/myAncestralHall/myAncestralHallPage/photo");
				}
			},
		},
		// 页面隐藏
		onHide() {

		},
		// 页面卸载
		onUnload() {

		},
		// 触发下拉刷新
		onPullDownRefresh() {

		},
		// 页面上拉触底事件的处理函数
		onReachBottom() {

		},
	}
</script>

<style lang="scss" scoped>
	@function tovmin($rpx) {
		//$rpx为需要转换的字号
		@return #{$rpx * 100 / 750}vmin;
	}

	// width: tovmin(750);
	.clanHall {
		height: 100vh;
		overflow: auto;
		background-color: #2A3143;
		background-size: 100% 100%;

		.videoTop {
			// height: 88rpx;
			height: tovmin(88);

			.returnImg {
				// width: 123rpx;
				// height: 34rpx;
				// margin-left: 60rpx;
				// margin-right: 46rpx;
				width: tovmin(123);
				height: tovmin(34);
				margin-left: tovmin(60);
				margin-right: tovmin(46);
			}

			.broadcast {
				flex: 1;
				// height: 80rpx;
				height: tovmin(80);
				border-radius: 20rpx;

				.horn {
					// width: 30rpx;
					// height: 30rpx;
					width: tovmin(30);
					height: tovmin(30);
				}

				.swiperBox {
					width: 100%;
					// height: 80rpx;
					height: tovmin(80);

					.horn {
						// width: 30rpx;
						// height: 30rpx;
						width: tovmin(30);
						height: tovmin(30);
					}

					.swiperItem {
						font-size: tovmin(24);

						.txt1 {
							color: #DBB081;
						}

						.txt2 {
							color: #DBB081;
						}
					}

				}
			}
		}

		.leftBox {
			position: fixed;
			// top: 118rpx;
			// left: 90rpx;
			// width: 200rpx;

			width: tovmin(200);
			top: tovmin(118);
			left: tovmin(90);

			.viewBox {
				// width: 200rpx;
				// height: 80rpx;
				width: tovmin(200);
				height: tovmin(80);
				background: rgba(0, 0, 0, 0.5);
				border-radius: 50rpx;
			}

			.img {
				// width: 44rpx;
				// height: 44rpx;
				// margin-left: 28rpx;
				// margin-right: 12rpx;

				width: tovmin(44);
				height: tovmin(44);
				margin-left: tovmin(28);
				margin-right: tovmin(12);
			}

			.leftTxt {
				font-size: tovmin(24);
			}
		}

		.rightBottom {
			position: fixed;
			// bottom: 58rpx;
			// right: 40rpx;

			bottom: tovmin(58);
			right: tovmin(40);

			.viewBox {
				// width: 182rpx;
				// height: 70rpx;
				// line-height: 70rpx;
				background-image: url('../static/bg_liuyan.png');
				background-size: 100% 100%;
				// font-size: 26rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				// margin-left: 27rpx;

				width: tovmin(182);
				height: tovmin(70);
				line-height: tovmin(70);
				font-size: tovmin(26);
				margin-left: tovmin(27);
			}
		}

	}
</style>