uniapp开发 结合uview单选框样式自定义

<template>
	<view class="group_8">
		<text class="text_15">添加外部链接地址</text>
		<div class="radio">
			<u-radio-group size="10" labelSize="10" placement="column" iconSize="0" activeColor="#FFDC05"
				v-model="active">
				<div class="items">
					<u-radio size="10" :name="1" labelSize="12" shape="circle" label="添加详情链接地址："></u-radio>
					<input v-if="active==1" type="text" v-model="link" class="linkInput">
				</div>
				<div class="items">
					<u-radio size="10" :name="2" labelSize="12" shape="circle" label="添加直播链接地址："></u-radio>
					<input v-if="active==2" type="text" v-model="link2" class="linkInput">
				</div>
				<div class="items">
					<u-radio size="10" :name="3" labelSize="12" shape="circle" label="我需要平台给我定制外部链接"></u-radio>
				</div>
			</u-radio-group>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				active: 1,
				link: '',
				checked: false,
				link2: ''
			}
		},
		props: {
			name: {
				type: String,
				default () {
					return '';
				}
			}
		},
		onShow() {

		},
		methods: {
			getactive(e) {
				this.active = e
			},
		}
	}
</script>

<style scoped lang="scss">
	.group_8 {
		padding: 0 40rpx;
		padding-bottom: 20rpx;
		.text_15 {
			color: rgb(34, 34, 34);
			font-size: 26rpx;
			line-height: 26rpx;
			white-space: nowrap;
			padding-bottom: 30rpx;
		}
	}

	.items {
		height: 50rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
	}

	.radio {
		padding-top: 30rpx;
	}

	.linkInput {
		border: 1rpx solid #E1D9D2;
	}
</style>