Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 4a05cc19 by hank
Options

全部模板

parent bd8b580d
Showing with 551 additions and 155 deletions
public/index.html
......@@ -6,6 +6,8 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/vue2-animate/dist/vue2-animate.min.css"/>
<title>Vmatrix</title>
</head>
<body>
......
src/router/index.js
......@@ -10,6 +10,7 @@ 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 TempaltesAll from '@/views/tempaltes/all.vue'
import TempalteEdit from '@/views/tempaltes/edit.vue'
import TempaltePreview from '@/views/tempaltes/preview.vue'
import TempalteDetail from '@/views/tempaltes/detail.vue'
......@@ -24,6 +25,7 @@ const router = new Router({
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: '/groups', name: 'Groups', component: Groups, meta: { keepAlive: true } },
......
src/views/layout/index.vue
<template>
<div class="layout">
<div class="layout-content">
<keep-alive>
<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="{
......@@ -32,12 +32,14 @@ export default {
data() {
return {
index: 0,
currentPath: ''
currentPath: '',
keepAlive: false
}
},
watch: {
$route: function(val) {
this.currentPath = val.path
this.keepAlive = val.meta.keepAlive
}
},
components: {
......
src/views/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"></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
}
});
}
},
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/tempaltes/edit.vue
......@@ -11,7 +11,8 @@
<div class="left-item" @click="preview">
<van-icon name="eye-o"/>预览
</div>
<div class="left-item" @click="pub">发布</div>
<div class="left-item" @click="pub">
<svg-icon icon-class="guide" />发布</div>
</div>
<div class="top-right">
方案名称：
......@@ -24,7 +25,7 @@
v-if="loaded"
:style="{
}"
:src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId"
:src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '&now=' + Date.now()"
frameborder="0"
></iframe>
</div>
......@@ -227,7 +228,7 @@ export default {
// console.log(res, "更新影片成功");
// this.$router.back();
// });
// this.$router.back();
this.$router.back();
});
}
},
......@@ -300,6 +301,9 @@ export default {
.van-icon {
margin-right: 5px;
}
.svg-icon {
margin-right: 5px;
}
}
}
.top-right {
......
src/views/tempaltes/index.vue
<template>
<div class="templates-container">
<NavBar title="模板库" ></NavBar>
<NavBar title="模板库"></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 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-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 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 class="template-list">
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<div style="padding-left: 50px;" v-show="activeIndex===0">
<div class="banner">
<swiper :options="bannerOption" ref="bannerSwiper" @someSwiperEvent="bannerCallback">
<!-- slides -->
<swiper-slide @click.native="showCustom" v-if="activeIndex===1">
<div class="template-item">
<div class="template-item-top" :style="{
'background-image': 'url(./img/ps/custom.png)'
}">
<div class="tag">推荐</div>
<swiper-slide v-for="(item, index) in bannerList" :key="index">
<div class="banner-item">
<img :src="item.url" alt>
</div>
</swiper-slide>
<!-- Optional controls -->
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"
slot="pagination"
>
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
</div>
<!-- <div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>-->
</swiper>
</div>
<div class="hot-template">
<div class="hot-title">
<div class="left">热门精选</div>
<div class="right" @click="goAll">查看全部></div>
</div>
<div class="template-list-hot">
<swiper :options="swiperOption" @someSwiperEvent="callback">
<!-- slides -->
<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>
<div class="title">{{item.templateName}}</div>
</div>
<div class="template-item-bottom">
<div class="template-item-title">定制化模板</div>
<div class="template-item-tips">
为您量身打造最合适的可视化方案
</div>
<div>
<img src="../../../public/img/ps/up.png" alt="">
</div>
</swiper-slide>
</swiper>
</div>
</div>
<div class="hot-template">
<div class="hot-title">
<div class="left">新品来袭</div>
<div class="right" @click="goAll">查看全部></div>
</div>
<div class="template-list-hot">
<swiper :options="swiperOption" @someSwiperEvent="callback">
<!-- slides -->
<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>
<div class="title">{{item.templateName}}</div>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</div>
<div class="template-list" style="padding-left: 50px;" v-if="activeIndex===1">
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides -->
<swiper-slide @click.native="showCustom">
<div class="template-item">
<div
class="template-item-top"
:style="{
'background-image': 'url(./img/ps/custom.png)'
}"
>
<div class="tag">推荐</div>
</div>
</swiper-slide>
<swiper-slide v-for="(item, index) in list" :key="index" @click.native="goDetail(item)">
<div class="template-item">
<div class="template-item-top" :style="{
'background-image': 'url(' + (item.templateUrl ? item.templateUrl : '../../img/ps/box.png') + ')'
}">
<div class="tag">推荐</div>
<div class="template-item-bottom">
<div class="template-item-title">定制化模板</div>
<div class="template-item-tips">为您量身打造最合适的可视化方案</div>
<div>
<img src="../../../public/img/ps/up.png" alt>
</div>
<div class="template-item-bottom">
<div class="template-item-title" v-show="activeIndex === 0">{{item.templateName}}</div>
<div class="template-item-title" v-show="activeIndex === 1">{{item.filmName ? item.filmName : '暂无名称'}}</div>
<div class="template-item-tips">
为您量身打造最合适的可视化方案
</div>
<div>
<img src="../../../public/img/ps/up.png" alt="">
</div>
</div>
</div>
</swiper-slide>
<swiper-slide v-for="(item, index) in list" :key="index" @click.native="goDetail(item)">
<div class="template-item">
<div
class="template-item-top"
:style="{
'background-image': 'url(' + (item.templateUrl ? item.templateUrl : '../../img/ps/box.png') + ')'
}"
>
<div class="tag">推荐</div>
</div>
<div class="template-item-bottom">
<div class="template-item-title" v-show="activeIndex === 0">{{item.templateName}}</div>
<div
class="template-item-title"
v-show="activeIndex === 1"
>{{item.filmName ? item.filmName : '暂无名称'}}</div>
<div class="template-item-tips">为您量身打造最合适的可视化方案</div>
<div>
<img src="../../../public/img/ps/up.png" alt>
</div>
</div>
</swiper-slide>
<!-- Optional controls -->
<!-- <div class="swiper-pagination" slot="pagination"></div>
</div>
</swiper-slide>
<!-- Optional controls -->
<!-- <div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div> -->
</swiper>
<div class="swiper-scrollbar" slot="scrollbar"></div>-->
</swiper>
</div>
<van-dialog
style="width: 50%"
v-model="show"
title="请留下您的联系方式，我们将在24小时与您联系"
show-cancel-button
>
<div class="dialog-content">
<van-cell-group>
<van-field
v-model="username"
required
clearable
label="手机号"
placeholder="请输入手机号"
/>
<van-field
v-model="password"
type="password"
label="验证码"
placeholder="请输入验证码"
required
/>
<van-field
v-model="password"
type="password"
label="公司名称"
placeholder="请输入公司名称"
required
/>
</van-cell-group>
</div>
</van-dialog>
<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.code"
type="password"
label="验证码"
placeholder="请输入验证码"
required
/>
<van-field
v-model="people.company"
type="password"
label="公司名称"
placeholder="请输入公司名称"
required
/>
</van-cell-group>
</div>
</van-dialog>
</div>
</template>
<script>
import NavBar from '@/views/layout/navbar'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getTempalteList, getFilmList } from '@/api/api'
import NavBar from "@/views/layout/navbar";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { getTempalteList, getFilmList } from "@/api/api";
export default {
name: 'Tempaltes',
name: "Tempaltes",
data() {
return {
swiperOption: {
slidesPerView: 'auto'
slidesPerView: "auto"
},
bannerOption: {
// effect: 'fade',
slidesPerView: "auto",
parallax: true,
pagination: {
el: ".swiper-pagination"
},
clickable: true,
bulletActiveClass: "swiper-pagination-bullet-active"
// on: {
// touchEnd: function(e) {
// console.log(e)
// }
// }
},
people: {},
show: false,
activeIndex: 0,
list: [
......@@ -139,59 +213,79 @@ export default {
// { 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" },
],
bannerList: [
{
url: "./img/ps/custom.png"
},
{
url: "./img/ps/custom.png"
},
{
url: "./img/ps/custom.png"
}
]
}
};
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
swiper() {
return this.$refs.mySwiper.swiper;
}
},
created() {
this.getList()
this.getList();
},
methods: {
callback() {
callback() {},
bannerCallback(e) {
console.log(e, "banner");
},
changeBtn(index) {
this.activeIndex = index
if( index == 0 ) {
this.getList()
this.activeIndex = index;
if (index == 0) {
this.getList();
} else {
this.getList2()
this.getList2();
}
},
getList() {
getTempalteList().then(res => {
console.log(res)
this.list = res.data.list
})
console.log(res);
this.list = res.data.list;
});
},
getList2() {
getFilmList().then(res => {
console.log(res)
this.list = res.data.list
})
console.log(res);
this.list = res.data.list;
});
},
goEdit(item) {
this.$router.push({
path: '/tempaltes/edit',
path: "/tempaltes/edit",
query: {
templateId: item.templateId
}
})
});
},
goDetail(item) {
this.$router.push({
path: '/tempaltes/detial',
path: "/tempaltes/detial",
query: {
templateId: item.templateId
}
})
});
},
goAll() {
this.$router.push({
path: "/tempaltes/all",
query: {
}
});
},
showCustom() {
this.show = true
this.show = true;
}
},
components: {
......@@ -199,35 +293,36 @@ export default {
swiper,
swiperSlide
}
}
};
</script>
<style lang="scss" scoped>
.templates-container {
padding-bottom: 100px;
.swiper-slide {
width: auto;
}
padding-left: 50px;
.static-top {
padding-left: 50px;
padding-top: 40px;
display: flex;
justify-content: space-between;
}
.tab-btn {
display: flex;
color:rgba(51,51,51,.6);
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);
color: rgba(51, 51, 51, 1);
}
.active {
color:rgba(51,51,51,1);
color: rgba(51, 51, 51, 1);
font-weight: bold;
}
}
.sort-container {
display: flex;
......@@ -235,20 +330,70 @@ export default {
display: flex;
align-items: center;
padding-right: 60px;
color:rgba(51,51,51,.8);
color: rgba(51, 51, 51, 0.8);
font-size: 23px;
span {
padding-right: 10px;
}
.active {
color:rgba(51,51,51,1);
color: rgba(51, 51, 51, 1);
}
}
}
.banner {
width: 1260px;
padding-top: 56px;
// padding-left: 50px;
.swiper-container {
// width:1260px;
// margin-left: 0;
padding-bottom: 50px;
}
.banner-item {
width: 1260px;
height: 324px;
img {
width: 1260px;
height: 324px;
}
}
}
.template-list-hot {
.template-item-2 {
margin-right: 42px;
height:436px;
min-width:246px;
position: relative;
img {
height: 100%;
width: auto;
}
.title {
font-size:24px;
position: absolute;
left: 19px;
bottom: 22px;
color: white;
}
.point {
position: absolute;
right: 15px;
top: 15px;
font-size: 21px;
color: white;
vertical-align: middle;
.van-icon {
color: #F73939;
vertical-align: text-top;
margin-right: 10px;
}
}
}
}
.template-list {
padding-top: 100px;
.template-item {
width:575.5px;
width: 575.5px;
margin-right: 34.5px;
position: relative;
.template-item-top {
......@@ -256,21 +401,25 @@ export default {
position: absolute;
top: 12px;
right: 12px;
width:55px;
height:24.5px;
width: 55px;
height: 24.5px;
color: white;
font-size: 16px;
line-height: 24.5px;
background:linear-gradient(88deg,rgba(128,116,247,1) 0%,rgba(94,161,251,1) 100%);
border-radius:6px;
background: linear-gradient(
88deg,
rgba(128, 116, 247, 1) 0%,
rgba(94, 161, 251, 1) 100%
);
border-radius: 6px;
}
height:351px;
background-color:rgba(255,255,255,1);
height: 351px;
background-color: rgba(255, 255, 255, 1);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
box-shadow:0px 7px 49px 5px rgba(73,73,73,0.18) inset;
box-shadow: 0px 7px 49px 5px rgba(73, 73, 73, 0.18) inset;
}
.template-item-bottom {
text-align: center;
......@@ -282,20 +431,37 @@ export default {
.template-item-tips {
font-size: 20.5px;
line-height: 35px;
width:208px;
width: 208px;
margin: 0 auto;
text-align: center;
color:rgba(51,51,51,.8);
color: rgba(51, 51, 51, 0.8);
}
background:rgba(255,255,255,1);
background: rgba(255, 255, 255, 1);
img {
padding-top: 30px;
width:21px;
height:9px;
width: 21px;
height: 9px;
}
}
}
}
.hot-template {
padding-top: 66px;
.hot-title {
font-weight:500;
display: flex;
justify-content: space-between;
padding-right: 43px;
box-sizing: border-box;
font-size: 24px;
padding-bottom: 30px;
.left {
color: #333;
}
.right {
color: #6e8cf9;
}
}
}
.dialog-content {
height: 240px;
......@@ -305,3 +471,22 @@ export default {
}
}
</style>
<style lang="scss">
.banner {
.swiper-pagination-bullet {
display: inline-block;
width: 7px;
height: 7px;
opacity: 1;
border-radius: 10px;
background: #bcbcbc;
margin: 0 6px;
cursor: pointer;
transition: width 0.3s ease-in-out;
}
.swiper-pagination-bullet-active {
background: #3997f7;
width: 21px;
}
}
</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