Skip to content

R
risk-monitor
提交 3d0729e4 authored 作者: 李智林's avatar 李智林
浏览文件
操作

新概览页

上级 7fdbd598
隐藏空白字符变更
内嵌 并排
正在显示 包含 287 行增加 和 10 行删除
src/views/ZMGame/component/scienceNews/index.vue
浏览文件 @ 3d0729e4
<!--科技要闻-->
<template>
<div class="content-wrapper">
科技要闻
</div>
<div class="content-wrapper">
<img :src="titlebg" alt="" class="title-bg" />
<img :src="background" alt="" class="background" />
<!-- 搜索框 -->
<div class="search-wrapper">
<input type="text" v-model="searchText" placeholder="搜索新闻" class="search-input" />
<button class="search-btn">
<img :src="search" alt="" />
搜索
</button>
</div>
<!-- 模块选择 -->
<div class="module-wrapper">
<div
v-for="(item, index) in moduleList"
:key="index"
class="module-item"
:class="{ active: activeModule === item.name }"
@click="activeModule = item.name"
>
<span>{{ item.name }}</span>
<img :src="activeModule === item.name ? rightActive : right" alt="" />
</div>
<div class="adjustment-btn">
<img :src="adjustment" alt="" />
</div>
</div>
<!-- 主要内容 -->
<div class="main-content">
<div class="left">
<div class="title">
<div class="title-left">
<img :src="icon1" alt="" class="icon1" />
<span>今日要闻</span>
<img :src="right" alt="" class="right-icon" />
</div>
<div class="title-right">
<img :src="refresh" alt="" class="refresh-icon" />
<span>换一批</span>
</div>
</div>
</div>
<div class="right"></div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import search from "./assets/Search.png";
import right from "./assets/right.png";
import rightActive from "./assets/right_active.png";
import adjustment from "./assets/adjustment.png";
import titlebg from "./assets/titlebg.png";
import icon1 from "./assets/icon1.png";
import icon2 from "./assets/icon2.png";
import refresh from "./assets/refresh.png";
import background from "../../../../assets/images/background.png";
const searchText = ref("");
// 模块选择数据
const activeModule = ref("新闻纵览");
const moduleList = ref([
{ name: "新闻纵览" },
{ name: "科技法案" },
{ name: "科技政令" },
{ name: "科技智库" },
{ name: "出口管制" },
{ name: "投融资限制" },
{ name: "市场准入限制" },
{ name: "合作限制" },
{ name: "规则限制" },
{ name: "创新主体" },
{ name: "科技人物" },
{ name: "资助体系" }
]);
</script>
<style lang="scss" scoped>
.content-wrapper {
width: 100%;
height: 100%;
width: 1600px;
height: 908px;
margin-bottom: 50px;
border-radius: 10px;
border: 1px solid #fff;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
padding-top: 48px;
position: relative;
background: linear-gradient(180deg, #e7f3ff 0%, #ffffff 20%);
.title-bg {
width: 100%;
height: 56px;
position: absolute;
top: 0;
left: 0;
}
.background {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
pointer-events: none;
}
// 搜索框
.search-wrapper {
position: relative;
z-index: 2;
width: 800px;
height: 48px;
margin: 0 auto;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.65);
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 3px;
margin-bottom: 38px;
.search-input {
width: 650px;
height: 48px;
border: none;
outline: none;
background-color: transparent;
padding-left: 16px;
font-size: 16px;
color: rgb(0, 0, 0);
::placeholder {
color: rgb(132, 136, 142);
font-size: 16px;
font-weight: 400;
line-height: 24px;
font-family: Microsoft YaHei;
}
}
.search-btn {
width: 120px;
height: 42px;
border: none;
outline: none;
background-color: rgb(5, 95, 194);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
img {
width: 22px;
height: 22px;
margin-right: 8px;
}
font-size: 18px;
color: rgb(255, 255, 255);
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
}
// 模块选择
.module-wrapper {
position: relative;
z-index: 2;
width: 1262px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 0 19px;
justify-content: center;
margin-bottom: 26px;
.module-item {
height: 40px;
padding: 0 20px;
background: rgba(255, 255, 255, 1);
border-radius: 32px;
border: 1px solid #e5e6eb;
display: flex;
align-items: center;
cursor: pointer;
span {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgb(95, 101, 108);
margin-right: 10px;
white-space: nowrap;
}
img {
width: 6px;
height: 12px;
}
&.active {
background: rgba(231, 243, 255, 1);
border: 1px solid rgba(174, 214, 255, 1);
span {
color: rgb(5, 95, 194);
}
}
}
.adjustment-btn {
width: 40px;
height: 40px;
background: #ffffff;
border-radius: 50%;
border: 1px solid #e5e6eb;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02);
img {
width: 16px;
height: 16px;
}
}
}
// 主要内容
.main-content {
position: relative;
z-index: 2;
width: 100%;
height: 656px;
margin: 0 auto;
padding: 0 22px;
background: rgba(255, 255, 255, 1);
display: flex;
justify-content: space-between;
gap: 21px;
.left {
width: 50%;
height: 100%;
padding: 0 24px;
}
.right {
width: 50%;
height: 100%;
padding: 0 24px;
}
}
// 通用标题
.title {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
border-bottom: 1px solid rgb(234, 236, 238);
.title-left {
display: flex;
align-items: center;
justify-content: center;
.icon1 {
width: 20px;
height: 20px;
margin-right: 10px;
}
span {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 700;
color: rgb(5, 95, 194);
line-height: 24px;
margin-right: 10px;
}
.right-icon {
width: 6px;
height: 12px;
}
}
.title-right {
padding: 2px 12px;
border-radius: 20px;
background-color: rgba(246, 250, 255, 1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 12px;
height: 12px;
margin-right: 9px;
}
span {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgb(5, 95, 194);
line-height: 24px;
}
}
}
}
</style>
\ No newline at end of file
</style>
src/views/ZMGame/index.vue
浏览文件 @ 3d0729e4
......@@ -41,7 +41,7 @@ const aciveBtn = ref('最新风险动态')
width: 100%;
height: 100%;
position: relative;
overflow-y: hidden;
overflow-y: auto;
.home-header {
height: 64px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论