|
|
@@ -50,17 +50,34 @@ const oneStepAdminInfo = ref({
|
|
|
function open(url: string) {
|
|
|
window.open(url, '_blank')
|
|
|
}
|
|
|
+const activeIndex = ref(1);
|
|
|
+
|
|
|
+const onTabClick = (index: number) => {
|
|
|
+ activeIndex.value = index;
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div class="wrap">
|
|
|
+ <div class="tabs">
|
|
|
+ <div v-for="index in 2" :key="index" @click="onTabClick(index)" class="tab"
|
|
|
+ :class="{ active: activeIndex === index }">
|
|
|
+ 标签{{ index }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-wrap">
|
|
|
+ <!-- 可以在这里添加内容 -->
|
|
|
+ 32132132
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div>
|
|
|
<PageHeader>
|
|
|
<template #title>
|
|
|
<div class="flex items-center gap-4">
|
|
|
欢迎使用 Fantastic-admin
|
|
|
</div>
|
|
|
</template>
|
|
|
- <template #content>
|
|
|
+<template #content>
|
|
|
<div class="text-sm/6">
|
|
|
<div>
|
|
|
这是一款<b class="text-emphasis">开箱即用</b>的中后台框架,同时它也经历过数十个真实项目的技术沉淀,确保框架在开发中可落地、可使用、可维护
|
|
|
@@ -70,28 +87,26 @@ function open(url: string) {
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <HButton outline @click="open('https://fantastic-admin.hurui.me')">
|
|
|
- <SvgIcon name="i-ri:file-text-line" />
|
|
|
- 开发文档
|
|
|
- </HButton>
|
|
|
- <HDropdownMenu
|
|
|
- :items="[
|
|
|
+<HButton outline @click="open('https://fantastic-admin.hurui.me')">
|
|
|
+ <SvgIcon name="i-ri:file-text-line" />
|
|
|
+ 开发文档
|
|
|
+</HButton>
|
|
|
+<HDropdownMenu :items="[
|
|
|
[
|
|
|
{ label: 'Gitee', handle: () => open('https://gitee.com/fantastic-admin/basic') },
|
|
|
{ label: 'Github', handle: () => open('https://github.com/fantastic-admin/basic') },
|
|
|
],
|
|
|
- ]"
|
|
|
- >
|
|
|
- <HButton class="ml-2">
|
|
|
- <SvgIcon name="i-ri:code-s-slash-line" />
|
|
|
- 代码仓库
|
|
|
- <SvgIcon name="i-ep:arrow-down" />
|
|
|
- </HButton>
|
|
|
- </HDropdownMenu>
|
|
|
- </PageHeader>
|
|
|
- <div class="w-full flex flex-col gap-4 px-4 xl:flex-row">
|
|
|
- <PageMain class="ecology">
|
|
|
- <template #title>
|
|
|
+ ]">
|
|
|
+ <HButton class="ml-2">
|
|
|
+ <SvgIcon name="i-ri:code-s-slash-line" />
|
|
|
+ 代码仓库
|
|
|
+ <SvgIcon name="i-ep:arrow-down" />
|
|
|
+ </HButton>
|
|
|
+</HDropdownMenu>
|
|
|
+</PageHeader>
|
|
|
+<div class="w-full flex flex-col gap-4 px-4 xl:flex-row">
|
|
|
+ <PageMain class="ecology">
|
|
|
+ <template #title>
|
|
|
<div class="title-info">
|
|
|
<img src="https://cn.vuejs.org/logo.svg">
|
|
|
<div>
|
|
|
@@ -107,14 +122,14 @@ function open(url: string) {
|
|
|
</HButton>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <ul class="m-0 pr-8 text-size-sm leading-6">
|
|
|
- <li v-for="item in fantasticStartkitInfo.feature" :key="item">
|
|
|
- {{ item }}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </PageMain>
|
|
|
- <PageMain class="ecology">
|
|
|
- <template #title>
|
|
|
+ <ul class="m-0 pr-8 text-size-sm leading-6">
|
|
|
+ <li v-for="item in fantasticStartkitInfo.feature" :key="item">
|
|
|
+ {{ item }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </PageMain>
|
|
|
+ <PageMain class="ecology">
|
|
|
+ <template #title>
|
|
|
<div class="title-info">
|
|
|
<img src="https://fantastic-admin.hurui.me/logo.png">
|
|
|
<div>
|
|
|
@@ -130,15 +145,17 @@ function open(url: string) {
|
|
|
</HButton>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <ElCarousel trigger="click" indicator-position="none" :interval="5000" height="250px">
|
|
|
- <ElCarouselItem v-for="(item, index) in fantasticAdminInfo.data" :key="item">
|
|
|
- <ElImage :src="item" fit="cover" style="width: 100%; height: 250px; margin: auto; cursor: pointer;" @click="fantasticAdminInfo.imageVisible = true; fantasticAdminInfo.index = index" />
|
|
|
- </ElCarouselItem>
|
|
|
- </ElCarousel>
|
|
|
- <ElImageViewer v-if="fantasticAdminInfo.imageVisible" :url-list="fantasticAdminInfo.data" :initial-index="fantasticAdminInfo.index" @close="fantasticAdminInfo.imageVisible = false" />
|
|
|
- </PageMain>
|
|
|
- <PageMain class="ecology">
|
|
|
- <template #title>
|
|
|
+ <ElCarousel trigger="click" indicator-position="none" :interval="5000" height="250px">
|
|
|
+ <ElCarouselItem v-for="(item, index) in fantasticAdminInfo.data" :key="item">
|
|
|
+ <ElImage :src="item" fit="cover" style="width: 100%; height: 250px; margin: auto; cursor: pointer;"
|
|
|
+ @click="fantasticAdminInfo.imageVisible = true; fantasticAdminInfo.index = index" />
|
|
|
+ </ElCarouselItem>
|
|
|
+ </ElCarousel>
|
|
|
+ <ElImageViewer v-if="fantasticAdminInfo.imageVisible" :url-list="fantasticAdminInfo.data"
|
|
|
+ :initial-index="fantasticAdminInfo.index" @close="fantasticAdminInfo.imageVisible = false" />
|
|
|
+ </PageMain>
|
|
|
+ <PageMain class="ecology">
|
|
|
+ <template #title>
|
|
|
<div class="title-info">
|
|
|
<img src="https://one-step-admin.hurui.me/logo.png">
|
|
|
<div>
|
|
|
@@ -154,18 +171,79 @@ function open(url: string) {
|
|
|
</HButton>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <ElCarousel trigger="click" indicator-position="none" :interval="5000" height="250px">
|
|
|
- <ElCarouselItem v-for="(item, index) in oneStepAdminInfo.data" :key="item">
|
|
|
- <ElImage :src="item" fit="cover" style="width: 100%; height: 250px; margin: auto; cursor: pointer;" @click="oneStepAdminInfo.imageVisible = true; oneStepAdminInfo.index = index" />
|
|
|
- </ElCarouselItem>
|
|
|
- </ElCarousel>
|
|
|
- <ElImageViewer v-if="oneStepAdminInfo.imageVisible" :url-list="oneStepAdminInfo.data" :initial-index="oneStepAdminInfo.index" @close="oneStepAdminInfo.imageVisible = false" />
|
|
|
- </PageMain>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <ElCarousel trigger="click" indicator-position="none" :interval="5000" height="250px">
|
|
|
+ <ElCarouselItem v-for="(item, index) in oneStepAdminInfo.data" :key="item">
|
|
|
+ <ElImage :src="item" fit="cover" style="width: 100%; height: 250px; margin: auto; cursor: pointer;"
|
|
|
+ @click="oneStepAdminInfo.imageVisible = true; oneStepAdminInfo.index = index" />
|
|
|
+ </ElCarouselItem>
|
|
|
+ </ElCarousel>
|
|
|
+ <ElImageViewer v-if="oneStepAdminInfo.imageVisible" :url-list="oneStepAdminInfo.data"
|
|
|
+ :initial-index="oneStepAdminInfo.index" @close="oneStepAdminInfo.imageVisible = false" />
|
|
|
+ </PageMain>
|
|
|
+</div>
|
|
|
+</div> -->
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
|
+.wrap {
|
|
|
+ padding: 10px;
|
|
|
+ margin: 0 auto;
|
|
|
+ background-color: #eee;
|
|
|
+}
|
|
|
+
|
|
|
+.tabs {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ background: linear-gradient(#cdd9fe, #e2e9fd);
|
|
|
+ border-radius: 8px 8px 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+.tab {
|
|
|
+ position: relative;
|
|
|
+ width: 50%;
|
|
|
+ line-height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+transition;
|
|
|
+}
|
|
|
+
|
|
|
+.tab.active {
|
|
|
+ color: #4185ef;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.tab.active::before {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: -49px;
|
|
|
+ z-index: 2;
|
|
|
+ width: 50px;
|
|
|
+ height: 100%;
|
|
|
+ clip-path: path("M 0,50 C 25,50 25,0 50,0 L 50, 50 Z");
|
|
|
+ content: "";
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.tab.active::after {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: -49px;
|
|
|
+ z-index: 2;
|
|
|
+ width: 50px;
|
|
|
+ height: 100%;
|
|
|
+ clip-path: path("M 0,0 C 25,0 25,50 50,50 L 0, 50 Z");
|
|
|
+ content: "";
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.content-wrap {
|
|
|
+ min-height: 200px;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+/* ============================================= */
|
|
|
+
|
|
|
.text-emphasis {
|
|
|
text-emphasis-style: "❤";
|
|
|
}
|