web-app-v1/pages/stock/ruku_type.vue

<template>
	<view class="ruku-type-container">
		<view class="ruku-type-item" @click="toUrlLink('ruku_new')">
			<view class="type-icon"></view>
			<view class="type-name">订货入库</view>
		</view>
		<view class="ruku-type-item" @click="toUrlLink('ruku_new2')">
			<view class="type-icon"></view>
			<view class="type-name">客户退货入库</view>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			toUrlLink(url) {
				if(!url) return false
				uni.navigateTo({
					url: `./${url}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		display: flex;
		flex-direction: column;
		.ruku-type-container {
			flex: 1;
			overflow: hidden;
			background-color: #F9F9FB;
			padding: 30rpx;
			box-sizing: border-box;
			.ruku-type-item {
				width: 100%;
				height: 428rpx;
				border-radius: 24rpx;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				position: relative;
				&::after {
					content: "";
					display: block;
					width: 50rpx;
					height: 50rpx;
					background: url(../../static/new_stock/arrow.png) center no-repeat;
					background-size: 100%;
					position: absolute;
					right: 70rpx;
					top: 50%;
					transform: translateY(-50%);
				}
				.type-icon{
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
					margin-bottom: 30rpx;
					position: relative;
				}
				.type-name {
					color: #FFFFFF;
					font-size: 44rpx;
					line-height: 60rpx;
				}
				&:nth-of-type(1) {
					background: url(../../static/new_stock/ruku-type-bg.png) center no-repeat, linear-gradient(88deg, #FF8546 0%, #FC3B3B 100%);
					background-size: 100%;
					.type-icon {
						background: url(../../static/new_stock/ruku-type-1.png) center no-repeat, #ffffff;
						background-size: 80rpx 80rpx;
					}
				}
				&:nth-of-type(2) {
					background: url(../../static/new_stock/ruku-type-bg.png) center no-repeat, linear-gradient(272deg, #FF5989 0%, #FF8FE1 100%);
					background-size: 100%;
					.type-icon {
						background: url(../../static/new_stock/ruku-type-2.png) center no-repeat, #ffffff;
						background-size: 80rpx 80rpx;
					}
				}
			}
		}
	}
</style>