<template>
  <div>
    <div class="footer_box" v-if="showHomeAndroid == false">
      <div class="footer_box_left">
        <div class="footer_box_left_logo">
          <a href="/"><img src="@/assets/Home_IMG/raylinx.logo.png" alt=""/></a>
        </div>
        <div class="footer_box_left_mini">
          <div class="customerCaseList">
            <div class="customerCaseList_title">客户案例</div>
            <div v-for="item in customerCaseList" :key="item.index" class="customerCaseList_title_item">
              <div class="name">
                <a href="">
                  <div>{{ item.name }}</div>
                </a>
              </div>
            </div>
          </div>
          <div class="partnerWebsites">
            <div class="partnerWebsites_title">合作网站</div>
            <div v-for="item in partnerWebsites" :key="item.index" class="partnerWebsites_title_item">
              <div class="name">
                <a href="">
                  <div>{{ item.name }}</div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer_box_main">
        <div class="footer_box_main_title">热门产品</div>
        <div class="footer_box_main_bar"></div>
        <div class="footer_box_main_content">
          <div v-for="item in hotProducts" class="footer_box_main_content_item">
            <div class="title">{{ item.name }}</div>
            <span v-for="i in item.chlider" class="a_name"><a :href="i.url">
                <div>{{ i.name }}</div>
              </a></span>
          </div>
        </div>
      </div>
      <div class="footer_box_right">
        <div class="icon_title">
          <div class="icon">
            <img src="@/assets/Home_IMG/phone.png" alt=""/>
          </div>
          <div class="title">1 (212) 518-8846</div>
        </div>
        <div class="footer_box_right_mini">
          <div v-for="item in aboutList" class="footer_box_right_mini_content">
            <div class="title">{{ item.name }}</div>
            <div v-for="i in item.chlider" class="item"><a :href="i.url" style="color: #333333">{{ i.name }}</a></div>
          </div>
          <div class="footer_box_right_contact">
            <div v-for="item in contactList" class="item">
              <div class="img"><img :src="item.img" alt=""></div>
              <div class="title"><a :href="item.url" target="_blank">
                <div>{{ item.name }}</div>
              </a></div>
            </div>
          </div>
        </div>
      </div>

    </div>


    <div class="footer_box" v-if="showHomeAndroid == true">
      <div class="footer_box_left">
        <div class="footer_box_left_logo">
          <a href="/"><img src="@/assets/Home_IMG/raylinx.logo.png" alt=""/></a>
        </div>
        <div class="footer_box_left_mini">
          <div class="customerCaseList">
            <div class="customerCaseList_title">客户案例</div>
            <div v-for="item in customerCaseList" :key="item.index" class="customerCaseList_title_item">
              <div class="name">
                <a href="">
                  <div>{{ item.name }}</div>
                </a>
              </div>
            </div>
          </div>
          <div class="partnerWebsites">
            <div class="partnerWebsites_title">合作网站</div>
            <div v-for="item in partnerWebsites" :key="item.index" class="partnerWebsites_title_item">
              <div class="name">
                <a href="">
                  <div>{{ item.name }}</div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer_box_main">
        <div class="footer_box_main_title">热门产品</div>
        <div class="footer_box_main_bar" style="width: 95%;"></div>
        <div class="footer_box_main_content">
          <div v-for="item in hotProducts" class="footer_box_main_content_item" style="display: block;">
            <div class="title">{{ item.name }}</div>

            <div>
              <span v-for="i in item.chlider" class="a_name">

                <a :href="i.url">
                  {{ i.name }}
                </a>
              </span>
            </div>

          </div>
        </div>
        <div class="footer_box_main_bar" style="width: 95%;"></div>
      </div>

      <div class="footer_box_right">
        <div class="icon_title">
          <div class="icon">
            <img src="@/assets/Home_IMG/phone.png" alt=""/>
          </div>
          <div class="title">1 (212) 518-8846</div>
        </div>
        <div class="footer_box_right_mini">

          <div class="footer_box_right_contact" style="display: flex;">
            <div v-for="item in contactList" class="item">
              <div class="img"><img :src="item.img" alt=""></div>
              <div class="title"><a href="">
                <div>{{ item.name }}</div>
              </a></div>
            </div>
          </div>


        </div>


      </div>


    </div>
    <div v-for="item in aboutList2" class="footer_box_right_mini_content2">
      <!-- <div class="title">{{ item.name }}</div> -->
      <div v-for="i in item.chlider" class="item">{{ i.name }}|</div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      showHomeAndroid: false,
      screenWidth: null,
      customerCaseList: [
        {index: "1", name: "Netflix", url: "/contact"},
        {index: "2", name: "Coinbase", url: "/contact"},
        {index: "3", name: "NASDAQ", url: "/contact"},
        {index: "4", name: "Ethereume", url: "/contact"},
      ],
      partnerWebsites: [
        {index: "1", name: "AWS官网", url: "/contact"},
        {index: "2", name: "AWS博客", url: "/contact"},
      ],
      hotProducts: [
        {
          index: "1",
          name: "服务器",
          chlider: [
            {index: "1-1", name: "大带宽服务器", url: "/contact"},
            {index: "1-2", name: "轻量云服务器", url: "/contact"},
            {index: "1-3", name: "站群服务器", url: "/contact"},
            {index: "1-4", name: "高防服务器", url: "/contact"},
          ],
        },
        {
          index: "2",
          name: "网络",
          chlider: [
            {index: "2-1", name: "CDN", url: "/contact"},
            {index: "2-2", name: "高防盾(Shield)", url: "/contact"},
            {index: "2-3", name: "跨境数据传输", url: "/contact"},
            {index: "2-4", name: "全球骨干网", url: "/contact"},
          ],
        },
        {
          index: "3",
          name: "区块链",
          chlider: [
            {index: "3-1", name: "区块链搭建", url: "/contact"},
            {index: "3-2", name: "多种数据库服务", url: "/contact"},
          ],
        },
        {
          index: "4",
          name: "存储",
          chlider: [
            {index: "4-1", name: "可拓展对象存储", url: "/contact"},
            {index: "4-2", name: "低成本归档存储", url: "/contact"},
            {index: "4-3", name: "块存储", url: "/contact"},
          ],
        },
        {
          index: "5",
          name: "游戏",
          chlider: [
            {index: "5-1", name: "Aomzon GameLife", url: "/contact"},
            {index: "5-2", name: "Aomzon GameSparks", url: "/contact"},
            {index: "5-3", name: "AWS游戏套件", url: "/contact"},
          ],
        },
        {
          index: "6",
          name: "服务",
          chlider: [
            {index: "6-1", name: "账户开通", url: "/contact"},
            {index: "6-2", name: "账单代付", url: "/contact"},
            {index: "6-3", name: "账号解封", url: "/contact"},
          ],
        },
      ],
      aboutList: [
        {
          index: "1",
          name: "关于我们",
          chlider: [
            {index: "1-1", name: "新闻资讯", url: "/about"},
            {index: "1-2", name: "联系我们", url: "/contact"},
          ],
        },
        {
          index: "2",
          name: "",
          chlider: [
            {index: "2-1", name: "站点地图", url: "/Footer/SiteMap"},
            {index: "2-2", name: "隐私政策", url: "/Footer/PrivacyPolicy"},
          ],
        },
      ],

      aboutList2: [
        {
          index: "1",
          name: "关于我们",
          chlider: [
            {index: "1-1", name: "隐私", url: "/Footer/PrivacyPolicy"},
            {index: "1-2", name: "网站条款", url: "/contact"},
            {index: "1-3", name: "Cookie首选项", url: "/contact"},
            {index: "1-4", name: "2022,Raylinx,lnc,或其脸书公司。保留所有权利", url: "/contact"},

          ],
        },
      ],
      contactList: [
        {
          index: "1",
          name: "Facebook",
          img: require("@/assets/Home_IMG/fb.png"),
          url: "https://www.facebook.com/profile.php?id=61565734855142"
        },
        {index: "2", name: "Telegram", img: require("@/assets/Home_IMG/TG.png"), url: "https://t.me/raylinxjim"},
        {index: "3", name: "whatsApp", img: require("@/assets/Home_IMG/whatsApp1.png"), url: "https://api.whatsapp.com/send/?phone=1332699&text&type=phone_number&app_absent=0"},
      ],
    };
  },
  methods: {
    bodyScale() {
      var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
      if(devicewidth<=1600){
      var scale = devicewidth / 1600; // 分母——设计稿的尺寸
      document.body.style.zoom = scale; //放大缩小相应倍数
      }
    },
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },
  watch: {
    screenWidth: {
      handler: function (val) {
        if (val >= 1100) {
          this.bodyScale();
          this.showHomeAndroid = false;
          // console.log( this.showHomeAndroid);
        } else if (val < 1100) {
          //
          this.showHomeAndroid = true;
          // console.log( this.showHomeAndroid);
        }
        // this.$forceUpdate();
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
@media (max-width: 768px) {

  .footer_box_right_mini_content2 {
    background-color: #e1e1e1;
    display: flex;
    justify-content: center;

    .item {
      font-size: 12px;
      line-height: 35px;
    }
  }
  a {
    text-decoration: none;

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

  .footer_box {
    width: 100%;
    min-height: 300px;
    display: block;
  }

  .footer_box_left_mini {
    width: 100%;
    margin: 0 auto;
    display: flex;
  }

  .customerCaseList {
    padding-left: 5%;

    &_title {
      color: #000;
      font-size: 20px;
      margin-top: 10px;
      font-weight: 600;
      margin-bottom: 20px;

      &_item {
        font-size: 16px;
        margin-top: 10px;

        a {
          color: #383737;
        }

        a:hover {
          color: #898989;
        }
      }
    }
  }

  .partnerWebsites {
    padding-left: 5%;

    &_title {
      color: #000;
      font-size: 20px;
      margin-top: 10px;
      font-weight: 600;
      margin-bottom: 20px;

      &_item {
        font-size: 16px;
        margin-top: 10px;

        a {
          color: #383737;
        }

        a:hover {
          color: #676767;
        }
      }
    }
  }

  .footer_box_left {
    width: 100%;
    // height: 300px;
    background-color: #d2efff;


    &_logo {
      width: 80%;
      margin-left: -20px;
      height: 100px;


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

  .footer_box_main {

    // height: 400px;

    padding-top: 25px;
    padding-left: 5%;
    background-color: #D2EFFF;

    .footer_box_main_content {
      padding-left: 0%;
    }

    &_title {
      font-size: 20px;
      font-weight: 600;
    }

    &_bar {
      width: 100%;
      height: 3px;
      background-color: #0389d1;
    }

    &_content {
      margin-top: 3%;
      padding-left: 5%;

      &_item {
        // margin-bottom: 20px;
        padding-bottom: 20px;
        display: flex;

        .title {
          color: #027AFF;
          width: 100px;
          font-weight: 550;
          font-size: 16px;
          display: inline;


        }

        .a_name {
          text-align: left;
          margin-right: 2%;
          width: 150px;
          font-size: 13px;

          a {
            color: #000;
          }

          a:hover {
            color: #676767;
          }
        }
      }
    }
  }

  .footer_box_right {
    // width: 100%;
    // height: 300px;
    background-color: #d2efff;
    padding-left: 12px;

    .icon_title {
      display: flex;

      .icon {
        width: 70px;
        height: 70px;

        img {
          width: 70px;
          height: 70px;
        }
      }

      .title {
        color: #000000;
        margin-top: 25px;
      }
    }

    .footer_box_right_mini {
      display: flex;
      margin-top: 10px;


    }

    .footer_box_right_contact {
      .item {
        display: flex;
        margin-bottom: 10px;

        .img {
          width: 50px;
          height: 50px;

          img {
            width: 50px;
            height: 50px;
          }
        }

        .title {
          margin-top: 15px;

          a {
            color: #000;
          }

          a:hover {
            color: #676767;
          }
        }
      }


    }


  }

  .footer_box_right_mini_content {

    display: flex;

    .item {
      font-size: 11px;
      line-height: 35px;
    }

    // .title {

    //   display: flex;

    //   color: #000;
    //   font-size: 20px;
    //   font-weight: 600;

    // }


  }
}


@media (min-width: 768px) {
  .footer_box_right_mini_content2 {
    background-color: #e1e1e1;
    display: flex;
    justify-content: center;

    .item {
      font-size: 16px;
      line-height: 35px;
    }
  }
  .footer_box_right_mini_content {
    .item {
      font-size: 16px;
      line-height: 35px;
    }
  }
  a {
    text-decoration: none;

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

  .footer_box {
    width: 100%;
    min-height: 300px;
    display: flex;
  }

  .footer_box_left_mini {
    width: 80%;
    margin: 0 auto;
    display: flex;
  }

  .customerCaseList {
    margin-left: 10%;

    &_title {
      color: #000;
      font-size: 20px;
      margin-top: 10px;
      font-weight: 600;
      margin-bottom: 20px;

      &_item {
        font-size: 16px;
        margin-top: 10px;

        a {
          color: #383737;
        }

        a:hover {
          color: #898989;
        }
      }
    }
  }

  .partnerWebsites {
    margin-left: 10%;

    &_title {
      color: #000;
      font-size: 20px;
      margin-top: 10px;
      font-weight: 600;
      margin-bottom: 20px;

      &_item {
        font-size: 16px;
        margin-top: 10px;

        a {
          color: #383737;
        }

        a:hover {
          color: #676767;
        }
      }
    }
  }

  .footer_box_left {
    width: 25%;
    height: 300px;
    background-color: #d2efff;
    padding: 12px 12px 12px 55px;

    &_logo {
      width: 80%;
      height: 100px;
      margin: 0 auto;

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

  .footer_box_main {
    width: 50%;
    height: 300px;
    padding-top: 25px;
    font-size: 14px;
    background-color: #d2efff;
    &_title {
      font-size: 20px;
      font-weight: 600;
      padding-left: 31px;

    }

    &_bar {
      width: 100%;
      height: 3px;
      background-color: #6bc7f8;
    }

    &_content {
      margin-top: 3%;
      margin-left: 5%;

      &_item {
        margin-bottom: 20px;
        display: flex;

        .title {
          color: #027AFF;
          display: inline;
          margin-right: 5%;
          width: 60px;
        }

        .a_name {
          text-align: left;
          margin-right: 4%;

          a {
            color: #000;
          }

          a:hover {
            color: #676767;
          }
        }
      }
    }
  }

  .footer_box_right {
    width: 30%;
    height: 300px;
    background-color: #d2efff;
    padding: 12px 46px 12px 34px;

    .icon_title {
      display: flex;

      .icon {
        width: 70px;
        height: 70px;

        img {
          width: 70px;
          height: 70px;
        }
      }

      .title {
        color: #000000;
        margin-top: 25px;
      }
    }

    .footer_box_right_mini {
      display: flex;
      margin-top: 10px;

      .footer_box_right_mini_content {
        .title {
          width: 100px;
          height: 40px;
          color: #000;
          font-size: 20px;
          font-weight: 600;
          margin-bottom: 10px;
        }

        .item {
          margin-bottom: 13px;
        }
      }
    }

    .footer_box_right_contact {
      .item {
        display: flex;
        margin-bottom: 10px;

        .img {
          width: 50px;
          height: 50px;

          img {
            width: 50px;
            height: 50px;
          }
        }

        .title {
          margin-top: 15px;

          a {
            color: #000;
          }

          a:hover {
            color: #676767;
          }
        }
      }
    }
  }
}
</style>
