<template>
  <div class="procurement m-auto align-items-center" :class="mobileShow ? 'width-90' : 'd-flex  width-80'"
    v-if="selectIndex == 0">
    <div class="bg-F4F4F4 pa-2 border-box" :class="mobileShow ? 'width-100' : 'width-100'">
      <div class="content-img">
        <div class="fixed-width position-relative">
          <img src="../assets/img/Installationofplasticwindows.jpg" class="procurement-max-width"
            alt="Installation of plasticwindows">
          <img src="../assets/img/ShoppingCartonLaptop.jpg" class="position-absolute second-img" alt="Shopping Cart on Laptop">
          <span class="font-size-20 read-more pa-2 text-center position-absolute"
            :class="mobileShow ? 'read-more-mobile' : 'read-more-pc'">Read more</span>
        </div>
      </div>
      <div class="titledesign">
        <div class="designtitle">
          <div class="juxing"></div>
          <h2><strong>Design</strong></h2>
        </div>
        <p class="font-size-14 line-height-4 ml-3">Solving all problems from design, and work out apractical scheme.They
          ere preoject
          planning,
          archi-tectural design, interior design, product design.These four parts trom a closed loop.
        </p>
      </div>
    </div>
  </div>
  <div class="procurement m-auto align-items-center" :class="mobileShow ? 'width-90' : 'd-flex  width-80'"
    v-else-if="selectIndex == 1">
    <div class="bg-F4F4F4 pa-2 border-box" :class="mobileShow ? 'width-100' : 'width-100'">
      <div class="content-img">
        <div class="fixed-width position-relative">
          <img src="../assets/img/Installationofplasticwindows.jpg" class="procurement-max-width"
            alt="Installation of plasticwindows">
          <img src="../assets/img/ShoppingCartonLaptop.jpg" class="position-absolute second-img" alt="Shopping Cart on Laptop">
          <span class="font-size-20 read-more pa-2 text-center position-absolute"
            :class="mobileShow ? 'read-more-mobile' : 'read-more-pc'">Read more</span>
        </div>
      </div>
      <!-- <p class="mt-2 font-size-18 color-343434">Procurement & Manufacture</p> -->
      <div class="titledesign">
        <div class="designtitle">
          <div class="juxing"></div>
          <h2><strong>Procurement & Manufacture</strong></h2>
        </div>
      </div>
    </div>
  </div>
  <div class="procurement m-auto align-items-center" :class="mobileShow ? 'width-90' : 'd-flex  width-80'"
    v-else-if="selectIndex == 2">
    <div class="bg-F4F4F4 pa-2 border-box" :class="mobileShow ? 'width-100' : 'width-100'">
      <div class="content-img">
        <div class="fixed-width position-relative">
          <img src="../assets/img/Installationofplasticwindows.jpg" class="procurement-max-width"
            alt="Installation of plasticwindows">
          <img src="../assets/img/ShoppingCartonLaptop.jpg" class="position-absolute second-img" alt="Shopping Cart on Laptop">
          <span class="font-size-20 read-more pa-2 text-center position-absolute"
            :class="mobileShow ? 'read-more-mobile' : 'read-more-pc'">Read more</span>
        </div>
      </div>
      <div class="titledesign">
        <div class="designtitle">
          <div class="juxing"></div>
          <h2><strong>Logistic and warehouseing</strong></h2>
        </div>
      </div>
    </div>
  </div>
  <div class="procurement m-auto align-items-center" :class="mobileShow ? 'width-90' : 'd-flex  width-80'"
    v-else-if="selectIndex == 3">
    <div class="bg-F4F4F4 pa-2 border-box" :class="mobileShow ? 'width-100' : 'width-100'">
      <div class="content-img">
        <div class="fixed-width position-relative">
          <img src="../assets/img/Installationofplasticwindows.jpg" class="procurement-max-width"
            alt="Installation of plasticwindows">
          <img src="../assets/img/ShoppingCartonLaptop.jpg" class="position-absolute second-img" alt="Shopping Cart on Laptop">
          <span class="font-size-20 read-more pa-2 text-center position-absolute"
            :class="mobileShow ? 'read-more-mobile' : 'read-more-pc'">Read more</span>
        </div>
      </div>
      <div class="titledesign">
        <div class="designtitle">
          <div class="juxing"></div>
          <h2><strong>Installation</strong></h2>
        </div>
      </div>
    </div>
  </div>
  <div class="procurement m-auto align-items-center" :class="mobileShow ? 'width-90' : 'd-flex  width-80'"
    v-else-if="selectIndex == 4">
    <div class="bg-F4F4F4 pa-2 border-box" :class="mobileShow ? 'width-100' : 'width-100'">
      <div class="content-img">
        <div class="fixed-width position-relative">
          <img src="../assets/img/Installationofplasticwindows.jpg" class="procurement-max-width"
            alt="Procurement & Manufacture">
          <img src="../assets/img/ShoppingCartonLaptop.jpg" class="position-absolute second-img" alt="Shopping Cart on Laptop">
          <span class="font-size-20 read-more pa-2 text-center position-absolute"
            :class="mobileShow ? 'read-more-mobile' : 'read-more-pc'">Read more</span>
        </div>
      </div>
      <div class="titledesign">
        <div class="designtitle">
          <div class="juxing"></div>
          <h2><strong>quality control</strong></h2>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import { onMounted, ref } from "vue";
import router from "../router";

let screenWidth = ref<any>('')
let mobileShow = ref<any>(false)
let selectIndex = ref<any>('')
selectIndex.value = router.currentRoute.value.query.index


onMounted(async () => {
  screenWidth.value = document.body.offsetWidth;
  if (screenWidth.value < 1000) {
    mobileShow.value = true
  } else {
    mobileShow.value = false
  }
  window.addEventListener('resize', function () {
    screenWidth.value = document.body.offsetWidth;
    if (screenWidth.value < 1000) {
      mobileShow.value = true
    } else {
      mobileShow.value = false
    }
  })
})
</script>

<style scoped>
.procurement{
  margin: 3vw auto 2vw;
}
.fixed-width {
  width: 50%;
  height: 20vw;
}

.procurement-max-width {
  width: 100%;
  height: 100%;
}


.second-img {
  top: 50%;
  right: -70%;
  transform: translateX(-50%) translateY(-50%);
  background: #fff;
  width: 50%;
  height: 16vw;
}

.read-more {
  background: rgba(255, 192, 0);
  color: #fff;
  width: 60px;
  display: inline-block;
  top: 85%;
  left: 95%;
  transform: translateX(-50%) translateY(-50%);
  cursor: pointer;
  box-shadow: 0 4px 10px #333;
}


.read-more-pc {
  right: -22%;
}

.read-more-mobile1 {
  right: -10%;
  top: 100%;
}

.read-more-pc1 {
  top: 100%;
  right: -3%;
}

.read-more-mobile {
  right: -50%;
  font-size: 14px;
  width: 30px;
}

.text-align-justify {
  /* text-align: justify; */
  /* text-indent: 20px; */
}


@media (max-width: 1000px) {
  .procurement {
    margin-top: 15vw;
  }

  .fixed-width {
    width: 50vw;
    height: 40vw;
  }

  .second-img {
    height: 25vw;
  }

  .font-size-14 {
    /* display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden; */
    font-size: 12px;
    line-clamp: 4;
  }
}

.titledesign {
  width: 100%;
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .designtitle {
    .juxing {
      width: 30%;
      height: 1vw;
      background-color: rgba(0, 0, 0, 0.5);
      margin-bottom: 0.5rem;
    }
  }

}</style>