feat: 更新积分历史和订单卡片组件

- 在 PointHistoryCard.vue 中优化积分来源标签显示逻辑 - 在 PointOrderCard.vue 中添加收货地址信息展示 - 修复开放平台弹幕排队无法加载的问题
2025-12-06 18:36:55 +08:00 · 2025-05-01 14:43:29 +08:00
parent e3ee1bcc26
commit ffa3b09bc4
3 changed files with 1060 additions and 1024 deletions
--- a/src/components/manage/PointHistoryCard.vue
+++ b/src/components/manage/PointHistoryCard.vue
@@ -96,7 +96,7 @@ const historyColumn: DataTableColumns<ResponsePointHisrotyModel> = [
          case PointFrom.Manual:
            return h(
              NTag,
-              { type: 'success', bordered: false, size: 'small' },
+              { type: row.point > 0 ? 'success' : 'error', bordered: false, size: 'small' },
              () => '主播' + (row.point > 0 ? '赠予' : '扣除'),
            )
          case PointFrom.Use:
@@ -194,22 +194,40 @@ const historyColumn: DataTableColumns<ResponsePointHisrotyModel> = [

 <template>
  <!-- 无数据时显示提示 -->
-  <NEmpty v-if="!histories || histories.length === 0" description="暂无积分历史记录" />
+  <NEmpty
+    v-if="!histories || histories.length === 0"
+    description="暂无积分历史记录"
+  />

  <!-- 有数据时显示表格 -->
-  <NDataTable v-else :columns="historyColumn" :data="histories" :pagination="{
+  <NDataTable
+    v-else
+    :columns="historyColumn"
+    :data="histories"
+    :pagination="{
      showSizePicker: true,
      pageSizes: [10, 25, 50, 100],
      defaultPageSize: 10,
      size: 'small'
-  }" />
+    }"
+  />

  <!-- 商品详情模态框 -->
-  <NModal v-model:show="showGoodsModal" preset="card" title="礼物详情 (快照)" style="max-width: 400px; height: auto">
+  <NModal
+    v-model:show="showGoodsModal"
+    preset="card"
+    title="礼物详情 (快照)"
+    style="max-width: 400px; height: auto"
+  >
    <PointGoodsItem :goods="currentGoods" />
    <template v-if="currentGoods?.content">
      <NDivider>礼物内容</NDivider>
-      <NInput :value="currentGoods?.content" type="textarea" readonly placeholder="无内容" />
+      <NInput
+        :value="currentGoods?.content"
+        type="textarea"
+        readonly
+        placeholder="无内容"
+      />
    </template>
  </NModal>
 </template>
--- a/src/components/manage/PointOrderCard.vue
+++ b/src/components/manage/PointOrderCard.vue
@@ -721,6 +721,16 @@ onMounted(() => {
              </NSpace>
            </NCard>

+            <!-- 收货地址信息 -->
+            <template v-if="orderDetail.type === GoodsTypes.Physical">
+              <NDivider>收货地址</NDivider>
+              <NCard
+                size="small"
+                class="address-info-card"
+              >
+                <AddressDisplay :address="orderDetail.address" />
+              </NCard>
+            </template>

            <!-- 快递信息 -->
            <template v-if="orderDetail.status === PointOrderStatus.Shipped && orderDetail.instanceOf === 'owner' && orderDetail.type === GoodsTypes.Physical">
@@ -939,6 +949,10 @@ onMounted(() => {
  box-shadow: 0 2px 8px var(--n-box-shadow-color);
 }

+.address-info-card {
+  margin-bottom: 16px;
+}
+
@media (max-width: 768px) {
  .order-detail-modal {
    max-width: 95vw;
--- a/src/views/open_live/OpenQueue.vue
+++ b/src/views/open_live/OpenQueue.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-  import { AddBiliBlackList, SaveEnableFunctions, SaveSetting, useAccount } from '@/api/account';
-  import {
+import { AddBiliBlackList, SaveEnableFunctions, SaveSetting, useAccount } from '@/api/account';
+import {
  DanmakuUserInfo,
  EventDataTypes,
  EventModel,
@@ -13,11 +13,11 @@
  QueueStatus,
  ResponseQueueModel,
  Setting_Queue,
-  } from '@/api/api-models';
-  import { QueryGetAPI, QueryPostAPI, QueryPostAPIWithParams } from '@/api/query';
-  import { CURRENT_HOST, QUEUE_API_URL } from '@/data/constants'; // CURRENT_HOST 用于 OBS Modal
-  import { useDanmakuClient } from '@/store/useDanmakuClient';
-  import {
+} from '@/api/api-models';
+import { QueryGetAPI, QueryPostAPI, QueryPostAPIWithParams } from '@/api/query';
+import { CURRENT_HOST, QUEUE_API_URL } from '@/data/constants'; // CURRENT_HOST 用于 OBS Modal
+import { useDanmakuClient } from '@/store/useDanmakuClient';
+import {
  Checkmark12Regular,
  ClipboardTextLtr24Filled,
  Delete24Filled,
@@ -25,12 +25,12 @@
  Info24Filled,
  PeopleQueue24Filled,
  PresenceBlocked16Regular,
-  } from '@vicons/fluent';
-  import { ReloadCircleSharp } from '@vicons/ionicons5';
-  import { useStorage } from '@vueuse/core';
-  import { isSameDay } from 'date-fns';
-  import { List } from 'linqts';
-  import {
+} from '@vicons/fluent';
+import { ReloadCircleSharp } from '@vicons/ionicons5';
+import { useStorage } from '@vueuse/core';
+import { isSameDay } from 'date-fns';
+import { List } from 'linqts';
+import {
  DataTableColumns,
  NAlert,
  NButton,
@@ -66,14 +66,14 @@
  NUl,
  useMessage,
  useNotification,
-  } from 'naive-ui';
-  import { computed, h, onActivated, onDeactivated, onMounted, onUnmounted, ref, VNodeChild, CSSProperties } from 'vue';
-  // import { useRoute } from 'vue-router' // 未使用
-  import QueueOBS from '../obs/QueueOBS.vue';
-  import { copyToClipboard } from '@/Utils';
+} from 'naive-ui';
+import { computed, h, onActivated, onDeactivated, onMounted, onUnmounted, ref, VNodeChild, CSSProperties } from 'vue';
+// import { useRoute } from 'vue-router' // 未使用
+import QueueOBS from '../obs/QueueOBS.vue';
+import { copyToClipboard } from '@/Utils';

-  // 默认队列设置
-  const defaultSettings = {
+// 默认队列设置
+const defaultSettings = {
  keyword: '排队',
  enableOnStreaming: false,
  queueMaxSize: 10,
@@ -103,34 +103,34 @@
  showPayment: true,
  sendGiftDirectJoin: true,
  sendGiftIgnoreLimit: false,
-  } as Setting_Queue;
+} as Setting_Queue;

-  // 队列状态映射
-  const STATUS_MAP = {
+// 队列状态映射
+const STATUS_MAP = {
  [QueueStatus.Waiting]: '等待中',
  [QueueStatus.Progressing]: '处理中',
  [QueueStatus.Finish]: '已完成',
  [QueueStatus.Cancel]: '已取消',
-  };
+};

-  // const route = useRoute() // 未使用
-  const accountInfo = useAccount();
-  const message = useMessage();
-  const notice = useNotification();
-  const client = await useDanmakuClient().initOpenlive(); // 初始化弹幕客户端
+// const route = useRoute() // 未使用
+const accountInfo = useAccount();
+const message = useMessage();
+const notice = useNotification();
+const client = await useDanmakuClient().initOpenlive(); // 初始化弹幕客户端

-  const isWarnMessageAutoClose = useStorage('Queue.Settings.WarnMessageAutoClose', false); // 警告消息是否自动关闭
-  const isReverse = useStorage('Queue.Settings.Reverse', false); // 本地存储的倒序设置 (未登录时使用)
-  // const volumn = useStorage('Settings.Volumn', 0.5) // 未使用
+const isWarnMessageAutoClose = useStorage('Queue.Settings.WarnMessageAutoClose', false); // 警告消息是否自动关闭
+const isReverse = useStorage('Queue.Settings.Reverse', false); // 本地存储的倒序设置 (未登录时使用)
+// const volumn = useStorage('Settings.Volumn', 0.5) // 未使用

-  const isLoading = ref(false); // 加载状态
-  const showOBSModal = ref(false); // OBS 组件模态框显示状态
+const isLoading = ref(false); // 加载状态
+const showOBSModal = ref(false); // OBS 组件模态框显示状态

-  const filterName = ref(''); // 历史记录筛选用户名
-  const filterNameContains = ref(false); // 历史记录筛选是否包含
+const filterName = ref(''); // 历史记录筛选用户名
+const filterNameContains = ref(false); // 历史记录筛选是否包含

-  // 队列设置 (登录后使用账户设置, 否则使用默认设置)
-  const settings = computed({
+// 队列设置 (登录后使用账户设置, 否则使用默认设置)
+const settings = computed({
  get: () => {
    if (accountInfo.value.id) {
      return accountInfo.value.settings.queue;
@@ -142,18 +142,18 @@
      accountInfo.value.settings.queue = value;
    }
  },
-  });
+});

-  // Props 定义 (虽然未在逻辑中直接使用，但可能由父组件传入或用于类型检查)
-  const props = defineProps<{
+// Props 定义 (虽然未在逻辑中直接使用，但可能由父组件传入或用于类型检查)
+const props = defineProps<{
  roomInfo?: OpenLiveInfo;
  code?: string | undefined;
  isOpenLive?: boolean;
-  }>();
+}>();

-  const localQueues = useStorage('Local.Queue', [] as ResponseQueueModel[]); // 本地存储的队列 (未登录时使用)
-  const originQueue = ref<ResponseQueueModel[]>([]); // 从 API 获取或本地存储的原始队列数据
-  const queue = computed(() => { // 当前显示的活动队列 (过滤、排序后)
+const localQueues = useStorage('Local.Queue', [] as ResponseQueueModel[]); // 本地存储的队列 (未登录时使用)
+const originQueue = ref<ResponseQueueModel[]>([]); // 从 API 获取或本地存储的原始队列数据
+const queue = computed(() => { // 当前显示的活动队列 (过滤、排序后)
  let list = new List(accountInfo.value ? originQueue.value : localQueues.value)
    .Where( // 按用户名筛选
      (q) =>
@@ -195,26 +195,26 @@
  // 将处理中的项置顶
  list = list.OrderByDescending((q) => (q.status == QueueStatus.Progressing ? 1 : 0));
  return list.ToArray();
-  });
-  const historySongs = computed(() => { // 历史队列 (已完成或取消)
+});
+const historySongs = computed(() => { // 历史队列 (已完成或取消)
  return (accountInfo.value ? originQueue.value : localQueues.value)
    .filter((song) => {
      return song.status == QueueStatus.Finish || song.status == QueueStatus.Cancel;
    })
    .sort((a, b) => (b.finishAt ?? b.createAt) - (a.finishAt ?? a.createAt)); // 按完成/创建时间降序
-  });
+});

-  const newQueueName = ref(''); // 手动添加的用户名
+const newQueueName = ref(''); // 手动添加的用户名

-  const defaultKeyword = useStorage('Settings.Queue.DefaultKeyword', '排队'); // 本地存储的默认关键词
-  const configCanEdit = computed(() => { // 配置是否可编辑 (是否已登录)
+const defaultKeyword = useStorage('Settings.Queue.DefaultKeyword', '排队'); // 本地存储的默认关键词
+const configCanEdit = computed(() => { // 配置是否可编辑 (是否已登录)
  return accountInfo.value != null && accountInfo.value != undefined;
-  });
+});

-  const table = ref(); // NDataTable 引用
+const table = ref(); // NDataTable 引用

-  // 获取所有队列数据
-  async function getAll() {
+// 获取所有队列数据
+async function getAll() {
  if (accountInfo.value.id) {
    try {
      isLoading.value = true;
@@ -239,14 +239,10 @@
    // 未登录时返回本地数据
    return localQueues.value;
  }
-  }
+}

-  // 尝试添加队列 (处理弹幕、礼物事件)
-  async function add(danmaku: EventModel) {
-    // 检查功能是否启用
-    if (!accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.Queue)) {
-      return;
-    }
+// 尝试添加队列 (处理弹幕、礼物事件)
+async function add(danmaku: EventModel) {
  // 检查消息是否符合加入条件
  if (!checkMessage(danmaku)) {
    return;
@@ -259,6 +255,10 @@
  }

  if (accountInfo.value.id) { // 已登录，调用 API
+    // 检查功能是否启用
+    if (!accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.Queue)) {
+      return;
+    }
    try {
      const data = await QueryPostAPI<ResponseQueueModel>(QUEUE_API_URL + 'try-add', danmaku);
      if (data.code == 200) {
@@ -313,10 +313,10 @@
    localQueues.value.unshift(songData); // 添加到本地队列开头
    message.success(`[${danmaku.uname}] 添加至本地队列`);
  }
-  }
+}

-  // 手动添加用户至队列
-  async function addManual() {
+// 手动添加用户至队列
+async function addManual() {
  if (!newQueueName.value) {
    message.error('请输入用户名');
    return;
@@ -352,10 +352,10 @@
    message.success(`已手动添加用户至队列: ${newQueueName.value}`);
    newQueueName.value = '';
  }
-  }
+}

-  // 更新队列状态
-  async function updateStatus(queueData: ResponseQueueModel, status: QueueStatus) {
+// 更新队列状态
+async function updateStatus(queueData: ResponseQueueModel, status: QueueStatus) {
  if (!configCanEdit.value) { // 未登录，直接修改本地状态
    const localItem = localQueues.value.find(q => q.id === queueData.id);
    if (localItem) {
@@ -395,19 +395,19 @@
  } finally {
    isLoading.value = false;
  }
-  }
+}

-  // 弹幕事件处理
-  function onGetDanmaku(danmaku: EventModel) {
+// 弹幕事件处理
+function onGetDanmaku(danmaku: EventModel) {
  add(danmaku);
-  }
-  // 礼物事件处理
-  function onGetGift(danmaku: EventModel) {
+}
+// 礼物事件处理
+function onGetGift(danmaku: EventModel) {
  add(danmaku);
-  }
+}

-  // 检查消息是否符合加入队列的条件
-  function checkMessage(eventData: EventModel): boolean {
+// 检查消息是否符合加入队列的条件
+function checkMessage(eventData: EventModel): boolean {
  // 未登录时，如果用户已在本地队列，则不允许重复添加 (简单检查)
  if (!configCanEdit.value && localQueues.value.some((q) => q.user?.uid == eventData.uid && q.status < QueueStatus.Finish)) {
    console.log(`[OPEN-LIVE-QUEUE] 本地队列已存在用户 [${eventData.uname}]，跳过`);
@@ -480,10 +480,10 @@
        return false;
    }
  }
-  }
+}

-  // 更新功能启用状态
-  async function onUpdateFunctionEnable() {
+// 更新功能启用状态
+async function onUpdateFunctionEnable() {
  if (accountInfo.value.id) {
    const oldValue = JSON.parse(JSON.stringify(accountInfo.value.settings.enableFunctions));
    const isEnabling = !accountInfo.value.settings.enableFunctions.includes(FunctionTypes.Queue);
@@ -522,10 +522,10 @@
      console.error(`[OPEN-LIVE-QUEUE] 更新功能状态失败:`, err);
    }
  }
-  }
+}

-  // 更新设置
-  async function updateSettings() {
+// 更新设置
+async function updateSettings() {
  if (accountInfo.value.id) {
    isLoading.value = true;
    try {
@@ -544,10 +544,10 @@
  } else {
    message.success('本地设置已更新 (未登录)'); // 对于未登录用户，设置是响应式的，无需显式保存
  }
-  }
+}

-  // 删除队列记录
-  async function deleteQueue(values: ResponseQueueModel[]) {
+// 删除队列记录
+async function deleteQueue(values: ResponseQueueModel[]) {
  if (!values || values.length === 0) return;

  if (accountInfo.value.id) { // 已登录，调用 API
@@ -574,10 +574,10 @@
    localQueues.value = localQueues.value.filter(q => !idsToDelete.includes(q.id));
    message.success(`成功删除 ${values.length} 条本地记录`);
  }
-  }
+}

-  // 取消所有活动队列项
-  async function deactiveAllSongs() {
+// 取消所有活动队列项
+async function deactiveAllSongs() {
  if (accountInfo.value.id) { // 已登录，调用 API
    isLoading.value = true;
    try {
@@ -609,10 +609,10 @@
    });
    message.success('已全部取消本地活动队列');
  }
-  }
+}

-  // 状态筛选选项
-  const statusFilterOptions = computed(() => {
+// 状态筛选选项
+const statusFilterOptions = computed(() => {
  return Object.values(QueueStatus)
    .filter((t): t is QueueStatus => typeof t === 'number') // 确保是数字枚举值
    .map((t) => {
@@ -621,10 +621,10 @@
        value: t,
      };
    });
-  });
+});

-  // 历史记录表格列定义
-  const columns = computed<DataTableColumns<ResponseQueueModel>>(() => [
+// 历史记录表格列定义
+const columns = computed<DataTableColumns<ResponseQueueModel>>(() => [
  {
    title: '用户名',
    key: 'user.name',
@@ -796,24 +796,24 @@
      return h(NSpace, { justify: 'center', size: 4 }, () => buttons); // 减小间距
    },
  },
-  ]);
+]);

-  // 用于标记历史记录表格中正在操作的行，以显示 loading
-  const queueDataBeingManaged = ref<number | null>(null);
+// 用于标记历史记录表格中正在操作的行，以显示 loading
+const queueDataBeingManaged = ref<number | null>(null);

-  // 监听筛选条件变化，手动触发 NDataTable 筛选
-  watch([filterName, filterNameContains], () => {
+// 监听筛选条件变化，手动触发 NDataTable 筛选
+watch([filterName, filterNameContains], () => {
  if (table.value) {
    // 更新第一列的 filterOptionValue 来触发筛选
    const cols = table.value.columns;
    cols[0].filterOptionValue = filterName.value + filterNameContains.value.toString();
    table.value.filter(cols[0]);
  }
-  });
+});


-  // 获取舰长等级对应的颜色
-  function GetGuardColor(level: number | null | undefined): string {
+// 获取舰长等级对应的颜色
+function GetGuardColor(level: number | null | undefined): string {
  if (level) {
    switch (level) {
      case 1: return 'rgb(122, 4, 35)'; // 总督
@@ -822,10 +822,10 @@
    }
  }
  return '#999'; // 默认颜色或无舰长
-  }
+}

-  // 定时更新活动队列信息 (增量更新)
-  async function updateActive() {
+// 定时更新活动队列信息 (增量更新)
+async function updateActive() {
  if (!accountInfo.value.id) return; // 未登录则不执行
  try {
    const data = await QueryGetAPI<ResponseQueueModel[]>(QUEUE_API_URL + 'get-active', {
@@ -881,10 +881,10 @@
  } catch (err: any) {
    console.warn('[OPEN-LIVE-Queue] 更新活动队列失败:', err.message || err);
  }
-  }
+}

-  // 拉黑用户 (仅限弹幕来源)
-  function blockUser(item: ResponseQueueModel) {
+// 拉黑用户 (仅限弹幕来源)
+function blockUser(item: ResponseQueueModel) {
  if (item.from != QueueFrom.Danmaku && item.from != QueueFrom.Gift) { // 允许拉黑礼物用户
    message.error(`[${item.user?.name}] 不是来自弹幕或礼物的用户，无法拉黑`);
    return;
@@ -912,14 +912,14 @@
  } else {
    message.error(`用户 [${item.user?.name}] 没有有效的 UID，无法拉黑`);
  }
-  }
+}

-  let timer: any; // 用于更新相对时间的计时器
-  let updateActiveTimer: any; // 用于轮询活动队列的计时器
-  const updateKey = ref(0); // 用于强制更新 NTime 组件
+let timer: any; // 用于更新相对时间的计时器
+let updateActiveTimer: any; // 用于轮询活动队列的计时器
+const updateKey = ref(0); // 用于强制更新 NTime 组件

-  // 初始化操作
-  async function init() {
+// 初始化操作
+async function init() {
  dispose(); // 先清理旧的计时器
  // 如果登录了，获取一次全量数据
  if (accountInfo.value.id) {
@@ -932,18 +932,18 @@
  updateActiveTimer = setInterval(() => {
    updateActive(); // 定期更新活动队列
  }, 5000); // 轮询间隔调整为 5 秒
-  }
+}

-  // 清理操作
-  function dispose() {
+// 清理操作
+function dispose() {
  clearInterval(timer);
  clearInterval(updateActiveTimer);
  timer = null;
  updateActiveTimer = null;
-  }
+}

-  // --- 生命周期钩子 ---
-  onMounted(async () => {
+// --- 生命周期钩子 ---
+onMounted(async () => {
  // 挂载时初始化
  if (accountInfo.value.id) {
    // 如果已登录，同步一次设置到本地状态 (虽然 computed 会处理，但显式同步更清晰)
@@ -953,27 +953,27 @@
  client.onEvent('danmaku', onGetDanmaku);
  client.onEvent('gift', onGetGift);
  await init(); // 初始化数据和定时器
-  });
+});

-  onActivated(async () => {
+onActivated(async () => {
  // 组件被 keep-alive 激活时重新初始化
  await init();
-  });
+});

-  onDeactivated(() => {
+onDeactivated(() => {
  // 组件被 keep-alive 停用时清理定时器
  dispose();
-  });
+});

-  onUnmounted(() => {
+onUnmounted(() => {
  // 组件卸载时彻底清理
  client.offEvent('danmaku', onGetDanmaku);
  client.offEvent('gift', onGetGift);
  dispose();
-  });
+});

-  // --- 辅助函数 ---
-  function getIndexStyle(status: QueueStatus): CSSProperties {
+// --- 辅助函数 ---
+function getIndexStyle(status: QueueStatus): CSSProperties {
  // 基础颜色定义 - 扁平化风格
  let backgroundColor;

@@ -1010,7 +1010,7 @@
  };

  return style;
-  }
+}
 </script>

 <template>
@@ -1090,7 +1090,7 @@
  <NCard style="margin-top: 10px;">
    <!-- 主内容区域 -->
    <NTabs
-      v-if="!accountInfo || accountInfo.settings.enableFunctions.includes(FunctionTypes.Queue)"
+      v-if="!accountInfo.id || accountInfo.settings.enableFunctions.includes(FunctionTypes.Queue)"
      type="line"
      animated
      display-directive="show:lazy"
@@ -1895,43 +1895,45 @@
 </template>

 <style>
-  /* 处理中状态的边框动画 */
-  @keyframes animated-border {
+/* 处理中状态的边框动画 */
+@keyframes animated-border {
  0% {
    box-shadow: 0 0 0 0px rgba(103, 194, 58, 0.7);
  }
+
  70% {
    box-shadow: 0 0 0 5px rgba(103, 194, 58, 0);
  }
+
  100% {
    box-shadow: 0 0 0 0px rgba(103, 194, 58, 0);
  }
-  }
+}

-  /* 处理中状态的卡片左边框或标签动画 */
-  .n-card[style*="border-left: 4px solid #63e2b7;"],
-  .n-tag--success[style*="animation: animated-border"] {
+/* 处理中状态的卡片左边框或标签动画 */
+.n-card[style*="border-left: 4px solid #63e2b7;"],
+.n-tag--success[style*="animation: animated-border"] {
  animation: animated-border 1.5s infinite;
-  }
+}

-  /* 优化 NDataTable 内容过长时的显示 */
-  .n-data-table-td {
+/* 优化 NDataTable 内容过长时的显示 */
+.n-data-table-td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
-  }
+}

-  /* 序号悬停效果 - 扁平化风格 */
-  .queue-index:hover {
+/* 序号悬停效果 - 扁平化风格 */
+.queue-index:hover {
  opacity: 0.85;
-  }
+}

-  /* 处理中状态的序号动画 - 扁平化风格 */
-  .queue-index-processing {
+/* 处理中状态的序号动画 - 扁平化风格 */
+.queue-index-processing {
  position: relative;
-  }
+}

-  .queue-index-processing::after {
+.queue-index-processing::after {
  content: '';
  position: absolute;
  top: -2px;
@@ -1942,20 +1944,22 @@
  border: 2px solid #18a058;
  opacity: 0;
  animation: flat-pulse 2s infinite;
-  }
+}

-  @keyframes flat-pulse {
+@keyframes flat-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
+
  70% {
    transform: scale(1.1);
    opacity: 0;
  }
+
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
-  }
+}
 </style>