Skip to content

R
risk-monitor
提交 13b5b9ff authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

update

上级 65e0e1ac
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 558 行增加 和 25 行删除
src/App.vue
浏览文件 @ 13b5b9ff
......@@ -4,8 +4,15 @@
<el-header>
<nav class="navbar">
<div class="nav-brand">
<el-icon class="brand-icon"><Monitor /></el-icon>
<span class="brand-text">某方向风险监测预警系统</span>
<div class="brand-icon">
<img src="@/assets/icons/header-logo.png" alt="" />
</div>
<div class="brand-text">
<div class="text-ch">某方向风险监测预警系统</div>
<div class="text-en">
National Science and Technology Security Risk Monitoring and Early Warning System
</div>
</div>
</div>
<div class="nav-menu">
<el-dropdown @command="handleHomeCommand" class="home-dropdown">
......@@ -42,9 +49,13 @@
</div>
</div>
<div class="user-info">
<el-icon><Message /></el-icon>
<el-icon><User /></el-icon>
<span>管理员</span>
<div class="email">
<img src="@/assets/icons/header-icon.png" alt="" />
</div>
<div class="avator">
<img src="@/assets/icons/header-avator.png" alt="" />
</div>
<span class="user">管理员</span>
</div>
</nav>
</el-header>
......@@ -90,20 +101,18 @@ body {
}
</style>
<style scoped>
<style lang="scss" scoped>
#app {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
width: 100%;
height: 100vh;
overflow-y: hidden;
// overflow-y: hidden;
}
/* 确保Element Plus容器组件占满宽度 */
.el-container {
width: 100%;
/* min-height: 100vh; */
height: 100%;
margin-bottom: 20px;
}
.navbar {
......@@ -117,18 +126,29 @@ body {
border-bottom: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
position: relative;
box-sizing: border-box;
height: 96px;
}
.main-container {
/* 移除宽度限制，让子页面自己控制布局 */
width: 100%;
height: 984px;
}
.nav-brand {
display: flex;
align-items: center;
gap: 12px;
position: absolute;
left: 24px;
left: 160px;
.brand-icon {
width: 48px;
height: 48px;
img {
width: 100%;
height: 100%;
}
}
}
.brand-icon {
......@@ -137,9 +157,21 @@ body {
}
.brand-text {
font-size: 18px;
font-weight: 600;
color: #333;
.text-ch {
height: 42px;
color: rgba(10, 18, 30, 1);
font-family: Microsoft YaHei;
font-size: 32px;
font-weight: 700;
line-height: 42px;
}
.text-en {
color: rgba(10, 18, 30, 1);
font-family: Microsoft YaHei;
font-size: 10px;
font-weight: 400;
line-height: 13px;
}
}
.nav-menu {
......@@ -188,24 +220,47 @@ body {
.user-info {
display: flex;
align-items: center;
gap: 8px;
gap: 20px;
padding: 8px 12px;
background: #f3f4f6;
border-radius: 6px;
color: #333;
position: absolute;
right: 24px;
right: 159px;
.email {
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.avator {
width: 32px;
height: 32px;
img {
width: 100%;
height: 100%;
}
}
.user {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
.el-header {
padding: 0;
height: 60px;
height: 96px;
position: relative;
z-index: 1;
}
.el-main {
padding: 0;
height: calc(100vh - 60px);
height: calc(100vh - 96px);
background-color: rgba(246, 251, 255, 1);
overflow-y: auto;
}
</style>
src/hooks/useScrollShow.js 0 → 100644
浏览文件 @ 13b5b9ff
import { ref, onMounted, onUnmounted } from 'vue'
export function useContainerScroll(containerRef, options = {}) {
const {
scrollThreshold = 50,
showOnScrollDown = true,
hideOnTop = true,
useAnimationFrame = true
} = options
const isShow = ref(false)
const lastScrollTop = ref(0)
const ticking = ref(false)
const updateShowState = () => {
const container = containerRef.value
if (!container) return
const currentScrollTop = container.scrollTop
if (showOnScrollDown && currentScrollTop > lastScrollTop.value && currentScrollTop > scrollThreshold) {
isShow.value = true
}
if (hideOnTop && currentScrollTop === 0) {
isShow.value = false
}
lastScrollTop.value = currentScrollTop
ticking.value = false
}
const handleScroll = () => {
if (useAnimationFrame) {
if (!ticking.value) {
requestAnimationFrame(updateShowState)
ticking.value = true
}
} else {
updateShowState()
}
}
onMounted(() => {
const container = containerRef.value
if (container) {
container.addEventListener('scroll', handleScroll, { passive: true })
}
})
onUnmounted(() => {
const container = containerRef.value
if (container) {
container.removeEventListener('scroll', handleScroll)
}
})
return {
isShow
}
}
\ No newline at end of file
src/router/index.js
浏览文件 @ 13b5b9ff
......@@ -42,7 +42,19 @@ import MarketSingleCaseLayout from "@/views/marketAccessRestrictions/singleCaseL
import MarketSingleCaseOverview from "@/views/marketAccessRestrictions/singleCaseLayout/overview/index.vue";
import MarketSingleCaseDeepdig from "@/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue";
// 智能写报
import WrittingAsstaint from '@/views/writtingAsstaint/index.vue'
const routes = [
// 智能写报
{
path: "/writtingAsstaint",
name: "writtingAsstaint",
component: WrittingAsstaint,
meta: {
title: "智能写报"
}
},
{
path: '/',
......
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ 13b5b9ff
......@@ -742,10 +742,6 @@ onMounted(async () => {
display: flex;
flex-direction: column;
align-items: center;
// position: sticky;
// left: 0;
// top: 0;
// z-index: 9999;
.home-main-header-top {
box-sizing: border-box;
width: 100%;
......@@ -763,7 +759,7 @@ onMounted(async () => {
padding-left: 160px;
}
.home-main-header-center {
margin-top: 13px;
margin-top: 48px;
width: 960px;
height: 48px;
border-radius: 4px;
......@@ -777,12 +773,13 @@ onMounted(async () => {
right: 1px;
top: 1px;
width: 120px;
height: 42px;
height: 44px;
border-radius: 4px;
background: rgba(22, 119, 255, 1);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
......
src/views/writtingAsstaint/index.vue 0 → 100644
浏览文件 @ 13b5b9ff
<template>
<div class="writting-wrapper">
<div class="writting-header">
<div class="tab-box">
<div class="tab" :class="{ tabActive: item.active }" v-for="(item, index) in tabList" :key="index">
{{ item.name }}
</div>
</div>
<div class="edit-box"></div>
<div class="btn-box"></div>
</div>
<div class="writting-main">
<div class="sider">
<div class="sider-box1">
<div class="header">报文主题</div>
<div class="title-box">
<div class="title">主题名称</div>
<el-input
style="width: 476px; height: 32px"
class="title-input"
placeholder="输入主题名称，如：大而美法案"
v-model="writtingTitle"
/>
</div>
<div class="description-box">
<div class="title">主题描述</div>
<el-input
class="description-input"
type="textarea"
style="width: 476px"
:rows="8"
placeholder="输入报文主题描述，如：从科技领域方面分析大而美法案通过后对中国可能产生的影响"
v-model="descText"
/>
</div>
</div>
<div class="sider-box2">
<div class="header">报文模板</div>
<div class="template-box">
<div
class="template"
:class="{ tempActive: tempActiveIndex === index }"
v-for="(temp, index) in tempList"
:key="index"
@click="handleClickTemp(item,index)"
>
<div class="header">
<div class="title">{{ temp.title }}</div>
<div class="icon">
<img src="./assets/images/template-icon.png" alt="" />
</div>
</div>
<div class="content">{{ temp.desc }}</div>
<div class="active-icon" v-if="tempActiveIndex === index">
<img src="./assets/images/active-icon.png" alt="" />
</div>
<div class="selected-icon" v-if="tempActiveIndex === index">
<img src="./assets/images/selected-icon.png" alt="" />
</div>
</div>
</div>
<div class="tips">
<div class="tips-icon">
<img src="./assets/images/tips-icon.png" alt="" />
</div>
<div class="tips-text">内容由AI生成，无法确保真实准确，仅供参考</div>
</div>
</div>
<div class="submit-btn">
<div class="submit-icon">
<img src="./assets/images/ai.png" alt="" />
</div>
<div class="submit-text">生成报文</div>
</div>
</div>
<div class="content-box"></div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
const writtingTitle = ref("");
const descText = ref("");
const tabList = ref([
{
name: "写报",
active: true
},
{
name: "收藏",
active: false
},
{
name: "问答",
active: false
}
]);
const tempList = ref([
{
title: "主题报",
desc: "基于特定主题生成各维度的综合分析报告"
},
{
title: "统计速报",
desc: "基于定期更新的数据源生成各关键指标统计"
}
]);
const tempActiveIndex = ref(0);
const handleClickTemp = (item,index) => {
tempActiveIndex.value = index
}
</script>
<style lang="scss" scoped>
.writting-wrapper {
width: 100%;
height: 100%;
background: orange;
.writting-header {
height: 60px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
display: flex;
.tab-box {
display: flex;
margin-left: 130px;
margin-top: 13px;
width: 260px;
height: 46px;
justify-content: space-between;
.tab {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
line-height: 30px;
}
.tabActive {
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 30px;
border-bottom: 4px solid rgba(5, 95, 194, 1);
}
}
}
.writting-main {
display: flex;
height: calc(100% - 60px);
.sider {
width: 520px;
box-sizing: border-box;
border-right: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
background: rgba(255, 255, 255, 1);
position: relative;
.sider-box1 {
margin-top: 21px;
margin-left: 22px;
.header {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.title-box {
margin-top: 15px;
.title {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.title-input {
margin-top: 15px;
}
}
.description-box {
margin-top: 24px;
.title {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.description-input {
margin-top: 12px;
height: 200px;
}
}
}
.sider-box2 {
margin-top: 24px;
margin-left: 22px;
.header {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.template-box {
margin-top: 19px;
height: 120px;
display: flex;
gap: 16px;
.template {
width: 230px;
height: 120px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
position: relative;
cursor: pointer;
.active-icon {
width: 24px;
height: 24px;
position: absolute;
top: 0;
right: 0;
z-index: 99;
img {
width: 100%;
height: 100%;
}
}
.selected-icon {
width: 8px;
height: 6px;
position: absolute;
top: -4px;
right: 3px;
z-index: 100;
img {
width: 8px;
height: 6px;
}
}
.header {
display: flex;
justify-content: space-between;
height: 50px;
.title {
height: 24px;
// color: rgba(59, 65, 75, 1);
color: #333;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
margin-left: 15px;
margin-top: 16px;
}
.icon {
margin-top: 15px;
margin-right: 16px;
width: 30px;
height: 30px;
border-radius: 15px;
background: rgba(231, 243, 255, 1);
img {
width: 17px;
height: 14px;
margin-top: 8px;
margin-left: 7px;
}
}
}
.content {
margin: 0 auto;
width: 200px;
height: 48px;
margin-top: 10px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.tempActive {
border: 1px solid rgba(5, 95, 194, 1);
background: rgba(246, 250, 255, 1);
}
}
.tips {
margin-top: 19px;
height: 22px;
display: flex;
.tips-icon {
width: 14px;
height: 16px;
margin-top: 3px;
img {
width: 100%;
height: 100%;
}
}
.tips-text {
margin-left: 8px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
}
.submit-btn {
position: absolute;
left: 22px;
bottom: 13px;
width: 476px;
height: 36px;
border-radius: 4px;
background: rgba(5, 95, 194, 1);
display: flex;
justify-content: center;
.submit-icon {
/* AI-logo */
width: 21px;
height: 15px;
margin-top: 10px;
img {
width: 100%;
height: 100%;
}
}
.submit-text {
height: 24px;
margin-top: 5px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-left: 8px;
}
}
}
.content-box {
flex: 1;
background: #f7f8f9;
}
}
}
:deep(.el-input__wrapper) {
background: #f7f8f9;
}
:deep(.el-input__inner::placeholder) {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
:deep(.el-input__inner) {
color: #333;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
:deep(.el-textarea__inner) {
background: #f7f8f9;
}
:deep(.el-textarea__inner) {
color: #333;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
:deep(.el-textarea__inner::placeholder) {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论