Commit e0e1b0c5 authored by liangjingpeng's avatar liangjingpeng

大页面-首页1

parent 19dd97b4
...@@ -18,10 +18,9 @@ ...@@ -18,10 +18,9 @@
<el-tab-pane name="first"> <el-tab-pane name="first">
<template #label> <template #label>
<span class="mb-4" style="font-size: 24px; font-weight: 700; color: #1962e2" <span class="mb-4" style="font-size: 24px; font-weight: 700; color: #1962e2"
>省登记平台(1112)</span >省登记平台(1112)</span>
>
</template> </template>
<el-row :gutter="20"> <el-row class="mt-5" :gutter="20">
<el-col :span="8"> <el-col :span="8">
<el-card> <el-card>
<div slot="header"> <div slot="header">
...@@ -255,30 +254,170 @@ ...@@ -255,30 +254,170 @@
<span class="title_bottom mb-10">提供有效的数据价值,共15916条数据</span> <span class="title_bottom mb-10">提供有效的数据价值,共15916条数据</span>
<div class="tab-pane"> <div class="tab-pane">
<el-tabs v-model="activeName2" @tab-click="handleClick"> <el-tabs v-model="activeName2" @tab-click="handleClick">
<div class="custom-table">
<el-tab-pane name="first"> <el-tab-pane name="first">
<template #label> <template #label>
<span class="mb-4 tab-label">数据集(15900)</span> <span class="mb-4 tab-label">数据集(15900)</span>
</template> </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>
<el-tab-pane name="second"> <el-tab-pane name="second">
<template #label> <template #label>
<span class="mb-4 tab-label">文件(100)</span> <span class="mb-4 tab-label">文件(100)</span>
</template> </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>
<el-tab-pane name="third"> <el-tab-pane name="third">
<template #label> <template #label>
<span class="mb-4 tab-label">API(100)</span> <span class="mb-4 tab-label">API(100)</span>
</template> </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>
<el-tab-pane name="fourth"> <el-tab-pane name="fourth">
<template #label> <template #label>
<span class="mb-4 tab-label">(用户登记)产品</span> <span class="mb-4 tab-label">(用户登记)产品</span>
</template> </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>
</div>
</el-tabs> </el-tabs>
<el-button-group> <el-button-group>
<el-button plain class="back-button" type="text"> <el-button plain class="back-button" type="text">
...@@ -314,6 +453,27 @@ ...@@ -314,6 +453,27 @@
url: 'src/assets/images/mallHome/banner.png', 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: { methods: {
...@@ -387,7 +547,7 @@ ...@@ -387,7 +547,7 @@
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin-top: 20px; margin-top: 20px;
font-size: 15px; font-size: 18px;
text-align: left; text-align: left;
p { p {
...@@ -418,8 +578,8 @@ ...@@ -418,8 +578,8 @@
font-weight: 500; font-weight: 500;
.button { .button {
color: #1962e2; color: #1962E2;
border: #1962e2 2px solid; border: #1962E2 2px solid;
} }
} }
...@@ -479,4 +639,17 @@ ...@@ -479,4 +639,17 @@
} }
} }
} }
.custom-table{
margin-bottom: 72px;
}
.table-span{
color: #1962E2;
margin-left: 80px;
}
.table-span-label{
margin-left: 80px;
}
</style> </style>
...@@ -4,18 +4,18 @@ ...@@ -4,18 +4,18 @@
<el-header class="header"> <el-header class="header">
<!-- <div >--> <!-- <div >-->
<div class="official-title" style="width: 20%; padding-left: 40px"> <div class="official-title" style="width: 20%; padding-left: 40px">
<!-- <img--> <!-- <img-->
<!-- :src="titleNameImage"--> <!-- :src="titleNameImage"-->
<!-- width="390"--> <!-- width="390"-->
<!-- height="auto"--> <!-- height="auto"-->
<!-- style="position: relative; top: 3px; width: 50%"--> <!-- style="position: relative; top: 3px; width: 50%"-->
<!-- />--> <!-- />-->
<!-- <img--> <!-- <img-->
<!-- :src="titleNameImage1"--> <!-- :src="titleNameImage1"-->
<!-- width="220"--> <!-- width="220"-->
<!-- height="auto"--> <!-- height="auto"-->
<!-- style="margin-left: 20px; width: 30%"--> <!-- style="margin-left: 20px; width: 30%"-->
<!-- />--> <!-- />-->
数据要素交易服务平台 数据要素交易服务平台
</div> </div>
<div id="menu_index" style="width: 55%; display: flex; justify-content: end"> <div id="menu_index" style="width: 55%; display: flex; justify-content: end">
...@@ -31,14 +31,19 @@ ...@@ -31,14 +31,19 @@
v-for="(nav, index) in navs" v-for="(nav, index) in navs"
:key="index" :key="index"
:index="nav.path" :index="nav.path"
style="font-size: 20px;margin: 0 16px" style="font-size: 20px; margin: 0 16px"
>{{ nav.text }}</el-menu-item >{{ nav.text }}</el-menu-item
> >
</el-menu> </el-menu>
</div> </div>
<div class="right-div"> <div class="right-div">
<el-button plain class="long_btn">登录</el-button> <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>
<!-- </div>--> <!-- </div>-->
</el-header> </el-header>
...@@ -46,141 +51,34 @@ ...@@ -46,141 +51,34 @@
<div style="clear: both"> <div style="clear: both">
<router-view /> <router-view />
</div> </div>
<div class="footer-div">
<div class="bottom_info"> <div class="row-footer">
<div> <div class="footer-title">
<div> <span>大数据服务平台上线啦~</span>
<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> </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>
<div class="footer-item-por"> <div class="footer-item-por">
<div> <div>版权所有:<span>天津市融创软通科技股份有限公司</span></div>
<span class="footer-item-span" <div class="right-div">
>Copyright © 2023 All Rights Reserved. <div>联系我们:<span>022-58685525</span></div>
“天开杯”创聚津门全国大学生智能科技创新创业挑战赛大赛组委会</span <div>Email:<span>rchrzp@91isoft.com</span></div>
>
</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> </div>
</div> </div>
</el-main> </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> </el-container>
</div> </div>
</template> </template>
<script> <script>
import { getToken } from '@/utils/auth'; import { getToken } from '@/utils/auth';
import Icon from '@/components/Icon/Icon.vue';
export default { export default {
name: 'LayoutCup', name: 'LayoutCup',
components: { Icon },
data() { data() {
return { return {
showPopup: false, showPopup: false,
...@@ -385,12 +283,12 @@ ...@@ -385,12 +283,12 @@
/*justify-content: center;*/ /*justify-content: center;*/
} }
.long_btn{ .long_btn {
width: 80px; width: 80px;
border: none; border: none;
} }
.container{ .container {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
...@@ -541,156 +439,52 @@ ...@@ -541,156 +439,52 @@
font-weight: 500; font-weight: 500;
} }
/*底部版权所有样式*/ .row-footer{
.footer-item-por { height: 242px;
margin-top: 15px; opacity: 0.8;
width: 100%; background-color: #1962E2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} justify-content: space-evenly;
.footer-item-span { .footer-title{
color: #999999; height: 48px;
font-size: 15px; color: #ffffff;
font-weight: 400; font-size: 32px;
line-height: 25px; font-weight: 500;
padding-bottom: 20px;
}
.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;
} }
}
/*悬浮功能区域样式*/
.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 { .footer-button{
content: ''; width: 160px;
background-color: #707982; height: 51px;
opacity: 0; font-size: 18px;
background-color: #FFFFFF;
color: #1962E2;
}
} }
/*问号按钮*/
.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; /* 设置字体颜色为白色 */
}
.detail:hover span { /*底部版权所有样式*/
transform: translateX(-10px); .footer-item-por {
/* 向左移动 10px,可根据需要调整数值 */ height: 72px;
} width: 100%;
border: 1px dashed #eff3fa;
::v-deep .el-divider--horizontal { display: flex;
margin: 10px 0 !important; background-color: rgba(34, 36, 41, 1);
background-color: #333 !important; justify-content: space-around;
} align-items: center;
color: #eff3fa;
::v-deep .el-menu-item:hover { .right-div {
font-weight: 500 !important; display: flex;
border-bottom: #ffffff !important;
color: #005dbd !important;
}
::v-deep .el-menu--horizontal > .el-menu-item.is-active { div {
font-weight: 600 !important; margin-left: 40px;
border-bottom: #ffffff !important; }
color: #005dbd !important; }
span {
margin-left: 14px;
}
} }
</style> </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