sl-sfy-safety/src/views/page-config/PageConfig.vue

<template>
  <div class="page-config-content">
    <main class="main__config">
      <div class="card--default" @click="toSceneLayout(ViewType.companyHomepage_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="toSceneLayout(ViewType.companyHomepage_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 { ViewType } from '@/types/page-config/type';
  const titleDefault = '主页布局';
  const describeDefault = '编辑的主页布局、 \n位置标签等在\n';
  const toSceneLayout = (type: ViewType.companyHomepage_PC | ViewType.companyHomepage_phone) => {
    router.push(`/layout/scene-list?viewType=${type}`);
  };
</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-between;
    width: 100%;
    height: auto;

    .card--default {
      display: flex;
      width: 490px;
      height: 300px;
      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>