176 lines
4.9 KiB
Vue
176 lines
4.9 KiB
Vue
<template>
|
||
<div class="Audience" @click.stop>
|
||
<!-- {{ data.designName }} -->
|
||
<div class="head">
|
||
<img src="@/assets/icon/群组..svg" alt="">
|
||
<div class="JJ">
|
||
<div class="title">
|
||
<div class="tag">
|
||
<img src="@/assets/icon/群体.svg" alt="">
|
||
<span>
|
||
群体
|
||
</span>
|
||
</div>
|
||
<div class="name"> {{ data.designName }}</div>
|
||
</div>
|
||
<div class="info">
|
||
共涉及10个账号
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<t-tabs v-model="tabValue">
|
||
<t-tab-panel :value="1" label="群体概述" :destroy-on-hide="false">
|
||
<p style="padding: 25px">选项卡1的内容，使用 t-tab-panel 渲染</p>
|
||
</t-tab-panel>
|
||
<t-tab-panel :value="2" label="成员账号" :destroy-on-hide="false">
|
||
<!-- <template #panel>
|
||
<p style="padding: 25px">选项卡2的内容，使用 t-tab-panel 渲染</p>
|
||
</template> -->
|
||
<div class="userList">
|
||
<div class="item">
|
||
<div class="head">
|
||
<img src="@/assets/icon/群组..svg" alt="">
|
||
<div class="JJ">
|
||
<div class="title">
|
||
|
||
<div class="name"> {{ data.designName }}</div>
|
||
</div>
|
||
<div class="info">
|
||
<div class="tag">
|
||
<img src="@/assets/icon/粉丝量.svg" alt="">
|
||
<span>
|
||
粉丝量 805
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</t-tab-panel>
|
||
</t-tabs>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: ['data'],
|
||
data() {
|
||
return {
|
||
tabValue: 1
|
||
};
|
||
},
|
||
methods: {
|
||
},
|
||
watch: {
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.Audience {
|
||
width: 391px;
|
||
height: 476px;
|
||
background: rgba(3, 38, 80, 0.8);
|
||
border: 1px solid;
|
||
border-color: rgba(43, 143, 254, 0.6);
|
||
border-radius: 4px;
|
||
backdrop-filter: blur(15px);
|
||
padding: 16px 28px;
|
||
|
||
.head {
|
||
display: flex;
|
||
gap: 17px;
|
||
height: 60px;
|
||
|
||
img {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.JJ {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
|
||
.tag {
|
||
width: 56px;
|
||
height: 22px;
|
||
background: rgba(82, 221, 171, 0.5);
|
||
border: 1px solid;
|
||
border-color: #52ddab;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
|
||
img {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
}
|
||
|
||
.name {
|
||
line-height: 24px;
|
||
font-family: Noto Sans S Chinese;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
.info {
|
||
opacity: 80%;
|
||
line-height: 28px;
|
||
font-family: Noto Sans S Chinese;
|
||
font-weight: 300;
|
||
color: #ffffff;
|
||
font-size: 16px;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.content {
|
||
margin-top: 24px;
|
||
|
||
.t-tabs__nav-scroll {
|
||
justify-content: center;
|
||
}
|
||
|
||
.userList {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
padding: 10px 0;
|
||
|
||
.tag {
|
||
width: 126px;
|
||
height: 24px;
|
||
background: rgba(255, 153, 0, 0.3);
|
||
border: 1px solid;
|
||
border-color: rgba(255, 153, 0, 0.85);
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 6px;
|
||
|
||
img {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |