shuishen
2023-10-28 ed8a450409d89a448b4394300d33ebc2fd31fe0d
components/gridMenu/index.vue
@@ -1,16 +1,22 @@
<template>
   <view class="cur-container">
      <view>
         {{gridData.title}}
      <view v-if="!gridData.useSlot">
         <view>
            {{gridData.title}}
         </view>
         <view>
            <view class="l">
               {{gridData.data}}
            </view>
            <view class="r">
               <u-icon name="phone-fill" color="#fff"></u-icon>
               {{gridData.phone}}
            </view>
         </view>
      </view>
      <view>
         <view class="l">
            {{gridData.data}}
         </view>
         <view class="r">
            <u-icon name="phone-fill" color="#fff"></u-icon>
            {{gridData.phone}}
         </view>
      <view class="slot-box" v-else>
         {{gridData.title}}
      </view>
   </view>
</template>
@@ -33,33 +39,45 @@
<style lang="scss" scoped>
   .cur-container {
      padding: 10rpx;
      display: flex;
      flex-direction: column;
      & > view:first-child {
         height: 60%;
      &>view {
         flex: 1;
         padding: 10rpx;
         display: flex;
         align-items: center;
         justify-content: flex-start;
      }
      & > view:last-child {
         height: 40%;
         display: flex;
         justify-content: space-between;
         align-items: center;
         font-size: 24rpx;
         .l {
         flex-direction: column;
         &>view:first-child {
            height: 60%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
         }
         .r {
         &>view:last-child {
            height: 40%;
            display: flex;
            justify-content: flex-end;
            justify-content: space-between;
            align-items: center;
            font-size: 24rpx;
            .l {
               justify-content: flex-start;
            }
            .r {
               display: flex;
               justify-content: flex-end;
               align-items: center;
            }
         }
      }
      .slot-box {
         padding: 10rpx;
         display: flex;
         align-items: center;
         justify-content: center;
      }
   }
</style>