luffy项目首页搭建、django项目依赖

编程入门行业动态更新时间:2024-10-20 08:00:16

luffy<a href=https://www.elefans.com/category/jswz/34/1771421.html style= 项目首页搭建、django项目依赖"/>

luffy项目首页搭建、django项目依赖

首页搭建

Header组件

<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>

Banner组件

<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>

Card组件

<template><div><el-row><el-col :span="6" v-for="(o, index) in 4" :key="o" class="course_detail"><el-card :body-style="{ padding: '0px' }"><img src="/2023%2002%2022%2021%2057%2011%20/image-20230222215707795.png"class="image"><div style="padding: 14px;"><span>热门课程</span><div class="bottom clearfix"><time class="time">价格：199</time><el-button type="text" class="button">查看详情</el-button></div></div></el-card></el-col></el-row></div></template><style scoped>
.time {font-size: 13px;color: #999;
}.bottom {margin-top: 13px;line-height: 12px;
}.button {padding: 0;float: right;
}.image {width: 100%;display: block;
}.clearfix:before,
.clearfix:after {display: table;content: "";
}.clearfix:after {clear: both
}.course_detail {padding: 50px;
}</style>

Footer

<template><div class="footer"><ul><li>关于我们</li><li>联系我们</li><li>商务合作</li><li>帮助中心</li><li>意见反馈</li><li>新手指南</li></ul><p>Copyright © luffycity版权所有 | 京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>

HomeView

<template><div class="home"><Header></Header><Banner></Banner><Card></Card><img src="/2023%2003%2001%2016%2010%2034%20/1.png" alt="" width="100%" height="500px"><Footer></Footer></div>
</template><script>
import Card from "@/components/Card.vue";
import Banner from "@/components/Banner.vue";
import Footer from "@/components/Footer.vue";
import Header from "@/components/Header.vue";
export default {name: 'HomeView',components: {Banner,Footer,Header,Card}
}
</script>

轮播图接口打通

Banner组件

<template><div class="banner"><el-carousel height="400px"><el-carousel-item v-for="item in banner_list" :key="item.id"><div v-if="item.link.indexOf('http')==0"><a :href="item.link"><img :src="item.image" alt=""></a></div><div v-else><router-link :to="item.link"><img :src="item.image" alt=""></router-link></div></el-carousel-item></el-carousel></div>
</template><script>
export default {name: "Banner",data() {return {banner_list: []}},created() {this.$axios.get(this.$setting.BASS_URL + 'home/banner/').then(res => {console.log(res.data)if (res.data.code == 100) {this.banner_list = res.data.result} else {this.$message({showClose: true,message: res.data.msg,type: 'error'});}})}
}</script><style scoped>
.el-carousel__item {height: 400px;min-width: 1200px;
}.el-carousel__item img {height: 400px;margin-left: calc(50% - 1920px / 2);
}
</style>