sass
This commit is contained in:
liuye
825
src/sass/AppResidentFile/AppResidentFile.vue
Normal file
825
src/sass/AppResidentFile/AppResidentFile.vue
Normal file
@@ -0,0 +1,825 @@
|
||||
<template>
|
||||
<div class="AppResidentFile">
|
||||
<div class="currentTabBar0" v-if="currentTabBar == 0">
|
||||
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
|
||||
|
||||
<div class="peopleGroup" v-if="currentTabs == 0">
|
||||
<div class="topcard">
|
||||
<div class="cards">
|
||||
<div class="items">
|
||||
<span class="items1">{{ groupSum }}</span>
|
||||
<span>群聊总数</span>
|
||||
</div>
|
||||
|
||||
<div class="items">
|
||||
<span class="items2">{{ todayList1.total }}</span>
|
||||
<span>群成员总数</span>
|
||||
</div>
|
||||
|
||||
<div class="items">
|
||||
<span class="items3">{{ todayList1.increase }}</span>
|
||||
<span>今日入群</span>
|
||||
</div>
|
||||
|
||||
<div class="items">
|
||||
<span class="items4">{{ todayList1.decrease }}</span>
|
||||
<span>今日退群</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="echartes" id="echarts1">
|
||||
<div class="echartss"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="people" v-if="currentTabs == 1">
|
||||
<div class="topcard">
|
||||
<div class="cards">
|
||||
<div class="items">
|
||||
<span class="items1">{{ todayList2.total }}</span>
|
||||
<span>居民总数</span>
|
||||
</div>
|
||||
|
||||
<div class="items">
|
||||
<span class="items3">{{ todayList2.increase }}</span>
|
||||
<span>今日新增</span>
|
||||
</div>
|
||||
|
||||
<div class="items">
|
||||
<span class="items4">{{ todayList2.decrease }}</span>
|
||||
<span>今日流失</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="echartes" id="echarts2">
|
||||
<div class="echartss"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="currentTabBar1" v-if="currentTabBar == 1">
|
||||
<AiTopFixed>
|
||||
<u-search placeholder="请输入昵称、姓名" :show-action="false" search-icon-color="#ccc" v-model="search.name" @search=";(page1.current = 1), getList()" />
|
||||
<AiCell>
|
||||
<b slot="label" class="title">共<i v-html="page1.total || 0" />个居民</b>
|
||||
</AiCell>
|
||||
</AiTopFixed>
|
||||
|
||||
<div class="mainPane">
|
||||
<AiCell v-for="item in data" :key="item.id" @click.native="showResident(item)">
|
||||
<template #label>
|
||||
<AiImage :src="item.avatar" preview />
|
||||
</template>
|
||||
<div class="card wrap start" flex>
|
||||
<b>{{ item.name }}</b>
|
||||
<div flex class="tag" v-for="(tag, j) in item.tags" :key="j">{{ tag.tagName }}</div>
|
||||
<div class="realName" shrink v-html="`真实姓名：${item.realName || '-'}`" />
|
||||
</div>
|
||||
</AiCell>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="currentTabBar2" v-if="currentTabBar == 2">
|
||||
<AiTopFixed>
|
||||
<u-search placeholder="请输入群名、群主名" :show-action="false" search-icon-color="#ccc" v-model="search.name" @search=";(page2.current = 1), getList()" />
|
||||
<AiCell>
|
||||
<b slot="label" class="title">共<i v-html="page2.total || 0" />个居民群</b>
|
||||
</AiCell>
|
||||
</AiTopFixed>
|
||||
|
||||
<div class="mainPane">
|
||||
<AiCell v-for="(item, i) in list" :key="i" @click.native="toGroupList(item)">
|
||||
<template #label>
|
||||
<AiImage :src="item.avatar" preview />
|
||||
</template>
|
||||
<div class="card column start" flex>
|
||||
<div flex class="groupName">
|
||||
<b>{{ item.name || '群聊' }}</b>
|
||||
<div class="personCount" v-if="item.personCount">({{ item.personCount }})</div>
|
||||
</div>
|
||||
<div class="owner" v-html="`群主：${item.ownerName}`" />
|
||||
<div flex class="trends">
|
||||
<div flex v-html="`今日入群：<em>${item.increase || 0}</em>`" />
|
||||
<div flex v-html="`今日退群：<p>${item.decrease || 0}</p>`" />
|
||||
</div>
|
||||
</div>
|
||||
</AiCell>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <u-tabbar v-model="currentTabBar" :list="lists" @change="changeTab" active-color="#3267F0" inactive-color="#C4CAD4" class="u-tabbar"></u-tabbar> -->
|
||||
<div class="tabs">
|
||||
<div class="item" @click="changeTab(index)" v-for="(item, index) in lists" :key="index">
|
||||
<img :src="currentTabBar == index ? item.selectedIconPath : item.iconPath" alt="" />
|
||||
<p :class="currentTabBar == index ? 'color-3267F0' : ''">{{ item.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'AppResidentFile',
|
||||
appName: '居民信息管理',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
lists: [
|
||||
{
|
||||
iconPath: 'http://respub.sinoecare.net/20211227/1n-20211227162529.png',
|
||||
selectedIconPath: 'http://respub.sinoecare.net/20211227/1h-20211227164832.png',
|
||||
text: '统计分析',
|
||||
customIcon: false,
|
||||
},
|
||||
{
|
||||
iconPath: 'http://respub.sinoecare.net/20211227/2n-20211227164853.png',
|
||||
selectedIconPath: 'http://respub.sinoecare.net/20211227/2h-20211227164906.png',
|
||||
text: '居民列表',
|
||||
customIcon: false,
|
||||
},
|
||||
|
||||
{
|
||||
iconPath: 'http://respub.sinoecare.net/20211227/3n-20211227164927.png',
|
||||
selectedIconPath: 'http://respub.sinoecare.net/20211227/3h-20211227165003.png',
|
||||
text: '居民群列表',
|
||||
customIcon: false,
|
||||
},
|
||||
],
|
||||
currentTabBar: 0,
|
||||
currentTabs: 0,
|
||||
tabList: [
|
||||
{
|
||||
name: '居民群统计',
|
||||
},
|
||||
{
|
||||
name: '居民统计',
|
||||
},
|
||||
],
|
||||
Echarts1: null,
|
||||
Echarts2: null,
|
||||
areaId: '',
|
||||
current: 1,
|
||||
keyword: '',
|
||||
data: [],
|
||||
search: { name: '' },
|
||||
list: [],
|
||||
weekList: [],
|
||||
groupSum: '',
|
||||
todayList1: [],
|
||||
todayList2: [],
|
||||
counts1: '',
|
||||
counts2: '',
|
||||
page2: { current: 1, size: 10, total: 0 },
|
||||
search2: { name: '' },
|
||||
page1: { current: 1, size: 10, total: 0 },
|
||||
search1: { name: '' },
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user', 'global']),
|
||||
},
|
||||
watch: {},
|
||||
onLoad() {
|
||||
document.title = '居民信息管理'
|
||||
this.getEchart1()
|
||||
this.areaId = this.user.areaId
|
||||
},
|
||||
mounted() {
|
||||
this.Echarts1 = echarts.init(document.getElementById('echarts1'))
|
||||
},
|
||||
methods: {
|
||||
// 居民列表
|
||||
getList() {
|
||||
this.$http
|
||||
.post('/app/wxcp/wxcustomer/list', null, {
|
||||
params: { ...this.page1, ...this.search, type: 1 },
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
if (this.page1.current > 1) {
|
||||
this.data = [...this.data, ...res.data.records]
|
||||
} else this.data = res.data.records
|
||||
this.page1.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// reachBottom() {
|
||||
// if (this.page1.total > this.list.length) {
|
||||
// this.page1.current++
|
||||
// this.getList()
|
||||
// }
|
||||
// },
|
||||
|
||||
showResident({ id }) {
|
||||
id &&
|
||||
uni.navigateTo({
|
||||
url: './resident?id=' + id,
|
||||
})
|
||||
},
|
||||
|
||||
// 居民群列表
|
||||
getList2() {
|
||||
this.$http
|
||||
.post('/app/wxcp/wxgroup/list', null, {
|
||||
params: { ...this.page2, ...this.search },
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
let meta = res.data.records?.map((e) => ({
|
||||
...e,
|
||||
avatar: e?.avatar || this.$cdn + 'groupAvatar.png',
|
||||
}))
|
||||
if (this.page2.current > 1) {
|
||||
this.list = [...this.list, ...meta]
|
||||
} else this.list = meta
|
||||
this.page2.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// reachBottom() {
|
||||
// if (this.page2.total > this.list.length) {
|
||||
// this.page2.current = this.page2.current + 1
|
||||
// this.getList2()
|
||||
// }
|
||||
// },
|
||||
|
||||
toGroupList(item) {
|
||||
uni.navigateTo({
|
||||
url: `./GroupList?id=${item.id}`,
|
||||
})
|
||||
},
|
||||
|
||||
// 居民群统计
|
||||
getEchart1() {
|
||||
this.$http.post(`/app/wxcp/wxgroup/groupStatistic`).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.weekList = res.data.list
|
||||
this.initEcharts1(this.weekList)
|
||||
this.groupSum = res.data.groupSum
|
||||
this.todayList1 = res.data.today
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 居民统计
|
||||
getEchart2() {
|
||||
this.$http.post(`/app/wxcp/wxcustomerlog/customerStatistic?areaId=${this.user.areaId}`).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.initEcharts2(res.data.list)
|
||||
this.todayList2 = res.data.today
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
initEcharts1(data) {
|
||||
var option = {
|
||||
legend: {
|
||||
data: ['群成员总数', '入群人数', '退群人数'],
|
||||
y: 'bottom',
|
||||
},
|
||||
color: ['#4A86FD', '#32C5FF', '#FFAA44'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
top: '9%',
|
||||
left: '6%',
|
||||
right: '8%',
|
||||
bottom: '9%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Object.keys(data).map((e) => e.substring(e.length - 5, e.length)),
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: { color: '#666' },
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 0,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D8DDE6',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 0,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
lineStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: '#4A86FD',
|
||||
},
|
||||
},
|
||||
},
|
||||
color: '#4A86FD',
|
||||
name: '群成员总数',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: Object.values(data).map((e) => e.total),
|
||||
},
|
||||
{
|
||||
lineStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: '#32C5FF',
|
||||
},
|
||||
},
|
||||
},
|
||||
color: '#32C5FF',
|
||||
name: '入群人数',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: Object.values(data).map((e) => e.increase),
|
||||
},
|
||||
{
|
||||
lineStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: '#FFAA44',
|
||||
},
|
||||
},
|
||||
},
|
||||
color: '#FFAA44',
|
||||
name: '退群人数',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: Object.values(data).map((e) => e.decrease),
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
option && this.Echarts1.setOption(option)
|
||||
},
|
||||
|
||||
initEcharts2(data) {
|
||||
var options = {
|
||||
legend: {
|
||||
data: ['居民总数', '新增居民数', '流失居民数'],
|
||||
y: 'bottom',
|
||||
},
|
||||
color: ['#4A86FD', '#32C5FF', '#FFAA44'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
top: '9%',
|
||||
left: '6%',
|
||||
right: '8%',
|
||||
bottom: '9%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Object.keys(data).map((e) => e.substring(e.length - 5, e.length)),
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: { color: '#666' },
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 0,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D8DDE6',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 0,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
lineStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: '#4A86FD',
|
||||
},
|
||||
},
|
||||
},
|
||||
color: '#4A86FD',
|
||||
name: '居民总数',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: Object.values(data).map((e) => e.total),
|
||||
},
|
||||
{
|
||||
lineStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: '#32C5FF',
|
||||
},
|
||||
},
|
||||
},
|
||||
color: '#32C5FF',
|
||||
name: '新增居民数',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: Object.values(data).map((e) => e.increase),
|
||||
},
|
||||
{
|
||||
lineStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: '#FFAA44',
|
||||
},
|
||||
},
|
||||
},
|
||||
color: '#FFAA44',
|
||||
name: '流失居民数',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: Object.values(data).map((e) => e.decrease),
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
if (this.Echarts2) {
|
||||
options && this.Echarts2.setOption(options)
|
||||
}
|
||||
},
|
||||
|
||||
changeTab(e) {
|
||||
this.currentTabBar = e
|
||||
if (this.currentTabBar == 0) {
|
||||
this.getList()
|
||||
this.$nextTick(() => {
|
||||
if (this.currentTabs == 0) {
|
||||
this.Echarts1 = echarts.init(document.getElementById('echarts1'))
|
||||
this.getEchart1()
|
||||
}
|
||||
if (this.currentTabs == 1) {
|
||||
this.Echarts2 = echarts.init(document.getElementById('echarts2'))
|
||||
this.getEchart2()
|
||||
}
|
||||
})
|
||||
}
|
||||
if (this.currentTabBar == 1) {
|
||||
this.page1.current == 1
|
||||
this.getList()
|
||||
}
|
||||
if (this.currentTabBar == 2) {
|
||||
this.page2.current == 1
|
||||
this.getList2()
|
||||
}
|
||||
},
|
||||
|
||||
change(index) {
|
||||
this.currentTabs = index
|
||||
this.$nextTick(() => {
|
||||
if (index == 0) {
|
||||
this.Echarts1 = echarts.init(document.getElementById('echarts1'))
|
||||
this.getEchart1()
|
||||
} else {
|
||||
this.Echarts2 = echarts.init(document.getElementById('echarts2'))
|
||||
this.getEchart2()
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.currentTabBar == 1) {
|
||||
this.page1.current++
|
||||
this.getList()
|
||||
}
|
||||
if (this.currentTabBar == 2) {
|
||||
this.page2.current++
|
||||
this.getList2()
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
uni-page-body {
|
||||
height: 100%;
|
||||
}
|
||||
.AppResidentFile {
|
||||
height: 100%;
|
||||
|
||||
.currentTabBar0 {
|
||||
padding-bottom: 98px;
|
||||
.peopleGroup,
|
||||
.people {
|
||||
.topcard {
|
||||
position: relative;
|
||||
background: url(http://respub.sinoecare.net/20211221/4-20211221095551.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 320px;
|
||||
.cards {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: -35px;
|
||||
width: 92%;
|
||||
box-sizing: border-box;
|
||||
margin: 0 32px;
|
||||
height: 232px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
.items1 {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
color: #354fc7;
|
||||
}
|
||||
.items2 {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
color: #868686;
|
||||
}
|
||||
.items3 {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
color: #5fba95;
|
||||
}
|
||||
.items4 {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
color: #f09535;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.echartes {
|
||||
margin-top: 64px;
|
||||
padding-bottom: 20px;
|
||||
height: 616px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
|
||||
.echartss {
|
||||
margin: 0 32px;
|
||||
height: 100%;
|
||||
padding-top: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.currentTabBar1 {
|
||||
height: 100%;
|
||||
padding-bottom: 98px;
|
||||
background: #fff;
|
||||
::v-deep .AiTopFixed {
|
||||
b.title {
|
||||
color: #333;
|
||||
font-size: 32px;
|
||||
|
||||
& > i {
|
||||
color: #267fce;
|
||||
font-style: normal;
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .mainPane {
|
||||
background: #fff;
|
||||
padding: 0 32px 88px;
|
||||
|
||||
.AiCell {
|
||||
flex-shrink: 0;
|
||||
justify-content: flex-start;
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-width: unset;
|
||||
border-bottom: 1px solid rgba(221, 221, 221, 1);
|
||||
min-height: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
text-align: left;
|
||||
|
||||
b {
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
justify-content: center;
|
||||
background: #f3f4f7;
|
||||
border-radius: 4px;
|
||||
padding: 0 16px;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 16px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.realName {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.AiImage {
|
||||
margin-right: 24px;
|
||||
|
||||
image {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.currentTabBar2 {
|
||||
padding-bottom: 98px;
|
||||
::v-deep .AiTopFixed {
|
||||
b.title {
|
||||
color: #333;
|
||||
font-size: 32px;
|
||||
|
||||
& > i {
|
||||
color: #267fce;
|
||||
font-style: normal;
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .mainPane {
|
||||
background: #fff;
|
||||
padding: 0 32px;
|
||||
|
||||
.AiCell {
|
||||
align-items: center;
|
||||
height: 230px;
|
||||
justify-content: flex-start;
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
max-width: unset;
|
||||
border-bottom: 1px solid rgba(221, 221, 221, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
|
||||
b {
|
||||
font-size: 36px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tag {
|
||||
justify-content: center;
|
||||
background: #f3f4f7;
|
||||
border-radius: 4px;
|
||||
padding: 0 16px;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
margin-left: 16px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.groupName {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.owner,
|
||||
.trends {
|
||||
margin-top: 8px;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.personCount {
|
||||
flex-shrink: 0;
|
||||
font-size: 30px;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.trends {
|
||||
* + * {
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
color: #5fba95;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #f09535;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.AiImage {
|
||||
margin-right: 24px;
|
||||
|
||||
image {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
height: 98px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
p {
|
||||
font-size: 22px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #c4cad4;
|
||||
line-height: 8px;
|
||||
}
|
||||
.color-3267F0 {
|
||||
color: #3267f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user