提交 171c7cb0 编写于 作者: guangjun.yang's avatar guangjun.yang

头部组件

上级 5c3f5abf
<template>
<div>
eeee
</div>
</template>
\ No newline at end of file
<template>
<div :style="{'height': height, 'background-color': bgColor}"></div>
</template>
<script>
export default {
props: {
height: {
type: String,
default: '1px'
},
bgColor: {
type: String,
default: '#F8F9FA'
}
}
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
// @import '@/assets/style/global';
</style>
<!-- 头部组件 -->
<template>
<section class="common-header" :style="{'background-color': bgColor}">
<img src="" @click="back"/>
<span></span>
</section>
</template>
<script>
export default {
props: {
title: {
type: String,
default: '项目名称'
},
bgColor: {
type: String,
default: '#fff'
}
},
methods: {
back() {
if( true ) {
this.$router.history(-1);
} else {
this.$rocNative.back();
}
}
},
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
@import '@/assets/style/global';
.common-header {
margin-top: px2rem(60px);
}
</style>
<template>
<div class="common-loader loader--style3" title="2">
<div class="loader-mask"></div>
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40" height="40" viewBox="0 0 60 60" style="enable-background:new 0 0 80 80;" xml:space="preserve">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"/>
</path>
</svg>
</div>
</template>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
.common-loader {
&-mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
// background: rgba(0, 0, 0, 0.5);
}
svg {
position: absolute;
top: px2rem(280px);
left: px2rem(172px);
z-index: 101;
}
}
svg path, svg rect{
// fill: #fff;
// fill: #449284;
fill: #449284;
}
</style>
<template>
<section class="common-show-all" >
<span :class="{'margin-top15': needMarginTop}" @click="showAllItem">{{btnText}}</span>
</section>
</template>
<script>
export default {
data() {
return {
}
},
props: {
needMarginTop: {
type: Boolean,
default: false
},
btnText: {
type: String,
default: '查看全部'
},
itemIndex: {
type: String,
default: '0'
}
},
methods: {
showAllItem() {
this.$emit('showAllItem')
}
}
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
// @import '@/assets/style/global';
.common-show-all {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: px2rem(6px);
span {
display: inline-block;
width: px2rem(345px);
height: px2rem(40px);
line-height: px2rem(40px);
margin-bottom: px2rem(15px);
text-align: center;
border-radius: px2rem(22px);
color: #676869;
background: #F8F9FA;
}
.margin-top15 {
margin-top: px2rem(15px);
}
}
</style>
<!-- Tabs组件 -->
<template>
<section class="common-tabs">
</section>
</template>
<script>
export default {
props: {
tapList: {
type: Array,
default: () => []
}
},
methods: {
},
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
@import '@/assets/style/global';
.common-tabs {
margin-top: 0;
}
</style>
<!-- Swipter的子组件 -->
<template>
<section class="common-swiper-item">
</section>
</template>
<script>
export default {
props: {
itemData: {
type: Array,
default: () => []
}
},
methods: {
},
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
@import '@/assets/style/global';
.common-swiper-item {
margin-top: 0;
}
</style>
<!-- Tabs组件 -->
<template>
<section class="common-tabs">
dd
</section>
</template>
<script>
export default {
props: {
tapList: {
type: Array,
default: () => []
}
},
methods: {
},
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
@import '@/assets/style/global';
.common-tabs {
margin-top: 0;
}
</style>
<!-- Tabs组件 -->
<template>
<div class="common-tips">
ewfwef
</div>
</template>
<script>
export default {
props: {
tipList: {
type: Array,
default: () => []
}
},
methods: {
},
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/mixin';
@import '@/assets/style/global';
.common-tabs {
margin-top: 0;
}
</style>
<!-- Tabs组件 -->
<template>
<div class="common-header">
<span class="left">
<img src="../../assets/images/left-array-black.png" @click="back" />
</span>
<span class="center">{{title}}</span>
<span v-show="needRightBtn" class="right">
<img src="../../assets/images/left-array-black.png" @click="back" />
</span>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "标题内容标题内容标题内容标题"
},
needRightBtn: {
type: Boolean,
default: true
}
},
methods: {
back() {}
}
};
</script>
<style lang="scss" scoped>
// @import '@/assets/style/mixin';
// @import '@/assets/style/global';
// .common-header {
// display: flex;
// justify-content: center; /* 水平居中 */
// text-align: center;
// }
.common-header {
display: flex;
width: 100%;
height: 44px;
line-height: 44px;
flex-direction: row nowrap;
align-content: center;
align-items: center;
text-align: center;
justify-content: center; /* 水平居中 */
span {
display: block;
}
.left {
width: 60px;
}
.center {
flex: 1;
font-size: 17px;
color: #030303;
}
.right {
width: 60px;
}
img {
width: 20px;
height: 20px;
}
}
</style>
<template>
<div class="container">
<h1>nuxt-ssr</h1>
<ve-line :data="chartData"></ve-line>
<!-- <h1>nuxt-ssr</h1> -->
<CommonTitle></CommonTitle>
<!-- <ve-line :data="chartData"></ve-line> -->
</div>
</template>
<script>
import VeLine from 'v-charts/lib/line'
import CommonTitle from '../components/common/common-title'
export default {
async asyncData() {
data() {
return {
chartData: {
columns: ['date', 'PV'],
......@@ -24,7 +26,12 @@ export default {
}
}
},
components: { VeLine },
async asyncData() {
return {
}
},
components: { CommonTitle, VeLine },
created() {
// this.$store.dispatch('searchHospital', { name: '测试' });
},
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册