|
@@ -0,0 +1,380 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { onMounted, ref } from 'vue'
|
|
|
+import getAssetsFile from '@/util/pubUse'
|
|
|
+let isTop = ref(true)
|
|
|
+let activeIndex = ref(0)
|
|
|
+let menuList = ref(['首页', '优巨引擎官网', '文档中心', '管理中心'])
|
|
|
+let steps = ref([
|
|
|
+ {
|
|
|
+ name: '步骤一',
|
|
|
+ tip: '注册平台账号'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '步骤二',
|
|
|
+ tip: '填写资料'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '步骤三',
|
|
|
+ tip: '商务签合'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '步骤四',
|
|
|
+ tip: '接入'
|
|
|
+ },
|
|
|
+])
|
|
|
+let partners = ref([])
|
|
|
+onMounted(() => {
|
|
|
+ window.addEventListener('scroll', handleScrollY, true)
|
|
|
+})
|
|
|
+const container = ref()
|
|
|
+function handleScrollY() {
|
|
|
+ isTop.value = !container.value.getBoundingClientRect().top
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div :class="isTop ? 'header' : 'header header-color'">
|
|
|
+ <div class="head-content">
|
|
|
+ <div class="left">
|
|
|
+ <img v-if="isTop" class="img" src="@/assets/images/1.png" alt="">
|
|
|
+ <img v-else class="img" src="@/assets/images/1-1.png" alt="">
|
|
|
+ <div class="name">优巨引擎·开放平台</div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div @click="activeIndex = i" class="btn" v-for="(v, i) in menuList" :key="i"
|
|
|
+ :class="activeIndex === i && !isTop ? 'active-btn' : ''">
|
|
|
+ {{ v }}</div>
|
|
|
+ <div class="login">登录</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="container" ref="container">
|
|
|
+ <div class="content">
|
|
|
+ <div class="top-con">
|
|
|
+ <div class="con">与伙伴一起共同成长</div>
|
|
|
+ <div class="con1">优巨引擎开放平台</div>
|
|
|
+ <div class="con2">猎豹AI提供丰富的开放能力和成熟的合作机制,助力合作伙伴在猎豹AI平台上构建本地数字化AI配送平台,焦距全网生态链。</div>
|
|
|
+ </div>
|
|
|
+ <!-- 接入流程 -->
|
|
|
+ <div class="access-process">
|
|
|
+ <div class="title">
|
|
|
+ <div class="title-en">ACCESS PROCESS</div>
|
|
|
+ <div class="title-ch">接入流程</div>
|
|
|
+ <div class="line"></div>
|
|
|
+ </div>
|
|
|
+ <div class="steps">
|
|
|
+ <div class="step" :class="i % 2 === 0 ? 'step1' : ''"
|
|
|
+ :style="`background: url(${getAssetsFile(`4-${i + 1}.png`)}) no-repeat`" v-for="(v, i) in steps" :key="i">
|
|
|
+ <div class="name">{{ v.name }}</div>
|
|
|
+ <div class="tip">{{ v.tip }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="register">立即注册</div>
|
|
|
+ <img class="box" src="@/assets/images/5.png" alt="" srcset="">
|
|
|
+ </div>
|
|
|
+ <!-- 合作伙伴 -->
|
|
|
+ <div class="cooperative-partner">
|
|
|
+ <div class="title">
|
|
|
+ <div class="title-en">COOPERATIVE PARTNER</div>
|
|
|
+ <div class="title-ch">合作伙伴</div>
|
|
|
+ <div class="line"></div>
|
|
|
+ </div>
|
|
|
+ <div class="partners">
|
|
|
+ <img class="partner" :src="getAssetsFile(`7-${i + 1}.png`)" alt="" v-for="(v, i) in 16" :key="i">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="footer">
|
|
|
+ <div class="name">优巨引擎</div>
|
|
|
+ <div class="agreement">
|
|
|
+ <div>开发者服务协议</div>
|
|
|
+ <div> | </div>
|
|
|
+ <div>用户服务协议</div>
|
|
|
+ <div> | </div>
|
|
|
+ <div>联系我们</div>
|
|
|
+ </div>
|
|
|
+ <div class="record-number">
|
|
|
+ 备案号:苏ICP备2021010118号
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped >
|
|
|
+.header {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 60px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ z-index: 99;
|
|
|
+
|
|
|
+ .head-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ min-width: 600px;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ font-size: 15px;
|
|
|
+ margin-right: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active-btn {
|
|
|
+ color: #0077EE;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login {
|
|
|
+ width: 80px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ background: linear-gradient(253deg, #84D3FF 0%, #2A4FAC 35%, #0F1E6C 100%);
|
|
|
+ border-radius: 16px 16px 16px 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 544px) {
|
|
|
+ .head-content {
|
|
|
+ max-width: 576px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 768px) {
|
|
|
+ .head-content {
|
|
|
+ max-width: 720px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 992px) {
|
|
|
+ .head-content {
|
|
|
+ max-width: 940px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 1900px) {
|
|
|
+ .head-content {
|
|
|
+ max-width: 1500px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.header-color {
|
|
|
+ background-color: #ffffff;
|
|
|
+ color: #222222;
|
|
|
+}
|
|
|
+
|
|
|
+.container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #020d4a;
|
|
|
+ min-height: 100vh;
|
|
|
+
|
|
|
+ .content {
|
|
|
+
|
|
|
+ .top-con {
|
|
|
+ background: url(@/assets/images/2-1.png) no-repeat;
|
|
|
+ background-position-x: center;
|
|
|
+ height: 900px;
|
|
|
+ padding: 110px 0 0 220px;
|
|
|
+ color: #ffffff;
|
|
|
+
|
|
|
+ .con {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .con1 {
|
|
|
+ font-size: 60px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .con2 {
|
|
|
+ width: 600px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 23px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .access-process,
|
|
|
+ .cooperative-partner {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: -150px;
|
|
|
+
|
|
|
+ .box {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 127px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .title-en {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ font-size: 50px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(255, 255, 255, 0.2);
|
|
|
+ line-height: 59px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-ch {
|
|
|
+ margin: 26px 0 10px;
|
|
|
+ font-size: 34px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line {
|
|
|
+ width: 80px;
|
|
|
+ height: 8px;
|
|
|
+ background: #2A4FAC;
|
|
|
+ border-radius: 0px 0px 0px 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .steps {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-top: 25px;
|
|
|
+ padding: 0 100px;
|
|
|
+
|
|
|
+ .step {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background-size: 200px !important;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 23px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+ line-height: 19px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .step1 {
|
|
|
+ margin-top: 120px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .partners {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 100px 100px;
|
|
|
+
|
|
|
+ .partner {
|
|
|
+ // background-size: 100% 100%;
|
|
|
+ width: 380px;
|
|
|
+ height: 90px;
|
|
|
+ margin-top: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .register {
|
|
|
+ width: 200px;
|
|
|
+ height: 60px;
|
|
|
+ background: linear-gradient(253deg, #84D3FF 0%, #2A4FAC 35%, #0F1E6C 100%);
|
|
|
+ border-radius: 10px 10px 10px 10px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 60px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 40px auto 0;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cooperative-partner {
|
|
|
+ margin-top: 73px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ height: 110px;
|
|
|
+ padding: 10px 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ background: #252525;
|
|
|
+ color: #FFFFFF;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .agreement,
|
|
|
+ .record-number {
|
|
|
+ display: flex;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|