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 组件包含插件面 ...

随机推荐

Importing Maven projects' has encountered a problem
导入项目是报错,这个是maven问题--Importing Maven projects' has encountered a problem ---------------------------- ...
[译] 关于 Angular 依赖注入你需要知道的
如果你之前没有深入了解 Angular 依赖注入系统,那你现在可能认为 Angular 程序内的根注入器包含所有合并的服务提供商,每一个组件都有它自己的注入器,延迟加载模块有它自己的注入器. 但是,仅 ...
Multivariate normal distribution | 多元正态分布
现在终于需要用到了.
超轻量级Json框架SmartObject
最近我在codeplex上发了一个项目SmartObject(基于framework4.5,目前是1.0版本).用法如下: // HowToUse using Spider.Data; //json ...
xml和tomcat介绍
一 xml介绍: xml:可扩展性的文件功能: 1.作为框架的配置文件 2.方便在网络中传输数据 <a> <b></b> <c></c> ...
颜色（color）透明
颜色写法: 1.英文单词 backgroud-color:red: 2. #fff background-color:#fff; 3.#fefefe background-color:fefefe; ...
web项目执行流程
先扫描web.xml文件 jsp请求servlet servlet 调数据/不调数据重定向/转发 Dao(封装数据) Biz(数据处理) 逻辑判段返回前端界面显示
Android 关于arm64-v8a、armeabi-v7a、armeabi、x86下的so文件兼容问题
Android 设备的CPU类型(通常称为”ABIs”) 引用: https://blog.csdn.net/ouyang_peng/article/details/51168072 armeabiv ...
Convert BST to Greater Tree
Given a Binary Search Tree (BST), convert it to a Greater Tree such that every key of the original B ...
Spring Boot 常见标签
@Controller(value=“名字”,descripation="描述",tags="具体" ) @RestController控制器(path=&qu ...

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

调整首页细节

免费课

购物车页面

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

随机推荐

热门专题