Skip to content

B
bigDataSystem
Commit 59679b5f authored by baiyinhao's avatar baiyinhao
Browse files
Options

修改页面

parent 3cc9e1ed
Show whitespace changes
Inline Side-by-side
Showing with 515 additions and 1041 deletions
src/views/AAAFont/nationalPolicy/index.vue
View file @ 59679b5f
...@@ -2,32 +2,6 @@ ...@@ -2,32 +2,6 @@
<div class="mainContainer" id="main"> <div class="mainContainer" id="main">
<!--sub容器包含了一个个子页面 例如info race--> <!--sub容器包含了一个个子页面 例如info race-->
<div class="subContainer"> <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"> <div class="information item-content-box" id="info">
<!--公共容器 info_right 包含了标题和字母栏--> <!--公共容器 info_right 包含了标题和字母栏-->
...@@ -35,85 +9,8 @@ ...@@ -35,85 +9,8 @@
<!--对公共容器应用子页面专属css样式--> <!--对公共容器应用子页面专属css样式-->
<!-- <div class="common-item-title">大赛资讯</div>--> <!-- <div class="common-item-title">大赛资讯</div>-->
<!-- <div class="letter">INFORMATION</div>--> <!-- <div class="letter">INFORMATION</div>-->
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="大赛资讯" name="first"> <template>
<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> <span class="common-item-title">体彩服务社会</span>
</template> </template>
<div class="info_wrapper"> <div class="info_wrapper">
...@@ -121,7 +18,7 @@ ...@@ -121,7 +18,7 @@
<!-- 头部栏--> <!-- 头部栏-->
<div class="info_header"> <div class="info_header">
<div> <div>
<div class="info_title" style="float: right; height: 33px; padding-top: 7px"> <div class="info_title" style="height: 33px; padding-top: 7px; float: right">
</div> </div>
</div> </div>
</div> </div>
...@@ -133,11 +30,9 @@ ...@@ -133,11 +30,9 @@
<div class="notice-image"> </div> <div class="notice-image"> </div>
<!-- 内容--> <!-- 内容-->
<div class="notice-content"> <div class="notice-content">
<div <div class="notice-text" @click="sportsLottery('体彩公益公信宣传之一')">{{
class="notice-text" '体彩公益公信宣传之一：体彩公益金是怎么来的？'
@click="sportsLottery('体彩公益公信宣传之一')" }}</div>
>{{ '体彩公益公信宣传之一：体彩公益金是怎么来的？' }}</div
>
<div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div> <div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div>
</div> </div>
</div> </div>
...@@ -147,11 +42,9 @@ ...@@ -147,11 +42,9 @@
<div class="notice-image"> </div> <div class="notice-image"> </div>
<!-- 内容--> <!-- 内容-->
<div class="notice-content"> <div class="notice-content">
<div <div class="notice-text" @click="sportsLottery('体彩公益公信宣传之二')">{{
class="notice-text" '体彩公益公信宣传之二：体彩公益金用在哪里了？'
@click="sportsLottery('体彩公益公信宣传之二')" }}</div>
>{{ '体彩公益公信宣传之二：体彩公益金用在哪里了？' }}</div
>
<div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div> <div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div>
</div> </div>
</div> </div>
...@@ -163,13 +56,9 @@ ...@@ -163,13 +56,9 @@
<div class="notice-image"> </div> <div class="notice-image"> </div>
<!-- 内容--> <!-- 内容-->
<div class="notice-content"> <div class="notice-content">
<div <div class="notice-text" @click="sportsLottery('体彩公益公信宣传之三')">{{
class="notice-text"
@click="sportsLottery('体彩公益公信宣传之三')"
>{{
'体彩公益公信宣传之三：汇聚微光 增进民生福祉 体彩公益金为人民美好生活赋能添彩' '体彩公益公信宣传之三：汇聚微光 增进民生福祉 体彩公益金为人民美好生活赋能添彩'
}}</div }}</div>
>
<div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div> <div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div>
</div> </div>
</div> </div>
...@@ -179,13 +68,9 @@ ...@@ -179,13 +68,9 @@
<div class="notice-image"> </div> <div class="notice-image"> </div>
<!-- 内容--> <!-- 内容-->
<div class="notice-content"> <div class="notice-content">
<div <div class="notice-text" @click="sportsLottery('体彩公益公信宣传之四')">{{
class="notice-text"
@click="sportsLottery('体彩公益公信宣传之四')"
>{{
'体彩公益公信宣传之四：聚沙成塔 涓流成河体彩公益金 “益”起赋能美好生活' '体彩公益公信宣传之四：聚沙成塔 涓流成河体彩公益金 “益”起赋能美好生活'
}}</div }}</div>
>
<div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div> <div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div>
</div> </div>
</div> </div>
...@@ -197,13 +82,9 @@ ...@@ -197,13 +82,9 @@
<div class="notice-image"> </div> <div class="notice-image"> </div>
<!-- 内容--> <!-- 内容-->
<div class="notice-content"> <div class="notice-content">
<div <div class="notice-text" @click="sportsLottery('体彩公益公信宣传之五')">{{
class="notice-text"
@click="sportsLottery('体彩公益公信宣传之五')"
>{{
'体彩公益公信宣传之五：“津”彩微光“益”路同行天津体彩做公益公信的践行者' '体彩公益公信宣传之五：“津”彩微光“益”路同行天津体彩做公益公信的践行者'
}}</div }}</div>
>
<div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div> <div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div>
</div> </div>
</div> </div>
...@@ -213,11 +94,9 @@ ...@@ -213,11 +94,9 @@
<div class="notice-image"> </div> <div class="notice-image"> </div>
<!-- 内容--> <!-- 内容-->
<div class="notice-content"> <div class="notice-content">
<div <div class="notice-text" @click="sportsLottery('体彩公益公信宣传之六')">{{
class="notice-text" '体彩公益公信宣传之六：体育彩票的开奖现场是这样的'
@click="sportsLottery('体彩公益公信宣传之六')" }}</div>
>{{ '体彩公益公信宣传之六：体育彩票的开奖现场是这样的' }}</div
>
<div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div> <div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div>
</div> </div>
</div> </div>
...@@ -227,11 +106,11 @@ ...@@ -227,11 +106,11 @@
<div <div
v-if="noticeShow" v-if="noticeShow"
style=" style="
width: 100%;
height: 100%;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
justify-content: center;
width: 100%;
height: 100%;
" "
> >
<!-- 无数据时显示该图片--> <!-- 无数据时显示该图片-->
...@@ -239,504 +118,6 @@ ...@@ -239,504 +118,6 @@
</div> </div>
</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="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>
</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>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -775,85 +156,89 @@ ...@@ -775,85 +156,89 @@
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
/*报名参赛按钮*/ /* 报名参赛按钮 */
.text { .text {
position: absolute; position: absolute;
left: 13.5%;
top: 75%; top: 75%;
text-align: center; left: 13.5%;
width: 130px; width: 130px;
height: 44px; height: 44px;
line-height: 44px;
background: #ffac27;
border-radius: 8px; border-radius: 8px;
cursor: pointer; background: #ffac27;
font-size: 20px; font-size: 20px;
line-height: 44px;
text-align: center;
cursor: pointer;
} }
.text:hover { .text:hover {
background-color: #f59e12; background-color: #f59e12;
color: #fff; color: #fff;
} }
.text:active { .text:active {
background-color: #ffac27; background-color: #ffac27;
color: #fff; color: #fff;
} }
/*报名参赛内容*/ /* 报名参赛内容 */
.text span { .text span {
width: 60px; width: 60px;
height: 26px; height: 26px;
color: #fff;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
text-align: center;
color: #ffffff;
line-height: 23px; line-height: 23px;
text-align: center;
} }
/*小球*/ /* 小球 */
.ball { .ball {
position: sticky; position: sticky;
/*top: 0;*/ z-index: 3;
/* top: 0; */
top: -40px; top: -40px;
margin-left: 70px; margin-left: 70px;
z-index: 3;
} }
/*小球背景图*/ /* 小球背景图 */
.circle-img { .circle-img {
margin-top: 12vh;
position: relative; position: relative;
z-index: 10;
width: 96px; width: 96px;
height: 96px; height: 96px;
margin-top: 12vh;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
z-index: 10;
} }
/*小球的下拉菜单实现*/ /* 小球的下拉菜单实现 */
.dropdown { .dropdown {
position: absolute; position: absolute;
/*top: 185px;*/ z-index: 5;
/*top: -48px;*/
margin-top: -48px;
width: 96px; width: 96px;
border-left: 2px solid #005dbd;
/* top: 185px; */
/* top: -48px; */
margin-top: -48px;
padding: 0;
list-style-type: none;
border-right: 2px solid #005dbd; border-right: 2px solid #005dbd;
border-bottom: 2px solid #005dbd; border-bottom: 2px solid #005dbd;
border-left: 2px solid #005dbd;
background-color: #fff; background-color: #fff;
list-style-type: none;
z-index: 5;
padding: 0;
} }
/*下拉列表元素*/ /* 下拉列表元素 */
.dropdown-item { .dropdown-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
cursor: pointer; padding: 10px 7px;
padding: 10px 7px 10px 7px;
font-size: 15px; font-size: 15px;
cursor: pointer;
} }
.dropdown-item img { .dropdown-item img {
...@@ -873,82 +258,86 @@ ...@@ -873,82 +258,86 @@
font-weight: 600; font-weight: 600;
} }
/*公共容器 所有子页面共享的css样式*/ /* 公共容器 所有子页面共享的css样式 */
.commonContainer { .commonContainer {
display: flex; display: flex;
position: relative;
flex-direction: column; flex-direction: column;
/*justify-content: center; !* 垂直居中 *!*/
/* justify-content: center; !* 垂直居中 *! */
align-items: center; /* 水平居中 */ align-items: center; /* 水平居中 */
text-align: center; text-align: center;
position: relative;
} }
/*子页面中文标题样式*/ /* 子页面中文标题样式 */
.content-item-h3 { .content-item-h3 {
z-index: 3;
width: 350px; width: 350px;
height: 43px; height: 43px;
margin: 60px 0 0;
color: #383737ff;
font-size: 40px; font-size: 40px;
font-weight: 580; font-weight: 580;
z-index: 3;
color: #383737ff;
line-height: 43px;
letter-spacing: 10px; letter-spacing: 10px;
margin: 60px 0 0 0; line-height: 43px;
} }
.reward_container { .reward_container {
width: 1170px; width: 1170px;
} }
/*子页面标题样式*/
/* 子页面标题样式 */
.common-item-title { .common-item-title {
z-index: 3;
margin-left: 20px; margin-left: 20px;
color: #292929;
font-size: 40px; font-size: 40px;
z-index: 3;
line-height: 47px;
font-weight: 700; font-weight: 700;
color: #292929; line-height: 47px;
} }
/*子页面英文标题样式*/
/* 子页面英文标题样式 */
.letter { .letter {
position: relative;
z-index: 0;
top: -18px; top: -18px;
height: 67px; height: 67px;
color: rgb(0 0 0 / 8%);
font-size: 57px; font-size: 57px;
text-shadow: 0 0 4px #fff;
z-index: 0;
font-weight: 400; font-weight: 400;
text-align: left;
color: rgba(0, 0, 0, 0.08);
line-height: 67px; line-height: 67px;
position: relative; text-align: left;
text-shadow: 0 0 4px #fff;
} }
/*英文标题特殊下划线*/ /* 英文标题特殊下划线 */
.letter::before { .letter::before {
content: ''; content: '';
position: absolute; /* 脱离文档流 设置其位置 */
top: 52px; top: 52px;
position: absolute; /*脱离文档流 设置其位置*/
width: 68px; /* 调整边框的长度 */ width: 68px; /* 调整边框的长度 */
height: 3px; height: 3px;
background-color: #005dbd;
margin-left: 43%; margin-left: 43%;
/*left: 39%; !* 边框在下边框的位置 *!*/
/* left: 39%; !* 边框在下边框的位置 *! */
border-radius: 5px; border-radius: 5px;
background-color: #005dbd;
} }
/*给不同的英文标题下划线设置不同的样式 伪元素实现*/ /* 给不同的英文标题下划线设置不同的样式 伪元素实现 */
.track .letter::before { .track .letter::before {
background-color: #f35457ff;
width: 68px; width: 68px;
background-color: #f35457ff;
} }
.race .letter::before { .race .letter::before {
background-color: white;
width: 68px; width: 68px;
background-color: white;
} }
.reward .letter::before { .reward .letter::before {
background-color: white;
width: 68px; width: 68px;
background-color: white;
} }
.download .letter::before { .download .letter::before {
...@@ -967,12 +356,12 @@ ...@@ -967,12 +356,12 @@
align-items: center; align-items: center;
} }
/*info子页面*/ /* info子页面 */
.information { .information {
width: 100%;
background-image: url('../../../assets/images/home/home_information.png'); background-image: url('../../../assets/images/home/home_information.png');
background-size: 100% 665px;
background-repeat: no-repeat; background-repeat: no-repeat;
width: 100%; background-size: 100% 665px;
} }
.info_wrapper { .info_wrapper {
...@@ -981,91 +370,99 @@ ...@@ -981,91 +370,99 @@
margin-bottom: 60px; margin-bottom: 60px;
} }
/*info内容容器*/ /* info内容容器 */
.info_content { .info_content {
display: flex;
position: relative;
flex-direction: column; /* 上下布局 */
width: 570px; width: 570px;
height: 411px; 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; /* 添加圆角边框 */ border-radius: 20px; /* 添加圆角边框 */
display: flex;
flex-direction: column; /*上下布局*/ /* margin: 20px 20px 20px 0; */
background-color: #e6f0ff;
box-shadow: 0 0 10px rgb(0 0 0 / 10%);
} }
.info_content_second { .info_content_second {
display: flex;
position: relative;
flex-direction: column; /* 上下布局 */
width: 1140px; width: 1140px;
height: 411px; 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; /* 添加圆角边框 */ border-radius: 20px; /* 添加圆角边框 */
display: flex;
flex-direction: column; /*上下布局*/ /* margin: 20px 20px 20px 0; */
background-color: #e6f0ff;
box-shadow: 0 0 10px rgb(0 0 0 / 10%);
} }
/*内容头部*/ /* 内容头部 */
.info_header { .info_header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 7px 0 7px 0; padding: 7px 0;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
/*头部 图标*/ /* 头部 图标 */
.info_img { .info_img {
margin-left: 20px; position: relative;
margin-right: 10px; top: 3px;
width: 32px; width: 32px;
height: 32px; height: 32px;
top: 3px; margin-right: 10px;
position: relative; margin-left: 20px;
} }
/*头部 查看更多超链接*/ /* 头部 查看更多超链接 */
.more-link { .more-link {
margin-right: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 20px;
} }
.more-link:hover { .more-link:hover {
margin-right: 20px;
color: #005dbd; color: #005dbd;
font-size: 16px; font-size: 16px;
margin-right: 20px;
font-weight: 600; font-weight: 600;
} }
/*内容信息容器*/ /* 内容信息容器 */
.notice_container { .notice_container {
background-color: white; flex: 1; /* 占有容器全部空间 */
flex: 1; /* 占有容器全部空间*/
border-radius: 0 0 20px 20px; border-radius: 0 0 20px 20px;
background-color: white;
} }
/*数据遍历容器*/ /* 数据遍历容器 */
.notice { .notice {
height: 95px;
display: flex; display: flex;
/*align-items: center;*/
margin: 20px 0px;
/*border-bottom: 2px dotted #ccc;*/
/*padding-bottom: 10px;*/
/*padding-right: 5px;*/
padding: 5px 2%;
position: relative; position: relative;
height: 95px;
/* align-items: center; */
margin: 20px 0;
/* border-bottom: 2px dotted #ccc; */
/* padding-bottom: 10px; */
/* padding-right: 5px; */
padding: 5px 2%;
} }
.notice:not(:last-child):before { .notice:not(:last-child)::before {
content: ''; content: '';
position: absolute; position: absolute;
left: 4%;
/*top: 0;*/
bottom: -7px;
right: auto; right: auto;
height: 1px;
/* top: 0; */
bottom: -7px;
left: 4%;
width: 92%; width: 92%;
height: 1px;
border-bottom: 2px dashed #e4e4e4; border-bottom: 2px dashed #e4e4e4;
} }
...@@ -1073,9 +470,9 @@ ...@@ -1073,9 +470,9 @@
border-bottom: none; /* 最后一个notice去掉底部边框 */ border-bottom: none; /* 最后一个notice去掉底部边框 */
} }
/*图片*/ /* 图片 */
.notice-image { .notice-image {
flex: 0 0 100px; /*三属性合一*/ flex: 0 0 100px; /* 三属性合一 */
margin-right: 20px; margin-right: 20px;
margin-left: 15px; margin-left: 15px;
} }
...@@ -1086,159 +483,160 @@ ...@@ -1086,159 +483,160 @@
border-radius: 6px; border-radius: 6px;
} }
/*数据容器*/ /* 数据容器 */
.notice-content { .notice-content {
flex: 1;
display: flex; display: flex;
flex: 1;
flex-direction: column; flex-direction: column;
} }
/*内容*/ /* 内容 */
.notice-text { .notice-text {
text-align: left; display: -webkit-box;
margin-bottom: 5px; margin-bottom: 5px;
overflow: hidden;
color: #333;
font-size: 17px; font-size: 17px;
font-weight: 540; font-weight: 540;
color: #333333;
line-height: 28px; line-height: 28px;
cursor: pointer; text-align: left;
display: -webkit-box;
overflow: hidden;
text-overflow: inherit; text-overflow: inherit;
cursor: pointer;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
/*日期*/ /* 日期 */
.notice-time { .notice-time {
/*margin-top: 20px;*/
bottom: 10px;
position: absolute; position: absolute;
/* margin-top: 20px; */
bottom: 10px;
width: 179px; width: 179px;
height: 18px; height: 18px;
color: #969696;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
text-align: LEFT;
color: #969696;
line-height: 18px; line-height: 18px;
text-align: left;
} }
/*奖励计划相关的css样式*/ /* 奖励计划相关的css样式 */
.reward { .reward {
width: 100%; width: 100%;
} }
/*奖励计划 上div*/ /* 奖励计划 上div */
.reward_top { .reward_top {
display: flex; display: flex;
width: 1170px; width: 1170px;
border-bottom: 1px solid gray;
margin-bottom: 25px; margin-bottom: 25px;
border-bottom: 1px solid gray;
} }
.reward_top img { .reward_top img {
margin-right: 10px; /* 图片右边距 */
width: 180px; width: 180px;
height: 45px; height: 45px;
margin-right: 10px; /* 图片右边距 */
margin-left: -6px; margin-left: -6px;
} }
/*奖励计划 中div*/ /* 奖励计划 中div */
.reward_center { .reward_center {
display: flex; display: flex;
align-items: center; align-items: center;
} }
/*左边*/ /* 左边 */
.left-container { .left-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px 0;
margin-left: 20px;
width: 187px; width: 187px;
margin-left: 20px;
padding: 20px 0;
} }
.left-container .reward_title { .left-container .reward_title {
display: flex;
align-items: center;
width: 100%; width: 100%;
height: 32px; height: 32px;
color: #fff;
font-size: 24px; font-size: 24px;
display: flex;
align-items: center;
font-weight: 400; font-weight: 400;
text-align: LEFT;
color: #ffffff;
line-height: 32px; line-height: 32px;
text-align: left;
} }
.left-container .reward_title .reward_icon { .left-container .reward_title .reward_icon {
margin-left: 10px; position: relative;
top: 4px; top: 4px;
float: right;
width: 42px; width: 42px;
height: 24px; height: 24px;
background: #e85252; margin-left: 10px;
float: right;
border-radius: 20px; border-radius: 20px;
position: relative; background: #e85252;
font-size: 14px; font-size: 14px;
} }
.reward_icon span { .reward_icon span {
position: absolute; position: absolute;
left: 13px;
top: 3px; top: 3px;
left: 13px;
width: 10px; width: 10px;
height: 18px; height: 18px;
color: #fff;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
text-align: center;
color: #ffffff;
line-height: 16px; line-height: 16px;
text-align: center;
} }
.subtitle { .subtitle {
position: relative;
width: 48px; width: 48px;
height: 32px; height: 32px;
color: rgb(255 255 255 / 75%);
font-size: 24px; font-size: 24px;
font-weight: 400; font-weight: 400;
text-align: LEFT;
color: rgba(255, 255, 255, 0.75);
line-height: 28px; line-height: 28px;
position: relative; text-align: left;
} }
.subtitle::before { .subtitle::before {
content: ''; content: '';
top: 34px;
display: block; display: block;
position: absolute; position: absolute;
width: 65%; /* 调整边框的长度 */ top: 34px;
height: 2px;
background-color: #c03639;
bottom: 0; bottom: 0;
left: 0%; /* 边框在下边框的中间位置 */ left: 0%; /* 边框在下边框的中间位置 */
width: 65%; /* 调整边框的长度 */
height: 2px;
border-radius: 2px; border-radius: 2px;
background-color: #c03639;
} }
/*右边*/ /* 右边 */
.right-container { .right-container {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
padding: 20px 0; justify-content: space-between;
margin-left: 5px; margin-left: 5px;
padding: 20px 0;
} }
/*奖项容器*/ /* 奖项容器 */
.item { .item {
margin-left: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 220px; width: 220px;
height: 130px; height: 130px;
background: #ffffff; margin-left: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25); background: #fff;
box-shadow: 0 0 10px 0 rgb(0 0 0 / 25%);
} }
.right-container .item img { .right-container .item img {
...@@ -1247,101 +645,101 @@ ...@@ -1247,101 +645,101 @@
} }
.right-container .item .item_text { .right-container .item .item_text {
margin-top: 15px;
width: 147px; width: 147px;
height: 37px; height: 37px;
margin-top: 15px;
color: #292929;
font-size: 28px; font-size: 28px;
font-weight: 700; font-weight: 700;
text-align: center;
color: #292929;
line-height: 33px; line-height: 33px;
text-align: center;
} }
/*金额*/ /* 金额 */
.right-container .item .amount { .right-container .item .amount {
width: 107px; width: 107px;
height: 32px; height: 32px;
margin-top: 10px;
color: #d32f2f;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
text-align: center;
color: #d32f2f;
line-height: 19px; line-height: 19px;
margin-top: 10px; text-align: center;
} }
/*底部容器*/ /* 底部容器 */
.reward_bottom { .reward_bottom {
position: relative;
margin-top: 60px; margin-top: 60px;
margin-bottom: 80px; margin-bottom: 80px;
position: relative;
} }
/*特殊奖励图片*/ /* 特殊奖励图片 */
.reward_bottom img:first-child { .reward_bottom img:first-child {
position: absolute; position: absolute;
left: 0px;
top: -45px; top: -45px;
left: 0;
width: 180px; width: 180px;
height: 45px; height: 45px;
} }
/*左侧说明文字*/ /* 左侧说明文字 */
.reward_bottom .image_text01 { .reward_bottom .image_text01 {
position: absolute; position: absolute;
top: 80px; top: 80px;
left: 60px; left: 60px;
width: 60%; width: 60%;
height: 180px; height: 180px;
color: #333;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
text-align: LEFT;
color: #333333;
line-height: 36px; line-height: 36px;
text-align: left;
} }
/*右侧说明文字*/ /* 右侧说明文字 */
.reward_bottom .image_text02 { .reward_bottom .image_text02 {
position: absolute; position: absolute;
top: 20px; top: 20px;
right: 45px; right: 45px;
width: 310px; width: 310px;
height: 144px; height: 144px;
color: #fff;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
text-align: LEFT;
color: #ffffff;
line-height: 36px; line-height: 36px;
text-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); text-align: left;
text-shadow: 0 4px 4px 0 rgb(0 0 0 / 25%);
} }
/*track容器*/ /* track容器 */
.track { .track {
height: 702px;
background-image: url('../../../assets/images/home/home_track.png'); background-image: url('../../../assets/images/home/home_track.png');
background-size: 100% auto;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 702px; background-size: 100% auto;
} }
.track_region { .track_region {
display: flex; display: flex;
justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between;
width: 1170px; width: 1170px;
} }
/*长方形容器*/ /* 长方形容器 */
.box { .box {
position: relative; position: relative;
width: 49%; width: 49%;
height: 244px; height: 244px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
margin-bottom: 20px; margin-bottom: 20px;
padding: 10px; padding: 10px;
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 10px 0 rgb(0 0 0 / 20%);
} }
/*左上角正三角图片*/ /* 左上角正三角图片 */
.triangle { .triangle {
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -1351,115 +749,127 @@ ...@@ -1351,115 +749,127 @@
background-size: cover; background-size: cover;
} }
/*右上角数字图片*/ /* 右上角数字图片 */
.image { .image {
position: absolute; position: absolute;
top: 0; top: 0;
right: 3px; right: 3px;
width: 94px; width: 94px;
height: 94px; height: 94px;
/*background: url('path/to/your/image.jpg') no-repeat;*/
/* background: url('path/to/your/image.jpg') no-repeat; */
background-size: cover; background-size: cover;
/*filter: blur(5px);*/
/* filter: blur(5px); */
} }
.track_title { .track_title {
width: 100%; width: 100%;
height: 30px; height: 30px;
margin-left: 32px;
margin-top: 26px; margin-top: 26px;
margin-left: 32px;
color: #333;
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
text-align: LEFT;
color: #333333;
line-height: 30px; line-height: 30px;
text-align: left;
} }
.track_content { .track_content {
margin-left: 30px;
height: 35%; height: 35%;
color: #686a6c;
margin-top: 25px; margin-top: 25px;
text-align: left; margin-left: 30px;
/*margin-right: 30px;*/ color: #686a6c;
/* margin-right: 30px; */
font-size: 17px; font-size: 17px;
text-align: left;
} }
/*查看详情按钮*/ /* 查看详情按钮 */
.detail { .detail {
bottom: 10px;
width: 148px; width: 148px;
height: 50px; height: 50px;
bottom: 10px;
/*margin-top: 40px;*/
background: #ffffff;
border: 1px solid #005dbd; border: 1px solid #005dbd;
border-bottom-color: #005dbd;
border-radius: 8px; border-radius: 8px;
border-bottom-color: #005dbd;
/* margin-top: 40px; */
background: #fff;
color: #005dbd;
font-size: 17px; font-size: 17px;
font-weight: 500; font-weight: 500;
color: #005dbd;
cursor: pointer; cursor: pointer;
} }
.detail:hover { .detail:hover {
/* 设置移动鼠标后的文本颜色 */ /* 设置移动鼠标后的文本颜色 */
background: #005dbd; background: #005dbd;
color: #ffffff; color: #fff;
} }
.detail:active { .detail:active {
background: #026edd; background: #026edd;
color: #ffffff; color: #fff;
/* 设置点击后的文本颜色 */ /* 设置点击后的文本颜色 */
} }
/*download和institutions的父容器*/ /* download和institutions的父容器 */
.union { .union {
width: 100%;
background-image: url('../../../assets/images/home/home_union.png'); background-image: url('../../../assets/images/home/home_union.png');
background-size: 100% auto;
background-repeat: no-repeat; background-repeat: no-repeat;
width: 100%; background-size: 100% auto;
} }
/*下载容器*/ /* 下载容器 */
.download { .download {
} }
.download_outer_container { .download_outer_container {
position: relative;
width: 1170px;
display: flex; display: flex;
position: relative;
flex-direction: column; flex-direction: column;
/*align-items: center;*/ width: 1170px;
/* align-items: center; */
overflow: hidden; overflow: hidden;
} }
/*水平滑动的盒子容器*/ /* 水平滑动的盒子容器 */
.download_inner_container { .download_inner_container {
width: 800px; /* display: inline-block; */
/*display: inline-block;*/
display: flex; display: flex;
/*overflow: hidden;*/
/*margin: 0 auto; !* 居中 *!*/
/*width: calc(4 * (240px + 40px)); !* 每个盒子的宽度加上 margin *!*/
height: 200px;
align-items: center; align-items: center;
/*padding: 0 0px 0 0px;*/ width: 800px;
/* overflow: hidden; */
/* margin: 0 auto; !* 居中 *! */
/* width: calc(4 * (240px + 40px)); !* 每个盒子的宽度加上 margin *! */
height: 200px;
/* padding: 0 0px 0 0px; */
} }
/*盒子*/ /* 盒子 */
.download_box { .download_box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
/*padding: 10px;*/
/* padding: 10px; */
width: 250px; width: 250px;
height: 124px; height: 124px;
margin-left: 10px; margin-left: 10px;
background: #ffffff;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); background: #fff;
/*transition: transform 3s;*/ box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);
/* transition: transform 3s; */
cursor: pointer; cursor: pointer;
} }
...@@ -1471,69 +881,70 @@ ...@@ -1471,69 +881,70 @@
.download_box p { .download_box p {
width: 246px; width: 246px;
height: 26px; height: 26px;
color: #333;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
text-align: CENTER;
color: #333333;
line-height: 23px; line-height: 23px;
text-align: center;
} }
/*滚动条+左右箭头容器*/ /* 滚动条+左右箭头容器 */
.scrollbar { .scrollbar {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 10px;
width: 400px; width: 400px;
/*margin-left: 450px;*/ margin-top: 10px;
/* margin-left: 450px; */
} }
/*滚动条样式修改*/ /* 滚动条样式修改 */
::v-deep .swiper-scrollbar-drag { ::v-deep .swiper-scrollbar-drag {
height: 6px !important; height: 6px !important;
border-radius: 10px; border-radius: 10px;
} }
/*学院容器*/ /* 学院容器 */
.institutions { .institutions {
margin-top: 20px; margin-top: 20px;
padding-bottom: 80px; padding-bottom: 80px;
} }
.institutions_outer_container { .institutions_outer_container {
position: relative;
width: 1170px;
display: flex; display: flex;
position: relative;
flex-direction: column; flex-direction: column;
/*align-items: center;*/ width: 1170px;
/* align-items: center; */
overflow: hidden; overflow: hidden;
} }
.institutions_inner_container { .institutions_inner_container {
width: 800px;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
width: 800px;
} }
/*一行学校容器*/ /* 一行学校容器 */
.institutions_container { .institutions_container {
display: flex; display: flex;
margin-bottom: 50px; margin-bottom: 50px;
} }
/*单个学校容器*/ /* 单个学校容器 */
.institutions_box { .institutions_box {
display: flex;
position: relative; /* Enable relative positioning */
align-items: center;
justify-content: center;
width: 212px; width: 212px;
height: 107px; height: 107px;
background: #ffffff; margin: 10px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); background: #fff;
box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);
text-align: center; text-align: center;
margin: 10px;
position: relative; /* Enable relative positioning */
display: flex;
justify-content: center;
align-items: center;
} }
.institutions_box img { .institutions_box img {
...@@ -1544,44 +955,45 @@ ...@@ -1544,44 +955,45 @@
.institutions_box p { .institutions_box p {
position: absolute; position: absolute;
bottom: -50px; bottom: -50px;
text-align: center;
width: 100%; width: 100%;
height: 22px; height: 22px;
color: #333;
font-size: 17px; font-size: 17px;
font-weight: 400; font-weight: 400;
color: #333333;
line-height: 20px; line-height: 20px;
text-align: center;
} }
.info_header span { .info_header span {
width: 48px; width: 48px;
height: 32px; height: 32px;
margin-left: 5px; margin-left: 5px;
color: #005dbd;
font-size: 22px; font-size: 22px;
font-weight: bold; font-weight: bold;
text-align: LEFT;
color: #005dbd;
line-height: 28px; line-height: 28px;
text-align: left;
} }
/*element-UI对话框css样式设置*/ /* element-UI对话框css样式设置 */
/*对话框标题*/
/* 对话框标题 */
::v-deep .el-dialog__title { ::v-deep .el-dialog__title {
font-size: 26px; font-size: 26px;
font-weight: bold; font-weight: bold;
} }
/*对话框的header部分*/ /* 对话框的header部分 */
::v-deep .el-dialog__header { ::v-deep .el-dialog__header {
background-color: #f9f9f9;
height: 60px; height: 60px;
background-color: #f9f9f9;
} }
/*对话框滚动条设置*/ /* 对话框滚动条设置 */
.dialog-container { .dialog-container {
max-height: 75vh; /* 调整为你希望的最大高度 */ max-height: 75vh; /* 调整为你希望的最大高度 */
overflow-y: auto;
padding: 10px 20px; padding: 10px 20px;
overflow-y: auto;
} }
::v-deep .el-tabs__nav-scroll { ::v-deep .el-tabs__nav-scroll {
...@@ -1589,10 +1001,11 @@ ...@@ -1589,10 +1001,11 @@
margin: 0 auto; margin: 0 auto;
} }
/*去掉tabs底部的下划线*/ /* 去掉tabs底部的下划线 */
::v-deep .el-tabs__nav-wrap::after { ::v-deep .el-tabs__nav-wrap::after {
position: static !important; position: static !important;
} }
::v-deep .el-tabs__item { ::v-deep .el-tabs__item {
height: 70px; height: 70px;
} }
......
src/views/dataSharingAndExchange/carouselManagement/AccountModal.vue
View file @ 59679b5f
<template> <template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit"> <BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" /> <BasicForm @register="registerForm" />
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue'; import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal'; import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form'; import { BasicForm, useForm } from '@/components/Form';
import { accountFormSchema } from './institution.data'; import { accountFormSchema } from './institution.data';
import { getDeptList } from '@/api/system/dept/dept'; import { getDeptList } from '@/api/system/dept/dept';
import {addUserApi,UserDetailApi,UserUpdataApi} from '@/api/system/user/user' import { addUserApi, UserDetailApi, UserUpdataApi } from '@/api/system/user/user';
import { encryptTwo } from '../../../../src/utils/jsencrypt.js' import { encryptTwo } from '../../../../src/utils/jsencrypt.js';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import {TreeData} from "@/views/dataSharingAndExchange/catalogingManagement/institutionData"; import { TreeData } from '@/views/dataSharingAndExchange/catalogingManagement/institutionData';
defineOptions({ name: 'AccountModal' }); defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']); const emit = defineEmits(['success', 'register']);
...@@ -36,6 +43,7 @@ import {ref, computed, unref, reactive} from 'vue'; ...@@ -36,6 +43,7 @@ import {ref, computed, unref, reactive} from 'vue';
resetFields(); resetFields();
setModalProps({ confirmLoading: false }); setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate; isUpdate.value = !!data?.isUpdate;
isMove.value = !!data?.isMove; isMove.value = !!data?.isMove;
if (unref(isUpdate)) { if (unref(isUpdate)) {
// 获取行数据的id // 获取行数据的id
...@@ -46,13 +54,12 @@ import {ref, computed, unref, reactive} from 'vue'; ...@@ -46,13 +54,12 @@ import {ref, computed, unref, reactive} from 'vue';
}); });
} }
const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
const treeList = handleTree(TreeData, 'businessId',undefined,undefined,undefined)
updateSchema([ updateSchema([
{ {
field: 'institutionId', field: 'institutionId',
componentProps: { componentProps: {
treeData: treeList treeData: treeList,
}, },
}, },
]); ]);
...@@ -61,51 +68,65 @@ import {ref, computed, unref, reactive} from 'vue'; ...@@ -61,51 +68,65 @@ import {ref, computed, unref, reactive} from 'vue';
const getTitle = computed(() => (!unref(isUpdate) ? '新增账号' : '编辑账号')); const getTitle = computed(() => (!unref(isUpdate) ? '新增账号' : '编辑账号'));
function handleTree(data, id, parentId, children, rootId) { function handleTree(data, id, parentId, children, rootId) {
id = id || 'id' id = id || 'id';
parentId = parentId || 'parentId' parentId = parentId || 'parentId';
children = children || 'children' children = children || 'children';
rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0 rootId =
rootId ||
Math.min.apply(
Math,
data.map((item) => {
return item[parentId];
}),
) ||
0;
// 对源数据深度克隆 // 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data)) const cloneData = JSON.parse(JSON.stringify(data));
// 循环所有项 // 循环所有项
const treeData = cloneData.filter(father => { const treeData = cloneData.filter((father) => {
const branchArr = cloneData.filter(child => { const branchArr = cloneData.filter((child) => {
// 返回每一项的子级数组 // 返回每一项的子级数组
return father[id] === child[parentId] return father[id] === child[parentId];
}) });
branchArr.length > 0 ? father.children = branchArr : '' branchArr.length > 0 ? (father.children = branchArr) : '';
// 返回第一层 // 返回第一层
return father[parentId] === rootId return father[parentId] === rootId;
}) });
return treeData !== '' ? treeData : data return treeData !== '' ? treeData : data;
} }
/**确定按钮*/ /**确定按钮*/
async function handleSubmit() { async function handleSubmit() {
try { try {
//拿到表单内容 // 拿到表单内容
const values = await validate(); const values = await validate();
//通过表单获取的institutionId去查找相同TreeData中的institutionId的institutionName //通过表单获取的institutionId去查找相同TreeData中的institutionId的institutionName
const institutionName = TreeData.find(item => item.businessId === values.institutionId).institutionName // const institutionName = TreeData.find(
values.institutionName = institutionName // (item) => item.businessId === values.institutionId,
// ).institutionName;
// values.institutionName = institutionName;
setModalProps({ confirmLoading: true }); setModalProps({ confirmLoading: true });
// 编辑 // 编辑
if(unref(isUpdate)) { if (unref(isUpdate)) {
values.businessId = rowId.value values.businessId = rowId.value;
//修改列表值 //修改列表值
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } }); emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
createMessage.success('编辑成功'); createMessage.success('编辑成功');
closeModal(); closeModal();
}else { } else {
//根据institutionId去查找相同TreeData中的institutionId的institutionName //根据institutionId去查找相同TreeData中的institutionId的institutionName
const institutionName = TreeData.find(item => item.businessId === values.institutionId).institutionName // const institutionName = TreeData.find(
// (item) => item.businessId === values.institutionId,
// ).institutionName;
const paramsAdd = { const paramsAdd = {
username: values.username, username: values.username,
name: values.name, name: values.name,
institutionId: values.institutionId, institutionId: values.institutionId,
institutionName: institutionName, project: values.project,
createDate: formatDate(new Date()) describe: values.describe,
} // institutionName: institutionName,
createDate: formatDate(new Date()),
};
emit('success', { isUpdate: unref(isUpdate), values: { ...paramsAdd } }); emit('success', { isUpdate: unref(isUpdate), values: { ...paramsAdd } });
createMessage.success('新增成功'); createMessage.success('新增成功');
closeModal(); closeModal();
...@@ -115,8 +136,8 @@ import {ref, computed, unref, reactive} from 'vue'; ...@@ -115,8 +136,8 @@ import {ref, computed, unref, reactive} from 'vue';
} }
} }
// 格式化日期 // 格式化日期
function formatDate(date) { function formatDate(date) {
const year = date.getFullYear(); const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1 const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
const day = String(date.getDate()).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0');
...@@ -125,5 +146,5 @@ function formatDate(date) { ...@@ -125,5 +146,5 @@ function formatDate(date) {
const seconds = String(date.getSeconds()).padStart(2, '0'); const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
} }
</script> </script>
src/views/dataSharingAndExchange/carouselManagement/detail/index.vue
View file @ 59679b5f
...@@ -12,12 +12,12 @@ ...@@ -12,12 +12,12 @@
/> />
<Icon <Icon
@click="handleGoBack" @click="handleGoBack"
icon="ph:building-apartment-bold" icon="dashicons:images-alt2"
class="header_icon" class="header_icon"
size="40px" size="40px"
/> />
<div> <div>
<div class="header_title">人力资源信息</div> <div class="header_title">轮播图详情</div>
</div> </div>
</div> </div>
<div class="right_section"> <div class="right_section">
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
:data="permissionsData" :data="permissionsData"
:schema="permissionsInfo" :schema="permissionsInfo"
/> />
<div class="mianBodyEditContainer"> <!-- <div class="mianBodyEditContainer">
<Tabs v-model:activeKey="page" size="large" class="mianBodyEditContainerTabs"> <Tabs v-model:activeKey="page" size="large" class="mianBodyEditContainerTabs">
<a-tab-pane key="1" tab="采样数据"> <a-tab-pane key="1" tab="采样数据">
<div v-if="page === '1'"> <div v-if="page === '1'">
...@@ -213,7 +213,7 @@ ...@@ -213,7 +213,7 @@
</div> </div>
</a-tab-pane> </a-tab-pane>
</Tabs> </Tabs>
</div> </div> -->
<StorageManageModal @register="registerStorageManageModal" /> <StorageManageModal @register="registerStorageManageModal" />
<AccountModal @register="registerEditModal" @success="handleSuccess" /> <AccountModal @register="registerEditModal" @success="handleSuccess" />
</PageWrapper> </PageWrapper>
...@@ -248,7 +248,6 @@ ...@@ -248,7 +248,6 @@
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const page = ref('1'); const page = ref('1');
const tableData = ref([]); const tableData = ref([]);
const samplingTableData = ref([]); const samplingTableData = ref([]);
const associationData = ref([]); const associationData = ref([]);
......
src/views/dataSharingAndExchange/carouselManagement/index.vue
View file @ 59679b5f
...@@ -24,8 +24,13 @@ ...@@ -24,8 +24,13 @@
</template> </template>
<BasicTable @register="registerTable" :searchInfo="searchInfo"> <BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #toolbar> <template #toolbar>
<a-button type="primary">新增轮播图</a-button> <a-button type="primary" @click="handleAdd">新增轮播图</a-button>
<a-button type="primary">批量删除</a-button> <a-button
type="error"
@click="handleDeleteBatch"
:disabled="getRowSelection().selectedRowKeys <= 0"
>批量删除</a-button
>
</template> </template>
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
...@@ -41,8 +46,20 @@ ...@@ -41,8 +46,20 @@
{ {
icon: 'dashicons:edit-large', icon: 'dashicons:edit-large',
tooltip: '编辑', tooltip: '编辑',
onClick: handleEdit.bind(null, record),
// onClick: handleDetails.bind(null, record), // onClick: handleDetails.bind(null, record),
}, },
// 删除按钮
{
icon: 'ant-design:delete-outlined',
color: 'error',
tooltip: '删除',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]" ]"
/> />
</template> </template>
...@@ -188,12 +205,14 @@ ...@@ -188,12 +205,14 @@
openModal(true, { openModal(true, {
record, record,
isAdd: true, isAdd: true,
isUpdate: false,
}); });
} }
/** 编辑按钮*/ /** 编辑按钮*/
function handleEdit(record: Recordable) { function handleEdit(record: Recordable) {
openModal(true, { openModal(true, {
record, record,
isAdd: false,
isUpdate: true, isUpdate: true,
}); });
} /** 详情按钮*/ } /** 详情按钮*/
...@@ -216,7 +235,17 @@ ...@@ -216,7 +235,17 @@
createMessage.success('删除成功!'); createMessage.success('删除成功!');
reload(); reload();
} }
function handleDeleteBatch(record: Recordable) {
createConfirm({
iconType: 'warning',
title: '确认删除',
content: '确认批量删除选中数据吗？',
onOk() {
createMessage.success('删除成功!');
reload();
},
});
}
/** 导入成功*/ /** 导入成功*/
function handleImportSuccess() { function handleImportSuccess() {
reload(); reload();
......
src/views/dataSharingAndExchange/carouselManagement/institution.data.ts
View file @ 59679b5f
...@@ -86,7 +86,7 @@ export const columns: BasicColumn[] = [ ...@@ -86,7 +86,7 @@ export const columns: BasicColumn[] = [
}, },
{ {
title: '轮播图描述', title: '轮播图描述',
dataIndex: 'ownerInstitution', dataIndex: 'describe',
width: 150, width: 150,
}, },
{ {
...@@ -135,7 +135,7 @@ export const searchFormSchema: FormSchema[] = [ ...@@ -135,7 +135,7 @@ export const searchFormSchema: FormSchema[] = [
colProps: { span: 4 }, colProps: { span: 4 },
}, },
{ {
field: 'ownerInstitution', field: 'describe',
label: ' ', label: ' ',
component: 'Input', component: 'Input',
componentProps: { componentProps: {
...@@ -167,67 +167,79 @@ export const accountFormSchema: any[] = [ ...@@ -167,67 +167,79 @@ export const accountFormSchema: any[] = [
rules: [ rules: [
{ {
required: true, required: true,
message: '请输入姓名', message: '请输入名称',
}, },
], ],
}, },
{ {
field: 'describe', field: 'project',
label: '描述', label: '轮播图文件名',
component: 'Input', component: 'Input',
colProps: { lg: 24, md: 24 }, colProps: { lg: 24, md: 24 },
rules: [ rules: [
{ {
required: true, required: true,
message: '请输入描述', message: '请输入文件名',
},
],
},
{
field: 'visibleRange',
label: '可见范围',
component: 'Select',
componentProps: {
options: [
{ label: '所有人', value: '所有人' },
{ label: '用户1', value: '用户1' },
{ label: '用户2', value: '用户2' },
],
},
colProps: { lg: 24, md: 24 },
rules: [
{
required: true,
message: '请输入登录名',
}, },
], ],
}, },
{ {
field: 'resourceNum', field: 'describe',
label: '可见资源数', label: '轮播图描述',
component: 'InputNumber', component: 'Input',
colProps: { lg: 24, md: 24 }, colProps: { lg: 24, md: 24 },
rules: [ rules: [
{ {
required: true, required: true,
message: '请输入', message: '请输入描述',
}, },
], ],
}, },
{ // {
field: 'institutionId', // field: 'visibleRange',
label: '所属编目', // label: '可见范围',
component: 'TreeSelect', // component: 'Select',
colProps: { lg: 24, md: 24 }, // componentProps: {
componentProps: { // options: [
fieldNames: { // { label: '所有人', value: '所有人' },
label: 'institutionName', // { label: '用户1', value: '用户1' },
value: 'businessId', // { label: '用户2', value: '用户2' },
}, // ],
getPopupContainer: () => document.body, // },
}, // colProps: { lg: 24, md: 24 },
required: true, // rules: [
}, // {
// required: true,
// message: '请输入登录名',
// },
// ],
// },
// {
// field: 'resourceNum',
// label: '可见资源数',
// component: 'InputNumber',
// colProps: { lg: 24, md: 24 },
// rules: [
// {
// required: true,
// message: '请输入',
// },
// ],
// },
// {
// field: 'institutionId',
// label: '所属编目',
// component: 'TreeSelect',
// colProps: { lg: 24, md: 24 },
// componentProps: {
// fieldNames: {
// label: 'institutionName',
// value: 'businessId',
// },
// getPopupContainer: () => document.body,
// },
// required: true,
// },
]; ];
export const EditFormSchema: any[] = [ export const EditFormSchema: any[] = [
{ {
......
src/views/dataSharingAndExchange/carouselManagement/institutionData.ts
View file @ 59679b5f
...@@ -286,7 +286,7 @@ export const tableDataForIndex: any[] = [ ...@@ -286,7 +286,7 @@ export const tableDataForIndex: any[] = [
name: '一级资源', name: '一级资源',
project: '一级编目', project: '一级编目',
releaseStatus: '已发布', releaseStatus: '已发布',
ownerInstitution: 'test1', describe: 'test1',
resourceNum: 3, resourceNum: 3,
institutionId: 101, institutionId: 101,
createDate: '2024-10-24 10:04:04', createDate: '2024-10-24 10:04:04',
...@@ -303,7 +303,7 @@ export const tableDataForIndex: any[] = [ ...@@ -303,7 +303,7 @@ export const tableDataForIndex: any[] = [
releaser: 'duck', releaser: 'duck',
name: '二级资源', name: '二级资源',
project: '公共安全', project: '公共安全',
ownerInstitution: 'test2', describe: 'test2',
releaseStatus: '已发布', releaseStatus: '已发布',
resourceNum: 4, resourceNum: 4,
institutionId: 102, institutionId: 102,
...@@ -322,7 +322,7 @@ export const tableDataForIndex: any[] = [ ...@@ -322,7 +322,7 @@ export const tableDataForIndex: any[] = [
name: '三级资源', name: '三级资源',
project: '卫生健康', project: '卫生健康',
releaseStatus: '已发布', releaseStatus: '已发布',
ownerInstitution: 'test1', describe: 'test1',
resourceNum: 5, resourceNum: 5,
institutionId: 103, institutionId: 103,
createDate: '2024-10-24 10:04:04', createDate: '2024-10-24 10:04:04',
...@@ -340,7 +340,7 @@ export const tableDataForIndex: any[] = [ ...@@ -340,7 +340,7 @@ export const tableDataForIndex: any[] = [
name: '四级资源', name: '四级资源',
project: '文化休闲', project: '文化休闲',
releaseStatus: '已发布', releaseStatus: '已发布',
ownerInstitution: 'test3', describe: 'test3',
resourceNum: 6, resourceNum: 6,
institutionId: 104, institutionId: 104,
createDate: '2024-10-24 10:04:04', createDate: '2024-10-24 10:04:04',
...@@ -358,7 +358,7 @@ export const tableDataForIndex: any[] = [ ...@@ -358,7 +358,7 @@ export const tableDataForIndex: any[] = [
name: '五级资源', name: '五级资源',
project: '经济建设', project: '经济建设',
releaseStatus: '已发布', releaseStatus: '已发布',
ownerInstitution: 'test1', describe: 'test1',
resourceNum: 7, resourceNum: 7,
institutionId: 105, institutionId: 105,
createDate: '2024-10-24 10:04:04', createDate: '2024-10-24 10:04:04',
...@@ -376,7 +376,7 @@ export const tableDataForIndex: any[] = [ ...@@ -376,7 +376,7 @@ export const tableDataForIndex: any[] = [
name: '特级资源', name: '特级资源',
project: '科技教育', project: '科技教育',
releaseStatus: '未发布', releaseStatus: '未发布',
ownerInstitution: 'test4', describe: 'test4',
resourceNum: 8, resourceNum: 8,
createDate: '2024-10-24 10:04:04', createDate: '2024-10-24 10:04:04',
releaseDate: '2024-10-25 10:04:04', releaseDate: '2024-10-25 10:04:04',
......
src/views/dataSharingAndExchange/resourceManagement/index.vue
View file @ 59679b5f
...@@ -312,6 +312,6 @@ ...@@ -312,6 +312,6 @@
} }
.headerForm { .headerForm {
margin-top: 30px; margin-bottom: 30px;
} }
</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