| | |
| | | <template> |
| | | <div class="h-full"> |
| | | <div class="h-full relative"> |
| | | <!-- 轮播图部分 --> |
| | | <div class="banner-carousel relative right-[29.5%] w-screen"> |
| | | <el-carousel height="500px" :interval="5000" arrow="always"> |
| | |
| | | <div class="bg-white py-8"> |
| | | <div class="mx-auto px-32"> |
| | | <div class="grid grid-cols-4 divide-x-w-default"> |
| | | <router-link |
| | | to="/subsidy-application" |
| | | <a |
| | | @click="toSubsidy" |
| | | class="block" |
| | | style="border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3" |
| | | > |
| | |
| | | <div class="text-sm text-info-light-3">Subsidy Application</div> |
| | | </div> |
| | | </div> |
| | | </router-link> |
| | | </a> |
| | | <router-link to="/certified-products" class="block" style="border-right: 1px solid #e3e3e3"> |
| | | <div class="flex items-center gap-1 justify-center"> |
| | | <div class="w-16 h-16"> |
| | |
| | | class="mySwiper" |
| | | > |
| | | <swiper-slide v-for="(item, index) in cooperationData" :key="index" style="width: 100%; height: 20px"> |
| | | <div style="height: 100%; width: 100%; display: flex; gap: 4px;justify-content: center;"> |
| | | <div style="height: 100%; width: 100%; display: flex; gap: 4px; justify-content: center"> |
| | | <span class="text-[#26c4f6]">{{ item.region }}</span> |
| | | <div> |
| | | <span class="text-white font-bold">{{ item.count }}</span> |
| | | <span class="text-sm ml-1" style="color: #aaa;">个</span> |
| | | <span class="text-sm ml-1" style="color: #aaa">个</span> |
| | | </div> |
| | | </div> |
| | | </swiper-slide> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 浮动右侧栏 --> |
| | | <div class="fixed right-[17px] top-2/3 transform -translate-y-1/2 z-50"> |
| | | <div class="flex flex-col"> |
| | | <!-- 购物车 --> |
| | | <div class="group relative" v-if="false"> |
| | | <div |
| | | class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200" |
| | | > |
| | | <svg |
| | | xmlns="http://www.w3.org/2000/svg" |
| | | class="h-6 w-6 text-gray-600" |
| | | fill="none" |
| | | viewBox="0 0 24 24" |
| | | stroke="currentColor" |
| | | > |
| | | <path |
| | | stroke-linecap="round" |
| | | stroke-linejoin="round" |
| | | stroke-width="2" |
| | | d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" |
| | | /> |
| | | </svg> |
| | | </div> |
| | | <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style"> |
| | | <div class="bg-gray-800 text-white text-sm py-1 px-3 rounded text-black" style="text-align: center">购物车</div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 我的 --> |
| | | <div class="group relative" v-if="false"> |
| | | <div |
| | | class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200" |
| | | > |
| | | <svg |
| | | xmlns="http://www.w3.org/2000/svg" |
| | | class="h-6 w-6 text-gray-600" |
| | | fill="none" |
| | | viewBox="0 0 24 24" |
| | | stroke="currentColor" |
| | | > |
| | | <path |
| | | stroke-linecap="round" |
| | | stroke-linejoin="round" |
| | | stroke-width="2" |
| | | d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" |
| | | /> |
| | | </svg> |
| | | </div> |
| | | <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style"> |
| | | <div class="bg-gray-800 text-white text-sm py-1 px-3 rounded text-black" style="text-align: center">我的</div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 客服 --> |
| | | <div class="group relative"> |
| | | <div |
| | | class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200 flex-col" |
| | | @click="showCustomerService = true" |
| | | > |
| | | <svg |
| | | xmlns="http://www.w3.org/2000/svg" |
| | | class="h-6 w-6 text-gray-600" |
| | | fill="none" |
| | | viewBox="0 0 24 24" |
| | | stroke="currentColor" |
| | | > |
| | | <path |
| | | stroke-linecap="round" |
| | | stroke-linejoin="round" |
| | | stroke-width="2" |
| | | d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" |
| | | /> |
| | | </svg> |
| | | <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">客服</div> |
| | | </div> |
| | | <!-- <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style"> |
| | | <img :src="CallMe" width="150" height="150" /> |
| | | </div> --> |
| | | </div> |
| | | |
| | | <!-- 反馈 --> |
| | | <div class="group relative" @click="toFeedBack"> |
| | | <div |
| | | class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200 flex-col" |
| | | > |
| | | <svg |
| | | xmlns="http://www.w3.org/2000/svg" |
| | | class="h-6 w-6 text-gray-600" |
| | | fill="none" |
| | | viewBox="0 0 24 24" |
| | | stroke="currentColor" |
| | | > |
| | | <path |
| | | stroke-linecap="round" |
| | | stroke-linejoin="round" |
| | | stroke-width="2" |
| | | d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" |
| | | /> |
| | | </svg> |
| | | <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">反馈</div> |
| | | </div> |
| | | </div> |
| | | <div class="group relative"> |
| | | <div |
| | | class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200 flex-col" |
| | | > |
| | | <svg |
| | | t="1740060002788" |
| | | class="icon h-6 w-6 text-gray-600" |
| | | viewBox="0 0 1024 1024" |
| | | version="1.1" |
| | | xmlns="http://www.w3.org/2000/svg" |
| | | p-id="13742" |
| | | width="128" |
| | | height="128" |
| | | > |
| | | <path |
| | | d="M767.818667 409.173333C867.338667 444.266667 938.666667 539.136 938.666667 650.666667c0 42.709333-10.496 83.978667-30.261334 120.842666-1.792 3.338667-4.992 8.928-9.696 16.96l14.613334 53.557334c6.506667 23.893333-15.402667 45.813333-39.296 39.296l-53.642667-14.634667-6.229333 3.669333A254.933333 254.933333 0 0 1 682.666667 906.666667c-77.994667 0-147.84-34.88-194.805334-89.888a352.608 352.608 0 0 1-56.64 4.554666c-63.338667 0-124.266667-16.853333-177.472-48.298666-1.834667-1.088-6.410667-3.733333-13.632-7.893334l-80.544 21.653334c-23.914667 6.432-45.76-15.573333-39.146666-39.434667l21.792-78.752a961.205333 961.205333 0 0 1-15.904-27.317333A336.384 336.384 0 0 1 85.333333 480c0-188.618667 154.965333-341.333333 345.888-341.333333 159.914667 0 297.984 108.010667 335.818667 259.296 0.949333 3.765333 1.173333 7.552 0.778667 11.2z m-68.106667-13.952C662.88 282.037333 555.178667 202.666667 431.221333 202.666667 275.434667 202.666667 149.333333 326.933333 149.333333 480c0 46.272 11.498667 90.837333 33.194667 130.698667 2.88 5.290667 10.176 17.706667 21.621333 36.746666a32 32 0 0 1 3.413334 25.013334l-10.517334 37.994666 39.232-10.549333a32 32 0 0 1 24.234667 3.146667c14.272 8.192 22.773333 13.098667 25.802667 14.890666A283.882667 283.882667 0 0 0 431.221333 757.333333c6.154667 0 12.288-0.192 18.389334-0.576A255.061333 255.061333 0 0 1 426.666667 650.666667c0-141.386667 114.613333-256 256-256 5.728 0 11.413333 0.192 17.045333 0.554666z m133.706667 397.056a32 32 0 0 1 3.338666-24.725333 996.672 996.672 0 0 0 15.242667-26.293333A190.997333 190.997333 0 0 0 874.666667 650.666667c0-106.037333-85.962667-192-192-192s-192 85.962667-192 192 85.962667 192 192 192a190.933333 190.933333 0 0 0 98.570666-27.2c2.208-1.322667 8.288-4.874667 18.517334-10.837334a32 32 0 0 1 24.522666-3.210666l12.565334 3.424-3.424-12.565334zM330.666667 426.666667a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z m192 0a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z m85.333333 202.666666a32 32 0 1 1 0-64 32 32 0 0 1 0 64z m149.333333 0a32 32 0 1 1 0-64 32 32 0 0 1 0 64z" |
| | | fill="#000000" |
| | | p-id="13743" |
| | | ></path> |
| | | </svg> |
| | | <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">微信</div> |
| | | </div> |
| | | <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style"> |
| | | <img :src="CallMe" width="150" height="150" /> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 返回顶部 --> |
| | | <div class="group relative" @click="scrollToTop"> |
| | | <div |
| | | class="bg-white w-14 h-14 flex items-center justify-center flex-col cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200" |
| | | > |
| | | <svg |
| | | xmlns="http://www.w3.org/2000/svg" |
| | | class="h-6 w-6 text-gray-600" |
| | | fill="none" |
| | | viewBox="0 0 24 24" |
| | | stroke="currentColor" |
| | | > |
| | | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" /> |
| | | </svg> |
| | | <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">顶部</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 客服对话框 --> |
| | | <el-dialog |
| | | v-model="showCustomerService" |
| | | :show-close="true" |
| | | :modal="true" |
| | | :close-on-click-modal="false" |
| | | :close-on-press-escape="false" |
| | | class="customer-service-dialog" |
| | | > |
| | | <customer-service /> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { Document, Operation } from '@element-plus/icons-vue'; |
| | | import * as echarts from 'echarts'; |
| | | import { onMounted, ref } from 'vue'; |
| | | import { onMounted, ref, nextTick } from 'vue'; |
| | | import { useRouter } from 'vue-router'; |
| | | import YWLogo from '@/assets/logo/yw_logo.png'; |
| | | import CallMe from '@/assets/qrcode/callme.jpg'; |
| | | import axios from 'axios'; |
| | | import CustomerService from '@/components/CustomerService.vue'; |
| | | |
| | | import { Swiper, SwiperSlide } from 'swiper/vue'; |
| | | import { Autoplay } from 'swiper/modules'; |
| | |
| | | console.log(err); |
| | | }); |
| | | }; |
| | | const toFeedBack = () => { |
| | | router.push('/feedback'); |
| | | }; |
| | | const toSubsidy = ()=>{ |
| | | // 跳转到该网页 |
| | | window.open('https://www.sheitc.sh.gov.cn/','_blank') |
| | | } |
| | | const scrollToTop = () => { |
| | | nextTick(() => { |
| | | // console.log('我被打印了'); |
| | | document.getElementById('app-page').scrollTo({ |
| | | top: 0, |
| | | behavior: 'smooth', |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | const showCustomerService = ref(false); |
| | | </script> |
| | | |
| | | <style scoped> |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | .card-hover-style { |
| | | /* display: flex; |
| | | justify-content: center; |
| | | align-items: center; */ |
| | | /* transform: translateY(50%); */ |
| | | background-color: #fff; |
| | | color: #000; |
| | | margin-right: unset; |
| | | } |
| | | :deep(.el-carousel__arrow) { |
| | | background-color: rgba(0, 0, 0, 0.5); |
| | | border: none; |
| | |
| | | border-bottom: none; |
| | | } |
| | | } |
| | | |
| | | :deep(.customer-service-dialog .el-dialog__body) { |
| | | padding: 0; |
| | | } |
| | | |
| | | :deep(.customer-service-dialog .el-dialog__header) { |
| | | display: block; |
| | | } |
| | | </style> |