From b505f3648a10dd998ae9fe7a6edb1bf125d7d6a6 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Fri, 21 Jan 2022 01:51:33 +0800
Subject: [PATCH] 主页结构调整
---
src/components/fixed/header.vue | 63 +++++++++++++++++++------------
1 files changed, 39 insertions(+), 24 deletions(-)
diff --git a/src/components/fixed/header.vue b/src/components/fixed/header.vue
index 8011ac1..8188297 100644
--- a/src/components/fixed/header.vue
+++ b/src/components/fixed/header.vue
@@ -1,19 +1,16 @@
<template>
<a-row type="flex" justify="start">
<a-col v-bind="showSmall">
- <router-link to="/main1">Home »</router-link>
- </a-col>
- <a-col v-bind="showSmall">
- <router-link to="/main2">乐谱搜索 »</router-link>
- </a-col>
- <a-col v-bind="showSmall">
- <router-link to="/main3">我的网盘 »</router-link>
- </a-col>
- <a-col v-bind="showSmall">
- <router-link to="/main4">友人帐 »</router-link>
+ <div class="menu">
+ <router-link to="/main1">Home »</router-link>
+ <router-link to="/main2">乐谱搜索 »</router-link>
+ <router-link to="/main3">我的网盘 »</router-link>
+ <router-link to="/main4">友人帐 »</router-link>
+ </div>
</a-col>
<a-col v-bind="showMain">
- <a-auto-complete ref="mySearch" v-bind="search" @select="onSelect" @search="onSearch" @change="onChange">
+ <a-auto-complete v-model="search.value" :data-source="search.dataSource" ref="mySearch" v-bind="search"
+ @select="onSelect" @search="onSearch" @change="onChange">
<a-input @keydown.enter="onSelect">
<a-icon slot="suffix" type="search" class="certain-category-icon" />
</a-input>
@@ -71,23 +68,33 @@
allowClear: true,
// autoFocus: true,
backfill: true,
+ value: '',
dataSource: [],
},
showSmall: {
- xs: 6,
- sm: 4,
- md: 4,
- lg: 4,
- xl: 4,
- xxl: 4,
+ xs: 24,
+ sm: 18,
+ md: 18,
+ lg: 18,
+ xl: 18,
+ xxl: 18,
},
showMain: {
xs: 0,
- sm: 0,
- md: 2,
- lg: 2,
- xl: 2,
- xxl: 2,
+ sm: 6,
+ md: 6,
+ lg: {
+ span: 3,
+ offset: 3
+ },
+ xl: {
+ span: 3,
+ offset: 3
+ },
+ xxl: {
+ span: 3,
+ offset: 3
+ },
}
}
@@ -103,12 +110,12 @@
console.log(e);
},
onSearch(searchText) {
- this.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)];
+ this.search.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)];
console.log("补全..");
},
onSelect(value) {
console.log('回车', value);
- this.$message.info("回车")
+ this.$message.info("回车,内容为" + value)
},
onChange(value) {
console.log('修改', value);
@@ -120,3 +127,11 @@
},
}
</script>
+<style lang="less" scoped>
+ .menu {
+ a {
+ margin-left: 10px;
+ }
+
+ }
+</style>
--
Gitblit v1.9.1