longcai/JiaZhiQianYan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.

Browse Source
This commit is contained in:
zw199166
2026-01-22 14:34:38 +08:00
parent 6ee8ce42ed
commit 1f3a3ca8bb
234 changed files with 5534 additions and 2395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
components/cyl-view/cyl-view.vue Normal file
View File

@@ -0,0 +1,187 @@
<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>