Vue小兔鲜项目案例

1 下载地址

https://download.youkuaiyun.com/download/weixin_44201223/90232211

2 项目展示

3 项目代码

XtxShortCut.vue

<template>
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a href="#" class="login">请先登录</a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">会员中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">在线客服</a></li>
                <li>
                    <a href="#"><span class="iconfont icon-mobile-phone"></span>手机版</a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
     
     

}
</script>

<style>
.shortcut {
     
     
    height: 52px;
    line-height: 52px;
    background-color: #333;
}

.shortcut .wrapper {
     
     
    display: flex;
    justify-content: flex-end;
}

.shortcut ul {
     
     
    display: flex;
}

.shortcut a {
     
     
    padding: 0 15px;
    border-right: 1px solid #999;
    color: #fff;
    font-size: 14px;
    line-height: 14px;
}

.shortcut .login {
     
     
    color: #5EB69C;
}

.shortcut .icon-mobile-phone {
     
     
    margin-right: 5px;
}
</style>

XtxHeaderNav.vue

<template>
    <div class="header wrapper">
        <!-- logo -->
        <div class="logo">
            <h1>
                <a href="#">小兔鲜儿</a>
            </h1>
        </div>
        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">生鲜</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">餐厨</a></li>
                <li><a href="#">电器</a></li>
                <li><a href="#">居家</a></li>
                <li><a href="#">洗护</a></li>
                <li><a href="#">孕婴</a></li>
                <li><a href="#">服装</a></li>
            </ul>
        </div>
        <!-- 搜索 -->
        <div class="search">
            <span class="iconfont icon-search"></span>
            <input type="text" placeholder="搜一搜" />
        </div>
        <!-- 购物车 -->
        <div class="cart">
            <span class="iconfont icon-cart-full"></span>
            <i>2</i>
        </div>
    </div>
</template>

<script>
export default {
     
     

}
</script>

<style>
.header {
     
     
    display: flex;
    margin: 22px auto;
}

.header .logo {
     
     
    margin-right: 40px;
    width: 200px;
    height: 88px;
    background-color: pink;
}

.header .logo a {
     
     
    display: block;
    width: 200px;
    height: 88px;
    background-image: url(~@/assets/images/logo.png);
    font-size: 0;
}

.header .nav {
     
     
    margin-top: 33px;
    margin-right: 27px;
}

.header .nav ul {
     
     
    display: flex;
}

.header .nav li {
     
     
    margin-right: 48px;
}

.header .nav a {
     
     
    display: block;
    height: 34px;
}

.header .nav a:hover {
     
     
    border-bottom: 2px solid #5EB69C;
}

.header .search {
     
     
    display: flex;
    margin-right: 45px;
    margin-top: 33px;
    width: 170px;
    height: 34px;
    border-bottom: 2px solid #F4F4F4;
}

.header .search .icon-search {
     
     
    margin-right: 8px;
    font-size: 20px;
    color: #999;
}

.header .search input {
     
     
    flex: 1;
}

.header .search input::placeholder {
     
     
    color: #ccc;
}

.header .cart {
     
     
    position: relative;
    margin-top: 33px;
}

.header .cart .icon-cart-full {
     
     
    font-size: 24px;
}

.header .cart i {
     
     
    position: absolute;
    /* right: -5px; */
    left: 15px;
    top: 0;
    padding: 0 5px;
    height: 15px;
    background-color: #E26237;
    border-radius: 7px;
    font-size: 12px;
    color: #fffefe;
    line-height: 15px;
}
</style>

XtxBanner.vue

<template>
    <div class="banner">
        <div class="wrapper">
            <!-- 图 -->
            <ul class="pic">
                <li>
                    <a href="#"><img src="@/assets/images/banner1.png" alt="" /></a>
                </li>
                <li>
                    <a href="#"><img src="@/assets/images/banner1.png" alt="" /></a>
                </li>
            </ul>
            <!-- 侧导航 -->
            <div class="subnav">
                <ul>
                    <li>
                        <div>
                            <span><a href="#">生鲜</a></span>
                            <span><a href="#">水果</a><a href="#">蔬菜</a></span>
                        </div>
                        <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                        <div>
                            <span><a href="#">美食</a></span>
                            <span><a href="#">面点</a><a href="#">干果</a></span>
                        </div>