Skip to content

R
risk-monitor
提交 5ea53c1a authored 作者: 安云鹏's avatar 安云鹏
浏览文件
操作

写报样式

上级 195c8e49
显示空白字符变更
内嵌 并排
正在显示 包含 390 行增加 和 11 行删除
src/components/intelligenceLeftTabBar/index.vue 0 → 100644
浏览文件 @ 5ea53c1a
<template>
<div class="intelligenceLeftTabBar">
<div class="navBox" :class="{navBoxShow:isNavMenuShow}">
<div class="navList" v-for="(item,index) in navList " :key="index" :class="{on:navPath==item.path}" @click="onNavListClick(item.path)">
<div class="icon" :style="{background:`url(${item.img})no-repeat`,backgroundSize:'24px 24px',backgroundPosition:'17px 17px'}"></div>
<span class="text-tip-1" style="white-space: nowrap; ">{{ item.name }}</span>
</div>
</div>
<img class="show" src="@/assets/icons/muenShow.png" :style="isNavMenuShow?'transform: scaleX(1)':''" alt="" @click="()=>{isNavMenuShow=!isNavMenuShow}">
</div>
</template>
<script setup>
import muen1 from '@/assets/icons/tool-item-icon1.png'
import muen2 from '@/assets/icons/tool-item-icon2.png'
import muen3 from '@/assets/icons/tool-item-icon3.png'
import muen4 from '@/assets/icons/tool-item-icon4.png'
import { onMounted, onUnmounted, ref, nextTick } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";
const isNavMenuShow=ref(false)
const navList=ref([
{
img:muen1,
path:'/writtingAsstaint',
name:'智能写报'
},
{
img:muen2,
path:'/writtingAsstaint1',
name:'智能翻译'
},
{
img:muen3,
path:'/writtingAsstaint2',
name:'智能查询'
},
{
img:muen4,
path:'/writtingAsstaint3',
name:'智能对话'
},
])
const navPath=ref()
const route=useRoute()
if(route.path){
navPath.value=route.path
}
const onNavListClick=(path)=>{
navPath.value=path
}
</script>
<style lang="scss" scoped>
.intelligenceLeftTabBar{
padding: 5px 0;
border-right: 1px solid rgb(234, 236, 238);
position: relative;
.navBox{
height: 100%;
width: 65px;
transition: all 0.3s;
padding: 0 3px;
.navList{
display: flex;
align-items: center;
cursor: pointer;
border-radius: 8px;
overflow: hidden;
height: 60px;
.icon{
width: 60px;
height: 60px;
flex-shrink: 0;
border-radius: 10px;
margin-right: 15px;
}
}
.on{
background-color: var(--color-primary-10);
color: var(--color-primary-100);
font-weight: Bold;
}
}
.navBoxShow{
width: 200px;
transition: all 0.3s;
}
.show{
position: absolute;
width: 24px;
height: 24px;
right: 21px;
bottom: 21px;
cursor: pointer;
transform: scaleX(-1)
}
}
</style>
\ No newline at end of file
src/views/writtingAsstaint/components/WrittingBottom.vue 0 → 100644
浏览文件 @ 5ea53c1a
<template>
<div class="writtingBottom">
<div class="notParsed" v-if="isfile==0" >
<div class="analysis" @click="analysisClick(1)">
<img src="@/assets/icons/aiBox/ai-logo.png" alt="">
<span class="text-tip-1">文档解析</span>
</div>
<div class="progress">
<img src="../assets/images/tips-icon.png" alt="">
<span class="text-tip-2">内容由AI生成，无法确保真实准确，仅供参考</span>
</div>
</div>
<div class="parsed" v-else-if="isfile==1">
<div class="analysis" @click="analysisClick(0)">
<div class="icon"></div>
<span class="text-tip-2-bold">停止</span>
</div>
<div class="progress">
<div class="login">
<el-progress type="circle" :percentage="25" width="24" height="24" style="margin-right: 15px;" :show-text="false" color="rgb(5, 95, 194)"/>
<span class="text-tip-2-bold">文档翻译中</span>
</div>
<span class="text-tip-2">
内容由AI生成，无法确保真实准确，仅供参考
</span>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, onUnmounted, ref, nextTick } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";
const isfile=ref(1) //0未解析 1已解析
const analysisClick=(type)=>{
if(type==0){
console.log('停止')
isfile.value=type
return
}else{
console.log('开始解析')
isfile.value=type
}
}
</script>
<style lang="scss" scoped>
.writtingBottom{
width: 100%;
background: #fff;
box-shadow: 0px 0px 3px 0px #d2d2d2;
position: relative;
.notParsed{
display: flex;
justify-content: space-between;
align-items: center;
height: 64px;
.analysis{
margin-left: 22px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--color-primary-100);
border-radius: 4px;
width: 437px;
height: 36px;
color: #fff;
cursor: pointer;
img{
width: 21px;
height: 16px;
margin-right: 12px;
}
}
.progress{
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
color: rgba(132, 136, 142, 1);
margin-right: 22px;
img{
width: 16px;
height: 16px;
margin-right: 8px;
}
}
}
.parsed{
display: flex;
justify-content: space-between;
align-items: center;
height: 64px;
.analysis{
border: 1px solid var(--color-primary-100);
background-color: #fff;
color: var(--color-primary-100);
width: 437px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 22px;
cursor: pointer;
.icon{
width: 8px;
height: 8px;
border-radius: 2px;
background-color: var(--color-primary-100);
margin-right: 12px;
}
}
.progress{
display: flex;
justify-content: center;
align-items: center;
color: var(--color-primary-100);
margin-right: 22px;
background-color: var(--color-primary-10);
border-radius: 50px;
height: 38px;
padding: 0 12px;
.login{
margin-right: 10px;
display: flex;
}
}
}
}
</style>
\ No newline at end of file
src/views/writtingAsstaint/components/WrittingHeader.vue 0 → 100644
浏览文件 @ 5ea53c1a
<template>
<div class="headerBox">
<div class="logo" v-if="isLogo==0">
<img src="@/assets/icons/tool-item-icon1.png" alt="">
<span class="text-title-3-bold">智能写库</span>
</div>
<div class="tabBox" v-else-if="isLogo==1">
<div class="fileName">
<img src="@/assets/icons/pdf-icon.png" alt=" ">
<span class="text-tip-1-bold">Promoting the Export of the American AI Technology Stack.pdf</span>
</div>
<div class="tab">
<div class="tabList text-tip-1-bold" v-for="(item,index) in tabList" :key="index" :class="{'on':tabType==item.type}" @click="onTabListClick(item.type)">{{ item.name }}</div>
</div>
<div class="switch">
<el-switch v-model="cmSwitch"/>
<div class="iconBOx">
<img src="@/assets/icons/translate-icon.png" alt="">
<span class="text-tip-1">显示原文</span>
</div>
<el-button :icon="Search" @click="onSearchClick">查找</el-button>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, onUnmounted, ref, nextTick } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";
/**
* 判断展示logo 0展示logo 1展示tab
*/
const isLogo=ref(1)
/**
* tab切换
*/
const tabList=ref([
{
type:'translate',
name:'翻译'
},
{
type:'mind',
name:'思维导图'
},
{
type:'message',
name:'写报'
}
])
const tabType=ref('translate')
const onTabListClick=(type)=>{
tabType.value=type
}
// 超找
const onSearchClick=()=>{}
const cmSwitch=ref()
</script>
<style lang="scss" scoped>
.headerBox{
background-color: #fff;
border-bottom: 1px solid rgb(234, 236, 238);
.logo{
height: 60px;
display: flex;
align-items: center;
img{
width: 30px;
height: 30px;
margin-left: 28px;
margin-right: 20px;
}
}
.tabBox{
height: 60px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.fileName{
display: flex;
align-items: center;
img{
width: 24px;
height: 24px;
margin-left: 28px;
margin-right: 16px;
}
}
.tab{
width: 232px;
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translate(-50%);
.tabList{
cursor: pointer;
height: 59px;
line-height: 66px;
}
.on{
border-bottom: 4px solid var(--color-primary-100);
color:var(--color-primary-100) ;
transition: all 0.1s;
}
}
.btns{
margin-right: 23px;
}
}
.switch{
display: flex;
align-items: center;
margin-right: 23px;
.iconBOx{
display: flex;
align-items: center;
margin-right: 12px;
img{
width: 16px;
height: 16px;
margin:0 5px;
}
}
}
}
</style>
\ No newline at end of file
src/views/writtingAsstaint/index.vue
浏览文件 @ 5ea53c1a
<template> <template>
<div class="writting-wrapper"> <div class="writting-wrapper">
<!-- 头部区域 --> <!-- 头部区域 -->
<div class="writting-header"> <!-- <div class="writting-header">
<div class="tab-box"> <div class="tab-box">
<div class="tab" :class="{ tabActive: item.active }" v-for="(item, index) in store.tabList" <div class="tab" :class="{ tabActive: item.active }" v-for="(item, index) in store.tabList"
:key="index"> :key="index">
...@@ -10,12 +10,6 @@ ...@@ -10,12 +10,6 @@
</div> </div>
<div class="edit-box"></div> <div class="edit-box"></div>
<div class="btn-box"> <div class="btn-box">
<!-- <div class="btn" @click="store.exportContent">
<div class="icon">
<img src="./assets/images/export-icon.png" alt="" />
</div>
<div class="text">导出</div>
</div> -->
<div class="btn" @click="store.toggleEditMode"> <div class="btn" @click="store.toggleEditMode">
<div class="icon"> <div class="icon">
<img v-if="store.isEditMode" src="./assets/images/preview-icon.png" alt="" /> <img v-if="store.isEditMode" src="./assets/images/preview-icon.png" alt="" />
...@@ -30,9 +24,11 @@ ...@@ -30,9 +24,11 @@
<div class="text text1">保存</div> <div class="text text1">保存</div>
</div> </div>
</div> </div>
</div> </div> -->
<IntelligenceLeftTabBar></IntelligenceLeftTabBar>
<!-- 主体区域：子组件 --> <!-- 主体区域：子组件 -->
<div style="width: 100%;">
<WrittingHeader></WrittingHeader>
<div class="writting-main"> <div class="writting-main">
<!-- 左侧子组件：绑定ref --> <!-- 左侧子组件：绑定ref -->
<writtingleftBox ref="leftBoxRef" @generate="handleGenerate" /> <writtingleftBox ref="leftBoxRef" @generate="handleGenerate" />
...@@ -47,6 +43,8 @@ ...@@ -47,6 +43,8 @@
</div> </div>
</div> </div>
</div> </div>
<WrittingBottom></WrittingBottom>
</div>
</div> </div>
</template> </template>
...@@ -57,6 +55,9 @@ import { ElMessage } from "element-plus"; ...@@ -57,6 +55,9 @@ import { ElMessage } from "element-plus";
import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore"; import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";
import writtingleftBox from "./components/WrittingLeftBox.vue"; import writtingleftBox from "./components/WrittingLeftBox.vue";
import writtingMainBox from "./components/WrittingMainBox.vue"; import writtingMainBox from "./components/WrittingMainBox.vue";
import WrittingHeader from "./components/WrittingHeader.vue"; //头
import WrittingBottom from "./components/WrittingBottom.vue"; //底部
// 获取路由实例（组件内读取） // 获取路由实例（组件内读取）
const route = useRoute(); const route = useRoute();
...@@ -100,7 +101,7 @@ onUnmounted(() => { ...@@ -100,7 +101,7 @@ onUnmounted(() => {
.writting-wrapper { .writting-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex;
.writting-header { .writting-header {
height: 60px; height: 60px;
box-sizing: border-box; box-sizing: border-box;
...@@ -191,7 +192,7 @@ onUnmounted(() => { ...@@ -191,7 +192,7 @@ onUnmounted(() => {
.writting-main { .writting-main {
display: flex; display: flex;
height: calc(100% - 60px); height: calc(100% - 126px);
position: relative; position: relative;
.main-placeholder { .main-placeholder {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论