186 lines
4.3 KiB
Vue
186 lines
4.3 KiB
Vue
<template>
|
|
<view>
|
|
<view class="grid-container">
|
|
<view class="grid-item">
|
|
<view class="icon1">
|
|
<image src="@/static/image/event.png"></image>
|
|
</view>
|
|
<div class="caption">事件提醒</div>
|
|
</view>
|
|
<view class="grid-item">
|
|
<view class="icon2">
|
|
<image src="../../static/image/alarm.png"></image>
|
|
</view>
|
|
<div class="caption">紧急通知</div>
|
|
</view>
|
|
<view class="grid-item">
|
|
<view class="icon3">
|
|
<image src="../../static/image/policy.png"></image>
|
|
</view>
|
|
<div class="caption">政策通知</div>
|
|
</view>
|
|
<view class="grid-item">
|
|
<view class="icon4">
|
|
<image src="../../static/image/things.png"></image>
|
|
</view>
|
|
<div class="caption">事物通知</div>
|
|
</view>
|
|
</view>
|
|
<scroll-view class="scoll">
|
|
<view class="column" :style="columnStyle1" @click="selected1()">事件提醒</view>
|
|
<view class="column" :style="columnStyle2" @click="selected2()">紧急通知</view>
|
|
<view class="column" :style="columnStyle3" @click="selected3()">政策通知</view>
|
|
<view class="column" :style="columnStyle4" @click="selected4()">事物通知</view>
|
|
</scroll-view>
|
|
<view v-if="nowcomponent === 'work'">
|
|
<work></work>
|
|
</view>
|
|
<view v-if="nowcomponent === 'emergent'">
|
|
<emergent></emergent>
|
|
</view>
|
|
<view v-if="nowcomponent === 'policy'">
|
|
<policy></policy>
|
|
</view>
|
|
<view v-if="nowcomponent === 'thing'">
|
|
<thing></thing>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import work from '../../components/messages/work.vue';
|
|
import emergent from '../../components/messages/emergent.vue';
|
|
import policy from '../../components/messages/policy.vue';
|
|
import thing from '../../components/messages/thing.vue'
|
|
export default {
|
|
components: {
|
|
work,emergent,policy,thing
|
|
},
|
|
data() {
|
|
return {
|
|
nowcomponent:'',
|
|
columnStyle1: '',
|
|
columnStyle2: '',
|
|
columnStyle3: '',
|
|
columnStyle4: '',
|
|
};
|
|
},
|
|
methods: {
|
|
selected1() {
|
|
this.nowcomponent = 'work';
|
|
this.columnStyle1 = `color: red;`;
|
|
this.columnStyle2 = this.columnStyle3 = this.columnStyle4 =`color:black`;
|
|
//console.log(this.index)
|
|
},
|
|
selected2() {
|
|
this.nowcomponent = 'emergent';
|
|
this.columnStyle2 = `color: red;`;
|
|
this.columnStyle1 = this.columnStyle3 = this.columnStyle4 =`color:black`;
|
|
},
|
|
selected3() {
|
|
this.nowcomponent = 'policy';
|
|
this.columnStyle3 = `color: red;`;
|
|
this.columnStyle1 = this.columnStyle2 = this.columnStyle4 =`color:black`;
|
|
|
|
},
|
|
selected4() {
|
|
this.nowcomponent = 'thing'
|
|
this.columnStyle4 = `color: red;`;
|
|
this.columnStyle1 = this.columnStyle2 = this.columnStyle3 =`color:black`;
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.grid-container {
|
|
background-color: #ffffff;
|
|
display: flex; /* 使用 Flexbox 布局 */
|
|
flex-wrap: no; /* 允许换行 */
|
|
justify-content: space-between; /* 主轴上均匀分布项目 */
|
|
align-content: space-between; /* 交叉轴上均匀分布项目 */
|
|
width: 100%; /* 视图宽度 */
|
|
height: 150rpx; /* 视图高度 */
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.grid-item {
|
|
flex: 0 0 calc(25%); /* 占据一半宽度减去一半的间距 */
|
|
background-color: #ffffff; /* 背景颜色 */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 2em;
|
|
color: #ffffff;
|
|
flex-direction: column;
|
|
}
|
|
.icon1{
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
background-color: rgb(189,220,253);
|
|
image{
|
|
margin: 16rpx;
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
}
|
|
}
|
|
.icon2{
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
background-color: rgb(255,207,199);
|
|
image{
|
|
margin: 16rpx;
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
}
|
|
}
|
|
.icon3{
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
background-color: rgb(187,243,220);
|
|
image{
|
|
margin: 16rpx;
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
}
|
|
}
|
|
.icon4{
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
background-color: rgb(202,232,252);
|
|
image{
|
|
margin: 16rpx;
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
}
|
|
}
|
|
.scoll{
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
margin-bottom: 10rpx;
|
|
.column{
|
|
display: inline-block;
|
|
width: 20%;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
margin-left: 10rpx;
|
|
font-weight: 100;
|
|
color: black;
|
|
}
|
|
}
|
|
.caption {
|
|
text-align: center; /* 文字居中 */
|
|
color: black;
|
|
font-size: 26rpx;
|
|
margin-top: 5rpx;
|
|
}
|
|
</style> |