806 lines
29 KiB
Vue
806 lines
29 KiB
Vue
<template>
|
||
<div class="secondEdition"><p class="theTitle">GitLink，新一代开源创新服务平台</p>
|
||
<div>
|
||
<div class="" style="">
|
||
<div class="ant-anchor-wrapper" style="max-height: 100vh;">
|
||
<div class="ant-anchor">
|
||
<div class="ant-anchor-ink"><span class="ant-anchor-ink-ball"></span></div>
|
||
<li class="active"><a>分布式协作开发</a></li>
|
||
<li class=""><a>一站式过程管理</a></li>
|
||
<li class=""><a>高效流水线运维</a></li>
|
||
<li class=""><a>多层次代码分析</a></li>
|
||
<li class=""><a>多维度用户画像</a></li>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="secondEditionContent">
|
||
<div class="hadoop" id="hadoop">
|
||
<div class="hadoopCon">
|
||
<div class="descBox"><p class="desc1">分布式协作开发</p>
|
||
<p class="desc2">基于Git打造分布式代码托管环境，提供免费公、私有代码仓库；</p>
|
||
<p class="desc3">支持在线文件编辑、代码分支管理、协作贡献统计、代码仓库复刻（Fork）、贡献合并请求（PR）、群智贡献审阅等功能；</p></div>
|
||
<div class="hadoopCode" :ref="(el) => setTargetRef(el, 'hadoop')">
|
||
<!-- <li>-->
|
||
<!-- <pre class="word-item" style="animation-delay: 0.2s;"><span class="codenum">1</span><span><span-->
|
||
<!-- class="code-green">git remote</span> add origin https://git.trustie.net/Gitlink/Gitlink.git</span></pre>-->
|
||
<!-- </li>-->
|
||
<!-- <li>-->
|
||
<!-- <pre class="word-item" style="animation-delay: 0.4s;"><span class="codenum">2</span><span><span-->
|
||
<!-- class="code-red">git push</span> -u origin master</span></pre>-->
|
||
<!-- </li>-->
|
||
<!-- <li>-->
|
||
<!-- <pre class="word-item" style="animation-delay: 0.6s;"><span class="codenum">3</span><span><span-->
|
||
<!-- class="code-green">git branch</span> dev</span></pre>-->
|
||
<!-- </li>-->
|
||
<!-- <li>-->
|
||
<!-- <pre class="word-item" style="animation-delay: 0.8s;"><span class="codenum">4</span><span><span-->
|
||
<!-- class="code-blue">git checkout</span> dev</span></pre>-->
|
||
<!-- </li>-->
|
||
<!-- <li>-->
|
||
<!-- <pre class="word-item" style="animation-delay: 1s;"><span class="codenum">5</span><span><span-->
|
||
<!-- class="code-green">git add</span> .</span></pre>-->
|
||
<!-- </li>-->
|
||
<!-- <li>-->
|
||
<!-- <pre class="word-item" style="animation-delay: 1.2s;"><span class="codenum">6</span><span><span-->
|
||
<!-- class="code-red">git commit</span> -m "xxx"</span></pre>-->
|
||
<!-- </li>-->
|
||
<!-- <li>-->
|
||
<!-- <pre class="word-item" style="animation-delay: 1.4s;"><span class="codenum">7</span><span><span-->
|
||
<!-- class="code-red">git push</span> origin dev</span></pre>-->
|
||
<!-- </li>-->
|
||
<!-- <li>-->
|
||
<!-- <pre class="word-item" style="animation-delay: 1.6s;"><span class="codenum">8</span><span><span-->
|
||
<!-- class="code-blue">git checkout</span> master</span></pre>-->
|
||
<!-- </li>-->
|
||
<!-- <li>-->
|
||
<!-- <pre class="word-item" style="animation-delay: 1.8s;"><span class="codenum">9</span><span><span-->
|
||
<!-- class="code-green">git pull</span> origin master</span></pre>-->
|
||
<!-- </li>-->
|
||
<!-- <li>-->
|
||
<!-- <pre class="word-item" style="animation-delay: 2s;"><span class="codenum">10</span><span><span-->
|
||
<!-- class="code-green">git merge</span> dev</span></pre>-->
|
||
<!-- </li>-->
|
||
<!-- <li>-->
|
||
<!-- <pre class="word-item" style="animation-delay: 2.2s;"><span class="codenum">11</span><span><span-->
|
||
<!-- class="code-red">git push</span> origin master</span></pre>-->
|
||
<!-- </li>-->
|
||
<img src="@/assets/v3/Line/codeafter.c3088c74.png" alt="运行结果" class="activeImg"></div>
|
||
</div>
|
||
<p class="hadoopdesc">让您的项目在这里健康、快速的成长！</p></div>
|
||
<div class="oneStop" :ref="(el) => setTargetRef(el, 'oneStop')" id="oneStop">
|
||
<div class="oneStopContent">
|
||
<div class="osLeftMain"><img src="@/assets/v3/Line/2-2-1.afd0f2f5.png" alt="" width="520px"
|
||
class="osleftPosi"><img src="@/assets/v3/Line/2-2-head.5e69dbb2.png" alt=""
|
||
width="213px" style="margin-left: -12px;"><img
|
||
src="@/assets/v3/Line/2-2-2.26bc3301.png" alt="" width="653px" class="osleftPosi1"><img
|
||
src="@/assets/v3/Line/2-2-3.6d6ce99c.png" alt="" width="367px" class="osleftPosi2"></div>
|
||
<div class="osRightMain"><p class="osRightTitle">一站式过程管理</p>
|
||
<p>提供<span>疑修（Issue）、里程碑、通知提醒、标签归档</span>等多样化任务管理工具，支持各类开发任务的发布、指派与跟踪；</p>
|
||
<p>同时提供<span>在线Wiki文档、组织多粒度管理</span>等功能，为您搭建一站式的项目过程管理环境；</p>
|
||
<p><span>让您的团队协作更高效、过程更透明！</span></p></div>
|
||
</div>
|
||
<img
|
||
src="data:image/png;base64,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"
|
||
alt="" height="83px" class="imgring"></div>
|
||
<div class="highDevops" :ref="(el) => setTargetRef(el, 'highDevops')" id="highDevops">
|
||
<div class="highDoTitle"><span>高效流水线运维</span></div>
|
||
<div class="highDoSubtitle">融合DevOps思想，提供轻量级的工作流引擎（Engine），<span>打通编码、测试、构建、部署</span>等开发运维环节；支持<span>自定义配置、代码静态扫描、构建自动触发、容器镜像托管</span>等功能，同时支持接入第三方运维工具。
|
||
</div>
|
||
<div class="highDoContent">
|
||
<div><img src="@/assets/v3/Line/2-3-1.bcb33d47.png" alt="" width="794px">
|
||
<div style="margin-bottom: 100px; margin-top: 25px; position: relative;"><img
|
||
src="@/assets/v3/Line/2-3-2.57ef08ae.png" alt="" width="520px"></div>
|
||
<img src="@/assets/v3/Line/2-3-3.52733627.png" alt="" width="427px" class="highImg2"><img
|
||
src="@/assets/v3/Line/2-3-4.339b2f1c.png" alt="" width="413px" class="highImg1"></div>
|
||
<p class="highDoBottondesc">让您的代码更加快速、可靠地形成高质量的产品！</p></div>
|
||
</div>
|
||
<div class="multipleAnalyse" :ref="(el) => setTargetRef(el, 'multipleAnalyse')" id="multipleAnalyse"><span class="title">多层次代码分析</span>
|
||
<div class="maContent"></div>
|
||
<p class="desc">提供软件软代码和芯片RTL代码的溯源分析、文件级和组件级许可证识别及风险分析、输入性开源漏洞检测和加固建议，支持分析结果的多层次可视化展示。</p></div>
|
||
<div class="multidimensional" style="opacity: 1">
|
||
<div style="height: 168px;"></div>
|
||
<div class="" :ref="(el) => setTargetRef(el, 'multidimensional')" id="multidimensional">
|
||
<div class="multidimensinalhalf">
|
||
<div><p class="halfTitle">多维度用户画像</p>
|
||
<p class="halfsubTitle"><span>实时采集和分析平台中的各类开源资源数据，</span>搭建多维度用户画像评估系统；</p></div>
|
||
<div style="width: 820px; margin-left: 34px;"><img src="@/assets/v3/Line/2-6-1.302b729e.png" alt=""
|
||
width="820px"></div>
|
||
</div>
|
||
<div class="multidimensinalPart">
|
||
<div style="width: 614px; margin-right: 40px;"><img src="@/assets/v3/Line/2-6-2.b262b91e.png" alt=""
|
||
width="614px"></div>
|
||
<div><p><span>提供</span>开发活动统计、贡献度日历、用户能力建模、角色与专业定位分析<span>等功能。</span></p>
|
||
<p>让您在个人主页展示开发动态与创新能力！</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||
|
||
// 1. 定义响应式对象存储所有目标元素（键：标识，值：DOM元素）
|
||
const targetElements = ref({});
|
||
// 2. 存储交叉观察者实例
|
||
let observer = null;
|
||
|
||
// 3. 规范的 ref 收集函数：处理元素挂载/卸载
|
||
const setTargetRef = (el, key) => {
|
||
if (el) {
|
||
// 元素挂载：存入对象
|
||
targetElements.value[key] = el;
|
||
} else {
|
||
// 元素卸载：从对象中移除
|
||
delete targetElements.value[key];
|
||
}
|
||
};
|
||
|
||
// 4. 初始化交叉观察者（批量监听）
|
||
const initObserver = () => {
|
||
// 获取所有元素的数组
|
||
const elements = Object.values(targetElements.value);
|
||
if (elements.length === 0) return;
|
||
|
||
const observerOptions = {
|
||
root: null,
|
||
rootMargin: '0px',
|
||
threshold: 0.1,
|
||
};
|
||
|
||
const observerCallback = (entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('activeCode');
|
||
} else {
|
||
// 可选：离开视口时移除类
|
||
// entry.target.classList.remove('activeCode');
|
||
}
|
||
});
|
||
};
|
||
|
||
observer = new IntersectionObserver(observerCallback, observerOptions);
|
||
// 批量监听所有元素
|
||
elements.forEach((el) => {
|
||
observer.observe(el);
|
||
});
|
||
};
|
||
|
||
// 5. 组件挂载时：等待DOM渲染完成后初始化
|
||
onMounted(async () => {
|
||
// 清空原有元素（防止重渲染重复）
|
||
targetElements.value = {};
|
||
await nextTick(); // 等待DOM渲染完成
|
||
initObserver();
|
||
});
|
||
|
||
// 6. 组件卸载时：批量销毁观察者
|
||
onUnmounted(() => {
|
||
if (observer) {
|
||
// 停止监听所有元素
|
||
Object.values(targetElements.value).forEach((el) => {
|
||
observer.unobserve(el);
|
||
});
|
||
observer.disconnect();
|
||
observer = null;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.secondEdition .theTitle {
|
||
height: 53px;
|
||
line-height: 53px;
|
||
font-size: 38px;
|
||
font-weight: 500;
|
||
color: #1e1e1e;
|
||
text-align: center;
|
||
margin: 42px 0 30px !important
|
||
}
|
||
|
||
.secondEdition .ant-affix {
|
||
background-color: #fff;
|
||
box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .09)
|
||
}
|
||
|
||
.secondEdition .ant-anchor-wrapper {
|
||
width: 1200px;
|
||
margin: 0 auto;
|
||
padding-left: 0
|
||
}
|
||
|
||
.secondEdition .ant-anchor-wrapper .ant-anchor {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center
|
||
}
|
||
|
||
.secondEdition .ant-anchor-wrapper .ant-anchor .ant-anchor-ink {
|
||
width: 100%;
|
||
height: 1px;
|
||
border-bottom: 1px solid hsla(0, 0%, 60%, .5);
|
||
bottom: 0;
|
||
top: auto
|
||
}
|
||
|
||
.secondEdition .ant-anchor-wrapper .ant-anchor li {
|
||
padding: 18px 19px;
|
||
margin: 0 10px;
|
||
position: relative;
|
||
font-size: 18px
|
||
}
|
||
|
||
.secondEdition .ant-anchor-wrapper .ant-anchor li a {
|
||
color: #333 !important
|
||
}
|
||
|
||
.secondEdition .ant-anchor-wrapper .ant-anchor li.active:after {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
height: 2px;
|
||
background-color: #466aff;
|
||
content: "";
|
||
width: 100%
|
||
}
|
||
|
||
.secondEdition .secondEditionContent {
|
||
padding: 65px 0;
|
||
width: 1200px;
|
||
margin: 0 auto
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .hadoop {
|
||
background: url(@/assets/v3/Line/2-1bg.d22a63b9.png) no-repeat 50%;
|
||
background-size: cover;
|
||
min-height: 753px;
|
||
padding: 50px 56px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .hadoop .hadoopCon {
|
||
display: flex;
|
||
width: 100%
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .hadoop .descBox {
|
||
max-width: 352px;
|
||
word-break: break-all
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .hadoop .descBox .desc1 {
|
||
height: 50px;
|
||
line-height: 50px;
|
||
font-size: 36px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
background: -webkit-linear-gradient(90deg, #50edff, #557cff);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .hadoop .descBox .desc2 {
|
||
height: 72px;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #69daf5;
|
||
line-height: 36px;
|
||
margin-top: 97px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .hadoop .descBox .desc3 {
|
||
height: 108px;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
line-height: 36px;
|
||
margin-top: 70px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .hadoop .hadoopdesc {
|
||
color: #fff;
|
||
background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-size: 18px;
|
||
line-height: 25px;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
margin-top: 40px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .oneStop {
|
||
text-align: center;
|
||
opacity: .3;
|
||
transition: 2s
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .oneStop .oneStopContent {
|
||
display: flex
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osLeftMain {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
position: relative;
|
||
margin-bottom: 182px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain {
|
||
margin-left: 22px;
|
||
text-align: left
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain .osRightTitle {
|
||
height: 50px;
|
||
font-size: 36px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
line-height: 50px;
|
||
background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin-top: 28px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p {
|
||
font-size: 20px;
|
||
color: #637497;
|
||
line-height: 36px;
|
||
margin-top: 50px;
|
||
margin-bottom: 0 !important
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p span {
|
||
color: #000;
|
||
font-weight: 500
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .oneStop .imgring, .secondEdition .secondEditionContent .oneStop .osleftPosi {
|
||
transition: 3s;
|
||
opacity: 0
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .oneStop .osleftPosi1, .secondEdition .secondEditionContent .oneStop .osleftPosi2 {
|
||
position: absolute;
|
||
right: -200px;
|
||
top: 102px;
|
||
transition: 2s;
|
||
opacity: 0;
|
||
z-index: 1
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .oneStop .osleftPosi2 {
|
||
top: 317px;
|
||
right: 10px;
|
||
transition: 2.5s;
|
||
z-index: 2
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .oneStop.activeCode, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
|
||
opacity: 1
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1 {
|
||
right: 10px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
|
||
top: 217px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .oneStop.activeCode .imgring {
|
||
opacity: 1
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .highDevops {
|
||
text-align: center
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img {
|
||
opacity: 1
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg1 {
|
||
bottom: 62px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg2 {
|
||
bottom: 215px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .highDevops .highDoTitle {
|
||
position: relative;
|
||
padding: 2px;
|
||
width: 384px;
|
||
height: 90px;
|
||
margin: 7px auto 0;
|
||
border-radius: 10px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .highDevops .highDoTitle span {
|
||
position: absolute;
|
||
z-index: 3;
|
||
width: 380px;
|
||
height: 86px;
|
||
line-height: 86px;
|
||
border-radius: 10px;
|
||
left: 2px;
|
||
top: 2px;
|
||
display: inline-block;
|
||
font-size: 36px;
|
||
font-weight: 600;
|
||
background: -webkit-linear-gradient(1deg, #d57ca0 12%, #4877f3 57%, #20c3ef 76%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .highDevops .highDoTitle:before {
|
||
position: absolute;
|
||
z-index: 2;
|
||
width: 380px;
|
||
height: 86px;
|
||
line-height: 86px;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
content: "";
|
||
top: 2px;
|
||
left: 2px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .highDevops .highDoTitle:after {
|
||
position: absolute;
|
||
content: "";
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
border-radius: 10px;
|
||
background: -webkit-linear-gradient(1deg, #d57ca0 12%, #4877f3 57%, #20c3ef 76%);
|
||
z-index: 1
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .highDevops .highDoSubtitle {
|
||
color: #637497;
|
||
font-size: 20px;
|
||
line-height: 36px;
|
||
max-width: 950px;
|
||
margin: 30px auto 28px;
|
||
text-align: center
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .highDevops .highDoSubtitle span {
|
||
color: #000;
|
||
font-weight: 500
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .highDevops .highDoContent {
|
||
background: url(@/assets/v3/Line/2-3bg.deef1b07.png) no-repeat 50%;
|
||
background-size: cover;
|
||
height: 920px;
|
||
padding: 20px 0 114px;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .highDevops .highDoContent > div {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .highDevops .highDoContent img {
|
||
opacity: 0;
|
||
transition: 2.4s
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .highDevops .highDoContent .highImg1 {
|
||
position: absolute;
|
||
bottom: 0;
|
||
transition: 1s;
|
||
transition-delay: 1s;
|
||
left: 10px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .highDevops .highDoContent .highImg2 {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 10px;
|
||
transition: 2s;
|
||
transition-delay: 1s
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .highDevops .highDoContent .highDoBottondesc {
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
color: #000;
|
||
line-height: 39px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multipleAnalyse {
|
||
background: url(@/assets/v3/Line/2-4bg.45478d20.png) no-repeat 50%;
|
||
background-size: cover;
|
||
height: 710px;
|
||
padding-left: 58px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
opacity: .3;
|
||
transition: 2s
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multipleAnalyse.activeCode {
|
||
opacity: 1
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multipleAnalyse.activeCode .maContent {
|
||
transform: rotateY(1turn)
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multipleAnalyse .title {
|
||
display: inline-block;
|
||
font-size: 36px;
|
||
font-weight: 600;
|
||
margin-bottom: 26px;
|
||
background: -webkit-linear-gradient(1deg, #6d66ff 12%, #c148ff 57%, #f59f77 76%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
line-height: 50px;
|
||
margin-top: 20px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multipleAnalyse .maContent {
|
||
height: 400px;
|
||
width: 723px;
|
||
background: url(@/assets/v3/Line/2-4-1.802eb322.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
margin: 26px 0;
|
||
transition: 3s
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multipleAnalyse .desc {
|
||
text-align: center;
|
||
max-width: 869px;
|
||
line-height: 30px;
|
||
color: #69daf5;
|
||
font-weight: 400;
|
||
font-size: 18px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multidimensional {
|
||
background: url(@/assets/v3/Line/2-5bg.9cca3de1.png) no-repeat 50%;
|
||
background-size: cover;
|
||
height: 1139px;
|
||
padding: 100px 0 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
opacity: .3;
|
||
transition: 1s
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf {
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
height: 447px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf img {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: -20px;
|
||
opacity: 0;
|
||
transition: 3s
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfTitle {
|
||
height: 50px;
|
||
font-size: 36px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
line-height: 50px;
|
||
background: -webkit-linear-gradient(112deg, #d57ca0, #4877f3 51%, #20c3ef);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin-bottom: 70px !important
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfsubTitle {
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
line-height: 36px;
|
||
color: #000;
|
||
max-width: 350px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfsubTitle span {
|
||
color: #637497;
|
||
font-weight: 400
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multidimensional .activeCode {
|
||
opacity: 1
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalPart img {
|
||
left: 0;
|
||
opacity: 1
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
|
||
left: 380px;
|
||
opacity: 1
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multidimensinalPart {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 50px;
|
||
position: relative;
|
||
height: 396px;
|
||
transition: 4s
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multidimensinalPart img {
|
||
position: absolute;
|
||
left: 620px;
|
||
bottom: -20px;
|
||
opacity: 0;
|
||
transition: 3s
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multidimensinalPart p {
|
||
max-width: 422px;
|
||
text-align: left;
|
||
font-weight: 500;
|
||
line-height: 32px;
|
||
color: #000;
|
||
font-size: 20px
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multidimensinalPart p span {
|
||
color: #637497;
|
||
font-weight: 400
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multidimensinalPart p:first-child {
|
||
margin-bottom: 55px !important
|
||
}
|
||
|
||
.ant-anchor-wrapper {
|
||
margin-left: -4px;
|
||
padding-left: 4px;
|
||
overflow: auto;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.ant-anchor-wrapper {
|
||
padding-left: 2px !important
|
||
}
|
||
|
||
.ant-anchor-wrapper .ant-anchor-ink:before {
|
||
background-color: #fff
|
||
}
|
||
|
||
.ant-anchor {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
color: rgba(0, 0, 0, 0.65);
|
||
font-size: 14px;
|
||
font-variant: tabular-nums;
|
||
line-height: 1.5;
|
||
list-style: none;
|
||
font-feature-settings: 'tnum';
|
||
position: relative;
|
||
padding-left: 2px;
|
||
}
|
||
|
||
.ant-anchor-ink {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
}
|
||
|
||
.ant-anchor-ink::before {
|
||
position: relative;
|
||
display: block;
|
||
width: 2px;
|
||
height: 100%;
|
||
margin: 0 auto;
|
||
background-color: #e8e8e8;
|
||
content: ' ';
|
||
}
|
||
|
||
.ant-anchor-ink-ball {
|
||
position: absolute;
|
||
left: 50%;
|
||
display: none;
|
||
width: 8px;
|
||
height: 8px;
|
||
background-color: #fff;
|
||
border: 2px solid #466aff;
|
||
border-radius: 8px;
|
||
transform: translateX(-50%);
|
||
transition: top 0.3s ease-in-out;
|
||
}
|
||
|
||
html li {
|
||
list-style: none;
|
||
}
|
||
|
||
a {
|
||
color: #466aff;
|
||
text-decoration: none;
|
||
background-color: transparent;
|
||
outline: none;
|
||
cursor: pointer;
|
||
transition: color 0.3s;
|
||
-webkit-text-decoration-skip: objects;
|
||
}
|
||
|
||
div, img, tr, td, table {
|
||
border: 0;
|
||
}
|
||
|
||
*, *::before, *::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
div {
|
||
display: block;
|
||
}
|
||
|
||
img {
|
||
vertical-align: middle;
|
||
border-style: none;
|
||
}
|
||
|
||
img, video {
|
||
max-width: none;
|
||
height: revert-layer;
|
||
display: inline;
|
||
}
|
||
|
||
.hadoopCode {
|
||
margin-left: 32px;
|
||
box-shadow: 0 0 0 2px hsla(0,0%,100%,.1);
|
||
border-radius: 10px;
|
||
padding: 18px 20px;
|
||
flex: 1;
|
||
margin-top: 60px;
|
||
position: relative;
|
||
}
|
||
|
||
.hadoopCode>img {
|
||
position: absolute;
|
||
right: -50px;
|
||
bottom: -50px;
|
||
width: 805px;
|
||
border-radius: 4px;
|
||
opacity: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.activeCode>img.activeImg {
|
||
right: 0;
|
||
bottom: -20px;
|
||
opacity: 1;
|
||
width: 705px;
|
||
transition: 1s;
|
||
transition-delay: 3s;
|
||
}
|
||
|
||
.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
|
||
left: 380px;
|
||
opacity: 1;
|
||
}
|
||
|
||
</style>
|