uniapp前端样式

view框垂直居中

例如，让下面的红框垂直居中，即不管页面变成多大的，红框部分都垂直居中

line2的style="height: 100vh;display: flex;align-items: center;"
100vh说明让最外面的框铺满整个平面；
align-items:center即让里面的元素垂直居中

line3的 position: absolute;width: 100%;top:0;
position：absolute；说明让此view_id2块浮起来，即不属于最外面的view_id1块，这样下面的view_id3块才能在view_id1块中居中，而不受view_id2高度的影响

line11的style="width:100%;"
保证view_id3的宽度不出界，始终在页面内部

<template>
	<view id='1' style="height: 100vh;display: flex;align-items: center;">
		<view id='2' style="position: absolute;width: 100%;top:0;">
			
			<u-notice-bar  :show-icon='true' :scrollable='true' color='blue' 
			:single='true' mode="horizontal" type="primary" speed="50"
					:text='list'></u-notice-bar>
			<button class="cu-btn round bg-white shadow myBack" @click="goToLogin">退出</button>
			<text class="helloUser" >您好,李启天</text>
		</view>
		
		
		<view id='3' class="padding text-center" style="width:100%;">
			<view class="padding-xl radius shadow shadow-lg bg-white margin-top nav-li1"  @click="wanzheng" >
				<view class="halfWidth" >
					<image class="myIcon"  :src='icon_wanzheng'></image>
				</view>
				<view  >
					<view :style="{'color':iconColor[0]}">
						完整问诊
					</view>
					<view class="text-gray  myGrayText" >
						四诊检测+在线中医
					</view>
				</view>
			</view>
			
			
		  <view class="line2">
				<view class="padding-xl radius shadow shadow-lg bg-white margin-top nav-li"   @click="sizhen">
				  <view  >
				  	<image class="myIcon"  :src='icon_sizhen'></image>
				  </view>
				  <view >
				  	<view :style="{'color':iconColor[1]}">
				  		四诊检测
				  	</view>
				  	<view class="text-gray myGrayText">
				  		望闻问切  检测报告
				  	</view>
				  </view>
				  
				</view>
				
				<view class="padding-xl radius shadow shadow-lg bg-white margin-top nav-li"   @click="zaixian">
					<view  >
						<image class="myIcon" :src='icon_zaixian'></image>
					</view>
					<view  >
						<view :style="{'color':iconColor[2]}">
							在线中医
						</view>
						<view class="text-gray myGrayText" >
							视频问诊  实时沟通
						</view>
					</view>
				</view>
		  </view>
		</view>
		
	</view>
</template>

使用uView的组件，但是又想修改uView的样式，可以在自己的页面样式中

line1的scoped说明不影响其他页面，样式仅作用于此页面，父组件的样式也不会影响到子组件

<style lang="scss" scoped>   
	/deep/.u-line{
	bottom-width:20px;
	}
</style>

假设uView中的组件中本来使用到的样式u-line的bottom-widht宽度为1px，但是我想在我自己写的某个页面使用20px的，又不想修改后影响下次使用，即下次在别的页面用到u-line时仍保持bottom-widht宽度为1px。这个时候就可以使用/deep/.u-line{}来修改为自己想要的样式。还不会影响到下次使用，貌似使用/deep/.u-line来修改的样式要放在style中的前面，放在末尾好像不生效。