修改菜单
夜笙歌
3 days ago
parent
f1cad1531b
commit
fe7874505e
@ -0,0 +1,11 @@
|
||||
# 页面标题
|
||||
VUE_APP_TITLE = 海威物联官网
|
||||
|
||||
# 开发环境配置
|
||||
ENV = 'development'
|
||||
|
||||
# 若依管理系统/开发环境
|
||||
VUE_APP_BASE_API = '/dev-api'
|
||||
|
||||
# 路由懒加载
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
@ -0,0 +1,9 @@
|
||||
# 页面标题
|
||||
VUE_APP_TITLE = 海威物联官网
|
||||
|
||||
# 生产环境配置
|
||||
ENV = 'production'
|
||||
|
||||
# 若依管理系统/生产环境
|
||||
VUE_APP_BASE_API = '/prod-api'
|
||||
|
||||
@ -0,0 +1,136 @@
|
||||
<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">
|
||||
<template v-for="(i,k) in data.list">
|
||||
<div class="item">
|
||||
<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>
|
||||
<br v-if="(k+1)%4===0"/>
|
||||
</template>
|
||||
<div class="item">
|
||||
<div style="width:100%;height:100%;" @click="data.list.push({title:'输入。。。',value:'输入。。。'})">
|
||||
<i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 16.7vw"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import UploadEl from "@/components/editEl/uploadEl.vue";
|
||||
|
||||
export default {
|
||||
name: 'EditEl1',
|
||||
components: {UploadEl},
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
edit(key, e) {
|
||||
console.log(this.$props)
|
||||
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 {
|
||||
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;
|
||||
|
||||
&: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,130 @@
|
||||
<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="content">
|
||||
<div class="left">
|
||||
<div class="contentSubTitle" contenteditable="true" @blur="edit('contentSubTitle', $event)">
|
||||
{{ data.contentSubTitle }}
|
||||
</div>
|
||||
<div class="contentTitle" contenteditable="true" @blur="edit('contentTitle', $event)">
|
||||
{{ data.contentTitle }}
|
||||
</div>
|
||||
<div class="contentInfo" contenteditable="true" @blur="edit('contentInfo', $event)">
|
||||
{{ data.contentInfo }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<UploadEl :data="{icon:data.image}"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UploadEl from "@/components/editEl/uploadEl.vue";
|
||||
|
||||
export default {
|
||||
name: 'EditEl2',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadEl,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
edit(key, e) {
|
||||
this.data[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;
|
||||
}
|
||||
|
||||
.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,125 @@
|
||||
<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">
|
||||
<div class="icon">
|
||||
<UploadEl :data="i"/>
|
||||
</div>
|
||||
<div class="itemTitle" contenteditable="true" @blur="edit1('itemTitle', k,$event)">{{ i.itemTitle }}</div>
|
||||
<div class="itemInfo" contenteditable="true" @blur="edit1('itemInfo', k,$event)">{{ i.itemInfo }}</div>
|
||||
</div>
|
||||
<div class="item" style="vertical-align: top">
|
||||
<div style="width:100%;height:100%;" @click="data.list.push({itemTitle:'输入。。。',itemInfo:'输入。。。'})">
|
||||
<i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 10vw"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import UploadEl from "@/components/editEl/uploadEl.vue";
|
||||
|
||||
export default {
|
||||
name: 'EditEl3',
|
||||
components: {UploadEl},
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
edit(key, e) {
|
||||
console.log(this.$props)
|
||||
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.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,129 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="content">
|
||||
<div class="left" :style="{backgroundImage:`url(${data.hwProductInfoDetailList[0].productInfoDetailPic})`}">
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="list">
|
||||
<div class="item" v-for="i in data.hwProductInfoDetailList">
|
||||
<div class="itemTitle">{{ i.productInfoDetailTitle }}</div>
|
||||
<div class="itemInfo">
|
||||
{{ i.productInfoDetailDesc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'EditEl4',
|
||||
components: {},
|
||||
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;
|
||||
|
||||
&: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 style="width: 100%;height: 100%">
|
||||
<el-upload
|
||||
style="width: 100%;height: 100%"
|
||||
class="avatar-uploader"
|
||||
:action="imageUrl"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload">
|
||||
<img style="width: 100%;height: 100%" v-if="data.icon" :src="data.icon" class="avatar">
|
||||
<i v-else style="width: 100%;height: 100%;font-size: 2vw" class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {
|
||||
imageUrl: '/prod-api' + "/file/upload",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleAvatarSuccess(res, file) {
|
||||
if (res.code === 200) {
|
||||
this.$props.data.icon = res.data.url
|
||||
}
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
if (!(file.type === 'image/jpeg' || file.type === 'image/png')) {
|
||||
this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
|
||||
}
|
||||
return file.type === 'image/jpeg' || file.type === 'image/png'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
line-height: 4vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="top">
|
||||
<div class="title">
|
||||
页面编辑器
|
||||
</div>
|
||||
<el-cascader
|
||||
size="small"
|
||||
v-model="value"
|
||||
:options="options"
|
||||
@change="handleChange"></el-cascader>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="component" v-for="i in components">
|
||||
<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"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import EditEl1 from "@/components/editEl/editEl1.vue";
|
||||
import EditEl2 from "@/components/editEl/editEl2.vue";
|
||||
import EditEl3 from "@/components/editEl/editEl3.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditEl1,
|
||||
EditEl2,
|
||||
EditEl3,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
a: '1',
|
||||
value: [],
|
||||
options: [
|
||||
{
|
||||
value: 'index',
|
||||
label: '首页',
|
||||
},
|
||||
{
|
||||
value: 'guhw',
|
||||
label: '关于海威',
|
||||
children: [
|
||||
{
|
||||
value: 'gsgk',
|
||||
label: '公司概况',
|
||||
},
|
||||
{
|
||||
value: 'ryzz',
|
||||
label: '荣誉资质',
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
components: [
|
||||
{
|
||||
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',
|
||||
image: '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'
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
console.log(val)
|
||||
},
|
||||
edit(key, e) {
|
||||
this[key] = e.target.innerText
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.top {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #fff;
|
||||
box-shadow: 0 6px 4px -4px rgba(0, 0, 0, 0.2);
|
||||
text-align: left;
|
||||
|
||||
.title {
|
||||
line-height: 50px;
|
||||
margin-left: 12px;
|
||||
display: inline-block;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 90%;
|
||||
text-align: left;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.component {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue