c5_labsci/fapp/ciyon_ap/pages/demo/css/pageflex.vue

36 lines
1.8 KiB
Vue

<template>
<view class="ciy-page">
<ciy-header title="页面flex布局示例"></ciy-header>
<view class="bg7 py4">.ciy-page全包裹 头部</view>
<view class="main">
<view v-for="n in 5" :key="n" class="txt1 py4"> 占位 {{n}}</view>
<view class="txt-center">主体 .main</view>
<view v-for="n in 10" :key="n" class="txt1 py4"> 占位 {{n}}</view>
</view>
<view class="bg5 py4" :style="{marginBottom:footer_safe_height + 'px'}">底部</view>
<ciy-tabbar ref="tabbar"></ciy-tabbar>
</view>
</template>
<style>
</style>
<script>
export default {
data() {
return {
ciysvg: '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M987.136 384.512C919.552 131.584 668.16-22.528 415.232 27.136c219.648-41.984 434.176 79.36 488.96 283.136 57.344 214.016-82.944 437.76-313.344 499.2-49.664 13.312-78.848 64-65.536 113.152 13.312 49.664 64 78.848 113.152 65.536 263.168-70.144 418.816-340.48 348.672-603.648zM116.224 713.216C58.88 499.2 199.68 275.456 430.08 214.016c49.664-13.312 78.848-64 65.536-113.152C482.816 51.2 432.128 21.504 382.464 34.816c-263.68 70.656-419.84 340.992-349.184 604.16 67.584 252.928 319.488 407.04 571.392 356.864-219.648 42.496-433.664-78.848-488.448-282.624z m93.184-203.776L291.84 449.536c44.544-32.256 90.112-32.256 133.12-0.512l83.456 60.928-149.504-230.4-149.504 229.888z m516.096-60.416L808.96 509.952l-149.504-229.888-149.504 229.376 82.432-59.904c44.544-32.256 90.112-32.256 133.12-0.512z m-366.08 291.84L441.856 680.96c44.544-32.256 90.112-32.256 133.12-0.512l83.456 60.928-149.504-230.4-149.504 229.888z" fill="#56a4ef"></path></svg>'
}
},
onLoad() {},
methods: {
search(b) {
//微信小程序支持 b.target.target.id
console.log('search', b, b.detail.value);
},
list_dot(){
this.popmenu({items:[{name:'菜单'}]});
}
}
}
</script>