lzx
/
official-website
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

初始化项目数据

master
主管理员 6 months ago
parent
d68a384eb2
commit
3339b6c6d7
12 changed files with 787 additions and 1165 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/image/contact/10939.png
  2. BIN
      src/assets/image/home/49.png
  3. BIN
      src/assets/image/home/50.png
  4. BIN
      src/assets/image/home/51.png
  5. BIN
      src/assets/image/home/52.png
  6. BIN
      src/assets/image/home/53.png
  7. BIN
      src/assets/image/home/banner.png
  8. +171
    -344
      src/views/about/index.vue
  9. +51
    -77
      src/views/case/index.vue
  10. +123
    -113
      src/views/contact/index.vue
  11. +282
    -282
      src/views/home/index.vue
  12. +160
    -349
      src/views/service/index.vue

BIN
src/assets/image/contact/10939.png View File

Before After
Width: 73  |  Height: 72  |  Size: 3.1 KiB Width: 73  |  Height: 72  |  Size: 1.3 KiB

BIN
src/assets/image/home/49.png View File

Before After
Width: 143  |  Height: 91  |  Size: 23 KiB

BIN
src/assets/image/home/50.png View File

Before After
Width: 143  |  Height: 91  |  Size: 22 KiB

BIN
src/assets/image/home/51.png View File

Before After
Width: 143  |  Height: 91  |  Size: 25 KiB

BIN
src/assets/image/home/52.png View File

Before After
Width: 143  |  Height: 91  |  Size: 22 KiB

BIN
src/assets/image/home/53.png View File

Before After
Width: 107  |  Height: 90  |  Size: 6.9 KiB

BIN
src/assets/image/home/banner.png View File

Before After
Width: 2880  |  Height: 905  |  Size: 888 KiB

+ 171
- 344
src/views/about/index.vue View File

@ -2,410 +2,237 @@
<div class="about">
<!-- banner图片 -->
<div class="banner">
<el-carousel height="475px">
<el-carousel-item v-for="item in aboutUsList" :key="item.id">
<img :src="$staticPath + item.imageAddress" alt="">
</el-carousel-item>
</el-carousel>
<img src="../../assets/image/service/31.png" width="100%" />
<div class="text">
<div class="list">
<div v-for="item in developmentDirection" :key="item.id">
<img :src="$staticPath + item.productImageAddress" alt="">
{{ item.productTitle }}
<div>
<img src="../../assets/image/service/3.png" alt="" />
APP开发服务
</div>
<div>
<img src="../../assets/image/service/2.png" alt="" />
小程序开发服务
</div>
<div>
<img src="../../assets/image/service/1.png" alt="" />
网站定制
</div>
<div>
<img src="../../assets/image/service/4.png" alt="" />
微信定制
</div>
</div>
<div v-if="desc.key" class="title">
<p v-html="desc.key.productDescribe || desc[0].productDescribe"></p>
<div class="title">
<p>瀚海黎明</p>
一家致力于软件定制开发和优质项目孵化的公司
</div>
</div>
</div>
<!-- 子元素： -->
<div class="line-1">
<!-- 第一张图 -->
<div :class="{ 'bg-phone': getIsPhont }">
<img :src="$staticPath + big.key.productImageAddress || big[0].productImageAddress" alt="">
</div>
<!-- 第二张图 -->
<div :class="{ 'asda-phone': getIsPhont }" class="asda">
<div v-for="(item, index) in innovateData" :key="item.id" class="asds-item">
<div v-if="index == 0" class="img-item">
<img :src="$staticPath + item.productImageAddress" alt="">
</div>
<div class="content-item" :class="{ 'dark': index == 1 }">
<div class="desc">
<div class="top">
<div class="main">{{ item.productTitle }}</div>
<div class="con">{{ item.productShortTitle }}</div>
<!-- 子元素： -->
<div class="line-1">
<!-- 第一张图 -->
<div>
<img src="../../assets/image/service/21.png" alt="" />
</div>
<!-- 第二张图 -->
<div class="asda">
<div>
<div>
<img
src="../../assets/image/service/200242.png"
alt=""
/>
</div>
<div
class="one"
style="
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
"
>
<div
style="
color: #333333;
font-size: 25px;
border-bottom: 2px solid #000;
width: 10px;
margin-left: -30px;
margin-bottom: 30px;
line-height: 40px;
white-space: nowrap;
"
>
科技<span
style="
color: #999;
font-size: 16px;
padding-left: 10px;
"
>TECHNOLOGY</span
>
</div>
<div style="color: #666666; font-size: 13px">
服务客户的尖端武器
</div>
<div class="bottom" v-html="item.productDescribe"></div>
</div>
</div>
<div v-if="index == 1" class="img-item">
<img src="@/assets/image/service/200242.png" alt="">
<div>
<div
style="
background-color: #333;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
"
>
<div
style="
border-bottom: 2px solid #fff;
width: 20px;
margin-left: -40%;
margin-bottom: 30px;
line-height: 45px;
white-space: nowrap;
"
>
创新
<span
style="font-size: 18px; padding-left: 10px"
>INNOVATE</span
>
</div>
<div style="font-size: 13px">领跑行业的动力源</div>
</div>
<div>
<img
src="../../assets/image/service/200242.png"
alt=""
/>
</div>
</div>
</div>
</div>
</div>
<div v-for="(item, index) in data" :key="item.id" :class="{ 'line-phone': getIsPhont }" class="line-1">
<div v-if="!getIsPhont && (index + 1) % 2 == 0" class="img-box">
<img :src="$staticPath + item.productImageAddress" alt="">
</div>
<div :class="{ 'description-phone': getIsPhont }" class="description">
<div class="description-title">
<div class="title">{{ item.productTitle }}</div>
<div class="eng">{{ item.productShortTitle }}</div>
<!-- 第三张图 -->
<div class="vorte" style="">
<div class="hai">
<div
style="
border-bottom: 1px solid #000;
line-height: 45px;
white-space: nowrap;
display: flex;
color: #000;
font-size: 20px;
width: 40px;
margin-bottom: 20px;
margin-left: 20px;
"
>
瀚海黎明团队文化
</div>
<span
style="color: #999; font-size: 16px; padding-left: 10px"
>TEAM CULTURE</span
>
<div
class="city"
style="
font-size: 10px;
width: 200px;
color: #6f6f6f;
line-height: 30px;
margin-top: 30px;
"
>
骆驼，不会像骏马那样激昂地嘶鸣，更不会像耕牛那样自怜地沉重叹息……它总是默默地抬起嶙峋的身躯，负<br />
荷重物缓缓地远足。没有庄重的惜别，没有亲友的挥手，没有鲜花的蜂拥。惟有驼铃伴着孤影，无言地行走！<br />
踏入无边无际、黄尘滚滚、阴风怒号、寒暑难奈、生灵尽罄的大漠，哪种生命都会感到畏惧，即使最高级的人<br />
何尝不如此！而当骆驼一旦踏入那片大漠中，生命的符号便跃动着挑战死亡，挑战极限。它们身上透出了一种无畏、一种<br />
坚韧、一种踏实、一种气概；没有恐惧、没有厌倦、没有躁动、没有委屈、没有怨恨、没有回头，<br />
它们稳稳健健地、一步一个脚印地走向前方，踏踏实实，走到终点。
<br />
<br />
<br />
骆驼精神就是要求瀚海黎明团队人员如同骆驼一样，雕琢研发的产品，精益求精，踏踏实实，经得起市场的考验<br />
和推敲。一步一步的完成每个用户的开发需求，让每个开发完成的软件都能安全、稳定的运行。
</div>
</div>
<div class="content" v-html="item.productDescribe"></div>
</div>
<div v-if="getIsPhont || (index + 1) % 2 != 0" class="img-box">
<img :src="$staticPath + item.productImageAddress" alt="">
<div></div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'About',
data() {
return {
aboutUsList: [], //轮播图列表
data: [], //团队文化 + 服务商 + 公司目标数据
innovateData: [], //科技创新数据
developmentDirection : [], //开发方向数据
desc : {}, //简介(轮播图上方)
big : {}, //科技创新(左边大图)
classIdList: ['1827870383694139393', '1827879404404723713' , '1827874918579818497' , '1827894586556272642' , '1827897615045087234'], //分类id列表
}
},
created() {
this.queryImage()
this.getData()
},
methods: {
//获取图片
queryImage() {
this.request('queryImage', {}, {
pageNo: 1,
pageSize: 6,
classificationId: '1824999760280072194'
}).then(res => {
this.aboutUsList = res.result.records
})
},
//查询配置
queryProgram(classificationId, index) {
let dateNameList = ['data', 'innovateData','developmentDirection','desc','big']
this.request('queryProgram', {}, {
pageNo: 1,
pageSize: 1000,
classificationId
}).then(res => {
if(res.length == 1){
return this[dateNameList[index]] = { key : res[0] }
}
this[dateNameList[index]] = res.result.records
})
},
//获取数据
getData() {
this.classIdList.forEach((item, index) => {
this.queryProgram(item, index)
})
}
},
computed: {
...mapGetters(["getIsPhont"]),
}
};
export default {};
</script>
<style lang="scss" scoped>
.about {
.banner {
position: relative;
overflow: hidden;
height: 31vw;
width: 100%;
img {
width: 100%;
}
&::v-deep .el-carousel__arrow--left,
&::v-deep .el-carousel__arrow--right {
display: none;
width: 0;
height: 0;
}
color: #fff;
.text {
position: absolute;
top: 60px;
left: 0;
top: 62px;
width: 100%;
height: 21vw;
z-index: 999;
.list {
display: flex;
background: #00000055;
&>div {
& > div {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 120px;
color: white;
img {
width: 10%;
margin-bottom: 10px;
}
}
}
.title {
display: flex;
font-size: 30px;
justify-content: center;
margin: 80px;
color: white;
p {
margin-right: 20px;
}
}
}
}
.line-1 {
display: flex;
flex-wrap: wrap;
&>div {
width: 50%;
}
img {
width: 100%;
height: 100%;
}
.asda {
.asds-item {
display: flex;
flex-wrap: wrap;
.img-item,
.content-item {
width: 50%;
background: white;
}
.content-item {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.desc {
.top {
display: flex;
align-items: center;
.main {
position: relative;
font-size: 1.3vw;
height: 2vw;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50%;
height: 1px;
background: black;
}
}
.con {
color: #9F9F9F;
font-size: .8vw;
margin-left: .5vw;
}
}
.bottom {
color: #9F9F9F;
font-size: .8vw;
margin-top: .5vw;
}
}
}
.dark {
background: #434343;
color: #fff;
.main {
&::before {
background: white !important;
}
}
}
.light {
color: white;
.main {
&::before {
background: white !important;
}
}
.bottom {
color: white;
}
}
.line-1 {
display: flex;
& > div {
flex: 1;
}
}
//移动端样式
.bg-phone {
width: 100%;
}
.asda-phone {
width: 100%;
.content-item {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.desc {
.top {
.main {
font-size: 4vw;
height: 5vw;
}
.con {
color: #9F9F9F;
font-size: 2.5vw;
margin-left: .5vw;
}
}
.bottom {
font-size: 1.5vw;
margin-top: .8vw;
}
}
img {
width: 100%;
}
}
}
.vorte {
display: flex;
&>div {
flex: 1;
box-sizing: border-box;
padding: 20px;
}
.city {}
}
.line-1 {
.description {
box-sizing: border-box;
padding: 5vw 2vw 0vw 2vw;
.description-title {
position: relative;
display: flex;
align-items: center;
.title {
font-size: 1.5vw;
}
.eng {
font-size: 1vw;
color: #A1A1A1;
margin-left: .8vw;
}
&::before {
position: absolute;
bottom: -.3vw;
content: '';
width: 1.5vw;
height: 1px;
background: black;
.asda {
& > div {
display: flex;
& > div {
flex: 1;
}
}
}
.content {
padding: 2vw;
color: #6F6F6F;
font-size: 1vw;
}
}
}
//移动端
.line-phone {
.description {
width: 100% !important;
.description-title {
.title {
font-size: 6vw;
}
.eng {
font-size: 4vw;
}
&::before {
width: 6vw;
}
.vorte {
display: flex;
& > div {
flex: 1;
box-sizing: border-box;
padding: 20px;
}
.content {
padding: 2vw 0;
font-size: 4vw;
}
}
.img-box {
width: 100vw !important;
img {
width: 100%;
.city {
}
}
}
}
</style>
</style>

+ 51
- 77
src/views/case/index.vue View File

@ -1,74 +1,37 @@
<template>
<div class="case">
<div class="banner">
<div class="bg">
<el-carousel>
<el-carousel-item v-for="item in bannerList" :key="item.id">
<img :src="$staticPath + item.imageAddress" alt="">
</el-carousel-item>
</el-carousel>
</div>
<div class="banner-text">
<div class="text">{{ bannerTitle.length > 0 ? bannerTitle[0].productTitle : '' }}</div>
<div class="templace">SHENGHUANG SUCCESSFUL CASE SHOW</div>
<img width="100%" src="../../assets/image/case/124.png" alt="" />
<div class="text">案 / 例 / 展 / 示</div>
<div class="templace">SHENGHUANG SUCCESSFUL CASE SHOW</div>
<div class="app">
<div
style="
background-color: #fff;
position: absolute;
left: 50%;
bottom: 10px;
transform: translate(-50%);
"
class="ios"
>
<div>系统平台</div>
<div>APP</div>
<div>电商平台</div>
<div>小程序</div>
<div>网站建设</div>
</div>
</div>
</div>
<CasePresentation :list="caseList" :caseTitle="caseTitle" />
<CasePresentation/>
</div>
</template>
<script>
import CasePresentation from '@/components/CasePresentation'
export default {
components: {
components : {
CasePresentation
},
created() {
this.getData()
this.queryImage()
},
data() {
return {
caseList: [], //案列列表
caseTitle: [], //案例展示标题
bannerList : [], //轮播图列表
bannerTitle : [], //轮播图上方标题
classIdList: ['1827604262051106818', '1828650784192712705','1828661669967679489'], //分类id列表
}
},
methods: {
//获取图片
queryImage() {
this.request('queryImage', {}, {
pageNo: 1,
pageSize: 1000,
classificationId: '1828661596294729729'
}).then(res => {
this.bannerList = res
})
},
//查询配置
queryProgram(classificationId, index) {
let dateNameList = ['caseList', 'caseTitle','bannerTitle']
this.request('queryProgram', {}, {
pageNo: 1,
pageSize: 1000,
classificationId
}).then(res => {
let currentData = dateNameList[index]
this[currentData] = res
})
},
//获取数据
getData() {
this.classIdList.forEach((item, index) => {
this.queryProgram(item, index)
})
}
}
};
</script>
@ -77,28 +40,39 @@ export default {
.case {
.banner {
position: relative;
.banner-text {
.text {
color: #fff;
font-size: 50px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
left: 450px;
top: 150px;
letter-spacing: 10px;
}
.templace {
color: #fff;
z-index: 999;
.text {
font-size: 50px;
letter-spacing: 10px;
}
.templace {
font-size: 38px;
margin-top: 20px;
font-size: 38px;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
left: 280px;
top: 250px;
}
.app {
.ios {
display: flex;
& > div {
border-radius:20px;
font-weight: 900;
justify-content: center;
font-size: 13px;
padding: 15px;
width: 120px;
text-align: center;
}
}
}
}


+ 123
- 113
src/views/contact/index.vue View File

@ -1,7 +1,7 @@
<template>
<div class="contact">
<div class="contact-a">
<!-- <img width="100%" src="../../assets/image/home/banner.png" alt="" /> -->
<img width="100%" src="../../assets/image/home/banner.png" alt="" />
<div class="text">
<div class="we">联系我们</div>
<div class="us">C O N T A C T U S</div>
@ -12,106 +12,148 @@
<div class="sha">
<div class="yue">
<!--第一个图片 -->
<img style="width: 40px" src="../../assets/image/contact/地址.png" alt="" />
<img
style="width: 40px"
src="../../assets/image/contact/地址.png"
alt=""
/>
<div class="tianxiang">长沙岳麓去天祥水晶湾西座2--59</div>
</div>
<div class="lian-x">
<!-- 第二个 -->
<img width="20px" src="../../assets/image/contact/群蜂电话.png" alt="" />
<img
width="20px"
src="../../assets/image/contact/群蜂电话.png"
alt=""
/>
联系电话：17674618290
</div>
<!-- 第三个 -->
<div>
<img width="20px" src="../../assets/image/contact/群蜂邮箱图标.png" alt="" />
<img
width="20px"
src="../../assets/image/contact/群蜂邮箱图标.png"
alt=""
/>
电子邮箱：2857247401@qq.com
</div>
</div>
</div>
<div class="club bx">
<div class="club">
<div class="electrioc">加入我们的团队</div>
<div class="took">
<!-- 第一张 -->
<div class="took-item" v-for="item in join" :key="item.id">
<img :src="$staticPath + item.productImageAddress" alt="" />
<div>
<img
width="50px;"
src="../../assets/image/contact/120.png"
alt=""
/>
<div style="border: 1px solid #fff">资深网页设计师</div>
<div>
<div>
1、负责网站设计的需求沟通，确定网页设计的视觉
标准和风格标准等 ；
</div>
<div>
2、负责网站创意实施，设计网站各个页面，与制作
及开发岗位密切交流和配合；
</div>
<div>
3、配合互动人员完成网站内FLASH创意及表现工 作；
</div>
</div>
<div class="title">{{ item.productShortTitle }}</div>
<img src="../../assets/image/contact/10939.png" class="btn">
</div>
<!-- 第二张 -->
<div>
<img src="../../assets/image/contact/121.png" alt="" />
<div class="content" v-html="item.productDescribe"></div>
<div class="content-desc" v-html="item.desc"></div>
<div>PHP工程师</div>
<div>
<div>1、利用公司CMS系统为客户开发网站；</div>
<div>2、解决客户网站相关技术问题；</div>
<div>
3、负责客户网站功能策划，数据库规划，业务逻辑规划；
</div>
</div>
<img src="../../assets/image/contact/10939.png" class="btn">
</div>
<!-- 第三张 -->
<div>
<img src="../../assets/image/contact/122png.png" alt="" />
<div>前端工程师</div>
<div>
<div>
1、负责将设计师的方案按标准切割网页并搭建网站框架，实现网站前台效果;
</div>
<div>2、解决不同浏览器及不同版本的兼容性问题;</div>
<div>3、负责客户资料的录入;</div>
</div>
<img src="../../assets/image/contact/10939.png" class="btn">
</div>
<!-- 第四张 -->
<div>
<img src="../../assets/image/contact/123.png" alt="" />
<div>网络销售</div>
<div>
<div>
1、运用公司提供的网络平台销售公司的产品，与潜在客户通过电话沟通、网络即时交流、拜访面谈等方式进行售前咨询、售中和售后服务指引;
</div>
<div>
2、负责开拓并维护稳定的客户关系，跟踪并挖掘客户需求，根据需求促成订单；
</div>
<div>3、负责竞标项目的标书准备及讲标工作；</div>
<div>
4、全面跟进客户，维系客户关系，持续向客户提供服务；协调公司内部资源，提高客户的满意度；
</div>
<div>5、推广公司产品，提供最新的市场信息。</div>
</div>
<img src="../../assets/image/contact/10939.png" class="btn">
<div class="more">
1、性别不限，大专以上学历；<br>
2、计算机操作熟练，熟悉网站制作流程、网站相关业务及建站技术；<br>
3、热爱从事网站销售工作、思想活跃；<br>
4、拥有积极、乐观的心态，有耐心，有较强的服务理念，有一定的沟通谈判能力，具有良好的团队合作精神；<br>
5、工作责任心强，有激情，能承受较强的工作压力；<br>
6、曾任职过网页设计师、网页制作、程序员、网站项目经理者优先考虑。<br>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Contact',
data() {
return {
join: []
}
},
created() {
this.queryProgram()
},
methods: {
//查询加入团队数据
queryProgram() {
this.request('queryProgram', {}, {
pageNo: 1,
pageSize: 1000,
classificationId: '1828262025257275394'
}).then(res => {
this.join = res.result.records
console.log(this.join);
this.queryProgramDesc()
})
},
//查询加入团队数据(交互介绍)
queryProgramDesc() {
this.request('queryProgram', {}, {
pageNo: 1,
pageSize: 1000,
classificationId: '1828263998387900418'
}).then(res => {
//合并数据
res.result.records.forEach((item, index) => {
this.$set(this.join[index], 'desc', item.productDescribe)
})
})
},
}
};
export default {};
</script>
<style lang="scss" scoped>
.contact {
width: 100%;
background: #f6f6f6;
.contact-a {
position: relative;
.text {
position: absolute;
left: 10%;
bottom: 20px;
color: #fff;
.we {
font-size: 45px;
letter-spacing: 20px;
}
.us {
font-size: 25px;
}
.phone {
font-size: 40px;
display: flex;
@ -120,7 +162,6 @@ export default {
}
}
}
.chang {
width: 70%;
height: 200px;
@ -129,33 +170,27 @@ export default {
margin: 0 auto;
margin-top: 50px;
padding-left: 70px;
&>div>div {
& > div > div {
display: flex;
// 侧轴剧中
align-items: center;
img {
margin-right: 10px;
}
}
.yue {
font-size: 18px;
padding: 30px 0;
.tianxiang {
border-bottom: 3px solid #f6f6f6;
font-size: 20px;
}
}
.lian-x {
width: 300px;
padding-bottom: 10px;
}
}
.club {
position: relative;
@ -166,78 +201,53 @@ export default {
color: #343636;
font-weight: 900;
}
.took {
justify-content: center;
display: flex;
padding-bottom: 40px;
.took-item {
width: calc(25% - 5px);
.btn{
margin-top: auto;
cursor: pointer;
}
& > div {
width: 230px;
margin: 0 10px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
color: #8c8c94;
font-size: 12px;
text-align: center;
flex-shrink: 0;
position: relative;
overflow: hidden;
margin: calc(20px / 3);
box-sizing: border-box;
padding: 20px;
cursor: pointer;
transition: background-color .5s;
height: 500px;
&:hover{
background: #FB6A19;
}
&:hover img,
&:hover .title,
&:hover .content{
display: none
}
&:hover .content-desc{
display: block
}
&:nth-child(4n) {
margin-right: 0;
}
.title {
font-size: 20px;
margin: 20px 0;
}
.content-desc{
display: none;
color: white;
}
&>div {
margin-bottom: 20px;
&>div {
&>div{
&>div{
padding-top: 10px;
}
}
img {
width: 50px;
height: 50px;
margin-top: 25px;
margin-bottom: 10px;
}
.btn {
margin-top: auto;
cursor: pointer;
.more{
position: absolute;
top: 100%;
height: 100%;
width: 100%;
background-color: #FB6A19;
color: #fff;
box-sizing: border-box;
font-size: 13px;
padding: 20px;
text-align: left;
line-height: 30px;
}
}
}
}
}
</style>
</style>

+ 282
- 282
src/views/home/index.vue View File

@ -1,330 +1,330 @@
<template>
<div class="home">
<div class="home">
<!--banner图片 -->
<div class="banner">
<img width="100%" src="../../assets/image/home/banner.png" alt="" />
<div class="text">
<div class="title">高端网站定制</div>
<div class="deputy">
<div>企业官网</div>
<div>外贸网站</div>
<div>综合内户</div>
<div>电商网站</div>
</div>
<div class="fot">
网站不仅是信息传递、用户互动的平台，更是企业形象表达、我们会根据<br />
您的企业文化和企业调性，设计贴合企业风格的建设方案。
</div>
</div>
</div>
<!-- 定制软件开发 -->
<div class="customized">
<div class="develop">定制软件开发</div>
<div class="dream">创新梦想，个性化软件开发定制专家</div>
<div class="box">
<div class="wnwu">
<img
width="200px"
src="../../assets/image/home/49.png"
alt=""
/>
<div class="cc">软件定制开发</div>
<div class="open">个性化软件开发定制服务</div>
<div class="look">查看详情</div>
</div>
<div class="wnwu">
<img
width="200px"
src="../../assets/image/home/50.png"
alt=""
/>
<div class="cc">APP定制开发</div>
<div class="open">安卓iosAPP开发服务</div>
<div class="look">查看详情</div>
</div>
<div class="wnwu">
<img
width="200px"
src="../../assets/image/home/51.png"
alt=""
/>
<div class="cc">微信定制开发</div>
<div class="open">微信小程序，公众号开发</div>
<div class="look">查看详情</div>
</div>
<div class="wnwu">
<img
width="200px"
src="../../assets/image/home/52.png"
alt=""
/>
<div class="cc">网站定制开发</div>
<div class="open">企业官网、商城网站、综合门户</div>
<div class="look">查看详情</div>
</div>
</div>
</div>
<!--软件开发产品-->
<div class="software">
<div class="product">软件开发产品</div>
<div class="procedure">
标准的软件开发，手机app开发，小程序开发体系
</div>
<div class="standard">
<!-- 第一行 -->
<div class="standard-line">
<!-- 第一个 -->
<div class="item1">
<div>
<img src="../../assets/image/home/53.png" />
</div>
<div class="text">瀚海黎明B2B系统</div>
</div>
<!-- 第二个 -->
<div class="item2">
<div>
<img src="../../assets/image/home/57.png" />
<!--banner图片 -->
<div class="banner">
<img width="100%" src="../../assets/image/home/banner.png" alt="" />
<div class="text">
<div class="title">高端网站定制</div>
<div class="deputy">
<div>企业官网</div>
<div>外贸网站</div>
<div>综合内户</div>
<div>电商网站</div>
</div>
<div class="fot">
网站不仅是信息传递、用户互动的平台，更是企业形象表达、我们会根据<br />
您的企业文化和企业调性，设计贴合企业风格的建设方案。
</div>
</div>
<div class="text">跑腿送货APP</div>
</div>
</div>
<!-- 第二行 -->
<div class="standard-line">
<!-- 第一个 -->
<div class="item1" style="background-color: #0198f5">
<div class="">
<img src="../../assets/image/home/55.png" />
</div>
<div class="text">电子商务系统</div>
</div>
<!-- 第二个 -->
<div
class="item2"
style="width: 296px; background-color: #b3c9ff"
>
<div>
<img src="../../assets/image/home/56.png" />
<!-- 定制软件开发 -->
<div class="customized">
<div class="develop">定制软件开发</div>
<div class="dream">创新梦想，个性化软件开发定制专家</div>
<div class="box">
<div class="wnwu">
<img
width="200px"
src="../../assets/image/home/49.png"
alt=""
/>
<div class="cc">软件定制开发</div>
<div class="open">个性化软件开发定制服务</div>
<div class="look">查看详情</div>
</div>
<div class="wnwu">
<img
width="200px"
src="../../assets/image/home/50.png"
alt=""
/>
<div class="cc">APP定制开发</div>
<div class="open">安卓iosAPP开发服务</div>
<div class="look">查看详情</div>
</div>
<div class="wnwu">
<img
width="200px"
src="../../assets/image/home/51.png"
alt=""
/>
<div class="cc">微信定制开发</div>
<div class="open">微信小程序，公众号开发</div>
<div class="look">查看详情</div>
</div>
<div class="wnwu">
<img
width="200px"
src="../../assets/image/home/52.png"
alt=""
/>
<div class="cc">网站定制开发</div>
<div class="open">企业官网、商城网站、综合门户</div>
<div class="look">查看详情</div>
</div>
</div>
<div class="text">社交直播APP</div>
</div>
<div class="item3">
<img src="../../assets/image/home/61.png" alt="" />
</div>
</div>
<!-- 第三行 -->
<div class="standard-line">
<!-- 第一个 -->
<div class="item1" style="background-color: #83a7ff">
<div>
<img src="../../assets/image/home/60.png" />
</div>
<div class="text">CRM管理系统</div>
</div>
<!-- 第二个 -->
<div
class="item2"
style="width: 296px; background-color: #38e3df"
>
<div>
<img src="../../assets/image/home/59.png" />
<!--软件开发产品-->
<div class="software">
<div class="product">软件开发产品</div>
<div class="procedure">
标准的软件开发，手机app开发，小程序开发体系
</div>
<div class="text">智慧城市模块</div>
</div>
<div
class="item3"
style="
<div class="standard">
<!-- 第一行 -->
<div class="standard-line">
<!-- 第一个 -->
<div class="item1">
<div>
<img src="../../assets/image/home/53.png" />
</div>
<div class="text">瀚海黎明B2B系统</div>
</div>
<!-- 第二个 -->
<div class="item2">
<div>
<img src="../../assets/image/home/57.png" />
</div>
<div class="text">跑腿送货APP</div>
</div>
</div>
<!-- 第二行 -->
<div class="standard-line">
<!-- 第一个 -->
<div class="item1" style="background-color: #0198f5">
<div class="">
<img src="../../assets/image/home/55.png" />
</div>
<div class="text">电子商务系统</div>
</div>
<!-- 第二个 -->
<div
class="item2"
style="width: 296px; background-color: #b3c9ff"
>
<div>
<img src="../../assets/image/home/56.png" />
</div>
<div class="text">社交直播APP</div>
</div>
<div class="item3">
<img src="../../assets/image/home/61.png" alt="" />
</div>
</div>
<!-- 第三行 -->
<div class="standard-line">
<!-- 第一个 -->
<div class="item1" style="background-color: #83a7ff">
<div>
<img src="../../assets/image/home/60.png" />
</div>
<div class="text">CRM管理系统</div>
</div>
<!-- 第二个 -->
<div
class="item2"
style="width: 296px; background-color: #38e3df"
>
<div>
<img src="../../assets/image/home/59.png" />
</div>
<div class="text">智慧城市模块</div>
</div>
<div
class="item3"
style="
width: 170px;
background-color: #ffd687;
text-align: center;
"
>
<div class="text">教育培训平台</div>
</div>
>
<div class="text">教育培训平台</div>
</div>
</div>
</div>
</div>
</div>
</div>
<CasePresentation :list="ex"/>
</div>
<CasePresentation :list="ex"/>
</div>
</template>
<script>
import CasePresentation from '@/components/CasePresentation'
export default {
components : {
CasePresentation
},
data(){
return {
ex : []
}
},
created(){
this.getQueryExample()
},
methods : {
getQueryExample(){
this.request('queryExample', {}, {
pageNo : 1,
pageSize : 6
}).then(res => {
this.ex = res
})
components : {
CasePresentation
},
data(){
return {
ex : []
}
},
created(){
this.getQueryExample()
},
methods : {
getQueryExample(){
this.request('queryExample', {}, {
pageNo : 1,
pageSize : 6
}).then(res => {
this.ex = res
})
}
}
}
};
</script>
<style lang="scss" scoped>
.home {
width: 100%;
width: 100%;
.banner {
position: relative;
.banner {
position: relative;
.text {
position: absolute;
left: 0;
top: 150px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
color: aliceblue;
.text {
position: absolute;
left: 0;
top: 150px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
color: aliceblue;
.title {
font-size: 38px;
letter-spacing: 20px;
}
.title {
font-size: 38px;
letter-spacing: 20px;
}
.deputy {
display: flex;
background-color: #ffffff44;
margin: 10px;
.deputy {
display: flex;
background-color: #ffffff44;
margin: 10px;
div {
margin: 10px 30px;
}
}
div {
margin: 10px 30px;
}
}
.fot {
font-size: 15px;
padding: 25px;
line-height: 40px;
}
.fot {
font-size: 15px;
padding: 25px;
line-height: 40px;
}
}
}
}
.customized {
.develop {
color: #0190ca;
font-size: 18px;
display: flex;
flex-direction: column;
align-items: center;
letter-spacing: 15px;
line-height: 50px;
}
.customized {
.develop {
color: #0190ca;
font-size: 18px;
display: flex;
flex-direction: column;
align-items: center;
letter-spacing: 15px;
line-height: 50px;
}
.dream {
color: #a7a9b7;
font-size: 15px;
display: flex;
flex-direction: column;
align-items: center;
}
.dream {
color: #a7a9b7;
font-size: 15px;
display: flex;
flex-direction: column;
align-items: center;
}
.box {
display: flex;
justify-content: center;
padding: 40px;
line-height: 30px;
.box {
display: flex;
justify-content: center;
padding: 40px;
line-height: 30px;
.wnwu {
margin: 10px;
.wnwu {
margin: 10px;
.cc {
color: #4c4c4c;
text-align: center;
}
.cc {
color: #4c4c4c;
text-align: center;
}
.open {
color: #777c92;
font-size: 12px;
text-align: center;
}
.open {
color: #777c92;
font-size: 12px;
text-align: center;
}
.look {
text-align: center;
font-size: 10px;
color: #ff6600;
margin: 10px;
padding: -80px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
&::before {
content: "";
display: block;
width: 10px;
height: 10px;
background: url(../../assets/image/home/箭头.png);
background-size: 100% 100%;
}
.look {
text-align: center;
font-size: 10px;
color: #ff6600;
margin: 10px;
padding: -80px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
&::before {
content: "";
display: block;
width: 10px;
height: 10px;
background: url(../../assets/image/home/箭头.png);
background-size: 100% 100%;
}
}
}
}
}
}
}
.software {
padding-bottom: 40px;
.product {
text-align: center;
font-size: 20px;
color: #0190ca;
}
.procedure {
text-align: center;
margin: 10px;
color: #a7a9b7;
font-size: 13px;
}
.standard {
.standard-line {
display: flex;
justify-content: center;
& > div {
display: flex;
font-size: 12px;
color: #fff;
align-items: center;
height: 91px;
.text {
margin: 0 auto;
}
.software {
padding-bottom: 40px;
.product {
text-align: center;
font-size: 20px;
color: #0190ca;
}
.item1 {
background: #ffc094;
width: 235px;
margin-right: 4px;
.procedure {
text-align: center;
margin: 10px;
color: #a7a9b7;
font-size: 13px;
}
.item2 {
background: #84d5ff;
width: 470px;
}
.item3 {
margin-left: 4px;
.standard {
.standard-line {
display: flex;
justify-content: center;
& > div {
display: flex;
font-size: 12px;
color: #fff;
align-items: center;
height: 91px;
.text {
margin: 0 auto;
}
}
.item1 {
background: #ffc094;
width: 235px;
margin-right: 4px;
}
.item2 {
background: #84d5ff;
width: 470px;
}
.item3 {
margin-left: 4px;
}
}
}
}
}
}
}
</style>
</style>

+ 160
- 349
src/views/service/index.vue View File

@ -1,412 +1,223 @@
<template>
<!-- 服务项目 -->
<div class="object">
<!-- banner图片 -->
<div class="banner">
<el-carousel height="475px">
<el-carousel-item v-for="item in aboutUsList" :key="item.id">
<img :src="$staticPath + item.imageAddress" alt="">
</el-carousel-item>
</el-carousel>
<div class="service">
<img src="../../assets/image/service/31.png" width="100%">
<div class="text">
<div class="list">
<div v-for="item in developmentDirection" :key="item.id">
<img :src="$staticPath + item.productImageAddress" alt="">
{{ item.productTitle }}
<div>
<img src="../../assets/image/service/3.png" alt="">
<div>APP开发服务</div>
</div>
<div>
<img src="../../assets/image/service/2.png" alt="">
<div>小程序开发服务</div>
</div>
<div>
<img src="../../assets/image/service/1.png" alt="">
<div>网站定制</div>
</div>
<div>
<img src="../../assets/image/service/4.png" alt="">
<div>微信定制</div>
</div>
</div>
<div v-if="desc.key" class="title">
<p v-html="desc.key.productDescribe || desc[0].productDescribe"></p>
<div class="title">
瀚海黎明一 家致力于软件定制开发和优质项目孵化的公司
</div>
</div>
</div>
<!-- 子元素： -->
<div class="line-1">
<!-- 第一张图 -->
<div :class="{ 'bg-phone': getIsPhont }">
<img :src="$staticPath + big.key.productImageAddress || big[0].productImageAddress" alt="">
<div class="line x1">
<div>
<img src="../../assets/image/service/21.png" alt="">
</div>
<!-- 第二张图 -->
<div :class="{ 'asda-phone': getIsPhont }" class="asda">
<div v-for="(item, index) in innovateData" :key="item.id" class="asds-item">
<div v-if="index == 0" class="img-item">
<img :src="$staticPath + item.productImageAddress" alt="">
<div class="grid">
<div>
<div>
<img src="../../assets/image/service/200242.png" alt="">
</div>
<div>
<div>
<span style="display: inline-block;
width: 20px;
border-bottom: 2px solid #000;
font-size: 25px;white-space:nowrap;">科技</span>
<span style="color: #999;padding-left: 50px;">TECHNOLOGY</span>
</div>
<div style="color: #999;">
服务客户的尖端武器
</div>
</div>
<div class="content-item" :class="{ 'dark': index == 1 }">
<div class="desc">
<div class="top">
<div class="main">{{ item.productTitle }}</div>
<div class="con">{{ item.productShortTitle }}</div>
</div>
<div class="bottom" v-html="item.productDescribe"></div>
</div>
<div style="background-color: #434343;color: #fff;">
<div>
<div>
<span style="display: inline-block;
width: 20px;
border-bottom: 2px solid #fff;
font-size: 25px;white-space:nowrap;">创新</span>
<span style="color: #bbb;padding-left: 60px;">INNOVATE</span>
</div>
<div style="color: #bbb;">
领跑行业的动力源
</div>
</div>
<div v-if="index == 1" class="img-item">
<img src="@/assets/image/service/200242.png" alt="">
<div>
<img src="../../assets/image/service/200252.png" alt="">
</div>
</div>
</div>
</div>
<div v-for="(item, index) in data" :key="item.id" :class="{ 'line-phone': getIsPhont }" class="line-1">
<div v-if="!getIsPhont && (index + 1) % 2 == 0" class="img-box">
<img :src="$staticPath + item.productImageAddress" alt="">
<div class="line x2">
<div>
<div style="padding: 60px;">
<div>
<span style="display: inline-block;
width: 20px;
border-bottom: 2px solid #000;
font-size: 25px;white-space:nowrap;">瀚海黎明团队文化</span>
<span style="color: #999;padding-left: 200px;">TEAM CULTURE</span>
</div>
<div style="color: #999;padding-top: 20px;padding-left: 20px;">
骆驼，不会像骏马那样激昂地嘶鸣，更不会像耕牛那样自怜地沉重叹息……它总是默默地抬起嶙峋的身躯，
负荷重物缓缓地远足。没有庄重的惜别，没有亲友的挥手，没有鲜花的蜂拥。惟有驼铃伴着孤影，无言地行走！
踏入无边无际、黄尘滚滚、阴风怒号、寒暑难奈、生灵尽罄的大漠，哪种生命都会感到畏惧，即使最高级的人何尝不
如此！而当骆驼一旦踏入那片大漠中，生命的符号便跃动着挑战死亡，挑战极限。它们身上透出了一种无畏、一种坚韧、
一种踏实、一种气概；没有恐惧、没有厌倦、没有躁动、没有委屈、没有怨恨、没有回头，它们稳稳健健地、一步一个脚印
地走向前方，踏踏实实，走到终点。
<br>
<br>
<br>
骆驼精神就是要求瀚海黎明团队人员如同骆驼一样，雕琢研发的产品，精益求精，踏踏实
实，经得起市场的考验和推敲。一步一步的完成每个用户的开发需求，让每个开发完成的软件都能安全、稳定的运行。
</div>
</div>
</div>
<div>
<img src="../../assets/image/service/00302.png" alt="">
</div>
</div>
<div class="line x3">
<div>
<img src="../../assets/image/service/00314.png" alt="">
</div>
<div :class="{ 'description-phone': getIsPhont }" class="description">
<div class="description-title">
<div class="title">{{ item.productTitle }}</div>
<div class="eng">{{ item.productShortTitle }}</div>
<div>
<div style="padding: 60px;">
<div>
<span style="display: inline-block;
width: 20px;
border-bottom: 2px solid #000;
font-size: 25px;white-space:nowrap;">成为受大众信赖和喜爱的服务商</span>
</div>
<div style="color: #999;padding-top: 60px;padding-left: 20px;">
瀚海黎明科技的众多业务都与客户互联网业务的发展息息相关，成为受客户信赖和喜爱的诚信企业，是我们不变的愿景。我们致力于提供优质、安全的产品和服务，主动发掘客户的潜在需求；我们以开放的方式激励更多人参与创新，将新技术与卓越的商业模式相结合，不断创造出动人心弦的惊喜；我们高度重视客户体验和他们的意见，不断完善客户关系管理体系，与客户共同成长，并将这一过程视为成就卓越的价值所在。
</div>
</div>
<div class="content" v-html="item.productDescribe"></div>
</div>
<div v-if="getIsPhont || (index + 1) % 2 != 0" class="img-box">
<img :src="$staticPath + item.productImageAddress" alt="">
</div>
<div class="line x4">
<div>
<div style="padding: 60px;">
<div>
<span style="display: inline-block;
width: 20px;
border-bottom: 2px solid #000;
font-size: 25px;white-space:nowrap;">公司目标</span>
</div>
<div style="color: #bbb;padding-top: 60px;padding-left: 20px;">
为客户提供稳定安全的产品服务，是我们不变的宗旨。
<br>
<br>
为客户提供满意的开发作品，是我们不断的追求。
<br>
<br>
利用互联网技术帮助客户实现数字化转型是我们的最终目标。
</div>
</div>
</div>
<div>
<img src="../../assets/image/service/a809200345.png" alt="">
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'About',
data() {
return {
aboutUsList: [], //轮播图列表
data: [], //团队文化 + 服务商 + 公司目标数据
innovateData: [], //科技创新数据
developmentDirection: [], //开发方向数据
desc: {}, //简介(轮播图上方)
big: {}, //科技创新(左边大图)
classIdList: ['1827870383694139393', '1827879404404723713', '1827874918579818497', '1827894586556272642', '1827897615045087234'], //分类id列表
}
},
created() {
this.queryImage()
this.getData()
},
methods: {
//获取图片
queryImage() {
this.request('queryImage', {}, {
pageNo: 1,
pageSize: 6,
classificationId: '1824999760280072194'
}).then(res => {
this.aboutUsList = res.result.records
})
},
//查询配置
queryProgram(classificationId, index) {
let dateNameList = ['data', 'innovateData', 'developmentDirection', 'desc', 'big']
this.request('queryProgram', {}, {
pageNo: 1,
pageSize: 1000,
classificationId
}).then(res => {
if (res.length == 1) {
return this[dateNameList[index]] = { key: res[0] }
}
this[dateNameList[index]] = res.result.records
})
},
//获取数据
getData() {
this.classIdList.forEach((item, index) => {
this.queryProgram(item, index)
})
}
},
computed: {
...mapGetters(["getIsPhont"]),
}
};
export default {};
</script>
<style lang="scss" scoped>
.object {
.banner {
.service {
position: relative;
overflow: hidden;
height: 31vw;
width: 100%;
img {
width: 100%;
}
&::v-deep .el-carousel__arrow--left,
&::v-deep .el-carousel__arrow--right {
display: none;
width: 0;
height: 0;
}
.text {
color: #fff;
.text{
position: absolute;
top: 60px;
top: 61px;
left: 0;
width: 100%;
height: 21vw;
z-index: 999;
.list {
.list{
display: flex;
background: #00000055;
&>div {
width: 100%;
background-color: #00000077;
&>div{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-direction: column;
height: 120px;
color: white;
img {
width: 10%;
padding: 20px 0;
img{
width: calc(8% + 25px);
}
div{
padding-top: 10px;
}
}
}
.title {
display: flex;
font-size: 30px;
justify-content: center;
margin: 80px;
color: white;
p {
margin-right: 20px;
}
.title{
text-align: center;
font-size: 35px;
margin-top: 130px;
letter-spacing: 5px;
}
}
}
.line-1 {
.line{
display: flex;
flex-wrap: wrap;
&>div {
width: 50%;
&>div{
flex: 1;
}
img {
img{
width: 100%;
height: 100%;
}
.asda {
.asds-item {
.grid{
&>div{
display: flex;
flex-wrap: wrap;
.img-item,
.content-item {
width: 50%;
background: white;
}
.content-item {
justify-content: center;
align-items: center;
&>div{
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
justify-content: center;
align-items: center;
.desc {
.top {
display: flex;
align-items: center;
.main {
position: relative;
font-size: 1.3vw;
height: 2vw;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50%;
height: 1px;
background: black;
}
}
.con {
color: #9F9F9F;
font-size: .8vw;
margin-left: .5vw;
}
}
.bottom {
color: #9F9F9F;
font-size: .8vw;
margin-top: .5vw;
}
}
}
.dark {
background: #434343;
color: #fff;
.main {
&::before {
background: white !important;
}
}
}
.light {
color: white;
.main {
&::before {
background: white !important;
}
}
.bottom {
color: white;
}
}
}
}
//移动端样式
.bg-phone {
width: 100%;
}
.asda-phone {
width: 100%;
.content-item {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.desc {
.top {
.main {
font-size: 4vw;
height: 5vw;
}
.con {
color: #9F9F9F;
font-size: 2.5vw;
margin-left: .5vw;
}
}
.bottom {
font-size: 1.5vw;
margin-top: .8vw;
}
flex-direction: column;
line-height: 50px;
}
}
}
}
.vorte {
display: flex;
&>div {
flex: 1;
box-sizing: border-box;
padding: 20px;
}
.city {}
}
.line-1 {
.description {
box-sizing: border-box;
padding: 5vw 2vw 0vw 2vw;
.description-title {
position: relative;
.x2,.x3{
&>div{
display: flex;
align-items: center;
.title {
font-size: 1.5vw;
}
.eng {
font-size: 1vw;
color: #A1A1A1;
margin-left: .8vw;
}
&::before {
position: absolute;
bottom: -.3vw;
content: '';
width: 1.5vw;
height: 1px;
background: black;
}
}
.content {
padding: 2vw;
color: #6F6F6F;
font-size: 1vw;
}
}
}
//移动端
.line-phone {
.description {
width: 100% !important;
.description-title {
.title {
font-size: 6vw;
}
.eng {
font-size: 4vw;
}
&::before {
width: 6vw;
}
}
.content {
padding: 2vw 0;
font-size: 4vw;
}
}
.img-box {
width: 100vw !important;
img {
width: 100%;
justify-content: center;
align-items: center
}
}
.x4{
background-color: #5E5C5C;
color: #fff;
}
}
</style>
</style>

Write Preview
Loading…
Cancel
Save