-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ebfe12d
commit 5d66147
Showing
8 changed files
with
107 additions
and
200 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,77 +1,11 @@ | ||
| <script setup lang="ts"> | ||
| import { RouterLink, RouterView } from 'vue-router' | ||
| import HomeView from '@/views/home/index.vue' | ||
| </script> | ||
|
|
||
| <template> | ||
| <header> | ||
| <div class="wrapper"> | ||
| <nav> | ||
| <RouterLink to="/">Home</RouterLink> | ||
| <RouterLink to="/login" target="_blank">Login</RouterLink> | ||
| <RouterLink to="/market">Market</RouterLink> | ||
| <RouterLink to="/personal">personal</RouterLink> | ||
| </nav> | ||
| </div> | ||
| </header> | ||
|
|
||
| <RouterView /> | ||
| <RouterView></RouterView> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| header { | ||
| line-height: 1.5; | ||
| max-height: 100vh; | ||
| } | ||
| nav { | ||
| width: 100%; | ||
| font-size: 12px; | ||
| text-align: center; | ||
| margin-top: 2rem; | ||
| } | ||
| nav a.router-link-exact-active { | ||
| color: var(--color-text); | ||
| } | ||
| nav a.router-link-exact-active:hover { | ||
| background-color: transparent; | ||
| } | ||
| nav a { | ||
| display: inline-block; | ||
| padding: 0 1rem; | ||
| border-left: 1px solid var(--color-border); | ||
| } | ||
| nav a:first-of-type { | ||
| border: 0; | ||
| } | ||
| @media (min-width: 1024px) { | ||
| header { | ||
| display: flex; | ||
| place-items: center; | ||
| padding-right: calc(var(--section-gap) / 2); | ||
| } | ||
| .logo { | ||
| margin: 0 2rem 0 0; | ||
| } | ||
| header .wrapper { | ||
| display: flex; | ||
| place-items: flex-start; | ||
| flex-wrap: wrap; | ||
| } | ||
| nav { | ||
| text-align: left; | ||
| margin-left: -1rem; | ||
| font-size: 1rem; | ||
| padding: 1rem 0; | ||
| margin-top: 1rem; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <template> | ||
| <div class="text"> | ||
| <slot></slot> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| .text { | ||
| color: #333; | ||
| font-size: 16px; | ||
| padding:10px 30px; | ||
| margin:auto; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,129 +1,77 @@ | ||
| <template> | ||
| <div></div> | ||
| <!-- <div class="menu-container">--> | ||
| <!-- <h3>添加菜单</h3>--> | ||
| <!-- <div v-for="(menu, index) in menus" :key="index" class="menu-item">--> | ||
| <!-- <input--> | ||
| <!-- type="text"--> | ||
| <!-- v-model="menu.name"--> | ||
| <!-- placeholder="请输入菜单子项名称"--> | ||
| <!-- :disabled="!isEditingMenu(index)"--> | ||
| <!-- />--> | ||
| <!-- <div class="sub-options">--> | ||
| <!-- <label>--> | ||
| <!-- <input type="radio" v-model="menu.type" value="table" /> 表格--> | ||
| <!-- </label>--> | ||
| <!-- <label>--> | ||
| <!-- <input type="radio" v-model="menu.type" value="other" /> 其他--> | ||
| <!-- </label>--> | ||
| <!-- <div v-if="menu.type === 'table'" class="table-headers">--> | ||
| <!-- <div v-for="(header, headerIndex) in menu.headers" :key="headerIndex" class="table-header-item">--> | ||
| <!-- <input type="text" v-model="header.name" placeholder="请输入表头标题" />--> | ||
| <!-- <button @click="removeTableHeader(index, headerIndex)">-</button>--> | ||
| <!-- </div>--> | ||
| <!-- <button @click="addTableHeader(index)">+</button>--> | ||
| <!-- </div>--> | ||
| <!-- </div>--> | ||
| <!-- <button @click="removeMenu(index)">-</button>--> | ||
| <!-- </div>--> | ||
| <!-- <button @click="addMenu">+</button>--> | ||
| <!-- </div>--> | ||
| </template> | ||
| <script lang="ts" setup> | ||
| // export default { | ||
| // data() { | ||
| // return { | ||
| // menus: [ | ||
| // // 初始菜单数据 | ||
| // ], | ||
| // }; | ||
| // }, | ||
| // methods: { | ||
| // isEditingMenu(index) { | ||
| // // 判断是否允许编辑的逻辑 | ||
| // return true; // 示例，实际逻辑需根据需求实现 | ||
| // }, | ||
| // addMenu() { | ||
| // // 添加菜单的逻辑 | ||
| // this.menus.push({ name: '', type: '', headers: [] }); | ||
| // }, | ||
| // removeMenu(index) { | ||
| // // 删除菜单的逻辑 | ||
| // this.menus.splice(index, 1); | ||
| // }, | ||
| // addTableHeader(index) { | ||
| // // 添加表头的逻辑 | ||
| // this.menus[index].headers.push({ name: '' }); | ||
| // }, | ||
| // removeTableHeader(menuIndex, headerIndex) { | ||
| // // 删除表头的逻辑 | ||
| // this.menus[menuIndex].headers.splice(headerIndex, 1); | ||
| // }, | ||
| // }, | ||
| // }; | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .form-container { | ||
| max-width: 600px; | ||
| margin: 0 auto; | ||
| padding: 20px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 8px; | ||
| } | ||
| import {ref} from "vue"; | ||
| import MarketView from '@/views/market/index.vue' | ||
| import Text from "@/components/normal/Text.vue"; | ||
| import router from "@/router"; | ||
| .form-group { | ||
| margin-bottom: 15px; | ||
| const currentIndex = ref(0) | ||
| const tabs = [ | ||
| { name: 'market', component: MarketView }, | ||
| { name: 'home', component: MarketView }, | ||
| ] | ||
| const selectTab = (index: any) =>{ | ||
| currentIndex.value = index; | ||
| } | ||
| </script> | ||
|
|
||
| .checkbox-group { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 10px; | ||
| } | ||
| <template> | ||
| <div class="home"> | ||
| <!--通知滚动条--> | ||
| <div class="notice"></div> | ||
| <header class="tabs-bar"> | ||
| <nav class="side flex">logo</nav> | ||
| <nav class="flex"> | ||
| <div | ||
| v-for="(tab, index) in tabs" | ||
| :key="index" | ||
| class="tab-button" | ||
| :class="{ active: currentIndex === index }" | ||
| @click="selectTab(index)" | ||
| > | ||
| <Text>{{ tab.name }}</Text> | ||
| </div> | ||
| </nav> | ||
| <nav class="side flex"> | ||
| <button class="test" @click="router.push('/login')">login</button> | ||
| </nav> | ||
| </header> | ||
| <div class="tabs-content"> | ||
| <component | ||
| v-for="(tab, index) in tabs" | ||
| :key="index" | ||
| :is="tab.component" | ||
| :v-if="currentIndex === index" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| .menu-container { | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| .menu-item { | ||
| border: 1px solid #eee; | ||
| padding: 10px; | ||
| margin-bottom: 10px; | ||
| border-radius: 8px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 10px; | ||
| <style scoped> | ||
| .home { | ||
| width: 100%; | ||
| } | ||
| .sub-options { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 10px; | ||
| .notice{ | ||
| background-color: #f4efd3; | ||
| height:50px; | ||
| } | ||
| .table-headers { | ||
| .tabs-bar { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 5px; | ||
| background-color: #FFFBDD; | ||
| height:70px; | ||
| } | ||
| .table-header-item { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| .side{ | ||
| flex:1; | ||
| } | ||
| button { | ||
| .tab-button { | ||
| cursor: pointer; | ||
| padding: 5px 10px; | ||
| border: none; | ||
| background-color: #007bff; | ||
| color: white; | ||
| border-radius: 5px; | ||
| user-select: none; | ||
| transition: background-color 0.3s; | ||
| } | ||
| button:hover { | ||
| background-color: #0056b3; | ||
| .tab-button.active { | ||
| background-color: #f4efd3; | ||
| border-bottom: 2px solid #f4efd3; | ||
| } | ||
| </style> |