Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit 7ab960e3 by hank
Options

零售模板动画与编辑

parent 85cb752f
Showing with 290 additions and 274 deletions
build/webpack.prod.conf.js
'use strict' "use strict";
const path = require('path') const path = require("path");
const utils = require('./utils') const utils = require("./utils");
const webpack = require('webpack') const webpack = require("webpack");
const config = require('../config') const config = require("../config");
const merge = require('webpack-merge') const merge = require("webpack-merge");
const baseWebpackConfig = require('./webpack.base.conf') const baseWebpackConfig = require("./webpack.base.conf");
const CopyWebpackPlugin = require('copy-webpack-plugin') const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin') const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin') const ExtractTextPlugin = require("extract-text-webpack-plugin");
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin') const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const env = process.env.NODE_ENV === 'testing' // const webpack = require('webpack')
? require('../config/test.env') const WriteJsonPlugin = require("write-json-webpack-plugin");
: require('../config/prod.env') const env =
console.log(webpack.optimize) process.env.NODE_ENV === "testing"
? require("../config/test.env")
: require("../config/prod.env");
// console.log(webpack.optimize);
const webpackConfig = merge(baseWebpackConfig, { const webpackConfig = merge(baseWebpackConfig, {
module: { module: {
rules: utils.styleLoaders({ rules: utils.styleLoaders({
...@@ -48,13 +51,22 @@ const webpackConfig = merge(baseWebpackConfig, { ...@@ -48,13 +51,22 @@ const webpackConfig = merge(baseWebpackConfig, {
devtool: config.build.productionSourceMap ? config.build.devtool : false, devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: { output: {
path: config.build.assetsRoot, path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'), filename: utils.assetsPath("js/[name].[chunkhash].js"),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') chunkFilename: utils.assetsPath("js/[id].[chunkhash].js")
}, },
plugins: [ plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html // http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env': env "process.env": env
}),
new WriteJsonPlugin({
object: {
},
path: "",
// default output is timestamp.json
filename: "data.json",
pretty: true
}), }),
new UglifyJsPlugin({ new UglifyJsPlugin({
uglifyOptions: { uglifyOptions: {
...@@ -70,13 +82,13 @@ const webpackConfig = merge(baseWebpackConfig, { ...@@ -70,13 +82,13 @@ const webpackConfig = merge(baseWebpackConfig, {
// filename: utils.assetsPath('css/[name].[contenthash].css'), // filename: utils.assetsPath('css/[name].[contenthash].css'),
// // Setting the following option to `false` will not extract CSS from codesplit chunks. // // Setting the following option to `false` will not extract CSS from codesplit chunks.
// // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. // // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, // // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 // // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
// allChunks: true, // allChunks: true,
// }), // }),
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].css'), filename: utils.assetsPath("css/[name].css"),
chunkFilename: utils.assetsPath('css/[name].[contenthash].css') chunkFilename: utils.assetsPath("css/[name].[contenthash].css")
}), }),
// Compress extracted CSS. We are using this plugin so that possible // Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped. // duplicated CSS from different components can be deduped.
...@@ -89,10 +101,9 @@ const webpackConfig = merge(baseWebpackConfig, { ...@@ -89,10 +101,9 @@ const webpackConfig = merge(baseWebpackConfig, {
// you can customize output by editing /index.html // you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin // see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing' filename:
? 'index.html' process.env.NODE_ENV === "testing" ? "index.html" : config.build.index,
: config.build.index, template: "index.html",
template: 'index.html',
inject: true, inject: true,
minify: { minify: {
removeComments: true, removeComments: true,
...@@ -100,7 +111,7 @@ const webpackConfig = merge(baseWebpackConfig, { ...@@ -100,7 +111,7 @@ const webpackConfig = merge(baseWebpackConfig, {
removeAttributeQuotes: true removeAttributeQuotes: true
// more options: // more options:
// https://github.com/kangax/html-minifier#options-quick-reference // https://github.com/kangax/html-minifier#options-quick-reference
}, }
// necessary to consistently work with multiple chunks via CommonsChunkPlugin // necessary to consistently work with multiple chunks via CommonsChunkPlugin
}), }),
// keep module.id stable when vendor modules does not change // keep module.id stable when vendor modules does not change
...@@ -140,44 +151,43 @@ const webpackConfig = merge(baseWebpackConfig, { ...@@ -140,44 +151,43 @@ const webpackConfig = merge(baseWebpackConfig, {
// copy custom static assets // copy custom static assets
new CopyWebpackPlugin([ new CopyWebpackPlugin([
{ {
from: path.resolve(__dirname, '../static'), from: path.resolve(__dirname, "../static"),
to: config.build.assetsSubDirectory, to: config.build.assetsSubDirectory,
ignore: ['.*'] ignore: [".*"]
} }
]) ])
] ]
}) });
if (config.build.inlineSource) { if (config.build.inlineSource) {
const InlineSourcePlugin = require('../plugins/InlineSoucePlugins') const InlineSourcePlugin = require("../plugins/InlineSoucePlugins");
webpackConfig.plugins.push( webpackConfig.plugins.push(
new InlineSourcePlugin({ new InlineSourcePlugin({
match: /\.(js|css)/ match: /\.(js|css)/
}) })
) );
} }
if (config.build.productionGzip) { if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin') const CompressionWebpackPlugin = require("compression-webpack-plugin");
webpackConfig.plugins.push( webpackConfig.plugins.push(
new CompressionWebpackPlugin({ new CompressionWebpackPlugin({
asset: '[path].gz[query]', asset: "[path].gz[query]",
algorithm: 'gzip', algorithm: "gzip",
test: new RegExp( test: new RegExp(
'\\.(' + "\\.(" + config.build.productionGzipExtensions.join("|") + ")$"
config.build.productionGzipExtensions.join('|') +
')$'
), ),
threshold: 10240, threshold: 10240,
minRatio: 0.8 minRatio: 0.8
}) })
) );
} }
if (config.build.bundleAnalyzerReport) { if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
webpackConfig.plugins.push(new BundleAnalyzerPlugin()) .BundleAnalyzerPlugin;
webpackConfig.plugins.push(new BundleAnalyzerPlugin());
} }
module.exports = webpackConfig module.exports = webpackConfig;
config/index.js
...@@ -59,7 +59,7 @@ module.exports = { ...@@ -59,7 +59,7 @@ module.exports = {
productionSourceMap: false, productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production // https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map', devtool: '#source-map',
inlineSource: true, inlineSource: false,
// Gzip off by default as many popular static hosts such as // Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you. // Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to: // Before setting to `true`, make sure to:
......
config/prod.env.js
'use strict' 'use strict'
module.exports = { module.exports = {
NODE_ENV: '"production"', NODE_ENV: '"production"',
BASE_API: '"https://equipment.bdideal.com"' BASE_API: '"https://equipment.bdideal.com"',
TEMPLATES_PATH: '"retail"'
} }
\ No newline at end of file
package.json
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
}, },
"dependencies": { "dependencies": {
"animejs": "^3.1.0", "animejs": "^3.1.0",
"aws-sdk": "^2.524.0",
"axios": "^0.18.0", "axios": "^0.18.0",
"babel-runtime": "^6.26.0", "babel-runtime": "^6.26.0",
"node-sass": "^4.9.0", "node-sass": "^4.9.0",
...@@ -60,11 +61,11 @@ ...@@ -60,11 +61,11 @@
"file-loader": "^1.1.4", "file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1", "friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^4.0.0-beta.5", "html-webpack-plugin": "^4.0.0-beta.5",
"mini-css-extract-plugin": "^0.4.5",
"jest": "^22.0.4", "jest": "^22.0.4",
"jest-serializer-vue": "^0.3.0", "jest-serializer-vue": "^0.3.0",
"less": "^3.0.2", "less": "^3.0.2",
"less-loader": "^4.1.0", "less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.5",
"nightwatch": "^0.9.12", "nightwatch": "^0.9.12",
"node-notifier": "^5.1.2", "node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0", "optimize-css-assets-webpack-plugin": "^3.2.0",
...@@ -84,10 +85,11 @@ ...@@ -84,10 +85,11 @@
"vue-style-loader": "^4.1.2", "vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17", "vue-template-compiler": "^2.5.17",
"webpack": "^4.26.0", "webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-bundle-analyzer": "^2.9.0", "webpack-bundle-analyzer": "^2.9.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.0", "webpack-dev-server": "^3.1.0",
"webpack-merge": "^4.1.0" "webpack-merge": "^4.1.0",
"write-json-webpack-plugin": "^1.1.0"
}, },
"engines": { "engines": {
"node": ">= 6.0.0", "node": ">= 6.0.0",
......
src/templates/listingInformation/schemaData.js
...@@ -3,6 +3,7 @@ import defaultData from './defaultData' ...@@ -3,6 +3,7 @@ import defaultData from './defaultData'
import itemList from './itemList' import itemList from './itemList'
import templateInfo from './templateInfo' import templateInfo from './templateInfo'
import sceneData from './sceneData.js' import sceneData from './sceneData.js'
export default { export default {
templateInfo, templateInfo,
// defaultData, // defaultData,
......
src/templates/retail/index.vue
<template> <template>
<swiper :options="swiperOption" <swiper
:class="'glob-container'" :options="swiperOption"
ref="mySwiper" :class="'glob-container'"
@someSwiperEvent="callback" ref="mySwiper"
style="width:1080px;height:1920px;"> @someSwiperEvent="callback"
<swiper-slide style="transform: translate3d(0,0,0)" style="width:1080px;height:1920px;"
class="ani" >
v-for="(page, index) in pages" <swiper-slide
:key="index" style="transform: translate3d(0,0,0)"
@load="loaded(index)"> class="ani"
v-for="(page, index) in pages"
<component v-if="index == sliderActiveIndex" :key="index"
:is="page.component" @load="loaded(index)"
:ref="'child'+index" >
@hook:mounted="loaded(index)" <component
:schemaData="pages[index].schemaData" v-if="index == sliderActiveIndex"
:isEditMode="isEditMode" :is="page.component"
:cancelEdit.sync="cancelEdit" :ref="'child'+index"
:page="index" @hook:mounted="loaded(index)"
:activeIndex="sliderActiveIndex"></component> :schemaData="pages[index].schemaData"
:isEditMode="isEditMode"
:cancelEdit.sync="cancelEdit"
:page="index"
:activeIndex="sliderActiveIndex"
></component>
</swiper-slide> </swiper-slide>
<!-- <swiper-slide> <!-- <swiper-slide>
<div class="container">I'm Slide 2</div> <div class="container">I'm Slide 2</div>
...@@ -30,17 +35,17 @@ ...@@ -30,17 +35,17 @@
</template> </template>
<script> <script>
import mixin from './mixin' import mixin from "./mixin";
import 'swiper/dist/css/swiper.css' import "swiper/dist/css/swiper.css";
import { getQuery } from '@/framework/utils' import { getQuery } from "@/framework/utils";
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from "vue-awesome-swiper";
import { getFilmDetail } from '@/framework/templateApi/index' import { getFilmDetail } from "@/framework/templateApi/index";
import requireAllPage from './pages/index.js' import requireAllPage from "./pages/index.js";
import Message from '@/framework/tempalteMessage' import Message from "@/framework/tempalteMessage";
import Scene from '@/framework/utils/sence' import Scene from "@/framework/utils/sence";
import { setTimeout, clearTimeout } from 'timers' import { setTimeout, clearTimeout } from "timers";
export default { export default {
name: 'page', name: "page",
mixins: [mixin], mixins: [mixin],
components: { components: {
swiper, swiper,
...@@ -48,53 +53,55 @@ export default { ...@@ -48,53 +53,55 @@ export default {
...requireAllPage ...requireAllPage
}, },
computed: { computed: {
swiper () { swiper() {
return this.$refs.mySwiper.swiper return this.$refs.mySwiper.swiper;
} }
}, },
data () { data() {
return { return {
swiperOption: { swiperOption: {
// some swiper options/callbacks // some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数 // 所有的参数同 swiper 官方 api 参数
// ... // ...
} }
} };
}, },
methods: { methods: {
message (data) { message(data) {
Message.send(data, '*') Message.send(data, "*");
}, },
loaded (index) { loaded(index) {
this.$refs['child' + this.sliderActiveIndex][0].enter() setTimeout(() => {
this.$refs["child" + this.sliderActiveIndex][0].enter();
}, 1000);
}, },
edit (index) { edit(index) {
if (getQuery('isEdit')) { if (getQuery("isEdit")) {
this.currentIndex = index this.currentIndex = index;
var item = this.list[index] var item = this.list[index];
this.message( this.message(
{ {
type: 'edit', type: "edit",
item, item,
index index
}, },
'*' "*"
) );
} }
}, },
getList () { getList() {
this.message( this.message(
{ {
type: 'getList', type: "getList",
pages: this.pages pages: this.pages
}, },
'*' "*"
) );
} }
}, },
beforeDestroy () {}, beforeDestroy() {},
mounted () { mounted() {
Scene.EventBus.on("leaveBefore", e => { Scene.EventBus.on("leaveBefore", e => {
console.log("leaveBefore"); console.log("leaveBefore");
this.$refs["child" + this.sliderActiveIndex][0].leave().then(() => { this.$refs["child" + this.sliderActiveIndex][0].leave().then(() => {
console.log("leaveBefore then"); console.log("leaveBefore then");
...@@ -108,39 +115,39 @@ export default { ...@@ -108,39 +115,39 @@ export default {
}); });
// this.$refs['child'][0].enter().then(() => { // this.$refs['child'][0].enter().then(() => {
// }) // })
}, },
created () { created() {
var vm = this var vm = this;
Message.init(e => { Message.init(e => {
var isObj = typeof e.data === 'object' var isObj = typeof e.data === "object";
if (isObj && e.data['type'] == 'setData') { if (isObj && e.data["type"] == "setData") {
vm.setEditData(e.data) vm.setEditData(e.data);
} }
if (isObj && e.data['type'] == 'cancelEdit') { if (isObj && e.data["type"] == "cancelEdit") {
vm.cancelEditAction() vm.cancelEditAction();
} }
if (isObj && e.data['type'] == 'edit') { if (isObj && e.data["type"] == "edit") {
vm.currentIndex = e.data.index vm.currentIndex = e.data.index;
} }
if (isObj && e.data['type'] == 'setList') { if (isObj && e.data["type"] == "setList") {
// vm.list = JSON.parse(JSON.stringify(e.data.list)) // vm.list = JSON.parse(JSON.stringify(e.data.list))
this.setAllData(e.data) this.setAllData(e.data);
} }
if (isObj && e.data['type'] == 'getList') { if (isObj && e.data["type"] == "getList") {
vm.getAllData() vm.getAllData();
} }
if (isObj && e.data['type'] == 'goPage') { if (isObj && e.data["type"] == "goPage") {
vm.swiper.slideTo(parseInt(e.data.index), 500, false) vm.swiper.slideTo(parseInt(e.data.index), 500, false);
} }
}) });
this.swiperOption = { this.swiperOption = {
effect: 'fade', effect: "fade",
observer: true, observer: true,
/* 将observe应用于Swiper的父元素。 /* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时，例如window.resize，Swiper更新。 */ 当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
observerParents: true, observerParents: true,
allowTouchMove: !getQuery('isEdit'), allowTouchMove: !getQuery("isEdit"),
/* slidesPerView: 1, /* slidesPerView: 1,
autoplay: !getQuery("isEdit") autoplay: !getQuery("isEdit")
? { ? {
...@@ -149,55 +156,55 @@ export default { ...@@ -149,55 +156,55 @@ export default {
: false, */ : false, */
loop: false, loop: false,
on: { on: {
init () { init() {
if (!vm.isEditMode) { if (!vm.isEditMode) {
// swiperAnimateCache(this); // 隐藏动画元素 // swiperAnimateCache(this); // 隐藏动画元素
// swiperAnimate(this); // 初始化完成开始动画 // swiperAnimate(this); // 初始化完成开始动画
} }
}, },
slideChange () { slideChange() {
vm.sliderActiveIndex = this.realIndex vm.sliderActiveIndex = this.realIndex;
if (vm.isEditMode) { if (vm.isEditMode) {
// $(".ani").css("visibility", ""); // $(".ani").css("visibility", "");
} }
}, },
slideChangeTransitionEnd () { slideChangeTransitionEnd() {
if (!vm.isEditMode) { if (!vm.isEditMode) {
// swiperAnimate(this); // swiperAnimate(this);
} }
} }
} }
} };
if (getQuery('isEdit')) { if (getQuery("isEdit")) {
this.isEditMode = true this.isEditMode = true;
} else { } else {
this.isEditMode = false this.isEditMode = false;
} }
if (getQuery('filmId') && !this.isEditMode) { if (getQuery("filmId") && !this.isEditMode) {
getFilmDetail(getQuery('filmId')).then(result => { getFilmDetail(getQuery("filmId")).then(result => {
console.log(result) console.log(result);
vm.pages = JSON.parse(result.data.filmData).pageList vm.pages = JSON.parse(result.data.filmData).pageList;
vm.filmId = result.filmId vm.filmId = result.filmId;
}) });
} else { } else {
if (getQuery('isPreview')) { if (getQuery("isPreview")) {
} else { } else {
// vm.getDefaulted(); // vm.getDefaulted();
} }
} }
}, },
data () { data() {
return { return {
date: '', date: "",
img: '', img: "",
currentIndex: '', currentIndex: "",
isEditMode: true, isEditMode: true,
cancelEdit: false, cancelEdit: false,
sliderActiveIndex: 0 sliderActiveIndex: 0
} };
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.glob-container { .glob-container {
......
src/templates/retail/itemList/index.js
import welcome from './welcome' import retail from './retail1'
import notice from './notice' import retail2 from './retail2'
import schedule from './schedule' import retail3 from './retail3'
export default { export default {
welcome, retail,
notice, retail2,
schedule retail3
} }
src/templates/retail/itemList/notice.js deleted 100644 → 0
export default [
{
type: 'image',
name: '企业logo',
description: '请上传png格式企业logo',
dataKey: 'companyLogo',
valueRule: ''
},
{
type: 'text',
name: '企业名称',
description: '',
valueRule: '',
dataKey: 'companyName'
},
{
type: 'text',
name: '通知标题',
valueRule: '',
description: '请输入通知标题',
dataKey: 'noticeTitle'
},
{
type: 'text',
name: '通知昵称',
valueRule: '',
description: '请输入通知昵称',
dataKey: 'noticeNickName'
},
{
type: 'text',
name: '通知内容',
valueRule: '',
description: '请输入通知内容',
dataKey: 'noticeContent'
}
]
src/templates/retail/itemList/retail1.js 0 → 100644
export default [
{
type: 'list',
name: '商品图片列表',
modelSchema: [ // 创建子项的Schema列表
{
img: {
type: 'image',
name: '商品图片', // 字段名称
description: '上传商品图片' // 用户填写时字段提示语
},
price: {
type: 'text',
name: '商品价格', // 字段名称
description: '填写商品价格' // 用户填写时字段提示语
}
}
],
dataKey: 'foodList'
},
{
type: 'text',
name: '标题',
description: '不超过8个字',
dataKey: 'title',
valueRule: ''
},
{
type: 'text',
name: '副标题',
description: '填写金额',
dataKey: 'price',
valueRule: ''
},
{
type: 'image',
name: '宣传二维码',
description: '上传二维码',
dataKey: 'code',
valueRule: ''
}
]
src/templates/retail/itemList/retail2.js 0 → 100644
export default [
{
type: 'image',
name: '背景图片',
description: '请上传背景图片',
dataKey: 'bacground',
valueRule: ''
},
{
type: 'text',
name: '商品名称',
description: '请上传背景图片',
dataKey: 'bacground',
valueRule: ''
}
]
src/templates/retail/itemList/welcome.js deleted 100644 → 0
export default [
{
type: 'image',
name: '企业logo',
description: '请上传png格式企业logo',
dataKey: 'companyLogo',
valueRule: ''
},
{
type: 'text',
name: '企业名称',
description: '',
valueRule: '',
dataKey: 'companyName'
},
{
type: 'text',
name: '中文企业欢迎语',
description: '请输入企业欢迎语',
dataKey: 'welcomeWordZh'
},
{
type: 'text',
name: '英文企业欢迎语',
description: '请输入企业英文欢迎语',
valueRule: '',
dataKey: 'welcomeWordEn'
},
{
type: 'text',
name: '企业英文名称',
description: '请输入企业英文名称',
valueRule: '',
dataKey: 'companyNameEn'
}
]
src/templates/retail/mixin.js
import data from './schemaData.js' import data from './schemaData.js'
import editMethod from './editMethod.js' import editMethod from './editMethod.js'
import requireIcons from '@/icons/requireIcons' import requireIcons from '@/icons/requireIcons'
console.log(JSON.stringify(data)) console.log(JSON.stringify(data))
export default { export default {
data: function () { data: function () {
......
src/templates/retail/pages/retail1.vue
<template> <template>
<div class="container"> <div class="container">
<img class="liner" src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/liner2.png"/> <img
class="liner"
ref="mlxg"
src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/liner2.png"
/>
<div class="title"> <div class="title">
地道美味 <div ref="title">{{getValue('title')}}</div>
麻辣香锅
</div> </div>
<div class="title2">舌尖诱惑</div> <div class="title2">
<div class="img-list"> <div ref="title2">{{getValue('title2')}}</div>
</div>
<div class="img-list" ref="imglist">
<swiper :options="swiperOption" ref="mySwiper" style=" width: 1080px;height: 581px;"> <swiper :options="swiperOption" ref="mySwiper" style=" width: 1080px;height: 581px;">
<swiper-slide <swiper-slide
style="transform: translate3d(0,0,0); width: auto;" style="transform: translate3d(0,0,0); width: auto;"
...@@ -18,7 +23,7 @@ ...@@ -18,7 +23,7 @@
</swiper-slide> </swiper-slide>
</swiper> </swiper>
</div> </div>
<div class="item-price"> <div class="item-price" ref="item-price">
<div class="content"> <div class="content">
¥ ¥
<span class="number">{{schemaData.foodList[sliderActiveIndex]['price']}}</span> <span class="number">{{schemaData.foodList[sliderActiveIndex]['price']}}</span>
...@@ -26,7 +31,7 @@ ...@@ -26,7 +31,7 @@
</div> </div>
<div class="bg"></div> <div class="bg"></div>
</div> </div>
<div class="code-container"> <div class="code-container" ref="code">
<img class="code" :src="getValue('code')" alt /> <img class="code" :src="getValue('code')" alt />
</div> </div>
</div> </div>
...@@ -89,42 +94,41 @@ export default { ...@@ -89,42 +94,41 @@ export default {
targets: this.$refs["title"], targets: this.$refs["title"],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
delay: 1000, delay: 500,
duration: 500, duration: 500,
easing: "easeInOutQuad" easing: "easeInOutQuad"
}).finished, }).finished,
anime({ anime({
targets: this.$refs["decorate"], targets: this.$refs["title2"],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
delay: 500,
duration: 1000, duration: 1000,
delay: 1200,
easing: "easeInOutQuad" easing: "easeInOutQuad"
}).finished, }).finished,
anime({ anime({
targets: this.$refs["surrounding"], targets: this.$refs["imglist"],
translateX: 0, translateY: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 1800, delay: 1200,
easing: "easeInOutQuad" easing: "easeInOutQuad"
}).finished, }).finished,
anime({ anime({
targets: this.$refs["feature-list"], targets: this.$refs["item-price"],
translateX: 0, translateY: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 2100, delay: 1200,
easing: "easeInOutQuad" easing: "easeInOutQuad"
}).finished, }).finished,
anime({ anime({
targets: ".high-light", targets: this.$refs["code"],
translateX: 0, translateY: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
rotate: 360,
// delay: anime.stagger(1000), delay: 1200,
delay: 1500,
easing: "easeInOutQuad" easing: "easeInOutQuad"
}).finished }).finished
]; ];
...@@ -147,8 +151,8 @@ export default { ...@@ -147,8 +151,8 @@ export default {
duration: 0 duration: 0
}); });
anime({ anime({
targets: this.$refs["decorate"], targets: this.$refs["imglist"],
translateX: 2000, translateY: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); });
...@@ -159,24 +163,32 @@ export default { ...@@ -159,24 +163,32 @@ export default {
duration: 0 duration: 0
}); });
anime({ anime({
targets: this.$refs["surrounding"], targets: this.$refs["title"],
translateX: 2000, translateX: 1000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); });
anime({ anime({
targets: this.$refs["feature-list"], targets: this.$refs["title2"],
translateX: 2000, translateX: 1000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); });
anime({ anime({
targets: ".high-light", targets: this.$refs["item-price"],
translateX: 1000, translateY: 1000,
opacity: 0, opacity: 0,
duration: 0 duration: 0,
delay: 0
}); });
// setTimeout(() => { anime({
targets: this.$refs["code"],
translateY: 100,
opacity: 0,
duration: 0,
delay: 0
}); // setTimeout(() => {
// this.enter(); // this.enter();
// }, 1000); // }, 1000);
}, },
...@@ -217,7 +229,7 @@ export default { ...@@ -217,7 +229,7 @@ export default {
centeredSlides: true, centeredSlides: true,
speed: 1000, speed: 1000,
slidesPerView: "auto", slidesPerView: "auto",
spaceBetween: 50, spaceBetween: 70,
loop: true, loop: true,
autoplay: { autoplay: {
delay: 5000 delay: 5000
...@@ -274,7 +286,7 @@ export default { ...@@ -274,7 +286,7 @@ export default {
font-size: 160px; font-size: 160px;
font-family: SourceHanSerifCN; font-family: SourceHanSerifCN;
color: white; color: white;
width: 800px; width: 700px;
transform: skew(0, -8deg); transform: skew(0, -8deg);
transform-origin: left top; transform-origin: left top;
text-align: center; text-align: center;
...@@ -313,7 +325,7 @@ export default { ...@@ -313,7 +325,7 @@ export default {
.content { .content {
position: absolute; position: absolute;
z-index: 5; z-index: 5;
width: 409px; width: 409px;
bottom: 0; bottom: 0;
text-align: center; text-align: center;
......
src/templates/retail/schemaData.js
...@@ -2,6 +2,7 @@ import defaultData from './defaultData' ...@@ -2,6 +2,7 @@ import defaultData from './defaultData'
import itemList from './itemList' import itemList from './itemList'
import templateInfo from './templateInfo' import templateInfo from './templateInfo'
import sceneData from './sceneData.js' import sceneData from './sceneData.js'
export default { export default {
templateInfo, templateInfo,
// defaultData, // defaultData,
...@@ -14,22 +15,22 @@ export default { ...@@ -14,22 +15,22 @@ export default {
defaultData: defaultData.retail, defaultData: defaultData.retail,
schemaData: defaultData.retail, schemaData: defaultData.retail,
itemList: itemList.retail itemList: itemList.retail
},
{
name: '零售2',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retailtwo.jpg',
component: 'retail2',
defaultData: defaultData.retail2,
schemaData: defaultData.retail2,
itemList: itemList.retail2
},
{
name: '零售3',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retailtwo.jpg',
component: 'retail3',
defaultData: defaultData.retail3,
schemaData: defaultData.retail3,
itemList: itemList.retail3
} }
// {
// name: '零售2',
// thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retailtwo.jpg',
// component: 'retail2',
// defaultData: defaultData.retail2,
// schemaData: defaultData.retail2,
// itemList: itemList.retail
// }
// {
// name: '零售3',
// thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retailtwo.jpg',
// component: 'retail3',
// defaultData: defaultData.retail3,
// schemaData: defaultData.retail3,
// itemList: itemList.retail
// }
] ]
} }
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