Chengfei_LiTiKu
/
eam-offline-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
							<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>功能菜单</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <link rel="stylesheet" href="../../js/vant@2.12/index.css" />

    <!-- 预加载共享资源 -->
    <link rel="preload" href="../../js/vant@2.12/vue.js" as="script" />
    <link rel="preload" href="../../js/vant@2.12/vant.js" as="script" />
    <link rel="preload" href="../../js/jquery-2.2.0.min.js" as="script" />
    <link rel="preload" href="../../js/promise.min.js" as="script" />
    <link rel="preload" href="../../js/common.js" as="script" />
    <link rel="preload" href="../../js/IndexDbFactory.js" as="script" />
    <link rel="preload" href="../../js/RfidMiddlewareApi.js" as="script" />

    <script src="../../js/vant@2.12/vue.js"></script>
    <script src="../../js/vant@2.12/vant.js"></script>

    <style>
      /* 防止Vue模板闪烁 */
      [v-cloak] {
        display: none !important;
      }

      /* 页面加载动画 */
      .page-loading {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
      }

      body {
        /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
        margin: 0;
        padding: 0;
      }

      .main-container {
        min-height: calc(100vh -22px);
        padding: 20px 16px;
      }

      .welcome-section {
        text-align: center;
        padding: 40px 0 30px;
        color: white;
      }

      .welcome-title {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 8px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }

      .welcome-subtitle {
        font-size: 14px;
        opacity: 0.9;
      }

      .menu-grid {
        display: grid;
        gap: 16px;
        margin-top: 20px;
      }

      .menu-item {
        background: white;
        border-radius: 16px;
        padding: 24px 20px;
        display: flex;
        align-items: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .menu-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          135deg,
          transparent 0%,
          rgba(102, 126, 234, 0.05) 100%
        );
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .menu-item:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .menu-item:active::before {
        opacity: 1;
      }

      .menu-icon-wrapper {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
      }

      .menu-item.sync .menu-icon-wrapper {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
      }

      .menu-item.inventory .menu-icon-wrapper {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        box-shadow: 0 4px 12px rgba(245, 87, 108, 0.3);
      }

      .menu-icon {
        font-size: 28px;
        color: white;
      }

      .menu-content {
        flex: 1;
        position: relative;
        z-index: 1;
      }

      .menu-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 6px;
      }

      .menu-desc {
        font-size: 13px;
        color: #999;
        line-height: 1.4;
      }

      .menu-arrow {
        color: #ddd;
        font-size: 20px;
        margin-left: 12px;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
      }

      .footer-info {
        text-align: center;
        padding: 30px 0 20px;
        color: white;
        opacity: 0.8;
        font-size: 12px;
      }

      /* 动画效果 */
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .menu-item {
        animation: fadeInUp 0.5s ease;
      }

      .menu-item:nth-child(1) {
        animation-delay: 0.1s;
      }

      .menu-item:nth-child(2) {
        animation-delay: 0.2s;
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <!-- 顶部导航栏 -->
      <van-nav-bar title="资产盘点" @click-left="goBack" :fixed="true">
      </van-nav-bar>

      <!-- 主内容区域 -->
      <div class="main-container" style="margin-top: 22px">
        <!-- 欢迎区域 -->
        <!-- <div class="welcome-section">
          <div class="welcome-title">资产管理系统</div>
          <div class="welcome-subtitle">Asset Management System</div>
        </div> -->

        <!-- 菜单网格 -->
        <div class="menu-grid">
          <!-- 数据同步 -->
          <div class="menu-item sync" @click="goToSync">
            <div class="menu-icon-wrapper">
              <van-icon name="replay" class="menu-icon" />
            </div>
            <div class="menu-content">
              <div class="menu-title">数据同步</div>
              <div class="menu-desc">上传盘点数据，下载基础资料</div>
            </div>
            <van-icon name="arrow" class="menu-arrow" />
          </div>

          <!-- 离线盘点 -->
          <div class="menu-item inventory" @click="goToInventory">
            <div class="menu-icon-wrapper">
              <van-icon name="records" class="menu-icon" />
            </div>
            <div class="menu-content">
              <div class="menu-title">离线盘点</div>
              <div class="menu-desc">选择盘点单，开始资产盘点</div>
            </div>
            <van-icon name="arrow" class="menu-arrow" />
          </div>
        </div>

        <!-- 底部信息 -->
        <!-- <div class="footer-info">
          <div>EAM离线应用 v1.0.0</div>
        </div> -->
      </div>
    </div>

    <script type="text/javascript" src="../../js/UrlApi.js"></script>
    <script
      src="../../js/jquery-2.2.0.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script
      src="../../js/promise.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script
      src="../../js/common.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script src="./Menu.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>