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> |
<template> |
||||
<div class="header-wrap"> |
<div class="header-wrap min-width"> |
||||
<div class="header-logo"> |
<div class="header-logo"> |
||||
<img src="../assets/franchise1/logo.png" alt=""> |
<img src="../assets/header-logo.png" alt=""> |
||||
</div> |
</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> |
||||
</div> |
</div> |
||||
</template> |
</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> |
<template> |
||||
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" |
<el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect" :collapse="isCollapse" |
||||
:collapse="isCollapse"> |
:default-openeds="['1', '2']"> |
||||
<el-submenu index="1"> |
<div class="menu-top"> |
||||
<template slot="title"> |
<span v-show="!isCollapse"> |
||||
<i class="el-icon-location"></i> |
导航 |
||||
<span slot="title">导航一</span> |
</span> |
||||
</template> |
<img v-if="!isCollapse" src="../assets/menu-close.svg" @click="changeMenuStatus(true)" alt=""> |
||||
<el-menu-item-group> |
<img v-else src="../assets/menu-open.svg" @click="changeMenuStatus(false)" alt=""> |
||||
<span slot="title">分组一</span> |
</div> |
||||
<el-menu-item index="1-1">选项1</el-menu-item> |
<el-submenu v-for="item in menuData" :key="item.index" :index="item.index"> |
||||
<el-menu-item index="1-2">选项2</el-menu-item> |
<template slot="title"> |
||||
</el-menu-item-group> |
<i :class="item.icon"></i> |
||||
<el-menu-item-group title="分组2"> |
<span>{{ item.title }}</span> |
||||
<el-menu-item index="1-3">选项3</el-menu-item> |
</template> |
||||
</el-menu-item-group> |
<el-menu-item style="padding: 0 22px;" v-for="subItem in item.children" :key="subItem.index" |
||||
<el-submenu index="1-4"> |
:index="subItem.index" @click="handleMenuItemClick(subItem)"> |
||||
<span slot="title">选项4</span> |
{{ subItem.title }} |
||||
<el-menu-item index="1-4-1">选项1</el-menu-item> |
</el-menu-item> |
||||
</el-submenu> |
</el-submenu> |
||||
</el-submenu> |
</el-menu> |
||||
<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> |
|
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
name:'SliderMenu', |
name: 'SliderMenu', |
||||
data() { |
data() { |
||||
return { |
return { |
||||
isCollapse: true |
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: { |
handleSelect(index) { |
||||
handleOpen(key, keyPath) { |
this.activeMenu = index; |
||||
console.log(key, keyPath); |
}, |
||||
}, |
handleMenuItemClick(item) { |
||||
handleClose(key, keyPath) { |
this.$router.push(item.path); |
||||
console.log(key, keyPath); |
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> |
</script> |
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.el-menu-vertical-demo:not(.el-menu--collapse) { |
.el-menu-vertical-demo:not(.el-menu--collapse) { |
||||
width: 200px; |
width: 158px; |
||||
min-height: 400px; |
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> |
</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> |
<template> |
||||
<div class="about"> |
<div class="about"> |
||||
<h1>This is an about page</h1> |
<h1>This is an UserPosts page</h1> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
Loading…
Reference in new issue