初次开发微信公众号，整体框架是经理搭建，小喽喽只是实现部分功能，整体页面效果
整个页面使用两个组件：布局 FlexBox,搜索框 Search，demo文档 http://vue.ydui.org/docs/#/quickstart
app.vue
<template><div id="powerrank">
<yd-flexbox>
<yd-flexbox-item><span style="font-size: 16px;">测试数据</span></yd-flexbox-item>
</yd-flexbox>
<yd-flexbox>
<yd-flexbox-item>
<div id="search">
<yd-search cancel-text v-model="value"></yd-search>
</div>
</yd-flexbox-item>
</yd-flexbox>
<yd-flexbox>
<yd-flexbox-item>能耗排行</yd-flexbox-item>
<yd-flexbox-item>房间号</yd-flexbox-item>
<yd-flexbox-item>能耗程度</yd-flexbox-item>
</yd-flexbox>
<div id="data">
<yd-flexbox>
<yd-flexbox-item>测试</yd-flexbox-item>
<yd-flexbox-item>测试</yd-flexbox-item>
<yd-flexbox-item>测试</yd-flexbox-item>
</yd-flexbox>
</div>
</div>
</template> <script> export default { name: 'Powerrank', data(){ return{ value: '',//对应所有按钮的v-model，不写会报错 } } } </script> <style> #powerrank{ } .yd-flexbox { height:0.8rem; background-color: #4695e0; color: white; font-size: 14px; text-align: center; } #search{ height:50%; width:80%; background-color: white; margin:auto; color: #4695e0; } #data .yd-flexbox{ height:0.5rem; color: black; background-color: #f4f4f4; } #data .yd-flexbox:nth-child(2n){//奇数行，偶数行颜色不一样 background-color: #ffffff; } </style>index.html
main.js
import Vue from 'vue';
import {FlexBox, FlexBoxItem} from 'vue-ydui/dist/lib.rem/flexbox';
import {Search} from 'vue-ydui/dist/lib.rem/search';
import Powerrank from './App';
import 'vue-ydui/dist/ydui.base.css';
/**
yd-flexbox,yd-flexbox-item,yd-search对应vue中的
刚开始不知道写啥，后来就蒙上了，尬。。。。。。
*/
Vue.component('yd-flexbox', FlexBox);
Vue.component('yd-flexbox-item', FlexBoxItem);
Vue.component('yd-search', Search);
/* eslint-disable no-new */
new Vue({
el: '#powerrank',
components: { Powerrank },
template: '<Powerrank/>'
});
效果图
