From 3934d0d780f3415b989fa2d97157c5cdee8a9396 Mon Sep 17 00:00:00 2001
From: wuhui_zzw <1760308791@qq.com>
Date: Thu, 14 Mar 2024 20:54:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=EF=BC=9A=E6=B4=BB=E5=8A=A8?=
 =?UTF-8?q?=E5=8F=82=E5=8A=A0=E8=AE=B0=E5=BD=95=E5=8F=8A=E5=B0=81=E5=9D=9B?=
 =?UTF-8?q?=E9=85=92=E8=AE=B0=E5=BD=95=E5=8F=8A=E6=B2=B9=E5=8D=A1=E9=A2=9D?=
 =?UTF-8?q?=E5=BA=A6=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   8 +-
 src/api/marketing.js                          |   5 +-
 src/router/modules/marketing.js               |  31 ++-
 .../marketing/activity/activity/record.vue    | 181 ++++++++++++++
 src/views/marketing/exchange/quota/oil.vue    | 225 ++++++++++++++++++
 src/views/marketing/exchange/quota/wine.vue   | 225 ++++++++++++++++++
 6 files changed, 668 insertions(+), 7 deletions(-)
 create mode 100644 src/views/marketing/activity/activity/record.vue
 create mode 100644 src/views/marketing/exchange/quota/oil.vue
 create mode 100644 src/views/marketing/exchange/quota/wine.vue

diff --git a/.env.development b/.env.development
index 7d858ae..310f352 100644
--- a/.env.development
+++ b/.env.development
@@ -3,12 +3,12 @@ ENV = 'development'
 # http://192.168.1.43:8324/admin
 # http://mer.crmeb.net/admin
 # base api
-#VUE_APP_BASE_API = 'https://bt.test.cdlfjy.com'
-VUE_APP_BASE_API = 'https://mp.scwmbh.cn'
+VUE_APP_BASE_API = 'https://bt.test.cdlfjy.com'
+#VUE_APP_BASE_API = 'https://mp.scwmbh.cn'
 
 # socket 连接地址
-#VUE_APP_WS_URL = 'ws://bt.test.cdlfjy.com'
-VUE_APP_WS_URL = 'ws://mp.scwmbh.cn'
+VUE_APP_WS_URL = 'ws://bt.test.cdlfjy.com'
+#VUE_APP_WS_URL = 'ws://mp.scwmbh.cn'
 
 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
 # to control whether the babel-plugin-dynamic-import-node plugin is enabled.
diff --git a/src/api/marketing.js b/src/api/marketing.js
index 0555c44..1498a8c 100644
--- a/src/api/marketing.js
+++ b/src/api/marketing.js
@@ -814,7 +814,10 @@ export function activityEditFrom(data) {
 export function activityDel(data) {
   return request.post('marketing/activity/delInfo', data)
 }
-
+// 活动记录 - 列表获取
+export function activityRecordList(data) {
+  return request.get('marketing/activity/record/list', data)
+}
 
 
 
diff --git a/src/router/modules/marketing.js b/src/router/modules/marketing.js
index 814b377..0200ecf 100644
--- a/src/router/modules/marketing.js
+++ b/src/router/modules/marketing.js
@@ -493,6 +493,24 @@ const marketingRouter =
             },
             component: () => import('@/views/marketing/exchange/pickupPoint/index')
           },
+          {
+            path: 'wine',
+            name: `exchangeQuotaWine`,
+            meta: {
+              title: '封坛酒额度',
+              noCache: true
+            },
+            component: () => import('@/views/marketing/exchange/quota/wine')
+          },
+          {
+            path: 'oil',
+            name: `exchangeQuotaOil`,
+            meta: {
+              title: '油卡额度',
+              noCache: true
+            },
+            component: () => import('@/views/marketing/exchange/quota/oil')
+          },
         ]
       },
       {
@@ -557,7 +575,7 @@ const marketingRouter =
         children: [
           {
             path: 'cate',
-            name: `agentList`,
+            name: `activityCate`,
             meta: {
               title: '活动分类',
               noCache: true
@@ -566,13 +584,22 @@ const marketingRouter =
           },
           {
             path: 'index',
-            name: `agentList`,
+            name: `activityIndex`,
             meta: {
               title: '活动列表',
               noCache: true
             },
             component: () => import('@/views/marketing/activity/activity/index')
           },
+          {
+            path: 'record',
+            name: `activityList`,
+            meta: {
+              title: '参加记录',
+              noCache: true
+            },
+            component: () => import('@/views/marketing/activity/activity/record')
+          },
         ]
       },
 
diff --git a/src/views/marketing/activity/activity/record.vue b/src/views/marketing/activity/activity/record.vue
new file mode 100644
index 0000000..416377f
--- /dev/null
+++ b/src/views/marketing/activity/activity/record.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="divBox">
+    <!--主要内容-->
+    <el-card class="box-card">
+      <!--顶部搜索栏-->
+      <!--<div slot="header" class="clearfix">
+        <div class="container">
+          <el-form inline size="small" label-width="80px">
+            <el-form-item label="">
+              <el-input v-model="tableFrom.title" placeholder="请输入活动名称">
+                <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)"/>
+              </el-input>
+            </el-form-item>
+          </el-form>
+          <el-button size="small" type="success" @click="editCate">添加活动</el-button>
+        </div>
+      </div>-->
+      <!--表格信息-->
+      <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini">
+        <el-table-column label="ID" prop="id" min-width="80" align="center"/>
+        <el-table-column label="参加人员" min-width="280" align="center">
+          <template slot-scope="scope">
+            <div class="user-content">
+              <div class="user-avatar">
+                <img :src="scope.row.user.avatar || moren" />
+              </div>
+              <div class="user-info">
+                <div class="nickname">{{ scope.row.user.nickname }}</div>
+                <div class="user-id">{{ scope.row.user.uid }}</div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="参加时间" prop="create_time" min-width="100" align="center"/>
+        <el-table-column label="状态" min-width="100" align="center">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status == 0" type="info">待支付</el-tag>
+            <el-tag v-else-if="scope.row.status == 1" type="success">已支付</el-tag>
+            <el-tag v-else-if="scope.row.status == 2" type="warning">无需支付</el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页-->
+      <div class="block">
+        <el-pagination
+          :page-sizes="[20, 40, 60, 80]"
+          :page-size="tableFrom.limit"
+          :current-page="tableFrom.page"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="tableData.total"
+          @size-change="handleUserSizeChange"
+          @current-change="pageUserChange"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {activityRecordList} from "@/api/marketing";
+
+export default {
+  name: "preSaleProductList",
+  components: {},
+  data() {
+    return {
+      moren: require("@/assets/images/f.png"),
+      // 列表
+      listLoading: false,
+      tableFrom: {
+        page: 1,
+        limit: 20
+      },
+      tableData: {
+        data: [],
+        total: 0,
+      },
+    };
+  },
+  watch: {},
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    // 列表
+    getList(num = ''){
+      let _this = this;
+      _this.listLoading = true;
+      _this.tableFrom.page = num ? num : _this.tableFrom.page;
+      activityRecordList(_this.tableFrom).then((res) => {
+        _this.tableData.data = res.data.list;
+        _this.tableData.total = res.data.count;
+        _this.listLoading = false;
+      }).catch((res) => {
+        _this.listLoading = false;
+        _this.$message.error(res.message);
+      });
+    },
+    pageUserChange(page) {
+      this.tableFrom.page = page;
+      this.getList('');
+    },
+    handleUserSizeChange(val) {
+      this.tableFrom.limit = val;
+      this.getList('');
+    },
+
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.user-content{
+  --user-content-height-: 80px;
+
+  height: var(--user-content-height-);
+  width: 100%;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  .user-avatar{
+    height: var(--user-content-height-);
+    width: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    img{
+      height: 80%!important;
+      width: 80%!important;
+      border-radius: 50% !important;
+    }
+  }
+  .user-info{
+    max-width: calc(100% - var(--user-content-height-));
+    height: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: flex-start;
+    .nickname{
+      width: 100%;
+      height: 25px;
+      line-height: 25px;
+      text-align: left;
+      font-size: 15px;
+      font-weight: bold;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: inline-flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      align-items: center;
+      .user-id{
+        color: #fff;
+        background-color: #409eff;
+        border-color: #409eff;
+        height: 18px;
+        line-height: 20px;
+        font-size: 13px;
+        padding: 0 5px;
+        border-radius: 5px;
+        margin-left: 10px;
+        width: max-content!important;
+      }
+    }
+    .user-id{
+      width: 100%;
+      text-align: left;
+      font-size: 13px;
+      line-height: calc(var(--user-content-height- * 35%));
+    }
+  }
+}
+</style>
diff --git a/src/views/marketing/exchange/quota/oil.vue b/src/views/marketing/exchange/quota/oil.vue
new file mode 100644
index 0000000..e030b14
--- /dev/null
+++ b/src/views/marketing/exchange/quota/oil.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="divBox">
+    <el-card class="box-card">
+      <!--顶部搜索栏-->
+      <div slot="header" class="clearfix">
+        <div class="container">
+          <el-form inline size="small" label-width="80px">
+            <el-form-item label="搜索：">
+              <el-input v-model="tableFrom.uid" @keyup.enter.native="getList(1)" placeholder="请输入用户ID" class="selWidth" clearable>
+                <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)" />
+              </el-input>
+            </el-form-item>
+             <el-form-item class="width100">
+             </el-form-item>
+          </el-form>
+          <cards-data :card-lists="cardLists" />
+        </div>
+      </div>
+      <!--表格信息-->
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="持有信息" name="list">
+          <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini">
+            <el-table-column prop="id" label="ID" min-width="50" align="center"/>
+            <el-table-column label="用户信息" prop="nickname" min-width="150" align="center">
+              <template slot-scope="scope">
+                <div class="user-content">
+                  <div class="user-avatar" v-if="scope.row.avatar && scope.row.avatar != 1">
+                    <img :src="scope.row.avatar" />
+                  </div>
+                  <div class="user-info">
+                    <div class="nickname">{{ scope.row.nickname }}</div>
+                    <div class="user-id">ID：{{ scope.row.uid }}</div>
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="总获得额度" prop="total_quota" min-width="120" align="center"/>
+            <el-table-column label="已使用额度" prop="use_quota" min-width="120" align="center"/>
+            <el-table-column label="剩余额度" prop="surplus_quota" min-width="120" align="center"/>
+            <el-table-column label="冻结额度" prop="freeze_quota" min-width="120" align="center"/>
+            <el-table-column label="可用额度" prop="number" min-width="120" align="center">
+              <template slot-scope="scope">
+                {{ (scope.row.surplus_quota - scope.row.freeze_quota).toFixed(2) }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="变更记录" name="record_list">
+          <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini">
+            <el-table-column prop="id" label="ID" min-width="50" align="center"/>
+            <el-table-column label="用户信息" prop="nickname" min-width="150" align="center">
+              <template slot-scope="scope">
+                <div class="user-content">
+                  <div class="user-avatar" v-if="scope.row.avatar && scope.row.avatar != 1">
+                    <img :src="scope.row.avatar" />
+                  </div>
+                  <div class="user-info">
+                    <div class="nickname">{{ scope.row.nickname }}</div>
+                    <div class="user-id">ID：{{ scope.row.uid }}</div>
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="变更前数量" prop="change_front" min-width="120" align="center"/>
+            <el-table-column label="变更数量" prop="change_quantity" min-width="120" align="center"/>
+            <el-table-column label="变更类型" min-width="120" align="center">
+              <template slot-scope="scope">
+                <el-tag v-if="scope.row.change_type == 1" type="success" effect="dark">增加</el-tag>
+                <el-tag v-else type="danger" effect="dark">减少</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="变更后数量" prop="change_after" min-width="120" align="center"/>
+            <el-table-column label="变更时间" prop="create_time" min-width="120" align="center"/>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+      <!--分页-->
+      <div class="block">
+        <el-pagination
+          :page-sizes="[20, 40, 60, 80]"
+          :page-size="tableFrom.limit"
+          :current-page="tableFrom.page"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="tableData.total"
+          @size-change="handleSizeChange"
+          @current-change="pageChange"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {exchangeQuotaTitle, exchangeQuotaList } from '@/api/marketing'
+import cardsData from '@/components/cards/index'
+export default {
+  name: "preSaleProductList",
+  components: { cardsData },
+  data() {
+    return {
+      activeName: 'list',
+      listLoading: true,
+      tableData: {
+        data: [],
+        total: 0,
+      },
+      tableFrom: {
+        page: 1,
+        limit: 20,
+        uid: '',
+        quota_type: 4
+      },
+      loading: false,
+      cardLists: [],
+    };
+  },
+  watch: {},
+  mounted() {
+    this.getStatistics();
+    this.getList('');
+  },
+  methods: {
+    // 获取统计数据
+    getStatistics() {
+      let _this = this;
+      exchangeQuotaTitle(_this.tableFrom).then((res) => {
+        this.cardLists = res.data
+      }).catch((res) => {
+        this.$message.error(res.message)
+      })
+    },
+    // 获取列表
+    getList(num) {
+      let _this = this;
+      this.listLoading = true;
+      this.tableFrom.page = num ? num : this.tableFrom.page;
+      exchangeQuotaList(_this.activeName,this.tableFrom)
+        .then((res) => {
+          this.tableData.data = res.data.list;
+          this.tableData.total = res.data.count;
+          this.listLoading = false;
+        })
+        .catch((res) => {
+          this.listLoading = false;
+          this.$message.error(res.message);
+        });
+    },
+    pageChange(page) {
+      this.tableFrom.page = page;
+      this.getList('');
+    },
+    handleSizeChange(val) {
+      this.tableFrom.limit = val;
+      this.getList('');
+    },
+    handleClick(tab, event){
+      this.tableData = this.$options.data().tableData;
+      this.tableFrom = this.$options.data().tableFrom;
+
+      this.getList(1);
+    }
+
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.selWidth {
+  width: 350px !important;
+}
+.seachTiele {
+  line-height: 35px;
+}
+.title{
+  margin-bottom: 16px;
+  color: #17233d;
+  font-size: 14px;
+  font-weight: bold;
+}
+.scollhide::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+.user-content{
+  --user-content-height-: 80px;
+
+  height: var(--user-content-height-);
+  width: 100%;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  .user-avatar{
+    height: var(--user-content-height-);
+    width: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    img{
+      height: 80%!important;
+      width: 80%!important;
+      border-radius: 50% !important;
+    }
+  }
+  .user-info{
+    height: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: flex-start;
+    .nickname{
+      font-size: 15px;
+      font-weight: bold;
+      line-height: calc(var(--user-content-height- * 65%));
+    }
+    .user-id{
+      font-size: 13px;
+      line-height: calc(var(--user-content-height- * 35%));
+    }
+  }
+}
+</style>
diff --git a/src/views/marketing/exchange/quota/wine.vue b/src/views/marketing/exchange/quota/wine.vue
new file mode 100644
index 0000000..41dbd91
--- /dev/null
+++ b/src/views/marketing/exchange/quota/wine.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="divBox">
+    <el-card class="box-card">
+      <!--顶部搜索栏-->
+      <div slot="header" class="clearfix">
+        <div class="container">
+          <el-form inline size="small" label-width="80px">
+            <el-form-item label="搜索：">
+              <el-input v-model="tableFrom.uid" @keyup.enter.native="getList(1)" placeholder="请输入用户ID" class="selWidth" clearable>
+                <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)" />
+              </el-input>
+            </el-form-item>
+             <el-form-item class="width100">
+             </el-form-item>
+          </el-form>
+          <cards-data :card-lists="cardLists" />
+        </div>
+      </div>
+      <!--表格信息-->
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="持有信息" name="list">
+          <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini">
+            <el-table-column prop="id" label="ID" min-width="50" align="center"/>
+            <el-table-column label="用户信息" prop="nickname" min-width="150" align="center">
+              <template slot-scope="scope">
+                <div class="user-content">
+                  <div class="user-avatar" v-if="scope.row.avatar && scope.row.avatar != 1">
+                    <img :src="scope.row.avatar" />
+                  </div>
+                  <div class="user-info">
+                    <div class="nickname">{{ scope.row.nickname }}</div>
+                    <div class="user-id">ID：{{ scope.row.uid }}</div>
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="总获得额度" prop="total_quota" min-width="120" align="center"/>
+            <el-table-column label="已使用额度" prop="use_quota" min-width="120" align="center"/>
+            <el-table-column label="剩余额度" prop="surplus_quota" min-width="120" align="center"/>
+            <el-table-column label="冻结额度" prop="freeze_quota" min-width="120" align="center"/>
+            <el-table-column label="可用额度" prop="number" min-width="120" align="center">
+              <template slot-scope="scope">
+                {{ (scope.row.surplus_quota - scope.row.freeze_quota).toFixed(2) }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="变更记录" name="record_list">
+          <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini">
+            <el-table-column prop="id" label="ID" min-width="50" align="center"/>
+            <el-table-column label="用户信息" prop="nickname" min-width="150" align="center">
+              <template slot-scope="scope">
+                <div class="user-content">
+                  <div class="user-avatar" v-if="scope.row.avatar && scope.row.avatar != 1">
+                    <img :src="scope.row.avatar" />
+                  </div>
+                  <div class="user-info">
+                    <div class="nickname">{{ scope.row.nickname }}</div>
+                    <div class="user-id">ID：{{ scope.row.uid }}</div>
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="变更前数量" prop="change_front" min-width="120" align="center"/>
+            <el-table-column label="变更数量" prop="change_quantity" min-width="120" align="center"/>
+            <el-table-column label="变更类型" min-width="120" align="center">
+              <template slot-scope="scope">
+                <el-tag v-if="scope.row.change_type == 1" type="success" effect="dark">增加</el-tag>
+                <el-tag v-else type="danger" effect="dark">减少</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="变更后数量" prop="change_after" min-width="120" align="center"/>
+            <el-table-column label="变更时间" prop="create_time" min-width="120" align="center"/>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+      <!--分页-->
+      <div class="block">
+        <el-pagination
+          :page-sizes="[20, 40, 60, 80]"
+          :page-size="tableFrom.limit"
+          :current-page="tableFrom.page"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="tableData.total"
+          @size-change="handleSizeChange"
+          @current-change="pageChange"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {exchangeQuotaTitle, exchangeQuotaList } from '@/api/marketing'
+import cardsData from '@/components/cards/index'
+export default {
+  name: "preSaleProductList",
+  components: { cardsData },
+  data() {
+    return {
+      activeName: 'list',
+      listLoading: true,
+      tableData: {
+        data: [],
+        total: 0,
+      },
+      tableFrom: {
+        page: 1,
+        limit: 20,
+        uid: '',
+        quota_type: 3
+      },
+      loading: false,
+      cardLists: [],
+    };
+  },
+  watch: {},
+  mounted() {
+    this.getStatistics();
+    this.getList('');
+  },
+  methods: {
+    // 获取统计数据
+    getStatistics() {
+      let _this = this;
+      exchangeQuotaTitle(_this.tableFrom).then((res) => {
+        this.cardLists = res.data
+      }).catch((res) => {
+        this.$message.error(res.message)
+      })
+    },
+    // 获取列表
+    getList(num) {
+      let _this = this;
+      this.listLoading = true;
+      this.tableFrom.page = num ? num : this.tableFrom.page;
+      exchangeQuotaList(_this.activeName,this.tableFrom)
+        .then((res) => {
+          this.tableData.data = res.data.list;
+          this.tableData.total = res.data.count;
+          this.listLoading = false;
+        })
+        .catch((res) => {
+          this.listLoading = false;
+          this.$message.error(res.message);
+        });
+    },
+    pageChange(page) {
+      this.tableFrom.page = page;
+      this.getList('');
+    },
+    handleSizeChange(val) {
+      this.tableFrom.limit = val;
+      this.getList('');
+    },
+    handleClick(tab, event){
+      this.tableData = this.$options.data().tableData;
+      this.tableFrom = this.$options.data().tableFrom;
+
+      this.getList(1);
+    }
+
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.selWidth {
+  width: 350px !important;
+}
+.seachTiele {
+  line-height: 35px;
+}
+.title{
+  margin-bottom: 16px;
+  color: #17233d;
+  font-size: 14px;
+  font-weight: bold;
+}
+.scollhide::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+.user-content{
+  --user-content-height-: 80px;
+
+  height: var(--user-content-height-);
+  width: 100%;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  .user-avatar{
+    height: var(--user-content-height-);
+    width: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    img{
+      height: 80%!important;
+      width: 80%!important;
+      border-radius: 50% !important;
+    }
+  }
+  .user-info{
+    height: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: flex-start;
+    .nickname{
+      font-size: 15px;
+      font-weight: bold;
+      line-height: calc(var(--user-content-height- * 65%));
+    }
+    .user-id{
+      font-size: 13px;
+      line-height: calc(var(--user-content-height- * 35%));
+    }
+  }
+}
+</style>