|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<div class="frame">
|
|
|
<div class="left">
|
|
|
<el-scrollbar height="650px" style="height:96%">
|
|
|
<div style="width: calc(100% - 216px);">
|
|
|
<p class="test">大数据之所以称为大数据，因其和“小数据”比较起来，有显著的特征:</p>
|
|
|
<div class="topic" v-for="(item, index) in data" :key="item">
|
|
|
<div class="setp">
|
|
|
<div class="setp-item">{{ index + 1 }}</div>
|
|
|
<span>{{ item.topicName }}</span>
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
<p v-for="(item1,index1) in item.topicOption" :key="index1" style="position: relative;">
|
|
|
<el-radio-group v-model="item1.radio" class="ml-4" text-color="#ffffff00">
|
|
|
<el-radio @click.prevent="clickRadio(index,index1)" :label="item1.checked" size="large">{{ item1.name }}</el-radio>
|
|
|
</el-radio-group>
|
|
|
<span class="tsRight" v-if="elRadioIndex(index,index1)&&isShow">√</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
<div class="dialog-footer">
|
|
|
<el-button @click="sendTitle()" class="tj">提交任务</el-button>
|
|
|
<el-button type="primary" @click="startOver" class="cxks">
|
|
|
重新开始
|
|
|
</el-button>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<span @click="frameDialogVisible=true"></span>
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
custom-class="gdialog"
|
|
|
v-model="frameDialogVisible"
|
|
|
title="大数据技术框架"
|
|
|
width="70%">
|
|
|
<el-scrollbar height="660px">
|
|
|
<p>在2003年，Google创造了两个突破，使得大数据成为可能：一个是Hadoop，它由两个关键服务组成：<br/>
|
|
|
· 使用Hadoop分布式文件系统(HDFS)可靠的数据存储<br/>
|
|
|
· 使用称为MapReduce的技术进行高性能并行数据处理。
|
|
|
</p>
|
|
|
<p style="font-weight:600;">一、大数据平台通用架构</p>
|
|
|
<p>大数据技术的体系庞大且复杂，基础的技术包含数据的采集、数据预处理、分布式存储、NoSQL数据库、数据仓库、机器学习、并行计算、可视化等各种技术范畴<br/>和不同的技术层面。<br/>
|
|
|
首先科学的给出一个通用化的大数据处理技术框架，主要分为下面几个方面：数据采集与预处理、数据存储、数据清洗、数据查询分析和数据可视化。
|
|
|
</p>
|
|
|
<p><img src="@/assets/images/szjj/u1706.png" alt=""></p>
|
|
|
<p style="font-weight:600;">二、数据采集与预处理</p>
|
|
|
<p> 对于各种来源的数据，包括移动互联网数据、社交网络的数据等，这些结构化和非结构化的海量数据是零散的，也就是所谓的数据孤岛，此时的这些数据并没有什么意义，数据采集就是将这些数据写入数据仓库中，把零散的数据整合在一起，对这些数据综合起来进行分析。数据采集包括文件日志的采集、数据库日志的采集、关系型数据库的接入和应用程序的接入等。在数据量比较小的时候，可以写个定时的脚本将日志写入存储系统，但随着数据量的增长，这些方法无法提供数据安全保障，并且运维困难，需要更强壮的解决方案。<br/>
|
|
|
Flume NG作为实时日志收集系统，支持在日志系统中定制各类数据发送方，用于收集数据，同时，对数据进行简单处理，并写到各种数据接收方(比如文本，HDFS，Hbase等)。Flume NG采用的是三层架构：Agent层，Collector层和Store层，每一层均可水平拓展。其中Agent包含Source，Channel和 Sink，source用来消费（收集）数据源到channel组件中，channel作为中间临时存储，保存所有source的组件信息，sink从channel中读取数据，读取成功之后会删除channel中的信息。<br/>
|
|
|
NDC，Netease Data Canal，直译为网易数据运河系统，是网易针对结构化数据库的数据实时迁移、同步和订阅的平台化解决方案。它整合了网易过去在数据传输领域的各种工具和经验，将单机数据库、分布式数据库、OLAP系统以及下游应用通过数据链路串在一起。除了保障高效的数据传输外，NDC的设计遵循了单元化和平台化的设计哲学。<br/>
|
|
|
Logstash是开源的服务器端数据处理管道，能够同时从多个来源采集数据、转换数据，然后将数据发送到您最喜欢的 “存储库” 中。一般常用的存储库是Elasticsearch。Logstash 支持各种输入选择，可以在同一时间从众多常用的数据来源捕捉事件，能够以连续的流式传输方式，轻松地从您的日志、指标、Web 应用、数据存储以及各种 AWS 服务采集数据。<br/>
|
|
|
Sqoop，用来将关系型数据库和Hadoop中的数据进行相互转移的工具，可以将一个关系型数据库(例如Mysql、Oracle)中的数据导入到Hadoop(例如HDFS、Hive、Hbase)中，也可以将Hadoop(例如HDFS、Hive、Hbase)中的数据导入到关系型数据库(例如Mysql、Oracle)中。Sqoop 启用了一个 MapReduce 作业（极其容错的分布式并行计算）来执行任务。Sqoop 的另一大优势是其传输大量结构化或半结构化数据的过程是完全自动化的。<br/>
|
|
|
流式计算是行业研究的一个热点，流式计算对多个高吞吐量的数据源进行实时的清洗、聚合和分析，可以对存在于社交网站、新闻等的数据信息流进行快速的处理并反馈，目前大数据流分析工具有很多，比如开源的strom，spark streaming等。<br/>
|
|
|
Strom集群结构是有一个主节点（nimbus）和多个工作节点（supervisor）组成的主从结构，主节点通过配置静态指定或者在运行时动态选举，nimbus与supervisor都是Storm提供的后台守护进程，之间的通信是结合Zookeeper的状态变更通知和监控通知来处理。nimbus进程的主要职责是管理、协调和监控集群上运行的topology（包括topology的发布、任务指派、事件处理时重新指派任务等）。supervisor进程等待nimbus分配任务后生成并监控worker（jvm进程）执行任务。supervisor与worker运行在不同的jvm上，如果由supervisor启动的某个worker因为错误异常退出（或被kill掉），supervisor会尝试重新生成新的worker进程。<br/>
|
|
|
当使用上游模块的数据进行计算、统计、分析时，就可以使用消息系统，尤其是分布式消息系统。Kafka使用Scala进行编写，是一种分布式的、基于发布/订阅的消息系统。Kafka的设计理念之一就是同时提供离线处理和实时处理,以及将数据实时备份到另一个数据中心，Kafka可以有许多的生产者和消费者分享多个主题，将消息以topic为单位进行归纳；Kafka发布消息的程序称为producer，也叫生产者，预订topics并消费消息的程序称为consumer，也叫消费者；当Kafka以集群的方式运行时，可以由一个服务或者多个服务组成，每个服务叫做一个broker，运行过程中producer通过网络将消息发送到Kafka集群，集群向消费者提供消息。Kafka通过Zookeeper管理集群配置，选举leader，以及在Consumer Group发生变化时进行rebalance。Producer使用push模式将消息发布到broker，Consumer使用pull模式从broker订阅并消费消息。Kafka可以和Flume一起工作，如果需要将流式数据从Kafka转移到hadoop，可以使用Flume代理agent，将Kafka当做一个来源source，这样可以从Kafka读取数据到Hadoop。<br/>
|
|
|
Zookeeper是一个分布式的，开放源码的分布式应用程序协调服务，提供数据同步服务。它的作用主要有配置管理、名字服务、分布式锁和集群管理。配置管理指的是在一个地方修改了配置，那么对这个地方的配置感兴趣的所有的都可以获得变更，省去了手动拷贝配置的繁琐，还很好的保证了数据的可靠和一致性，同时它可以通过名字来获取资源或者服务的地址等信息，可以监控集群中机器的变化，实现了类似于心跳机制的功能。</p>
|
|
|
<p style="font-weight:600;">三、数据存储</p>
|
|
|
<p>
|
|
|
Hadoop作为一个开源的框架，专为离线和大规模数据分析而设计，HDFS作为其核心的存储引擎，已被广泛用于数据存储。<br/>
|
|
|
|
|
|
HBase，是一个分布式的、面向列的开源数据库，可以认为是hdfs的封装，本质是数据存储、NoSQL数据库。HBase是一种Key/Value系统，部署在hdfs上，克服了hdfs在随<br/>机读写这个方面的缺点，与hadoop一样，Hbase目标主要依靠横向扩展，通过不断增加廉价的商用服务器，来增加计算和存储能力。<br/>
|
|
|
|
|
|
Phoenix，相当于一个Java中间件，帮助开发工程师能够像使用JDBC访问关系型数据库一样访问NoSQL数据库HBase。<br/>
|
|
|
|
|
|
Yarn是一种Hadoop资源管理器，可为上层应用提供统一的资源管理和调度，它的引入为集群在利用率、资源统一管理和数据共享等方面带来了巨大好处。Yarn由下面的几大组件构成：一个全局的资源管理器ResourceManager、ResourceManager的每个节点代理NodeManager、表示每个应用的Application以及每一个ApplicationMaster拥有多个Container在NodeManager上运行。<br/>
|
|
|
|
|
|
Mesos是一款开源的集群管理软件，支持Hadoop、ElasticSearch、Spark、Storm 和Kafka等应用架构。<br/>
|
|
|
|
|
|
Redis是一种速度非常快的非关系数据库，可以存储键与5种不同类型的值之间的映射，可以将存储在内存的键值对数据持久化到硬盘中，使用复制特性来扩展性能，还可以使用客户端分片来扩展写性能。<br/>
|
|
|
|
|
|
Atlas是一个位于应用程序与MySQL之间的中间件。在后端DB看来，Atlas相当于连接它的客户端，在前端应用看来，Atlas相当于一个DB。Atlas作为服务端与应用程序通讯，它实现了MySQL的客户端和服务端协议，同时作为客户端与MySQL通讯。它对应用程序屏蔽了DB的细节，同时为了降低MySQL负担，它还维护了连接池。Atlas启动后会创建多个线程，其中一个为主线程，其余为工作线程。主线程负责监听所有的客户端连接请求，工作线程只监听主线程的命令请求。<br/>
|
|
|
|
|
|
Kudu是围绕Hadoop生态圈建立的存储引擎，Kudu拥有和Hadoop生态圈共同的设计理念，它运行在普通的服务器上、可分布式规模化部署、并且满足工业界的高可用要求。其设计理念为fast analytics on fast data。作为一个开源的存储引擎，可以同时提供低延迟的随机读写和高效的数据分析能力。Kudu不但提供了行级的插入、更新、删除API，同时也提供了接近Parquet性能的批量扫描操作。使用同一份存储，既可以进行随机读写，也可以满足数据分析的要求。Kudu的应用场景很广泛，比如可以进行实时的数据分析，用于数据可能会存在变化的时序数据应用等。<br/>
|
|
|
|
|
|
在数据存储过程中，涉及到的数据表都是成千上百列，包含各种复杂的Query，推荐使用列式存储方法，比如parquent,ORC等对数据进行压缩。Parquet 可以支持灵活的压缩选项，显著减少磁盘上的存储
|
|
|
</p>
|
|
|
<p style="font-weight:600;">四、数据清洗</p>
|
|
|
<p>
|
|
|
MapReduce作为Hadoop的查询引擎，用于大规模数据集的并行计算，”Map（映射）”和”Reduce（归约）”，是它的主要思想。它极大的方便了编程人员在不会分布式并行编程的<br/>情况下，将自己的程序运行在分布式系统中。<br/>
|
|
|
|
|
|
随着业务数据量的增多，需要进行训练和清洗的数据会变得越来越复杂，这个时候就需要任务调度系统，比如oozie或者azkaban，对关键任务进行调度和监控。<br/>
|
|
|
|
|
|
Oozie是用于Hadoop平台的一种工作流调度引擎，提供了RESTful API接口来接受用户的提交请求(提交工作流作业)，当提交了workflow后，由工作流引擎负责workflow的执行以>及状态的转换。用户在HDFS上部署好作业(MR作业)，然后向Oozie提交Workflow，Oozie以异步方式将作业(MR作业)提交给Hadoop。这也是为什么当调用Oozie 的RESTful接口提交作业之后能立即返回一个JobId的原因，用户程序不必等待作业执行完成（因为有些大作业可能会执行很久(几个小时甚至几天)）。Oozie在后台以异步方式，再将workflow对应的Action提交给hadoop执行。<br/>
|
|
|
|
|
|
Azkaban也是一种工作流的控制引擎，可以用来解决有多个hadoop或者spark等离线计算任务之间的依赖关系问题。azkaban主要是由三部分构成：Relational Database，Azkaban Web Server和Azkaban Executor Server。azkaban将大多数的状态信息都保存在MySQL中，Azkaban Web Server提供了Web UI，是azkaban主要的管理者，包括project的管理、认证、调度以及对工作流执行过程中的监控等；Azkaban Executor Server用来调度工作流和任务，记录工作流或者任务的日志。 <br/>
|
|
|
</p>
|
|
|
<p style="font-weight:600;">五、数据查询分析</p>
|
|
|
<p> Hive的核心工作就是把SQL语句翻译成MR程序，可以将结构化的数据映射为一张数据库表，并提供 HQL(Hive SQL)查询功能。Hive本身不存储和计算数据，它完全依赖于HDFS和MapReduce。可以将Hive理解为一个客户端工具，将SQL操作转换为相应的MapReduce jobs，然后在hadoop上面运行。Hive支持标准的SQL语法，免去了用户编写MapReduce程序的过程，它的出现可以让那些精通SQL技能、但是不熟悉MapReduce 、编程能力较弱与不擅长Java语言的用户能够在HDFS大规模数据集上很方便地利用SQL 语言查询、汇总、分析数据。<br/>
|
|
|
|
|
|
Hive是为大数据批量处理而生的，Hive的出现解决了传统的关系型数据库(MySql、Oracle)在大数据处理上的瓶颈 。Hive 将执行计划分成map->shuffle->reduce->map->shuffle->reduce…的模型。如果一个Query会被编译成多轮MapReduce，则会有更多的写中间结果。由于MapReduce执行框架本身的特点，过多的中间过程会增加整个Query的执行时间。在Hive的运行过程中，用户只需要创建表，导入数据，编写SQL分析语句即可。剩下的过程由Hive框架自动的完成。<br/>
|
|
|
|
|
|
Impala是对Hive的一个补充，可以实现高效的SQL查询。使用Impala来实现SQL on Hadoop，用来进行大数据实时查询分析。通过熟悉的传统关系型数据库的SQL风格来操作大数据，同时数据也是可以存储到HDFS和HBase中的。Impala没有再使用缓慢的Hive+MapReduce批处理，而是通过使用与商用并行关系数据库中类似的分布式查询引擎（由Query Planner、Query Coordinator和Query Exec Engine三部分组成），可以直接从HDFS或HBase中用SELECT、JOIN和统计函数查询数据，从而大大降低了延迟。<br/>
|
|
|
|
|
|
Impala将整个查询分成一执行计划树，而不是一连串的MapReduce任务，相比Hive没了MapReduce启动时间。Hive 适合于长时间的批处理查询分析，而Impala适合于实时交互式SQL查询，Impala给数据人员提供了快速实验，验证想法的大数据分析工具，可以先使用Hive进行数据转换处理，之后使用Impala在Hive处理好后的数据集上进行快速的数据分析。总的来说：Impala把执行计划表现为一棵完整的执行计划树，可以更自然地分发执行计划到各个Impalad执行查询，而不用像Hive那样把它组合成管道型的map->reduce模式，以此保证Impala有更好的并发性和避免不必要的中间sort与shuffle。但是Impala不支持UDF，能处理的问题有一定的限制。<br/>
|
|
|
|
|
|
Spark拥有Hadoop MapReduce所具有的特点，它将Job中间输出结果保存在内存中，从而不需要读取HDFS。Spark 启用了内存分布数据集，除了能够提供交互式查询外，它还可以优化迭代工作负载。Spark 是在 Scala 语言中实现的，它将 Scala 用作其应用程序框架。与 Hadoop 不同，Spark 和 Scala 能够紧密集成，其中的 Scala 可以像操作本地集合对象一样轻松地操作分布式数据集。<br/>
|
|
|
|
|
|
Nutch 是一个开源Java 实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具，包括全文搜索和Web爬虫。Solr用Java编写、运行在Servlet容器（如Apache Tomcat或Jetty）的一个独立的企业级搜索应用的全文搜索服务器。它对外提供类似于Web-service的API接口，用户可以通过http请求，向搜索引擎服务器提交一定格式的XML文件，生成索引；也可以通过Http Get操作提出查找请求，并得到XML格式的返回结果。<br/>
|
|
|
|
|
|
Elasticsearch是一个开源的全文搜索引擎，基于Lucene的搜索服务器，可以快速的储存、搜索和分析海量的数据。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。<br/>
|
|
|
|
|
|
还涉及到一些机器学习语言，比如，Mahout主要目标是创建一些可伸缩的机器学习算法，供开发人员在Apache的许可下免费使用；深度学习框架Caffe以及使用数据流图进行数值计算的开源软件库TensorFlow等，常用的机器学习算法比如，贝叶斯、逻辑回归、决策树、神经网络、协同过滤等。<br/>
|
|
|
</p>
|
|
|
<p style="font-weight:600;"> 六、数据可视化</p>
|
|
|
<p>
|
|
|
|
|
|
|
|
|
对接一些BI平台，将分析得到的数据进行可视化，用于指导决策服务。主流的BI平台比如FineBI，国外的敏捷BI Tableau、Qlikview、PowrerBI等，国内的SmallBI和新兴的有数BI等。<br/>
|
|
|
|
|
|
在上面的每一个阶段，保障数据的安全是不可忽视的问题。<br/>
|
|
|
|
|
|
基于网络身份认证的协议Kerberos，用来在非安全网络中，对个人通信以安全的手段进行身份认证，它允许某实体在非安全网络环境下通信，向另一个实体以一种安全的方式证明自己的身份。<br/>
|
|
|
|
|
|
控制权限的ranger是一个Hadoop集群权限框架，提供操作、监控、管理复杂的数据权限，它提供一个集中的管理机制，管理基于yarn的Hadoop生态圈的所有数据权限。可以对Hadoop生态的组件如Hive，Hbase进行细粒度的数据访问控制。通过操作Ranger控制台，管理员可以轻松的通过配置策略来控制用户访问HDFS文件夹、HDFS文件、数据库、表、字段权限。这些策略可以为不同的用户和组来设置，同时权限可与hadoop无缝对接。
|
|
|
</p>
|
|
|
<p style="font-weight:600;">七、大数据通用处理流程</p>
|
|
|
<p><img src="@/assets/images/szjj/u1685.png" alt=""></p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</el-scrollbar>
|
|
|
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
// import {getUserId} from '@/utils/auth.js'
|
|
|
import { getUserInfo } from '@/utils/auth'
|
|
|
import {topicPresentation,topicSelection,submitTrainingTask} from '@/api/hash/digitalEconomy.js'
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
const frameDialogVisible = ref(false);
|
|
|
const radio1 = ref(-1)
|
|
|
const data = ref([
|
|
|
]);
|
|
|
const isShow=ref(false)
|
|
|
const getList=async()=>{
|
|
|
try{
|
|
|
const sendData={
|
|
|
module:'大数据技术框架',
|
|
|
userId:JSON.parse(getUserInfo()).userId
|
|
|
}
|
|
|
const res=await topicPresentation(sendData)
|
|
|
data.value=res.data
|
|
|
let ra=0
|
|
|
data.value.forEach((item,index)=>{
|
|
|
const topicArray = item.topicOption.split(',');
|
|
|
// topicArray.pop();
|
|
|
item.topicOption=topicArray.map(name => ({ name: name.trim(), checked: false ,radio:isFT(item.stuAnswer,name) }));
|
|
|
})
|
|
|
// console.log(data.value);
|
|
|
}catch(e){
|
|
|
console.log(e);
|
|
|
}
|
|
|
}
|
|
|
let errorNumber=0
|
|
|
const isFT=(stuAnswer,item)=>{
|
|
|
if(stuAnswer===null){
|
|
|
return true
|
|
|
}
|
|
|
isShow.value=true
|
|
|
for (let index = 0; index < stuAnswer.length; index++) {
|
|
|
if(stuAnswer[index]===item)
|
|
|
return false
|
|
|
}
|
|
|
return true
|
|
|
}
|
|
|
getList()
|
|
|
const clickRadio=(index,index1)=>{
|
|
|
if(data.value[index].topicOption[index1].radio){
|
|
|
data.value[index].topicOption[index1].radio=false
|
|
|
}else{
|
|
|
data.value[index].topicOption[index1].radio=true
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
//提交
|
|
|
const sendTitle=async()=>{
|
|
|
try{
|
|
|
const nowStuSelectDTOList = data.value.map((question, index) => {
|
|
|
const selectedItems = question.topicOption.filter(item => !item.radio).map(item => item.name);
|
|
|
return {
|
|
|
id: question.id,
|
|
|
select: selectedItems
|
|
|
};
|
|
|
});
|
|
|
const sendData={
|
|
|
"StuSelectDetailsDTO":{
|
|
|
"userId":JSON.parse(getUserInfo()).userId,
|
|
|
"module":"大数据技术框架",
|
|
|
"stuSelectDTOList":nowStuSelectDTOList
|
|
|
}
|
|
|
}
|
|
|
const res=await topicSelection(sendData)
|
|
|
errorNumber=res.data
|
|
|
setTimeout(() => {
|
|
|
sendTask()
|
|
|
}, 200);
|
|
|
frameDialogVisible.value=false
|
|
|
}catch(e){
|
|
|
console.log(e);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const startOver=()=>{
|
|
|
// getList()
|
|
|
data.value.forEach((item,index)=>{
|
|
|
item.topicOption.forEach((item)=>{
|
|
|
item.radio=true
|
|
|
})
|
|
|
})
|
|
|
// frameDialogVisible.value=false
|
|
|
}
|
|
|
|
|
|
const elRadioIndex=(index,cIndex)=>{
|
|
|
if(index===0){
|
|
|
if(cIndex===0||cIndex===1||cIndex===2){
|
|
|
return true
|
|
|
}
|
|
|
}
|
|
|
if(index===1){
|
|
|
if(cIndex===3||cIndex===4||cIndex===5||cIndex===6){
|
|
|
return true
|
|
|
}
|
|
|
}
|
|
|
if(index===2){
|
|
|
if(cIndex===7||cIndex===8){
|
|
|
return true
|
|
|
}
|
|
|
}
|
|
|
if(index===3){
|
|
|
if(cIndex===9||cIndex===10||cIndex===11||cIndex===12||cIndex===13){
|
|
|
return true
|
|
|
}
|
|
|
}
|
|
|
if(index===4){
|
|
|
if(cIndex===14||cIndex===15||cIndex===16||cIndex===17){
|
|
|
return true
|
|
|
}
|
|
|
}
|
|
|
return false
|
|
|
}
|
|
|
const sendTask=async()=>{
|
|
|
try{
|
|
|
const sendData={
|
|
|
module:'大数据',
|
|
|
numberOfErrors:errorNumber > 10 ? 10 :errorNumber ,
|
|
|
taskName:'大数据技术框架',
|
|
|
userId:JSON.parse(getUserInfo()).userId
|
|
|
}
|
|
|
const res=await submitTrainingTask(sendData)
|
|
|
proxy.$modal.msgSuccess("提交成功")
|
|
|
}catch{}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang='scss' scoped>
|
|
|
.frame {
|
|
|
display: flex;
|
|
|
.left{
|
|
|
position: relative;
|
|
|
width:100%;
|
|
|
|
|
|
}
|
|
|
.right{
|
|
|
position: absolute;
|
|
|
top: 145px;
|
|
|
right: 20px;
|
|
|
width: 216px;
|
|
|
padding-left: 60px;
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
width: 110px;
|
|
|
height: 143px;
|
|
|
background: url("@/assets/images/szjj/案例任务.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
p{
|
|
|
// font-size: 1px;
|
|
|
font-family: Source Han Sans CN;
|
|
|
// font-weight:600;
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
.topic {
|
|
|
.setp {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.setp-item {
|
|
|
width: 25px;
|
|
|
height: 25px;
|
|
|
background: #5621f8;
|
|
|
border-radius: 50%;
|
|
|
font-size: 12px;
|
|
|
text-align: center;
|
|
|
line-height: 25px;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
span {
|
|
|
margin-left: 8px;
|
|
|
font-size: 12px;
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: 600;
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
}
|
|
|
.content{
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
|
gap: 10px 20px;
|
|
|
margin: 26px 0px;
|
|
|
}
|
|
|
p {
|
|
|
height: 36px;
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 4px;
|
|
|
padding: 0px 20px;
|
|
|
margin: 0px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.dialog-footer{
|
|
|
.el-button{
|
|
|
background: url('@/assets/images/szjj/提交任务.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
width: 136px;
|
|
|
height: 40px;
|
|
|
border:none;
|
|
|
border-color:none;
|
|
|
}
|
|
|
.tj{
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
.cxks{
|
|
|
background: url('@/assets/images/szjj/重新开始.png') no-repeat;
|
|
|
}
|
|
|
}
|
|
|
.tsRight{
|
|
|
color: green;
|
|
|
position: absolute;
|
|
|
right: 12px;
|
|
|
top: 9px;
|
|
|
}
|
|
|
:deep(.el-radio__inner){
|
|
|
border-radius: 0 !important;
|
|
|
}
|
|
|
</style> |