master

分支 (1)

管理

管理

master

more-page-move
/
classify.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <title>微商城移动端</title>
    <!-- 引入动画库 -->
    <link rel="stylesheet" href="css/animate.min.css">

    <!-- 引入bootstrap核心css文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- swiper -->
    <link rel="stylesheet" href="css/swiper-bundle.min.css">

    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!-- 引入重置样式文件 -->
    <link rel="stylesheet/less" href="css/reset.less">

    <!-- 引入公共样式 -->
    <link rel="stylesheet/less" href="css/common.less">

    <!-- 页面单独样式文件 -->
    <link rel="stylesheet/less" href="css/classify.less">
</head>

<body>
    <!-- 最大容器 -->
    <div class="warp" id="app">
        <!-- 头部 -->
        <header>
            <!-- 导航 -->
            <img id="logo" src="./images/logo.png">
            <div class="inp"><img id="search" src="./images/search.png"><input type="text" placeholder="请输入关键字"></div>
            <img id="user" src="./images/user.png">
        </header>
        <!-- main -->
        <main>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="推荐分类" name="first">
                    <el-tabs :tab-position="tabPosition" style="height: calc(100vh - .88rem - .97rem - 56px);">
                        <el-tab-pane label="女装类品">
                            <div class="content">
                                <!-- <div class="brandList">
                                    <img src="./images/brand.jpg">
                                    <img src="./images/brand.jpg">
                                    <img src="./images/brand.jpg">
                                </div> -->
                                <div class="hotType">
                                    <h3>热门分类</h3>
                                    <div class="hotList">
                                        <div class="hotItem">
                                            <img src="./images/clothes1.jpg">
                                            <span>针织衫</span>
                                        </div>
                                        <div class="hotItem">
                                            <img src="./images/clothes2.jpg">
                                            <span>短外套</span>
                                        </div>
                                        <div class="hotItem">
                                            <img src="./images/clothes3.jpg">
                                            <span>风衣</span>
                                        </div>
                                        <div class="hotItem">
                                            <img src="./images/clothes4.jpg">
                                            <span>毛呢外套</span>
                                        </div>
                                        <div class="hotItem">
                                            <img src="./images/clothes5.jpg">
                                            <span>衬衫</span>
                                        </div>
                                        <div class="hotItem">
                                            <img src="./images/clothes6.jpg">
                                            <span>T恤</span>
                                        </div>
                                        <div class="hotItem">
                                            <img src="./images/clothes7.jpg">
                                            <span>连衣裙</span>
                                        </div>
                                        <div class="hotItem">
                                            <img src="./images/clothes8.jpg">
                                            <span>半身裙</span>
                                        </div>
                                        <div class="hotItem">
                                            <img src="./images/clothes9.jpg">
                                            <span>百褶裙</span>
                                        </div>
                                        <div class="hotItem">
                                            <img src="./images/clothes10.jpg">
                                            <span>牛仔裤</span>
                                        </div>
                                        <div class="hotItem">
                                            <img src="./images/clothes11.jpg">
                                            <span>背带裤</span>
                                        </div>
                                        <div class="hotItem">
                                            <img src="./images/clothes12.jpg">
                                            <span>短裙</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="品牌男装">品牌男装</el-tab-pane>
                        <el-tab-pane label="美妆分类">美妆分类</el-tab-pane>
                        <el-tab-pane label="家用电器">家用电器</el-tab-pane>
                        <el-tab-pane label="电子产品">电子产品</el-tab-pane>
                        <el-tab-pane label="居家生活">居家生活</el-tab-pane>
                        <el-tab-pane label="母婴童装">母婴童装</el-tab-pane>
                        <el-tab-pane label="图书音像">图书音像</el-tab-pane>
                        <el-tab-pane label="生鲜美食">生鲜美食</el-tab-pane>
                        <el-tab-pane label="潮流配饰">潮流配饰</el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
                <el-tab-pane label="推荐品牌" name="second">
                    <el-tabs :tab-position="tabPosition" style="height: calc(100vh - .88rem - .97rem - 56px);">
                        <el-tab-pane label="阿迪达斯">阿迪达斯</el-tab-pane>
                        <el-tab-pane label="耐克">耐克</el-tab-pane>
                        <el-tab-pane label="老人头">老人头</el-tab-pane>
                        <el-tab-pane label="鸿星尔克"></el-tab-pane>
                        <el-tab-pane label="361">361</el-tab-pane>
                        <el-tab-pane label="特步">特步</el-tab-pane>
                        <el-tab-pane label="椰子">椰子</el-tab-pane>
                      </el-tabs>
                </el-tab-pane>
            </el-tabs>
        </main>

        <!-- footer -->
        <footer>
            <a class="bar" href="./index.html">
                <img src="./images/home.png">
                <span>首页</span>
            </a>
            <a class="bar" href="#">
                <img src="./images/type.png">
                <span>分类</span>
            </a>
            <a class="bar" href="./activity.html">
                <img src="./images/activity.png">
                <span>活动</span>
            </a>
            <a class="bar" href="./car.html">
                <img src="./images/car.png">
                <span>购物车</span>
            </a>
            <a class="bar" href="./user.html">
                <img src="./images/user2.png">
                <span>用户中心</span>
            </a>
        </footer>
    </div>
</body>

</html>
<!-- 引入jq -->
<script src="js/jquery-3.5.1.min.js"></script>

<!-- 引入bootstrap.js -->
<script src="js/bootstrap.min.js"></script>

<!-- swiper -->
<script src="js/swiper-bundle.min.js"></script>

<!-- 引入wow -->
<script src="js/wow.min.repeat.js"></script>

<!-- 引入less -->
<script src="js/less-4.1.3.js"></script>
<!-- 引入公共js -->
<script src="./js/common.js"></script>

<!-- 引入vue -->
<script src="./js/vue.js"></script>
<!-- 引入组件库 -->
<script src="./js/element-ui.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                activeName: 'first',
                tabPosition: 'left',
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    })
</script>