GateWay/src/views/home/home.vue

<template>
  <div class="page-container">
    <Header :title="currentTitle"></Header>
    <van-pull-refresh v-model="loading" @refresh="onRefresh" success-text="刷新成功">
      <div class="content">
        <van-notice-bar class="notice" scrollable text="下滑刷新页面" color="black" />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>信安智能</van-swipe-item>
          <!-- <van-swipe-item>2</van-swipe-item> -->
          <!-- <van-swipe-item>3</van-swipe-item> -->
        </van-swipe>
        <div class="item-content">
          <van-cell-group inset>
            <van-cell size="large" class="custom-cell" title="显示设置" icon="photo-o" is-link value="显示" @click="navigateTo('web/screen_main.html')" />
            <van-cell size="large" class="custom-cell" title="声卡设置" icon="volume-o" is-link value="语音" @click="goto('voiceset')" />
            <van-cell size="large" class="custom-cell" title="车牌识别" icon="search" is-link value="识别" @click="goto('recognition')" />
            <van-cell size="large" class="custom-cell" title="预警设置" icon="warning-o" is-link value="预警" @click="goto('warning')" />
            <van-cell size="large" class="custom-cell" title="远程喊话" icon="bullhorn-o" is-link value="喊话" @click="navigateTo('web/voice_copy.html')" />
            <van-cell size="large" class="custom-cell" title="小车控制" icon="car" is-link value="控制" @click="goto('AudioPlay')" />
          </van-cell-group>
        </div>
      </div>
    </van-pull-refresh>
    <Footer></Footer>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import Header from "../../components/Header.vue";
import Footer from "../../components/Footer.vue";
export default {
  components: {
    Header,
    Footer
  },
  setup() {
    const currentTitle = ref('系统设置');
    const loading = ref(false);
    const router = useRouter();

    // 模拟刷新过程的函数
    const onRefresh = () => {
      setTimeout(() => {
        loading.value = false;
      }, 1000);
    };

    // 导航到不同页面的函数
    const navigateTo = (path) => {
      window.location.href = path;
    };

    // 使用 router 进行路由跳转
    const goto = (name) => {
      router.push({ name });
    };



    onMounted(() => {
    });

    return {
      currentTitle,
      loading,
      onRefresh,
      navigateTo,
      goto,
    };
  }
};
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  border-radius: 20px !important;
  margin-top: 80px;
  margin-bottom: 40px;
  min-height: 100vh;
}

.item-content {
  margin-top: 20px;
  
}

van-pull-refresh {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  border-radius: 10px;
  margin-bottom: 10px;
}

.notice {
  margin-bottom: 10px;
  background-color: #fff;
}

/* Custom styles for van-cell */
.custom-cell .van-cell__title,
.custom-cell .van-cell__label,
.custom-cell .van-cell__value,
.custom-cell .van-icon {
  font-size: 20px; /* Adjust the font size as needed */
}

.custom-cell .van-cell__title {
  font-weight: bold;
}

.custom-cell .van-cell__value {
  color: #666; /* Customize the value text color if needed */
}

</style>