115 lines
2.2 KiB
Vue
115 lines
2.2 KiB
Vue
<template>
|
||
<CpBg>
|
||
<view class="container-top">
|
||
<image src="@/static/backgroup.png"></image>
|
||
</view>
|
||
|
||
<view class="container-dict">
|
||
<view class="container-dict-title" style="margin-left: 20rpx;">这是条公告消息，提升城市管理水平。</view>
|
||
</view>
|
||
|
||
<view class="container-card">
|
||
<view class="container-info">报修信息</view>
|
||
<view class="container-card-body">
|
||
<view class="container-card-body-item" v-for="_ in 8">
|
||
<image src='@/static/logo.png'></image>
|
||
<view>日程安排</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="container-card">
|
||
<view class="container-info">投诉建议</view>
|
||
<view class="container-card-body">
|
||
<view class="container-card-body-item" v-for="_ in 8">
|
||
<image src='@/static/logo.png'></image>
|
||
<view>日程安排</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="container-card">
|
||
<view class="container-info">园区管理</view>
|
||
<view class="container-card-body">
|
||
<view class="container-card-body-item" v-for="_ in 4">
|
||
<image src='@/static/logo.png'></image>
|
||
<view>日程安排</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</CpBg>
|
||
</template>
|
||
|
||
<script setup>
|
||
import CpBg from '@/components/Cp_Bg.vue';
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.container{
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
$globalWidth: 600rpx;
|
||
$buttonColor: #0e7ff5;
|
||
|
||
.container-top {
|
||
margin-top: 50rpx;
|
||
|
||
image {
|
||
width: $globalWidth;
|
||
height: 300rpx;
|
||
}
|
||
}
|
||
|
||
.container-dict {
|
||
margin-top: 50rpx;
|
||
width: $globalWidth;
|
||
height: 80rpx;
|
||
background-color: rgba(247, 251, 254, 1);
|
||
line-height: 80rpx;
|
||
}
|
||
|
||
|
||
.container-card {
|
||
width: 560rpx;
|
||
border-radius: 20rpx;
|
||
background-color: white;
|
||
padding: 20rpx;
|
||
margin-top: 40rpx;
|
||
|
||
|
||
}
|
||
|
||
// 报修信息
|
||
.container-info{
|
||
font-size: 35rpx;
|
||
margin-bottom: 10rpx;
|
||
width: 140rpx;
|
||
height: 35rpx;
|
||
border-bottom: 10rpx solid #b6d8fc;
|
||
|
||
}
|
||
|
||
.container-card-body{
|
||
display: flex;
|
||
width: 100%;
|
||
flex-wrap: wrap;
|
||
|
||
.container-card-body-item{
|
||
flex: 1 1 25%; /* 每个子项占父容器的 25% 宽度 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
margin-top: 20rpx;
|
||
image{
|
||
|
||
width: 80rpx;
|
||
height:80rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
</style> |