添加组件
suixy
2 months ago
parent
0dca917d8c
commit
ebb73dd7a7
@ -0,0 +1,111 @@
|
|||||||
|
<template>
|
||||||
|
<div class="param-container" style="padding: 5vw 10vw;background-color: #0001">
|
||||||
|
<h2 class="title1" style="line-height: 40px">产品参数</h2>
|
||||||
|
|
||||||
|
<div class="paramsTable" v-for="(param, index) in data.params" :key="index" style="position: relative;">
|
||||||
|
<i class="del el-icon-circle-close" @click="data.params.splice(index, 1);"></i>
|
||||||
|
<div class="th">
|
||||||
|
<div class="th1" contenteditable="true" @blur="edit3('title',index,$event)">{{ param.title }}</div>
|
||||||
|
<div class="th2">参数值</div>
|
||||||
|
</div>
|
||||||
|
<div class="td">
|
||||||
|
<div v-for="(item, idx) in param.list" :key="idx" style="position: relative;">
|
||||||
|
<i class="del el-icon-circle-close" @click="data.params[index].list.splice(idx, 1);"></i>
|
||||||
|
<div class="td1" contenteditable="true" @blur="edit4('name',index,idx,$event)">{{ item.name }}</div>
|
||||||
|
<div class="td2" contenteditable="true" @blur="edit4('value',index,idx,$event)">{{ item.value }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="td">
|
||||||
|
<div class="td1"
|
||||||
|
@click="data.params[index].list.push({name:'',value:''})">
|
||||||
|
<i class="el-icon-circle-plus" style="font-size: 1vw; line-height: 60px"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="td"
|
||||||
|
@click="data.params.push({title:'',list:[]})">
|
||||||
|
<i class="el-icon-circle-plus" style="font-size: 1vw; line-height: 60px"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import UploadEl from "@/components/editEl/uploadEl.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'PlatformFeatures',
|
||||||
|
props: ['data'],
|
||||||
|
components: {UploadEl},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
edit3(key, index, e) {
|
||||||
|
this.$props.data.params[index][key] = e.target.innerText
|
||||||
|
},
|
||||||
|
edit4(key, index, index1, e) {
|
||||||
|
this.$props.data.params[index].list[index1][key] = e.target.innerText
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import "~@/style.less";
|
||||||
|
|
||||||
|
.paramsTable {
|
||||||
|
.th {
|
||||||
|
background-color: #DBDFE7;
|
||||||
|
line-height: 3vw;
|
||||||
|
font-size: 1.3vw;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
.th1 {
|
||||||
|
width: calc(30% - 2vw - 2px);
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: 2vw;
|
||||||
|
border-right: 1px solid #0001
|
||||||
|
}
|
||||||
|
|
||||||
|
.th2 {
|
||||||
|
width: calc(70% - 2vw - 2px);
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: 2vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.td {
|
||||||
|
line-height: 3vw;
|
||||||
|
font-size: 0.9vw;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
.td1 {
|
||||||
|
background-color: #F2F4F8;
|
||||||
|
width: calc(30% - 2vw - 2px);
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: 2vw;
|
||||||
|
border: 1px solid #0001
|
||||||
|
}
|
||||||
|
|
||||||
|
.td2 {
|
||||||
|
background-color: #EEEEEE;
|
||||||
|
width: calc(70% - 2vw - 2px);
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: 2vw;
|
||||||
|
border: 1px solid #0001
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.del {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
<template>
|
||||||
|
<div class="param-container" style="padding: 5vw 10vw;background-color: #0001">
|
||||||
|
<h2 class="title1" style="line-height: 40px">
|
||||||
|
<span>
|
||||||
|
产品参数
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="paramsTable" v-for="(param, index) in data.params" :key="index" style="position: relative;">
|
||||||
|
<div class="th">
|
||||||
|
<div class="th1">{{ param.title }}</div>
|
||||||
|
<div class="th2" v-for="(i,k) in param.columns"
|
||||||
|
:style="{width: `calc((70% - 2vw - 2px )/ ${(param.columns.length || 1 ) } )`,paddingLeft:` ${2 / ((param.columns.length || 1) )}vw`}">
|
||||||
|
{{ i }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="td">
|
||||||
|
<div v-for="(item, idx) in param.rows" :key="idx" style="position: relative;display: flex">
|
||||||
|
<div
|
||||||
|
:style="{position:'absolute',left:'100%',width: `300px`,lineHeight:'2vw',paddingLeft:` ${2 / ((param.columns.length || 1) )}vw`}"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="td1">{{ item.name }}</div>
|
||||||
|
<div class="td2" v-if="!item.merge"
|
||||||
|
:style="{width: `calc((70% - 2vw - 4px )/ ${item.values.length || 1 } )`,paddingLeft:` ${2 / (item.values.length || 1)}vw`}"
|
||||||
|
v-for="(i,k) in item.values">{{
|
||||||
|
i
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="td2" v-if="item.merge"
|
||||||
|
:style="{width: `calc(70% - 2vw - 4px ) `,paddingLeft:` 2vw`}"
|
||||||
|
>{{
|
||||||
|
item.values[0]
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import UploadEl from "@/components/editEl/uploadEl.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'PlatformFeatures',
|
||||||
|
props: ['data'],
|
||||||
|
components: {UploadEl},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import "~@/style.less";
|
||||||
|
|
||||||
|
.paramsTable {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.th {
|
||||||
|
background-color: #DBDFE7;
|
||||||
|
line-height: 3vw;
|
||||||
|
font-size: 1.3vw;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
.th1 {
|
||||||
|
width: calc(30% - 2vw - 2px);
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: 2vw;
|
||||||
|
border-right: 1px solid #0001
|
||||||
|
}
|
||||||
|
|
||||||
|
.th2 {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.td {
|
||||||
|
line-height: 3vw;
|
||||||
|
font-size: 0.9vw;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
.td1 {
|
||||||
|
background-color: #F2F4F8;
|
||||||
|
display: inline-block;
|
||||||
|
border: 1px solid #0001;
|
||||||
|
width: calc(30% - 2vw - 2px);
|
||||||
|
padding-left: 2vw;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td2 {
|
||||||
|
background-color: #EEEEEE;
|
||||||
|
display: inline-block;
|
||||||
|
border: 1px solid #0001;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.del {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue