首页轮播和翻译页面

main
xiaoshenhou 2 years ago
parent 1cf23f7f32
commit 13b57970ad

8
.idea/.gitignore vendored

@ -1,8 +0,0 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/reptileFront_nuxt.iml" filepath="$PROJECT_DIR$/.idea/reptileFront_nuxt.iml" />
</modules>
</component>
</project>

@ -1,12 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

@ -1,4 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectTasksOptions" suppressed-tasks="Less;SCSS" />
</project>

Binary file not shown.

After

Width:  |  Height:  |  Size: 716 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

@ -40,8 +40,6 @@
</g>
</svg>
</el-icon>
<!-- <el-icon><Search /></el-icon>-->
<!-- <el-icon name="mai-search" />-->
<input
placeholder="按照关键词搜索"
:value="searchVal"

@ -0,0 +1,25 @@
<script lang="ts" setup>
const props = defineProps(['title']);
const { prefixCls } = useDesign('banner');
const bannerList = reactive([
{id:1,img:'/_nuxt/assets/images/commonBanner.png'},
{id:2,img:'/_nuxt/assets/images/commonBanner.png'},
{id:3,img:'/_nuxt/assets/images/commonBanner.png'},
{id:4,img:'/_nuxt/assets/images/commonBanner.png'},
]);
</script>
<template>
<div :class="[prefixCls, `${prefixCls}--white`]">
<el-carousel indicator-position="outside">
<el-carousel-item v-for="item in bannerList" :key="item.id">
<img :src="item.img" alt="" />
</el-carousel-item>
</el-carousel>
<!-- <img src="~/assets/images/commonBanner.png" alt="" /> -->
<!-- <h2 class="title">{{ props.title }}</h2> -->
</div>
</template>
<style lang="scss" scoped>
@import 'banner';
</style>

@ -9,7 +9,7 @@
:ellipsis="false"
router
>
<el-menu-item @click="handleChange(item)" v-for="item in routes" :index="item.path"
<el-menu-item @click="handleChange(item)" v-for="item in routes" :index="item.path"
:key="item.path">{{ item.name }}
</el-menu-item>
</el-menu>
@ -44,6 +44,7 @@ const router = useRouter();
const routes = ref(router.getRoutes().filter(it => !it.meta.hidden));
//@ts-ignore
routes.value.sort((a, b) => a.meta.order - b.meta.order);
const activeRoute = ref(route.path)
const store = useAppStore()
const {setLoginVisible, setInfo, setToken} = useUserInfo()
@ -86,8 +87,14 @@ function handleChange(val: any) {
activeRoute.value = val.path;
if (val.meta.hasOwnProperty('headerHost') && val.meta.headerHost) {
store.setMenuTheme('dark')
store.setHomeBanner(false)
} else {
store.setMenuTheme('light')
if(val.meta.hasOwnProperty('homeBanner') && val.meta.homeBanner){
store.setHomeBanner(true)
}else{
store.setHomeBanner(false)
}
}
}
@ -95,8 +102,14 @@ watch(() => route, (val) => {
activeRoute.value = val.path;
if (val.meta.hasOwnProperty('headerHost') && val.meta.headerHost) {
store.setMenuTheme('dark')
store.setHomeBanner(false)
} else {
store.setMenuTheme('light')
if(val.meta.hasOwnProperty('homeBanner') && val.meta.homeBanner){
store.setHomeBanner(true)
}else{
store.setHomeBanner(false)
}
}
}, {deep: true})

@ -3,16 +3,19 @@ import {acceptHMRUpdate, createPinia, defineStore} from 'pinia';
type menu = 'light' | 'dark'
export interface AppState {
menuTheme: menu;
homeBanner: boolean;
bannerTitle: string;
}
const useAppStore = defineStore('app', {
state: (): AppState => ({
menuTheme: 'light',
homeBanner: true,
bannerTitle: ''
}),
getters:{
getMenuTheme: (state)=> state.menuTheme,
getHomeBanner: (state)=> state.homeBanner,
getBannerTitle: (state)=> state.bannerTitle,
},
@ -20,6 +23,9 @@ const useAppStore = defineStore('app', {
setMenuTheme(type: menu = 'light'){
this.menuTheme = type;
},
setHomeBanner(type: boolean){
this.homeBanner = type;
},
setBannerTitle(title: string): void{
this.bannerTitle = title;
}

@ -1,7 +1,8 @@
<template>
<Header />
<BannerSearch v-if="store.getMenuTheme === 'dark'" />
<BannerSimple :title="store.getBannerTitle" v-else />
<BannerSearch v-if="store.getMenuTheme === 'dark'&&store.getHomeBanner == false" />
<BannerSimple :title="store.getBannerTitle" v-else-if="store.getMenuTheme === 'light'&&store.getHomeBanner == false" />
<BannerHomeBanner v-else></BannerHomeBanner>
<!-- <div :style="`transition:margin .2s;height: 500px;background-color: tan;margin-top: ${store.getMenuTheme === 'dark' ? '-100px': 0}`"></div>-->
<slot />
<Footer />

15143
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -1,6 +1,6 @@
<template>
<div class="mai-ocr-wrap flex justify-center">
<div class="mai-ocr-item flex">智能OCR</div>
<div class="mai-ocr-item flex" @click="goTranslate">OCR</div>
<div class="mai-ocr-item flex">识别</div>
</div>
<div :class="classList.news">
@ -137,7 +137,8 @@ import dayjs from 'dayjs';
definePageMeta({
name: '首页',
headerHost: true,
headerHost: false,
homeBanner:true,
order: 1,
})
const hotInformLoading = ref(true)
@ -166,6 +167,7 @@ const newsHilight = ref<InformationDto>({
id: '',
title: '',
})
const router = useRouter();
async function getData() {
const {homeApi} = useApi()
@ -197,7 +199,14 @@ function changeCurrentData(data: InformationDto) {
newsHilight.value = Object.assign({}, data);
newsHilight.value.image = import.meta.env.VITE_GLOB_ORIGIN + newsHilight.value.image
}
function goTranslate(){
// router.push({
// path:'/translate',
// query:{
// a:1
// }
// })
}
getData()
</script>

@ -0,0 +1,390 @@
<script lang="ts" setup>
const textarea = ref('')
const textarea2 = ref('')
const radio1 = ref('1')
const value = ref(1)
const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 6, 0)
const options = reactive([
{value:1,lable:'中文(简体)'},
{value:2,lable:'中文(繁体)'},
{value:3,lable:'英文'},
])
const value2 = ref(1)
const options2 = reactive([
{value:1,lable:'中文(简体)'},
{value:2,lable:'中文(繁体)'},
{value:3,lable:'英文'},
])
const searchData = reactive({
selecttime:'',
name:''
})
definePageMeta({
name: '翻译',
hidden:true,
// headerHost: false,
// homeBanner:true,
// order: 1,
})
// const props = defineProps(['title']);
const {prefixCls} = useDesign('mai-wrap');
</script>
<template>
<div class="wrap">
<el-radio-group fill="#022950" v-model="radio1">
<el-radio-button label="1" size="large" border>翻译文本</el-radio-button>
<el-radio-button label="2" size="large" border>翻译文件</el-radio-button>
<el-radio-button label="3" size="large" border>优先翻译</el-radio-button>
<el-radio-button label="4" size="large" border>OCR识别</el-radio-button>
</el-radio-group>
<div class="change-wrap" v-if="radio1==1||radio1==4">
<el-select v-model="value" class="m-2" placeholder="Select" size="large">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
<img src="../assets/images/zhuanhuan.png" alt="">
<el-select v-model="value2" class="m-2" placeholder="Select" size="large">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
<el-button v-if="radio1==1" >翻译</el-button>
<el-button v-if="radio1==4" >识别</el-button>
</div>
<div class="import-wrap">
<div class="importBox1">
<span class="importTitle" v-if="radio1==1||radio1==3"></span>
<span class="importTitle" v-if="radio1==2||radio1==4"></span>
<el-input
v-if="radio1==1||radio1==3"
v-model="textarea"
:rows="2"
type="textarea"
placeholder="输入翻译"/>
<el-upload
v-if="radio1==2||radio1==4"
class="upload-demo"
drag
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
multiple>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
点击文件上传
</div>
<div class="el-upload__text2">
支持扩展名XMLTXTDOCDOCXPDF或JPG格式
</div>
<!-- <template #tip>
<div class="el-upload__tip">
jpg/png files with a size less than 500kb
</div>
</template> -->
</el-upload>
</div>
<div class="importBox3" v-if="radio1==2||radio1==3">
<el-button class="button1">英语</el-button>
<el-button class="button2">翻译</el-button>
</div>
<div class="importBox2">
<span class="importTitle">英语美式</span>
<el-input
v-model="textarea2"
:rows="2"
type="textarea"/>
</div>
</div>
<div class="jilu-wrap">
<div class="jilu"><img src="../assets/images/jilu.png" alt="">翻译记录</div>
<div class="first">优先翻译</div>
</div>
<div :class="`${prefixCls}-content dynamicInfo flex flex-col `">
<el-form size="large" inline>
<el-row>
<el-col :span="9">
<el-form-item label="选择日期">
<el-date-picker type="daterange" v-model="searchData.selecttime" placeholder="请选择日期"/>
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item label="名称">
<el-input v-model="searchData.name" placeholder="请输入关键字"/>
</el-form-item>
</el-col>
<el-col :span="6" :offset="0" class="flex justify-end">
<el-form-item style="margin-right: 0;">
<el-button type="primary" @click="getList(currentTab)"></el-button>
<el-button @click="resetData"></el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-table v-loading="loading" size="large" border :data="content" :empty-text="'暂无数据'"
:header-cell-style="{background: '#f5f5f5', color:'#333333'}">
<el-table-column show-overflow-tooltip align="center" label="时间"
prop="notification_number"></el-table-column>
<el-table-column show-overflow-tooltip align="center" label="名称"
prop="notification_title">
<template #header>
<span>名称</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip align="center" label="附件"
prop="notifying_members"></el-table-column>
<el-table-column show-overflow-tooltip align="center" label="操作"
prop="notification_time_text"></el-table-column>
</el-table>
<div class="mt-32">
<Pagination
:current="current"
:limit="limit"
:pages="pagesRef"
:total="total"
@change="onChangePage"
/>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.wrap{
padding: 0 244px;
background-color: #EEF1F9;
padding-bottom: 50px;
}
.el-radio-group{
margin-top: 42px;
margin-bottom: 76px;
}
.el-radio-button{
border-radius: 16px;
margin-right:12px ;
border: 0px;
outline: none;
width: 218px;
height: 61px;
}
::v-deep .el-radio-button__inner{
width: 218px;
height: 61px;
border: 0px;
outline: none;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
border-radius: 16px !important;
}
::v-deep .el-input__wrapper{
width: 218px;
height: 61px;
background: #FFFFFF;
border-radius: 16px;
border-color:#ffffff ;
}
::v-deep .el-input__inner{
text-align: center;
}
.change-wrap{
display: flex;
align-items: center;
margin-bottom: 24px;
.el-button{
width: 218px;
height: 61px;
background: #022950;
border-radius: 16px;
color: #FFFFFF;
font-size: 20px;
margin-left: 24px;
}
img{
width: 55px;
height: 44px;
margin: 0 28px 0 34px;
}
}
::v-deep .el-textarea__inner{
width: 100%;
height: 239px;
border-radius: 16px;
border: 0px;
padding-top: 17px;
padding-left: 37px;
}
.el-textarea{
border-radius: 16px;
margin-top: 17px;
font-size: 36px;
}
.import-wrap{
display: flex;
justify-content: center;
align-items: center;
.importBox1{
flex: 1;
margin-right: 32px;
}
.importBox3{
flex: 0.25;
margin-right: 22px;
.el-button{
width: 150px;
height: 55px;
margin: 0;
border-radius: 8px;
font-size: 20px;
}
.button1{
margin-bottom: 24px;
color: #BABABA;
background-color: #fff;
}
.button2{
color: #fff;
background-color: #022950;
}
}
.importBox2{
flex: 1;
}
}
.importTitle{
width: 120px;
height: 28px;
font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 28px;
margin-left: 10px;
}
.el-select{
margin: 0;
}
.jilu-wrap{
display: flex;
justify-content: space-between;
font-size: 20px;
margin-top: 30px;
.jilu{
display: flex;
justify-content: center;
align-items: center;
width: 158px;
height: 49px;
background: #E8EBF5;
border-radius: 16px;
color: #333333;
img{
width: 20px;
height: 20px;
margin-right: 12px;
}
}
.first{
color: #E60B0B;
}
}
.yangliu-mai-wrap-content{
margin: 30px 0 0 0;
width: 100%;
}
// .dynamicInfo {
// margin-top: 0;
// padding-bottom: 100px;
// }
::v-deep .el-table__inner-wrapper{
font-size: 20px;
}
::v-deep .el-table__header-wrapper{
height: 80px;
}
::v-deep .el-table__header{
height: 80px;
}
::v-deep .el-table__empty-block{
height: 300px !important;
}
:deep(.el-form) {
margin-bottom: 43px;
.el-form-item__label {
height: 60px;
line-height: 60px !important;
padding-right: 16px;
@apply text-xl;
}
.el-input__wrapper {
border-radius: 10px;
height: 60px;
width: 448px;
box-shadow: unset;
background-color: #ffffff;
@apply text-xl;
}
.el-icon {
font-size: 20px;
}
.el-range-input {
font-size: 20px;
}
.el-button {
width: 150px;
height: 60px;
box-shadow: unset;
@apply text-xl rounded-xl;
&--primary{
background-color: #022950;
}
}
}
::v-deep .el-upload{
margin-top: 17px;
border-radius: 16px;
}
::v-deep .el-upload-dragger{
height: 239px;
border-radius: 16px;
}
::v-deep .el-upload{
height: 239px;
border-radius: 16px;
}
.el-upload__text{
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
line-height: 22px;
margin-bottom: 49px;
display: flex;
justify-content: center;
align-items: center;
}
.el-upload__text2{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 20px;
display: flex;
justify-content: center;
align-items: center;
}
</style>

10114
yarn.lock

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save