You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
480 lines
13 KiB
480 lines
13 KiB
<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> |