Commit 59679b5f authored by baiyinhao's avatar baiyinhao

修改页面

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