Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 29a91502 by hank
Options

pad 文件

parent 7b94057e
Showing with 3425 additions and 60 deletions
postcss.config.js
......@@ -4,7 +4,7 @@ module.exports = {
// browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 136,
rootValue: 37.5,//136
propList: ['*']
}
}
......
src/components/Slider/index.vue 0 → 100644
<template>
<!-- <div class="vmatrix-slider">
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<swiperSlide v-for="(item, index) in list" :key="index">
<slot :slider="item"></slot>
</swiperSlide>
</swiper>
</div> -->
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<swiperSlide v-for="(item, index) in list" :key="index">
<slot :slider="item"></slot>
</swiperSlide>
</swiper>
</template>
<script>
// import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
name: 'mySlider',
props: {
list: {
required: true,
default: () => [],
type: Array
}
},
data() {
return {
swiperOption: {
slidesPerView: "auto",
observer: true,
/* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
observerParents: true
}
};
},
methods: {
callback() {}
},
components: {
swiper,
swiperSlide
}
};
</script>
<style>
</style>
src/registerServiceWorker.js
/* eslint-disable no-console */
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
......
src/router/index_ pad.js 0 → 100644
import Vue from 'vue'
import Router from 'vue-router'
// 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 Help from '@/views/user/help.vue'
import Device from '@/views/device/index.vue'
import Groups from '@/views/groups/index.vue'
import GroupsAdd from '@/views/groups/add.vue'
import DeviceDetail from '@/views/device/detail.vue'
import DeviceAdd from '@/views/device/add.vue'
import Tempaltes from '@/views/tempaltes/index.vue'
import Search from '@/views/tempaltes/search.vue'
import TempaltesAll from '@/views/tempaltes/all.vue'
import TempalteEdit from '@/views/tempaltes/editMore.vue'
import TempaltePreview from '@/views/tempaltes/preview.vue'
import TempalteDetail from '@/views/tempaltes/detail.vue'
import Notice from '@/views/notice/index.vue'
import NoticeDetail from '@/views/notice/detail.vue'
import Svg from '@/views/svg-icons/index.vue'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '',
component: () => import(/* webpackChunkName: "layout" */ '@/views/layout'),
children: [
{ path: '/', name: 'Home', component: Tempaltes, meta: { keepAlive: true }, redirect: '/tempaltes' },
{ path: '/tempaltes', name: 'Tempaltes', component: Tempaltes, meta: { keepAlive: true } },
{ path: '/tempaltes/all', name: 'TempaltesAll', component: TempaltesAll, meta: { keepAlive: true } },
{ path: '/tempaltes/edit', name: 'TempaltesEdit', component: TempalteEdit, meta: { keepAlive: false } },
{ path: '/tempaltes/detial', name: 'TempalteDetail', component: TempalteDetail, meta: { keepAlive: false } },
{ path: '/tempaltes/search', name: 'Search', component: Search, meta: { keepAlive: false } },
{ path: '/groups', name: 'Groups', component: Groups, meta: { keepAlive: true } },
{ path: '/groups/add', name: 'GroupsAdd', component: GroupsAdd, meta: { keepAlive: false } },
{ path: '/device', name: 'Device', component: Device, meta: { keepAlive: true } },
{ path: '/device/detail', name: 'DeviceDetail', component: DeviceDetail, meta: { keepAlive: false } },
{ path: '/device/add', name: 'DeviceAdd', component: DeviceAdd, meta: { keepAlive: false } },
{ path: '/user', name: 'User', component: User, meta: { keepAlive: true } },
{ path: '/user/help', name: 'Help', component: Help, meta: { keepAlive: true } },
]
},
{
path: '/notice',
name: 'Notice',
component: Notice
},
{
path: '/notice/detail',
name: 'NoticeDetail',
component: NoticeDetail
},
{
path: '/svg-icon',
name: 'svg-icon',
component: Svg
},
{
path: '/about',
name: 'about',
// 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: 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
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: Login
}
]
})
router.beforeEach((from, to , next) => {
// 路由拦截
console.log(from, to)
if(window.localStorage.getItem('login') || from.path === '/login') {
next()
} else {
// router.redirect()
if(to.path === '/login') {
console.log('11212')
next()
} else {
next('/login?' + Date.now())
}
}
})
export default router
src/views/layout/index.vue
......@@ -10,15 +10,15 @@
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/tempaltes') }" replace :to="{
path: '/tempaltes',
exact: false
}" active icon="home-o">模板库</van-tabbar-item>
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/groups') }" replace :to="{
}" active icon="home-o">模板市场</van-tabbar-item>
<!-- <van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/groups') }" replace :to="{
path: '/groups',
exact: false
}" icon="cluster-o">设备组</van-tabbar-item>
}" icon="cluster-o">设备组</van-tabbar-item> -->
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/device') }" replace :to="{
path: '/device',
exact: false
}" icon="setting-o">我的设备</van-tabbar-item>
}" icon="setting-o">设备与影片</van-tabbar-item>
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/user') }" replace :to="{
path: '/user',
exact: false
......
src/views/layout/index_pad.vue 0 → 100644
<template>
<div class="layout">
<div class="layout-content">
<keep-alive v-if="keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-else></router-view>
</div>
<van-tabbar route >
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/tempaltes') }" replace :to="{
path: '/tempaltes',
exact: false
}" active icon="home-o">模板库</van-tabbar-item>
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/groups') }" replace :to="{
path: '/groups',
exact: false
}" icon="cluster-o">设备组</van-tabbar-item>
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/device') }" replace :to="{
path: '/device',
exact: false
}" icon="setting-o">我的设备</van-tabbar-item>
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/user') }" replace :to="{
path: '/user',
exact: false
}" icon="friends-o">个人中心</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
export default {
data() {
return {
index: 0,
currentPath: '',
keepAlive: false
}
},
watch: {
$route: function(val) {
this.currentPath = val.path
this.keepAlive = val.meta.keepAlive
}
},
components: {
}
};
</script>
<style>
</style>
src/views/login/index.vue
<template>
<div class="login-container">
<div class="title">可视化平台</div>
<div class="name">Vmatrix</div>
<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="请输入手机号"/>
......@@ -27,10 +31,10 @@
class="login-btn"
size="large"
:loading="isload"
loading-size="30px"
:disabled="loginForm.checked.length == 0"
type="info"
text="提交"
text="登录"
@click="login"
loading-text="登录中"
></van-button>
......@@ -94,15 +98,15 @@ export default {
background-size: 100% auto;
height: 100vh;
.title {
font-size: 31px;
font-size: 16px;
font-weight: bold;
border-bottom: 1px solid rgba(132, 132, 132, 0.4);
line-height: 70px;
height: 70px;
// border-bottom: 1px solid rgba(132, 132, 132, 0.4);
line-height: 40px;
height: 40px;
}
.name {
margin-top: 150px;
font-size: 47px;
margin-top: 50px;
font-size: 24px;
font-weight: bold;
background: linear-gradient(
0deg,
......@@ -113,20 +117,20 @@ export default {
-webkit-text-fill-color: transparent;
}
.login-content {
width: 550px;
width: 300px;
margin: 0 auto;
padding-top: 125px;
font-size: 30px;
padding-top: 55px;
// font-size: 30px;
// background: #000;
.van-cell {
line-height: 60px;
font-size: 30px;
// line-height: 60px;
// font-size: 30px;
.van-field__left-icon {
font-size: 30px;
}
}
.code {
font-size:30px;
// font-size:30px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(106,146,249,1);
......@@ -135,40 +139,42 @@ export default {
label {
display: flex;
align-items: center;
align-items: top;
// color: rgba(106,146,249,1);
}
text-align: left;
input {
font-size: 19px;
width: 20px;
height: 20px;
width: 14px;
height: 14px;
background-color: rgba(106,146,249,1);
margin: 3px 10px 0 0;
margin: 2px 10px 0 0;
vertical-align: top;
}
font-size: 21px;
font-size: 13px;
padding-top: 47px;
color: #333333;
}
.login-btn {
width: 550px;
height: 77.5px;
width: 200px;
// height: 77.5px;
background: linear-gradient(
96deg,
rgba(129, 115, 247, 1) 0%,
rgba(93, 163, 251, 1) 100%
);
border-radius: 6px;
border-radius: 3px;
margin-top: 78px;
font-size: 30px;
// font-size: 30px;
}
}
}
</style>
<style>
.login-container .van-field__left-icon .van-icon {
font-size: 30px;
/* font-size: 30px; */
min-width: 1.5em;
}
</style>
src/views/login/index_pad.vue 0 → 100644
<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 >
<input type="checkbox" v-model="loginForm.checked" name="checkbox">
<span>我已阅读并同意《可视化平台用户协议》中相关条款</span>
</label>
</div>
<van-button
class="login-btn"
size="large"
:loading="isload"
loading-size="30px"
:disabled="loginForm.checked.length == 0"
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: "",
checked: []
},
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("../../assets/img/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 {
label {
display: flex;
align-items: center;
// color: rgba(106,146,249,1);
}
input {
font-size: 19px;
width: 20px;
height: 20px;
background-color: rgba(106,146,249,1);
margin: 3px 10px 0 0;
}
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/index.vue
<template>
<div class="templates-container">
<NavBar title="模板库"></NavBar>
<DropMenu v-model='testModel' v-if="false"></DropMenu>
<div class="static-top animated bounceInRight" >
<DropMenu v-model="testModel" v-if="false"></DropMenu>
<div class="static-top animated bounceInRight">
<div class="tab-btn">
<div
class="tab-btn-item"
......@@ -41,7 +41,7 @@
<!-- slides -->
<swiper-slide v-for="(item, index) in bannerList" :key="index">
<div class="banner-item">
<img :src="item.url" alt>
<img :src="item.url" alt />
</div>
</swiper-slide>
<!-- Optional controls -->
......@@ -65,16 +65,28 @@
<div class="right" @click="goAll">查看全部></div>
</div>
<div class="template-list-hot">
<swiper :options="swiperOption" @someSwiperEvent="callback">
<!-- slides -->
<!-- <swiper :options="swiperOption" @someSwiperEvent="callback">
<swiper-slide v-for="(item, index) in list" :key="index" @click.native="goDetail(item)">
<div class="template-item-2">
<img :src="item.templateUrl" alt="">
<div class="point"><van-icon name='like' style="color:#F73939;"></van-icon>{{1000 -index}}</div>
<img :src="item.templateUrl" alt />
<div class="point">
<van-icon name="like" style="color:#F73939;"></van-icon>
{{1000 -index}}
</div>
<div class="title">{{item.templateName}}</div>
</div>
</swiper-slide>
</swiper>
</swiper> -->
<mySlider :list="list" v-if="true">
<div class="template-item-2 test-item" @click="goDetail (scope.slider)" slot-scope="scope">
<img :src="scope.slider.templateUrl" alt />
<div class="point">
<van-icon name="like" style="color:#F73939;"></van-icon>
{{1000 - 1}}
</div>
<div class="title">{{scope.slider.templateName}}</div>
</div>
</mySlider>
</div>
</div>
<div class="hot-template">
......@@ -83,19 +95,32 @@
<div class="right" @click="goAll">查看全部></div>
</div>
<div class="template-list-hot">
<swiper :options="swiperOption" @someSwiperEvent="callback">
<!-- slides -->
<!-- <swiper :options="swiperOption" @someSwiperEvent="callback">
<swiper-slide v-for="(item, index) in list" :key="index" @click.native="goDetail(item)">
<div class="template-item-2">
<img :src="item.templateUrl" alt="">
<div class="point"><van-icon name='like' style="color:#F73939;"></van-icon>{{1000 -index}}</div>
<img :src="item.templateUrl" alt />
<div class="point">
<van-icon name="like" style="color:#F73939;"></van-icon>
{{1000 -index}}
</div>
<div class="title">{{item.templateName}}</div>
</div>
</swiper-slide>
</swiper>
</swiper> -->
<mySlider :list="list" v-if="true">
<div class="template-item-2 test-item" @click="goDetail (scope.slider)" slot-scope="scope">
<img :src="scope.slider.templateUrl" alt />
<div class="point">
<van-icon name="like" style="color:#F73939;"></van-icon>
{{1000 - 1}}
</div>
<div class="title">{{scope.slider.templateName}}</div>
</div>
</mySlider>
</div>
</div>
</div>
<div class="template-list" style="padding-left: 50px;" v-if="activeIndex===1">
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides -->
......@@ -113,7 +138,7 @@
<div class="template-item-title">定制化模板</div>
<div class="template-item-tips">为您量身打造最合适的可视化方案</div>
<div>
<img src="@/assets/img/up.png" alt>
<img src="@/assets/img/up.png" alt />
</div>
</div>
</div>
......@@ -136,7 +161,7 @@
>{{item.filmName ? item.filmName : '暂无名称'}}</div>
<div class="template-item-tips">为您量身打造最合适的可视化方案</div>
<div>
<img src="@/assets/img/up.png" alt>
<img src="@/assets/img/up.png" alt />
</div>
</div>
</div>
......@@ -152,7 +177,7 @@
<van-dialog style="width: 50%" v-model="show" title="请留下您的联系方式，我们将在24小时与您联系" show-cancel-button>
<div class="dialog-content">
<van-cell-group>
<van-field v-model="people.phone" required clearable label="手机号" placeholder="请输入手机号"/>
<van-field v-model="people.phone" required clearable label="手机号" placeholder="请输入手机号" />
<van-field
v-model="people.code"
type="password"
......@@ -178,13 +203,14 @@ import NavBar from "@/views/layout/navbar";
import DropMenu from "@/components/DropMenu";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import mySlider from "./slider";
import { getTempalteList, getFilmList } from "@/api/api";
const banner = require('@/assets/img/banner.png')
const banner = require("@/assets/img/banner.png");
export default {
name: "Tempaltes",
data() {
return {
testModel: '',
testModel: "",
swiperOption: {
slidesPerView: "auto",
observer: true,
......@@ -294,9 +320,7 @@ export default {
goAll() {
this.$router.push({
path: "/tempaltes/all",
query: {
}
query: {}
});
},
goSearch() {
......@@ -312,7 +336,8 @@ export default {
NavBar,
swiper,
swiperSlide,
DropMenu
DropMenu,
mySlider
}
};
</script>
......@@ -382,15 +407,15 @@ export default {
.template-list-hot {
.template-item-2 {
margin-right: 42px;
height:436px;
min-width:246px;
height: 436px;
min-width: 246px;
position: relative;
img {
height: 100%;
width: auto;
}
.title {
font-size:24px;
font-size: 24px;
position: absolute;
left: 19px;
bottom: 22px;
......@@ -404,7 +429,7 @@ export default {
color: white;
vertical-align: middle;
.van-icon {
color: #F73939;
color: #f73939;
vertical-align: text-top;
margin-right: 10px;
}
......@@ -434,7 +459,6 @@ export default {
);
border-radius: 6px;
}
height: 351px;
background-color: rgba(255, 255, 255, 1);
background-size: cover;
......@@ -469,7 +493,7 @@ export default {
.hot-template {
padding-top: 66px;
.hot-title {
font-weight:500;
font-weight: 500;
display: flex;
justify-content: space-between;
padding-right: 43px;
......@@ -493,6 +517,11 @@ export default {
}
</style>
<style lang="scss">
.templates-container {
.swiper-slide {
width: auto;
}
}
.banner {
.swiper-pagination-bullet {
display: inline-block;
......
src/views/tempaltes/slider.vue
<template>
<!-- <div class="vmatrix-slider">
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<swiperSlide v-for="(item, index) in list" :key="index">
<slot :slider="item"></slot>
</swiperSlide>
</swiper>
</div> -->
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<swiperSlide v-for="(item, index) in list" :key="index">
<slot :slider="item"></slot>
</swiperSlide>
</swiper>
</template>
<script>
// import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
name: 'mySlider',
props: {
list: {
required: true,
default: () => [],
type: Array
}
},
data() {
return {
swiperOption: {
slidesPerView: "auto",
observer: true,
/* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
observerParents: true
}
};
},
methods: {
callback() {}
},
components: {
swiper,
swiperSlide
}
};
</script>
<style>
</style>
src/views_pad/About.vue 0 → 100644
<template>
<div class="about">
<h1>This is an about page</h1>
<div >
{{html}}
</div>
</div>
</template>
<script>
import { get } from '@/api'
export default {
data(){
return {
html: ''
}
},
created() {
get('').then(res => {
console.log(res.data)
this.html = res.data
})
}
}
</script>
src/views_pad/Home.vue 0 → 100644
<template>
<div class="home">
<NavBar title="模板库"></NavBar>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import NavBar from '@/views/layout/navbar.vue'
export default {
name: 'home',
components: {
HelloWorld,
NavBar
}
}
</script>
src/views_pad/device/add.vue 0 → 100644
<template>
<div class="device-detail-container">
<NavBar title="添加新设备" left-arrow></NavBar>
<div class="content-box">
<div class="content-top" style="background-image: url(./img/ps/devices.png);"></div>
<div class="setup-list">
<div class="setup-item">
<div class="setup-img">步骤示意图</div>
<div class="setup-tips">连接Vmatrix盒子与显示器</div>
</div>
<div class="setup-item">
<div class="setup-img">步骤示意图</div>
<div class="setup-tips">与管理端连接同一WIFI</div>
</div>
<div class="setup-item">
<div class="setup-img">步骤示意图</div>
<div class="setup-tips">打开“个人中心”-绑定管理端“</div>
</div>
<div class="setup-item">
<div class="setup-img">步骤示意图</div>
<div class="setup-tips">
打开管理端Vmatrix App
扫描二维码完成绑定
</div>
</div>
</div>
</div>
<div class="bind-btn">
扫一扫，捆绑设备
</div>
</div>
</template>
<script>
import NavBar from "@/views/layout/navbar";
import "swiper/dist/css/swiper.css";
import { getFilmList } from "@/api/api";
export default {
data() {
return {
swiperOption: {
slidesPerView: "auto"
},
list: [
{
templateName: "1",
templateUrl:
"http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg"
},
{
templateName: "1",
templateUrl:
"http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg"
}
]
};
},
components: {
NavBar
},
computed: {},
created() {},
methods: {
callback() {},
getList() {
getFilmList().then(res => {
console.log(res);
this.list = res.data.list;
});
},
addTemplate() {
this.$router.push({
path: "/tempaltes"
});
}
}
};
</script>
<style lang="scss" scoped>
.device-detail-container {
text-align: left;
.swiper-slide {
width: auto;
}
.content-box {
padding-left: 82px;
padding-top: 50px;
.content-top {
// width: 80%;
height: 187px;
background-size: auto 100%;
background-position: 150px center;
background-repeat: no-repeat;
}
.setup-list {
padding-top: 135px;
display: flex;
justify-content: space-between;
padding-right: 60px;
box-sizing: border-box;
.setup-item {
.setup-img {
color: rgba(188, 188, 188, 1);
text-align: center;
line-height: 131px;
font-size: 24px;
width: 220px;
height: 131px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(188, 188, 188, 1);
border-radius: 3px;
}
.setup-tips {
max-width: 220px;
text-align: center;
font-size: 19px;
padding-top: 33px;
line-height: 25px;
color: rgba(51, 51, 51, 0.8);
}
}
}
}
.bind-btn {
margin: 0 auto;
margin-top: 80px;
width:364px;
height:68px;
color: white;
text-align: center;
line-height: 68px;
border:1px solid;
border-image:linear-gradient(264deg, rgba(94,161,251,1), rgba(110,140,249,1)) 10 10;
background:linear-gradient(-90deg,rgba(128,116,247,1) 0%,rgba(95,160,251,1) 100%);
border-radius:3px;
}
}
</style>
src/views_pad/device/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_pad/device/index.vue 0 → 100644
<template>
<div class="device-container">
<NavBar title="我的设备" ></NavBar>
<div class="device-list">
<div class="device-item" @click="addDevice">
<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" @click="goDetail">
<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(${require('@/assets/img/box.png')})`">
</div>
<div class="status">
在线
</div>
</div>
</div>
<div class="device-title">
1楼东侧楼梯
</div>
</div>
<div class="device-item" v-for="(item, index) in 0" :key="index">
<div class="device-item-top" @click="goDetail">
<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">
在线
</div>
</div>
</div>
<div class="device-title">
1楼东侧楼梯
</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'
}
})
},
addDevice() {
this.$router.push({
path: '/device/add',
query: {
}
})
}
}
}
</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_pad/groups/add.vue 0 → 100644
<template>
<div class="device-detail-container">
<NavBar title="添加设备组" left-arrow></NavBar>
<div class="content-top">
<div class="left"><input type="text" v-model="name" placeholder="填写设备组名称"></div>
<div class="right">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 60 60">
<image id="baocun" width="60" height="60" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAilBMVEVCmuX///9CmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuUAAADSmF1SAAAALHRSTlMAADCcwGH815WQs6yXyAhQQBDQgBs8D1LsIrZ5vIN7AVd+UUd/+EgN7Y/PyXGlq3IAAAABYktHRC3N2kE9AAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH4wYUECozwKL4qgAAAP1JREFUSMft18kOgjAQBuApKFD3fd9FS7Xv/3wyVYmJtpThZvpfaGb4kl4gMwAQhA1CwoAxgGakSImaDAKizXUAIdUqFUIDH3HCdfDc4oa0sdvRxyTGc1fjuAfPYKkPhgywO2Q6PdQjjROoihkvMK+Ox654Mp2R8TxSiyUVr/Limorfb3j833iTF7dUvMuLUyreH45oiV/VKy74ZMJnB5yacOqAL+l18CPn9IJdYcZZ2d82AzOWZVhasLjZ7U1YMAhpuXkmBdgw+qEhQrftuCQee+yxxx5/jczuWBa4GNad8cewrmI+rhSp14R7vQWl1mpUaynDdbA7qpw7roMPU2DK58/JrkAAAAAASUVORK5CYII="/>
</svg>
<span>保存</span>
</div>
</div>
<div class="device-list">
<div class="device-item" v-for="(item, index) in list" :key="index">
<label >
<div class="icon"></div>
<div class="name"> <img :src="checked.indexOf(item) !== -1 ? './img/ps/checked.png' : './img/ps/check.png'" alt=""> {{item.deviceName}}</div>
<input type="checkbox" name="device" v-model="checked" :value="item">
</label>
</div>
</div>
<div class="title">
<span class="bold">模版选择</span>
<span>（设备组模版将应用于所有组内设备，原有模版将被保存于“我的模版”中）</span>
</div>
<div class="tempalte-view">
<div class="add">
<van-icon style="font-size: 52px;" name="plus"/>
</div>
<div >
</div>
</div>
<!-- <div>{{checked}}</div> -->
</div>
</template>
<script>
import NavBar from "@/views/layout/navbar";
import "swiper/dist/css/swiper.css";
import { getFilmList } from "@/api/api";
export default {
data() {
return {
swiperOption: {
slidesPerView: "auto"
},
name: '',
checked: [],
list: [
{
deviceName: "Maxrocky",
templateUrl:
"http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg"
},
{
deviceName: "MaxrockyB",
templateUrl:
"http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg"
}
]
};
},
components: {
NavBar
},
computed: {},
created() {},
methods: {
callback() {},
getList() {
getFilmList().then(res => {
console.log(res);
this.list = res.data.list;
});
},
addTemplate() {
this.$router.push({
path: "/tempaltes"
});
}
}
};
</script>
<style lang="scss" scoped>
.device-detail-container {
text-align: left;
.content-top {
display: flex;
padding-left: 47px;
padding-top: 28px;
align-items: center;
justify-content: space-between;
.left {
input {
width:198px;
height:55px;
border:1px solid rgba(181,181,181,1);
border-radius:3px;
padding-left: 20px;
color: #B5B5B5;
}
}
.right {
padding-right: 50px;
font-size:24px;
display: flex;
align-items: center;
svg {
margin-right: 12px;
}
}
}
.device-list {
padding-left: 47px;
display: flex;
flex-wrap: wrap;
margin-right: 68px;
.device-item {
margin-top: 47px;
margin-right: 68px;
text-align: center;
input {
display: none;
}
label {
display: block;
}
.icon {
width:191px;
height:67px;
background: white no-repeat center;
background-image: url('@/../../../assets/img/box.png');
background-size: auto 100%;
}
.name {
padding-top: 46px;
background-size: auto 100%;
font-size:21px;
color: #333333;
line-height: 21px;
img {
width: 20px;
height: 20px;
vertical-align: bottom;
transition: all 0.5s ease-in;
}
}
}
}
.title {
padding-left: 47px;
padding-top: 65px;
font-weight:500;
line-height: 24px;
.bold {
color:rgba(51,51,51,1);
font-size:24px;
padding-right: 22px;
}
span {
color:rgba(51,51,51,.8);
font-size:21px;
}
}
.tempalte-view {
padding-left: 47px;
padding-top: 38px;
.add {
width:498px;
height:304px;
border:1px solid rgba(132,132,132,1);
display: flex;
font-size: 52px;
align-items: center;
justify-content: center;
color: #848484;
}
}
}
</style>
src/views_pad/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_pad/groups/index.vue 0 → 100644
<template>
<div class="device-container">
<NavBar title="设备组"></NavBar>
<div class="device-list">
<div class="device-item" @click="addGroups">
<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-image: url(./img/ps/groups.png)"
></div>
</div>
<div class="device-title">设备组A</div>
<div class="clear-btn" @click="delGroup">解除该组</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"
}
});
},
addGroups(){
this.$router.push({
path: "/groups/add",
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: 200px;
min-height: 199.5px;
padding-top: 39px;
margin: 0 24px;
.device-item-create {
font-size: 52px;
height: 200px;
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: 200px;
background: rgba(255, 255, 255, 1);
// box-shadow: 0px 4.5px 25px 0px rgba(0, 0, 0, 0.14);
border: 1px solid #848484;
box-sizing: border-box;
.device-item-img {
width: 100%;
height: 200px;
background-repeat: no-repeat;
background-size: 50%;
background-position: center;
}
}
.device-title {
padding-top: 25px;
font-size: 24px;
color: #333333;
padding-bottom: 20px;
}
.clear-btn {
width:133px;
height:44px;
font-size:20px;
margin: 0 auto;
line-height: 44px;
text-align: center;
border:1px solid rgba(110,140,249,1);
border-radius:3px;
color: #6E8CF9;
}
}
}
</style>
src/views_pad/layout/index.vue 0 → 100644
<template>
<div class="layout">
<div class="layout-content">
<keep-alive v-if="keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-else></router-view>
</div>
<van-tabbar route >
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/tempaltes') }" replace :to="{
path: '/tempaltes',
exact: false
}" active icon="home-o">模板市场</van-tabbar-item>
<!-- <van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/groups') }" replace :to="{
path: '/groups',
exact: false
}" icon="cluster-o">设备组</van-tabbar-item> -->
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/device') }" replace :to="{
path: '/device',
exact: false
}" icon="setting-o">设备与影片</van-tabbar-item>
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/user') }" replace :to="{
path: '/user',
exact: false
}" icon="friends-o">个人中心</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
export default {
data() {
return {
index: 0,
currentPath: '',
keepAlive: false
}
},
watch: {
$route: function(val) {
this.currentPath = val.path
this.keepAlive = val.meta.keepAlive
}
},
components: {
}
};
</script>
<style>
</style>
src/views_pad/layout/index_pad.vue 0 → 100644
<template>
<div class="layout">
<div class="layout-content">
<keep-alive v-if="keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-else></router-view>
</div>
<van-tabbar route >
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/tempaltes') }" replace :to="{
path: '/tempaltes',
exact: false
}" active icon="home-o">模板库</van-tabbar-item>
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/groups') }" replace :to="{
path: '/groups',
exact: false
}" icon="cluster-o">设备组</van-tabbar-item>
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/device') }" replace :to="{
path: '/device',
exact: false
}" icon="setting-o">我的设备</van-tabbar-item>
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/user') }" replace :to="{
path: '/user',
exact: false
}" icon="friends-o">个人中心</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
export default {
data() {
return {
index: 0,
currentPath: '',
keepAlive: false
}
},
watch: {
$route: function(val) {
this.currentPath = val.path
this.keepAlive = val.meta.keepAlive
}
},
components: {
}
};
</script>
<style>
</style>
src/views_pad/layout/navbar.vue 0 → 100644
<template>
<Sticky>
<van-nav-bar
:title="title"
:left-arrow="typeof leftArrow !== 'undefined' ? true : false"
@click-left="myonClickLeft"
@click-right="onClickRight"
>
<div slot="right">
<van-icon v-show="showNotice" @click="goNotice" name="chat-o" class="message-icon"/>
<slot></slot>
</div>
</van-nav-bar>
</Sticky>
</template>
<script>
import Sticky from "@/components/Sticky";
export default {
props: ["left-arrow", "title", "onClickLeft"],
data() {
return {
left: false,
showNotice: true
};
},
created() {
this.left = this["left-arrow"];
console.log(this);
},
watch: {
$route(route) {
console.log(route.path);
if (route.path.indexOf("/notice") !== -1) {
this.showNotice = false;
} else {
this.showNotice = true;
}
}
},
methods: {
myonClickLeft() {
if (this.onClickLeft) {
this.onClickLeft();
} else {
this.$router.back();
}
},
onClickRight() {},
goNotice() {
this.$router.push({
path: "/notice"
});
}
},
components: {
Sticky
}
};
</script>
<style>
.van-nav-bar__title {
font-size: 22px;
}
.message-icon {
font-size: 25px;
}
</style>
src/views_pad/login/index.vue 0 → 100644
<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 >
<input type="checkbox" v-model="loginForm.checked" name="checkbox">
<span>我已阅读并同意《可视化平台用户协议》中相关条款</span>
</label>
</div>
<van-button
class="login-btn"
size="large"
:loading="isload"
:disabled="loginForm.checked.length == 0"
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: "",
checked: []
},
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("../../assets/img/bg.png") no-repeat bottom;
background-size: 100% auto;
height: 100vh;
.title {
font-size: 16px;
font-weight: bold;
// border-bottom: 1px solid rgba(132, 132, 132, 0.4);
line-height: 40px;
height: 40px;
}
.name {
margin-top: 50px;
font-size: 24px;
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: 300px;
margin: 0 auto;
padding-top: 55px;
// 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 {
label {
display: flex;
align-items: top;
// color: rgba(106,146,249,1);
}
text-align: left;
input {
font-size: 19px;
width: 14px;
height: 14px;
background-color: rgba(106,146,249,1);
margin: 2px 10px 0 0;
vertical-align: top;
}
font-size: 13px;
padding-top: 47px;
color: #333333;
}
.login-btn {
width: 200px;
// height: 77.5px;
background: linear-gradient(
96deg,
rgba(129, 115, 247, 1) 0%,
rgba(93, 163, 251, 1) 100%
);
border-radius: 3px;
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_pad/login/index_pad.vue 0 → 100644
<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 >
<input type="checkbox" v-model="loginForm.checked" name="checkbox">
<span>我已阅读并同意《可视化平台用户协议》中相关条款</span>
</label>
</div>
<van-button
class="login-btn"
size="large"
:loading="isload"
loading-size="30px"
:disabled="loginForm.checked.length == 0"
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: "",
checked: []
},
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("../../assets/img/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 {
label {
display: flex;
align-items: center;
// color: rgba(106,146,249,1);
}
input {
font-size: 19px;
width: 20px;
height: 20px;
background-color: rgba(106,146,249,1);
margin: 3px 10px 0 0;
}
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_pad/notice/detail.vue 0 → 100644
<template>
<div class="about">
<NavBar :title=" temp.title ? temp.title : '通知详情'" left-arrow ></NavBar>
<div class="title">{{temp.title}}</div>
<div class="time">{{temp.time}}</div>
<div class="content">
{{temp.content+ `北京数字理想科技有限公司，是中国领先的数据可视化平台服务商与行业解决方案提供商，我们坚持用科技创造艺术的理想，不断引领视觉技术变革。经过数年的沉淀积累，数字理想在数据处理与分析、数据可视化、互动多媒体、数字展览展示、互联网云平台等领域均取得明显优势地位。北京数字理想科技有限公司，是中国领先的数据可视化平台服务商与行业解决方案提供商，我们坚持用科技创造艺术的理想，不断引领视觉技术变革。经过数年的沉淀积累，数字理想在数据处理与分析、数据可视化、互动多媒体、数字展览展示、互联网云平台等领域均取得明显优势地位。
北京数字理想科技有限公司，是中国领先的数据可视化平台服务商与行业解决方案提供商，我们坚持用科技创造艺术的理想，不断引领视觉技术变革。经过数年的沉淀积累，数字理想在数据处理与分析、数据可视化、互动多媒体、数字展览展示、互联网云平台等领域均取得明显优势地位。
北京数字理想科技有限公司，是中国领先的数据可视化平台服务商与行业解决方案提供商，我们坚持用科技创造艺术的理想，不断引领视觉技术变革。经过数年的沉淀积累，数字理想在数据处理与分析、数据可视化、互动多媒体、数字展览展示、互联网云平台等领域均取得明显优势地位。`}}
</div>
</div>
</template>
<script>
import NavBar from '@/views/layout/navbar'
export default {
name: 'About',
components:{
NavBar
},
data() {
return {
temp: {
title: '数字理想与合工大达成战略合作'
}
}
},
created() {
this.temp = JSON.parse(window.sessionStorage.getItem('notice'))
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.about {
.title {
padding-top: 65px;
padding-bottom: 24px;
font-size: 30px;
color: #333;
}
.time {
font-size:18px;
color: #333;
}
.content {
color: #333;
padding-bottom: 35px;
text-align: left;
text-indent: 36px;
padding: 0 25%;
padding-top: 65px;
font-size:18px;
line-height:27px;
img {
width: 50%;
}
}
}
</style>
src/views_pad/notice/index.vue 0 → 100644
<template>
<div class="notice">
<NavBar title="小V" left-arrow></NavBar>
<div class="content-box">
<!-- <img src="@/assets/img/noticebg.png" alt=""> -->
<div class="notice-item" v-for="(item, index) in list" :key="index">
<div class="left">
<img src="@/assets/img/icon.png" alt class="icon">
</div>
<div class="right">
<div class="title">
{{ item.title}}
<div class="time">{{ item.time}}</div>
</div>
<div class="content">{{ item.content}}</div>
<div class="bottom-btn" v-if="item.type === 'news'">
<span @click="goDetail(item)">查看详情>></span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import NavBar from "@/views/layout/navbar";
export default {
name: "notice",
components: {
NavBar
},
data() {
return {
list: [
{
id: 1,
title: "小V要出新版本了",
content:
"告诉大家一个好消息，小V给大家准备的100套新模版，就要在12月底入库啦！惊喜不要错过哦～",
time: "2018-06-12 14：22"
},
{
id: 2,
title: "您的ID12534设备已经绑定成功！",
content:
"告诉大家一个好消息，小V给大家准备的100套新模版，就要在12月底入库啦！惊喜不要错过哦～",
time: "2018-06-12 14：22"
},
{
id: 3,
title: "数字理想与哈工大达成战略合作",
content:
"数字理想与哈工大达成战略合作数字理想与哈工大达成战略合作数字理想与哈工大达战作数字理想与哈工大达成战略合作数字理想与哈工大达成战略合作数字理想与哈工大成合作数字理想与哈工大达成战略合作数字理想与哈工大达成战略合作～",
time: "2018-06-12 14：22",
type: 'news'
}
]
};
},
methods: {
goDetail(item) {
window.sessionStorage.setItem('notice', JSON.stringify(item))
this.$router.push({
path: '/notice/detail',
query: {
id: item.id
}
})
}
}
};
</script>
<style lang="scss" scoped>
.notice {
.content-box {
padding-left: 209px;
padding-bottom: 35px;
text-align: center;
.notice-item {
padding-top: 56px;
display: flex;
.left {
.icon {
width: 63px;
height: 63px;
}
padding-right: 12px;
}
.right {
width: 893px;
// height: 167px;
padding-left: 20px;
padding-top: 30px;
padding-right: 36px;
padding-bottom: 36px;
text-align: left;
word-break: break-all;
box-sizing: border-box;
background: rgba(224, 199, 199, 0.12);
// opacity: 0.12;
color: #333333;
border-radius: 3px;
position: relative;
margin-left: 10px;
&::after {
content: "";
width: 0;
height: 0;
border-width: 10px 10px 10px 0;
border-style: solid;
border-color: transparent rgba(224, 199, 199, 0.12) transparent transparent; /*透明 灰 透明 透明 */
position: absolute;
left: -10px;
top: 30px;
}
.title {
font-size: 24px;
max-width: 600px;
}
.time {
position: absolute;
right: 36px;
top: 32px;
font-size: 20px;
color: rgba(51, 51, 51, 0.7);
}
.content {
padding-top: 24px;
line-height: 32px;
font-size: 21px;
text-align: justify;
}
.bottom-btn {
text-align: right;
color: #6E8CF9;
padding-top: 28px;
font-size:21px;
}
}
}
// img {
// width: 50%;
// }
}
}
</style>
src/views_pad/svg-icons/index.vue 0 → 100644
<template>
<div class="icons-container">
<p class="warn-content">
<a href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html" target="_blank">Add and use
</a>
</p>
<div class="icons-wrapper">
<div v-for="item of iconsMap" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
<div class="icons-item">
<div>
<!-- {{ generateIconCode(item) }} -->
</div>
<div class="icon-item">
<svg-icon :icon-class="item" class-name="disabled" />
<span>{{ item }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import icons from './requireIcons'
import clipboard from '@/utils/clipboard'
// import svg from '@/icons/svg/404.svg'
export default {
name: 'Icons',
data() {
return {
iconsMap: icons
}
},
methods: {
generateIconCode(symbol) {
return `<svg-icon icon-class="${symbol}" />`
},
handleClipboard(text, event) {
clipboard(text, event)
}
}
}
</script>
<style lang="scss" scoped>
.icons-container {
margin: 10px 20px 0;
overflow: hidden;
.icons-wrapper {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.icon-item {
margin: 20px;
height: 110px;
text-align: center;
width: 110px;
float: left;
font-size: 30px;
color: #24292e;
cursor: pointer;
}
span {
display: block;
font-size: 24px;
margin-top: 10px;
}
.disabled{
pointer-events: none;
}
}
</style>
src/views_pad/svg-icons/requireIcons.js 0 → 100644
const req = require.context('../../icons/svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys()
// console.log(req)
const re = /\.\/(.*)\.svg/
const icons = requireAll(req).map(i => {
// console.log(i)
return i.match(re)[1]
})
export default icons
src/views_pad/tempaltes/all.vue 0 → 100644
<template>
<div class="templates-container">
<NavBar title="模板库" left-arrow></NavBar>
<div class="static-top">
<div class="tab-btn">
<div
class="tab-btn-item"
:class="activeIndex === 0 ? 'active' : ''"
@click="changeBtn(0)"
>全部模板</div>
<!-- <div class="tab-btn-diver">|</div>
<div
class="tab-btn-item"
:class="activeIndex === 1 ? 'active' : ''"
@click="changeBtn(1)"
>我的模板</div>-->
</div>
<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" @click="goSearch"></van-icon>
</div>
</div>
</div>
<div class="">
<transition-group name="fadeUp" tag="div" class="template-list">
<div class="template-item" v-for="(item, index) in list" :key="item.templateId">
<img :src="item.templateUrl" alt>
<div class="point">
<van-icon name="like" style="color:#F73939;"></van-icon>
{{1000 -index}}
</div>
<div class="title">{{item.templateName}}</div>
</div>
</transition-group>
</div>
</div>
</template>
<script>
import NavBar from "@/views/layout/navbar";
import { getTempalteList, getFilmList } from "@/api/api";
export default {
name: "TempaltesAll",
data() {
return {
activeIndex: 0,
list: [
// { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
// { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
// { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
// { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
// { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
// { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
// { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
// { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
// { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
]
};
},
computed: {},
created() {
this.getList();
},
methods: {
changeBtn(index) {
this.activeIndex = index;
if (index == 0) {
this.getList();
} else {
this.getList2();
}
},
getList() {
getTempalteList().then(res => {
console.log(res);
this.list = res.data.list;
});
},
getList2() {
getFilmList().then(res => {
console.log(res);
this.list = res.data.list;
});
},
goDetail(item) {
this.$router.push({
path: "/tempaltes/detial",
query: {
templateId: item.templateId
}
});
},
goSearch() {
this.$router.push({
path: "/tempaltes/search"
});
}
},
components: {
NavBar
}
};
</script>
<style lang="scss" scoped>
.templates-container {
padding-bottom: 100px;
.swiper-slide {
width: auto;
}
.static-top {
padding-top: 40px;
padding-left: 50px;
display: flex;
justify-content: space-between;
}
.tab-btn {
display: flex;
color: rgba(51, 51, 51, 0.6);
font-size: 24px;
.tab-btn-item {
transition: all 1s;
}
.tab-btn-diver {
padding: 0 40px;
color: rgba(51, 51, 51, 1);
}
.active {
color: rgba(51, 51, 51, 1);
font-weight: bold;
}
}
.sort-container {
display: flex;
.sort-item {
display: flex;
align-items: center;
padding-right: 60px;
color: rgba(51, 51, 51, 0.8);
font-size: 23px;
span {
padding-right: 10px;
}
.active {
color: rgba(51, 51, 51, 1);
}
}
}
.template-list {
display: flex;
flex-wrap: wrap;
padding-top: 60px;
padding-left: 50px;
.template-item {
margin-right: 30px;
margin-bottom: 30px;
width: 399px;
height: 243px;
background-color: #161616;
position: relative;
img {
height: 100%;
width: auto;
max-width: 399px;
margin: 0 auto;
}
.title {
font-size: 13px;
position: absolute;
left: 11px;
bottom: 12px;
color: white;
}
.point {
position: absolute;
right: 8px;
top: 8px;
font-size: 12px;
color: white;
vertical-align: middle;
.van-icon {
color: #f73939;
vertical-align: text-top;
margin-right: 5px;
}
}
}
}
}
</style>
\ No newline at end of file
src/views_pad/tempaltes/detail.vue 0 → 100644
<template>
<div class="edit-container">
<NavBar title="模板详情" left-arrow></NavBar>
<div class="content">
<div class="content-left">
<div class="content-left-top">
<div class="top-left">
<!-- <div class="left-item">
<van-icon name="description" />保存至我的草稿
</div>-->
<div class="left-item" @click="goEdit">
<van-icon name="edit"/><span>编辑</span>
</div>
<div class="left-item" @click="pub">
<van-icon name="add-o"/>
<span>添加至我的模板</span>
</div>
</div>
</div>
<img
class="iframe"
:src="templateData.templateUrl"
frameborder="0"
/>
</div>
</div>
</div>
</template>
<script>
import NavBar from "@/views/layout/navbar";
import {
getTempalteDetail,
getFilmDetail,
updateFilmInfo,
createFilm
} from "@/api/api";
import axios from "axios";
import { setTimeout } from 'timers';
export default {
data() {
return {
templateData: {
height: 450,
width: 800,
resourceId: "string",
frameId: "string",
filmId: "",
templateUrl: '',
frameUrl:
"http://visual-clouds.bdideal.com/html/156050648981560a2f35feda34d66afe6765526670da2.html",
listData: []
}
};
},
created() {
if (this.$route.query.filmId) {
this.mode = "film";
this.getFilmDetail();
}
if (this.$route.query.templateId) {
this.mode = "template";
this.getTempalteDetail();
}
},
mounted() {
},
methods: {
getTempalteDetail() {
getTempalteDetail(this.$route.query.templateId).then(res => {
this.templateData.frameId = res.data.frameId;
this.templateData.resourceUrl = res.data.resourceUrl;
this.templateData.resourceId = res.data.resourceId;
this.templateData.templateUrl = res.data.templateUrl;
this.templateData.frameUrl = res.data.frameUrl;
console.log("模板详情");
axios.get(res.data.resourceUrl.replace('bdideal.com','oss-cn-beijing.aliyuncs.com')).then(res => {
console.log(res.data);
this.templateData.listData = res.data
});
});
},
getFilmDetail() {
getFilmDetail(this.$route.query.filmId).then(res => {
console.log(res.data, "影片详情");
this.templateData.filmId = res.data.filmId;
this.name = res.data.filmName
this.templateData.resourceUrl = res.data.resourceUrl;
this.templateData.frameUrl = res.data.frameUrl;
this.templateData.listData = JSON.parse(res.data.filmData);
});
},
publish() {
if (this.mode === "film") {
updateFilmInfo(
this.$route.query.filmId,
JSON.stringify(this.templateData.listData)
).then(res => {
this.show = false;
console.log(res, "更新影片成功");
this.$router.back();
});
}
if (this.mode === "template") {
this.message
createFilm({
clientId: "maxrocky",
clientSecret: "maxrocky",
templateId: this.$route.query.templateId,
resourceId: this.templateData.resourceId,
frameId: this.templateData.frameId,
filmData: JSON.stringify(this.templateData.listData),
filmName: ''
}).then(res => {
this.$toast.success('添加成功');
console.log(res, "创建影片成功");
this.show = false;
// updateFilmInfo(res.data.filmId, "数据").then(res => {
// console.log(res, "更新影片成功");
// this.$router.back();
// });
// this.$router.back();
});
}
},
pub() {
this.publish()
},
enterSubmit() {
this.message({
type: 'getList'
})
setTimeout(() => {
this.publish()
}, 100)
},
goEdit() {
this.$router.push({
path: '/tempaltes/edit',
query: {
templateId: this.$route.query.templateId
}
})
}
},
components: {
NavBar
}
};
</script>
<style lang="scss" scoped>
.edit-container {
.content {
display: flex;
justify-content: space-between;
.content-left {
flex: 1;
padding: 50px 50px 0 50px;
background: white;
height: calc(100vh - 96px);
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;
span {
padding-left: 5px;
margin-top: -3px;
}
// height: ;
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 {
padding-top: 40px;
width: 100%;
height: auto;
}
}
}
}
</style>
src/views_pad/tempaltes/preview.vue 0 → 100644
<template>
<div class="edit-container">
<NavBar title="预览" :onClickLeft="myonClickLeft" left-arrow></NavBar>
<div class="content">
<div class="content-left">
<iframe
@load="getData"
class="iframe"
v-show="loaded"
:src="templateData.frameUrl+'?isPreview=1'"
frameborder="0"
></iframe>
</div>
</div>
</div>
</template>
<script>
import NavBar from "@/views/layout/navbar";
// import { setTimeout } from 'timers';
export default {
props: ['myonClickLeft'],
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();
// }
},
mounted() {
// var vm = this
// vm.message({
// type: 'setList',
// list: vm.templateData.listData
// })
this.getData()
},
methods: {
message(data) {
// window.frames[1].postMessage(data, "http://visual-clouds.bdideal.com");
window.frames[1].postMessage(data, "http://localhost:8082");
},
getData() {
this.loaded = true
this.templateData = JSON.parse(window.localStorage.getItem('preview'))
this.message({
type: 'setList',
pages: this.templateData.listData,
list: this.templateData.listData
})
}
},
components: {
NavBar
}
};
</script>
<style lang="scss" scoped>
.edit-container {
.content {
overflow: hidden;
display: flex;
justify-content: space-between;
.content-left {
overflow: hidden;
flex: 1;
background: #eeeeee;
height: calc(100vh - 46px);
box-sizing: border-box;
text-align: left;
.iframe {
width: 100% ;
height: 100%;
}
}
}
}
</style>
src/views_pad/tempaltes/search.vue 0 → 100644
<template>
<div class="help">
<NavBar title="搜索" left-arrow></NavBar>
<div class="content">
<div class="search-content">
<van-icon name="search"></van-icon>
<input type="text">
<div class="search-btn">搜索</div>
</div>
<div class="result">
<!-- <div class="result-item" v-for="(item, index) in list" :key="index">
<div class="question">
Q:{{item.q}}
</div>
<div class="answer">
A:{{item.a}}
</div>
</div> -->
</div>
<!-- <img src="@/assets/img/helpbg.png" alt=""> -->
</div>
</div>
</template>
<script>
import NavBar from '@/views/layout/navbar'
export default {
name: 'help',
components:{
NavBar
},
data() {
return {
list: [
{
q: '此处是问题此处是问题此处是问题？',
a: '此处是答案此处是答案此处是答案此处是答案此处是答案此处是答案此处是'
},
{
q: '此处是问题？',
a: '此处是答案'
}
]
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.help {
.content {
padding-top: 65px;
padding-bottom: 35px;
text-align: center;
width:618px;
margin: 0 auto;
img {
width: 50%;
}
.search-content {
width: 618px;
height:53px;
border:1px solid rgba(132,132,132,1);
padding-left: 17px;
border-radius:3px;
font-size: 25px;
display: flex;
align-items: center;
input {
padding: 0 10px;
font-size: 21px;
border: none;
outline: none;
flex: 1;
}
.search-btn {
width:151px;
height:55px;
font-size: 22px;
background:rgba(110,140,249,1);
color: white;
line-height: 55px;
// border-radius:3px;
}
}
.result {
.result-item {
padding-top: 84px;
font-size:21px;
line-height: 35px;
.question {
padding-bottom: 20px;
}
.answer {
}
}
text-align: left;
}
}
}
</style>
src/views_pad/tempaltes/slider.vue 0 → 100644
<template>
<!-- <div class="vmatrix-slider">
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<swiperSlide v-for="(item, index) in list" :key="index">
<slot :slider="item"></slot>
</swiperSlide>
</swiper>
</div> -->
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<swiperSlide v-for="(item, index) in list" :key="index">
<slot :slider="item"></slot>
</swiperSlide>
</swiper>
</template>
<script>
// import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
name: 'mySlider',
props: {
list: {
required: true,
default: () => [],
type: Array
}
},
data() {
return {
swiperOption: {
slidesPerView: "auto",
observer: true,
/* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
observerParents: true
}
};
},
methods: {
callback() {}
},
components: {
swiper,
swiperSlide
}
};
</script>
<style>
</style>
src/views_pad/user/about.vue 0 → 100644
<template>
<div class="about">
<NavBar title="关于我们" left-arrow></NavBar>
<div class="content">
<img src="@/assets/img/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_pad/user/help.vue 0 → 100644
<template>
<div class="help">
<NavBar title="帮助反馈" left-arrow></NavBar>
<div class="content">
<div class="search-content">
<van-icon name="search"></van-icon>
<input type="text">
<div class="search-btn">搜索</div>
</div>
<div class="result">
<div class="result-item" v-for="(item, index) in list" :key="index">
<div class="question">
Q:{{item.q}}
</div>
<div class="answer">
A:{{item.a}}
</div>
</div>
</div>
<!-- <img src="@/assets/img/helpbg.png" alt=""> -->
</div>
</div>
</template>
<script>
import NavBar from '@/views/layout/navbar'
export default {
name: 'help',
components:{
NavBar
},
data() {
return {
list: [
{
q: '此处是问题此处是问题此处是问题？',
a: '此处是答案此处是答案此处是答案此处是答案此处是答案此处是答案此处是'
},
{
q: '此处是问题？',
a: '此处是答案'
}
]
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.help {
.content {
padding-top: 65px;
padding-bottom: 35px;
text-align: center;
width:808px;
margin: 0 auto;
img {
width: 50%;
}
.search-content {
width:808px;
height:53px;
border:1px solid rgba(132,132,132,1);
padding-left: 17px;
border-radius:3px;
font-size: 25px;
display: flex;
align-items: center;
input {
padding: 0 10px;
font-size: 21px;
border: none;
outline: none;
flex: 1;
}
.search-btn {
width:151px;
height:55px;
font-size: 22px;
background:rgba(110,140,249,1);
color: white;
line-height: 55px;
// border-radius:3px;
}
}
.result {
.result-item {
padding-top: 84px;
font-size:21px;
line-height: 35px;
.question {
padding-bottom: 20px;
}
.answer {
}
}
text-align: left;
}
}
}
</style>
src/views_pad/user/index.vue 0 → 100644
<template>
<div class="user-container">
<NavBar title="个人中心" >
</NavBar>
<div class="user-content animated fadeIn" >
<img src="@/assets/img/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 animated bounceIn zoomInDown" >
<div class="btn-item ">
<div class="icon" :style="`background-image: url(${uplv})`">
</div>
<div class="des">固件升级</div>
</div>
<div class="btn-item" @click="goHelp">
<div class="icon" :style="`background-image: url(${about})`">
</div>
<div class="des">帮助反馈</div>
</div>
<div class="btn-item" @click="goAbout">
<div class="icon" :style="`background-image: url(${help})`">
</div>
<div class="des">关于我们</div>
</div>
</div>
</div>
</template>
<script>
import NavBar from '@/views/layout/navbar'
export default {
name: 'User',
data() {
return {
uplv: require('../../assets/img/uplv.png'),
about: require('../../assets/img/about.png'),
help: require('../../assets/img/help.png')
}
},
components:{
NavBar
},
methods: {
goAbout() {
this.$router.push({
path: '/about'
})
},
goHelp() {
this.$router.push({
path: '/user/help'
})
},
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("../../assets/img/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;
}
&:first-child::after {
display: none;
}
&::after{
content: "";
width:1.5px;
height:39px;
background:rgba(132,132,132,1);
position: absolute;
top: 28px;
left: 0;
}
}
}
.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