buddhism/pages/institutionalStructure/institutionalStructure.vue

<template>
  <view class="page">
    <u-navbar title="建制" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
              title-size='36' height='36' id="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="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 class="data">
	  	<view class="row">

	  		<view>左上</view>
	  		<view>右上</view>
	  	</view>
	  	<view class="row">
	  		<view>左下</view>
	  		<view>右下</view>
	  	</view>
	  </view>
    </view>

  </view>
</template>

<script>
import { tilesImageEnum } from '@/enum/institutionalStructure.js';

export default {
  data() {
    return {
      bgc: {
        backgroundColor: "#F5F0E7",
      },
      tilesImageEnum
    }
  },
  onLoad() {

  },
  methods: {

  }
}
</script>

<style lang="scss">
page {
  background: #F5F0E7;
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  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>