JiaZhiQianYan/components/cyl-view/cyl-view.vue

<template>
	<view class="cyl_view">
		<view class="top">
			<view class="child_1">产业链分析</view>
			<view class="child_2">目标公司供应链图谱</view>
			<view class="child_3">节点 18</view>
		</view>
		<view class="center">
			<view class="child" :class="{action: center_index == 0}" @click="changeCenterIndex(0)">
				层级视图
			</view>
			<view class="child" :class="{action: center_index == 1}" @click="changeCenterIndex(1)">
				流向关系
			</view>
		</view>
		<view class="bottom">
			<view class="type">
				<view v-for="(item,index) in types" :key="index" class="item">
					<template v-if="item.title">
						<view @click="typeIndex = index"
							style="display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #FAFAFC; border-radius: 10rpx; width: 100%; padding: 26rpx 0; box-sizing: border-box;"
							:style="{'background-color' : (typeIndex == index ? item.backColor : '#FAFAFC'), border : (typeIndex == index ? `1rpx solid ${item.color}` : 'none')}">
							<view style="color: #2B2B2B; font-size: 24rpx; font-weight: bold;">
								{{item.title}}
								<text
									style="min-width: 24rpx; text-align: center; margin-left: 6rpx; padding: 0 5rpx; border-radius: 5rpx; font-weight: 500;"
									:style="{'background-color' : (typeIndex == index ? item.color : '#F2C369'), 'color' : (typeIndex == index ? '#ffffff' : '#070707')}">
									{{item.count}}
								</text>
							</view>
							<view style="color: #999999; font-size: 22rpx; font-weight: 500; margin-top: 10rpx;">
								{{item.desc}}
							</view>
						</view>
					</template>
					<template v-else>
						<image style="width: 100%; height: auto;" src="/pagesStock/static/icon/rightArrow.png"
							mode="widthFix"></image>
					</template>
				</view>
			</view>
			<view class="list" @click="clickAction"
				style="margin: 20rpx; background-color: #FAFAFC; border-radius: 10rpx; padding: 25rpx 20rpx; box-sizing: border-box;">
				<view style="color: #2B2B2B; font-size: 28rpx; font-weight: bold;">央行/政策性银行</view>
				<view style="color: #999999; font-size: 24rpx; font-weight: 500;">提供再贷款、再贴现、同业存放等基础货币与流动性支持</view>
				<view style="display: flex; align-items: center; font-size: 20rpx; font-weight: 500; margin: 15rpx 0;">
					<view style="border-radius: 5rpx; padding: 0 10rpx; margin-right: 10rpx;"
						:style="{'background-color' : (types[typeIndex].backColor), 'color' : (types[typeIndex].color)}">
						Supplier</view>
					<view style="border-radius: 5rpx; padding: 0 10rpx;"
						:style="{'color' : types[typeIndex].color, border : `1rpx solid ${types[typeIndex].color}`}">份额:
						12.5%</view>
				</view>
				<view style="display: flex; align-items: center;">
					<view style="color: #71675D; font-size: 22rpx; font-weight: 500;">影响度</view>
					<view
						style="flex: 1; height: 10rpx; background-color: #EFEFEF; border-radius: 5rpx; margin: 0 15rpx; overflow: hidden;">
						<view style="height: 100%; border-radius: 5rpx;"
							:style="{width: `${95}%`, background: `linear-gradient(to right, ${types[typeIndex].sColor}, ${types[typeIndex].color})`}">
						</view>
					</view>
					<view style="color: #71675D; font-size: 24rpx; font-weight: 500;">95</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cyl-view",
		data() {
			return {
				isShow: false,
				center_index: 0,
				types: [{
						title: '上游供应链',
						count: 5,
						desc: '原材料与供应商',
						sColor: '#FF8C53',
						color: '#FF5501',
						backColor: '#FFF4EF'
					},
					{},
					{
						title: '核心企业',
						count: 1,
						desc: '公司主体与产品',
						sColor: '#518BFF',
						color: '#175CE6',
						backColor: '#F2F6FD'
					},
					{},
					{
						title: '下游客户',
						count: 12,
						desc: '原材料与供应商',
						sColor: '#48D394',
						color: '#1DB26F',
						backColor: '#E7F5F0'
					}
				],
				typeIndex: 0
			};
		},
		methods: {
			changeCenterIndex(index) {
				this.center_index = index
			},
			clickAction() {
				console.log(123);
				this.$emit('detail')
			}
		}
	}
</script>

<style lang="less">
	.cyl_view {
		padding: 20rpx;
		box-sizing: border-box;

		.top {
			display: flex;
			align-items: center;
			font-weight: 500;

			.child_1 {
				color: #2B2B2B;
				font-size: 28rpx;
				font-weight: bold;
			}

			.child_2 {
				color: #71675D;
				font-size: 24rpx;
				margin: 0 10rpx;
			}

			.child_3 {
				border: 1rpx solid #F3C368;
				border-radius: 5rpx;
				padding: 0 5rpx;
				color: #F2C369;
				font-size: 24rpx;
			}
		}

		.center {
			margin: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			font-weight: 500;

			.child {
				background-color: #F5F5F5;
				border-radius: 10rpx 10rpx 0 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #939393;
				padding: 10rpx 40rpx;

				&.action {
					background-color: #F2C369;
					color: #070707;
				}
			}
		}

		.bottom {
			.type {
				display: grid;
				grid-template-columns: 1fr 19rpx 1fr 19rpx 1fr;
				gap: 6rpx;

				.item {
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>