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>
  • 相关阅读:
    NHibernate4使用Oracle.ManagedDataAccess.dll连接oracle及配置多个数据库连接
    Myeclipse闪退故障
    Log4j快速使用精简版
    Eclipse快捷键 10个最有用的快捷键
    Java compiler level does not match解决方法
    ArcMap常用VBA
    firefox浏览器中silverlight无法输入问题
    C#导入Excel遇到数字字母混合列数据丢失解决
    ArcMap计算PolyLine中点VBA
    Apple Watch 开发详解
  • 原文地址:https://www.cnblogs.com/plyc/p/14097855.html
Copyright © 2011-2022 走看看