<template>
  <div class="fore-word-view">
    <Transition name="fade-out">
      <div
        v-show="isShowForeword && !hasShownForword"
        class="foreword"
      >
        <article
          v-show="props.number == 1"
          class="article2"
        >
          <p>浙江省盲人学校</p>
          <p>参与学生：陶意凝、杨彬烨、何家琳、宋佳、卢冠延、高海楠、陈晓慧、杨林 </p>
          <p>指导老师：唐柳萌</p>
          <br>
          <p>杭州市临平区汀洲学校</p>
          <p>参与学生：余振宇、吴煜婷、朱煜赫、倪思妤、王海涛、沈成轩、贺蜜妍、徐泽涵、王渝州、宋佳妮、沈佳豪、时航、吴俊磊、朱敏君、洪天宇、徐润、陈璟烨、闻杰、江钰、徐玲玲、朱芯怡、吴双源</p>
          <p>指导老师：曹燕潇、陈星晔、姚俊如、徐欢</p>
          <br>
          <p>杭州学军小学教育集团紫金港小学</p>
          <p>参与学生：六年级全体学生 </p>
          <p>指导教师：林杨能</p>
          <br>
          <p>杭州市三墩小学</p>
          <p>参与学生：黄幕然、封沁、田书颜、沈奕州、宋钰淇、姜星辰、邓慧、门泽睿、任博凯、李武暄、周毅、Mohamed、沈尹萱、金艾可、夏文锐、彭沈欣、江雯、蒋曼钰、胡昊予、靳雨果、张宸逸、尹奕然</p>
          <p>指导教师：韩绍坡</p>
          <br>
          <p>杭州市余杭区良渚第一小学</p>
          <p>参与学生：艾青辰、陶然、黄奕辰、沈沁玥、孙安奇、黄嘉倩、欧阳书瑾、王可欣、葛安琪、牟涵雨、唐依燃、周芸一、凌紫馨、王思禹、邓诗莟、陈楚妍、王可心、周星、金吴伊杭、章羽涵、费泽菁、周馨格、仰宇晨、吴依然、马浩宇、楼诗雅、周安卓、仲芮佟、许恬语、万乔希</p>
          <p>指导老师：陈玲娟、陈婷婷、钟于文、李婷婷、李杰、赵思茵、康宁、章璐、白倩倩</p>
          <br>
          <p>杭州市余杭区东塘中心小学</p>
          <p>参与学生：马笑笑、马心怡、魏溯、胡诗杨、沈依晨、周憬怡、沈婉璐、姚欣彤、吴可欣、姚乐欣、施若雪、郑钰笑、卿敏月、尤优、郑施源、范诗涵、周施雅、陈兴怡</p>
          <p>指导老师：朱国强、徐佳美、叶胜丽、朱青</p>
          <br>
          <p>杭州市余杭区良渚杭行路小学</p>
          <p>参与学生: 周晗玥、茹阅、朱书宸、李筠昕、邱董煜、倪赫、沈雨馨、王欣妍</p>
          <p>指导老师：倪小影、周泽妮、余娇、孙文源</p>
        </article>
        <article v-show="props.number == 2">
          <p>世界文化遗产与童心相遇，会呈现出哪般模样？</p>
          <p>符号，纹饰，陶器，玉器......这些博物馆和遗址中的文化明珠，恰似古老文明赠予孩童们的灵感之礼。良渚文化，经他们之手，褪去历史的沉重外衣，开始轻盈的青春舞动，向我们展示了无尽的生命力和成长力。</p>
          <p>蓝染、版画、陶艺、国画、水彩.......一百七十余件艺术作品，传递出包括残障儿童在内的孩子们对于古老文明的独特观察。让我们踏入2023“良渚童huà”儿童艺术展，在亚运会的盛大舞台之上，看孩童们用良渚文化为世界喝彩！</p>
        </article>
        <button
          class="skip"
          @click="closeFu"
        >
          返回首页
        </button>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue"
import { hasShownForword } from "@/store/index.js"

const props = defineProps({
  // 1.特别鸣谢  2.策展人说
  number: {
    type: Number,
    default: 1
  }
})

const emit = defineEmits(['close'])
const closeFu = ()=> {
  emit('close')
}

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt(724, 375)

const isShowForeword = ref(true)



</script>

<style lang="less" scoped>
.fore-word-view{
  height: 100%;
  padding-top: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  padding-bottom: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-image: url(@/assets/images/foreword-bg.jpg);
  >.foreword{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-image: url(@/assets/images/foreword-bg-new.png);
    background-size:  100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
    >article{
      width: 98%;
      height: 100%;
      box-sizing: border-box;
      padding-top: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      padding-right: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      padding-bottom: calc(97 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      padding-left: calc(38 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      overflow: auto;
      &::-webkit-scrollbar { height: 0; };
      display: flex;
      flex-direction: column;
      justify-content: center;
      // align-items: center;
      >p{
        margin-bottom: 1.5em;
        font-size: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Serif CN-Bold, Source Han Serif CN;
        font-weight: bold;
        color: #484238;
        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
    }
    >.article2{
      height: 60%;
      padding-top: 0;
      padding-bottom: 0;
      color: #646B5D;
      font-family: 'Source Han Serif CN-Bold';
      &::-webkit-scrollbar { width: 3px; height: 0; };
      &::-webkit-scrollbar-thumb {
        width: 3px;
        background: #89A86F;
      }
      >p{
        margin-bottom: .4em;
      }
    }
    >button{
      position: absolute;
      right: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      width: calc(95 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-family: Source Han Serif CN-Bold, Source Han Serif CN;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 19px;
      background-color: rgba(239, 196, 27, 1);
      border-radius: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      border: solid calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) #fff;
      box-shadow: 0 calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) rgba(0, 0, 0, 0.3);
    }
  }
}
</style>