|
@@ -11,9 +11,9 @@
|
|
:xl="4"
|
|
:xl="4"
|
|
:class="['official-accounts-item', 'cp', index === currentTabsIndex ? 'official-accounts-item-active' : '' ]"
|
|
:class="['official-accounts-item', 'cp', index === currentTabsIndex ? 'official-accounts-item-active' : '' ]"
|
|
@click="currentTabs(index)"
|
|
@click="currentTabs(index)"
|
|
- v-for="(item, index) in arr"
|
|
|
|
|
|
+ v-for="(item, index) in accountList"
|
|
:key="index">
|
|
:key="index">
|
|
- <img class="official-accounts-item-img" :src="item.img" alt=""> {{ item.name }}
|
|
|
|
|
|
+ <img class="official-accounts-item-img" :src="item.headImage" alt=""> {{ item.nickName }}
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
|
|
|
|
@@ -29,9 +29,7 @@
|
|
suffix="%"
|
|
suffix="%"
|
|
:value-style="{ color: item.count > 0 ? '#3f8600' : '#cf1322' }"
|
|
:value-style="{ color: item.count > 0 ? '#3f8600' : '#cf1322' }"
|
|
style="margin-right: 50px"
|
|
style="margin-right: 50px"
|
|
-
|
|
|
|
>
|
|
>
|
|
-
|
|
|
|
<template #prefix>
|
|
<template #prefix>
|
|
<a-icon :type="item.count > 0 ? 'arrow-up' : 'arrow-down'" />
|
|
<a-icon :type="item.count > 0 ? 'arrow-up' : 'arrow-down'" />
|
|
</template>
|
|
</template>
|
|
@@ -39,10 +37,24 @@
|
|
</a-card>
|
|
</a-card>
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
|
|
+
|
|
|
|
+ <!-- 粉丝属性 -->
|
|
|
|
+ <div class="fans-property">
|
|
|
|
+ <div class="fans-property-box">
|
|
|
|
+ <div class="fans-property-box-item" v-for="(item, index) in proList" :key="index">
|
|
|
|
+ {{ item.title }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="fans-property-line">
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+import { getAccount } from '@/api/wxchat'
|
|
const official = [
|
|
const official = [
|
|
{
|
|
{
|
|
img: 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJ7PXOg8UQskrEjqSwywYib5UYqjyAdKTr1ickq03BDOg9xtWIk108SsfHzd6PIXERRkVQSj9pXKsmw/132',
|
|
img: 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJ7PXOg8UQskrEjqSwywYib5UYqjyAdKTr1ickq03BDOg9xtWIk108SsfHzd6PIXERRkVQSj9pXKsmw/132',
|
|
@@ -60,6 +72,33 @@ for (let i = 0; i < 5; i++) {
|
|
}
|
|
}
|
|
|
|
|
|
arr.push({ name: 'serve-idiot', img: 'https://avatars1.githubusercontent.com/u/71005599?s=88&v=4' })
|
|
arr.push({ name: 'serve-idiot', img: 'https://avatars1.githubusercontent.com/u/71005599?s=88&v=4' })
|
|
|
|
+
|
|
|
|
+const proList = [
|
|
|
|
+ {
|
|
|
|
+ title: '粉丝增长',
|
|
|
|
+ componentsName: 'fansAdd'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '粉丝属性',
|
|
|
|
+ componentsName: 'fansPro'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '活跃度',
|
|
|
|
+ componentsName: 'fansActive'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '忠诚度',
|
|
|
|
+ componentsName: 'fansLoyal'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '图文影响力',
|
|
|
|
+ componentsName: 'imageText'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '互动消息',
|
|
|
|
+ componentsName: 'toNews'
|
|
|
|
+ }
|
|
|
|
+]
|
|
const statictis = [
|
|
const statictis = [
|
|
{
|
|
{
|
|
title: '昨日新增',
|
|
title: '昨日新增',
|
|
@@ -94,17 +133,29 @@ const statictis = [
|
|
]
|
|
]
|
|
export default {
|
|
export default {
|
|
name: 'DataView',
|
|
name: 'DataView',
|
|
|
|
+ created () {
|
|
|
|
+ this.getAccount()
|
|
|
|
+ },
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
official,
|
|
official,
|
|
- arr,
|
|
|
|
|
|
+ accountList: [],
|
|
currentTabsIndex: 0,
|
|
currentTabsIndex: 0,
|
|
- statictis
|
|
|
|
|
|
+ statictis,
|
|
|
|
+ proList
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
currentTabs (index) {
|
|
currentTabs (index) {
|
|
this.currentTabsIndex = index
|
|
this.currentTabsIndex = index
|
|
|
|
+ },
|
|
|
|
+ // 获取公众号列表
|
|
|
|
+ async getAccount () {
|
|
|
|
+ const { data, code } = await getAccount()
|
|
|
|
+ if (code === 200) {
|
|
|
|
+ console.log(data)
|
|
|
|
+ this.accountList = data
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -115,16 +166,16 @@ export default {
|
|
height: 500px;
|
|
height: 500px;
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
.official-accounts {
|
|
.official-accounts {
|
|
|
|
+ width: 100%;
|
|
background-color: #f0f2f5;
|
|
background-color: #f0f2f5;
|
|
- // display: flex;
|
|
|
|
- // border: 1px solid #d9d9d9;
|
|
|
|
|
|
+ border: 1px solid #d9d9d9;
|
|
&-item {
|
|
&-item {
|
|
height: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
- border-bottom: 1px solid #d9d9d9;
|
|
|
|
- border-top: 1px solid #d9d9d9;
|
|
|
|
|
|
+ // border-bottom: 1px solid #d9d9d9;
|
|
|
|
+ // border-top: 1px solid #d9d9d9;
|
|
&-img {
|
|
&-img {
|
|
width: 30px;
|
|
width: 30px;
|
|
height: 30px;
|
|
height: 30px;
|
|
@@ -133,13 +184,34 @@ export default {
|
|
}
|
|
}
|
|
&-item-active {
|
|
&-item-active {
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
- font-size: 18px;
|
|
|
|
- border-bottom: 1px solid #fff;
|
|
|
|
|
|
+ // font-size: 18px;
|
|
|
|
+ // border-bottom: 1px solid #fff;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.statictis {
|
|
.statictis {
|
|
padding: 20px;
|
|
padding: 20px;
|
|
}
|
|
}
|
|
|
|
+ .fans-property {
|
|
|
|
+
|
|
|
|
+ &-box {
|
|
|
|
+ display: flex;
|
|
|
|
+ &-item {
|
|
|
|
+ width: 150px;
|
|
|
|
+ height: 41px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 41px;
|
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
|
+ background: #f7f7f7;
|
|
|
|
+ margin-right: 5px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &-line {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 1px;
|
|
|
|
+ background-color: #d9d9d9;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|