现成的组件 直接用

<template><view style="margin: 10rpx;"><view class="tea-header"><text class="tea-title">礼尚往来</text><view class="tea-view-all"><text>查看全部</text><text>></text></view></view><view style="display: flex;justify-content: center;align-content: center;"><NavBar :navItems="myNavItems" :text_padding="12" :fontSize="30" :dynamicHeight="8" :indicatorWidth="64"@item-selected="onItemSelected" /></view><view class="content-wrapper" style="position: relative; overflow: hidden;"><view v-for="(vla, i) in products" :key="i" :class="['content-page', getPageClass(i)]"><!-- 左边轮播图 --><view class="left-container"><swiper class="swiper-container" indicator-dots="true" indicator-active-color="#ffffff"indicator-color="#fff9" autoplay="true" interval="3000" circular="true"><swiper-item v-for="(item, index) in vla.bannerImages" :key="index"><image class="swiper-image" mode="aspectFill" :src="item.src" /></swiper-item></swiper></view><!-- 右边商品网格 --><view class="right-container"><view class="product-item" v-for="(item, index) in vla.list" :key="index"><image class="product-image" :src="item.image" mode="aspectFill" /><view style="display: flex;align-items: flex-start; flex-direction: column; "><text class="product-title" style="">{{ item.title }}</text><text class="product-price">{{ item.price }}</text></view></view></view></view></view></view>
</template><script>
import NavBar from './components/xztdemoNavBar.vue'export default {components: {NavBar},data() {return {myNavItems: ['关怀领导', '探望长辈', '关爱女性', '男性健康', '关爱儿童',],selectedIndex: 0,products: [{bannerImages: [{src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',},{src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',},{src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960'}],list: [{image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',title: '人参灵芝胶囊',price: '¥798.00'},{image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',title: 'KMax康麦斯',price: '¥698.00'},{image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',title: '海参礼盒',price: '¥1798.00'},{image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',title: '虫草',price: '¥798.00'},]},{bannerImages: [{src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',},{src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',},{src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960'}],list: [{image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',title: '人参灵芝胶囊1232123',price: '¥798.00'},{image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',title: 'KMax康麦斯3333',price: '¥698.00'},{image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',title: '海参礼盒12132',price: '¥1798.00'},{image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',title: '虫草123',price: '¥798.00'},]},]}},methods: {onItemSelected(index) {this.selectedIndex = index;},getPageClass(index) {if (index === this.selectedIndex) {return 'active';} else if (index < this.selectedIndex) {return 'left';} else {return 'right';}}}
}
</script><style>
.tea-header {display: flex;justify-content: space-between;align-items: center;padding: 15rpx 20rpx;
}.tea-title {font-size: 32rpx;font-weight: bold;font-family: PingFang SC, PingFang SC;
}.tea-view-all {color: #6E6E6E;font-size: 24rpx;
}.content-wrapper {height: 300px; /* 根据需要调整高度 */
}.content-page {position: absolute;width: 100%;height: 100%;top: 0;left: 0;transition: all 0.3s ease;opacity: 0;transform: translateX(100%);display: flex;
}.content-page.active {opacity: 1;transform: translateX(0);
}.content-page.left {transform: translateX(-100%);
}.content-page.right {transform: translateX(100%);
}.left-container {flex: 1;height: 100%;margin-right: 10px;
}.swiper-container {width: 100%;height: 100%;
}.swiper-image {width: 100%;height: 100%;border-radius: 10px;transform: scaleX(-1);object-fit: cover;
}.right-container {flex: 1;display: grid;grid-template-columns: 1fr 1fr;gap: 5px;
}.product-item {display: flex;flex-direction: column;background-color: #fff;border-radius: 10px;/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}.product-image {width: 100%;height: 100px;object-fit: cover;border-radius: 10px;margin-bottom: 5px;
}.product-title {font-size: 14px;color: #333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 6em;/* 估算一个宽度，大约5个字 */
}.product-price {font-size: 16px;color: #FF6A22;
}
</style>