Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit 924c9343 by hank
Options

企业文化模板

parent b34fc07b
Showing with 429 additions and 107 deletions
plugins/InlineSoucePlugins.js
......@@ -40,7 +40,7 @@ class InlineSourcePlugin {
if (url) {
newTag.innerHTML = compilation.assets[url.replace('./', '')].source() // 取到文件内容放到innerHtml
delete compilation.assets[url.replace('./', '')]
console.log(compilation.assets)
// console.log(compilation.assets)
return newTag
}
return tag
......
src/App.vue
......@@ -5,7 +5,7 @@
</template>
<script>
import page from './components/page/index.vue'
import page from './components/template/index.vue'
var self = null
window.getQuery = function (key) {
var url = location.search // 获取url中"?"符后的字串
......
src/assets/app.scss
......@@ -80,116 +80,15 @@
border: 1px dashed yellowgreen;
animation: border 2s ease-in-out infinite;
}
.container {
padding: 0 45px;
background: linear-gradient(to right, #32295E, #5277AB);
height: 450px;
width: 800px;
margin: 0 auto;
color: white;
box-sizing: border-box;
overflow: hidden;
}
.title {
height: 50px;
line-height: 50px;
padding: 0 0px;
border-bottom: #eeeeee 1px solid;
position: relative;
}
.name {
/* padding: 0 20px; */
border-bottom: #eeeeee 1px solid;
padding: 10px 0px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
margin-bottom: 17px;
font-family: Arial, Helvetica, sans-serif;
}
.name>span {
font-size: 36.25px;
}
.name span {
display: inline-block;
min-width: 30px;
}
.bottom {
display: flex;
justify-content: space-between;
/* padding-top: 20px; */
}
.bottom img {
height: 280px;
width: 280px;
}
.bottom-left {}
.bottom-right {
padding-top: 20px;
}
.bottom-right .bottom-right-item {
height: 30px;
line-height: 30px;
margin-bottom: 10px;
}
.bottom-right .item-name {
display: inline-block;
height: 30px;
line-height: 30px;
overflow: hidden;
padding: 0 5px;
width: 60px;
}
.bottom-right .item-des {
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 5px;
width: 220px;
overflow: hidden;
letter-spacing: 1px;
/* overflow: hidden; */
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.h2-right {
display: flex;
align-items: center;
font-size: 20px;
}
.h2-right img {
height: 42px;
width: 42px;
}
.right-icon {
margin-left: 25px;
/* height: 32px; */
}
/* .delay */
@keyframes bgani {
0% {
......
src/components/page/index.vue
<template>
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback" style="width:800px">
<swiper-slide class="ani" v-for="(page, index) in pages" :key="index">
<component
:is="page.component"
......@@ -239,6 +239,7 @@ export default {
/* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
observerParents: true,
allowTouchMove: false,
slidesPerView: 1,
autoplay: !getQuery('isEdit')
? {
......
src/components/template/methods.js 0 → 100644
export default {
created () {
window.addEventListener(
'message',
(e) => {
if (e.source != window.parent) return
if (typeof e.data === 'object' && e.data['type'] === 'editPage') {
if (this.page === e.data['page']) {
this.currentIndex = e.data['index']
}
}
},
false
)
},
watch: {
cancelEdit (value) {
console.log('cancels')
if (value === true) {
this.currentIndex = ''
this.$emit('update:cancelEdit', false)
}
}
},
methods: {
getDefaulted () {
this.list = this.list.map(function (item) {
return (item = Object.assign(item, item.default))
})
},
message (data) {
window.parent.postMessage(data, '*')
},
edit (index) {
if (getQuery('isEdit')) {
this.currentIndex = index
var item = this.list[index]
console.log(this.currentIndex)
this.message(
{
type: 'edit',
item,
index,
page: this.page
},
'*'
)
}
},
getList () {
this.message(
{
type: 'getList',
list: this.list
},
'*'
)
},
getValue (index) {
return this.list[index] ? this.list[index]['value'] : ''
},
getStyle (index) {
return this.list[index] ? this.list[index]['style'] : ''
},
isEdited (index) {
return this.isEditMode && this.currentIndex === index ? 'isEdited' : ''
},
isEdit (index) {
return this.isEditMode ? 'isEdit' : ''
},
isAnimeted (index) {
return this.isEditMode ? '' : 'animated'
},
timeFormate (timeStamp) {
let dateString = ''
let year = new Date(timeStamp).getFullYear()
let month =
new Date(timeStamp).getMonth() + 1 < 10
? '0' + (new Date(timeStamp).getMonth() + 1)
: new Date(timeStamp).getMonth() + 1
let date =
new Date(timeStamp).getDate() < 10
? '0' + new Date(timeStamp).getDate()
: new Date(timeStamp).getDate()
let hh =
new Date(timeStamp).getHours() < 10
? '0' + new Date(timeStamp).getHours()
: new Date(timeStamp).getHours()
let mm =
new Date(timeStamp).getMinutes() < 10
? '0' + new Date(timeStamp).getMinutes()
: new Date(timeStamp).getMinutes()
// let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
// return year + "年" + month + "月" + date +"日"+" "+hh+":"+mm + "" + " " + hh + ":" + mm; ;
dateString = year + '.' + month + '.' + date
return dateString
// console.log(this.nowTime);
}
}
}
src/components/template/mixin.js 0 → 100644
import data from './pages.js'
console.log(JSON.stringify(data))
export default {
data: function () {
return {
pages: data
}
},
created: function () {
console.log('我是mixin 的crteated')
}
}
src/components/template/page1.vue 0 → 100644
<template>
<div class="container">
<div class="logo">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
alt
/>
</div>
<div class="title">企业简介——迈动互联（北京）信息科技有限公司</div>
<div class="bottom-list">
<div class="bottom-item">
<div class="icon">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/tuandui.png"
alt
/>
<div class="name">WHO ARE WE</div>
<div class="name-zh">我们是谁</div>
</div>
</div>
<div class="bottom-item">
<div class="icon">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/product.png"
alt
/>
<div class="name">WHO ARE WE</div>
<div class="name-zh">我们是谁</div>
</div>
</div>
<div class="bottom-item">
<div class="icon">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/honour.png"
alt
/>
<div class="name">WHO ARE WE</div>
<div class="name-zh">我们是谁</div>
</div>
</div>
</div>
</div>
</template>
<script>
import methods from "./methods";
export default {
props: ["list", "page", "isEditMode", "cancelEdit"],
mixins: [methods],
created() {
// console.log(this.list);
},
mounted() {},
data() {
return {
currentIndex: "",
date: "2019.07.04",
img: "",
currentIndex: ""
};
}
};
</script>
<style lang="scss" scoped>
.container {
position: relative;
margin: 0 auto;
color: white;
box-sizing: border-box;
overflow: hidden;
width: 1920px;
height: 1080px;
background: #dcdcdc
url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/bgs.png")
no-repeat top left;
background-size: 100%;
.logo {
position: absolute;
top: 50px;
left: 101px;
img {
width: 156px;
height: 50px;
}
}
.title {
font-size: 45px;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(49, 49, 49, 1);
position: absolute;
top: 150px;
margin: 0 auto;
width: 100%;
text-align: center;
}
.bottom-list {
position: absolute;
display: flex;
top: 443px;
padding-left: 223px;
.bottom-item {
width: 416px;
height: 542px;
background: rgba(246, 246, 246, 1);
box-shadow: 0px 44px 63px 0px rgba(31, 31, 31, 0.15);
border-radius: 12px;
position: relative;
margin-right: 117px;
.icon {
// position: absolute;
padding-left: 42px;
padding-top: 52px;
left: 42px;
top: 52px;
img {
height: 53px;
}
}
.name {
margin-top: 36px;
height: 16px;
font-size: 16px;
font-family: ShreeDev0714-Bold;
font-weight: bold;
color: rgba(77, 77, 77, 1);
}
.name-zh {
margin-top: 87px;
height: 39px;
font-size: 39px;
line-height: 1;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(59, 59, 59, 1);
}
}
}
}
</style>
src/components/template/pages.js 0 → 100644
export default [
{
name: '企业文化',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/thumb.jpg',
component: 'culture',
list: [
{
type: 'text',
name: '楼层',
value: '',
description: '',
style: {
color: 'white'
},
default: {
value: '2F'
}
}
]
},
{
name: '照片墙',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/thumb.jpg',
component: 'photoWall',
list: [
{
type: 'text',
name: '楼层',
value: '',
description: '',
style: {
color: 'white'
},
default: {
value: '2F'
}
}
]
}
]
src/components/template/photoWall.vue 0 → 100644
<template>
<div class="container">
<div class="logo">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
alt
/>
</div>
<div class="title">照片墙</div>
<div class="photo-container">
<div class="photo-wall">
<div class="wall">
<div class="wall-1"></div>
<div class="wall-2"></div>
</div>
<div class="img-list">
<img src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png" alt />
<img src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png" style=" transform: translate3d(59px,50px,0) rotate3d(0,1,0,-45deg);" alt />
<img src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png" alt />
<img src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png" alt />
</div>
</div>
</div>
</div>
</template>
<script>
import methods from "./methods";
export default {
props: ["list", "page", "isEditMode", "cancelEdit"],
mixins: [methods],
created() {
// console.log(this.list);
},
mounted() {},
data() {
return {
currentIndex: "",
date: "2019.07.04",
img: "",
currentIndex: ""
};
}
};
</script>
<style lang="scss" scoped>
.container {
position: relative;
margin: 0 auto;
color: white;
box-sizing: border-box;
overflow: hidden;
width: 1920px;
height: 1080px;
background: #dcdcdc
url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/bgs.png")
no-repeat top left;
background-size: 100%;
.logo {
position: absolute;
top: 50px;
left: 101px;
img {
width: 156px;
height: 50px;
}
}
.title {
font-size: 45px;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(49, 49, 49, 1);
position: absolute;
top: 150px;
margin: 0 auto;
width: 100%;
text-align: center;
}
.photo-container {
position: absolute;
// display: flex;
top: 343px;
height: 600px;
width: 100%;
perspective: 2000px;
.photo-wall {
// transform-style: preserve-3d;
.wall {
width: 400px;
position: relative;
right: 0;
top: 0;
left: 0;
margin-left: 1200px;
// padding-left: 800px;
transform-style: preserve-3d;
// perspective: 10000px;
.wall-1 {
position: absolute;
transform: rotateY(-45deg) translateY(0) translateX(-300px);
width: 600px;
height: 600px;
background: #000;
}
.wall-2 {
position: absolute;
transform: rotateY(45deg) translateX(300px) translateY(0);
// transform-origin: 0 0;
width: 600px;
height: 600px;
background: #000;
}
}
}
.img-list {
line-height: 300px;
z-index: 10;
img {
transform: translateZ(-800px);
height: 200px;
width: auto;
margin-right: 100px;
}
}
}
}
</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