personnel_management_mobile/pages/home/chooseMachine.vue

<template>
  <view class="choose-wrap">
    <!-- 顶部标题栏 -->
    <view class="top-header">
      <text class="header-title">环江毛南族自治县政务服务中心</text>
    </view>

    <!-- 主体内容区 -->
    <view class="main-content">
      <text class="main-title">请选择设备类型</text>
      <text class="main-subtitle">请根据当前设备用途选择对应的使用模式</text>

      <!-- 三个选项卡片 -->
      <view class="card-group">
        <!-- 取号机 -->
        <view class="card" @click="goToPage('/pages/home/home', '取号机')">
          <view class="card-icon-box ticket-bg">
            <text class="card-icon-text">取</text>
          </view>
          <text class="card-title">取号机</text>
          <text class="card-desc">自助排队取号</text>
        </view>

        <!-- 叫号机 -->
        <view class="card" @click="goToPage('/pages/callTicket/chooseWindow', '叫号机')">
          <view class="card-icon-box call-bg">
            <text class="card-icon-text call-text">叫</text>
          </view>
          <text class="card-title">叫号机</text>
          <text class="card-desc">窗口叫号管理</text>
        </view>

        <!-- 公告屏 -->
        <view class="card" @click="goToPage('/pages/screen/screen', '公告屏')">
          <view class="card-icon-box screen-bg">
            <text class="card-icon-text screen-text">屏</text>
          </view>
          <text class="card-title">公告屏</text>
          <text class="card-desc">大屏信息展示</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ChooseMachine',
  methods: {
    goToPage(url, name) {
      uni.showModal({
        title: '确认选择',
        content: `确定进入【${name}】模式吗？选择后需重新登录才能切换。`,
        success: res => {
          if (res.confirm) {
            uni.redirectTo({
              url: url,
              fail() {
                uni.switchTab({
                  url: url
                })
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
* {
  box-sizing: border-box;
}

/* 全屏自适应容器 - flex弹性布局 */
.choose-wrap {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* background: linear-gradient(180deg, #5f88ff 0%, #e8edfa 45%, #f5f7fc 100%); */
}

/* ========== 顶部标题栏 ========== */
.top-header {
  width: 100%;
  height: 16vh;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(19, 114, 255, 0.95);
}

.header-title {
  font-size: clamp(32px, 5vw, 64px);
  color: #ffffff;
  font-weight: bold;
  letter-spacing: 0.4vw;
  white-space: nowrap;
}

/* ========== 主体内容区 ========== */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 4vw 4vh;
}

.main-title {
  font-size: clamp(36px, 6vw, 72px);
  font-weight: bold;
  color: #1a1a2e;
  margin-bottom: 1.5vh;
  letter-spacing: 0.3vw;
}

.main-subtitle {
  font-size: clamp(22px, 3vw, 36px);
  color: rgba(26, 26, 46, 0.55);
  margin-bottom: 7vh;
  letter-spacing: 0.1vw;
}

/* ========== 卡片组 ========== */
.card-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(30px, 5vw, 80px);
  width: 100%;
}

.card {
  width: clamp(260px, 22vw, 400px);
  min-width: 200px;
  background: #ffffff;
  border-radius: 32px;
  padding: clamp(40px, 6vh, 80px) clamp(30px, 4vw, 50px) clamp(35px, 5vh, 70px);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0.8vw 4vw rgba(95, 136, 255, 0.15);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.card:active {
  transform: scale(0.95);
  box-shadow: 0 0.4vw 2vw rgba(95, 136, 255, 0.3);
}

/* 图标圆形 */
.card-icon-box {
  width: clamp(100px, 12vw, 180px);
  height: clamp(100px, 12vw, 180px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(24px, 4vh, 48px);
}

.ticket-bg {
  background: linear-gradient(135deg, #e8f0ff, #c5d8ff);
}

.call-bg {
  background: linear-gradient(135deg, #e0f5e8, #b0e0c0);
}

.screen-bg {
  background: linear-gradient(135deg, #fff3e8, #ffe0c0);
}

/* 图标文字 */
.card-icon-text {
  font-size: clamp(40px, 5vw, 80px);
  font-weight: bold;
  color: #5f88ff;
}

.call-text {
  color: #2e9e5f;
}

.screen-text {
  color: #e89840;
}

/* 卡片文字 */
.card-title {
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: bold;
  color: #1a1a2e;
  margin-bottom: 1.5vh;
}

.card-desc {
  font-size: clamp(18px, 2.2vw, 30px);
  color: #999999;
  letter-spacing: 0.1vw;
}
</style>