Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 1f875293 by hank
Options

周边功能 影片修改

parent 503ad61a
Showing with 683 additions and 55 deletions
public/template.html
...@@ -6,31 +6,39 @@ ...@@ -6,31 +6,39 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>测试模板</title> <title>测试模板</title>
<style> <style>
html,body { html,
body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@keyframes border { @keyframes border {
0% { 0% {
opacity: 1; opacity: 1;
} }
25% { 25% {
opacity: 0.75; opacity: 0.75;
} }
50% { 50% {
opacity: 0.5; opacity: 0.5;
} }
100% { 100% {
opacity: 0.25; opacity: 0.25;
} }
} }
.isEdit { .isEdit {
position: relative; position: relative;
} }
.isEdit::before{
.isEdit::before {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -40,25 +48,31 @@ ...@@ -40,25 +48,31 @@
box-sizing: border-box; box-sizing: border-box;
z-index: 2; z-index: 2;
border: 1px dashed yellowgreen; border: 1px dashed yellowgreen;
border: 1px dashed white;
} }
.isEdited::before { .isEdited::before {
border: 1px dashed yellowgreen;
animation: border 2s ease-in-out infinite; animation: border 2s ease-in-out infinite;
} }
.container { .container {
padding: 0 20px; padding: 0 20px;
background: linear-gradient(to right,#32295E, #5277AB); background: linear-gradient(to right, #32295E, #5277AB);
height: 450px; height: 450px;
width: 800px; width: 800px;
color: white; color: white;
box-sizing: border-box; box-sizing: border-box;
} }
.title { .title {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
padding: 0 20px; padding: 0 20px;
border-bottom: #eeeeee 2px solid; border-bottom: #eeeeee 2px solid;
} }
.name { .name {
padding: 0 20px; padding: 0 20px;
border-bottom: #eeeeee 2px solid; border-bottom: #eeeeee 2px solid;
...@@ -68,26 +82,28 @@ ...@@ -68,26 +82,28 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.bottom { .bottom {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-top: 50px; padding-top: 50px;
} }
.bottom img { .bottom img {
height: 200px; height: 200px;
width: 250px; width: 250px;
} }
.bottom-left {
} .bottom-left {}
.bottom-right {
.bottom-right {}
}
.bottom-right .bottom-right-item { .bottom-right .bottom-right-item {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.bottom-right .item-name { .bottom-right .item-name {
display: inline-block; display: inline-block;
height: 30px; height: 30px;
...@@ -95,6 +111,7 @@ ...@@ -95,6 +111,7 @@
padding: 0 5px; padding: 0 5px;
width: 100px; width: 100px;
} }
.bottom-right .item-des { .bottom-right .item-des {
display: inline-block; display: inline-block;
height: 30px; height: 30px;
...@@ -103,85 +120,138 @@ ...@@ -103,85 +120,138 @@
width: 200px; width: 200px;
/* overflow: hidden; */ /* overflow: hidden; */
} }
.h2-right { .h2-right {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.right-icon { .right-icon {
margin-left: 10px; margin-left: 10px;
height: 32px; height: 32px;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container" id="myApp"> <div class="container" id="myApp">
<div class="title "> <div class="title ">
<span class="">{{date}}</span> <span class="">{{date}}</span>
</div> </div>
<h2 class="name" class="h2"> <h2 class="name" class="h2">
<span class="isEdit" :class="isEdited(0)" @click="edit(0)">{{getValue(0)}}</span> <span :class="isEdited(0) + ' ' + isEdit()" @click="edit(0)">{{getValue(0)}}</span>
<div class="h2-right"> <div class="h2-right">
<span class="isEdit" :class="isEdited(1)" @click="edit(1)">{{getValue(1)}}</span> <span :class="isEdited(1) + ' ' + isEdit()" @click="edit(1)">{{getValue(1)}}</span>
<img :src="img" class="isEdit right-icon" ></img> <img :src="img" class="isEdit right-icon"></img>
</div> </div>
<!-- <img src="" alt=""> --> <!-- <img src="" alt=""> -->
</h2> </h2>
<div class="bottom"> <div class="bottom">
<img class="isEdit bottom-left" @click="edit(2)" :class="isEdited(2)" :src="getValue(2)" alt=""> <img class=" bottom-left" @click="edit(2)" :class="isEdited(2) + ' ' + isEdit()" :src="getValue(2)" alt="">
<div class="bottom-right"> <div class="bottom-right">
<div class="bottom-right-item"> <div class="bottom-right-item">
<span class="isEdit item-name" :class="isEdited(3)" @click="edit(3)">{{getValue(3)}}</span> <span class="item-name" :class="isEdited(3) + ' ' + isEdit()" @click="edit(3)">{{getValue(3)}}</span>
<span class="isEdit item-des" :class="isEdited(4)" @click="edit(4)">{{getValue(4)}}</span> <span class="item-des" :class="isEdited(4) + ' ' + isEdit()" @click="edit(4)">{{getValue(4)}}</span>
</div> </div>
<div class="bottom-right-item"> <div class="bottom-right-item">
<span class="isEdit item-name" :class="isEdited(5)" @click="edit(5)">{{getValue(5)}}</span> <span class="item-name" :class="isEdited(5) + ' ' + isEdit()" @click="edit(5)">{{getValue(5)}}</span>
<span class="isEdit item-des" :class="isEdited(6)" @click="edit(6)">{{getValue(6)}}</span> <span class="item-des" :class="isEdited(6) + ' ' + isEdit()" @click="edit(6)">{{getValue(6)}}</span>
</div>
<div class="bottom-right-item">
<span class="isEdit item-name" :class="isEdited(7)" @click="edit(7)">{{getValue(7)}}</span>
<span class="isEdit item-des" :class="isEdited(8)" @click="edit(8)">{{getValue(8)}}</span>
</div>
<div class="bottom-right-item">
<span class="isEdit item-name" :class="isEdited(9)" @click="edit(9)">{{getValue(9)}}</span>
<span class="isEdit item-des" :class="isEdited(10)" @click="edit(10)">{{getValue(10)}}</span>
</div>
</div> </div>
<div class="bottom-right-item">
<span class="item-name" :class="isEdited(7) + ' ' + isEdit()" @click="edit(7)">{{getValue(7)}}</span>
<span class="item-des" :class="isEdited(8) + ' ' + isEdit()" @click="edit(8)">{{getValue(8)}}</span>
</div>
<div class="bottom-right-item">
<span class="item-name" :class="isEdited(9) + ' ' + isEdit()" @click="edit(9)">{{getValue(9)}}</span>
<span class="item-des" :class="isEdited(10) + ' ' + isEdit()" @click="edit(10)">{{getValue(10)}}</span>
</div>
</div>
</div> </div>
</div> </div>
</body> </body>
<script> <script>
function getQuery(key) {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf('?') != -1) {
var str = url.substr(1);
var strs = str.split('&');
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
}
}
if (key) {
return theRequest[key];
} else {
return theRequest;
}
}
// http://visual-clouds.bdideal.com/html/156050648981560a2f35feda34d66afe6765526670da2.html
// http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg
var myApp = new Vue({ var myApp = new Vue({
el: "#myApp", el: "#myApp",
computed() { computed() {
}, },
methods: { methods: {
getDefaulted() { getDefaulted() {
this.list = this.list.map(function(item){ this.list = this.list.map(function (item) {
return item = Object.assign(item, item.default) return item = Object.assign(item, item.default)
}) })
}, },
message(data) {
window.parent.postMessage(data, '*')
},
edit(index) { edit(index) {
this.currentIndex = index; this.currentIndex = index;
var item = this.list[index] var item = this.list[index]
console.log(this.currentIndex) console.log(this.currentIndex)
window.parent.postMessage({ this.message({
type: 'edit', type: 'edit',
item,index item, index
}, '*')
},
getList() {
this.message({
type: 'getList',
list: this.list
}, '*') }, '*')
}, },
getValue(index) { getValue(index) {
return this.list[index]? this.list[index]['value'] : '' return this.list[index] ? this.list[index]['value'] : ''
}, },
isEdited(index) { isEdited(index) {
return this.isEditMode && this.currentIndex === index ? 'isEdited': '' return this.isEditMode && this.currentIndex === index ? 'isEdited' : ''
},
isEdit(index) {
return this.isEditMode ? 'isEdit' : ''
} }
}, },
created() { created() {
this.getDefaulted() var vm = this
console.log(getQuery('isEdit'))
if (getQuery('isEdit')) {
this.isEditMode = true
} else {
this.isEditMode = false
}
if(getQuery('filmId')) {
$.get('http://39.105.231.218:8090/myequipment/get/film/info/' + getQuery('filmId'), function (result) {
console.log(result)
vm.list = JSON.parse(result.filmData)
vm.filmId = result.filmId
})
} else {
vm.getDefaulted()
$.get("http://visual-clouds.bdideal.com/html/1560852648596e73433f32fa641d0a41e26ffaf88f42c.txt", function (result) {
console.log(result)
vm.list = JSON.parse(result)
vm.getDefaulted()
})
}
}, },
data: { data: {
date: new Date().toLocaleString(), date: new Date().toLocaleString(),
...@@ -296,13 +366,19 @@ ...@@ -296,13 +366,19 @@
if (e.source != window.parent) return; if (e.source != window.parent) return;
console.log(e.data, '客户端发来的消息'); console.log(e.data, '客户端发来的消息');
console.log(typeof e.data === "object" && e.data['type'] == 'setData') console.log(typeof e.data === "object" && e.data['type'] == 'setData')
if( typeof e.data === "object" && e.data['type'] == 'setData') { if (typeof e.data === "object" && e.data['type'] == 'setData') {
console.log(myApp.list[e.data.index]) console.log(myApp.list[e.data.index])
myApp.list[e.data.index].value = e.data['value'] myApp.list[e.data.index].value = e.data['value']
} }
if( typeof e.data === "object" && e.data['type'] == 'cancelEdit') { if (typeof e.data === "object" && e.data['type'] == 'cancelEdit') {
myApp.currentIndex = '' myApp.currentIndex = ''
} }
if (typeof e.data === "object" && e.data['type'] == 'setList') {
myApp.list = e.data.list
}
if (typeof e.data === "object" && e.data['type'] == 'getList') {
myApp.getList()
}
// window.parent.postMessage(color, '*'); // window.parent.postMessage(color, '*');
}, false) }, false)
......
src/router/index.js
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import Home from '@/views/Home.vue' // import Home from '@/views/Home.vue'
import Login from '@/views/login/index.vue'
import User from '@/views/user/index.vue'
import About from '@/views/user/about.vue'
import Device from '@/views/device/index.vue' import Device from '@/views/device/index.vue'
import Groups from '@/views/groups/index.vue'
import DeviceDetail from '@/views/device/detail.vue' import DeviceDetail from '@/views/device/detail.vue'
import Tempaltes from '@/views/tempaltes/index.vue' import Tempaltes from '@/views/tempaltes/index.vue'
import TempalteEdit from '@/views/tempaltes/edit.vue' import TempalteEdit from '@/views/tempaltes/edit.vue'
...@@ -18,10 +22,10 @@ const router = new Router({ ...@@ -18,10 +22,10 @@ const router = new Router({
{ path: '/tempaltes', name: 'Tempaltes', component: Tempaltes, meta: { keepAlive: true } }, { path: '/tempaltes', name: 'Tempaltes', component: Tempaltes, meta: { keepAlive: true } },
{ path: '/tempaltes/edit', name: 'TempaltesEdit', component: TempalteEdit, meta: { keepAlive: true } }, { path: '/tempaltes/edit', name: 'TempaltesEdit', component: TempalteEdit, meta: { keepAlive: true } },
{ path: '/tempaltes/detial', name: 'TempalteDetail', component: TempalteDetail, meta: { keepAlive: false } }, { path: '/tempaltes/detial', name: 'TempalteDetail', component: TempalteDetail, meta: { keepAlive: false } },
{ path: '/devices', name: 'Home', component: Home, meta: { keepAlive: true } }, { path: '/devices', name: 'Groups', component: Groups, meta: { keepAlive: true } },
{ path: '/device', name: 'Device', component: Device, meta: { keepAlive: true } }, { path: '/device', name: 'Device', component: Device, meta: { keepAlive: true } },
{ path: '/device/detail', name: 'DeviceDetail', component: DeviceDetail, meta: { keepAlive: true } }, { path: '/device/detail', name: 'DeviceDetail', component: DeviceDetail, meta: { keepAlive: true } },
{ path: '/user', name: 'Home', component: Home, meta: { keepAlive: true } }, { path: '/user', name: 'Home', component: User, meta: { keepAlive: true } },
] ]
}, },
{ {
...@@ -30,7 +34,16 @@ const router = new Router({ ...@@ -30,7 +34,16 @@ const router = new Router({
// route level code-splitting // route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route // this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue') // component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
component: About
},
{
path: '/login',
name: 'Login',
// 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: Login
} }
] ]
}) })
......
src/views/device/detail.vue
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
<div class="title-tip"> <div class="title-tip">
当前使用模版 当前使用模版
</div> </div>
<div class="add"> <div class="add" @click="addTemplate">
<van-icon name="plus" /> <van-icon name="plus" />
</div> </div>
<swiper :options="swiperOption" <swiper :options="swiperOption"
...@@ -168,6 +168,11 @@ export default { ...@@ -168,6 +168,11 @@ export default {
this.list = res.data.list this.list = res.data.list
}) })
}, },
addTemplate() {
this.$router.push({
path: '/tempaltes'
})
},
deleteFilm(item) { deleteFilm(item) {
deleteFilm(item.filmId).then(res => { deleteFilm(item.filmId).then(res => {
console.log(res.data) console.log(res.data)
......
src/views/groups/des.vue 0 → 100644
<template>
<div class="common-tips">
<div>欢迎进入我的「设备组」，您可以：</div>
<div>
1.创建一个设备组，将多个设备选中添加到组内
</div>
<div>
2.您可以为设备组选定统一模版，编辑完毕后，内容将展示在组内全部设备上;
</div>
<div>
3.您可以解散设备组，组内设备不会被解绑，除非您选择全部解绑项。
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
.common-tips {
color:rgba(51,51,51,0.8);
text-align: left;
font-size: 19px;
line-height: 34px;
position: fixed;
left: 54px;
bottom: 100px;
z-index: -1;
}
</style>
src/views/groups/index.vue 0 → 100644
<template>
<div class="device-container">
<NavBar title="设备组"></NavBar>
<div class="device-list">
<div class="device-item">
<div class="device-item-create">
<van-icon style="font-size: 52px;" name="plus"/>
</div>
<div class="device-title">添加设备组</div>
</div>
<div class="device-item">
<div class="device-item-top">
<div
class="device-item-img"
style="background: url(../../../img/ps/img.png) no-repeat center"
></div>
<div class="device-status">
<div class="device-icon" style="background-image: url(../../../img/ps/box.png) "></div>
<div class="status" @click="delGroup">解散设备组</div>
</div>
</div>
<div class="device-title">设备组A</div>
</div>
</div>
<Des></Des>
</div>
</template>
<script>
import NavBar from "@/views/layout/navbar";
import Des from "./des.vue";
export default {
components: {
NavBar,
Des
},
methods: {
goDetail() {
this.$router.push({
path: "/device/detail",
query: {
clientId: "maxrocky",
clientSecret: "maxrocky"
}
});
},
delGroup() {
this.$dialog
.confirm({
title: "解散设备组",
message: "您确认解散设备组A吗，解散后无法恢复"
})
.then(() => {
// on confirm
})
.catch(() => {
// on cancel
});
}
}
};
</script>
<style lang="scss" scoped>
.device-list {
padding: 0 43px;
display: flex;
flex-wrap: wrap;
.device-item {
width: 296.5px;
min-height: 199.5px;
padding-top: 39px;
margin: 0 24px;
.device-item-create {
font-size: 52px;
height: 251.5px;
text-align: center;
display: flex;
justify-content: center;
// line-height: 251.5px;
align-items: center;
box-sizing: border-box;
color: #848484;
border: 1px solid #848484;
}
.device-item-top {
height: 251.5px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 4.5px 25px 0px rgba(0, 0, 0, 0.14);
.device-item-img {
width: 100%;
height: 167px;
}
}
.device-status {
width: 296.5px;
height: 84.5px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
.device-icon {
width: 68px;
height: 44px;
margin-right: 18px;
background-size: 100%;
}
.status {
color: #28af48;
font-size: 18px;
}
.line {
color: #28af48;
}
.unline {
color: #28af48;
}
}
.device-title {
padding-top: 25px;
font-size: 24px;
color: #333333;
}
}
}
</style>
src/views/layout/index.vue
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
</div> </div>
<van-tabbar route > <van-tabbar route >
<van-tabbar-item replace to="/tempaltes" active icon="home-o">模板库</van-tabbar-item> <van-tabbar-item replace to="/tempaltes" active icon="home-o">模板库</van-tabbar-item>
<van-tabbar-item replace to="/devices" icon="search">设备组</van-tabbar-item> <van-tabbar-item replace to="/devices" icon="cluster-o">设备组</van-tabbar-item>
<van-tabbar-item replace to="/device" icon="friends-o">我的设备</van-tabbar-item> <van-tabbar-item replace to="/device" icon="setting-o">我的设备</van-tabbar-item>
<van-tabbar-item replace to="/user" icon="setting-o">个人中心</van-tabbar-item> <van-tabbar-item replace to="/user" icon="friends-o">个人中心</van-tabbar-item>
</van-tabbar> </van-tabbar>
</div> </div>
</template> </template>
......
src/views/login/index.vue
<template>
<div class="login-container">
<div class="title">可视化平台</div>
<div class="name">Vmatrix</div>
<div class="login-content">
<van-cell-group>
<van-field v-model="loginForm.phone" left-icon="phone-o" placeholder="请输入手机号"/>
<van-field v-model="loginForm.code" left-icon="smile-comment-o" placeholder="请输入验证码">
<span slot="button" class="code" @click="sendCode">
<span v-if="time === 0">
获取验证码
</span>
<span v-else>
{{time}}s
</span>
</span>
</van-field>
</van-cell-group>
<div class="agree">
<label for>
<input type="checkbox" name id>
我已阅读并同意《可视化平台用户协议》中相关条款
</label>
</div>
<van-button
class="login-btn"
size="large"
:loading="isload"
loading-size="30px"
type="info"
text="提交"
@click="login"
loading-text="登录中"
></van-button>
</div>
</div>
</template>
<script>
import { setTimeout, clearTimeout } from "timers";
export default {
data() {
return {
loginForm: {
phone: "",
code: ""
},
isload: false,
time: 0
};
},
methods: {
login() {
this.isload = true;
var timer = setTimeout(() => {
this.isload = false;
window.localStorage.setItem('login', JSON.stringify(this.loginForm))
clearTimeout(timer);
this.$router.replace({
path:'/'
})
}, 1000);
},
sendCode() {
if (this.loginForm.phone.length == 11) {
var _this = this;
this.time = 60;
let Time = function () {
window.timer = setTimeout(() => {
_this.time--;
if (_this.time > 0) {
Time();
} else {
_this.time = 0;
window.clearTimeout(window.timer);
}
}, 1000);
}
Time()
this.$toast.success('发送成功')
} else {
this.$toast.fail('请输入正确的手机号')
}
}
}
};
</script>
<style lang="scss" scoped>
.login-container {
background: white url("../../../public/img/ps/bg.png") no-repeat bottom;
background-size: 100% auto;
height: 100vh;
.title {
font-size: 31px;
font-weight: bold;
border-bottom: 1px solid rgba(132, 132, 132, 0.4);
line-height: 70px;
height: 70px;
}
.name {
margin-top: 150px;
font-size: 47px;
font-weight: bold;
background: linear-gradient(
0deg,
rgba(129, 115, 247, 1) 0%,
rgba(94, 161, 251, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.login-content {
width: 550px;
margin: 0 auto;
padding-top: 125px;
font-size: 30px;
// background: #000;
.van-cell {
line-height: 60px;
font-size: 30px;
.van-field__left-icon {
font-size: 30px;
}
}
.code {
font-size:30px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(106,146,249,1);
}
.agree {
font-size: 21px;
padding-top: 47px;
color: #333333;
}
.login-btn {
width: 550px;
height: 77.5px;
background: linear-gradient(
96deg,
rgba(129, 115, 247, 1) 0%,
rgba(93, 163, 251, 1) 100%
);
border-radius: 6px;
margin-top: 78px;
font-size: 30px;
}
}
}
</style>
<style>
.login-container .van-field__left-icon .van-icon {
font-size: 30px;
min-width: 1.5em;
}
</style>
src/views/tempaltes/edit.vue
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
</div> </div>
<iframe <iframe
class="iframe" class="iframe"
v-if="loaded"
:style="{ :style="{
height: templateData.height + 'px', height: templateData.height + 'px',
width: templateData.width + 'px' width: templateData.width + 'px'
...@@ -102,6 +103,7 @@ export default { ...@@ -102,6 +103,7 @@ export default {
editIndex: "", editIndex: "",
isEdited: false, isEdited: false,
mode: "", mode: "",
loaded: false,
show: false, show: false,
deviceList: [ deviceList: [
{ {
...@@ -128,6 +130,7 @@ export default { ...@@ -128,6 +130,7 @@ export default {
} }
if (typeof e.data === "object" && e.data["type"] == "getList") { if (typeof e.data === "object" && e.data["type"] == "getList") {
vm.templateData.listData = e.data.list; vm.templateData.listData = e.data.list;
console.log('12121321321')
} }
// var color = e.data; // var color = e.data;
// document.getElementById("color").style.backgroundColor = color; // document.getElementById("color").style.backgroundColor = color;
...@@ -153,7 +156,6 @@ export default { ...@@ -153,7 +156,6 @@ export default {
}; };
}, },
methods: { methods: {
message(data) { message(data) {
window.frames[0].postMessage(data, "http://visual-clouds.bdideal.com"); window.frames[0].postMessage(data, "http://visual-clouds.bdideal.com");
}, },
...@@ -180,6 +182,7 @@ export default { ...@@ -180,6 +182,7 @@ export default {
axios.get('http://visual-clouds.bdideal.com/html/156076616690429b1f3072101465b906a536cf608f824.txt').then(res => { axios.get('http://visual-clouds.bdideal.com/html/156076616690429b1f3072101465b906a536cf608f824.txt').then(res => {
console.log(res.data); console.log(res.data);
}); });
this.loaded = true
}); });
}, },
getFilmDetail() { getFilmDetail() {
...@@ -190,10 +193,15 @@ export default { ...@@ -190,10 +193,15 @@ export default {
this.templateData.resourceUrl = res.data.resourceUrl; this.templateData.resourceUrl = res.data.resourceUrl;
this.templateData.frameUrl = res.data.frameUrl; this.templateData.frameUrl = res.data.frameUrl;
this.templateData.listData = JSON.parse(res.data.filmData); this.templateData.listData = JSON.parse(res.data.filmData);
this.loaded = true
}); });
}, },
publish() { publish() {
console.log(this.templateData.listData) console.log(this.templateData.listData)
if(!this.templateData.listData.length) {
alert("数据为空")
return
}
if (this.mode === "film") { if (this.mode === "film") {
updateFilmInfo( updateFilmInfo(
this.$route.query.filmId, this.$route.query.filmId,
...@@ -206,7 +214,6 @@ export default { ...@@ -206,7 +214,6 @@ export default {
}); });
} }
if (this.mode === "template") { if (this.mode === "template") {
this.message
createFilm({ createFilm({
clientId: "maxrocky", clientId: "maxrocky",
clientSecret: "maxrocky", clientSecret: "maxrocky",
...@@ -241,7 +248,7 @@ export default { ...@@ -241,7 +248,7 @@ export default {
}) })
setTimeout(() => { setTimeout(() => {
this.publish() this.publish()
}, 500) }, 1000)
}, },
toggle(index) { toggle(index) {
......
src/views/tempaltes/index.vue
...@@ -14,7 +14,22 @@ ...@@ -14,7 +14,22 @@
</div> </div>
</div> </div>
<div class="sort-container"> <div class="sort-container">
<div class="sort-item">
<span>分辨率</span>
<van-icon name="arrow-down"></van-icon>
</div>
<div class="sort-item">
<span class="active">横版</span>
<van-icon name="arrow-down"></van-icon>
</div>
<div class="sort-item">
<span>应用场景</span>
<van-icon name="arrow-down"></van-icon>
</div>
<div class="sort-item active">
<!-- <span>搜索</span> -->
<van-icon name="search"></van-icon>
</div>
</div> </div>
</div> </div>
<div class="template-list"> <div class="template-list">
...@@ -136,6 +151,8 @@ export default { ...@@ -136,6 +151,8 @@ export default {
padding-left: 50px; padding-left: 50px;
.static-top { .static-top {
padding-top: 40px; padding-top: 40px;
display: flex;
justify-content: space-between;
} }
.tab-btn { .tab-btn {
display: flex; display: flex;
...@@ -154,6 +171,22 @@ export default { ...@@ -154,6 +171,22 @@ export default {
} }
} }
.sort-container {
display: flex;
.sort-item {
display: flex;
align-items: center;
padding-right: 60px;
color:rgba(51,51,51,.8);
font-size: 23px;
span {
padding-right: 10px;
}
.active {
color:rgba(51,51,51,1);
}
}
}
.template-list { .template-list {
padding-top: 100px; padding-top: 100px;
.template-item { .template-item {
......
src/views/user/about.vue 0 → 100644
<template>
<div class="about">
<NavBar title="关于我们" left-arrow></NavBar>
<div class="content">
<img src="/img/ps/aboutbg.png" alt="">
</div>
</div>
</template>
<script>
import NavBar from '@/views/layout/navbar'
export default {
name: 'About',
components:{
NavBar
},
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.about {
.content {
padding-top: 65px;
padding-bottom: 35px;
text-align: center;
img {
width: 50%;
}
}
}
</style>
src/views/user/index.vue 0 → 100644
<template>
<div class="user-container">
<NavBar title="个人中心" >
</NavBar>
<div class="user-content">
<img src="../../../public/img/ps/avatar.png" alt="">
<div class="right-item">
<div class="top">13811044826</div>
<div class="bottom a-btn" @click="logout">
[退出登录]
</div>
</div>
<div class="right-item">
<div class="top">我的设备：5个</div>
<div class="bottom a-btn ">
[批量解绑]
</div>
</div>
</div>
<div class="bottom-btn">
<div class="btn-item">
<div class="icon" style="background-image: url(/img/ps/uplv.png)">
</div>
<div class="des">固件升级</div>
</div>
<div class="btn-item">
<div class="icon" style="background-image: url(/img/ps/about.png)">
</div>
<div class="des">帮助反馈</div>
</div>
<div class="btn-item" @click="goAbout">
<div class="icon" style="background-image: url(/img/ps/help.png)">
</div>
<div class="des">关于我们</div>
</div>
</div>
</div>
</template>
<script>
import NavBar from '@/views/layout/navbar'
export default {
name: 'User',
components:{
NavBar
},
methods: {
goAbout() {
this.$router.push({
path: '/about'
})
},
logout() {
this.$dialog.confirm({
title: '你确定退出吗',
message: ''
}).then(() => {
// on confirm
window.localStorage.clear()
this.$router.push({
path: 'login'
})
}).catch(() => {
// on cancel
});
}
}
}
</script>
<style lang="scss" scoped>
.user-container {
height: calc(100vh - 50px);
background: white url("../../../public/img/ps/bg.png") no-repeat bottom;
background-size: 100% auto;
.user-content {
height: 242.5px;
box-sizing: border-box;
padding-left: 73.5px;
font-size: 25px;
padding-top: 54px;
padding-bottom: 54px;
border-bottom: 1px solid rgba(132,132,132,.4);
.a-btn {
color: #7286F9;
}
display: flex;
align-items: center;
img {
width: 133.5px;
}
.right-item {
padding-left: 79px;
padding-right: 79px;
position: relative;
.top {
padding-bottom: 30px;
}
&::after{
content: "";
width:1.5px;
height:39px;
background:rgba(132,132,132,1);
position: absolute;
top: 28px;
left: 0;
}
&:first-child::after {
display: none;
}
}
}
.bottom-btn {
padding: 320px 230px 0 230px;
display: flex;
box-sizing: border-box;
justify-content: space-between;
.icon {
width: 106.5px;
height: 106.5px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.des {
padding-top: 5.5px;
font-size: 24px;
color: #333333;
}
}
}
</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