recruitment-wechat-uniapp-241012/pages/index/keepAccounts.vue

<template>
	<view class="page">
		<navbar title="记工记账" />
		<view class="page-tag">
			<uv-tabs :list="list" lineWidth="55" lineHeight="8" :activeStyle="{
				color: '#3796F8',
			}" :inactiveStyle="{
				color: '#999999',
			}" itemStyle="padding:60rpx 20rpx 20rpx 20rpx;width: 44%;"></uv-tabs>
		</view>

		<view class="page-picture">
			<view class="page-picture-img">
				<view class="page-picture-group" @click="show = true">
					<image src="../../static/image/keepAccounts/artisan.png" mode="aspectFit" />
					<view>
						新建账本
					</view>
				</view>
			</view>
			<view class="page-picture-img" @click="$utils.navigateTo('/pages_order/kepp/AnnualExpenditure')">
				<view class="page-picture-group">
					<image src="../../static/image/keepAccounts/wallet.png" mode="aspectFit" />
					<view>全年收支</view>
				</view>
			</view>
			<view class="page-picture-img" @click="$utils.navigateTo('/pages_order/kepp/MechanicProblem')">
				<view class="page-picture-group">
					<image src="../../static/image/keepAccounts/accountBook.png" mode="aspectFit" />
					<view>
						技工问题
					</view>
				</view>
			</view>
		</view>
		<view style="font-weight: 500; margin-top: 20rpx;">
			<uv-tabs :list="list" lineWidth="0" lineHeight="0" :activeStyle="{
				color: '#3796F8',
			}"></uv-tabs>
		</view>

		<uv-overlay :show="show">
			<view class="warp">
				<view class="rect">
					<view class="warp-top">
						新建项目
					</view>
					<view class="rect-two">
						<view class="designation">项目名称：</view>
						<view class="wire" />
						<view class="description">请输入项目名称：</view>
						<input class="rect-input" />
						<view class="wire" style="margin-top: 20rpx;" />
						<view class="option">
							<select class="select">
								<option value="option1">收入 </option>
							</select>
						</view>
						<view class="introduce">
							项目金额：1314元
						</view>
						<view class="button">
							<view @click="isShohw">取消</view>
							<view>确定</view>
						</view>
					</view>
				</view>

			</view>
		</uv-overlay>


		<tabber select="1" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'

	export default {
		components: {
			tabber,
		},
		data() {
			return {
				list: [{
					name: '个人记工',
				}, {
					name: '班组记工',
				}],
				show: false
			}
		},
		computed: {

		},
		onReady() {

		},
		methods: {
			isShohw(){
				this.show = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		.page-tag {
			font-weight: 600;
		}

		.page-picture {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-around;

			.page-picture-img {
				width: 220rpx;
				height: 220rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				border-radius: 10rpx;

				.page-picture-group {
					height: 80rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.warp {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;

			.rect {
				width: 90%;
				height: 700rpx;
				background-color: #fff;
				border-radius: 20rpx;
				overflow: hidden;

				.warp-top {
					text-align: center;
					font-size: 24rpx;
					padding: 15rpx 0;
					color: #FFFFFF;
					background-color: #3796F8;
				}

				.rect-two {
					width: 90%;
					margin-left: 5%;
					font-size: 28rpx;

					.designation {
						padding: 20rpx 0;
						color: #333;
						font-weight: 600;
					}
				}

				.wire {
					border-bottom: 4rpx dashed rgb(168, 197, 255);
				}

				.description {
					padding: 20rpx 0;
					color: #666666;
				}

				.rect-input {
					height: 60rpx;
					background-color: #EBF0FC;
					border: 2rpx solid #4280FD;
					border-radius: 14rpx;
				}

				.option {
					padding: 40rpx 40rpx 40rpx 0rpx;

					.select {
						background-color: #EBF0FC;
						padding: 10rpx 20rpx;
						color: #4280FD;
						border: 2rpx solid #4280FD;
						border-radius: 5rpx;
					}
				}

				.introduce {
					text-align: center;
					background-color: #EBF0FC;
					padding: 20rpx 0;
					color: #4280FD;
				}

				.button {
					display: flex;
					justify-content: space-around;
					text-align: center;
					align-content: center;
					margin-top: 70rpx;

					view:nth-child(1) {
						color: #575757;
						border: 2rpx solid #C7C7C7;
					}

					view:nth-child(2) {
						color: #FFFFFF;
						background-color: #3796F8;
					}

					view {
						width: 45%;
						padding: 15rpx 0;
						border-radius: 32rpx;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>