添加联系我们界面

tanghaolin

2025-04-18 e3ab5c403cce86811f9bdf8ae5f0d00f1f776b1f

 src/views/Home.vue

@@ -5,25 +5,24 @@
         <el-carousel height="602px" :interval="3000" indicator-position="none" arrow="never">
            <el-carousel-item>
               <div class="carousel-item">
                  <img src="@/assets/carousel/test/15.png" class="carousel-image" />
                  <!-- <img src="https://www.app-i.cn/api/file?file_name=2d82602e-8797-46d7-9b5c-59d9f88bc6d9.png;软件一体化测试平台_副本.png" class="carousel-image" /> -->
                  <img src="@/assets/carousel/home/1.png" class="carousel-image" />
               </div>
            </el-carousel-item>
            <el-carousel-item>
               <div class="carousel-item">
                  <img src="@/assets/carousel/final/2.png" class="carousel-image" />
                  <!-- <img src="https://www.app-i.cn/static/epidemicBanner.e4d9a821.jpg" alt=""> -->
                  <img src="@/assets/carousel/home/2.png" class="carousel-image" />
               </div>
            </el-carousel-item>
            <el-carousel-item>
               <div class="carousel-item">
                  <img src="@/assets/carousel/final/5.png" class="carousel-image" />
                  <!-- <img src="https://www.app-i.cn/api/file?file_name=072c9dda-3ffb-410d-be93-a88ec6c7e765.jpg;40周年1.jpg" alt=""> -->
                  <img src="@/assets/carousel/home/3.png" class="carousel-image" />
               </div>
            </el-carousel-item>
            <!-- <el-carousel-item>
               <img src="@/assets/carousel/1.png" class="w-full h-full object-cover" />
            </el-carousel-item> -->
            <el-carousel-item>
               <div class="carousel-item">
                  <img src="@/assets/carousel/home/4.png" class="carousel-image" />
               </div>
            </el-carousel-item>
         </el-carousel>
      </div>
      <div class="relative z-20 2 w-full flex justify-center items-center">
@@ -82,12 +81,6 @@
                  <a class="block" style="border-right: 1px solid #e3e3e3" @click="linkClick">
                     <div class="flex items-center gap-1 justify-center">
                        <div class="w-16 h-16">
                           <!-- <svg viewBox="0 0 24 24" class="w-full h-full">
                              <path
                                 fill="currentColor"
                                 d="M12,3L2,12H5V20H19V12H22L12,3M12,8.75A2.25,2.25 0 0,1 14.25,11A2.25,2.25 0 0,1 12,13.25A2.25,2.25 0 0,1 9.75,11A2.25,2.25 0 0,1 12,8.75M12,15C13.5,15 16.5,15.75 16.5,17.25V18H7.5V17.25C7.5,15.75 10.5,15 12,15Z"
                              />
                           </svg> -->
                           <img :src="YWLogo" class="h-full" />
                        </div>
                        <div>
@@ -96,48 +89,6 @@
                        </div>
                     </div>
                  </a>

                  <!-- <router-link to="/publish-demand" class="block">
                     <div class="function-card bg-white rounded-lg shadow-md p-6 text-center">
                        <div class="flex flex-col items-center">
                           <div class="w-16 h-16 mb-4">
                              <img src="@/assets/icons/publish-demand.svg" alt="发需求" class="w-full h-full" />
                           </div>
                           <div>
                              <div class="text-lg font-medium">发需求</div>
                              <div class="text-gray-400 text-sm">Publish Demand</div>
                           </div>
                        </div>
                     </div>
                  </router-link>

                  <router-link to="/find-app" class="block">
                     <div class="function-card bg-white rounded-lg shadow-md p-6 text-center">
                        <div class="flex flex-col items-center">
                           <div class="w-16 h-16 mb-4">
                              <img src="@/assets/icons/find-app.svg" alt="找APP" class="w-full h-full" />
                           </div>
                           <div>
                              <div class="text-lg font-medium">找APP</div>
                              <div class="text-gray-400 text-sm">Find APP</div>
                           </div>
                        </div>
                     </div>
                  </router-link>

                  <router-link to="/find-demand" class="block">
                     <div class="function-card bg-white rounded-lg shadow-md p-6 text-center">
                        <div class="flex flex-col items-center">
                           <div class="w-16 h-16 mb-4">
                              <img src="@/assets/icons/find-demand.svg" alt="找需求" class="w-full h-full" />
                           </div>
                           <div>
                              <div class="text-lg font-medium">找需求</div>
                              <div class="text-gray-400 text-sm">Find Demand</div>
                           </div>
                        </div>
                     </div>
                  </router-link> -->
               </div>
            </div>
         </div>
@@ -164,7 +115,7 @@
                  :slidesPerView="state.catalogSwiperIndex"
                  :centeredSlides="true"
                  :autoplay="{
                     delay: 10000,
                     delay: 1000000,
                     disableOnInteraction: false,
                     pauseOnMouseEnter: true,
                  }"
@@ -174,12 +125,20 @@
               >
                  <swiper-slide class="w-full h-full" v-for="(item, index) in state.catalogItemList" :key="index">
                     <div class="catalog-continer overflow-hidden">
                        <div class="catalog-continer-item p-4" v-for="child in item" :key="child.Id" @click="handleCatalogClick(child)">
                        <div class="catalog-continer-item p-4 relative" v-for="child in item" :key="child.Id" @click="handleCatalogClick(child)">
                           <div class="w-full h-[250px]">
                              <img class="w-full h-full object-contain" :src="child.PhysicalPicturePath" alt="" />
                           </div>
                           <div class="mt-4 text-center font-medium" style="font-size: 18px">
                              {{ child.Model }}
                           </div>

                           <div class="text-center font-medium text-[14px] bg-[#fff] text-[#003a8f] absolute top-[10px] right-[-13px]" style="font-weight: bold">
                              <!-- {{ getCompanyNameByType(child.Type) }} -->
                              <div class="etiquet-price">
                                 <p>{{ getCompanyNameByType(child.Type) }}</p>
                                 <div></div>
                              </div>
                           </div>
                        </div>
                     </div>
@@ -343,7 +302,6 @@
</template>

<script setup lang="ts">
import { Document, Operation } from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import { onMounted, ref, nextTick, reactive } from 'vue';
import { useRouter } from 'vue-router';
@@ -448,6 +406,7 @@
   curSelectCatalog: 1,
   catalogSwiperIndex: 0,
   catalogItemList: [],
   m_CompanyList:[],
   m_PageLoading: false,
});

@@ -632,7 +591,7 @@
      // initMapChart();
      initPipeOneChart();
      initPipeTwoChart();

      initComanyData();
      initCatalogList();

      document.getElementById('app-page')?.addEventListener('scroll', handleScroll);
@@ -679,6 +638,25 @@
   //    router.push(`/news-detail/${item.id}`);
   // }
   router.push(`/news-detail/${item.id}`);
};
// 初始化厂商列表数据
const initComanyData = () => {
   axios({
      method: 'get',
      url: 'static/EecProductData/CompanyData.json',
   })
      .then((res) => {
         let result = res.data;
         state.m_CompanyList = result.map((item: any) => {
            return {
               CompanyId: item.CompanyId,
               CompanyAllName: item.CompanyAllName,
               CompanyAbbName: item.CompanyAbbName,
               Type: item.Type,
            };
         });
      })
      .catch((err) => {});
};
// 初始化类型列表数据
const initCatalogList = (cb: any = null) => {
@@ -1151,11 +1129,18 @@
};
// 产品类型点击
const handleCatalogClick = (item: any) => {
   console.log(item, '我被点击了');
   const type = item.Type;
   const companyID = getCompanyItemByType(type)[0].CompanyId;
   router.push({
      path: '/certified-products',
      query: {
         company: companyID,
         type: type,
      },
   });
};

const onSwiper = (swiper: any) => {
   console.log(swiper);
   catalogSwiperRef.value = swiper;
};
const onSlideChange = () => {};
@@ -1174,7 +1159,12 @@
      });
   });
};

const getCompanyNameByType = (type: number) => {
   return state.m_CompanyList.find((item: any) => item.Type.includes(type))?.CompanyAbbName;
};
const getCompanyItemByType = (type: number) => {
   return state.m_CompanyList.filter((item: any) => item.Type.includes(type));
};
onUnmounted(() => {
   document.getElementById('app-page')?.removeEventListener('scroll', handleScroll);
});
@@ -1303,7 +1293,7 @@
   cursor: pointer;
   &:hover {
      img {
         transform: scale(1.25);
         transform: scale(1.05);
         transition: all 1s ease;
      }
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
@@ -1445,4 +1435,32 @@
.fade-leave-active {
   animation: fadeOut 0.3s ease-out;
}
.etiquet-price {
    background: #003a8f;
    margin-left: -0.65rem;
    padding: .2rem 1.2rem;
    border-radius: 5px 0 0 5px;
}

.etiquet-price p {
  height: 20px;
  margin: 0;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #fff;
}

.etiquet-price div {
  position: absolute;
  bottom: -23px;
  right: 0px;
  width: 0;
  height: 0;
  border-top: 13px solid #003a8f;
  border-bottom: 10px solid transparent;
  border-right: 13px solid transparent;
  z-index: -6;
}
</style>