parent
6f9039328b
commit
1564d1ffb7
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 883 B |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 808 B |
@ -0,0 +1,168 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-18 09:55:16
|
||||
* @LastEditTime: 2021-10-18 16:26:26
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/EventComparison/index.vue
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="ise-container" v-show="show">
|
||||
<div class="ec-outter">
|
||||
<ec-top @close="handlerClose"></ec-top>
|
||||
<eventRecommendationList></eventRecommendationList>
|
||||
<div align="center" class="ec-footer">
|
||||
<img src="../../assets/images/EventInsight/img_sjdb_nor.png" v-if="!status"/>
|
||||
<img src="../../assets/images/EventInsight/img_sjdb_sel.png" v-if="status"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ecTop from "./ec-top"
|
||||
import eventRecommendationList from "./eventRecommendationList"
|
||||
export default {
|
||||
name: "iSwitchEvent",
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible: {
|
||||
handler(val) {
|
||||
console.log(val)
|
||||
this.show = val ? true : false;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ecTop,
|
||||
eventRecommendationList // 事件推荐列表
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
status: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlerClose() {
|
||||
this.show = false;
|
||||
this.$emit("update:visible", this.show);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ise-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
.ec-outter {
|
||||
position: absolute;
|
||||
padding: 0px 16px 16px 16px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 90px);
|
||||
background: #010b19;
|
||||
.ec-footer {
|
||||
padding: 40px 0px;
|
||||
img {
|
||||
width: 480px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ec-d1 {
|
||||
width: 100%;
|
||||
height: 222px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.ec-d1-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.ec-d1-dd2 {
|
||||
margin-left: 68px;
|
||||
margin-right: 68px;
|
||||
}
|
||||
.ec-d1-dd1 {
|
||||
width: 800px;
|
||||
height: 120px;
|
||||
background: linear-gradient(180deg, #0088c9 0%, #001c43 100%);
|
||||
border-radius: 4px;
|
||||
border: 2px solid #0091ff;
|
||||
margin-left: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.d1 {
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
background-image: url("../../assets/images/EventInsight/img_xlq.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin-left: 14px;
|
||||
text-align: center;
|
||||
line-height: 86px;
|
||||
font-size: 14px;
|
||||
color: #97c6ec;
|
||||
}
|
||||
.dx1 {
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
background-image: url("../../assets/images/EventInsight/img_xlvq.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin-left: 14px;
|
||||
text-align: center;
|
||||
line-height: 86px;
|
||||
font-size: 14px;
|
||||
color: #97c6ec;
|
||||
}
|
||||
.d2 {
|
||||
margin-left: 14px;
|
||||
.d2-d1 {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
width: 515px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.d2-d2 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.s1 {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #7b93a5;
|
||||
}
|
||||
.s2 {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,40 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-18 14:06:09
|
||||
* @LastEditTime: 2021-10-18 14:25:12
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/EventComparison/comparativeData/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="coedc-outter">
|
||||
<v-label-div title="事件传播渠道对比" :showLine="false" :eStyle="{'border-style': 'none'}">
|
||||
</v-label-div>
|
||||
<div class="coedc-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "comparisonOfEventDisseminationChannels",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.coedc-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.coedc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,88 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-09 11:01:19
|
||||
* @LastEditTime: 2021-10-18 14:27:55
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
|
||||
*/
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
left: 16,
|
||||
right: 16,
|
||||
bottom: 16,
|
||||
top: 56,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
legend: {
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff'
|
||||
},
|
||||
y: 10,
|
||||
x: 16
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['微信', '微博', '论坛', '新闻', 'APP', '其他']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '事件1',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 302, 301, 334, 390, 600]
|
||||
},
|
||||
{
|
||||
name: '事件2',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 130]
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,71 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-18 14:31:05
|
||||
* @LastEditTime: 2021-10-18 15:42:26
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/EventComparison/etc-cc/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="etcc-outter">
|
||||
<v-label-div title="事件调性对比" :showLine="false" :eStyle="{'border-style': 'none'}">
|
||||
</v-label-div>
|
||||
<div class="bd-d1">
|
||||
<div class="dd1" style="margin-left: 16px"><span class="s1"></span><span class="s2">正面</span></div>
|
||||
<div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#54BF93'}"></span><span class="s2">中性</span></div>
|
||||
<div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#CC9D12'}"></span><span class="s2">负面</span></div>
|
||||
</div>
|
||||
<div class="etcc-inner">
|
||||
<roundatacc title="事件一" color="#3373CC" style="margin-left: 46px"></roundatacc>
|
||||
<roundatacc title="事件二" color="#63AECC" style="margin-left: 110px"></roundatacc>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import roundatacc from "./roundatacc";
|
||||
export default {
|
||||
name: "etc-cc",
|
||||
components: {
|
||||
roundatacc
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.etcc-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.bd-d1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.dd1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #3373cc;
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.etcc-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,81 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 13:41:17
|
||||
* @LastEditTime: 2021-10-18 15:02:21
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bd-item-round">
|
||||
<div class="bd-item-r-cav">
|
||||
<v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
|
||||
</div>
|
||||
<span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "roundatacc",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
echarsFun(myChart) {
|
||||
let index = 0;
|
||||
myChart.dispatchAction({
|
||||
type: "highlight",
|
||||
seriesIndex: 0,
|
||||
dataIndex: 0,
|
||||
});
|
||||
myChart.on("mouseover", function (e) {
|
||||
if (e.dataIndex != index) {
|
||||
myChart.dispatchAction({
|
||||
type: "downplay",
|
||||
seriesIndex: 0,
|
||||
dataIndex: index,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
myChart.on("mouseout", function (e) {
|
||||
index = e.dataIndex;
|
||||
myChart.dispatchAction({
|
||||
type: "highlight",
|
||||
seriesIndex: 0,
|
||||
dataIndex: e.dataIndex,
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.bd-item-round {
|
||||
display: inline-block;
|
||||
.bd-item-r-cav {
|
||||
width: 380px;
|
||||
height: 284px;
|
||||
}
|
||||
.bd-item-r-c-s1 {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,58 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-18 15:33:05
|
||||
* @LastEditTime: 2021-10-18 15:46:39
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/EventComparison/eventSTM/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="estm-outter">
|
||||
<div class="estm-item">
|
||||
<v-label-div title="事件传播TOP媒体" :showLine="false" :eStyle="{'border-style': 'none'}">
|
||||
<span style="font-size: 18px; color: #3373CC">事件一</span>
|
||||
</v-label-div>
|
||||
<div class="estm-inner">
|
||||
<v-echarts :opt="opt1"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
<div class="estm-item">
|
||||
<v-label-div title="" :showLine="false" :eStyle="{'border-style': 'none'}">
|
||||
<span style="font-size: 18px; color: #3373CC">事件二</span>
|
||||
</v-label-div>
|
||||
<div class="estm-inner">
|
||||
<v-echarts :opt="opt2"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
|
||||
export default {
|
||||
name: "estm-outter",
|
||||
data() {
|
||||
return {
|
||||
opt1: createSideSingleColumn(['企鹅网', '懂车帝','凤凰网','汽车之家','一点资讯'], [400, 500, 600, 800, 1000], '#3373CC'),
|
||||
opt2: createSideSingleColumn(['企鹅网', '懂车帝','凤凰网','汽车之家','一点资讯'], [400, 500, 600, 800, 1000], '#50b68c'),
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.estm-outter {
|
||||
width: auoto;
|
||||
height: auoto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.estm-item {
|
||||
width: 472px;
|
||||
height: 412px;
|
||||
.estm-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,24 +1,80 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-18 09:55:16
|
||||
* @LastEditTime: 2021-10-18 09:56:18
|
||||
* @Date: 2021-10-18 13:35:07
|
||||
* @LastEditTime: 2021-10-18 19:45:08
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/EventComparison/index.vue
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="d-container">
|
||||
|
||||
<div class="ec-outter">
|
||||
<ecx-top></ecx-top>
|
||||
<div class="ece-d1">
|
||||
<v-label-div title="对比数据">
|
||||
</v-label-div>
|
||||
<div class="dd1">
|
||||
<comparisonOfEventDisseminationChannels></comparisonOfEventDisseminationChannels>
|
||||
<etc-cc></etc-cc>
|
||||
</div>
|
||||
<div class="dd2">
|
||||
<profileOfAssociatedAuthorsOne></profileOfAssociatedAuthorsOne>
|
||||
<eventSTM></eventSTM>
|
||||
</div>
|
||||
<comparisonOfEventpp></comparisonOfEventpp>
|
||||
<positiveAndNegativeWordCloudContrast></positiveAndNegativeWordCloudContrast>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ecxTop from "./ecx-top";
|
||||
import comparisonOfEventDisseminationChannels from "./comparisonOfEventDisseminationChannels"
|
||||
import profileOfAssociatedAuthorsOne from "./profileOfAssociatedAuthorsOne"
|
||||
import etcCc from "./etc-cc"
|
||||
import eventSTM from "./eventSTM"
|
||||
import comparisonOfEventpp from "./comparisonOfEventpp"
|
||||
import positiveAndNegativeWordCloudContrast from "./positiveAndNegativeWordCloudContrast"
|
||||
export default {
|
||||
name: "EventComparison"
|
||||
}
|
||||
name: "EventComparison",
|
||||
components: {
|
||||
ecxTop, // 头部
|
||||
comparisonOfEventDisseminationChannels, // 事件传播渠道对比
|
||||
etcCc, // 事件调性对比
|
||||
profileOfAssociatedAuthorsOne, // 关联作者概况
|
||||
eventSTM, // 事件传播TOP媒体
|
||||
comparisonOfEventpp, // 事件传播历程对比
|
||||
positiveAndNegativeWordCloudContrast
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
se: {
|
||||
visible: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.ec-outter {
|
||||
padding: 0px 16px 16px 16px;
|
||||
.ece-d1 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.dd1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.dd2 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,71 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-18 19:37:58
|
||||
* @LastEditTime: 2021-10-18 20:03:21
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/EventComparison/positiveAndNegativeWordCloudContrast/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="panwc-outter">
|
||||
<div class="panwc-inner">
|
||||
<div class="panwc-d1">
|
||||
<v-label-div title="事件调性对比" :showLine="false" :eStyle="{'border-style': 'none'}">
|
||||
<v-tab-group :btns="['正面','负面']"></v-tab-group>
|
||||
</v-label-div>
|
||||
<span class="p-d1-s1">事件一</span>
|
||||
<div class="panwc-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panwc-d1">
|
||||
<v-label-div title="" :showLine="false" :eStyle="{'border-style': 'none'}">
|
||||
<v-tab-group :btns="['正面','负面']"></v-tab-group>
|
||||
</v-label-div>
|
||||
<span class="p-d1-s1" style="color: #54BF93">事件二</span>
|
||||
<div class="panwc-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "positiveAndNegativeWordCloudContrast",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.panwc-outter {
|
||||
width: 100%;
|
||||
.panwc-inner {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.panwc-d1 {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.p-d1-s1 {
|
||||
padding-left: 16px;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
color: #3373CC;
|
||||
height: 24px;
|
||||
width: calc(100% - 16px);
|
||||
}
|
||||
.panwc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 74px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,132 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-18 15:05:22
|
||||
* @LastEditTime: 2021-10-18 15:50:00
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/EventComparison/profileOfAssociatedAuthors/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="poao-outter">
|
||||
<div class="poao-inner">
|
||||
<div class="poao-d1">
|
||||
<v-label-div title="关联作者概况" :showLine="false" :eStyle="{'border-style': 'none'}">
|
||||
<span style="font-size: 18px; color: #3373CC">事件一</span>
|
||||
</v-label-div>
|
||||
<div class="poao-item" style="margin-top: 12px">
|
||||
<div>
|
||||
<img class="m1" src="../../../assets/images/EventInsight/img_glzz.png" />
|
||||
<span class="s1">关联作者数量</span>
|
||||
</div>
|
||||
<span class="s2">74,073,195</span>
|
||||
</div>
|
||||
<div class="poao-item">
|
||||
<div>
|
||||
<img class="m1" src="../../../assets/images/EventInsight/img_ljgj.png" />
|
||||
<span class="s1">累计稿件数量</span>
|
||||
</div>
|
||||
<span class="s2">74,073,1</span>
|
||||
</div>
|
||||
<div class="poao-item">
|
||||
<div>
|
||||
<img class="m1" src="../../../assets/images/EventInsight/img_glmt.png" />
|
||||
<span class="s1">关联媒体数量</span>
|
||||
</div>
|
||||
<span class="s2">74,073</span>
|
||||
</div>
|
||||
<div class="poao-item">
|
||||
<div>
|
||||
<img class="m1" src="../../../assets/images/EventInsight/ic_cbl.png" />
|
||||
<span class="s1">传播量</span>
|
||||
</div>
|
||||
<span class="s2">74,073,195</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="poao-d1">
|
||||
<v-label-div title="" :showLine="false" :eStyle="{'border-style': 'none'}">
|
||||
<span style="font-size: 18px; color: #3373CC">事件二</span>
|
||||
</v-label-div>
|
||||
<div class="poao-item" style="margin-top: 12px">
|
||||
<div>
|
||||
<img class="m1" src="../../../assets/images/EventInsight/img_glzz.png" />
|
||||
<span class="s1">关联作者数量</span>
|
||||
</div>
|
||||
<span class="s2">74,073,195</span>
|
||||
</div>
|
||||
<div class="poao-item">
|
||||
<div>
|
||||
<img class="m1" src="../../../assets/images/EventInsight/img_ljgj.png" />
|
||||
<span class="s1">累计稿件数量</span>
|
||||
</div>
|
||||
<span class="s2">74,073,1</span>
|
||||
</div>
|
||||
<div class="poao-item">
|
||||
<div>
|
||||
<img class="m1" src="../../../assets/images/EventInsight/img_glmt.png" />
|
||||
<span class="s1">关联媒体数量</span>
|
||||
</div>
|
||||
<span class="s2">74,073</span>
|
||||
</div>
|
||||
<div class="poao-item">
|
||||
<div>
|
||||
<img class="m1" src="../../../assets/images/EventInsight/ic_cbl.png" />
|
||||
<span class="s1">传播量</span>
|
||||
</div>
|
||||
<span class="s2">74,073,195</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "profileOfAssociatedAuthors",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.poao-outter {
|
||||
width: auto;
|
||||
height: auto;
|
||||
.poao-inner {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.poao-d1 {
|
||||
width: 472px;
|
||||
height: 412px;
|
||||
.poao-item {
|
||||
width: 440px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid #022248;
|
||||
border-radius: 2px;
|
||||
margin-left: 16px;
|
||||
margin-top: 5px;
|
||||
.m1 {
|
||||
display: inline-block;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-left: 12px;
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 32px;
|
||||
font-family: Bebas;
|
||||
color: #ffffff;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue