<template>
  <!-- 系统首页 介绍页 -->
  <div class="doorPage">
    <!-- 头部 -->
    <div class="doorHead">
      <img src="@/assets/images/login/login1.png" alt="logo" class="logo" />
      <div class="part">
        <p @click="gotoLogin" :class="ifExpand ? 'green' : ''">登录</p>
        <span>{{ dateTime }}</span>
      </div>
    </div>
    <!-- 内容区 -->
    <div class="doorCont">
      <!-- 典型项目工程 -->
      <div class="doorCarou">
        <div class="caroCont">
          <h1>汴京路（公园路-工农路）排水管网及道路海绵化改造项目</h1>
          <h3>项目简要介绍：</h3>
          <p>-总长2000m,增加海绵设施。</p>
          <p>
            -排水管网雨污分流制。新建DN800污水管道2000米,DN1000雨水管216米,BxH=1800x1200钢筋混凝土雨水渠道790米,BxH=2600x1400钢筋混凝土雨水渠道330米,
            BxH=3000x1600钢筋混凝土雨水渠道350米,BxH=3000x1800钢筋混凝土雨水渠道330米。
          </p>
          <p>
            -海绵系统化改造项目。主要包括客水引入工程、湿地改造提升工程、水质净化工程、雨水井修复工程、园林景观提升工程及宣教馆海绵系统化改造工程。
          </p>
        </div>
        <el-carousel class="carousel">
          <el-carousel-item>
            <img src="@/assets/images/login/show1.png" alt="底图" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="@/assets/images/login/show2.png" alt="底图" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="@/assets/images/login/show3.png" alt="底图" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="@/assets/images/login/show4.png" alt="底图" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 底部 -->
    <div class="doorFooter">
      <div class="footCon">
        <img src="@/assets/images/transition/bzIcon.png" alt="国徽" class="bzImg" />
        <div class="part">
          <p>技术支持：开封市门户网站管理中心</p>
          <p>主办：开封市海绵建设服务中心</p>
          <p>地址：开封市海绵建设服务中心</p>
          <p>投稿信箱：xgszjjbgs@163.com</p>
          <p>联系电话：0712-2314358</p>
        </div>
        <div class="part">
          <img src="https://www.pgyer.com/app/qrcode/bp0qZc" alt="安卓APP扫码" />
          <p>安卓APP下载</p>
        </div>
        <div class="part">
          <img src="https://www.pgyer.com/app/qrcode/bp0qZc" alt="微信公众号关注" />
          <p>微信公众号关注</p>
        </div>
      </div>
    </div>
    <!-- 登录框 -->
    <div :class="['loginPages animate__animated', ifExpand ? 'animate__bounceInRight' : 'animate__bounceOutRight']" v-if="showLogin">
      <LoginPage v-if="showLogin"></LoginPage>
    </div>
  </div>
</template>

<script setup name="系统首页">
import LoginPage from './login.vue';

const { proxy } = getCurrentInstance();
const week = ref(['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']);
const dateTime = ref(proxy.moment(new Date()).format('YYYY年MM月DD日 ') + week.value[new Date().getDay()]);
const ifExpand = ref(false);
const showLogin = ref(false);

// 登录
function gotoLogin() {
  showLogin.value = true;
  ifExpand.value = !ifExpand.value;
}

onMounted(() => {});
</script>
<style lang="scss">
.doorPage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .loginPages {
    position: absolute;
    top: 15%;
    right: 3%;
    z-index: 100;
  }
  .doorHead {
    width: 100%;
    height: 65px;
    background: #004770;
    align-items: center;
    display: flex;
    justify-content: space-between;
    color: #99b5c6;
    font-size: 18px;
    padding: 0px 50px;
    .logo {
      width: 393px;
      height: 44px;
    }

    .part {
      width: 260px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      p {
        cursor: pointer;
      }
    }
  }
  .doorCont {
    width: 100%;
    height: calc(100vh - 225px);
    position: relative;
    .newsPage {
      width: 100%;
      height: calc(100vh - 225px);
      background: url('@/assets/images/login/newsBg.png') no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
      .contentNews {
        width: 900px;
        height: 96%;
        margin-top: 1%;
        margin-left: calc((100vw - 900px) / 2);
        background: rgba(0, 77, 121, 0.6);
        padding: 10px 30px;
        overflow: auto;

        .part {
          display: flex;
          margin-top: 20px;
          width: 100%;
          padding: 10px 50px;
          cursor: pointer;
          &:hover {
            background: #006daa;
          }
          img {
            width: 150px;
            height: 100px;
            margin-right: 15px;
          }
          .content {
            font-size: 14px;
            width: 735px;
            .title {
              margin: 20px 0px;
              color: #2f8cb4;
            }
            h2 {
              color: #fff;
              font-size: 20px;
            }
            .date {
              float: right;
              color: #99b5c6;
            }
          }
        }
      }
    }
    .videoPage {
      #videos,
      .carouselV,
      .el-carousel__container {
        width: 100%;
        height: calc(100vh - 225px);
      }
    }

    .doorCarou {
      height: calc(100vh - 225px);
      width: 100%;
      background: url('@/assets/images/transition/doorBg.png') no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
      display: flex;
      padding: 150px;

      .carousel {
        width: 400px;
        height: 300px;
        margin-left: 50px;
        .el-carousel__container {
          border: 5px solid #fff;
        }
        .el-carousel-item,
        .el-carousel__container {
          width: 400px;
          height: 300px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .caroCont {
        flex: 1;
        color: #003756;
        font-size: 20px;
        h3 {
          margin: 10px auto;
        }
        p {
          margin-bottom: 8px;
        }
      }
    }
  }
  .doorFooter {
    width: 100%;
    height: 160px;
    background: #004770;
    display: flex;
    justify-content: center;
    .footCon {
      width: 60%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      color: #fff;
      font-family: PingFang SC;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      .bzImg {
        width: 78px;
        height: 84px;
      }
      .part {
        img {
          width: 90px;
          height: 90px;
          border-radius: 10px;
        }
        p {
          text-align: center;
          margin-top: 6px;
        }
      }
    }
  }
}
</style>