hxj/src/pages/index/hxj_index_component.vue

<template>
	<view style="background-color: #FEFFFE;">
		<view class="swiper_cent">
			<swiper style="height: 900rpx;" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000"
				@change="swiperChange">
				<swiper-item v-for="(item,index) in 3" :key="index">
					<image src="https://t17.9026.com/web/statics/image/index/1.png" style="width: 100%;height: 900rpx;"
						mode=""></image>
				</swiper-item>
			</swiper>
			<view class="swiper_zhishi">
				<view :class="swiperKey===i?'view_active':''" v-for="(item1,i) in 3" :key="i"></view>
			</view>

		</view>
		<view class="link">
			<view>
				<view class="title">人居 · 荟享家<image class="hxjImg"
						src="https://t17.9026.com/web/statics/image/index/HUIXIANGJIA.png" mode=""></image>
				</view>
			</view>
		</view>
		<app-scroll-list :list="list"></app-scroll-list>
		<view class="link">
			<view class="title1">本期家点灵感</view>
			<image class="tyx" src="https://t17.9026.com/web/statics/image/index/tyx.png" mode=""></image>
			<image class="d6" src="https://t17.9026.com/web/statics/image/index/6d.png" mode=""></image>
			<view class="subtitle">臻选整装 · 安全无甲醛 · 7天入住</view>
		</view>
		<view class="lg_list">
			<view class="item" v-for="(item,index) in jdlg" :key="index"
				@click="goPage('/pages/case/projectInfo?id=9')">
				<image class="imgBox" :src="`https://t17.9026.com/web/statics/image/index/${item.cover_image}.png`">
				</image>
				<view class="b_card main-between">
					<view class="left">
						<view class="title">{{item.title}}</view>
						<view class="desc">{{item.sub_title}}</view>
					</view>
					<view class="right">
						<view class="price"><text class="rmb">￥</text><text>{{item.price}}</text><text
								class="dw">元</text></view>
					</view>
				</view>
			</view>
			<view class="more">
				<view>VIEW MORE</view>
				<view>
					<image src="https://t17.9026.com/web/statics/image/index/viewmore.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="link ">
			<view class="title1 main-left cross-center">优惠券<image class="coupon_1"
					src="https://t17.9026.com/web/statics/image/index/coupon_1.png" mode=""></image><text
					class="coupon_sub">RECOMMEND</text></view>

		</view>
		<view class="coupon main-left">
			<view class="item main-left" v-for="(item,index) in 2" :key="index">
				<view class="Wb">
					<view>
						<view class="title_2">定制优享礼券 <text class="hjx-tc-B19D60 hjx-ts-21 hxj-ml-10">立即领取</text></view>
						<view class="desc_2">新用户礼遇</view>
					</view>
					<view>
						<view class="price"><text>￥</text>100</view>
						<view class="yxq">有效期至2021-12-31</view>
					</view>
				</view>
			</view>
		</view>
		<view class="link mt_20">
			<view class="title1">荟享定制<image class="coupon_1"
					src="https://t17.9026.com/web/statics/image/index/coupon_1.png" mode="">
				</image><text class="coupon_sub">HUIXIANG</text></view>

		</view>
		<view class="hxdz">
			<view class="main-left q">
				<view class="l">
					<view class="title_2">明星套装</view>
					<view class="desc_2">自然高端好家居</view>
					<image src="https://t17.9026.com/web/statics/image/index/4.png" mode=""></image>
				</view>
				<view class="main-between-y">
					<view class="r1" @click="goPage('/pages/case/selectedCases')">
						<view class="title_2">优选</view>
						<view class="desc_2">优选家居</view>
						<image src="https://t17.9026.com/web/statics/image/index/5.png" mode=""></image>
					</view>
					<view class="r2">
						<view class="title_2">专属</view>
						<view class="desc_2">定制精品</view>
						<image src="https://t17.9026.com/web/statics/image/index/6.png" mode=""></image>
					</view>
				</view>
			</view>
			<scroll-view scroll-x="true">
				<view class="main-left w">
					<view class="item" v-for="(item,index) in qwe" :key="index">
						<image class="borradu_20"
							:src="`https://t17.9026.com/web/statics/image/index/temporary/${item.cover_image}.png`"
							mode=""></image>
						<view class="title_2">{{item.title}}</view>
						<view class="desc_2">独到品味的代表备份</view>
					</view>
				</view>
			</scroll-view>
			<!-- <view class="more">
				<view class="viewmore1_color">查看更多</view>
				<view class="viewmore1_color">VIEW MORE</view>
				<view>
					<image class="viewmore1" src="https://t17.9026.com/web/statics/image/index/viewmore1.png" mode=""></image>
				</view>
			</view> -->
		</view>
		<view class="main-between link mt_20">
			<view class="title1">
				限时团购
				<image class="coupon_1"
					src="https://t17.9026.com/web/statics/image/index/coupon_1.png" mode="">
				</image>
				<text class="coupon_sub">TUANGOU</text>
			</view>
			<view class="link-more" @click="goPage('/plugins/pt/index/index')">
				查看更多<image src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png" mode=""></image>
			</view>
		</view>

		<view class="group_list">
			<swiper style="height: 606rpx;" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000"
				previous-margin="75rpx" next-margin="75rpx">
				<swiper-item class="" v-for="(item,index) in 3" :key="index"
					@click="goPage('/plugins/pt/goods/goods?goods_id=29')">
					<view class="item">
						<view class="imgBox">
							<image class="img" src="https://t17.9026.com/web/statics/image/index/3.png"></image>
						</view>
						<view class="b_card main-between">
							<view class="main-left cross-center left">
								<view class="i">02</view>
								<view class="q">:</view>
								<view class="i">24</view>
								<view class="q">:</view>
								<view class="i">45</view>
							</view>
							<view class="right">
								<view class="price"><text class="rmb">￥</text><text>56800</text><text
										class="dw">元</text></view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="link main-left">
			<view class="title1" style="margin-right: 61rpx;">荟享自营</view>
			<view class="title1" style="margin-right: 61rpx;color: #A7A7A7;">精选类别</view>
			<view class="title1" style="margin-right: 61rpx;color: #A7A7A7;">精选类别</view>
			<view class="title1" style="margin-right: 61rpx;color: #A7A7A7;">精选类别</view>
			<image class="tyx" src="https://t17.9026.com/web/statics/image/index/tyx.png" mode=""></image>
		</view>
		<view class="hxzy">
			<view class="top">
				<image
					style="width: 560rpx;height: 270rpx;border-radius: 20rpx 0 0 0;position: absolute;top: 0;right: 0;"
					src="https://t17.9026.com/web/statics/image/index/9.png" mode=""></image>
				<view class="dbo main-between-y">
					<view>
						<view class="text">decoration荟享自营</view>
						<view class="text">心至所向·渐入家境</view>
					</view>
					<view class="category">2930人已收藏</view>
				</view>
			</view>
			<view class="dir-left-wrap bottom">
				<view class="item" v-for="(item,index) in 4" :key="index"
					@click="goPage(`/pages/goods/goods?id=${18+index}`)">
					<view>
						<image class="cover" :src="`https://t17.9026.com/web/statics/image/index/${index+10}.png`"
							mode=""></image>
					</view>
					<view class="title_2">马蒂斯系列 烟灰缸/首饰盘</view>
					<view class="desc_2">细节控 · 创意</view>
					<view class="price" style="margin-top: 27rpx;"><text class="rmb">￥</text><text>258</text><text
							class="dw">元</text></view>
				</view>
			</view>
			<view class="more1" @click="goPage('/pages/cats/cats')">
				<view class="viewmore1_color main-center cross-center">更多荟享<image class=""
						src="https://t17.9026.com/web/statics/image/index/viewmore1.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="bottom_logo">
			<image src="https://t17.9026.com/web/statics/image/index/bottom_logo.png" mode=""></image>
			<view class="text">home shopping mall</view>
		</view>
	</view>
</template>

<script>
	import appScrollList from './components/scroll-list.vue'
	export default {
		components: {
			appScrollList
		},
		props:{
			homePages: {
			  type: Object,
			  default() {
			    return {
			      navs: [],
			    };
			  },
			},
		},
		data() {
			return {
				swiperKey: 0, //轮播位置
				list: [

					{
						image: 'https://t17.9026.com/web/statics/image/index/temporary/jhk-1634283687206.png',
						title: '热销方案',
						tag: '热销',
						link: '/pages/case/hot_sale_project'
					},
					{
						image: 'https://t17.9026.com/web/statics/image/index/temporary/jhk-1634284372084.png',
						title: '主题专区',
						tag: '主题',
						link: '/pages/case/themeArea'
					},
					{
						image: 'https://t17.9026.com/web/statics/image/index/temporary/jhk-1634283667210.png',
						title: '定制产品',
						tag: '定制',
						link: ''
					},
					{
						image: 'https://t17.9026.com/web/statics/image/index/2.png',
						title: '明星套装',
						tag: '套装'
					}
				],
				jdlg: [{
						title: '兴城人居ins风套装',
						sub_title: '细节控·轻奢风',
						price: '65622',
						cover_image: '3',
					},
					{
						title: '风创造「最大坪效」85m²MUJI',
						sub_title: '细节控·轻奢风',
						price: '7486',
						cover_image: 'temporary/jhk-1634283447190'
					},
					{
						title: '85m²MUJI风创造「最大坪效」',
						sub_title: '细节控·轻奢风',
						price: '27853',
						cover_image: 'temporary/jhk-1634284367308'
					}
				],
				qwe: [{
					'title': '兴城人居',
					'cover_image': 'jhk-1634283667210'
				}, {
					'title': '世龙广场',
					'cover_image': 'jhk-1634284372084'
				}, {
					'title': '新中式',
					'cover_image': 'jhk-1634283687206'
				}]

			}
		},
		created() {
			this.$store.dispatch('user/isEnterSales', false);
		},
		methods: {
			swiperChange(e) {
				console.log(e.detail.current)
				this.swiperKey = e.detail.current
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';

	.swiper_cent {
		position: relative;

		.swiper_zhishi {
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: center;
			position: absolute;
			bottom: 39rpx;

			view {
				width: 81rpx;
				height: 4rpx;
				background: #c8c8c8;
			}

			.view_active {
				background: #f4f4f4;
			}
		}
	}
</style>