xinkeaboard/xinkeaboard-web/pages/home/about.vue

<template>
  <div>
    <SldHomeTopSearch />
    <NavCatHeader />
    <div class="bottom_line"></div>

    <div class="bannerBox fence">
      <div class="fence-wide">
        <img
          :src="infoData.data[0]"
          :onerror="defaultImg"
          width="1200"
          height="460"
        />
      </div>
    </div>

    <div class="fence main">
      <div class="fence-wide ly-clearFix">
        <div class="ly-left picBox">
          <img
          :src="infoData.data[1]"
          :onerror="defaultImg2"
            width="375"
            height="336"
          />
        </div>
        <div class="ly-left aboutBox">
          <p style="line-height: 2;" v-html="infoData.data[2]"></p>

        </div>
      </div>
    </div>

    <!-- <div class="contact-ways fence-wide ly-clearFix">
      <ul>
        <li class="contact-way-item">
          <div class="contact-text">Chat with us online</div>
          <div class="contact-detail-wrap">
            <div class="contact-detail">
              Need Help? Chat with Made-in-China.com.
              <a
                href="#"
                class="btn-main btn-large btn-contact J-live-chat-btn"
                >Live Chat</a
              >
            </div>
          </div>
        </li>
        <li class="contact-way-item">
          <div class="contact-text">Send us a message</div>
          <div class="contact-detail-wrap">
            <div class="contact-detail">
              Messages will be replied within 2 workdays.
              <a
                href="#"
                target="_blank"
                class="btn-main btn-large btn-contact"
                >Email Us</a
              >
            </div>
          </div>
        </li>
        <li class="contact-way-item">
          <div class="contact-text">New user quick guide</div>
          <div class="contact-detail-wrap video-wrap">
            <div class="contact-detail contact-detail-video" @click.stop="openVideo">
              <img
                src="//www.micstatic.com/micen/img/contactUs/videoPlay.jpg"
                alt="video"
              />
              <div class="video-play">
                <img src="//www.micstatic.com/micen/img/contactUs/video.png" />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div> -->

    <el-dialog
      title="New user quick guide"
      v-if="showModel"
      :model-value="modalVisible"
      :close-on-click-modal="false"
      :show-close="true"
      @close="closeModal"
    >
        <video preload="auto"  controls autoplay="false" webkit-playsinline="" playsinline="" x-webkit-airplay="allow" src="http://1500003156.vod2.myqcloud.com/a2767f46vodtranssh1500003156/05df4f675285890811955212812/v.f375755.mp4" style="width: 100%; height: 100%;"></video>
    </el-dialog>


  </div>
</template>

<script setup>
import {ElDialog} from 'element-plus'
const router = useRouter();
const modalVisible = ref(true);
const showModel = ref(false)
const infoData = reactive({data:[]})
const closeModal = ()=>{
    showModel.value = false
}

useHead({
    title: 'About Us',
    meta: [
      {
        name: "description",
        content:'About Us',
      },
      {
        name: "keywords",
        content: 'About Us',
      },
    ],
  });

const defaultImg = ref("http://www.greenpass360.com/images/en/banner.jpg");
const defaultImg2 = ref("http://www.greenpass360.com/images/en/about-us.jpg");

const openVideo =()=> {
    showModel.value = true
}

const getData =  async () => {
  const {data:value} = await useFetchRaw(apiUrl+'v3/system/front/setting/getSettings?names=about_banner,about_pic,about_text')
  const res = value._rawValue
  if(res.state == 200){
    infoData.data = res.data
  }
}

getData()


onMounted(() => {
  setTimeout(() => {
      sldStatEvent({ behaviorType: 'pv',pageUrl: defaultUrl + router.currentRoute.value.path, referrerPageUrl: apiUrl  });
    }, 3000)
});

</script>

<style lang="scss" scoped>
@use "@/assets/style/storeList.scss" as *;
@use "@/assets/style/base.scss" as *;
@use "@/assets/style/store/contac-about.scss" as *;
</style>