Vue-项目之免费课和购物车实现

调整首页细节

固定头部

App.vue中代码

<style>

  body{

    padding: 0;

    margin:0;

    margin-top: 80px;

  }

</style>

Header中代码：

<style scoped>

  .header{

    top:0;

    left:0;

    right:0;

    margin: auto;

    background-color: #fff;

    height: 80px;

    z-index: 1000;

    position: fixed;

    box-shadow: 0 0.5px 0.5px 0 #c9c9c9;

  }

</style>

调整轮播图左右两边的按钮
注意，style标签中要设置全局样式，所以不需要scoped

<style>

.el-carousel__arrow{

  width: 100px!important;

  height: 100px!important;

}

.el-icon-arrow-left{

  font-size: 35px;

  margin-left: 50px;

}

.el-carousel__arrow--left{

  left: -50px;

}

</style>

免费课

在组件目录components下创建Course.vue组件文件,代码如下:

<template>

  <div class="course">

  </div>

</template>

<script>

export default {

  name: "Course",

  data(){

    return {

    }

  },

}

</script>

<style scoped>

</style>

在routers/index.js路由中注册路由

import Vue from "vue"

import Router from "vue-router"

// 导入可以被用户访问的组件

import Home from "@/components/Home"

import Course from "@/components/Course"

Vue.use(Router);

export default new Router({

  mode: "history",

  routes:[

    // 路由列表

    {

      path: "/",

      name: "Home",

      component:Home,

    },

    {

      path: "/home",

      name: "Home",

      component:Home,

    },

    {

      path: "/course",

      name: "Course",

      component:Course,

    },

  ]

})

完成免费课课程列表
文件代码结构，Course.vue代码

<template>

  <div class="course">

    <Header/>

    <div class="main">

      <!-- 筛选功能 -->

      <div class="top">

        <ul class="condition condition1">

          <li class="cate-condition">课程分类:</li>

          <li class="item current">全部</li>

          <li class="item">Python</li>

          <li class="item">Linux运维</li>

          <li class="item">Python进阶</li>

          <li class="item">开发工具</li>

          <li class="item">Go语言</li>

          <li class="item">机器学习</li>

          <li class="item">技术生涯</li>

        </ul>

        <ul class="condition condition2">

          <li class="cate-condition">筛&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;选:</li>

          <li class="item current">默认</li>

          <li class="item">人气</li>

          <li class="item price">价格</li>

          <li class="course-length">共21个课程</li>

        </ul>

      </div>

      <!-- 课程列表 --->

      <div class="list">

        <ul>

          <li class="course-item">

            <div class="course-cover">

              <img src="../../static/course/Python.jpeg" alt="">

            </div>

            <div class="course-info">

              <div class="course-title">

                <h3>Python开发21天入门</h3>

                <span>46520人已加入学习</span>

              </div>

              <p class="teacher">

                <span class="info">Alex 金角大王 老男孩Python教学总监</span>

                <span class="lesson">共154课时/更新完成</span>

              </p>

              <ul class="lesson-list">

                <li>

                  <p class="lesson-title">01 | 常用模块学习-模块的种类和导入方法</p>

                  <span class="free">免费</span>

                </li>

                <li>

                  <p class="lesson-title">02 | 编程语言介绍（三）高级语言</p>

                  <span class="free">免费</span>

                </li>

                <li>

                  <p class="lesson-title">03 | 编程语言介绍（一）</p>

                  <span class="free">免费</span>

                </li>

                <li>

                  <p class="lesson-title">04 | 课程介绍（二）-Python与其他语言的区别</p>

                  <span class="free">免费</span>

                </li>

              </ul>

              <div class="buy-info">

                <span class="discount">限时免费</span>

                <span class="present-price">￥0.00元</span>

                <span class="original-price">原价：29.00元</span>

                <button class="buy-now">立即购买</button>

              </div>

            </div>

          </li>

          <li class="course-item">

            <div class="course-cover">

              <img src="../../static/course/Linux.jpeg" alt="">

            </div>

            <div class="course-info">

              <div class="course-title">

                <h3>Linux系统基础5周入门</h3>

                <span>23213人已加入学习</span>

              </div>

              <p class="teacher">

                <span class="info">李泳谊 老男孩Linux学科带头人</span>

                <span class="lesson">共148课时/已更新147课时</span>

              </p>

              <ul class="lesson-list">

                <li>

                  <p class="lesson-title">01 | 服务器头部介绍 </p>

                  <span class="free">免费</span>

                </li>

                <li>

                  <p class="lesson-title">02 | 第一章总结 </p>

                  <span class="free">免费</span>

                </li>

                <li>

                  <p class="lesson-title">03 | 服务器硬件详解 </p>

                  <span class="free">免费</span>

                </li>

                <li>

                  <p class="lesson-title">04 | 服务器核心硬件-raid卡-光驱</p>

                  <span class="free">免费</span>

                </li>

              </ul>

              <div class="buy-info">

                <span class="discount">限时免费</span>

                <span class="present-price">￥0.00元</span>

                <span class="original-price">原价：9.00元</span>

                <button class="buy-now">立即购买</button>

              </div>

            </div>

          </li>

          <li class="course-item">

            <div class="course-cover">

              <img src="../../static/course/pycharm.jpeg" alt="">

            </div>

            <div class="course-info">

              <div class="course-title">

                <h3>Pycharm</h3>

                <span>2247人已加入学习</span>

              </div>

              <p class="teacher">

                <span class="info">李文周 前段搜狗自身工程师</span>

                <span class="lesson">共1课时/更新完成</span>

              </p>

              <ul class="lesson-list">

                <li>

                  <p class="lesson-title">01 | Pycharm使用秘籍视频课程</p>

                  <span class="free">免费</span>

                </li>

              </ul>

              <div class="buy-info">

                <span class="discount">限时免费</span>

                <span class="present-price">￥0.00元</span>

                <span class="original-price">原价：9.00元</span>

                <button class="buy-now">立即购买</button>

              </div>

            </div>

          </li>

          <li class="course-item">

            <div class="course-cover">

              <img src="../../static/course/PC列表页.jpeg" alt="">

            </div>

            <div class="course-info">

              <div class="course-title">

                <h3>网管到CEO的10年逆袭之路</h3>

                <span>4580人已加入学习</span>

              </div>

              <p class="teacher">

                <span class="info">Alex 金角大王 老男孩Python教学总监</span>

                <span class="lesson">共10课时/更新完成</span>

              </p>

              <ul class="lesson-list">

                <li>

                  <p class="lesson-title">01 | 技术人员如何度过经济寒冬</p>

                  <span class="free">免费</span>

                </li>

                <li>

                  <p class="lesson-title">02 | 7天集训营开班直播</p>

                  <span class="free">免费</span>

                </li>

                <li>

                  <p class="lesson-title">03 | 失败性人格剖析</p>

                </li>

                <li>

                  <p class="lesson-title">04 | 焦虑改变命运</p>

                </li>

              </ul>

              <div class="buy-info">

                <span class="discount">限时折扣</span>

                <span class="present-price">￥1.00元</span>

                <span class="original-price">原价：100.00元</span>

                <button class="buy-now">立即购买</button>

              </div>

            </div>

          </li>

        </ul>

      </div>

    </div>

    <Footer/>

  </div>

</template>

<script>

import Header from "./common/Header"

import Footer from "./common/Footer"

export default {

  name: "Course",

  data(){

    return {

    }

  },

  components:{Header,Footer}

}

</script>

<style scoped>

.main{

    width: 1100px;

    height: auto;

    margin: 0 auto;

    padding-top: 35px;

}

.main .top{

    margin-bottom: 35px;

    padding: 25px 30px 25px 20px;

    background: #fff;

    border-radius: 4px;

    box-shadow: 0 2px 4px 0 #f0f0f0;

}

.condition{

    border-bottom: 1px solid #333;

    border-bottom-color: rgba(51,51,51,.05);

    padding-bottom: 18px;

    margin-bottom: 17px;

    overflow: hidden;

}

.condition li{

    float: left;

}

.condition .cate-condition{

    color: #888;

    font-size: 16px;

}

.condition .item{

    padding: 6px 16px;

    line-height: 16px;

    margin-left: 14px;

    position: relative;

    transition: all .3s ease;

    cursor: pointer;

    color: #4a4a4a;

}

.condition1 .current{

    color: #ffc210;

    border: 1px solid #ffc210!important;

    border-radius: 30px;

}

.condition2 .current{

  color: #ffc210;

}

.condition .price:before{

    content: "";

    width: 0;

    border: 5px solid transparent;

    border-top-color: #d8d8d8;

    position: absolute;

    right: 0;

    bottom: 2.5px;

}

.condition .price:after{

    content: "";

    width: 0;

    border: 5px solid transparent;

    border-bottom-color: #ffc210;

    position: absolute;

    right: 0;

    top: 2.5px;

}

.condition2 .course-length{

    float: right;

    font-size: 14px;

    color: #9b9b9b;

}

.course-item{

    background: #fff;

    padding: 20px 30px 20px 20px;

    margin-bottom: 35px;

    border-radius: 2px;

    cursor: pointer;

    box-shadow: 2px 3px 16px rgba(0,0,0,.1);

    transition: all .2s ease;

    overflow: hidden;

    cursor:pointer;

}

.course-cover {

    width: 423px;

    height: 210px;

    margin-right: 30px;

    float: left;

}

.course-info{

    width: 597px;

    float: left;

}

.course-title{

  margin-bottom: 8px;

  overflow: hidden;

}

.course-title h3{

  font-size: 26px;

  color: #333;

  float: left;

}

.course-title span {

  float: right;

  font-size: 14px;

  color: #9b9b9b;

  margin-top: 12px;

  text-indent: 1em; /* 缩进 2字符宽度 */

  background: url("../assets/people.svg") no-repeat 0px 3px;

}

.teacher{

    justify-content: space-between;

    font-size: 14px;

    color: #9b9b9b;

    margin-bottom: 14px;

    padding-bottom: 14px;

    border-bottom: 1px solid #333;

    border-bottom-color: rgba(51,51,51,.05);

}

.teacher .lesson{

    float: right;

}

.lesson-list{

  overflow: hidden;

}

.lesson-list li{

    width: 49%;

    margin-bottom: 15px;

    cursor: pointer;

    float: left;

    margin-right:1%;

}

.lesson-list li .player{

    width: 16px;

    height: 16px;

    vertical-align: text-bottom;

}

.lesson-list li .lesson-title {

  display: inline-block;

  max-width: 227px;

  text-overflow: ellipsis; /* 如果字体太多超出元素的宽度，则添加省略符号 */

  color: #666;

  overflow: hidden;

  white-space: nowrap;

  font-size: 14px;

  vertical-align: text-bottom; /* 文本的垂直对齐方式： text-botton 文本底部对齐 */

  text-indent: 1.5em;

  background: url(../../static/player.svg) no-repeat 0px 3px;

}

.lesson-list .free{

    width: 34px;

    height: 20px;

    color: #fd7b4d;

    margin-left: 10px;

    border: 1px solid #fd7b4d;

    border-radius: 2px;

    text-align: center;

    font-size: 13px;

    white-space: nowrap;

}

.lesson-list li:hover .lesson-title{

    color: #ffc210;

    background-image: url(../../static/player2.svg);

}

.lesson-list li:hover .free{

    border-color: #ffc210;

    color: #ffc210;

}

.buy-info .discount{

    padding: 0px 10px;

    font-size: 16px;

    color: #fff;

    display: inline-block;

    height: 36px;

    text-align: center;

    margin-right: 8px;

    background: #fa6240;

    border: 1px solid #fa6240;

    border-radius: 10px 0 10px 0;

    line-height: 36px;

}

.present-price{

    font-size: 24px;

    color: #fa6240;

}

.original-price{

    text-decoration: line-through;

    font-size: 14px;

    color: #9b9b9b;

    margin-left: 10px;

}

.buy-now{

    width: 120px;

    height: 38px;

    background: transparent;

    color: #fa6240;

    font-size: 16px;

    border: 1px solid #fd7b4d;

    border-radius: 3px;

    transition: all .2s ease-in-out; /* 过渡动画 */

    float: right;

    margin-top: 5px;

}

.buy-now:hover{

    color: #fff;

    background: #ffc210;

    border: 1px solid #ffc210;

    cursor: pointer;

}

</style>

针对页面头部部分增加高亮和登陆按钮，根据登陆状态显示登陆注册按钮

<template>

  <div class="header">

    <el-container>

      <el-header>

        <el-row>

          <el-col class="logo" :span="3">

            <a href="/">

              <img src="@/assets/head-logo.svg" alt="">

            </a>

          </el-col>

          <el-col class="nav" :span="16">

              <el-row>

                <el-col :span="3"><router-link class="current" to="/">免费课</router-link></el-col>

                <el-col :span="3"><router-link to="/">轻课</router-link></el-col>

                <el-col :span="3"><router-link to="/">学位课</router-link></el-col>

                <el-col :span="3"><router-link to="/">题库</router-link></el-col>

                <el-col :span="3"><router-link to="/">教育</router-link></el-col>

              </el-row>

          </el-col>

          <el-col class="login-bar" :span="5">

            <el-row v-if="token">

              <el-col class="cart-ico" :span="9">

                <router-link to="">

                  <b class="goods-number">0</b>

                  <img class="cart-icon" src="@/assets/cart.svg" alt="">

                  <span>购物车</span>

                </router-link>

              </el-col>

              <el-col class="study" :span="8" :offset="2"><router-link to="">学习中心</router-link></el-col>

              <el-col class="member" :span="5">

                <el-menu class="el-menu-demo" mode="horizontal">

                  <el-submenu index="2">

                    <template slot="title"><router-link to=""><img src="@/assets/logo@2x.png" alt=""></router-link></template>

                    <el-menu-item index="2-1">我的账户</el-menu-item>

                    <el-menu-item index="2-2">我的订单</el-menu-item>

                    <el-menu-item index="2-3">我的优惠卷</el-menu-item>

                    <el-menu-item index="2-3">退出登录</el-menu-item>

                  </el-submenu>

                </el-menu>

              </el-col>

            </el-row>

            <el-row v-else>

              <el-col class="cart-ico" :span="9">

                <router-link to="">

                  <img class="cart-icon" src="@/assets/cart.svg" alt="">

                  <span>购物车</span>

                </router-link>

              </el-col>

              <el-col :span="10" :offset="5">

                <span class="register">

                  <router-link to="/login">登录</router-link>

                  &nbsp;&nbsp;|&nbsp;&nbsp;

                  <router-link to="/register">注册</router-link>

                </span>

              </el-col>

            </el-row>

          </el-col>

        </el-row>

      </el-header>

    </el-container>

  </div>

</template>

<script>

  export default {

    name: "Header",

    data(){

      return {

        // 设置一个登录标识，表示是否登录

        token: true,

      };

    }

  }

</script>

<style scoped>

  .header{

    top:0;

    left:0;

    right:0;

    margin: auto;

    background-color: #fff;

    height: 80px;

    z-index: 1000;

    position: fixed;

    box-shadow: 0 0.5px 0.5px 0 #c9c9c9;

  }

  .header .el-container{

    width: 1200px;

    margin: 0 auto;

  }

  .el-header{

    height: 80px!important;

    padding:0;

  }

  .logo{

  }

  .logo img{

    padding-top: 22px;

  }

  .nav{

    margin-top: 22px;

  }

  .nav .el-col a{

    display: inline-block;

    text-align: center;

    padding-bottom: 16px;

    padding-left: 5px;

    padding-right: 5px;

    position: relative;

    font-size: 16px;

    margin-left: 20px;

  }

  .nav .el-col .current{

    color: #4a4a4a;

    border-bottom: 4px solid #ffc210;

  }

  .login-bar{

    margin-top: 22px;

  }

  .cart-ico{

    position: relative;

    border-radius: 17px;

  }

  .cart-ico:hover{

    background: #f0f0f0;

  }

  .goods-number{

    width: 16px;

    height: 16px;

    line-height: 17px;

    font-size: 12px;

    color: #fff;

    text-align: center;

    background: #fa6240;

    border-radius: 50%;

    transform: scale(.8);

    position: absolute;

    left: 16px;

    top: -1px;

  }

  .cart-icon{

    width: 15px;

    height: auto;

    margin-left: 6px;

  }

  .cart-ico span{

    margin-left: 12px;

  }

  .member img{

    width: 26px;

    height: 26px;

    border-radius: 50%;

    display: inline-block;

  }

  .member img:hover{

    border: 1px solid yellow;

  }

  .el-menu.el-menu--horizontal{

    border-bottom: None;

  }

</style>

购物车页面

在头部公共组件中打通购物车的链接地址，Header.vue
```
<span><router-link to="/cart">购物车</router-link></span>
```
创建购物车页面组件
在components/创建Cart.vue组件文件

注册路由地址
routers/index.js代码

import Cart from "@/components/Cart"

export default new Router({

  // 路由跳转模式，注意使用 history

  mode: "history",

  // 路由规则

  routes:[

    。。。

    ,{

      name:"Cart",

      path: "/cart",

      component: Cart,

    },

  ]

})

显示表格数据

<template>

    <div class="cart">

      <Header/>

      <div class="main">

        <div class="cart-title">

          <h3>我的购物车 <span> 共2门课程</span></h3>

          <el-table :data="courseData" style="width:100%">

            <el-table-column type="selection" label="" width="87"></el-table-column>

            <el-table-column prop="title" label="课程" width="540"></el-table-column>

            <el-table-column prop="expire" label="有效期" width="216"></el-table-column>

            <el-table-column prop="price" label="单价" width="162"></el-table-column>

            <el-table-column label="操作" width="162"></el-table-column>

          </el-table>

        </div>

        <div calss="cart-info"></div>

      </div>

      <Footer/>

    </div>

</template>

<script>

import Header from "./common/Header"

import Footer from "./common/Footer"

export default {

    name: "Cart",

    data(){

      return{

        courseData:[

          {title:"课程标题一",expire:"2016",price:"12.00"},

          {title:"课程标题一",expire:"2016",price:"12.00"},

          {title:"课程标题一",expire:"2016",price:"12.00"},

          {title:"课程标题一",expire:"2016",price:"12.00"},

          {title:"课程标题一",expire:"2016",price:"12.00"},

          {title:"课程标题一",expire:"2016",price:"12.00"},

          {title:"课程标题一",expire:"2016",price:"12.00"},

          {title:"课程标题一",expire:"2016",price:"12.00"},

        ]

      }

    },

    components:{Header,Footer}

}

</script>

<style scoped>

.main{

  width: 1200px;

  margin: 0 auto;

  overflow: hidden; /* 解决body元素和标题之间的上下外边距的塌陷问题 */

}

.cart-title h3{

  font-size: 18px;

  color: #666;

  margin: 25px 0;

}

.cart-title h3 span{

  font-size: 12px;

  color: #d0d0d0;

  display: inline-block;

}

</style>

Vue-项目之免费课和购物车实现的更多相关文章

vue 项目记录.路飞学城(一)
前情提要: 通过vue 搭建路飞学城记录一:项目分析二:项目搭建 1:创建项目 vue init webpack luffy 2:初始化项目清除默认的HelloWorld.vue组件和APP. ...
前端Vue项目——登录页面实现
一.geetest滑动验证 geetest官方文档地址:https://docs.geetest.com/ 产品——极速验证:基于深度学习的人机识别应用.极验「行为验证」是一项可以帮助你的网站与APP ...
DRF+Vue项目（一）——项目架构
永久配置安装源为了加速模块的下载 1.文件管理器文件路径地址栏敲:%APPDATA% 回车,快速进入 C:\Users\电脑用户\AppData\Roaming 文件夹中 2.新建 pip 文件夹并 ...
element-ui和npm、webpack、vue-cli搭建Vue项目
一.element-ui的简单使用 1.安装 1. npm 安装推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...
vue项目中的常见问题
总结了几个vue项目开发过程中遇到的常见问题,希望大家注意. 注:文末有福利! 一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader -- ...
vue项目中icon图标的完美引入
第一步: 进入阿里矢量图标库并登录地址:https://www.iconfont.cn 第二步: 选择项目需要的图标添加到库第三步: 选完之后点击右上角的购物车,打开后点击添加到项目,没有就自己建 ...
Vue 项目 Vue + restfulframework
Vue 项目 Vue + restfulframework 实现登录认证 - django views class MyResponse(): def __init__(self): self.sta ...
vue项目使用阿里巴巴矢量图标库教程
前言:element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下. 对于我们来说,首选的当然是阿里icon库地址:http ...
python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件组件:html css js 组件包含插件面 ...

随机推荐

python读取xml文件中的坐标点
用labelImg工具制作好xml文件后,需要读取其中img路径和坐标点,生成一个label.txt <annotation> <folder>big</folder&g ...
ONOS架构-概览
这个是阅读https://wiki.onosproject.org/display/ONOS/Architecture+Guide是顺便翻译的,目前断断续续在阅读,今天先贴一部分概览基于osgi, ...
three.js 第二篇:场景相机渲染器物体之间的关系
w我用画画来形容他们之间的关系场景就是纸张相机就是我们的眼睛物体就是在我们脑海中构思的那个画面渲染器就是绘画这个动作场景(Scene): 初始化:var scene = new THREE. ...
localStorage(本地存储器)、sessionStorage(会话存储)
设置:localStorage.setItem("token", JSON.parse(res).data.token); 获取:that.token = localSto ...
Luffy之购物车页面搭建
前面已经将一些课程加入购物车中,并保存到了后端的redis数据库中,此时做购物车页面时,我们需要将在前端向后端发送请求,用来获取数据数据购物车页面 1.首先后端要将数据构建好,后端视图函数如下代码: ...
python学习（四）
springcloud-Eureka-服务注册与发现核心组件
Eureka组件 Eureka是Netfilx开源的服务发现组件,本身是一个基于rest的服务,它包含client和server两部分. Spirng Cloud将它集成在子项目Spirng Clou ...
微信小程序Promise对象
Promise 对象 Promise 的含义基本用法 Promise.prototype.then() Promise.prototype.catch() Promise.prototype.fin ...
html5（七） Web存储
http://www.cnblogs.com/stoneniqiu/p/4206796.html http://www.cnblogs.com/v10258/p/3700486.html html5中 ...
Linux 服务器中木马及木马清除
1.查看流量图发现问题查看的时候网页非常卡,有的时候甚至没有响应 2.top动态查看进程我马上远程登录出问题的服务器,远程操作很卡,网卡出去的流量非常大,通过top发现了一个异常的进程占用资源比较 ...

Vue-项目之免费课和购物车实现

调整首页细节

免费课

购物车页面

Vue-项目之免费课和购物车实现的更多相关文章

随机推荐

热门专题