WindowBird/buddhism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

建制创建-静态页面

Browse Source
This commit is contained in:
minimaxagent1 2025-07-29 09:53:04 +08:00
parent d01d2eabeb
commit a813acfb70
2 changed files with 89 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
enum/institutionalStructure.js Normal file
View File

@ -0,0 +1,7 @@
export const tilesImageEnum = {
TILE: "https://api.ccttiot.com/image-1753750309203.png", // 瓦片图片
};
export default tilesImageEnum;

96
pages/institutionalStructure/institutionalStructure.vue
View File

@ -3,31 +3,60 @@
<u-navbar title="建制" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37' <u-navbar title="建制" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
title-size='36' height='36' id="navbar"> title-size='36' height='36' id="navbar">
</u-navbar> </u-navbar>
<view class="tile">
<view class="tile-item" v-for="(item, index) in 10" :key="index">
<image :src="tilesImageEnum.TILE" mode="aspectFit" class="tile-image"></image>
</view>
</view>
<view class="container"> <view class="container">
<view> <view class="data">
111 <view class="row">
</view>
<view> <view>左上</view>
222 <view>右上</view>
</view> </view>
<view> <view class="row">
222 <view>左下</view>
</view> <view>右下</view>
<view> </view>
222 </view>
<view class="data">
<view class="row">
<view>左上</view>
<view>右上</view>
</view>
<view class="row">
<view>左下</view>
<view>右下</view>
</view>
</view>
<view class="data">
<view class="row">
<view>左上</view>
<view>右上</view>
</view>
<view class="row">
<view>左下</view>
<view>右下</view>
</view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import { tilesImageEnum } from '@/enum/institutionalStructure.js';
export default { export default {
data() { data() {
return { return {
bgc: { bgc: {
backgroundColor: "#F5F0E7", backgroundColor: "#F5F0E7",
}, },
tilesImageEnum
} }
}, },
onLoad() { onLoad() {
@ -47,9 +76,48 @@ page {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: center;
flex-direction: column; flex-direction: column;
background-color: #FFFBF5; background-color: #FFFBF5;
padding: 0 11rpx;
}
.tile {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
box-sizing: border-box;
}
.tile-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.tile-image {
width: 75rpx;
height: 48rpx;
}
.data{
background-color: #FFFBF5;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 100%;
box-sizing: border-box;
height: 180rpx;
border-radius: 11px;
border: 1px solid #C7A26D;
margin: 8rpx 0;
}
.row{
flex: 1;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20rpx;
} }
</style> </style>