WuxiCharityMuseum/src/views/about/InstitutionView.vue

<template>
  <div
    class="institution-view"
  >
    <div class="page-1">
      <ElCarousel
        class="page-1-carousel"
        height="100%"
        direction="vertical"
        arrow="never"
        :interval="4000"
      >
        <ElCarouselItem
          v-for="url of bannerBgs"
          :key="url"
        >
          <ElImage
            :src="url"
            fit="cover"
            style="width: 100%"
          />
        </ElCarouselItem>
      </ElCarousel>
      <div class="text-wrap">
        <img
          class="title"
          src="@/assets/images/about/title_museum.png"
          alt=""
          draggable="false"
        >
        <div class="desc-wrap">
          <div class="deco-bar" />
          <div class="desc">
            <p
              v-for="(paragraph, idx) in museumDesc.split('\n')"
              :key="idx"
            >
              {{ paragraph }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="page-2">
      <TableTitle
        text-cn="领导成员"
        text-en="MEMBER"
      />
      <div class="splitter" />
      <ul
        class="table"
      >
        <li
          v-for="(item, idx) in memberList"
          :key="idx"
        >
          <div class="line">
            <span class="key">{{ item.name }}</span>
            <span
              class="value"
              :title="item.desc"
            >{{ item.desc }}</span>
          </div>
          <div class="line-splitter" />
        </li>
      </ul>
    </div> -->
    <div class="page-3">
      <TableTitle
        text-cn="管理信息"
        text-en="Management Information"
      />
      <div class="wrapper">
        <menu class="tab-bar">
          <button
            class="tab-item"
            :class="{
              active: p3ActiveTabIdx === 0
            }"
            @click="p3ActiveTabIdx = 0"
          >
            机构
          </button>
          <div class="splitter" />
          <button
            class="tab-item"
            :class="{
              active: p3ActiveTabIdx === 1
            }"
            @click="p3ActiveTabIdx = 1"
          >
            章程
          </button>
          <div class="splitter" />
          <!-- <button
            class="tab-item"
            :class="{
              active: p3ActiveTabIdx === 2
            }"
            @click="p3ActiveTabIdx = 2"
          >
            规划
          </button>
          <div class="splitter" />
          <button
            class="tab-item"
            :class="{
              active: p3ActiveTabIdx === 3
            }"
            @click="p3ActiveTabIdx = 3"
          >
            年报
          </button>
          <div class="splitter" />
          <button
            class="tab-item"
            :class="{
              active: p3ActiveTabIdx === 4
            }"
            @click="p3ActiveTabIdx = 4"
          >
            计划
          </button> -->
        </menu>
        <div class="detail-area">
          <div
            class="inner-wrap"
            v-html="managementInfo[p3ActiveTabIdx]"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import bg1 from '@/assets/images/institution/1-min.jpg'
import bg2 from '@/assets/images/institution/2-min.jpg'
import bg3 from '@/assets/images/institution/3-min.jpg'
import bg4 from '@/assets/images/institution/4-min.jpg'
import { ElImage } from "element-plus"

const route = useRoute()
const router = useRouter()
const store = useStore()

const $env = inject('$env')

const bannerBgs = [
  bg1, bg2, bg3, bg4
]
const museumDesc = staticConfig.museumDesc
const memberList = staticConfig.memberList
const managementInfo = [
  staticConfig.managementInfo.institution,
  staticConfig.managementInfo.constitution,
  staticConfig.managementInfo.schedule,
  staticConfig.managementInfo.annualReport,
  staticConfig.managementInfo.planning,
]

const p3ActiveTabIdx = ref(0)
</script>

<style lang="less" scoped>
.institution-view{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  :deep(.el-carousel__indicators) {
    display: flex;
    flex-direction: column;
  }
  .page-1{
    position: relative;
    height: 100%;
    &-carousel {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }
    >.text-wrap{
      position: absolute;
      top: 0;
      left: calc(644 / 1920 * 100vw);
      width: 984px;
      height: 100%;
      background: rgba(255,255,255,0.85);
      transform: translate(-50%, 0);
      >img.title{
        position: absolute;
        top: 123px;
        right: 69px;
        width: 77px;
      }
      >.desc-wrap{
        position: absolute;
        top: 291px;
        left: 111px;
        width: 639px;
        height: 100px;
        >.deco-bar{
          width: 88px;
          height: 5px;
          background: #D7C78E;
          margin-bottom: 51px;
        }
        >.desc{
          white-space: pre-line;
          text-indent: 2em;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #474747;
          line-height: 29px;
        }
      }
    }
  }
  >.page-2{
    background-color: #fff;
    height: 100%;
    padding: 108px 243px;
    >.splitter{
      height: 1px;
      background: #589498;
    }
    >ul.table{
      height: 580px;
      overflow: auto;
      padding-right: 15px;
      >li{
        width: 100%;
        >.line{
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 88px;
          >span.key{
            margin-left: 80px;
            width: 250px;
            display: inline-block;
            flex: 0 0 auto;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 24px;
            color: #474747;
          }
          >span.value{
            width: 750px;
            display: inline-block;
            flex: 0 0 auto;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 24px;
            color: #474747;
            overflow: hidden;
            white-space: pre;
            text-overflow: ellipsis;
          }
        }
        >.line-splitter{
          height: 1px;
          border: 1px dashed rgba(88,148,152,0.5);
        }
      }
      >li:last-of-type{
        >.line-splitter{
          display: none;
        }
      }
    }
  }
  >.page-3{
    height: 100%;
    background-color: green;
    padding: 108px 243px;
    background-image: url(@/assets/images/about/institu-p3-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    >.wrapper{
      margin-top: 79px;
      width: 100%;
      display: flex;
      >menu.tab-bar{
        flex: 0 0 auto;
        margin-left: calc(30 / 1920 * 100vw);
        >button.tab-item{
          width: 200px;
          height: 100px;
          font-family: Source Han Serif CN, Source Han Serif CN;
          font-weight: bold;
          font-size: 24px;
          color: #589498;
        }
        >button.tab-item.active{
          color: #AAA282;
          background-image: url(@/assets/images/about/institu-p3-button-active-deco.png);
          background-size: 60%;
          background-repeat: no-repeat;
          background-position: center center;
        }
        > button.tab-item:hover{
          color: #AAA282;
        }
        >.splitter{
          flex: 0 0 auto;
          height: 1Px;
          background: linear-gradient(90deg, rgba(88,148,152,0) 0%, rgba(88,148,152,0.2) 35%, rgba(88,148,152,0.2) 65%, rgba(88,148,152,0) 100%);
        }
      }
      >.detail-area{
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 520px;
        >.inner-wrap{
          margin-left: calc(100 / 1920 * 100vw);
          width: 900px;
          max-height: 100%;
          overflow: auto;
          padding-right: 0.5em;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #474747;
          line-height: 22px;
          white-space: pre-line;
          ::v-deep{
            >b{
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
</style>