From 4fcde3201f52d0c690bfc8c16231a55a6ca9cd81 Mon Sep 17 00:00:00 2001
From: 明梦爽 <2972214568@qq.com>
Date: 星期日, 31 十月 2021 18:35:27 +0800
Subject: [PATCH] 基本布局完成
---
src/components/page/index.vue | 13 ++++
src/assets/xiaohui.png | 0
src/assets/css/global.css | 2
package.json | 2
src/components/Home.vue | 101 +++++++++++++++++++++++++++++++++
src/components/page/introduce.vue | 14 ++++
src/router.js | 25 ++++++++
7 files changed, 154 insertions(+), 3 deletions(-)
diff --git a/package.json b/package.json
index ce8a9fe..9069d1d 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
{
- "name": "vue_shop",
+ "name": "xin_chuan",
"version": "0.1.0",
"private": true,
"scripts": {
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
index 7d4f9e3..7229daf 100644
--- a/src/assets/css/global.css
+++ b/src/assets/css/global.css
@@ -5,4 +5,4 @@
height: 100%;
margin: 0;
padding: 0;
-}
\ No newline at end of file
+}
diff --git a/src/assets/xiaohui.png b/src/assets/xiaohui.png
new file mode 100644
index 0000000..4f86597
--- /dev/null
+++ b/src/assets/xiaohui.png
Binary files differ
diff --git a/src/components/Home.vue b/src/components/Home.vue
new file mode 100644
index 0000000..3090d8c
--- /dev/null
+++ b/src/components/Home.vue
@@ -0,0 +1,101 @@
+<template>
+ <el-container class="home-container">
+ <el-header>
+ <div>
+ <img src="../assets/xiaohui.png" alt="" />
+ <span>骞抽《灞卞闄㈢瀛︽妧鏈浼�</span>
+ </div>
+ </el-header>
+ <el-row>
+ <el-menu
+ mode="horizontal"
+ background-color="rgb(64, 112, 186)"
+ text-color="white"
+ class="menu"
+ :default-active="activeIndex"
+ @select="handleSelect"
+ >
+ <el-menu-item index="index">棣栭〉</el-menu-item>
+ <el-menu-item index="introduce">绉戝崗姒傚喌</el-menu-item>
+ <el-menu-item index="3">鏀跨瓥娉曡</el-menu-item>
+ <el-menu-item index="4">绉戝崗椤圭洰</el-menu-item>
+ <el-menu-item index="5">瀛︽湳浜ゆ祦</el-menu-item>
+ <el-menu-item index="6">鍔炰簨鎸囧崡</el-menu-item>
+ <el-menu-item index="7">绉戞櫘椋庨噰</el-menu-item>
+ <el-menu-item index="8">瀛︽牎棣栭〉</el-menu-item>
+ <el-menu-item index="9">鑱旂郴鎴戜滑</el-menu-item>
+ </el-menu>
+ </el-row>
+ <el-container>
+ <el-main>
+ <router-view></router-view>
+ </el-main>
+ </el-container>
+ <el-footer>Footer</el-footer>
+ </el-container>
+</template>
+
+<script>
+export default {
+ name:'',
+ data(){
+ return{
+ activeIndex:'index',
+ }
+ },
+ methods:{
+ handleSelect(key, keyPath) {
+ console.log(key, keyPath);
+ this.$router.push({
+ path:'/home/'+keyPath
+ })
+ }
+ }
+
+}
+</script>
+
+<style lang="less" scoped>
+.home-container {
+ height: 100%;
+}
+.el-header {
+ background: -webkit-linear-gradient(
+ left,
+ rgb(5, 102, 141),
+ rgb(240, 243, 189)
+ );
+
+ background: -o-linear-gradient(right, rgb(5, 102, 141), rgb(240, 243, 189));
+
+ background: -moz-linear-gradient(right, rgb(5, 102, 141), rgb(240, 243, 189));
+
+ background: linear-gradient(to right, rgb(5, 102, 141), rgb(240, 243, 189));
+}
+.el-header {
+ height: 90px !important;
+ overflow: hidden;
+ div {
+ display: flex;
+ justify-content: left;
+ // align-items: center;
+ span {
+ margin-left: 100px;
+ font-size: 30px;
+ line-height: 90px;
+ }
+ }
+ .el-menu {
+ .el-menu-item {
+ width: 150px;
+ font-size: 15px;
+ text-align: center;
+ }
+ }
+}
+.menu{
+ display: flex;
+ justify-content: space-between;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/page/index.vue b/src/components/page/index.vue
new file mode 100644
index 0000000..42c7f68
--- /dev/null
+++ b/src/components/page/index.vue
@@ -0,0 +1,13 @@
+<template>
+ <div>
+ <span>棣栭〉</span>
+ </div>
+</template>
+<script>
+export default {
+ name:'index'
+}
+</script>
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/page/introduce.vue b/src/components/page/introduce.vue
new file mode 100644
index 0000000..6566ff3
--- /dev/null
+++ b/src/components/page/introduce.vue
@@ -0,0 +1,14 @@
+<template>
+ <div>
+ <span>姒傚喌</span>
+ </div>
+</template>
+<script>
+export default {
+ name:'introduce'
+}
+
+</script>
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index 24a57f1..150ed57 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,13 +1,36 @@
import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
+import Home from './components/Home.vue'
+import index from './components/page/index.vue'
+import introduce from './components/page/introduce.vue'
+
Vue.use(Router)
const router = new Router({
routes: [
{ path: '/', redirect: '/login' },
- { path: '/login', component: Login }
+ { path: '/login', component: Login },
+ {
+ path: '/home',
+ component: Home ,
+ children:[
+ {
+ path:'/home',
+ redirect:'index'
+ },
+ {
+ path:'index',
+ component:index
+ },
+ {
+ path:'introduce',
+ name:'introduce',
+ component:introduce
+ },
+ ]
+ }
]
})
--
Gitblit v1.8.0