1. This case is inspired by the Internet
Project demo address : Click to view
Full version blog introduction: " vue+elementui implements U bag net - full version "
Imitation source: network case
The following source code is the first version of the source code ( incomplete ), please private chat with the author for the complete source code, or add the author through the WeChat business card behind the blog
Source code 
https://download.csdn.net/download/lucky_fang/85193781
Screenshot of the official case
Product renderings:
2. First create a vue project and use the development tool WebStorm. Vue creation project tutorial can refer to: (1) Vue - how to create a Vue project (complete steps) - 㭌 (mou) seven - Blog Park
3. Install elementui after creating the project, just follow the official tutorial, elementui official address: Element - The world's most popular Vue UI framework
The created project directory structure looks like this:
4. The whole frame layout is divided into head src/page/top, content src/page/index and bottom src/page/foot.
The content src/page/index is a shared container, just like the iframe tag, all path accesses will be displayed in the container, and the path of the page jump is defined in src/router/index.js
5.src/page/top/index.vue
<template>
<div style="font-size: 14px;">
<div style="display: flex;height: 40px;padding: 0 400px;background-color: #f5f5f5;">
<div class="top-title" style="padding-right: 20px;line-height: 40px;color: #666;">嗨，欢迎来到<span style="color: #b31e22;">XXX</span></div>
<div class="top-title" style="padding-right: 20px;line-height: 40px;color: #666;margin-left: 20px;">网店代销</div>
<div class="top-title" style="padding-right: 20px;line-height: 40px;color: #666;margin-left: 20px;">帮助中心</div>
<div style="flex: 1;display: flex;">
<div style="flex: 1;"></div>
<div style="width: 300px;display: flex;">
<el-button type="text" style="color: #666;" class="top-title">登录</el-button>
<el-button type="text" style="color: #666;margin-right: 10px;" class="top-title">注册</el-button>
<el-button type="text" style="color: #666;margin-right: 10px;" class="top-title">我的U袋</el-button>
<el-button type="text" style="color: #666;margin-right: 10px;" class="top-title">我的订单</el-button>
<el-button type="text" style="color: #666;margin-right: 10px;" class="top-title">积分平台</el-button>
</div>
</div>
</div>
<div style="margin: 0 400px;height: 100px;line-height: 100px;">
<div style="display: flex;">
<div style="width: 200px;height: 100px;">
<img src="../../../public/img/logo.jpg" style="cursor: pointer;width: 200px;height: 100px;">
</div>
<div style="flex: 1;text-align: center;padding: 0 50px;">
<el-input placeholder="Ta们都在搜XXX" v-model="input" style="width: 100%;margin-top: 30px;">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
<div style="width: 200px;text-align: center;">
<el-button type="warning" icon="el-icon-shopping-cart-2" plain>购物车 0 件</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
input:''
};
},
mounted() {
},
methods: {
homePage(){
this.$router.push({path: '/home/index'});
},
}
};
</script>
<style>
.top-title:hover{
cursor: pointer;
color: #b31e22!important;
}
.el-input-group__append, .el-input-group__prepend{
background-color: #b31e22!important;
color: #ffffff!important;
}
</style>
6.src/page/index/index.vue
<template>
<div id="body" style="width: 100%;height: 100%;overflow: auto;">
<top></top>
<router-view></router-view>
<foot></foot>
</div>
</template>
<script>
import top from "../top/index.vue";
import foot from "../foot/index";
export default {
components: {
top,
foot
},
name: "index",
data() {
return {
};
},
mounted() {
},
methods: {
}
};
</script>
<style>
#body{
background-size: 100% 100%;
background-repeat: no-repeat;
}
</style>
7.src/page/foot/index.vue
<template>
<div style="font-size: 14px;">
<div style="margin: 50px 400px 50px 400px;">
<div style="display: flex;">
<div style="flex: 1;display: flex;">
<div style="">
<div class="foot-title">帮助中心</div>
<div class="foot-item">账户管理</div>
<div class="foot-item">购物指南</div>
<div class="foot-item">订单操作</div>
</div>
<div style="margin-left: 100px;">
<div class="foot-title">服务支持</div>
<div class="foot-item">账户管理</div>
<div class="foot-item">购物指南</div>
<div class="foot-item">订单操作</div>
</div>
<div style="margin-left: 100px;">
<div class="foot-title">线下门店</div>
<div class="foot-item">账户管理</div>
<div class="foot-item">购物指南</div>
<div class="foot-item">订单操作</div>
</div>
<div style="margin-left: 100px;">
<div class="foot-title">支付方式</div>
<div class="foot-item">账户管理</div>
<div class="foot-item">购物指南</div>
<div class="foot-item">订单操作</div>
</div>
</div>
<div style="width: 250px;border-left: 1px solid #dfdfdf;text-align: center;">
<div style="color: #19b4ea;font-weight: bold;font-size: 18px;line-height: 40px;">000-123456789</div>
<div style="color: gray;">周一至周日8:00~18:00</div>
<div style="color: gray;margin-bottom: 10px;">（节假日不休）</div>
<el-button type="success" round icon="el-icon-headset">24小时客服在线</el-button>
</div>
</div>
</div>
<div style="background-color: #19b4ea;height: 40px;text-align: center;line-height: 40px;color: #FFFFFF;">
申明：本网页仅供学习参考 @XXX XXX XXX
</div>
</div>
</template>
<script>
</script>
<style>
.foot-title{
height: 40px;
line-height: 40px;
}
.foot-item{
height: 25px;
line-height: 25px;
color: gray;
}
.foot-item:hover{
cursor: pointer;
color: #e37a2f;
}
</style>
8. Summary
Welcome to communicate, pay attention to the author, and learn more about good projects in time!
Get the source code or if you need help, you can use the business card + author at the back of the blog!