It was the first time to develop the WeChat public account. The overall framework was built by the manager. Xiaoyi only realized some functions and the overall page effect.
The entire page uses two components: layout FlexBox, search box Search, demo documentation http://vue.ydui.org/docs/#/quickstart
app.view
<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>Energy consumption ranking</yd-flexbox-item>
<yd-flexbox-item>Room number</yd-flexbox-item>
<yd-flexbox-item>Energy consumption</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: '',//corresponding to the v-model of all buttons, an error will be reported if not written
}
}
}
</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){//Odd rows, even rows have different colors
background-color: #ffffff;
}
</style>
index.html
main.js
import View from 'view';
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 correspond to the ones in vue
I didn't know what to write at first, but then I was covered up, embarrassed. . . . . .
*/
Vue.component ('yd-flexbox', FlexBox);
Vue.component ('yd-flexbox-item', FlexBoxItem);
Vue.component('yd-search ', Search);
/* eslint-disable no-new */
new View({
el: '#powerrank',
components: { Powerrank },
template: '<Powerrank/>'
});