web/pages/about/term.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>Terms and Conditions</span>
        </div>
      </div>
    </div>

    <div class="term-container">
      <p class="container-title">Terms and Conditions</p>

      <div class="container-item" v-for="(item, index) in termContainer" :key="index">
        <img class="item-img" :src="item.img" alt="" />
        <div class="item-content">
          <p class="item-title">{{ item.title }}</p>
          <p class="item-text">{{ item.text }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useI18n } from "#imports";
import { NIcon, NBreadcrumb, NBreadcrumbItem } from "naive-ui";
import { MdHome, MdPaper } from "@vicons/ionicons4";

const { t } = useI18n();
useHead({
  title: t("common.navAboutUs.term") + "-" + 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 terms_01 from "@/assets/images/about/terms_01.png";
import terms_02 from "@/assets/images/about/terms_02.png";
import terms_03 from "@/assets/images/about/terms_03.png";
import terms_04 from "@/assets/images/about/terms_04.png";
import terms_05 from "@/assets/images/about/terms_05.png";

const termContainer = [
  {
    img: terms_01,
    title: "Information Accuracy",
    text:
      "The industry analysis data and market future predictions in this report are mainly obtained by analysts using desktop research, industryinterviews, and other research methods, combined with various industry analysis models. Although we strive to provide accurate and up-to-date information, the industry situation and data may change over time. Therefore, we cannot guarantee the complete accuracy andtimeliness of the information contained in the report. Readers should verify the information themselves and consult other reliable sourcesbefore making a decision.",
  },
  {
    img: terms_02,
    title: "Investment Suggestions",
    text:
      "This report may contain opinions and suggestions on investment opportunities or market performance. However, please note that these are only the author is personal opinions and are for reference only and do not constitute investment advice. Readers should consult professional financial advisors before making any investments and independently evaluate their risk tolerance and investment goals.",
  },
  {
    img: terms_03,
    title: "Future Forecast",
    text:
      "Statements and forecast about future trends, market performance and development prospects only represent the author is speculationabout the current situation. Due to the uncertainty of many factors, including but not limited to economic, political, technological, andcompetitive factors, the actual results may differ from the statements and predictions in the report. Readers should understand these risksand not consider the statements in the report as inevitable situations.",
  },
  {
    img: terms_04,
    title: "Limitation of Liability",
    text:
      "To the extent permitted by law, we do not assume responsibility for any losses or damages caused by any decisions made by readersbased on the content of the report. Whether direct, indirect, incidental, punitive, or consequential losses or damages, including but notlimited to loss of profits, business interruption, data loss, or other economic losses.",
  },
  {
    img: terms_05,
    title: "Disclaimer",
    text:
      "Given our due diligence and efforts in writing the report, we do not guarantee the accuracy, reliability, and completeness of the informationin the report to the extent permitted by law. Readers must bear the responsibility of maintaining caution and independent judgment whenusing the information in the report.",
  },
];
</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;
      }
    }
  }
}

.term-container {
  padding: var(--size-62) var(--size-146) var(--size-100);
  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-40);
    &::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%);
    }
  }
  .container-item {
    padding: var(--size-25) var(--size-30);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--size-10);
    .item-img {
      flex-shrink: 0;
      width: var(--size-532);
      height: var(--size-317);
    }
    .item-content {
      flex: 1 0;
      color: #1a1a1a;
      padding-left: var(--size-47);
      .item-title {
        font-size: var(--size-22);
        font-family: Arial, Arial-Bold;
        font-weight: 700;
        padding-bottom: var(--size-20);
      }
      .item-text {
        font-size: var(--size-16);
        font-family: Arial, Arial-Regular;
        line-height: var(--size-24);
      }
    }
    &:nth-child(odd) {
      background: #eeeeee;
      .item-img {
        order: 2;
      }
      .item-content {
        padding: 0 var(--size-47) 0 0;
      }
    }
  }
}

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

        &:nth-child(odd) {
          background: #eeeeee;
          padding: var(--size-10);
        }
      }
    }
  }
}
</style>