<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://www.thymeleaf.org ">
<head>
    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
    <template th:replace="components/head-link"></template>
    <link th:href="@{/css/index/index.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
    <link th:href="@{/css/index/index.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>

<!-- 首页 -->
<div id="container">
    <!--首页图片轮播-->
    <div id="swiper-container" class="swiper-container">
        <ul class="swiper-wrapper">
            <li class="swiper-slide mfc" v-for="img in images">
                <a :href="img.link"><img :src="img.image" :alt="img.title"></a>
            </li>
        </ul>
        <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in images.length"></span></div>
        <a class="swiper-button-prev" href="javascript:void(0)"></a>
        <a class="swiper-button-next" href="javascript:void(0)"></a>
    </div>
    <!--移动端首页导航-->
    <div class="mNavBox h5Only">
        <ul class="mfw">
            <!--导航菜单-->
            <li class="first" th:each="menu: ${topMenuList}">
                <a th:if="${menu.link}" class="nav mIcon" th:href="${menu.link}"><span th:text="${menu.name}"></span></a>
                <a th:unless="${menu.link}" class="nav mIcon" href="javascript:void(0);" @click="showSubNav($event)">
                    <span th:text="${menu.name}"></span>
                </a>
                <div class="navItem" th:if="${not #lists.isEmpty(menu.subMenus)}">
                    <div class="mfw">
                        <a class="second" th:each="sub: ${menu.subMenus}" th:href="${sub.link}">
                            <img th:src="${sub.image}">
                            <span th:text="${sub.name}"></span>
                        </a>
                    </div>
                </div>
            </li>
            <li class="first"><a class="nav mIcon" href="/repair.html"><span>维修</span></a></li>
        </ul>
    </div>
    <!--页面主体数据-->
    <div class="wrap">
        <div>
            <div class="floorTit toLogin">
                <h2 v-for="item in pageFloors" v-if="item.type==1" v-text="item.title" data-id="1"></h2>
                <h2 v-else-if="pageFloors.length==0" data-id="1">推荐专区</h2>
            </div>
            <div class="floorCon">
                <div id="recommendBox" class="swiper-container">
                    <ul class="swiper-wrapper" v-cloak>
                        <li class="swiper-slide productItem mfc" v-for="p in recommends">
                            <div class="item">
                                <a class="image" :href="'/product-'+p.id+'.html'" target="_blank">
                                    <img :src="p.image" :alt="p.name">
                                    <span v-if="p.actType==1||p.actType==2" :class="p.actType==1?'icon mIcon hot':'icon mIcon new'"></span>
                                </a>
                                <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
                                    <span v-html="p.name"></span>
                                </a>
                                <div class="price mfhc">
                                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
                                        <template v-if="p.priceFlag==1">
                                            <em>￥价格未公开</em>
                                            <div class="btnBox">
                                                <a href="javascript:void(0)" class="btn cat">价格未公开，请联系 0755-22907771</a>
                                            </div>
                                        </template>
                                        <template v-else>
                                            <template v-if="p.priceFlag==0 || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
                                                <em class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
                                            </template>
                                            <template v-else-if="p.priceFlag==2 && p.userIdentity!=2">
                                                <em>￥会员可见</em>
                                                <div class="btnBox">
                                                    <a href="/upgrade.html" class="btn">升级会员查看价格</a>
                                                </div>
                                            </template>
                                            <template v-else>
                                                <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
                                            </template>
                                        </template>
                                    </template>
                                    <template v-else>
                                        <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
                                        <div class="btnBox"><a href="javascript:void(0)" class="btn add toLogin">登录查看价格</a></div>
                                    </template>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
                </div>
            </div>
        </div>
        <div v-for="item in pageFloors">
            <div v-if="item.type==6">
                <!--大专题-->
                <div v-for="bigTopic in item.subFloors">
                    <div class="floorTit">
                        <h3 v-text="bigTopic.title" :data-id="'6-'+bigTopic.id"></h3>
                        <h5 v-text="bigTopic.detail"></h5>
                    </div>
                    <div class="floorCon">
                        <ul class="floorList clear mfw">
                            <li v-for="floor in bigTopic.floorData" style="display: inline-block">
                                <a :href="floor.link">
                                    <img :src="floor.image" :alt="floor.title">
                                    <p v-text="floor.title"></p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div v-if="item.type==4">
                <div class="floorTit">
                    <h2 v-text="item.title" data-id="4">专题</h2>
                    <a class="more" href="/promotions.html">更多商品专题</a>
                </div>
                <div class="floorCon">
                    <div id="goodsTopic" class="swiper-container">
                        <ul class="swiper-wrapper" v-cloak>
                            <li class="swiper-slide mfc" v-for="topic in item.floorData">
                                <a :href="topic.link">
                                    <img :src="topic.image" :alt="topic.title">
                                </a>
                            </li>
                        </ul>
                        <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in item.floorData.length"></span></div>
                        <a class="swiper-button-prev" href="javascript:void(0)"></a>
                        <a class="swiper-button-next" href="javascript:void(0)"></a>
                    </div>
                </div>
            </div>
            <div v-if="item.type==5" class="floorCon smallTopic">
                <!--小专题-->
                <ul class="mfw">
                    <li v-for="topic in item.floorData" style="display: inline-block">
                        <a :href="topic.link">
                            <img :src="topic.image" :alt="topic.title">
                            <p v-text="topic.title"></p>
                        </a>
                    </li>
                </ul>
            </div>
            <div v-if="item.type==3">
                <div class="floorTit">
                    <h2 v-text="item.title" data-id="3">优质供应商</h2>
                    <h5>采美正品联盟 质量保证</h5>
                </div>
                <div class="floorCon">
                    <div class="supplierList">
                        <ul class="clear mfw">
                            <li><img src="/img/common/goodsup.png"/></li>
                            <li v-for="topic in item.floorData" style="display: inline-block">
                                <a :href="topic.link">
                                    <img :src="topic.image" :alt="topic.title">
                                    <p v-text="topic.title"></p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--右侧边栏导航-->
    <div id="sideNav">
        <div class="item">
            <a v-for="nav in asideNav" :data-id="nav.id" v-text="nav.value" href="javascript:void(0);"></a>
        </div>
    </div>
    <!--左侧广告图-->
    <div id="advertising">
        <div class="item" v-for="ad in advertising">
            <a href="javascript:void(0);">
                <img :src="ad.image" :alt="ad.title">
            </a>
            <span class="close"></span>
        </div>
    </div>
</div>

<!-- 引入底部 -->
<template th:replace="components/footer"></template>
<template th:replace="components/foot-link"></template>
<script charset="utf-8" type="text/javascript" th:src="@{/js/index.js(v=${version})}"></script>
</body>
</html>
