huoran
/
FE_huoran_client
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

关于我们长页

Browse Source
master
yujialong 1 year ago
parent 620e0d7c65
commit 7f02e50911
3 changed files with 192 additions and 132 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/layouts/footer/index.vue
  2. 287
      src/pages/aboutUs/index.vue
  3. 14
      src/pages/index/list/index.vue

3
src/layouts/footer/index.vue
Unescape View File

@ -46,9 +46,6 @@
<div class="relative">
<div class="info">
<div class="leftBox">
<img class="m-b-20"
src="@/assets/images/iasf.png"
alt="">
<p class="meta">Copyright ©2002- 2021</p>
<p class="meta">Institute of Advanced Science Facilities, ShenzhenIASF</p>
<p class="meta">Tel：400-0010-998</p>

287
src/pages/aboutUs/index.vue
Unescape View File

@ -1,14 +1,61 @@
<template>
<div class="wrap index">
<div class="banner">
<el-carousel v-if="modules[0].list.length && modules[0].list.filter(e => e.isEnable).length"
class="carousel"
:interval="6000"
height="480px"
:arrow="(modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable"
:key="i">
<div v-if="isImg(item.mediaType)"
class="pic"
:style="{backgroundImage: 'url(' + item.pic + ')'}"></div>
<video v-else
class="pic"
width="100%"
height="100%"
autoplay
muted
loop>
<source :src="item.pic"
type="video/mp4">
您的浏览器不支持 video 标签。
</video>
<div class="text-wrap">
<div class="text"
v-html="item.des"></div>
<div v-if="!GTA"
class="qrcodes">
<div class="qrcode">
<img width="103"
:src="item.weixinPic1"
alt="">
<p class="text">{{ item.weixinText1 }}</p>
</div>
<div class="qrcode m-l-30">
<img width="103"
:src="item.weixinPic2"
alt="">
<p class="text">{{ item.weixinText2 }}</p>
</div>
</div>
</div>
</el-carousel-item>
</template>
</el-carousel>
<div v-else
class="banner">
<img class="texts"
src="@/assets/images/about/banner-text.png"
src="https://huorantech.com/images/about/banner-text.png"
alt="">
<div v-if="!GTA"
class="qrcodes">
<div class="qrcode">
<img width="103"
src="@/assets/images/about/qrcode.jpg"
src="https://huorantech.com/images/about/qrcode.jpg"
alt="">
<p class="text">扫一扫，关注公众号</p>
</div>
@ -20,56 +67,47 @@
</div>
</div>
</div>
<div class="intro">
<div class="inner">
<div class="pics">
<div class="text">
<div class="title-wrap">
<p class="title">或然科技有限公司</p>
<p class="brief">职站商城，让您一站式采购无忧</p>
<p class="en">HUORAN TECH</p>
<p class="title">{{ modules[1].form.title }}</p>
<p class="brief">{{ modules[1].form.subTitle1 }}</p>
<p class="en">{{ modules[1].form.subTitle2 }}</p>
</div>
<p class="desc wow fadeInLeft"
data-wow-delay="0.7s">深圳或然科技，教育数字化产业的推动者，为教育IT创业者赋能的首选合作伙伴。我们是一家拥有丰富IT互联网背景的科技企业，致力于为教育软件销售代理人提供专业而全面的产品供应链服务。</p>
<div class="desc wow fadeInLeft"
data-wow-delay="0.7s"
v-html="modules[1].form.des"></div>
</div>
<img class="bg"
src="@/assets/images/about/about1.png"
:src="modules[1].form.pic"
alt="">
</div>
</div>
</div>
<div class="service-intro">
<div class="inner">
<h6>随时、随地、贴心为您提供全方位服务</h6>
<p class="text">At anytime,anywhere,intimate to provide you with a full range of services</p>
<h6>{{ modules[2].form.title }}</h6>
<p class="text">{{ modules[2].form.des }}</p>
</div>
</div>
<div class="culture">
<div class="inner">
<h6 class="i-title wow fadeInDown">企业文化</h6>
<p class="en">CORPORATE CULTURE</p>
<h6 class="i-title wow fadeInDown">{{ modules[3].form.title }}</h6>
<p class="en">{{ modules[3].form.des }}</p>
<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"
data-wow-delay="0.8s">
<img src="@/assets/images/about/about5.png"
alt="">
<h6>愿景</h6>
<p class="text">成为教育产业数字化的共创平台</p>
</li>
<li class="wow fadeInUp"
data-wow-delay="1.1s">
<img src="@/assets/images/about/about6.png"
<template v-for="(item, i) in modules[4].list">
<li v-if="item.isEnable"
:key="i">
<img :src="item.pic"
alt="">
<h6>核心价值观</h6>
<p class="text">公正、诚信、创新、实干</p>
<h6>{{ item.title }}</h6>
<div class="text"
v-html="item.des"></div>
</li>
</template>
</ul>
</div>
</div>
@ -78,55 +116,45 @@
<div class="adv"
id="part2">
<div class="inner">
<h6 class="i-title wow fadeInDown">为什么选择我们</h6>
<p class="en">WHY CHOOSE US</p>
<p class="title-des wow fadeInDown">专业、全面、高效</p>
<h6 class="i-title wow fadeInDown">{{ modules[5].form.title }}</h6>
<p class="en">{{ modules[5].form.subTitle }}</p>
<p class="title-des wow fadeInDown">{{ modules[5].form.des }}</p>
<ul class="list">
<li class="wow fadeInDown"
data-wow-delay="0.5s">
<img src="@/assets/images/index/index3.png"
alt="">
<h6>产品优势</h6>
<p class="text">整合好不同的教育信息化解决方案所需的软件和硬件产品，通过教育产业互联网平台和反向供应链，提供利润合适，交付便捷，质量有保障的体系化产品。</p>
</li>
<li class="wow fadeInRight"
data-wow-delay="0.8s">
<img src="@/assets/images/index/index4.png"
alt="">
<h6>服务优势</h6>
<p class="text">专业的培训和服务团队，提供教育信息化产业的创业辅导和专业培训。帮助打造一支专业化的商务支持、客户成功和售后运营服务的支撑型团队。</p>
</li>
<li class="wow fadeInUp"
data-wow-delay="1.1s">
<img src="@/assets/images/index/index5.png"
<template v-for="(item, i) in modules[6].list">
<li v-if="item.isEnable"
:key="i">
<img :src="item.pic"
alt="">
<h6>生态优势</h6>
<p class="text">我们拥有强大可靠的渠道、产品的生态联盟，可共享、调用生态内的多方资源，背靠联盟携手共创新奇迹。</p>
<h6>{{ item.title }}</h6>
<div class="text"
v-html="item.des"></div>
</li>
</template>
</ul>
</div>
</div>
<!-- 合作客户 -->
<div class="client">
<div class="inner">
<h6 class="i-title wow fadeInDown">合作院校</h6>
<p class="en">PARTNERSHIP</p>
<p class="title-des wow fadeInDown">助力100+所院校客户实现数字化升级</p>
<h6 class="i-title wow fadeInDown">{{ modules[7].form.title }}</h6>
<p class="en">{{ modules[7].form.subTitle }}</p>
<p class="title-des wow fadeInDown">{{ modules[7].form.des }}</p>
<div class="client-pic">
<img class="bg"
src="@/assets/images/index/index0.png"
:src="modules[8].form.pic"
alt="">
<div class="text">
<div class="c-title1">
<img src="@/assets/images/index/comma1.png"
<img src="https://huorantech.com/images/index/comma1.png"
alt="">
他们说
{{ modules[8].form.title }}
</div>
<div class="text">平台功能丰富，操作简单，自动判分功能，能更高效的批改作业给学生更好的指导。</div>
<div class="text"
v-html="modules[8].form.des"></div>
<div class="c-title2">
—— 河海大学老师
<img src="@/assets/images/index/comma2.png"
{{ modules[8].form.subTitle }}
<img src="https://huorantech.com/images/index/comma2.png"
alt="">
</div>
</div>
@ -136,9 +164,9 @@
:class-option="{limitMoveNum: 2, direction: 2}">
<ul class="client-list"
ref="client">
<li v-for="i in clients"
:key="i">
<img :src="require('@/assets/images/index/school' + i + '.png')"
<li v-for="item in modules[9].list"
:key="item">
<img :src="item.pic"
alt="">
</li>
</ul>
@ -149,59 +177,59 @@
<div class="contact">
<div class="inner">
<div class="title">
<h6>联系我们</h6>
<p class="text">CONTACT US</p>
<h6>{{ modules[10].form.title }}</h6>
<p class="text">{{ modules[10].form.des }}</p>
</div>
<div class="region">
<img class="dot"
src="@/assets/images/about/dot.png"
src="https://huorantech.com/images/about/dot.png"
alt="">
<p class="name">深圳</p>
</div>
<div class="info">
<img class="logo"
src="@/assets/images/about/logo.png"
:src="modules[11].form.pic"
alt="">
<div class="texts">
<div class="item">
<div class="line">
<img class="icon"
src="@/assets/images/about/site.png"
src="https://huorantech.com/images/about/site.png"
alt="">
公司官网：www.huorantech.com
{{ modules[11].form.site }}
</div>
<div class="line">
<img class="icon"
src="@/assets/images/about/address.png"
src="https://huorantech.com/images/about/address.png"
alt="">
地址：广东省深圳市南山区粤海街道海天二路盈峰中心2101
{{ modules[11].form.address }}
</div>
</div>
<div class="item">
<div class="line">
<img class="icon"
src="@/assets/images/about/phone.png"
src="https://huorantech.com/images/about/phone.png"
alt="">
合作咨询：郭经理 17671782660
{{ modules[11].form.phone }}
</div>
<div class="line">
<img class="icon"
src="@/assets/images/about/mail.png"
src="https://huorantech.com/images/about/mail.png"
alt="">
客户建议：service@huorantech.cn
{{ modules[11].form.mail }}
</div>
</div>
<div class="qrcode">
<img width="103"
src="@/assets/images/about/qrcode.jpg"
:src=" modules[12].form.pic"
alt="">
<p class="text">扫一扫，关注公众号</p>
<p class="text">{{ modules[12].form.title }}</p>
</div>
<div class="qrcode m-l-30">
<img width="103"
src="@/assets/images/mini-program-sm.jpg"
:src=" modules[13].form.pic"
alt="">
<p class="text">扫一扫，登录职站商城</p>
<p class="text">{{ modules[13].form.title }}</p>
</div>
</div>
</div>
@ -214,7 +242,7 @@
<p class="tips">微信扫码添加职站售前咨询</p>
<p class="des">提供付费咨询及解决方案</p>
<img width="150"
src="@/assets/images/index/customer.png"
src="https://huorantech.com/images/index/customer.png"
alt="">
</div>
<div class="item tel"></div>
@ -223,7 +251,7 @@
<div class="line">
<div>
<img class="icon"
src="@/assets/images/index/tel-2.png"
src="https://huorantech.com/images/index/tel-2.png"
alt="">
</div>
<div class="text">
@ -236,7 +264,7 @@
<div class="line">
<div>
<img class="icon"
src="@/assets/images/index/sug.png"
src="https://huorantech.com/images/index/sug.png"
alt="">
</div>
<div class="text">
@ -254,11 +282,16 @@
</template>
<script>
import mixins from '@/mixins/page'
import Setting from '@/setting'
import Util from '@/libs/util'
import WOW from 'wow.js'
import scroll from 'vue-seamless-scroll'
export default {
mixins: [mixins],
data () {
return {
isImg: Util.isImg,
active: '',
clients: [1, 2, 3, 4, 5]
}
@ -270,13 +303,19 @@ export default {
new WOW().init()
},
methods: {
// 轮播图翻页
carouselSwitch (name, dir) {
dir ? this.$refs[name].next() : this.$refs[name].prev()
},
toPart (i) {
this.active = i
document.querySelector(`#part${i}`).scrollIntoView()
// 获取文章详情
getInfo () {
// 预览/详情
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
// state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
const json = JSON.parse(this.preview ?
data :
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
this.modules = json
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
}
}).catch(err => { })
},
// 置顶
topping () {
@ -299,8 +338,8 @@ export default {
.banner {
position: relative;
height: 480px;
background: url(../../assets/images/about/banner1.png) 0 0 / auto no-repeat,
url(../../assets/images/about/banner2.png) (90% 37px) / auto no-repeat;
background: url(https://huorantech.com/images/about/banner1.png) 0 0 / auto no-repeat,
url(https://huorantech.com/images/about/banner2.png) (90% 37px) / auto no-repeat;
background-color: #0f5bed;
.texts {
position: absolute;
@ -314,6 +353,28 @@ export default {
display: flex;
}
}
.carousel {
.pic {
height: 100%;
background-position: center center;
background-size: 100% 100%;
background-repeat: no-repeat;
}
/deep/.el-carousel__container {
height: 100%;
}
.text-wrap {
position: absolute;
top: 50%;
left: 165px;
color: #fff;
transform: translateY(-50%);
}
.qrcodes {
display: flex;
margin-top: 10px;
}
}
.qrcode {
text-align: center;
@ -403,7 +464,7 @@ export default {
height: 153px;
margin-top: -240px;
color: #fff;
background: url(../../assets/images/about/about2.png) 0 0 / cover no-repeat;
background: url(https://huorantech.com/images/about/about2.png) 0 0 / cover no-repeat;
.inner {
padding: 0;
}
@ -417,7 +478,7 @@ export default {
}
.culture {
position: relative;
background: #fff url(../../assets/images/about/about3.png) 0 0/100% 100% no-repeat;
background: #fff url(https://huorantech.com/images/about/about3.png) 0 0/100% 100% no-repeat;
.inner {
padding-bottom: 112px;
}
@ -543,7 +604,7 @@ export default {
.contact {
position: relative;
padding: 0 0 106px 0;
background: url(../../assets/images/about/map.png) 0 0 / cover no-repeat;
background: url(https://huorantech.com/images/about/map.png) 0 0 / cover no-repeat;
.inner {
padding: 0;
}
@ -599,8 +660,8 @@ export default {
.about {
padding: 130px 0 200px;
background: url(../../assets/images/index/about2.png) (bottom right) / auto no-repeat,
url(../../assets/images/index/about1.png) 0 0 / cover no-repeat;
background: url(https://huorantech.com/images/index/about2.png) (bottom right) / auto no-repeat,
url(https://huorantech.com/images/index/about1.png) 0 0 / cover no-repeat;
.inner {
padding: 0;
}
@ -641,7 +702,7 @@ export default {
}
.adv {
position: relative;
background: #fff url(../../assets/images/index/index7.png) 0 0/100% 100% no-repeat;
background: #fff url(https://huorantech.com/images/index/index7.png) 0 0/100% 100% no-repeat;
.list {
display: flex;
li {
@ -685,7 +746,7 @@ export default {
}
.service {
position: relative;
background: #0653ff url(../../assets/images/index/service4.png) 0 0/100% 100% no-repeat;
background: #0653ff url(https://huorantech.com/images/index/service4.png) 0 0/100% 100% no-repeat;
.i-title {
color: #fff;
}
@ -775,8 +836,8 @@ export default {
}
}
.product {
background: url(../../assets/images/index/pro-bg1.png) (right 828px) / auto no-repeat,
url(../../assets/images/index/pro-bg8.png) (left bottom) / auto no-repeat;
background: url(https://huorantech.com/images/index/pro-bg1.png) (right 828px) / auto no-repeat,
url(https://huorantech.com/images/index/pro-bg8.png) (left bottom) / auto no-repeat;
background-color: #fff;
.list {
display: flex;
@ -831,10 +892,10 @@ export default {
top: 157px;
width: 21px;
height: 21px;
background: url(../../assets/images/index/arrow.png) no-repeat;
background: url(https://huorantech.com/images/index/arrow.png) no-repeat;
cursor: pointer;
&:hover {
background-image: url(../../assets/images/index/arrow-active.png);
background-image: url(https://huorantech.com/images/index/arrow-active.png);
}
}
.a-left {
@ -910,7 +971,7 @@ export default {
}
}
.parner {
background: #fff url(../../assets/images/index/parner.png) 0 0 / cover no-repeat;
background: #fff url(https://huorantech.com/images/index/parner.png) 0 0 / cover no-repeat;
.i-title,
.brief {
color: #fff;
@ -923,7 +984,7 @@ export default {
height: 600px;
}
.client {
background: url(../../assets/images/index/client.png) 0 0 / cover no-repeat;
background: url(https://huorantech.com/images/index/client.png) 0 0 / cover no-repeat;
}
.client-pic {
display: flex;
@ -1041,9 +1102,9 @@ export default {
cursor: pointer;
}
.wechat {
background: #fff url(../../assets/images/index/wechat.png) center center/auto no-repeat;
background: #fff url(https://huorantech.com/images/index/wechat.png) center center/auto no-repeat;
&:hover {
background-image: url(../../assets/images/index/wechat-1.png);
background-image: url(https://huorantech.com/images/index/wechat-1.png);
background-color: #006eff;
& + .popup {
display: block;
@ -1051,9 +1112,9 @@ export default {
}
}
.tel {
background: #fff url(../../assets/images/index/tel.png) center center/auto no-repeat;
background: #fff url(https://huorantech.com/images/index/tel.png) center center/auto no-repeat;
&:hover {
background-image: url(../../assets/images/index/tel-1.png);
background-image: url(https://huorantech.com/images/index/tel-1.png);
background-color: #006eff;
& + .popup {
display: block;
@ -1061,9 +1122,9 @@ export default {
}
}
.topping {
background: #fff url(../../assets/images/index/top.png) center center/auto no-repeat;
background: #fff url(https://huorantech.com/images/index/top.png) center center/auto no-repeat;
&:hover {
background-image: url(../../assets/images/index/top-1.png);
background-image: url(https://huorantech.com/images/index/top-1.png);
background-color: #006eff;
}
}

14
src/pages/index/list/index.vue
Unescape View File

@ -10,11 +10,6 @@
:key="i">
<div class="pic"
:style="{backgroundImage: 'url(' + item.pic + ')'}"></div>
<!-- <img :class="[{'cursor-pointer': isLink(item.link.linkName)}]"
width="100%"
:src="item.pic"
alt=""
@click="openLink(item)"> -->
<div class="text-wrap">
<div v-if="!GTA && !i"
class="qrcode-wrap">
@ -61,6 +56,7 @@
src="@/assets/images/type.png"
alt="">
</div>
<div class="tab-con">
<ul class="tab">
<li v-for="(tab, i) in tabs"
:key="i"
@ -68,6 +64,7 @@
@click="tabChange(tab)">{{ tab.name }}</li>
</ul>
</div>
</div>
<div class="search">
<img class="icon"
src="@/assets/images/search.png"
@ -994,14 +991,19 @@ export default {
}
}
.type-wrap {
.tab-con {
max-width: 100%;
margin-bottom: 10px;
overflow: auto;
}
.tab {
flex-wrap: wrap;
li {
margin-bottom: 20px;
}
}
}
.search {
width: 100%;
margin-top: 0;
}
.courses {

Write Preview
Loading…
Cancel
Save