Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit f979ca90 by hank
Options

修改编页面UI

parent 1339cec9
Showing with 115 additions and 42 deletions
src/views/tempaltes/editMenu.vue
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
alt alt
/> />
<div class="checkbox" v-if="item.enableDisplay"> <div class="checkbox" v-if="item.enableDisplay">
<label > <label>
<input <input
type="checkbox" type="checkbox"
style="display: inline;" style="display: inline;"
...@@ -34,44 +34,42 @@ ...@@ -34,44 +34,42 @@
/>是否隐藏 />是否隐藏
</label> </label>
</div> </div>
<input <div>
v-if="item.type === 'text'" <input
class="edit-input" v-if="item.type === 'text'"
type="text" class="edit-input"
v-model="schemaData[item.dataKey].value" type="text"
@keyup="valueChange2()" v-model="schemaData[item.dataKey].value"
/> @keyup="valueChange2()"
<br /> />
</div>
<div class="list-container" v-if="item.type === 'list'"> <div class="list-container" v-if="item.type === 'list'">
<div <div
class="create-btn-container"
v-if="!item.listLimit || (item.listLimit && schemaData[item.dataKey].length < !item.listLimit)"
>
<van-button class="create-btn" type="info" @click="addItem(item)">新增</van-button>
</div>
<div
class="list-item" class="list-item"
v-for="(item2, index2) in schemaData[item.dataKey]" v-for="(item2, index2) in schemaData[item.dataKey]"
:key="index2" :key="index2"
> >
<div class="btn-con"> <div class="btn-con">
<span>序号{{index2}}</span> <span class="index">序号{{index2}}</span>
<span class="del-btn" @click="deleteItem(index2, schemaData[item.dataKey])">删除</span>
</div> </div>
<div class="list-item-list" v-for="(item3, index3) in item2" :key="index3"> <div class="list-item-list" v-for="(item3, index3) in item2" :key="index3">
<div v-if="(index3 != 'schemaIndex' && index3 != 'index')"> <div v-if="(index3 != 'schemaIndex' && index3 != 'index')">
<input <input
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'text'" v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'text'"
:placeholder="item.modelSchema[isSchemaIndex(item2)][index3].description" :placeholder="item.modelSchema[isSchemaIndex(item2)][index3].description"
class="edit-input" class="edit-input edit-input-list-item"
type="text" type="text"
v-model="item2[index3]" v-model="item2[index3]"
@keyup="valueChange2()" @keyup="valueChange2()"
/> />
<div> <div>
<img
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'image'"
:src="getHostUrl(item2[index3])"
class="edit-input"
/>
<video
:src="getHostUrl(item2[index3])"
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'video'"
></video>
<van-uploader <van-uploader
result-type="dataUrl" result-type="dataUrl"
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type == 'image' || item.modelSchema[isSchemaIndex(item2)][index3].type == 'video'" v-if="item.modelSchema[isSchemaIndex(item2)][index3].type == 'image' || item.modelSchema[isSchemaIndex(item2)][index3].type == 'video'"
...@@ -79,17 +77,27 @@ ...@@ -79,17 +77,27 @@
@click.native="uploadListItem(item.dataKey,index2, index3)" @click.native="uploadListItem(item.dataKey,index2, index3)"
:after-read="uploadAfter" :after-read="uploadAfter"
> >
<van-button icon="photo" type="info">上传</van-button> <!-- <van-button type="info">上传</van-button> -->
<img
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'image'"
:src="getHostUrl(item2[index3])"
class="edit-input edit-input-image"
/>
<video
class="edit-input-video"
:src="getHostUrl(item2[index3])"
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'video'"
></video>
</van-uploader> </van-uploader>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="list-item-delete">
<div <span @click="deleteItem(index2, schemaData[item.dataKey])">
class="create-btn-container" <img src="../../assets/img/delete-icon.png" class="list-item-delete-icon" alt />
v-if="!item.listLimit || (item.listLimit && schemaData[item.dataKey].length < !item.listLimit)" <span class="del-btn">删除</span>
> </span>
<van-button class="create-btn" type="info" @click="addItem(item)">添加</van-button> </div>
</div> </div>
</div> </div>
<van-uploader <van-uploader
...@@ -99,14 +107,22 @@ ...@@ -99,14 +107,22 @@
@click.native="uploadItem(item.dataKey)" @click.native="uploadItem(item.dataKey)"
:after-read="uploadAfter" :after-read="uploadAfter"
> >
<van-button icon="photo" type="info">上传</van-button> <van-button type="info">上传</van-button>
<br /> <br />
</van-uploader> </van-uploader>
<van-button type="info" v-if="item.selectList && item.type !== 'list'" @click="setSelectData(item, index)">选择默认数据</van-button> <van-button
type="info"
v-if="item.selectList && item.type !== 'list'"
@click="setSelectData(item, index)"
>选择默认数据</van-button>
</div> </div>
</van-collapse-item> </van-collapse-item>
</van-collapse> </van-collapse>
<selectDataCom :selectList="selectData" @changeSelcetData="changeSelcetData" v-if="selectData.show"></selectDataCom> <selectDataCom
:selectList="selectData"
@changeSelcetData="changeSelcetData"
v-if="selectData.show"
></selectDataCom>
</div> </div>
</template> </template>
...@@ -225,7 +241,7 @@ export default { ...@@ -225,7 +241,7 @@ export default {
this.$emit("setList", this.schemaData); this.$emit("setList", this.schemaData);
}, },
setSelectData(item, index) { setSelectData(item, index) {
const myItem = JSON.parse(JSON.stringify(item)) const myItem = JSON.parse(JSON.stringify(item));
this.selectData.show = true; this.selectData.show = true;
this.selectData.item = myItem; this.selectData.item = myItem;
...@@ -236,13 +252,13 @@ export default { ...@@ -236,13 +252,13 @@ export default {
"http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg", "http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg",
"http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg" "http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg"
]; ];
console.log(this.selectData) console.log(this.selectData);
}, },
changeSelcetData(data) { changeSelcetData(data) {
console.log(data); console.log(data);
this.dataKey = data.item.dataKey this.dataKey = data.item.dataKey;
this.setSchemaData(data.val) this.setSchemaData(data.val);
this.selectData.show = false this.selectData.show = false;
} }
} }
}; };
...@@ -251,21 +267,58 @@ export default { ...@@ -251,21 +267,58 @@ export default {
.image { .image {
height: 50px; height: 50px;
} }
.van-uploader {
.van-button {
height: 0.8rem;
line-height: 0.8rem;
}
}
.list-container { .list-container {
.list-item { .list-item {
// padding:
position: relative;
.index { .index {
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(0, 0, 0, 1);
// line-height: 18px;
} }
.btn-con { .btn-con {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.del-btn {
font-size: 18px; .edit-input-list-item {
margin: 10px 0;
}
.edit-input-image {
width: auto;
height: 100px;
max-height: 100px;
max-width: 100%;
// display: block;
} }
padding: 5px; .list-item-delete {
text-align: right;
&-icon {
height: 16px;
width: 16px;
vertical-align: middle;
margin-right: 5px;
}
.del-btn {
font-size: 14px;
color: rgba(250, 61, 34, 1);
vertical-align: middle;
}
}
padding: 10px;
margin-right: 10px; margin-right: 10px;
border: 1px solid #dddddd; border: 1px solid #dddddd;
box-sizing: border-box; box-sizing: border-box;
border-radius: 8px;
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
...@@ -306,12 +359,32 @@ input { ...@@ -306,12 +359,32 @@ input {
} }
} }
} }
.create-btn-container {
margin-bottom: 25px;
.create-btn {
padding-left: 17px;
padding-right: 17px;
// width: 197px;
line-height: 34px;
box-sizing: border-box;
border: none;
font-size: 16px;
height: 34px;
background: linear-gradient(
266deg,
rgba(255, 171, 32, 1) 0%,
rgba(255, 114, 14, 1) 100%
);
box-shadow: 0px 2px 8px 0px rgba(255, 167, 31, 0.31);
border-radius: 22px;
}
}
.edit-input { .edit-input {
width: 97%; width: 97%;
background: #f5f5f5; background: #f5f5f5;
border-radius: 6px; border-radius: 6px;
font-size: 14px; font-size: 14px;
color:rgba(51,51,51,1); color: rgba(51, 51, 51, 1);
margin-top: 0; margin-top: 0;
} }
</style> </style>
......
src/views/tempaltes/editMore.vue
...@@ -888,14 +888,14 @@ export default { ...@@ -888,14 +888,14 @@ export default {
} }
} }
.iframe { .iframe {
width: 343px !important; width: 343px;
margin: 0 auto; margin: 0 auto;
height: 193px; height: 193px;
display: block; display: block;
box-shadow: 0px 14px 27px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 14px 27px 0px rgba(0, 0, 0, 0.16);
} }
.viframe { .viframe {
width: 193 !important; width: 193px !important;
margin: 0 auto; margin: 0 auto;
height: 343px; height: 343px;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment