添加组件
suixy
1 month 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