• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

vue+element实现商城网站首页,模仿电商商城

武飞扬头像
愛芳芳
帮助6

1.安装启动vue项目可参考

vue element简单实现商城网站首页,模仿小米电商商城学新通https://blog.csdn.net/lucky_fang/article/details/121544242

 本项目源码下载学新通https://download.csdn.net/download/lucky_fang/85161752

2.产品效果图

学新通学新通 学新通

学新通

3.项目结构图

学新通

4.src/page/top/index.vue 

  1.  
    <template>
  2.  
    <div style="border-bottom: 1px solid #dfdfdf;font-size: 14px;">
  3.  
    <div style="display: flex;height: 40px;padding: 0 200px;background-color: #19b4ea;">
  4.  
    <div class="top-title" style="padding-right: 20px;border-right: 1px solid rgb(230 230 230 / 40%);line-height: 40px;color: #FFFFFF;">手机版</div>
  5.  
    <div class="top-title" style="padding-right: 20px;border-right: 1px solid rgb(230 230 230 / 40%);line-height: 40px;color: #FFFFFF;margin-left: 20px;">留言反馈</div>
  6.  
    <div class="top-title" style="padding-right: 20px;border-right: 1px solid rgb(230 230 230 / 40%);line-height: 40px;color: #FFFFFF;margin-left: 20px;">会员中心</div>
  7.  
    <div class="top-title" style="line-height: 40px;color: #FFFFFF;margin-left: 20px;">收藏本站</div>
  8.  
    <div style="flex: 1;display: flex;">
  9.  
    <div style="flex: 1;"></div>
  10.  
    <div style="width: 170px;display: flex;">
  11.  
    <el-button type="text" style="color: #FFFFFF;" class="top-title">登录</el-button>
  12.  
    <el-button type="text" style="color: #FFFFFF;margin-right: 10px;" class="top-title">注册</el-button>
  13.  
    <div style="background-color: rgb(223 221 221 / 40%);display: flex;width: 100px;padding: 0 10px;" class="top-title">
  14.  
    <img src="../../../public/img/shop_car.png" style="width: 20px;height: 20px;margin-top: 10px;margin-right: 5px;">
  15.  
    <el-button type="text" style="color: #FFFFFF;" class="top-title">购物车</el-button>
  16.  
    </div>
  17.  
    </div>
  18.  
     
  19.  
    </div>
  20.  
    </div>
  21.  
    <div style="margin: 0 200px;height: 80px;line-height: 80px;">
  22.  
    <div style="display: flex;">
  23.  
    <img src="../../../public/img/logo.jpeg" style="cursor: pointer;height: 60px;margin-top: 10px;">
  24.  
    <div class="title" style="margin-right: 20px;cursor: pointer;color: gray;margin-left: 30px;">首页</div>
  25.  
    <div class="title" style="margin-right: 20px;cursor: pointer;color: gray;">电子数码</div>
  26.  
    <div class="title" style="margin-right: 20px;cursor: pointer;color: gray;">家居百货</div>
  27.  
    <div class="title" style="margin-right: 20px;cursor: pointer;color: gray;">母婴用品</div>
  28.  
    <div class="title" style="margin-right: 20px;cursor: pointer;color: gray;">关于我们</div>
  29.  
    <div class="title" style="margin-right: 20px;cursor: pointer;color: gray;">联系我们</div>
  30.  
    <div style="flex: 1;text-align: right;">
  31.  
    <el-input placeholder="请输入内容" v-model="input" style="width: 300px;">
  32.  
    <el-button slot="append" icon="el-icon-search"></el-button>
  33.  
    </el-input>
  34.  
    </div>
  35.  
    </div>
  36.  
    </div>
  37.  
    </div>
  38.  
    </template>ge
  39.  
     
  40.  
    <script>
  41.  
    export default {
  42.  
    data() {
  43.  
    return {
  44.  
    input:''
  45.  
    };
  46.  
    },
  47.  
    mounted() {
  48.  
    },
  49.  
    methods: {
  50.  
    homePage(){
  51.  
    this.$router.push({path: '/home/index'});
  52.  
    },
  53.  
    }
  54.  
    };
  55.  
    </script>
  56.  
     
  57.  
    <style>
  58.  
    .top-title:hover{
  59.  
    cursor: pointer;
  60.  
    color: #e5e5e5!important;
  61.  
    }
  62.  
    .title{
  63.  
    font-weight: bold;
  64.  
    font-size: 18px;
  65.  
    }
  66.  
    .title:hover{
  67.  
    color: #c250c6!important;
  68.  
    }
  69.  
    </style>
学新通

5.src/page/index/index.vue

  1.  
    <template>
  2.  
    <div id="body" style="width: 100%;height: 100%;overflow: auto;">
  3.  
    <top></top>
  4.  
    <router-view></router-view>
  5.  
    <foot></foot>
  6.  
    </div>
  7.  
    </template>
  8.  
     
  9.  
    <script>
  10.  
    import top from "../top/index.vue";
  11.  
    import foot from "../foot/index";
  12.  
     
  13.  
    export default {
  14.  
    components: {
  15.  
    top,
  16.  
    foot
  17.  
    },
  18.  
    name: "index",
  19.  
    data() {
  20.  
    return {
  21.  
    };
  22.  
    },
  23.  
    mounted() {
  24.  
    },
  25.  
    methods: {
  26.  
    }
  27.  
    };
  28.  
    </script>
  29.  
     
  30.  
    <style>
  31.  
    #body{
  32.  
    background-size: 100% 100%;
  33.  
    background-repeat: no-repeat;
  34.  
    }
  35.  
    </style>
学新通

6.src/page/foot/index.vue

  1.  
    <template>
  2.  
    <div style="font-size: 14px;">
  3.  
    <div style="margin: 50px 200px 50px 200px;">
  4.  
    <div style="display: flex;">
  5.  
    <div style="flex: 1;display: flex;">
  6.  
    <div style="">
  7.  
    <div class="foot-title">帮助中心</div>
  8.  
    <div class="foot-item">账户管理</div>
  9.  
    <div class="foot-item">购物指南</div>
  10.  
    <div class="foot-item">订单操作</div>
  11.  
    </div>
  12.  
    <div style="margin-left: 100px;">
  13.  
    <div class="foot-title">服务支持</div>
  14.  
    <div class="foot-item">账户管理</div>
  15.  
    <div class="foot-item">购物指南</div>
  16.  
    <div class="foot-item">订单操作</div>
  17.  
    </div>
  18.  
    <div style="margin-left: 100px;">
  19.  
    <div class="foot-title">线下门店</div>
  20.  
    <div class="foot-item">账户管理</div>
  21.  
    <div class="foot-item">购物指南</div>
  22.  
    <div class="foot-item">订单操作</div>
  23.  
    </div>
  24.  
    <div style="margin-left: 100px;">
  25.  
    <div class="foot-title">支付方式</div>
  26.  
    <div class="foot-item">账户管理</div>
  27.  
    <div class="foot-item">购物指南</div>
  28.  
    <div class="foot-item">订单操作</div>
  29.  
    </div>
  30.  
    </div>
  31.  
    <div style="width: 250px;border-left: 1px solid #dfdfdf;text-align: center;">
  32.  
    <div style="color: #19b4ea;font-weight: bold;font-size: 18px;line-height: 40px;">000-123456789</div>
  33.  
    <div style="color: gray;">周一至周日8:00~18:00</div>
  34.  
    <div style="color: gray;margin-bottom: 10px;">(节假日不休)</div>
  35.  
    <el-button type="success" round icon="el-icon-headset">24小时客服在线</el-button>
  36.  
    </div>
  37.  
    </div>
  38.  
     
  39.  
    </div>
  40.  
    <div style="background-color: #19b4ea;height: 40px;text-align: center;line-height: 40px;color: #FFFFFF;">
  41.  
    申明:本网页仅供学习参考 @XXX XXX XXX
  42.  
    </div>
  43.  
    </div>
  44.  
     
  45.  
    </template>
  46.  
     
  47.  
    <script>
  48.  
    </script>
  49.  
     
  50.  
    <style>
  51.  
    .foot-title{
  52.  
    height: 40px;
  53.  
    line-height: 40px;
  54.  
    }
  55.  
    .foot-item{
  56.  
    height: 25px;
  57.  
    line-height: 25px;
  58.  
    color: gray;
  59.  
    }
  60.  
    .foot-item:hover{
  61.  
    cursor: pointer;
  62.  
    color: #e37a2f;
  63.  
    }
  64.  
    </style>
学新通

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhcikkfh
系列文章
更多 icon
同类精品
更多 icon
继续加载