Skip to content

B
bigDataSystem
Commit fdde652b authored by liangjingpeng's avatar liangjingpeng
Browse files
Options

前台页面-交易市场1

parent f9c6c4df
Hide whitespace changes
Inline Side-by-side
Showing with 359 additions and 1558 deletions
src/views/AAAFont/demandHall/index.vue
View file @ fdde652b
<template>
<div class="mainContainer" id="main">
<!--sub容器包含了一个个子页面 例如info race-->
<div class="subContainer">
<!--小球及下拉列表-->
<div class="ball">
<div class="drop-down_menu" id="drop-down_menu" style="font-size: 15px; height: 0">
<div class="dropdown" id="dropdown">
<!--下拉菜单项-->
<div class="dropdown-item" @click="jumpToSection('info')" style="margin-top: 60px">
<span>大赛资讯</span>
</div>
<div class="dropdown-item" @click="jumpToSection('race')">
<span>赛程安排</span>
</div>
<div class="dropdown-item" @click="jumpToSection('track')">
<span>赛道划分</span>
</div>
<div class="dropdown-item" @click="jumpToSection('reward')">
<span>奖励计划</span>
</div>
<div class="dropdown-item" @click="jumpToSection('download')">
<span>资料下载</span>
</div>
<div class="dropdown-item" @click="jumpToSection('institutions')">
<span>支持院校</span>
</div>
</div>
</div>
</div>
<!--大赛咨询子页面-->
<div class="information item-content-box" id="info">
<!--公共容器 info_right 包含了标题和字母栏-->
<div class="commonContainer" style="margin-top: 60px">
<!--对公共容器应用子页面专属css样式-->
<!-- <div class="common-item-title">大赛资讯</div>-->
<!-- <div class="letter">INFORMATION</div>-->
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="大赛资讯" name="first">
<template #label>
<span class="common-item-title">大赛资讯</span>
</template>
<div class="info_wrapper">
<!-- 通知公告-->
<div class="info_content">
<!-- 头部栏-->
<div class="info_header">
<div>
<div class="info_title" style="float: right; height: 33px; padding-top: 7px">
</div>
</div>
<a class="more-link" @click="toNoticePage"> </a>
</div>
<!-- info子页面信息容器-->
<div class="notice_container">
<div class="notice" v-for="item in info_notice" :key="item.noticeId">
<div class="notice-image"> </div>
<!-- 内容-->
<div class="notice-content">
<div class="notice-text" @click="noticeDetail(item)">{{
item.noticeTitle
}}</div>
<div class="notice-time">发布于: {{ item.updateTime }}</div>
</div>
</div>
<div
v-if="noticeShow"
style="
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
"
>
<!-- 无数据时显示该图片-->
</div>
</div>
</div>
<!-- 新闻动态-->
<div class="info_content" style="margin-left: 30px">
<div class="info_header">
<div>
<div class="info_title" style="float: right; height: 33px; padding-top: 7px">
</div>
</div>
<a class="more-link" @click="toTrendsPage"> </a>
</div>
<div class="notice_container">
<div class="notice" v-for="(item, index) in info_ad" :key="item.trendsId">
<div class="notice-image"> </div>
<div class="notice-content">
<div class="notice-text" @click="trendsDetail(item)">{{
item.trendsTitle
}}</div>
<div class="notice-time">发布于: {{ item.updateTime }}</div>
</div>
</div>
<div
v-if="adShow"
style="
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
"
>
<!-- 无数据时显示该图片-->
</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="体彩服务社会" name="second">
<template #label>
<span class="common-item-title">体彩服务社会</span>
</template>
<div class="info_wrapper">
<div class="info_content_second">
<!-- 头部栏-->
<div class="info_header">
<div>
<div class="info_title" style="float: right; height: 33px; padding-top: 7px">
</div>
</div>
</div>
<!-- info子页面信息容器-->
<div class="notice_container">
<el-row>
<el-col :span="12">
<div class="notice">
<div class="notice-image"> </div>
<!-- 内容-->
<div class="notice-content">
<div
class="notice-text"
@click="sportsLottery('体彩公益公信宣传之一')"
>{{ '体彩公益公信宣传之一：体彩公益金是怎么来的？' }}</div
>
<div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="notice">
<div class="notice-image"> </div>
<!-- 内容-->
<div class="notice-content">
<div
class="notice-text"
@click="sportsLottery('体彩公益公信宣传之二')"
>{{ '体彩公益公信宣传之二：体彩公益金用在哪里了？' }}</div
>
<div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="notice">
<div class="notice-image"> </div>
<!-- 内容-->
<div class="notice-content">
<div
class="notice-text"
@click="sportsLottery('体彩公益公信宣传之三')"
>{{
'体彩公益公信宣传之三：汇聚微光 增进民生福祉 体彩公益金为人民美好生活赋能添彩'
}}</div
>
<div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="notice">
<div class="notice-image"> </div>
<!-- 内容-->
<div class="notice-content">
<div
class="notice-text"
@click="sportsLottery('体彩公益公信宣传之四')"
>{{
'体彩公益公信宣传之四：聚沙成塔 涓流成河体彩公益金 “益”起赋能美好生活'
}}</div
>
<div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="notice">
<div class="notice-image"> </div>
<!-- 内容-->
<div class="notice-content">
<div
class="notice-text"
@click="sportsLottery('体彩公益公信宣传之五')"
>{{
'体彩公益公信宣传之五：“津”彩微光“益”路同行天津体彩做公益公信的践行者'
}}</div
>
<div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="notice">
<div class="notice-image"> </div>
<!-- 内容-->
<div class="notice-content">
<div
class="notice-text"
@click="sportsLottery('体彩公益公信宣传之六')"
>{{ '体彩公益公信宣传之六：体育彩票的开奖现场是这样的' }}</div
>
<div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div>
</div>
</div>
</el-col>
</el-row>
<div
v-if="noticeShow"
style="
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
"
>
<!-- 无数据时显示该图片-->
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<!-- 赛程安排子页面-->
<div class="race item-content-box" id="race" style="position: relative">
<div style="width: 100%; position: absolute">
<div class="commonContainer" style="margin-top: 20px">
<h3 class="content-item-h3" style="color: #ffffff">赛程安排</h3>
<span class="letter" style="text-shadow: 0 0 1px rgba(243, 243, 243, 0.2)"
>RACE SCHEDULE</span
>
</div>
</div>
</div>
<!-- 赛道划分子页面-->
<div class="track item-content-box" id="track">
<div class="item-content-box">
<div class="commonContainer">
<h3 class="content-item-h3">赛道划分</h3>
<span class="letter">TRACK DIVISION</span>
<div style="width: 100%; display: flex; justify-content: center; align-items: center">
<div class="track_region">
<!-- 创业实践赛道 -->
<div class="box">
<!-- 左上角图片-->
<div class="triangle"> </div>
<!-- 右上角图片-->
<div class="image"> </div>
<div class="track_title">创业实践赛道(主赛道)</div>
<div class="track_content"
>将创新成果付诸创业实践并取得一定经济效益和社会影响，已成立与天津高质量发展方向相契合的、在智能科技领域具有高成长前置的初创企业。</div
>
<button class="detail" @click="openDialog(0)">查看详情</button>
</div>
<!-- 创业畅想赛道 -->
<div class="box">
<div class="triangle"> </div>
<div class="image"> </div>
<div class="track_title">创意畅想赛道（专项赛道）</div>
<div class="track_content"
>针对天津乃至全国经济社会和科技发展中的问题，提出创意解决方案。</div
>
<button class="detail" @click="openDialog(1)">查看详情</button>
</div>
<!-- 创新挑战赛道 -->
<div class="box">
<div class="triangle"> </div>
<div class="image"> </div>
<div class="track_title">创新挑战赛道（专项赛道）</div>
<div class="track_content"
>针对天津乃至全国产业发展中的瓶颈问题，给出科技创新解决方案。</div
>
<button class="detail" @click="openDialog(2)">查看详情</button>
</div>
<!-- 创服赋能赛道 -->
<div class="box">
<div class="triangle"> </div>
<div class="image"> </div>
<div class="track_title">创服赋能赛道（专项赛道）</div>
<div class="track_content"
>组委会将邀请天津市12条重点产业链上的头部科技创新企业给出赛题，参赛者将根据企业命题给出具体答题。</div
>
<button class="detail" @click="openDialog(3)">查看详情</button>
</div>
</div>
</div>
</div>
</div>
<!--track中的对话框 查看详情-->
<el-dialog
:title="dialogContent.title"
v-model:visible="dialogVisible"
style="top: -1vh !important"
width="62%"
>
<div class="dialog-container">
<div v-html="dialogContent.content"> </div>
<div v-show="isShowDown">
<el-link
icon="el-icon-paperclip"
style="color: #005dbd; font-size: 18px"
@click="downloadEntityHandle"
>附件1: 项目推荐汇总表(可点击下载)
</el-link>
</div>
</div>
</el-dialog>
<!--奖励计划子页面-->
<div class="reward item-content-box" id="reward">
<div class="commonContainer" style="margin-top: 20px">
<h3 class="content-item-h3" style="color: white">奖励计划</h3>
<span class="letter" style="text-shadow: 0 0 1px rgba(243, 243, 243, 0.2)"
>REWARD PLAN</span
>
<div>
<div class="reward_container">
<!--顶部-基础奖励图片-->
<div class="reward_top"> </div>
<!--基础奖励-创业实践-->
<div class="reward_center">
<div class="left-container">
<div class="reward_title">
创业实践
<div class="reward_icon"><span>主</span></div>
</div>
<div class="subtitle">赛道</div>
</div>
<div class="right-container">
<div class="item">
<div class="item_text">一等奖3名</div>
<div class="amount">￥100,000</div>
</div>
<div class="item">
<div class="item_text">二等奖5名</div>
<div class="amount">￥30,000</div>
</div>
<div class="item">
<div class="item_text">三等奖10名</div>
<div class="amount">￥15,000</div>
</div>
<div class="item">
<div class="item_text">优秀奖30名</div>
<div class="amount">￥5,000</div>
</div>
</div>
</div>
<!--基础奖励-创意畅想-->
<div class="reward_center">
<div class="left-container">
<div class="reward_title">
创意畅想
<div class="reward_icon" style="background-color: #ffba00; width: 47px"
><span style="width: 30px; left: 8px">专项</span></div
>
</div>
<div class="subtitle">赛道</div>
</div>
<div class="right-container">
<div class="item">
<div class="item_text">一等奖2名</div>
<div class="amount">￥10,000</div>
</div>
<div class="item">
<div class="item_text">二等奖4名</div>
<div class="amount">￥5,000</div>
</div>
<div class="item">
<div class="item_text">三等奖7名</div>
<div class="amount">￥3,000</div>
</div>
<div class="item">
<div class="item_text">优秀奖15名</div>
<div class="amount">￥1,000</div>
</div>
</div>
</div>
<!--基础奖励-创新挑战-->
<div class="reward_center">
<div class="left-container">
<div class="reward_title">
创新挑战
<div class="reward_icon" style="background-color: #ffba00; width: 47px"
><span style="width: 30px; left: 8px">专项</span></div
>
</div>
<div class="subtitle">赛道</div>
</div>
<div class="right-container">
<div class="item">
<div class="item_text">一等奖2名</div>
<div class="amount">￥10,000</div>
</div>
<div class="item">
<div class="item_text">二等奖4名</div>
<div class="amount">￥5,000</div>
</div>
<div class="item">
<div class="item_text">三等奖7名</div>
<div class="amount">￥3,000</div>
</div>
<div class="item">
<div class="item_text">优秀奖15名</div>
<div class="amount">￥1,000</div>
</div>
</div>
</div>
<!--基础奖励-创服赋能-->
<div class="reward_center">
<div class="left-container">
<div class="reward_title">
创服赋能
<div class="reward_icon" style="background-color: #ffba00; width: 47px"
><span style="width: 30px; left: 8px">专项</span></div
>
</div>
<div class="subtitle">赛道</div>
</div>
<div class="right-container">
<div class="item">
<div class="item_text">一等奖2名</div>
<div class="amount">￥20,000</div>
</div>
<div class="item">
<div class="item_text">二等奖4名</div>
<div class="amount">￥10,000</div>
</div>
<div class="item">
<div class="item_text">三等奖7名</div>
<div class="amount">￥5,000</div>
</div>
<div class="item">
<div class="item_text">优秀奖15名</div>
<div class="amount">￥1,000</div>
</div>
</div>
</div>
<!--底部特别奖励-->
<div class="reward_bottom">
<div class="image_text01">
<div>由市教育两委会同市科技局、海河基金公司组织专家对大赛获奖项目进行落地</div>
<div>专项评审，经评审认定符合落地天津条件、并有意向落户天开高教科创园的</div>
<div> 团队，支持其积极落户天开高教科创园。对于最终落户的，按照《天津市</div>
<div> 支持天开高教科创园高质量发展的若干政策措施》等天津引进高质量</div>
<div>创新创业项目的一揽子政策，给予相应的政策支持。</div>
</div>
<div class="image_text02">
获一、二、三等奖的天津市高校团队，由各高校按照全国“互联网+”大赛全国奖项及学校相关政策给予同等奖励
（教育部等国家事权除外）。
</div>
</div>
</div>
</div>
</div>
</div>
<!--下载资料和支持院校的父容器-->
<div class="union">
<!--下载资源子页面-->
<div class="download item-content-box" id="download">
<div class="commonContainer">
<h3 class="content-item-h3">资料下载</h3>
<span class="letter">MATERIALS DOWNLOAD</span>
<!-- 下载轮播图-->
<div v-if="fileList.length === 0"> </div>
<div
v-else
class="download_outer_container swiper-container swiper-no-swiping"
id="downloadSwiper"
>
<div class="download_inner_container swiper-wrapper">
<div
class="download_box swiper-slide"
v-for="(item, index) in fileList"
:key="index"
@click="toNext(item)"
>
<!-- @click="downloadFile(item,index)"-->
<div>
<p>{{ item.fileName }}</p>
</div>
</div>
</div>
<div
v-show="fileList && fileList.length > 4"
style="width: 100%; display: flex; justify-content: center"
>
<div class="scrollbar">
<div class="downloadPrev"> </div>
<div class="downloadLine"></div>
<div class="downloadNext"> </div>
</div>
</div>
</div>
<div style="width: 1440px; height: 443px">
<el-carousel class="w-1/1" :interval="5000" height="443px" arrow="always">
<el-carousel-item v-for="item in items" :key="item.id">
<img class="carouselImg" :src="item.url" alt="" />
</el-carousel-item>
</el-carousel>
</div>
</div>
<!--支持院校子页面-->
<div class="institutions item-content-box" id="institutions">
<div class="commonContainer">
<h3 class="content-item-h3">支持院校</h3>
<span class="letter">SUPPORTING INSTITUTIONS</span>
<!-- 院校轮播图-->
<div
class="swiper-container institutions_outer_container swiper-no-swiping"
id="schoolSwiper"
>
<div class="swiper-wrapper institutions_inner_container">
<div class="swiper-slide">
<div class="institutions_container">
<!--每个学校-->
<div class="institutions_box">
<p>南开大学</p>
</div>
<div class="institutions_box">
<p>天津大学</p>
</div>
<div class="institutions_box">
<p>中国民航大学</p>
</div>
<div class="institutions_box">
<p>河北工业大学</p>
</div>
<div class="institutions_box">
<p>天津师范大学</p>
</div>
</div>
<div class="institutions_container">
<div class="institutions_box">
<p>天津医科大学</p>
</div>
<div class="institutions_box">
<p>天津科技大学</p>
</div>
<div class="institutions_box">
<p>天津工业大学</p>
</div>
<div class="institutions_box">
<p>天津商业大学</p>
</div>
<div class="institutions_box">
<p>天津职业技术师范大学</p>
</div>
</div>
<div class="institutions_container">
<div class="institutions_box">
<p>天津财经大学</p>
</div>
<div class="institutions_box">
<p>天津理工大学</p>
</div>
<div class="institutions_box">
<p>天津中医药大学</p>
</div>
<div class="institutions_box">
<p>天津外国语大学</p>
</div>
<div class="institutions_box">
<p>天津城建大学</p>
</div>
<!-- Repeat the above structure for each row -->
</div>
</div>
<div class="swiper-slide">
<div class="institutions_container">
<div class="institutions_box">
<p>天津音乐学院</p>
</div>
<div class="institutions_box">
<p>天津体育学院</p>
</div>
<div class="institutions_box">
<p>天津美术学院</p>
</div>
<div class="institutions_box">
<p>天津农学院</p>
</div>
<div class="institutions_box">
<p>天津市大学软件学院</p>
</div>
</div>
<div class="institutions_container">
<div class="institutions_box">
<p>天津中德应用技术大学</p>
</div>
<div class="institutions_box">
<p>天津职业大学 </p>
</div>
<div class="institutions_box">
<p>天津医学高等专科学校 </p>
</div>
<div class="institutions_box">
<p>天津电子信息职业技术学院 </p>
</div>
<div class="institutions_box">
<p>天津渤海职业技术学院 </p>
</div>
</div>
<div class="institutions_container">
<div class="institutions_box">
<p>天津现代职业技术学院 </p>
</div>
<div class="institutions_box">
<p>天津轻工职业技术学院 </p>
</div>
<div class="institutions_box">
<p>天津交通职业学院 </p>
</div>
<div class="institutions_box">
<p>天津商务职业学院 </p>
</div>
<div class="institutions_box">
<p>天津公安警官职业学院 </p>
</div>
<!-- Repeat the above structure for each row -->
</div>
</div>
<div class="swiper-slide">
<div class="institutions_container">
<div class="institutions_box">
<p>天津海运职业学院 </p>
</div>
<div class="institutions_box">
<p>天津城市建设管理职业技术学院 </p>
</div>
<div class="institutions_box">
<p>天津滨海职业学院 </p>
</div>
<div class="institutions_box">
<p>天津机电职业技术学院 </p>
</div>
<div class="institutions_box">
<p>天津国土资源和房屋职业学院 </p>
</div>
</div>
<div class="institutions_container">
<div class="institutions_box">
<p>天津艺术职业学院 </p>
</div>
<div class="institutions_box">
<p>天津工业职业学院 </p>
</div>
<div class="institutions_box">
<p>天津石油职业技术学院 </p>
</div>
<div class="institutions_box">
<p>天津城市职业学院 </p>
</div>
<div class="institutions_box">
<p>天津铁道职业技术学院 </p>
</div>
</div>
<div class="institutions_container">
<div class="institutions_box">
<p>天津工艺美术职业学院 </p>
</div>
<div class="institutions_box">
<p>天津生物工程职业技术学院 </p>
</div>
<div class="institutions_box">
<p>天津体育职业学院 </p>
</div>
<div class="institutions_box">
<p>天津滨海汽车工程职业学院 </p>
</div>
<div class="institutions_box">
<p>南开大学滨海学院 </p>
</div>
<!-- Repeat the above structure for each row -->
</div>
</div>
<div class="swiper-slide">
<div class="institutions_container">
<div class="institutions_box">
<p>天津仁爱学院 </p>
</div>
<div class="institutions_box">
<p>天津医科大学临床医学院 </p>
</div>
<div class="institutions_box">
<p>天津商业大学宝德学院 </p>
</div>
</div>
<div class="institutions_container">
<div class="institutions_box">
<p>天津财经大学珠江学院 </p>
</div>
<div class="institutions_box">
<p>天津理工大学中环信息学院 </p>
</div>
<div class="institutions_box">
<p>天津外国语大学滨海外事学院 </p>
</div>
</div>
<div class="institutions_container">
<div class="institutions_box">
<p>天津传媒学院 </p>
</div>
<div class="institutions_box">
<p>北京科技大学天津学院 </p>
</div>
<div class="institutions_box">
<p>天津天狮学院 </p>
</div>
</div>
</div>
</div>
<div style="display: flex; align-items: center; justify-content: center; width: 100%">
<div class="scrollbar">
<div class="institutionsPrev"> </div>
<div class="institutionsScrollbar"></div>
<div class="institutionNext"> </div>
</div>
<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">数据集</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">文件</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</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="API产权名称">
<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>
</div>
</el-tabs>
<el-button-group>
<el-button plain class="back-button" type="text">
查看更多&nbsp;<Icon :size="24" icon="icon-park-solid:right-c"></Icon>
</el-button>
</el-button-group>
</div>
</div>
</div>
......@@ -744,856 +129,272 @@
</template>
<script>
export default {
name: 'Front',
data() {
return {
fileType: '', // 文件下载后缀
choseFile: {},
downloadType: '', // 1是本地文件下载，2是oss文件下载
activeName: 'first',
//track弹出框
dialogVisible: false,
dialogContent: {},
info_notice: {},
info_ad: {},
//下载资料集合
fileList: [],
//banner图
bannerPicture: {},
//通知公告和新闻动态图片
noticePicture1: {},
noticePicture2: {},
isShowDown: true,
downloadEntity: {
// 名称需要带文件类型，要不然默认为txt
fileUploadName: '项目推荐汇总表.xlsx',
fileAddress: '/profile/attachments/project-recommendation-summary.xlsx',
import Icon from '@/components/Icon/Icon.vue';
import { getToken } from '@/utils/auth';
export default {
name: 'demandHall',
components: { Icon },
data() {
return {
activeName: 'first',
activeName1: 'first',
activeName2: 'first',
cardLogo: 'src/assets/images/mallHome/biaoqian.png',
industryImg: 'src/assets/images/mallHome/行业动态.png',
dynamicImg: 'src/assets/images/mallHome/hangyedongtai.png',
items: [
{
id: '1',
url: 'src/assets/images/mallHome/banner1.png',
},
{
id: '2',
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: '图形学算法与应用分析数据',
},
{
applicationDate: '2016-05-01',
upDate: '2016-05-01',
name: '天津市融创软通科技股份有限公司',
address: '编程思想与设计模式分析数据',
},
{
applicationDate: '2016-05-03',
upDate: '2016-05-03',
name: '天津市融创软通科技股份有限公司',
address: '46-55岁人群对净水机满意度分析数据',
},
],
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
};
// 进入后台方法
toBackstage() {
console.log('activeIndex', this.activeIndex);
if (getToken()) {
this.$router.push({ path: '/homePage/index' });
} else {
this.$router.push({ path: '/login' });
}
// if (getToken()){
// this.$router.push({path: "/admin"});
// }else {
// this.$router.push({path: "/login"});
// }
},
},
};
</script>
<style scoped lang="scss">
/*报名参赛按钮*/
.text {
position: absolute;
left: 13.5%;
top: 75%;
text-align: center;
width: 130px;
height: 44px;
line-height: 44px;
background: #ffac27;
border-radius: 8px;
cursor: pointer;
font-size: 20px;
}
.text:hover {
background-color: #f59e12;
color: #fff;
}
.text:active {
background-color: #ffac27;
color: #fff;
}
/*报名参赛内容*/
.text span {
width: 60px;
height: 26px;
font-size: 20px;
font-weight: 700;
text-align: center;
color: #ffffff;
line-height: 23px;
}
/*小球*/
.ball {
position: sticky;
/*top: 0;*/
top: -40px;
margin-left: 70px;
z-index: 3;
}
/*小球背景图*/
.circle-img {
margin-top: 12vh;
position: relative;
width: 96px;
height: 96px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
}
/*小球的下拉菜单实现*/
.dropdown {
position: absolute;
/*top: 185px;*/
/*top: -48px;*/
margin-top: -48px;
width: 96px;
border-left: 2px solid #005dbd;
border-right: 2px solid #005dbd;
border-bottom: 2px solid #005dbd;
background-color: #fff;
list-style-type: none;
z-index: 5;
padding: 0;
}
/*下拉列表元素*/
.dropdown-item {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
padding: 10px 7px 10px 7px;
font-size: 15px;
}
.dropdown-item img {
width: 32px;
height: 32px;
margin-left: 1px;
}
.dropdown-item span {
margin-top: 10px;
font-size: 14px;
}
.dropdown-item:hover {
background: #d9e7f5;
color: #005dbd;
font-weight: 600;
}
/*公共容器 所有子页面共享的css样式*/
.commonContainer {
display: flex;
flex-direction: column;
/*justify-content: center; !* 垂直居中 *!*/
align-items: center; /* 水平居中 */
text-align: center;
position: relative;
}
/*子页面中文标题样式*/
.content-item-h3 {
width: 350px;
height: 43px;
font-size: 40px;
font-weight: 580;
z-index: 3;
color: #383737ff;
line-height: 43px;
letter-spacing: 10px;
margin: 60px 0 0 0;
}
.reward_container {
width: 1170px;
}
/*子页面标题样式*/
.common-item-title {
margin-left: 20px;
font-size: 40px;
z-index: 3;
line-height: 47px;
font-weight: 700;
color: #292929;
}
/*子页面英文标题样式*/
.letter {
top: -18px;
height: 67px;
font-size: 57px;
text-shadow: 0 0 4px #fff;
z-index: 0;
font-weight: 400;
text-align: left;
color: rgba(0, 0, 0, 0.08);
line-height: 67px;
position: relative;
}
/*英文标题特殊下划线*/
.letter::before {
content: '';
top: 52px;
position: absolute; /*脱离文档流 设置其位置*/
width: 68px; /* 调整边框的长度 */
height: 3px;
background-color: #005dbd;
margin-left: 43%;
/*left: 39%; !* 边框在下边框的位置 *!*/
border-radius: 5px;
}
/*给不同的英文标题下划线设置不同的样式 伪元素实现*/
.track .letter::before {
background-color: #f35457ff;
width: 68px;
}
.race .letter::before {
background-color: white;
width: 68px;
}
.reward .letter::before {
background-color: white;
width: 68px;
}
.download .letter::before {
width: 68px;
margin-left: 45%;
}
.institutions .letter::before {
width: 68px;
margin-left: 46%;
}
.item-content-box {
display: flex;
flex-direction: column;
align-items: center;
}
/*info子页面*/
.information {
background-image: url('../../../assets/images/home/home_information.png');
background-size: 100% 665px;
background-repeat: no-repeat;
width: 100%;
}
.info_wrapper {
display: flex;
margin-top: 60px;
margin-bottom: 60px;
}
/*info内容容器*/
.info_content {
width: 570px;
height: 411px;
/*margin: 20px 20px 20px 0;*/
background-color: #e6f0ff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
position: relative;
border-radius: 20px; /* 添加圆角边框 */
display: flex;
flex-direction: column; /*上下布局*/
}
.info_content_second {
width: 1140px;
height: 411px;
/*margin: 20px 20px 20px 0;*/
background-color: #e6f0ff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
position: relative;
border-radius: 20px; /* 添加圆角边框 */
display: flex;
flex-direction: column; /*上下布局*/
}
/*内容头部*/
.info_header {
display: flex;
justify-content: space-between;
padding: 7px 0 7px 0;
border-bottom: 1px solid #ccc;
}
/*头部 图标*/
.info_img {
margin-left: 20px;
margin-right: 10px;
width: 32px;
height: 32px;
top: 3px;
position: relative;
}
/*头部 查看更多超链接*/
.more-link {
margin-right: 20px;
display: flex;
align-items: center;
}
.more-link:hover {
color: #005dbd;
font-size: 16px;
margin-right: 20px;
font-weight: 600;
}
/*内容信息容器*/
.notice_container {
background-color: white;
flex: 1; /* 占有容器全部空间*/
border-radius: 0 0 20px 20px;
}
/*数据遍历容器*/
.notice {
height: 95px;
display: flex;
/*align-items: center;*/
margin: 20px 0px;
/*border-bottom: 2px dotted #ccc;*/
/*padding-bottom: 10px;*/
/*padding-right: 5px;*/
padding: 5px 2%;
position: relative;
}
.notice:not(:last-child):before {
content: '';
position: absolute;
left: 4%;
/*top: 0;*/
bottom: -7px;
right: auto;
height: 1px;
width: 92%;
border-bottom: 2px dashed #e4e4e4;
}
.notice:last-child {
border-bottom: none; /* 最后一个notice去掉底部边框 */
}
/*图片*/
.notice-image {
flex: 0 0 100px; /*三属性合一*/
margin-right: 20px;
margin-left: 15px;
}
.notice-image img {
width: 120px;
height: 80px;
border-radius: 6px;
}
/*数据容器*/
.notice-content {
flex: 1;
display: flex;
flex-direction: column;
}
/*内容*/
.notice-text {
text-align: left;
margin-bottom: 5px;
font-size: 17px;
font-weight: 540;
color: #333333;
line-height: 28px;
cursor: pointer;
display: -webkit-box;
overflow: hidden;
text-overflow: inherit;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/*日期*/
.notice-time {
/*margin-top: 20px;*/
bottom: 10px;
position: absolute;
width: 179px;
height: 18px;
font-size: 14px;
font-weight: 400;
text-align: LEFT;
color: #969696;
line-height: 18px;
}
/*奖励计划相关的css样式*/
.reward {
width: 100%;
}
/*奖励计划 上div*/
.reward_top {
display: flex;
width: 1170px;
border-bottom: 1px solid gray;
margin-bottom: 25px;
}
.reward_top img {
margin-right: 10px; /* 图片右边距 */
width: 180px;
height: 45px;
margin-left: -6px;
}
/*奖励计划 中div*/
.reward_center {
display: flex;
align-items: center;
}
/*左边*/
.left-container {
display: flex;
flex-direction: column;
padding: 20px 0;
margin-left: 20px;
width: 187px;
}
.left-container .reward_title {
width: 100%;
height: 32px;
font-size: 24px;
display: flex;
align-items: center;
font-weight: 400;
text-align: LEFT;
color: #ffffff;
line-height: 32px;
}
.left-container .reward_title .reward_icon {
margin-left: 10px;
top: 4px;
float: right;
width: 42px;
/*公共容器 所有子页面共享的css样式*/
.commonContainer {
display: flex;
flex-direction: column;
/*justify-content: center; !* 垂直居中 *!*/
align-items: center; /* 水平居中 */
text-align: center;
position: relative;
}
/*子页面中文标题样式*/
.content-item-h3 {
height: 43px;
font-size: 36px;
font-weight: 580;
z-index: 3;
color: #383737ff;
line-height: 43px;
letter-spacing: 10px;
margin: 60px 0 0 0;
}
.title_bottom {
margin-top: 40px;
font-size: 24px;
font-weight: 500;
color: #a3a3a3;
letter-spacing: 4px;
}
.item-content-box {
display: flex;
flex-direction: column;
align-items: center;
}
.carouselImg {
width: 100%;
height: 100%;
}
.tab-pane {
position: relative;
margin-top: 80px;
width: 1440px;
display: flex;
}
//tabs 按钮
.back-button {
position: absolute;
top: 0;
right: 0;
font-size: 18px;
margin-top: 3px;
color: #3a5cde;
}
.card-row {
display: flex;
justify-content: space-around;
margin-top: 20px;
font-size: 18px;
text-align: left;
p {
margin-top: 18px;
height: 24px;
background: #e85252;
border-radius: 20px;
position: relative;
font-size: 14px;
}
.reward_icon span {
position: absolute;
left: 13px;
top: 3px;
width: 10px;
height: 18px;
font-size: 14px;
font-weight: 400;
text-align: center;
color: #ffffff;
line-height: 16px;
}
.subtitle {
width: 48px;
height: 32px;
font-size: 24px;
font-weight: 400;
text-align: LEFT;
color: rgba(255, 255, 255, 0.75);
line-height: 28px;
position: relative;
}
.subtitle::before {
content: '';
top: 34px;
display: block;
position: absolute;
width: 65%; /* 调整边框的长度 */
height: 2px;
background-color: #c03639;
bottom: 0;
left: 0%; /* 边框在下边框的中间位置 */
border-radius: 2px;
}
/*右边*/
.right-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
margin-left: 5px;
}
/*奖项容器*/
.item {
margin-left: 20px;
display: flex;
flex-direction: column;
align-items: center;
width: 220px;
height: 130px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}
.right-container .item img {
width: 36px;
height: 36px;
}
.right-container .item .item_text {
margin-top: 15px;
width: 147px;
height: 37px;
font-size: 28px;
font-weight: 700;
text-align: center;
color: #292929;
line-height: 33px;
.card-left {
width: 28%;
color: #707070;
}
/*金额*/
.right-container .item .amount {
width: 107px;
height: 32px;
font-size: 16px;
font-weight: 400;
text-align: center;
color: #d32f2f;
line-height: 19px;
margin-top: 10px;
.card-right {
width: 68%;
color: #3f3f3f;
}
}
/*底部容器*/
.reward_bottom {
margin-top: 60px;
margin-bottom: 80px;
position: relative;
}
/*特殊奖励图片*/
.reward_bottom img:first-child {
position: absolute;
left: 0px;
top: -45px;
width: 180px;
height: 45px;
}
.tab-label {
font-size: 24px;
font-weight: 700;
}
/*左侧说明文字*/
.reward_bottom .image_text01 {
position: absolute;
top: 80px;
left: 60px;
width: 60%;
height: 180px;
font-size: 20px;
font-weight: 400;
text-align: LEFT;
color: #333333;
line-height: 36px;
}
.card_bottom {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
/*右侧说明文字*/
.reward_bottom .image_text02 {
position: absolute;
top: 20px;
right: 45px;
width: 310px;
height: 144px;
font-size: 20px;
font-weight: 400;
text-align: LEFT;
color: #ffffff;
line-height: 36px;
text-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
.button {
color: #1962e2;
border: #1962e2 2px solid;
}
}
/*track容器*/
.track {
background-image: url('../../../assets/images/home/home_track.png');
background-size: 100% auto;
background-repeat: no-repeat;
height: 702px;
}
.industry {
width: 100%;
margin-top: 100px;
background-color: #eff3fa;
display: flex;
flex-direction: column;
align-items: center;
.track_region {
.industry-row {
width: 1440px;
margin-top: 72px;
margin-bottom: 72px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 1170px;
}
/*长方形容器*/
.box {
position: relative;
width: 49%;
height: 244px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
padding: 10px;
}
/*左上角正三角图片*/
.triangle {
position: absolute;
top: 0;
left: 0;
width: 74px;
height: 74px;
background-size: cover;
}
/*右上角数字图片*/
.image {
position: absolute;
top: 0;
right: 3px;
width: 94px;
height: 94px;
/*background: url('path/to/your/image.jpg') no-repeat;*/
background-size: cover;
/*filter: blur(5px);*/
}
.track_title {
width: 100%;
height: 30px;
margin-left: 32px;
margin-top: 26px;
font-size: 24px;
font-weight: 700;
text-align: LEFT;
color: #333333;
line-height: 30px;
}
.track_content {
margin-left: 30px;
height: 35%;
color: #686a6c;
margin-top: 25px;
text-align: left;
/*margin-right: 30px;*/
font-size: 17px;
}
/*查看详情按钮*/
.detail {
width: 148px;
height: 50px;
bottom: 10px;
/*margin-top: 40px;*/
background: #ffffff;
border: 1px solid #005dbd;
border-bottom-color: #005dbd;
border-radius: 8px;
font-size: 17px;
font-weight: 500;
color: #005dbd;
cursor: pointer;
}
.detail:hover {
/* 设置移动鼠标后的文本颜色 */
background: #005dbd;
color: #ffffff;
}
.detail:active {
background: #026edd;
.row-left {
width: 464px;
height: 400px;
border-radius: 8px;
background-color: #ffffff;
padding: 37px 24px 24px 24px;
.big-event {
display: flex;
align-items: center;
}
}
.row-right {
border-radius: 8px;
background-color: #ffffff;
width: 952px;
height: 400px;
padding: 33px 24px 24px 24px;
.right-li {
display: flex;
justify-content: space-between;
font-size: 18px;
margin: 30px 20px 20px 0;
.li-left {
}
.li-middle {
width: 76%;
color: #3f3f3f;
}
.li-right {
color: #9c9c9c;
}
}
}
}
}
.custom-table {
margin-bottom: 72px;
}
.table-span {
color: #1962e2;
margin-left: 80px;
}
.table-span-label {
margin-left: 80px;
}
.row-footer{
height: 242px;
opacity: 0.8;
background-color: #1962E2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
.footer-title{
height: 48px;
color: #ffffff;
/* 设置点击后的文本颜色 */
}
/*download和institutions的父容器*/
.union {
background-image: url('../../../assets/images/home/home_union.png');
background-size: 100% auto;
background-repeat: no-repeat;
width: 100%;
}
/*下载容器*/
.download {
}
.download_outer_container {
position: relative;
width: 1170px;
display: flex;
flex-direction: column;
/*align-items: center;*/
overflow: hidden;
}
/*水平滑动的盒子容器*/
.download_inner_container {
width: 800px;
/*display: inline-block;*/
display: flex;
/*overflow: hidden;*/
/*margin: 0 auto; !* 居中 *!*/
/*width: calc(4 * (240px + 40px)); !* 每个盒子的宽度加上 margin *!*/
height: 200px;
align-items: center;
/*padding: 0 0px 0 0px;*/
}
/*盒子*/
.download_box {
display: flex;
flex-direction: column;
align-items: center;
/*padding: 10px;*/
width: 250px;
height: 124px;
margin-left: 10px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
/*transition: transform 3s;*/
cursor: pointer;
}
.download_box img {
width: 54px;
height: 54px;
}
.download_box p {
width: 246px;
height: 26px;
font-size: 20px;
font-weight: 700;
text-align: CENTER;
color: #333333;
line-height: 23px;
}
/*滚动条+左右箭头容器*/
.scrollbar {
display: flex;
align-items: center;
margin-top: 10px;
width: 400px;
/*margin-left: 450px;*/
}
/*滚动条样式修改*/
::v-deep .swiper-scrollbar-drag {
height: 6px !important;
border-radius: 10px;
}
/*学院容器*/
.institutions {
margin-top: 20px;
padding-bottom: 80px;
}
.institutions_outer_container {
position: relative;
width: 1170px;
display: flex;
flex-direction: column;
/*align-items: center;*/
overflow: hidden;
}
.institutions_inner_container {
width: 800px;
display: flex;
align-items: flex-start;
}
/*一行学校容器*/
.institutions_container {
display: flex;
margin-bottom: 50px;
}
/*单个学校容器*/
.institutions_box {
width: 212px;
height: 107px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
text-align: center;
margin: 10px;
position: relative; /* Enable relative positioning */
display: flex;
justify-content: center;
align-items: center;
}
.institutions_box img {
width: 65px;
height: 65px;
}
.institutions_box p {
position: absolute;
bottom: -50px;
text-align: center;
width: 100%;
height: 22px;
font-size: 17px;
font-weight: 400;
color: #333333;
line-height: 20px;
}
.info_header span {
width: 48px;
height: 32px;
margin-left: 5px;
font-size: 22px;
font-weight: bold;
text-align: LEFT;
color: #005dbd;
line-height: 28px;
}
/*element-UI对话框css样式设置*/
/*对话框标题*/
::v-deep .el-dialog__title {
font-size: 26px;
font-weight: bold;
font-size: 32px;
font-weight: 500;
}
/*对话框的header部分*/
::v-deep .el-dialog__header {
background-color: #f9f9f9;
height: 60px;
.footer-button{
width: 160px;
height: 51px;
font-size: 18px;
background-color: #FFFFFF;
color: #1962E2;
}
}
/*对话框滚动条设置*/
.dialog-container {
max-height: 75vh; /* 调整为你希望的最大高度 */
overflow-y: auto;
padding: 10px 20px;
}
::v-deep .el-tabs__nav-scroll {
width: 50%;
margin: 0 auto;
}
/*去掉tabs底部的下划线*/
::v-deep .el-tabs__nav-wrap::after {
position: static !important;
}
::v-deep .el-tabs__item {
height: 70px;
}
</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