zq
3 months ago
27 changed files with 660 additions and 100 deletions
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 668 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,77 @@ |
|||
<template> |
|||
<el-breadcrumb v-if="showBreadcrumb" separator="/"> |
|||
<el-breadcrumb-item |
|||
v-for="(item, index) in breadcrumbList" |
|||
:key="index" |
|||
> |
|||
<i v-if="item.icon" :class="item.icon"></i> |
|||
<span>{{ item.title }}</span> |
|||
</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
breadcrumbList: [], |
|||
showBreadcrumb: false // 控制是否显示面包屑导航 |
|||
}; |
|||
}, |
|||
watch: { |
|||
$route() { |
|||
this.updateBreadcrumb(); |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.updateBreadcrumb(); |
|||
}, |
|||
methods: { |
|||
updateBreadcrumb() { |
|||
const currentPath = this.$route.path; |
|||
// 判断是否为子页面 |
|||
if(!this.$parent.menuData)return |
|||
const isSubPage = this.isSubPage(currentPath); |
|||
this.showBreadcrumb = isSubPage; |
|||
|
|||
if (isSubPage) { |
|||
this.breadcrumbList = this.getBreadcrumbList(currentPath); |
|||
} else { |
|||
this.breadcrumbList = []; |
|||
} |
|||
}, |
|||
isSubPage(path) { |
|||
console.log(this.$parent.menuData,'this.$parent.menuData=='); |
|||
// 判断当前路径是否为子页面 |
|||
for (const menu of this.$parent.menuData) { |
|||
for (const subMenu of menu.children) { |
|||
if (subMenu.path === path) { |
|||
return true; |
|||
} |
|||
} |
|||
} |
|||
return false; |
|||
}, |
|||
getBreadcrumbList(path) { |
|||
const breadcrumbList = []; |
|||
// 遍历菜单数据，查找匹配的面包屑路径 |
|||
for (const menu of this.$parent.menuData) { |
|||
for (const subMenu of menu.children) { |
|||
if (subMenu.path === path) { |
|||
breadcrumbList.push({ title: menu.title, icon: menu.icon }); |
|||
breadcrumbList.push({ title: subMenu.title }); |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
return breadcrumbList; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.el-breadcrumb { |
|||
margin-bottom: 20px; |
|||
} |
|||
</style> |
|||
@ -1,10 +1,47 @@ |
|||
<template> |
|||
<div class="header-wrap"> |
|||
<div class="header-wrap min-width"> |
|||
<div class="header-logo"> |
|||
<img src="../assets/franchise1/logo.png" alt=""> |
|||
<img src="../assets/header-logo.png" alt=""> |
|||
</div> |
|||
<div class="header-right"> |
|||
|
|||
<div class="header-right flex"> |
|||
<div class="right-item">权限设置</div> |
|||
<div class="right-item">岗位设置</div> |
|||
<div class="right-item flex"> |
|||
<img class="right-item-icon" src="../assets/header-icon.png" alt=""> |
|||
<span>学术论文出版</span> |
|||
<img src="../assets/header-drop.svg" alt=""> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<style lang="scss" scoped> |
|||
.flex{ |
|||
display: flex; |
|||
} |
|||
.header-wrap{ |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.header-logo{ |
|||
img{ |
|||
height: 46px; |
|||
} |
|||
} |
|||
.header-right{ |
|||
width: 362px; |
|||
justify-content: space-between; |
|||
|
|||
.right-item-icon{ |
|||
width: 36px; |
|||
height: 36px; |
|||
} |
|||
.right-item-icon +span{ |
|||
display: inline-block; |
|||
margin: 0 6px 0 12px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,59 +1,153 @@ |
|||
<template> |
|||
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" |
|||
:collapse="isCollapse"> |
|||
<el-submenu index="1"> |
|||
<template slot="title"> |
|||
<i class="el-icon-location"></i> |
|||
<span slot="title">导航一</span> |
|||
</template> |
|||
<el-menu-item-group> |
|||
<span slot="title">分组一</span> |
|||
<el-menu-item index="1-1">选项1</el-menu-item> |
|||
<el-menu-item index="1-2">选项2</el-menu-item> |
|||
</el-menu-item-group> |
|||
<el-menu-item-group title="分组2"> |
|||
<el-menu-item index="1-3">选项3</el-menu-item> |
|||
</el-menu-item-group> |
|||
<el-submenu index="1-4"> |
|||
<span slot="title">选项4</span> |
|||
<el-menu-item index="1-4-1">选项1</el-menu-item> |
|||
</el-submenu> |
|||
</el-submenu> |
|||
<el-menu-item index="2"> |
|||
<i class="el-icon-menu"></i> |
|||
<span slot="title">导航二</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="3" disabled> |
|||
<i class="el-icon-document"></i> |
|||
<span slot="title">导航三</span> |
|||
</el-menu-item> |
|||
<el-menu-item index="4"> |
|||
<i class="el-icon-setting"></i> |
|||
<span slot="title">导航四</span> |
|||
</el-menu-item> |
|||
</el-menu> |
|||
<el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect" :collapse="isCollapse" |
|||
:default-openeds="['1', '2']"> |
|||
<div class="menu-top"> |
|||
<span v-show="!isCollapse"> |
|||
导航 |
|||
</span> |
|||
<img v-if="!isCollapse" src="../assets/menu-close.svg" @click="changeMenuStatus(true)" alt=""> |
|||
<img v-else src="../assets/menu-open.svg" @click="changeMenuStatus(false)" alt=""> |
|||
</div> |
|||
<el-submenu v-for="item in menuData" :key="item.index" :index="item.index"> |
|||
<template slot="title"> |
|||
<i :class="item.icon"></i> |
|||
<span>{{ item.title }}</span> |
|||
</template> |
|||
<el-menu-item style="padding: 0 22px;" v-for="subItem in item.children" :key="subItem.index" |
|||
:index="subItem.index" @click="handleMenuItemClick(subItem)"> |
|||
{{ subItem.title }} |
|||
</el-menu-item> |
|||
</el-submenu> |
|||
</el-menu> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name:'SliderMenu', |
|||
data() { |
|||
return { |
|||
isCollapse: true |
|||
}; |
|||
export default { |
|||
name: 'SliderMenu', |
|||
data() { |
|||
return { |
|||
isCollapse: false, |
|||
activeMenu: '', |
|||
routerList: [], |
|||
menuData: [ |
|||
{ |
|||
index: '1', |
|||
title: '父级菜单1', |
|||
icon: 'el-icon-location', |
|||
children: [ |
|||
{ index: '1-1', title: '子级菜单1-1', path: '/' }, |
|||
{ index: '1-2', title: 'ui页面', path: '/ui' } |
|||
] |
|||
}, |
|||
{ |
|||
index: '2', |
|||
title: '父级菜单2', |
|||
icon: 'el-icon-menu', |
|||
children: [ |
|||
{ index: '2-1', title: '子级菜单2-1', path: '/about' }, |
|||
{ index: '2-2', title: '加盟耶main', path: '/franchise' } |
|||
] |
|||
} |
|||
] |
|||
}; |
|||
}, |
|||
methods: { |
|||
changeMenuStatus(flag) { |
|||
this.isCollapse = flag; |
|||
}, |
|||
methods: { |
|||
handleOpen(key, keyPath) { |
|||
console.log(key, keyPath); |
|||
}, |
|||
handleClose(key, keyPath) { |
|||
console.log(key, keyPath); |
|||
} |
|||
handleSelect(index) { |
|||
this.activeMenu = index; |
|||
}, |
|||
handleMenuItemClick(item) { |
|||
this.$router.push(item.path); |
|||
this.activeMenu = item.index; |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.routerList = this.$router.options.router;//配置路由 |
|||
console.log(this.$route.path, this.$router.options.router, 'this.$route.path==='); |
|||
// 初始化时设置默认激活的菜单项 |
|||
this.activeMenu = this.$route.path; |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.el-menu-vertical-demo:not(.el-menu--collapse) { |
|||
width: 200px; |
|||
min-height: 400px; |
|||
} |
|||
.el-menu-vertical-demo:not(.el-menu--collapse) { |
|||
width: 158px; |
|||
min-width: 158px; |
|||
min-height: calc(100vh - 62px); |
|||
} |
|||
|
|||
.el-menu-item { |
|||
padding: 0 22px; |
|||
} |
|||
|
|||
.menu-top { |
|||
background: #FFFFFF; |
|||
box-sizing: border-box; |
|||
/* middle/middle_line_1 */ |
|||
border-width: 0px 0px 1px 0px; |
|||
border-style: solid; |
|||
border-color: #DFE2E6; |
|||
padding: 15px 0px; |
|||
margin: 0 22px; |
|||
display: flex; |
|||
font-size: 16px; |
|||
color: #1E2226; |
|||
font-weight: bold; |
|||
line-height: normal; |
|||
letter-spacing: 0.08em; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
::v-deep .el-submenu { |
|||
width: 16px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
::v-deep .el-submenu .el-menu-item { |
|||
min-width: 138px; |
|||
width: 100%; |
|||
} |
|||
|
|||
::v-deep .el-submenu__title { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
::v-deep .el-submenu__title:hover { |
|||
background-color: transparent; |
|||
cursor: not-allowed; |
|||
} |
|||
|
|||
::v-deep .el-submenu__title .el-submenu__icon-arrow.el-icon-arrow-down { |
|||
display: none; |
|||
} |
|||
|
|||
::v-deep .el-submenu .el-menu-item { |
|||
padding: 0 22px; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
::v-deep .el-submenu .el-menu-item { |
|||
height: 36px; |
|||
} |
|||
|
|||
::v-deep.el-submenu .el-menu-item { |
|||
height: 36px; |
|||
line-height: 36px; |
|||
color: #8A9099; |
|||
letter-spacing: 0.08em; |
|||
} |
|||
|
|||
::v-deep .el-menu-item:hover { |
|||
background: #F6F7FA; |
|||
} |
|||
|
|||
::v-deep .el-menu-item.is-active { |
|||
color: #006AFF; |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,246 @@ |
|||
<template> |
|||
<div class="register-wrap min-width"> |
|||
<!-- 顶部提示语 --> |
|||
<div class="register-top"> |
|||
<div class="register-top-left"> |
|||
<img src="@/assets/register/register-top-left.svg" alt=""> |
|||
<span>设置完这些信息就可以正式售卖啦，也可以选择跳过，先进入后台看看哦 </span> |
|||
</div> |
|||
<div class="register-top-right"> |
|||
<img src="@/assets/register/register-top-close.svg" alt=""> |
|||
</div> |
|||
</div> |
|||
<!-- 步骤条 --> |
|||
<el-steps :active="activeStep" finish-status="success"> |
|||
<el-step title="步骤 1"> |
|||
<template #icon> |
|||
<img src="@/assets/register/step1_ing.svg" alt="icon1" class="custom-icon" /> |
|||
<!-- <img src="@/assets/register/step_success.svg" alt="icon1" class="custom-icon" /> --> |
|||
</template> |
|||
<div> |
|||
<span>基础信息</span> |
|||
<span>填写站点信息、选择模板样式</span> |
|||
</div> |
|||
</el-step> |
|||
<el-step title="步骤 2"> |
|||
<template #icon> |
|||
<!-- <img src="@/assets/register/step2_ing.svg" alt="icon1" class="custom-icon" /> --> |
|||
<img src="@/assets/register/step2_null.svg" alt="icon2" class="custom-icon" /> |
|||
<!-- <img src="@/assets/register/step_success.svg" alt="icon1" class="custom-icon" /> --> |
|||
</template> |
|||
<div> |
|||
<span>基础信息</span> |
|||
<span>填写站点信息、选择模板样式</span> |
|||
</div> |
|||
</el-step> |
|||
<el-step title="步骤 3"> |
|||
<template #icon> |
|||
<!-- <img src="@/assets/register/step3_ing.svg" alt="icon1" class="custom-icon" /> --> |
|||
<img src="@/assets/register/step3_null.svg" alt="icon3" class="custom-icon" /> |
|||
<!-- <img src="@/assets/register/step_success.svg" alt="icon1" class="custom-icon" /> --> |
|||
</template> |
|||
<div> |
|||
<span>基础信息</span> |
|||
<span>填写站点信息、选择模板样式</span> |
|||
</div> |
|||
</el-step> |
|||
</el-steps> |
|||
|
|||
<el-steps :active="activeStep" finish-status="success"> |
|||
<el-step v-for="(step, index) in steps" :key="index" :status="getStepStatus(index)"> |
|||
<!-- 自定义图标插槽 --> |
|||
<template #icon> |
|||
<div class="custom-icon"> |
|||
<!-- 填写完毕状态 --> |
|||
<img v-if="isStepFinished(index)" src="@/assets/register/step1_ing.svg" alt="checked" |
|||
style="width: 24px; height: 24px" /> |
|||
<!-- 填写中状态 --> |
|||
<img v-else-if="isStepActive(index)" :src="step.checked" alt="editing" |
|||
style="width: 24px; height: 24px" /> |
|||
<!-- 未填写状态 --> |
|||
<img v-else :src="step.wait" alt="waiting" style="width: 24px; height: 24px" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<!-- 自定义文案插槽 --> |
|||
<template #title> |
|||
<div class="step-title"> |
|||
<span>{{ step.title }}</span> |
|||
<div class="step-status"> |
|||
{{ getStepStatusText(index) }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</el-step> |
|||
</el-steps> |
|||
|
|||
<p class="pageDesc">搭建售卖渠道</p> |
|||
|
|||
<div class="step3-wrap"> |
|||
<div class="step3-top"> |
|||
<h3>服务列表</h3> |
|||
<div class="btngroup"> |
|||
<GuipButton type="mild" size="mmedium">添加查重服务</GuipButton> |
|||
<GuipButton type="mild" size="mmedium">添加写作辅助</GuipButton> |
|||
<GuipButton type="mild" size="mmedium">添加AIGC</GuipButton> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import GuipButton from '@/components/GuipButton.vue'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
activeStep: 0, |
|||
steps: [ |
|||
{ title: "步骤 1", 'desc': '', 'wait': '@/assets/register/step1_ing.svg', 'checked': '@/assets/register/step1_ing.svg', 'finish': '@/assets/register/step_success.svg' }, |
|||
{ title: "步骤 2", 'desc': '', 'wait': '@/assets/register/step2_null.svg', 'checked': '@/assets/register/step2_ing.svg', 'finish': '@/assets/register/step_success.svg' }, |
|||
{ title: "步骤 3", 'desc': '', 'wait': '@/assets/register/step3_null.svg', 'checked': '@/assets/register/step3_ing.svg', 'finish': '@/assets/register/step_success.svg' } |
|||
] |
|||
}; |
|||
}, |
|||
components:{ |
|||
GuipButton, |
|||
}, |
|||
methods: { |
|||
// nextStep() { |
|||
// if (this.activeStep < 2) { |
|||
// this.activeStep++; |
|||
// } |
|||
// }, |
|||
// 上一步 |
|||
prevStep() { |
|||
if (this.activeStep > 0) { |
|||
this.activeStep--; |
|||
} |
|||
}, |
|||
// 下一步 |
|||
nextStep() { |
|||
if (this.activeStep < this.steps.length - 1) { |
|||
this.activeStep++; |
|||
} |
|||
}, |
|||
// 判断步骤是否已完成 |
|||
isStepFinished(index) { |
|||
return index < this.activeStep; |
|||
}, |
|||
// 判断步骤是否为当前步骤（填写中） |
|||
isStepActive(index) { |
|||
return index === this.activeStep; |
|||
}, |
|||
// 获取步骤状态 |
|||
getStepStatus(index) { |
|||
if (this.isStepFinished(index)) { |
|||
return "success"; // 已完成 |
|||
} else if (this.isStepActive(index)) { |
|||
return "process"; // 进行中 |
|||
} else { |
|||
return "wait"; // 未开始 |
|||
} |
|||
}, |
|||
// 获取步骤状态文案 |
|||
getStepStatusText(index) { |
|||
if (this.isStepFinished(index)) { |
|||
return "已完成"; |
|||
} else if (this.isStepActive(index)) { |
|||
return "填写中"; |
|||
} else { |
|||
return "未开始"; |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.width-box{ |
|||
width: 1220px; |
|||
} |
|||
@media (min-width: 1441px) { |
|||
.width-box{ |
|||
width: 1220px; |
|||
} |
|||
} |
|||
@media (max-width:1200px) { |
|||
.width-box{ |
|||
width: 1100px; |
|||
} |
|||
|
|||
} |
|||
|
|||
.custom-icon { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.step-title { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
|
|||
.step-status { |
|||
font-size: 12px; |
|||
color: #909399; |
|||
margin-top: 4px; |
|||
} |
|||
|
|||
.register-wrap { |
|||
.custom-icon { |
|||
width: 24px; |
|||
height: 24px; |
|||
} |
|||
|
|||
.register-top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
// height: 72px; |
|||
align-items: center; |
|||
padding: 20px 40px 20px 110px; |
|||
background: linear-gradient(270deg, #F6EEF7 3%, #EDE9FB 97%); |
|||
color: #23242B; |
|||
letter-spacing: 0.08em; |
|||
line-height: 32px; |
|||
|
|||
.register-top-left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.register-top-left img { |
|||
margin-right: 12px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pageDesc { |
|||
/* 自动布局 */ |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 24px 110px; |
|||
line-height: 32px; |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
line-height: 24px; |
|||
letter-spacing: 0.06em; |
|||
color: #1E2226; |
|||
text-align: left; |
|||
|
|||
} |
|||
.step3-wrap{ |
|||
.step3-top{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.btngroup{ |
|||
display: flex; |
|||
button{ |
|||
margin-left: 12px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -1,5 +1,5 @@ |
|||
<template> |
|||
<div class="about"> |
|||
<h1>This is an about page</h1> |
|||
<h1>This is an UserPosts page</h1> |
|||
</div> |
|||
</template> |
|||
Loading…
Reference in new issue