解决冲突

guoshilong

2023-10-30 ddc28c19784fbc6adaf30c0898a7be1573cd0c93

 components/boxTitle/index.vue

@@ -1,10 +1,23 @@
<template>
   <view class="cur-container" :style="{color: color}">
      <view class="title">
         {{title}}
      </view>
      <view class="bg-box">
      <view class="l">
         <view class="title">
            <view>
               {{title}}
            </view>

            <view class="title-more">
               <slot name="titleMore"></slot>
            </view>
         </view>
         <view class="bg-box">

         </view>
      </view>
      <view class="r">
         <view class="more">
            <slot name="more"></slot>
         </view>
      </view>
   </view>
</template>
@@ -30,27 +43,51 @@

<style lang="scss" scoped>
   .cur-container {
      padding-left: 10rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      padding: 0 10rpx;
      height: 60rpx;
      justify-content: space-between;
      align-items: center;

      .title {
      .l {
         height: 100%;
         display: flex;
         position: absolute;
         z-index: 1;
         justify-content: flex-start;

         position: relative;

         .title {
            display: flex;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
            z-index: 99;

            .title-more {
               margin-left: 20rpx;
            }
         }

         .bg-box {
            position: absolute;
            top: 50%;
            bottom: 0;
            width: 96rpx;
            background: linear-gradient(to right, #2991faff, #73A2F900);
            z-index: 1;
         }
      }

      .bg-box {
         position: absolute;
         top: 50%;
         left: 10rpx;
         bottom: 0;
         width: 96rpx;
         background: linear-gradient(to right, #2991faff, #73A2F900);
         z-index: 0;
      .r {
         height: 100%;
         display: flex;
         justify-content: flex-end;

         .more {
            display: flex;
            justify-content: center;
            align-items: center;
         }
      }
   }
</style>