<template>
<view class="wrap">
<uni-section title="基础样式" type="line" padding>
<uni-grid :column="4" :highlight="true" @change="change">
<uni-grid-item v-for="(item, index) in 4" :index="index" :key="index">
<view class="grid-item-box" style="background-color: #fff;">
<uni-icons type="image" :size="30" color="#777" />
<text class="text">文本信息</text>
</view>
</uni-grid-item>
</uni-grid>
</uni-section>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
change() {},
}
} </script>
<style lang="scss">
.wrap {
padding: 10px;
}
.image {
width: 25px;
height: 25px;
}
.text {
font-size: 14px;
margin-top: 5px;
}
.example-body {
/* #ifndef APP-NVUE */
// display: block;
/* #endif */
}
.grid-dynamic-box {
margin-bottom: 15px;
}
.grid-item-box {
flex: 1;
// position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px 0;
}
.grid-item-box-row {
flex: 1;
// position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
padding: 15px 0;
}
.grid-dot {
position: absolute;
top: 5px;
right: 15px;
}
.swiper {
height: 420px;
}
/* #ifdef H5 */
@media screen and (min-width: 768px) and (max-width: 1425px) {
.swiper {
height: 630px;
}
}
@media screen and (min-width: 1425px) {
.swiper {
height: 830px;
}
}
/* #endif */ </style>
