|
@@ -1,25 +1,20 @@
|
|
<template>
|
|
<template>
|
|
<div>
|
|
<div>
|
|
|
|
+
|
|
<div class="medias">
|
|
<div class="medias">
|
|
- <div class="btn-push">
|
|
|
|
- <span v-if="!selected.icon">选择场景</span>
|
|
|
|
- <div class="scene-con" v-else>
|
|
|
|
- <i class="iconfont iconedit_type_3d"
|
|
|
|
- :class="{'iconedit_type_panorama':selected.type!=='4dkk'}"></i>
|
|
|
|
- <img class="icon" :src="selected.icon||$thumb" alt="">
|
|
|
|
- <span class="shenglve">{{selected.sceneTitle||'名字'}}</span>
|
|
|
|
- <i @click="del" class="iconfont iconedit_case_delete"></i>
|
|
|
|
|
|
+ <div class="btn-push">
|
|
|
|
+ <span v-if="!selected.icon">选择场景</span>
|
|
|
|
+ <div class="scene-con" v-else>
|
|
|
|
+ <i class="iconfont iconedit_type_3d" :class="{'iconedit_type_panorama':selected.type!=='4dkk'}"></i>
|
|
|
|
+ <img class="icon" :src="selected.icon||$thumb" alt="">
|
|
|
|
+ <span class="shenglve">{{selected.sceneTitle||'名字'}}</span>
|
|
|
|
+ <i @click="del" class="iconfont iconedit_case_delete"></i>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
- <button class="ui-button submit" @click="showScene = true">选择场景</button>
|
|
|
|
- <div class="dialog" style="z-index: 2000" v-if="showScene">
|
|
|
|
- <Select
|
|
|
|
- @cancle="showScene = false"
|
|
|
|
- :selected='selected'
|
|
|
|
- :title="'选择素材'"
|
|
|
|
- @submit="handleSelect"
|
|
|
|
- >
|
|
|
|
|
|
+ <button class="ui-button submit" @click="showScene = true">选择场景</button>
|
|
|
|
+ <div class="dialog" style="z-index: 2000" v-if="showScene">
|
|
|
|
+ <Select @cancle="showScene = false" :selected='selected' :title="'选择素材'" @submit="handleSelect">
|
|
</Select>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -51,50 +46,82 @@ export default {
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
-<style lang="less" src="./style.less"></style>
|
|
|
|
-
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
-.ui-button{
|
|
|
|
- width: 100%;
|
|
|
|
- margin-top: 10px;
|
|
|
|
-}
|
|
|
|
-.medias{
|
|
|
|
|
|
+.medias {
|
|
|
|
+ height: 105px;
|
|
|
|
+ width: 210px;
|
|
|
|
+ position: relative;
|
|
|
|
+ background: #161A1A;
|
|
|
|
+ border: 1px solid #555A5A;
|
|
|
|
+ overflow: hidden;
|
|
height: 122px;
|
|
height: 122px;
|
|
cursor: auto;
|
|
cursor: auto;
|
|
|
|
+ .btn-push {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 50%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ >span {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 50%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
|
+ }
|
|
|
|
+ .scene-con {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ padding: 10px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ position: relative;
|
|
|
|
+ .iconfont{
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 18px;
|
|
|
|
+ top: 18px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
|
+ border-radius: 2px;
|
|
|
|
+ padding: 8px;
|
|
|
|
+ }
|
|
|
|
+ .icon{
|
|
|
|
+ width: 102px;
|
|
|
|
+ height: 102px;
|
|
|
|
+ }
|
|
|
|
+ >span{
|
|
|
|
+ flex: 1;
|
|
|
|
+ text-align: left;
|
|
|
|
+ padding-left: 10px;
|
|
|
|
+ white-space: break-spaces;
|
|
|
|
+ }
|
|
|
|
+ .iconedit_case_delete{
|
|
|
|
+ left: auto;
|
|
|
|
+ top: auto;
|
|
|
|
+ right: 10px;
|
|
|
|
+ bottom: 10px;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
-.scene-con{
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- padding: 10px;
|
|
|
|
|
|
+
|
|
|
|
+.dialog {
|
|
|
|
+ position: fixed;
|
|
|
|
+ z-index: 30;
|
|
|
|
+ left: 0;
|
|
|
|
+ top: 0;
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
- position: relative;
|
|
|
|
- .iconfont{
|
|
|
|
- position: absolute;
|
|
|
|
- left: 18px;
|
|
|
|
- top: 18px;
|
|
|
|
- color: #fff;
|
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
|
- border-radius: 2px;
|
|
|
|
- padding: 8px;
|
|
|
|
- }
|
|
|
|
- .icon{
|
|
|
|
- width: 102px;
|
|
|
|
- height: 102px;
|
|
|
|
- }
|
|
|
|
- >span{
|
|
|
|
- flex: 1;
|
|
|
|
- text-align: left;
|
|
|
|
- padding-left: 10px;
|
|
|
|
- white-space: break-spaces;
|
|
|
|
- }
|
|
|
|
- .iconedit_case_delete{
|
|
|
|
- left: auto;
|
|
|
|
- top: auto;
|
|
|
|
- right: 10px;
|
|
|
|
- bottom: 10px;
|
|
|
|
- border-radius: 50%;
|
|
|
|
- cursor: pointer;
|
|
|
|
- }
|
|
|
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+.ui-button{
|
|
|
|
+ width: 100%;
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+}
|
|
|
|
+
|
|
</style>
|
|
</style>
|