@@ -1,6 +1,7 @@
<template>
<div>
<div class="header">
<div class="title-0">“中国算力网(China Computing NET, C²NET)”专项重大开源应用示范</div>
<div class="title">鹏城 · 脑海</div>
<div class="descr">两千亿参数规模大语言模型，期待与您共同书写脑海大模型的新篇章！</div>
</div>
@@ -10,16 +11,17 @@
<div class="content-c">
<div class="content-l">
<div class="">
<p>在 信息爆炸的 时代，开源大模型的力量无以估量。</p>
<p>我们很荣幸面向全社会开源两千亿参数规模的大语言模型基座—“鹏城·脑海”，它不仅具备广泛的应用前景，更是 开启了 一个充满无限可能的创新之门。</p>
<p>信息爆炸时代，开源大模型的力量无以估量。</p>
<p>我们很荣幸面向全社会开源两千亿参数规模的大语言模型基座—“鹏城·脑海”，希望 它开启一个充满无限可能的创新之门。</p>
<p>
一路上，它虽不尽善尽美，我们坚信开源的力量会让脑海模型得到真正的成长与繁荣。为此，我们邀请各方贤达基于脑海模型开展进一步研究，挖掘无限可能，共同推动人工智能的进步。我们将向开源联合体开放“鹏城·脑海”多参数版本及其成长生命期各个阶段版本，期待与您共同书写脑海大模型的新篇章！
即使现在，它不尽完美，但我们坚信开源的力量会让脑海大模型得到真正的成长与繁荣。为此，我们将向开源社区开放“鹏城·脑海”多参数版本及其成长过程中的各阶段版本，我们诚邀各方贤达基于脑海大模型开展进一步研究，探索脑海无限可能，共促人工智能发展。
</p>
<p style="text-align: right;">——鹏城实验室脑海大模型研究组</p>
<p>期待与您共同书写脑海大模型的新篇章！</p>
<p style="text-align:right;padding-right:10px;">——鹏城实验室脑海大模型研究组</p>
</div>
<div class="apply-c">
<a class="apply-btn" download
href="https://openi.pcl.ac.cn/OpenIOSSG/promote/raw/branch/master/%e9%b9%8f%e5%9f%8e%e8%84%91%e6%b5%b7%e6%a8%a1%e5%9e%8b%e7%94%b3%e8%af%b7%e8%a1%a8.docx">申请体验 </a>
href="https://openi.pcl.ac.cn/OpenIOSSG/promote/raw/branch/master/%e9%b9%8f%e5%9f%8e%e8%84%91%e6%b5%b7%e6%a8%a1%e5%9e%8b%e7%94%b3%e8%af%b7%e8%a1%a8.docx">模型 申请</a>
</div>
<div class="apply-descr">下载表格，填写后发送到：secretariat@openi.org.cn</div>
</div>
@@ -71,6 +73,21 @@
<div class="line" v-if="descrIndex != item.descr.length - 1" :key="descrIndex + 100"></div>
</template>
</div>
<div class="link">
<a :href="item.link">
<span>查看项目</span>
<svg xmlns="http://www.w3.org/2000/svg"
class="styles__StyledSVGIconPathComponent-sc-gbp7ch-0 bRiIWI svg-icon-path-icon fill"
viewBox="0 0 32 32" width="16" height="16" fill="rgb(16, 16, 16)">
<defs data-reactroot=""></defs>
<g>
<path
d="M21.563 14.667l-7.152-7.152 1.885-1.885 10.371 10.371-10.371 10.371-1.885-1.885 7.152-7.152h-16.229v-2.667z">
</path>
</g>
</svg>
</a>
</div>
<div class="ops">
<a :href="op.link" v-for="(op, opIndex) in item.ops" :key="opIndex">{{ op.text }}</a>
</div>
@@ -87,7 +104,7 @@
</div>
<div class="model-tab-content">
<div class="descr">
{{ tabContent[activeTab].descr }}
<p v-for="(descr, descrIndex) in tabContent[activeTab].descr" :key="descrIndex">{{ descr }}</p>
</div>
<div class="life-stage">
<div class="title">成长生命期阶段版本</div>
@@ -120,8 +137,16 @@
</div>
<div class="data-distribution" v-if="tabContent[activeTab].chart.length">
<div class="title">训练数据分布</div>
<div class="chart-el" :class="`chart-el-${index}`" v-for="(item, index) in tabContent[activeTab].chart"
:key="index"></div>
<div class="descr">
<p>我们统计了40个学科领域的数据，此处只罗列了占比前5的学科领域的数据分布情况。</p>
<p>
40个学科领域包括：文学、经济、法律、教育学、医学、政治、历史、体育、游戏娱乐、影视影评、心理学、休闲旅游、计算机科学、艺术、食品科学、农业科学、电子商务、电子信息科学、管理学、交通运输、能源科学、军事、轻工业、环境科学、安全科学与消防工程、哲学、生物科学、城市规划与建设、地理、材料科学、广告营销、宗教、天文学、气象学、化学科学、物理科学、数学科学、重工业、通信技术、其他。
</p>
</div>
<div class="chart-el-c">
<div class="chart-el" :class="`chart-el-${index}`" v-for="(item, index) in tabContent[activeTab].chart"
:key="index"></div>
</div>
</div>
</div>
</div>
@@ -146,7 +171,7 @@ const templateOptions = {
},
xAxis: {
type: 'category',
axisLabel: { interval: 0, rotate: 30 },
axisLabel: {}, // interval: 0, rotate: 30
data: [],
},
yAxis: {
@@ -155,21 +180,22 @@ const templateOptions = {
formatter: '{value}%'
},
},
dataZoom: [{
type: 'inside',
start: 0,
end: 100
}],
// dataZoom: [{
// type: 'inside',
// start: 0,
// end: 100
// }],
series: [{
data: [],
type: 'bar',
itemStyle: {
color: '#188df0',
},
barWidth: 20,
label: {
show: fals e,
show: tru e,
position: 'top',
rotate: 30,
// rotate: 30,
formatter: '{c}%'
}
}]
@@ -182,82 +208,101 @@ export default {
return {
models: [{
name1: '鹏城·脑海两千亿参数',
name2: 'PC-Mind 200B',
name2: 'Peng Cheng -Mind 200B',
status: [1, 2], // 1-可申请、2-持续训练中
descr: [
['基于', '鹏城云脑Ⅱ', '算力网枢纽节点 '],
['切 片', '3456'],
['基于', '中国算力网', '深圳枢纽节点(鹏城云脑Ⅱ) '],
['模型分 片', '3456'],
['基于', 'MindSpore'],
],
link: 'https://openi.pcl.ac.cn/PCL-Platform.Intelligence/PengCheng.Mind',
ops: [],
}, {
name1: '鹏城·脑海七十亿参数',
name2: 'PC-Mind 7B',
name2: 'Peng Cheng -Mind 7B',
status: [1, 2],
descr: [
['基于', '中国算力网', '西安、成都、大连节点'],
['支持', 'NPU转换GPU'],
['基于', 'MindSpore'],
],
link: 'https://openi.pcl.ac.cn/PCL-Platform.Intelligence/PengCheng.Mind/src/branch/7B',
ops: [],
}],
activeTab: 0,
tabList: ['PC-Mind 200B', 'PC-Mind 7B'],
tabList: ['Peng Cheng -Mind 200B', 'Peng Cheng -Mind 7B'],
tabContent: [{
descr: `鹏城·脑海200B 模型是基于Transformer 架构的2010亿参数自回归式语言模型。\n模型全流程基于（中国算力网枢纽节点）“鹏城云脑Ⅱ”自主安全可控的全国产软硬件平台进行开发和训练，基于MindSpore框架实现在大规模集群上长期稳定的多维分布式并行训练。模型保存为3456个切片，训练模型容量约7.6TB，推理模型保存成16个切片，容量约375GB，支持4096上下文窗口长度，主要聚焦中文核心能力，兼顾英文和部分多语言语种数据，目前训练1T token数据，模型持续训练迭代中。\n大模型的开发成长充满未知和探索性挑战，跟随着中国算力网的不断壮大，通过模型训练全流程的开源开放，希望鹏城·脑海200B 模型作为算力网上一个种子吸引产学研界更多人参与到通用大语言模型的研究和应用。`,
descr: [
`PengCheng-Mind 200B 脑海大模型是基于Transformer 架构的2010亿参数自回归式语言模型。模型全流程基于中国算力网枢纽节点（鹏城云脑Ⅱ）的全自主安全可控国产软硬件平台进行开发和训练，采用MindSpore框架实现在大规模集群上长期稳定的多维分布式并行训练。训练模型保存为3456个切片，容量约7.6TB，推理模型保存为16个切片，容量约375GB。支持4096个token的上下文窗口长度，主要聚焦中文核心能力，兼顾英文和部分多语言能力。当前模型已完成训练1T Tokens数据量，仍在持续训练迭代中。`,
`大模型的开发充满未知与挑战，随着中国算力网的不断发展壮大，希望通过模型训练全流程开源开放的方式，将鹏城·脑海200B 模型培育为算力网上一个种子应用，吸引产学研界更多人参与到通用大语言模型基座的研究和应用中，一起助力国产智能软硬件生态的发展。`,
],
stage: [
{ name: '第一阶段', tokens: '100B Tokens', },
{ name: '第二阶段', tokens: '200B Tokens', },
{ name: '第三阶段', tokens: '300B Tokens', },
{ name: '', tokens: '', },
{ name: '第八阶段', tokens: '800B Tokens', },
{ name: '第九阶段', tokens: '900B Tokens', },
{ name: '第十阶段', tokens: '1T Tokens', },
{ name: '第四阶段', tokens: '400B Tokens', },
{ name: '第五阶段', tokens: '500B Tokens', },
],
chart: [{
title: '0-150B token 数据分布',
title: '0-150B Tokens主要 数据分布',
x: ['文学', '经济', '其他', '法律', '教育学', '医学', '政治', '历史', '体育', '游戏娱乐', '影视影评', '心理学', '休闲旅游', '计算机科学', '艺术', '食品科学', '农业科学', '电子商务', '电子信息科学', '管理学', '交通运输', '能源科学', '军事', '轻工业', '环境科学', '安全科学与消防工程', '哲学', '生物科学', '城市规划与建设', '地理', '材料科学', '广告营销', '宗教', '天文学', '气象学', '化学科学', '物理科学', '数学科学', '重工业', '通信技术'],
y: [37.04, 11.98, 7.27, 7.03, 4.83, 4.8, 2.83, 2.67, 2.06, 1.89, 1.83, 1.41, 1.24, 1.06, 1.02, 0.98, 0.89, 0.85, 0.77, 0.7, 0.65, 0.64, 0.48, 0.47, 0.46, 0.43, 0.43, 0.41, 0.4, 0.4, 0.37, 0.3, 0.26, 0.24, 0.23, 0.18, 0.17, 0.13, 0.13, 0.07],
x0: ['文学', '经济', '法律', '教育学', '医学'],
y0: [37.04, 11.98, 7.03, 4.83, 4.8],
}, {
title: '150-330B token数据分布',
title: '150-330B Tokens主要 数据分布',
x: ['文学', '其他', '经济', '法律', '医学', '历史', '教育学', '游戏娱乐', '政治', '体育', '影视影评', '休闲旅游', '心理学', '计算机科学', '艺术', '食品科学', '电子信息科学', '农业科学', '电子商务', '管理学', '军事', '交通运输', '轻工业', '能源科学', '环境科学', '材料科学', '安全科学与消防工程', '生物科学', '哲学', '地理', '宗教', '广告营销', '化学科学', '城市规划与建设', '天文学', '气象学', '物理科学', '通信技术', '数学科学', '重工业'],
y: [28.42, 9.98, 9.59, 7.44, 5.53, 4.23, 3.59, 3.18, 2.87, 2.74, 2.26, 1.75, 1.45, 1.35, 1.33, 1.29, 1.23, 1.11, 0.89, 0.84, 0.84, 0.83, 0.69, 0.6, 0.6, 0.56, 0.54, 0.54, 0.53, 0.53, 0.52, 0.36, 0.33, 0.33, 0.26, 0.24, 0.18, 0.16, 0.15, 0.14],
x0: ['文学', '经济', '法律', '医学', '历史'],
y0: [28.42, 9.59, 7.44, 5.53, 4.23],
}, {
title: '330-530B token数据分布',
title: '330-530B Tokens主要 数据分布',
x: ['文学', '其他', '经济', '法律', '医学', '教育学', '历史', '政治', '游戏娱乐', '体育', '影视影评', '休闲旅游', '计算机科学', '艺术', '食品科学', '心理学', '电子商务', '农业科学', '电子信息科学', '交通运输', '轻工业', '管理学', '军事', '环境科学', '能源科学', '安全科学与消防工程', '地理', '材料科学', '生物科学', '宗教', '哲学', '广告营销', '城市规划与建设', '化学科学', '气象学', '天文学', '重工业', '物理科学', '数学科学', '通信技术'],
y: [24.94, 10.49, 10.29, 7.73, 5.17, 3.97, 3.73, 3.2, 3.2, 3.09, 2.2, 2.01, 1.72, 1.41, 1.36, 1.34, 1.29, 1.24, 1.21, 0.94, 0.91, 0.89, 0.78, 0.71, 0.69, 0.62, 0.51, 0.5, 0.5, 0.5, 0.46, 0.45, 0.37, 0.31, 0.27, 0.27, 0.2, 0.19, 0.17, 0.17],
x0: ['文学', '经济', '法律', '医学', '教育学'],
y0: [24.94, 10.29, 7.73, 5.17, 3.97],
}]
}, {
descr: `PC-Mind 7B 脑海模型，它是基于中国算力网训练，可跨算力中心迁移的70亿参数量生成式大语言模型，具有强大的语言理解和生成能力。\n该模型可以用于多种自然语言处理任务，如文本生成、机器翻译、问答系统等。它在提供高质量的文本生成方面表现出色，并且可以自动生成连贯、合理的语句。此外，它还拥有较高的推理能力，可以对输入的文本进行深入的理解和分析。\nPC-Mind 7B 在NLP领域具有广泛的应用前景，可以帮助加速自然语言处理任务的研究和开发过程。同时支持该模型到GPU版本的转换。`,
descr: [
`PengCheng-Mind 7B 脑海大模型是基于中国算力网训练，可实现跨算力中心迁移的70亿参数自回归式语言模型，该模型支持NPU版本到GPU版本的转换，具有强大的语言理解和生成能力，可深入理解输入文本，自动生成连贯、合理的语句。模型可用于多种自然语言处理任务，如文本生成、机器翻译、问答系统等。PengCheng-Mind 7B在自然语言处理领域具有广阔的应用前景，有利于加速人工智能的学术研究和智能应用的开发过程。`,
],
stage: [
{ name: '第一阶段', tokens: '100B Tokens', },
{ name: '第二阶段', tokens: '200B Tokens', },
{ name: '第三阶段', tokens: '300B Tokens', },
{ name: '', tokens: '', },
{ name: '第八阶段', tokens: '800B Tokens', },
{ name: '第九阶段', tokens: '900B Tokens', },
{ name: '第十阶段', tokens: '1T Tokens', },
{ name: '第四阶段', tokens: '400B Tokens', },
{ name: '第五阶段', tokens: '500B Tokens', },
],
chart: [{
title: '0-36.5B token 数据分布',
title: '0-36.5B Tokens主要 数据分布',
x: ['文学', '经济', '其他', '法律', '历史', '教育学', '政治', '体育', '医学', '游戏娱乐', '影视影评', '艺术', '农业科学', '休闲旅游', '食品科学', '计算机科学', '电子信息科学', '心理学', '交通运输', '电子商务', '军事', '地理', '管理学', '生物科学', '安全科学与消防工程', '环境科学', '能源科学', '轻工业', '哲学', '城市规划与建设', '宗教', '材料科学', '广告营销', '化学科学', '气象学', '天文学', '数学科学', '通信技术', '物理科学', '重工业'],
y: [15.38, 13.63, 11.81, 6.64, 4.72, 4.67, 4.15, 4.1, 3.86, 3.1, 2.64, 1.96, 1.94, 1.78, 1.73, 1.59, 1.47, 1.42, 1.32, 1.18, 1.13, 1.05, 1.01, 0.79, 0.74, 0.73, 0.65, 0.58, 0.56, 0.53, 0.47, 0.43, 0.39, 0.36, 0.33, 0.3, 0.25, 0.25, 0.23, 0.13],
x0: ['文学', '经济', '法律', '历史', '教育学'],
y0: [15.38, 13.63, 6.64, 4.72, 4.67],
}, {
title: '36.5-123.5B token数据分布',
title: '36.5-123.5B Tokens主要 数据分布',
x: ['文学', '其他', '经济', '历史', '医学', '教育学', '法律', '政治', '影视影评', '体育', '游戏娱乐', '心理学', '休闲旅游', '艺术', '食品科学', '农业科学', '计算机科学', '管理学', '交通运输', '军事', '电子信息科学', '地理', '电子商务', '宗教', '哲学', '生物科学', '环境科学', '安全科学与消防工程', '轻工业', '能源科学', '城市规划与建设', '广告营销', '材料科学', '气象学', '天文学', '化学科学', '物理科学', '数学科学', '通信技术', '重工业'],
y: [20.93, 11.48, 11.42, 5.48, 5.02, 4.91, 3.73, 3.12, 3.11, 2.98, 2.78, 2.49, 2.46, 1.96, 1.93, 1.56, 1.24, 1.09, 1.07, 1.06, 1.03, 0.92, 0.86, 0.83, 0.82, 0.61, 0.6, 0.6, 0.58, 0.52, 0.44, 0.42, 0.38, 0.31, 0.29, 0.25, 0.21, 0.19, 0.18, 0.13],
x0: ['文学', '经济', '历史', '医学', '教育学'],
y0: [20.93, 11.42, 5.48, 5.02, 4.91],
}, {
title: '123.5-197.5B token数据分布',
title: '123.5-197.5B Tokens主要 数据分布',
x: ['文学', '经济', '其他', '法律', '政治', '医学', '教育学', '体育', '游戏娱乐', '历史', '计算机科学', '休闲旅游', '影视影评', '电子商务', '电子信息科学', '艺术', '食品科学', '轻工业', '农业科学', '心理学', '管理学', '交通运输', '能源科学', '环境科学', '安全科学与消防工程', '广告营销', '军事', '材料科学', '地理', '宗教', '哲学', '生物科学', '城市规划与建设', '重工业', '化学科学', '气象学', '天文学', '通信技术', '物理科学', '数学科学'],
y: [19.42, 11.95, 10.82, 8.62, 5.43, 4.82, 3.79, 3.76, 3.06, 2.92, 2.37, 2.11, 2.09, 1.89, 1.37, 1.34, 1.31, 1.25, 1.07, 1.03, 1, 0.99, 0.89, 0.81, 0.65, 0.59, 0.58, 0.53, 0.49, 0.45, 0.37, 0.37, 0.36, 0.29, 0.28, 0.24, 0.24, 0.19, 0.15, 0.12],
x0: ['文学', '经济', '法律', '政治', '医学'],
y0: [19.42, 11.95, 8.62, 5.43, 4.82],
}, {
title: '197.5-284.5B token数据分布',
title: '197.5-284.5B Tokens主要 数据分布',
x: ['文学', '法律', '其他', '经济', '医学', '历史', '政治', '教育学', '游戏娱乐', '体育', '影视影评', '休闲旅游', '计算机科学', '心理学', '电子商务', '艺术', '食品科学', '电子信息科学', '管理学', '轻工业', '农业科学', '交通运输', '能源科学', '环境科学', '哲学', '军事', '安全科学与消防工程', '宗教', '材料科学', '广告营销', '地理', '生物科学', '城市规划与建设', '化学科学', '天文学', '重工业', '气象学', '物理科学', '通信技术', '数学科学'],
y: [29.72, 20.27, 7.48, 7.29, 3.47, 3.44, 3.14, 2.77, 2.61, 2.33, 1.66, 1.43, 1.38, 1.06, 1.02, 1, 0.94, 0.83, 0.78, 0.74, 0.74, 0.57, 0.52, 0.51, 0.5, 0.5, 0.41, 0.39, 0.38, 0.37, 0.29, 0.24, 0.22, 0.19, 0.17, 0.17, 0.16, 0.13, 0.11, 0.09],
x0: ['文学', '法律', '经济', '医学', '历史'],
y0: [29.72, 20.27, 7.29, 3.47, 3.44,],
}, {
title: '284.5-344.5B token数据分布',
title: '284.5-344.5B Tokens主要 数据分布',
x: ['文学', '法律', '其他', '经济', '教育学', '政治', '医学', '体育', '游戏娱乐', '历史', '休闲旅游', '计算机科学', '影视影评', '电子商务', '食品科学', '艺术', '轻工业', '心理学', '电子信息科学', '农业科学', '管理学', '环境科学', '交通运输', '能源科学', '安全科学与消防工程', '军事', '广告营销', '宗教', '材料科学', '哲学', '城市规划与建设', '重工业', '地理', '生物科学', '气象学', '天文学', '化学科学', '通信技术', '物理科学', '数学科学'],
y: [18.27, 12.97, 11.54, 10.65, 4.16, 4.12, 4.1, 3.43, 3.17, 2.84, 2.26, 2.2, 2.09, 1.8, 1.39, 1.38, 1.31, 1.15, 1.14, 1.1, 1.02, 0.83, 0.83, 0.77, 0.65, 0.61, 0.58, 0.54, 0.49, 0.37, 0.33, 0.3, 0.3, 0.25, 0.25, 0.21, 0.2, 0.17, 0.12, 0.1],
x0: ['文学', '法律', '经济', '教育学', '政治'],
y0: [18.27, 12.97, 10.65, 4.16, 4.12],
}]
}]
};
@@ -290,8 +335,10 @@ export default {
const chart = charts[i];
const options = JSON.parse(JSON.stringify(templateOptions));
options.title.text = chart.title;
options.xAxis.data = chart.x.slice(0);
options.series[0].data = chart.y.slice(0);
// options.xAxis.data = chart.x.slice(0);
// options.series[0].data = chart.y.slice(0);
options.xAxis.data = chart.x0.slice(0);
options.series[0].data = chart.y0.slice(0);
const chartHandler = echarts.init(document.querySelector(`.chart-el-${i}`));
chartHandler.setOption(options);
chartHandlers.push(chartHandler);
@@ -319,13 +366,25 @@ export default {
justify-content: center;
align-items: center;
.title-0 {
font-weight: 700;
font-size: 36px;
line-height: 48px;
color: rgb(16, 16, 16);
text-align: center;
margin-top: -128px;
margin-bottom: 48px;
text-align: center;
padding: 0 16px;
max-width: 828px;
}
.title {
font-weight: 700;
font-size: 48px;
line-height: 48px;
color: rgb(16, 16, 16);
margin-top: -100px;
margin-bottom: 32px;
margin-bottom: 48px;
text-align: center;
}
@@ -365,7 +424,7 @@ export default {
line-height: 30px;
padding-left: 20px;
padding-right: 20px;
min-width: 420px ;
min-width: 50% ;
margin-bottom: 20px;
@@ -396,11 +455,10 @@ export default {
}
.content-r {
min-width: 420px ;
min-width: 50% ;
flex: 1;
background: url('/img/model/mind.png') center top no-repeat;
background-size: contain;
min-height: 300px;
margin-bottom: 20px;
}
}
@@ -419,8 +477,9 @@ export default {
flex-wrap: wrap;
.model-card {
width: 540px;
height: 270px;
flex: 1;
max-width: 540px;
align-self: stretch;
border-color: rgba(201, 188, 234, 0.4);
border-width: 1px;
border-style: solid;
@@ -430,7 +489,7 @@ export default {
font-size: 14px;
padding: 25px;
line-height: 20px;
margin: 10px 4 0px;
margin: 10px 3 0px;
background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(-0.41100000000000014%2C%201.129%2C%20-0.9908929639889198%2C%20-0.41100000000000014%2C%200.911%2C%20-0.129)%22%3E%3Cstop%20stop-color%3D%22%23f1ebff%22%20stop-opacity%3D%221%22%20offset%3D%220.005%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23eef2ff%22%20stop-opacity%3D%221%22%20offset%3D%220.19%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%221%22%20offset%3D%220.59%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
.model-name-1 {
@@ -488,7 +547,7 @@ export default {
.descr-l2 {
font-weight: 700;
font-size: 20 px;
font-size: 18 px;
color: rgb(16, 16, 16);
line-height: 29px;
margin-bottom: 8px;
@@ -510,6 +569,24 @@ export default {
}
}
.link {
display: flex;
margin-top: 16px;
a {
display: flex;
align-items: center;
height: 40px;
border-width: 1px;
border-style: solid;
color: rgb(16, 16, 16);
border-radius: 20px;
padding: 0 16px;
border-color: rgb(201, 188, 234);
background: rgb(238, 242, 255);
}
}
.ops {
a {
display: inline-block;
@@ -558,7 +635,7 @@ export default {
}
.model-tab-content {
margin-top: -1 px;
margin-top: -2 px;
border-color: rgb(201, 188, 234);
border-width: 1px;
border-style: solid;
@@ -567,10 +644,8 @@ export default {
border-radius: 0 0 10px 10px;
font-size: 14px;
padding: 32px;
padding-top: 16px;
.descr {
white-space: pre-line;
.descr p {
font-size: 16px;
color: #101010;
line-height: 24px;
@@ -604,6 +679,7 @@ export default {
display: flex;
align-items: center;
margin-bottom: 10px;
width: 159px;
.stage-item {
width: 125px;
@@ -629,15 +705,23 @@ export default {
}
.stage-arr {
width: 40px;
margin-top: 4px;
}
}
}
}
.chart-el {
height: 400px;
margin-bottom: 40px;
.chart-el-c {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
.chart-el {
flex-basis: calc(33%);
height: 400px;
margin-bottom: 40px;
}
}
}
@@ -645,5 +729,155 @@ export default {
.model-tab-content {
border-radius: 10px;
}
.model-tab-content .chart-el-c {
.chart-el {
flex-basis: calc(33.3%);
}
}
}
@media only screen and (max-width: 1200px) {
.model-tab-content .chart-el-c {
.chart-el {
flex-basis: calc(49%);
}
}
}
@media only screen and (max-width: 1000px) {
.models .model-card-c {
display: block;
}
.models .model-card-c .model-card {
margin: 10px auto 30px;
}
}
@media only screen and (max-width: 767px) {
.header .title-0 {
font-size: 20px;
margin-bottom: 32px;
}
.header .title {
font-size: 28px;
}
.header .descr {
font-size: 18px;
}
.top {
padding-top: 20px;
padding-bottom: 20px;
}
.top .content .content-title {
font-size: 20px;
margin-bottom: 20px;
}
.top .content .content-c .content-l .apply-c {
text-align: center;
}
.top .content .content-c .content-l .apply-descr {
text-align: center;
}
.top .content .content-c .content-l p {
font-size: 14px;
line-height: 23px;
}
.top .content .content-c .content-l,
.top .content .content-c .content-r {
min-width: 100%;
min-height: 200px;
padding-left: 0px;
padding-right: 0px;
}
.models {
padding: 20px 0;
}
.models .model-card-c {
display: block;
}
.models .model-card-c .model-card {
margin: 10px auto 20px;
.model-name-1 {
font-size: 16px;
}
.model-name-2 {
font-size: 20px;
}
.model-descr-c .descr .descr-l1 {
font-size: 12px;
}
.model-descr-c .descr .descr-l2 {
font-size: 16px;
line-height: 18px;
}
.model-descr-c .descr .descr-l3 {
font-size: 12px;
line-height: 14px;
}
}
.models .model-card-c .model-card .link a {
height: 34px;
border-radius: 17px;
padding: 0 12px;
font-size: 14px;
}
.model-tab .tab-item {
font-size: 14px;
height: 46px;
}
.model-tab-content {
padding: 12px;
margin-top: -2px;
.descr p {
padding-top: 2px;
font-size: 14px;
}
}
.model-tab-content .life-stage .descr {
font-size: 14px;
}
.model-tab-content .life-stage .stage-c {
display: flex;
overflow: auto;
flex-wrap: nowrap;
}
.model-tab-content .life-stage .title,
.model-tab-content .data-distribution .title {
font-size: 18px;
margin-top: 20px;
margin-bottom: 10px;
}
.model-tab-content .chart-el-c {
.chart-el {
flex-basis: calc(99%);
}
}
}
</style>
