|
|
|
|
@ -5,12 +5,15 @@ |
|
|
|
|
<span class="text">AI智能体助手</span></div> |
|
|
|
|
<div class="v-menu-list"> |
|
|
|
|
<template v-for="(item,index) in menuList"> |
|
|
|
|
<div class="v-menu-list-item row flex-align-center" :class="[menuIndex==item.value?'is-active':'']" |
|
|
|
|
@click="gotoPages(item.url)"> |
|
|
|
|
<i class="icon iconfont" :class="'icon-'+item.type"></i> |
|
|
|
|
<div class="title">{{ item.name }}</div> |
|
|
|
|
<div class="v-menu-list-item"> |
|
|
|
|
<div class="v-menu-item-group-title">{{ item.name }}</div> |
|
|
|
|
<div v-for="(cell) in item.children"> |
|
|
|
|
<div class="item-cell row flex-align-center" :class="[menuIndex==cell.value?'is-active':'']" @click="gotoPages(cell.url)"><i |
|
|
|
|
class="icon iconfont" :class="'icon-'+cell.type"></i> |
|
|
|
|
<div class="title">{{ cell.name }}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="line" v-if="index==2"></div> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -28,12 +31,21 @@ export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
menuList: [ |
|
|
|
|
{name: "公文写作", value: 1,type:"document-writing", url: "/DocumentCorrectionIndex"}, |
|
|
|
|
{name: "公文纠错", value: 2,type:"document-error", url: "/DocumentWritingIndex"}, |
|
|
|
|
{name: "营销行文", value: 3,type:"marketing-writing", url: "/MarketingWritingnIndex"}, |
|
|
|
|
{name: "图像生成", value: 4,type:"image", url: "/ImageGeneratIndex"}, |
|
|
|
|
{name: "视频生成", value: 5,type:"video", url: "/VideoGeneratIndex"}, |
|
|
|
|
{name: "语音生成", value: 6,type:"voice", url: "/VoiceGeneratIndex"}, |
|
|
|
|
{ |
|
|
|
|
name: "公文写作", |
|
|
|
|
children: [ |
|
|
|
|
{name: "公文写作", value: 1, type: "document-writing", url: "/DocumentCorrectionIndex"}, |
|
|
|
|
{name: "公文纠错", value: 2, type: "document-error", url: "/DocumentWritingIndex"}, |
|
|
|
|
{name: "营销行文", value: 3, type: "marketing-writing", url: "/MarketingWritingnIndex"}] |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "体验中心", |
|
|
|
|
children: [ |
|
|
|
|
{name: "图像生成", value: 4, type: "image", url: "/ImageGeneratIndex"}, |
|
|
|
|
{name: "视频生成", value: 5, type: "video", url: "/VideoGeneratIndex"}, |
|
|
|
|
{name: "语音生成", value: 6, type: "voice", url: "/VoiceGeneratIndex"},] |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
@ -49,14 +61,17 @@ export default { |
|
|
|
|
.v-menu { |
|
|
|
|
position: relative; |
|
|
|
|
z-index: 99; |
|
|
|
|
width: 260px; |
|
|
|
|
flex: 0 0 260px; |
|
|
|
|
width: 200px; |
|
|
|
|
flex: 0 0 200px; |
|
|
|
|
height: 100%; |
|
|
|
|
background: linear-gradient(180deg, #ECF4FF, #fff 10%); |
|
|
|
|
border-right: 1px solid #e5e7eb; |
|
|
|
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 100%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.v-menu-logo { |
|
|
|
|
margin: 30px 0 60px 0; |
|
|
|
|
margin: 0 0 10px 0; |
|
|
|
|
height: 56px; |
|
|
|
|
background-color: #1060FF; |
|
|
|
|
|
|
|
|
|
.logo { |
|
|
|
|
width: 30px; |
|
|
|
|
@ -65,13 +80,13 @@ export default { |
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #000; |
|
|
|
|
color: #fff; |
|
|
|
|
font-weight: bold |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.v-menu-list { |
|
|
|
|
padding: 0 20px; |
|
|
|
|
padding: 0 5px; |
|
|
|
|
|
|
|
|
|
.line { |
|
|
|
|
width: 100%; |
|
|
|
|
@ -80,36 +95,47 @@ export default { |
|
|
|
|
margin: 10px 0 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.v-menu-list-item { |
|
|
|
|
.v-menu-item-group-title{font-size: 12px !important; |
|
|
|
|
padding: 16px 0 10px 16px;color: rgba(0, 0, 0, 0.45);} |
|
|
|
|
.item-cell { |
|
|
|
|
cursor: pointer; |
|
|
|
|
padding: 0 20px; |
|
|
|
|
padding: 0 20px 0 30px; |
|
|
|
|
height: 36px; |
|
|
|
|
line-height: 36px; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
|
|
border-radius: 8px; |
|
|
|
|
.icon{margin-right: 8px} |
|
|
|
|
|
|
|
|
|
.icon { |
|
|
|
|
margin-right: 8px |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
font-size: 16px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: rgb(30, 41, 59); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
background-color: rgba(#1060FF, 0.1); |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
color: #1060FF |
|
|
|
|
} |
|
|
|
|
.icon{ color: #1060FF} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.is-active { |
|
|
|
|
background-color: #1060FF; |
|
|
|
|
.icon{ color: #fff} |
|
|
|
|
background-color: rgba(#1060FF, 0.1); |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
color: #fff |
|
|
|
|
color: #1060FF |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.icon { |
|
|
|
|
color: #1060FF |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&.disabled{pointer-events: none;opacity: .5} |
|
|
|
|
|
|
|
|
|
&.disabled { |
|
|
|
|
pointer-events: none; |
|
|
|
|
opacity: .5 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
