'首页添加日计划模块'

zhangxiaoxu123

2022-07-29 0c4086cfdbc5bbff567bd05ebcc6e34e36cb2bf9

 components/common/combination-card/combination-card.vue

@@ -1,61 +1,70 @@
<template>
   <!-- 组合卡片 -->
   <view class="combination-card">
      <view class="combination-card_wrapper">
         <view class="combination-card_top">
            <view class="combination-card_top__content">
               <slot name="top"></slot>
            </view>
         </view>
         <view class="combination-card_content">
            <slot name="center"></slot>
         </view>
         <view class="combination-card_bottom">
            <slot name="bottom" a="$slots.name"></slot>
         </view>
      </view>
   </view>
</template>

<script>
export default {
   data() {
      return {};
   },
   methods: {}
};
</script>

<style lang="scss" scoped>
.combination-card {
   width: 91%;
   // height: vww(196);
   border: 1px solid #dddddd;
   margin: 0 auto vww(16) ;
   .combination-card_wrapper {
      font-size:vww(13);
      .combination-card_top {
         // height: vww(16);
         padding:vww(8);
         background-color: #f5f5f5;
         border-bottom:1px solid #dddddd;
         .combination-card_top__content{
            display:flex;
            align-items: center;
         }
      }
      .combination-card_content {
         // height: vww(98);
         padding:vww(16);
      }
      .combination-card_bottom {
         height: vww(16);
         padding:vww(8);
         background-color: #f5f5f5;
         border-top:1px solid #dddddd;
         display:flex;
         justify-content: center;
      }
   }
}
<template>

   <!-- 组合卡片 -->

   <view class="combination-card">

      <view class="combination-card_wrapper">

         <view class="combination-card_top" v-show="showTop">

            <view class="combination-card_top__content">

               <slot name="top"></slot>

            </view>

         </view>

         <view class="combination-card_content">

            <slot name="center"></slot>

         </view>

         <view class="combination-card_bottom" v-show="showBottom">

            <slot name="bottom" a="$slots.name"></slot>

         </view>

      </view>

   </view>

</template>



<script>

export default {

   props: {

      showTop: {

         type: Boolean,

         default: true

      }

   },

   data() {

      return {};

   },

   methods: {},

   mounted() {

      console.log(this.showTop,'showTop--------')

   }

};

</script>



<style lang="scss" scoped>

.combination-card {

   width: 91%;

   // height: vww(196);

   border: 1px solid #dddddd;

   margin: 0 auto vww(16) ;

   .combination-card_wrapper {

      font-size:vww(13);

      .combination-card_top {

         // height: vww(16);

         padding:vww(8);

         background-color: #f5f5f5;

         border-bottom:1px solid #dddddd;

         .combination-card_top__content{

            display:flex;

            align-items: center;

         }

      }

      .combination-card_content {

         // height: vww(98);

         padding:vww(16);

      }

      .combination-card_bottom {

         height: vww(16);

         padding:vww(8);

         background-color: #f5f5f5;

         border-top:1px solid #dddddd;

         display:flex;

         justify-content: center;

      }

   }

}

</style>