yujialong 1 year ago
parent ffe7afdba5
commit dae45d09d9
  1. 13
      package-lock.json
  2. 1
      package.json
  3. BIN
      src/assets/images/contact-info.png
  4. BIN
      src/assets/images/dev/entry1.png
  5. BIN
      src/assets/images/dev/entry2.png
  6. BIN
      src/assets/images/dev/entry3.png
  7. BIN
      src/assets/images/dev/entry4.png
  8. BIN
      src/assets/images/occupationlab.png
  9. 37
      src/layouts/header/index.vue
  10. 234
      src/pages/aboutUs/index.vue
  11. 55
      src/pages/index/list/index.vue
  12. 19
      src/pages/index/show/index.vue
  13. 22
      src/pages/member/index.vue
  14. 149
      src/pages/supplier/index.vue

13
package-lock.json generated

@ -3873,6 +3873,11 @@
} }
} }
}, },
"comutils": {
"version": "1.1.19",
"resolved": "https://registry.npmjs.org/comutils/-/comutils-1.1.19.tgz",
"integrity": "sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw=="
},
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@ -14550,6 +14555,14 @@
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
"integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg==" "integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
}, },
"vue-seamless-scroll": {
"version": "1.1.23",
"resolved": "https://registry.npmjs.org/vue-seamless-scroll/-/vue-seamless-scroll-1.1.23.tgz",
"integrity": "sha512-HBjUub8WwsKJzbFCrwKPDrZn4e+SSbkKgwWtjKtfLwesiFGwSsVxP44/Z6d3kpXy94qIFOiflJH6l0/9pj7SGA==",
"requires": {
"comutils": "^1.1.9"
}
},
"vue-style-loader": { "vue-style-loader": {
"version": "4.1.3", "version": "4.1.3",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

@ -28,6 +28,7 @@
"vue-pdf": "^4.3.0", "vue-pdf": "^4.3.0",
"vue-quill-editor": "^3.0.6", "vue-quill-editor": "^3.0.6",
"vue-router": "^3.5.3", "vue-router": "^3.5.3",
"vue-seamless-scroll": "^1.1.23",
"vuedraggable": "^2.24.3", "vuedraggable": "^2.24.3",
"vuex": "^3.6.2", "vuex": "^3.6.2",
"wow.js": "^1.2.2" "wow.js": "^1.2.2"

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 596 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 529 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 414 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 835 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

@ -25,39 +25,6 @@
<navbar ref="nav" <navbar ref="nav"
:isHome.sync="isHome" :isHome.sync="isHome"
:updateModelType="updateType"></navbar> :updateModelType="updateType"></navbar>
<div class="modelBox">
<div class="searchBox"><img class="search"
:src="require('@/assets/images/search' + (isHome && $store.getters.getModelType ? '-white' : '') + '.png')"
alt=""
@click.stop="toggleSearch"></div>
<div class="languageBox">
<!-- <img :src="require('@/assets/images/cn' + (isHome && $store.getters.getModelType ? '-white' : '') + '.png')" alt="" @click.stop="toggleLang"> -->
<template v-if="Util.isEn(site)">
<img :src="require('@/assets/images/cn' + (isHome && $store.getters.getModelType ? '-white' : '') + '.png')"
alt=""
@click.stop="toggleLang">
</template>
<template v-else>
<img :src="require('@/assets/images/en' + (isHome && $store.getters.getModelType ? '-white' : '') + '.png')"
alt=""
@click.stop="toggleLang">
</template>
</div>
<div v-if="showSearch"
class="search-wrap"
@click.stop="stop">
<input ref="search"
type="text"
:placeholder="$t('column.titlePlaceholder')"
v-model="title">
<img class="search-icon"
src="@/assets/images/search.png"
alt=""
@click="handleSearch">
<i class="el-icon-close close-icon"
@click="showSearch = false"></i>
</div>
</div>
</div> </div>
</template> </template>
@ -261,8 +228,8 @@ $height: 90px;
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 2rem; top: 2rem;
font-size: 2.57rem; font-size: 2rem;
color: #818181; color: #c1c1c1;
} }
.contentBox { .contentBox {
width: 100%; width: 100%;

@ -15,7 +15,7 @@
<p class="en">HUORAN TECH</p> <p class="en">HUORAN TECH</p>
</div> </div>
<p class="desc wow fadeInLeft" <p class="desc wow fadeInLeft"
data-wow-delay="0.7s">公司致力于采用业界领先的信息化技术和过硬的软件研发能力服务于各大高校金融机构等行业利用我司技术优势将区块链云计算大数据人工智能等行业前沿技术与金融教育等行业进行深度融合为客户提供功能先进运行高效且便于使用的产业信息化综合解决方案</p> data-wow-delay="0.7s">深圳或然科技教育数字化产业的推动者为教育IT创业者赋能的首选合作伙伴我们是一家拥有丰富IT互联网背景的科技企业致力于为教育软件销售代理人提供专业而全面的产品供应链服务</p>
</div> </div>
<img class="bg" <img class="bg"
src="@/assets/images/about/about1.png" src="@/assets/images/about/about1.png"
@ -34,13 +34,6 @@
<h6 class="i-title wow fadeInDown">企业文化</h6> <h6 class="i-title wow fadeInDown">企业文化</h6>
<p class="en">CORPORATE CULTURE</p> <p class="en">CORPORATE CULTURE</p>
<ul class="list"> <ul class="list">
<li class="wow fadeInDown"
data-wow-delay="0.5s">
<img src="@/assets/images/about/about4.png"
alt="">
<h6>使命</h6>
<p class="text">成为教育产业数字化的推动者</p>
</li>
<li class="wow fadeInRight" <li class="wow fadeInRight"
data-wow-delay="0.8s"> data-wow-delay="0.8s">
<img src="@/assets/images/about/about5.png" <img src="@/assets/images/about/about5.png"
@ -48,6 +41,13 @@
<h6>愿景</h6> <h6>愿景</h6>
<p class="text">成就百万教育产业数字化的创业者</p> <p class="text">成就百万教育产业数字化的创业者</p>
</li> </li>
<li class="wow fadeInDown"
data-wow-delay="0.5s">
<img src="@/assets/images/about/about4.png"
alt="">
<h6>使命</h6>
<p class="text">成为教育产业数字化的推动者</p>
</li>
<li class="wow fadeInUp" <li class="wow fadeInUp"
data-wow-delay="1.1s"> data-wow-delay="1.1s">
<img src="@/assets/images/about/about6.png" <img src="@/assets/images/about/about6.png"
@ -119,8 +119,8 @@
<div class="adv" <div class="adv"
id="part2"> id="part2">
<div class="inner"> <div class="inner">
<h6 class="i-title wow fadeInDown">为什么加入我们</h6> <h6 class="i-title wow fadeInDown">为什么选择我们</h6>
<p class="en">WHY JOIN US</p> <p class="en">WHY CHOOSE US</p>
<p class="title-des wow fadeInDown">专业全面高效</p> <p class="title-des wow fadeInDown">专业全面高效</p>
<ul class="list"> <ul class="list">
@ -142,218 +142,12 @@
data-wow-delay="1.1s"> data-wow-delay="1.1s">
<img src="@/assets/images/index/index5.png" <img src="@/assets/images/index/index5.png"
alt=""> alt="">
<h6>联盟优势</h6> <h6>生态优势</h6>
<p class="text">我们拥有强大可靠的渠道产品的生态联盟可共享调用生态内的多方资源背靠联盟携手共创新奇迹</p> <p class="text">我们拥有强大可靠的渠道产品的生态联盟可共享调用生态内的多方资源背靠联盟携手共创新奇迹</p>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<!-- 我们的服务 -->
<div class="service"
id="part3">
<div class="inner">
<h6 class="i-title wow fadeInDown">我们的服务</h6>
<p class="en">OUR SERVICES</p>
<div class="service-pic">
<img src="@/assets/images/index/service.png"
alt="">
<div class="text">
<p class="s-title wow fadeInLeft">为院校信息化与数字化提供一站式综合解决方案</p>
<ul class="service-list wow fadeInRight">
<li>实现产业互联数据互通</li>
<li>发展教育云和边缘计算推动教育产业数字化</li>
<li>依托大数据促进教育产业智能化升级</li>
</ul>
</div>
</div>
<ul class="list">
<li class="wow fadeInDown"
data-wow-delay="0.5s">
<img src="@/assets/images/index/service1.png"
alt="">
<h6>数字互联</h6>
<p class="text">通过云技术更合理高效的安排院校所有资源比如实验室的使用场地的监控人员管理等多维度分析做出合理决策</p>
</li>
<li class="wow fadeInRight"
data-wow-delay="0.8s">
<img src="@/assets/images/index/service2.png"
alt="">
<h6>产业云</h6>
<p class="text">普适性应用架构用最小化代价提供产业合伙人的协作能力持续的创新交付能力和永久可用的业务连续性</p>
</li>
<li class="wow fadeInUp"
data-wow-delay="1.1s">
<img src="@/assets/images/index/service3.png"
alt="">
<h6>产业智能</h6>
<p class="text">将人工智能应用于产业升级以实现产业效能的提升可满足不同场景下的多样化需求</p>
</li>
</ul>
</div>
</div>
<!-- 我们的产品 -->
<div class="product">
<div class="inner">
<h6 class="i-title wow fadeInDown">我们的产品</h6>
<p class="en">OUR PRODUCTS</p>
<div class="pics"
style="margin-top: 110px">
<div class="pro-bg1">
<img src="@/assets/images/index/pro-bg1-1.png"
alt=""
class="bg1 wow fadeInDown"
data-wow-delay="0.6s">
<img src="@/assets/images/index/pro-bg1-2.png"
alt=""
class="bg2 wow fadeInDown"
data-wow-delay="0.7s">
<img src="@/assets/images/index/pro-bg1-3.png"
alt=""
class="bg3 wow fadeInDown"
data-wow-delay="0.2s">
<el-carousel class="carousel"
ref="carousel"
height="338px"
autoplay
:interval="5000"
arrow="never">
<el-carousel-item>
<img class="car-img"
src="@/assets/images/index/slide1.png"
alt="">
</el-carousel-item>
<el-carousel-item>
<img class="car-img"
src="@/assets/images/index/slide2.png"
alt="">
</el-carousel-item>
<el-carousel-item>
<img class="car-img"
src="@/assets/images/index/slide3.png"
alt="">
</el-carousel-item>
</el-carousel>
<div class="arrow a-left"
@click="carouselSwitch('carousel', 0)"></div>
<div class="arrow a-right"
@click="carouselSwitch('carousel', 1)"></div>
</div>
<div class="text">
<div class="title-intro">
<img class="t-logo"
src="@/assets/images/index/occupationlab.png"
alt="">
<p class="text-title">Occupation Lab</p>
</div>
<p class="desc wow fadeInLeft"
data-wow-delay="0.7s">职站是一款辅助院校教师开展虚拟仿真实验教学的智能云实践平台平台采用了大数据云计算等技术为学校搭建信息化平台提供了基础可助力院校实现教学智能化升级职站平台设计遵循着极简高效的理念可帮助老师轻松开展实验教学并支持自定义发布考核和练习智能统计和检验学生的日常实训练习效果老师还可以通过可视化图表报告直观查看学生实训成绩评估教学成果</p>
</div>
</div>
<ul class="list">
<li class="wow fadeInDown"
data-wow-delay="0.5s">
<img src="@/assets/images/index/pro-bg2.png"
alt="">
<h6>大数据分析统计<br>教学效果有可依</h6>
<p class="text">大数据追踪每个老师学生教学和学习情况统计分析并通过可视化图表展示教学效果一目了然</p>
</li>
<li class="wow fadeInRight"
data-wow-delay="0.8s">
<img src="@/assets/images/index/pro-bg3.png"
alt="">
<h6>云端部署<br>实验教学资源共享</h6>
<p class="text">随时随地只需登录网站无需安装部署即可轻松享受云上实验室可满足不同学科不同场景下的教学需求</p>
</li>
<li class="wow fadeInUp"
data-wow-delay="1.1s">
<img src="@/assets/images/index/pro-bg4.png"
alt="">
<h6>功能全面<br>打造能化教学全场景</h6>
<p class="text">平台包含了教考的功能模块操作方便快捷可轻松实现数字化智能化教学;同时平台还新增有大赛资讯等功能模块将教学活动拓展到课堂外可为院校师生打造智能化多样化个性化的全场景</p>
</li>
</ul>
<div class="pics">
<div class="text">
<div class="title-intro">
<img class="t-logo"
src="@/assets/images/index/dataforward.png"
alt="">
<p class="text-title">数据前瞻</p>
</div>
<p class="desc wow fadeInLeft"
data-wow-delay="0.7s">数据前瞻财经数据库涵盖股票数据期货数据债券数据期权数据利率数据公募数据和宏观数据拥有超40年的历史数据可为用户解读预测分析模拟市场趋势经济周期和世界事件影响提供必要的数据支持平台的数据均来源于各大专业财经权威网站和数据官方发布平台并经过专业的数据分类和整理可让用户轻松便捷地搜索并批量下载到自己研究所需的数据极大地减轻自己搜索整理数据的时间提高研究效率, 从而高效的输出研究成果</p>
</div>
<div class="pro-bg2">
<img src="@/assets/images/index/pro-bg1-1.png"
alt=""
class="bg1 wow fadeInDown"
data-wow-delay="0.6s">
<img src="@/assets/images/index/pro-bg1-2.png"
alt=""
class="bg2 wow fadeInDown"
data-wow-delay="0.7s">
<img src="@/assets/images/index/pro-bg1-4.png"
alt=""
class="bg3 wow fadeInDown"
data-wow-delay="0.2s">
<el-carousel class="carousel"
ref="carousel1"
height="338px"
autoplay
:interval="5000"
arrow="never">
<el-carousel-item>
<img class="car-img"
src="@/assets/images/index/slide4.png"
alt="">
</el-carousel-item>
<el-carousel-item>
<img class="car-img"
src="@/assets/images/index/slide5.png"
alt="">
</el-carousel-item>
<el-carousel-item>
<img class="car-img"
src="@/assets/images/index/slide6.png"
alt="">
</el-carousel-item>
</el-carousel>
<div class="arrow a-left"
@click="carouselSwitch('carousel1', 0)"></div>
<div class="arrow a-right"
@click="carouselSwitch('carousel1', 1)"></div>
</div>
</div>
<ul class="list">
<li class="wow fadeInDown"
data-wow-delay="0.5s">
<img src="@/assets/images/index/pro-bg5.png"
alt="">
<h6>综合全面的财经数据库</h6>
<p class="text">跨越多种主要资产类别超40 年的历史数据和上千种宏观指标数据</p>
</li>
<li class="wow fadeInRight"
data-wow-delay="0.8s">
<img src="@/assets/images/index/pro-bg6.png"
alt="">
<h6>权威多样数据源</h6>
<p class="text">原始数据来源权威可靠用户可依据自己所需进行数据再加工以获得更准确的结果</p>
</li>
<li class="wow fadeInUp"
data-wow-delay="1.1s">
<img src="@/assets/images/index/pro-bg7.png"
alt="">
<h6>实时更新无限下载</h6>
<p class="text">数据库实时更新会员用户可无限量下载平台各种数据表随时获取最新数据</p>
</li>
</ul>
</div>
</div>
<!-- 合作客户 --> <!-- 合作客户 -->
<div class="client"> <div class="client">
<div class="inner"> <div class="inner">
@ -495,8 +289,7 @@
<script> <script>
import WOW from 'wow.js' import WOW from 'wow.js'
import Setting from '@/setting' import scroll from 'vue-seamless-scroll'
import util from '@/libs/util'
export default { export default {
data () { data () {
return { return {
@ -504,6 +297,9 @@ export default {
clients: [1, 2, 3, 4, 5] clients: [1, 2, 3, 4, 5]
} }
}, },
components: {
scroll
},
mounted () { mounted () {
new WOW().init() new WOW().init()
}, },

@ -590,10 +590,10 @@ export default {
} }
h6 { h6 {
margin-bottom: 25px; margin-bottom: 25px;
font-size: 36px; font-size: 2.2rem;
} }
.sub { .sub {
font-size: 24px; font-size: 1.5rem;
} }
.qrcode-wrap { .qrcode-wrap {
display: inline-block; display: inline-block;
@ -848,7 +848,7 @@ export default {
} }
img { img {
width: 100%; width: 100%;
height: 140px; height: 155px;
transition: 0.3s; transition: 0.3s;
} }
.my-school { .my-school {
@ -936,8 +936,11 @@ export default {
@media (max-width: 1200px) { @media (max-width: 1200px) {
.wrap { .wrap {
.carousel { .carousel {
.texts { .text-wrap {
left: 50px; left: 40px;
}
.qrcode-wrap {
margin-right: 20px;
} }
} }
.inner { .inner {
@ -958,6 +961,22 @@ export default {
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
.wrap { .wrap {
.carousel {
.text-wrap {
top: 47%;
flex-direction: column;
align-items: flex-start;
}
.qrcode-wrap {
margin: 0 0 20px 0;
}
h6 {
font-size: 1.8rem;
}
.sub {
font-size: 1.3rem;
}
}
.intro { .intro {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -988,6 +1007,32 @@ export default {
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.wrap { .wrap {
.carousel {
.text-wrap {
top: 47%;
}
.qrcode {
width: 80px;
height: 80px;
}
h6 {
font-size: 1.4rem;
}
.sub {
font-size: 1rem;
}
}
.type-wrap {
.tab {
flex-wrap: wrap;
li {
margin-bottom: 20px;
}
}
}
.search {
margin-top: 0;
}
.courses { .courses {
li { li {
width: 100%; width: 100%;

@ -3,7 +3,7 @@
<el-card shadow="hover" <el-card shadow="hover"
class="m-b-20"> class="m-b-20">
<div class="flex-between"> <div class="flex-between">
<el-page-header @back="$router.push('/index')" <el-page-header @back="$router.back()"
:content="form.mall.productName"></el-page-header> :content="form.mall.productName"></el-page-header>
</div> </div>
</el-card> </el-card>
@ -108,8 +108,7 @@
<div class="section" <div class="section"
v-if="item.subsectionList.length"> v-if="item.subsectionList.length">
<div v-for="(section, j) in item.subsectionList" <div v-for="(section, j) in item.subsectionList"
:key="j" :key="j">
@click="toPreview(i, j)">
<div class="sectionName" <div class="sectionName"
:title="section.name" :title="section.name"
:class="{active: curLink === `${item.name}${section.name}`}"> :class="{active: curLink === `${item.name}${section.name}`}">
@ -134,8 +133,6 @@
alt=""> alt="">
{{ section.name }} {{ section.name }}
</div> </div>
<i v-if="!form.goodsRes.logoOfOurSchool"
class="icon el-icon-lock"></i>
</div> </div>
</div> </div>
</div> </div>
@ -202,12 +199,13 @@
<el-dialog title="温馨提示" <el-dialog title="温馨提示"
:visible.sync="qrcodeVisible" :visible.sync="qrcodeVisible"
width="430px" width="360px"
center center
:close-on-click-modal="false"> :close-on-click-modal="false">
<div class="buy"> <div class="buy">
<p class="tips">请用微信扫描下方小程序二维码进入职站商城加入会员吧</p> <p class="tips">请用微信扫描下方小程序二维码<br>加入职站商城会员进行采购吧</p>
<img src="@/assets/images/product/qrcode.jpg" <img width="70%"
src="@/assets/images/product/qrcode.jpg"
alt=""> alt="">
</div> </div>
</el-dialog> </el-dialog>
@ -523,7 +521,7 @@ export default {
display: flex; display: flex;
margin-top: 20px; margin-top: 20px;
.detail { .detail {
width: 835px; width: calc(100% - 294px);
padding: 20px 24px; padding: 20px 24px;
background-color: #fff; background-color: #fff;
border-radius: 10px; border-radius: 10px;
@ -560,7 +558,6 @@ export default {
padding: 12px; padding: 12px;
font-size: 14px; font-size: 14px;
color: #666; color: #666;
cursor: pointer;
border-radius: 8px; border-radius: 8px;
@include ellipsis; @include ellipsis;
img { img {
@ -581,7 +578,7 @@ export default {
} }
} }
.products { .products {
width: 295px; width: 270px;
margin-left: 24px; margin-left: 24px;
& > h6 { & > h6 {
font-size: 14px; font-size: 14px;

@ -29,14 +29,15 @@
</div> </div>
</div> </div>
<el-dialog title="请扫码登录小程序" <el-dialog title=""
:visible.sync="qrcodeVisible" :visible.sync="qrcodeVisible"
width="350px" width="500px"
center center
:close-on-click-modal="false"> :top="qrcodeTop"
custom-class="qrcode-dia">
<div> <div>
<img width="100%" <img width="100%"
src="https://www.occupationlab.com/images/mini-program.jpg" src="@/assets/images/occupationlab.png"
alt=""> alt="">
</div> </div>
</el-dialog> </el-dialog>
@ -46,16 +47,18 @@
<script> <script>
import mixins from '@/mixins/page' import mixins from '@/mixins/page'
import Setting from '@/setting' import Setting from '@/setting'
import Util from '@/libs/util'
import WOW from 'wow.js' import WOW from 'wow.js'
export default { export default {
mixins: [mixins], mixins: [mixins],
data () { data () {
return { return {
qrcodeVisible: false, qrcodeVisible: false,
qrcodeTop: '100px'
} }
}, },
mounted () { mounted () {
const height = (window.innerHeight - 758) / 2
this.qrcodeTop = (height > 0 ? height : 0) + 'px'
new WOW().init() new WOW().init()
}, },
methods: { methods: {
@ -187,6 +190,15 @@ export default {
} }
} }
} }
/deep/.qrcode-dia {
.el-dialog__header,
.el-dialog__body {
padding: 0;
}
.el-dialog__headerbtn .el-dialog__close {
color: #fff;
}
}
@media (max-width: 1200px) { @media (max-width: 1200px) {
.reg { .reg {
.equity-wrap { .equity-wrap {

@ -7,22 +7,49 @@
type="primary" type="primary"
@click="openDev">登录供应商平台</el-button> @click="openDev">登录供应商平台</el-button>
</div> </div>
<!-- 关于教育产业数字化开发者 --> <!-- 关于教育产业数字化产品供应商 -->
<div class="about"> <div class="about">
<div class="inner"> <div class="inner">
<div class="text">如果您是从事高职本科市场相应数字化场景的软件硬件研发生产或代理的供应商如果您正面临拓展渠道难精准触达客户难售前支持难按时回款难等发展瓶颈请加入职站商城让您的产品走进全国院校</div> <div class="text">如果您是从事高职本科市场相应数字化场景的软件硬件研发生产或代理的供应商如果您正面临拓展渠道难精准触达客户难售前支持难按时回款难等发展瓶颈请加入职站商城让您的产品轻松走进全国院校</div>
<div class="entry"> <div class="entry">
<!-- <div class="progress"> <ul class="progress">
<img src="" alt=""> <li>
</div> --> <span class="icon">
<el-steps :active="4" <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> align-center>
<el-step title="申请供应商平台账号"></el-step> <el-step title="申请供应商平台账号"></el-step>
<el-step title="提交云商店入驻申请"></el-step> <el-step title="提交云商店入驻申请"></el-step>
<el-step title="完成业务沟通"></el-step> <el-step title="完成业务沟通"></el-step>
<el-step title="审核完成,加入云商店"></el-step> <el-step title="审核完成,加入云商店"></el-step>
</el-steps> </el-steps> -->
<el-button class="apply" <el-button class="apply"
type="primary" type="primary"
@ -51,10 +78,10 @@
</ul> </ul>
</div> </div>
</div> </div>
<!-- 开发者需要具备的条件 --> <!-- 产品供应商需要具备的条件 -->
<div class="con"> <div class="con">
<div class="inner"> <div class="inner">
<h6 class="i-title">开发者需要具备的条件</h6> <h6 class="i-title">产品供应商需要具备的条件</h6>
<ul class="list"> <ul class="list">
<li> <li>
<img src="@/assets/images/dev/con1.png" <img src="@/assets/images/dev/con1.png"
@ -78,8 +105,8 @@
</div> </div>
</div> </div>
<div class="profit"> <div class="profit">
<div class="item1">开发者受益</div> <div class="item1">产品供应商受益</div>
<div class="item2">我们将与开发者共享教育产业数字化蓝海的巨大收益</div> <div class="item2">我们将与产品供应商共享教育产业数字化蓝海的巨大收益</div>
</div> </div>
<!-- 联系 --> <!-- 联系 -->
<div class="contact"> <div class="contact">
@ -156,6 +183,7 @@ export default {
width: 1200px; width: 1200px;
padding: 67px 0; padding: 67px 0;
margin: 0 auto; margin: 0 auto;
overflow: hidden;
} }
.entry { .entry {
margin-top: 30px; margin-top: 30px;
@ -163,13 +191,56 @@ export default {
.apply { .apply {
margin-top: 20px; margin-top: 20px;
} }
// /deep/.el-step__head.is-finish { }
// color: #f00; .progress {
// border-color: #f00; display: flex;
// } justify-content: center;
// /deep/.el-step__title.is-finish { align-items: center;
// color: #f00; 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 { .about {
position: relative; position: relative;
@ -186,7 +257,7 @@ export default {
color: #0b1d30; color: #0b1d30;
} }
.text { .text {
font-size: 14px; font-size: 16px;
line-height: 1.8; line-height: 1.8;
color: #0b1d30; color: #0b1d30;
} }
@ -298,6 +369,39 @@ export default {
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
.wrap { .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 { .sup {
.list { .list {
flex-direction: column; flex-direction: column;
@ -315,9 +419,12 @@ export default {
} }
} }
} }
.profit {
.item2 {
} }
}
@media (max-width: 600px) {
.wrap {
.progress {
padding-left: 0;
} }
} }
} }

Loading…
Cancel
Save