feat：新增景区页面

2024-12-17 18:18:07 +08:00
parent 5e5ce522db
commit 1108aafed4
22 changed files with 1061 additions and 126 deletions
--- a/src/components/Header/index.vue
+++ b/src/components/Header/index.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="header">
+    <div v-if="isBack" class="back">返回</div>
+    <ul class="nav-left">
+      <li
+        class="nav-left-item"
+        :style="{
+          backgroundImage: `url(${current == index && !isSkip ? title2Select : title2})`
+        }"
+        v-for="(item, index) in navLeft"
+        :key="index"
+        @click="handleNav(item, index)"
+      >
+        {{ item.name }}
+      </li>
+    </ul>
+    <div class="title">
+      <span>{{ name }}</span>
+    </div>
+    <ul class="nav-right">
+      <li class="nav-right-item" v-for="(item, index) in navRight" :key="index">
+        {{ item.name }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+  import { useRouter } from 'vue-router'
+  import title2 from '@/assets/images/title-2.png'
+  import title2Select from '@/assets/images/title-2-select.png'
+
+  let props = defineProps({
+    title: {
+      type: String,
+      default: ''
+    },
+    navLeft: {
+      type: Array,
+      default: () => []
+    },
+    navRight: {
+      type: Array,
+      default: () => []
+    },
+    current: {
+      type: Number,
+      default: 0
+    },
+    isSkip: {
+      type: Boolean,
+      default: false
+    },
+    isBack: {
+      type: Boolean,
+      default: false
+    }
+  })
+  const emit = defineEmits(['change'])
+  const router = useRouter()
+
+  const name = computed(() => {
+    if (!props.isSkip && props.navLeft.length > 0) {
+      return props.navLeft[props.current].name
+    }
+    return props.title
+  })
+
+  const handleNav = (item, index) => {
+    if (props.isSkip) {
+      router.push(item.path)
+    } else {
+      emit('on-change', index)
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .header {
+    position: absolute;
+    left: vw(326);
+    .back {
+      position: absolute;
+      left: vw(60);
+      top: vh(40);
+      width: vw(120);
+      height: vh(30);
+      font-weight: 600;
+      font-size: vw(20);
+      color: #ffffff;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: vw(60);
+      border: 1px solid rgba(0, 114, 220, 0.3);
+      background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
+    }
+    .title {
+      width: vw(3133);
+      height: vh(120);
+      line-height: vh(90);
+      text-align: center;
+      letter-spacing: vw(10);
+      box-sizing: border-box;
+      background-image: url('@/assets/images/title.png');
+      background-size: 100% 100%;
+      & > span {
+        font-size: vw(48);
+        font-weight: 800;
+        color: transparent;
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
+      }
+    }
+    .nav-left {
+      position: absolute;
+      right: vw(2100);
+      top: vh(34);
+      display: flex;
+      &-item {
+        cursor: pointer;
+        margin-left: vh(-16);
+        width: vw(210);
+        height: vh(56);
+        line-height: vh(46);
+        font-weight: 600;
+        font-size: vw(28);
+        text-align: center;
+        color: rgba(208, 236, 255, 0.9);
+        background-size: 100% 100%;
+      }
+    }
+    .nav-right {
+      position: absolute;
+      left: vw(2110);
+      top: vh(34);
+      display: flex;
+      &-item {
+        cursor: pointer;
+        margin-right: vh(-16);
+        width: vw(210);
+        height: vh(56);
+        line-height: vh(46);
+        font-weight: 600;
+        font-size: vw(28);
+        text-align: center;
+        color: rgba(208, 236, 255, 0.9);
+        background-image: url('@/assets/images/title-3.png');
+        background-size: 100% 100%;
+      }
+    }
+  }
+</style>