Skip to content

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

update

上级 65e0e1ac
隐藏空白字符变更
内嵌 并排
正在显示 包含 1858 行增加 和 1150 行删除
src/App.vue
浏览文件 @ 13b5b9ff
...@@ -4,8 +4,15 @@ ...@@ -4,8 +4,15 @@
<el-header> <el-header>
<nav class="navbar"> <nav class="navbar">
<div class="nav-brand"> <div class="nav-brand">
<el-icon class="brand-icon"><Monitor /></el-icon> <div class="brand-icon">
<span class="brand-text">某方向风险监测预警系统</span> <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>
<div class="nav-menu"> <div class="nav-menu">
<el-dropdown @command="handleHomeCommand" class="home-dropdown"> <el-dropdown @command="handleHomeCommand" class="home-dropdown">
...@@ -42,9 +49,13 @@ ...@@ -42,9 +49,13 @@
</div> </div>
</div> </div>
<div class="user-info"> <div class="user-info">
<el-icon><Message /></el-icon> <div class="email">
<el-icon><User /></el-icon> <img src="@/assets/icons/header-icon.png" alt="" />
<span>管理员</span> </div>
<div class="avator">
<img src="@/assets/icons/header-avator.png" alt="" />
</div>
<span class="user">管理员</span>
</div> </div>
</nav> </nav>
</el-header> </el-header>
...@@ -90,20 +101,18 @@ body { ...@@ -90,20 +101,18 @@ body {
} }
</style> </style>
<style scoped> <style lang="scss" scoped>
#app { #app {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
overflow-y: hidden; // overflow-y: hidden;
} }
/* 确保Element Plus容器组件占满宽度 */ /* 确保Element Plus容器组件占满宽度 */
.el-container { .el-container {
width: 100%; width: 100%;
/* min-height: 100vh; */
height: 100%; height: 100%;
margin-bottom: 20px;
} }
.navbar { .navbar {
...@@ -117,18 +126,29 @@ body { ...@@ -117,18 +126,29 @@ body {
border-bottom: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
box-sizing: border-box;
height: 96px;
} }
.main-container { .main-container {
/* 移除宽度限制，让子页面自己控制布局 */ /* 移除宽度限制，让子页面自己控制布局 */
width: 100%; width: 100%;
height: 984px;
} }
.nav-brand { .nav-brand {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
position: absolute; position: absolute;
left: 24px; left: 160px;
.brand-icon {
width: 48px;
height: 48px;
img {
width: 100%;
height: 100%;
}
}
} }
.brand-icon { .brand-icon {
...@@ -137,9 +157,21 @@ body { ...@@ -137,9 +157,21 @@ body {
} }
.brand-text { .brand-text {
font-size: 18px; .text-ch {
font-weight: 600; height: 42px;
color: #333; 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 { .nav-menu {
...@@ -188,24 +220,47 @@ body { ...@@ -188,24 +220,47 @@ body {
.user-info { .user-info {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 20px;
padding: 8px 12px; padding: 8px 12px;
background: #f3f4f6;
border-radius: 6px; border-radius: 6px;
color: #333; color: #333;
position: absolute; 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 { .el-header {
padding: 0; padding: 0;
height: 60px; height: 96px;
position: relative;
z-index: 1;
} }
.el-main { .el-main {
padding: 0; padding: 0;
height: calc(100vh - 60px); height: calc(100vh - 96px);
background-color: rgba(246, 251, 255, 1); background-color: rgba(246, 251, 255, 1);
overflow-y: auto;
} }
</style> </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 ...@@ -42,7 +42,19 @@ import MarketSingleCaseLayout from "@/views/marketAccessRestrictions/singleCaseL
import MarketSingleCaseOverview from "@/views/marketAccessRestrictions/singleCaseLayout/overview/index.vue"; import MarketSingleCaseOverview from "@/views/marketAccessRestrictions/singleCaseLayout/overview/index.vue";
import MarketSingleCaseDeepdig from "@/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue"; import MarketSingleCaseDeepdig from "@/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue";
// 智能写报
import WrittingAsstaint from '@/views/writtingAsstaint/index.vue'
const routes = [ const routes = [
// 智能写报
{
path: "/writtingAsstaint",
name: "writtingAsstaint",
component: WrittingAsstaint,
meta: {
title: "智能写报"
}
},
{ {
path: '/', path: '/',
......
src/views/bill/billHome/index.vue
浏览文件 @ 13b5b9ff
<template> <template>
<div class="home-wrapper"> <div class="home-wrapper">
<div class="home-header"> <div class="search-header" v-show="isShow">
<span>国家科技安全 </span>> <span>中美博弈概览 </span>> <div class="home-main-header-center">
<span>科技法案 </span> <el-input v-model="input" style="width: 680px; height: 100%" placeholder="搜索科技法案" />
</div> <div class="search">
<div class="home-main"> <div class="search-icon">
<div class="home-main-header"> <img src="./assets/images/search-icon.png" alt="" />
<div class="home-main-header-center">
<el-input v-model="input" style="width: 800px; height: 100%" placeholder="搜索科技法案" />
<div class="search">
<div class="search-icon">
<img src="./assets/images/search-icon.png" alt="" />
</div>
<div class="search-text">搜索</div>
</div> </div>
<div class="search-text">搜索</div>
</div> </div>
<div class="home-main-header-footer"> </div>
<div class="home-main-header-footer-item"> <div class="home-main-header-btn-box">
<div class="item-top">3.8T</div> <div class="btn">
<div class="item-footer">数据量</div> <div class="btn-text">{{ "最新动态" }}</div>
</div> <div class="btn-icon">{{ ">" }}</div>
<div class="home-main-header-footer-item">
<div class="item-top">14433</div>
<div class="item-footer">科技动向</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">1986</div>
<div class="item-footer">提出法案</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">341</div>
<div class="item-footer">通过法案</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">285</div>
<div class="item-footer">分析报告</div>
</div>
</div> </div>
<div class="home-main-header-btn-box"> <div class="btn">
<div class="btn"> <div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-text">{{ "最新动态" }}</div> <div class="btn-icon">{{ ">" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn-text">{{ "统计概览" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
</div> </div>
<div class="btn">
<div class="btn-text">{{ "统计概览" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
</div>
</div>
<div class="home-box" :class="{ scrollHomeBox: isShow }" ref="containerRef">
<div class="home-header" v-show="!isShow">
<span>国家科技安全 </span>> <span>中美博弈概览 </span>>
<span>科技法案 </span>
</div> </div>
<DivideHeader class="divide1" :titleText="'最新动态'"></DivideHeader> <div class="home-main">
<div class="home-main-center"> <div class="home-main-header" v-show="!isShow">
<div class="center-top"> <div class="home-main-header-center">
<div class="box1"> <el-input v-model="input" style="width: 800px; height: 100%" placeholder="搜索科技法案" />
<div class="box1-left" @click="handleSwithCurBill('left')"> <div class="search">
<div class="icon"> <div class="search-icon">
<img src="./assets/images/box1-left.png" alt="" /> <img src="./assets/images/search-icon.png" alt="" />
</div> </div>
<div class="search-text">搜索</div>
</div> </div>
<div class="box1-right" @click="handleSwithCurBill('right')"> </div>
<div class="icon"> <div class="home-main-header-footer">
<img src="./assets/images/box1-right.png" alt="" /> <div class="home-main-header-footer-item">
</div> <div class="item-top">3.8T</div>
<div class="item-footer">数据量</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">14433</div>
<div class="item-footer">科技动向</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">1986</div>
<div class="item-footer">提出法案</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">341</div>
<div class="item-footer">通过法案</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">285</div>
<div class="item-footer">分析报告</div>
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div> </div>
<div class="box1-header"> <div class="btn">
<div class="box1-header-left"> <div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn-text">{{ "统计概览" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
</div>
</div>
<DivideHeader class="divide1" :titleText="'最新动态'"></DivideHeader>
<div class="home-main-center">
<div class="center-top">
<div class="box1">
<div class="box1-left" @click="handleSwithCurBill('left')">
<div class="icon"> <div class="icon">
<img src="./assets/images/box1-header-icon.png" alt="" /> <img src="./assets/images/box1-left.png" alt="" />
</div> </div>
<div class="title">{{ "热门法案" }}</div>
</div>
<div class="box1-header-right" @click="handleClickToDetail()">
{{ "查看详情 >" }}
</div> </div>
</div> <div class="box1-right" @click="handleSwithCurBill('right')">
<div class="box1-main"> <div class="icon">
<div class="box1-main-left"> <img src="./assets/images/box1-right.png" alt="" />
<div class="box1-main-left-title">
<!-- "H.R.1(119th)-大而美法案" -->
{{ curBill.billName }}
</div> </div>
<div class="box1-main-left-info"> </div>
<div <div class="box1-header">
class="info-box" <div class="box1-header-left">
:class="{ <div class="icon">
info1: item.status === 1, <img src="./assets/images/box1-header-icon.png" alt="" />
info2: item.status === 2,
info3: item.status === 3,
info4: item.status === 4
}"
v-for="(item, index) in curBill.hylyList"
:key="index"
>
{{ item }}
</div> </div>
<div class="title">{{ "热门法案" }}</div>
</div>
<div class="box1-header-right" @click="handleClickToDetail()">
{{ "查看详情 >" }}
</div> </div>
<div class="box1-main-left-info1"> </div>
<div class="info1-box"> <div class="box1-main">
<div class="icon"></div> <div class="box1-main-left">
<div class="info1-box-left">{{ "提案人：" }}</div> <div class="box1-main-left-title">
<div class="info1-box-right">{{ curBill.tarName }}</div> <!-- "H.R.1(119th)-大而美法案" -->
{{ curBill.billName }}
</div> </div>
<div class="info1-box"> <div class="box1-main-left-info">
<div class="icon"></div> <div
<div class="info1-box-left">{{ "提出时间：" }}</div> class="info-box"
<div class="info1-box-right"> :class="{
{{ curBill.introductionDate }} info1: item.status === 1,
info2: item.status === 2,
info3: item.status === 3,
info4: item.status === 4
}"
v-for="(item, index) in curBill.hylyList"
:key="index"
>
{{ item }}
</div> </div>
</div> </div>
</div> <div class="box1-main-left-info1">
<div class="box1-main-left-info2"> <div class="info1-box">
<div class="time-line" :style="{ height: 38 * 3 + 'px' }"></div> <div class="icon"></div>
<div class="info2-item" v-for="(item, index) in curBill.dyqkList" :key="index"> <div class="info1-box-left">{{ "提案人：" }}</div>
<div class="item-icon"> <div class="info1-box-right">{{ curBill.tarName }}</div>
<img src="./assets/images/info2-icon.png" alt="" />
</div> </div>
<div class="item-time" :class="{ itemTimeActive: item.status === 1 }"> <div class="info1-box">
{{ item.dysj }} <div class="icon"></div>
<div class="info1-box-left">{{ "提出时间：" }}</div>
<div class="info1-box-right">
{{ curBill.introductionDate }}
</div>
</div> </div>
<div class="item-title" :class="{ itemTitleActive: item.status === 1 }"> </div>
{{ item.dyms }} <div class="box1-main-left-info2">
<div class="time-line" :style="{ height: 38 * 3 + 'px' }"></div>
<div class="info2-item" v-for="(item, index) in curBill.dyqkList" :key="index">
<div class="item-icon">
<img src="./assets/images/info2-icon.png" alt="" />
</div>
<div class="item-time" :class="{ itemTimeActive: item.status === 1 }">
{{ item.dysj }}
</div>
<div class="item-title" :class="{ itemTitleActive: item.status === 1 }">
{{ item.dyms }}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="box1-main-right">
<div class="box1-main-right"> <img src="./assets/images/box1-main-right-img.png" alt="" />
<img src="./assets/images/box1-main-right-img.png" alt="" /> <div class="inner-box">
<div class="inner-box"> <div class="inner-box-header">
<div class="inner-box-header"> <div class="inner-box-title">
<div class="inner-box-title"> {{ "大而美法案涉险通过参议院表决，众议院将继续..." }}
{{ "大而美法案涉险通过参议院表决，众议院将继续..." }} </div>
<div class="inner-box-time">{{ "1小时前" }}</div>
</div>
<div class="inner-box-content">
{{
"三名美国共和党众议员(2025年7月21日)致函几家美国科技巨头公司的负责人，询问他们是否已经采取了充分的安全保障措施以有效解..."
}}
</div> </div>
<div class="inner-box-time">{{ "1小时前" }}</div>
</div>
<div class="inner-box-content">
{{
"三名美国共和党众议员(2025年7月21日)致函几家美国科技巨头公司的负责人，询问他们是否已经采取了充分的安全保障措施以有效解..."
}}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="box2">
<div class="box2"> <div class="box2-header">
<div class="box2-header"> <div class="icon">
<div class="icon"> <img src="./assets/images/box2-header-icon.png" alt="" />
<img src="./assets/images/box2-header-icon.png" alt="" /> </div>
</div> <div class="title">
<div class="title"> <div class="text">{{ "风险信号" }}</div>
<div class="text">{{ "风险信号" }}</div> <div class="num">{{ warningList.length }}</div>
<div class="num">{{ warningList.length }}</div>
</div>
<div class="more">{{ "更多 +" }}</div>
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div
class="item-left"
:class="{
itemLeftStatus1: item.status === '一般风险',
itemLeftStatus2: item.status === '重大风险'
}"
>
{{ item.status }}
</div> </div>
<div class="item-right"> <div class="more">{{ "更多 +" }}</div>
<div class="text"> </div>
{{ item.title }} <div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div
class="item-left"
:class="{
itemLeftStatus1: item.status === '一般风险',
itemLeftStatus2: item.status === '重大风险'
}"
>
{{ item.status }}
</div>
<div class="item-right">
<div class="text">
{{ item.title }}
</div>
<div class="time">{{ item.time }}</div>
</div> </div>
<div class="time">{{ item.time }}</div>
</div> </div>
</div> </div>
</div> <div class="box2-footer">
<div class="box2-footer"> <div class="icon">
<div class="icon"> <img src="./assets/images/box2-footer-icon.png" alt="" />
<img src="./assets/images/box2-footer-icon.png" alt="" /> </div>
<div class="text">{{ "风险处理" }}</div>
</div> </div>
<div class="text">{{ "风险处理" }}</div>
</div> </div>
</div> </div>
</div> <DivideHeader class="divide2" :titleText="'资讯要闻'"></DivideHeader>
<DivideHeader class="divide2" :titleText="'资讯要闻'"></DivideHeader> <div class="center-center">
<div class="center-center"> <div class="box3">
<div class="box3"> <div class="box3-header">
<div class="box3-header"> <div class="box3-header-left">
<div class="box3-header-left"> <div class="box3-header-icon">
<div class="box3-header-icon"> <img src="./assets/images/box3-header-icon.png" alt="" />
<img src="./assets/images/box3-header-icon.png" alt="" /> </div>
<div class="box3-header-title">{{ "新闻资讯" }}</div>
</div> </div>
<div class="box3-header-title">{{ "新闻资讯" }}</div>
</div> </div>
</div> <div class="box3-main">
<div class="box3-main"> <div class="box3-item" v-for="(news, index) in newsList" :key="index">
<div class="box3-item" v-for="(news, index) in newsList" :key="index"> <div class="left">
<div class="left"> <img :src="news.img" alt="" />
<img :src="news.img" alt="" /> </div>
</div> <div class="right">
<div class="right"> <div class="right-top">
<div class="right-top"> <div class="title">{{ news.title }}</div>
<div class="title">{{ news.title }}</div> <div class="time">{{ news.from }}</div>
<div class="time">{{ news.from }}</div> </div>
<div class="right-footer">{{ news.content }}</div>
</div> </div>
<div class="right-footer">{{ news.content }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="box4">
<div class="box4"> <div class="box4-header">
<div class="box4-header"> <div class="header-icon">
<div class="header-icon"> <img src="./assets/images/box4-header-icon.png" alt="" />
<img src="./assets/images/box4-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "社交媒体" }}</div>
</div>
<div class="box4-main">
<div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left">
<img :src="item.img" alt="" />
</div> </div>
<div class="right"> <div class="header-title">{{ "社交媒体" }}</div>
<div class="right-top"> </div>
<div class="name">{{ item.name }}</div> <div class="box4-main">
<div class="time">{{ item.time }}</div> <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left">
<img :src="item.img" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="name">{{ item.name }}</div>
<div class="time">{{ item.time }}</div>
</div>
<div class="content">{{ item.content }}</div>
</div> </div>
<div class="content">{{ item.content }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <DivideHeader class="divide3" :titleText="'统计概览'"></DivideHeader>
<DivideHeader class="divide3" :titleText="'统计概览'"></DivideHeader>
<div class="center-footer"> <div class="center-footer">
<div class="box5"> <div class="box5">
<div class="box5-header"> <div class="box5-header">
<div class="box5-header-left"> <div class="box5-header-left">
<div class="box5-header-icon"> <div class="box5-header-icon">
<img src="./assets/images/box5-header-icon.png" alt="" /> <img src="./assets/images/box5-header-icon.png" alt="" />
</div> </div>
<div class="box5-header-title">{{ "涉华法案数量" }}</div> <div class="box5-header-title">{{ "涉华法案数量" }}</div>
</div>
<div class="box5-header-right">
<div class="right-box">
<div class="icon1"></div>
<div class="text">{{ "提出法案" }}</div>
</div> </div>
<div class="right-box"> <div class="box5-header-right">
<div class="icon2"></div> <div class="right-box">
<div class="text">{{ "通过法案" }}</div> <div class="icon1"></div>
<div class="text">{{ "提出法案" }}</div>
</div>
<div class="right-box">
<div class="icon2"></div>
<div class="text">{{ "通过法案" }}</div>
</div>
</div> </div>
</div> </div>
<div class="box5-main" id="chart1"></div>
</div> </div>
<div class="box5-main" id="chart1"></div> <div class="box6">
</div> <div class="box6-header">
<div class="box6"> <div class="header-icon">
<div class="box6-header"> <img src="./assets/images/box6-header-icon.png" alt="" />
<div class="header-icon"> </div>
<img src="./assets/images/box6-header-icon.png" alt="" /> <div class="header-title">{{ "关键条款" }}</div>
</div> </div>
<div class="header-title">{{ "关键条款" }}</div> <div class="box6-main" id="wordCloudChart"></div>
</div> </div>
<div class="box6-main" id="wordCloudChart"></div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="home-main-footer">
<div class="home-main-footer"> <DivideHeader class="divide4" :titleText="'资源库'"></DivideHeader>
<DivideHeader class="divide4" :titleText="'资源库'"></DivideHeader> <div class="home-main-footer-header">
<div class="home-main-footer-header"> <div class="btn-wrapper">
<div class="btn-wrapper"> <div class="btn-box">
<div class="btn-box"> <div
<div class="btn"
class="btn" :class="{ btnActive: activeCate === cate.hylymc }"
:class="{ btnActive: activeCate === cate.hylymc }" v-for="(cate, index) in categoryList"
v-for="(cate, index) in categoryList" :key="index"
:key="index" @click="handleClickCate(cate)"
@click="handleClickCate(cate)" >
> {{ cate.hylymc }}
{{ cate.hylymc }} </div>
</div> </div>
</div> </div>
</div>
<div class="select-box"> <div class="select-box">
<el-select v-model="releaseTime" placeholder="选择发布时间" style="width: 120px"> <el-select v-model="releaseTime" placeholder="选择发布时间" style="width: 120px">
<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label" :value="item.value" /> <el-option
</el-select> v-for="item in releaseTimeList"
<!-- <el-select :key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<!-- <el-select
v-model="releaseTime" v-model="releaseTime"
placeholder="选择发布时间" placeholder="选择发布时间"
style="width: 120px" style="width: 120px"
...@@ -305,27 +340,34 @@ ...@@ -305,27 +340,34 @@
:value="item.value" :value="item.value"
/> />
</el-select> --> </el-select> -->
</div>
</div> </div>
</div> <div class="home-main-footer-main">
<div class="home-main-footer-main"> <div class="main-item" v-for="(bill, index) in curBillList" :key="index">
<div class="main-item" v-for="(bill, index) in curBillList" :key="index"> <div class="main-item-box1">
<div class="main-item-box1"> <img :src="bill.img" alt="" />
<img :src="bill.img" alt="" /> </div>
<div class="main-item-box2">
{{ bill.billName }}
</div>
<div class="main-item-box3">{{ bill.introductionDate }}</div>
</div>
</div>
<div class="home-main-footer-footer">
<div class="footer-left">
{{ `共${curBillList.length}项调查` }}
</div> </div>
<div class="main-item-box2"> <div class="footer-right">
{{ bill.billName }} <el-pagination background layout="prev, pager, next" :total="curBillList.length" />
</div> </div>
<div class="main-item-box3">{{ bill.introductionDate }}</div>
</div> </div>
</div> </div>
<div class="home-main-footer-footer"> </div>
<div class="footer-left"> <div class="ai-btn">
{{ `共${curBillList.length}项调查` }} <div class="icon">
</div> <img src="@/assets/icons/ai-icon.png" alt="" />
<div class="footer-right">
<el-pagination background layout="prev, pager, next" :total="curBillList.length" />
</div>
</div> </div>
<div class="text">智能问答</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -338,6 +380,8 @@ import router from "@/router/index"; ...@@ -338,6 +380,8 @@ import router from "@/router/index";
import { getHotBills, getBillsByType, getHylyList } from "@/api/home"; import { getHotBills, getBillsByType, getHylyList } from "@/api/home";
import DivideHeader from "@/components/DivideHeader.vue"; import DivideHeader from "@/components/DivideHeader.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
import headerIcon1 from "./assets/icons/header-icon1.png"; import headerIcon1 from "./assets/icons/header-icon1.png";
import headerIcon2 from "./assets/icons/header-icon2.png"; import headerIcon2 from "./assets/icons/header-icon2.png";
import headerIcon3 from "./assets/icons/header-icon3.png"; import headerIcon3 from "./assets/icons/header-icon3.png";
...@@ -370,9 +414,16 @@ import Message1 from "./assets/images/message-icon1.png"; ...@@ -370,9 +414,16 @@ import Message1 from "./assets/images/message-icon1.png";
import Message2 from "./assets/images/message-icon2.png"; import Message2 from "./assets/images/message-icon2.png";
import Message3 from "./assets/images/message-icon3.png"; import Message3 from "./assets/images/message-icon3.png";
const containerRef = ref(null);
const { isShow } = useContainerScroll(containerRef);
const billList = ref([]); const billList = ref([]);
const curBillListIndex = ref(0); const curBillListIndex = ref(0);
const handleHomeCommand = command => {
router.push(command);
};
const handleSwithCurBill = name => { const handleSwithCurBill = name => {
if (name === "left") { if (name === "left") {
if (curBillListIndex.value === 0) { if (curBillListIndex.value === 0) {
...@@ -858,1056 +909,1181 @@ onMounted(async () => { ...@@ -858,1056 +909,1181 @@ onMounted(async () => {
box-shadow: none; box-shadow: none;
} }
.home-wrapper { .home-wrapper {
.home-header { width: 100%;
height: 64px; height: calc(100vh - 96px);
color: #fff; position: relative;
font-family: Microsoft YaHei; overflow-y: hidden;
font-size: 20px; .ai-btn {
font-weight: 700; position: absolute;
line-height: 26px; top: 50%;
line-height: 64px; right: 46px;
background: url("./assets/images/header-bg.png"); cursor: pointer;
box-sizing: border-box; .icon {
padding-left: 160px; width: 96px;
height: 96px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: center;
}
} }
.home-main { .search-header {
width: 1600px; width: 100%;
margin: 0 auto; height: 144px;
margin-top: 48px; background: #fff;
background: url("./assets/images/background.png"); overflow: hidden;
background-size: 100% 100%; .home-main-header-center {
.home-main-header { margin-top: 20px;
display: flex; margin-left: 200px;
flex-direction: column; width: 800px;
align-items: center; height: 48px;
.home-main-header-center { border-radius: 10px;
width: 960px; box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
height: 48px; background: rgba(255, 255, 255, 1);
box-sizing: border-box;
padding: 1px;
position: relative;
.search {
position: absolute;
right: 1px;
top: 2px;
width: 120px;
height: 44px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); background: var(--color-main-active);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
padding: 1px;
position: relative;
.search {
position: absolute;
right: 1px;
top: 2px;
width: 120px;
height: 42px;
border-radius: 10px;
background: var(--color-main-active);
display: flex;
justify-content: center;
align-items: center;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.home-main-header-footer {
margin-top: 38px;
width: 960px;
height: 64px;
box-sizing: border-box;
padding: 0 108px;
display: flex; display: flex;
justify-content: space-between; justify-content: center;
.home-main-header-footer-item { align-items: center;
padding: 0 10px; .search-icon {
text-align: center; width: 18px;
.item-top { height: 18px;
height: 22px; img {
color: rgba(20, 89, 187, 1); width: 100%;
font-family: Microsoft YaHei; height: 100%;
font-size: 36px;
font-weight: 700;
line-height: 22px;
}
.item-footer {
margin-top: 10px;
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
} }
} }
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
} }
.home-main-header-btn-box { }
margin-top: 36px; .home-main-header-btn-box {
margin-top: 20px;
margin-left: 200px;
display: flex;
gap: 16px;
.btn {
display: flex; display: flex;
.btn { width: 140px;
display: flex; height: 36px;
width: 160px; border: 1px solid #aed6ff;
height: 48px; box-sizing: border-box;
border: 1px solid #aed6ff; border-radius: 18px;
box-sizing: border-box; justify-content: center;
border-radius: 24px; background: #e7f3ff;
justify-content: center; position: relative;
margin: 0 16px; cursor: pointer;
background: #e7f3ff; &:hover {
cursor: pointer; background: #cae3fc;
&:hover { }
background: #cae3fc; .btn-text {
} color: var(--color-main-active);
.btn-text { font-family: Microsoft YaHei;
color: var(--color-main-active); font-size: 20px;
font-family: Microsoft YaHei; font-weight: 400;
font-size: 20px; line-height: 36px;
font-weight: 400; margin-left: 5px;
line-height: 44px; }
margin-left: 5px; .btn-icon {
} height: 20px;
.btn-icon { line-height: 20px;
margin-left: 20px; position: absolute;
color: var(--color-main-active); top: 6px;
font-family: Microsoft YaHei; right: 8px;
font-size: 20px; color: var(--color-main-active);
font-weight: 400; font-family: Microsoft YaHei;
line-height: 44px; font-size: 20px;
} font-weight: 400;
} }
} }
} }
.divide1 { }
margin-top: 64px; .scrollHomeBox {
margin-bottom: 36px; width: 100%;
height: calc(100% - 144px);
overflow-y: auto;
}
.home-box {
width: 100%;
height: 100%;
overflow-y: auto;
.home-header {
height: 64px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
line-height: 64px;
background: url("./assets/images/header-bg.png");
box-sizing: border-box;
padding-left: 160px;
} }
.home-main-center { .home-main {
margin-top: 34px; width: 1600px;
.center-top { margin: 0 auto;
height: 450px; margin-top: 48px;
background: url("./assets/images/background.png");
background-size: 100% 100%;
.home-main-header {
display: flex; display: flex;
gap: 20px; flex-direction: column;
.box1 { align-items: center;
width: 1064px; .home-main-header-center {
height: 450px; width: 960px;
height: 48px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: #fff; background: rgba(255, 255, 255, 1);
box-sizing: border-box; box-sizing: border-box;
padding: 1px;
position: relative; position: relative;
.box1-left { .search {
position: absolute; position: absolute;
left: 0; right: 1px;
top: 200px; top: 2px;
width: 24px; width: 120px;
height: 48px; height: 44px;
background: #e7f1ff; border-radius: 10px;
background: var(--color-main-active);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; .search-icon {
.icon { width: 18px;
width: 11px;
height: 18px; height: 18px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
} }
.box1-right { }
position: absolute; .home-main-header-footer {
right: 0; margin-top: 38px;
top: 200px; width: 960px;
width: 24px; height: 64px;
height: 48px; box-sizing: border-box;
background: #e7f1ff; padding: 0 108px;
display: flex;
justify-content: space-between;
.home-main-header-footer-item {
padding: 0 10px;
text-align: center;
.item-top {
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 36px;
font-weight: 700;
line-height: 22px;
}
.item-footer {
margin-top: 10px;
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
}
.home-main-header-btn-box {
margin-top: 36px;
display: flex;
.btn {
display: flex; display: flex;
width: 160px;
height: 48px;
border: 1px solid #aed6ff;
box-sizing: border-box;
border-radius: 24px;
justify-content: center; justify-content: center;
align-items: center; margin: 0 16px;
background: #e7f3ff;
cursor: pointer; cursor: pointer;
.icon { &:hover {
width: 11px; background: #cae3fc;
height: 18px; }
img { .btn-text {
width: 100%; color: var(--color-main-active);
height: 100%; font-family: Microsoft YaHei;
} font-size: 20px;
font-weight: 400;
line-height: 44px;
margin-left: 5px;
}
.btn-icon {
margin-left: 20px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
line-height: 44px;
} }
} }
.box1-header { }
height: 48px; }
border-bottom: 1px solid rgba(240, 242, 244, 1); .divide1 {
display: flex; margin-top: 64px;
justify-content: space-between; margin-bottom: 36px;
}
.home-main-center {
margin-top: 34px;
.center-top {
height: 450px;
display: flex;
gap: 20px;
.box1 {
width: 1064px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: #fff;
box-sizing: border-box; box-sizing: border-box;
padding: 0 40px 0 30px; position: relative;
.box1-header-left { .box1-left {
position: absolute;
left: 0;
top: 200px;
width: 24px;
height: 48px;
background: #e7f1ff;
display: flex; display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.icon { .icon {
width: 18px; width: 11px;
height: 18px; height: 18px;
margin-top: 19px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.title {
width: 112px;
height: 48px;
background: var(--color-main-active);
margin-left: 18px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 48px;
text-align: center;
}
} }
.box1-header-right { .box1-right {
margin-top: 19px; position: absolute;
height: 16px; right: 0;
color: rgba(20, 89, 187, 1); top: 200px;
font-family: Microsoft YaHei; width: 24px;
font-size: 16px; height: 48px;
font-weight: 400; background: #e7f1ff;
line-height: 16px; display: flex;
justify-content: center;
align-items: center;
cursor: pointer; cursor: pointer;
.icon {
width: 11px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
} }
} .box1-header {
.box1-main { height: 48px;
display: flex; border-bottom: 1px solid rgba(240, 242, 244, 1);
height: 354px; display: flex;
margin-top: 22px; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
padding-left: 31px; padding: 0 40px 0 30px;
.box1-main-left { .box1-header-left {
margin-left: 39px; display: flex;
// flex: 1; .icon {
width: 484px; width: 18px;
.box1-main-left-title { height: 18px;
height: 22px; margin-top: 19px;
img {
width: 100%;
height: 100%;
}
}
.title {
width: 112px;
height: 48px;
background: var(--color-main-active);
margin-left: 18px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 48px;
text-align: center;
}
}
.box1-header-right {
margin-top: 19px;
height: 16px;
color: rgba(20, 89, 187, 1); color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 16px;
font-weight: 700; font-weight: 400;
line-height: 22px; line-height: 16px;
cursor: pointer;
} }
.box1-main-left-info { }
margin-top: 17px; .box1-main {
display: flex; display: flex;
.info-box { height: 354px;
height: 30px; margin-top: 22px;
width: 80px; box-sizing: border-box;
text-align: center; padding-left: 31px;
overflow: hidden; .box1-main-left {
padding: 0 8px; margin-left: 39px;
box-sizing: border-box; // flex: 1;
border: 1px solid rgba(186, 224, 255, 1); width: 484px;
border-radius: 4px; .box1-main-left-title {
background: rgba(230, 244, 255, 1); height: 22px;
color: rgba(22, 119, 255, 1); color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 20px;
font-weight: 400; font-weight: 700;
line-height: 30px; line-height: 22px;
margin-right: 8px;
}
.info1 {
border: 1px solid rgba(135, 232, 222, 1);
background: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
.info2 {
border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.info3 {
border: 1px solid rgba(255, 229, 143, 1);
background: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.info4 {
border: 1px solid rgba(255, 163, 158, 1);
background: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
} }
} .box1-main-left-info {
.box1-main-left-info1 { margin-top: 17px;
margin-top: 25px;
margin-left: 4px;
.info1-box {
display: flex; display: flex;
.icon { .info-box {
margin-top: 15px;
width: 4px;
height: 4px;
border-radius: 2px;
background: rgba(132, 136, 142, 1);
}
.info1-box-left {
margin-left: 18px;
width: 100px;
height: 30px; height: 30px;
color: rgba(95, 101, 108, 1); width: 80px;
text-align: center;
overflow: hidden;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(186, 224, 255, 1);
border-radius: 4px;
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 30px;
margin-right: 8px;
} }
.info1-box-right { .info1 {
margin-left: 64px; border: 1px solid rgba(135, 232, 222, 1);
height: 30px; background: rgba(230, 255, 251, 1);
color: rgba(95, 101, 108, 1); color: rgba(19, 168, 168, 1);
font-family: Microsoft YaHei; }
font-size: 16px; .info2 {
font-weight: 400; border: 1px solid rgba(186, 224, 255, 1);
line-height: 30px; background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.info3 {
border: 1px solid rgba(255, 229, 143, 1);
background: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.info4 {
border: 1px solid rgba(255, 163, 158, 1);
background: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
} }
} }
} .box1-main-left-info1 {
.box1-main-left-info2 { margin-top: 25px;
margin-top: 21px; margin-left: 4px;
height: 200px; .info1-box {
width: 400px; display: flex;
position: relative; .icon {
.time-line { margin-top: 15px;
position: absolute; width: 4px;
z-index: 0; height: 4px;
top: 15px; border-radius: 2px;
left: 4px; background: rgba(132, 136, 142, 1);
width: 2px; }
background: #e6e7e8; .info1-box-left {
margin-left: 18px;
width: 100px;
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
.info1-box-right {
margin-left: 64px;
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
} }
.info2-item { .box1-main-left-info2 {
margin-left: 1px; margin-top: 21px;
margin-bottom: 8px; height: 200px;
height: 30px; width: 400px;
display: flex; position: relative;
// background: orange; .time-line {
.item-icon { position: absolute;
margin-top: 2px; z-index: 0;
width: 10px; top: 15px;
height: 10px; left: 4px;
position: relative; width: 2px;
z-index: 1; background: #e6e7e8;
img { }
.info2-item {
margin-left: 1px;
margin-bottom: 8px;
height: 30px;
display: flex;
// background: orange;
.item-icon {
margin-top: 2px;
width: 10px; width: 10px;
height: 10px; height: 10px;
position: relative;
z-index: 1;
img {
width: 10px;
height: 10px;
}
}
.itemTimeActive {
color: rgba(20, 89, 187, 1) !important;
}
.itemTitleActive {
font-weight: 700 !important;
color: rgba(20, 89, 187, 1) !important;
}
.item-time {
margin-left: 15px;
width: 147px;
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 30px;
}
.item-title {
margin-left: 10px;
width: 295px;
height: 30px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
} }
} }
.itemTimeActive { }
color: rgba(20, 89, 187, 1) !important; }
} .box1-main-right {
.itemTitleActive { height: 354px;
font-weight: 700 !important; width: 458px;
color: rgba(20, 89, 187, 1) !important; border-radius: 4px;
} overflow: hidden;
.item-time { position: relative;
margin-left: 15px; img {
width: 147px; width: 100%;
height: 100%;
}
.inner-box {
width: 330px;
height: 93px;
background: rgba(10, 18, 30, 0.75);
position: absolute;
left: 0;
bottom: 0;
box-sizing: border-box;
padding: 9px 10px 12px 10px;
.inner-box-header {
height: 30px; height: 30px;
color: rgba(95, 101, 108, 1); display: flex;
font-family: Microsoft YaHei; .inner-box-title {
font-size: 16px; width: 270px;
font-weight: 700; color: rgba(255, 255, 255, 1);
line-height: 30px; font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inner-box-time {
width: 60px;
height: 30px;
color: rgba(255, 255, 255, 0.65);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
.item-title { .inner-box-content {
margin-left: 10px; width: 330px;
width: 295px; height: 40px;
height: 30px; overflow: hidden;
color: rgba(132, 136, 142, 1); color: rgba(255, 255, 255, 0.8);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 20px;
} }
} }
} }
} }
.box1-main-right { }
height: 354px; .box2 {
width: 458px; flex: 1;
border-radius: 4px; height: 450px;
overflow: hidden; box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
position: relative; background: rgba(255, 255, 255, 1);
img { position: relative;
width: 100%; .box2-header {
height: 100%; height: 48px;
display: flex;
box-sizing: border-box;
padding-right: 20px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon {
width: 24px;
height: 22px;
margin-left: 18px;
margin-top: 18px;
img {
width: 100%;
height: 100%;
}
}
.title {
margin-left: 18px;
width: 148px;
height: 48px;
background: rgba(206, 79, 81, 1);
display: flex;
.text {
margin-left: 16px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 48px;
}
.num {
width: 24px;
height: 20px;
text-align: center;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 12px;
margin-left: 10px;
margin-top: 15px;
// border: 1px solid rgba(255, 255, 255, 1);
border-radius: 100px;
background: rgba(255, 255, 255, 0.3);
}
} }
.inner-box { .more {
width: 330px; margin-top: 19px;
height: 93px; margin-left: 224px;
background: rgba(10, 18, 30, 0.75); color: rgba(20, 89, 187, 1);
position: absolute; font-family: Microsoft YaHei;
left: 0; font-size: 16px;
bottom: 0; font-weight: 400;
box-sizing: border-box; line-height: 16px;
padding: 9px 10px 12px 10px; }
.inner-box-header { }
height: 30px; .box2-main {
height: 330px;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
padding-right: 20px;
.box2-main-item {
margin-left: 23px;
height: 47px;
width: 464px;
display: flex;
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.item-left {
margin-top: 4px;
margin-left: 2px;
width: 40px;
height: 40px;
border-radius: 20px;
background: rgba(255, 241, 240);
color: rgba(245, 34, 45, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
box-sizing: border-box;
padding: 6px 4px;
text-align: center;
}
.item-right {
margin-left: 13px;
width: 408px;
height: 47px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
.inner-box-title { .text {
width: 270px; width: 348px;
color: rgba(255, 255, 255, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 400;
line-height: 30px; line-height: 47px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.inner-box-time { .time {
width: 60px; margin-left: 10px;
height: 30px; line-height: 47px;
color: rgba(255, 255, 255, 0.65); color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
.inner-box-content {
width: 330px;
height: 40px;
overflow: hidden;
color: rgba(255, 255, 255, 0.8);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
}
}
}
}
.box2 {
flex: 1;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.box2-header {
height: 48px;
display: flex;
box-sizing: border-box;
padding-right: 20px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon {
width: 24px;
height: 22px;
margin-left: 18px;
margin-top: 18px;
img {
width: 100%;
height: 100%;
} }
} }
.title { .box2-footer {
margin-left: 18px; position: absolute;
width: 148px; left: 40px;
height: 48px; bottom: 20px;
background: rgba(206, 79, 81, 1); width: 430px;
height: 42px;
display: flex; display: flex;
.text { flex-direction: row;
margin-left: 16px; justify-content: center;
height: 22px; align-items: center;
color: #fff; border-radius: 6px;
font-family: Microsoft YaHei; background: rgba(22, 119, 255, 1);
font-size: 20px; cursor: pointer;
font-weight: 700; .icon {
line-height: 48px; width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
} }
.num { .text {
width: 24px; margin-left: 8px;
height: 20px;
text-align: center;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 12px; font-size: 14px;
margin-left: 10px; font-weight: 400;
margin-top: 15px; line-height: 22px;
// border: 1px solid rgba(255, 255, 255, 1);
border-radius: 100px;
background: rgba(255, 255, 255, 0.3);
} }
} }
.more {
margin-top: 19px;
margin-left: 224px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 16px;
}
} }
.box2-main { }
height: 330px; .divide2 {
overflow-y: auto; margin-top: 68px;
box-sizing: border-box; margin-bottom: 36px;
padding-right: 20px; }
.box2-main-item { .center-center {
margin-left: 23px; margin-top: 21px;
height: 47px; height: 450px;
width: 464px; display: flex;
.box3 {
width: 792px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box3-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex; display: flex;
.itemLeftStatus1 { justify-content: space-between;
color: rgba(82, 196, 26, 1) !important; padding: 0 20px;
background: rgba(246, 255, 237, 1) !important; .box3-header-left {
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.item-left {
margin-top: 4px;
margin-left: 2px;
width: 40px;
height: 40px;
border-radius: 20px;
background: rgba(255, 241, 240);
color: rgba(245, 34, 45, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
box-sizing: border-box;
padding: 6px 4px;
text-align: center;
}
.item-right {
margin-left: 13px;
width: 408px;
height: 47px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
.text { .box3-header-icon {
width: 348px; margin-top: 16px;
color: rgba(59, 65, 75, 1); width: 19px;
font-family: Microsoft YaHei; height: 19px;
font-size: 16px; img {
font-weight: 400; width: 100%;
line-height: 47px; height: 100%;
}
} }
.time { .box3-header-title {
margin-left: 10px; margin-top: 16px;
line-height: 47px; margin-left: 19px;
color: rgba(132, 136, 142, 1); height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 20px;
font-weight: 400; font-weight: 700;
line-height: 22px;
} }
} }
} }
} .box3-main {
.box2-footer { height: 402px;
position: absolute; overflow-y: auto;
left: 40px; overflow-x: hidden;
bottom: 20px; padding-top: 6px;
width: 430px; .box3-item {
height: 42px; display: flex;
display: flex; height: 77px;
flex-direction: row; width: 749px;
justify-content: center; margin-left: 21px;
align-items: center; border-bottom: 1px solid rgba(240, 242, 244, 1);
border-radius: 6px; .left {
background: rgba(22, 119, 255, 1); width: 72px;
cursor: pointer; height: 48px;
.icon { margin-top: 15px;
width: 16px; img {
height: 16px; width: 100%;
img { height: 100%;
width: 100%; }
height: 100%; }
.right {
width: 657px;
margin-left: 20px;
.right-top {
width: 657px;
display: flex;
justify-content: space-between;
.title {
margin-top: 13px;
width: 520px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
flex: 1;
text-align: right;
height: 22px;
margin-top: 19px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
.right-footer {
width: 657px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
} }
} }
.text {
margin-left: 8px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
} }
} .box4 {
} margin-left: 20px;
.divide2 { width: 792px;
margin-top: 68px; height: 450px;
margin-bottom: 36px; box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
} background: rgba(255, 255, 255, 1);
.center-center { .box4-header {
margin-top: 21px; width: 792px;
height: 450px; height: 48px;
display: flex; border-bottom: 1px solid rgba(240, 242, 244, 1);
.box3 {
width: 792px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box3-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 20px;
.box3-header-left {
display: flex; display: flex;
.box3-header-icon { box-sizing: border-box;
margin-top: 16px; padding-left: 22px;
width: 19px; .header-icon {
height: 19px; margin-top: 15px;
width: 20px;
height: 20px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.box3-header-title { .header-title {
margin-top: 16px; margin-top: 16px;
margin-left: 19px; margin-left: 18px;
height: 22px; height: 22px;
color: rgba(20, 89, 187, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 22px;
} }
} }
} .box4-main {
.box3-main { height: 402px;
height: 402px; overflow-y: auto;
overflow-y: auto; box-sizing: border-box;
overflow-x: hidden; padding-top: 8px;
padding-top: 6px; .box4-main-item {
.box3-item { margin-top: 16px;
display: flex; display: flex;
height: 77px; margin-left: 21px;
width: 749px; .left {
margin-left: 21px; margin-top: 5px;
border-bottom: 1px solid rgba(240, 242, 244, 1); width: 36px;
.left { height: 36px;
width: 72px; img {
height: 48px; width: 100%;
margin-top: 15px; height: 100%;
img { }
width: 100%;
height: 100%;
} }
} .right {
.right { margin-left: 10px;
width: 657px; width: 690px;
margin-left: 20px; box-sizing: border-box;
.right-top { border: 1px solid rgba(231, 243, 255, 1);
width: 657px; background: rgba(246, 250, 255, 1);
display: flex; padding: 10px 15px;
justify-content: space-between; .right-top {
.title { display: flex;
margin-top: 13px; justify-content: space-between;
width: 520px; .name {
height: 24px; height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.time {
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
.content {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 700;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
flex: 1;
text-align: right;
height: 22px;
margin-top: 19px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 22px; line-height: 24px;
} }
} }
.right-footer {
width: 657px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
} }
} }
} }
.box4 { .divide3 {
margin-left: 20px; margin-top: 64px;
width: 792px; margin-bottom: 36px;
}
.center-footer {
margin-top: 21px;
height: 450px; height: 450px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2); display: flex;
background: rgba(255, 255, 255, 1); .box5 {
.box4-header { width: 1059px;
width: 792px; height: 450px;
height: 48px; box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
border-bottom: 1px solid rgba(240, 242, 244, 1); background: rgba(255, 255, 255, 1);
display: flex; .box5-header {
box-sizing: border-box; height: 53px;
padding-left: 22px; border-bottom: 1px solid rgba(240, 242, 244, 1);
.header-icon { margin: 0 auto;
margin-top: 15px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 16px;
margin-left: 18px;
height: 22px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 22px;
}
}
.box4-main {
height: 402px;
overflow-y: auto;
box-sizing: border-box;
padding-top: 8px;
.box4-main-item {
margin-top: 16px;
display: flex; display: flex;
margin-left: 21px; justify-content: space-between;
.left { padding: 0 20px;
margin-top: 5px; .box5-header-left {
width: 36px; display: flex;
height: 36px; .box5-header-icon {
img { margin-top: 16px;
width: 100%; width: 19px;
height: 100%; height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box5-header-title {
margin-top: 16px;
margin-left: 19px;
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 22px;
} }
} }
.right { .box5-header-right {
margin-left: 10px; display: flex;
width: 690px; justify-content: flex-end;
box-sizing: border-box; width: 178px;
border: 1px solid rgba(231, 243, 255, 1); height: 22px;
background: rgba(246, 250, 255, 1); .right-box {
padding: 10px 15px;
.right-top {
display: flex; display: flex;
justify-content: space-between; margin-top: 16px;
.name { width: 89px;
height: 24px; height: 22px;
color: rgba(59, 65, 75, 1); justify-content: flex-end;
font-family: Microsoft YaHei; .icon1 {
font-size: 16px; margin-top: 5px;
font-weight: 700; width: 12px;
line-height: 24px; height: 12px;
border-radius: 6px;
background: rgba(20, 89, 187, 1);
} }
.time { .icon2 {
height: 30px; margin-top: 5px;
width: 12px;
height: 12px;
border-radius: 6px;
background: rgba(250, 140, 22, 1);
}
.text {
margin-left: 5px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 22px;
} }
} }
.content {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
} }
} }
.box5-main {
height: 397px;
}
} }
} .box6 {
} margin-left: 20px;
.divide3 { width: 521px;
margin-top: 64px; height: 450px;
margin-bottom: 36px; box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
} background: rgba(255, 255, 255, 1);
.center-footer { .box6-header {
margin-top: 21px; width: 521px;
height: 450px; height: 48px;
display: flex; border-bottom: 1px solid rgba(240, 242, 244, 1);
.box5 {
width: 1059px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
.box5-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 20px;
.box5-header-left {
display: flex; display: flex;
.box5-header-icon { box-sizing: border-box;
margin-top: 16px; padding-left: 22px;
width: 19px; .header-icon {
height: 19px; margin-top: 15px;
width: 20px;
height: 20px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.box5-header-title { .header-title {
margin-top: 16px; margin-top: 16px;
margin-left: 19px; margin-left: 18px;
height: 22px; height: 22px;
color: rgba(20, 89, 187, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 22px;
} }
} }
.box5-header-right { .box6-main {
display: flex; width: 452px;
justify-content: flex-end; height: 402px;
width: 178px;
height: 22px;
.right-box {
display: flex;
margin-top: 16px;
width: 89px;
height: 22px;
justify-content: flex-end;
.icon1 {
margin-top: 5px;
width: 12px;
height: 12px;
border-radius: 6px;
background: rgba(20, 89, 187, 1);
}
.icon2 {
margin-top: 5px;
width: 12px;
height: 12px;
border-radius: 6px;
background: rgba(250, 140, 22, 1);
}
.text {
margin-left: 5px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
} }
} }
.box5-main {
height: 397px;
}
} }
.box6 { }
margin-left: 20px; }
width: 521px; .home-main-footer {
height: 450px; width: 100%;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); height: 1000px;
background: rgba(255, 255, 255, 1); background: rgba(248, 249, 250, 1);
.box6-header { margin-bottom: 20px;
width: 521px; overflow: hidden;
height: 48px; margin-top: 36px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
.divide4 {
margin: 0 auto;
margin-top: 52px;
margin-bottom: 36px;
}
.home-main-footer-header {
width: 1600px;
margin: 0 auto;
margin-top: 37px;
margin-bottom: 36px;
// width: 1600px;
height: 62px;
// background: orange;
display: flex;
justify-content: space-between;
.btn-wrapper {
width: 1300px;
overflow-x: auto;
.btn-box {
display: flex; display: flex;
box-sizing: border-box; // justify-content: space-between;
padding-left: 22px; max-width: 2000px;
.header-icon { .btn {
margin-top: 15px; max-width: 100px;
width: 20px; min-width: 80px;
height: 20px; height: 42px;
img { margin: 0 5px;
width: 100%; overflow: hidden;
height: 100%; color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 42px;
text-align: center;
border-radius: 21px;
background: rgba(20, 89, 187, 0);
padding: 0 16px;
cursor: pointer;
&:hover {
background: rgba(20, 89, 187, 0.1);
} }
} }
.header-title { .btnActive {
margin-top: 16px; border-radius: 21px;
margin-left: 18px; background: rgba(20, 89, 187, 1);
height: 22px; color: #fff;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 22px; &:hover {
color: #fff;
background: rgba(20, 89, 187, 1);
}
} }
} }
.box6-main { }
width: 452px; .select-box {
height: 402px; height: 42px;
} box-sizing: border-box;
padding: 5px 0;
} }
} }
} .home-main-footer-main {
} width: 1600px;
.home-main-footer { margin: 0 auto;
width: 100%; // background: orange;
height: 1000px; display: flex;
background: rgba(248, 249, 250, 1); flex-wrap: wrap;
margin-bottom: 20px; padding: 5px 0px;
overflow: hidden; padding-left: 5px;
margin-top: 36px; overflow: hidden;
height: 700px;
.main-item {
width: 240px;
height: 320px;
border-radius: 4px;
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 44%, rgba(255, 255, 255, 0) 100%);
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: #fff;
margin-bottom: 24px;
margin-right: 25px;
.main-item-box1 {
margin-top: 20px;
margin-left: 45px;
width: 150px;
height: 200px;
box-sizing: border-box;
border: 1px solid rgba(240, 242, 244, 1);
.divide4 { img {
margin: 0 auto; width: 100%;
margin-top: 52px; height: 100%;
margin-bottom: 36px;
}
.home-main-footer-header {
width: 1600px;
margin: 0 auto;
margin-top: 37px;
margin-bottom: 36px;
// width: 1600px;
height: 62px;
// background: orange;
display: flex;
justify-content: space-between;
.btn-wrapper {
width: 1300px;
overflow-x: auto;
.btn-box {
display: flex;
// justify-content: space-between;
max-width: 2000px;
.btn {
max-width: 100px;
min-width: 80px;
height: 42px;
margin: 0 5px;
overflow: hidden;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 42px;
text-align: center;
border-radius: 21px;
background: rgba(20, 89, 187, 0);
padding: 0 16px;
cursor: pointer;
&:hover {
background: rgba(20, 89, 187, 0.1);
} }
} }
.btnActive { .main-item-box2 {
border-radius: 21px; margin-top: 26px;
background: rgba(20, 89, 187, 1); text-align: center;
color: #fff; height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700; font-weight: 700;
&:hover { line-height: 30px;
color: #fff;
background: rgba(20, 89, 187, 1);
}
} }
} .main-item-box3 {
} text-align: center;
.select-box { height: 30px;
height: 42px; color: rgba(132, 136, 142, 1);
box-sizing: border-box; font-family: Microsoft YaHei;
padding: 5px 0; font-size: 16px;
} font-weight: 400;
} line-height: 30px;
.home-main-footer-main {
width: 1600px;
margin: 0 auto;
// background: orange;
display: flex;
flex-wrap: wrap;
padding: 5px 0px;
padding-left: 5px;
overflow: hidden;
height: 700px;
.main-item {
width: 240px;
height: 320px;
border-radius: 4px;
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 44%, rgba(255, 255, 255, 0) 100%);
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: #fff;
margin-bottom: 24px;
margin-right: 25px;
.main-item-box1 {
margin-top: 20px;
margin-left: 45px;
width: 150px;
height: 200px;
box-sizing: border-box;
border: 1px solid rgba(240, 242, 244, 1);
img {
width: 100%;
height: 100%;
} }
} }
.main-item-box2 { }
margin-top: 26px; .home-main-footer-footer {
text-align: center; width: 1600px;
height: 30px; margin: 0 auto;
height: 32px;
margin-top: 30px;
display: flex;
justify-content: space-between;
.footer-left {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 700;
line-height: 30px;
}
.main-item-box3 {
text-align: center;
height: 30px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 32px;
} }
} }
} }
.home-main-footer-footer {
width: 1600px;
margin: 0 auto;
height: 32px;
margin-top: 30px;
display: flex;
justify-content: space-between;
.footer-left {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 32px;
}
}
} }
} }
</style> </style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ 13b5b9ff
...@@ -742,10 +742,6 @@ onMounted(async () => { ...@@ -742,10 +742,6 @@ onMounted(async () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
// position: sticky;
// left: 0;
// top: 0;
// z-index: 9999;
.home-main-header-top { .home-main-header-top {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
...@@ -763,7 +759,7 @@ onMounted(async () => { ...@@ -763,7 +759,7 @@ onMounted(async () => {
padding-left: 160px; padding-left: 160px;
} }
.home-main-header-center { .home-main-header-center {
margin-top: 13px; margin-top: 48px;
width: 960px; width: 960px;
height: 48px; height: 48px;
border-radius: 4px; border-radius: 4px;
...@@ -777,12 +773,13 @@ onMounted(async () => { ...@@ -777,12 +773,13 @@ onMounted(async () => {
right: 1px; right: 1px;
top: 1px; top: 1px;
width: 120px; width: 120px;
height: 42px; height: 44px;
border-radius: 4px; border-radius: 4px;
background: rgba(22, 119, 255, 1); background: rgba(22, 119, 255, 1);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer;
.search-icon { .search-icon {
width: 18px; width: 18px;
height: 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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论