sl-sfy-safety/src/views/page-config/component/BasicLayoutEntry.vue

<template>
  <div class="page-config-content">
    <main class="main__config">
      <div class="card--default" @click="toLayout('PC')">
        <section class="card__left">
          <img :src="PCIcon" />
        </section>
        <section class="card__right">
          <span class="span__card--title"> PC端{{ titleDefault }} </span>
          <span class="span__card--describe"> {{ describeDefault }} PC端生效 </span>
        </section>
      </div>
      <div class="card--default" @click="toLayout('Phone')">
        <section class="card__left">
          <img :src="PhoneIcon" />
        </section>
        <section class="card__right">
          <span class="span__card--title"> 手机端{{ titleDefault }} </span>
          <span class="span__card--describe"> {{ describeDefault }} 手机端生效 </span>
        </section>
      </div>
    </main>
  </div>
</template>
<script lang="ts" setup>
import PCIcon from '@/assets/images/page-config/config-pc.png';
import PhoneIcon from '@/assets/images/page-config/config-phone.png';
import router from '@/router';
import { LayoutConfigType, ViewType } from '@/types/page-config/type';
import { ref, onMounted } from 'vue';
const props = defineProps<{
  layoutType: LayoutConfigType.scene | LayoutConfigType.camera
}>()
const titleDefault = ref('');
const describeDefault = ref('');
const generateContentDefault = (layoutType: LayoutConfigType.scene | LayoutConfigType.camera) => {
  switch (layoutType) {
    case LayoutConfigType.scene:
      titleDefault.value = '主页布局';
      describeDefault.value = '编辑的主页布局、 \n标签位置等在\n'
      break;
    case LayoutConfigType.camera:
      titleDefault.value = '车间布局';
      describeDefault.value = '编辑的车间布局、 \n摄像头位置等在\n'
      break;
  }
}
const toLayout = (type: 'PC' | 'Phone') => {
  let viewType;
  if (props.layoutType === LayoutConfigType.scene) {
    viewType = type === 'PC' ? ViewType.companyHomepage_PC : ViewType.companyHomepage_phone
    router.push(`/layout/scene-list?viewType=${viewType}`);
    return;
  }
  viewType = type === 'PC' ? ViewType.minimap_PC : ViewType.minimap_phone
  router.push(`/layout/camera-list?viewType=${viewType}`);
};
onMounted(() => {
  generateContentDefault(props.layoutType);
})
</script>

<style lang="scss" scoped>
.page-config-content {
  width: 100%;
  height: calc(100vh - 64px - 12px);
  padding: 47px 84px 0 84px;
  background: #ffffff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12);
  border-radius: 6px;
}

.main__config {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  height: auto;

  .card--default {
    display: flex;
    width: 506px;
    height: 315px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('@/assets/images/page-config/card-bg-default.png');
    transition: background-image 0.3s ease-in-out;
    cursor: pointer;

    &:hover {
      background-image: url('@/assets/images/page-config/card-bg-hover.png');
    }
  }

  .card__left {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: inherit;
  }

  .card__right {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    flex: 1;

    .span__card--title {
      font-weight: 600;
      font-size: 28px;
      color: #1777ff;
    }

    .span__card--describe {
      font-weight: 400;
      font-size: 24px;
      line-height: 33px;
      color: #909399;
      white-space: pre-line;
    }
  }
}
</style>