novel-front-app/components/novel/newWorkItem.vue

<template>
	<view class="newWork">
		<!-- 新建作品组件 -->
		<view class="new-work-item" @click="handleClick">
			<view class="plus-icon">+</view>
			<text class="text">新建作品</text>
		</view>
		
		<!-- 读者成就设置按钮 -->
		<view class="reader-settings" @click="handleSettingClick">
			<text class="settings-text">读者成就设置</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
		},
		methods: {
			handleClick() {
				uni.navigateTo({
					url: '/pages_order/novel/createNovel'
				})
			},
			handleSettingClick() {
				this.$emit('settings');
			}
		}
	}
</script>

<style lang="scss" scoped>
    .newWork{
        display: flex;
        justify-content: space-between;
        width: 650rpx;
        align-items: center;
    }
	.new-work-item {
		width: 170rpx;
		height: 170rpx;
		background-color: #f8f8f8;
		border-radius: 6rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.plus-icon {
			font-size: 50rpx;
			color: #999;
			margin-bottom: 10rpx;
			line-height: 1;
		}
		
		.text {
			font-size: 24rpx;
			color: #999;
		}
		
		&:active {
			background-color: #f0f0f0;
		}
	}
	
	.reader-settings {
		background-color: #f8f8f8;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
        border: 2rpx solid $uni-color;
        border-radius: 30rpx;
        padding: 10rpx 20rpx;
        height: 40rpx;
		
		.settings-text {
			font-size: 30rpx;
			color: #4a4a4a;
		}
		
		&:active {
			background-color: #f0f0f0;
		}
	}
</style>