Situation-Awareness-Platform-Frontend/src/views/Jyh/LinePage/index.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>