<script setup lang="ts">
defineOptions({
  name: "DashboardExample",
  inheritAttrs: false,
});
import { watch } from "vue";
import { useUserStore } from "@/store/modules/user";
const userStore = useUserStore();
watch(
  () => userStore.schoolId,
  (newValue, oldValue) => {
    console.log(newValue, oldValue);
  }
);
</script>

<template>
  <div class="example-container">
    <div class="example">
      <div class="title">
        <img src="../../assets/example/huiwen.png" alt="慧文幼儿园" />
        <span>示例学校：深圳市福田区惠文幼儿园</span>
      </div>
      <div class="content">
        <p>样本描述：样本数量，课时，课上教师规模。</p>
        <p>
          教学场景和特色：文字描述该校教学方式，课时，服务时长，课上教师规模，训练方法，训练效果等。
        </p>
      </div>
      <img src="../../assets/example/example.jpg" alt="慧文幼儿园案例" />
    </div>
    <div class="example">
      <div class="title">
        <img src="../../assets/example/shisha.png" alt="石厦幼儿园" />
        <span>示例学校：深圳市福田区石厦幼儿园</span>
      </div>
      <div class="content">
        <p>样本描述：样本数量，课时，课上教师规模。</p>
        <p>
          教学场景和特色：文字描述该校教学方式，课时，服务时长，课上教师规模，训练方法，训练效果等。
        </p>
      </div>
      <img src="../../assets/example/example.jpg" alt="石厦幼儿园案例" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.example-container {
  padding: 20px 30px;
  .example {
    margin-bottom: 30px;
    width: 100%;
    .title {
      height: 70px;
      line-height: 70px;
      font-size: 20px;
      white-space: nowrap;
      img {
        display: inline-block;
        margin-right: 40px;
      }
      span {
        display: inline-block;
        vertical-align: top;
      }
    }
    .content {
      margin: 24px 0;
      p {
        margin: 0;
        font-size: 16px;
      }
      img {
        display: block;
        width: 100%;
      }
    }
  }
}
</style>
