修改自定义页面
夜笙歌
10 months ago
parent
ca1dc7b82d
commit
aeefc9cc0f
@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询haiwei官网json列表
|
||||
export function listHwWeb(query) {
|
||||
return request({
|
||||
url: '/portal/hwWeb/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询haiwei官网json详细
|
||||
export function getHwWeb(webId) {
|
||||
return request({
|
||||
url: '/portal/hwWeb/' + webId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增haiwei官网json
|
||||
export function addHwWeb(data) {
|
||||
return request({
|
||||
url: '/portal/hwWeb',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改haiwei官网json
|
||||
export function updateHwWeb(data) {
|
||||
return request({
|
||||
url: '/portal/hwWeb',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除haiwei官网json
|
||||
export function delHwWeb(webId) {
|
||||
return request({
|
||||
url: '/portal/hwWeb/' + webId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询haiwei官网菜单列表
|
||||
export function listHwWebMenu(query) {
|
||||
return request({
|
||||
url: '/portal/hwWebMenu/list', method: 'get', params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询haiwei官网菜单详细
|
||||
export function getHwWebMenu(webMenuId) {
|
||||
return request({
|
||||
url: '/portal/hwWebMenu/' + webMenuId, method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增haiwei官网菜单
|
||||
export function addHwWebMenu(data) {
|
||||
return request({
|
||||
url: '/portal/hwWebMenu', method: 'post', data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改haiwei官网菜单
|
||||
export function updateHwWebMenu(data) {
|
||||
return request({
|
||||
url: '/portal/hwWebMenu', method: 'put', data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除haiwei官网菜单
|
||||
export function delHwWebMenu(webMenuId) {
|
||||
return request({
|
||||
url: '/portal/hwWebMenu/' + webMenuId, method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
export function selectMenuTree(query) {
|
||||
return request({
|
||||
url: '/portal/hwWebMenu/selectMenuTree',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div style="height: 650px;">
|
||||
<el-carousel trigger="click" style="height:100%" v-if="show" ref="carousel">
|
||||
<el-carousel-item v-for="(item,k) in data.list" :key="k">
|
||||
<div style="position: relative;width: 100%;height: 100%;">
|
||||
<UploadEl :data="item"/>
|
||||
<div class="title" contenteditable="true" @blur="edit1('title', k,$event)">{{ item.title }}</div>
|
||||
<div class="subTitle" contenteditable="true" @blur="edit1('value', k,$event)">{{ item.value }}</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item>
|
||||
<div style="position: relative;width: 100%;height: 100%;">
|
||||
<div style="width:100%;height:100%;"
|
||||
@click="addImg">
|
||||
<i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 650px"></i>
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import UploadEl from "@/components/editEl/uploadEl.vue";
|
||||
|
||||
export default {
|
||||
name: 'Carousel',
|
||||
components: {UploadEl},
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
edit1(key, index, e) {
|
||||
this.$props.data.list[index][key] = e.target.innerText
|
||||
},
|
||||
addImg() {
|
||||
this.show = false;
|
||||
this.$props.data.list.push({title: '请输入', value: '请输入'});
|
||||
this.$nextTick(() => {
|
||||
this.show = true;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.carousel.setActiveItem(this.$props.data.list.length - 1);
|
||||
}, 10)
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/style.less";
|
||||
|
||||
/deep/ .el-carousel__container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/deep/ .el-carousel__button {
|
||||
width: 50px;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background-color: #cfd6de;
|
||||
}
|
||||
|
||||
/deep/ .el-carousel__indicator--horizontal {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
|
||||
/deep/ .el-carousel__indicator.is-active button {
|
||||
opacity: 1;
|
||||
background-color: #3372ff;
|
||||
}
|
||||
|
||||
/deep/ .el-carousel__indicators--horizontal {
|
||||
bottom: 5%;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 43.7%;
|
||||
left: 37.7%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-weight: 700;
|
||||
color: #3372ff;
|
||||
font-size: 2.2vw;
|
||||
letter-spacing: 6.1px;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
position: absolute;
|
||||
top: 56%;
|
||||
left: 38.7%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #3372ff;
|
||||
font-size: 1.3vw;
|
||||
letter-spacing: 2.3px;
|
||||
white-space: nowrap;
|
||||
min-width: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div style="height: 650px;">
|
||||
<el-carousel trigger="click" style="height:100%" v-if="show" ref="carousel">
|
||||
<el-carousel-item v-for="(item,k) in data.list" :key="k">
|
||||
<div style="position: relative;width: 100%;height: 100%;">
|
||||
<el-image
|
||||
fit="contain"
|
||||
style="width: 100%;height: 100%"
|
||||
:src="item.icon"
|
||||
></el-image>
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="subTitle">{{ item.value }}</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: 'Carousel',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/style.less";
|
||||
|
||||
/deep/ .el-carousel__container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/deep/ .el-carousel__button {
|
||||
width: 50px;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background-color: #cfd6de;
|
||||
}
|
||||
|
||||
/deep/ .el-carousel__indicator--horizontal {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
|
||||
/deep/ .el-carousel__indicator.is-active button {
|
||||
opacity: 1;
|
||||
background-color: #3372ff;
|
||||
}
|
||||
|
||||
/deep/ .el-carousel__indicators--horizontal {
|
||||
bottom: 5%;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 43.7%;
|
||||
left: 37.7%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-weight: 700;
|
||||
color: #3372ff;
|
||||
font-size: 2.2vw;
|
||||
letter-spacing: 6.1px;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
position: absolute;
|
||||
top: 56%;
|
||||
left: 38.7%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #3372ff;
|
||||
font-size: 1.3vw;
|
||||
letter-spacing: 2.3px;
|
||||
white-space: nowrap;
|
||||
min-width: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>
|
||||
{{ data.title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="subTitle">
|
||||
<span>
|
||||
{{ data.subTitle }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="list">
|
||||
<template v-for="(i,k) in data.list">
|
||||
<div class="item">
|
||||
<div class="icon">
|
||||
<el-image
|
||||
fit="contain"
|
||||
style="width: 100%;height: 100%"
|
||||
:src="i.icon"
|
||||
></el-image>
|
||||
</div>
|
||||
<div class="itemTitle">{{ i.title }}</div>
|
||||
<div class="itemInfo">{{ i.value }}</div>
|
||||
</div>
|
||||
<br v-if="(k+1)%4===0"/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: 'EditEl1',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/style.less";
|
||||
|
||||
.title {
|
||||
padding-top: 4.2vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 2.5vw;
|
||||
letter-spacing: 4px;
|
||||
color: #0003;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
padding-top: 0.4vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.9vw;
|
||||
letter-spacing: 2px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 3.9vw;
|
||||
padding-bottom: 5.3vw;
|
||||
text-align: center;
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 14.5vw;
|
||||
height: 16.7vw;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 3px #0002;
|
||||
transition: all 0.2s;
|
||||
vertical-align: top;
|
||||
margin: 0 0.75vw 1vw;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: @standard-color;
|
||||
|
||||
.itemTitle {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.itemInfo {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 4vw;
|
||||
height: 4vw;
|
||||
margin-top: 2vw;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.itemTitle {
|
||||
transition: all 0.2s;
|
||||
font-size: 1vw;
|
||||
color: #000;
|
||||
margin-top: 1vw;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.itemInfo {
|
||||
transition: all 0.2s;
|
||||
display: inline-block;
|
||||
width: 82%;
|
||||
font-size: 0.8vw;
|
||||
color: #666;
|
||||
margin-top: 0.9vw;
|
||||
letter-spacing: 2px;
|
||||
line-height: 1.45vw;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>
|
||||
{{ data.title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="subTitle">
|
||||
<span>
|
||||
{{ data.subTitle }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="list">
|
||||
<template v-for="(i,k) in data.list">
|
||||
<div class="item">
|
||||
<el-image
|
||||
fit="contain"
|
||||
style="width: 100%;height: 100%"
|
||||
:src="i.icon"
|
||||
></el-image>
|
||||
</div>
|
||||
<br class="br" v-if="(k+1)%3===0"/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'EditEl10',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/style.less";
|
||||
|
||||
|
||||
.title {
|
||||
padding-top: 4.2vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 2.5vw;
|
||||
letter-spacing: 4px;
|
||||
color: #0003;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
padding-top: 0.4vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.9vw;
|
||||
letter-spacing: 2px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 3.9vw auto 0;
|
||||
padding-bottom: 5.3vw;
|
||||
width: 60vw;
|
||||
//display: flex;
|
||||
//justify-content: space-between;
|
||||
//align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.br {
|
||||
display: block;
|
||||
content: '';
|
||||
flex-basis: 100%;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
//height: 16.7vw;
|
||||
margin: 0 0.5vw;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,2 @@
|
||||
<template></template>
|
||||
<script></script>
|
||||
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>
|
||||
{{ data.title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="subTitle">
|
||||
<span>
|
||||
{{ data.subTitle }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="contentSubTitle">
|
||||
{{ data.contentSubTitle }}
|
||||
</div>
|
||||
<div class="contentTitle">
|
||||
{{ data.contentTitle }}
|
||||
</div>
|
||||
<div class="contentInfo">
|
||||
{{ data.contentInfo }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-image
|
||||
fit="contain"
|
||||
style="width: 100%;height: 100%"
|
||||
:src="data.icon"
|
||||
></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'EditEl2',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/style.less";
|
||||
|
||||
.title {
|
||||
padding-top: 4.2vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 2.5vw;
|
||||
letter-spacing: 4px;
|
||||
color: #0003;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
padding-top: 0.4vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.9vw;
|
||||
letter-spacing: 2px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: inline-block;
|
||||
width: 62vw;
|
||||
height: 20.1vw;
|
||||
border: 1px solid #ccc3;
|
||||
margin-top: 3.7vw;
|
||||
margin-bottom: 5.2vw;
|
||||
vertical-align: top;
|
||||
|
||||
.left {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
|
||||
.contentTitle {
|
||||
position: absolute;
|
||||
top: 18.6%;
|
||||
left: 12.7%;
|
||||
letter-spacing: 1px;
|
||||
font-size: 1.4vw;
|
||||
color: @standard-color;
|
||||
}
|
||||
|
||||
.contentSubTitle {
|
||||
position: absolute;
|
||||
top: 14.6%;
|
||||
left: 12.7%;
|
||||
letter-spacing: 3.2px;
|
||||
font-size: 1.6vw;
|
||||
color: #6666;
|
||||
}
|
||||
|
||||
.contentInfo {
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
top: 35.6%;
|
||||
width: 73%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
letter-spacing: 2.5px;
|
||||
font-size: 0.8vw;
|
||||
line-height: 1.6vw;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>
|
||||
{{ data.title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="subTitle">
|
||||
<span>
|
||||
{{ data.subTitle }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item" v-for="(i,k) in data.list">
|
||||
<div class="icon">
|
||||
<el-image
|
||||
fit="contain"
|
||||
style="width: 100%;height: 100%"
|
||||
:src="i.icon"
|
||||
></el-image>
|
||||
</div>
|
||||
<div class="itemTitle">{{ i.itemTitle }}</div>
|
||||
<div class="itemInfo">{{ i.itemInfo }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: 'EditEl3',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/style.less";
|
||||
|
||||
.title {
|
||||
padding-top: 4.2vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 2.5vw;
|
||||
letter-spacing: 4px;
|
||||
color: #0003;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
padding-top: 0.4vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.9vw;
|
||||
letter-spacing: 2px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 65vw;
|
||||
display: inline-block;
|
||||
margin-top: 3.5vw;
|
||||
margin-bottom: 3.9vw;
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 47%;
|
||||
height: 10vw;
|
||||
box-shadow: 0 0 3px #0002;
|
||||
margin: 0 1.5% 1.1vw 1.5%;
|
||||
|
||||
|
||||
.icon {
|
||||
width: 4vw;
|
||||
height: 4vw;
|
||||
position: absolute;
|
||||
top: 54%;
|
||||
left: 18.2%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.itemTitle {
|
||||
top: 37%;
|
||||
left: 33.9%;
|
||||
position: absolute;
|
||||
transform: translatey(-50%);
|
||||
font-size: 1.2vw;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.itemInfo {
|
||||
top: 62.2%;
|
||||
left: 33.9%;
|
||||
position: absolute;
|
||||
transform: translatey(-50%);
|
||||
font-size: 0.9vw;
|
||||
color: #666;
|
||||
letter-spacing: 2px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
width: 63%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<el-image
|
||||
fit="contain"
|
||||
style="width: 100%;height: 100%"
|
||||
:src="data.icon"
|
||||
></el-image>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="list">
|
||||
<div class="item" v-for="(i,k) in data.list.slice(0,4)">
|
||||
<div class="itemTitle">{{ i.title }}</div>
|
||||
<div class="itemInfo">
|
||||
{{ i.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: 'EditEl4',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/style.less";
|
||||
|
||||
.content {
|
||||
display: inline-block;
|
||||
padding-top: 5.1vw;
|
||||
width: 65vw;
|
||||
height: 31vw;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
margin: 0 auto 5.3vw;
|
||||
|
||||
.left {
|
||||
width: 26%;
|
||||
height: 100%;
|
||||
margin: 0% 2%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background-color: #0378f9;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
.leftTitle {
|
||||
color: #fff;
|
||||
font-size: 1.9vw;
|
||||
letter-spacing: 2px;
|
||||
margin-top: 21.7%;
|
||||
margin-left: 11.8%;
|
||||
}
|
||||
|
||||
.leftSubTitle {
|
||||
color: #fff;
|
||||
width: 75%;
|
||||
line-height: 1.8vw;
|
||||
font-size: 1.1vw;
|
||||
letter-spacing: 2px;
|
||||
margin-top: 5.1%;
|
||||
margin-left: 11.8%;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 68.5%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 48%;
|
||||
height: 48%;
|
||||
box-shadow: 0 0 3px #0002;
|
||||
background-color: #f2f3f5;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
|
||||
|
||||
&:nth-child(1) {
|
||||
margin: 0 4% 3% 0;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin: 0 0 3% 0;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
margin: 0 4% 0 0;
|
||||
}
|
||||
|
||||
.itemTitle {
|
||||
margin-top: 8.2%;
|
||||
margin-left: 7.6%;
|
||||
font-size: 1.2vw;
|
||||
line-height: 1.4vw;
|
||||
color: #000;
|
||||
letter-spacing: 2.7px;
|
||||
border-left: 4px solid #3372ff;
|
||||
padding-left: 0.7vw;
|
||||
}
|
||||
|
||||
.itemInfo {
|
||||
margin-top: 6%;
|
||||
width: 88%;
|
||||
margin-left: 7.3%;
|
||||
font-size: 1.1vw;
|
||||
line-height: 1.8vw;
|
||||
color: #333;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>
|
||||
{{ data.title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="subTitle">
|
||||
<span>
|
||||
{{ data.subTitle }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="image">
|
||||
<el-image
|
||||
fit="contain"
|
||||
style="width: 100%;height: 100%"
|
||||
:src="data.icon"
|
||||
></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: 'EditEl5',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/style.less";
|
||||
|
||||
.title {
|
||||
padding-top: 4.2vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 2.5vw;
|
||||
letter-spacing: 4px;
|
||||
color: #0003;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
padding-top: 0.4vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.9vw;
|
||||
letter-spacing: 2px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 65vw;
|
||||
height: 33.3vw;
|
||||
display: inline-block;
|
||||
margin: 4vw 0 6vw 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>
|
||||
{{ data.title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="subTitle">
|
||||
<span>
|
||||
{{ data.subTitle }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="pageInfo">{{ data.info }}</div>
|
||||
<div class="image">
|
||||
<el-image
|
||||
fit="contain"
|
||||
style="width: 100%;height: 100%"
|
||||
:src="data.icon"
|
||||
></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
let map = null
|
||||
export default {
|
||||
name: 'PlatformArchitecture',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/style.less";
|
||||
|
||||
.title {
|
||||
padding-top: 4.2vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 2.5vw;
|
||||
letter-spacing: 4px;
|
||||
color: #0003;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
padding-top: 0.4vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.9vw;
|
||||
letter-spacing: 2px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 65vw;
|
||||
height: 33.3vw;
|
||||
display: inline-block;
|
||||
margin: 4vw 0 6vw 0;
|
||||
}
|
||||
|
||||
.pageInfo {
|
||||
width: 63vw;
|
||||
margin-top: 0.9vw;
|
||||
display: inline-block;
|
||||
color: #6666;
|
||||
font-size: 1.2vw;
|
||||
line-height: 2.2vw;
|
||||
letter-spacing: 2.8px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>
|
||||
{{ data.title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="subTitle">
|
||||
<span>
|
||||
{{ data.subTitle }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item" v-for="(i,k) in data.list">
|
||||
<div class="icon">
|
||||
<el-image
|
||||
fit="contain"
|
||||
style="width: 100%;height: 100%"
|
||||
:src="i.icon"
|
||||
></el-image>
|
||||
</div>
|
||||
<div class="itemTitle">{{ i.title }}</div>
|
||||
<div class="itemInfo">{{ i.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'PlatformFeatures',
|
||||
props: ['data'],
|
||||
computed: {},
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/style.less";
|
||||
|
||||
.title {
|
||||
padding-top: 4.2vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 2.5vw;
|
||||
letter-spacing: 4px;
|
||||
color: #0003;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
padding-top: 0.4vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.9vw;
|
||||
letter-spacing: 2px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 65vw;
|
||||
display: inline-block;
|
||||
margin-top: 3.8vw;
|
||||
margin-bottom: 2.8vw;
|
||||
box-shadow: 0 0 3px #0002;
|
||||
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: calc(100% / 3 - 2px);
|
||||
height: 13.3vw;
|
||||
border: 1px solid #3332;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: @standard-color;
|
||||
|
||||
.itemTitle {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.itemInfo {
|
||||
color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 2.3vw;
|
||||
height: 2.3vw;
|
||||
position: absolute;
|
||||
top: 22%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.itemTitle {
|
||||
top: 42%;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 1.1vw;
|
||||
letter-spacing: 1px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.itemInfo {
|
||||
top: 52.2%;
|
||||
left: 9.6%;
|
||||
position: absolute;
|
||||
font-size: 0.8vw;
|
||||
line-height: 1.5vw;
|
||||
color: #666;
|
||||
letter-spacing: 2.5px;
|
||||
text-align: left;
|
||||
width: 80%;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>
|
||||
{{ data.title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="subTitle">
|
||||
<span>
|
||||
{{ data.subTitle }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane :name="`${k}`" v-for="(i,k) in data.list">
|
||||
<template slot="label">
|
||||
<span>
|
||||
{{ i.title }}
|
||||
</span>
|
||||
</template>
|
||||
<transition name="fade">
|
||||
<div v-if="activeName === `${k}`" style="position:relative;">
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="itemTitle">
|
||||
{{ i.leftTitle }}
|
||||
</div>
|
||||
<div class="itemCode">
|
||||
{{ i.leftInfo }}
|
||||
</div>
|
||||
<div class="image">
|
||||
<el-image
|
||||
fit="contain"
|
||||
style="width: 100%;height: 100%"
|
||||
:src="i.icon"
|
||||
></el-image>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="infos" v-for="(ii,kk) in i.infos">
|
||||
<div class="infoTitle">
|
||||
{{ ii.title }}
|
||||
</div>
|
||||
<div class="infoNum">
|
||||
{{ ii.info }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'EditEl8',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {
|
||||
activeName: '0'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/style.less";
|
||||
|
||||
.title {
|
||||
padding-top: 4.2vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 2.5vw;
|
||||
letter-spacing: 4px;
|
||||
color: #0003;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
padding-top: 0.4vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.9vw;
|
||||
letter-spacing: 2px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
text-align: left;
|
||||
margin-top: 2.3vw;
|
||||
|
||||
/deep/ .el-tabs__header {
|
||||
margin: 0 20vw 15px;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__content {
|
||||
padding: 0 20vw;
|
||||
background-color: fade(@standard-color, 10);
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__nav-wrap::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__item {
|
||||
letter-spacing: 3px;
|
||||
padding: 0 2vw;
|
||||
height: 2.9vw;
|
||||
font-size: 1.6vw;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__item {
|
||||
line-height: 2.9vw;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__item.is-active {
|
||||
font-weight: 600;
|
||||
color: @standard-color;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__active-bar {
|
||||
height: 4px;
|
||||
background-color: @standard-color;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 2.2vw 0;
|
||||
|
||||
.left {
|
||||
width: 34%;
|
||||
height: 21.7vw;
|
||||
display: inline-block;
|
||||
box-shadow: 0 0 3px #0002;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
|
||||
.itemTitle {
|
||||
padding-top: 1.2vw;
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
.itemCode {
|
||||
margin-top: 0.2vw;
|
||||
font-size: 1.1vw;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 80%;
|
||||
margin-top: 1vw;
|
||||
margin-left: 10%;
|
||||
height: 15vw;
|
||||
background-color: cadetblue;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 1%;
|
||||
width: 65%;
|
||||
height: 21.2vw;
|
||||
display: inline-block;
|
||||
box-shadow: 0 0 5px #0002;
|
||||
background-color: #fff;
|
||||
padding-top: 0.5vw;
|
||||
|
||||
.infos {
|
||||
width: 93%;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1px dashed #0003;
|
||||
position: relative;
|
||||
height: 2.9vw;
|
||||
|
||||
}
|
||||
|
||||
.infoTitle {
|
||||
position: absolute;
|
||||
width: 46%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 4%;
|
||||
text-align: left;
|
||||
font-size: 1vw;
|
||||
letter-spacing: 1px;
|
||||
color: #0009;
|
||||
line-height: 2.9vw;
|
||||
}
|
||||
|
||||
.infoNum {
|
||||
position: absolute;
|
||||
width: 46%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 5%;
|
||||
text-align: right;
|
||||
font-size: 1vw;
|
||||
letter-spacing: 1.4px;
|
||||
color: #000;
|
||||
line-height: 2.9vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fade-enter-active {
|
||||
animation: fadeInRight;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.fade-leave-active {
|
||||
animation: fadeOutLeft;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>
|
||||
{{ data.title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="subTitle">
|
||||
<span>
|
||||
{{ data.subTitle }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item" v-for=" i in data.list">
|
||||
<div class="image">
|
||||
<el-image
|
||||
fit="contain"
|
||||
style="width: 100%;height: 100%"
|
||||
:src="i.icon"
|
||||
></el-image>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span>
|
||||
{{ i.value }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'EditEl9',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/style.less";
|
||||
|
||||
.title {
|
||||
padding-top: 4.2vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 2.5vw;
|
||||
letter-spacing: 4px;
|
||||
color: #0003;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
padding-top: 0.4vw;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.9vw;
|
||||
letter-spacing: 2px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 65%;
|
||||
margin: 3vw auto 0;
|
||||
|
||||
.item {
|
||||
margin-right: 2.6%;
|
||||
width: 23%;
|
||||
height: 16vw;
|
||||
display: inline-block;
|
||||
box-shadow: 0 0 3px #0002;
|
||||
margin-bottom: 1.4vw;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.info {
|
||||
width: calc(100% - 2.2vw);
|
||||
height: calc(50% - 2.1vw);
|
||||
padding: 1.1vw;
|
||||
font-size: 0.85vw;
|
||||
line-height: 1.2vw;
|
||||
letter-spacing: 0.6px;
|
||||
color: #0006;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: calc(100%);
|
||||
height: calc(100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(4n) {
|
||||
margin-right: 0%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<div class="menu">
|
||||
<div v-for="(i,k) in menuList" :class="`menuItem ${$route.path === i.path ? 'focus':''}`"
|
||||
@mouseenter="getChildren(i)" @click="toLink((i.children||[]).length===0 ? i.path:'')">
|
||||
<div :class="`name`">{{ i.name }}</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="subMenu" v-show="(subMenuList||[]).length>0 && subMenuType === 1" @mouseleave="clearChildren">
|
||||
<div :class="`topMenuItem${$route.fullPath === ii.path ? ' active':''}`" v-for="(ii,k) in subMenuList"
|
||||
@click="toLink(subMenuPath,ii.configTypeId)">
|
||||
<div class="icon">
|
||||
<img :src="ii.configTypeIcon" alt="" style="width: 1.8vw;height: 1.8vw;object-fit: contain">
|
||||
</div>
|
||||
<div class="menuChildrenName">
|
||||
<span>
|
||||
{{ ii.configTypeName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subMenu1" :style="{height:20 + 50 + 40*(Math.max(...subMenuList.map(e=>e.children.length || 0)))+'px'}"
|
||||
v-show="(subMenuList||[]).length>0 && subMenuType === 2"
|
||||
@mouseleave="clearChildren">
|
||||
<div class="subMenuList" :style="{width:100/subMenuList.length+'%'}"
|
||||
v-for="(ii,k) in subMenuList">
|
||||
<div class="subMenuListTitle" @click="toLink(subMenuPath,ii.configTypeId)">
|
||||
<img class="subMenuListTitleIcon" :src="ii.configTypeIcon" alt=""
|
||||
style="width: 1vw;height: 1vw;object-fit: contain">
|
||||
<div class="subMenuListTitleSpan">{{ ii.configTypeName }}</div>
|
||||
<i class="el-icon-arrow-down subMenuListTitleIcon1"></i>
|
||||
</div>
|
||||
<div class="subMenuListItem" v-for="(iii,kkk) in ii.children"
|
||||
@click="toLink(subMenuPath,iii.configTypeId,true)">
|
||||
<img :src="iii.configTypeIcon" alt=""
|
||||
style="vertical-align: sub;width: 18px;height: 18px;line-height: 30px;object-fit: contain;margin-right: 6px">
|
||||
<span>
|
||||
{{ iii.configTypeName }}
|
||||
</span>
|
||||
<el-tag size="small" v-if="kkk <1">新品</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wlw from "@/assets/icon/wlw.png";
|
||||
import znzz from "@/assets/icon/znzz.png";
|
||||
import kdwl from "@/assets/icon/kdwl.png";
|
||||
import znlt from "@/assets/icon/znlt.png";
|
||||
import {selectConfigTypeList} from "@/api/menu";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
data() {
|
||||
return {
|
||||
menuList: [
|
||||
{
|
||||
name: '首页',
|
||||
path: '/index'
|
||||
},
|
||||
{
|
||||
name: '关于海威',
|
||||
path: '/aboutHW',
|
||||
type: 1,
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: '产品中心',
|
||||
path: '/productCenter',
|
||||
type: 2,
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: '行业方案',
|
||||
path: '/industryPlan',
|
||||
type: 2,
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: '服务支持',
|
||||
path: '/serviceSupport',
|
||||
type: 1,
|
||||
children: []
|
||||
},
|
||||
],
|
||||
subMenuList: [],
|
||||
subMenuType: 0,
|
||||
subMenuPath: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.$route)
|
||||
this.getMenu()
|
||||
let query = this.$route.path
|
||||
console.log(this.$route)
|
||||
},
|
||||
methods: {
|
||||
toLink(e, id, isDetail) {
|
||||
console.log(e)
|
||||
if (!e) return
|
||||
let path = e
|
||||
if (isDetail) {
|
||||
path = path + '/detail'
|
||||
}
|
||||
if (id) {
|
||||
path = path + '?id=' + id
|
||||
}
|
||||
this.$router.push(path)
|
||||
},
|
||||
getChildren(e) {
|
||||
if (e.children) {
|
||||
this.subMenuList = e.children
|
||||
this.subMenuType = e.type
|
||||
this.subMenuPath = e.path
|
||||
} else {
|
||||
this.subMenuList = []
|
||||
this.subMenuType = 0
|
||||
this.subMenuPath = ''
|
||||
}
|
||||
},
|
||||
clearChildren() {
|
||||
this.subMenuList = []
|
||||
this.subMenuType = 0
|
||||
this.subMenuPath = ''
|
||||
},
|
||||
getMenu() {
|
||||
selectConfigTypeList({
|
||||
configTypeClassfication: 3,
|
||||
parentId: 0,
|
||||
}).then(e => {
|
||||
this.menuList[1].children = e.rows
|
||||
})
|
||||
selectConfigTypeList({
|
||||
configTypeClassfication: 4,
|
||||
parentId: 0,
|
||||
}).then(e => {
|
||||
this.menuList[2].children = e.rows
|
||||
})
|
||||
selectConfigTypeList({
|
||||
configTypeClassfication: 5,
|
||||
parentId: 0,
|
||||
}).then(e => {
|
||||
this.menuList[3].children = e.rows
|
||||
})
|
||||
selectConfigTypeList({
|
||||
configTypeClassfication: 6,
|
||||
parentId: 0,
|
||||
}).then(e => {
|
||||
this.menuList[4].children = e.rows
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/style.less";
|
||||
|
||||
.menu {
|
||||
position: relative;
|
||||
|
||||
.focus, .menuItem:hover {
|
||||
font-weight: 700;
|
||||
color: #3076f8;
|
||||
background-color: #ebf1ff;
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #3076f8;
|
||||
}
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
//width: 120px;
|
||||
padding: 0 2vw;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
|
||||
.name {
|
||||
line-height: @top-height;
|
||||
font-size: 1vw;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.subMenu {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
height: @menuHeight;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
z-index: -1;
|
||||
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.04);
|
||||
|
||||
|
||||
.topMenuItem.active, .topMenuItem:hover {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.menuChildrenName {
|
||||
color: @standard-color;
|
||||
}
|
||||
}
|
||||
|
||||
.topMenuItem {
|
||||
width: @menuHeight;
|
||||
height: @menuHeight;
|
||||
transition: all 0.2s;
|
||||
|
||||
.icon {
|
||||
width: 100%;
|
||||
height: 36%;
|
||||
margin-top: 22%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.menuName {
|
||||
height: 20%;
|
||||
font-size: 0.9vw;
|
||||
color: #111;
|
||||
letter-spacing: 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.subMenuList {
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
height: @menuHeight;
|
||||
}
|
||||
}
|
||||
|
||||
.subMenu1 {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
min-height: @menuHeight;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
z-index: -1;
|
||||
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.04);
|
||||
|
||||
|
||||
.subMenuList {
|
||||
max-width: 14vw;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
border-right: 1px solid #0001;
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.subMenuListTitle {
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
.subMenuListTitleIcon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 2vw;
|
||||
width: 1vw;
|
||||
height: 1vw;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.subMenuListTitleIcon1 {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 2vw;
|
||||
width: 1vw;
|
||||
height: 1vw;
|
||||
font-size: 1vw;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.subMenuListTitleSpan {
|
||||
position: absolute;
|
||||
letter-spacing: 0.1vw;
|
||||
top: 50%;
|
||||
left: calc(2vw + 1vw + 0.5vw);
|
||||
transform: translateY(-50%);
|
||||
font-size: 1vw;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.subMenuListItem {
|
||||
padding-left: 2vw;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
|
||||
&:hover {
|
||||
color: @standard-color;
|
||||
background-color: #0001;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@menuHeight: 11vw;
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@ -0,0 +1,495 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="container">
|
||||
<div class="component" v-for="(i,k) in components">
|
||||
<Carousel v-if="i.type === 'carousel'" :data="i.value"/>
|
||||
<EditEl1 v-if="i.type === 1" :data="i.value"/>
|
||||
<EditEl2 v-if="i.type === 2" :data="i.value"/>
|
||||
<EditEl3 v-if="i.type === 3" :data="i.value"/>
|
||||
<EditEl4 v-if="i.type === 4" :data="i.value"/>
|
||||
<EditEl5 v-if="i.type === 5" :data="i.value"/>
|
||||
<EditEl6 v-if="i.type === 6" :data="i.value"/>
|
||||
<EditEl7 v-if="i.type === 7" :data="i.value"/>
|
||||
<EditEl8 v-if="i.type === 8" :data="i.value"/>
|
||||
<EditEl9 v-if="i.type === 9" :data="i.value"/>
|
||||
<EditEl10 v-if="i.type ===10" :data="i.value"/>
|
||||
<!-- <EditEl11 v-if="i.type === 11" :data="i.value"/>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ContactUs class="contactUs"/>
|
||||
<Copyright class="copyright"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import EditEl1 from "@/components/el/el1.vue";
|
||||
import EditEl2 from "@/components/el/el2.vue";
|
||||
import EditEl3 from "@/components/el/el3.vue";
|
||||
import EditEl4 from "@/components/el/el4.vue";
|
||||
import EditEl5 from "@/components/el/el5.vue";
|
||||
import EditEl6 from "@/components/el/el6.vue";
|
||||
import EditEl7 from "@/components/el/el7.vue";
|
||||
import EditEl8 from "@/components/el/el8.vue";
|
||||
import EditEl9 from "@/components/el/el9.vue";
|
||||
import EditEl10 from "@/components/el/el10.vue";
|
||||
// import EditEl11 from "@/components/el/el11.vue";
|
||||
import Copyright from '@/components/copyright'
|
||||
import ContactUs from "@/views/index/contactUs.vue";
|
||||
import Carousel from "@/components/el/carousel.vue";
|
||||
import {getHwWeb} from "@/api/hwWeb";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Carousel,
|
||||
ContactUs,
|
||||
Copyright,
|
||||
EditEl1,
|
||||
EditEl2,
|
||||
EditEl3,
|
||||
EditEl4,
|
||||
EditEl5,
|
||||
EditEl6,
|
||||
EditEl7,
|
||||
EditEl8,
|
||||
EditEl9,
|
||||
EditEl10,
|
||||
// EditEl11,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
a: '1',
|
||||
addEl: false,
|
||||
value: [],
|
||||
components: [
|
||||
{
|
||||
type: 'carousel',
|
||||
value: {
|
||||
list: [
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '111',
|
||||
value: '222'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '222',
|
||||
value: '333'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '333',
|
||||
value: '444'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '444',
|
||||
value: '555'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '555',
|
||||
value: '666'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '666',
|
||||
value: '777'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '666',
|
||||
value: '777'
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 1,
|
||||
value: {
|
||||
title: '123',
|
||||
subTitle: '456',
|
||||
list: [
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '111',
|
||||
value: '222'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '222',
|
||||
value: '333'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '333',
|
||||
value: '444'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '444',
|
||||
value: '555'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '555',
|
||||
value: '666'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '666',
|
||||
value: '777'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '666',
|
||||
value: '777'
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
value: {
|
||||
title: '123',
|
||||
subTitle: '456',
|
||||
contentTitle: 'contentTitle',
|
||||
contentSubTitle: 'DEVELOPMENT PLATFORM',
|
||||
contentInfo: 'contentInfo',
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 3,
|
||||
value: {
|
||||
title: '123',
|
||||
subTitle: '456',
|
||||
list: [
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
itemTitle: '111',
|
||||
itemInfo: '222'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
itemTitle: '222',
|
||||
itemInfo: '333'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
itemTitle: '333',
|
||||
itemInfo: '444'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
itemTitle: '444',
|
||||
itemInfo: '555'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
itemTitle: '555',
|
||||
itemInfo: '666'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
itemTitle: '666',
|
||||
itemInfo: '777'
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 4,
|
||||
value: {
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '123',
|
||||
subTitle: '456',
|
||||
list: [
|
||||
{
|
||||
title: '111',
|
||||
value: '222'
|
||||
},
|
||||
{
|
||||
title: '111',
|
||||
value: '222'
|
||||
},
|
||||
{
|
||||
title: '111',
|
||||
value: '222'
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 5,
|
||||
value: {
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '123',
|
||||
subTitle: '456',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 6,
|
||||
value: {
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '123',
|
||||
subTitle: '456',
|
||||
info: '789',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 7,
|
||||
value: {
|
||||
title: '123',
|
||||
subTitle: '456',
|
||||
list: [
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '111',
|
||||
value: '222'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '222',
|
||||
value: '333'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '333',
|
||||
value: '444'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '444',
|
||||
value: '555'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '555',
|
||||
value: '666'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '666',
|
||||
value: '777'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '666',
|
||||
value: '777'
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 8,
|
||||
value: {
|
||||
title: '123',
|
||||
subTitle: '456',
|
||||
list: [
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '111',
|
||||
leftTitle: '222',
|
||||
leftInfo: '333',
|
||||
infos: [
|
||||
{title: '111', info: '222'},
|
||||
{title: '111', info: '222'},
|
||||
{title: '111', info: '222'},
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '111',
|
||||
leftTitle: '222',
|
||||
leftInfo: '333',
|
||||
infos: [
|
||||
{title: '111', info: '222'},
|
||||
{title: '111', info: '222'},
|
||||
{title: '111', info: '222'},
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 9,
|
||||
value: {
|
||||
title: '123',
|
||||
subTitle: '456',
|
||||
list: [
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
value: '222'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
value: '333'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
value: '444'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
value: '555'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
value: '666'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
value: '777'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
value: '777'
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 10,
|
||||
value: {
|
||||
title: '123',
|
||||
subTitle: '456',
|
||||
list: [
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '111',
|
||||
value: '222'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '222',
|
||||
value: '333'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '333',
|
||||
value: '444'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '444',
|
||||
value: '555'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '555',
|
||||
value: '666'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '666',
|
||||
value: '777'
|
||||
},
|
||||
{
|
||||
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
title: '666',
|
||||
value: '777'
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
// {
|
||||
// type: 11,
|
||||
// value: {
|
||||
// title: '123',
|
||||
// subTitle: '456',
|
||||
// list: [
|
||||
// {
|
||||
// icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
// title: '111',
|
||||
// value: '222'
|
||||
// },
|
||||
// {
|
||||
// icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
// title: '222',
|
||||
// value: '333'
|
||||
// },
|
||||
// {
|
||||
// icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
// title: '333',
|
||||
// value: '444'
|
||||
// },
|
||||
// {
|
||||
// icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
// title: '444',
|
||||
// value: '555'
|
||||
// },
|
||||
// {
|
||||
// icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
// title: '555',
|
||||
// value: '666'
|
||||
// },
|
||||
// {
|
||||
// icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
// title: '666',
|
||||
// value: '777'
|
||||
// },
|
||||
// {
|
||||
// icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
// title: '666',
|
||||
// value: '777'
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route'() {
|
||||
getHwWeb(this.$route.query.id).then(res => {
|
||||
this.components = JSON.parse(res?.data?.webJsonString || '[]')
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.$route.query?.id)
|
||||
getHwWeb(this.$route.query.id).then(res => {
|
||||
console.log(res)
|
||||
this.components = JSON.parse(res?.data?.webJsonString || '[]')
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
console.log(val)
|
||||
},
|
||||
edit(key, e) {
|
||||
this[key] = e.target.innerText
|
||||
},
|
||||
add() {
|
||||
this.addEl = true
|
||||
},
|
||||
save() {
|
||||
console.log(this.components)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
|
||||
.container {
|
||||
width: 90%;
|
||||
text-align: left;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.component {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.contactUs {
|
||||
width: 100%;
|
||||
background-color: #2e445c;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
width: 100%;
|
||||
background-color: #1d3348;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue