<template>
|
<a-card class="general-card" :title="$t('monitor.title.studioPreview')">
|
<template #extra>
|
<icon-more />
|
</template>
|
<div class="studio-wrapper">
|
<img
|
src="http://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/c788fc704d32cf3b1136c7d45afc2669.png~tplv-uwbnlip3yd-webp.webp"
|
class="studio-preview"
|
/>
|
<div class="studio-bar">
|
<div v-if="userInfo">
|
<a-space :size="12">
|
<a-avatar :size="24">
|
<img :src="userInfo.avatar" />
|
</a-avatar>
|
<a-typography-text>
|
{{ userInfo.name }} {{ $t('monitor.studioPreview.studio') }}
|
</a-typography-text>
|
</a-space>
|
</div>
|
<a-typography-text type="secondary">
|
36,000 {{ $t('monitor.studioPreview.watching') }}
|
</a-typography-text>
|
</div>
|
</div>
|
</a-card>
|
</template>
|
|
<script lang="ts" setup>
|
import { useUserStore } from '@/store';
|
|
const userInfo = useUserStore();
|
</script>
|
|
<style scoped lang="less">
|
.studio {
|
&-preview {
|
display: block;
|
max-width: 600px;
|
margin: 0 auto;
|
width: 100%;
|
}
|
|
&-bar {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 16px;
|
}
|
}
|
</style>
|
