|
|
|
@@ -0,0 +1,649 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<div class="header"> |
|
|
|
<div class="title">鹏城 · 脑海</div> |
|
|
|
<div class="descr">两千亿参数规模大语言模型，期待与您共同书写脑海大模型的新篇章！</div> |
|
|
|
</div> |
|
|
|
<div class="top"> |
|
|
|
<div class="ui container content"> |
|
|
|
<div class="content-title">鹏城 · 脑海大模型开源计划</div> |
|
|
|
<div class="content-c"> |
|
|
|
<div class="content-l"> |
|
|
|
<div class=""> |
|
|
|
<p>在信息爆炸的时代，开源大模型的力量无以估量。</p> |
|
|
|
<p>我们很荣幸面向全社会开源两千亿参数规模的大语言模型基座—“鹏城·脑海”，它不仅具备广泛的应用前景，更是开启了一个充满无限可能的创新之门。</p> |
|
|
|
<p> |
|
|
|
一路上，它虽不尽善尽美，我们坚信开源的力量会让脑海模型得到真正的成长与繁荣。为此，我们邀请各方贤达基于脑海模型开展进一步研究，挖掘无限可能，共同推动人工智能的进步。我们将向开源联合体开放“鹏城·脑海”多参数版本及其成长生命期各个阶段版本，期待与您共同书写脑海大模型的新篇章！ |
|
|
|
</p> |
|
|
|
<p style="text-align: right;">——鹏城实验室脑海大模型研究组</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> |
|
|
|
</div> |
|
|
|
<div class="apply-descr">下载表格，填写后发送到：secretariat@openi.org.cn</div> |
|
|
|
</div> |
|
|
|
<div class="content-r"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="ui container"> |
|
|
|
<div class="models"> |
|
|
|
<div class="model-card-c"> |
|
|
|
<div class="model-card" v-for="(item, index) in models" :key="index"> |
|
|
|
<div class="model-name-1">{{ item.name1 }}</div> |
|
|
|
<div class="model-name-2">{{ item.name2 }}</div> |
|
|
|
<div class="model-status"> |
|
|
|
<div class="status" v-if="item.status.indexOf(1) > -1"> |
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" |
|
|
|
class="styles__StyledSVGIconPathComponent-sc-gbp7ch-0 iVwQlg svg-icon-path-icon fill" |
|
|
|
viewBox="0 0 32 32" width="16" height="16" fill="rgb(22, 132, 252)"> |
|
|
|
<defs data-reactroot=""></defs> |
|
|
|
<g> |
|
|
|
<path |
|
|
|
d="M16 29.333c-7.364 0-13.333-5.969-13.333-13.333s5.969-13.333 13.333-13.333 13.333 5.969 13.333 13.333-5.969 13.333-13.333 13.333zM16 26.667c5.891 0 10.667-4.776 10.667-10.667s-4.776-10.667-10.667-10.667v0c-5.891 0-10.667 4.776-10.667 10.667s4.776 10.667 10.667 10.667v0zM14.671 21.333l-5.657-5.657 1.885-1.885 3.772 3.772 7.541-7.543 1.887 1.885-9.428 9.428z"> |
|
|
|
</path> |
|
|
|
</g> |
|
|
|
</svg> |
|
|
|
<span>可申请</span> |
|
|
|
</div> |
|
|
|
<div class="status" v-if="item.status.indexOf(2) > -1"> |
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" |
|
|
|
class="styles__StyledSVGIconPathComponent-sc-gbp7ch-0 iVwQlg svg-icon-path-icon fill" |
|
|
|
viewBox="0 0 32 32" width="16" height="16" fill="rgb(22, 132, 252)"> |
|
|
|
<defs data-reactroot=""></defs> |
|
|
|
<g> |
|
|
|
<path |
|
|
|
d="M16 2.667c0.004 0 0.009 0 0.014 0 4.147 0 7.852 1.897 10.292 4.871l0.019 0.023-8.439 8.439 8.439 8.439c-2.459 2.997-6.163 4.895-10.31 4.895-0.005 0-0.009 0-0.014 0h0.001c-7.364 0-13.333-5.969-13.333-13.333s5.969-13.333 13.333-13.333zM16 5.333c-5.89 0.001-10.665 4.776-10.665 10.667s4.776 10.667 10.667 10.667c2.353 0 4.527-0.762 6.291-2.052l-0.030 0.021 0.277-0.209-8.427-8.427 8.427-8.428-0.277-0.208c-1.627-1.194-3.648-1.94-5.839-2.022l-0.019-0.001-0.404-0.008zM16 6.667c1.105 0 2 0.895 2 2s-0.895 2-2 2v0c-1.105 0-2-0.895-2-2s0.895-2 2-2v0z"> |
|
|
|
</path> |
|
|
|
</g> |
|
|
|
</svg> |
|
|
|
<span>持续训练中</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="model-descr-c"> |
|
|
|
<template v-for="(descr, descrIndex) in item.descr"> |
|
|
|
<div class="descr" :key="descrIndex"> |
|
|
|
<div v-if="descr[0]" class="descr-l1">{{ descr[0] }}</div> |
|
|
|
<div v-if="descr[1]" class="descr-l2">{{ descr[1] }}</div> |
|
|
|
<div v-if="descr[2]" class="descr-l3">{{ descr[2] }}</div> |
|
|
|
</div> |
|
|
|
<div class="line" v-if="descrIndex != item.descr.length - 1" :key="descrIndex + 100"></div> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
<div class="ops"> |
|
|
|
<a :href="op.link" v-for="(op, opIndex) in item.ops" :key="opIndex">{{ op.text }}</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="ui container"> |
|
|
|
<div class="model-tab"> |
|
|
|
<div class="tab-item" v-for="(item, index) in tabList" :key="index" :class="activeTab == index ? 'active' : ''" |
|
|
|
@click="changeTab(index)"> |
|
|
|
{{ item }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="model-tab-content"> |
|
|
|
<div class="descr"> |
|
|
|
{{ tabContent[activeTab].descr }} |
|
|
|
</div> |
|
|
|
<div class="life-stage"> |
|
|
|
<div class="title">成长生命期阶段版本</div> |
|
|
|
<div class="descr">您提交的申请体验通过审核后，我们将提供中间 checkpoints 供您研究使用；随着训练的推进，我们将提供对应阶段的 checkpoints 。</div> |
|
|
|
<div class="stage-c"> |
|
|
|
<div class="stage" v-for="(item, index) in tabContent[activeTab].stage" :key="index"> |
|
|
|
<div class="stage-item" v-if="item.name"> |
|
|
|
<div class="name">{{ item.name }}</div> |
|
|
|
<div class="tokens">{{ item.tokens }}</div> |
|
|
|
</div> |
|
|
|
<div v-else class="stage-item">······</div> |
|
|
|
<div class="stage-arr"> |
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" style="overflow: visible; filter: none;" view-box="0 0 32 32" |
|
|
|
width="32" height="9"> |
|
|
|
<path d="M 0 0.5 L 32 0.5" stroke="rgba(22,132,252,1)" stroke-width="1px"></path> |
|
|
|
</svg> |
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" style="margin-left:-13px;" fill="rgba(22,132,252,1)" |
|
|
|
viewBox="0 0 32 32" width="17" height="17"> |
|
|
|
<defs data-reactroot=""></defs> |
|
|
|
<g> |
|
|
|
<path d="M17.563 16l-6.6-6.6 1.885-1.885 8.485 8.485-8.485 8.485-1.885-1.885z"></path> |
|
|
|
</g> |
|
|
|
</svg> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="stage"> |
|
|
|
<div class="stage-item">······</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</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> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
import * as echarts from "echarts"; |
|
|
|
|
|
|
|
const templateOptions = { |
|
|
|
title: { |
|
|
|
text: '', |
|
|
|
left: 'center', |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
top: 48 |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
show: true, |
|
|
|
formatter: '{b0}: {c0}%' |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
axisLabel: { interval: 0, rotate: 30 }, |
|
|
|
data: [], |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: 'value', |
|
|
|
axisLabel: { |
|
|
|
formatter: '{value}%' |
|
|
|
}, |
|
|
|
}, |
|
|
|
dataZoom: [{ |
|
|
|
type: 'inside', |
|
|
|
start: 0, |
|
|
|
end: 100 |
|
|
|
}], |
|
|
|
series: [{ |
|
|
|
data: [], |
|
|
|
type: 'bar', |
|
|
|
itemStyle: { |
|
|
|
color: '#188df0', |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
position: 'top', |
|
|
|
rotate: 30, |
|
|
|
formatter: '{c}%' |
|
|
|
} |
|
|
|
}] |
|
|
|
}; |
|
|
|
|
|
|
|
const chartHandlers = []; |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
models: [{ |
|
|
|
name1: '鹏城·脑海两千亿参数', |
|
|
|
name2: 'PC-Mind 200B', |
|
|
|
status: [1, 2], // 1-可申请、2-持续训练中 |
|
|
|
descr: [ |
|
|
|
['基于', '鹏城云脑Ⅱ', '算力网枢纽节点'], |
|
|
|
['切片', '3456'], |
|
|
|
['基于', 'MindSpore'], |
|
|
|
], |
|
|
|
ops: [], |
|
|
|
}, { |
|
|
|
name1: '鹏城·脑海七十亿参数', |
|
|
|
name2: 'PC-Mind 7B', |
|
|
|
status: [1, 2], |
|
|
|
descr: [ |
|
|
|
['基于', '中国算力网', '西安、成都、大连节点'], |
|
|
|
['支持', 'NPU转换GPU'], |
|
|
|
['基于', 'MindSpore'], |
|
|
|
], |
|
|
|
ops: [], |
|
|
|
}], |
|
|
|
activeTab: 0, |
|
|
|
tabList: ['PC-Mind 200B', 'PC-Mind 7B'], |
|
|
|
tabContent: [{ |
|
|
|
descr: `鹏城·脑海200B 模型是基于Transformer 架构的2010亿参数自回归式语言模型。\n模型全流程基于（中国算力网枢纽节点）“鹏城云脑Ⅱ”自主安全可控的全国产软硬件平台进行开发和训练，基于MindSpore框架实现在大规模集群上长期稳定的多维分布式并行训练。模型保存为3456个切片，训练模型容量约7.6TB，推理模型保存成16个切片，容量约375GB，支持4096上下文窗口长度，主要聚焦中文核心能力，兼顾英文和部分多语言语种数据，目前训练1T token数据，模型持续训练迭代中。\n大模型的开发成长充满未知和探索性挑战，跟随着中国算力网的不断壮大，通过模型训练全流程的开源开放，希望鹏城·脑海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', }, |
|
|
|
], |
|
|
|
chart: [{ |
|
|
|
title: '0-150B token数据分布', |
|
|
|
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], |
|
|
|
}, { |
|
|
|
title: '150-330B token数据分布', |
|
|
|
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], |
|
|
|
}, { |
|
|
|
title: '330-530B token数据分布', |
|
|
|
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], |
|
|
|
}] |
|
|
|
}, { |
|
|
|
descr: `PC-Mind 7B 脑海模型，它是基于中国算力网训练，可跨算力中心迁移的70亿参数量生成式大语言模型，具有强大的语言理解和生成能力。\n该模型可以用于多种自然语言处理任务，如文本生成、机器翻译、问答系统等。它在提供高质量的文本生成方面表现出色，并且可以自动生成连贯、合理的语句。此外，它还拥有较高的推理能力，可以对输入的文本进行深入的理解和分析。\nPC-Mind 7B 在NLP领域具有广泛的应用前景，可以帮助加速自然语言处理任务的研究和开发过程。同时支持该模型到GPU版本的转换。`, |
|
|
|
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', }, |
|
|
|
], |
|
|
|
chart: [{ |
|
|
|
title: '0-36.5B token数据分布', |
|
|
|
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], |
|
|
|
}, { |
|
|
|
title: '36.5-123.5B token数据分布', |
|
|
|
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], |
|
|
|
}, { |
|
|
|
title: '123.5-197.5B token数据分布', |
|
|
|
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], |
|
|
|
}, { |
|
|
|
title: '197.5-284.5B token数据分布', |
|
|
|
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], |
|
|
|
}, { |
|
|
|
title: '284.5-344.5B token数据分布', |
|
|
|
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], |
|
|
|
}] |
|
|
|
}] |
|
|
|
}; |
|
|
|
}, |
|
|
|
components: {}, |
|
|
|
methods: { |
|
|
|
changeTab(index) { |
|
|
|
this.activeTab = index; |
|
|
|
this.$nextTick(() => { |
|
|
|
this.drawChart(); |
|
|
|
}) |
|
|
|
}, |
|
|
|
disposeChart() { |
|
|
|
for (let i = 0, iLen = chartHandlers.length; i < iLen; i++) { |
|
|
|
const chartHandler = chartHandlers[i]; |
|
|
|
chartHandler && chartHandler.dispose(); |
|
|
|
} |
|
|
|
chartHandlers.splice(0); |
|
|
|
}, |
|
|
|
resize() { |
|
|
|
for (let i = 0, iLen = chartHandlers.length; i < iLen; i++) { |
|
|
|
const chartHandler = chartHandlers[i]; |
|
|
|
chartHandler && chartHandler.resize(); |
|
|
|
} |
|
|
|
}, |
|
|
|
drawChart() { |
|
|
|
this.disposeChart(); |
|
|
|
const charts = this.tabContent[this.activeTab].chart || []; |
|
|
|
for (let i = 0, iLen = charts.length; i < iLen; i++) { |
|
|
|
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); |
|
|
|
const chartHandler = echarts.init(document.querySelector(`.chart-el-${i}`)); |
|
|
|
chartHandler.setOption(options); |
|
|
|
chartHandlers.push(chartHandler); |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.changeTab(0); |
|
|
|
window.addEventListener('resize', this.resize); |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
this.disposeChart(); |
|
|
|
window.removeEventListener('resize', this.resize); |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="less"> |
|
|
|
.header { |
|
|
|
height: 580px; |
|
|
|
background: url('/img/model/PC-Mind-home.jpg') center center no-repeat; |
|
|
|
background-size: cover; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.title { |
|
|
|
font-weight: 700; |
|
|
|
font-size: 48px; |
|
|
|
line-height: 48px; |
|
|
|
color: rgb(16, 16, 16); |
|
|
|
margin-top: -100px; |
|
|
|
margin-bottom: 32px; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.descr { |
|
|
|
font-weight: 400; |
|
|
|
font-size: 28px; |
|
|
|
color: rgba(16, 16, 16, 0.5); |
|
|
|
line-height: 36px; |
|
|
|
text-align: center; |
|
|
|
padding: 0 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.top { |
|
|
|
background-color: #f7f7f7; |
|
|
|
padding: 40px 0 40px 0; |
|
|
|
|
|
|
|
.content { |
|
|
|
.content-title { |
|
|
|
text-align: center; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 28px; |
|
|
|
line-height: 32px; |
|
|
|
color: rgb(16, 16, 16); |
|
|
|
margin-bottom: 40px; |
|
|
|
} |
|
|
|
|
|
|
|
.content-c { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
.content-l { |
|
|
|
flex: 1; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 16px; |
|
|
|
color: rgb(16, 16, 16); |
|
|
|
line-height: 30px; |
|
|
|
padding-left: 20px; |
|
|
|
padding-right: 20px; |
|
|
|
min-width: 420px; |
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
|
|
|
|
|
|
p { |
|
|
|
margin-bottom: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.apply-btn { |
|
|
|
display: inline-block; |
|
|
|
height: 40px; |
|
|
|
border-color: rgb(22, 132, 252); |
|
|
|
border-width: 1px; |
|
|
|
border-style: solid; |
|
|
|
color: rgb(22, 132, 252); |
|
|
|
border-radius: 5px; |
|
|
|
font-size: 16px; |
|
|
|
padding: 0 18px; |
|
|
|
text-align: center; |
|
|
|
line-height: 38px; |
|
|
|
margin: 4px 0 20px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.apply-descr { |
|
|
|
font-size: 14px; |
|
|
|
color: rgba(16, 16, 16, 0.5); |
|
|
|
line-height: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.content-r { |
|
|
|
min-width: 420px; |
|
|
|
flex: 1; |
|
|
|
background: url('/img/model/mind.png') center top no-repeat; |
|
|
|
background-size: contain; |
|
|
|
min-height: 300px; |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.models { |
|
|
|
padding: 40px 0; |
|
|
|
background-color: white; |
|
|
|
|
|
|
|
.model-card-c { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
.model-card { |
|
|
|
width: 540px; |
|
|
|
height: 270px; |
|
|
|
border-color: rgba(201, 188, 234, 0.4); |
|
|
|
border-width: 1px; |
|
|
|
border-style: solid; |
|
|
|
box-shadow: rgba(157, 197, 226, 0.2) 0px 5px 10px 0px; |
|
|
|
color: rgb(16, 16, 16); |
|
|
|
border-radius: 10px; |
|
|
|
font-size: 14px; |
|
|
|
padding: 25px; |
|
|
|
line-height: 20px; |
|
|
|
margin: 10px 40px; |
|
|
|
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 { |
|
|
|
font-size: 18px; |
|
|
|
color: rgb(16, 16, 16); |
|
|
|
line-height: 26px; |
|
|
|
text-align: left; |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.model-name-2 { |
|
|
|
font-size: 24px; |
|
|
|
color: rgba(99, 102, 241, 1); |
|
|
|
line-height: 35px; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
|
|
|
|
.model-status { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin: 14px 0 8px 0; |
|
|
|
|
|
|
|
.status { |
|
|
|
font-size: 14px; |
|
|
|
color: rgba(22, 132, 252, 1); |
|
|
|
line-height: 20px; |
|
|
|
margin-right: 20px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
span { |
|
|
|
margin-left: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
&.waiting { |
|
|
|
color: rgba(16, 16, 16, 0.5); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.model-descr-c { |
|
|
|
display: flex; |
|
|
|
margin-top: 20px; |
|
|
|
|
|
|
|
.descr { |
|
|
|
flex: 1; |
|
|
|
|
|
|
|
.descr-l1 { |
|
|
|
font-weight: 400; |
|
|
|
font-size: 14px; |
|
|
|
color: rgba(16, 16, 16, 0.5); |
|
|
|
line-height: 20px; |
|
|
|
margin-bottom: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.descr-l2 { |
|
|
|
font-weight: 700; |
|
|
|
font-size: 20px; |
|
|
|
color: rgb(16, 16, 16); |
|
|
|
line-height: 29px; |
|
|
|
margin-bottom: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.descr-l3 { |
|
|
|
font-weight: 400; |
|
|
|
font-size: 14px; |
|
|
|
color: rgb(16, 16, 16); |
|
|
|
line-height: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.line { |
|
|
|
height: 86px; |
|
|
|
width: 1px; |
|
|
|
background-color: rgba(16, 16, 16, 0.1); |
|
|
|
margin: 0 16px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.ops { |
|
|
|
a { |
|
|
|
display: inline-block; |
|
|
|
color: rgb(22, 132, 252); |
|
|
|
border-radius: 5px; |
|
|
|
font-size: 16px; |
|
|
|
padding: 8px 16px; |
|
|
|
text-align: center; |
|
|
|
line-height: 20px; |
|
|
|
background: rgba(1, 145, 255, 0.1); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.model-tab { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
.tab-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
width: 320px; |
|
|
|
height: 78px; |
|
|
|
border-width: 1px; |
|
|
|
border-style: solid; |
|
|
|
color: rgba(16, 16, 16, 0.5); |
|
|
|
border-color: transparent; |
|
|
|
border-radius: 10px 10px 0px 0px; |
|
|
|
text-align: center; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 24px; |
|
|
|
line-height: 35px; |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
&.active { |
|
|
|
color: rgba(99, 102, 241, 1); |
|
|
|
border-color: rgb(201, 188, 234); |
|
|
|
border-bottom-color: white; |
|
|
|
background-color: white; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.model-tab-content { |
|
|
|
margin-top: -1px; |
|
|
|
border-color: rgb(201, 188, 234); |
|
|
|
border-width: 1px; |
|
|
|
border-style: solid; |
|
|
|
box-shadow: rgba(157, 197, 226, 0.2) 0px 5px 10px 0px; |
|
|
|
color: rgb(16, 16, 16); |
|
|
|
border-radius: 0 0 10px 10px; |
|
|
|
font-size: 14px; |
|
|
|
padding: 32px; |
|
|
|
padding-top: 16px; |
|
|
|
|
|
|
|
.descr { |
|
|
|
white-space: pre-line; |
|
|
|
font-size: 16px; |
|
|
|
color: #101010; |
|
|
|
line-height: 24px; |
|
|
|
} |
|
|
|
|
|
|
|
.data-distribution, |
|
|
|
.life-stage { |
|
|
|
.title { |
|
|
|
font-weight: 700; |
|
|
|
font-size: 24px; |
|
|
|
color: rgb(16, 16, 16); |
|
|
|
line-height: 35px; |
|
|
|
margin-top: 32px; |
|
|
|
margin-bottom: 18px; |
|
|
|
} |
|
|
|
|
|
|
|
.descr { |
|
|
|
font-size: 16px; |
|
|
|
color: rgb(16, 16, 16); |
|
|
|
line-height: 24px; |
|
|
|
} |
|
|
|
|
|
|
|
.stage-c { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin: 20px 0; |
|
|
|
padding: 0 20px; |
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
.stage { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 10px; |
|
|
|
|
|
|
|
.stage-item { |
|
|
|
width: 125px; |
|
|
|
height: 70px; |
|
|
|
color: rgb(16, 16, 16); |
|
|
|
border-radius: 5px; |
|
|
|
font-size: 16px; |
|
|
|
background: rgba(1, 145, 255, 0.1); |
|
|
|
text-align: center; |
|
|
|
margin-left: -6px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
.name { |
|
|
|
margin-bottom: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.tokens { |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.stage-arr { |
|
|
|
margin-top: 4px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.chart-el { |
|
|
|
height: 400px; |
|
|
|
margin-bottom: 40px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@media only screen and (min-width: 1200px) { |
|
|
|
.model-tab-content { |
|
|
|
border-radius: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
