hldy_app_mini/pages/NursingNew/component/leftcontent/leftcontent.vue

<template>
	<view>
		<view class="letbox" :style="style">
			<view class="logomain tp">
				<image src="/static/shouye/logo2.png" mode="aspectFill"></image>
			</view>
			<view class="cont">
				<view class="items" v-for="(v,i) in list" :key='i' :class="{'act':i==dexleft}" @click="dexleft = i;emit('navurl',i,v)">
					<view class="tm guodu">
						<image :src="i==dexleft?v.urls:v.url" mode="aspectFill" class="guodu"></image>
						<text>{{v.name}}</text>
					</view>
					<!-- <view class="heng guodu" :style="i!=dexleft&&i!=list.length-1?'opacity: 1':'opacity: 0'"></view> -->
				</view>
			</view>
			<view class="logo">
				<view class="tp">
					<image src="/static/shouye/xd.png" mode="aspectFill"></image>
				</view>
				<text>{{uni.getStorageSync('realname')}}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
	const props = defineProps({
		list: {
			type: Array 
		},
		style:{
			type:String
		}
	});
	const emit = defineEmits(['navurl'])
	const dexleft = ref(0);
	
</script>

<style scoped lang="less">
	.letbox{
		width: 8.2vw;
		height: 100vh;
		background:rgba(255, 255, 255, 0.4);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 3.8vw 0 1vw 0;
		margin-right: 3vw;
		.logo{
			width: 3.8vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			view{
				width: 3.8vw;
				height: 3.8vw;
			}
			text{
				font-size: 1.2vw;
				margin-top: 0.6vw;
				color: #666666;
			}
		}
		.logomain{
			width: 6vw;
			height: 6vw;
		}
		.cont{
			width: 6vw;
			display: flex;
			flex-direction: column;
			// background-color: red;
			.act{
				background: RGBA(228, 229, 231, 1);
				border-radius: 1.1vw;
				.tm{
					image{
						width: 2.2vw !important;
						height: 2.2vw !important;
					}
				}
			}
			.items{
				width: 6vw;
				height: 4.5vw;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				justify-content: space-between;
				margin-top: 0vw;
				padding: 0.25vw 0;
				.tm{
					width: 6vw;
					height: 4vw;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					image{
						width: 2vw;
						height: 2vw;
					}
					text{
						font-weight: 400;
						font-size: 0.9vw;
						color: #666666;
					}
				}
				
				.heng{
					position: absolute;
					left: 1.2vw;
					bottom: -0.6vw;
					width: 1.6vw;
					height: 2px;
					border-radius: 1px;
					background: #c9c9c9;
				}
			}
		}
	}
	.tp image{
		width: 100%;
		height: 100%;
	}
	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
</style>