卡片，下拉框添加

src/views/server/employeebigbrother/index.vue

@@ -117,7 +117,8 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" @selection-change="handleSelectionChange">
+    <el-table v-if="!isMobile" v-loading="loading" :data="list" :stripe="true"
+      @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" />
       <el-table-column label="大哥的用户id" align="center" prop="displayId">
         <template #default="scope">
@@ -163,8 +164,37 @@
         </template>
       </el-table-column> -->
     </el-table>
+    <!-- ···························································································································· -->
+    <div v-else>
+      <div v-for="(item, index) in list" :key="index" class="mobile-card">
+        <div class="card-row" style="color:green;">
+          <b>大哥的用户id：</b><span @click="openHtml(item, item.displayId)"
+            style=" text-decoration: underline;margin-right: 50px;">{{ item.displayId }}</span>
+        </div>
+        <div class="card-row"><b>大哥的uid：</b>{{ item.userIdStr }}</div>
+        <div class="card-row"><b>大哥的用户昵称：</b>{{ item.nickname }}</div>
+        <div class="card-row"><b>大哥的等级：</b>{{ item.level }}</div>
+        <div class="card-row"><b>粉丝团等级:</b>{{ item.fansLevel }}</div>
+        <div class="card-row"><b>大哥打赏的金币：</b>{{ item.hostcoins }}</div>
+        <div class="card-row"><b>大哥的粉丝数：</b>{{ item.followerCount }}</div>
+        <div class="card-row"><b>大哥的关注数：</b>{{ item.followingCount }}</div>
+        <div class="card-row"><b>大哥所在的地区:</b>{{ item.region }}</div>
+        <div class="card-row"><b>大哥打赏的历史最高金币:</b>{{ item.historicHighCoins }}</div>
+        <div class="card-row"><b>大哥历史打赏金币总和:</b>{{ item.totalGiftCoins }}</div>
+        <div class="card-row" style="color:green;">
+          <b>大哥所在的直播间的主播id：</b><span @click="openHtmlbig(item.hostDisplayId)"
+            style=" text-decoration: underline;margin-right: 50px;">{{ item.hostDisplayId }}</span>
+        </div>
+        <div class="card-row"><b>创建时间：</b>{{ formatTimestamp(item.createTime) }}</div>
+        <div class="card-row"><b>是否洽谈：</b>
+          <el-tag size="small" :type="item.operationStatus == 1 ? 'success' : 'info'">
+            {{ dictLabelI18n(DICT_TYPE.BIGBIOTHER_NEGOTIATION, item.operationStatus) || '-' }}
+          </el-tag>
+        </div>
+      </div>
+    </div>
     <!-- 分页 -->
-    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+    <Pagination v-if="!isMobile" :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
       @pagination="getList" />
   </ContentWrap>
 
@@ -247,6 +277,37 @@ const handleQuery = () => {
   getList()
 }
 
+// 格式化时间戳
+function formatTimestamp(milliseconds) {
+  const date = new Date(milliseconds); // 直接使用毫秒级时间戳
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+import { useDictStore } from '@/store/modules/dict'  // 如果你项目里有字典 store
+const dictStore = useDictStore?.() // 有就用；没有的话把 dictStore 相关行删掉
+// 统一用字符串比较，自动识别并翻译 i18n key
+function dictLabelI18n(type: string, val: any) {
+  const v = val == null ? '' : String(val)
+
+  // 优先从 store 取；若没有，就从你现有的工具取（getIntDictOptions / getStrDictOptions）
+  const opts =
+    (dictStore?.getDictOptions?.(type) as any[]) ||
+    getIntDictOptions(type) ||
+    getStrDictOptions(type) ||
+    []
+
+  const hit = opts.find(o => String(o.value) === v)
+  const label = hit?.label ?? ''
+  // 形如 a.b 或包含点号的，大概率是 i18n key，则用 t() 翻
+  return label && label.includes('.') ? t(label) : label
+}
+
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryParams.levelMin = undefined
@@ -389,9 +450,49 @@ function exportAi(type) {
 
   copyToClipboard(data)
 }
+const isMobile = ref(window.innerWidth <= 768)
 /** 初始化 **/
 onMounted(() => {
   getList()
   getAllocationList();
+  //实时监听实际还是电脑
+  window.addEventListener('resize', () => {
+    if ((window.innerWidth <= 768) != isMobile.value) {
+      getList()
+    }
+    isMobile.value = window.innerWidth <= 768
+
+  })
 })
-</script>
+</script>
+
+<style scoped>
+@media screen and (max-width: 768px) {
+  .mobile-card {
+    background: #fff;
+    margin: 12px;
+    padding: 12px;
+    border-radius: 10px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    font-size: 14px;
+  }
+
+  .card-row {
+    margin-bottom: 6px;
+    word-break: break-word;
+  }
+
+  .card-row b {
+    color: #555;
+    font-weight: 500;
+    margin-right: 4px;
+  }
+
+  .action-row {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 6px;
+  }
+}
+</style>