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

随机推荐

JavaScript中数组和对象的使用例程
JavaScript数组下面的代码创建名为 cars 的数组: //方式一: var cars = new Array(); cars[0] = "Volvo"; cars[1] ...
loj#2059. 「TJOI / HEOI2016」字符串 sam+线段树合并+倍增
题意:给你一个子串,m次询问,每次给你abcd,问你子串sa-b的所有子串和子串sc-d的最长公共前缀是多长题解:首先要求两个子串的最长公共前缀就是把反过来插入变成最长公共后缀,两个节点在paren ...
Linux常用命令汇总集
cd ./ 当前目录 ../ 上级目录 / 代表根目录 or 代表目录和文件之间的分隔符 .. pwd 查看当前路径 LS 查看当前目录下的文件 ls ./a/ 查看目标路径下的文件 tab 自动补全 ...
day16_python_1124
圈子圈子是互相影响,走着走着就散了. 道不同不相为谋,与人的认知相关. 圈子如何正向引导? 圈子能决定你的人生走向. 圈子能决定你的格局. 01 昨日内容回顾序列化模块将一个数据结构 ----& ...
Linux c读取任意大小文件的所有数据
代码如下,执行完之后被分配的动态内存的指针会保存到result中.由于是动态分配内存,读取内容不再使用之后注意用free 释放掉,如不明白,请多搜索以下动态内存分配的资料. #include < ...
UVa 10382 - Watering Grass 贪心，水题，爆int 难度: 0
题目 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&a ...
SpringCloud使用Feign实现服务间通信
SpringCloud的服务间通信主要有两种办法,一种是使用Spring自带的RestTemplate,另一种是使用Feign,这里主要介绍后者的通信方式. 整个实例一共用到了四个项目,一个Eurek ...
Discuz!安装搭建
Discuz!介绍 Discuz!是一款由php语言开发的论坛源代码包,运行在lamp平之上或者lnmp之上,点击此处打开官方网站环境介绍本次安装采用最简配置,全部用yum安装,php采用模块方式 ...
LeetCode 46 全排列
题目: 给定一个没有重复数字的序列,返回其所有可能的全排列. 示例: 输入: [1,2,3] 输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3 ...
WINDOWS SERVER 2016 设置使用照片查看器查看图片
1.使用win+R快捷键快速打开运行,输入regedit打开注册表 2.在注册表中找到HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows Photo Viewe ...

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

调整首页细节

免费课

购物车页面

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

随机推荐

热门专题