添加首页搜索按钮,添加到翻译页的登录校验

main
lizhong 2 years ago
parent 9fbf2bcb7d
commit d37541d1ad

@ -0,0 +1,16 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
<option name="myCustomPropertiesEnabled" value="true" />
<option name="myIgnoreVendorSpecificProperties" value="false" />
<option name="myCustomPropertiesList">
<value>
<list size="1">
<item index="0" class="java.lang.String" itemvalue="marginleft" />
</list>
</value>
</option>
</inspection_tool>
</profile>
</component>

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

@ -0,0 +1,152 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="AutoImportSettings">
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="dc5c5f4b-3a26-4616-b023-f4f048553ff8" name="Changes" comment="">
<change afterPath="$PROJECT_DIR$/middleware/auth.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/assets/style/public.scss" beforeDir="false" afterPath="$PROJECT_DIR$/assets/style/public.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/components/Header/Index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/components/Header/Index.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/composables/useUserInfo.ts" beforeDir="false" afterPath="$PROJECT_DIR$/composables/useUserInfo.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/layouts/tabLayout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/layouts/tabLayout.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/nuxt.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/nuxt.config.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/pages/comment.vue" beforeDir="false" afterPath="$PROJECT_DIR$/pages/comment.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/pages/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/pages/index.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/pages/translate.vue" beforeDir="false" afterPath="$PROJECT_DIR$/pages/translate.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/pages/warning.vue" beforeDir="false" afterPath="$PROJECT_DIR$/pages/warning.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/utils/http.ts" beforeDir="false" afterPath="$PROJECT_DIR$/utils/http.ts" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
<option value="vue3" />
<option value="Vue Single File Component" />
<option value="TypeScript File" />
</list>
</option>
</component>
<component name="MarkdownSettingsMigration">
<option name="stateVersion" value="1" />
</component>
<component name="ProblemsViewState">
<option name="selectedTabId" value="CurrentFile" />
</component>
<component name="ProjectId" id="2MjTN74LI0n1OsXZwajBOlsAacO" />
<component name="ProjectViewState">
<option name="autoscrollToSource" value="true" />
<option name="compactDirectories" value="true" />
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" />
<option name="sortByType" value="true" />
</component>
<component name="PropertiesComponent">{
&quot;keyToString&quot;: {
&quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
&quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
&quot;WebServerToolWindowFactoryState&quot;: &quot;true&quot;,
&quot;WebServerToolWindowPanel.toolwindow.highlight.mappings&quot;: &quot;true&quot;,
&quot;WebServerToolWindowPanel.toolwindow.highlight.symlinks&quot;: &quot;true&quot;,
&quot;WebServerToolWindowPanel.toolwindow.show.date&quot;: &quot;false&quot;,
&quot;WebServerToolWindowPanel.toolwindow.show.permissions&quot;: &quot;false&quot;,
&quot;WebServerToolWindowPanel.toolwindow.show.size&quot;: &quot;false&quot;,
&quot;last_opened_file_path&quot;: &quot;/Users/lizhong/Desktop/workspace/ReptileFront/reptileFront_nuxt/assets/images&quot;,
&quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
&quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
&quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
&quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
&quot;nodejs_package_manager_path&quot;: &quot;yarn&quot;,
&quot;settings.editor.selected.configurable&quot;: &quot;reference.settings.ide.settings.file-colors&quot;,
&quot;ts.external.directory.path&quot;: &quot;/Applications/WebStorm.app/Contents/plugins/javascript-impl/jsLanguageServicesImpl/external&quot;,
&quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
}
}</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/assets/images" />
<recent name="$PROJECT_DIR$/pages" />
<recent name="$PROJECT_DIR$/api" />
<recent name="$PROJECT_DIR$" />
<recent name="$PROJECT_DIR$/src/assets/images" />
</key>
<key name="MoveFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/pages" />
<recent name="$PROJECT_DIR$/pages/case" />
<recent name="$PROJECT_DIR$/composables" />
<recent name="$PROJECT_DIR$" />
<recent name="$PROJECT_DIR$/src/assets" />
</key>
</component>
<component name="RunManager" selected="npm.generate">
<configuration name="build" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" />
<command value="run" />
<scripts>
<script value="build" />
</scripts>
<node-interpreter value="project" />
<envs />
<method v="2" />
</configuration>
<configuration name="dev" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" />
<command value="run" />
<scripts>
<script value="dev" />
</scripts>
<node-interpreter value="project" />
<envs />
<method v="2" />
</configuration>
<configuration name="generate" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" />
<command value="run" />
<scripts>
<script value="generate" />
</scripts>
<node-interpreter value="project" />
<envs />
<method v="2" />
</configuration>
<recent_temporary>
<list>
<item itemvalue="npm.generate" />
<item itemvalue="npm.dev" />
<item itemvalue="npm.build" />
</list>
</recent_temporary>
</component>
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="dc5c5f4b-3a26-4616-b023-f4f048553ff8" name="Changes" comment="" />
<created>1678279948733</created>
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1678279948733</updated>
<workItem from="1678279949799" duration="13481000" />
<workItem from="1678294815425" duration="48333000" />
<workItem from="1678438152030" duration="8000" />
<workItem from="1678438167690" duration="42000" />
<workItem from="1678438231436" duration="25025000" />
<workItem from="1678713468939" duration="2210000" />
<workItem from="1678803633686" duration="12386000" />
<workItem from="1679292964552" duration="641000" />
<workItem from="1679313612567" duration="917000" />
<workItem from="1679622933773" duration="4483000" />
<workItem from="1679887069532" duration="713000" />
<workItem from="1679913811172" duration="1597000" />
<workItem from="1680008447811" duration="223000" />
<workItem from="1680009330616" duration="7707000" />
</task>
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="3" />
</component>
</project>

@ -5,6 +5,9 @@
margin: 0 auto; margin: 0 auto;
max-width: 1940px; max-width: 1940px;
} }
body{
overflow-y: hidden;
}
// ================================= // =================================
// ==============scrollbar========== // ==============scrollbar==========

@ -4,30 +4,46 @@
<ApplicationAppLogo/> <ApplicationAppLogo/>
<el-menu <el-menu
:default-active="$route.meta.parentPath || $route.path" :default-active="$route.meta.parentPath || $route.path"
class="el-menu-demo"
mode="horizontal" mode="horizontal"
:ellipsis="false" :ellipsis="false"
router 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 }} :key="item.path">{{ item.name }}
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
<div class="login-action-wrap"> <div class="login-action-wrap flex items-center">
<el-popover popper-class="search-popper" v-if="activeRoute === '/'" placement="bottom-end" :width="434" trigger="click">
<template #reference>
<el-icon>
<el-icon-search />
</el-icon>
</template>
<div>
<el-input
v-model="keyword"
placeholder="请输入关键字"
:suffix-icon="ElIconSearch"
/>
</div>
</el-popover>
<el-divider v-if="activeRoute === '/'" direction="vertical" style="border-left: 1px solid #000"/>
<div class="login-btn cursor-pointer" v-if="!token" @click="setLoginVisible(true)"></div> <div class="login-btn cursor-pointer" v-if="!token" @click="setLoginVisible(true)"></div>
<el-dropdown popper-class="login-popper" @command="handleCommand" v-else trigger="click"> <el-dropdown popper-class="login-popper" @command="handleCommand" v-else trigger="click">
<div class="el-dropdown-link text-xl" style="line-height: 100px;"> <div class="el-dropdown-link text-xl" style="line-height: 100px;">
{{ userInfo.mobile }} {{ userInfo.mobile }}
<el-icon class="el-icon--right"><ElIconCaretBottom/></el-icon> <el-icon class="el-icon--right">
</div> <ElIconCaretBottom/>
</el-icon>
</div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item command="0">OCR识别</el-dropdown-item> <el-dropdown-item command="4">OCR识别</el-dropdown-item>
<el-dropdown-item command="1">优化翻译</el-dropdown-item> <el-dropdown-item command="3">优化翻译</el-dropdown-item>
<el-dropdown-item command="2">翻译文本</el-dropdown-item> <el-dropdown-item command="1">翻译文本</el-dropdown-item>
<el-dropdown-item command="3">翻译文件</el-dropdown-item> <el-dropdown-item command="2">翻译文件</el-dropdown-item>
<el-dropdown-item command="4">退出登录</el-dropdown-item> <el-dropdown-item command="5">退出登录</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
@ -50,9 +66,9 @@ const store = useAppStore()
const {setLoginVisible, setInfo, setToken} = useUserInfo() const {setLoginVisible, setInfo, setToken} = useUserInfo()
const token = computed(() => useUserInfo().$state.token); const token = computed(() => useUserInfo().$state.token);
const userInfo = ref() const userInfo = ref()
const keyword = ref('')
function handleCommand(command:string) { function handleCommand(command: string) {
if (command === '4') { if (command === '5') {
ElMessageBox.confirm( ElMessageBox.confirm(
'确定要退出登录吗?', '确定要退出登录吗?',
'提示', '提示',
@ -73,11 +89,18 @@ function handleCommand(command:string) {
message: '已取消退出登录', message: '已取消退出登录',
}) })
}) })
}else {
router.push({
path: '/translate',
query:{
type: command
}
})
} }
} }
watchEffect(()=>{ watchEffect(() => {
console.log('useUserInfo().$state.info>>>>>>> header', useUserInfo().$state.info) console.log('useUserInfo().$state.info>>>>>>> header', useUserInfo().$state.info)
userInfo.value = useUserInfo().$state.info; userInfo.value = useUserInfo().$state.info;
}) })
@ -90,9 +113,9 @@ function handleChange(val: any) {
store.setHomeBanner(false) store.setHomeBanner(false)
} else { } else {
store.setMenuTheme('light') store.setMenuTheme('light')
if(val.meta.hasOwnProperty('homeBanner') && val.meta.homeBanner){ if (val.meta.hasOwnProperty('homeBanner') && val.meta.homeBanner) {
store.setHomeBanner(true) store.setHomeBanner(true)
}else{ } else {
store.setHomeBanner(false) store.setHomeBanner(false)
} }
} }
@ -105,9 +128,9 @@ watch(() => route, (val) => {
store.setHomeBanner(false) store.setHomeBanner(false)
} else { } else {
store.setMenuTheme('light') store.setMenuTheme('light')
if(val.meta.hasOwnProperty('homeBanner') && val.meta.homeBanner){ if (val.meta.hasOwnProperty('homeBanner') && val.meta.homeBanner) {
store.setHomeBanner(true) store.setHomeBanner(true)
}else{ } else {
store.setHomeBanner(false) store.setHomeBanner(false)
} }
} }
@ -129,6 +152,7 @@ $prefix-cls: '#{$name-prefix}-header-wrap';
.el-menu-item { .el-menu-item {
border-bottom: unset; border-bottom: unset;
padding: 0 17px;
//font-size: 20px; //font-size: 20px;
transition: font-size .5s; transition: font-size .5s;
background-color: unset; background-color: unset;
@ -189,9 +213,7 @@ $prefix-cls: '#{$name-prefix}-header-wrap';
font-weight: 400; font-weight: 400;
//@apply ; //@apply ;
} }
.login-action-wrap {
padding-right: 30px;
}
.is-host { .is-host {
* { * {
color: $white; color: $white;
@ -199,12 +221,15 @@ $prefix-cls: '#{$name-prefix}-header-wrap';
} }
</style> </style>
<style lang="scss"> <style lang="scss">
.login-popper { .login-popper.el-dropdown__popper.el-popper {
border-radius: 8px;
box-shadow: 0 2px 11px 4px rgba(202, 202, 202, 0.5);
.el-dropdown-menu { .el-dropdown-menu {
@apply shadow-2xl; @apply shadow-2xl;
padding: 0 0; padding: 0 0;
} }
.el-dropdown-menu__item { .el-dropdown-menu__item {
width: 176px; width: 176px;
padding: 20px 0; padding: 20px 0;
@ -212,7 +237,7 @@ $prefix-cls: '#{$name-prefix}-header-wrap';
line-height: 1; line-height: 1;
//border-bottom: 1px solid #eee; //border-bottom: 1px solid #eee;
@apply text-base block relative; @apply text-base block relative;
&:after{ &:after {
content: ''; content: '';
position: absolute; position: absolute;
height: 1px; height: 1px;
@ -221,9 +246,47 @@ $prefix-cls: '#{$name-prefix}-header-wrap';
right: 12px; right: 12px;
bottom: 0; bottom: 0;
} }
&:last-of-type:after { &:last-of-type:after {
height: 0; height: 0;
} }
} }
.el-popper__arrow {
@apply hidden;
}
}
.search-popper.el-popper {
margin-top: 20px;
padding: 0;
background: unset;
border-radius: 30px;
height: 56px;
border: none;
.el-popper__arrow {
display: none;
}
.el-input {
height: 100%;
margin: 0;
border-radius: 30px;
font-size: 20px;
}
.el-input__wrapper {
padding: 0 30px;
height: 56px;
border-radius: 30px;
border: none;
box-shadow: unset;
.el-input__inner {
height: 56px;
box-shadow: unset;
line-height: 56px;
}
.el-icon {
color: #134A9B;
}
}
} }
</style> </style>

@ -5,12 +5,14 @@ export interface UserState {
token: string; token: string;
info: any; info: any;
loginVisible: boolean; loginVisible: boolean;
redirect: any
} }
const useUserInfo = defineStore('user', { const useUserInfo = defineStore('user', {
state: (): UserState => ({ state: (): UserState => ({
token: '', token: '',
info: {}, info: {},
loginVisible: false, loginVisible: false,
redirect: {}
}), }),
actions: { actions: {
@ -20,21 +22,26 @@ const useUserInfo = defineStore('user', {
setInfo(info: any):void { setInfo(info: any):void {
this.info = info; this.info = info;
}, },
setLoginVisible(val: boolean):void { setLoginVisible(val: boolean, redirect?: {} | boolean):void {
this.loginVisible = val; this.loginVisible = val;
if (redirect) {
this.redirect = redirect;
}else {
this.redirect = false;
}
}, },
async login(data: any, redirect?: string){ async login(data: any){
const { commonApi } = useApi() const { commonApi } = useApi()
const res = await commonApi.login(data); const res = await commonApi.login(data);
// this.setInfo(res.data)
// this.setToken(res.data.token)
// this.setLoginVisible(false)
this.token = res.data.userinfo.token; this.token = res.data.userinfo.token;
this.loginVisible = false this.loginVisible = false
this.info = res.data.userinfo this.info = res.data.userinfo
if(redirect) { if(this.redirect) {
useRouter().push(redirect) useRouter().push(this.redirect)
this.redirect = false;
}else {
location.reload()
} }
return res; return res;
} }
@ -42,6 +49,7 @@ const useUserInfo = defineStore('user', {
}, },
getters:{ getters:{
getLoginVisible:(state)=> state.loginVisible, getLoginVisible:(state)=> state.loginVisible,
getToken:(state)=> state.token,
}, },
persist: process.client && { persist: process.client && {
storage: localStorage, storage: localStorage,

@ -1,8 +1,10 @@
<template> <template>
<Header /> <Header />
<BannerSearch v-if="store.getMenuTheme === 'dark'&&store.getHomeBanner == false" /> <template v-if="!route.meta.hiddenBanner">
<BannerSimple :title="store.getBannerTitle" v-else-if="store.getMenuTheme === 'light'&&store.getHomeBanner == false" /> <BannerSearch v-if="store.getMenuTheme === 'dark'&&store.getHomeBanner == false" />
<BannerHomeBanner v-else></BannerHomeBanner> <BannerSimple :title="store.getBannerTitle" v-else-if="store.getMenuTheme === 'light'&&store.getHomeBanner == false" />
<BannerHomeBanner v-else></BannerHomeBanner>
</template>
<!-- <div :style="`transition:margin .2s;height: 500px;background-color: tan;margin-top: ${store.getMenuTheme === 'dark' ? '-100px': 0}`"></div>--> <!-- <div :style="`transition:margin .2s;height: 500px;background-color: tan;margin-top: ${store.getMenuTheme === 'dark' ? '-100px': 0}`"></div>-->
<slot /> <slot />
<Footer /> <Footer />
@ -13,7 +15,7 @@
<script setup> <script setup>
const store = useAppStore() const store = useAppStore()
const route = useRoute()
const loginStatus = ref(useUserInfo().getLoginVisible) const loginStatus = ref(useUserInfo().getLoginVisible)
watchEffect(()=>{ watchEffect(()=>{

@ -0,0 +1,16 @@
import {
defineNuxtRouteMiddleware,
navigateTo,
} from "#app";
// import useUserStore from "@/store/user.store";
export default defineNuxtRouteMiddleware((to, form) => {
const { getToken,setLoginVisible } = useUserInfo();
console.log(getToken, 'getToken')
if (!getToken) {
setLoginVisible(true)
}else {
setLoginVisible(false)
}
});

@ -11,7 +11,8 @@ export default defineNuxtConfig({
'@element-plus/nuxt', '@element-plus/nuxt',
], ],
plugins:[ plugins:[
{src: '~~/plugins/persits', mode: 'client'} {src: '~~/plugins/persits', mode: 'client'},
// {src: '~~/plugins/router.js', mode: 'client'},
], ],
// routeRules: { // routeRules: {
// "/": { static: true }, // ssr // "/": { static: true }, // ssr

@ -86,7 +86,7 @@
</div> </div>
</template> </template>
<script setup> <script setup lang="ts">
import {randomUUID} from '~~/utils'; import {randomUUID} from '~~/utils';
definePageMeta({ definePageMeta({
name: '通报评议', name: '通报评议',
@ -147,7 +147,7 @@ console.log('_tabs[0].children[0].id>>>', tabs.value[0].children[0].id);
function handleChange(data) { function handleChange(data) {
current.value = data; current.value = data;
setBannerTitle(data.title); setBannerTitle(data.name);
} }
handleChange(tabs.value[0].children[0]); handleChange(tabs.value[0].children[0]);

@ -1,7 +1,7 @@
<template> <template>
<div class="mai-ocr-wrap flex justify-center"> <div class="mai-ocr-wrap flex justify-center">
<div class="mai-ocr-item flex" @click="goTranslate">OCR</div> <div class="mai-ocr-item flex cursor-pointer" @click="goTranslate(4)">OCR</div>
<div class="mai-ocr-item flex"></div> <div class="mai-ocr-item flex cursor-pointer" @click="goTranslate(2)"></div>
</div> </div>
<div :class="classList.news"> <div :class="classList.news">
<CommonTitle title="热门资讯"/> <CommonTitle title="热门资讯"/>
@ -141,6 +141,9 @@ definePageMeta({
homeBanner:true, homeBanner:true,
order: 1, order: 1,
}) })
useHead({
title:'首页'
})
const hotInformLoading = ref(true) const hotInformLoading = ref(true)
const hotTbtLoading = ref(true) const hotTbtLoading = ref(true)
const hotRuleLoading = ref(true) const hotRuleLoading = ref(true)
@ -149,9 +152,7 @@ const {prefixCls: prefixNews} = useDesign('news-wrap');
const {prefixCls: prefixInform} = useDesign('inform-wrap'); const {prefixCls: prefixInform} = useDesign('inform-wrap');
const {prefixCls: prefixRule} = useDesign('rule-wrap'); const {prefixCls: prefixRule} = useDesign('rule-wrap');
const {prefixCls: prefixCase} = useDesign('case-wrap'); const {prefixCls: prefixCase} = useDesign('case-wrap');
useHead({ const {getToken, setLoginVisible} = useUserInfo()
title:'首页'
})
const classList = reactive({ const classList = reactive({
news: [`${prefixNews} mai-section`], news: [`${prefixNews} mai-section`],
inform: [`${prefixInform} mai-section`], inform: [`${prefixInform} mai-section`],
@ -199,13 +200,23 @@ function changeCurrentData(data: InformationDto) {
newsHilight.value = Object.assign({}, data); newsHilight.value = Object.assign({}, data);
newsHilight.value.image = import.meta.env.VITE_GLOB_ORIGIN + newsHilight.value.image newsHilight.value.image = import.meta.env.VITE_GLOB_ORIGIN + newsHilight.value.image
} }
function goTranslate(){ function goTranslate(type: number){
// router.push({ if (!getToken) {
// path:'/translate', setLoginVisible(true, {
// query:{ path:'/translate',
// a:1 query: {
// } type: type
// }) }
})
}else {
setLoginVisible(false, false)
router.push({
path:'/translate',
query: {
type: type
}
})
}
} }
getData() getData()

@ -1,13 +1,14 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<el-radio-group fill="#022950" v-model="radio1"> <el-radio-group fill="#022950" v-model="radio1" @change="changeTranslate">
<el-radio-button :label="1" size="large" @click="reset" border>翻译文本</el-radio-button> <el-radio-button :label="1" size="large" @click="reset" border>翻译文本</el-radio-button>
<el-radio-button :label="2" size="large" @click="reset" border>翻译文件</el-radio-button> <el-radio-button :label="2" size="large" @click="reset" border>翻译文件</el-radio-button>
<el-radio-button :label="3" size="large" @click="reset" border>优化翻译</el-radio-button> <el-radio-button :label="3" size="large" @click="reset" border>优化翻译</el-radio-button>
<el-radio-button :label="4" size="large" @click="reset" border>OCR识别</el-radio-button> <el-radio-button :label="4" size="large" @click="reset" border>OCR识别</el-radio-button>
</el-radio-group> </el-radio-group>
<div class="change-wrap" > <div class="change-wrap">
<el-select v-model="value" class="m-2" popper-class="popper" @click="selectClick1" placeholder="请选择语言" size="large"> <el-select v-model="value" class="m-2" popper-class="popper" @click="selectClick1"
placeholder="请选择语言" size="large">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
@ -15,35 +16,38 @@
:value="item.value"/> :value="item.value"/>
</el-select> </el-select>
<img src="../assets/images/zhuanhuan.png" alt=""> <img src="../assets/images/zhuanhuan.png" alt="">
<el-select v-model="value2" class="m-2" popper-class="popper" @click="selectClick2" placeholder="请选择语言" size="large"> <el-select v-model="value2" class="m-2" popper-class="popper" @click="selectClick2"
placeholder="请选择语言" size="large">
<el-option <el-option
v-for="item in options2" v-for="item in options2"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"/> :value="item.value"/>
</el-select> </el-select>
<el-button v-if="radio1==1||radio1==3" @click="translate"></el-button> <el-button v-if="radio1==1||radio1==3" @click="translate"></el-button>
<el-button v-if="radio1==4||radio1==2" @click="translate2"></el-button> <el-button v-if="radio1==4||radio1==2" @click="translate2"></el-button>
<div class="select_wrap" v-if="xiala" ref="tanchuang1"> <div class="select_wrap" v-if="currentLangModalStatus" ref="tanchuang1">
<el-input placeholder="搜索语言"></el-input> <el-input placeholder="搜索语言"></el-input>
<div class="hr"></div> <div class="hr"></div>
<div class="language_wrap"> <div class="language_wrap">
<el-scrollbar class="scrollbar"> <el-scrollbar class="scrollbar">
<div class="language_box" v-for="(value,key,index) in language" :key="index"> <div class="language_box" v-for="(value,key,index) in language" :key="index">
<div class="firstWord">{{key}}</div> <div class="firstWord">{{ key }}</div>
<span class="language" v-for="(item2,index) in value" @click="selectLanguage(item2)" :key="index">{{item2.name}}</span> <span class="language" v-for="(item2,index) in value" @click="selectLanguage(item2)"
:key="index">{{ item2.name }}</span>
</div> </div>
</el-scrollbar> </el-scrollbar>
</div> </div>
</div> </div>
<div class="select_wrap" v-if="xiala2" ref="tanchuang2"> <div class="select_wrap" v-if="targetLangModalStatus" ref="tanchuang2">
<el-input placeholder="搜索语言"></el-input> <el-input placeholder="搜索语言"></el-input>
<div class="hr"></div> <div class="hr"></div>
<div class="language_wrap"> <div class="language_wrap">
<el-scrollbar class="scrollbar"> <el-scrollbar class="scrollbar">
<div class="language_box" v-for="(value,key,index) in language" :key="index"> <div class="language_box" v-for="(value,key,index) in language" :key="index">
<div class="firstWord">{{key}}</div> <div class="firstWord">{{ key }}</div>
<span class="language" v-for="(item2,index) in value" @click="selectLanguage2(item2)" :key="index">{{item2.name}}</span> <span class="language" v-for="(item2,index) in value" @click="selectLanguage2(item2)"
:key="index">{{ item2.name }}</span>
</div> </div>
</el-scrollbar> </el-scrollbar>
</div> </div>
@ -51,45 +55,46 @@
</div> </div>
<div class="import-wrap"> <div class="import-wrap">
<div class="importBox1"> <div class="importBox1">
<span class="importTitle" v-if="radio1==1||radio1==3">{{value||''}}</span> <span class="importTitle" v-if="radio1==1||radio1==3">{{ value || '' }}</span>
<span class="importTitle" v-if="radio1==2||radio1==4"></span> <span class="importTitle" v-if="radio1==2||radio1==4"></span>
<el-input <el-input
v-if="radio1==1||radio1==3" v-if="radio1==1||radio1==3"
v-model="textarea" v-model="textarea"
:rows="2" :rows="2"
type="textarea" type="textarea"
placeholder="输入翻译"/> placeholder="输入翻译"/>
<el-upload <el-upload
v-if="radio1==2||radio1==4" v-if="radio1==2||radio1==4"
ref="upload" ref="upload"
class="upload-demo" class="upload-demo"
drag drag
limit="1" limit="1"
:before-upload="brforeUpload" :before-upload="beforeUpload"
:on-change="uploadChange" :on-change="uploadChange"
:on-success="uploadSuccess" :on-success="uploadSuccess"
:on-error="uploadError" :on-error="uploadError"
action="/api/common/upload"> action="/api/common/upload">
<img style="width:64px;height:64px;marginLeft:45px" src="../assets/images/fileIcon.png" alt=""> <img style="width:64px;height:64px;marginLeft:45px" src="../assets/images/fileIcon.png"
<div class="el-upload__text"> alt="">
点击文件上传 <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> </div>
<div class="el-upload__text2"> </template> -->
支持扩展名XMLTXTDOCDOCXPDF或JPG格式 </el-upload>
</div>
<!-- <template #tip>
<div class="el-upload__tip">
jpg/png files with a size less than 500kb
</div>
</template> -->
</el-upload>
</div> </div>
<!-- <div class="importBox3" v-if="radio1==2||radio1==3"> <!-- <div class="importBox3" v-if="radio1==2||radio1==3">
<el-button class="button1">英语</el-button> <el-button class="button1">英语</el-button>
<el-button class="button2" @click="translate2"></el-button> <el-button class="button2" @click="translate2"></el-button>
</div> --> </div> -->
<div class="importBox2"> <div class="importBox2">
<span class="importTitle">{{value2||'英语(美式)'}}</span> <span class="importTitle">{{ value2 || '英语(美式)' }}</span>
<el-input <el-input
v-model="textarea2" v-model="textarea2"
:rows="2" :rows="2"
@ -105,7 +110,8 @@
<el-row> <el-row>
<el-col :span="9"> <el-col :span="9">
<el-form-item label="选择日期"> <el-form-item label="选择日期">
<el-date-picker type="daterange" v-model="searchData.selecttime" placeholder="请选择日期"/> <el-date-picker type="daterange" v-model="searchData.selecttime"
placeholder="请选择日期"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="9"> <el-col :span="9">
@ -120,7 +126,7 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<el-table v-loading="loading" size="large" border :data="content" :empty-text="'暂无数据'" <el-table v-loading="loading" size="large" border :data="content" :empty-text="'暂无数据'"
:header-cell-style="{background: '#f5f5f5', color:'#333333'}"> :header-cell-style="{background: '#f5f5f5', color:'#333333'}">
@ -153,36 +159,45 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import dayjs from "dayjs"; import dayjs from "dayjs";
import { onClickOutside } from "@vueuse/core" import {onClickOutside} from "@vueuse/core"
import { genFileId } from 'element-plus'
definePageMeta({
name: '翻译',
hidden: true,
hiddenBanner: true,
middleware: ['auth']
})
const {prefixCls} = useDesign('mai-wrap');
const router = useRouter()
const route = useRoute()
const {translateApi} = useApi() const {translateApi} = useApi()
const textarea = ref('') const textarea = ref('')
const textarea2 = ref('') const textarea2 = ref('')
const xiala = ref(false) const currentLangModalStatus = ref(false)
const xiala2 = ref(false) const targetLangModalStatus = ref(false)
// const textarea2 = ref('') // const textarea2 = ref('')
const radio1 = ref(1) const radio1 = ref(route.query?.type ?? 1)
const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 6, 0) const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 6, 0)
const currentTab = ref({}); const currentTab = ref({});
let language = reactive({}) let language = reactive({})
const options = reactive([ const options = reactive([
{value:'zh',lable:'中文(简体)'}, {value: 'zh', lable: '中文(简体)'},
{value:"en",lable:'英文'}, {value: "en", lable: '英文'},
]) ])
const options2 = reactive([ const options2 = reactive([
{value:'zh',lable:'中文(简体)'}, {value: 'zh', lable: '中文(简体)'},
{value:"en",lable:'英文'}, {value: "en", lable: '英文'},
]) ])
const value2 = ref('') const value2 = ref('')
const value = ref('') const value = ref('')
const abbreviation1 = ref('') const abbreviation1 = ref('')
const abbreviation2 = ref('en') const abbreviation2 = ref('en')
const searchData = ref({ const searchData = ref({
selecttime:'', selecttime: '',
name:'' name: ''
}) })
const loading = ref(true); const loading = ref(true);
const content = ref([]); const content = ref([]);
@ -192,57 +207,50 @@ const upload = ref()
const fileUrl = ref('') const fileUrl = ref('')
definePageMeta({ watchEffect(()=>{
name: '翻译', radio1.value = route.query?.type ?? 1;
hidden:true,
// headerHost: false,
// homeBanner:true,
// order: 1,
}) })
// const props = defineProps(['title']);
const {prefixCls} = useDesign('mai-wrap'); function changeTranslate(val: any){
router.replace({
// watch(radio1, ()=>{ path:route.path,
// value.value = '' query: {
// value2.value = '' type: val
// abbreviation1.value = '' }
// abbreviation2.value = '' })
// textarea.value = '' }
// textarea2.value = '' function beforeUpload(file: any) {
// })
function brforeUpload(file:any){
console.log(file) console.log(file)
} }
function uploadChange(){
function uploadChange() {
} }
function uploadSuccess(response:any){
function uploadSuccess(response: any) {
ElMessage.success(response.msg) ElMessage.success(response.msg)
console.log(typeof response.data.url) console.log(typeof response.data.url)
fileUrl.value = response.data.url fileUrl.value = response.data.url
} }
function uploadError(response:any){
function uploadError(response: any) {
ElMessage.error(response.msg) ElMessage.error(response.msg)
} }
// function handleExceed(files:any){
// upload.value!.clearFiles()
// const file = files[0]
// file.uid = genFileId()
// upload.value!.handleStart(file)
// }
function resetData(flag: boolean = true) { function resetData(flag: boolean = true) {
searchData.value = { searchData.value = {
selecttime:'', selecttime: '',
name:'' name: ''
} }
flag && getList(currentTab.value) flag && getList(currentTab.value)
} }
function goYouHua(){
function goYouHua() {
radio1.value = 3 radio1.value = 3
} }
function reset(){
function reset() {
value.value = '' value.value = ''
value2.value = '' value2.value = ''
abbreviation1.value = '' abbreviation1.value = ''
@ -250,6 +258,7 @@ function reset(){
textarea.value = '' textarea.value = ''
textarea2.value = '' textarea2.value = ''
} }
function onChangePage(val: number) { function onChangePage(val: number) {
setCurrentPage(val) setCurrentPage(val)
getList(currentTab.value) getList(currentTab.value)
@ -257,49 +266,64 @@ function onChangePage(val: number) {
function selectClick1() { function selectClick1() {
// debugger // debugger
xiala.value = !xiala.value currentLangModalStatus.value = !currentLangModalStatus.value
} }
function selectClick2() { function selectClick2() {
xiala2.value = !xiala2.value targetLangModalStatus.value = !targetLangModalStatus.value
} }
function selectLanguage(item:any) {
function selectLanguage(item: any) {
console.log(item) console.log(item)
if(xiala.value){ if (currentLangModalStatus.value) {
value.value = item.name value.value = item.name
abbreviation1.value = item.abbreviation abbreviation1.value = item.abbreviation
xiala.value = false currentLangModalStatus.value = false
} }
} }
function selectLanguage2(item:any) {
function selectLanguage2(item: any) {
console.log(item) console.log(item)
if(xiala2.value){ if (targetLangModalStatus.value) {
value2.value = item.name value2.value = item.name
abbreviation2.value = item.abbreviation abbreviation2.value = item.abbreviation
xiala2.value = false targetLangModalStatus.value = false
} }
} }
async function translate() { async function translate() {
if(radio1.value==1){ if (radio1.value == 1) {
const {data:data} = await translateApi.translateText({content:textarea.value,source:abbreviation1.value,target:abbreviation2.value}) const {data: data} = await translateApi.translateText({
content: textarea.value,
source: abbreviation1.value,
target: abbreviation2.value
})
textarea2.value = data textarea2.value = data
} }
if(radio1.value==3){ if (radio1.value == 3) {
const {data:data} = await translateApi.translateOptimizeText({content:textarea.value,source:abbreviation1.value,target:abbreviation2.value}) const {data: data} = await translateApi.translateOptimizeText({
content: textarea.value,
source: abbreviation1.value,
target: abbreviation2.value
})
textarea2.value = data textarea2.value = data
} }
// console.log(data)
} }
async function translate2() { async function translate2() {
const {data:data} = await translateApi.translateFile({file:fileUrl.value,source:abbreviation1.value,target:abbreviation2.value}) const {data: data} = await translateApi.translateFile({
file: fileUrl.value,
source: abbreviation1.value,
target: abbreviation2.value
})
// console.log(data) // console.log(data)
// textarea2.value = data // textarea2.value = data
} }
async function allLanguage() { async function allLanguage() {
const {data:data} = await translateApi.getAllLanguage({}) const {data: data} = await translateApi.getAllLanguage({})
language = data language = data
} }
@ -308,9 +332,9 @@ async function getList(data: any) {
loading.value = true; loading.value = true;
const searchParams = { const searchParams = {
...searchData.value, ...searchData.value,
start_date:'', start_date: '',
end_date: '', end_date: '',
type:0 type: 0
} }
if (searchData.value.selecttime) { if (searchData.value.selecttime) {
searchParams.start_date = dayjs(searchData.value.selecttime[1]).format('YYYY-DD-MM hh:mm:ss') searchParams.start_date = dayjs(searchData.value.selecttime[1]).format('YYYY-DD-MM hh:mm:ss')
@ -318,7 +342,7 @@ async function getList(data: any) {
// @ts-ignore // @ts-ignore
delete searchParams.selecttime; delete searchParams.selecttime;
} }
searchParams.type = radio1.value searchParams.type = radio1.value as number
const {data: listDatas} = await translateApi.getTranslateList({ const {data: listDatas} = await translateApi.getTranslateList({
...searchParams, ...searchParams,
page: current.value, page: current.value,
@ -331,73 +355,82 @@ async function getList(data: any) {
} }
} }
onClickOutside(tanchuang1, ()=>{ onClickOutside(tanchuang1, () => {
xiala.value = false currentLangModalStatus.value = false
}) })
onClickOutside(tanchuang2, ()=>{ onClickOutside(tanchuang2, () => {
xiala2.value = false targetLangModalStatus.value = false
}) })
getList(currentTab.value) getList(currentTab.value)
allLanguage() allLanguage()
</script> </script>
<style lang="scss"> <style lang="scss">
.popper{ .popper {
display: none !important; display: none !important;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap{ * {
padding: 0 244px; --el-color-primary: #022950
}
.wrap {
padding: 0 244px 50px 244px;
background-color: #EEF1F9; background-color: #EEF1F9;
padding-bottom: 50px;
} }
.el-radio-group{
.el-radio-group {
margin-top: 42px; margin-top: 42px;
margin-bottom: 76px; margin-bottom: 76px;
} }
.el-radio-button{
.el-radio-button {
border-radius: 16px; border-radius: 16px;
margin-right:12px ; margin-right: 12px;
border: 0px; border: 0px;
outline: none; outline: none;
width: 218px; width: 218px;
height: 61px; height: 61px;
} }
::v-deep .el-radio-button__inner{
width: 218px; :deep(.el-radio-button__inner) {
height: 61px; width: 218px;
border: 0px; height: 61px;
outline: none; border: 0px;
display: flex; outline: none;
justify-content: center; display: flex;
align-items: center; justify-content: center;
font-size: 20px; align-items: center;
font-family: PingFangSC-Regular, PingFang SC; font-size: 20px;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
border-radius: 16px !important; 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; :deep(.el-input__wrapper) {
width: 218px;
height: 61px;
background: #FFFFFF;
border-radius: 16px;
border-color: #ffffff;
} }
.change-wrap{
:deep(.el-input__inner) {
//text-align: center;
}
.change-wrap {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 24px; margin-bottom: 24px;
position: relative; position: relative;
::v-deep .el-input__wrapper{
:deep(.el-input__wrapper) {
font-size: 20px !important; font-size: 20px !important;
} }
.el-button{
.el-button {
width: 218px; width: 218px;
height: 61px; height: 61px;
background: #022950; background: #022950;
@ -406,13 +439,15 @@ async function getList(data: any) {
font-size: 20px; font-size: 20px;
margin-left: 24px; margin-left: 24px;
} }
img{
img {
width: 55px; width: 55px;
height: 44px; height: 44px;
margin: 0 28px 0 34px; margin: 0 28px 0 34px;
} }
} }
::v-deep .el-textarea__inner{
:deep(.el-textarea__inner) {
width: 100%; width: 100%;
height: 239px; height: 239px;
border-radius: 16px; border-radius: 16px;
@ -420,63 +455,73 @@ async function getList(data: any) {
padding-top: 17px; padding-top: 17px;
padding-left: 37px; padding-left: 37px;
} }
.el-textarea{
.el-textarea {
border-radius: 16px; border-radius: 16px;
margin-top: 17px; margin-top: 17px;
font-size: 36px; font-size: 36px;
} }
.import-wrap{
.import-wrap {
display: flex; display: flex;
justify-content: center; justify-content: center;
// align-items: center; // align-items: center;
.importBox1{ .importBox1 {
flex: 1; flex: 1;
margin-right: 32px; margin-right: 32px;
} }
.importBox3{
.importBox3 {
flex: 0.25; flex: 0.25;
margin-right: 22px; margin-right: 22px;
.el-button{
.el-button {
width: 150px; width: 150px;
height: 55px; height: 55px;
margin: 0; margin: 0;
border-radius: 8px; border-radius: 8px;
font-size: 20px; font-size: 20px;
} }
.button1{
.button1 {
margin-bottom: 24px; margin-bottom: 24px;
color: #BABABA; color: #BABABA;
background-color: #fff; background-color: #fff;
} }
.button2{
.button2 {
color: #fff; color: #fff;
background-color: #022950; background-color: #022950;
} }
} }
.importBox2{
.importBox2 {
flex: 1; flex: 1;
} }
} }
.importTitle{
.importTitle {
width: 120px; width: 120px;
height: 28px; height: 28px;
font-size: 20px; font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC; font-weight: 400;
font-weight: 400; color: #333333;
color: #333333; line-height: 28px;
line-height: 28px; margin-left: 10px;
margin-left: 10px; }
}
.el-select{ .el-select {
margin: 0; margin: 0;
} }
.jilu-wrap{
.jilu-wrap {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 20px; font-size: 20px;
margin-top: 30px; margin-top: 30px;
.jilu{
.jilu {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -485,47 +530,56 @@ margin-left: 10px;
background: #E8EBF5; background: #E8EBF5;
border-radius: 16px; border-radius: 16px;
color: #333333; color: #333333;
img{
img {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-right: 12px; margin-right: 12px;
} }
} }
.first{
.first {
color: #E60B0B; color: #E60B0B;
cursor: pointer; cursor: pointer;
} }
} }
.yangliu-mai-wrap-content{
.yangliu-mai-wrap-content {
margin: 30px 0 0 0; margin: 30px 0 0 0;
width: 100%; width: 100%;
} }
// .dynamicInfo { // .dynamicInfo {
// margin-top: 0; // margin-top: 0;
// padding-bottom: 100px; // padding-bottom: 100px;
// } // }
::v-deep .el-table__inner-wrapper{ :deep(.el-table__inner-wrapper) {
font-size: 20px; font-size: 20px;
} }
::v-deep .el-table__header-wrapper{
:deep(.el-table__header-wrapper) {
height: 80px; height: 80px;
} }
::v-deep .el-table__header{
:deep(.el-table__header) {
height: 80px; height: 80px;
} }
::v-deep .el-table__empty-block{
:deep(.el-table__empty-block) {
height: 300px !important; height: 300px !important;
} }
:deep(.el-form) { :deep(.el-form) {
margin-bottom: 43px; margin-bottom: 43px;
.el-form-item__label { .el-form-item__label {
height: 60px; height: 60px;
line-height: 60px !important; line-height: 60px !important;
padding-right: 16px; padding-right: 16px;
@apply text-xl; @apply text-xl;
} }
.el-input__wrapper { .el-input__wrapper {
border-radius: 10px; border-radius: 10px;
height: 60px; height: 60px;
@ -534,106 +588,120 @@ margin-left: 10px;
background-color: #ffffff; background-color: #ffffff;
@apply text-xl; @apply text-xl;
} }
.el-icon { .el-icon {
font-size: 20px; font-size: 20px;
} }
.el-range-input { .el-range-input {
font-size: 20px; font-size: 20px;
} }
.el-button { .el-button {
width: 150px; width: 150px;
height: 60px; height: 60px;
box-shadow: unset; box-shadow: unset;
@apply text-xl rounded-xl; @apply text-xl rounded-xl;
&--primary{ &--primary {
background-color: #022950; background-color: #022950;
} }
} }
} }
::v-deep .el-upload{
:deep(.el-upload) {
margin-top: 17px; margin-top: 17px;
border-radius: 16px; border-radius: 16px;
} }
::v-deep .el-upload-dragger{
:deep(.el-upload-dragger) {
height: 239px; height: 239px;
border-radius: 16px; border-radius: 16px;
} }
::v-deep .el-upload{
:deep(.el-upload) {
height: 239px; height: 239px;
border-radius: 16px; border-radius: 16px;
} }
.el-upload__text{
font-size: 16px; .el-upload__text {
font-family: PingFangSC-Semibold, PingFang SC; font-size: 16px;
font-weight: 600; font-family: PingFangSC-Semibold, PingFang SC;
color: #333333; font-weight: 600;
line-height: 22px; color: #333333;
margin-bottom: 49px; line-height: 22px;
display: flex; margin-bottom: 49px;
justify-content: center; display: flex;
align-items: center; justify-content: center;
} align-items: center;
.el-upload__text2{ }
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; .el-upload__text2 {
font-weight: 400; font-size: 14px;
color: #999999; font-family: PingFangSC-Regular, PingFang SC;
line-height: 20px; font-weight: 400;
display: flex; color: #999999;
justify-content: center; line-height: 20px;
align-items: center; display: flex;
} justify-content: center;
::v-deep .el-table__cell { align-items: center;
padding: 26px 0 !important; }
}
.select_wrap{ :deep(.el-table__cell) {
padding: 26px 0 !important;
}
.select_wrap {
width: 100%; width: 100%;
// width: 1436px; // width: 1436px;
padding-left: 32px; padding-left: 32px;
padding-right: 40px; padding-right: 40px;
height: 774px; height: 774px;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 0px 22px 7px rgba(224,224,224,0.5); box-shadow: 0px 0px 22px 7px rgba(224, 224, 224, 0.5);
border-radius: 16px; border-radius: 16px;
position: absolute; position: absolute;
top: 65px; top: 65px;
left: 0; left: 0;
z-index: 100; z-index: 100;
::v-deep .el-input__inner {
:deep(.el-input__inner) {
text-align: left; text-align: left;
font-size: 24px; font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #CACACA; color: #CACACA;
} }
.hr{
.hr {
width: 100%; width: 100%;
height: 1px; height: 1px;
background: #D8D8D8; background: #D8D8D8;
} }
.scrollbar{
::v-deep .el-scrollbar__bar{ .scrollbar {
:deep(.el-scrollbar__bar) {
width: 13px !important; width: 13px !important;
border-radius: 6.5px !important; border-radius: 6.5px !important;
} }
} }
.language_wrap{
.language_wrap {
height: 698px; height: 698px;
overflow-y: auto; overflow-y: auto;
padding-bottom: 64px; padding-bottom: 64px;
.language_box{
.language_box {
padding: 0 5px; padding: 0 5px;
.firstWord{
.firstWord {
font-size: 18px; font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
margin-top: 24px; margin-top: 24px;
} }
.language{
.language {
font-size: 20px; font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
margin-top: 20px; margin-top: 20px;
@ -644,10 +712,11 @@ align-items: center;
} }
} }
} }
::v-deep .el-input__wrapper {
:deep(.el-input__wrapper) {
border: none !important; border: none !important;
box-shadow: none !important; box-shadow: none !important;
// padding: 0px; // // padding: 0px; //
} }
</style> </style>

@ -35,6 +35,7 @@
:pages="pagesRef" :pages="pagesRef"
@change="onChangePage" @change="onChangePage"
/> />
<!-- OnCl-->
</div> </div>
</div> </div>
</template> </template>
@ -43,7 +44,7 @@
import dayjs from "dayjs"; import dayjs from "dayjs";
import {randomUUID} from '~~/utils'; import {randomUUID} from '~~/utils';
import {onClickOutside} from "@vueuse/core";
definePageMeta({ definePageMeta({
name: '预警信息', name: '预警信息',
headerHost: true, headerHost: true,
@ -53,6 +54,9 @@ useHead({
title:'预警信息' title:'预警信息'
}) })
onClickOutside(ref, ()=>{
})
const { warningApi } = useApi() const { warningApi } = useApi()
const {prefixCls} = useDesign('mai-wrap'); const {prefixCls} = useDesign('mai-wrap');
const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 4, 0) const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 4, 0)

@ -27,6 +27,7 @@ function transform(error: any) {
} }
} }
console.log($fetch)
/** /**
* api * api
* @param { String } url * @param { String } url

Loading…
Cancel
Save