<?php /*a:1:{s:72:"/www/wwwroot/103.108.66.222_1111/app/frontend/view/index/bbb/gongju.html";i:1735026909;}*/ ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <?php echo head(); ?>
    <link rel="stylesheet" href="/template/bbb/assets/css/index.css">

    <!--<script src="assets/js/index.js"></script>-->
</head>

<style>
/* 设置页面布局 */
#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 让页面至少与视口高度一致 */
}

.accounts-scroll {
    flex-grow: 1; /* 让 accounts-scroll 占据剩余空间 */
    overflow-y: auto; /* 如果内容过多，可以滚动 */
    padding-bottom: 60px; /* 增加底部内边距，避免被 footer 遮挡 */
}

/* 通用样式 */
.main-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px; /* 调整后的 padding，使卡片高度降低 */
    margin: 15px 0; /* 可以稍微减少 margin */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-content {
    display: flex;
    align-items: center;
}

.card-logo {
    width: 100%; /* 设置图标大小 */
    height: 100%; 
    margin-right: 15px;
}

.card-info {
    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: center;*/
}

.card-title {
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
}

.card-desc {
    font-size: 14px;
    color: #FFFFFF;
}

.right-arrow {
    width: 24px;
    height: 24px;
}

/* 优惠活动的固定背景颜色 */
.card-bac2 {
    background-color: #1b47c3; /* 优惠活动背景色 */
}

/* 确保 footer 始终在页面底部 */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000; /* 确保 footer 始终在最顶层 */
    background-color: #ffffff; /* 根据需要调整背景色 */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

</style>

<body>
  <div id="app" data-v-app="">
    <div id="app">
      <div class="header">
        <div class="header_left"></div>
        <h1 class="header_title">工具</h1>
        <div class="header_right"></div>
      </div>

      <!-- 填满可用空间的 accounts-scroll -->
      <div class="accounts-scroll">
          <?php foreach($tools as $k => $v): ?>
        <a href="<?php echo htmlentities($v['url']); ?>" class="">
          <div class="main-card card-bac2">
            <div class="card-content">
              <img class="card-logo" src="<?php echo htmlentities($v['icon']); ?>" alt="<?php echo htmlentities($v['title']); ?>">
              <div class="card-info">
                <p class="card-title"><?php echo htmlentities($v['title']); ?></p>
                <p class="card-desc"><?php echo $v['description']; ?></p>
              </div>
           
            </div>
            <img src="/template/bbb/assets/img/left-1.aa340e53.svg" alt="&gt;" class="right-arrow">
          </div>
          
        </a>
        <?php endforeach; ?>

       
              </div>

      <!-- Footer 放置在这里，确保在页面底部 -->
          <div class="bottom-navigation" data-v-1129fe84="">
        <a href="lianxi.html" class="nav-item " data-v-1129fe84="">
            <div class="icon icon-contact" data-v-1129fe84=""></div><span data-v-1129fe84="">客服</span>
        </a>
        <a href="index.html" class="nav-item " data-v-1129fe84="">
            <div class="icon icon-home" data-v-1129fe84=""></div><span data-v-1129fe84="">首页</span>
        </a>
        <a href="youxi.html" class="nav-item " data-v-1129fe84="">
            <div class="icon icon-game" data-v-1129fe84=""></div><span data-v-1129fe84="">游戏</span>
        </a>
        <a href="" class="nav-item router-link-active router-link-exact-active" data-v-1129fe84="">
            <div class="icon icon-more" data-v-1129fe84=""></div><span data-v-1129fe84="">工具</span>
        </a>
    </div>
        </div>
  </div>
</body>
</html>