af-mobile-client-vue3 1.3.30 → 1.3.31

package/src/views/user/my/index.vue

@@ -1,507 +1,507 @@
-<script setup lang="ts">
-import type { PhoneLocationStatus } from '@af-mobile-client-vue3/components/data/XOlMap/types'
-import useSettingStore from '@af-mobile-client-vue3/stores/modules/setting'
-import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
-import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
-import { Dialog as vanDialog, Icon as vanIcon } from 'vant'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import ModifyPassword from './comm/ModifyPassword.vue'
-
-const router = useRouter()
-const username = useUserStore().getUserInfo().name
-const fullnames = useUserStore().getLogin().f.resources.fullnames
-const roleName = useUserStore().getLogin().f.resources.f_role_name
-
-// 修改密码弹窗显示状态
-const showModifyPassword = ref(false)
-// 退出登录确认弹窗显示状态
-const showLogoutConfirm = ref(false)
-// 在setup函数中
-let intervalId = null
-
-// 定义一个变量来存储上一次的上传结果
-const lastUploadResult = ref(null)
-
-/**
- * 上次上传结果类型定义
- */
-interface LocationInfo {
-  uploadTime: string
-  f_realtime: string
-  f_latitude: number
-  f_longitude: number
-  f_address?: string
-  f_speed?: number
-  f_bearing?: number
-  f_altitude?: number
-  isError: boolean
-  errorCode?: string
-  // ... 其他字段
-}
-
-interface UploadResult {
-  uploadTime: string
-  location: LocationInfo
-  response: {
-    code: number
-    msg?: string
-    [key: string]: any
-  }
-}
-
-// 兼容 lastUploadResult 可能为字符串或对象
-const lastUploadResultObj = computed<UploadResult | null>(() => {
-  if (!lastUploadResult.value)
-    return null
-  if (typeof lastUploadResult.value === 'string') {
-    try {
-      return JSON.parse(lastUploadResult.value)
-    }
-    catch {
-      return null
-    }
-  }
-  return lastUploadResult.value
-})
-
-const uploadDisplayInfo = computed(() => {
-  const result = lastUploadResultObj.value
-  if (!result)
-    return { error: null, info: null }
-  // response.code 不为 200
-  if (result.response && result.response.code !== 200) {
-    return { error: result.response.msg || '未知错误', info: null }
-  }
-
-  // location.errorCode 存在且 isError 为 true
-  if (result.location && result.location.isError && result.location.errorCode) {
-    return { error: result.location.errorCode, info: null }
-  }
-
-  // 正常展示
-  if (result.location) {
-    return {
-      error: null,
-      info: {
-        uploadTime: result.uploadTime,
-        latitude: result.location.f_latitude,
-        longitude: result.location.f_longitude,
-      },
-    }
-  }
-
-  return { error: null, info: null }
-})
-
-const uploadStatusTag = computed(() => {
-  const result = uploadDisplayInfo.value
-  if (result.error) {
-    return { text: '上传定位失败', color: 'red' }
-  }
-  if (result.info) {
-    return { text: '正在上传定位', color: 'green' }
-  }
-  return null
-})
-
-onMounted(() => {
-  if (roleName.includes('需要定位人员')) {
-    try {
-      mobileUtil.execute({
-        param: {},
-        funcName: 'getLastRealtimeUploadResult',
-        callbackFunc: (result: PhoneLocationStatus) => {
-          try {
-            if (result.status === 'success') {
-              lastUploadResult.value = result.data
-
-              // 首次成功才启动定时器
-              intervalId = setInterval(() => {
-                try {
-                  mobileUtil.execute({
-                    param: {},
-                    funcName: 'getLastRealtimeUploadResult',
-                    callbackFunc: (res: PhoneLocationStatus) => {
-                      if (res.status === 'success') {
-                        lastUploadResult.value = res.data
-                      }
-                    },
-                  })
-                }
-                catch (err) {
-                  console.error('定时获取定位信息异常:', err)
-                }
-              }, 10000)
-            }
-            else {
-              console.warn('首次定位获取失败，不启动定时器:', result)
-            }
-          }
-          catch (err) {
-            console.error('处理首次定位结果异常:', err)
-          }
-        },
-      })
-    }
-    catch (err) {
-      console.error('首次获取定位信息异常:', err)
-    }
-  }
-})
-
-onUnmounted(() => {
-  // 组件卸载时清除定时器
-  if (intervalId) {
-    clearInterval(intervalId)
-    intervalId = null
-  }
-})
-function exit_login() {
-  showLogoutConfirm.value = true
-}
-
-function confirmLogout() {
-  useUserStore().logout()
-  showLogoutConfirm.value = false
-}
-
-function cancelLogout() {
-  showLogoutConfirm.value = false
-}
-
-function goToAttendance() {
-  router.push('/user/attendance')
-}
-
-function openModifyPassword() {
-  showModifyPassword.value = true
-}
-
-const webMobileConfig = useSettingStore().getSetting()
-</script>
-
-<template>
-  <main class="my_main">
-    <!-- 顶部导航栏 -->
-    <nav class="header_nav">
-      <div class="header_content">
-        <h1 class="main_title">
-          我的
-        </h1>
-        <!--        <div class="setting_section"> -->
-        <!--          <van-icon name="setting-o" class="setting-icon" /> -->
-        <!--        </div> -->
-      </div>
-    </nav>
-
-    <!-- 主要内容区域 -->
-    <div class="content">
-      <!-- 用户信息卡片 -->
-      <div class="user-card">
-        <div class="user-info">
-          <div class="avatar-wrap">
-            <img alt="default-user-profile" class="avatar" src="../../../assets/common/default-user-profile.png">
-            <div class="status-dot" />
-          </div>
-          <div class="user-detail">
-            <h2 class="username">
-              {{ username }}
-              <span
-                v-if="uploadStatusTag"
-                class="upload-status-tag" :class="[uploadStatusTag.color]"
-              >
-                {{ uploadStatusTag.text }}
-              </span>
-            </h2>
-            <p class="user-role">
-              {{ fullnames }}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <!-- 工作统计 -->
-      <div class="stats-card">
-        <div class="stats-grid">
-          <div class="stat-item">
-            <div class="stat-value">
-              0
-            </div>
-            <div class="stat-label">
-              待办任务
-            </div>
-          </div>
-          <div class="stat-item">
-            <div class="stat-value">
-              0
-            </div>
-            <div class="stat-label">
-              待办流程
-            </div>
-          </div>
-          <div class="stat-item">
-            <div class="stat-value">
-              0
-            </div>
-            <div class="stat-label">
-              新消息
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 功能列表 -->
-      <div class="menu-card">
-        <div class="menu-section">
-          <h3 class="menu-title">
-            系统功能
-          </h3>
-          <div class="menu-list">
-            <div v-if="webMobileConfig?.isAttendance" class="menu-item" @click="goToAttendance">
-              <div class="menu-item-content">
-                <van-icon name="user-o" class="menu-icon" />
-                <span class="menu-text">考勤管理</span>
-              </div>
-              <van-icon name="arrow" class="menu-arrow" />
-            </div>
-            <div class="menu-item" @click="openModifyPassword">
-              <div class="menu-item-content">
-                <van-icon name="lock" class="menu-icon" />
-                <span class="menu-text">修改密码</span>
-              </div>
-              <van-icon name="arrow" class="menu-arrow" />
-            </div>
-            <div class="menu-item" @click="exit_login">
-              <div class="menu-item-content">
-                <van-icon name="sign" class="menu-icon logout-icon" />
-                <span class="menu-text">退出登录</span>
-              </div>
-              <van-icon name="arrow" class="menu-arrow" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 修改密码弹窗 -->
-    <ModifyPassword
-      v-model:visible="showModifyPassword"
-    />
-
-    <!-- 退出登录确认弹窗 -->
-    <van-dialog
-      v-model:show="showLogoutConfirm"
-      title="确认退出"
-      message="确定要退出登录吗？"
-      show-cancel-button
-      confirm-button-text="确认退出"
-      cancel-button-text="取消"
-      @confirm="confirmLogout"
-      @cancel="cancelLogout"
-    />
-  </main>
-</template>
-
-<style scoped lang="less">
-.my_main {
-  min-height: 100vh;
-  background-color: #f7f8fa;
-
-  // 顶部导航栏
-  .header_nav {
-    background-color: #fff;
-    padding: 0 16px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-    position: relative;
-    z-index: 50;
-
-    .header_content {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: 56px;
-
-      .main_title {
-        font-size: 1.25rem;
-        font-weight: 600;
-        color: #333;
-        margin: 0;
-      }
-
-      .setting_section {
-        padding: 8px;
-        cursor: pointer;
-
-        .setting-icon {
-          font-size: 20px;
-          color: #666;
-        }
-      }
-    }
-  }
-
-  .content {
-    padding: 16px;
-
-    // 用户信息卡片
-    .user-card {
-      background-color: #fff;
-      border-radius: 8px;
-      padding: 16px;
-      margin-bottom: 16px;
-
-      .user-info {
-        display: flex;
-        align-items: center;
-
-        .avatar-wrap {
-          position: relative;
-          margin-right: 16px;
-
-          .avatar {
-            width: 80px;
-            height: 80px;
-            border-radius: 50%;
-            object-fit: cover;
-          }
-
-          .status-dot {
-            position: absolute;
-            bottom: 2px;
-            right: 2px;
-            width: 16px;
-            height: 16px;
-            border-radius: 50%;
-            background-color: #10b981;
-            border: 2px solid #fff;
-          }
-        }
-
-        .user-detail {
-          .username {
-            font-size: 20px;
-            font-weight: 600;
-            color: #333;
-            margin: 0 0 4px 0;
-          }
-          .upload-status-tag {
-            display: inline-block;
-            margin-left: 8px;
-            padding: 2px 8px;
-            border-radius: 8px;
-            font-size: 12px;
-            font-weight: 400;
-            background: #f0f0f0;
-            &.green {
-              color: #10b981;
-              background: #e6f9f0;
-              border: 1px solid #10b981;
-            }
-            &.red {
-              color: #ef4444;
-              background: #fdeaea;
-              border: 1px solid #ef4444;
-            }
-          }
-
-          .user-role {
-            font-size: 14px;
-            color: #666;
-            margin: 0;
-          }
-        }
-      }
-    }
-
-    // 工作统计卡片
-    .stats-card {
-      background-color: #fff;
-      border-radius: 8px;
-      padding: 16px;
-      margin-bottom: 16px;
-
-      .stats-grid {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 16px;
-        text-align: center;
-
-        .stat-item {
-          .stat-value {
-            font-size: 24px;
-            font-weight: 600;
-            color: #3b82f6;
-            margin-bottom: 4px;
-          }
-
-          .stat-label {
-            font-size: 14px;
-            color: #666;
-          }
-        }
-      }
-    }
-
-    // 功能列表卡片
-    .menu-card {
-      background-color: #fff;
-      border-radius: 8px;
-      overflow: hidden;
-
-      .menu-section {
-        padding: 16px;
-
-        .menu-title {
-          font-size: 14px;
-          font-weight: 500;
-          color: #666;
-          margin-bottom: 12px;
-        }
-
-        .menu-list {
-          .menu-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 12px;
-            background-color: #f7f8fa;
-            border-radius: 8px;
-            margin-bottom: 8px;
-            cursor: pointer;
-
-            &:last-child {
-              margin-bottom: 0;
-            }
-
-            .menu-item-content {
-              display: flex;
-              align-items: center;
-              gap: 12px;
-
-              .menu-icon {
-                font-size: 24px;
-                color: #3b82f6;
-
-                &.logout-icon {
-                  color: #ef4444;
-                }
-              }
-
-              .menu-text {
-                font-size: 16px;
-                color: #333;
-              }
-            }
-
-            .menu-arrow {
-              color: #999;
-              font-size: 16px;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>
+<script setup lang="ts">
+import type { PhoneLocationStatus } from '@af-mobile-client-vue3/components/data/XOlMap/types'
+import useSettingStore from '@af-mobile-client-vue3/stores/modules/setting'
+import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
+import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
+import { Dialog as vanDialog, Icon as vanIcon } from 'vant'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import ModifyPassword from './comm/ModifyPassword.vue'
+
+const router = useRouter()
+const username = useUserStore().getUserInfo().name
+const fullnames = useUserStore().getLogin().f.resources.fullnames
+const roleName = useUserStore().getLogin().f.resources.f_role_name
+
+// 修改密码弹窗显示状态
+const showModifyPassword = ref(false)
+// 退出登录确认弹窗显示状态
+const showLogoutConfirm = ref(false)
+// 在setup函数中
+let intervalId = null
+
+// 定义一个变量来存储上一次的上传结果
+const lastUploadResult = ref(null)
+
+/**
+ * 上次上传结果类型定义
+ */
+interface LocationInfo {
+  uploadTime: string
+  f_realtime: string
+  f_latitude: number
+  f_longitude: number
+  f_address?: string
+  f_speed?: number
+  f_bearing?: number
+  f_altitude?: number
+  isError: boolean
+  errorCode?: string
+  // ... 其他字段
+}
+
+interface UploadResult {
+  uploadTime: string
+  location: LocationInfo
+  response: {
+    code: number
+    msg?: string
+    [key: string]: any
+  }
+}
+
+// 兼容 lastUploadResult 可能为字符串或对象
+const lastUploadResultObj = computed<UploadResult | null>(() => {
+  if (!lastUploadResult.value)
+    return null
+  if (typeof lastUploadResult.value === 'string') {
+    try {
+      return JSON.parse(lastUploadResult.value)
+    }
+    catch {
+      return null
+    }
+  }
+  return lastUploadResult.value
+})
+
+const uploadDisplayInfo = computed(() => {
+  const result = lastUploadResultObj.value
+  if (!result)
+    return { error: null, info: null }
+  // response.code 不为 200
+  if (result.response && result.response.code !== 200) {
+    return { error: result.response.msg || '未知错误', info: null }
+  }
+
+  // location.errorCode 存在且 isError 为 true
+  if (result.location && result.location.isError && result.location.errorCode) {
+    return { error: result.location.errorCode, info: null }
+  }
+
+  // 正常展示
+  if (result.location) {
+    return {
+      error: null,
+      info: {
+        uploadTime: result.uploadTime,
+        latitude: result.location.f_latitude,
+        longitude: result.location.f_longitude,
+      },
+    }
+  }
+
+  return { error: null, info: null }
+})
+
+const uploadStatusTag = computed(() => {
+  const result = uploadDisplayInfo.value
+  if (result.error) {
+    return { text: '上传定位失败', color: 'red' }
+  }
+  if (result.info) {
+    return { text: '正在上传定位', color: 'green' }
+  }
+  return null
+})
+
+onMounted(() => {
+  if (roleName?.includes('需要定位人员')) {
+    try {
+      mobileUtil.execute({
+        param: {},
+        funcName: 'getLastRealtimeUploadResult',
+        callbackFunc: (result: PhoneLocationStatus) => {
+          try {
+            if (result.status === 'success') {
+              lastUploadResult.value = result.data
+
+              // 首次成功才启动定时器
+              intervalId = setInterval(() => {
+                try {
+                  mobileUtil.execute({
+                    param: {},
+                    funcName: 'getLastRealtimeUploadResult',
+                    callbackFunc: (res: PhoneLocationStatus) => {
+                      if (res.status === 'success') {
+                        lastUploadResult.value = res.data
+                      }
+                    },
+                  })
+                }
+                catch (err) {
+                  console.error('定时获取定位信息异常:', err)
+                }
+              }, 10000)
+            }
+            else {
+              console.warn('首次定位获取失败，不启动定时器:', result)
+            }
+          }
+          catch (err) {
+            console.error('处理首次定位结果异常:', err)
+          }
+        },
+      })
+    }
+    catch (err) {
+      console.error('首次获取定位信息异常:', err)
+    }
+  }
+})
+
+onUnmounted(() => {
+  // 组件卸载时清除定时器
+  if (intervalId) {
+    clearInterval(intervalId)
+    intervalId = null
+  }
+})
+function exit_login() {
+  showLogoutConfirm.value = true
+}
+
+function confirmLogout() {
+  useUserStore().logout()
+  showLogoutConfirm.value = false
+}
+
+function cancelLogout() {
+  showLogoutConfirm.value = false
+}
+
+function goToAttendance() {
+  router.push('/user/attendance')
+}
+
+function openModifyPassword() {
+  showModifyPassword.value = true
+}
+
+const webMobileConfig = useSettingStore().getSetting()
+</script>
+
+<template>
+  <main class="my_main">
+    <!-- 顶部导航栏 -->
+    <nav class="header_nav">
+      <div class="header_content">
+        <h1 class="main_title">
+          我的
+        </h1>
+        <!--        <div class="setting_section"> -->
+        <!--          <van-icon name="setting-o" class="setting-icon" /> -->
+        <!--        </div> -->
+      </div>
+    </nav>
+
+    <!-- 主要内容区域 -->
+    <div class="content">
+      <!-- 用户信息卡片 -->
+      <div class="user-card">
+        <div class="user-info">
+          <div class="avatar-wrap">
+            <img alt="default-user-profile" class="avatar" src="../../../assets/common/default-user-profile.png">
+            <div class="status-dot" />
+          </div>
+          <div class="user-detail">
+            <h2 class="username">
+              {{ username }}
+              <span
+                v-if="uploadStatusTag"
+                class="upload-status-tag" :class="[uploadStatusTag.color]"
+              >
+                {{ uploadStatusTag.text }}
+              </span>
+            </h2>
+            <p class="user-role">
+              {{ fullnames }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 工作统计 -->
+      <div class="stats-card">
+        <div class="stats-grid">
+          <div class="stat-item">
+            <div class="stat-value">
+              0
+            </div>
+            <div class="stat-label">
+              待办任务
+            </div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-value">
+              0
+            </div>
+            <div class="stat-label">
+              待办流程
+            </div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-value">
+              0
+            </div>
+            <div class="stat-label">
+              新消息
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 功能列表 -->
+      <div class="menu-card">
+        <div class="menu-section">
+          <h3 class="menu-title">
+            系统功能
+          </h3>
+          <div class="menu-list">
+            <div v-if="webMobileConfig?.isAttendance" class="menu-item" @click="goToAttendance">
+              <div class="menu-item-content">
+                <van-icon name="user-o" class="menu-icon" />
+                <span class="menu-text">考勤管理</span>
+              </div>
+              <van-icon name="arrow" class="menu-arrow" />
+            </div>
+            <div class="menu-item" @click="openModifyPassword">
+              <div class="menu-item-content">
+                <van-icon name="lock" class="menu-icon" />
+                <span class="menu-text">修改密码</span>
+              </div>
+              <van-icon name="arrow" class="menu-arrow" />
+            </div>
+            <div class="menu-item" @click="exit_login">
+              <div class="menu-item-content">
+                <van-icon name="sign" class="menu-icon logout-icon" />
+                <span class="menu-text">退出登录</span>
+              </div>
+              <van-icon name="arrow" class="menu-arrow" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 修改密码弹窗 -->
+    <ModifyPassword
+      v-model:visible="showModifyPassword"
+    />
+
+    <!-- 退出登录确认弹窗 -->
+    <van-dialog
+      v-model:show="showLogoutConfirm"
+      title="确认退出"
+      message="确定要退出登录吗？"
+      show-cancel-button
+      confirm-button-text="确认退出"
+      cancel-button-text="取消"
+      @confirm="confirmLogout"
+      @cancel="cancelLogout"
+    />
+  </main>
+</template>
+
+<style scoped lang="less">
+.my_main {
+  min-height: 100vh;
+  background-color: #f7f8fa;
+
+  // 顶部导航栏
+  .header_nav {
+    background-color: #fff;
+    padding: 0 16px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    position: relative;
+    z-index: 50;
+
+    .header_content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 56px;
+
+      .main_title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: #333;
+        margin: 0;
+      }
+
+      .setting_section {
+        padding: 8px;
+        cursor: pointer;
+
+        .setting-icon {
+          font-size: 20px;
+          color: #666;
+        }
+      }
+    }
+  }
+
+  .content {
+    padding: 16px;
+
+    // 用户信息卡片
+    .user-card {
+      background-color: #fff;
+      border-radius: 8px;
+      padding: 16px;
+      margin-bottom: 16px;
+
+      .user-info {
+        display: flex;
+        align-items: center;
+
+        .avatar-wrap {
+          position: relative;
+          margin-right: 16px;
+
+          .avatar {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            object-fit: cover;
+          }
+
+          .status-dot {
+            position: absolute;
+            bottom: 2px;
+            right: 2px;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background-color: #10b981;
+            border: 2px solid #fff;
+          }
+        }
+
+        .user-detail {
+          .username {
+            font-size: 20px;
+            font-weight: 600;
+            color: #333;
+            margin: 0 0 4px 0;
+          }
+          .upload-status-tag {
+            display: inline-block;
+            margin-left: 8px;
+            padding: 2px 8px;
+            border-radius: 8px;
+            font-size: 12px;
+            font-weight: 400;
+            background: #f0f0f0;
+            &.green {
+              color: #10b981;
+              background: #e6f9f0;
+              border: 1px solid #10b981;
+            }
+            &.red {
+              color: #ef4444;
+              background: #fdeaea;
+              border: 1px solid #ef4444;
+            }
+          }
+
+          .user-role {
+            font-size: 14px;
+            color: #666;
+            margin: 0;
+          }
+        }
+      }
+    }
+
+    // 工作统计卡片
+    .stats-card {
+      background-color: #fff;
+      border-radius: 8px;
+      padding: 16px;
+      margin-bottom: 16px;
+
+      .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 16px;
+        text-align: center;
+
+        .stat-item {
+          .stat-value {
+            font-size: 24px;
+            font-weight: 600;
+            color: #3b82f6;
+            margin-bottom: 4px;
+          }
+
+          .stat-label {
+            font-size: 14px;
+            color: #666;
+          }
+        }
+      }
+    }
+
+    // 功能列表卡片
+    .menu-card {
+      background-color: #fff;
+      border-radius: 8px;
+      overflow: hidden;
+
+      .menu-section {
+        padding: 16px;
+
+        .menu-title {
+          font-size: 14px;
+          font-weight: 500;
+          color: #666;
+          margin-bottom: 12px;
+        }
+
+        .menu-list {
+          .menu-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 12px;
+            background-color: #f7f8fa;
+            border-radius: 8px;
+            margin-bottom: 8px;
+            cursor: pointer;
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+
+            .menu-item-content {
+              display: flex;
+              align-items: center;
+              gap: 12px;
+
+              .menu-icon {
+                font-size: 24px;
+                color: #3b82f6;
+
+                &.logout-icon {
+                  color: #ef4444;
+                }
+              }
+
+              .menu-text {
+                font-size: 16px;
+                color: #333;
+              }
+            }
+
+            .menu-arrow {
+              color: #999;
+              font-size: 16px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>