Skip to content

B
bigDataSystem
Commit 5b4ade31 authored by 曹泽华's avatar 曹泽华
Browse files
Options

数据登记

parent 48b9ba0b
Hide whitespace changes
Inline Side-by-side
Showing with 642 additions and 1424 deletions
src/views/AAAFont/dataRegistration/index.vue
View file @ 5b4ade31
<template>
<div class="mainContainer" id="main">
<!--sub容器包含了一个个子页面 例如info race-->
<div class="subContainer">
<!--小球及下拉列表-->
<div class="ball">
<div class="drop-down_menu" id="drop-down_menu" style="font-size: 15px; height: 0">
<div class="dropdown" id="dropdown">
<!--下拉菜单项-->
<div class="dropdown-item" @click="jumpToSection('info')" style="margin-top: 60px">
<span>大赛资讯</span>
</div>
<div class="dropdown-item" @click="jumpToSection('race')">
<span>赛程安排</span>
</div>
<div class="dropdown-item" @click="jumpToSection('track')">
<span>赛道划分</span>
</div>
<div class="dropdown-item" @click="jumpToSection('reward')">
<span>奖励计划</span>
</div>
<div class="dropdown-item" @click="jumpToSection('download')">
<span>资料下载</span>
</div>
<div class="dropdown-item" @click="jumpToSection('institutions')">
<span>支持院校</span>
</div>
<!-- 数据登记页面-->
<div v-if="enrollNotice === '1'" class="item-content-box">
<div class="commonContainer">
<div style="width: 1440px; height: 443px">
<el-carousel class="w-1/1" :interval="5000" height="443px" arrow="always">
<el-carousel-item v-for="item in items" :key="item.id">
<img class="carouselImg" :src="item.url" alt="" />
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
<!--大赛咨询子页面-->
<div class="information item-content-box" id="info">
<!--公共容器 info_right 包含了标题和字母栏-->
<div class="commonContainer" style="margin-top: 60px">
<!--对公共容器应用子页面专属css样式-->
<!-- <div class="common-item-title">大赛资讯</div>-->
<!-- <div class="letter">INFORMATION</div>-->
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="大赛资讯" name="first">
<template #label>
<span class="common-item-title">大赛资讯</span>
</template>
<div class="info_wrapper">
<!-- 通知公告-->
<div class="info_content">
<!-- 头部栏-->
<div class="info_header">
<div>
<div class="info_title" style="float: right; height: 33px; padding-top: 7px">
</div>
</div>
<a class="more-link" @click="toNoticePage"> </a>
</div>
<!-- info子页面信息容器-->
<div class="notice_container">
<div class="notice" v-for="item in info_notice" :key="item.noticeId">
<div class="notice-image"> </div>
<!-- 内容-->
<div class="notice-content">
<div class="notice-text" @click="noticeDetail(item)">{{
item.noticeTitle
}}</div>
<div class="notice-time">发布于: {{ item.updateTime }}</div>
</div>
</div>
<div
v-if="noticeShow"
style="
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
"
>
<!-- 无数据时显示该图片-->
</div>
</div>
</div>
<!-- 新闻动态-->
<div class="info_content" style="margin-left: 30px">
<div class="info_header">
<div>
<div class="info_title" style="float: right; height: 33px; padding-top: 7px">
</div>
</div>
<a class="more-link" @click="toTrendsPage"> </a>
</div>
<div class="notice_container">
<div class="notice" v-for="(item, index) in info_ad" :key="item.trendsId">
<div class="notice-image"> </div>
<div class="notice-content">
<div class="notice-text" @click="trendsDetail(item)">{{
item.trendsTitle
}}</div>
<div class="notice-time">发布于: {{ item.updateTime }}</div>
</div>
</div>
<div
v-if="adShow"
style="
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
"
>
<!-- 无数据时显示该图片-->
</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="体彩服务社会" name="second">
<template #label>
<span class="common-item-title">体彩服务社会</span>
</template>
<div class="info_wrapper">
<div class="info_content_second">
<!-- 头部栏-->
<div class="info_header">
<div>
<div class="info_title" style="float: right; height: 33px; padding-top: 7px">
</div>
</div>
</div>
<!-- info子页面信息容器-->
<div class="notice_container">
<el-row>
<el-col :span="12">
<div class="notice">
<div class="notice-image"> </div>
<!-- 内容-->
<div class="notice-content">
<div
class="notice-text"
@click="sportsLottery('体彩公益公信宣传之一')"
>{{ '体彩公益公信宣传之一：体彩公益金是怎么来的？' }}</div
<h3 class="content-item-h3">登记公示</h3>
<span class="title_bottom">共114条数据，公示期为10个工作日</span>
<div class="tab-pane">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane name="first">
<template #label>
<span class="mb-4" style="font-size: 24px; font-weight: 700; color: #1962e2"
>登记平台(112)</span
>
</template>
<el-row class="mt-5" :gutter="20">
<el-col :span="8">
<el-card>
<template #header>
<div>
<div style="display: flex; align-items: center">
<img :src="cardLogo" />
<span class="ml-4" style="font-size: 20px; font-weight: 550"
>阀类需求弹性分析数据</span
>
<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>
</template>
<div class="card-row">
<div class="card-left">
<p>申请人</p>
<p>数据来源</p>
<p>应用场景</p>
<p>算法规则简要说明</p>
<p></p>
<p>公示截止时间</p>
</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 class="card-right">
<p>天津市融创软通科技股份有限公司</p>
<p>自行生产</p>
<p>通过特定时间段内不用地区.....</p>
<p>
1.数据采集：1）从数据源中获取数据，2）对数据进行预处理，3）对数据进行........</p
>
</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>
<div class="card_bottom">
<span style="color: #ec7520">公示中</span>
<el-button class="button" round>提交异议</el-button>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card>
<template #header>
<div>
<div style="display: flex; align-items: center">
<img :src="cardLogo" />
<span class="ml-4" style="font-size: 20px; font-weight: 550"
>大学食堂销量预测</span
>
<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>
</template>
<div class="card-row">
<div class="card-left">
<p>申请人</p>
<p>数据来源</p>
<p>应用场景</p>
<p>算法规则简要说明</p>
<p></p>
<p>公示截止时间</p>
</div>
<div class="card-right">
<p>天津市融创软通科技股份有限公司</p>
<p>现场采集</p>
<p>销量的预测</p>
<p>
Apriori算法对数据集进行多次扫描，第一次扫描得到频繁1-项集L1，第k(k>1)次............</p
>
</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>
<div class="card_bottom">
<span style="color: #ec7520">公示中</span>
<el-button class="button" round>提交异议</el-button>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card>
<template #header>
<div>
<div style="display: flex; align-items: center">
<img :src="cardLogo" />
<span class="ml-4" style="font-size: 20px; font-weight: 550"
>销售量对价格变化的反应研究</span
>
<div class="notice-time">发布于: {{ '2024-04-27 15:13' }}</div>
</div>
</div>
</el-col>
</el-row>
<div
v-if="noticeShow"
style="
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
"
>
<!-- 无数据时显示该图片-->
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<!-- 赛程安排子页面-->
<div class="race item-content-box" id="race" style="position: relative">
<div style="width: 100%; position: absolute">
<div class="commonContainer" style="margin-top: 20px">
<h3 class="content-item-h3" style="color: #ffffff">赛程安排</h3>
<span class="letter" style="text-shadow: 0 0 1px rgba(243, 243, 243, 0.2)"
>RACE SCHEDULE</span
>
</template>
<div class="card-row">
<div class="card-left">
<p>申请人</p>
<p>数据来源</p>
<p>应用场景</p>
<p>算法规则简要说明</p>
<p></p>
<p>公示截止时间</p>
</div>
<div class="card-right">
<p>天津市融创软通科技股份有限公司</p>
<p>问卷调查</p>
<p>对数据的分析</p>
<p>
关联规则是形如X=>Y的蕴含式，其中X、Y分别是一事务的真子集，且X∩Y=Φ。X称为规则的.............</p
>
</div>
</div>
<div class="card_bottom">
<span style="color: #ec7520">公示中</span>
<el-button class="button" round>提交异议</el-button>
</div>
</el-card>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
<el-button-group>
<el-button plain class="back-button" type="text" @click="handleMore">
查看更多&nbsp;<Icon :size="24" icon="icon-park-solid:right-c" />
</el-button>
</el-button-group>
</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
<h3 class="content-item-h3">登记公告</h3>
<span class="title_bottom">共23659条数据</span>
<div class="tab-pane">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane name="first">
<template #label>
<span class="mb-4" style="font-size: 24px; font-weight: 700; color: #1962e2"
>登记平台(23659)</span
>
</template>
<el-table
class="mt-5"
:fits="true"
:row-style="{ height: '60px' }"
:header-cell-style="{ background: '#E4ECFA', color: '#3F3F3F', height: '60px' }"
:data="tableData"
style="width: 1440px; font-size: 18px"
>
<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>
<el-table-column prop="address" width="500" label="数据集产权名称">
<template #header="scope">
<span class="table-span-label">{{ scope.column.label }}</span>
</template>
<template #default="scope">
<span class="table-span">{{ scope.row.address }}</span>
</template>
</el-table-column>
<el-table-column prop="name" width="350" label="申请人" />
<el-table-column prop="applicationDate" label="申请日期" />
<el-table-column prop="upDate" label="更新日期" />
</el-table>
</el-tab-pane>
</el-tabs>
<el-button-group>
<el-button plain class="back-button" type="text" @click="handleNoticeMore">
查看更多&nbsp;<Icon :size="24" icon="icon-park-solid:right-c" />
</el-button>
</el-button-group>
</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 v-if="enrollNotice === '2'" class="item-content-box">
<el-card style="margin-top: 20px" v-for="card in cardList" class="box-card" shadow="hover">
<template #header>
<div class="clearfix">
<div style="display: inline-block" class="triangle-box">登记成功</div>
<div style="display: inline-block; margin-left: 30px">{{ card.title }}</div>
<el-button
style="
float: right;
padding: 3px 0;
width: 100px;
height: 40px;
color: #409eff;
border: 1px solid #409eff;
"
round
@click="handleDetail"
>查看详情</el-button
>
</div>
</div>
</div>
</template>
<Row :gutter="[16, 30]">
<Col :span="8" v-for="info in formSchema1" :key="info">
<div class="col-item">
<div class="item-label">{{ info.label }}</div>
<div class="item-des">{{ card[info.field] ? card[info.field] : '-' }}</div>
</div>
</Col>
</Row>
</el-card>
<el-pagination
style="margin: 20px 0"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
/>
</div>
<!--下载资料和支持院校的父容器-->
<div class="union">
<!--支持院校子页面-->
<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 v-if="enrollNotice === '3'" class="item-content-box">
<el-card style="width: 1440px; margin: 30px 0">
<div style="margin-left: 30px">
<div style="display: inline-block"
>更新时间
<el-tooltip content="更新时间为最近一次状态更新的时间" placement="top">
<Icon icon="ant-design:question-circle-outlined" />
</el-tooltip>
:</div
>
<div style="display: inline-block; margin-left: 10px">2024-12-19 13:55:47</div>
<el-alert
style="margin: 20px 0"
title="登记成功"
type="success"
description="登记有效期：2024-12-20至 2027-12-20"
:closable="false"
show-icon
/>
<div style="margin-top: 30px"
><Icon style="color: #409eff" icon="ant-design:send-outlined" />申请详细信息</div
>
<Row :gutter="[16, 30]">
<Col :span="12" v-for="info in applyInfo" :key="info">
<div class="col-item">
<div class="item-label">{{ info.label }}：</div>
<div class="item-des">{{
applyInfoData[info.field] ? applyInfoData[info.field] : '-'
}}</div>
</div>
</div>
</div>
</Col>
</Row>
</div>
</div>
</el-card>
</div>
</div>
</div>
</template>
<script>
import Icon from '@/components/Icon/Icon.vue';
import { getToken } from '@/utils/auth';
import { Col, Row } from 'ant-design-vue';
export default {
name: 'Front',
components: { Row, Col, Icon },
data() {
return {
fileType: '', // 文件下载后缀
choseFile: {},
downloadType: '', // 1是本地文件下载，2是oss文件下载
cardList: [
{
title: '小程序流失用户召回分析数据',
applicant: '二又土农业专业合作社',
updateTime: '2024-12-18 16:47:06',
applyTime: '2024-11-17 13:48:48',
},
{
title: '商业空间客流量分层数据',
applicant: '二又土农业专业合作社',
updateTime: '2024-12-18 16:47:06',
applyTime: '2024-11-17 13:48:48',
},
{
title: '商业空间人流稳定性分析数据',
applicant: '二又土农业专业合作社',
updateTime: '2024-12-18 16:47:06',
applyTime: '2024-11-17 13:48:48',
},
{
title: '用户转化认证稳定性分析数据',
applicant: '二又土农业专业合作社',
updateTime: '2024-12-18 16:47:06',
applyTime: '2024-11-17 13:48:48',
},
{
title: '笋瓜销售各个农贸市场的金额分析数据',
applicant: '二又土农业专业合作社',
updateTime: '2024-12-18 16:47:06',
applyTime: '2024-11-17 13:48:48',
},
{
title: '萝卜销售各个农贸市场的金额分析数据',
applicant: '二又土农业专业合作社',
updateTime: '2024-12-18 16:47:06',
applyTime: '2024-11-17 13:48:48',
},
],
activeName: 'first',
//track弹出框
dialogVisible: false,
dialogContent: {},
info_notice: {},
info_ad: {},
//下载资料集合
fileList: [],
//banner图
bannerPicture: {},
//通知公告和新闻动态图片
noticePicture1: {},
noticePicture2: {},
isShowDown: true,
downloadEntity: {
// 名称需要带文件类型，要不然默认为txt
fileUploadName: '项目推荐汇总表.xlsx',
fileAddress: '/profile/attachments/project-recommendation-summary.xlsx',
activeName1: 'first',
activeName2: 'first',
enrollNotice: '1',
isDetail: false,
cardLogo: 'src/assets/images/mallHome/biaoqian.png',
industryImg: 'src/assets/images/mallHome/行业动态.png',
dynamicImg: 'src/assets/images/mallHome/hangyedongtai.png',
items: [
{
id: '1',
url: 'src/assets/images/mallHome/banner1.png',
},
{
id: '2',
url: 'src/assets/images/mallHome/banner.png',
},
],
formSchema1: [
{
label: '申请人',
field: 'applicant',
},
{
label: '更新时间',
field: 'updateTime',
},
{
label: '申请时间',
field: 'applyTime',
},
],
applyInfo: [
{
label: '登记编号',
field: 'enrollCode',
},
{
label: '登记日期',
field: 'enrollDate',
},
{
label: '申请人',
field: 'applicant',
},
{
label: '数据知识产权名称',
field: 'dataName',
},
{
label: '所属行业',
field: 'industry',
},
{
label: '数据来源',
field: 'dataSource',
},
{
label: '数据结构',
field: 'dataStructure',
},
{
label: '数据规模',
field: 'dataSize',
},
{
label: '更新频次',
field: 'updateRate',
},
{
label: '公证编号',
field: 'publicCode',
},
{
label: '应用场景',
field: 'applyScene',
},
{
label: '算法规则简要说明',
field: 'ruleExplain',
},
{
label: '存证公证情况',
field: 'publicSituation',
},
],
applyInfoData: {
enrollCode: 'DIP2024000016125',
enrollDate: '2016-05-02',
applicant: '**先导精密机械有限公司',
dataName: '关系型与非关系型数据库分析数据',
industry: '科学研究和技术服务业',
dataSource: '自行产生',
dataStructure: '关系型与非关系型数据库分析数据',
dataSize: '932条',
updateRate: '每分钟',
applyScene:
'光温湿指数（THSW)是衡量人体在特定环境下舒适程度的重要指\n' +
'标。它考虑了影响人体舒适度的多个关键因素，如温度、湿\n' +
'度、太阳辐射和风等，因此能够更全面地反映人体在不同环境\n' +
'下的感受。在气候评价中，THSW指数可用于评估某个地区或城\n' +
'市的气候适宜性，特别是在康养、旅游等领域。通过THSW指\n' +
'数，可以了解衢州市江山市金坞村的气候特点，为人们的出行\n' +
'和居住提供参考。',
ruleExplain:
'（1）数据采集：通过在线设备，每分钟实时测量获取衢州市江\n' +
'山市金坞村区段温度、湿度及光照强度数据；（2）数据处\n' +
'理：将数据清洗后，根据公式光温湿指数（THSW)=温度*温度\n' +
'权重（α）+湿度*湿度权重（β）+光照强度*光照权重（v），\n' +
'三项权重为设定的固定值，计算结果保留小数点后两位。',
publicCode: 'NO.9294483',
publicSituation: '已于「知识产权区块链公共存证平台」存证',
},
tableData: [
{
applicationDate: '2016-05-02',
upDate: '2016-05-02',
name: '**先导精密机械有限公司',
address: '关系型与非关系型数据库分析数据',
},
{
applicationDate: '2016-05-04',
upDate: '2016-05-04',
name: '天津市融创软通科技股份有限公司',
address: '图形学算法与应用分析数据',
},
{
applicationDate: '2016-05-01',
upDate: '2016-05-01',
name: '天津市融创软通科技股份有限公司',
address: '编程思想与设计模式分析数据',
},
{
applicationDate: '2016-05-03',
upDate: '2016-05-03',
name: '天津市融创软通科技股份有限公司',
address: '46-55岁人群对净水机满意度分析数据',
},
],
tableData2: {
applicant: '二又土农业专业合作社',
updateTime: '2024-12-18 16:47:06',
applyTime: '2024-11-17 13:48:48',
},
titleList: [
{
title: '鸭肉销售各个农贸市场的金额分析数据',
},
{
title: '鸭肉销售各个农贸市场的金额分析数据',
},
{
title: '胡萝卜销售各个农贸市场的金额分析数据',
},
],
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
handleMore() {
this.$router.push({ path: '/aaaFont/dataRegistration' });
},
handleNoticeMore() {
this.enrollNotice = '2';
},
handleDetail() {
this.enrollNotice = '3';
},
// 进入后台方法
toBackstage() {
console.log('activeIndex', this.activeIndex);
if (getToken()) {
this.$router.push({ path: '/homePage/index' });
} else {
this.$router.push({ path: '/login' });
}
// if (getToken()){
// this.$router.push({path: "/admin"});
// }else {
// this.$router.push({path: "/login"});
// }
},
},
};
</script>
<style scoped lang="scss">
/*报名参赛按钮*/
.text {
position: absolute;
left: 13.5%;
top: 75%;
text-align: center;
width: 130px;
height: 44px;
line-height: 44px;
background: #ffac27;
border-radius: 8px;
cursor: pointer;
font-size: 20px;
}
.text:hover {
background-color: #f59e12;
color: #fff;
}
.text:active {
background-color: #ffac27;
color: #fff;
}
/*报名参赛内容*/
.text span {
width: 60px;
height: 26px;
font-size: 20px;
font-weight: 700;
text-align: center;
color: #ffffff;
line-height: 23px;
}
/*小球*/
.ball {
position: sticky;
/*top: 0;*/
top: -40px;
margin-left: 70px;
z-index: 3;
}
/*小球背景图*/
.circle-img {
margin-top: 12vh;
position: relative;
width: 96px;
height: 96px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
}
/*小球的下拉菜单实现*/
.dropdown {
position: absolute;
/*top: 185px;*/
/*top: -48px;*/
margin-top: -48px;
width: 96px;
border-left: 2px solid #005dbd;
border-right: 2px solid #005dbd;
border-bottom: 2px solid #005dbd;
background-color: #fff;
list-style-type: none;
z-index: 5;
padding: 0;
}
/*下拉列表元素*/
.dropdown-item {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
padding: 10px 7px 10px 7px;
font-size: 15px;
}
.dropdown-item img {
width: 32px;
height: 32px;
margin-left: 1px;
}
.dropdown-item span {
margin-top: 10px;
font-size: 14px;
}
.dropdown-item:hover {
background: #d9e7f5;
color: #005dbd;
font-weight: 600;
}
<style scoped lang="less">
/*公共容器 所有子页面共享的css样式*/
.commonContainer {
display: flex;
......@@ -833,9 +517,8 @@
/*子页面中文标题样式*/
.content-item-h3 {
width: 350px;
height: 43px;
font-size: 40px;
font-size: 36px;
font-weight: 580;
z-index: 3;
color: #383737ff;
......@@ -844,704 +527,239 @@
margin: 60px 0 0 0;
}
.reward_container {
width: 1170px;
}
/*子页面标题样式*/
.common-item-title {
margin-left: 20px;
font-size: 40px;
z-index: 3;
line-height: 47px;
font-weight: 700;
color: #292929;
}
/*子页面英文标题样式*/
.letter {
top: -18px;
height: 67px;
font-size: 57px;
text-shadow: 0 0 4px #fff;
z-index: 0;
font-weight: 400;
text-align: left;
color: rgba(0, 0, 0, 0.08);
line-height: 67px;
position: relative;
}
/*英文标题特殊下划线*/
.letter::before {
content: '';
top: 52px;
position: absolute; /*脱离文档流 设置其位置*/
width: 68px; /* 调整边框的长度 */
height: 3px;
background-color: #005dbd;
margin-left: 43%;
/*left: 39%; !* 边框在下边框的位置 *!*/
border-radius: 5px;
}
/*给不同的英文标题下划线设置不同的样式 伪元素实现*/
.track .letter::before {
background-color: #f35457ff;
width: 68px;
}
.race .letter::before {
background-color: white;
width: 68px;
}
.reward .letter::before {
background-color: white;
width: 68px;
}
.download .letter::before {
width: 68px;
margin-left: 45%;
}
.institutions .letter::before {
width: 68px;
margin-left: 46%;
.title_bottom {
margin-top: 40px;
font-size: 24px;
font-weight: 500;
color: #a3a3a3;
letter-spacing: 4px;
}
.item-content-box {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fbfdff;
}
/*info子页面*/
.information {
background-image: url('../../../assets/images/home/home_information.png');
background-size: 100% 665px;
background-repeat: no-repeat;
.carouselImg {
width: 100%;
height: 100%;
}
.info_wrapper {
display: flex;
margin-top: 60px;
margin-bottom: 60px;
}
/*info内容容器*/
.info_content {
width: 570px;
height: 411px;
/*margin: 20px 20px 20px 0;*/
background-color: #e6f0ff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
.tab-pane {
position: relative;
border-radius: 20px; /* 添加圆角边框 */
display: flex;
flex-direction: column; /*上下布局*/
}
.info_content_second {
width: 1140px;
height: 411px;
/*margin: 20px 20px 20px 0;*/
background-color: #e6f0ff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
position: relative;
border-radius: 20px; /* 添加圆角边框 */
display: flex;
flex-direction: column; /*上下布局*/
}
/*内容头部*/
.info_header {
display: flex;
justify-content: space-between;
padding: 7px 0 7px 0;
border-bottom: 1px solid #ccc;
}
/*头部 图标*/
.info_img {
margin-left: 20px;
margin-right: 10px;
width: 32px;
height: 32px;
top: 3px;
position: relative;
}
/*头部 查看更多超链接*/
.more-link {
margin-right: 20px;
display: flex;
align-items: center;
}
.more-link:hover {
color: #005dbd;
font-size: 16px;
margin-right: 20px;
font-weight: 600;
}
/*内容信息容器*/
.notice_container {
background-color: white;
flex: 1; /* 占有容器全部空间*/
border-radius: 0 0 20px 20px;
}
/*数据遍历容器*/
.notice {
height: 95px;
margin-top: 15px;
width: 1440px;
display: flex;
/*align-items: center;*/
margin: 20px 0px;
/*border-bottom: 2px dotted #ccc;*/
/*padding-bottom: 10px;*/
/*padding-right: 5px;*/
padding: 5px 2%;
position: relative;
margin-bottom: 40px;
}
.notice:not(:last-child):before {
content: '';
//tabs 按钮
.back-button {
position: absolute;
left: 4%;
/*top: 0;*/
bottom: -7px;
right: auto;
height: 1px;
width: 92%;
border-bottom: 2px dashed #e4e4e4;
}
.notice:last-child {
border-bottom: none; /* 最后一个notice去掉底部边框 */
}
/*图片*/
.notice-image {
flex: 0 0 100px; /*三属性合一*/
margin-right: 20px;
margin-left: 15px;
}
.notice-image img {
width: 120px;
height: 80px;
border-radius: 6px;
top: 0;
right: 0;
font-size: 18px;
margin-top: 3px;
color: #3a5cde;
}
/*数据容器*/
.notice-content {
flex: 1;
.card-row {
display: flex;
flex-direction: column;
}
/*内容*/
.notice-text {
justify-content: space-around;
margin-top: 20px;
font-size: 18px;
text-align: left;
margin-bottom: 5px;
font-size: 17px;
font-weight: 540;
color: #333333;
line-height: 28px;
cursor: pointer;
display: -webkit-box;
overflow: hidden;
text-overflow: inherit;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/*日期*/
.notice-time {
/*margin-top: 20px;*/
bottom: 10px;
position: absolute;
width: 179px;
height: 18px;
font-size: 14px;
font-weight: 400;
text-align: LEFT;
color: #969696;
line-height: 18px;
}
/*奖励计划相关的css样式*/
.reward {
width: 100%;
}
/*奖励计划 上div*/
.reward_top {
display: flex;
width: 1170px;
border-bottom: 1px solid gray;
margin-bottom: 25px;
}
.reward_top img {
margin-right: 10px; /* 图片右边距 */
width: 180px;
height: 45px;
margin-left: -6px;
}
p {
margin-top: 18px;
height: 24px;
}
/*奖励计划 中div*/
.reward_center {
display: flex;
align-items: center;
}
.card-left {
width: 28%;
color: #707070;
}
/*左边*/
.left-container {
display: flex;
flex-direction: column;
padding: 20px 0;
margin-left: 20px;
width: 187px;
.card-right {
width: 68%;
color: #3f3f3f;
}
}
.left-container .reward_title {
width: 100%;
height: 32px;
.tab-label {
font-size: 24px;
display: flex;
align-items: center;
font-weight: 400;
text-align: LEFT;
color: #ffffff;
line-height: 32px;
}
.left-container .reward_title .reward_icon {
margin-left: 10px;
top: 4px;
float: right;
width: 42px;
height: 24px;
background: #e85252;
border-radius: 20px;
position: relative;
font-size: 14px;
}
.reward_icon span {
position: absolute;
left: 13px;
top: 3px;
width: 10px;
height: 18px;
font-size: 14px;
font-weight: 400;
text-align: center;
color: #ffffff;
line-height: 16px;
}
.subtitle {
width: 48px;
height: 32px;
font-size: 24px;
font-weight: 400;
text-align: LEFT;
color: rgba(255, 255, 255, 0.75);
line-height: 28px;
position: relative;
}
.subtitle::before {
content: '';
top: 34px;
display: block;
position: absolute;
width: 65%; /* 调整边框的长度 */
height: 2px;
background-color: #c03639;
bottom: 0;
left: 0%; /* 边框在下边框的中间位置 */
border-radius: 2px;
}
/*右边*/
.right-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
margin-left: 5px;
}
/*奖项容器*/
.item {
margin-left: 20px;
display: flex;
flex-direction: column;
align-items: center;
width: 220px;
height: 130px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}
.right-container .item img {
width: 36px;
height: 36px;
}
.right-container .item .item_text {
margin-top: 15px;
width: 147px;
height: 37px;
font-size: 28px;
font-weight: 700;
text-align: center;
color: #292929;
line-height: 33px;
}
/*金额*/
.right-container .item .amount {
width: 107px;
height: 32px;
font-size: 16px;
font-weight: 400;
text-align: center;
color: #d32f2f;
line-height: 19px;
margin-top: 10px;
}
/*底部容器*/
.reward_bottom {
margin-top: 60px;
margin-bottom: 80px;
position: relative;
}
/*特殊奖励图片*/
.reward_bottom img:first-child {
position: absolute;
left: 0px;
top: -45px;
width: 180px;
height: 45px;
}
/*左侧说明文字*/
.reward_bottom .image_text01 {
position: absolute;
top: 80px;
left: 60px;
width: 60%;
height: 180px;
font-size: 20px;
font-weight: 400;
text-align: LEFT;
color: #333333;
line-height: 36px;
}
/*右侧说明文字*/
.reward_bottom .image_text02 {
position: absolute;
top: 20px;
right: 45px;
width: 310px;
height: 144px;
font-size: 20px;
font-weight: 400;
text-align: LEFT;
color: #ffffff;
line-height: 36px;
text-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
/*track容器*/
.track {
background-image: url('../../../assets/images/home/home_track.png');
background-size: 100% auto;
background-repeat: no-repeat;
height: 702px;
}
.track_region {
.card_bottom {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 1170px;
}
/*长方形容器*/
.box {
position: relative;
width: 49%;
height: 244px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
padding: 10px;
}
/*左上角正三角图片*/
.triangle {
position: absolute;
top: 0;
left: 0;
width: 74px;
height: 74px;
background-size: cover;
}
/*右上角数字图片*/
.image {
position: absolute;
top: 0;
right: 3px;
width: 94px;
height: 94px;
/*background: url('path/to/your/image.jpg') no-repeat;*/
background-size: cover;
/*filter: blur(5px);*/
}
.track_title {
width: 100%;
height: 30px;
margin-left: 32px;
margin-top: 26px;
font-size: 24px;
font-weight: 700;
text-align: LEFT;
color: #333333;
line-height: 30px;
}
.track_content {
margin-left: 30px;
height: 35%;
color: #686a6c;
margin-top: 25px;
text-align: left;
/*margin-right: 30px;*/
font-size: 17px;
}
/*查看详情按钮*/
.detail {
width: 148px;
height: 50px;
bottom: 10px;
/*margin-top: 40px;*/
background: #ffffff;
border: 1px solid #005dbd;
border-bottom-color: #005dbd;
border-radius: 8px;
font-size: 17px;
align-items: center;
font-weight: 500;
color: #005dbd;
cursor: pointer;
}
.detail:hover {
/* 设置移动鼠标后的文本颜色 */
background: #005dbd;
color: #ffffff;
}
.detail:active {
background: #026edd;
color: #ffffff;
/* 设置点击后的文本颜色 */
.button {
color: #1962e2;
border: #1962e2 2px solid;
}
}
/*download和institutions的父容器*/
.union {
background-image: url('../../../assets/images/home/home_union.png');
background-size: 100% auto;
background-repeat: no-repeat;
.industry {
width: 100%;
}
/*下载容器*/
.download {
}
.download_outer_container {
position: relative;
width: 1170px;
margin-top: 100px;
background-color: #eff3fa;
display: flex;
flex-direction: column;
/*align-items: center;*/
overflow: hidden;
}
/*水平滑动的盒子容器*/
.download_inner_container {
width: 800px;
/*display: inline-block;*/
display: flex;
/*overflow: hidden;*/
/*margin: 0 auto; !* 居中 *!*/
/*width: calc(4 * (240px + 40px)); !* 每个盒子的宽度加上 margin *!*/
height: 200px;
align-items: center;
/*padding: 0 0px 0 0px;*/
}
/*盒子*/
.download_box {
.industry-row {
width: 1440px;
margin-top: 72px;
margin-bottom: 72px;
display: flex;
justify-content: space-between;
.row-left {
width: 464px;
height: 400px;
border-radius: 8px;
background-color: #ffffff;
padding: 37px 24px 24px 24px;
.big-event {
display: flex;
align-items: center;
}
}
.row-right {
border-radius: 8px;
background-color: #ffffff;
width: 952px;
height: 400px;
padding: 33px 24px 24px 24px;
.right-li {
display: flex;
justify-content: space-between;
font-size: 18px;
margin: 30px 20px 20px 0;
.li-left {
}
.li-middle {
width: 76%;
color: #3f3f3f;
}
.li-right {
color: #9c9c9c;
}
}
}
}
}
.custom-table {
margin-bottom: 72px;
}
.table-span {
color: #1962e2;
margin-left: 80px;
}
.table-span-label {
margin-left: 80px;
}
.row-footer {
height: 242px;
opacity: 0.8;
background-color: #1962e2;
display: flex;
flex-direction: column;
align-items: center;
/*padding: 10px;*/
width: 250px;
height: 124px;
margin-left: 10px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
/*transition: transform 3s;*/
cursor: pointer;
}
.download_box img {
width: 54px;
height: 54px;
justify-content: space-evenly;
.footer-title {
height: 48px;
color: #ffffff;
font-size: 32px;
font-weight: 500;
}
.footer-button {
width: 160px;
height: 51px;
font-size: 18px;
background-color: #ffffff;
color: #1962e2;
}
}
.download_box p {
width: 246px;
height: 26px;
font-size: 20px;
font-weight: 700;
text-align: CENTER;
color: #333333;
line-height: 23px;
}
/*滚动条+左右箭头容器*/
.scrollbar {
display: flex;
align-items: center;
margin-top: 10px;
width: 400px;
/*margin-left: 450px;*/
.text {
font-size: 14px;
}
/*滚动条样式修改*/
::v-deep .swiper-scrollbar-drag {
height: 6px !important;
border-radius: 10px;
.item {
margin-bottom: 18px;
}
/*学院容器*/
.institutions {
margin-top: 20px;
padding-bottom: 80px;
.clearfix:before,
.clearfix:after {
display: table;
content: '';
}
.institutions_outer_container {
position: relative;
width: 1170px;
display: flex;
flex-direction: column;
/*align-items: center;*/
overflow: hidden;
.clearfix:after {
clear: both;
}
.institutions_inner_container {
width: 800px;
display: flex;
align-items: flex-start;
.box-card {
width: 1440px;
border-radius: 20px;
}
/*一行学校容器*/
.institutions_container {
.col-item {
display: flex;
margin-bottom: 50px;
}
/*单个学校容器*/
.institutions_box {
width: 212px;
height: 107px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
gap: 10px;
margin: 20px 60px;
.item-label {
width: 127px;
display: flex;
justify-content: right;
}
.item-img {
width: 150px;
height: 100px;
}
.item-des {
width: 400px;
}
}
::v-deep .el-card__header {
border-bottom: none; /* 去除边框 */
/* 或者设置新的样式 */
//border-bottom: 2px solid #ff5733;
}
.triangle-box {
position: relative;
width: 80px;
height: 30px;
background-color: #4caf50;
color: white;
text-align: center;
margin: 10px;
position: relative; /* Enable relative positioning */
display: flex;
justify-content: center;
align-items: center;
}
.institutions_box img {
width: 65px;
height: 65px;
line-height: 30px;
}
.institutions_box p {
.triangle-box::after {
content: '';
position: absolute;
bottom: -50px;
text-align: center;
width: 100%;
height: 22px;
font-size: 17px;
font-weight: 400;
color: #333333;
line-height: 20px;
}
.info_header span {
width: 48px;
height: 32px;
margin-left: 5px;
font-size: 22px;
font-weight: bold;
text-align: LEFT;
color: #005dbd;
line-height: 28px;
}
/*element-UI对话框css样式设置*/
/*对话框标题*/
::v-deep .el-dialog__title {
font-size: 26px;
font-weight: bold;
}
/*对话框的header部分*/
::v-deep .el-dialog__header {
background-color: #f9f9f9;
height: 60px;
}
/*对话框滚动条设置*/
.dialog-container {
max-height: 75vh; /* 调整为你希望的最大高度 */
overflow-y: auto;
padding: 10px 20px;
}
::v-deep .el-tabs__nav-scroll {
width: 50%;
margin: 0 auto;
}
/*去掉tabs底部的下划线*/
::v-deep .el-tabs__nav-wrap::after {
position: static !important;
}
::v-deep .el-tabs__item {
height: 70px;
right: -20px; /* 控制三角形的水平位置 */
top: 0;
width: 0;
height: 0;
border-left: 20px solid #4caf50; /* 三角形的颜色与背景颜色相同 */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
</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