<template>
  <div>
    <announcement />
    <el-row :gutter="20" class="main-view">
      <el-col :span="16">
        <el-carousel height="150px" style="margin-bottom: 15px;">
          <el-carousel-item v-for="item in 4" :key="item">
            <h3 class="small" />
          </el-carousel-item>
        </el-carousel>
        <div class="main-desc">
          <el-skeleton :rows="14" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="user-info">
          <el-skeleton>
            <template #template>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-skeleton-item
                    variant="image"
                    style="width: 80px; height: 80px; border-radius: 2px"
                  />
                </el-col>
                <el-col :span="16">
                  <div style="padding: 14px;">
                    <el-skeleton-item variant="h3" style="width: 50%;" />
                    <el-skeleton-item variant="p" style="margin-top: 5px" />
                    <el-skeleton-item variant="p" style="margin-top: 5px" />
                  </div>
                </el-col>
                <el-col :span="12">
                  <el-skeleton-item variant="p" style="height: 120px" />
                </el-col>
                <el-col :span="12">
                  <el-skeleton-item variant="p" style="height: 120px" />
                </el-col>
              </el-row>
            </template>
          </el-skeleton>
        </div>
        <div class="use-banners">
          <el-skeleton v-for="item in 2" :key="item" style="margin: 15px">
            <template #template>
              <el-row :gutter="10">
                <el-col :span="2">
                  <el-skeleton-item variant="h3" />
                </el-col>
                <el-col :span="4">
                  <el-skeleton-item variant="h3" />
                </el-col>
                <el-col :span="18" style="height: 30px" />
                <el-col v-for="index in 6" :key="index" :span="8">
                  <el-skeleton-item variant="p" style="height: 60px; margin-top: 5px" />
                </el-col>
              </el-row>
            </template>
          </el-skeleton>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue-demi'
import Announcement from './components/announce.vue'

export default defineComponent({
  name: 'HomeIndex',
  components: {
    Announcement
  }
})
</script>

<style lang="scss">
.main-view {
  padding-top: 10px;

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .main-desc,
  .user-info,
  .use-banners {
    background: #d3dce6;
    border-radius: 4px;
    padding: 10px 15px;
  }
  .user-info {
    margin-bottom: 10px;
    height: 250px;
  }
}
</style>
