home css update

tj

2025-05-07 fe1c5cff00014a46dec56705de3426037839c261

 src/pages/Home.vue

@@ -18,7 +18,7 @@
                                :style="{ backgroundColor: index === currentIndex ? 'yellow' : 'transparent' }"> -->
                            <div :class="[
                                'other-div',
                                

                                'd-flex',
                                'flex-column',
                                'justify-content-between',
@@ -40,9 +40,12 @@
            <div class="our-products-title  mt-1 mt-md-3 w-100 p-2">
                <h1 class="fs-3 fs-md-2 fs-lg-1">我们的产品</h1>
            </div>
            <div style="width: 70%; margin: 0 auto;" class="d-none d-md-flex">
                <div id="carouselExample" class="carousel slide  w-100 " data-bs-ride="carousel"
                    data-bs-interval="3000">
            <!-- <div style="width: 70%; margin: 0 auto;" class="d-none d-md-flex">
                <div id="carouselExample" class="carousel slide  w-100 " 
                    data-bs-ride="carousel"
                    data-bs-interval="5000"
                    data-bs-pause="hover"
                    >
                    <div class="carousel-inner">
                        <div :class="['carousel-item', { active: groupIndex === productGroupsIndex }]"
                            v-for="(group, groupIndex) in productGroups" :key="groupIndex">
@@ -50,15 +53,13 @@
                                <div class="col" v-for="(product, productIndex) in group.products" :key="productIndex">
                                    <div class="card">
                                        <div class="card-body d-flex flex-column">
                                            <!-- 标题部分 -->
                                            
                                            <h5 class="card-title mb-3" style="width: 100%; height: 50px;">{{
                                                product.title
                                            }}</h5>
                                            <!-- 内容部分 -->
                                            <p class="card-text mb-3" v-html="product.desc"
                                                style="width: 100%; height: 80px;"></p>
                                        </div>
                                        <!-- 图片部分 -->
                                        <div class="d-flex justify-content-center  p-2">
                                            <img :src="product.imgUrl" class="card-img-top" :alt="product.title"
                                                style="width: 100%; height: 150px;">
@@ -79,23 +80,57 @@
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div> -->
            <div class="d-none d-md-flex" style="width: 70%; margin: 0 auto;">
                <div id="carouselExample" class="carousel slide w-100" data-bs-ride="carousel" data-bs-interval="5000"
                    data-bs-pause="hover">
                    <div class="carousel-inner">
                        <div class="carousel-item" v-for="(group, groupIndex) in productGroups"
                            :class="{ active: groupIndex === 0 }" :key="groupIndex">
                            <div class="row">
                                <div class="col" v-for="(product, productIndex) in group.products" :key="productIndex">
                                    <div class="card" @click="handleCardClick(product)">
                                        <div class="card-body d-flex flex-column">
                                            <h5 class="card-title mb-3" style="height: 50px;">{{ product.title }}</h5>
                                            <p class="card-text mb-3" v-html="product.desc" style="height: 80px;"></p>
                                        </div>
                                        <div class="d-flex justify-content-center p-2">
                                            <img :src="product.imgUrl" class="card-img-top" :alt="product.title"
                                                style="height: 150px;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample"
                        data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample"
                        data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    </button>
                </div>
            </div>

            <div style="width: 60%; margin: 0 auto; height: 300px;" class="d-block d-md-none ">

            <!-- <div style="width: 60%; margin: 0 auto; height: 300px;" class="d-block d-md-none ">
                <div id="carouselExampleMin" class="carousel slide " data-bs-ride="carousel" data-bs-interval="3000">
                    <div class="carousel-inner">
                        <div :class="['carousel-item', { active: index === productIndex }]"
                            v-for="(product, index) in allProducts" :key="index">
                            <div class="card">
                                <div class="card-body d-flex flex-column">
                                    <!-- 标题部分 -->
                                    <h5 class="card-title mb-3" style="width: 100%;">{{ product.title }}
                                    </h5>
                                    <!-- 内容部分 -->
                                 
                                    <p class="card-text mb-3" v-html="product.desc" style="width: 100%;">
                                    </p>
                                </div>
                                <!-- 图片部分 -->
                        
                                <div class="d-flex justify-content-center p-2">
                                    <img :src="product.imgUrl" class="card-img-top" :alt="product.title"
                                        style="width: 100%; height: 100px;">
@@ -115,19 +150,50 @@
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div> -->
            <div style="width: 60%; margin: 0 auto; height: 300px;" class="d-block d-md-none">
                <div id="carouselExampleMin" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000"
                    data-bs-pause="hover">
                    <div class="carousel-inner">
                        <div class="carousel-item" v-for="(product, index) in allProducts"
                            :class="{ active: index === 0 }" :key="index">
                            <div class="card" @click="handleCardClick(product)">
                                <div class="card-body d-flex flex-column">
                                    <h5 class="card-title mb-3" style="width: 100%;">{{ product.title }}</h5>
                                    <p class="card-text mb-3" v-html="product.desc" style="width: 100%;"></p>
                                </div>
                                <div class="d-flex justify-content-center p-2">
                                    <img :src="product.imgUrl" class="card-img-top" :alt="product.title"
                                        style="width: 100%; height: 100px;">
                                </div>
                            </div>
                        </div>
                    </div>

                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleMin"
                        data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleMin"
                        data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>


        </div>

        <!-- 公司相关信息 -->
        <div  class="w-100" >
        <div class="w-100">
            <div class="row flex-md-nowrap">
                <!-- 第一列：占1份 -->
                <div class="col-12 col-md-3 text-center text-md-left">
                <div class="col-12 col-md-3 text-center text-md-start ps-md-5">
                    <!-- 产品中心 -->
                    <div class="text-center my-5 text-dark fs-4">产品中心</div>
                    <!-- <ul class="list-unstyled  m-1 text-start"></ul> -->
                    <ul class="list-unstyled  m-1">
                    <div class="my-5 text-dark fs-4">产品中心</div>
                    <ul class="list-unstyled">
                        <li v-for="(item, index) in ProductCenters" :key="index" class="mb-2">
                            <a href="javascript:void(0);" class="text-dark text-decoration-none fs-5"
                                @click.prevent="openPdf(item)">
@@ -148,36 +214,47 @@
                </div>

                <!-- 第三列：占1份 -->
                <div id="third-other" class="col-12 col-md-3 text-center text-md-left">
                <!-- <div id="third-other" class="col-12 col-md-3 text-center text-md-start "> -->
                <div id="third-other" class="col-12 col-md-3 mx-auto text-center text-md-start">
                    <!-- 公司信息 -->
                    <div class="text-center my-5 text-dark fs-4">公司信息</div>
                    <div class="container text-center">
                    <div class="my-5 text-dark fs-4">公司信息</div>
                    <div>
                        <!-- 第一行：Logo + 名称 + 简介 -->
                        <div class="d-flex flex-column align-items-center mb-4">
                            <div class="d-flex align-items-center gap-2">
                        <div class="d-flex flex-column  mb-4">
                            <div class="align-items-center ">
                                <img :src="companyInfo.logo" alt="云游四方" class="img-fluid"
                                    style="width: 48px; height: 48px; object-fit: contain;" />
                                <span class="fs-4 fw-semibold">{{ companyInfo.name }}</span>
                            </div>
                            <div class="fs-5 text-secondary mt-2" style="max-width: 600px;">
                                {{ companyInfo.desc }}
                                <span class="fs-5 fw-semibold">{{ companyInfo.name }}</span>
                                <span class="">| {{ companyInfo.desc }}</span>
                            </div>
                        </div>

                        <!-- 第二行：地址 -->
                        <div class="d-flex justify-content-center mb-4">
                            <span class="fs-5 text-dark">地址：{{ companyInfo.address }}</span>
                        <div class="text-center text-md-start mb-4">
                            <span class="fs-6 text-dark">地址：{{ companyInfo.address }}</span>
                        </div>


                        <!-- 第三行：二维码 -->
                        <div class="row justify-content-center g-4">
                        <!-- <div class="row g-2">
                            <div class="col-auto d-flex flex-column align-items-center"
                                v-for="(item, index) in companyInfo.qrCodeList" :key="index">
                                <img :src="item.url" alt="云游四方" class="img-fluid mb-2"
                                    style="width: 80px; height: 80px; object-fit: cover;" />
                                <span class="text-muted small">{{ item.name }}</span>
                            </div>
                        </div> -->
                        <!-- 外层容器设置为居中（小屏居中，大屏默认） -->
                        <div class="d-flex flex-wrap justify-content-center justify-content-md-start gap-3">
                            <div class="d-flex flex-column align-items-center"
                                v-for="(item, index) in companyInfo.qrCodeList" :key="index">
                                <img :src="item.url" alt="云游四方" class="img-fluid mb-2"
                                    style="width: 80px; height: 80px; object-fit: cover;" />
                                <span class="text-muted small text-center">{{ item.name }}</span>
                            </div>
                        </div>


                    </div>
                </div>

@@ -214,7 +291,7 @@
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount ,nextTick} from 'vue'
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { CarouselItem, CooperativeClient, ProductCenter, CompanyInfo, Products, ProductGroup } from '@/models/portalModels';
import { useRoute, useRouter } from 'vue-router';

@@ -286,30 +363,43 @@

const isMobile = ref<boolean>(false) //

// 点击卡片
const handleCardClick = (item: Products) => {
    // 跳转到 /product 页面，并将item传递过去
    router.push({
        path: '/product',
        query: {
            title: item.title,
            desc: item.desc,
            imgUrl: item.imgUrl
        }
    });

}


// 初始化时设置高度
onMounted(() => {

    updateCarouselHeight();
    window.addEventListener('resize', updateCarouselHeight);

    intervalId = window.setInterval(updateIndex, 2000); // 每 1 秒执行一次
    intervalId = window.setInterval(updateIndex, 5000); // 每 1 秒执行一次

    productIntervalId = window.setInterval(updateProductIndex, 2000); // 每 1 秒执行一次

    productGroupsIntervalId = window.setInterval(updateProductGroupsIndex, 2000); // 每 1 秒执行一次

    // productGroupsIntervalId = window.setInterval(updateProductGroupsIndex, 2000); // 每 1 秒执行一次
    // productIntervalId = window.setInterval(updateProductIndex, 2000); // 每 1 秒执行一次

    isMobile.value =
    'ontouchstart' in window ||
    navigator.userAgent.toLowerCase().includes('mobi')
        'ontouchstart' in window ||
        navigator.userAgent.toLowerCase().includes('mobi')

});

// 清理事件监听
onBeforeUnmount(() => {
    window.removeEventListener('resize', updateCarouselHeight);
     // 清理定时任务
     if (intervalId) {
    // 清理定时任务
    if (intervalId) {
        window.clearInterval(intervalId);
    }
    if (productIntervalId) {
@@ -523,8 +613,9 @@
    flex-direction: column;
    gap: 10px;
}

.xuanfu {
  width: 30px;
  height: 30px;
    width: 30px;
    height: 30px;
}
</style>