尾部导航
This commit is contained in:
@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<div :style="`border: 1px solid #ccc; width: ${width}px`">
|
||||
<div
|
||||
:style="`border: 1px solid #ccc; width: ${width}px`"
|
||||
:class="{
|
||||
disabled: readOnly,
|
||||
}"
|
||||
>
|
||||
<Toolbar
|
||||
style="border-bottom: 1px solid #ccc"
|
||||
:editor="editorRef"
|
||||
@ -7,12 +12,14 @@
|
||||
:mode="mode"
|
||||
/>
|
||||
<Editor
|
||||
:style="`min-height: ${minHeight}px; height: ${height}px; overflow-y: hidden`"
|
||||
:style="`min-height: ${minHeight}px; height: ${height}px;
|
||||
overflow-y: hidden`"
|
||||
v-model="valueHtml"
|
||||
:defaultConfig="editorConfig"
|
||||
:mode="mode"
|
||||
@onCreated="handleCreated"
|
||||
@onChange="handleChange"
|
||||
@onBlur="emitBlur"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@ -20,16 +27,37 @@
|
||||
<script>
|
||||
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
|
||||
import { getToken } from "@/utils/auth";
|
||||
import { onBeforeUnmount, ref, shallowRef, onMounted, toRefs } from "vue";
|
||||
import {
|
||||
onBeforeUnmount,
|
||||
ref,
|
||||
shallowRef,
|
||||
onMounted,
|
||||
toRefs,
|
||||
nextTick,
|
||||
watch,
|
||||
computed,
|
||||
// readonly,
|
||||
} from "vue";
|
||||
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
|
||||
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
||||
export default {
|
||||
components: { Editor, Toolbar },
|
||||
// expose: {
|
||||
// isEmpty,
|
||||
// },
|
||||
props: {
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "请输入内容",
|
||||
},
|
||||
minHeight: {
|
||||
type: [String, Number],
|
||||
default: 300,
|
||||
@ -50,6 +78,9 @@ export default {
|
||||
setup(props, context) {
|
||||
// 编辑器实例，必须用 shallowRef
|
||||
const editorRef = shallowRef();
|
||||
// editorRef.value.on("blur", () => {
|
||||
// console.log("blur");
|
||||
// });
|
||||
|
||||
// 内容 HTML
|
||||
const valueHtml = ref("");
|
||||
@ -61,11 +92,16 @@ export default {
|
||||
{ immediate: true }
|
||||
);
|
||||
const { height } = toRefs(props);
|
||||
|
||||
const toolbarConfig = {
|
||||
excludeKeys: [],
|
||||
};
|
||||
// onBlur: (editor) => {
|
||||
// console.log("onBlur");
|
||||
// },
|
||||
const editorConfig = {
|
||||
placeholder: "请输入内容...",
|
||||
placeholder: props.placeholder,
|
||||
readOnly: props.readOnly,
|
||||
MENU_CONF: {
|
||||
uploadImage: {
|
||||
server: `${baseUrl}/common/upload`,
|
||||
@ -84,7 +120,10 @@ export default {
|
||||
},
|
||||
};
|
||||
|
||||
// console.log(editor.getMenuConfig('uploadImage'));
|
||||
const isEmpty = () => {
|
||||
return editorRef.value.isEmpty();
|
||||
};
|
||||
|
||||
// 组件销毁时，也及时销毁编辑器
|
||||
onBeforeUnmount(() => {
|
||||
const editor = editorRef.value;
|
||||
@ -96,8 +135,19 @@ export default {
|
||||
editorRef.value = editor; // 记录 editor 实例，重要！
|
||||
};
|
||||
const handleChange = (editor) => {
|
||||
context.emit("update:modelValue", editor.getHtml());
|
||||
if (editor.isEmpty()) {
|
||||
context.emit("update:modelValue", "");
|
||||
} else {
|
||||
context.emit("update:modelValue", editor.getHtml());
|
||||
}
|
||||
};
|
||||
context.expose({ isEmpty });
|
||||
|
||||
const emitBlur = () => {
|
||||
context.emit("blur", editorRef.value);
|
||||
// editorRef.value.emit("blur");
|
||||
};
|
||||
|
||||
return {
|
||||
editorRef,
|
||||
valueHtml,
|
||||
@ -107,7 +157,25 @@ export default {
|
||||
height,
|
||||
handleCreated,
|
||||
handleChange,
|
||||
// isEmpty,
|
||||
emitBlur,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.disabled {
|
||||
background-color: #f5f7fa;
|
||||
cursor: not-allowed;
|
||||
:deep(.w-e-text-container) {
|
||||
background-color: inherit;
|
||||
// color: green;
|
||||
opacity: 0.5;
|
||||
}
|
||||
:deep(.w-e-toolbar) {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="webHead">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-col :span="5">
|
||||
<img src="@/assets/logo/logo.png" class="logo" />
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
@ -23,6 +23,19 @@
|
||||
解决方案
|
||||
</div>
|
||||
<div class="show_box">
|
||||
<div
|
||||
v-for="item in categoryList"
|
||||
class="pointer"
|
||||
:class="
|
||||
pagePath == `/solution/${item.id}` ? 'x_blue _active' : ''
|
||||
"
|
||||
@click="handlePath(`/solution/${item.id}?name=${item.name}`)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<!--
|
||||
|
||||
|
||||
<div
|
||||
class="pointer"
|
||||
:class="pagePath == '/solution/small' ? 'x_blue _active' : ''"
|
||||
@ -55,6 +68,7 @@
|
||||
>
|
||||
科研区域服务
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-item1">
|
||||
@ -84,7 +98,7 @@
|
||||
关于我们
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-item1" style="display: flex; justify-content: center">
|
||||
<li class="menu-item1 profile-menu-group" style="display: flex">
|
||||
<div
|
||||
v-if="!userStore.avatar"
|
||||
class="menu-item-tit"
|
||||
@ -93,9 +107,39 @@
|
||||
>
|
||||
登录注册
|
||||
</div>
|
||||
|
||||
<el-dropdown
|
||||
v-else
|
||||
<!-- <el-popover
|
||||
|
||||
placement="bottom"
|
||||
:title="`32`"
|
||||
:width="200"
|
||||
trigger="hover"
|
||||
:content="userStore.nickName"
|
||||
> -->
|
||||
<!-- content="this is content, this is content, this is content" -->
|
||||
<!-- <template #reference> -->
|
||||
<div v-else class="avatar-wrapper">
|
||||
<img :src="userStore.avatar" class="user-avatar" />
|
||||
<i class="el-icon-caret-bottom" />
|
||||
</div>
|
||||
<!-- </template> -->
|
||||
<!-- </el-popover> -->
|
||||
<div
|
||||
v-if="userStore.avatar"
|
||||
class="menu-item-tit"
|
||||
:class="pagePath == '/login' ? 'active' : ''"
|
||||
@click="handlePage"
|
||||
>
|
||||
个人中心
|
||||
</div>
|
||||
<div
|
||||
v-if="userStore.avatar"
|
||||
class="menu-item-tit"
|
||||
:class="pagePath == '/login' ? 'active' : ''"
|
||||
@click="logout"
|
||||
>
|
||||
退出登录
|
||||
</div>
|
||||
<!-- <el-dropdown
|
||||
style="margin-top: 20px"
|
||||
class="avatar-container right-menu-item hover-effect"
|
||||
trigger="click"
|
||||
@ -106,17 +150,17 @@
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<!-- <router-link to="/identity/index"> -->
|
||||
// <router-link to="/identity/index">
|
||||
<el-dropdown-item @click="handlePage"
|
||||
>个人中心</el-dropdown-item
|
||||
>
|
||||
<!-- </router-link> -->
|
||||
// </router-link>
|
||||
<el-dropdown-item divided @click="logout">
|
||||
<span>退出登录</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-dropdown> -->
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
@ -130,12 +174,20 @@ import { defineComponent, onMounted, reactive, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
import useUserStore from "@/store/modules/user";
|
||||
import { getCategory } from "@/api/website/solution";
|
||||
|
||||
const userStore = useUserStore();
|
||||
let state = reactive({});
|
||||
let pagePath = ref("");
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const categoryList = ref([]);
|
||||
const loadCategoryList = async () => {
|
||||
const { data } = await getCategory();
|
||||
categoryList.value = data;
|
||||
};
|
||||
loadCategoryList();
|
||||
watch(
|
||||
() => route.path,
|
||||
(newVal, oldVal) => {
|
||||
@ -161,7 +213,8 @@ function handlePage() {
|
||||
|
||||
function handlePath(path) {
|
||||
pagePath.value = path;
|
||||
router.push(path);
|
||||
// router.push(path);
|
||||
window.open(path, "_blank");
|
||||
}
|
||||
function logout() {
|
||||
ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
|
||||
@ -211,6 +264,7 @@ dt {
|
||||
}
|
||||
.menu {
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
.solution {
|
||||
position: relative;
|
||||
.show_box {
|
||||
@ -221,8 +275,9 @@ dt {
|
||||
text-align: center;
|
||||
background-color: red;
|
||||
div {
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
// height: 42px;
|
||||
// line-height: 42px;
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
background-color: #f2f6ff;
|
||||
@ -259,13 +314,22 @@ dt {
|
||||
border-bottom: 2.5px solid #000;
|
||||
}
|
||||
}
|
||||
.profile-menu-group {
|
||||
height: 71px;
|
||||
flex: 2;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// .avatar-wrapper {
|
||||
// padding-top: 25px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
// cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
|
||||
@ -1,11 +1,17 @@
|
||||
<template>
|
||||
<div class="webFooter">
|
||||
<div class="wrap">
|
||||
<el-row>
|
||||
<el-col :span="4" v-for="(item, index) in state.list" :key="index">
|
||||
<el-row type="flex" justify="center" :gutter="100">
|
||||
<el-col :span="6" v-for="item in state.list" :key="item.id">
|
||||
<div class="tit">{{ item.title }}</div>
|
||||
<p v-for="(item2, index2) in item.children" :key="index2">
|
||||
<a :href="item2.link" target="_black">{{ item2.title }}</a>
|
||||
<p v-for="subItem in item.children" :key="subItem.id">
|
||||
<a :href="`${subItem.link}`" target="_black">{{ subItem.title }}</a>
|
||||
</p>
|
||||
</el-col>
|
||||
<!-- <el-col :span="4">
|
||||
<div class="tit">创新服务</div>
|
||||
<p v-for="(item, index2) in state.list[1].children" :key="index2">
|
||||
<a :href="item.link" target="_black">{{ item.title }}</a>
|
||||
</p>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
@ -19,7 +25,7 @@
|
||||
<p>
|
||||
<a href="">地址：{{ state.address }}</a>
|
||||
</p>
|
||||
</el-col>
|
||||
</el-col> -->
|
||||
<!-- <el-col :span="4" style="text-align: center;">
|
||||
<div class="tit">二维码</div>
|
||||
<p><img class="qrcode" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F39%2F53%2F71573cc4a35de96.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643849770&t=80c12feeca42dad377bbdde1d6e78f33" alt=""></p>
|
||||
@ -41,6 +47,7 @@
|
||||
<script setup>
|
||||
import request from "@/utils/request";
|
||||
import { onMounted, reactive, watch } from "vue";
|
||||
import { getCategory } from "@/api/website/solution";
|
||||
|
||||
function navigation() {
|
||||
return request({
|
||||
@ -66,57 +73,164 @@ function getNavigation() {
|
||||
// }
|
||||
// });
|
||||
const res = {
|
||||
msg: "操作成功",
|
||||
code: 200,
|
||||
message: "ok",
|
||||
data: [
|
||||
{
|
||||
title: "解决方案",
|
||||
id: 21,
|
||||
tenantId: 3,
|
||||
parentId: 0,
|
||||
title: "创新服务",
|
||||
link: "/",
|
||||
is_target: false,
|
||||
targetFlag: "0",
|
||||
sort: 0,
|
||||
status: "1",
|
||||
createTime: "2022-02-21 14:03:28",
|
||||
updateTime: "2022-02-21 14:03:28",
|
||||
children: [
|
||||
{
|
||||
title: "大型企业方服务",
|
||||
link: "/",
|
||||
is_target: false,
|
||||
id: 22,
|
||||
tenantId: 1,
|
||||
parentId: 21,
|
||||
title: "中科院设备共享平台",
|
||||
link: "http://samp.cas.cn",
|
||||
targetFlag: "0",
|
||||
sort: 0,
|
||||
status: "1",
|
||||
createTime: "2022-02-21 14:03:47",
|
||||
updateTime: "2022-02-21 14:03:47",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
tenantId: 1,
|
||||
parentId: 21,
|
||||
title: "中科院文献情报中心",
|
||||
link: "https://www.las.ac.cn",
|
||||
targetFlag: "0",
|
||||
sort: 0,
|
||||
status: "1",
|
||||
createTime: "2022-02-21 14:04:52",
|
||||
updateTime: "2022-02-21 14:04:52",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
tenantId: 1,
|
||||
parentId: 21,
|
||||
title: "中国科学院",
|
||||
link: "https://www.cas.cn",
|
||||
targetFlag: "0",
|
||||
sort: 0,
|
||||
status: "1",
|
||||
createTime: "2022-02-21 14:05:59",
|
||||
updateTime: "2022-02-21 14:05:59",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
tenantId: 1,
|
||||
parentId: 21,
|
||||
title: "中科院重庆院合肥分院",
|
||||
link: "http://www.caszl.cn",
|
||||
targetFlag: "0",
|
||||
sort: 0,
|
||||
status: "1",
|
||||
createTime: "2022-02-21 14:06:29",
|
||||
updateTime: "2022-02-21 14:06:29",
|
||||
children: [],
|
||||
},
|
||||
{ title: "科研院所服务", link: "/", is_target: false, children: [] },
|
||||
{ title: "政府区域服务", link: "/", is_target: false, children: [] },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "创新服务",
|
||||
id: 29,
|
||||
tenantId: 3,
|
||||
parentId: 0,
|
||||
title: "联系我们",
|
||||
link: "/",
|
||||
is_target: false,
|
||||
targetFlag: "0",
|
||||
sort: 0,
|
||||
status: "1",
|
||||
createTime: "2022-11-15 16:20:19",
|
||||
updateTime: null,
|
||||
children: [
|
||||
{
|
||||
title: "中科院设备共享平台",
|
||||
link: "http://samp.cas.cn",
|
||||
is_target: false,
|
||||
id: 30,
|
||||
tenantId: 3,
|
||||
parentId: 29,
|
||||
title: "客服电话：18156053255",
|
||||
link: "/",
|
||||
targetFlag: "0",
|
||||
sort: 0,
|
||||
status: "1",
|
||||
createTime: "2022-11-15 16:20:39",
|
||||
updateTime: null,
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
title: "中科院文献情报中心",
|
||||
link: "https://www.las.ac.cn",
|
||||
is_target: false,
|
||||
id: 31,
|
||||
tenantId: 3,
|
||||
parentId: 29,
|
||||
title: "邮箱：zky@gmail.com",
|
||||
link: "/",
|
||||
targetFlag: "0",
|
||||
sort: 0,
|
||||
status: "1",
|
||||
createTime: "2022-11-15 16:20:56",
|
||||
updateTime: null,
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
title: "中科院重庆院",
|
||||
link: "http://www.cigit.cas.cn/loading",
|
||||
is_target: false,
|
||||
id: 32,
|
||||
tenantId: 3,
|
||||
parentId: 29,
|
||||
title: "地址：安徽省合肥市高新区创新产业园D1南楼",
|
||||
link: "/",
|
||||
targetFlag: "0",
|
||||
sort: 0,
|
||||
status: "1",
|
||||
createTime: "2022-11-15 16:21:43",
|
||||
updateTime: null,
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 33,
|
||||
tenantId: 3,
|
||||
parentId: 0,
|
||||
title: "解决方案",
|
||||
link: "/",
|
||||
targetFlag: "0",
|
||||
sort: 0,
|
||||
status: "1",
|
||||
createTime: "2022-11-15 16:22:41",
|
||||
updateTime: null,
|
||||
children: [
|
||||
{
|
||||
id: 34,
|
||||
tenantId: 3,
|
||||
parentId: 33,
|
||||
title: "企业创新升级",
|
||||
link: "/",
|
||||
targetFlag: "0",
|
||||
sort: 0,
|
||||
status: "1",
|
||||
createTime: "2022-11-15 16:22:58",
|
||||
updateTime: null,
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
title: "中国科学院",
|
||||
link: "https://www.cas.cn",
|
||||
is_target: false,
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
title: "中科院重庆院合肥分院",
|
||||
link: "http://www.caszl.cn",
|
||||
is_target: false,
|
||||
id: 35,
|
||||
tenantId: 3,
|
||||
parentId: 33,
|
||||
title: "成果转化",
|
||||
link: "/",
|
||||
targetFlag: "0",
|
||||
sort: 0,
|
||||
status: "1",
|
||||
createTime: "2022-11-15 16:23:21",
|
||||
updateTime: null,
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
@ -162,6 +276,13 @@ async function getConfig() {
|
||||
}
|
||||
getNavigation();
|
||||
getConfig();
|
||||
|
||||
const solutionCategoryList = ref([]);
|
||||
const loadsolutionCategoryList = async () => {
|
||||
const { data } = await getCategory();
|
||||
solutionCategoryList.value = data;
|
||||
};
|
||||
loadsolutionCategoryList();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user