尾部导航

This commit is contained in:
cxc
2022-11-17 17:29:47 +08:00
parent c2327f30cb
commit 7dc27a03ea
54 changed files with 956 additions and 433 deletions

View File

@ -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>

View File

@ -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%;

View File

@ -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>