suixy
/
portal_website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改自定义页面

Browse Source
master
夜笙歌 4 months ago
parent 2e38cc36e5
commit 080a883d72
7 changed files with 383 additions and 15 deletions
Show Stats Download Patch File Download Diff File

BIN
dist.zip
View File

Binary file not shown.

151
src/components/editEl/editEl11.vue
Unescape Escape View File

@ -1,2 +1,149 @@
<template></template>
<script></script>
<template>
<div>
<div class="title">
<span contenteditable="true" @blur="edit('title', $event)">
{{ data.title }}
</span>
</div>
<div class="subTitle">
<span contenteditable="true" @blur="edit('subTitle', $event)">
{{ data.subTitle }}
</span>
</div>
<div class="list">
<div class="item" v-for="(i,k) in data.list">
<i class="del el-icon-circle-close" @click="data.list.splice(k, 1);"></i>
<div class="icon">
<UploadEl :data="i"/>
</div>
<div class="itemTitle" contenteditable="true" @blur="edit1('title', k,$event)">{{ i.title }}</div>
<div class="itemInfo" contenteditable="true" @blur="edit1('value', k,$event)">{{ i.value }}</div>
</div>
<div class="item">
<div style="width:100%;height:100%;" @click="data.list.push({title:'请输入',value:'请输入', icon: ''})">
<i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 18vw"></i>
</div>
</div>
</div>
</div>
</template>
<script>
import UploadEl from "@/components/editEl/uploadEl.vue";
export default {
name: 'PlatformFeatures',
props: ['data'],
components: {UploadEl},
computed: {},
data() {
return {}
},
mounted() {
},
methods: {
edit(key, e) {
this.$props.data[key] = e.target.innerText
},
edit1(key, index, e) {
this.$props.data.list[index][key] = e.target.innerText
},
}
}
</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;
.del {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
.item {
display: inline-block;
position: relative;
width: calc(100% / 3 - 2px);
height: 18vw;
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: 10vw;
height: 10vw;
position: absolute;
top: 5vw;
left: 50%;
transform: translate(-50%, -50%);
}
.itemTitle {
top: 11vw;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
font-size: 1.1vw;
letter-spacing: 1px;
transition: all 0.2s;
}
.itemInfo {
top: 12vw;
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>

2
src/components/editEl/editEl7.vue
Unescape Escape View File

@ -17,7 +17,7 @@
<UploadEl :data="i"/>
</div>
<div class="itemTitle" contenteditable="true" @blur="edit1('title', k,$event)">{{ i.title }}</div>
<div class="itemInfo" contenteditable="true" @blur="edit1('info', k,$event)">{{ i.value }}</div>
<div class="itemInfo" contenteditable="true" @blur="edit1('value', k,$event)">{{ i.value }}</div>
</div>
<div class="item">
<div style="width:100%;height:100%;" @click="data.list.push({title:'请输入',value:'请输入', icon: ''})">

133
src/components/el/el11.vue
Unescape Escape View File

@ -1,2 +1,131 @@
<template></template>
<script></script>
<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: 18vw;
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: 10vw;
height: 10vw;
position: absolute;
top: 5vw;
left: 50%;
transform: translate(-50%, -50%);
}
.itemTitle {
top: 11vw;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
font-size: 1.1vw;
letter-spacing: 1px;
transition: all 0.2s;
}
.itemInfo {
top: 12vw;
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>

5
src/components/menu/index.vue
Unescape Escape View File

@ -27,7 +27,7 @@
<div class="subMenuListTitle" @click="toLink(ii.webMenuId)">
<img class="subMenuListTitleIcon" :src="ii.configTypeIcon" alt=""
style="width: 1vw;height: 1vw;object-fit: contain">
<div class="subMenuListTitleSpan">{{ ii.configTypeName }}</div>
<div class="subMenuListTitleSpan">{{ ii.webMenuName }}</div>
<i class="el-icon-arrow-down subMenuListTitleIcon1"></i>
</div>
<div class="subMenuListItem" v-for="(iii,kkk) in ii.children"
@ -76,9 +76,10 @@ export default {
})
},
getChildren(e) {
console.log(e)
if (e.children) {
this.subMenuList = e.children
this.subMenuType = e.type || 1
this.subMenuType = e.webMenuType || 1
this.subMenuPath = e.path
} else {
this.subMenuList = []

45
src/views/page/index.vue
Unescape Escape View File

@ -1,7 +1,15 @@
<template>
<div>
<div class="container">
<div class="component" v-for="(i,k) in components">
<div v-if="$route.query.id === '1'">
<Carousel1 class="carousel"/>
<ProductCenter class="productCenter"/>
<ClassicCase class="classicCase"/>
<!-- <NewsCenter class="newsCenter"/>-->
<ContactUs class="contactUs"/>
<Copyright class="copyright"/>
</div>
<div v-if="$route.query.id !== '1'" 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"/>
@ -13,8 +21,9 @@
<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"/>-->
<EditEl11 v-if="i.type === 11" :data="i.value"/>
</div>
</div>
<ContactUs class="contactUs"/>
@ -32,14 +41,20 @@ 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 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";
import ProductCenter from "@/views/index/productCenter.vue";
import ClassicCase from "@/views/index/classicCase.vue";
import Carousel1 from "@/views/index/carousel.vue";
export default {
components: {
ClassicCase,
ProductCenter,
Carousel1,
Carousel,
ContactUs,
Copyright,
@ -53,7 +68,7 @@ export default {
EditEl8,
EditEl9,
EditEl10,
// EditEl11,
EditEl11,
},
data() {
return {
@ -492,4 +507,26 @@ export default {
width: 100%;
background-color: #1d3348;
}
.carousel {
width: 100%;
height: 650px;
}
.productCenter {
width: 100%;
text-align: center;
}
.classicCase {
width: 100%;
background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url("~@/assets/image/bg.jpg");
background-size: 100% 36.41vw;
background-repeat: no-repeat;
}
.newsCenter {
width: 100%;
}
</style>

62
src/views/pageEditor/index.vue
Unescape Escape View File

@ -10,12 +10,15 @@
v-model="value"
:props="{ checkStrictly: true,value:'webMenuId',label:'webMenuName' }"
:options="options"></el-cascader>
<el-button type="primary" size="small" style="margin-left: 12px;" @click="save">上传<i class="el-icon-upload"></i>
<el-button type="primary" size="small" style="margin-left: 12px;" @click="save">上传网页<i
class="el-icon-upload"></i>
</el-button>
</div>
<div class="container">
<div class="component" v-for="(i,k) in components">
<i class="del el-icon-circle-close" @click="components.splice(k, 1);"></i>
<i class="up el-icon-top" @click="moveUp(k);"></i>
<i class="down el-icon-bottom" @click="moveDown(k);"></i>
<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"/>
@ -27,7 +30,7 @@
<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"/>-->
<EditEl11 v-if="i.type === 11" :data="i.value"/>
</div>
<div class="addItem">
<div style="width:100%;height:100%;" @click="add">
@ -95,6 +98,11 @@
一行3张图
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem(11)">
图标标题内容，一行3个(大图)
</div>
</el-card>
<span slot="footer" class="dialog-footer">
<el-button @click="addEl = false">关 闭</el-button>
</span>
@ -117,7 +125,7 @@ import EditEl10 from "@/components/editEl/editEl10.vue";
import {selectConfigTypeList} from "@/api/menu";
import {listHwWebMenu, selectMenuTree} from "@/api/hwWebMenu";
import {getHwWeb, updateHwWeb} from "@/api/hwWeb";
// import EditEl11 from "@/components/editEl/editEl11.vue";
import EditEl11 from "@/components/editEl/editEl11.vue";
export default {
components: {
@ -132,7 +140,7 @@ export default {
EditEl8,
EditEl9,
EditEl10,
// EditEl11,
EditEl11,
},
data() {
return {
@ -303,6 +311,20 @@ export default {
],
},
},
{
type: 11,
value: {
title: '123',
subTitle: '456',
list: [
{
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '111',
value: '222'
},
],
},
},
// {
// type: 11,
// value: {
@ -762,6 +784,20 @@ export default {
value: this.componentsM.find(v => v.type === e)?.value,
})))
this.addEl = false
},
moveUp(k) {
if (k > 0) {
const item = this.components[k]
this.components.splice(k, 1) // 删除当前位置
this.components.splice(k - 1, 0, item) // 插入到上一个位置
}
},
moveDown(k) {
if (k < this.components.length - 1) {
const item = this.components[k]
this.components.splice(k, 1) // 删除当前位置
this.components.splice(k + 1, 0, item) // 插入到下一个位置
}
}
}
}
@ -796,6 +832,24 @@ export default {
position: relative;
.up {
position: absolute;
right: 50px;
top: 10px;
cursor: pointer;
z-index: 99999;
}
.down {
position: absolute;
right: 30px;
top: 10px;
cursor: pointer;
z-index: 99999;
}
.del {
position: absolute;
right: 10px;

Write Preview
Loading…
Cancel
Save