Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 4483391a by hank
Options

preview

parent 1f875293
Showing with 274 additions and 6 deletions
public/template.html
......@@ -62,6 +62,7 @@
background: linear-gradient(to right, #32295E, #5277AB);
height: 450px;
width: 800px;
margin: 0 auto;
color: white;
box-sizing: border-box;
}
......@@ -131,6 +132,18 @@
height: 32px;
}
</style>
<script>
function setZoom() {
var unit = 800;
var unit2 = 450;
var width = window.innerWidth
var height = window.innerHeight
var zoom = height/450
document.documentElement.style.zoom = zoom
}
setZoom()
window.addEventListener('resize',setZoom, false)
</script>
</head>
<body>
......
src/router/index.js
......@@ -9,6 +9,7 @@ import Groups from '@/views/groups/index.vue'
import DeviceDetail from '@/views/device/detail.vue'
import Tempaltes from '@/views/tempaltes/index.vue'
import TempalteEdit from '@/views/tempaltes/edit.vue'
import TempaltePreview from '@/views/tempaltes/preview.vue'
import TempalteDetail from '@/views/tempaltes/detail.vue'
Vue.use(Router)
......@@ -38,6 +39,15 @@ const router = new Router({
component: About
},
{
path: '/preview',
name: 'preview',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
component: TempaltePreview
},
{
path: '/login',
name: 'Login',
// route level code-splitting
......
src/views/tempaltes/edit.vue
......@@ -8,7 +8,7 @@
<!-- <div class="left-item">
<van-icon name="description" />保存至我的草稿
</div>-->
<div class="left-item">
<div class="left-item" @click="preview">
<van-icon name="eye-o"/>预览
</div>
<div class="left-item" @click="pub">发布</div>
......@@ -23,10 +23,8 @@
class="iframe"
v-if="loaded"
:style="{
height: templateData.height + 'px',
width: templateData.width + 'px'
}"
:src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId"
:src="templateData.frameUrl+'?isPreview=1'"
frameborder="0"
></iframe>
</div>
......@@ -95,8 +93,7 @@ export default {
resourceId: "string",
frameId: "string",
filmId: "",
frameUrl:
"http://visual-clouds.bdideal.com/html/156050648981560a2f35feda34d66afe6765526670da2.html",
frameUrl: "",
listData: []
},
editObj: {},
......@@ -235,6 +232,9 @@ export default {
}
},
pub() {
this.message({
type: 'getList'
})
if (!this.name) {
this.$toast('请填写方案名称')
} else {
......@@ -251,6 +251,19 @@ export default {
}, 1000)
},
preview() {
this.message({
type: 'getList'
})
setTimeout(() => {
window.localStorage.setItem('preview', JSON.stringify(this.templateData))
let routeData = this.$router.resolve({
name: "preview",
params: this.$route.query
});
window.open(routeData.href, "_blank");
}, 1000)
},
toggle(index) {
this.$refs.checkboxes[index].toggle();
}
......@@ -309,6 +322,9 @@ export default {
}
.iframe {
padding-top: 100px;
width: 97%;
height: 500px;
}
}
.content-right {
......
src/views/tempaltes/preview.vue 0 → 100644
<template>
<div class="edit-container">
<div class="content">
<div class="content-left">
<iframe
class="iframe"
v-show="loaded"
:src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId"
frameborder="0"
></iframe>
</div>
</div>
</div>
</template>
<script>
// import NavBar from "@/views/layout/navbar";
export default {
data() {
return {
templateData: {
height: 450,
width: 800,
resourceId: "string",
frameId: "string",
filmId: "",
frameUrl:
"http://visual-clouds.bdideal.com/html/156050648981560a2f35feda34d66afe6765526670da2.html",
listData: []
},
editObj: {},
editIndex: "",
isEdited: false,
mode: "",
loaded: false,
show: false
};
},
created() {
if (this.$route.query.filmId) {
this.mode = "film";
this.getFilmDetail();
}
if (this.$route.query.templateId) {
this.mode = "template";
this.getTempalteDetail();
}
this.getData()
},
mounted() {
var vm = this
window.onload = function() {
window.frames[0].postMessage(
"getcolor",
"http://visual-clouds.bdideal.com"
);
vm.message({
type: 'setList',
list: vm.templateData.listData
})
};
},
methods: {
message(data) {
window.frames[0].postMessage(data, "http://visual-clouds.bdideal.com");
},
getData() {
this.loaded = true
this.templateData = JSON.parse(window.localStorage.getItem('preview'))
}
},
components: {
// NavBar
}
};
</script>
<style lang="scss" scoped>
.edit-container {
.content {
display: flex;
justify-content: space-between;
.content-left {
flex: 1;
background: #eeeeee;
height: calc(100vh - 45px);
box-sizing: border-box;
text-align: left;
.content-left-top {
display: flex;
font-size: 21px;
color: #333333;
justify-content: space-between;
.top-left {
display: flex;
.left-item {
display: flex;
align-items: center;
margin-right: 68px;
.van-icon {
margin-right: 5px;
}
}
}
.top-right {
line-height: 1;
.im {
color: #fe1515;
vertical-align: bottom;
}
input {
border-left: none;
border-top: none;
border-right: none;
padding-left: 5px;
border-bottom: 1px solid #dddddd;
outline: none;
width: 195px;
background: none;
}
}
}
.iframe {
width: 100% ;
height: 100vh;
}
}
.content-right {
width: 300px;
text-align: left;
padding: 17px 0 0 20px;
font-size: 20px;
background: #d0d0d0;
height: calc(100vh - 96px);
box-sizing: border-box;
overflow: auto;
.edit-area {
input {
margin-top: 17px;
display: block;
height: 39px;
padding-left: 8px;
}
}
}
}
.pub-container {
height: 401px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px -9px 51px 0px rgba(0, 0, 0, 0.14);
padding-left: 75px;
box-sizing: border-box;
.top {
display: flex;
justify-content: space-between;
color: rgba(51, 51, 51, 0.8);
font-size: 24px;
display: flex;
align-items: center;
.left {
padding-top: 20px;
span {
}
.active {
color: #333333;
font-weight: bold;
font-size: 26px;
}
.diver {
padding: 0 40px;
vertical-align: text-top;
}
.tip {
font-size: 21px;
padding-left: 65px;
}
}
.right {
padding-right: 37px;
padding-top: 28px;
.btn {
font-size: 24px;
color: white;
padding: 14.5px 39px;
background: linear-gradient(
91deg,
rgba(110, 140, 249, 1) 0%,
rgba(94, 161, 251, 1) 100%
);
border-radius: 3px;
}
}
}
.list {
padding-top: 60px;
.bottom-item {
border: 2px solid #b5b5b5;
border-radius: 3px;
width: 210px;
height: 210px;
.van-checkbox {
justify-content: center;
padding-top: 10px;
}
.img {
padding-top: 15px;
padding-bottom: 15px;
img {
width:165px;
height:93px;
}
}
.name {
font-size: 20px;
color: #333333;
font-weight: bold;
line-height: 1;
}
.id {
padding-top: 5px;
font-size: 15px;
color:rgba(51,51,51,0.8);
}
}
}
}
}
</style>
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