Commit e0e1b0c5 authored by liangjingpeng's avatar liangjingpeng

大页面-首页1

parent 19dd97b4
......@@ -18,10 +18,9 @@
<el-tab-pane name="first">
<template #label>
<span class="mb-4" style="font-size: 24px; font-weight: 700; color: #1962e2"
>省登记平台(1112)</span
>
>省登记平台(1112)</span>
</template>
<el-row :gutter="20">
<el-row class="mt-5" :gutter="20">
<el-col :span="8">
<el-card>
<div slot="header">
......@@ -255,30 +254,170 @@
<span class="title_bottom mb-10">提供有效的数据价值,共15916条数据</span>
<div class="tab-pane">
<el-tabs v-model="activeName2" @tab-click="handleClick">
<div class="custom-table">
<el-tab-pane name="first">
<template #label>
<span class="mb-4 tab-label">数据集(15900)</span>
</template>
<el-table
class="mt-5"
:fits="true"
:row-style="{height: '60px'}"
:header-cell-style="{background: '#E4ECFA',color: '#3F3F3F',height: '60px'}"
:data="tableData"
style="width: 1440px;font-size: 18px;">
<el-table-column
prop="address"
width="500"
label="数据知识产权名称">
<template #header="scope">
<span class="table-span-label">{{ scope.column.label }}</span>
</template>
<template #default="scope">
<span class="table-span">{{ scope.row.address }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
width="350"
label="申请人"
>
</el-table-column>
<el-table-column
prop="applicationDate"
label="申请日期"
>
</el-table-column>
<el-table-column
prop="upDate"
label="更新日期"
>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane name="second">
<template #label>
<span class="mb-4 tab-label">文件(100)</span>
</template>
<el-table
class="mt-5"
:fits="true"
:row-style="{height: '60px'}"
:header-cell-style="{background: '#E4ECFA',color: '#3F3F3F',height: '60px'}"
:data="tableData"
style="width: 1440px;font-size: 18px;">
<el-table-column
prop="address"
width="500"
label="数据知识产权名称">
<template #header="scope">
<span class="table-span-label">{{ scope.column.label }}</span>
</template>
<template #default="scope">
<span class="table-span">{{ scope.row.address }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
width="350"
label="申请人"
>
</el-table-column>
<el-table-column
prop="applicationDate"
label="申请日期"
>
</el-table-column>
<el-table-column
prop="upDate"
label="更新日期"
>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane name="third">
<template #label>
<span class="mb-4 tab-label">API(100)</span>
</template>
<el-table
class="mt-5"
:fits="true"
:row-style="{height: '60px'}"
:header-cell-style="{background: '#E4ECFA',color: '#3F3F3F',height: '60px'}"
:data="tableData"
style="width: 1440px;font-size: 18px;">
<el-table-column
prop="address"
width="500"
label="数据知识产权名称">
<template #header="scope">
<span class="table-span-label">{{ scope.column.label }}</span>
</template>
<template #default="scope">
<span class="table-span">{{ scope.row.address }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
width="350"
label="申请人"
>
</el-table-column>
<el-table-column
prop="applicationDate"
label="申请日期"
>
</el-table-column>
<el-table-column
prop="upDate"
label="更新日期"
>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane name="fourth">
<template #label>
<span class="mb-4 tab-label">(用户登记)产品</span>
</template>
<el-table
class="mt-5"
:fits="true"
:row-style="{height: '60px'}"
:header-cell-style="{background: '#E4ECFA',color: '#3F3F3F',height: '60px'}"
:data="tableData"
style="width: 1440px;font-size: 18px;">
<el-table-column
prop="address"
width="500"
label="数据知识产权名称">
<template #header="scope">
<span class="table-span-label">{{ scope.column.label }}</span>
</template>
<template #default="scope">
<span class="table-span">{{ scope.row.address }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
width="350"
label="申请人"
>
</el-table-column>
<el-table-column
prop="applicationDate"
label="申请日期"
>
</el-table-column>
<el-table-column
prop="upDate"
label="更新日期"
>
</el-table-column>
</el-table>
</el-tab-pane>
</div>
</el-tabs>
<el-button-group>
<el-button plain class="back-button" type="text">
......@@ -314,6 +453,27 @@
url: 'src/assets/images/mallHome/banner.png',
},
],
tableData: [{
applicationDate: '2016-05-02',
upDate: '2016-05-02',
name: '浙江先导精密机械有限公司',
address: '三生(中国)健康产业有限公司'
}, {
applicationDate: '2016-05-04',
upDate: '2016-05-04',
name: '三生(中国)健康产业有限公司',
address: '46-55岁人群对锅具产品满意度分析数据'
}, {
applicationDate: '2016-05-01',
upDate: '2016-05-01',
name: '浙江先导精密机械有限公司',
address: '46-55岁人群对净水机满意度分析数据'
}, {
applicationDate: '2016-05-03',
upDate: '2016-05-03',
name: '三生(中国)健康产业有限公司',
address: '46-55岁人群对净水机满意度分析数据'
}],
};
},
methods: {
......@@ -387,7 +547,7 @@
display: flex;
justify-content: space-around;
margin-top: 20px;
font-size: 15px;
font-size: 18px;
text-align: left;
p {
......@@ -418,8 +578,8 @@
font-weight: 500;
.button {
color: #1962e2;
border: #1962e2 2px solid;
color: #1962E2;
border: #1962E2 2px solid;
}
}
......@@ -479,4 +639,17 @@
}
}
}
.custom-table{
margin-bottom: 72px;
}
.table-span{
color: #1962E2;
margin-left: 80px;
}
.table-span-label{
margin-left: 80px;
}
</style>
......@@ -4,18 +4,18 @@
<el-header class="header">
<!-- <div >-->
<div class="official-title" style="width: 20%; padding-left: 40px">
<!-- <img-->
<!-- :src="titleNameImage"-->
<!-- width="390"-->
<!-- height="auto"-->
<!-- style="position: relative; top: 3px; width: 50%"-->
<!-- />-->
<!-- <img-->
<!-- :src="titleNameImage1"-->
<!-- width="220"-->
<!-- height="auto"-->
<!-- style="margin-left: 20px; width: 30%"-->
<!-- />-->
<!-- <img-->
<!-- :src="titleNameImage"-->
<!-- width="390"-->
<!-- height="auto"-->
<!-- style="position: relative; top: 3px; width: 50%"-->
<!-- />-->
<!-- <img-->
<!-- :src="titleNameImage1"-->
<!-- width="220"-->
<!-- height="auto"-->
<!-- style="margin-left: 20px; width: 30%"-->
<!-- />-->
数据要素交易服务平台
</div>
<div id="menu_index" style="width: 55%; display: flex; justify-content: end">
......@@ -31,14 +31,19 @@
v-for="(nav, index) in navs"
:key="index"
:index="nav.path"
style="font-size: 20px;margin: 0 16px"
style="font-size: 20px; margin: 0 16px"
>{{ nav.text }}</el-menu-item
>
</el-menu>
</div>
<div class="right-div">
<el-button plain class="long_btn">登录</el-button>
<el-button class="long_btn" style="color: #486fe1;background-color: #dce5f9" type="primary">注册</el-button>
<el-button
class="long_btn"
style="color: #486fe1; background-color: #dce5f9"
type="primary"
>注册</el-button
>
</div>
<!-- </div>-->
</el-header>
......@@ -46,141 +51,34 @@
<div style="clear: both">
<router-view />
</div>
<div class="footer-div">
<div class="bottom_info">
<div>
<div>
<span class="bottom_info_title">主办单位</span>
<div class="not-first-child" style="margin-top: 15px">
<span class="bottom_info_item">市委教育工委</span>
<span class="bottom_info_item">市教委</span>
<span class="bottom_info_item">市科技局</span>
</div>
</div>
<div style="margin-top: 40px">
<span class="bottom_info_title">联合主办单位</span>
<div class="co-sponsor">
<div>
<p class="bottom_info_item">市委网信办</p>
<p class="bottom_info_item">市体育局</p>
<p class="bottom_info_item">市财政局</p>
</div>
<div>
<p class="bottom_info_item">市人社局</p>
<p class="bottom_info_item">团市委</p>
<p class="bottom_info_item">天津海河传媒中心</p>
</div>
</div>
</div>
</div>
<div>
<span class="bottom_info_title">承办单位</span>
<div></div>
<p class="bottom_info_item">南开大学</p>
<p class="bottom_info_item">天津大学</p>
<p class="bottom_info_item">天津美术学院</p>
<p class="bottom_info_item">天津市大学软件学院</p>
</div>
<div>
<span class="bottom_info_title">协办单位</span>
<p class="bottom_info_item">天津商业大学</p>
<p class="bottom_info_item">天津城建大学</p>
<p class="bottom_info_item">天津职业大学</p>
<p class="bottom_info_item">天津市海河产业基金管理有限公司</p>
<p class="bottom_info_item">天津市高校众创空间联盟</p>
<p class="bottom_info_item">全国经济广播联盟</p>
<p class="bottom_info_item">天津海河教育园区大学生创新创业联盟</p>
</div>
<div>
<span class="bottom_info_title">支持单位</span>
<p class="bottom_info_item">天津市体育彩票管理中心</p>
<p class="bottom_info_item">招商银行股份有限公司天津分行</p>
<p class="bottom_info_item">云账户(天津)共享经济信息咨询有限公司</p>
<p class="bottom_info_item">蓝色光标</p>
<p class="bottom_info_item">商汤科技</p>
<p class="bottom_info_item">清华大学天津高端装备研究院</p>
<el-button
style="color: #ffffff; margin-top: -4px; font-size: 17px"
type="text"
@click="toBackstage"
>信息维护</el-button
>
<br />
<el-button
style="color: #ffffff; margin-top: -4px; font-size: 17px"
v-show="$route.path === '/onlineLearning'"
type="text"
@click="toBackReview"
>评审系统</el-button
>
</div>
</div>
<el-divider />
<div class="footer-item">
<div>
<span class="bottom_info_footer">联系人:大赛组委会秘书处</span>
</div>
<div>
<span class="bottom_info_footer">座机:022-58685014</span>
</div>
<div>
<span class="bottom_info_footer">工作时间: 工作日08:00~17:00</span>
</div>
<div class="row-footer">
<div class="footer-title">
<span>大数据服务平台上线啦~</span>
</div>
<el-button plain class="footer-button" type="text" @click="toBackstage()">
立即前往<Icon class="ml-3" :size="20" icon="icon-park-solid:right-c"></Icon>
</el-button>
</div>
<div class="footer-item-por">
<div>
<span class="footer-item-span"
>Copyright © 2023 All Rights Reserved.
“天开杯”创聚津门全国大学生智能科技创新创业挑战赛大赛组委会</span
>
</div>
<div>
<span class="footer-item-span">
免责声明:任何人因使用本网站而可遭致的意外及其造成的损失(包括因下载本网站可能链接的第二方网站内容而感染电脑病毒)
, 我司对此概不负责,亦不承担任何法律责任
</span>
</div>
<div>
<span class="footer-item-span1">
津ICP备<a href="http://beian.miit.gov.cn" target="_blank">10200771号-11</a>
<!-- <img :src="icp" alt="" style="display: inline-block">-->
<!-- 津公网安备<a href="http://beian.miit.gov.cn" target="_blank">12011102000496</a>-->
</span>
<div>版权所有:<span>天津市融创软通科技股份有限公司</span></div>
<div class="right-div">
<div>联系我们:<span>022-58685525</span></div>
<div>Email:<span>rchrzp@91isoft.com</span></div>
</div>
</div>
</el-main>
<!-- <div class="fixed-area" v-show="showFixed">-->
<!-- <div id="to_common_problem" @click="toCommonProblem" class="detail">-->
<!-- <img class="fixed-img" />-->
<!-- <div class="custom-icon"></div>-->
<!-- </div>-->
<!-- <div id="to_common_problem" @click="toSignUp" class="detail1">-->
<!-- <img class="fixed-img" />-->
<!-- </div>-->
<!-- &lt;!&ndash; <div id="back_to_top" ref="btn" @click="backTop" class="detail2">&ndash;&gt;-->
<!-- &lt;!&ndash; <img src="@/assets/tiankai_cup/index/zhiding@2x.png" class="fixed-img"/>&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->
<!-- </div>-->
<el-backtop
id="back_to_top"
class="detail2"
ref="btn"
target=".el-main"
style="right: 34px; bottom: 22px"
>
<img class="fixed-img" />
</el-backtop>
</el-container>
</div>
</template>
<script>
import { getToken } from '@/utils/auth';
import Icon from '@/components/Icon/Icon.vue';
export default {
name: 'LayoutCup',
components: { Icon },
data() {
return {
showPopup: false,
......@@ -385,12 +283,12 @@
/*justify-content: center;*/
}
.long_btn{
.long_btn {
width: 80px;
border: none;
}
.container{
.container {
display: flex;
justify-content: center;
}
......@@ -541,156 +439,52 @@
font-weight: 500;
}
/*底部版权所有样式*/
.footer-item-por {
margin-top: 15px;
width: 100%;
.row-footer{
height: 242px;
opacity: 0.8;
background-color: #1962E2;
display: flex;
flex-direction: column;
align-items: center;
}
.footer-item-span {
color: #999999;
font-size: 15px;
font-weight: 400;
line-height: 25px;
justify-content: space-evenly;
padding-bottom: 20px;
.footer-title{
height: 48px;
color: #ffffff;
font-size: 32px;
font-weight: 500;
}
.footer-item-span1 {
color: #999999;
font-size: 18px;
font-weight: 400;
line-height: 25px;
padding-bottom: 20px;
a {
color: #337ab7;
display: inline-block;
}
a:hover {
color: #23527c;
.footer-button{
width: 160px;
height: 51px;
font-size: 18px;
background-color: #FFFFFF;
color: #1962E2;
}
}
/*悬浮功能区域样式*/
.fixed-area {
position: fixed;
bottom: 80px;
right: 30px;
/*margin: auto;*/
z-index: 999;
}
/*当子节点不为第一个时的样式*/
.fixed-area > :not(:first-child) {
margin-top: 20px;
}
/*返回顶部样式*/
.fixed-area > :last-child {
/*display: none;*/
margin-top: 10px;
width: 50px;
height: 50px;
}
/*悬浮功能区的切图大小设置*/
.fixed-img {
width: 50px;
height: 50px;
}
.detail::before {
content: '';
background-color: #707982;
opacity: 0;
}
/*底部版权所有样式*/
.footer-item-por {
height: 72px;
width: 100%;
border: 1px dashed #eff3fa;
display: flex;
background-color: rgba(34, 36, 41, 1);
justify-content: space-around;
align-items: center;
color: #eff3fa;
/*问号按钮*/
.detail:hover::before {
position: absolute;
left: -100px;
width: 150px;
height: 50px;
border-radius: 100px;
z-index: -1;
opacity: 1;
transition: transform 0.3s ease;
content: '常见问题';
display: flex; /* 使用 flex 布局 */
justify-content: flex-start;
padding-left: 20px;
align-items: center; /* 在垂直方向上居中对齐 */
color: white; /* 设置字体颜色为白色 */
}
.detail1::before {
content: '';
background-color: #707982;
opacity: 0;
}
/*问号按钮*/
.detail1:hover::before {
position: absolute;
left: -100px;
width: 150px;
height: 50px;
border-radius: 100px;
z-index: -1;
opacity: 1;
transition: transform 0.3s ease;
content: '参赛报名';
display: flex; /* 使用 flex 布局 */
justify-content: flex-start;
padding-left: 20px;
align-items: center; /* 在垂直方向上居中对齐 */
color: white; /* 设置字体颜色为白色 */
}
.detail2::before {
content: '';
background-color: #707982;
opacity: 0;
}
/*问号按钮*/
.detail2:hover::before {
position: absolute;
left: -100px;
width: 140px;
height: 50px;
border-radius: 100px;
z-index: -1;
opacity: 1;
transition: transform 0.3s ease;
content: '返回顶部';
font-size: 16px;
display: flex; /* 使用 flex 布局 */
justify-content: flex-start;
padding-left: 20px;
align-items: center; /* 在垂直方向上居中对齐 */
color: white; /* 设置字体颜色为白色 */
}
.right-div {
display: flex;
.detail:hover span {
transform: translateX(-10px);
/* 向左移动 10px,可根据需要调整数值 */
div {
margin-left: 40px;
}
::v-deep .el-divider--horizontal {
margin: 10px 0 !important;
background-color: #333 !important;
}
::v-deep .el-menu-item:hover {
font-weight: 500 !important;
border-bottom: #ffffff !important;
color: #005dbd !important;
span {
margin-left: 14px;
}
::v-deep .el-menu--horizontal > .el-menu-item.is-active {
font-weight: 600 !important;
border-bottom: #ffffff !important;
color: #005dbd !important;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment