template-10490/pages/m/index.vue

<template>

  <!-- 首页banner -->
  <Carousel ref="CarouselRef"/>

  <div class="search">
    <el-input v-model="keyword" :placeholder="$t('index.keyword')" :suffix-icon="Search" @change="onSearch"/>
  </div>
  <!-- 产品分类 -->
  <div class="cp p-3" v-if="cpCategory">
    <el-row :gutter="16">
      <el-col :span="6" v-for="(item,index) in cpCategory" :key="index">
        <div class="item flex flex-col justify-center mb-2" v-if="index < 8">
          <a :href="navTo(item)" class="img" style="border-radius: 100%;">
            <el-avatar fit="fill" :size="65" :src="`${item.icon}`" style="border: 1px solid #FFFFFF; box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);"/>
          </a>
          <div class="text-center py-1"><a :href="navTo(item)">{{ item.title }}</a></div>
        </div>
      </el-col>
    </el-row>
  </div>

  <div class="clearboth"></div>

  <div class="advs"><p><img :src="config?.MobileIndexInfoTopImage"
                            title="1729219778290291.jpg" alt="1.jpg"/></p>
    <p><br/></p>
    <p><br/></p></div>


  <div class="clearboth"></div>

  <div class="products">
    <div class="products_title">
      {{ $t('index.companyProfile') }}
    </div>
    <div class="contentss clearfix">
      <div class="tps"><p><a :href="i18n.locale.value == 'en' ? `/en/m/page/1100.html` : `/m/page/1025.html`" target="_self"><img
          :src="config.MobileIndexInfoImage" title="1729219913337024.jpg"
          alt="2.jpg"/></a></p>
        <p><br/></p></div>
      <div class="nrs">
        {{ config.MobileIndexInfo }}
      </div>
    </div>
  </div>


  <div class="products" v-if="caseCategory">
    <div class="products_title">
      {{ $t('index.parentNameCase') }}
    </div>
    <ul>
      <li v-for="(item,index) in caseCategory" :key="index">
        <a :href="navTo(item)" title="轨道交通建设项目" class="img">
          <img :src="item.icon" alt="轨道交通建设项目"/>
          <h3>{{ item.title }}</h3>
        </a>
      </li>
    </ul>
  </div>

  <div class="tu"><p><img :src="config.MobileIndexInfoHZGYImage" title="活动房安装"
                          alt="活动房安装" border="0" vspace="0" style="white-space: normal;"/></p>
    <p><br/></p></div>

  <div class="hezuo">
    <div class="products_title">
      <a><span class="text-[#0c6fcd]" >{{ $t('index.partner') }}</span></a>
    </div>
    <div class="con"><p><a><img
        :src="config.MobileIndexInfoLogoList" title="1587462469987062.jpg"
        alt="手机合作.jpg"/></a></p></div>
  </div>


  <!-- 服务中国 走向海外 -->
  <div v-html="config.MobileIndexCode" class="mservice"></div>


  <div class="advs"><a :href="`${i18n.locale.value == 'en' ? '/en/m/video/1075.html' : '/m/video/1000.html'}`"><img :src="config.MobileIndexBottomBanner"
                            title="1553249693490374.jpg" alt="555.jpg" border="0" vspace="0"/></a></div>


  <div class="news">
    <div class="products_title">
      {{ $t('index.news') }}
    </div>
    <ul>
      <li v-for="(item,index) in hotNews" :key="index">
        <a :href="mDetail(item)" :title="item.title">
          {{ item.title }}
        </a>
        <div class="line-clamp-1 max-w-[320px]" v-html="item.comments"></div>
      </li>
    </ul>
  </div>

  <div class="clearboth"></div>


  <div class="products">
    <div class="products_title">
      {{ $t('index.contact') }}
    </div>
    <div class="flex flex-col p-3 leading-8">
      <span class="text-left">{{ $t('page.tel') }}：{{ config.tel }}</span>
      <span class="text-left">{{ $t('page.phone') }}：{{ config.fax }}</span>
      <span class="text-left">{{ $t('page.fax') }}：{{ config.phone }}</span>
      <span class="text-left">{{ $t('page.email') }}：{{ config.email }}</span>
      <span class="text-left">{{ $t('page.address') }}：{{ config.address }}</span>
      <span class="text-left">{{ $t('page.factory') }}：{{ config.address2 }}</span>
      <span class="text-left">{{ $t('page.domain') }}：{{ config.pageLeftInfoUrl }}</span>
    </div>
  </div>

  <div class="distraction">
  </div>

</template>
<script setup lang="ts">
import Carousel from "~/pages/m/components/Carousel.vue";
import {useConfigInfo, useWebsite} from "~/composables/configState";
import {Search} from '@element-plus/icons-vue'
import type {CmsArticle} from "~/api/cms/cmsArticle/model";
import {pageCmsArticle} from "~/api/cms/cmsArticle";
import {navTo} from "~/utils/common";
import {getSiteInfo} from "~/api/layout";
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";

const props = withDefaults(
    defineProps<{
      name?: any;
    }>(),
    {}
);

const config = useConfigInfo();
const website = useWebsite();
const keyword = ref();
const i18n = useI18n();
const hotNews = ref<CmsArticle[]>([]);
const topNavs = ref<any>([]);
const cpCategory = ref<CmsNavigation[]>([]);
const caseCategory = ref<any>([]);


const onSearch = () => {
  window.location.href = `/m/search/${keyword.value}`;
}

// TODO 读取服务器缓存数据
await getSiteInfo({
  lang: i18n.locale.value
}).then(data => {
  website.value = data
  topNavs.value = data.topNavs?.filter(d => d.title === '产品系列' || d.title === 'Product')
  if(topNavs.value[0].children){
    cpCategory.value = topNavs.value[0].children;
  }
  caseCategory.value = data.topNavs?.filter(d => d.title === '项目展示' || d.title === 'Case')[0].children
})

const reload = async () => {
  // 新闻头条
  pageCmsArticle({
    limit: 4,
    status: 0,
    recommend: 1,
    parentId: i18n.locale.value == 'en' ? 1077 : 1002,
    lang: i18n.locale.value
  }).then(res => {
    if(res){
      hotNews.value = res?.list;
    }
  })
}

reload();

</script>
<style scoped lang="less">
</style>