web/pages/about/order.vue

<template>
  <div class="page" id="page">
    <div class="top">
      <img src="@/assets/images/about/img1.png" alt="" />
      <div>
        <div class="top_title">About Us</div>
        <div class="top_location">
          <span class="iconfont icon-weizhi"></span>
          Current Location ： Home <span class="iconfont icon-dkw_guanbi-"></span> About
          Us <span class="iconfont icon-dkw_guanbi-"></span>
          <span>How to Order</span>
        </div>
      </div>
    </div>

    <div class="order-container">
      <p class="container-title">How to Order</p>

      <div class="list-box">
        <div class="container-item" v-for="(item, index) in orderContainer" :key="index">
          <img class="item-img" :src="item.img" alt="" />
          <p class="item-title">{{ item.title }}</p>
          <p class="item-text" v-for="val in item.text">{{ val }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from "#imports";
import { ref, onMounted } from "vue";
import { NIcon, NBreadcrumb, NBreadcrumbItem, NModal } from "naive-ui";
import { MdHome, MdCart } from "@vicons/ionicons4";
import { useUserStore } from "@/store/user";
const { t } = useI18n();
const demandShow = ref(false); // 需求
const pcShow = ref<boolean>(true);
const userStore = useUserStore();
const lang = userStore.getLang;

function handleContact() {
  demandShow.value = true;
}

// 关闭diag
function handleCloseDiag() {
  demandShow.value = false;
}

onMounted(() => {
  pcShow.value = !isMobile();
});
useHead({
  title: t("common.navAboutUs.order") + "-" + t("defaultSettings.title"),
  viewport: "width=device-width,initial-scale=1,maximum-scale=1 ",
  charset: "utf-8",
  meta: [
    {
      hid: "keywords",
      name: "keywords",
      content: t("defaultSettings.keyword"),
    },
    {
      hid: "description",
      name: "description",
      content: t("defaultSettings.desc"),
    },
  ],
});

import order_01 from "@/assets/images/about/order_01.png";
import order_02 from "@/assets/images/about/order_02.png";
import order_03 from "@/assets/images/about/order_03.png";
import order_04 from "@/assets/images/about/order_04.png";
import order_05 from "@/assets/images/about/order_05.png";
const orderContainer = [
  {
    img: order_01,
    title: "Contact",
    text: [
      "Fill in your contact information, and the company will quickly match thespecialist to get in touch with you",
      "You can also directly call our customer service hotline or add customer service WeChat",
    ],
  },
  {
    img: order_02,
    title: "Samples",
    text: [
      "One on one business specialist will send the complete version of the sample",
      "If you need to customize the report,professional analysts will bearranged to communicate with youone-on-one and provide you withcustomized samples",
    ],
  },
  {
    img: order_03,
    title: "Payment",
    text: [
      "Both parties sign a report purchasecontract",
      "Support Paypal, Visa, UnionPayand MasterCard Payment",
    ],
  },
  {
    img: order_04,
    title: "Delivery",
    text: [
      "PDF report (sent online 2-3 workingdays after payment)",
      "WORD version report (sent online2-3 working days after payment)",
      "Paper version report (sent via EMSor DHL within 3-5 working dayafter payment)",
    ],
  },
  {
    img: order_05,
    title: "After-Sales",
    text: [
      "Within six months of purchasing thereport, if you have any questionsabout the details of our report, youcan contact the report analyst atany time. The analyst will continueto follow up and solve your problemuntil you are satisfied",
    ],
  },
];
</script>
<style lang="scss" scoped>
@import "~/assets/css/tool.scss";
.top {
  width: 100%;
  position: relative;
  margin-top: var(--size-130);
  img {
    width: 100%;
  }
  > div {
    width: 100%;
    padding: var(--size-60) var(--size-176) 0;
    position: absolute;
    top: 0;
    left: 0;
    .top_title {
      font-size: var(--size-48);
      font-family: Arial, Arial-Bold;
      font-weight: 700;
      text-align: left;
      color: #ffffff;
    }
    .top_location {
      font-size: var(--size-14);
      font-family: Arial, Arial-Regular;
      font-weight: 400;
      color: #ffffff;
      .icon-dkw_guanbi- {
        color: #ffffff;
        font-size: var(--size-12);
      }
      span {
        color: #72ff56;
      }
    }
  }
}

.order-container {
  padding: var(--size-62) var(--size-146) var(--size-100);
  background-color: #f6f7fa;
  p {
    padding: 0;
    margin: 0;
  }
  .container-title {
    font-size: var(--size-48);
    font-family: Arial, Arial-Bold;
    font-weight: 700;
    text-align: center;
    color: #1a1a1a;
    position: relative;
    line-height: var(--size-53);
    padding-bottom: var(--size-20);
    margin-bottom: var(--size-50);
    &::before {
      content: "";
      position: absolute;
      width: var(--size-71);
      height: var(--size-4);
      background: linear-gradient(90deg, #719d59 2%, #479f82 98%);
      border-radius: var(--size-2);
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .list-box {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    .container-item {
      width: var(--size-300);
      min-height: var(--size-420);
      padding: var(--size-28) var(--size-32);
      flex-shrink: 0;
      background-color: #fff;
      border: var(--size-1) solid #dee2e6;
      border-radius: var(--size-20);
      .item-img {
        width: var(--size-91);
        height: var(--size-104);
      }
      .item-title {
        font-size: var(--size-22);
        font-family: Arial, Arial-Bold;
        font-weight: 700;
        color: #1a1a1a;
        padding: var(--size-24) 0 var(--size-10);
      }
      .item-text {
        font-size: var(--size-14);
        font-family: Arial, Arial-Regular;
        font-weight: 400;
        text-align: left;
        color: #666666;
        line-height: var(--size-20);
        padding-bottom: var(--size-13);
        padding-left: var(--size-14);
        position: relative;
        &::before {
          content: "";
          position: absolute;
          width: var(--size-6);
          height: var(--size-6);
          background: #666666;
          border-radius: 50%;
          left: 0;
          top: var(--size-7);
        }
      }
    }
  }
}

@include responseTo("phone") {
  .page {
    .top {
      img {
        height: 140px;
        object-fit: cover;
      }
      > div {
        padding: var(--size-15);
        .top_title {
          font-size: var(--size-28);
        }
      }
    }
    .order-container {
      padding: var(--size-20);
      .container-title {
        font-size: var(--size-18);
        line-height: 1.2;
        margin-bottom: var(--size-30);
      }
      .list-box {
        display: flex;
        flex-direction: column;
        .container-item {
          width: 100%;
          margin-bottom: var(--size-20);
          .item-title {
            font-size: var(--size-16);
          }
          .item-text {
            font-size: var(--size-14);
          }
        }
      }
    }
  }
}
</style>