<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></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 3" :key="index">
				<image class="imgBox" src="https://t17.9026.com/web/statics/image/index/3.png"></image>
				<view class="b_card main-between">
					<view class="left">
						<view class="title">85m²MUJI风创造「最大坪效」</view>
						<view class="desc">细节控·轻奢风</view>
					</view>
					<view class="right">
						<view class="price"><text class="rmb">￥</text><text>56800</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">定制优享礼券</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 3" :key="index">
						<image class="borradu_20" src="https://t17.9026.com/web/statics/image/index/7.png" mode=""></image>
						<view class="title_2">定制主题占位符</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="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>

		<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">
					<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">
					<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">
				<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
		},
		data() {
			return {
				swiperKey: 0, //轮播位置
			}
		},
		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>
