QiuShou-kiosk/src/views/home.vue

<template>
  <div class="main">
    <div class="left">
      <!-- post -->
      <n-carousel
        dot-placement="bottom"
        style="width: 100%; height: 100%"
        autoplay
        draggable
      >
        <img
          class="carousel-img"
          style="width: 100%; height: 100%; object-fit: cover"
          src="/img/show_banner.png"
        />
        <img
          class="carousel-img"
          style="width: 100%; height: 100%; object-fit: cover"
          src="/img/show_banner.png"
        />
        <img
          class="carousel-img"
          style="width: 100%; height: 100%; object-fit: cover"
          src="/img/show_banner.png"
        />
        <img
          class="carousel-img"
          style="width: 100%; height: 100%; object-fit: cover"
          src="/img/show_banner.png"
        />
      </n-carousel>
    </div>
    <div class="right">
      <div class="home_logo">
        <img src="/img/logo.png" />
      </div>
      <n-space class="navigate" justify="flex-start" align="center">
        <n-button class="btn btn_1" @click="push('/info')" text>
          场馆资讯</n-button
        >
        <n-button class="btn btn_2" @click="push('/exhibition')" text>
          展厅导览</n-button
        >
        <n-button class="btn btn_3" @click="push('/collect')" text>
          馆藏精品
        </n-button>
        <n-button class="btn btn_4" @click="push('/survey')" text>
          问卷调查</n-button
        >
        <n-button class="btn btn_5" @click="push('/feedback')" text>
          留言反馈</n-button
        >
      </n-space>
    </div>
  </div>
</template>

<script setup>
import { useFullscreen } from "@vueuse/core";
import { useRoute, useRouter } from "vue-router";

const { push } = useRouter();

const { isFullscreen, enter, exit, toggle } = useFullscreen();
// console.log("isFullscreen", isFullscreen);
</script>
<style>
.main {
  --main-home-left-background: #e2caa3;
  --main-home-right-background: #910000;
  --main-right-border: 10px;
  --main-right-bg-img: url("img/h_banner_bg.png");
  --main-right-bg-btn1: url("/img/guide_1.png");
  --main-right-bg-btn2: url("/img/guide_2.png");
  --main-right-bg-btn3: url("/img/guide_3.png");
  --main-right-bg-btn4: url("/img/guide_4.png");
  --main-right-bg-btn5: url("/img/guide_5.png");

  --main-navigate-btn-width: 11.3125rem;
  --main-navigate-btn-height: 6.3125rem;
}
</style>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.left {
  flex: 1 1 70%;
  background-color: var(--main-home-left-background);
}
.right {
  flex: 0 0 416px;
  width: 416px;
  // background-color: var(--main-home-right-background);
  border-top: var(--main-right-border) solid var(--main-home-right-background);
  border-bottom: var(--main-right-border) solid
    var(--main-home-right-background);
  background-image: var(--main-right-bg-img);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom right;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;

  .home_logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      display: block;
      margin-top: 46px;
      height: 4.5rem;
    }
  }
  .navigate {
    margin-top: 30px;
    width: calc(var(--main-navigate-btn-width) * 2 + 16px);
  }
  :deep(.btn) {
    color: transparent;
    width: var(--main-navigate-btn-width);
    height: var(--main-navigate-btn-height);
    background-size: contain;
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
    &:hover {
      border: none;
    }
    &.btn_1 {
      background-image: var(--main-right-bg-btn1);
    }
    &.btn_2 {
      background-image: var(--main-right-bg-btn2);
    }
    &.btn_3 {
      background-image: var(--main-right-bg-btn3);
    }
    &.btn_4 {
      background-image: var(--main-right-bg-btn4);
    }
    &.btn_5 {
      background-image: var(--main-right-bg-btn5);
    }
  }
}
:deep(.n-carousel .n-carousel__dots.n-carousel__dots--dot .n-carousel__dot) {
  width: 3.25rem;
  border-radius: 10px;
  --n-dot-color: #c5c5c5;
  --n-dot-color-active: var(--main-primary-color);
}
</style>