<template>
  <div>
    <div class="banner">
      <div class="banner_title">
        锐联云管家 <span> Services we offer </span>
      </div>
      <div class="blue_bar"></div>
      <div class="banner_item">
        <div v-for="item in banner_item_List" :key="item.index" class="item"
             :style="showHomeAndroid == true && item.index === '2' ? 'margin-left: 39%;' : ''">
          <div class="item_title">{{ item.title }}</div>
          <div v-for="i in item.childer" class="item_container">
            <div class="icon"><img :src="i.icon" alt=""/></div>
            <div class="desc">{{ i.desc }}</div>
            <div class="desc">{{ i.desc2 }}</div>
            <div class="desc">{{ i.desc3 }}</div>
            <div class="desc">{{ i.desc4 }}</div>
            <div v-if="i.index === '2-1'" class="play_icon_box">
              <div v-for="play in i.childer" class="play_icon">
                <img :src="play.icon" alt=""/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="activationProcess">
      <div class="activationProcess_title">开通流程</div>
      <div class="blue_bar"></div>
      <div class="infoBanner">
        我们欢迎您来交流技术或业务问题，即使不立即购买AWS产品，您也可也享受我们的服务
      </div>
      <div class="activationProcess_content">
        <div v-for="i in activationProcess_content_List" class="item">
          <div class="index">{{ i.index }}</div>
          <div class="icon"><img :src="i.icon" alt=""/></div>
          <div class="title">{{ i.title }}</div>
          <div class="title_english">{{ i.title_english }}</div>
        </div>
      </div>
      <div class="activationProcess_btn">
        <a href="/contact"
        >
          <div style="height: 100%; width: 100%">点击此处联系我们</div>
        </a
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: 'AWS 服务',
      meta: [
        {hid: 'description', name: 'description', content: '这是默认的描述内容'},
        {hid: 'keywords', name: 'keywords', content: 'vue, nuxt, seo'}
      ]
    }
  },
  data() {
    return {
      showHomeAndroid: false,
      screenWidth: null,
      activationProcess_content_List: [
        {
          index: "01",
          icon: require("@/assets/Home_IMG/activationProcess-01.png"),
          title: "选定服务",
          title_english: "Select Service",
        },
        {
          index: "02",
          icon: require("@/assets/Home_IMG/activationProcess-02.png"),
          title: "联系销售",
          title_english: "Contact Sales",
        },
        {
          index: "03",
          icon: require("@/assets/Home_IMG/activationProcess-03.png"),
          title: "沟通业务",
          title_english: "Communication business",
        },
        {
          index: "04",
          icon: require("@/assets/Home_IMG/activationProcess-04.png"),
          title: "开通账户",
          title_english: "Open an account",
        },
      ],
      banner_item_List: [
        {
          index: "1",
          title: "AWS账户开通",
          childer: [
            {
              index: "1-1",
              icon: require("@/assets/AwsServices/server1.png"),
              desc: "免实名免备案",
              desc2: "一秒开户",
              desc3: "技术支持",
              desc4: "代充代付",
            },
          ],
        },
        {
          index: "2",
          title: "AWS账户代付",
          childer: [
            {
              index: "2-1",
              icon: require("@/assets/AwsServices/server2.png"),
              desc: "全渠道支付",
              desc2: "秒付账单",
              childer: [
                {index: "2-1-1", icon: require("@/assets/cases/pay1.png")},
                {index: "2-1-2", icon: require("@/assets/cases/pay2.png")},
                {index: "2-1-3", icon: require("@/assets/cases/pay3.png")},
                {
                  index: "2-1-4",
                  icon: require("@/assets/cases/pay4.png"),
                },
                {index: "2-1-5", icon: require("@/assets/cases/pay5.png")},
              ],
            },
          ],
        },
        {
          index: "3",
          title: "AWS账号解封",
          childer: [
            {
              index: "2-1",
              icon: require("@/assets/AwsServices/server3.png"),
              desc: "技术专线联系",
              desc2: "秒解秒付账单",
            },
          ],
        },
      ],
    };
  },
  methods: {
    bodyScale() {
      var devicewidth = document.documentElement.clientWidth; // 获取当前分辨率下的可视区域宽度
      if(devicewidth <= 1600) {
        var scale = devicewidth / 1600; // 分母——设计稿的尺寸
        requestAnimationFrame(() => {
          document.body.style.zoom = scale; // 放大缩小相应倍数
        });
      }
    },
  },

  mounted() {
    this.screenWidth = document.body.clientWidth; // 在客户端设置
    window.onresize = () => {
      setTimeout(() => {
        this.screenWidth = document.body.clientWidth;
      }, 0);  // 使用0延时将任务放入事件循环的尾部
    };
  },

  watch: {
    screenWidth: {
      handler: function (val) {
        setTimeout(() => { // 使用setTimeout异步处理
          if (val >= 800) {
            this.bodyScale();
            this.showHomeAndroid = false;
            // console.log(this.showHomeAndroid);
          } else if (val < 800) {
            // this.bodyScale();
            this.showHomeAndroid = true;
            // console.log(this.showHomeAndroid);
          }
          // this.$forceUpdate();
        }, 0);
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
@media screen and (max-width: 800px) {
  .banner {
    width: 100%;
    min-height: 600px;
    background: url("@/assets/Home_IMG/home_banner2.png") no-repeat;
    background-size: 500% 100%;
    padding-top: 20%;

    &_title {
      font-size: 20px;
      line-height: 1.5;
      width: 50%;
      margin-left: 20px;
      color: rgb(0, 157, 255);
      font-weight: bold;

      span {
        color: #000000;
        display: block;
        font-weight: lighter;
      }
    }

    .blue_bar {
      background: rgb(0, 157, 255);
      width: 20%;
      height: 3px;
      margin-left: 20px;
      margin-top: 10px;
    }

    &_item {
      width: 100%;
      margin: 3% auto;
      padding-bottom: 20px;

      .item {
        width: 60%;
        height: 100px;
        background-color: rgb(0, 157, 255);
        margin: 3% 5% 55% 2%;
        position: relative;
      }

      .item_title {
        text-align: center;
        line-height: 2.5;
        color: #fff;
        font-size: 20px;
      }

      .item_container {
        position: absolute;
        width: 90%;
        height: 250px;
        box-shadow: 0px -2px 10px rgba(0, 213, 255, 0.726);
        background-color: #fff;
        left: 15px;
        border-bottom: 20px solid rgb(0, 157, 255);

        .icon {
          width: 100px;
          height: 100px;
          margin: 0 auto;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .desc {
          text-align: center;
          margin-top: 2%;
        }

        .play_icon_box {
          display: flex;
          margin-top: 10%;
          justify-content: center;
          .play_icon {
            width: 40px;
            height: 40px;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .activationProcess {
    margin-top: 4%;
    padding-bottom: 4%;

    &_title {
      text-align: center;
      font-size: 34px;
      line-height: 1.5;
      width: 100%;
    }

    .activationProcess_content {
      display: flex;
      flex-wrap: wrap; /* 让元素可以换行 */
      margin-top: 20px;
      padding: 3%;
    }

    .item {
      width: 50%; /* 每个项目的固定宽度 */
      margin: 20px 0; /* 每个项目的外边距 */
      text-align: center; /* 使文字和图标居中 */
      border-right: 2px solid #007bff; /* 右边加分割线 */
      padding: 20px 10px;
      box-sizing: border-box; /* 确保 padding 不影响宽度 */
    }


    .item:nth-child(1) {
      border-left: 2px solid #007bff; /* 去掉最后一个元素的右边框 */
    }

    .item:nth-child(3) {
      border-left: 2px solid #007bff; /* 去掉最后一个元素的右边框 */
    }

    .index {
      font-size: 24px;
      font-weight: bold;
      width: 50px;
      height: 50px;
      line-height: 50px;
      background: #007bff; /* 蓝色编号 */
      margin-bottom: 10px; /* 编号和图标之间的间距 */
      color: #ffffff;
    }

    .icon img {
      width: 80px; /* 控制图标大小 */
      height: 80px;
      margin-bottom: 10px; /* 图标和标题之间的间距 */
    }

    .title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 5px; /* 中文标题和英文标题的间距 */
    }

    .title_english {
      font-size: 14px;
      color: #007bff; /* 蓝色英文标题 */
    }

    .blue_bar{
      width: 90%; /* 设置下划线的宽度 */
      height: 2px; /* 设置下划线的高度 */
      background-color: #1685f8; /* 蓝色下划线 */
      margin: 0 auto 10px auto; /* 居中对齐 */
    }
    &_btn {
      background: url("@/assets/Home_IMG/activationProcess_btn.png") no-repeat;
      background-size: 100% 100%;
      width: 270px;
      height: 40px;
      line-height: 40px;
      font-size: 20px;
      color: #fff;
      margin: 0 auto;

      a {
        color: #fff;
        text-align: center;
        text-decoration: none;
      }
    }

    .infoBanner {
      font-size: 14px; /* 调整描述的字体大小 */
      line-height: 1.5; /* 调整行高 */
      color: #666; /* 调整文字颜色 */
      max-width: 90%; /* 可选：限制文字宽度 */
      margin: 0 auto; /* 使描述文字居中 */
      text-align: center;
    }
  }
}

@media screen and (min-width: 800px) {
  .banner {
    width: 100%;
    min-height: 420px;
    //background: url("@/assets/Home_IMG/home_banner2.png");
    padding-top: 7%;

    &_title {
      font-size: 30px;
      line-height: 2;
      margin: 0 auto;
      width: 50%;

      span {
        color: rgb(0, 157, 255);
      }
    }

    .blue_bar {
      background: rgb(0, 157, 255);
      width: 50%;
      height: 3px;
      margin: 0 auto 2% auto;
    }

    &_item {
      width: 70%;
      margin: 0 auto;
      display: flex;

      .item {
        width: 27%;
        height: 200px;
        background-color: rgb(0, 157, 255);
        margin: 0 5% 0 2%;
        position: relative;
      }

      .item_title {
        text-align: center;
        line-height: 2.5;
        color: #fff;
        font-size: 20px;
      }

      .item_container {
        position: absolute;
        width: 90%;
        height: 230px;
        box-shadow: 0px -2px 10px rgba(0, 213, 255, 0.726);
        background-color: #fff;
        left: 15px;
        border-bottom: 20px solid rgb(0, 157, 255);

        .icon {
          width: 100px;
          height: 100px;
          margin: 0 auto;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .desc {
          text-align: center;
          margin-top: 2%;
        }

        .play_icon_box {
          display: flex;
          margin-top: 10%;
          justify-content: center;
          .play_icon {
            width: 40px;
            height: 40px;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .activationProcess {
    margin-top: 4%;
    padding-bottom: 4%;

    &_title {
      text-align: center;
      font-size: 34px;
      line-height: 1.5;
    }

    &_content {
      width: 70%;
      margin: 2% auto 0 auto;
      display: flex;
      border-left: 1px solid #0059ff;

      .item {
        width: 20%;
        min-height: 260px;
        padding: 0 24px;
        border-right: 1px solid #0059ff;

        .index {
          width: 60px;
          height: 60px;
          line-height: 60px;
          background-color: #027aff;
          color: #fff;
          font-size: 40px;
          text-align: center;
        }

        .icon {
          margin-left: 30%;
          margin-top: 10px;
          img{
            width: 100px;
            height: 100px;
          }
        }

        .title {
          font-size: 20px;
        }

        .title_english {
          color: #1685f8;
          font-size: 18px;
          margin-top: 10px;
        }
      }
    }

    &_btn {
      background: url("@/assets/Home_IMG/activationProcess_btn.png") no-repeat;
      background-size: 100% 100%;
      width: 270px;
      height: 40px;
      line-height: 40px;
      font-size: 20px;
      color: #fff;
      margin: 30px auto;

      a {
        color: #fff;
        text-align: center;
        text-decoration: none;
      }
    }

    .infoBanner {
      background: url("@/assets/Home_IMG/activationProcess_banner.png") no-repeat;
      background-size: 100% 100%;
      color: #fff;
      width: 60%;
      text-align: center;
      line-height: 45px;
      margin: 0.5% auto;
      height: 45px;
    }
  }
}

</style>
