YangZhouDaYunHeDaDu/src/components/MobileCameraContent/PanelView.vue

<template>
  <div class="mobile-panel">
    <button
      class="return"
      @click="emits('close')"
    />

    <div
      class="mobile-panel__title"
      :style="{
        backgroundImage: `url(${require(`@/assets/images/mobile/bg_${theme}_01.jpg`)})`
      }"
    >
      <h1 :class="{small: title.length >= 9}">
        {{ title }}
      </h1>
    </div>
    <div
      class="mobile-panel__main"
      :class="{
        hasTab: tabbar.length
      }"
      :style="{
        backgroundImage: `url(${require(`@/assets/images/mobile/bg_${theme}_02.jpg`)})`
      }"
    >
      <div
        v-if="tabbar.length"
        class="tabbar"
      >
        <template
          v-for="(item, idx) in tabbar"
          :key="idx"
        >
          <span
            :class="{
              active: activeTabIdx === idx
            }"
            @click="activeTabIdx = idx"
          >
            {{ item }}
          </span>
        </template>
      </div>

      <slot />
    </div>
    <img
      class="mobile-panel__bd"
      :src="require(`@/assets/images/mobile/bg_${theme}_03.jpg`)"
    >
  </div>
</template>

<script setup>
import { computed } from 'vue'

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt(1920, 970)

const props = defineProps({
  theme: {
    type: Number,
    default: 1
  },
  tabbar: {
    type: Array,
    default: () => [],
    required: false
  },
  curTab: {
    type: Number,
    default: 0,
    required: true
  },
  title: {
    type: String,
    required: true
  }
})
const emits = defineEmits(['update:curTab', 'close'])

const activeTabIdx = computed({
  set(val) {
    emits('update:curTab', val)
  },
  get() {
    return props.curTab
  }
})
</script>

<style lang="less" scoped>
  .mobile-panel {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;

    .return{
      position: absolute;
      margin-left: constant(safe-area-inset-left);
      margin-left: env(safe-area-inset-left);
      width: 100px;
      height: 100px;
      right: 42px;
      bottom: 30px;
      background-image: url(@/assets/images/btn-return.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      z-index: 1;
    }
    &__title {
      flex-shrink: 0;
      position: relative;
      width: calc(475 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: 100%;
      background: url("@/assets/images/mobile/bg_1_01.jpg") no-repeat center / cover;

      h1 {
        position: absolute;
        left: calc(50% + 12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        top: calc(50% + 80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-size: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: "SourceHanSerifCN-SemiBold";
        color: #FBF7DC;
        writing-mode: vertical-lr;
        letter-spacing: 0.3em;
        transform: translate(-50%, -50%);
        white-space: nowrap;
        z-index: 1;

        &.small {
          font-size: calc(54 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
      }
    }
    &__main {
      position: relative;
      flex: 1;
      background: url("@/assets/images/mobile/bg_1_02.jpg") no-repeat center / cover;

      &.hasTab {
        padding-top: 70px;
      }
      .tabbar {
        position: absolute;
        display: flex;
        align-items: center;
        left: 0;
        top: 0;

        span{
          position: relative;
          padding: 0 20px;
          line-height: 70px;
          color: #FFF3C3;
          background: #AC997F;
          font-size: 32px;
          letter-spacing: 8px;
          font-family: "SourceHanSerifCN-SemiBold";
          box-shadow: 3px 4px 9px 0px rgba(0,0,0,0.25);
          cursor: pointer;

          &:not(:last-child)::after {
            content: '';
            top: 50%;
            right: -0.5px;
            position: absolute;
            width: 1px;
            height: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            background-color: #FFF3C3;
            transform: translateY(-50%);
          }
        }
        .active{
          color: #43310E;
          background: linear-gradient(322deg, #C69D49 0%, #F8E6A9 68%);
        }
      }
    }
    &__bd {
      flex-shrink: 0;
      height: 100%;
    }
  }
</style>