pay-video-applet-uniapp-24-8-22/pages/index/publish.vue

<template>
	<view class="publish">
		<view class="top">
			<view class="title">
				发布
			</view>
			<view class="type">
				<view class="post"
				@click="$utils.navigateTo('/publish/publishPost')">
					发布帖子
					<image src="/static/image/publish/p2.png" mode=""></image>
				</view>
				<view class=""
				@click="$utils.navigateTo('/publish/actorRelease')">
					发布名片
					<image src="/static/image/publish/p1.png" mode=""></image>
				</view>
			</view>
		</view>

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

<script>
	import tabber from '@/components/base/tabbar.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			tabber
		},
		computed: {
			...mapState(['count']),
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.publish {
		.top {
			height: 600rpx;
			background-image: $uni-linear-gradient-bg-color;
			padding: 0 20rpx;
			padding-top: calc(var(--status-bar-height) + 100rpx);

			.title {
				display: flex;
				color: #fff;
				justify-content: space-between;

				&>view {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.type{
			display: flex;
			justify-content: center;
			margin-top: 30rpx;
			&>view{
				width: 310rpx;
				height: 120rpx;
				background-color: #fff;
				margin: 10rpx;
				position: relative;
				border-radius: 20rpx;
				overflow: hidden;
				color: #fdcc4b;
				align-items: center;
				padding: 20rpx;
				display: flex;
				font-weight: 900;
				image{
					position: absolute;
					bottom: 0;
					right: 0;
					width: 100rpx;
					height: 100rpx;
				}
			}
			.post{
				background-color: #b7a6f6;
				color: #603af5;
			}
		}
	}
</style>