Authored by ccbikai

add title image

... ... @@ -5,7 +5,7 @@
<focus v-bind:list="floor.data"></focus>
</div>
<div class="title-image" v-if="floor.titleImage">
<title-image></title-image>
<title-image v-bind:floor="floor.data"></title-image>
</div>
</template>
</div>
... ... @@ -40,5 +40,7 @@
</script>
<style>
.resources {
background: #f6f6f6;
}
</style>
... ...
<template>
<div class="floor-header">
{{title.title}}
<a class="more" href="{{title.moreUrl}}">
{{title.moreName}}
</a>
</div>
</template>
<script>
module.exports = {
props: ['title']
};
</script>
<style>
.floor-header {
position: relative;
width: 100%;
height: 100px;
font-size: 32px;
line-height: 100px;
text-align: center;
font-weight: bold;
border-top: 1px solid #eee;
margin-top: 20px;
background: #fff;
.more {
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
}
}
</style>
... ...
... ... @@ -34,6 +34,9 @@
}
.swipe-item {
a {
display: block;
}
img {
width: 100%;
height: 100%;
... ...
<template>
<div class="xss">
title-image
</div>
<floor-header v-bind:title="floor.title"></floor-header>
<a class="image" v-bind:href="floor.image.url">
<img v-bind:src="floor.image.src | resize 750 364">
</a>
</template>
<script>
const floorHeader = require('component/resources/floor-header.vue');
module.exports = {
data() {
return {
message: 'resources'
};
props: ['floor'],
components: {
floorHeader: floorHeader
}
};
</script>
<style>
.title-image {
a {
display: block;
}
.image {
width: 100%;
height: 364px;
}
img {
width: 100%;
height: 100%;
}
}
</style>
... ...