hldy_app/pages/assess/index.vue

<template>
	<view class="backgroundContainer">
		<view class="assess-title">
			<view class="left-icons">
				<image class="left-icons-img" :src="`/static/index/undericons/doublekuai.png`" />
				<view class="right-icons-font">服务考核-</view>
				<view class="right-icons-text">批量考核</view>
			</view>
			<view class="right-icons">
				<image class="right-icons-img" :src="`/static/index/undericons/man.png`" />
				<view :class="darkFans?`right-icons-font-dark`: `right-icons-font` ">王金福</view>
				<image class="right-icons-img-icon"
					:src="darkFans?`/static/index/undericons/face.png`:`/static/index/undericons/facelight.png`" />
				<image class="right-icons-img-icon"
					:src="darkFans?`/static/index/undericons/hand.png`:`/static/index/undericons/handlight.png`" />
				<image class="right-icons-img-icon" @click="jumpTo"
					:src="darkFans?`/static/index/undericons/out.png`:`/static/index/undericons/outlight.png`" />
			</view>
		</view>
		<view class="assess-another">
			<view class="left-contain">
				<view class="calendar">
					<calendar />
				</view>
			</view>
		</view>
		<!-- <calendar /> -->
		<!-- <view v-for="(item,index) in menuArray" :key="index">
			<view class="menuCard" @click="jumpTo(item.url)">
				{{item.name}}
			</view>
		</view>
		<view class="small-button">
			服务考核
		</view> -->
	</view>
	<!-- 自动更新组件  -->

</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import calendar from '@/component/public/calendar.vue'
	// 暗黑模式
	const darkFans = ref(false);
	const zyupgrade = ref(null)
	type darkFanstype = {
		darkFans : boolean
	}

	const jumpTo = (url : string) => {
		uni.navigateBack()
		// uni.navigateTo({
		// 	url: url
		// });
	}
	// 生命周期钩子
	onLoad((options : darkFanstype) => {
		// 为uni.navigateBack()啥这么写，因为options给我返回的是字符串这个`false`,只能这么写，前端中`false`是true
		// uni.navigateBack()
	});

	// 生命周期钩子
	onShow(() => {
		zyupgrade.value?.check_update()
	});
</script>

<style scoped lang="less">
	.backgroundContainer {
		position: relative;
		width: 100%;
		height: 100vh;
		background-image: url('/static/index/lightbgcnew.png');
		background-size: cover;
		background-position: center center;
		overflow: hidden;
	}

	.assess-title {
		margin-top: 60rpx;
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.right-icons {
			display: flex;
			align-items: center;
			float: right;
			height: 70rpx;
			margin-right: 40rpx;

			.right-icons-font {
				margin-left: 10rpx;
				margin-right: 10rpx;
				font-size: 35rpx;
				margin-top: -15rpx;
			}

			.right-icons-font-dark {
				color: #fff;
				margin-left: 10rpx;
				margin-right: 10rpx;
				font-size: 35rpx;
				margin-top: -15rpx;
			}

			.right-icons-img {
				width: 80rpx;
				height: 80rpx;
				margin-left: 10rpx;
				margin-right: 10rpx;
				margin-top: -20rpx;
			}

			.right-icons-img-icon {
				width: 60rpx;
				height: 80rpx;
				margin-left: 8rpx;
			}
		}
		.left-icons{
			display: flex;
			margin-left: 40rpx;
			.left-icons-img {
				width: 70rpx;
				height: 70rpx;
			}
			
			.right-icons-font {
				font-weight: 700;
				font-size: 35rpx;
				margin-left: 10rpx;
				margin-top: 10rpx;
			}
			.right-icons-text{
				font-size: 35rpx;
				margin-top: 10rpx;
			}
		}
	}
	.assess-another{
		width: 100%;
		height: calc(100vh - 120rpx);
		margin-top: 10rpx;
		display: flex;
		margin-left: 50rpx;
		.left-contain{
			height: 100%;
			width: 600rpx;
			.calendar{
				width: 100%;
				height: 650rpx;
				background: linear-gradient(to top,#F4F3FF,#FFFFFF,#ECEFFF);
				border-radius: 25rpx;
			}
		}
	}
</style>