|
|
|
|
<template>
|
|
|
|
|
<div class="wrap index">
|
|
|
|
|
<div class="banner">
|
|
|
|
|
<h6>教育数字化产品供应商</h6>
|
|
|
|
|
<p class="text">与3000所高校共建数字化教育产业未来</p>
|
|
|
|
|
<el-button class="dev"
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="openDev">登录供应商平台</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 关于教育产业数字化产品供应商 -->
|
|
|
|
|
<div class="about">
|
|
|
|
|
<div class="inner">
|
|
|
|
|
<div class="text">如果您是从事高职、本科市场相应数字化场景的软件、硬件研发、生产或代理的供应商；如果您正面临拓展渠道难、精准触达客户难、售前支持难、按时回款难等发展瓶颈；请加入职站商城，让您的产品轻松走进全国院校。</div>
|
|
|
|
|
|
|
|
|
|
<div class="entry">
|
|
|
|
|
<ul class="progress">
|
|
|
|
|
<li>
|
|
|
|
|
<span class="icon">
|
|
|
|
|
<img src="@/assets/images/dev/entry1.png"
|
|
|
|
|
alt="">
|
|
|
|
|
</span>
|
|
|
|
|
<p class="pro-text">申请供应商平台账号</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<span class="icon">
|
|
|
|
|
<img src="@/assets/images/dev/entry2.png"
|
|
|
|
|
alt="">
|
|
|
|
|
</span>
|
|
|
|
|
<p class="pro-text">提交职站商城入驻申请</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<span class="icon">
|
|
|
|
|
<img src="@/assets/images/dev/entry3.png"
|
|
|
|
|
alt="">
|
|
|
|
|
</span>
|
|
|
|
|
<p class="pro-text">完成业务沟通</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<span class="icon">
|
|
|
|
|
<img src="@/assets/images/dev/entry4.png"
|
|
|
|
|
alt="">
|
|
|
|
|
</span>
|
|
|
|
|
<p class="pro-text">审核完成，加入职站商城</p>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<!-- <el-steps :active="4"
|
|
|
|
|
align-center>
|
|
|
|
|
<el-step title="申请供应商平台账号"></el-step>
|
|
|
|
|
<el-step title="提交云商店入驻申请"></el-step>
|
|
|
|
|
<el-step title="完成业务沟通"></el-step>
|
|
|
|
|
<el-step title="审核完成，加入云商店"></el-step>
|
|
|
|
|
</el-steps> -->
|
|
|
|
|
|
|
|
|
|
<el-button class="apply"
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="qrcodeVisible = true">申请</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 我们提供的支持 -->
|
|
|
|
|
<div class="sup">
|
|
|
|
|
<div class="inner">
|
|
|
|
|
<h6 class="i-title">我们提供的支持</h6>
|
|
|
|
|
<ul class="list">
|
|
|
|
|
<li>
|
|
|
|
|
<h6>生产力赋能</h6>
|
|
|
|
|
<p class="text">公司打造的产业中台将赋能联盟厂家高效地进行软件产品的开发与交付。</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<h6>渠道与运营服务赋能</h6>
|
|
|
|
|
<p class="text">公司会为联盟厂家提供公共的渠道支撑和客户获取，帮助厂家获得客户成交，降低产品厂家的市场压力。</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<h6>创业技术孵化服务</h6>
|
|
|
|
|
<p class="text">对于还在创业阶段的产品创业者，我司还提供初始的技术外包支撑服务，帮助产品创业者最小成本的完成产品的落地。</p>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 产品供应商需要具备的条件 -->
|
|
|
|
|
<div class="con">
|
|
|
|
|
<div class="inner">
|
|
|
|
|
<h6 class="i-title">产品供应商需要具备的条件</h6>
|
|
|
|
|
<ul class="list">
|
|
|
|
|
<li>
|
|
|
|
|
<img src="@/assets/images/dev/con1.png"
|
|
|
|
|
alt="">
|
|
|
|
|
<h6>产品研发</h6>
|
|
|
|
|
<p class="text">具备独立设计、开发教育产业数字化产品的能力</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<img src="@/assets/images/dev/con2.png"
|
|
|
|
|
alt="">
|
|
|
|
|
<h6>产品运维 </h6>
|
|
|
|
|
<p class="text">具备独立的产品运维支持的能力</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<img src="@/assets/images/dev/con3.png"
|
|
|
|
|
alt="">
|
|
|
|
|
<h6>专业服务</h6>
|
|
|
|
|
<p class="text">具备对产品内容专业支持的能力</p>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="profit">
|
|
|
|
|
<div class="item1">产品供应商受益</div>
|
|
|
|
|
<div class="item2">我们将与产品供应商共享教育产业数字化蓝海的巨大收益！</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 联系 -->
|
|
|
|
|
<div class="contact">
|
|
|
|
|
<img class="love"
|
|
|
|
|
src="@/assets/images/love.png"
|
|
|
|
|
alt="">
|
|
|
|
|
<img class="contact-info"
|
|
|
|
|
src="@/assets/images/contact-info.png"
|
|
|
|
|
alt="">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-dialog title=""
|
|
|
|
|
:visible.sync="qrcodeVisible"
|
|
|
|
|
width="400px"
|
|
|
|
|
center
|
|
|
|
|
:top="qrcodeTop"
|
|
|
|
|
custom-class="qrcode-dia">
|
|
|
|
|
<div>
|
|
|
|
|
<img width="100%"
|
|
|
|
|
src="@/assets/images/index/qywechat.png"
|
|
|
|
|
alt="">
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
name: 'cityPartner',
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
qrcodeVisible: false,
|
|
|
|
|
qrcodeTop: '100px'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted () {
|
|
|
|
|
const height = (window.innerHeight - 758) / 2
|
|
|
|
|
this.qrcodeTop = (height > 0 ? height : 0) + 'px'
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
openDev () {
|
|
|
|
|
window.open('https://dev.huorantech.cn')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.wrap {
|
|
|
|
|
position: relative;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
.banner {
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 350px;
|
|
|
|
|
padding: 70px 0 0 180px;
|
|
|
|
|
background: url(../../assets/images/dev/banner2.png) (90% 32px) / auto no-repeat,
|
|
|
|
|
url(../../assets/images/dev/banner1.png) 0 0/100% 100% no-repeat;
|
|
|
|
|
.dev {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 120px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
h6 {
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
font-size: 2.2rem;
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.i-title {
|
|
|
|
|
position: relative;
|
|
|
|
|
margin-bottom: 37px;
|
|
|
|
|
font-size: 2rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #0b1d30;
|
|
|
|
|
}
|
|
|
|
|
.inner {
|
|
|
|
|
width: 1200px;
|
|
|
|
|
padding: 67px 0;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.entry {
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
.apply {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.progress {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
li {
|
|
|
|
|
position: relative;
|
|
|
|
|
margin-right: 100px;
|
|
|
|
|
&:before {
|
|
|
|
|
content: '';
|
|
|
|
|
z-index: 2;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 61px;
|
|
|
|
|
left: 46%;
|
|
|
|
|
width: 8px;
|
|
|
|
|
height: 8px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border: 1px solid #ff5d5d;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
&:after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 64px;
|
|
|
|
|
left: -23px;
|
|
|
|
|
width: 300px;
|
|
|
|
|
height: 2px;
|
|
|
|
|
background-color: #e9e9e9;
|
|
|
|
|
}
|
|
|
|
|
&:last-child {
|
|
|
|
|
&:before {
|
|
|
|
|
left: 48%;
|
|
|
|
|
}
|
|
|
|
|
&:after {
|
|
|
|
|
width: 181px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.icon {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
background-color: #ff5d5d;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
.pro-text {
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.about {
|
|
|
|
|
position: relative;
|
|
|
|
|
margin: -60px 0 20px;
|
|
|
|
|
.inner {
|
|
|
|
|
padding: 40px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
|
|
|
|
|
}
|
|
|
|
|
h6 {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
color: #0b1d30;
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
line-height: 1.8;
|
|
|
|
|
color: #0b1d30;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.sup {
|
|
|
|
|
background: linear-gradient(180deg, #ffffff 0%, #f1f6fe 100%);
|
|
|
|
|
.list {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
li {
|
|
|
|
|
width: 33%;
|
|
|
|
|
padding: 140px 50px 50px;
|
|
|
|
|
background: url(../../assets/images/dev/sup1.png) 0 0/100% 100% no-repeat;
|
|
|
|
|
&:nth-child(2) {
|
|
|
|
|
background-image: url(../../assets/images/dev/sup2.png);
|
|
|
|
|
}
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
background-image: url(../../assets/images/dev/sup3.png);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
h6 {
|
|
|
|
|
margin: 15px 0 10px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #0b1d30;
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #757f92;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.con {
|
|
|
|
|
background: url(../../assets/images/dev/con-bg.png) 0 0/100% 100% no-repeat;
|
|
|
|
|
.list {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex: 1;
|
|
|
|
|
li {
|
|
|
|
|
padding-bottom: 40px;
|
|
|
|
|
margin-right: 24px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
}
|
|
|
|
|
h6 {
|
|
|
|
|
margin: 15px 24px 10px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #0b1d30;
|
|
|
|
|
}
|
|
|
|
|
.text {
|
|
|
|
|
margin: 0 24px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #757f92;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.profit {
|
|
|
|
|
margin-bottom: 70px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
.item1 {
|
|
|
|
|
line-height: 250px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: url(../../assets/images/dev/profit-bg1.png) 0 0/100% 100% no-repeat;
|
|
|
|
|
}
|
|
|
|
|
.item2 {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 70%;
|
|
|
|
|
height: 202px;
|
|
|
|
|
padding: 0 30px;
|
|
|
|
|
margin: -100px auto 0;
|
|
|
|
|
color: #0b1d30;
|
|
|
|
|
background: url(../../assets/images/dev/profit-bg2.png) 0 0/100% 100% no-repeat;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.contact {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
height: 250px;
|
|
|
|
|
background: url(../../assets/images/contact-bg.png) 0 0/100% 100% no-repeat;
|
|
|
|
|
.contact-info {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
}
|
|
|
|
|
.love {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: -45px;
|
|
|
|
|
right: 10%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/deep/.qrcode-dia {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
.el-dialog__header,
|
|
|
|
|
.el-dialog__body {
|
|
|
|
|
padding: 0;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
.el-dialog__headerbtn .el-dialog__close {
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 1200px) {
|
|
|
|
|
.wrap {
|
|
|
|
|
.banner {
|
|
|
|
|
padding-left: 50px;
|
|
|
|
|
}
|
|
|
|
|
.inner {
|
|
|
|
|
width: 90%;
|
|
|
|
|
}
|
|
|
|
|
.profit {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
.item1 {
|
|
|
|
|
background-size: cover;
|
|
|
|
|
}
|
|
|
|
|
.item2 {
|
|
|
|
|
width: 90%;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 1000px) {
|
|
|
|
|
.wrap {
|
|
|
|
|
.progress {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
padding-left: 34%;
|
|
|
|
|
li {
|
|
|
|
|
margin: 0 0 100px 0;
|
|
|
|
|
&:before {
|
|
|
|
|
top: 15px;
|
|
|
|
|
left: 58px;
|
|
|
|
|
}
|
|
|
|
|
&:after {
|
|
|
|
|
top: 14px;
|
|
|
|
|
left: 61px;
|
|
|
|
|
width: 2px !important;
|
|
|
|
|
height: 158px;
|
|
|
|
|
}
|
|
|
|
|
&:last-child {
|
|
|
|
|
&:before {
|
|
|
|
|
left: 58px;
|
|
|
|
|
}
|
|
|
|
|
&:after {
|
|
|
|
|
height: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.pro-text {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 12px;
|
|
|
|
|
left: 74px;
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.sup {
|
|
|
|
|
.list {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
li {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 140px 80px 50px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.con {
|
|
|
|
|
.list {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
li {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 600px) {
|
|
|
|
|
.wrap {
|
|
|
|
|
.banner {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 5rem 0 0 0;
|
|
|
|
|
color: #064791;
|
|
|
|
|
h6,
|
|
|
|
|
.text {
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
.dev {
|
|
|
|
|
position: static;
|
|
|
|
|
transform: translateX(0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.progress {
|
|
|
|
|
padding-left: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
