day70:Vue:Git&路飞学城页面效果

1.Git

什么是git？分布式版本管理工具

1.git操作

# 1 创建git本地仓库
# 创建文件夹,cd到文件夹中,执行
git init
    
# 2 查看仓库状态
git status

# 3 将想要上传的文件添加进去
git add 文件名称(.表示所有文件和目录)

# 4.commit之前必须配置用户
git config --global user.name chao
git config --global user.email 1069696250@qq.com

# 5.提交，生成版本
git commit -m '描述'

如果在git已经创建了账户和邮箱，那么当你创建vue项目的时候，就会自动生成vue账户和密码

2.路飞学城项目页面效果

0.安装element UI

1.element UI介绍

对于前端页面布局，我们可以使用一些开源的UI框架来配合开发，Vue开发前端项目中，比较常用的就是ElementUI了。

ElementUI是饿了么团队开发的一个UI组件框架，这个框架提前帮我们提供了很多已经写好的通用模块，我们可以在Vue项目中引入来使用，这个框架的使用类似于我们前面学习的bootstrap框架，也就是说，我们完全可以把官方文档中的组件代码拿来就用，有定制性的内容，可以直接通过样式进行覆盖修改就可以了。

中文官网：http://element-cn.eleme.io/#/zh-CN

文档快速入门：http://element-cn.eleme.io/#/zh-CN/component/quickstart

2.快速安装element UI

项目根目录执行以下命令:

npm i element-ui -S --registry https://registry.npm.taobao.org
npm i element-ui --save --registry https://registry.npm.taobao.org

3.配置element UI到项目中

// elementUI 导入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';  // 需要import引入一下css文件，和我们的link标签引入是一个效果，而import .. from ..是配合export default来使用的
// 调用插件
Vue.use(ElementUI);

1.顶部导航栏效果

<template>
  <div class="total-header">
    <div class="header">
      <el-container> <!-- ele中的栅格系统-->
        <el-header height="80px" class="header-cont">
          <el-row> <!-- ele将整个页面分为24个区域 -->
            <el-col class="logo" :span="3"> <!-- 路飞学城的logo图标 -->
              <a href="/">
                <img src="@/assets/header-logo.svg" alt=""> <!-- 可点击的一个路飞logo图片 -->
              </a>
            </el-col>
            <el-col class="nav" :span="10">
              <el-row>
                <el-col :span="3">
                  <router-link to="/" class="active">免费课</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 :span="11" class="header-right-box">
              <div class="search"> <!-- 搜索框，默认显示 -->

                <!-- 当元素失去焦点时触发inputShowHandler方法,isH方法将s_status的值变为True -->
                <input type="text" id="Input" placeholder="请输入想搜索的课程" style="" @blur="inputShowHandler" ref="Input"
                       v-show="!s_status"> <!-- 元素失去焦点，"请输入"这个搜索框不显示，显示的是PythonLinux的那个 -->
                <ul @click="ulShowHandler" v-show="s_status" class="search-ul" ref="xx">
                  <!-- 默认显示的就是这个pythonLinux 因为s-status默认就是true，当用户点击输入框以外别的地方的时候，会触发blur动作，也会将s-status修改为True -->
                  <span>Python</span>
                  <span>Linux</span>
                </ul>

                <p>
                  <img class="icon" src="@/assets/sousuo1.png" alt="" v-show="s_status"> <!-- 点外面时 是黑色放大镜 -->
                  <img class="icon" src="@/assets/sousuo2.png" alt="" v-show="!s_status"> <!-- 点输入框时 是黄色放大镜 -->
                  <img class="new" src="@/assets/new.png" alt="">
                </p>
              </div>

              <!-- 1.登录成功展示购物车和对应的那个下拉框 -->
              <!-- 2. 没有登录的时候展示登录和注册按钮-->
              <div class="register" v-show="!token">
                <router-link to="/login">
                  <button class="signin">登录</button>
                </router-link>
                &nbsp;&nbsp;|&nbsp;&nbsp;
                <a target="_blank" href="https://www.luffycity.com/signup">
                  <router-link to="/register">
                    <button class="signup">注册</button>
                  </router-link>

                </a>
              </div>
              <div class="shop-car" v-show="token">
                <router-link to="/cart">
                  <b>6</b>
                  <img src="@/assets/shopcart.png" alt="">
                  <span>购物车 </span>
                </router-link>
              </div>
              <div class="nav-right-box" v-show="token">
                <div class="nav-right">
                  <router-link to="/myclass">
                    <div class="nav-study">我的教室</div>
                  </router-link>
                  <!-- mouseover鼠标经过，mouseout鼠标离开 -->
                  <!-- 1.鼠标经过触发personInfoList list-status变为true  显示下拉框-->
                  <div class="nav-img" @mouseover="personInfoList" @mouseout="personInfoOut">
                    <img src="@/assets/touxiang.png" alt="" style="border: 1px solid rgb(243, 243, 243);">
                    <ul class="home-my-account" v-show="list_status" @mouseover="personInfoList">

                      <li>
                        我的账户
                        <img src="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg"
                             alt="">
                      </li>
                      <li>
                        我的订单
                        <img src="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg"
                             alt="">
                      </li>
                      <li>
                        贝里小卖铺
                        <img src="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg"
                             alt="">
                      </li>
                      <li>
                        我的优惠券
                        <img src="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg"
                             alt="">
                      </li>
                      <li>
                    <span>
                      我的消息
                      <b>(26)</b>
                    </span>
                        <img src="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg"
                             alt="">
                      </li>
                      <li>
                        退出
                        <img src="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg"
                             alt="">
                      </li>

                    </ul>
                  </div>

                </div>

              </div>


            </el-col>
          </el-row>

        </el-header>


      </el-container>

    </div>
  </div>

</template>

<script>
  export default {
    name: "Vheader",
    data() {
      return {
        // 通过标签中一些属性的值来让一些标签展示或隐藏
        token: true, // 登录成功与否的标记
        s_status: true, // 放大镜效果切换控制,默认input标签不显示
        list_status: false, // 个人中心下拉菜单是否显示
      }
    },
    methods: {
      ulShowHandler() {
        // console.log(this);
        this.s_status = false;
        console.log(this.$refs);


        // this.$nextTick(()=>{  //延迟回调方法
        //   console.log(this);
        //   this.$refs.Input.focus();
        // })
        //延迟回调方法，Vue中DOM更新是异步的,也就是说让Vue去显示我们的input标签的操作是异步的，如果我们直接执行this.$refs.Input.focus();是不行的
        // 当方法的DOM操作完成之后，才执行延时动作

        this.$nextTick(function () {
          console.log(this);
          this.$refs.Input.focus();
        });


      },
      inputShowHandler() {
        this.s_status = true;
      },
      personInfoList() {
        this.list_status = true;
      },
      personInfoOut() {
        this.list_status = false;
      }
    }
  }


</script>

<style scoped>
  .header-cont .nav .active {
    color: #f5a623;
    font-weight: 500;
    border-bottom: 2px solid #f5a623;
  }

  .total-header {
    min-width: 1200px;
    z-index: 100;
    box-shadow: 0 4px 8px 0 hsla(0, 0%, 59%, .1);
  }

  .header {
    width: 1200px;
    margin: 0 auto;
  }

  .header .el-header {
    padding: 0;
  }

  .logo {
    height: 80px;
    /*line-height: 80px;*/
    /*text-align: center;*/
    display: flex; /* css3里面的弹性布局，高度设定好之后，设置这个属性就能让里面的内容居中 */
    align-items: center;
  }

  .nav .el-row .el-col {
    height: 80px;
    line-height: 80px;
    text-align: center;

  }

  .nav a {
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    color: #4a4a4a;
    text-decoration: none;
  }

  .nav .el-row .el-col a:hover {
    border-bottom: 2px solid #f5a623
  }

  .header-cont {
    position: relative;
  }

  .search input {
    width: 185px;
    height: 26px;
    font-size: 14px;
    color: #4a4a4a;
    border: none;
    border-bottom: 1px solid #ffc210;

    outline: none;
  }

  .search ul {
    width: 185px;
    height: 26px;
    display: flex;
    align-items: center;
    padding: 0;

    padding-bottom: 3px;
    border-bottom: 1px solid hsla(0, 0%, 59%, .25);
    cursor: text;
    margin: 0;
    font-family: Helvetica Neue, Helvetica, Microsoft YaHei, Arial, sans-serif;
  }

  .search .search-ul, .search #Input {
    padding-top: 10px;
  }

  .search ul span {
    color: #545c63;
    font-size: 12px;
    padding: 3px 12px;
    background: #eeeeef;
    cursor: pointer;
    margin-right: 3px;
    border-radius: 11px;
  }

  .hide {
    display: none;
  }

  .search {
    height: auto;
    display: flex;
  }

  .search p {
    position: relative;
    margin-right: 20px;
    margin-left: 4px;
  }

  .search p .icon {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }

  .search p .new {
    width: 18px;
    height: 10px;
    position: absolute;
    left: 15px;
    top: 0;
  }

  .register {
    height: 36px;
    display: flex;
    align-items: center;
    line-height: 36px;
  }

  .register .signin, .register .signup {
    font-size: 14px;
    color: #5e5e5e;
    white-space: nowrap;
  }

  .register button {
    outline: none;
    cursor: pointer;
    border: none;
    background: transparent;
  }

  .register a {
    color: #000;
    outline: none;
  }

  .header-right-box {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #4a4a4a;
    position: absolute;
    right: 0;
    top: 0;
  }

  .shop-car {
    width: 99px;
    height: 28px;
    border-radius: 15px;
    margin-right: 20px;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
  }

  .shop-car b {
    position: absolute;
    left: 28px;
    top: -1px;
    width: 18px;
    height: 16px;
    color: #fff;
    font-size: 12px;
    font-weight: 350;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #ff0826;
    overflow: hidden;
    transform: scale(.8);
  }

  .shop-car img {
    width: 20px;
    height: 20px;
    margin-right: 7px;
  }

  .nav-right-box {
    position: relative;
  }

  .nav-right-box .nav-right {
    float: right;
    display: flex;
    height: 100%;
    line-height: 60px;
    position: relative;
  }

  .nav-right .nav-study {
    font-size: 15px;
    font-weight: 300;
    color: #5e5e5e;
    margin-right: 20px;
    cursor: pointer;

  }

  .nav-right .nav-study:hover {
    color: #000;
  }

  .nav-img img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
  }

  .home-my-account {
    position: absolute;
    right: 0;
    top: 60px;
    z-index: 101;
    width: 190px;
    height: auto;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 8px 0 #d0d0d0;
  }

  li {
    list-style: none;
  }

  .home-my-account li {
    height: 40px;
    font-size: 14px;
    font-weight: 300;
    color: #5e5e5e;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }

  .home-my-account li img {
    cursor: pointer;
    width: 5px;
    height: 10px;
  }

  .home-my-account li span {
    height: 40px;
    display: flex;
    align-items: center;
  }

  .home-my-account li span b {
    font-weight: 300;
    margin-top: -2px;
  }


</style>

2.轮播图效果

<template>
    <el-carousel indicator-position="outside" height="400px">
      <el-carousel-item v-for="(value,index) in banner_list" :key="value.id">
        <router-link :to="value.url">
          <img :src="value.img_src" alt="" style="width: 100%;height: 400px;">
<!--          <img src="@/assets/banner1.png" alt="">-->
        </router-link>
      </el-carousel-item>
    </el-carousel>

</template>

<script>
export default {
  name: "Banner",
  data(){
    return {
      // 将每张轮播图的路径和url放在字典中，将字典组成一个大列表。
      // 将列表作为整个数据传递给template
      banner_list:[
        // {id:1, img_src:'@/assets/banner1.png', url:'http://www.baidu.com'},
        // {id:2, img_src:'@/assets/banner2.png', url:'http://www.baidu.com'},
        // {id:3, img_src:'@/assets/banner3.png', url:'http://www.baidu.com'},

        // {id:1, img_src:require('@/assets/banner1.png'), url:'http://www.baidu.com'},
        // {id:2, img_src:require('@/assets/banner2.png'), url:'http://www.baidu.com'},
        // {id:3, img_src:require('@/assets/banner3.png'), url:'http://www.baidu.com'},

        {id:1, img_src:'../../../static/img/banner1.png', url:'http://www.baidu.com'},
        {id:2, img_src:'../../../static/img/banner2.png', url:'http://www.baidu.com'},
        {id:3, img_src:'../../../static/img/banner3.png', url:'http://www.baidu.com'},

        // 当使用文件路径使用数据属性动态生成到试图当中时，不能使用@符号，如果想使用@符号，那么需要我们自动调用require方法，对路径进行转换，不然就将图片文件放到static文件夹下面。

      ]
    }
  }


}
</script>

<style scoped>

</style>

posted @ 2020-10-20 15:08 iR-Poke 阅读(250) 评论(0) 编辑收藏举报

刷新页面返回顶部

iR.Poke