zoukankan      html  css  js  c++  java
  • 前台主页

    前端主页

    图片准备

    将提供的资料中的图片移植到项目的img文件夹下

    页头组件:components/Header.vue

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    <template>
    <div class="header">
    <div class="slogan">
    <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
    </div>
    <div class="nav">
    <ul class="left-part">
    <li class="logo">
    <router-link to="/">
    <img src="../assets/img/head-logo.svg" alt="">
    </router-link>
    </li>
    <li class="ele">
    <span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">免费课</span>
    </li>
    <li class="ele">
    <span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课</span>
    </li>
    <li class="ele">
    <span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课</span>
    </li>
    </ul>

    <div class="right-part">
    <div>
    <span>登录</span>
    <span class="line">|</span>
    <span>注册</span>
    </div>
    </div>
    </div>
    </div>

    </template>

    <script>

    export default {
    name: "Header",
    data() {
    return {
    url_path: sessionStorage.url_path || '/',
    }
    },
    methods: {
    goPage(url_path) {
    // 已经是当前路由就没有必要重新跳转
    if (this.url_path !== url_path) {
    this.$router.push(url_path);
    }
    sessionStorage.url_path = url_path;
    },
    },
    created() {
    sessionStorage.url_path = this.$route.path;
    this.url_path = this.$route.path;
    }
    }
    </script>

    <style scoped>
    .header {
    background-color: white;
    box-shadow: 0 0 5px 0 #aaa;
    }

    .header:after {
    content: "";
    display: block;
    clear: both;
    }

    .slogan {
    background-color: #eee;
    height: 40px;
    }

    .slogan p {
    width: 1200px;
    margin: 0 auto;
    color: #aaa;
    font-size: 13px;
    line-height: 40px;
    }

    .nav {
    background-color: white;
    user-select: none;
    width: 1200px;
    margin: 0 auto;

    }

    .nav ul {
    padding: 15px 0;
    float: left;
    }

    .nav ul:after {
    clear: both;
    content: '';
    display: block;
    }

    .nav ul li {
    float: left;
    }

    .logo {
    margin-right: 20px;
    }

    .ele {
    margin: 0 20px;
    }

    .ele span {
    display: block;
    font: 15px/36px '微软雅黑';
    border-bottom: 2px solid transparent;
    cursor: pointer;
    }

    .ele span:hover {
    border-bottom-color: orange;
    }

    .ele span.active {
    color: orange;
    border-bottom-color: orange;
    }

    .right-part {
    float: right;
    }

    .right-part .line {
    margin: 0 10px;
    }

    .right-part span {
    line-height: 68px;
    cursor: pointer;
    }
    </style>

    轮播图组件:components/Banner.vue

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <template>
    <div class="banner">
    <el-carousel height="400px">
    <el-carousel-item v-for="item in 4" :key="item">
    <img src="../assets/img/banner1.png" alt="">
    </el-carousel-item>
    </el-carousel>
    </div>
    </template>

    <script>
    export default {
    name: "Banner"
    }
    </script>

    <style scoped>
    .el-carousel__item {
    height: 400px;
    min-width: 1200px;
    }
    .el-carousel__item img {
    height: 400px;
    margin-left: calc(50% - 1920px / 2);
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    <template>
    <div class="footer">
    <ul>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>商务合作</li>
    <li>帮助中心</li>
    <li>意见反馈</li>
    <li>新手指南</li>
    </ul>
    <p>Copyright © luffycity.com版权所有 | 京ICP备17072161号-1</p>
    </div>
    </template>

    <script>
    export default {
    name: "Footer"
    }
    </script>

    <style scoped>
    .footer {
    width: 100%;
    height: 128px;
    background: #25292e;
    color: #fff;
    }

    .footer ul {
    margin: 0 auto 16px;
    padding-top: 38px;
    width: 810px;
    }

    .footer ul li {
    float: left;
    width: 112px;
    margin: 0 10px;
    text-align: center;
    font-size: 14px;
    }

    .footer ul::after {
    content: "";
    display: block;
    clear: both;
    }

    .footer p {
    text-align: center;
    font-size: 12px;
    }
    </style>

    主页组件:views/Home.vue

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <template>
    <div class="home">
    <Header />
    <Banner />
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <Footer />
    </div>
    </template>

    <script>
    import Header from '../components/Header'
    import Footer from '../components/Footer'
    import Banner from '../components/Banner'

    export default {
    name: "Home",
    components: {
    Header,
    Footer,
    Banner,
    }
    }
    </script>
  • 相关阅读:
    扯蛋的密码规则
    【转】mysql安全基线设置
    阿里云安全基线 记录如下 不定时更新
    解决Apache的错误日志巨大的问题以及关闭Apache web日志记录
    cms如何绑定二级域名
    宝塔面板定时/同步备份网站及数据库至FTP存储空间完整教程
    宝塔部署项目报Warning: require(): open_basedir restriction in effect的解决方案
    git学习笔记(一)—— git环境搭建
    vim学习笔记(一)—— vim安装方法
    Intel Edison学习笔记(二)—— 入门环境配置
  • 原文地址:https://www.cnblogs.com/plyc/p/14097855.html
Copyright © 2011-2022 走看看