han
/
AI-Application-Scenarios
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

初始化

Browse Source
main
han 5 months ago
parent 6c0ab54a28
commit d4a568e091
4 changed files with 105 additions and 30 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 65
      src/assets/styles/v-layout.scss
  2. 8
      src/views/pages/AI-Document-Writing/index.vue
  3. 12
      src/views/pages/AI-Marketing-Writing/index.vue
  4. 50
      src/views/pages/AI-Voice-Generate/index.vue

65
src/assets/styles/v-layout.scss
Unescape View File

@ -326,6 +326,7 @@ $--base-super-radius: 24px;
&.inline {
width: 350px;
.el-select-dropdown__item {
display: inline-block;
width: calc(25% - 8px);
@ -383,6 +384,7 @@ $--base-super-radius: 24px;
border-radius: $--base-small-radius;
border-color: $--border-color-light
}
.el-input__inner:focus {
border-color: $--color-primary !important;
}
@ -660,7 +662,7 @@ body {
overflow: hidden;
cursor: pointer;
.image {
.item-image {
height: 150px;
margin-bottom: $--base-nomal-space;
overflow: hidden;
@ -679,27 +681,63 @@ body {
}
.el-col:nth-child(1) .ai-pages-article-list-item {
.image {
.item-image {
background: linear-gradient(120deg, #CAEAFF 0%, #E5D9FF 100%);
}
}
.el-col:nth-child(2) .ai-pages-article-list-item {
.image {
.item-image {
background: linear-gradient(120deg, #CAEAFF 0%, #CFF7FF 100%);
}
}
.el-col:nth-child(3) .ai-pages-article-list-item {
.image {
.item-image {
background: linear-gradient(120deg, #CAEAFF 0%, #D0F5DE 100%);
}
}
}
/* 语音列表 */
.ai-pages-voice-list {
.ai-pages-voice-list-item {
padding-bottom: $--base-small-space;
border-radius: $--base-small-radius;
border: 1px solid #fff;
margin: $--base-small-space 0;
background-color: #fff;
box-shadow: 0px 10px 20px 0px rgba(16, 96, 255, 0.1);
overflow: hidden;
cursor: pointer;
.item-image {
height: 150px;
margin-bottom: $--base-nomal-space;
overflow: hidden;
}
.item-content {
padding-top: $--base-small-space;
background: linear-gradient(190deg, #EBF1FC 0%, #FFFFFF 52%);
}
.title {
padding: 0 $--base-nomal-space;
font-size: $--base-nomal-font;
font-weight: 500
}
.description {
padding: $--base-small-space $--base-nomal-space;
font-size: $--base-small-font;
}
}
}
/* 行文列表 */
.ai-pages-mark-list {
.ai-pages-article-list-item {
.ai-pages-mark-list-item {
position: relative;
margin: $--base-small-space 0;
padding-bottom: $--base-small-space;
@ -721,7 +759,7 @@ body {
opacity: .2;
}
.image {
.item-image {
height: 50px;
margin: $--base-medium-space;
}
@ -742,7 +780,7 @@ body {
}
}
.el-col:nth-child(1) .ai-pages-article-list-item {
.el-col:nth-child(1) .ai-pages-mark-list-item {
background: linear-gradient(60deg, #FAFAFC 0%, #ECEBFA 53%, #D5D2FA 100%);
:after {
@ -750,13 +788,13 @@ body {
background-size: 70%;
}
.image {
.item-image {
background: url("~@/assets/ai-images/icon_positioning-customers.svg") center left no-repeat;
background-size: contain;
}
}
.el-col:nth-child(2) .ai-pages-article-list-item {
.el-col:nth-child(2) .ai-pages-mark-list-item {
background: linear-gradient(60deg, #FAFBFC 0%, #E1E9FA 52%, #C8D9FA 100%);
:after {
@ -764,13 +802,13 @@ body {
background-size: 70%;
}
.image {
.item-image {
background: url("~@/assets/ai-images/icon_originality.svg") center left no-repeat;
background-size: contain;
}
}
.el-col:nth-child(3) .ai-pages-article-list-item {
.el-col:nth-child(3) .ai-pages-mark-list-item {
background: linear-gradient(60deg, #FAFBFC 0%, #E1E9FA 52%, #C8D9FA 100%);
:after {
@ -778,7 +816,7 @@ body {
background-size: 70%;
}
.image {
.item-image {
background: url("~@/assets/ai-images/icon_illustration.svg") center left no-repeat;
background-size: contain;
}
@ -901,7 +939,8 @@ body {
/* 编辑行文 标题 */
.ai-mark-title {
font-size: 15px;
font-weight: bold; margin-bottom: $--base-small-space;
font-weight: bold;
margin-bottom: $--base-small-space;
}
/* 编辑页面 底部 */

8
src/views/pages/AI-Document-Writing/index.vue
Unescape View File

@ -22,14 +22,16 @@
<el-row :gutter="20" class="ai-pages-card-list m-t-medium">
<el-col :span="8" v-for="(item,index) in ExampleList" :key="index">
<div class="ai-pages-article-list-item" @click="gotoPages(item.id)">
<div class="image">
<div class="item-image">
<el-image
style="width: 100%;"
:src="item.img"
fit="fill"></el-image>
</div>
<div class="title">{{ item.name }}</div>
<div class="description">{{ item.description }}</div>
<div class="item-content">
<div class="title">{{ item.name }}</div>
<div class="description">{{ item.description }}</div>
</div>
</div>
</el-col>
</el-row>

12
src/views/pages/AI-Marketing-Writing/index.vue
Unescape View File

@ -26,10 +26,12 @@
<!-- 页面 行文列表 -->
<el-row :gutter="20" class="ai-pages-mark-list m-t-large">
<el-col :span="8" v-for="(item,index) in ExampleList" :key="index">
<div class="ai-pages-article-list-item" @click="gotoPages(item.id)">
<div class="image"></div>
<div class="title">{{ item.name }}</div>
<div class="description">{{ item.description }}</div>
<div class="ai-pages-mark-list-item" @click="gotoPages(item.id)">
<div class="item-image"></div>
<div class="item-content">
<div class="title">{{ item.name }}</div>
<div class="description">{{ item.description }}</div>
</div>
</div>
</el-col>
</el-row>
@ -44,12 +46,10 @@ export default {
return {
textarea: "",
ExampleList: [],
}
},
mounted() {
this.getExampleList();
},
methods: {
getExampleList() {

50
src/views/pages/AI-Voice-Generate/index.vue
Unescape View File

@ -28,14 +28,23 @@
</div>
</div>
</div>
<!-- 页面 图片列表 -->
<el-tabs v-model="activeName" @tab-click="handleClick" class="v-tabs m-t-large position-sticky">
<el-tab-pane label="素材" name="0"></el-tab-pane>
<el-tab-pane label="短片" name="1"></el-tab-pane>
</el-tabs>
<div class="ai-pages-voice-list m-t-large">
<div class="ai-pages-voice-list-item"></div>
</div>
<!-- 页面 语音列表 -->
<el-row :gutter="20" class="ai-pages-voice-list m-t-medium">
<el-col :span="6" v-for="(item,index) in ExampleList" :key="index">
<div class="ai-pages-voice-list-item" @click="gotoPages(item.id)">
<div class="item-image">
<el-image
style="width: 100%;"
:src="item.img"
fit="fill"></el-image>
</div>
<div class="item-content">
<div class="title">{{ item.name }}</div>
<div class="description">{{ item.description }}</div>
</div>
</div>
</el-col>
</el-row>
</main>
</div>
</template>
@ -47,11 +56,36 @@ export default {
return {
textarea: undefined,
activeName: '1',
ExampleList: [],
}
},
mounted() {
this.getExampleList();
},
methods: {
getExampleList() {
this.ExampleList = [
{
name: "自然流畅发音",
description: "模拟人类语音韵律与语调，发音清晰自然，适配多种语言，提升听觉体验。"
},
{
name: "多风格音色定制",
description: "支持性别、年龄、情感等多维度音色调整，满足新闻播报、有声书等个性化场景需求。"
},
{
name: "高效文本转语音",
description: "快速将文本转化为语音，支持实时生成，缩短内容制作周期，适用于紧急播报时效性场景。"
},
{
name: "多场景灵活适配",
description: "兼容智能客服、新闻媒体等多元场景，通过参数调整优化语音表现，增强用户交互沉浸感。"
},
]
},
gotoPages(url) {
this.$router.push("/MarketingWritingDialog");
},
handleClick(tab, event) {
console.log(tab, event);
}

Write Preview
Loading…
Cancel
Save