2.4 组件结构调整，调整会员权限判断
This commit is contained in:
尚政杰
262
pagesStock/components/fzlc-view/fzlc-view.vue
Normal file
262
pagesStock/components/fzlc-view/fzlc-view.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<template>
|
||||
<view style="padding: 25rpx 20rpx; box-sizing: border-box;">
|
||||
<view v-if="keyFactorsInfo" class="flex" style="font-size: 28rpx;"><text>关键因素</text><text
|
||||
style="font-size: 24rpx; color: #070707; padding: 0rpx 10rpx; border-radius: 3rpx; background-color: #F2C369; margin-left: 10rpx;">{{keyFactorsInfo.total_factors}}</text>
|
||||
</view>
|
||||
<view class="keyFactorsList">
|
||||
<view class="item" v-for="(item, index) in keyFactorsList" :key="index" @click="item.show = !item.show"
|
||||
style="margin: 20rpx 0; background-color: #FAFAFC; border-radius: 10rpx; padding: 25rpx 20rpx; color: #2B2B2B;">
|
||||
<view style="display: flex; align-items: center; justify-content: space-between;">
|
||||
<view style="flex: 1; font-size: 26rpx;"><text>{{item.category_name}}</text><text
|
||||
style="font-size: 24rpx; color: #070707; padding: 0rpx 10rpx; border-radius: 3rpx; background-color: #F2C369; margin-left: 10rpx;">{{item.factors.length}}</text>
|
||||
</view>
|
||||
<image v-if="item.show" style="width: 20rpx; height: 12rpx;"
|
||||
src="/pagesStock/static/icon/shangJiantou.png" mode="widthFix"></image>
|
||||
<image v-else style="width: 20rpx; height: 12rpx;" src="/pagesStock/static/icon/xiaJiantou.png"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<template v-if="item.show">
|
||||
<view class="fitem" v-for="(fitem,findex) in item.factors" :key="findex"
|
||||
style="margin: 20rpx 0; padding: 20rpx; background-color: white; border-radius: 10rpx; border: 1rpx solid #E7E7E7; color: #2B2B2B; font-weight: 500; font-size: 26rpx;">
|
||||
<view class="titleImpactC flex between">
|
||||
<view>{{fitem.factor_name}}</view>
|
||||
<view v-if="fitem.impact_direction=='negative'" class="impact negative">负面</view>
|
||||
<view v-if="fitem.impact_direction=='neutral'" class="impact neutral">中性</view>
|
||||
<view v-if="fitem.impact_direction=='positive'" class="impact positive">正面</view>
|
||||
</view>
|
||||
<view class="valueChgC flex" style="margin-top: 10rpx;">
|
||||
<view :class="'value '+(fitem.impact_direction)">{{fitem.factor_value}}{{fitem.factor_unit}}
|
||||
</view>
|
||||
<view :class="'chgC flex '+(getRateUpOrDown(fitem.year_on_year)?'down':'up')">
|
||||
<image v-if="getRateUpOrDown(fitem.year_on_year)" class="icon" src="/pagesStock/static/icon/downArrow.png" mode="widthFix"></image>
|
||||
<image v-else class="icon" src="/pagesStock/static/icon/upArrow.png" mode="widthFix"></image>
|
||||
<view>{{fitem.year_on_year?fitem.year_on_year:0}}%</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="margin-top: 10rpx; color: #999999; font-size: 22rpx;">{{fitem.factor_desc}}</view>
|
||||
<view style="margin-top: 10rpx; color: #999999; font-size: 22rpx;">影响权重: {{fitem.impact_weight}}</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view v-if="timelineInfo" class="flex" style="font-size: 28rpx;"><text>发展时间线</text>
|
||||
<text
|
||||
style="font-size: 24rpx; color: white; padding: 0rpx 10rpx; border-radius: 3rpx; background-color: #EC3440; margin-left: 10rpx;">正面
|
||||
{{timelineInfo.positive_events}}</text>
|
||||
<text
|
||||
style="font-size: 24rpx; color: white; padding: 0rpx 10rpx; border-radius: 3rpx; background-color: #345423; margin-left: 10rpx;">负面
|
||||
{{timelineInfo.negative_events}}</text>
|
||||
</view>
|
||||
<view class="timelineList">
|
||||
<view class="item" v-for="(item,index) in timelineList" :key="index" @click="clickAction(item)">
|
||||
<view class="impactC flexColumnCenter">
|
||||
<image v-if="item.impact_metrics.is_positive==1" class="icon" style="margin-top: 20rpx;"
|
||||
src="/pagesStock/static/icon/yuan_shang.png" mode="widthFix"></image>
|
||||
<image v-else class="icon" src="/pagesStock/static/icon/yuan_jiang.png" mode="widthFix"></image>
|
||||
<view :class="'line flex1 '+(item.impact_metrics.is_positive==1?'up':'down')"></view>
|
||||
</view>
|
||||
<view
|
||||
style="flex: 1; margin-left: 10rpx; background-color: #FAFAFC; padding: 24rpx 15rpx; border-radius: 10rpx; font-weight: 500;">
|
||||
<view class="titleTypeC">
|
||||
<text class="title">{{item.event_title}}</text>
|
||||
<text :class="'eventType '+(item.impact_metrics.is_positive==1?'up':'down')">{{item.event_type}}</text>
|
||||
</view>
|
||||
<view style="color: #999999; font-size: 20rpx; margin: 15rpx 0;">{{item.event_date}}</view>
|
||||
<view style="color: #71675D; font-size: 22rpx;">{{item.event_desc}}</view>
|
||||
<view style="display: flex; align-items: center; margin-top: 30rpx;">
|
||||
<view style="color: #71675D; font-size: 22rpx; font-weight: 500;">影响度</view>
|
||||
<view class="progressBgC">
|
||||
<view :class="'progress '+(item.impact_metrics.is_positive==1?'up':'down')" :style="{width: `${item.impact_metrics.impact_score}%`}">
|
||||
</view>
|
||||
</view>
|
||||
<view style="color: #71675D; font-size: 24rpx; font-weight: 500;">{{item.impact_metrics.impact_score}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getRateUpOrDown } from '@/utils/util';
|
||||
|
||||
export default {
|
||||
name: "fzlc-view",
|
||||
data() {
|
||||
return {
|
||||
getRateUpOrDown:getRateUpOrDown
|
||||
};
|
||||
},
|
||||
props: {
|
||||
keyFactorsInfo:null,
|
||||
keyFactorsList:Array, //关键因素数组
|
||||
timelineInfo:null,
|
||||
timelineList:Array, //发展时间线数组
|
||||
},
|
||||
methods: {
|
||||
clickAction(item) {
|
||||
this.$emit('detail',item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.keyFactorsList
|
||||
{
|
||||
.item
|
||||
{
|
||||
.fitem
|
||||
{
|
||||
.impact
|
||||
{
|
||||
border-radius: 5rpx;
|
||||
padding: 0 10rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
.impact.negative
|
||||
{
|
||||
background-color: #345423;
|
||||
}
|
||||
.impact.neutral
|
||||
{
|
||||
background-color: #345423;
|
||||
}
|
||||
.impact.positive
|
||||
{
|
||||
background-color: #EC3440;
|
||||
}
|
||||
.valueChgC
|
||||
{
|
||||
.value
|
||||
{
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.value.negative
|
||||
{
|
||||
color: #345423;
|
||||
}
|
||||
.value.neutral
|
||||
{
|
||||
color:#345423;
|
||||
}
|
||||
.value.positive
|
||||
{
|
||||
color: #EC3440;
|
||||
}
|
||||
.chgC
|
||||
{
|
||||
padding: 0 10rpx;
|
||||
border-radius: 5rpx;
|
||||
font-size: 20rpx;
|
||||
.icon
|
||||
{
|
||||
margin-right: 5rpx;
|
||||
width: 11rpx;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
}
|
||||
.chgC.down
|
||||
{
|
||||
border: 1rpx solid #345423;
|
||||
color: #345423;
|
||||
}
|
||||
.chgC.up
|
||||
{
|
||||
border: 1rpx solid #EC3440;
|
||||
color: #EC3440;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.timelineList
|
||||
{
|
||||
.item
|
||||
{
|
||||
display: flex;
|
||||
margin: 20rpx 0;
|
||||
border-radius: 10rpx;
|
||||
.impactC
|
||||
{
|
||||
.icon
|
||||
{
|
||||
width: 30rpx;
|
||||
height: auto;
|
||||
}
|
||||
.line
|
||||
{
|
||||
margin: 10rpx 0 -30rpx;
|
||||
width: 1rpx;
|
||||
}
|
||||
.line.up
|
||||
{
|
||||
border-left: 1rpx dashed #EC3440;
|
||||
}
|
||||
.line.down
|
||||
{
|
||||
border-left: 1rpx dashed #345423;
|
||||
}
|
||||
}
|
||||
.titleTypeC
|
||||
{
|
||||
.title
|
||||
{
|
||||
margin-right: 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
color: #2A2A2A;
|
||||
}
|
||||
.eventType
|
||||
{
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 5rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.eventType.up
|
||||
{
|
||||
background-color: #FFE7E9;
|
||||
color: #EC3440;
|
||||
}
|
||||
.eventType.down
|
||||
{
|
||||
background-color:#DEEED6;
|
||||
color: #345423;
|
||||
}
|
||||
}
|
||||
.progressBgC
|
||||
{
|
||||
background-color: #EFEFEF;
|
||||
margin: 0 15rpx;
|
||||
width: 200rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 5rpx;
|
||||
overflow: hidden;
|
||||
.progress
|
||||
{
|
||||
height: 100%;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
.progress.up
|
||||
{
|
||||
background:linear-gradient(to right, #FF525D, #EC3440)
|
||||
}
|
||||
.progress.down
|
||||
{
|
||||
background:linear-gradient(to right, #537D3D, #345423)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user